/* Kinan orchestre, prototype 1 : couleurs plates, un seul accent, filets fins */
@font-face{ font-family:'Clash Display'; font-style:normal; font-weight:560 700; font-display:swap; src:url(../fonts/clash-display-variable.woff2) format('woff2'); }
@font-face{ font-family:'Satoshi'; font-style:normal; font-weight:300 900; font-display:swap; src:url(../fonts/satoshi-variable.woff2) format('woff2'); }

:root{
  color-scheme: dark;
  --bg:#0c0a11;
  --panel:#13111a;
  --panel-2:#1a1723;
  --line:rgba(241,238,249,.08);
  --line-2:rgba(241,238,249,.14);
  --text-primary:#f1eef9;
  --text-secondary:#a79fbe;
  --text-tertiary:#8c84a6;
  --accent:#8676ff;
  --ease:cubic-bezier(.16,.8,.24,1);
  --f-titre:'Clash Display', 'Satoshi', system-ui, sans-serif;
  --f-texte:'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-code:ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
  --gutter:16px;
  --nav-h:64px;
  --lbl:14px;
}
@media (min-width:700px){ :root{ --gutter:32px; } }
@media (min-width:1100px){ :root{ --gutter:64px; --nav-h:72px; --lbl:13px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px); background:var(--bg); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  margin:0; background:var(--bg); color:var(--text-primary);
  font-family:var(--f-texte); font-size:17px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--f-titre); font-weight:560; letter-spacing:-.025em; line-height:1.05; text-wrap:balance; }
p{ margin:0; }
strong{ font-weight:600; }
code{ font-family:var(--f-code); font-size:.86em; background:rgba(241,238,249,.06); color:var(--text-primary); padding:.14em .42em; border-radius:4px; white-space:nowrap; }
:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; animation:focus-entre .5s var(--ease); }
a:focus-visible, code:focus-visible{ border-radius:4px; }
@keyframes focus-entre{ from{ outline-offset:11px; outline-color:transparent; } }
::selection{ background:var(--accent); color:var(--bg); }

/* l'étiquette : petites capitales espacées, la voix des menus et des numéros */
.lbl, .eyebrow, .sec-num, .nav-liens a, .tag, .flux-k, .fn-limite span, .cmd-ou, .pied-liens a, .film-lire-txt{
  font-family:var(--f-texte); font-weight:600; font-size:var(--lbl); line-height:1.2; letter-spacing:.12em; text-transform:uppercase;
}

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:fixed; left:16px; top:-60px; z-index:100; background:var(--text-primary); color:var(--bg); padding:12px 16px; border-radius:4px; font-weight:600; text-decoration:none; transition:top .3s var(--ease); }
.skip:focus{ top:12px; }
.wrap{ width:100%; max-width:1440px; margin:0 auto; padding:0 var(--gutter); }
.ico{ width:16px; height:16px; flex:none; }

/* ---------- Boutons ---------- */
.btn{
  --mag-x:0; --mag-y:0;
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px;
  border-radius:999px; font:600 15px/1 var(--f-texte); letter-spacing:.01em; text-decoration:none; cursor:pointer;
  border:1px solid var(--line-2); background:none; color:var(--text-primary);
  position:relative; isolation:isolate;
  translate:calc(var(--mag-x) * 1px) calc(var(--mag-y) * 1px);
  transition:background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.btn:hover{ border-color:var(--text-secondary); }
.btn:active{ transform:scale(.97); }
.btn:focus-visible{ border-radius:999px; outline-offset:3px; }
.btn .ico{ transition:transform .6s var(--ease); }
/* voile plat qui monte au survol des boutons non pleins */
.btn:not(.btn-plein)::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:rgba(241,238,249,.07);
  transform:scaleY(0); transform-origin:50% 100%; transition:transform .6s var(--ease); pointer-events:none;
}
.btn-plein{ background:var(--text-primary); border-color:var(--text-primary); color:var(--bg); }
.btn-plein:hover{ background:#fff; border-color:#fff; }
.btn-sm{ min-height:44px; padding:0 16px; font-size:14px; }
.btn-code{ min-width:0; max-width:100%; padding:0 5px 0 18px; gap:14px; font-weight:500; }
.btn-code code{ background:none; padding:0; color:var(--text-secondary); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.btn-code .prompt{ color:var(--accent); margin-right:4px; }
.btn-code-etat{ flex:none; background:rgba(241,238,249,.07); color:var(--text-primary); border-radius:999px; padding:11px 14px; font-size:14px; font-weight:600; transition:background-color .4s var(--ease), color .4s var(--ease); }
.btn-code.est-copie .btn-code-etat, .copie.est-copie{ background:var(--text-primary); color:var(--bg); }
[data-etat]{ display:inline-block; }
.btn-code:active .btn-code-etat, .copie:active{ transform:scale(.95); }

/* ---------- En-tête ---------- */
.nav{ position:fixed; inset:0 0 auto; z-index:50; height:var(--nav-h); }
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--bg);
  border-bottom:1px solid var(--line); opacity:0; transition:opacity .5s var(--ease);
}
.nav.est-defile::before{ opacity:1; }
.nav-progres{ position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; pointer-events:none; }
.nav-in{ height:100%; max-width:1440px; margin:0 auto; padding:0 var(--gutter); display:flex; align-items:center; gap:24px; }
.marque{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; font:560 17px/1 var(--f-titre); letter-spacing:-.01em; min-height:44px; margin-right:auto; white-space:nowrap; }
.juge-mini{ width:30px; height:30px; border-radius:3px; }
.nav-liens{ display:none; list-style:none; margin:0; padding:0; gap:4px; }
.nav-liens a{ position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0 14px; color:var(--text-secondary); text-decoration:none; transition:color .4s var(--ease); }
.nav-liens a::after{ content:""; position:absolute; left:14px; right:14px; bottom:10px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease); }
.nav-liens a:hover{ color:var(--text-primary); }
.nav-liens a:hover::after, .nav-liens a[aria-current]::after{ transform:scaleX(1); transform-origin:left; }
.nav-liens a[aria-current]{ color:var(--text-primary); }
@media (min-width:900px){ .nav-liens{ display:flex; } }
/* sélecteur de langue : filets fins, petites capitales, couleur plate */
.lang{ display:flex; align-items:center; font-family:var(--f-texte); font-weight:600; font-size:var(--lbl); line-height:1; letter-spacing:.12em; text-transform:uppercase; }
.lang a, .lang span[aria-current]{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 4px; text-decoration:none; color:var(--text-secondary); transition:color .4s var(--ease); }
.lang a:hover{ color:var(--text-primary); }
.lang span[aria-current]{ color:var(--text-primary); }
.lang-sep{ width:1px; height:14px; background:var(--line-2); }
@media (max-width:520px){
  .nav-in{ gap:8px; }
  .nav-in .btn-sm{ padding:0; width:44px; justify-content:center; }
  .nav-in .btn-sm span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; padding:calc(var(--nav-h) + 40px) 0 64px; display:flex; align-items:center; overflow:clip; }
.hero-grid{
  display:grid; gap:28px; grid-template-columns:minmax(0,1fr);
  grid-template-areas: "eyebrow" "juge" "titre" "bas";
}
.eyebrow{ color:var(--text-tertiary); }
.hero-eyebrow{ grid-area:eyebrow; display:flex; align-items:center; gap:14px; }
.hero-eyebrow::before{ content:""; width:24px; height:1px; background:var(--accent); flex:none; }
.hero-titre{
  grid-area:titre; font-size:clamp(52px, 15.4vw, 200px); line-height:.88; letter-spacing:-.045em; font-weight:580; color:var(--text-primary);
}
.hero-titre .ligne{ display:block; overflow:clip; padding-bottom:.08em; margin-bottom:-.08em; }
.hero-titre .ligne > span{ display:inline-block; will-change:transform; }
.hero-juge{ grid-area:juge; width:min(46vw, 210px); perspective:900px; }
.juge-scroll{ will-change:transform; }
.juge-tilt{ position:relative; transform-style:preserve-3d; will-change:transform; }
.juge-grand{ position:relative; width:100%; height:auto; border-radius:6.25%; }
.hero-bas{ grid-area:bas; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:28px; max-width:600px; }
.hero-sous{ font-size:clamp(19px, 1.9vw, 24px); line-height:1.45; font-weight:380; color:var(--text-secondary); letter-spacing:-.005em; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-note{ font-size:14px; color:var(--text-tertiary); }
.hero-note a, .pied-bas p a{ display:inline-block; padding:13px 0; margin:-13px 0; color:var(--text-secondary); text-decoration-thickness:1px; text-underline-offset:4px; transition:color .4s var(--ease), text-underline-offset .5s var(--ease); }
.hero-note a:hover{ color:var(--text-primary); text-underline-offset:7px; }

@media (min-width:860px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) auto; column-gap:48px; row-gap:40px; align-items:end;
    grid-template-areas: "eyebrow eyebrow" "titre juge" "bas juge";
  }
  .hero-grid{ container-type:inline-size; }
  .hero-titre{ font-size:clamp(64px, 8.6vw, 200px); font-size:clamp(64px, calc((100cqw - min(29vw, 420px) - 48px) / 6.7), 200px); }
  .hero-juge{ width:min(29vw, 420px); align-self:center; justify-self:end; }
}

/* ---------- Vidéo ---------- */
.film{ padding:24px 0 clamp(96px, 14vw, 200px); }
.film .wrap{ max-width:1600px; }
.film-cadre{ margin:0; }
.film-ecran{
  position:relative; aspect-ratio:16/9; border-radius:clamp(6px, .8vw, 12px); overflow:hidden; background:#000;
  outline:1px solid var(--line-2); outline-offset:-1px; will-change:transform; transform-origin:50% 30%;
}
.film-video{ width:100%; height:100%; object-fit:cover; background:#000; transform:scale(1.012); transform-origin:50% 0; scale:var(--ps, 1); translate:0 calc(var(--py, 0) * 1%); } /* recadre la barre de progression intégrée à la vidéo */
.film-ecran:fullscreen{ border-radius:0; }
.film-ecran:fullscreen .film-video{ object-fit:contain; scale:1; translate:none; }
.film-lire{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  border:0; cursor:pointer; color:var(--text-primary); background:rgba(12,10,17,.38);
  transition:opacity .5s var(--ease), background-color .6s var(--ease);
}
.film-lire:hover{ background:rgba(12,10,17,.22); }
.film-lire-rond{
  width:clamp(60px, 7vw, 88px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:var(--text-primary); color:var(--bg); transition:transform .7s var(--ease);
}
.film-lire-rond svg{ width:36%; margin-left:6%; }
.film-lire:hover .film-lire-rond{ transform:scale(1.06); }
.film-lire-txt{ background:var(--bg); padding:11px 16px; border-radius:999px; display:inline-flex; gap:10px; }
.film-duree{ color:var(--text-tertiary); }
.film-lire{ visibility:visible; }
.a-demarre .film-lire{ opacity:0; pointer-events:none; visibility:hidden; transition:opacity .5s var(--ease), visibility 0s .5s; }
.film-barre{
  position:absolute; left:12px; right:12px; bottom:12px; display:flex; align-items:center; gap:10px; padding:4px 14px 4px 4px;
  background:var(--bg); border:1px solid var(--line); border-radius:8px; opacity:0; transform:translateY(8px); pointer-events:none;
  visibility:hidden; transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s;
}
.a-demarre .film-barre{ opacity:1; transform:none; pointer-events:auto; visibility:visible; transition-delay:0s; }
.a-demarre.en-lecture.calme .film-barre{ opacity:0; transform:translateY(8px); }
.film-btn{ flex:none; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:6px; background:none; color:var(--text-primary); cursor:pointer; transition:background-color .3s var(--ease); }
.film-btn:hover{ background:rgba(241,238,249,.07); }
.film-btn svg{ width:20px; height:20px; }
.film-btn .i-lire, .en-lecture .film-btn .i-pause{ display:block; }
.film-btn .i-pause, .en-lecture .film-btn .i-lire{ display:none; }
.film-temps{ font:500 14px/1 var(--f-code); color:var(--text-secondary); min-width:3.2em; text-align:right; font-variant-numeric:tabular-nums; }
.film-piste{ position:relative; flex:1; min-width:0; display:flex; align-items:center; }
.film-piste::before, .film-rempli{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; pointer-events:none; }
.film-piste::before{ background:rgba(241,238,249,.16); }
.film-rempli{ background:var(--accent); transform:scaleX(0); transform-origin:0 50%; }
.film-pos{ position:relative; flex:1; min-width:0; height:44px; margin:0; background:none; -webkit-appearance:none; appearance:none; cursor:pointer; }
.film-pos::-webkit-slider-runnable-track{ height:2px; background:none; }
.film-pos::-moz-range-track{ height:2px; background:none; }
.film-pos::-webkit-slider-thumb{ -webkit-appearance:none; width:12px; height:12px; margin-top:-5px; border-radius:50%; background:var(--text-primary); border:0; }
.film-pos::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:var(--text-primary); border:0; }
.film-legende{ margin-top:18px; font-size:14px; color:var(--text-tertiary); text-align:center; }

/* ---------- Sections ---------- */
.section{ position:relative; padding:clamp(88px, 12vw, 180px) 0; }
.sec-tete{ display:grid; gap:28px; margin-bottom:clamp(48px, 7vw, 104px); max-width:1100px; }
.sec-num{ display:flex; align-items:center; gap:16px; color:var(--text-tertiary); }
.sec-n{ color:var(--accent); font-variant-numeric:tabular-nums; }
.sec-num::after{ content:""; flex:0 1 160px; height:1px; background:var(--line-2); transform-origin:0 50%; }
.sec-titre{ font-size:clamp(34px, 5.6vw, 88px); line-height:1.01; letter-spacing:-.032em; font-weight:560; max-width:17ch; }
.sec-note{ margin-top:clamp(40px, 5vw, 72px); max-width:720px; color:var(--text-tertiary); font-size:16px; line-height:1.65; }
.sec-note + .sec-note{ margin-top:20px; }

/* les filets : 1 px, faible opacité ; ils se dessinent au défilement (classe .mouv posée par le script) */
.section::before, .bloc::before, .fn::before, .regles li::before, .carte::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line-2); transform-origin:0 50%;
}
.section::before{ background:var(--line); }
.mouv .section::before, .mouv .bloc::before, .mouv .fn::before, .mouv .regles li::before, .mouv .carte::before, .mouv .sec-num::after{
  transform:scaleX(0); transition:transform 1.6s var(--ease);
}
.mouv .section.est-dessine::before, .mouv .bloc.est-dessine::before, .mouv .fn.est-dessine::before,
.mouv .regles li.est-dessine::before, .mouv .carte.est-dessine::before, .mouv .est-dessine .sec-num::after{ transform:none; }
.mouv .est-dessine .sec-num::after{ transition-delay:.25s; }

/* les lignes des titres montent dans leur masque */
.ligne-masque-mask{ padding-bottom:.1em; margin-bottom:-.1em; }

/* 01 Pourquoi */
.blocs{ display:grid; gap:0; grid-template-columns:1fr; }
.bloc{ position:relative; padding:32px 0 8px; display:grid; gap:14px; align-content:start; }
.bloc h3{ font-size:clamp(21px, 1.8vw, 26px); letter-spacing:-.018em; line-height:1.15; }
.bloc p{ color:var(--text-secondary); max-width:40ch; }
.bloc-franc::before{ background:var(--accent); }
@media (min-width:700px){ .blocs{ grid-template-columns:1fr 1fr; column-gap:40px; row-gap:32px; } }
@media (min-width:1100px){ .blocs{ grid-template-columns:repeat(4, 1fr); column-gap:40px; } .bloc{ padding-top:36px; } }

/* 02 Flux */
.flux{ list-style:none; margin:0; padding:0; display:grid; gap:56px; position:relative; }
.flux-etape{
  position:relative; border:1px solid var(--line-2); border-radius:8px; padding:20px 22px; transition:border-color .5s var(--ease);
  display:flex; flex-direction:column; gap:8px; justify-content:center;
}
.flux-k{ color:var(--text-tertiary); }
.flux-v{ font:560 20px/1.15 var(--f-titre); letter-spacing:-.012em; }
.flux-juge{ align-items:center; text-align:center; padding:24px 22px; background:var(--panel); }
.juge-flux{ width:64px; height:64px; margin-bottom:10px; border-radius:3px; }
.flux-juge .flux-v{ font-size:26px; }
.flux-agents{ padding:8px; }
.flux-agents ul{ list-style:none; margin:0; padding:0; display:grid; }
.flux-agents li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 14px; }
.flux-agents li + li{ border-top:1px solid var(--line); }
.modele{ font:500 14px/1 var(--f-code); color:var(--text-tertiary); }
.flux-fin{ background:var(--text-primary); color:var(--bg); border-color:var(--text-primary); }
.flux-fin .flux-k{ color:#4a4560; }

/* connecteurs : verticaux sur téléphone */
.flux-etape + .flux-etape::before{
  content:""; position:absolute; left:50%; top:-56px; width:1px; height:56px; background:var(--line-2);
  transform-origin:top; transition:transform 1.2s var(--ease);
}
.flux-agents::before{ display:none; }
.flux-fil{ position:absolute; display:flex; align-items:center; gap:6px; font:500 13px/1 var(--f-code); color:var(--text-tertiary); white-space:nowrap; }
.flux-fil::before{ content:""; width:1px; height:56px; background:var(--line-2); transform-origin:top; transition:transform 1.2s var(--ease); }
.flux-fil-aller::before{ background:var(--accent); }
.flux-fil-aller{ top:100%; right:calc(50% + 4px); flex-direction:row-reverse; }
.flux-fil-aller span::after{ content:" ↓"; color:var(--accent); }
.flux-fil-retour{ bottom:100%; left:calc(50% + 4px); }
.flux-fil-retour span::before{ content:"↑ "; }

@media (min-width:1000px){
  .flux{ --g:clamp(32px,6vw,88px); grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.25fr) minmax(0,1.1fr) minmax(0,.9fr); gap:var(--g); align-items:stretch; }
  .flux-etape + .flux-etape::before{ left:calc(-1 * var(--g)); top:50%; width:var(--g); height:1px; transform-origin:left; }
  .flux-fil{ flex-direction:column-reverse !important; gap:8px; align-items:center; width:var(--g); }
  .flux-fil::before{ width:var(--g); height:1px; transform-origin:left; }
  .flux-fil-aller{ top:36%; left:100%; right:auto; }
  .flux-fil-aller span::after{ content:" →"; }
  .flux-fil-retour{ top:62%; bottom:auto; left:calc(-1 * var(--g)); flex-direction:column !important; }
  .flux-fil-retour::before{ transform-origin:right; }
  .flux-fil-retour span::before{ content:"← "; }
}
.flux-anim .flux-etape + .flux-etape::before, .flux-anim .flux-fil::before{ transform:scale(0); }
.flux-anim.est-visible .flux-etape + .flux-etape::before, .flux-anim.est-visible .flux-fil::before{ transform:none; }
.flux-anim.est-visible .flux-etape:nth-child(2)::before{ transition-delay:.15s; }
.flux-anim.est-visible .flux-fil-aller::before{ transition-delay:.35s; }
.flux-anim.est-visible .flux-fil-retour::before{ transition-delay:.6s; }
.flux-anim.est-visible .flux-etape:nth-child(4)::before{ transition-delay:.8s; }
.flux-anim.est-visible .flux-etape:nth-child(5)::before{ transition-delay:1s; }

/* 03 Fonctions */
.fonctions{ list-style:none; margin:0; padding:0; border-bottom:1px solid var(--line); }
.fn{ position:relative; display:grid; gap:14px; padding:32px 0; grid-template-columns:auto 1fr; column-gap:20px; }
.fn::before{ background:var(--line); }
.fn-n{ font:560 clamp(15px, 1.2vw, 17px)/1.6 var(--f-titre); color:var(--text-tertiary); letter-spacing:.02em; min-width:2.2em; font-variant-numeric:tabular-nums; transition:color .5s var(--ease), transform .7s var(--ease); }
.fn h3{ transition:transform .7s var(--ease); }
.fn-corps{ display:grid; gap:10px; }
.fn h3{ font-size:clamp(21px, 2.2vw, 30px); letter-spacing:-.022em; line-height:1.12; }
.fn-corps p{ color:var(--text-secondary); max-width:52ch; }
.tag{ display:inline-block; vertical-align:middle; margin-left:10px; transform:translateY(-.2em); color:var(--text-tertiary); white-space:nowrap; font-size:12px; }
.fn-limite{ grid-column:2; font-size:15px; color:var(--text-tertiary); display:grid; gap:6px; max-width:52ch; }
.fn-limite span{ color:var(--text-secondary); font-size:12px; }
@media (max-width:1099px){ .tag, .fn-limite span{ font-size:var(--lbl); } }
@media (min-width:960px){
  .fn{ grid-template-columns:96px minmax(0,1.3fr) minmax(0,1fr); column-gap:40px; padding:40px 0; align-items:start; }
  .fn-limite{ grid-column:3; padding-top:6px; }
  .fn-n{ padding-top:6px; }
}
/* survol (souris seulement) : un filet d'accent se dessine, le numéro et le titre se décalent */
.fn::after, .bloc:not(.bloc-franc)::after, .regles li::after, .carte::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--accent); pointer-events:none;
  transform:scaleX(0); transform-origin:100% 50%; transition:transform .8s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .fn:hover .fn-n{ color:var(--accent); transform:translateX(6px); }
  .fn:hover h3{ transform:translateX(4px); }
  .fn:hover::after, .bloc:not(.bloc-franc):hover::after, .regles li:hover::after, .carte:hover::after{ transform:scaleX(1); transform-origin:0 50%; }
  .btn:not(.btn-plein):hover::before{ transform:scaleY(1); transform-origin:50% 0; }
  .btn:hover .ico{ transform:translateY(-2px); }
  .flux-etape:hover{ border-color:var(--text-secondary); }
  .pied-liens a:hover{ color:var(--text-primary); }
  .pied-liens a:hover::after{ transform:scaleX(1); transform-origin:left; }
  .pied-bas p a:hover{ text-underline-offset:7px; }
}

/* 04 Installation */
.install{ display:grid; gap:48px; }
.install-cmd{ display:grid; gap:20px; align-content:start; }
.install-pre{ color:var(--text-tertiary); font-size:16px; }
.terminal{
  list-style:none; margin:0; padding:0; background:var(--panel); border:1px solid var(--line-2); border-radius:8px;
  display:grid; counter-reset:cmd; overflow:hidden;
}
.cmd{ position:relative; counter-increment:cmd; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; align-items:center; padding:18px 12px 18px 18px; }
.cmd + .cmd{ border-top:1px solid var(--line); }
.cmd::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--accent); opacity:0; transform:scaleX(0); transform-origin:0 50%; pointer-events:none; }
.cmd.a-copie::after{ animation:filet-copie 1.5s var(--ease) both; }
@keyframes filet-copie{ 0%{ opacity:1; transform:scaleX(0); } 50%{ opacity:1; transform:scaleX(1); } 100%{ opacity:0; transform:scaleX(1); } }
.cmd-ou{ grid-column:1 / -1; color:var(--text-tertiary); font-size:12px; }
.cmd-ou::before{ content:counter(cmd, decimal-leading-zero) "   "; white-space:pre; color:var(--accent); }
.cmd code{ white-space:normal; overflow-wrap:anywhere; background:none; padding:0; color:var(--text-primary); font-size:15px; line-height:1.5; }
.copie{
  min-width:44px; min-height:44px; padding:0 14px; border-radius:6px; border:1px solid var(--line-2); background:none;
  color:var(--text-primary); font:600 14px/1 var(--f-texte); cursor:pointer; transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.copie:hover{ border-color:var(--text-secondary); }
.install-cote{ display:grid; gap:40px; align-content:start; }
.carte{ position:relative; padding-top:28px; display:grid; gap:12px; }
.carte h3{ font-size:22px; letter-spacing:-.018em; }
.carte p{ color:var(--text-secondary); font-size:16px; }
.carte strong{ color:var(--text-primary); }
@media (max-width:1099px){ .cmd-ou{ font-size:var(--lbl); } }
@media (min-width:1000px){ .install{ grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:72px; } .cmd code{ font-size:16px; } }

/* 05 Garde-fous */
.regles{ list-style:none; margin:0; padding:0; display:grid; gap:40px; counter-reset:regle; }
.regles li{ position:relative; padding-top:28px; display:grid; gap:12px; align-content:start; counter-increment:regle; }
.regles h3{ font-size:22px; letter-spacing:-.018em; }
.regles h3::before{ content:counter(regle, decimal-leading-zero); display:block; margin-bottom:22px; font:600 var(--lbl)/1 var(--f-texte); letter-spacing:.12em; color:var(--text-tertiary); font-variant-numeric:tabular-nums; }
.regles p{ color:var(--text-secondary); font-size:16px; }
@media (min-width:700px){ .regles{ grid-template-columns:1fr 1fr; column-gap:40px; } }
@media (min-width:1200px){ .regles{ grid-template-columns:repeat(4,1fr); } }

/* ---------- Pied ---------- */
.pied{ border-top:1px solid var(--line); padding:clamp(72px, 10vw, 140px) 0 40px; overflow:clip; }
.pied-grand{ font:580 clamp(44px, 12vw, 176px)/.9 var(--f-titre); letter-spacing:-.05em; color:var(--panel-2); white-space:nowrap; margin-bottom:48px; user-select:none; }
.pied-bas{ display:grid; gap:20px; color:var(--text-tertiary); font-size:15px; border-top:1px solid var(--line); padding-top:28px; }
.pied-bas a{ text-decoration-thickness:1px; text-underline-offset:4px; transition:color .4s var(--ease), text-underline-offset .5s var(--ease); }
.pied-bas a:hover{ color:var(--text-primary); }
.pied-liens{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 24px; }
.pied-liens a{ position:relative; display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--text-secondary); transition:color .4s var(--ease); }
.pied-liens a::after{ content:""; position:absolute; left:0; right:0; bottom:10px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease); }
@media (min-width:900px){ .pied-bas{ grid-template-columns:1fr auto; align-items:center; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; }
}