/* ══ TOUT SE TIENT — la page, dans la direction du héros (exp. 04, Ancrage) ══
   Fond de plan noir, encre claire, un seul accent orange ; Geist pour les
   titres en capitales serrées, Geist Mono pour la télémétrie. Le maillage
   (canvas fixe, tout-se-tient.js) court derrière toute la page ; il s'efface
   pendant la lecture et revient aux seuils, là où les haubans travaillent. */

@font-face { font-family:"Geist"; src:url("polices/geist.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("polices/geist-mono.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("/polices/manrope-variable.woff2") format("woff2"); font-weight:200 800; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("/polices/instrument-serif-italique.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }

:root {
  --bg:#0b0b0c; --ink:#f2efe9; --accent:#e8814a;
  --ink-lecture:rgba(242,239,233,.8); --ink-doux:rgba(242,239,233,.58); --ink-faible:rgba(242,239,233,.4);
  --line:rgba(242,239,233,.12); --line-fort:rgba(242,239,233,.28);
  --marge:clamp(20px,4vw,72px);
  --display:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--display); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
p, li { text-wrap:pretty; }
h1, h2, h3 { text-wrap:balance; }
a:focus-visible, button:focus-visible, .mot:focus-visible { outline:1px solid var(--accent); outline-offset:6px; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.num { font-variant-numeric:tabular-nums; }
.lecteur { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.aller-contenu { position:fixed; left:var(--marge); top:-60px; z-index:300; padding:10px 14px; background:var(--ink); color:var(--bg); font:11px var(--mono); }
.aller-contenu:focus { top:12px; }
[hidden] { display:none !important; }

/* Le maillage, derrière tout */
.maillage { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
main, .barre, .pied { position:relative; z-index:1; }

/* ── La barre du haut : le nom, la scène en cours, les pages du site ── */
/* ── Le bandeau de démonstration (comme Chladni) : inversé, en haut de page ; la barre reste dessous tant qu'on le voit ── */
.bandeau-demo { position:relative; z-index:25; margin:0; padding:9px var(--marge); font:11px/1.5 var(--mono); letter-spacing:.04em; text-align:center; color:var(--bg); background:var(--ink); }
.bandeau-demo a { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; white-space:nowrap; }
.bandeau-demo a:hover,.bandeau-demo a:focus-visible { text-decoration-thickness:2px; }
.barre { position:fixed; top:var(--bandeau-vu,0px); left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; height:64px; padding:0 var(--marge); font:11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-doux); background:rgba(11,11,12,.94); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:baseline; gap:.3em; white-space:nowrap; font-family:Manrope,Arial,sans-serif; font-size:14px; font-weight:800; letter-spacing:-.05em; line-height:1; text-transform:none; color:var(--ink); }
.brand span { font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-style:italic; font-size:19px; letter-spacing:-.04em; transition:color .25s; }
.brand:hover span,.brand:focus-visible span { color:var(--accent); }
.barre-scene b { color:var(--accent); font-weight:400; }
.barre-liens { display:flex; gap:24px; }
.barre-liens a:hover,.barre-liens a:focus-visible { color:var(--ink); text-decoration:line-through; }

/* ── Les scènes ── */
.scene { position:relative; padding:0 var(--marge); }

/* Le héros : exp. 04, variante Ancrage, en pleine page */
.heros { height:calc(100svh - var(--bandeau,0px)); min-height:560px; display:flex; flex-direction:column; justify-content:space-between; padding-top:clamp(84px,12vh,128px); padding-bottom:clamp(28px,5vh,56px); }
.heros-titre { margin:0; font-weight:700; text-transform:uppercase; font-size:min(21vw,31vh); line-height:.86; letter-spacing:-.05em; }
.heros-titre .ligne { display:block; white-space:nowrap; }
.heros-bas { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; padding-left:24px; border-left:1px solid var(--line-fort); }
.eyebrow { display:inline-flex; gap:10px; margin:0 0 16px; font:500 11.5px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-doux); }
.eyebrow::before { content:"["; color:var(--accent); }
.eyebrow::after { content:"]"; color:var(--accent); }
.heros-lead { margin:0; max-width:44ch; font-size:clamp(15px,1.2vw,18px); line-height:1.55; letter-spacing:-.01em; color:var(--ink-doux); }

/* Un mot suspendu : on le saisit, il suit la main */
.mot { display:inline-block; position:relative; padding:.04em .06em; margin:-.04em -.06em; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; will-change:transform; }
.mot.tenu { cursor:grabbing; }

/* ── Le seuil : en fin de scène, le mot-relais pend à ses haubans ── */
.seuil { min-height:92svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(28px,5vh,52px); padding:clamp(80px,14vh,140px) 0 clamp(48px,8vh,96px); text-align:center; }
.seuil .relais { margin:0; font-weight:700; text-transform:uppercase; font-size:clamp(64px,11vw,210px); line-height:.86; letter-spacing:-.05em; }
.seuil.triple .relais { font-size:clamp(56px,9vw,170px); }
.consigne { display:grid; justify-items:center; gap:10px; font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-doux); }
.consigne b { font-weight:400; color:var(--accent); }
.consigne em { font-style:normal; color:var(--ink-faible); letter-spacing:.06em; text-transform:none; font-size:12px; }
.passer { padding:10px 14px; border:1px solid var(--line-fort); font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-doux); transition:border-color .2s,color .2s,background-color .2s; }
.passer:hover,.passer:focus-visible { border-color:var(--accent); color:var(--ink); }
[data-geste].franchi .consigne b::after { content:" · franchi"; color:var(--ink-faible); }
[data-geste].franchi .passer { display:none; }
.jauge { width:min(240px,60vw); height:1px; background:var(--line-fort); position:relative; }
.jauge i { position:absolute; left:0; top:-1px; height:3px; width:calc(var(--t,0) * 100%); background:var(--accent); }

/* ── Kicker de plan : crochets, filet ── */
.kicker { display:flex; justify-content:space-between; gap:20px; margin:0; padding-top:14px; border-top:1px solid var(--line-fort); font:11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-doux); }
.kicker span:first-child::before { content:"[ "; color:var(--accent); }
.kicker span:first-child::after { content:" ]"; color:var(--accent); }

/* ── L'avant-propos et le sommaire ── */
.avant { padding-top:clamp(96px,14vh,150px); }
.avant-grille { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px clamp(40px,7vw,128px); padding-top:clamp(28px,4vh,48px); }
.titre-section { margin:0; font-weight:700; text-transform:uppercase; font-size:clamp(40px,5vw,92px); line-height:.9; letter-spacing:-.045em; }
.avant .lecture { margin-top:clamp(26px,4vh,40px); }
.sommaire > p { margin:0 0 12px; font:11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faible); }
.sommaire ol { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.sommaire a { display:grid; grid-template-columns:2.6em minmax(0,1fr) auto; gap:10px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line); font-size:16px; letter-spacing:-.01em; color:var(--ink-lecture); transition:color .2s,padding .3s var(--ease); }
.sommaire small,.sommaire a > span:last-child { font:11px var(--mono); color:var(--ink-faible); }
.sommaire a:hover,.sommaire a:focus-visible { color:var(--ink); padding-left:8px; }
.sommaire a:hover small { color:var(--accent); }

/* ── Les chapitres : titre, cote et citation à gauche, lecture à droite ── */
.chapitre { padding-top:clamp(96px,14vh,150px); }
.chap-grille { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px clamp(40px,7vw,128px); padding-top:clamp(28px,4vh,48px); }
.chap-tete { position:sticky; top:clamp(84px,12vh,120px); align-self:start; }
.chap-tete h2 { margin:0; font-weight:700; text-transform:uppercase; font-size:clamp(38px,4.2vw,80px); line-height:.9; letter-spacing:-.045em; }
/* La cote, au trait d'accent */
.cote { position:relative; height:28px; max-width:360px; margin-top:clamp(18px,2.6vh,28px); color:var(--accent); }
.cote::before,.cote::after { content:""; position:absolute; top:0; bottom:0; width:1px; background:currentColor; }
.cote::before { left:0; } .cote::after { right:0; }
.cote i { position:absolute; left:0; right:0; top:50%; height:1px; background:currentColor; }
.cote i::before,.cote i::after { content:""; position:absolute; top:-3.5px; border:4px solid transparent; }
.cote i::before { left:0; border-right:9px solid currentColor; border-left:0; }
.cote i::after { right:0; border-left:9px solid currentColor; border-right:0; }
.cote span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:0 12px; background:var(--bg); font:11px var(--mono); letter-spacing:.08em; white-space:nowrap; }
.citation { margin:clamp(32px,5vh,56px) 0 0; max-width:17em; padding-left:18px; border-left:1px solid var(--accent); }
.citation blockquote { margin:0; font-size:clamp(21px,1.7vw,28px); font-weight:500; line-height:1.18; letter-spacing:-.02em; }
.citation figcaption { margin-top:12px; font:11px/1.5 var(--mono); letter-spacing:.04em; color:var(--ink-faible); }

.lecture { max-width:62ch; }
.lecture p { margin:0 0 1.15em; font-size:clamp(16px,.5vw + 8.5px,20px); line-height:1.7; letter-spacing:-.005em; color:var(--ink-lecture); }
.lecture p:last-child { margin-bottom:0; }
.lecture i { font-style:italic; }
/* Le mot-relais d'arrivée : les haubans viennent s'y accrocher */
.ouvre { float:left; margin:.02em .14em 0 0; font-style:normal; font-weight:700; text-transform:uppercase; font-size:3.4em; line-height:.84; letter-spacing:-.05em; color:var(--ink); }
.paire,.voies { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,2.6vw,40px) clamp(24px,3vw,48px); margin:clamp(26px,4vh,40px) 0 clamp(30px,4.5vh,46px); }
.paire > div,.voies > div { padding-top:14px; border-top:1px solid var(--line-fort); }
.paire h3,.voies h3 { margin:0 0 10px; font-size:clamp(19px,1.5vw,25px); font-weight:600; line-height:1.12; letter-spacing:-.03em; }
.lecture .paire p,.lecture .voies p { font-size:15px; line-height:1.65; color:var(--ink-doux); }
/* Le chapitre 7, à la première personne : un calque teinté d'accent */
.chapitre.je { background:linear-gradient(transparent,rgba(232,129,74,.045) 18%,rgba(232,129,74,.045) 82%,transparent); }

/* ── Les repères et le cartouche ── */
.reperes { padding-top:clamp(96px,14vh,150px); padding-bottom:clamp(64px,10vh,120px); }
.reperes-grille { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px clamp(40px,7vw,128px); padding-top:clamp(28px,4vh,48px); }
.sous { margin:16px 0 0; max-width:40ch; font-size:14px; line-height:1.6; color:var(--ink-doux); }
.nomenclature { width:100%; border-collapse:collapse; border:1px solid var(--line-fort); font-size:14px; }
.nomenclature th { padding:10px 14px; text-align:left; font:10px var(--mono); letter-spacing:.12em; text-transform:uppercase; font-weight:400; color:var(--ink-faible); border-bottom:1px solid var(--line-fort); }
.nomenclature td { padding:11px 14px; border-top:1px solid var(--line); vertical-align:baseline; color:var(--ink-doux); line-height:1.45; }
.nomenclature td:first-child { width:1%; white-space:nowrap; font:11px var(--mono); color:var(--accent); }
.nomenclature td:last-child { width:1%; white-space:nowrap; font:11px var(--mono); color:var(--ink-faible); text-align:right; }
.nomenclature td + td,.nomenclature th + th { border-left:1px solid var(--line); }
.nomenclature tbody tr:hover { background:rgba(232,129,74,.07); }
.cartouche { display:grid; grid-template-columns:repeat(3,auto); width:max-content; max-width:100%; margin:clamp(20px,3vh,32px) 0 0 auto; border:1px solid var(--line-fort); font-size:13px; line-height:1.3; }
.cartouche > div { padding:8px 12px 9px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cartouche > div:nth-child(3n) { border-right:0; }
.cartouche > div:nth-last-child(-n+3) { border-bottom:0; }
.cartouche .large { grid-column:span 2; }
.cartouche small { display:block; font:9px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faible); }
.cartouche b { font-weight:600; letter-spacing:-.01em; }

/* ── Le pied ── */
.pied { padding:clamp(64px,10vh,120px) var(--marge) 28px; border-top:1px solid var(--accent); background:rgba(11,11,12,.86); }
.pied h2 { margin:0; font-weight:700; text-transform:uppercase; font-size:clamp(40px,5.6vw,100px); line-height:.9; letter-spacing:-.045em; }
.pied-milieu p { margin:clamp(24px,4vh,40px) 0 0; max-width:52ch; font-size:16px; line-height:1.65; color:var(--ink-doux); }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.action { display:inline-flex; align-items:center; gap:10px; padding:13px 18px; border:1px solid var(--accent); background:var(--accent); color:var(--bg); font:12px var(--mono); letter-spacing:.08em; text-transform:uppercase; transition:background-color .2s,color .2s,transform .2s; }
.action:hover,.action:focus-visible { background:transparent; color:var(--ink); transform:translateY(-2px); }
.action.creux { background:none; color:var(--ink); border-color:var(--line-fort); }
.action.creux:hover,.action.creux:focus-visible { border-color:var(--accent); }
.pied-bas { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px 28px; margin-top:clamp(48px,8vh,96px); padding-top:15px; border-top:1px solid var(--line-fort); font:11px var(--mono); }
.pied-signe { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; color:var(--ink-faible); }
.pied-liens { display:flex; flex-wrap:wrap; gap:10px 24px; color:var(--ink-doux); }
.pied-liens a:hover,.pied-liens a:focus-visible { color:var(--ink); text-decoration:line-through; }
.pied-liens .avec-claude:hover { text-decoration:none; }
.avec-claude { display:inline-flex; align-items:baseline; gap:.45em; white-space:nowrap; }
.avec-claude svg { width:1.1em; height:1.1em; flex:none; align-self:center; fill:#D97757; transition:transform .6s cubic-bezier(.34,1.56,.64,1); }
.avec-claude:hover svg,.avec-claude:focus-visible svg { transform:rotate(60deg); }
.socials { display:flex; gap:7px; }
.social { width:30px; aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--line-fort); color:var(--ink); transition:border-color .2s; }
.social svg { width:53%; height:53%; fill:currentColor; }
a.social:hover,a.social:focus-visible { border-color:var(--accent); }
span.social { opacity:.5; }

/* ── FR / EN, dans la barre ── */
.langues { display:flex; align-items:center; gap:4px; color:var(--ink-faible); }
.langues button { padding:10px 4px; font:11px var(--mono); letter-spacing:.08em; color:var(--ink-faible); transition:color .2s; }
.langues button[aria-pressed="true"] { color:var(--ink); }
.langues button:hover,.langues button:focus-visible { color:var(--ink); text-decoration:line-through; }
.langues button[aria-pressed="true"]:hover { text-decoration:none; }
html[lang="en"] .heros-titre { font-size:min(16vw,21vh); }

/* ── Descendre et remonter : les carrés de l'atelier, au plan noir et orange ──
   Le contour s'allume en respirant ; au survol, un reflet balaie le carré et
   une lumière suit la main. Ils se lèvent au-dessus du pied. */
.carres { position:fixed; z-index:30; right:calc(28px + env(safe-area-inset-right,0px)); bottom:calc(40px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:10px; transition:bottom .5s var(--ease); }
.carres.leve { bottom:calc(var(--leve,96px) + env(safe-area-inset-bottom,0px)); }
.carre { position:relative; overflow:hidden; width:50px; height:50px; display:grid; place-items:center; border:1px solid #2c2c2e; border-radius:5px; background:#161618; color:var(--ink); box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; pointer-events:none; transform:translateY(16px); transition:opacity .4s var(--ease),transform .5s var(--ease),background-color .25s,border-color .25s; }
.carre.visible { opacity:1; pointer-events:auto; transform:none; animation:halo 2.4s ease-in-out infinite; }
.carre svg { position:relative; z-index:3; width:16px; height:16px; transition:transform .3s var(--ease); }
.carre::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(242,239,233,.28),transparent 62%); opacity:0; transition:opacity .3s; }
.carre::after { content:""; position:absolute; inset:-40%; z-index:2; pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(232,129,74,.65) 48%,rgba(255,255,255,.5) 51%,transparent 62%); transform:translateX(-120%); }
.carre:hover,.carre:focus-visible { background:#3a2418; border-color:var(--accent); animation-play-state:paused; }
.carre:hover::before,.carre:focus-visible::before { opacity:1; }
.carre:hover::after,.carre:focus-visible::after { animation:reflet .7s var(--ease) both; }
.descendre:hover svg { transform:translateY(2px); }
.remonter:hover svg { transform:translateY(-2px); }
@keyframes halo { 0%,100% { border-color:#2c2c2e; } 50% { border-color:#f2a06a; } }
@keyframes reflet { to { transform:translateX(120%); } }
.vague { position:fixed; z-index:180; inset:0; pointer-events:none; visibility:hidden; }
.vague.active { visibility:visible; }
.vague svg { position:absolute; inset:0; width:100%; height:100%; fill:var(--accent); }
.vague-phrase { fill:var(--bg); font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.04em; }

@media (max-width:1000px) {
  .avant-grille,.chap-grille,.reperes-grille { grid-template-columns:minmax(0,1fr); }
  .chap-tete { position:static; }
  .barre-liens { display:none; }
}
@media (max-width:700px) {
  .barre { height:54px; }
  .barre-scene { display:none; }
  .carres { right:14px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); }
  .carre { width:44px; height:44px; }
  .heros-bas { grid-template-columns:minmax(0,1fr); padding-left:16px; }
  .heros-titre { font-size:min(18vw,24vh); }
  .eyebrow { letter-spacing:.1em; }
  .chap-tete h2 { font-size:clamp(34px,10vw,52px); }
  .paire,.voies { grid-template-columns:minmax(0,1fr); }
  .ouvre { font-size:2.8em; }
  .nomenclature td:last-child,.nomenclature th:last-child { display:none; }
  .cartouche { width:100%; grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}