/* En-tête de l'espace Academy — refonte du 24/08/2026, variante A.
   Reprend la structure de l'en-tête e-commerce étage pour étage : bandeau
   d'annonce, logo + recherche + compte + action, barre de navigation. Chargé
   uniquement quand $is_academy est vrai (header.tpl).
   Les couleurs viennent des jetons de marque (e4-tokens.css) ; elles sont
   écrites en clair là où le fichier peut être servi seul. */

.ga-hdr{background:#160029}
.ga-hdr-in{max-width:var(--gw-wrap,min(90%,1600px));margin:0 auto;padding:0 var(--gw-gutter,24px);
  display:flex;align-items:center;gap:20px}

/* ── Étage 1 : annonce ─────────────────────────────────────────────────── */
.ga-hdr-ann{background:linear-gradient(100deg,#3a0a63,#1a0033);color:#c9b8de;font-size:12.5px;font-family:'Poppins',sans-serif}
.ga-hdr-ann .ga-hdr-in{height:36px;justify-content:space-between}
.ga-hdr-ann b{color:#9bd968;font-weight:700}
.ga-hdr-ann a{color:#e6dbf5;font-weight:600;text-decoration:none}
.ga-hdr-ann a:hover{color:#9bd968}

/* ── Étage 2 : logo, recherche, compte, action ─────────────────────────── */
.ga-hdr-mid{background:linear-gradient(180deg,#2c0850,#160029)}
.ga-hdr-mid .ga-hdr-in{height:82px}
.ga-hdr-logo{display:flex;align-items:center;flex-shrink:0}
/* 40 px : la boutique affiche son logo à 54, l'ancien en-tête Academy à 26.
   40 le rapproche franchement de la boutique sans imposer les 82 px d'étage
   qu'exigerait le format complet. */
.ga-hdr-logo img{height:40px;width:auto;display:block}

.ga-hdr-srch{flex:1;min-width:0;max-width:520px;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:8px 8px 8px 16px;transition:border-color .16s,background .16s}
.ga-hdr-srch:focus-within{border-color:rgba(155,217,104,.55);background:rgba(255,255,255,.10)}
.ga-hdr-srch-ic{width:17px;height:17px;color:#b8a8cf;flex:0 0 17px}
.ga-hdr-srch input{flex:1;min-width:0;background:none;border:0;outline:none;color:#efe4fb;
  font-family:'Poppins',sans-serif;font-size:13.5px}
.ga-hdr-srch input::placeholder{color:#b8a8cf}
/* Le navigateur ajoute sa propre croix aux input[type=search] ; elle se pose
   mal sur un fond sombre et double le bouton d'effacement du clavier mobile. */
.ga-hdr-srch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.ga-hdr-srch button{flex:0 0 auto;border:0;cursor:pointer;background:linear-gradient(100deg,#8ed04e,#5e9a2a);
  color:#13002a;font-family:'Poppins',sans-serif;font-weight:700;font-size:12.5px;
  border-radius:999px;padding:8px 16px;transition:filter .16s}
.ga-hdr-srch button:hover{filter:brightness(1.07)}

.ga-hdr-acts{margin-left:auto;display:flex;align-items:center;gap:20px;flex-shrink:0}
.ga-hdr-acc{display:flex;flex-direction:column;align-items:center;gap:3px;color:#e6dbf5;text-decoration:none;
  font-family:'Poppins',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  transition:color .16s}
.ga-hdr-acc svg{width:20px;height:20px}
.ga-hdr-acc:hover,.ga-hdr-acc:focus-visible{color:#9bd968}
.ga-hdr-cta{display:flex;align-items:center;gap:8px;text-decoration:none;
  background:linear-gradient(100deg,#ffc53d,#f2a114);color:#2B004F;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;
  border-radius:12px;padding:11px 18px;white-space:nowrap;
  box-shadow:0 8px 14px rgba(242,161,20,.22);transition:.18s cubic-bezier(.22,1,.36,1)}
.ga-hdr-cta svg{width:15px;height:15px}
.ga-hdr-cta:hover{background:linear-gradient(100deg,#ffcd52,#f5a623);transform:translateY(-2px)}

/* ── Étage 3 : navigation ──────────────────────────────────────────────── */
.ga-hdr-nav{background:#230642;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.ga-hdr-nav .ga-hdr-in{height:46px;gap:26px}
.ga-hdr-links{display:flex;align-items:center;gap:26px;min-width:0}
.ga-hdr-lnk{color:#d9cceb;text-decoration:none;font-family:'Poppins',sans-serif;font-size:12.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:color .16s}
.ga-hdr-lnk:hover,.ga-hdr-lnk:focus-visible{color:#fff}
.ga-hdr-lnk.is-on{color:#9bd968}
.ga-hdr-back{margin-left:auto;display:flex;align-items:center;gap:7px;color:#c9b8de;text-decoration:none;
  font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;white-space:nowrap;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 12px;
  transition:background .16s,border-color .16s}
.ga-hdr-back svg{width:14px;height:14px}
.ga-hdr-back:hover,.ga-hdr-back:focus-visible{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#fff}

.ga-hdr a:focus-visible,.ga-hdr button:focus-visible{outline:2px solid #9bd968;outline-offset:2px}

/* ── Étroit ────────────────────────────────────────────────────────────────
   Sous 1000 px la recherche et le libellé du compte tombent : l'étage du
   milieu doit garder le logo ET le bouton d'action, qui sont l'essentiel.
   Sous 760 px l'annonce disparaît et la navigation devient un rail — les
   trois rubriques plus la pastille de retour font 480 px, l'écran en fait 358.
   ------------------------------------------------------------------------ */
@media (max-width:1000px){
  .ga-hdr-srch{display:none}
  .ga-hdr-acc span{display:none}
  .ga-hdr-acc{font-size:0}
}
@media (max-width:760px){
  .ga-hdr-ann{display:none}
  .ga-hdr-mid .ga-hdr-in{height:60px;gap:12px}
  .ga-hdr-logo img{height:30px}
  .ga-hdr-cta{padding:9px 13px;font-size:12px}
  /* Pas d'accrochage au défilement sur ce rail : avec `scroll-snap-align:start`
     sur le premier lien, le navigateur aligne son bord sur celui du conteneur
     dès le chargement et absorbe donc les 16 px de gouttière — la barre
     s'ouvrait à scrollLeft=16 et « LES 10 ÉTAPES » était tronqué à gauche,
     relevé à la mesure. Trois libellés courts n'ont rien à gagner à
     s'accrocher. */
  .ga-hdr-nav .ga-hdr-in{height:42px;gap:10px}
  .ga-hdr-links{flex:1;min-width:0;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%)}
  .ga-hdr-links::-webkit-scrollbar{height:0}
  .ga-hdr-lnk{flex:0 0 auto;font-size:11.5px}
  .ga-hdr-back{flex:0 0 auto;margin-left:0;padding:6px;border-radius:50%}
  .ga-hdr-back span{display:none}
}

/* Sous 480 px, l'étage du milieu ne tient plus : logo 129 + compte 20 + bouton
   195 + les écarts font 368 px pour 358 disponibles, et le bouton débordait de
   2 px hors de la gouttière droite — mesuré, pas estimé. Le bouton se resserre
   plutôt que de sacrifier le compte ou le logo. */
@media (max-width:480px){
  .ga-hdr-mid .ga-hdr-in{gap:10px}
  .ga-hdr-cta{font-size:11.5px;padding:8px 11px;gap:6px}
  .ga-hdr-cta svg{width:13px;height:13px}
  .ga-hdr-acts{gap:12px}
}

/* Filtre de recherche : une étape masquée l'est par le script. */
.ga-step[hidden]{display:none !important}
.ga-srch-vide{margin:18px 0 0;font-family:'Poppins',sans-serif;font-size:14px;color:#6d6480}

@media (prefers-reduced-motion:reduce){
  .ga-hdr-cta,.ga-hdr-acc,.ga-hdr-lnk,.ga-hdr-back,.ga-hdr-srch,.ga-hdr-srch button{transition:none}
  .ga-hdr-cta:hover{transform:none}
}