/* =========================================================================
   EPICVIEW — Header global (header.css)
   [icône accueil · logo centré · Membre+/Connexion]
   [navigation séparée par des « | » · sélecteur de langue]
   [recherche centrée, minimale, s'ouvre au survol]
   Se masque au scroll vers le bas, réapparaît au scroll vers le haut.
   Dépend des tokens définis dans home.css (--ev-red, --ev-font, etc.).
   ========================================================================= */

.ev-hdr {
  position: sticky; top: 0; z-index: 120;
  background: rgba(6, 6, 8, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ev-line);
  transition: background .35s var(--ev-ease), box-shadow .35s var(--ev-ease), transform .4s var(--ev-ease);
}
.ev-hdr.is-scrolled { box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.ev-hdr.is-hidden { transform: translateY(-100%); }
.ev-hdr * { box-sizing: border-box; }

.ev-hdr-offset { scroll-margin-top: 190px; }

/* =========================================================================
   1. RANGÉE HAUTE — accueil · logo centré · actions
      (pleine largeur, pas de max-width : accueil et actions collés aux bords)
   ========================================================================= */
.ev-hdr__top-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem; padding-block: clamp(.8rem, 2vw, 1.05rem);
  padding-inline: clamp(1rem, 3vw, 2.2rem);
  width: 100%;
}

.ev-hdr__home {
  grid-column: 1; justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; color: #fff;
  transition: background .25s var(--ev-ease), transform .25s var(--ev-ease);
}
.ev-hdr__home svg { width: 21px; height: 21px; }
.ev-hdr__home:hover { background: rgba(255, 255, 255, .08); transform: translateY(-1px); }

.ev-hdr__burger {
  grid-column: 1; justify-self: start; display: none;
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--ev-line);
  padding: 0; margin: 0;
  /* place-items ne s'applique qu'aux conteneurs grid : pour un flex, il faut
     align-items (axe transversal) + justify-content (axe principal) */
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.ev-hdr__burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--ev-ease), opacity .3s var(--ev-ease); }
body.ev-hdr-drawer-open .ev-hdr__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.ev-hdr-drawer-open .ev-hdr__burger span:nth-child(2) { opacity: 0; }
body.ev-hdr-drawer-open .ev-hdr__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Le fichier logo-png-epicview.png est un canevas carré 4000×4000 très majoritairement
   transparent : le texte « EPICVIEW. » n'occupe qu'une bande de 2977×552px en son centre
   (ratio 5.39:1). --logo-h pilote la hauteur VISIBLE du logo ; le reste est calculé pour
   recadrer l'image en conséquence (zoom + repositionnement), sans dépendre d'un fichier
   pré-recadré. */
.ev-hdr__logo {
  --logo-h: clamp(28px, 4vw, 44px);
  margin-top: 12px;
  grid-column: 2; justify-self: center;
  display: block; position: relative; overflow: hidden;
  width: calc(var(--logo-h) * 5.393); height: var(--logo-h);
  text-decoration: none; line-height: 1;
  transition: transform .3s var(--ev-ease), filter .3s var(--ev-ease);
}
.ev-hdr__logo img {
  position: absolute; max-width: none;
  width: calc(var(--logo-h) * 7.246); height: calc(var(--logo-h) * 7.246);
  left: calc(var(--logo-h) * -1.13); top: calc(var(--logo-h) * -3.237);
}
.ev-hdr__logo:hover { transform: translateY(-1px); filter: drop-shadow(0 0 20px rgba(255, 91, 91, .4)); }

/* Dans le drawer mobile (colonne étroite), une version plus compacte du même recadrage */
.ev-hdr__drawer-head .ev-hdr__logo { --logo-h: 34px; }

.ev-hdr__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .6rem; }
.ev-hdr__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .65rem 1.3rem; border-radius: 100px; cursor: pointer;
  font-family: var(--ev-font); font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; color: #fff;
  background: linear-gradient(100deg, var(--ev-red-lite), var(--ev-red));
  box-shadow: 0 10px 26px rgba(164, 0, 0, .38);
  transition: transform .3s var(--ev-ease), box-shadow .3s var(--ev-ease), filter .3s var(--ev-ease);
}
.ev-hdr__btn svg { width: 15px; height: 15px; }
.ev-hdr__btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(164, 0, 0, .55); filter: brightness(1.06); }
.ev-hdr__btn__plus { font-weight: 800; margin-left: .1rem; }

/* =========================================================================
   2. RANGÉE NAVIGATION — 6 liens vraiment centrés, langue à droite,
      aucun séparateur (le seul séparateur du header est dans la recherche).
   ========================================================================= */
.ev-hdr__nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}
.ev-hdr__menu {
  grid-column: 2;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  list-style: none; margin: 0; padding: 0;
}
.ev-hdr__menu > li { position: relative; display: flex; align-items: center; }
.ev-hdr__menu > li > a,
.ev-hdr__menu > li > .ev-hdr__sub-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .9rem .85rem; border: none; background: none; cursor: pointer;
  font-family: var(--ev-font); font-size: .86rem; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; color: #e9e9ee; white-space: nowrap;
  position: relative;
  transition: color .25s var(--ev-ease);
}
/* le trait rouge qui apparaît au survol, repris du premier header */
.ev-hdr__menu > li > a::after,
.ev-hdr__menu > li > .ev-hdr__sub-toggle::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .35rem; height: 2px;
  background: linear-gradient(90deg, var(--ev-red-lite), var(--ev-red));
  border-radius: 2px; transform: scaleX(0); transform-origin: center;
  transition: transform .3s var(--ev-ease);
}
.ev-hdr__menu > li > a:hover,
.ev-hdr__menu > li > .ev-hdr__sub-toggle:hover,
.ev-hdr__menu > li.is-current > a { color: var(--ev-red-lite); }
.ev-hdr__menu > li > a:hover::after,
.ev-hdr__menu > li > .ev-hdr__sub-toggle:hover::after,
.ev-hdr__menu > li.is-current > a::after { transform: scaleX(1); }
.ev-hdr__chev { width: 12px; height: 12px; transition: transform .3s var(--ev-ease); }
.ev-hdr__has-sub:hover > a .ev-hdr__chev,
.ev-hdr__has-sub:hover > .ev-hdr__sub-toggle .ev-hdr__chev,
.ev-hdr__has-sub.is-open .ev-hdr__chev { transform: rotate(180deg); }

/* Sous-menu déroulant */
.ev-hdr__sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 220px; list-style: none; margin: 0; padding: .5rem;
  background: linear-gradient(180deg, #141418, #0d0d10);
  border: 1px solid var(--ev-line); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ev-ease), transform .28s var(--ev-ease), visibility .28s;
  z-index: 5;
}
.ev-hdr__has-sub:hover > .ev-hdr__sub,
.ev-hdr__has-sub:focus-within > .ev-hdr__sub,
.ev-hdr__has-sub.is-open > .ev-hdr__sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.ev-hdr__sub li a {
  display: block; padding: .65rem .9rem; border-radius: 10px;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
  color: var(--ev-grey); text-decoration: none; white-space: nowrap;
  transition: background .22s var(--ev-ease), color .22s var(--ev-ease);
}
.ev-hdr__sub li a:hover { background: rgba(164, 0, 0, .16); color: #fff; }

/* Sélecteur de langue (visuel — un seul site FR pour l'instant) */
.ev-hdr__lang { grid-column: 3; justify-self: end; position: relative; flex: 0 0 auto; }
.ev-hdr__lang-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .3rem; border: none; background: none; cursor: pointer;
  font-family: var(--ev-font); font-size: .84rem; font-weight: 600; color: #e9e9ee;
}
.ev-hdr__flag { font-size: 1rem; line-height: 1; }
.ev-hdr__lang-btn .ev-hdr__chev { color: var(--ev-grey-dim); }
.ev-hdr__lang:hover .ev-hdr__chev, .ev-hdr__lang.is-open .ev-hdr__chev { transform: rotate(180deg); }
.ev-hdr__lang-menu {
  position: absolute; top: 100%; right: 0; transform: translateY(8px);
  min-width: 160px; list-style: none; margin: 0; padding: .4rem;
  background: linear-gradient(180deg, #141418, #0d0d10);
  border: 1px solid var(--ev-line); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ev-ease), transform .25s var(--ev-ease), visibility .25s;
}
.ev-hdr__lang:hover .ev-hdr__lang-menu,
.ev-hdr__lang.is-open .ev-hdr__lang-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.ev-hdr__lang-menu button {
  display: flex; align-items: center; gap: .55rem; width: 100%; padding: .55rem .7rem;
  border: none; background: none; border-radius: 8px; cursor: pointer;
  font-family: var(--ev-font); font-size: .82rem; font-weight: 600; color: var(--ev-grey); text-align: left;
}
.ev-hdr__lang-menu button.is-active { color: #fff; background: rgba(164, 0, 0, .16); }
.ev-hdr__lang-menu button:hover { color: #fff; }

/* =========================================================================
   3. RANGÉE RECHERCHE — minimale, centrée, s'ouvre au survol.
      Seul séparateur de tout le header : un trait centré sous la barre,
      qui s'élargit en même temps qu'elle au survol/focus.
   ========================================================================= */
.ev-hdr__searchrow {
  display: flex; justify-content: center;
  padding: .5rem 1rem 1rem;
}
.ev-hdr-search {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: clamp(150px, 16vw, 190px); max-width: 92vw;
  padding: .55rem 1rem; border-radius: 100px;
  border: 1px solid transparent; background: transparent;
  transition: width .45s var(--ev-ease), border-color .3s var(--ev-ease), background .3s var(--ev-ease), box-shadow .3s var(--ev-ease);
}
/* le séparateur unique : petit trait centré, s'élargit avec la barre */
.ev-hdr-search::after {
  content: ""; position: absolute; left: 50%; bottom: -.55rem; transform: translateX(-50%);
  width: 28px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ev-red-lite), var(--ev-red), transparent);
  opacity: .55;
  transition: width .45s var(--ev-ease), opacity .3s var(--ev-ease);
}
.ev-hdr-search:hover::after,
.ev-hdr-search:focus-within::after,
.ev-hdr-search.is-open::after { width: min(560px, 92vw); opacity: 1; }
.ev-hdr-search:hover,
.ev-hdr-search:focus-within,
.ev-hdr-search.is-open {
  width: min(560px, 92vw);
  border-color: rgba(164, 0, 0, .5); background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 4px rgba(164, 0, 0, .12);
}
.ev-hdr-search__icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ev-grey-dim); transition: color .3s var(--ev-ease); order: 2; }
.ev-hdr-search:hover .ev-hdr-search__icon,
.ev-hdr-search:focus-within .ev-hdr-search__icon { order: 0; color: var(--ev-red-lite); }
.ev-hdr-search input {
  /* au repos : largeur au plus près du mot "Rechercher", collée à l'icône
     (le groupe icône+texte est centré dans la pastille via justify-content).
     Au survol/focus : reprend flex:1 pour occuper toute la barre dépliée. */
  flex: 0 0 auto; width: 6.2em; min-width: 0;
  background: none; border: none; outline: none;
  color: #fff; font-family: var(--ev-font); font-size: .88rem; text-align: left;
  transition: flex .3s var(--ev-ease);
}
.ev-hdr-search:hover input, .ev-hdr-search:focus-within input, .ev-hdr-search.is-open input {
  flex: 1 1 auto; width: auto;
}
.ev-hdr-search input::placeholder { color: var(--ev-grey-dim); }
.ev-hdr-search__clear {
  flex: 0 0 auto; width: 22px; height: 22px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: var(--ev-grey); font-size: .7rem;
  transition: background .25s var(--ev-ease), color .25s var(--ev-ease);
}
.ev-hdr-search__clear[hidden] { display: none; }
.ev-hdr-search__clear:hover { background: var(--ev-red); color: #fff; }

/* Résultats */
.ev-hdr-search__results {
  position: absolute; top: calc(100% + .6rem); left: 0; right: 0;
  background: linear-gradient(180deg, #141418, #0d0d10);
  border: 1px solid var(--ev-line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .65);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ev-ease), transform .25s var(--ev-ease), visibility .25s;
  z-index: 6; max-height: min(60vh, 460px); overflow-y: auto;
}
.ev-hdr-search.is-results .ev-hdr-search__results { opacity: 1; visibility: visible; transform: translateY(0); }
.ev-hdr-search__hint { padding: .9rem 1.1rem; font-size: .8rem; color: var(--ev-grey-dim); }
.ev-hdr-search__hint b { color: var(--ev-red-lite); }
.ev-hdr-res {
  display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left;
  padding: .8rem 1.1rem; border: none; background: none; cursor: pointer; text-decoration: none;
  transition: background .18s var(--ev-ease);
}
.ev-hdr-res:hover, .ev-hdr-res.is-active { background: rgba(164, 0, 0, .16); }
.ev-hdr-res__ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--ev-line);
}
.ev-hdr-res__ico svg { width: 17px; height: 17px; color: var(--ev-red-lite); }
.ev-hdr-res__txt { min-width: 0; }
.ev-hdr-res__title { display: block; font-size: .9rem; font-weight: 700; color: #fff; }
.ev-hdr-res__cat { display: block; font-size: .74rem; color: var(--ev-grey-dim); margin-top: .1rem; }
.ev-hdr-res mark { background: rgba(255, 91, 91, .28); color: #fff; border-radius: 3px; padding: 0 1px; }

/* =========================================================================
   MOBILE — burger + drawer
   ========================================================================= */
.ev-hdr__drawer {
  /* top:0 relatif au header (bloc conteneur créé par son backdrop-filter),
     mais taille en unités viewport pour couvrir tout l'écran.
     overflow:hidden est essentiel : sans lui, le panneau translaté hors-écran
     (translateX(100%) quand fermé) élargit quand même le scroll horizontal
     de tout le document. */
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 130;
  overflow: hidden;
  background: rgba(6, 6, 8, .8); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ev-ease), visibility .3s;
}
.ev-hdr__drawer.is-open { opacity: 1; visibility: visible; }
.ev-hdr__drawer-panel {
  position: absolute; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(360px, 88vw);
  background: linear-gradient(180deg, #121216, #0b0b0e); border-left: 1px solid var(--ev-line);
  padding: 1.4rem 1.2rem; overflow-y: auto;
  transform: translateX(100%); transition: transform .4s var(--ev-ease);
  display: flex; flex-direction: column; gap: 1.2rem;
}
.ev-hdr__drawer.is-open .ev-hdr__drawer-panel { transform: none; }
.ev-hdr__drawer-head { display: flex; align-items: center; justify-content: space-between; }
.ev-hdr__drawer-close {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--ev-line); color: #fff;
}
.ev-hdr__drawer-close svg { width: 18px; height: 18px; }
.ev-hdr__drawer-actions { display: flex; gap: .7rem; }
.ev-hdr__drawer-actions .ev-hdr__btn { flex: 1; justify-content: center; }
.ev-hdr__drawer-lang {
  display: flex; align-items: center; gap: .5rem; padding: .3rem .1rem;
  font-size: .82rem; font-weight: 600; color: var(--ev-grey);
}

.ev-hdr__mnav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ev-hdr__mnav > li { border-bottom: 1px solid var(--ev-line); }
.ev-hdr__mnav a, .ev-hdr__mnav .ev-hdr__macc-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: .95rem .3rem; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--ev-font); font-size: .96rem; font-weight: 600; color: #fff; text-decoration: none;
}
.ev-hdr__macc-btn svg { width: 16px; height: 16px; transition: transform .3s var(--ev-ease); }
.ev-hdr__macc.is-open .ev-hdr__macc-btn svg { transform: rotate(180deg); }
.ev-hdr__macc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ev-ease); }
.ev-hdr__macc.is-open .ev-hdr__macc-panel { grid-template-rows: 1fr; }
.ev-hdr__macc-inner { overflow: hidden; }
.ev-hdr__macc-panel a { padding: .7rem .3rem .7rem 1.2rem; font-size: .88rem; font-weight: 500; color: var(--ev-grey); }
.ev-hdr__macc-panel a:hover { color: var(--ev-red-lite); }

.ev-hdr__msearch { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .8rem 1rem; border-radius: 20px; border: 1px solid var(--ev-line); background: rgba(255,255,255,.04); }
.ev-hdr__msearch svg { width: 18px; height: 18px; color: var(--ev-grey-dim); flex: 0 0 auto; }
.ev-hdr__msearch input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: #fff; font-family: var(--ev-font); font-size: .92rem; }
.ev-hdr__msearch input::placeholder { color: var(--ev-grey-dim); }
#ev-hdr-msearch-results {
  position: static; width: 100%; opacity: 1; visibility: visible; transform: none;
  background: none; border: none; box-shadow: none; max-height: 44vh; margin-top: .3rem;
}
#ev-hdr-msearch-results:empty { display: none; }

@media (max-width: 900px) {
  .ev-hdr__nav, .ev-hdr__searchrow { display: none; }
  .ev-hdr__home { display: none; }
  .ev-hdr__burger { display: inline-flex; }
  .ev-hdr__actions { display: none; }
  .ev-hdr-offset { scroll-margin-top: 90px; }
}
@media (min-width: 901px) {
  .ev-hdr__drawer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-hdr, .ev-hdr-search, .ev-hdr__sub, .ev-hdr__lang-menu, .ev-hdr-search__results, .ev-hdr__drawer-panel, .ev-hdr__macc-panel { transition: none; }
}