/* La barre du haut de la page d'accueil B (/v2/ et /de/v2/), en composant :
   ce fichier + v2/header.js. La page /v2/ la porte dans son HTML ; les autres
   pages du site la reçoivent de nav.js quand le visiteur a été tiré B (test
   A/B, docs/ab-test-accueil.md). Sur le ciel du hero de /v2/ (body.mm) elle
   est transparente en haut de page ; partout ailleurs elle est blanche. */

/* ═══ Jetons ═══ */
.mm, .mh {
  --m-accent: #5B6CF9;
  --m-accent-deep: #4353E8;
  --m-accent-soft: #EEF0FF;
  --m-cta: #10B981;
  --m-cta-dark: #047857;
  --m-dark: #2D2D3A;
  --m-muted: #6B6B7E;
  --m-line: #E6E7F0;
  /* La nuit du jeu (StarrySky de l'app) : hero, fond Kwiiz Quest, tarifs. */
  --m-night: linear-gradient(170deg, hsl(222 47% 11%) 0%, hsl(230 40% 16%) 50%, hsl(222 47% 11%) 100%);
  --f-head: 'Fredoka', system-ui, sans-serif;
  --f-sec: 'Plus Jakarta Sans', system-ui, sans-serif;
  --header-h: 76px;
}
@media (max-width: 720px) { .mm, .mh { --header-h: 64px; } }

/* ═══ Composant : le bouton à socle (mécanique de PrimaryCTA du dashboard) ═══
   Le socle est une ombre pleine ; translateY + épaisseur du socle = 6 dans
   chaque état, donc le bas du bouton ne bouge jamais. Vert = inscription. */
.mb {
  --mb-bg: var(--m-cta); --mb-fg: #fff; --mb-socle: var(--m-cta-dark); --mb-glow: rgba(16,185,129,.26);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; box-sizing: border-box;
  margin-bottom: 6px; /* la place du socle, qui ne compte pas dans la mise en page */
  padding: 13px 20px; border-radius: 12px; background: var(--mb-bg); color: var(--mb-fg);
  font-family: var(--f-sec); font-weight: 700; font-size: 16px; line-height: 1;
  text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 0 0 var(--mb-socle), 0 12px 28px var(--mb-glow);
  transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
}
html:not(.kwz-touch) .mb:hover:not(:active) { transform: translateY(-3px); box-shadow: 0 9px 0 0 var(--mb-socle), 0 16px 32px var(--mb-glow); }
.mb:active { transform: translateY(4px); box-shadow: 0 2px 0 0 var(--mb-socle), 0 4px 10px var(--mb-glow); filter: brightness(.94); }
.mb:focus-visible { outline: 3px solid var(--m-accent); outline-offset: 3px; }
.mb-lg { padding: 19px 32px; font-size: 19px; }
.mb-violet, .mb-head { --mb-bg: var(--m-accent); --mb-socle: #3D49C4; --mb-glow: rgba(91,108,249,.30); }
.mb-gold { --mb-bg: var(--gold); --mb-fg: #3B2A00; --mb-socle: #E0A63C; --mb-glow: rgba(224,166,60,.30); }
@media (max-width: 720px) {
  .mb { padding: 11px 14px; font-size: 15px; }
  .mb-lg { padding: 17px 24px; font-size: 18px; }
}

/* ═══ En-tête : les actions secondaires en texte, le bouton seul en couleur ═══ */
.mh { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: #fff; transition: box-shadow .3s; }
.mh.scrolled { box-shadow: 0 1px 0 var(--m-line); }
.mh-in { max-width: 1120px; margin: 0 auto; height: 100%; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mh-logo img { width: 100px; height: auto; }
.mh-main { display: flex; align-items: center; gap: 22px; margin: 0 auto 0 36px; }
.mh-nav { display: flex; align-items: center; gap: 22px; }
.mh-link { font: 600 15px var(--f-sec); color: var(--m-dark); text-decoration: none; padding: 8px 4px; border-radius: 8px; }
.mh-main .mh-link[aria-current="page"] { color: var(--m-accent-deep); }
html:not(.kwz-touch) .mh-link:hover { color: var(--m-accent-deep); text-decoration: underline; text-underline-offset: 4px; }
/* Sélecteur de langue : une pastille FR | DE, la langue active remplie. */
.mh-lang { margin-left: 12px; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: #EEF0F8; font: 700 12.5px var(--f-sec); text-decoration: none; transition: background .2s ease, transform .05s ease; }
.mh-lang-on, .mh-lang-off { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 8px; border-radius: 999px; }
.mh-lang-on { background: #fff; color: var(--m-accent-deep); box-shadow: 0 1px 3px rgba(45,45,58,.18); }
.mh-lang-off { color: var(--m-muted); font-weight: 600; transition: color .15s ease, background .15s ease; }
html:not(.kwz-touch) .mh-lang:hover .mh-lang-off { color: var(--m-dark); background: rgba(91,108,249,.10); }
.mh-lang:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
.mh-lang:active { transform: scale(.97); }
.mh-burger { display: none; width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--m-dark); cursor: pointer; align-items: center; justify-content: center; }
.mh-burger svg { width: 26px; height: 26px; }
html:not(.kwz-touch) .mh-burger:hover { background: #F3F4F8; }
.mh-burger:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }

/* Menu (sous 1024 px, le seul endroit où le burger existe) : deux colonnes
   titrées, les actions en bas, la langue choisie sur la carte de Suisse. Un
   voile couvre la page ; un tap dessus ferme le menu. */
.mh-menu { position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: 0 18px 40px rgba(45,45,58,.14), 0 0 0 100vmax rgba(18,20,40,.42); clip-path: inset(0 -100vmax -100vmax -100vmax); border-top: 1px solid var(--m-line); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.mh-menu[hidden] { display: none; }
.mh-menu:not([hidden]) { animation: mhMenuIn .22s ease both; }
.mh-menu.is-closing { animation: mhMenuOut .22s ease both; }
.mh-menu-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; padding: 16px 20px 18px; }
.mh-menu-in a { padding: 9px 0; font: 600 16px var(--f-sec); color: var(--m-dark); text-decoration: none; }
.mh-menu-in a:active { color: var(--m-accent-deep); }
.mh-menu-grp { display: flex; flex-direction: column; }
.mh-menu-t { margin: 0 0 4px; font: 700 11.5px var(--f-sec); letter-spacing: .08em; text-transform: uppercase; color: var(--m-muted); }
.mh-menu-foot { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--m-line); }
/* L'accès élève ferme la colonne Kwiiz, dans la couleur de la marque ; la
   langue reste seule en pied de menu. « Se connecter » disparaît quand on est
   connecté (le bouton du haut mène alors à l'espace). */
.mh-menu-in .mh-menu-student { color: var(--m-accent-deep); font-weight: 700; }
/* Langue : la Suisse romande allumée pour « Français », le reste du pays pour
   « Deutsch » (mêmes tracés que la carte de la section Suisse). */
.mh-maps-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mh-maps { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
.mh-menu-in .mh-map { --map-hi: #C5CAF9; --map-hi-line: #A9B0F2; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 8px; border: 1.5px solid var(--m-line); border-radius: 14px; background: #fff; text-decoration: none; transition: box-shadow .14s ease, transform .05s ease; }
.mh-menu-in .mh-map.is-on { --map-hi: var(--m-accent); --map-hi-line: var(--m-accent-deep); border-color: var(--m-accent); background: #F6F7FF; }
.mh-map:active { transform: scale(.97); }
.mh-map:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
.mh-map-ch { width: 100%; max-width: 120px; height: auto; }
.mh-map-ch .m-land, .mh-map-ch .m-romand { fill: #EEF0F6; stroke: #C9CCDA; stroke-width: 2; }
.mh-map-ch .m-jb { fill: #EEF0F6; stroke: #EEF0F6; stroke-width: 1.5; }
.mh-map-fr .m-jb { fill: var(--map-hi); stroke: var(--map-hi); transition: fill .14s ease; }
.mh-map-fr .m-romand, .mh-map-de .m-land { fill: var(--map-hi); stroke: var(--map-hi-line); transition: fill .14s ease; }
.mh-map-l { font: 700 14px var(--f-sec); color: var(--m-dark); }
.mh-map:not(.is-on) .mh-map-l { color: var(--m-muted); }
.mh-map.is-picked { animation: mhMapPop .42s cubic-bezier(.34,1.56,.64,1); }
.mh-map.is-picked .mh-map-ch { animation: mhMapPop .42s cubic-bezier(.34,1.56,.64,1) .05s; }
@keyframes mhMapPop { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes mhMenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes mhMenuOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 1023px) {
  .mh-main { display: none; }
  .mh-burger { display: inline-flex; }
  /* Safari (iOS) laisse la page défiler sous sa barre d'adresse translucide :
     un voile blanc au-dessus de la barre cache les sections sombres. */
  .mh::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; background: #fff; pointer-events: none; }
}
/* Ordinateur : six liens, les mêmes que la barre de la page A. Ils ne tiennent
   dans la colonne de 1120 px qu'en resserrant ; sur le ciel du hero ils passent
   sur une pastille claire (à droite, le ciel est trop sombre pour un texte
   foncé). Sous 1160 px, la langue reste dans le pied de page et le menu. */
@media (min-width: 1024px) {
  .mh-main { gap: 4px; margin-left: 14px; padding: 3px 8px; border-radius: 999px; transition: background .35s ease, box-shadow .35s ease; }
  .mm .mh:not(.scrolled) .mh-main { background: rgba(255,255,255,.82); box-shadow: 0 4px 16px rgba(8,10,40,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .mh-main .mh-link { font-size: 14px; white-space: nowrap; padding: 6px 7px; }
  .mh-nav { gap: 10px; }
  .mh-nav .mh-link { white-space: nowrap; }
  .mh-nav .mb-head { padding-left: 16px; padding-right: 16px; }
}
/* 1189 et non 1159 depuis le 30.09.2026 : avec « Utilisation » (7 liens), la
   langue revenue à 1160 px faisait déborder la barre FR de 6 px jusqu'à ~1175. */
@media (min-width: 1024px) and (max-width: 1189px) {
  .mh-lang { display: none; }
  .mh-main { margin-left: 8px; }
  .mh-main .mh-link { padding: 6px 5px; }
}
@media (max-width: 720px) {
  .mh-logo img { width: 84px; }
  .mh-nav { gap: 6px; }
  .mh-nav .mh-link, .mh-lang { display: none; }
}
@media (max-width: 400px) { .mh-nav .mb-head { padding: 10px 11px; font-size: 13.5px; } }
/* « Se connecter » : un contour gris clair le sépare des liens du menu
   (demande Quentin, 24.09) — un bouton secondaire discret, jamais un 2ᵉ CTA. */
.mh-nav .mh-link { border: 1.5px solid #D9DCE8; border-radius: 999px; padding: 7px 16px; transition: border-color .15s ease, color .15s ease, background .15s ease; }
html:not(.kwz-touch) .mh-nav .mh-link:hover { text-decoration: none; border-color: var(--m-accent); background: var(--m-accent-soft); }
/* Ordinateur : le ciel du hero monte sous la barre, transparente en haut de
   page ; elle blanchit en fondu dès que l'on défile. */
@media (min-width: 1024px) {
  .mm .mh { background: transparent; transition: background .35s ease, box-shadow .35s ease; }
  .mm .mh.scrolled { background: #fff; }
  .mm .mh .mh-link { transition: color .35s ease; }
  .mm .mh:not(.scrolled) .mh-nav .mh-link { color: #fff; }
  .mm .mh:not(.scrolled) .mh-nav .mh-link { border-color: rgba(255,255,255,.5); }
  html:not(.kwz-touch) .mm .mh:not(.scrolled) .mh-nav .mh-link:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.14); }
  .mm .mh .mh-lang-off { transition: color .35s ease, background .15s ease; }
  .mm .mh:not(.scrolled) .mh-lang { background: rgba(255,255,255,.14); }
  .mm .mh:not(.scrolled) .mh-lang-off { color: rgba(255,255,255,.75); }
  html:not(.kwz-touch) .mm .mh:not(.scrolled) .mh-lang:hover .mh-lang-off { color: #fff; background: rgba(255,255,255,.16); }
  /* Le bouton du haut : blanc à texte violet sur le ciel, violet dès que la barre blanchit. */
  .mm .mh .mb-head { transition: transform .1s ease, box-shadow .1s ease, filter .1s ease, background .35s ease, color .35s ease; }
  .mm .mh:not(.scrolled) .mb-head { --mb-bg: #fff; --mb-fg: var(--m-accent-deep); --mb-socle: #C4CAF7; --mb-glow: rgba(8,10,40,.25); }
}