/* =====================================================================
   Automotive EBM — Avant-première · prototype V2 (07/10/2026)
   Le Repère à 95 % : la mise au point, la bague graduée, la braise.
   Genius : violet, né de la lumière. Tout passe par des variables de thème.
   ===================================================================== */
@font-face { font-family: "Unbounded"; src: url("../fonts/Unbounded.woff") format("woff"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --nuit: #0F1F33;          /* signatures mail */
  --nuit-2: #0A1524;
  --nuit-3: #060D18;        /* fond profond des scènes */
  --orange: #FF5B04;        /* la braise : un point, jamais une surface */
  --genius: #7B6CFF;        /* Genius */
  --genius-clair: #B3AAFF;
  --texte: #EEF1F5;
  --texte-2: #8A97A3;
  --texte-3: rgba(238, 241, 245, .46);
  --trait: rgba(238, 241, 245, .12);
  --trait-fort: rgba(238, 241, 245, .28);
  --police-titre: "Unbounded", system-ui, sans-serif;
  --police-texte: "Archivo", system-ui, sans-serif;
  --mise: cubic-bezier(.86, 0, .07, 1);      /* la bague qui se cale */
  --glisse: cubic-bezier(.16, 1, .3, 1);
  --marge: clamp(20px, 4.2vw, 64px);
  --tete: 64px;
}
@media (max-width: 760px) { :root { --tete: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--nuit-3); color: var(--texte);
  font-family: var(--police-texte); font-size: 16px; line-height: 1.55;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: var(--genius); color: var(--texte); }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--genius-clair); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- la scène WebGL, le grain ---------- */
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; background: var(--nuit-3); }
#grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0) } 20% { transform: translate(-3%,2%) } 40% { transform: translate(2%,-3%) } 60% { transform: translate(-2%,-1%) } 80% { transform: translate(3%,3%) } 100% { transform: translate(0,0) } }

/* ---------- préchargement : la bague qui se cale ---------- */
#prechargement { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--nuit-3);
  transition: opacity .9s var(--glisse) .15s, visibility 0s linear 1.1s; }
#prechargement .bague-pre { width: min(46vmin, 300px); aspect-ratio: 1; position: relative; }
#prechargement svg { width: 100%; height: 100%; overflow: visible; }
#prechargement .compte { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--police-titre); font-weight: 200; font-size: clamp(1.4rem, 4vmin, 2.2rem); letter-spacing: -.02em; }
#prechargement .legende { position: absolute; left: 50%; top: calc(100% + 26px); transform: translateX(-50%); white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--texte-2); }
body.pret #prechargement { opacity: 0; visibility: hidden; }


/* ---------- en-tête ---------- */
.tete { position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: var(--tete); display: flex; align-items: center; gap: 18px;
  padding: 0 var(--marge); pointer-events: none; }
.tete > * { pointer-events: auto; }
.tete .logo { display: flex; align-items: center; height: 100%; text-decoration: none; }
.tete .logo img { height: 30px; width: auto; }
@media (max-width: 760px) { .tete .logo img { height: 24px; } }
.tete .etiquette { margin: 0 auto; display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--texte-2); white-space: nowrap; }
.tete .etiquette i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(255,91,4,.6); animation: braise 2.4s ease-in-out infinite; }
@keyframes braise { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,91,4,.55); } 50% { box-shadow: 0 0 0 7px rgba(255,91,4,0); } }
.tete .actions { display: flex; gap: 10px; align-items: center; }
@media (max-width: 760px) { .tete .etiquette { display: none; } .tete .actions { margin-left: auto; } }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--trait-fort); background: rgba(6, 13, 24, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 600; letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: border-color .4s, background .4s, box-shadow .4s; }
.bouton:hover { border-color: var(--texte); box-shadow: 0 0 0 5px rgba(238,241,245,.06); }
.bouton.plein { background: var(--texte); color: var(--nuit-3); border-color: var(--texte); }
.bouton.plein:hover { box-shadow: 0 0 0 6px rgba(123,108,255,.28); }
.bouton.genius { border-color: rgba(123,108,255,.7); }
.bouton.son { width: 44px; padding: 0; }
.bouton.son svg { width: 18px; height: 18px; }
.bouton.son[aria-pressed="false"] .onde { opacity: .2; }
@media (max-width: 760px) { .tete .bouton.prevenir { padding: 0 16px; } }

/* ---------- la mention IA, toujours visible ---------- */
.mention-ia { transition: opacity .4s; position: fixed; z-index: 35; left: var(--marge); bottom: 16px; font-size: 11px; color: var(--texte-3); letter-spacing: .02em; pointer-events: none; }
@media (max-width: 760px) { .mention-ia { bottom: 58px; left: 22px; font-size: 10.5px; } }

/* ---------- le fil de lumière (Genius redevient la petite lumière qui descend) ---------- */
#fil { position: fixed; z-index: 30; top: 0; bottom: 0; left: 30px; width: 2px; pointer-events: none; }
#fil .piste { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, rgba(123,108,255,.14) 12%, rgba(123,108,255,.14) 88%, transparent); }
#fil .lumiere { position: absolute; left: 0; top: 0; width: 2px; height: 0; background: linear-gradient(to bottom, rgba(123,108,255,0), rgba(123,108,255,.55) 40%, #B3AAFF);
  box-shadow: 0 0 12px rgba(123,108,255,.6); }
#fil .tete-fil { position: absolute; left: 1px; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 2px #B3AAFF, 0 0 22px 6px rgba(123,108,255,.75), 0 0 60px 14px rgba(123,108,255,.35); }
#fil .tete-fil::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(179,170,255,.5); opacity: 0; transform: scale(.6); }
#fil.pulse .tete-fil::after { animation: pulse 1.1s var(--glisse); }
@keyframes pulse { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }
@media (max-width: 760px) { #fil { left: 11px; } }

/* ---------- la bague (échelle de mise au point) ---------- */
#bague { position: fixed; z-index: 30; right: 0; top: 0; bottom: 0; width: 88px; pointer-events: none; }
#bague .regle { position: absolute; right: 22px; top: 50%; width: 40px; will-change: transform; }
#bague .regle svg { display: block; overflow: visible; }
#bague .index { position: absolute; right: 18px; top: 50%; width: 52px; height: 1px; background: var(--orange); box-shadow: 0 0 10px rgba(255,91,4,.8); }
#bague .index::after { content: ""; position: absolute; right: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
#bague .nom { position: absolute; right: 82px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--texte-2); transition: opacity .4s; }
#bague .nom b { color: var(--texte); font-weight: 600; margin-right: 10px; }
@media (max-width: 760px) {
  #bague { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 46px; background: linear-gradient(to top, rgba(6,13,24,.85), rgba(6,13,24,0)); }
  #bague .regle { right: auto; left: 50%; top: auto; bottom: 10px; width: auto; height: 22px; }
  #bague .index { right: auto; left: 50%; top: auto; bottom: 8px; width: 1px; height: 26px; }
  #bague .index::after { right: -3px; top: -6px; }
  #bague .nom { right: auto; left: 50%; top: auto; bottom: 30px; transform: translateX(-50%); font-size: 10px; letter-spacing: .2em; }
  #bague .nom b { margin-right: 6px; }
}

/* ---------- le viseur (curseur de mise au point, ordinateur) ---------- */
#viseur { position: fixed; z-index: 80; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; pointer-events: none; opacity: 0;
  transition: opacity .3s, width .35s var(--glisse), height .35s var(--glisse), margin .35s var(--glisse); }
#viseur svg { width: 100%; height: 100%; overflow: visible; }
#viseur .etiq { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); font-size: 10px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; white-space: nowrap; color: var(--texte); opacity: 0; transition: opacity .3s; }
body.souris #viseur { opacity: 1; }
#viseur.actif { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
#viseur.actif .centre { fill: var(--orange); }
#viseur.etiquette .etiq { opacity: 1; }
@media (hover: none), (pointer: coarse) { #viseur { display: none; } }
@media (hover: hover) and (pointer: fine) { body.souris, body.souris a, body.souris button, body.souris label { cursor: none; } body.souris input, body.souris textarea { cursor: text; } }

/* ---------- structure des chapitres ---------- */
main { position: relative; z-index: 10; }
.chap { position: relative; }
.chap.long { height: var(--long, 300vh); }
.colle { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.couche { position: absolute; inset: 0; padding: calc(var(--tete) + 24px) calc(var(--marge) + 60px) 72px calc(var(--marge) + 26px); display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.couche.bas { justify-content: flex-end; }
.couche .interactif, .couche a, .couche button { pointer-events: auto; }
@media (max-width: 760px) { .couche { padding: calc(var(--tete) + 14px) 22px 86px 26px; } }

.surtitre { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--texte-2); }
.surtitre::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.surtitre.genius { color: var(--genius-clair); }
.surtitre.genius::before { background: var(--genius); }
.titre { margin: 0; font-family: var(--police-titre); font-weight: 250; letter-spacing: -.045em; line-height: 1.02; }
.titre.geant { font-size: clamp(2.5rem, .8rem + 6.4vw, 7.6rem); }
.titre.grand { font-size: clamp(2.05rem, .9rem + 3.9vw, 5rem); }
.titre.moyen { font-size: clamp(1.6rem, .9rem + 2.2vw, 3.1rem); line-height: 1.08; }
.titre em { font-style: normal; color: var(--genius-clair); }
.titre .braise { color: var(--orange); }
.texte { max-width: 33rem; margin: 22px 0 0; font-size: clamp(1rem, .92rem + .3vw, 1.18rem); color: rgba(238,241,245,.84); }
.petit { font-size: 12px; color: var(--texte-3); }
@media (max-width: 760px) { .texte { font-size: 15.5px; } }

/* étapes empilées : chaque phrase occupe la même place, l'une remplace l'autre */
.pile { position: relative; display: grid; }
.pile > * { grid-area: 1 / 1; align-self: center; }
.etape { opacity: 0; will-change: opacity, transform, filter; }

/* lettres qui font la mise au point */
.mot { display: inline-block; white-space: nowrap; }
.lettre { display: inline-block; will-change: filter, opacity, transform; }

/* ---------- 01 ouverture ---------- */
#c1 .couche { justify-content: flex-end; padding-bottom: 96px; }
#c1 .voile-bas { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(to top, rgba(6,13,24,.88), rgba(6,13,24,0)); }
#c1 .indice { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--texte-2); }
#c1 .indice span { display: block; width: 1px; height: 28px; background: linear-gradient(var(--texte-2), transparent); animation: indice 2s var(--glisse) infinite; transform-origin: top; }
@keyframes indice { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
#c1 .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 760px) { #c1 .couche { padding-bottom: 92px; } #c1 .indice { bottom: 58px; } }

/* ---------- 02 manifeste ---------- */
#c2 .couche { align-items: center; text-align: center; }
#c2 .titre { max-width: 15ch; }
#c2 .ligne2 { color: var(--genius-clair); }
#c2 .texte { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- 03 chasse ---------- */
.compteur { margin: 0; white-space: nowrap; font-family: var(--police-titre); font-weight: 200; letter-spacing: -.05em; line-height: .9; font-size: clamp(3rem, .8rem + 7.4vw, 8.6rem); }
.compteur small { font-size: .32em; letter-spacing: -.02em; vertical-align: .9em; margin-right: .2em; color: var(--texte-2); }
#c3 .gauche { max-width: 40rem; }
#c3 .entonnoir { position: absolute; right: calc(var(--marge) + 74px); bottom: 84px; display: grid; gap: 6px; text-align: right; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--texte-3); }
#c3 .entonnoir b { font-family: var(--police-titre); font-weight: 300; font-size: 15px; letter-spacing: -.01em; color: var(--texte-2); margin-right: 10px; transition: color .4s; }
#c3 .entonnoir .on b { color: var(--texte); }
#c3 .entonnoir .on.fin b { color: var(--orange); }
@media (max-width: 760px) { #c3 .couche { justify-content: flex-start; padding-top: calc(var(--tete) + 30px); } #c3 .entonnoir { left: 26px; right: auto; text-align: left; bottom: 70px; } }

/* ---------- 04 la voiture exacte : l'anneau ---------- */
#anneau { position: fixed; z-index: 12; left: 50%; top: 44%; width: min(60vh, 84vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; }
#anneau svg { width: 100%; height: 100%; overflow: visible; }

#c4 .couche { align-items: center; text-align: center; justify-content: flex-end; padding-bottom: 64px; }
#c4 .titre.geant { font-size: clamp(2.3rem, .8rem + 4.6vw, 5.6rem); }
#c4 .sous { margin-top: 16px; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); color: var(--texte-2); }
.repere-3d { position: fixed; z-index: 13; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .6s; }
.repere-3d .pt { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--texte); }
.repere-3d .pt::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--orange); }
.repere-3d .lg { position: absolute; left: 14px; top: -9px; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px;
  background: rgba(6,13,24,.6); border: 1px solid var(--trait); backdrop-filter: blur(6px); }
.repere-3d.gauche .lg { left: auto; right: 14px; }
@media (max-width: 760px) { .repere-3d .lg { font-size: 11px; } #c4 .couche { padding-bottom: 104px; } }

/* ---------- 05 / 06 / 10 : Genius ---------- */
.panneau-texte { max-width: min(42vw, 34rem); }
@media (max-width: 760px) { .panneau-texte { max-width: none; } }
.nom-genius { font-family: var(--police-titre); font-weight: 300; letter-spacing: .28em; font-size: clamp(2.6rem, 1rem + 6vw, 7rem); line-height: 1; margin: 0; color: var(--texte); }
.nom-genius .lettre { color: var(--texte); text-shadow: 0 0 40px rgba(123,108,255,.55); }
.etiquette-ia { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--genius-clair); }
.etiquette-ia i { width: 7px; height: 7px; border-radius: 50%; background: var(--genius); box-shadow: 0 0 12px var(--genius); }
#c5 .couche, #c6 .couche, #c10 .couche { justify-content: center; }
@media (max-width: 760px) {
  #c5 .couche, #c6 .couche, #c10 .couche { justify-content: flex-end; padding-bottom: 92px; }
  #c5 .voile-bas, #c6 .voile-bas, #c10 .voile-bas { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(to top, rgba(6,13,24,.96) 45%, rgba(6,13,24,0)); }
}
.metier { display: grid; gap: 8px; }
.metier .mot-cle { font-family: var(--police-titre); font-weight: 250; letter-spacing: -.04em; font-size: clamp(2.2rem, 1rem + 4vw, 4.6rem); line-height: 1; }
.metier p { margin: 0; color: rgba(238,241,245,.8); max-width: 26rem; }
.domaines { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 28px; max-width: 34rem; }
.domaines span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--trait); color: var(--texte-3);
  transition: color .5s, border-color .5s, background .5s, box-shadow .5s; }
.domaines span.on { color: var(--texte); border-color: rgba(123,108,255,.6); background: rgba(123,108,255,.12); box-shadow: 0 0 18px rgba(123,108,255,.18); }
@media (max-width: 760px) { .domaines { margin-top: 16px; gap: 5px; } .domaines span { font-size: 10.5px; padding: 4px 9px; } }

/* ---------- 07 rien à écouler ---------- */
#c7 .couche { align-items: flex-start; }
.zeros { display: grid; gap: 4px; }
.zero { display: flex; align-items: baseline; gap: .35em; font-family: var(--police-titre); font-weight: 250; letter-spacing: -.045em; line-height: 1.02; font-size: clamp(2.3rem, 1rem + 5.4vw, 6.6rem); }
.zero .chiffre { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.zero .chiffre span { display: block; }
.zero .attenue { color: var(--texte-2); }
#c7 .conclusion { margin-top: 0; }
#c7 .conclusion .titre em { color: var(--orange); font-style: normal; }

/* ---------- 08 déjà vrai (défilement libre) ---------- */
.libre { position: relative; padding: clamp(110px, 16vh, 180px) calc(var(--marge) + 64px) clamp(90px, 12vh, 150px) calc(var(--marge) + 26px); }
@media (max-width: 760px) { .libre { padding: 96px 22px 84px 26px; } }
.libre::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(6,13,24,0), rgba(6,13,24,.82) 14%, rgba(6,13,24,.82) 86%, rgba(6,13,24,0)); }
.etapes { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 60px; border-top: 1px solid var(--trait); }
.etapes::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: var(--avance, 0%); background: linear-gradient(90deg, var(--genius), var(--genius-clair)); box-shadow: 0 0 12px rgba(123,108,255,.7); }
.etapes li { list-style: none; position: relative; padding: 30px 28px 0 0; }
.etapes li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--nuit-3); border: 1px solid var(--trait-fort); transition: background .5s, border-color .5s, box-shadow .5s; }
.etapes li.on::before { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 12px rgba(255,91,4,.7); }
.etapes .num { font-family: var(--police-titre); font-weight: 200; font-size: 13px; color: var(--texte-3); letter-spacing: .1em; }
.etapes h3 { margin: 10px 0 10px; font-family: var(--police-titre); font-weight: 300; font-size: clamp(1.1rem, .9rem + .7vw, 1.5rem); letter-spacing: -.02em; }
.etapes p { margin: 0; color: rgba(238,241,245,.74); font-size: 15px; }
@media (max-width: 860px) {
  .etapes { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--trait); margin-top: 40px; }
  .etapes::before { top: 0; left: -1px; width: 1px; height: var(--avance, 0%); background: linear-gradient(var(--genius), var(--genius-clair)); }
  .etapes li { padding: 0 0 34px 26px; }
  .etapes li::before { left: -5px; top: 5px; }
}
.duo { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 6vw, 110px); align-items: center; margin-top: clamp(90px, 14vh, 160px); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; margin-top: 80px; } }
.barres { position: relative; display: grid; gap: 14px; padding: 30px 30px 24px; border: 1px solid var(--trait); border-radius: 4px; background: rgba(15,31,51,.45); }
.barres .ligne { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 14px; font-family: var(--police-titre); font-weight: 300; font-size: 13px; color: var(--texte-3); }
.barres .b { height: 18px; border-radius: 2px; background: rgba(238,241,245,.08); transform-origin: left; }
.barres .ligne.nous { color: var(--texte); }
.barres .ligne.nous .b { background: linear-gradient(90deg, rgba(123,108,255,.55), var(--genius)); box-shadow: 0 0 22px rgba(123,108,255,.35); position: relative; }
.barres .ligne.nous .b::after { content: "la nôtre"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--police-texte); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--texte); }
.barres .note { margin-top: 6px; font-size: 11.5px; color: var(--texte-3); }
.cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 56px; background: var(--trait); border: 1px solid var(--trait); }
@media (max-width: 1100px) { .cartes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cartes { grid-template-columns: 1fr; } }
.carte { background: var(--nuit-3); padding: 30px 26px 32px; transition: background .5s; }
.carte:hover { background: #0B1828; }
.carte .num { font-family: var(--police-titre); font-weight: 200; font-size: 12px; color: var(--orange); letter-spacing: .14em; }
.carte h3 { margin: 14px 0 12px; font-family: var(--police-titre); font-weight: 300; font-size: 1.18rem; letter-spacing: -.02em; line-height: 1.2; }
.carte p { margin: 0; font-size: 14.5px; color: rgba(238,241,245,.76); }

/* ---------- 09 bientôt : les chapitres voilés ---------- */
.voiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); margin-top: 56px; }
@media (max-width: 860px) { .voiles { grid-template-columns: 1fr; gap: 18px; } }
.voile { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; border: 1px solid var(--trait); background: var(--nuit-2); cursor: default; isolation: isolate; }
@media (max-width: 860px) { .voile { aspect-ratio: 16 / 13; } }
.voile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.35) saturate(1.15); transition: opacity 1.1s var(--glisse), transform 1.6s var(--glisse); transform: scale(1.06); }
.voile img.demi { opacity: 0; }
.voile:hover img.demi, .voile.ouvert img.demi { opacity: 1; }
.voile:hover img, .voile.ouvert img { transform: scale(1.0); }
.voile .bague-voile { position: absolute; left: 50%; top: 42%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-28deg); opacity: .65; transition: transform 1.4s var(--mise), opacity .8s; }
.voile:hover .bague-voile, .voile.ouvert .bague-voile { transform: translate(-50%, -50%) rotate(-9deg); opacity: 1; }
.voile .bague-voile svg { width: 100%; height: 100%; overflow: visible; }
.voile .infos { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 20px; background: linear-gradient(to top, rgba(6,13,24,.92), rgba(6,13,24,0)); }
.voile .a-venir { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--texte-2); }
.voile .a-venir i { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.voile h3 { margin: 8px 0 6px; font-family: var(--police-titre); font-weight: 300; font-size: 1.3rem; letter-spacing: -.02em; }
.voile p { margin: 0; font-size: 14px; color: rgba(238,241,245,.74); }

/* ---------- 10 le regard, puis l'appel ---------- */
.voix { display: grid; gap: 14px; }
.voix p { margin: 0; font-family: var(--police-titre); font-weight: 250; letter-spacing: -.035em; line-height: 1.1; font-size: clamp(1.45rem, .9rem + 1.8vw, 2.7rem); }
.voix p.doux { color: var(--texte-2); font-size: clamp(1.05rem, .85rem + .9vw, 1.6rem); line-height: 1.3; letter-spacing: -.02em; }
.citation-genius { margin: 26px 0 0; padding: 0 0 0 20px; border-left: 1px solid var(--genius); }
.citation-genius p { margin: 10px 0 0; font-family: var(--police-titre); font-weight: 250; letter-spacing: -.03em; font-size: clamp(1.25rem, .9rem + 1.4vw, 2.2rem); line-height: 1.15; color: var(--texte); }
#c7 .texte em.braise { font-style: normal; color: var(--orange); }
.appel { position: relative; padding: clamp(110px, 15vh, 170px) calc(var(--marge) + 64px) 90px calc(var(--marge) + 26px); }
@media (max-width: 760px) { .appel { padding: 90px 22px 70px 26px; } }
.appel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(6,13,24,0), rgba(6,13,24,.92) 18%); }
.appel .grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
@media (max-width: 960px) { .appel .grille { grid-template-columns: 1fr; } }
.formulaire { position: relative; display: grid; gap: 14px; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--trait); border-radius: 6px; background: rgba(10,21,36,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.formulaire .rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .formulaire .rangee { grid-template-columns: 1fr; } }
.champ { display: grid; gap: 7px; }
.champ label { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--texte-2); }
.champ input, .champ textarea, .champ select { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--trait-fort); background: rgba(6,13,24,.6); font-size: 16px; transition: border-color .3s, box-shadow .3s; }
.champ textarea { min-height: 96px; resize: vertical; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--genius); box-shadow: 0 0 0 4px rgba(123,108,255,.2); }
.champ input::placeholder, .champ textarea::placeholder { color: rgba(238,241,245,.32); }
.case { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: rgba(238,241,245,.82); cursor: pointer; }
.case input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--genius); }
.formulaire details summary { cursor: pointer; font-size: 13px; color: var(--texte-2); list-style: none; }
.formulaire details summary::before { content: "+ "; color: var(--genius-clair); }
.formulaire details[open] summary::before { content: "− "; }
.formulaire details .rangee { margin-top: 12px; }
.formulaire .envoi { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.formulaire .piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formulaire .etat { min-height: 1.3em; margin: 0; font-size: 14px; }
.formulaire .etat.ok { color: var(--genius-clair); }
.formulaire .etat.erreur { color: #FF8A5B; }
.formulaire .mise-au-point { position: absolute; right: 18px; top: 18px; width: 28px; height: 28px; }
.formulaire .mise-au-point .c { transition: stroke .5s; }
.formulaire.pret .mise-au-point .c { stroke: var(--orange); }
.formulaire.pret .mise-au-point .p { fill: var(--orange); }
.coord { margin-top: 26px; font-size: 13px; color: var(--texte-2); }
.coord a { text-decoration: none; border-bottom: 1px solid var(--trait-fort); }
.verbes { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 30px; font-family: var(--police-titre); font-weight: 300; font-size: clamp(1rem, .9rem + .5vw, 1.3rem); letter-spacing: -.02em; color: var(--texte-2); }
.verbes span::after { content: "·"; margin-left: 18px; color: var(--orange); }
.verbes span:last-child::after { content: ""; }

/* ---------- pied ---------- */
.pied { position: relative; z-index: 10; padding: 60px calc(var(--marge) + 64px) 90px calc(var(--marge) + 26px); background: var(--nuit-3); border-top: 1px solid var(--trait); font-size: 13px; color: var(--texte-2); }
@media (max-width: 760px) { .pied { padding: 50px 22px 110px 26px; } }
.pied .ligne1 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.pied .ligne1 img { height: 28px; width: auto; }
.pied .liens { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 30px 0 18px; }
.pied .liens button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--texte); border-bottom: 1px solid var(--trait-fort); font-size: 13px; }
.pied p { margin: 6px 0; }
.tiroir { position: fixed; z-index: 95; inset: 0; display: none; background: rgba(6,13,24,.7); backdrop-filter: blur(6px); }
.tiroir.ouvert { display: block; }
.tiroir .contenu { position: absolute; right: 0; top: 0; bottom: 0; width: min(640px, 100%); overflow: auto; padding: 70px 34px 50px; background: var(--nuit-2); border-left: 1px solid var(--trait); font-size: 14.5px; line-height: 1.6; color: rgba(238,241,245,.84); }
.tiroir h2 { font-family: var(--police-titre); font-weight: 300; letter-spacing: -.02em; font-size: 1.6rem; margin: 0 0 24px; color: var(--texte); }
.tiroir h3 { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); margin: 26px 0 6px; }
.tiroir .fermer { position: absolute; right: 18px; top: 16px; }

/* ---------- mouvement réduit : tout est lisible, rien ne défile tout seul ---------- */
@media (prefers-reduced-motion: reduce) {
  #grain { animation: none; }
  .etape { opacity: 1 !important; transform: none !important; filter: none !important; }
  .pile > * { grid-area: auto; }
  .pile { gap: 16px; }
  .chap.long { height: auto; }
  .colle { position: relative; height: auto; min-height: 100vh; }
  .couche { position: relative; min-height: 100vh; }
}

@media (min-width: 761px) { #c10 .panneau-texte { max-width: min(44vw, 40rem); } }
@media (max-width: 760px) { #c4 .couche { padding-bottom: 96px; } #anneau { top: 40%; width: 86vw; } }
@media (max-width: 760px) {
  #c1 .indice { bottom: 96px; }
  #c3 .entonnoir { bottom: 100px; }
  #c6 .surtitre, #c6 .domaines { display: none; }
  #c6 .titre.moyen { font-size: 1.15rem; color: var(--texte-2); }
  #c6 .pile { margin-top: 10px !important; }
  #c6 .metier .mot-cle { font-size: 2rem; }
  #c6 .metier p { font-size: 14.5px; }
  .voix p { font-size: 1.45rem; }
  .voix p.doux { font-size: 1rem; }
}

/* lien d'évitement (clavier, lecteurs d'écran) */
.evitement { position: fixed; z-index: 100; left: 16px; top: -60px; padding: 12px 18px; border-radius: 999px; background: var(--texte); color: var(--nuit-3); font-weight: 600; text-decoration: none; transition: top .3s; }
.evitement:focus { top: 14px; }

/* mouvement réduit : pas de toile animée, des images fixes à la place */
html.reduit #scene, html.reduit #anneau, html.reduit .repere-3d, html.reduit #viseur { display: none !important; }
html.reduit .colle { background-size: cover; background-position: center; }
html.reduit #c1 .colle { background-image: linear-gradient(90deg, rgba(6,13,24,.85), rgba(6,13,24,.2)), url("../../images/web/01_ouverture_ordinateur_16x9.jpg"); }
html.reduit #c3 .colle { background-image: linear-gradient(90deg, rgba(6,13,24,.85), rgba(6,13,24,.3)), url("../../images/web/06_la_chasse_europe_16x9.jpg"); }
html.reduit #c5 .colle, html.reduit #c6 .colle { background-image: linear-gradient(90deg, rgba(6,13,24,.95) 35%, rgba(6,13,24,0)), url("../../images/web/m0_conseiller_1200.webp"); background-position: right center; background-size: contain; background-repeat: no-repeat; background-color: #0b1a33; }
html.reduit #c10 .colle { background-image: url("../../images/web/regard_2400.webp"); }
@media (max-width: 760px) { html.reduit #c10 .colle { background-image: url("../../images/web/regard_m_960.webp"); } }
html.reduit .zero .chiffre span { transform: translateY(-400%); }
.puces-tel { display: none; }
@media (max-width: 760px) {
  .repere-3d .lg { display: none; }
  .puces-tel { display: block; margin: 12px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--genius-clair); }
}

/* MODIF CODEX | 2026-10-07 05:56 +02:00 | masque mobile de la barre du haut, geometrique des chapitres inchangee */
@media(max-width:760px){.tete{background:var(--nuit-3);isolation:isolate}.tete::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--nuit-3)}}