/* ==========================================================================
   KokoroWorks — le socle
   Tokens, base, navigation. La loi de la page vit ici :
   le texte ne floute jamais ; le flou n'appartient qu'à la lumière ;
   une courbe par intention ; tout est réversible.
   ========================================================================== */

/* ---- Les tokens (échantillonnés sur la charte Kokomi) ------------------- */
:root {
  /* couleurs */
  --papier: #FCF7F3;          /* le fond de jour */
  --creme: #FCEDDD;           /* lavis crème, cartes */
  --rose-poudre: #FAC1B1;     /* l'aube, les halos froids */
  --framboise: #E87A78;       /* décoratif seulement : cœurs, lueurs, logo */
  --framboise-encre: #B23A48; /* accents texte, liens — lisible sur papier */
  --brun: #AB7356;            /* filets, illustrations */
  --encre: #3F2E26;           /* le texte courant */
  --encre-douce: #6B5245;     /* le texte secondaire */
  --sauge: #AAAF8D;           /* le végétal */
  --nuit: #2F2733;            /* l'encre de la nuit (intro, finale) */
  --papier-lueur: #F6EFE7;    /* le texte sur la nuit */
  --lueur: #FFD3A8;           /* la lumière portée */
  --or: #D9B36A;              /* le fil d'or des dorures du grimoire */
  --nav-papier: color-mix(in srgb, var(--papier) 96%, transparent); /* la feuille de la nav (la nuit la ré-encre) */
  --nav-lavis: color-mix(in srgb, var(--creme) 38%, transparent);   /* le lavis d'épaisseur en tête de feuille */

  /* les trois courbes — une par intention */
  --allume: cubic-bezier(.16, .84, .44, 1);  /* ce qui s'éclaire */
  --pose: cubic-bezier(.22, 1, .36, 1);      /* ce qui se pose */
  --derive: linear;                          /* ce qui flotte */

  /* espacement ×4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px;

  /* rayons & mesures */
  --rayon: 12px;
  --rayon-doux: 20px;
  --rayon-pilule: 999px;
  --scene-max: 1200px;
  --texte-max: 62ch;

  /* le trait de pinceau : le masque SVG partagé par la nav et le menu —
     peint en currentColor, il se dessine sous les liens */
  --masque-pinceau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 4.5 C22 2.2 42 6.6 62 4.4 C82 2.4 102 5.8 118 3.8' stroke='%23000' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M8 6.4 C34 5 62 7.2 112 5.4' stroke='%23000' stroke-width='1.4' fill='none' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");

  /* les deux familles du monde : la plume (manuscrit, titres) et la douce
     (interface). Les écritures non latines les redéfinissent plus bas —
     piles système, aucune webfont ajoutée. */
  --famille-plume: 'Fraunces', Georgia, serif;
  --famille-douce: 'Nunito Sans', 'Avenir Next', system-ui, sans-serif;
  /* l'échelle du manuscrit : les langues longues la resserrent pour que
     les pages fixes du grimoire encaissent sans déborder */
  --echelle-manuscrit: 1;
}

/* ---- Les écritures du monde ---------------------------------------------
   Chaque écriture emprunte les serifs et sans du système, dans l'esprit du
   duo Fraunces / Nunito. Le grec et le cyrillique passent par Georgia (déjà
   dans la pile de la plume). L'arabe lit de droite à gauche : dir="rtl" est
   posé sur le document par langue.js, la scène et le mobilier ne bougent
   pas. */
:root[lang="ja"] {
  --famille-plume: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
  --famille-douce: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}
:root[lang="zh"] {
  --famille-plume: 'Songti SC', 'Noto Serif SC', 'SimSun', serif;
  --famille-douce: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
:root[lang="ko"] {
  --famille-plume: 'Apple Myungjo', 'Noto Serif KR', 'Batang', serif;
  --famille-douce: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
:root[lang="ar"] {
  --famille-plume: 'Geeza Pro', 'Amiri', 'Traditional Arabic', serif;
  --famille-douce: 'Geeza Pro', system-ui, sans-serif;
}
:root[lang="th"] {
  --famille-plume: 'Sathu', 'Noto Serif Thai', serif;
  --famille-douce: 'Thonburi', 'Noto Sans Thai', sans-serif;
}
:root[lang="hi"] {
  --famille-plume: 'Devanagari MT', 'Noto Serif Devanagari', serif;
  --famille-douce: 'Devanagari Sangam MN', 'Noto Sans Devanagari', sans-serif;
}
:root[lang="bn"] {
  --famille-plume: 'Bangla MN', 'Noto Serif Bengali', serif;
  --famille-douce: 'Bangla Sangam MN', 'Noto Sans Bengali', sans-serif;
}
/* les langues longues : le manuscrit se resserre d'un souffle */
:root[lang="de"], :root[lang="el"], :root[lang="fi"] {
  --echelle-manuscrit: .93;
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--famille-douce);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--famille-plume);
  font-weight: 620;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--framboise-encre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--rose-poudre); color: var(--encre); }

/* La voix qui murmure : les phrases-cœur en serif italique */
.voix-coeur {
  font-family: var(--famille-plume);
  font-style: italic;
  font-weight: 480;
  color: var(--framboise-encre);
}

/* L'annotation japonaise — décorative, toujours accompagnée d'une traduction */
.jp {
  font-family: 'Noto JP Extrait', sans-serif;
  letter-spacing: .14em;
}

/* ---- Accessibilité ------------------------------------------------------ */
.lien-evitement {
  position: absolute;
  left: var(--s4); top: var(--s4);
  z-index: 100;
  padding: var(--s3) var(--s6);
  background: var(--encre);
  color: var(--papier-lueur);
  border-radius: var(--rayon-pilule);
  text-decoration: none;
  transform: translateY(-200%);
}
.lien-evitement:focus-visible { transform: none; }

:focus-visible {
  outline: 2px solid var(--framboise-encre);
  outline-offset: 3px;
  border-radius: var(--s1);
}

/* Réservé aux lecteurs d'écran */
.sr-seulement {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Le grain du papier ------------------------------------------------- */
.grain {
  position: fixed;
  inset: -60px;
  z-index: 90;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .67 0 0 0 0 .45 0 0 0 0 .34 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---- La luciole du curseur ----------------------------------------------- */
.luciole-curseur {
  position: fixed;
  left: 0; top: 0;
  z-index: 88;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lueur);
  box-shadow: 0 0 14px 4px color-mix(in srgb, var(--lueur) 50%, transparent);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--mx, -100px), var(--my, -100px), 0);
  transition: opacity .5s var(--allume);
}
.luciole-curseur.est-visible { opacity: .85; }
@media (pointer: coarse), (max-width: 899px), (prefers-reduced-motion: reduce) {
  .luciole-curseur { display: none; }
}

/* ---- La pastille son ------------------------------------------------------
   La musique d'ambiance tient dans une pastille de nuit en bas à droite :
   trois brins de lumière qui ondulent tant qu'elle joue, et retombent,
   figés bas, quand le visiteur la fait taire. Dévoilée par musique.js
   après le seuil — jamais pendant le portail. */
.bouton-son {
  position: fixed;
  right: clamp(16px, 3vw, 40px);
  bottom: 6svh;
  z-index: 110;
  width: 48px; height: 48px;
  border: 1px solid rgba(246, 239, 231, .4);
  border-radius: var(--rayon-pilule);
  background: rgba(15, 10, 18, .55);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .9s ease;
}
.bouton-son[hidden] { display: none; }
.bouton-son.est-visible { opacity: 1; }
.bouton-son:hover, .bouton-son:focus-visible { border-color: var(--papier-lueur); }
.brins {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 16px;
}
.brins i {
  width: 3px;
  border-radius: 2px;
  background: var(--papier-lueur);
  height: 100%;
  animation: brin-ondule 1.6s ease-in-out infinite;
}
.brins i:nth-child(2) { animation-delay: .35s; }
.brins i:nth-child(3) { animation-delay: .7s; }
@keyframes brin-ondule {
  0%, 100% { height: 40%; }
  50%      { height: 100%; }
}
/* muet : les brins retombent, figés bas — pas d'icône barrée */
.bouton-son[aria-pressed="false"] .brins i {
  animation: none;
  height: 22%;
  transition: height .6s var(--pose);
}
@media (prefers-reduced-motion: reduce) {
  .brins i { animation: none; height: 80%; }
}

/* ---- Le panneau des langues ---------------------------------------------
   L'étoffe de nuit des sceaux, déployée sous le bord déchiré de la nav —
   il flotte sur la scène, il n'est pas une page. Sous la souris, c'est
   LUI qui défile, jamais le livre : data-lenis-prevent (index.html) le
   soustrait au défilement piloté, et le contain coupe l'enchaînement. */
.panneau-langues {
  position: fixed;
  top: calc(var(--nav-hauteur, 64px) + var(--s2));
  inset-inline-end: clamp(var(--s4), 4vw, var(--s12));
  z-index: 111;
  width: 220px;
  max-height: min(60svh, calc(100svh - var(--nav-hauteur, 64px) - var(--s8)));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(15, 10, 18, .82);
  border: 1px solid rgba(246, 239, 231, .25);
  border-radius: var(--rayon-doux);
  box-shadow: 0 18px 40px rgba(15, 10, 18, .45);
  padding: 6px;
  animation: panneau-deploiement .35s var(--pose);
}
.panneau-langues[hidden] { display: none; }
/* depuis le menu papier (mobile et petit paysage), le panneau se pose au
   centre, au-dessus du menu — translate porte le centrage, l'animation
   garde le transform : deux canaux, aucun conflit */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .panneau-langues {
    top: 50%;
    left: 50%;
    inset-inline-end: auto;
    translate: -50% -50%;
    max-height: 70svh;
  }
}
/* le panneau descend de la feuille de la nav (translate porte le centrage
   mobile : canal distinct, aucun conflit) */
@keyframes panneau-deploiement {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .panneau-langues { animation: none; }
}
.panneau-langues::-webkit-scrollbar { width: 4px; }
.panneau-langues::-webkit-scrollbar-thumb {
  background: rgba(246, 239, 231, .25);
  border-radius: 2px;
}
.langue-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--rayon);
  background: none;
  color: var(--papier-lueur);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: start;
}
.langue-option:hover, .langue-option:focus-visible { background: rgba(246, 239, 231, .08); }
.langue-drapeau { font-size: 18px; }
/* la courante : la lumière marque, pas les symboles */
.langue-option[aria-selected="true"] { color: var(--lueur); }
.langue-option[aria-selected="true"]::after {
  content: '';
  margin-inline-start: auto;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--or);
}

/* ---- La navigation ------------------------------------------------------
   Une feuille de papier posée en haut du monde — pas une barre d'app.
   Papier quasi opaque (le verre dépoli sort du vocabulaire), lavis crème
   en tête pour l'épaisseur, bord inférieur déchiré (::after masqué),
   ombre d'encre douce au lieu d'une frontière nette. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: var(--s6);
  padding: var(--s3) clamp(var(--s4), 4vw, var(--s12));
  background:
    linear-gradient(to bottom, var(--nav-lavis), transparent 65%),
    var(--nav-papier);
  box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--encre) 45%, transparent);
}
.nav::after {
  /* le bord déchiré : peint en papier, découpé par le masque — la nuit
     le ré-encre d'elle-même via --nav-papier */
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 8px;
  background: var(--nav-papier);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H240 V5 C226 8 212 2.6 198 5 C184 7.4 170 2.2 156 4.8 C142 7.4 128 2.4 114 5.2 C100 8 86 2.6 72 4.6 C58 6.6 44 2.4 30 5.4 C16 8.4 6 3 0 5 Z' fill='%23000'/%3E%3C/svg%3E") left top / 240px 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H240 V5 C226 8 212 2.6 198 5 C184 7.4 170 2.2 156 4.8 C142 7.4 128 2.4 114 5.2 C100 8 86 2.6 72 4.6 C58 6.6 44 2.4 30 5.4 C16 8.4 6 3 0 5 Z' fill='%23000'/%3E%3C/svg%3E") left top / 240px 100% repeat-x;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--famille-plume);
  font-weight: 620;
  font-size: 1.15rem;
  color: var(--encre);
  text-decoration: none;
}
.nav-logo svg { display: block; }

/* les liens sont des chapitres : serif du livre, fleurons entre eux */
.nav-liens {
  display: flex;
  align-items: center;
  gap: clamp(var(--s3), 2.5vw, var(--s8));
  margin-left: auto;
  list-style: none;
  padding: 0; margin-top: 0; margin-bottom: 0;
}
.nav-liens li { display: flex; align-items: center; gap: clamp(var(--s3), 2.5vw, var(--s8)); }
.nav-liens li + li::before {
  content: '❦' / '';
  font-size: .78rem;
  color: color-mix(in srgb, var(--framboise) 60%, transparent);
}
.nav-liens a {
  position: relative;
  color: var(--encre-douce);
  text-decoration: none;
  font-family: var(--famille-plume);
  font-weight: 620;
  font-size: 1.02rem;
  letter-spacing: .01em;
  padding: var(--s2) var(--s1);
  transition: color .3s var(--allume);
}
.nav-liens a::after {
  /* le trait de pinceau (--masque-pinceau, tokens) — il se dessine au
     survol et suit la couleur du lien, de jour comme de nuit */
  content: '';
  position: absolute;
  left: var(--s1); right: var(--s1); bottom: 1px;
  height: 5px;
  background: currentColor;
  opacity: .85;
  -webkit-mask: var(--masque-pinceau) center / 100% 100% no-repeat;
          mask: var(--masque-pinceau) center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--allume);
}
.nav-liens a:hover,
.nav-liens a:focus-visible { color: var(--framboise-encre); }
.nav-liens a:hover::after,
.nav-liens a:focus-visible::after { transform: scaleX(1); }
/* aux largeurs moyennes, les fleurons rendent leur place aux chapitres :
   les sceaux des réglages sont arrivés dans la feuille */
@media (max-width: 960px) {
  .nav-liens li + li::before { display: none; }
}

/* les sceaux des réglages : accessibilité et langue, encre douce sur le
   papier — pas des pastilles de nuit. Un filet brun les sépare des
   chapitres : ici finissent les pages, ici commencent les réglages. */
.nav-reglages {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-inline-start: clamp(var(--s3), 2vw, var(--s6));
  padding-inline-start: clamp(var(--s3), 2vw, var(--s6));
  border-inline-start: 1px solid color-mix(in srgb, var(--brun) 35%, transparent);
}
.nav-reglage {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--rayon-pilule);
  background: none;
  color: var(--encre-douce);
  cursor: pointer;
  transition: color .3s var(--allume), border-color .3s var(--allume);
}
.nav-reglage:hover, .nav-reglage:focus-visible,
.nav-reglage[aria-expanded="true"] {
  color: var(--framboise-encre);
  border-color: color-mix(in srgb, var(--brun) 40%, transparent);
}
/* le code de la langue : de la typographie, pas un globe */
.nav-reglage span {
  font-family: var(--famille-plume);
  font-weight: 620;
  font-size: 15px;
  letter-spacing: .04em;
}

.nav .cta { margin-left: clamp(var(--s3), 2vw, var(--s8)); }

/* Le bouton menu n'existe qu'avec JS (progressive enhancement, étape 2) */
.nav-menu-bouton { display: none; }

/* ---- Les boutons : le sceau de cire --------------------------------------
   On scelle une lettre — le CTA est un cachet pressé dans la cire framboise.
   La teinte vit dans --cire (les variantes ne redéfinissent qu'elle), le
   modelé dans --cta-modele (rehaut de lumière, creux du bord, fil d'or) :
   le hover peut alors AJOUTER son halo sans effacer la matière. */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s6);
  min-height: 44px;
  --cire: var(--framboise-encre);
  --cta-modele:
    inset 0 1px 1px color-mix(in srgb, var(--lueur) 50%, transparent),
    inset 0 -3px 7px color-mix(in srgb, var(--nuit) 30%, transparent),
    inset 0 0 0 1.25px color-mix(in srgb, var(--or) 60%, transparent);
  background: radial-gradient(130% 165% at 30% 18%,
    color-mix(in srgb, var(--cire) 76%, var(--lueur)) 0%,
    var(--cire) 52%,
    color-mix(in srgb, var(--cire) 80%, var(--nuit)) 100%);
  color: var(--papier-lueur);
  border: 0;
  /* presque-pilule : la cire n'est jamais parfaite */
  border-radius: 26px 30px 27px 31px / 31px 26px 30px 27px;
  box-shadow: var(--cta-modele);
  font-family: var(--famille-plume);
  font-weight: 620;
  font-size: 1rem;
  letter-spacing: .015em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow .4s var(--allume), transform .3s var(--pose);
}
.cta::before {
  /* les lucioles : trois poussières de lumière qui s'élèvent de la cire
     au survol — la féérie de la clairière, pas un effet de bouton */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(3px 3px at 24% 72%, var(--lueur) 40%, transparent 72%),
    radial-gradient(2.5px 2.5px at 52% 82%, #FFF6E2 40%, transparent 72%),
    radial-gradient(2px 2px at 77% 68%, var(--lueur) 40%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
.cta:hover, .cta:focus-visible {
  box-shadow: var(--cta-modele),
              0 0 0 6px color-mix(in srgb, var(--lueur) 55%, transparent),
              0 6px 24px color-mix(in srgb, var(--framboise) 35%, transparent);
  /* la lueur respire, lente — comme celle au fond de la grotte */
  animation: cta-respire 3.2s ease-in-out .4s infinite alternate;
}
.cta:hover::before, .cta:focus-visible::before {
  animation: cta-lucioles 2.8s var(--derive) .2s infinite;
}
@keyframes cta-respire {
  from {
    box-shadow: var(--cta-modele),
                0 0 0 6px color-mix(in srgb, var(--lueur) 55%, transparent),
                0 6px 24px color-mix(in srgb, var(--framboise) 35%, transparent);
  }
  to {
    box-shadow: var(--cta-modele),
                0 0 0 9px color-mix(in srgb, var(--lueur) 38%, transparent),
                0 8px 30px color-mix(in srgb, var(--framboise) 45%, transparent);
  }
}
@keyframes cta-lucioles {
  0%   { transform: translateY(7px); opacity: 0; }
  22%  { opacity: .95; }
  70%  { opacity: .6; }
  100% { transform: translateY(-16px); opacity: 0; }
}
.cta:active {
  /* pressé dans la cire */
  transform: scale(.96);
  --cta-modele:
    inset 0 2px 6px color-mix(in srgb, var(--nuit) 42%, transparent),
    inset 0 -1px 1px color-mix(in srgb, var(--lueur) 35%, transparent),
    inset 0 0 0 1.25px color-mix(in srgb, var(--or) 60%, transparent);
}

.cta-secondaire {
  background: transparent;
  color: var(--framboise-encre);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--framboise) 55%, transparent);
}
/* le secondaire n'est pas un sceau : pas de lucioles */
.cta-secondaire::before { content: none; }

/* ---- Les scènes (gabarit commun) ---------------------------------------- */
.scene {
  position: relative;
  padding: clamp(var(--s16), 12vh, var(--s32)) clamp(var(--s4), 5vw, var(--s12));
}

.scene-cadre {
  max-width: var(--scene-max);
  margin: 0 auto;
  position: relative;
}

.scene h2 {
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  max-width: 18ch;
}

.scene .avant-titre {
  display: block;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brun);
  margin-bottom: var(--s3);
}

/* ---- Pied de page ------------------------------------------------------- */
.pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s8);
  padding: var(--s8) clamp(var(--s4), 5vw, var(--s12)) var(--s12);
  color: var(--papier-lueur);
}
.pied a { color: inherit; font-weight: 700; font-size: .9rem; }
.pied .mention { opacity: .75; font-size: .85rem; margin-left: auto; }

/* Sur la nuit étoilée, la nav passe en encre pour ne pas éblouir.
   Le papier vit dans deux tokens typés (@property) : c'est EUX qui
   transitionnent — la barre et son bord déchiré fondent d'un seul geste.
   `translate` porte l'entrée « déposée » après l'intro (livre.css). */
@property --nav-papier { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --nav-lavis { syntax: '<color>'; inherits: true; initial-value: transparent; }
.nav {
  transition: translate 1.2s var(--pose),
              --nav-papier .8s var(--allume),
              --nav-lavis .8s var(--allume),
              color .8s var(--allume);
}
body[data-heure="etoiles"] .nav,
body[data-heure="nuit-lanternes"] .nav {
  /* la feuille se ré-encre : le token suffit, la barre ET son bord déchiré
     suivent ensemble ; le lavis crème s'éteint */
  --nav-papier: color-mix(in srgb, var(--nuit) 92%, transparent);
  --nav-lavis: transparent;
}
body[data-heure="etoiles"] .nav-logo,
body[data-heure="nuit-lanternes"] .nav-logo { color: var(--papier-lueur); }
body[data-heure="etoiles"] .nav-liens a,
body[data-heure="nuit-lanternes"] .nav-liens a { color: color-mix(in srgb, var(--papier-lueur) 82%, transparent); }
body[data-heure="etoiles"] .nav-liens a:hover,
body[data-heure="nuit-lanternes"] .nav-liens a:hover { color: var(--rose-poudre); }
/* les sceaux suivent le ré-encrage des liens, filet compris */
body[data-heure="etoiles"] .nav-reglage,
body[data-heure="nuit-lanternes"] .nav-reglage { color: color-mix(in srgb, var(--papier-lueur) 82%, transparent); }
body[data-heure="etoiles"] .nav-reglage:hover,
body[data-heure="nuit-lanternes"] .nav-reglage:hover,
body[data-heure="etoiles"] .nav-reglage:focus-visible,
body[data-heure="nuit-lanternes"] .nav-reglage:focus-visible,
body[data-heure="etoiles"] .nav-reglage[aria-expanded="true"],
body[data-heure="nuit-lanternes"] .nav-reglage[aria-expanded="true"] { color: var(--rose-poudre); }
body[data-heure="etoiles"] .nav-reglages,
body[data-heure="nuit-lanternes"] .nav-reglages {
  border-inline-start-color: color-mix(in srgb, var(--papier-lueur) 25%, transparent);
}

/* sous Lenis, un seul lissage de scroll */
html.cinema { scroll-behavior: auto; }

/* ---- La brume (les voiles d'apparition) ---------------------------------
   N'existe qu'avec JS (html.js) et si le visiteur accepte le mouvement :
   sans l'un ou l'autre, la page est livrée accomplie, rien n'est caché. */
@media (prefers-reduced-motion: no-preference) {
  html.js .scene [data-voile] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .9s var(--allume), transform .9s var(--pose),
                box-shadow .4s var(--allume);
    transition-delay: calc(var(--vi, 0) * 110ms);
  }
  html.js .scene.est-eclairee [data-voile] {
    opacity: 1;
    transform: none;
  }
  /* une fois la scène quittée, la brume revient sans délai ni cérémonie */
  html.js .scene:not(.est-eclairee) [data-voile] { transition-delay: 0ms; }
}

/* ---- Le menu mobile ------------------------------------------------------ */
.nav-menu-bouton {
  display: none;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s4);
  margin-left: var(--s2);
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--brun) 40%, transparent);
  border-radius: var(--rayon-pilule);
  font: inherit;
  font-weight: 800;
  font-size: .9rem;
  color: var(--encre);
  cursor: pointer;
}
body[data-heure="etoiles"] .nav-menu-bouton { color: var(--papier-lueur); }

/* la vitrine de washi (docs/features/menu-washi-glass) : au-dessus de la
   scène floutée — le flou est une profondeur de champ, pas une matière —
   une carte translucide au grain de papier, cerclée d'or, porte les
   chapitres. La nuit et le mode contraste ne redéfinissent que les tokens
   --vitrine-*, comme --nav-papier pour la barre. */
.menu-mobile {
  --vitrine-voile: color-mix(in srgb, var(--papier) 72%, transparent);
  --vitrine-fond: color-mix(in srgb, var(--papier) 62%, transparent);
  --vitrine-encre: var(--encre);
  --vitrine-accent: var(--framboise-encre);
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  /* safe : une carte plus haute que l'écran s'aligne au bord, pas rognée */
  place-content: safe center;
  justify-items: center;
  overflow-y: auto;
  background: var(--vitrine-voile);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity .35s var(--allume);
}
.menu-mobile[hidden] { display: none; }
.menu-mobile.est-ouvert { opacity: 1; }
body.menu-ouvert { overflow: hidden; }

/* l'air de la vitrine : les particules dérivent derrière la carte,
   jamais devant le texte (ordre DOM). Pétales le jour, lucioles la nuit. */
.vitrine-ambiance {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--allume);
}
.menu-mobile.est-ouvert .vitrine-ambiance { opacity: 1; transition-delay: .3s; }
.vitrine-ambiance .luciole { display: none; --eclat: .8; }
body[data-heure="etoiles"] .vitrine-ambiance .luciole { display: block; }
body[data-heure="etoiles"] .vitrine-ambiance .petale-chute { display: none; }

/* la carte : double vitrage (plus dense que le voile), grain de parchemin
   sous les encres (::before — il peint AVANT les enfants, le texte reste
   net), double liseré d'or comme les dorures du grimoire */
.menu-vitrine {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s2);
  width: min(88vw, 420px);
  padding: var(--s8) var(--s6);
  background: var(--vitrine-fond);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid color-mix(in srgb, var(--or) 55%, transparent);
  border-radius: var(--rayon-doux);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--encre) 18%, transparent);
  /* la pose : elle attend .est-ouvert — à la fermeture, ces durées brèves
     reprennent la main (la sortie n'attend jamais) */
  opacity: 0;
  translate: 0 14px;
  scale: .97;
  transition: opacity .22s var(--allume), translate .22s var(--allume), scale .22s var(--allume);
}
.menu-mobile.est-ouvert .menu-vitrine {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition: opacity .5s var(--pose), translate .5s var(--pose), scale .5s var(--pose);
  transition-delay: .05s;
}
.menu-vitrine::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url('../assets/textures/parchemin.webp') center / cover;
  opacity: .16;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.menu-vitrine::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
  border-radius: calc(var(--rayon-doux) - 6px);
  pointer-events: none;
}

/* la cascade d'encre : chaque habitant de la carte se révèle à son rang —
   les délais ne vivent que sous .est-ouvert (0s sur opacité/translate à la
   fermeture, et toujours 0s sur color : le hover ne se fait pas attendre) */
.menu-vitrine > * {
  opacity: 0;
  translate: 0 10px;
  transition: opacity .2s var(--allume), translate .2s var(--allume), color .3s var(--allume);
}
.menu-mobile.est-ouvert .menu-vitrine > * {
  opacity: 1;
  translate: 0 0;
  transition: opacity .45s var(--allume), translate .45s var(--pose), color .3s var(--allume);
  transition-delay: calc(.15s + var(--rang, 0) * .07s), calc(.15s + var(--rang, 0) * .07s), 0s;
}
.menu-vitrine > :nth-child(2) { --rang: 1; }
.menu-vitrine > :nth-child(3) { --rang: 2; }
.menu-vitrine > :nth-child(4) { --rang: 3; }
.menu-vitrine > :nth-child(5) { --rang: 4; }
.menu-vitrine > :nth-child(6) { --rang: 5; }

.menu-mobile a:not(.cta) {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 48px;
  font-family: var(--famille-plume);
  font-weight: 620;
  font-size: 1.65rem;
  color: var(--vitrine-encre);
  text-decoration: none;
  padding: var(--s2) var(--s6);
}
/* le fleuron entre les chapitres : le langage des séparateurs de la nav,
   à la verticale — posé au milieu du gap, muet aux lecteurs d'écran */
.menu-mobile a:not(.cta) + a:not(.cta)::before {
  content: '❦' / '';
  position: absolute;
  top: calc(var(--s1) * -1);
  left: 50%;
  translate: -50% -50%;
  font-size: .95rem;
  color: color-mix(in srgb, var(--framboise) 45%, transparent);
}
/* le trait de pinceau se dessine sous le chapitre touché */
.menu-mobile a:not(.cta)::after {
  content: '';
  position: absolute;
  left: var(--s6); right: var(--s6); bottom: 8px;
  height: 6px;
  background: currentColor;
  opacity: .85;
  -webkit-mask: var(--masque-pinceau) center / 100% 100% no-repeat;
          mask: var(--masque-pinceau) center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--allume);
}
.menu-mobile a:not(.cta):hover,
.menu-mobile a:not(.cta):focus-visible { color: var(--vitrine-accent); }
.menu-mobile a:not(.cta):hover::after,
.menu-mobile a:not(.cta):focus-visible::after { transform: scaleX(1); }

/* le filet d'or : ici finissent les chapitres, ici commence l'action */
.vitrine-filet {
  width: 56%;
  height: 1px;
  margin: var(--s3) 0 var(--s2);
  background: color-mix(in srgb, var(--or) 30%, transparent);
}
.menu-mobile .cta { margin-top: 0; }

/* la nuit, la vitrine s'encre ; l'or, lui, ne change pas */
body[data-heure="etoiles"] .menu-mobile {
  --vitrine-voile: color-mix(in srgb, var(--nuit) 62%, transparent);
  --vitrine-fond: color-mix(in srgb, var(--nuit) 55%, transparent);
  --vitrine-encre: var(--papier-lueur);
  --vitrine-accent: var(--lueur);
}
/* mode contraste : les surfaces s'affermissent, plus de monde en
   transparence (même geste qu'accessibilite.css pour les panneaux) */
:root[data-acc-contraste] .menu-mobile {
  --vitrine-voile: color-mix(in srgb, var(--papier) 96%, transparent);
  --vitrine-fond: color-mix(in srgb, var(--papier) 98%, transparent);
}
:root[data-acc-contraste] body[data-heure="etoiles"] .menu-mobile {
  --vitrine-voile: color-mix(in srgb, var(--nuit) 96%, transparent);
  --vitrine-fond: color-mix(in srgb, var(--nuit) 98%, transparent);
}
/* sans backdrop-filter : du papier franc — jamais de texte sur scène nette */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu-mobile {
    --vitrine-voile: color-mix(in srgb, var(--papier) 94%, transparent);
    --vitrine-fond: color-mix(in srgb, var(--papier) 96%, transparent);
  }
  body[data-heure="etoiles"] .menu-mobile {
    --vitrine-voile: color-mix(in srgb, var(--nuit) 94%, transparent);
    --vitrine-fond: color-mix(in srgb, var(--nuit) 96%, transparent);
  }
}
/* reduced motion : pas de particules (la règle globale .01ms les figerait
   en plein écran) et pas de cascade — tout paraît ensemble */
@media (prefers-reduced-motion: reduce) {
  .vitrine-ambiance { display: none; }
  .menu-mobile.est-ouvert .menu-vitrine,
  .menu-mobile.est-ouvert .menu-vitrine > * { transition-delay: 0s; }
}
/* le coin des réglages du menu : les sceaux de la nav, à hauteur de pouce */
.menu-reglages {
  display: flex;
  gap: var(--s4);
  margin-top: var(--s4);
}
.menu-reglage {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brun) 40%, transparent);
  border-radius: var(--rayon-pilule);
  background: none;
  color: var(--encre-douce);
  cursor: pointer;
}
.menu-reglage:hover, .menu-reglage:focus-visible,
.menu-reglage[aria-expanded="true"] {
  color: var(--framboise-encre);
  border-color: var(--brun);
}
.menu-reglage span {
  font-family: var(--famille-plume);
  font-weight: 620;
  font-size: 15px;
  letter-spacing: .04em;
}

/* ---- Petit paysage : la nav s'efface, la hauteur est au livre -----------
   La pastille cœur (même langage que la pastille son) prend le relais et
   ouvre le menu papier en surimpression. Elle n'existe qu'ici — et jamais
   pendant le seuil ni la marche : rien ne doit précéder l'arrivée. */
.pastille-menu { display: none; }
@media (pointer: coarse) and (max-height: 520px) {
  .nav { display: none; }
  .pastille-menu {
    display: grid;
    place-items: center;
    position: fixed;
    top: var(--s3);
    right: clamp(16px, 3vw, 40px); /* à droite : sous le pouce, pas sur le livre */
    z-index: 110;
    width: 44px; height: 44px;
    border: 1px solid rgba(246, 239, 231, .4);
    border-radius: var(--rayon-pilule);
    background: rgba(15, 10, 18, .55);
    color: var(--papier-lueur);
    cursor: pointer;
  }
  .pastille-menu:hover, .pastille-menu:focus-visible { border-color: var(--papier-lueur); }
  body.seuil-actif .pastille-menu,
  body.intro-en-cours .pastille-menu { display: none; }
  /* la vitrine au-dessus du livre : compacte pour ~320 px de haut — le CTA
     et les sceaux partagent la dernière rangée, la carte seule scrolle si
     une langue verbeuse déborde */
  .menu-mobile { z-index: 105; }
  .menu-vitrine {
    width: min(74vw, 460px);
    max-height: 92svh;
    overflow-y: auto;
    padding: var(--s4) var(--s6);
    gap: var(--s1);
    grid-template-columns: auto auto;
    justify-content: center;
    column-gap: var(--s6);
  }
  .menu-mobile a:not(.cta),
  .vitrine-filet { grid-column: 1 / -1; }
  .menu-mobile a:not(.cta) { font-size: 1.3rem; min-height: 44px; padding: var(--s1) var(--s6); }
  .vitrine-filet { margin: var(--s2) 0 var(--s1); }
  .menu-mobile .cta { justify-self: end; }
  .menu-reglages { margin-top: 0; justify-self: start; align-self: center; }
  .menu-reglage { width: 44px; height: 44px; }
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 720px) {
  .nav { flex-wrap: wrap; row-gap: var(--s2); }
  .nav-liens {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav .cta { padding: var(--s2) var(--s4); min-height: 40px; }

  /* avec JS : le bouton menu remplace la rangée d'ancres */
  html.js .nav-liens { display: none; }
  html.js .nav-menu-bouton:not([hidden]) { display: inline-flex; }
}

/* ---- Reduced motion : un chemin, pas une punition ----------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}