/* ============================================================================
   ayoubtrhaiti.fr — navigation.css
   ----------------------------------------------------------------------------
   Le fond, la structure du parcours (vue, piste, chapitres), la barre de
   navigation en bas d'écran, la bascule de mode et la progression.

   Deux dispositions :
   - ≥ 1024 px : barre fixe en bas (sceau + marque · rail de 7 chapitres ·
     bascule Auto/Clair/Sombre), progression de 3 px au ras du bas. Quand le
     JS pose html.horizontal, la vue est épinglée et la piste glisse.
   - < 1024 px : document vertical, rail « pilule » collé en bas avec les sept
     kanji et un bouton de mode. Expérience par défaut de l'audience TikTok.
   ========================================================================== */

/* ---- Fond fixe : dégradé + deux halos ------------------------------------------- */
.fond {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: var(--fond);
}
.halo {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(40px);
  transition: background var(--d-mode) var(--courbe); will-change: transform;
}
.halo--magenta {   /* haut droit */
  width: 900px; height: 640px; right: -16%; top: -34%;
  background: radial-gradient(closest-side, var(--halo-magenta), transparent);
}
.halo--violet {    /* bas gauche */
  width: 800px; height: 600px; left: -18%; bottom: -36%;
  background: radial-gradient(closest-side, var(--halo-violet), transparent);
}

/* ---- Structure du parcours ------------------------------------------------------- */
.vue { position: relative; overflow: hidden; }
.piste { display: flex; flex-direction: column; }
.chapitre {
  position: relative; display: flex; flex-direction: column; gap: var(--e5);
  min-width: 0; padding: 56px var(--gouttiere); isolation: isolate;
  border-top: 1px solid var(--filet-faible);
}
.chapitre:first-child { border-top: 0; }
.chapitre:focus { outline: none; }

/* Kanji géant en filigrane : contour 1 px, jamais rempli */
.chapitre__filigrane {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  font-family: var(--police-titre); font-weight: 800; line-height: 1;
  font-size: clamp(320px, 44vw, 640px);
  color: transparent; -webkit-text-stroke: 1px var(--filigrane);
  right: -40px; top: -120px;
  will-change: transform;
}
.chapitre__filigrane--bas { top: auto; bottom: -160px; }
.chapitre__filigrane--gauche { right: auto; left: 60px; top: auto; bottom: -140px; font-size: clamp(260px, 36vw, 520px); }
.chapitre__filigrane--grand { font-size: clamp(360px, 57vw, 820px); right: -60px; top: auto; bottom: -120px; }

/* Bande latérale : kanji vertical + libellé (desktop seulement) */
.chapitre__cote {
  /* La bande va du bord gauche de l'écran au trait vertical : kanji et libellé sont centrés dans cette
     largeur, sur le même axe que le sceau de la barre du bas. */
  display: none; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--gouttiere) + var(--cote-l) - 20px);
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  border-right: 1px solid var(--filet-faible);
}
.chapitre__cote-kanji { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--police-titre); font-weight: 700; font-size: var(--t-kanji-cote); letter-spacing: .2em; line-height: 1; }
.chapitre__cote-nom { writing-mode: vertical-rl; letter-spacing: .3em; line-height: 1; }
/* Les deux textes verticaux sont centrés sur l'axe de la colonne (align-items: center + line-height 1 : la boîte de ligne fait exactement la largeur du glyphe) */

/* En-tête de chapitre : étiquette · titre · note à droite */
.chapitre__tete { display: flex; flex-direction: column; gap: var(--e3); }
.chapitre__tete .etiquette { color: var(--accent); }
.chapitre__note { font-size: var(--t-petit); line-height: 1.5; color: var(--etiquette); }
.chapitre__corps { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }

/* ---- Barre de navigation (desktop) -------------------------------------------------- */
.barre {
  position: fixed; z-index: 40;
  left: var(--gouttiere); right: var(--gouttiere); bottom: var(--barre-marge); height: var(--barre-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e5);
  border-top: 1px solid var(--filet);
}
.marque { display: flex; align-items: center; gap: 14px; color: var(--texte); }
.marque__nom { font-family: var(--police-titre); font-weight: 700; font-size: 20px; }

.rail { display: flex; align-items: center; gap: 28px; }
.rail__lien {
  display: flex; align-items: center; gap: 10px; min-height: var(--cible);
  font-family: var(--police-mono); font-size: var(--t-rail); letter-spacing: var(--esp-rail);
  text-transform: uppercase; color: var(--etiquette);
  transition: color var(--d-micro) var(--courbe);
}
.rail__kanji { font-family: var(--police-titre); font-size: 20px; font-weight: 700; color: var(--texte); letter-spacing: 0; transition: color var(--d-micro) var(--courbe); }
.rail__court { display: none; }
.rail__lien:hover { color: var(--texte); }
.rail__lien[aria-current="true"] { color: var(--texte); }
.rail__lien[aria-current="true"] .rail__kanji { color: var(--accent); }

/* Bascule Auto / Clair / Sombre */
.bascule { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-rond); border: 1px solid var(--bouton-contour); }
.bascule__choix {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 30px; border-radius: var(--r-rond);
  color: var(--etiquette);
  transition: background var(--d-micro) var(--courbe), color var(--d-micro) var(--courbe);
}
.bascule__choix svg { width: 17px; height: 17px; }
.bascule__choix:hover { color: var(--texte); }
.bascule__choix[aria-pressed="true"] { background: var(--bascule-actif); color: var(--texte); }
.bascule-icone {   /* bouton unique (mobile) : passe au mode suivant */
  display: none; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--cible); height: var(--cible); border-radius: var(--r-m);
  border: 1px solid var(--bouton-contour); color: var(--texte);
}
.bascule-icone svg { width: 18px; height: 18px; }
.bascule-icone .ico { display: none; }
html:not([data-mode]) .bascule-icone .ico--sombre { display: block; }
html[data-mode="clair"] .bascule-icone .ico--clair { display: block; }
html[data-preference="auto"] .bascule-icone .ico { display: none; }
html[data-preference="auto"] .bascule-icone .ico--auto { display: block; }

/* Progression : au ras du bas, pleine largeur */
.progression {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; height: var(--progression-h);
  background: var(--progression-fond);
}
.progression__barre {
  height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0);
  background: var(--progression);
}

/* ---- Desktop ≥ 1024 px --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .chapitre {
    padding: var(--e7) var(--gouttiere) calc(var(--barre-h) + var(--barre-marge) + var(--e5)) calc(var(--gouttiere) + 56px);
    border-top: 0; min-height: 100vh; min-height: 100svh;
  }
  /* La bande latérale s'arrête sur le trait de la barre : les deux traits forment un angle,
     et la marque commence après la bande (plus de chevauchement du sceau). */
  .chapitre__cote { display: flex; }   /* trait vertical jusqu'en bas de l'écran : il croise le trait de la barre */
  /* La barre occupe tout le bas de l'écran : son trait va d'un bord à l'autre, la bande latérale le croise
     jusqu'en bas, et le sceau se loge dans le carré formé par les deux traits. Tout est centré dans la barre. */
  .barre {
    --jonction: calc(var(--gouttiere) + var(--cote-l) - 20px);   /* abscisse du trait vertical */
    left: 0; right: 0; bottom: 0; height: calc(var(--barre-h) + var(--barre-marge));
    padding: 0 var(--gouttiere) 0 0;
  }
  .marque { gap: 0; }
  .marque .sceau { margin-left: calc((var(--jonction) - 44px) / 2); }
  .marque__nom { margin-left: calc(var(--jonction) / 2 + 14px); }   /* le nom commence 36 px après le trait, aligné sur le contenu */
  .chapitre__tete { flex-direction: row; align-items: baseline; gap: var(--e5); }
  .chapitre__note { margin-left: auto; max-width: 420px; text-align: right; }
  .chapitre__corps { flex: 1; min-height: 0; }
}

/* ---- Mode horizontal (posé par navigation.js) ---------------------------------------------
   Le rouleau : la piste glisse d'un chapitre entier à chaque geste (molette, flèche, rail),
   en --d-chapitre avec la courbe du prototype. La page elle-même ne défile pas. ------------- */
html.horizontal, html.horizontal body { height: 100%; overflow: hidden; }
html.horizontal .vue { height: 100vh; height: 100svh; }
html.horizontal .piste {
  flex-direction: row; width: max-content; height: 100%; will-change: transform;
  transform: translate3d(calc(var(--indice, 0) * -100vw), 0, 0);
  transition: transform var(--d-chapitre) var(--courbe-chapitre);
}
html.horizontal .chapitre { width: 100vw; height: 100vh; height: 100svh; min-height: 0; flex-shrink: 0; overflow: hidden; }
html.horizontal .chapitre__corps { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }   /* filet de sécurité sous 800 px de haut */
html.horizontal .progression__barre { transition: transform var(--d-chapitre) var(--courbe-chapitre); }

/* Révélation à l'arrivée sur un chapitre : le filigrane glisse depuis la droite, l'en-tête puis
   chaque bloc du corps montent de 20 px en fondu, avec un décalage croissant. Au départ du
   chapitre, tout se replie : la révélation rejoue à chaque passage. */
html.horizontal .chapitre__filigrane {
  opacity: 0; transform: translateX(120px);
  transition: opacity 1.4s ease .2s, transform 1.6s var(--courbe-revele) .2s;
}
html.horizontal .chapitre--courant .chapitre__filigrane { opacity: 1; transform: none; }
/* Fondu + léger flou + échelle 0,96 → 1 : rien ne sort du cadre, donc aucun ascenseur ne clignote
   dans un corps défilant (une translation vers le bas en faisait apparaître un). */
html.horizontal .chapitre__tete,
html.horizontal .chapitre__corps > :not([data-cascade]),
html.horizontal [data-cascade] > * {
  opacity: 0; transform: scale(.96); filter: blur(6px);
  transition: opacity var(--d-revele) ease var(--delai, var(--revele-depart)),
              transform calc(var(--d-revele) + 100ms) var(--courbe-revele) var(--delai, var(--revele-depart)),
              filter var(--d-revele) ease var(--delai, var(--revele-depart));
}
html.horizontal .chapitre--courant .chapitre__tete,
html.horizontal .chapitre--courant .chapitre__corps > :not([data-cascade]),
html.horizontal .chapitre--courant [data-cascade] > * { opacity: 1; transform: none; filter: none; }
html.horizontal .chapitre__tete { --delai: 300ms; }
html.horizontal .setup__bento { opacity: 1; transform: none; filter: none; transition: none; }
html.horizontal .setup__vue { opacity: 0; transform: scale(.96); filter: blur(6px); transition: opacity var(--d-revele) ease var(--revele-depart), transform calc(var(--d-revele) + 100ms) var(--courbe-revele) var(--revele-depart), filter var(--d-revele) ease var(--revele-depart); }
html.horizontal .chapitre--courant .setup__vue { opacity: 1; transform: none; filter: none; }
html.horizontal .chapitre__corps > :nth-child(1), html.horizontal [data-cascade] > :nth-child(1) { --delai: calc(var(--revele-depart)); }
html.horizontal .chapitre__corps > :nth-child(2), html.horizontal [data-cascade] > :nth-child(2) { --delai: calc(var(--revele-depart) + var(--revele-pas)); }
html.horizontal .chapitre__corps > :nth-child(3), html.horizontal [data-cascade] > :nth-child(3) { --delai: calc(var(--revele-depart) + var(--revele-pas) * 2); }
html.horizontal .chapitre__corps > :nth-child(4), html.horizontal [data-cascade] > :nth-child(4) { --delai: calc(var(--revele-depart) + var(--revele-pas) * 3); }
html.horizontal .chapitre__corps > :nth-child(n+5), html.horizontal [data-cascade] > :nth-child(n+5) { --delai: calc(var(--revele-depart) + var(--revele-pas) * 4); }
html.horizontal [data-cascade] > :nth-child(n+7) { --delai: calc(var(--revele-depart) + var(--revele-pas) * 5); }
/* Listes longues (jaquettes, produits) : chaque élément 90 ms après le précédent */
html.horizontal .lives__liste-jeux > *, html.horizontal .setup__grille > * { --delai: calc(var(--revele-depart) + 90ms * var(--i, 0)); }
html.horizontal .lives__liste-jeux > :nth-child(1), html.horizontal .setup__grille > :nth-child(1) { --i: 0; } html.horizontal .lives__liste-jeux > :nth-child(2), html.horizontal .setup__grille > :nth-child(2) { --i: 1; }
html.horizontal .lives__liste-jeux > :nth-child(3), html.horizontal .setup__grille > :nth-child(3) { --i: 2; } html.horizontal .lives__liste-jeux > :nth-child(4), html.horizontal .setup__grille > :nth-child(4) { --i: 3; }
html.horizontal .lives__liste-jeux > :nth-child(5), html.horizontal .setup__grille > :nth-child(5) { --i: 4; } html.horizontal .lives__liste-jeux > :nth-child(6), html.horizontal .setup__grille > :nth-child(6) { --i: 5; }
html.horizontal .setup__grille > :nth-child(7) { --i: 6; } html.horizontal .setup__grille > :nth-child(8) { --i: 7; } html.horizontal .setup__grille > :nth-child(9) { --i: 8; }
html.horizontal .setup__grille > :nth-child(n+10) { --i: 9; }
/* Les listes elles-mêmes ne sont pas masquées : leurs éléments le sont */
html.horizontal .lives__liste-jeux, html.horizontal .setup__grille { opacity: 1; transform: none; filter: none; transition: none; }
html.horizontal .lives__liste-jeux > *, html.horizontal .setup__grille > * {
  opacity: 0; transform: scale(.96); filter: blur(6px);
  transition: opacity var(--d-revele) ease var(--delai), transform calc(var(--d-revele) + 100ms) var(--courbe-revele) var(--delai), filter var(--d-revele) ease var(--delai);
}
html.horizontal .chapitre--courant .lives__liste-jeux > *, html.horizontal .chapitre--courant .setup__grille > * { opacity: 1; transform: none; filter: none; }
/* Le corps lui-même n'est jamais masqué (sinon ses enfants le seraient deux fois) */
html.horizontal .chapitre__corps { opacity: 1; transform: none; transition: none; }

/* ---- Tablette et mobile < 1024 px : rail pilule ------------------------------------------- */
@media (max-width: 1023px) {
  .barre {
    left: 12px; right: 12px; bottom: 12px; height: auto; min-height: var(--rail-mobile-h);
    padding: 6px; gap: 4px; border-radius: var(--r-l); border: 1px solid var(--rail-bordure);
    background: var(--rail-fond); box-shadow: var(--rail-ombre);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .barre .marque, .bascule { display: none; }
  .bascule-icone { display: flex; }
  .rail { flex: 1; justify-content: space-between; gap: 2px; min-width: 0; }
  .rail__lien {
    flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-width: 40px; min-height: 48px;
    padding: 0 2px; border-radius: var(--r-m); font-size: 8px; letter-spacing: .02em; overflow: hidden;
    transition: background var(--d-micro) var(--courbe), color var(--d-micro) var(--courbe);
  }
  .rail__kanji { font-size: 17px; line-height: 1; }
  .rail__lien[aria-current="true"] { background: var(--rail-actif); color: var(--sur-bouton); }
  .rail__lien[aria-current="true"] .rail__kanji { color: var(--accent); }
  html:not([data-mode]) .rail__lien[aria-current="true"] { color: var(--texte); }
  .rail__long { display: none; }
  .rail__court { display: inline; }
  .progression { bottom: auto; top: 0; }
  .piste { padding-bottom: calc(var(--rail-mobile-h) + 24px); }
  .chapitre__filigrane { font-size: clamp(300px, 60vw, 560px); right: -80px; top: 40px; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  /* En-tête empilé (étiquette, titre, note) : sur une ligne, le titre se cassait en deux à 768 px.
     Rail : même pilule que sur mobile (kanji au-dessus du libellé court), en plus grand ; les libellés
     longs côte à côte débordaient (« COMMUNAUTÉ » coupé). */
  .chapitre { padding: 56px 32px; }
  .chapitre__note { max-width: 560px; }
  .barre { left: 24px; right: 24px; bottom: 16px; padding: 6px 8px; }
  .rail__lien { min-height: 54px; font-size: 10px; letter-spacing: .08em; }
  .rail__kanji { font-size: 19px; }
}
@media (max-width: 719px) {
  .chapitre { padding: 40px 20px; gap: var(--e4); }
  .chapitre__filigrane { font-size: 360px; right: -40px; top: -20px; }
  .rail__lien .rail__long { display: none; }
}

/* ---- Desktop étroit 1024–1279 px : la barre complète (nom + sept libellés + bascule) déborde ----
   On garde le sceau seul, les libellés courts et un rail plus serré. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .marque__nom { display: none; }
  .rail { gap: 18px; }
  .rail__lien { gap: 8px; }
  .rail__long { display: none; }
  .rail__court { display: inline; }
}

/* ---- Écrans bas en horizontal (≤ 720 px de haut) : marge haute réduite pour que chaque chapitre tienne ---- */
@media (min-width: 1024px) and (max-height: 720px) {
  .chapitre { padding-top: var(--e5); }
}