/* L'ŒUVRE — Musée de la Création · feuille générée par tools/build.py
   à partir de assets_src/css/*.css — ne pas éditer le fichier produit. */
/* ═══════════════════════════════════════════════════════════════════════════
   L'ŒUVRE — Musée de la Création · design.css
   Jetons de conception : couleurs, typographie, rythme, profondeur, mouvement.
   Aucune ressource externe (R13). WCAG 2.2 AA visé : contrastes ≥ 4,5:1.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Palette (data/site.json → couleurs) ─────────────────────────────── */
  --nuit:#05070D;        /* fond général                    */
  --nuit-2:#0A0E1A;      /* fond de section                 */
  --nuit-3:#101728;      /* cartes, surfaces                */
  --cosmos:#1B2A5A;      /* aile I                          */
  --terre:#0E5E7E;       /* aile II                         */
  --vie:#2F8F5B;         /* aile III                        */
  --animaux:#D9902F;     /* aile IV                         */
  --quantique:#6B4FD8;   /* aile V                          */
  --homme:#C8667A;       /* aile VI                         */
  --or:#E6C46A;          /* aile VII · accent noble         */
  --nacre:#F4F1EA;       /* texte principal                 */
  --lapis:#3A4FA8;       /* RÉFLEXION                       */
  --ambre:#E0A32E;       /* DÉBATTU                         */
  --vert:#4FBF87;        /* ÉTABLI                          */

  --aile:var(--or);                 /* couleur de la page courante (surchargée) */
  --texte:var(--nacre);
  --texte-doux:#C9CCD8;             /* 8,3:1 sur --nuit */
  --texte-sourd:#8E93A6;            /* 5,1:1 sur --nuit */
  --ligne:rgba(244,241,234,.14);
  --ligne-forte:rgba(244,241,234,.30);
  --surface:rgba(244,241,234,.045);
  --surface-haute:rgba(244,241,234,.085);

  /* ── Typographie ─────────────────────────────────────────────────────── */
  --police-titre:"Cormorant Garamond","EB Garamond",Georgia,"Times New Roman",serif;
  --police-citation:"EB Garamond",Georgia,"Times New Roman",serif;
  --police-ui:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,sans-serif;
  --police-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --police-hebreu:"Noto Serif Hebrew","EB Garamond",serif;
  --police-grec:"Noto Serif Greek","EB Garamond",serif;

  --fs-xxs:clamp(.68rem,.66rem + .1vw,.74rem);
  --fs-xs:clamp(.78rem,.75rem + .15vw,.86rem);
  --fs-s:clamp(.92rem,.88rem + .2vw,1rem);
  --fs-m:clamp(1.05rem,.98rem + .35vw,1.22rem);
  --fs-l:clamp(1.3rem,1.15rem + .7vw,1.7rem);
  --fs-xl:clamp(1.8rem,1.4rem + 1.9vw,3rem);
  --fs-xxl:clamp(2.4rem,1.6rem + 4vw,5rem);
  --fs-hero:clamp(2.8rem,1.4rem + 7vw,7.5rem);

  --lh-serre:1.06;
  --lh-normal:1.55;
  --lh-large:1.75;
  --chiffre:var(--police-mono);
  --suivi-titre:.02em;
  --suivi-surtitre:.22em;

  /* ── Rythme et géométrie ─────────────────────────────────────────────── */
  --pas:clamp(1rem,.9rem + .5vw,1.25rem);
  --espace-1:calc(var(--pas) * .5);
  --espace-2:var(--pas);
  --espace-3:calc(var(--pas) * 1.75);
  --espace-4:calc(var(--pas) * 3);
  --espace-section:clamp(3.5rem,2rem + 7vw,8rem);
  --largeur:76rem;
  --largeur-lecture:44rem;
  --gouttiere:clamp(1rem,.6rem + 2vw,2.5rem);
  --rayon-s:.375rem;
  --rayon-m:.75rem;
  --rayon-l:1.25rem;

  /* ── Profondeur (halos doux, jamais de cercle lumineux autour d'un sujet) ─ */
  --ombre-1:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.7);
  --ombre-2:0 2px 6px rgba(0,0,0,.45),0 24px 60px -24px rgba(0,0,0,.85);
  --halo-aile:0 0 0 1px color-mix(in srgb,var(--aile) 32%,transparent),
             0 24px 70px -30px color-mix(in srgb,var(--aile) 55%,transparent);

  /* ── Mouvement ───────────────────────────────────────────────────────── */
  --duree-1:140ms;
  --duree-2:280ms;
  --duree-3:520ms;
  --duree-lente:1100ms;
  --aisance:cubic-bezier(.22,.61,.36,1);
  --aisance-sortie:cubic-bezier(.16,1,.3,1);

  /* ── Plans ───────────────────────────────────────────────────────────── */
  --z-fond:0; --z-contenu:1; --z-entete:40; --z-tiroir:60; --z-modale:80; --z-avert:90;

  color-scheme:dark;
}

/* ── Réinitialisation minimale ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--nuit);color:var(--texte);
  font-family:var(--police-ui);font-size:var(--fs-m);line-height:var(--lh-normal);
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,video,canvas{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration-color:color-mix(in srgb,var(--aile) 60%,transparent);
  text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--aile)}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{margin:0;font-family:var(--police-titre);font-weight:600;
  line-height:var(--lh-serre);letter-spacing:var(--suivi-titre);text-wrap:balance}
p{margin:0 0 var(--espace-2);text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
hr{border:0;border-top:1px solid var(--ligne);margin:var(--espace-4) 0}

/* ── Typographie appliquée ─────────────────────────────────────────────── */
.surtitre{
  font-family:var(--police-ui);font-size:var(--fs-xxs);font-weight:600;
  letter-spacing:var(--suivi-surtitre);text-transform:uppercase;
  color:var(--aile);margin:0 0 var(--espace-2);
}
.titre-hero{font-size:var(--fs-hero);letter-spacing:-.01em}
.titre-1{font-size:var(--fs-xxl)}
.titre-2{font-size:var(--fs-xl)}
.titre-3{font-size:var(--fs-l)}
.chapeau{font-size:var(--fs-l);color:var(--texte-doux);max-width:var(--largeur-lecture)}
.corps{max-width:var(--largeur-lecture);color:var(--texte-doux)}
.corps--large{max-width:var(--largeur)}

/* Chiffres : toujours en monospace, jamais décoratifs */
.chiffre,.mesure,valeur{font-family:var(--chiffre);font-variant-numeric:tabular-nums;
  color:var(--nacre);letter-spacing:-.01em}

/* Versets : citation serrée, pas de guillemets décoratifs géants */
.verset{
  font-family:var(--police-citation);font-style:italic;font-size:var(--fs-l);
  line-height:var(--lh-large);color:var(--nacre);margin:0 0 var(--espace-2);
  padding-left:var(--espace-2);border-left:2px solid var(--aile);
}
.verset__ref{
  display:block;font-family:var(--police-ui);font-style:normal;font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--texte-sourd);margin-top:var(--espace-1);
}
.hebreu{font-family:var(--police-hebreu);direction:rtl;unicode-bidi:isolate}
.grec{font-family:var(--police-grec)}

/* Termes étrangers ou techniques : expliqués immédiatement (R01) */
.terme{border-bottom:1px dotted var(--ligne-forte);cursor:help}

/* ── Accessibilité ─────────────────────────────────────────────────────── */
.aller-contenu{
  position:fixed;top:.5rem;left:.5rem;z-index:var(--z-avert);
  transform:translateY(-160%);transition:transform var(--duree-2) var(--aisance);
  background:var(--or);color:#0A0A0A;padding:.6rem 1rem;border-radius:var(--rayon-s);
  font-weight:600;font-size:var(--fs-s);text-decoration:none;
}
.aller-contenu:focus{transform:translateY(0)}
.visuellement-cache{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Mouvement réduit : choisi par l'utilisateur, persistant */
[data-mouvement-reduit="1"] *,[data-mouvement-reduit="1"] *::before,[data-mouvement-reduit="1"] *::after{
  animation-duration:1ms!important;animation-iteration-count:1!important;
  transition-duration:1ms!important;scroll-behavior:auto!important;
}
[data-mouvement-reduit="1"] [data-reveal]{opacity:1!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important}
}

/* Contraste forcé (Windows) : respecter les couleurs système */
@media (forced-colors:active){
  .badge,.bouton,.carte{border:1px solid CanvasText;forced-color-adjust:none}
}

/* ── Mise en page ──────────────────────────────────────────────────────── */
.conteneur{width:100%;max-width:var(--largeur);margin-inline:auto;
  padding-inline:var(--gouttiere)}
.contenu{position:relative;z-index:var(--z-contenu)}
.section{padding-block:var(--espace-section);position:relative}
.section + .section{border-top:1px solid var(--ligne)}
.grille{display:grid;gap:var(--espace-3)}
.grille--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grille--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.grille--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.pile{display:flex;flex-direction:column;gap:var(--espace-2)}
.ligne{display:flex;flex-wrap:wrap;gap:var(--espace-2);align-items:center}
.espace-haut{margin-top:var(--espace-4)}


/* Lien d'évitement (WCAG 2.4.1) : visible uniquement au focus clavier */
.evitement {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: 0 0 8px 8px;
  background: var(--or); color: var(--nuit); font-weight: 700;
  text-decoration: none; transition: top .15s ease;
}
.evitement:focus { top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   L'ŒUVRE — components.css
   Composants signature : entête, sommaire, badges à trois niveaux,
   bloc de fait sourcé, figure légendée, cartes d'aile, pied de page.
   R06 : aucun glyphe « + » ni « X » ; les boutons écrivent leur action.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Entête ────────────────────────────────────────────────────────────── */
.entete{
  position:fixed;inset:0 0 auto;z-index:var(--z-entete);
  background:linear-gradient(to bottom,rgba(5,7,13,.92),rgba(5,7,13,.55) 60%,transparent);
  backdrop-filter:blur(6px);
  transition:transform var(--duree-3) var(--aisance-sortie),background var(--duree-3);
}
.entete[data-cache="1"]{transform:translateY(-102%)}
.entete__interieur{
  width:100%;max-width:var(--largeur);margin-inline:auto;
  padding:.85rem var(--gouttiere);display:flex;align-items:center;gap:var(--espace-2);
}
.marque{display:flex;flex-direction:column;text-decoration:none;line-height:1.15}
.marque__nom{
  font-family:var(--police-titre);font-size:var(--fs-l);font-weight:600;
  letter-spacing:.06em;color:var(--nacre);
}
.marque__sous{
  font-family:var(--police-ui);font-size:var(--fs-xxs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--texte-sourd);
}
.nav{margin-left:auto;display:flex;gap:var(--espace-1);align-items:center}
.nav__declencheur,.bouton{
  font-family:var(--police-ui);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.62rem 1.05rem;border-radius:var(--rayon-s);
  border:1px solid var(--ligne-forte);color:var(--nacre);
  background:var(--surface);
  transition:background var(--duree-2),border-color var(--duree-2),color var(--duree-2),transform var(--duree-1);
}
.nav__declencheur:hover,.bouton:hover{background:var(--surface-haute);border-color:var(--aile);color:#fff}
.nav__declencheur:active,.bouton:active{transform:translateY(1px)}
.bouton--or{background:var(--or);border-color:var(--or);color:#12100A}
.bouton--or:hover{background:#F2D585;border-color:#F2D585;color:#12100A}
.bouton--fantome{background:transparent}

/* ── Sommaire (tiroir) ─────────────────────────────────────────────────── */
.tiroir{
  position:fixed;inset:0 auto 0 0;z-index:var(--z-tiroir);width:min(24rem,88vw);
  background:var(--nuit-2);border-right:1px solid var(--ligne);
  box-shadow:var(--ombre-2);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-102%);transition:transform var(--duree-3) var(--aisance-sortie);
  padding:var(--espace-2) var(--espace-2) var(--espace-4);
}
.tiroir[data-ouvert="1"]{transform:translateX(0)}
.tiroir__entete{display:flex;align-items:center;justify-content:space-between;gap:var(--espace-2);
  padding-block:var(--espace-1) var(--espace-2);border-bottom:1px solid var(--ligne);
  position:sticky;top:0;background:var(--nuit-2);z-index:1}
.tiroir__titre{font-family:var(--police-ui);font-size:var(--fs-xxs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--texte-sourd);margin:0}
.tiroir__liste{padding-top:var(--espace-2)}
.tiroir__lien{display:block;padding:.6rem .5rem;border-radius:var(--rayon-s);
  text-decoration:none;font-weight:600;font-size:var(--fs-s)}
.tiroir__lien:hover{background:var(--surface)}
.tiroir__aile{margin:var(--espace-2) 0 .35rem;padding-left:.5rem;
  border-left:2px solid var(--aile,#E6C46A);font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux)}
.tiroir__aile-num{color:var(--aile,#E6C46A);font-family:var(--police-mono);margin-right:.4rem}
.tiroir__liste ol{padding-left:1.2rem;margin-bottom:.4rem}
.tiroir__liste a{display:flex;gap:.6rem;padding:.42rem .5rem;border-radius:var(--rayon-s);
  text-decoration:none;font-size:var(--fs-s);color:var(--texte-doux)}
.tiroir__liste a:hover{background:var(--surface);color:#fff}
.tiroir__num{font-family:var(--police-mono);font-size:var(--fs-xs);color:var(--aile,#E6C46A);min-width:1.6em}
.tiroir__attente{color:var(--texte-sourd);display:flex;gap:.6rem;padding:.42rem .5rem;font-size:var(--fs-s)}
.tiroir__num--attente{opacity:.45}
.tiroir__bientot{font-style:normal;font-size:var(--fs-xxs);color:var(--texte-sourd);opacity:.8}
.voile{position:fixed;inset:0;z-index:calc(var(--z-tiroir) - 1);background:rgba(2,3,6,.72);
  opacity:0;pointer-events:none;transition:opacity var(--duree-3)}
.voile[data-ouvert="1"]{opacity:1;pointer-events:auto}
.voile[hidden]{display:none}
.tiroir[hidden]{display:none}

/* ── Héros ─────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:min(92svh,52rem);display:flex;align-items:flex-end;
  padding-block:clamp(6rem,14vh,10rem) var(--espace-4);overflow:clip;isolation:isolate}
.hero__fond{position:absolute;inset:0;z-index:-2}
.hero__fond img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.04)}
.hero__voile{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 80% at 50% 110%,rgba(5,7,13,.96),transparent 60%),
    linear-gradient(to bottom,rgba(5,7,13,.72) 0%,rgba(5,7,13,.30) 38%,rgba(5,7,13,.92) 88%);}
.hero__contenu{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)}
.hero--amorcage,.hero--attente{min-height:auto;padding-block:var(--espace-section)}
.hero__credit{position:absolute;inset:auto var(--gouttiere) .6rem auto;z-index:1;
  font-family:var(--police-ui);font-size:var(--fs-xxs);letter-spacing:.08em;
  color:var(--texte-sourd);background:rgba(5,7,13,.6);padding:.2rem .5rem;border-radius:.25rem}
.hero--attente{background:var(--nuit-2)}

/* ── Cartes ────────────────────────────────────────────────────────────── */
.carte{
  position:relative;background:var(--nuit-3);border:1px solid var(--ligne);
  border-radius:var(--rayon-m);padding:var(--espace-3);
  transition:transform var(--duree-3) var(--aisance-sortie),border-color var(--duree-3),box-shadow var(--duree-3);
}
.carte::before{content:"";position:absolute;inset:0 0 auto;height:2px;border-radius:var(--rayon-m) var(--rayon-m) 0 0;
  background:linear-gradient(90deg,var(--aile),transparent 78%);opacity:.85}
.carte:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--aile) 45%,var(--ligne));box-shadow:var(--halo-aile)}
.carte h3{font-size:var(--fs-l);margin-bottom:.4rem}
.carte__num{font-family:var(--police-mono);font-size:var(--fs-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--aile);margin:0 0 .5rem}
.carte__meta{font-size:var(--fs-xs);color:var(--texte-sourd);margin:.6rem 0 0}
.carte--lien{text-decoration:none;display:block;color:inherit}
.carte--aile{overflow:hidden;padding:0;border:0;background:transparent}
.aile-visuel{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--rayon-m);
  border:1px solid var(--ligne);background:var(--nuit-3)}
.aile-visuel img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--duree-lente) var(--aisance-sortie),filter var(--duree-3)}
.carte--aile:hover .aile-visuel img{transform:scale(1.045)}
.aile-visuel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,7,13,.95) 10%,rgba(5,7,13,.62) 42%,rgba(5,7,13,.18) 72%,transparent);
  mix-blend-mode:normal}
.aile-visuel__texte{position:absolute;inset:auto 0 0;padding:var(--espace-2);z-index:1;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 12px rgba(0,0,0,.7)}
.aile-visuel__texte h3{font-size:var(--fs-l)}
.aile-visuel--abstrait{background:
  radial-gradient(90% 120% at 20% 0%,color-mix(in srgb,var(--aile) 55%,transparent),transparent 70%),
  linear-gradient(150deg,color-mix(in srgb,var(--aile) 30%,var(--nuit-3)),var(--nuit-3) 70%)}
.aile-visuel--abstrait::after{background:linear-gradient(to top,rgba(5,7,13,.85),transparent 55%)}
.aile-visuel__chiffre{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--police-titre);font-size:clamp(4rem,3rem + 6vw,8rem);
  color:color-mix(in srgb,var(--aile) 42%,transparent);letter-spacing:.04em}
.carte--aile{display:flex;flex-direction:column;gap:var(--espace-2)}
.carte--aile .carte__corps{padding-inline:.25rem}

/* Visages du Créateur (ailes I-IV) */
.visage{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon-m);
  padding:var(--espace-3)}
.visage h3{font-size:var(--fs-l)}
.visage__verset{font-family:var(--police-citation);font-style:italic;color:var(--or);
  font-size:var(--fs-s);margin-top:.6rem}

/* Parcours de visite */
.parcours{border-left:2px solid var(--aile);padding-left:var(--espace-2)}
.parcours__duree{font-family:var(--police-mono);font-size:var(--fs-xs);color:var(--texte-sourd)}

/* ── Badges : trois niveaux visuellement distincts ─────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--police-ui);font-size:var(--fs-xxs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  padding:.3rem .62rem;border-radius:.3rem;border:1px solid currentColor;
}
.badge::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex:none}
.badge--etabli{color:var(--vert);background:rgba(79,191,135,.10)}
.badge--debattu{color:var(--ambre);background:rgba(224,163,46,.12)}
.badge--reflexion{color:#9DB2FF;background:rgba(58,79,168,.16)}
.legende-badge{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-s);color:var(--texte-doux)}
.legende-badge .badge{flex:none;margin-top:.15rem}

/* ── Bloc de fait sourcé ───────────────────────────────────────────────── */
.fait{
  position:relative;background:var(--nuit-3);border:1px solid var(--ligne);
  border-left:3px solid var(--aile);border-radius:var(--rayon-s) var(--rayon-m) var(--rayon-m) var(--rayon-s);
  padding:var(--espace-3);margin-block:var(--espace-2);
}
.fait--debattu{border-left-color:var(--ambre)}
.fait--reflexion{border-left-color:var(--lapis)}
.fait__entete{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:.6rem}
.fait__id{font-family:var(--police-mono);font-size:var(--fs-xxs);color:var(--texte-sourd);letter-spacing:.08em}
.fait__enonce{font-size:var(--fs-m);color:var(--nacre);margin:0 0 var(--espace-1)}
.fait__mesure{font-family:var(--police-mono);font-size:var(--fs-l);color:var(--or);
  font-variant-numeric:tabular-nums;display:block;margin:.2rem 0 .5rem}
.fait__source{font-size:var(--fs-xs);color:var(--texte-sourd);margin:0}
.fait__source a{color:var(--texte-doux)}
/* WCAG 2.2 AA 2.5.8 : cibles d'au moins 24 px de haut */
.fait__source a,.pile a,.fait a{display:inline-block;min-height:24px;padding-block:.3rem}
.fait__note{font-size:var(--fs-xs);color:var(--texte-doux);background:var(--surface);
  border-radius:var(--rayon-s);padding:.6rem .75rem;margin-top:.7rem}
.fait__note strong{color:var(--ambre);font-weight:600}

/* ── Figure et légende (R08 : mention obligatoire du statut de l'image) ── */
.figure{margin-block:var(--espace-3)}
.figure__cadre{position:relative;border-radius:var(--rayon-m);overflow:hidden;
  border:1px solid var(--ligne);background:var(--nuit-3)}
.figure__cadre img{width:100%;aspect-ratio:16/9;object-fit:cover}
.figure__legende{font-size:var(--fs-xs);color:var(--texte-sourd);margin-top:.6rem;max-width:var(--largeur-lecture)}
.figure__statut{display:inline-block;font-family:var(--police-ui);font-size:var(--fs-xxs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--aile);
  border:1px solid var(--ligne-forte);border-radius:.25rem;padding:.15rem .45rem;margin-right:.5rem}
.figure__actions{position:absolute;inset:auto .6rem .6rem auto;display:flex;gap:.4rem}
.figure__action{font-family:var(--police-ui);font-size:var(--fs-xxs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:.4rem .6rem;border-radius:.3rem;
  background:rgba(5,7,13,.78);border:1px solid var(--ligne-forte);color:var(--nacre);
  backdrop-filter:blur(4px)}
.figure__action:hover{border-color:var(--or);color:#fff}

/* ── Interaction : zone de manipulation + replis ───────────────────────── */
.interaction{background:var(--nuit-2);border:1px solid var(--ligne);border-radius:var(--rayon-l);
  padding:var(--espace-3);margin-block:var(--espace-3)}
.interaction__scene{position:relative;aspect-ratio:16/9;border-radius:var(--rayon-m);overflow:hidden;
  background:#06080f;
  border:1px solid var(--ligne)}
.interaction__scene canvas{width:100%;height:100%;display:block}
.interaction__repli{position:absolute;inset:0}
.interaction__repli img{width:100%;height:100%;object-fit:cover}
.interaction__barre{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:var(--espace-2)}
.interaction__curseur{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;
  font-size:var(--fs-xs);color:var(--texte-doux);flex:1 1 16rem}
.interaction__curseur .curseur{flex:1 1 12rem}
.curseur{height:1.5rem;min-width:9rem;flex:1;accent-color:var(--or);background:transparent}
.curseur:focus-visible{outline:2px solid var(--or);outline-offset:4px}
.interaction__etat{font-family:var(--police-mono);font-size:var(--fs-xs);color:var(--texte-sourd);margin-left:auto}
.interaction__aide{font-size:var(--fs-xs);color:var(--texte-sourd);margin-top:.5rem}
.kbd{font-family:var(--police-mono);font-size:var(--fs-xxs);border:1px solid var(--ligne-forte);
  border-bottom-width:2px;border-radius:.28rem;padding:.1rem .38rem;color:var(--nacre);background:var(--surface)}
.avertissement-moteur{font-size:var(--fs-xs);color:var(--ambre);margin-top:.5rem}

/* ── Jauge de progression d'un parcours ────────────────────────────────── */
.jauge{height:.35rem;border-radius:1rem;background:var(--surface-haute);overflow:hidden}
.jauge__plein{display:block;height:100%;background:linear-gradient(90deg,var(--aile),var(--or));
  border-radius:1rem;transition:width var(--duree-lente) var(--aisance-sortie)}

/* ── Pied de page ──────────────────────────────────────────────────────── */
.pied{border-top:1px solid var(--ligne);background:var(--nuit-2);
  padding-block:var(--espace-4);margin-top:var(--espace-section)}
.pied__verset{font-family:var(--police-citation);font-style:italic;color:var(--texte-doux);
  max-width:var(--largeur-lecture);font-size:var(--fs-m)}
.pied__nav{display:flex;flex-wrap:wrap;gap:var(--espace-2);margin-block:var(--espace-2)}
.pied__nav a{font-size:var(--fs-s);color:var(--texte-doux);text-decoration:none;
  border-bottom:1px solid transparent}
.pied__nav a:hover{border-bottom-color:var(--or);color:#fff}
.pied__mention{font-size:var(--fs-xxs);color:var(--texte-sourd);max-width:var(--largeur-lecture)}

/* ── Adaptatif ─────────────────────────────────────────────────────────── */
@media (max-width:44rem){
  .entete__interieur{padding:.7rem var(--gouttiere)}
  .marque__sous{display:none}
  .hero{min-height:auto;padding-block:clamp(5rem,18vh,7rem) var(--espace-3)}
  .carte,.visage,.fait,.interaction{padding:var(--espace-2)}
  .grille{gap:var(--espace-2)}
}
@media (min-width:70rem){
  .grille--ailes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{
  .entete,.tiroir,.voile,.interaction__barre,.figure__actions{display:none!important}
  body{background:#fff;color:#111}
  .carte,.fait{border-color:#bbb;background:#fff}
}

/* narration R09 */
#audio, .section audio{width:100%;max-width:42rem;margin:.4rem 0 .8rem}
.transcription summary{cursor:pointer;color:var(--or);font-size:var(--fs-sm)}
.transcription[open] summary{margin-bottom:.4rem}


/* ── Page Sources + ancres de salles (E14) ─────────────────────────────── */
.liste-sources { list-style: none; padding: 0; display: grid; gap: 18px; }
.src { border-left: 3px solid var(--or); padding: 10px 16px; background: var(--nuit-2);
       border-radius: 0 10px 10px 0; }
.src__id { font-family: var(--mono, monospace); font-size: .8rem; color: var(--or);
           letter-spacing: .08em; text-transform: uppercase; }
.src__ref { margin: 6px 0; color: var(--nacre); }
.src__note { font-size: .9rem; color: var(--texte-doux); }
.src__liens { font-size: .85rem; color: var(--texte-sourd); }
.src__liens a { color: var(--or); }
a.src__ancre { color: var(--or); font-family: var(--mono, monospace); font-size: .85em;
               text-decoration: none; border-bottom: 1px dotted currentColor; }
a.src__ancre:hover, a.src__ancre:focus-visible { border-bottom-style: solid; }


/* ── Pages annexes réelles (E17) : audioguide, frise, recherche, glossaire, puissances ── */
.ag__liste { list-style: none; padding: 0; display: grid; gap: 22px;
             grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.ag__carte { background: var(--nuit-2); border: 1px solid rgba(230,196,106,.18);
             border-radius: 14px; padding: 18px 20px; }
.ag__carte audio { width: 100%; margin: 10px 0; }
.ag__lien { font-size: .85rem; }
.ag__lien a { color: var(--or); }
.frise { display: grid; gap: 0; border-left: 2px solid var(--or); padding-left: 22px; }
.frise__etape { padding: 14px 0; position: relative; }
.frise__etape::before { content: ""; position: absolute; left: -28px; top: 22px; width: 10px;
                        height: 10px; border-radius: 50%; background: var(--or); }
.frise__annee { font-family: var(--mono, monospace); color: var(--or); font-size: 1.05rem;
                letter-spacing: .06em; }
.frise__refs { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px;
               color: var(--texte-doux); font-size: .92rem; }
.frise__refs a { color: var(--or); font-family: var(--mono, monospace); font-size: .85em; }
.rech { margin-top: 22px; }
.rech input[type="search"] { width: min(560px, 100%); padding: 14px 18px; border-radius: 999px;
  border: 1px solid rgba(230,196,106,.4); background: var(--nuit-2); color: var(--nacre);
  font-size: 1rem; }
.rech input[type="search"]:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.rech__etat { margin-top: 12px; color: var(--texte-sourd); min-height: 1.4em; }
.rech__resultats { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 12px;
                   text-align: left; }
.rech__resultats a { color: var(--or); font-weight: 600; }
.rech__resultats p { color: var(--texte-doux); font-size: .9rem; margin: 4px 0 0; }
.gl__liste { list-style: none; padding: 0; display: grid; gap: 18px;
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gl { background: var(--nuit-2); border-radius: 12px; padding: 16px 18px;
      border-top: 3px solid var(--lapis); }
.gl__salle { display: inline-block; margin-top: 6px; color: var(--or); font-size: .85rem; }
.pdx__liste { list-style: none; padding: 0; display: grid; gap: 20px; }
.pdx { background: var(--nuit-2); border-radius: 14px; padding: 18px 22px; position: relative;
       border-left: 3px solid var(--or); }
.pdx__rang { position: absolute; top: 14px; right: 18px; font-family: var(--mono, monospace);
             color: var(--texte-sourd); font-size: .85rem; }
.pdx__valeur { font-family: var(--mono, monospace); color: var(--or); font-size: 1.25rem;
               margin: 8px 0 4px; }
.pdx__unite { color: var(--texte-doux); font-size: .8em; }
.pdx__liens { margin-top: 8px; font-size: .85rem; }
.pdx__liens a { color: var(--or); }

/* Cibles tactiles ≥ 24 px (WCAG 2.5.8) : liens inline des pages annexes et sources */
.frise__refs a, a.gl__salle, .ag__lien a, .pdx__liens a,
a.src__ancre, .src__liens a, .rech__resultats a {
  display: inline-block;
  padding: 5px 8px;
  margin: -2px -4px;
  line-height: 1.2;
}

/* Page d'attente/404 : aucun débordement horizontal, même sans JS ni conteneur */
.hero--attente { overflow-x: hidden; padding-inline: max(16px, 4vw); }
.hero--attente .hero__contenu, .hero--attente p, .hero--attente .ligne,
.hero--attente a.bouton { max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; }
.hero--attente .ligne { display: flex; flex-wrap: wrap; gap: 12px; }

/* Le héros d'attente/404 n'a pas de .hero__contenu : on empile à gauche,
   sans alignement flex-end qui pousse le texte hors du viewport mobile. */
.hero--attente { flex-direction: column; align-items: flex-start; justify-content: center;
                 gap: 14px; }


/* Cartes illustrées : visages du Créateur dans ses ouvrages + trois niveaux */
.visage__img img, .niv-carte__img img, .parcours__img img { width: 100%; height: 150px; object-fit: cover;
  border-radius: 10px; margin-bottom: 12px; }
.niv-carte { background: var(--nuit-2); border-radius: 14px; padding: 16px 18px;
             border-top: 3px solid var(--or); }
.niv-carte__titre { display: flex; align-items: center; gap: 10px; font-weight: 700;
                    margin: 0 0 8px; }


/* ── Feuille de visite imprimable (@media print) ─────────────────────────── */
@media print {
  :root {
    --nuit: #ffffff; --nuit-2: #ffffff; --nuit-3: #f2f2f2;
    --nacre: #111111; --texte-doux: #222222; --texte-sourd: #555555;
    --or: #8a6a00; --lapis: #2a3a8a; --ambre: #8a5a00; --vert: #1a6a4a;
    --cosmos: #22307a; --terre: #0e5e7e; --vie: #1a6a3a; --quantique: #4a35a0;
    --homme: #a04458; --animaux: #8a5a10;
  }
  @page { margin: 18mm; }
  .entete, .pied, .rail, .ambiance, .evitement, .interaction, .hero__fond,
  .hero__voile, .print-btn, #sfx-toggle, audio, .rech, .pied__sfx { display: none !important; }
  body { background: #fff !important; }
  .hero, .hero--visuel, .hero--attente { min-height: 0; padding: 0 0 8mm; }
  .section { padding: 6mm 0; }
  .fait, .src, .gl, .pdx, .ag__carte, .niv-carte, .visage, .parcours {
    break-inside: avoid; background: #fff; border-color: #bbb; }
  h1, h2, h3 { break-after: avoid; color: #000; }
  img { max-width: 100%; height: auto; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .78em; color: #555;
                           word-break: break-all; }
  a { color: #111; text-decoration: underline; }
  .badge { border: 1px solid currentColor; }
}

/* ── Liens glossaire dans le corps des salles (passe 10) ── */
.lien-gl{color:inherit;text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:color-mix(in srgb,var(--or) 65%,transparent);
  text-underline-offset:.22em}
.lien-gl:hover,.lien-gl:focus-visible{text-decoration-style:solid;color:var(--or)}
.gl{scroll-margin-top:5.5rem}

/* ═══════════════════════════════════════════════════════════════════════════
   L'ŒUVRE — transitions.css
   Ambiances par aile, apparitions au défilement, transitions entre salles,
   rail de progression. Tout est neutralisé si [data-mouvement-reduit="1"]
   ou prefers-reduced-motion (voir design.css).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ambiance de fond : dégradé lent propre à chaque aile ──────────────── */
.ambiance{
  position:fixed;inset:0;z-index:var(--z-fond);pointer-events:none;
  background:
    radial-gradient(70rem 40rem at 12% -8%,color-mix(in srgb,var(--aile) 22%,transparent),transparent 62%),
    radial-gradient(56rem 34rem at 92% 8%,color-mix(in srgb,var(--aile) 12%,transparent),transparent 60%),
    linear-gradient(to bottom,var(--nuit) 0%,var(--nuit-2) 55%,var(--nuit) 100%);
  opacity:.9;
}
.ambiance::after{ /* grain très léger : évite l'aplats « plastique » */
  content:"";position:absolute;inset:0;opacity:.035;
  background-image:radial-gradient(rgba(255,255,255,.9) .5px,transparent .5px);
  background-size:3px 3px;
}
body[data-aile="I"]{--aile:var(--cosmos)}
body[data-aile="II"]{--aile:var(--terre)}
body[data-aile="III"]{--aile:var(--vie)}
body[data-aile="IV"]{--aile:var(--animaux)}
body[data-aile="V"]{--aile:var(--quantique)}
body[data-aile="VI"]{--aile:var(--homme)}
body[data-aile="VII"]{--aile:var(--or)}
body.page-accueil{--aile:var(--or)}

/* ── Apparitions au défilement ─────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(1.1rem);
  transition:opacity var(--duree-lente) var(--aisance-sortie),transform var(--duree-lente) var(--aisance-sortie)}
[data-reveal][data-visible="1"]{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="gauche"]{transform:translateX(-1.4rem)}
[data-reveal="droite"]{transform:translateX(1.4rem)}
[data-reveal="echelle"]{transform:scale(.97)}
[data-retard="1"]{transition-delay:90ms}
[data-retard="2"]{transition-delay:180ms}
[data-retard="3"]{transition-delay:270ms}
[data-retard="4"]{transition-delay:360ms}

/* ── Rail de progression de lecture ────────────────────────────────────── */
.rail{position:fixed;inset:0 0 auto;z-index:calc(var(--z-entete) + 1);height:2px;
  background:transparent;pointer-events:none}
.rail__plein{height:100%;width:0;background:linear-gradient(90deg,var(--aile),var(--or));
  box-shadow:0 0 12px color-mix(in srgb,var(--aile) 60%,transparent)}

/* ── Transition entre salles : fondu + léger travelling ────────────────── */
body[data-transition="sortie"] .contenu{opacity:0;transform:translateY(-.6rem);
  transition:opacity var(--duree-3) var(--aisance),transform var(--duree-3) var(--aisance)}
body[data-transition="entree"] .contenu{animation:entree-salle var(--duree-lente) var(--aisance-sortie) both}
@keyframes entree-salle{
  from{opacity:0;transform:translateY(1.4rem) scale(.995);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* ── Titre héro : lettres qui se posent (SplitText, GSAP) ──────────────── */
.titre-hero[data-anime="1"] .lettre{display:inline-block;opacity:0;
  transform:translateY(.42em);transition:opacity var(--duree-lente) var(--aisance-sortie),
  transform var(--duree-lente) var(--aisance-sortie)}
.titre-hero[data-anime="1"][data-visible="1"] .lettre{opacity:1;transform:none}

/* ── Respiration lente des visuels d'aile ──────────────────────────────── */
.aile-visuel img{animation:respiration 26s var(--aisance) infinite alternate}
@keyframes respiration{from{transform:scale(1)}to{transform:scale(1.05)}}
.carte--aile:hover .aile-visuel img{animation-play-state:paused}

/* ── Survol des chiffres : léger éclat, jamais clignotant ──────────────── */
.fait__mesure{transition:color var(--duree-3),text-shadow var(--duree-3)}
.fait:hover .fait__mesure{text-shadow:0 0 22px color-mix(in srgb,var(--or) 35%,transparent)}

/* ── Fondu d'ouverture de page ─────────────────────────────────────────── */
body{animation:ouverture-page var(--duree-lente) var(--aisance-sortie) both}
@keyframes ouverture-page{from{opacity:0}to{opacity:1}}