/* Blackformance — prototype site v0.3. Charte : tokens/ du repo + planches art-*.jsx.
   Deux thèmes (dark / light). Motifs : brackets · crosshair · grid · scanlines. */

/* ---------- THEMES ---------- */
:root, [data-theme="dark"]{
  --bg:#050505; --surface:#0c0c0d; --surface2:#16161a; --line:#1f1f24;
  --text:#fafaf7; --text2:#9a9aa3; --text3:#74747e;
  --accent:#d4ff3a; --accent-dim:#a3c722; --accent-ink:#050505;
  --eye:#d4ff3a; --motif:rgba(255,255,255,.55); --motif-soft:rgba(255,255,255,.10);
  --shadow:0 1px 0 rgba(255,255,255,.03);
}
[data-theme="light"]{
  --bg:#f5f1e8; --surface:#fffdf9; --surface2:#ece5d6; --line:#ddd4c2;
  --text:#0c0c0d; --text2:#5a564d; --text3:#8f8878;
  --accent:#d4ff3a; --accent-dim:#a3c722; --accent-ink:#0c0c0d;
  --eye:#0c0c0d; --motif:rgba(0,0,0,.42); --motif-soft:rgba(0,0,0,.08);
  --shadow:0 1px 2px rgba(0,0,0,.04);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-weight:300; line-height:1.6;
  -webkit-font-smoothing:antialiased; font-feature-settings:'ss01','cv11';
  transition:background .35s ease, color .35s ease;}
:root{
  --sans:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1140px;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.mono{font-family:var(--mono);}
.tab{font-variant-numeric:tabular-nums;}
.accent{color:var(--accent-dim);}
em{font-style:italic; color:var(--text);}
h1,h2,h3{font-weight:600; line-height:1.12; letter-spacing:-.015em; margin:0;}

.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--eye); margin:0 0 18px; display:inline-flex; gap:.5em; align-items:center;}
.eyebrow::before{content:"//"; color:var(--text3);}

/* ---------- MOTIFS ---------- */
.motif-grid{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,var(--motif-soft) 1px,transparent 1px) 0 0/54px 54px,
             linear-gradient(var(--motif-soft) 1px,transparent 1px) 0 0/54px 54px;
  mask-image:radial-gradient(circle at 14% 0%,#000 0%,transparent 60%);}
.motif-scan{position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,var(--motif-soft) 0 1px,transparent 1px 5px);
  opacity:.5; mask-image:linear-gradient(180deg,#000,transparent 70%);}
/* corner brackets (stationery-style : top-right + bottom-left) */
.bkt{position:relative;}
.bkt::before,.bkt::after{content:""; position:absolute; width:11px; height:11px; border:0 solid var(--accent); opacity:.9;}
.bkt::before{top:9px; right:9px; border-top-width:1px; border-right-width:1px;}
.bkt::after{bottom:9px; left:9px; border-bottom-width:1px; border-left-width:1px;}
.stamp{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--text3); text-transform:uppercase;}

/* ---------- HEADER ---------- */
header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 78%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.bar{display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px;}
.bar .logo{height:19px; width:auto; display:block;}
.bar .logo-onlight{display:none;}
[data-theme="light"] .bar .logo-ondark{display:none;}
[data-theme="light"] .bar .logo-onlight{display:block;}
.bar .brand{display:flex; align-items:center; gap:12px;}
.bar .brand .loc{color:var(--text3);}
nav.main{display:flex; align-items:center;}
nav.main a{font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:var(--text2); margin-left:22px; transition:color .15s; white-space:nowrap;}
nav.main a:hover,nav.main a.active{color:var(--text);}
nav.main a.active{border-bottom:1.5px solid var(--accent); padding-bottom:3px;}
.nav-cta{color:var(--accent-dim)!important;}
.tools{display:flex; align-items:center; gap:12px; margin-left:24px;}
.lang{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--text3); display:flex; gap:7px;}
.lang a.on{color:var(--text);}
.lang a[aria-disabled]{opacity:.5; cursor:not-allowed;}
.theme-btn{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  background:transparent; border:1px solid var(--line); color:var(--text2); border-radius:4px;
  padding:6px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:.15s;}
.theme-btn:hover{border-color:var(--text3); color:var(--text);}
.theme-btn .dot{width:8px; height:8px; border-radius:50%; background:var(--accent);}
@media(max-width:900px){ nav.main a{margin-left:14px; font-size:11.5px;} .tools{margin-left:12px;} .bar .brand .loc{display:none;} }
@media(max-width:680px){ nav.main .opt{display:none;} .lang{display:none;} }

/* ---------- BUTTONS ---------- */
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px; letter-spacing:.03em;
  padding:13px 22px; border-radius:4px; border:1px solid var(--line); color:var(--text); background:transparent;
  transition:.16s; cursor:pointer;}
.btn:hover{border-color:var(--text3); background:var(--surface);}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600;}
.btn.primary:hover{background:var(--accent-dim); border-color:var(--accent-dim);}

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden; padding:104px 0 88px;}
.hero .inner{position:relative; z-index:1; max-width:860px;}
.tagline{font-family:var(--mono); color:var(--accent-dim); font-size:13px; letter-spacing:.22em; text-transform:uppercase; margin:0 0 24px;}
.hero h1{font-size:clamp(40px,6.6vw,78px); letter-spacing:-.03em; font-weight:600;}
.hero h1 .sub{display:block; color:var(--text2); font-weight:300; font-size:clamp(20px,2.6vw,29px); margin-top:22px; letter-spacing:-.01em; line-height:1.42;}
.hero p.lede{color:var(--text2); font-size:18px; max-width:600px; margin:30px 0 0;}
.hero .side-stamp{position:absolute; top:120px; right:28px; z-index:1; text-align:right; display:flex; flex-direction:column; gap:5px;}
@media(max-width:900px){ .hero .side-stamp{display:none;} }

/* ---------- PAGE HERO ---------- */
.page-hero{position:relative; overflow:hidden; padding:80px 0 40px; border-bottom:1px solid var(--line);}
.page-hero .inner{position:relative; z-index:1; max-width:860px;}
.page-hero h1{font-size:clamp(34px,5.2vw,58px); letter-spacing:-.025em;}
.page-hero p.lede{color:var(--text2); font-size:18px; max-width:660px; margin:22px 0 0;}

/* ---------- SECTIONS ---------- */
section{padding:74px 0; border-top:1px solid var(--line);}
section.alt{background:var(--surface);}
section:first-of-type{border-top:0;}
.sec-head{max-width:720px; margin-bottom:46px;}
.sec-head h2{font-size:clamp(27px,3.4vw,40px);}
.sec-head p{color:var(--text2); font-size:17px; margin:18px 0 0;}
.sec-head p a{color:var(--accent-dim); border-bottom:1px solid var(--line);}

/* ---------- PROSE ---------- */
.prose{max-width:730px; color:var(--text2); font-size:16.5px;}
.prose p{margin:0 0 18px;}
.prose h3{color:var(--text); font-size:21px; margin:36px 0 12px; letter-spacing:-.01em;}
.prose strong{color:var(--text); font-weight:500;}
.prose ul{margin:0 0 18px; padding-left:0; list-style:none;}
.prose ul li{position:relative; padding-left:24px; margin:0 0 10px;}
.prose ul li::before{content:"→"; position:absolute; left:0; color:var(--accent-dim);}

/* ---------- STEPS ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.step{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:28px 26px; box-shadow:var(--shadow);}
.step .n{font-family:var(--mono); color:var(--accent-dim); font-size:12px; letter-spacing:.1em;}
.step h3{font-size:19px; margin:16px 0 10px;}
.step p{color:var(--text2); font-size:15px; margin:0;}

/* ---------- BOUNDARY ---------- */
.split{display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-top:20px;}
.split .col{padding:32px 34px; background:var(--surface);}
.split .col.b{background:var(--surface2);}
.split .mid{width:1px; background:var(--line);}
.split .who{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;}
.split .col.a .who{color:var(--accent-dim);}
.split .col.b .who{color:var(--text2);}
.split h3{font-size:22px; margin:14px 0 6px;}
.split p{color:var(--text2); font-size:15px; margin:6px 0 0;}
.split .q{color:var(--text);}

/* ---------- FAMILY CARDS (prestations) ---------- */
.fam-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.card-fam{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:26px 26px 24px; box-shadow:var(--shadow); transition:border-color .16s, transform .16s;}
.card-fam:hover{border-color:var(--text3); transform:translateY(-2px);}
.card-fam .top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:4px;}
.card-fam .name{font-size:22px; font-weight:600; letter-spacing:-.01em;}
.card-fam .k{font-family:var(--mono); font-size:11px; color:var(--accent-dim); letter-spacing:.12em; text-transform:uppercase;}
.card-fam .desc{color:var(--text2); font-size:15px; margin:8px 0 18px;}
.card-fam .ex{border-top:1px solid var(--line); padding-top:14px; margin-top:2px;}
.card-fam .ex .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text3); display:block; margin-bottom:10px;}
.card-fam .ex ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.card-fam .ex li{display:flex; gap:10px; align-items:baseline; font-size:14px; color:var(--text2);}
.card-fam .ex li b{font-family:var(--mono); font-size:12px; color:var(--text); font-weight:500; white-space:nowrap;}
.card-fam .ex li span{color:var(--text2);}

/* ---------- FAMILY TEASER (home) ---------- */
.fam-teaser{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.fam-teaser a{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:20px; transition:.16s; display:block; box-shadow:var(--shadow);}
.fam-teaser a:hover{border-color:var(--accent); transform:translateY(-2px);}
.fam-teaser .k{font-family:var(--mono); font-size:11px; color:var(--accent-dim); letter-spacing:.12em;}
.fam-teaser h3{font-size:18px; margin:12px 0 5px; letter-spacing:-.01em;}
.fam-teaser p{color:var(--text3); font-size:12.5px; margin:0; font-family:var(--mono); letter-spacing:.03em;}

/* ---------- WHY ---------- */
.why{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.why .item{border-top:2px solid var(--accent); padding:18px 0 0;}
.why .item .big{font-family:var(--mono); font-size:20px; color:var(--text); font-weight:500; letter-spacing:.01em;}
.why .item p{color:var(--text2); font-size:14px; margin:10px 0 0;}

/* ---------- APPROACH GENERIC ---------- */
.generic{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.generic .g{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:26px; box-shadow:var(--shadow);}
.generic .g .k{font-family:var(--mono); font-size:11px; color:var(--accent-dim); letter-spacing:.12em; text-transform:uppercase;}
.generic .g h3{font-size:19px; margin:14px 0 8px;}
.generic .g p{color:var(--text2); font-size:14.5px; margin:0;}

/* ---------- TIERS ---------- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px;}
.tier{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:26px; box-shadow:var(--shadow);}
.tier .lvl{font-family:var(--mono); color:var(--accent-dim); font-size:12px; letter-spacing:.1em; text-transform:uppercase;}
.tier h3{font-size:20px; margin:12px 0 10px;}
.tier p{color:var(--text2); font-size:14.5px; margin:0;}
.note{color:var(--text3); font-size:13px; font-family:var(--mono); margin-top:22px; letter-spacing:.03em;}

/* ---------- LIME CTA BAND ---------- */
.cta-band{position:relative; overflow:hidden; background:var(--accent); color:var(--accent-ink); border-top:1px solid var(--line);}
.cta-band .inner{position:relative; z-index:1; text-align:center; padding:72px 0;}
.cta-band h2{font-size:clamp(26px,3.6vw,40px); color:#050505;}
.cta-band p{color:#141418; margin:16px auto 30px; max-width:520px; font-size:17px;}
.cta-band .cta-row{justify-content:center;}
.cta-band .btn{border-color:rgba(0,0,0,.28); color:#050505;}
.cta-band .btn:hover{background:rgba(0,0,0,.07);}
.cta-band .btn.dark{background:#050505; color:var(--accent); border-color:#050505;}
.cta-band .motif-scan{opacity:.10;}

/* ---------- CONTACT ---------- */
.contact-cols{display:grid; grid-template-columns:1.4fr 1fr; gap:44px; align-items:start;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field.full{grid-column:1 / -1;}
.field label{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text2);}
.field label .req{color:var(--accent-dim);}
.field input,.field select,.field textarea{background:var(--surface); border:1px solid var(--line); border-radius:4px;
  color:var(--text); font-family:var(--sans); font-size:15px; padding:12px 14px; width:100%; transition:border-color .15s;}
.field textarea{resize:vertical; min-height:132px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent);}
.field select{font-family:var(--mono); font-size:13.5px;}
.form-actions{grid-column:1 / -1; display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.form-note{color:var(--text3); font-family:var(--mono); font-size:12px;}
.form-note.ok{color:var(--accent-dim);}
.aside .blk{border-top:2px solid var(--accent); padding:16px 0 0; margin-bottom:26px;}
.aside .blk .k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dim);}
.aside .blk h3{font-size:17px; margin:8px 0 6px;}
.aside .blk p{color:var(--text2); font-size:14px; margin:0;}
.aside .blk a{color:var(--text); border-bottom:1px solid var(--line);}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:36px 0; color:var(--text3);}
.foot{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:12px; letter-spacing:.04em;}
footer .sig{color:var(--text2);}
.foot-links a{margin-left:16px; color:var(--text3);}
.foot-links a:hover{color:var(--text);}
.foot-meta{max-width:var(--maxw); margin:14px auto 0; padding:0 28px; font-family:var(--mono); font-size:11px; color:var(--text3); letter-spacing:.04em;}
.proto-flag{background:var(--surface2); border-top:1px solid var(--line); font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; color:var(--accent-dim); text-align:center; padding:7px; text-transform:uppercase;}

@media(max-width:820px){ .contact-cols{grid-template-columns:1fr;} .form-grid{grid-template-columns:1fr;} }
@media(max-width:760px){
  .steps,.tiers,.why,.fam-grid,.fam-teaser,.generic{grid-template-columns:1fr;}
  .why,.fam-teaser{grid-template-columns:1fr 1fr;}
  .split{grid-template-columns:1fr;} .split .mid{width:auto; height:1px;}
}

/* =====================================================================
   v0.4 — mix ink/paper (négatif au toggle) · viseur · icônes · motion
   ===================================================================== */
:root{ --ease:cubic-bezier(.2,.8,.2,1); }

/* ---- Panels : palettes fixes qui cohabitent sur une même page ---- */
.ink{
  --bg:#050505; --surface:#0c0c0d; --surface2:#16161a; --line:#26262c;
  --text:#fafaf7; --text2:#9a9aa3; --text3:#74747e;
  --accent-ink:#050505; --eye:#d4ff3a; --motif-soft:rgba(255,255,255,.10);
  background:var(--bg); color:var(--text);
}
.paper{
  --bg:#f5f1e8; --surface:#fffdf9; --surface2:#ece5d6; --line:#ddd4c2;
  --text:#0c0c0d; --text2:#5a564d; --text3:#8f8878;
  --accent-ink:#0c0c0d; --eye:#0c0c0d; --motif-soft:rgba(0,0,0,.07);
  background:var(--bg); color:var(--text);
}
/* Toggle = négatif : on inverse ink<->paper */
[data-theme="light"] .ink{
  --bg:#f5f1e8; --surface:#fffdf9; --surface2:#ece5d6; --line:#ddd4c2;
  --text:#0c0c0d; --text2:#5a564d; --text3:#8f8878;
  --accent-ink:#0c0c0d; --eye:#0c0c0d; --motif-soft:rgba(0,0,0,.07);
}
[data-theme="light"] .paper{
  --bg:#050505; --surface:#0c0c0d; --surface2:#16161a; --line:#26262c;
  --text:#fafaf7; --text2:#9a9aa3; --text3:#74747e;
  --accent-ink:#050505; --eye:#d4ff3a; --motif-soft:rgba(255,255,255,.10);
}
section.ink, section.paper{border-top:0;}
.panel-edge{border-top:1px solid var(--line);}

/* ---- Viseur / mark ---- */
.vf{display:inline-block; vertical-align:middle; color:var(--text);}
.vf svg{display:block;}
.brand .vf{color:var(--text);}
.mark-lockon rect.core{transform-box:fill-box; transform-origin:center; animation:lockon 3.2s var(--ease) infinite;}
@keyframes lockon{0%,70%,100%{transform:scale(1); opacity:1;} 82%{transform:scale(.55); opacity:.7;}}

/* ---- Icônes de domaine ---- */
.icn{width:30px; height:30px; color:var(--text);}
.icn svg{display:block; width:100%; height:100%;}
.card-fam .top .icn{margin-right:auto;}
.dom-head{display:flex; align-items:center; gap:14px; margin-bottom:6px;}
.dom-head .icn{flex:none;}

/* ---- Titre : accent lime italique serif ---- */
.li{font-family:"IBM Plex Serif",Georgia,serif; font-style:italic; font-weight:500;
  color:var(--accent-dim); letter-spacing:-.01em;}
[data-theme] .ink .li, .ink .li{color:#d4ff3a;}
.paper .li{color:#7a9410;}
[data-theme="light"] .ink .li{color:#7a9410;}
[data-theme="light"] .paper .li{color:#d4ff3a;}

/* ---- Reveal au scroll ---- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.reveal.in{opacity:1; transform:none;}

/* =========================== MINI BUSINESS CASE =========================== */
.sim{position:relative; background:#0a0a0b; border:1px solid #26262c; border-radius:10px;
  padding:18px; color:#fafaf7; font-family:var(--mono); overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.sim .scan{position:absolute; left:0; right:0; height:64px; top:-64px;
  background:linear-gradient(180deg,transparent,rgba(212,255,58,.10),transparent);
  animation:scan 4.2s linear infinite; pointer-events:none;}
@keyframes scan{0%{top:-64px;}100%{top:100%;}}
.sim-top{display:flex; align-items:center; justify-content:space-between; font-size:10.5px; letter-spacing:.1em; color:#5a5a64; text-transform:uppercase;}
.sim-top .id{color:#8a8a94;}
.sim-top .run{color:#d4ff3a; display:inline-flex; align-items:center; gap:6px;}
.sim-top .run .dot{width:6px; height:6px; border-radius:50%; background:#d4ff3a; animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:.25;}}
.sim h4{font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:-.01em; margin:12px 0 2px; color:#fafaf7;}
.sim .sub{font-size:11px; color:#5a5a64; margin-bottom:16px;}
.sim-cost{display:flex; align-items:flex-end; justify-content:space-between; border-top:1px solid #1f1f24; border-bottom:1px solid #1f1f24; padding:12px 0; margin-bottom:14px;}
.sim-cost .lab{font-size:9.5px; letter-spacing:.12em; color:#5a5a64; text-transform:uppercase;}
.sim-cost .val{font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; color:#fafaf7; line-height:1;}
.sim-cost .val .cur{font-size:15px; color:#8a8a94; margin-right:4px;}
.sim-cost .delta{font-size:11px; color:#5fd97a;}
.sim-bars{display:flex; align-items:flex-end; gap:8px; height:66px; margin-bottom:6px;}
.sim-bars .bar{flex:1; background:#1b1b1f; border-top:2px solid #33333a; position:relative; height:0; animation:grow 1.1s var(--ease) forwards;}
.sim-bars .bar.hot{background:rgba(212,255,58,.14); border-top-color:#d4ff3a;}
.sim-bars .bar span{position:absolute; top:-15px; left:0; right:0; text-align:center; font-size:9.5px; color:#8a8a94;}
@keyframes grow{from{height:0;}}
.sim-x{display:flex; justify-content:space-between; font-size:9px; color:#5a5a64; border-top:1px solid #1f1f24; padding-top:6px; margin-bottom:14px;}
.sim-verdict{display:flex; align-items:center; gap:12px; background:rgba(95,217,122,.08); border:1px solid rgba(95,217,122,.3); border-radius:6px; padding:11px 14px; opacity:0; animation:fadein .5s var(--ease) 1.4s forwards;}
.sim-verdict .go{font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:.06em; color:#5fd97a;}
.sim-verdict .txt{font-size:11px; color:#8a8a94; font-family:var(--sans);}
@keyframes fadein{to{opacity:1;}}
.sim-log{margin-top:12px; border-top:1px solid #1f1f24; padding-top:10px; font-size:10.5px; color:#5a5a64; line-height:1.7;}
.sim-log .ln{display:flex; gap:10px; opacity:0; animation:fadein .3s steps(1) forwards;}
.sim-log .ln .t{color:#5a5a64;}
.sim-log .ln .svc{color:#7aa8ff;}
.sim-log .ln .ok{color:#5fd97a; margin-left:auto;}
.sim-log .ln:nth-child(1){animation-delay:.3s;} .sim-log .ln:nth-child(2){animation-delay:.7s;}
.sim-log .ln:nth-child(3){animation-delay:1.1s;} .sim-log .ln:nth-child(4){animation-delay:1.6s;}

/* hero layout with sim */
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
@media(max-width:940px){ .hero-grid{grid-template-columns:1fr; gap:36px;} .hero .side-stamp{display:none;} }

@media(prefers-reduced-motion:reduce){
  .sim .scan,.mark-lockon rect.core,.sim-top .run .dot{animation:none;}
  .sim-bars .bar{animation:none; height:var(--h,40%);}
  .sim-verdict,.sim-log .ln{opacity:1; animation:none;}
  .reveal{opacity:1; transform:none;}
}

/* =====================================================================
   v0.5 — constellation · strip domaines · lime clair · dropdown · légal
   ===================================================================== */

/* Lime plus doux sur fond clair (lignes/bordures) ; garde le punch sur sombre */
.paper{ --accent:#8aa60f; }
[data-theme="light"] .ink{ --accent:#8aa60f; }

/* Sélecteur de langue (dropdown) */
.lang-select{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--text2);
  background:transparent; border:1px solid var(--line); border-radius:4px; padding:6px 24px 6px 10px;
  cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 13px) 12px,calc(100% - 9px) 12px; background-size:4px 4px,4px 4px; background-repeat:no-repeat;}
.lang-select:hover{border-color:var(--text3); color:var(--text);}
.lang-select option{background:#0c0c0d; color:#fafaf7;}

/* Domaines — strip compact (icône + texte, sur une ligne) */
.dom-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.dom{display:flex; align-items:center; gap:14px; padding:15px 16px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); transition:border-color .16s, transform .16s;}
.dom:hover{border-color:var(--accent); transform:translateY(-2px);}
.dom .icn{width:26px; height:26px; flex:none;}
.dom .tx{display:flex; flex-direction:column; line-height:1.2;}
.dom .tx b{font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--text);}
.dom .tx span{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--text3); text-transform:uppercase; margin-top:3px;}
@media(max-width:820px){ .dom-strip{grid-template-columns:repeat(2,1fr);} }
@media(max-width:460px){ .dom-strip{grid-template-columns:1fr;} }

/* ---- Constellation (toile d'araignée des prestations) ---- */
.constel{padding:16px 16px 14px;}
.constel .c-top{display:flex; align-items:center; justify-content:space-between; font-size:10.5px;
  letter-spacing:.1em; color:#5a5a64; text-transform:uppercase; margin-bottom:2px;}
.constel .c-top .run{color:#d4ff3a; display:inline-flex; align-items:center; gap:6px;}
.constel .c-top .run .dot{width:6px; height:6px; border-radius:50%; background:#d4ff3a; animation:blink 1.1s steps(1) infinite;}
.constel svg{display:block; width:100%; height:auto;}
.constel .edge{stroke:#26262c; stroke-width:1;}
.constel .edge.live{stroke:rgba(212,255,58,.5);}
.constel .flow{fill:#d4ff3a;}
.constel .node-ring{fill:none; stroke:#1f1f24; stroke-width:2.4;}
.constel .node-prog{fill:none; stroke:#d4ff3a; stroke-width:2.4; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:center; transition:stroke-dashoffset 1.2s var(--ease);}
.constel .node-core{fill:#0c0c0d; stroke:#33333a; stroke-width:1;}
.constel .node.hot .node-core{fill:#d4ff3a; stroke:#d4ff3a;}
.constel .node-lbl{font-family:var(--mono); font-size:8.5px; fill:#8a8a94; text-anchor:middle;}
.constel .node-pct{font-family:var(--mono); font-size:8px; fill:#d4ff3a; text-anchor:middle;}
.constel .hub-core{fill:rgba(95,217,122,.12); stroke:#5fd97a; stroke-width:1.5;}
.constel .hub-go{font-family:var(--sans); font-weight:700; font-size:11px; fill:#5fd97a; text-anchor:middle;}
.constel .hub-lbl{font-family:var(--mono); font-size:8px; fill:#8a8a94; text-anchor:middle; text-transform:uppercase; letter-spacing:.08em;}
.constel .sweep{fill:url(#sweepgrad); transform-origin:center; animation:sweep 6s linear infinite;}
@keyframes sweep{to{transform:rotate(360deg);}}
.constel .c-foot{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:#5a5a64; border-top:1px solid #1f1f24; padding-top:9px; margin-top:6px;}
.constel .c-foot b{color:#fafaf7; font-weight:500;}

/* Footer légal */
.foot-legal{display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:space-between; align-items:center;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
.legal-links a{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--text3); margin-left:16px;}
.legal-links a:first-child{margin-left:0;}
.legal-links a:hover{color:var(--text);}
@media(max-width:620px){ .legal-links a{margin-left:0; margin-right:14px;} }

@media(prefers-reduced-motion:reduce){ .constel .sweep,.constel .c-top .run .dot{animation:none;} }

.mission-showcase{max-width:540px;}
.mission-showcase .sim{margin:0;}
@media(max-width:600px){ .mission-showcase{max-width:100%;} }

/* v0.6 — prestations : sous-produits dépliables (<details>) */
.prod-list{margin-top:14px; border-top:1px solid var(--line);}
details.prod{border-bottom:1px solid var(--line);}
details.prod > summary{list-style:none; cursor:pointer; display:flex; gap:12px; align-items:baseline; padding:12px 0;}
details.prod > summary::-webkit-details-marker{display:none;}
details.prod > summary .p-name{font-family:var(--mono); font-size:13.5px; color:var(--text); white-space:nowrap;}
details.prod > summary .p-q{color:var(--text2); font-size:13.5px;}
details.prod > summary .p-plus{margin-left:auto; color:var(--accent-dim); font-family:var(--mono); font-size:15px; line-height:1; transition:transform .2s var(--ease);}
details.prod[open] > summary .p-plus{transform:rotate(45deg);}
details.prod:hover > summary .p-name{color:var(--accent-dim);}
.p-exp{color:var(--text2); font-size:13.5px; line-height:1.55; padding:2px 0 14px; max-width:56ch;}
.p-exp .disc{display:block; margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--text3);}

/* =====================================================================
   v0.7 — réservoirs de données (fûts qui se remplissent → GO)
   ===================================================================== */
.flux{padding:16px 18px 15px;}
.flux .c-top{display:flex; align-items:center; justify-content:space-between; font-size:10.5px; letter-spacing:.1em; color:#5a5a64; text-transform:uppercase; margin-bottom:4px;}
.flux .c-top .id{color:#8a8a94;}
.flux .c-top .run{color:#d4ff3a; display:inline-flex; align-items:center; gap:6px;}
.flux .c-top .run .dot{width:6px; height:6px; border-radius:50%; background:#d4ff3a; animation:blink 1.1s steps(1) infinite;}
.silos{display:flex; align-items:stretch; gap:11px; height:190px; margin:14px 0 6px;}
.silo{flex:1; display:flex; flex-direction:column; align-items:center; gap:9px; min-width:0;}
.silo .tube{position:relative; width:100%; max-width:40px; flex:1; border:1px solid #26262c; border-radius:6px; background:#0d0d0e; overflow:hidden;}
.silo .tube .ticks{position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 15px,rgba(255,255,255,.035) 15px 16px);}
.silo .fill{position:absolute; left:0; right:0; bottom:0; height:0;
  background:linear-gradient(180deg,rgba(212,255,58,.30),rgba(212,255,58,.07));
  border-top:1.5px solid #d4ff3a; transition:height 1.5s var(--ease);}
.silo .fill::after{content:""; position:absolute; top:-1.5px; left:0; right:0; height:8px;
  background:linear-gradient(180deg,rgba(212,255,58,.5),transparent); opacity:.5; animation:flux-glow 2.6s var(--ease) infinite;}
@keyframes flux-glow{50%{opacity:1;}}
.silo .lab{font-family:var(--mono); font-size:9px; color:#8a8a94; letter-spacing:.03em; text-align:center; white-space:nowrap;}
.silo .pv{font-family:var(--mono); font-size:9px; color:#c9c9cf; font-variant-numeric:tabular-nums;}
.silo.done .pv{color:#d4ff3a;}
.go-tile{width:66px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1px solid #26262c; border-radius:6px; background:#0d0d0e; transition:.5s var(--ease); align-self:stretch;}
.go-tile .g{font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.08em; color:#3a3a42; transition:.5s;}
.go-tile .s{font-family:var(--mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:#5a5a64;}
.go-tile.armed{border-color:#5fd97a; background:rgba(95,217,122,.09);}
.go-tile.armed .g{color:#5fd97a;}
.go-tile.armed .s{color:#5fd97a;}
.flux .c-foot{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:#5a5a64; border-top:1px solid #1f1f24; padding-top:9px; margin-top:8px;}
.flux .c-foot b{color:#8a8a94; font-weight:500;}
.flux .c-foot.armed b{color:#5fd97a;}
@media(prefers-reduced-motion:reduce){ .silo .fill::after,.flux .c-top .run .dot{animation:none;} }

/* v0.7 — ancres domaines (compense l'en-tête sticky) */
.card-fam[id]{scroll-margin-top:88px;}

/* v0.9 — mini-widgets de tête de page */
.page-hero .hero-grid{align-items:center;}
.mini{padding:17px 18px 15px;}
.mini .m-top{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#5a5a64; margin-bottom:15px;}
.mini .m-top .run{color:#d4ff3a; display:inline-flex; align-items:center; gap:6px;}
.mini .m-top .run .dot{width:6px; height:6px; border-radius:50%; background:#d4ff3a; animation:blink 1.1s steps(1) infinite;}
.mini .m-foot{border-top:1px solid #1f1f24; padding-top:11px; margin-top:15px; font-family:var(--mono); font-size:10.5px; color:#5a5a64; display:flex; justify-content:space-between;}
.mini .m-foot b{color:#8a8a94; font-weight:500;}
.mini .cov-n{color:#d4ff3a;}
/* couverture */
.cov{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.cov .cell{aspect-ratio:5/4; border:1px solid #26262c; border-radius:5px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; color:#5a5a64; transition:.4s var(--ease);}
.cov .cell.on{border-color:#d4ff3a; background:rgba(212,255,58,.10); color:#d4ff3a;}
/* vérification */
.veri{display:flex; flex-direction:column; gap:11px;}
.veri .ln{display:flex; align-items:center; gap:11px; font-family:var(--mono); font-size:12.5px; color:#5a5a64; transition:.3s;}
.veri .ln .ck{width:17px; height:17px; border:1px solid #33333a; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:10px; color:transparent; transition:.3s;}
.veri .ln.ok{color:#e8e8ea;}
.veri .ln.ok .ck{border-color:#5fd97a; color:#5fd97a;}
/* canal */
.canal{display:flex; flex-direction:column; gap:18px; padding:10px 0 4px;}
.canal .wire{display:flex; align-items:center;}
.canal .node{font-family:var(--mono); font-size:11px; color:#c9c9cf; padding:7px 12px; border:1px solid #26262c; border-radius:5px;}
.canal .node.bfo{color:#d4ff3a; border-color:rgba(212,255,58,.4);}
.canal .path{flex:1; height:2px; background:#26262c; position:relative; margin:0 10px;}
.canal .path .p{position:absolute; top:-2px; left:0; width:6px; height:6px; border-radius:50%; background:#d4ff3a; box-shadow:0 0 6px #d4ff3a; animation:wire 2.4s var(--ease) infinite;}
@keyframes wire{0%{left:0; opacity:0;} 12%{opacity:1;} 88%{opacity:1;} 100%{left:100%; opacity:0;}}
.canal .ack{font-family:var(--mono); font-size:11px; color:#5fd97a;}
@media(prefers-reduced-motion:reduce){ .mini .m-top .run .dot,.canal .path .p{animation:none;} }

/* v0.10 — eyebrow vert plus lisible sur les surfaces claires */
.paper{ --eye:#6f8f12; }
[data-theme="light"] .ink{ --eye:#6f8f12; }
[data-theme="light"] .paper{ --eye:#d4ff3a; }

/* v0.10 — explorateur de domaines (Expertise) */
.explorer{position:relative; display:grid; grid-template-columns:284px 1fr; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow);}
.ex-radio{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.ex-nav{border-right:1px solid var(--line);}
.ex-item{display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s, box-shadow .15s;}
.ex-item:last-child{border-bottom:0;}
.ex-item .k{font-family:var(--mono); font-size:10px; color:var(--text3);}
.ex-item .nm{font-size:15px; font-weight:600; letter-spacing:-.01em;}
.ex-item .verb{font-family:var(--mono); font-size:9.5px; color:var(--text3); text-transform:uppercase; letter-spacing:.06em;}
.ex-item .ct{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--text3); border:1px solid var(--line); border-radius:99px; padding:1px 8px;}
.ex-item:hover{background:var(--surface2);}
.ex-stage{padding:28px 30px; min-height:340px;}
.ex-panel{display:none;}
.ex-panel .ph{display:flex; align-items:center; gap:14px;}
.ex-panel .ph .icn{width:34px; height:34px; color:var(--text);}
.ex-panel .ph .verb{font-family:var(--mono); font-size:11px; color:var(--accent-dim); text-transform:uppercase; letter-spacing:.08em;}
.ex-panel .ph h3{font-size:26px; letter-spacing:-.01em;}
.ex-panel .ph-desc{color:var(--text2); font-size:15px; margin:12px 0 6px; max-width:62ch;}
.pr{padding:15px 0; border-top:1px solid var(--line);}
.pr .pr-top{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap;}
.pr-n{font-family:var(--mono); font-size:14px; color:var(--text); font-weight:500;}
.pr-q{font-family:var(--mono); font-size:12.5px; color:var(--accent-dim);}
.pr-d{color:var(--text2); font-size:14px; margin:7px 0 0; max-width:66ch; line-height:1.55;}
#r-market:checked ~ .ex-nav label[for="r-market"]{background:var(--surface2); box-shadow:inset 3px 0 0 var(--accent);}
#r-market:checked ~ .ex-nav label[for="r-market"] .nm{color:var(--accent-dim);}
#r-market:checked ~ .ex-stage .p-market{display:block;}
#r-offer:checked ~ .ex-nav label[for="r-offer"]{background:var(--surface2); box-shadow:inset 3px 0 0 var(--accent);}
#r-offer:checked ~ .ex-nav label[for="r-offer"] .nm{color:var(--accent-dim);}
#r-offer:checked ~ .ex-stage .p-offer{display:block;}
#r-focus:checked ~ .ex-nav label[for="r-focus"]{background:var(--surface2); box-shadow:inset 3px 0 0 var(--accent);}
#r-focus:checked ~ .ex-nav label[for="r-focus"] .nm{color:var(--accent-dim);}
#r-focus:checked ~ .ex-stage .p-focus{display:block;}
#r-actor:checked ~ .ex-nav label[for="r-actor"]{background:var(--surface2); box-shadow:inset 3px 0 0 var(--accent);}
#r-actor:checked ~ .ex-nav label[for="r-actor"] .nm{color:var(--accent-dim);}
#r-actor:checked ~ .ex-stage .p-actor{display:block;}
#r-opportunity:checked ~ .ex-nav label[for="r-opportunity"]{background:var(--surface2); box-shadow:inset 3px 0 0 var(--accent);}
#r-opportunity:checked ~ .ex-nav label[for="r-opportunity"] .nm{color:var(--accent-dim);}
#r-opportunity:checked ~ .ex-stage .p-opportunity{display:block;}
#r-decision:checked ~ .ex-nav label[for="r-decision"]{background:var(--surface2); box-shadow:inset 3px 0 0 var(--accent);}
#r-decision:checked ~ .ex-nav label[for="r-decision"] .nm{color:var(--accent-dim);}
#r-decision:checked ~ .ex-stage .p-decision{display:block;}
#r-compliance:checked ~ .ex-nav label[for="r-compliance"]{background:var(--surface2); box-shadow:inset 3px 0 0 var(--accent);}
#r-compliance:checked ~ .ex-nav label[for="r-compliance"] .nm{color:var(--accent-dim);}
#r-compliance:checked ~ .ex-stage .p-compliance{display:block;}
#r-continuous:checked ~ .ex-nav label[for="r-continuous"]{background:var(--surface2); box-shadow:inset 3px 0 0 var(--accent);}
#r-continuous:checked ~ .ex-nav label[for="r-continuous"] .nm{color:var(--accent-dim);}
#r-continuous:checked ~ .ex-stage .p-continuous{display:block;}
@media(max-width:760px){ .explorer{grid-template-columns:1fr;} .ex-nav{border-right:0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr;} .ex-item{border-bottom:1px solid var(--line);} .ex-stage{padding:22px;} }

/* v0.10 — Cabinet : chiffres + tuiles techno */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.stat{border-top:2px solid var(--accent); padding-top:16px;}
.stat .n{font-family:var(--mono); font-size:clamp(26px,3.6vw,40px); font-weight:600; color:var(--text); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1;}
.stat .l{color:var(--text2); font-size:13.5px; margin-top:10px; max-width:24ch;}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:26px 24px; box-shadow:var(--shadow);}
.tile .icn{width:30px; height:30px; color:var(--text); margin-bottom:16px;}
.tile h3{font-size:19px; letter-spacing:-.01em;}
.tile p{color:var(--text2); font-size:14.5px; margin:8px 0 0;}
@media(max-width:760px){ .stats{grid-template-columns:1fr 1fr;} .tiles{grid-template-columns:1fr;} }

/* v0.11 — index compact Expertise */
.catalog{columns:2; column-gap:20px;}
.cat{break-inside:avoid; border:1px solid var(--line); border-radius:8px; padding:18px 20px; margin:0 0 16px; background:var(--surface); box-shadow:var(--shadow);}
.cat-h{display:flex; align-items:center; gap:10px; padding-bottom:11px; border-bottom:1px solid var(--line); margin-bottom:4px;}
.cat-h .icn{width:22px; height:22px; color:var(--text); flex:none;}
.cat-h .nm{font-size:16px; font-weight:600; letter-spacing:-.01em;}
.cat-h .v{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--text3);}
.cat-h .ct{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--text3); border:1px solid var(--line); border-radius:99px; padding:1px 8px;}
.cat ul{list-style:none; margin:0; padding:0;}
.cat li{display:flex; gap:10px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--line);}
.cat li:last-child{border-bottom:0;}
.cat li .a{font-family:var(--mono); font-size:12.5px; color:var(--text); white-space:nowrap; flex:none;}
.cat li .q{font-size:12.5px; color:var(--text2); line-height:1.4;}
@media(max-width:760px){ .catalog{columns:1;} }

/* v0.11 — logo un peu plus grand */
.bar .logo{height:25px;}
.bar .vf svg{width:25px; height:25px;}

/* v0.12 — cartographie radiale + modale */
.carto{max-width:540px; margin:10px auto 0;}
.carto svg{width:100%; height:auto; overflow:visible;}
.c-ring{fill:none; stroke:var(--line);}
.c-tick{stroke:var(--line);}
.c-spoke{stroke:var(--line); stroke-dasharray:2 4;}
.c-hub{fill:var(--surface); stroke:var(--accent);}
.c-hubvf{fill:none; stroke:var(--accent); stroke-width:1.4;}
.c-hubdot{fill:var(--accent);}
.cnode{cursor:pointer;}
.cnode .nd{fill:var(--surface2); stroke:var(--line); stroke-width:1.5; transition:fill .18s, stroke .18s;}
.cnode:hover .nd,.cnode:focus .nd{stroke:var(--accent); fill:color-mix(in srgb,var(--accent) 12%, var(--surface2));}
.cnode:focus{outline:none;}
.cnode .code{fill:var(--text); font-family:var(--mono); font-size:14px; font-weight:600; text-anchor:middle;}
.cnode .lab{fill:var(--text2); font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; transition:fill .18s;}
.cnode:hover .lab,.cnode:focus .lab{fill:var(--text);}
.c-badge{fill:var(--bg); stroke:var(--line);}
.c-badgetxt{fill:var(--accent-dim); font-family:var(--mono); font-size:10px; font-weight:600; text-anchor:middle;}

.cmodal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px;}
.cmodal.open{display:flex;}
.cm-back{position:absolute; inset:0; background:rgba(0,0,0,.62); backdrop-filter:blur(3px);}
.cm-card{position:relative; background:var(--bg); border:1px solid var(--line); border-radius:12px;
  max-width:600px; width:100%; max-height:82vh; overflow:auto; padding:30px 32px 26px; box-shadow:0 30px 90px rgba(0,0,0,.55);}
.cm-x{position:absolute; top:14px; right:18px; background:transparent; border:0; color:var(--text2); font-size:24px; line-height:1; cursor:pointer;}
.cm-x:hover{color:var(--text);}
.cm-h{display:flex; align-items:center; gap:14px; margin-bottom:6px;}
.cm-h .icn{width:34px; height:34px; color:var(--text); flex:none;}
.cm-h .verb{font-family:var(--mono); font-size:11px; color:var(--accent-dim); text-transform:uppercase; letter-spacing:.08em;}
.cm-h h3{font-size:26px; letter-spacing:-.01em;}
.cm-list{margin-top:12px;}
.cm-a{padding:15px 0; border-top:1px solid var(--line);}
.cm-a .cm-top{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;}
.cm-a .a{font-family:var(--mono); font-size:14px; color:var(--text); font-weight:500;}
.cm-a .q{font-family:var(--mono); font-size:12.5px; color:var(--accent-dim);}
.cm-a p{color:var(--text2); font-size:14px; margin:7px 0 0; line-height:1.55;}

/* v0.14 — cartographie : radar (collant) à gauche, les 8 domaines toujours
   affichés à droite ; au survol, la fiche se déplie (mini-chapitre) + le nœud
   correspondant s'allume sur le radar. */
.carto-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:46px; align-items:start;}
.carto-wrap .carto{position:sticky; top:88px; max-width:none; margin:0;}
.carto-right{display:flex; flex-direction:column;}
.carto-list{display:flex; flex-direction:column;}
/* Les rangées ne changent jamais de taille : aucun décalage au survol. */
.cx{display:flex; align-items:baseline; gap:12px; padding:13px 14px; border-top:1px solid var(--line);
  border-left:2px solid transparent; cursor:default; transition:background .2s var(--ease), border-color .2s;}
.cx:first-child{border-top:0;}
.cx:focus{outline:none;}
.cx-code{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em; color:var(--accent-dim);
  border:1px solid var(--line); border-radius:4px; padding:2px 7px; flex:none;}
.cx-nm{font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--text); transition:color .18s;}
.cx-verb{margin-left:auto; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--text3); transition:color .18s;}
.cx.on{background:color-mix(in srgb,var(--accent) 7%, transparent); border-left-color:var(--accent);}
.cx.on .cx-nm{color:var(--accent-dim);}
.cx.on .cx-verb{color:var(--text2);}
/* Panneau à hauteur fixe : le mini-chapitre change à l'intérieur, rien ne bouge. */
.cx-panel{margin-top:22px; height:190px; padding:22px 24px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; justify-content:center;}
.cx-panel .ph{display:flex; align-items:center; gap:13px; margin-bottom:12px;}
.cx-panel .ph .icn{width:28px; height:28px; color:var(--text); flex:none;}
.cx-panel .ph .nm{font-size:20px; font-weight:600; letter-spacing:-.01em;}
.cx-panel .ph .verb{margin-left:auto; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--accent-dim);}
.cx-panel .desc{color:var(--text2); font-size:14px; line-height:1.6; margin:0;}
/* Radar illustratif : non interactif (piloté par la liste), il s'allume en écho. */
.cnode{pointer-events:none;}
.cnode.active .nd{stroke:var(--accent); fill:color-mix(in srgb,var(--accent) 16%, var(--surface2)); stroke-width:2;}
.cnode.active .lab{fill:var(--text);}
.cnode.active .code{fill:var(--text);}
@media(max-width:820px){
  .carto-wrap{grid-template-columns:1fr; gap:22px;}
  .carto-wrap .carto{position:static; max-width:400px; margin:0 auto;}
  .cx-panel{height:auto; min-height:150px;}
}

/* v0.13 — Cabinet : récit d'origine designé */
.story{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start;}
.story .lead{font-size:clamp(23px,2.9vw,33px); font-weight:600; letter-spacing:-.02em; line-height:1.22; color:var(--text); margin:0;}
.story-body p{color:var(--text2); font-size:16px; margin:0 0 16px;}
.story-body p:last-of-type{margin-bottom:0;}
.sig{margin-top:22px; padding-top:16px; border-top:1px solid var(--line);}
.sig .name{font-family:"IBM Plex Serif",Georgia,serif; font-style:italic; font-size:19px; color:var(--text);}
.sig .role{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text3); margin-top:5px;}
@media(max-width:760px){ .story{grid-template-columns:1fr; gap:22px;} }

/* v0.13 — tuiles techno : icônes un peu plus petites */
.tile .icn{width:25px; height:25px;}

/* v0.13 — Contact : plus clean et aéré */
.contact-cols{gap:56px;}
.contact-cols .form-grid{gap:22px;}
.contact-cols .field input,.contact-cols .field textarea,.contact-cols .field select{padding:13px 15px;}
.aside .blk{padding-top:18px; margin-bottom:30px;}
.aside .blk h3{font-size:18px;}

/* =====================================================================
   v0.14 — lisibilité (footer · nav · labels) · lime cohérent ·
           flux matriciel · easter egg · bandeau cookies
   ===================================================================== */

/* ---- Fond clair en GRIS (plus foncé que le crème) + lime VIF sur les traits,
   bordures et mires. Les textes de label restent en gris très foncé (lisibles).
   S'applique aux panneaux .paper et, en négatif, aux .ink devenus clairs. */
.paper, [data-theme="light"] .ink{
  --bg:#eae7df; --surface:#f3f0ea; --surface2:#dcd8cd; --line:#c9c5b8;
  --text:#16150f; --text2:#4d4a40; --text3:#7c7869;
  --accent:#d4ff3a; --accent-dim:#3a3a30; --eye:#33332b; --motif-soft:rgba(0,0,0,.055);
}
/* En négatif, un panneau .paper devient sombre : lime vif sur fond sombre.
   Gris de texte remontés pour être bien lisibles sur le noir. */
[data-theme="light"] .paper{
  --bg:#050505; --surface:#0c0c0d; --surface2:#16161a; --line:#26262c;
  --text:#fafaf7; --text2:#9a9aa3; --text3:#74747e;
  --accent:#d4ff3a; --accent-dim:#a3c722; --eye:#d4ff3a; --motif-soft:rgba(255,255,255,.10);
}
/* Accent italique de titre : olive foncé lisible sur gris, lime vif sur sombre. */
.paper .li,[data-theme="light"] .ink .li{ color:#2f3a10; }
[data-theme="light"] .paper .li{ color:#d4ff3a; }
/* Points d'accent dans les icônes SVG : olive foncé sur les tuiles claires. */
.paper .icn svg [fill="#d4ff3a"],[data-theme="light"] .ink .icn svg [fill="#d4ff3a"]{ fill:#4f6d0a; }
.paper .icn svg [stroke="#d4ff3a"],[data-theme="light"] .ink .icn svg [stroke="#d4ff3a"]{ stroke:#4f6d0a; }
/* Le bouton primaire garde le lime vif + texte sombre sur les deux thèmes. */
.btn.primary{ background:#d4ff3a; border-color:#d4ff3a; color:#0c0c0d; }
.btn.primary:hover{ background:#bdea2c; border-color:#bdea2c; }

/* ---- Nav d'en-tête : un cran de contraste en plus ---- */
nav.main a{ color:var(--text); opacity:.7; }
nav.main a:hover,nav.main a.active,nav.main a.opt.active{ opacity:1; }
.nav-cta{ opacity:1; }

/* ---- Footer plus lisible (texte + poids) ---- */
footer{ color:var(--text2); }
footer .sig{ color:var(--text); font-weight:400; }
.foot-links a,.foot-meta,.legal-links a{ color:var(--text2); font-weight:400; }
.foot-links a:hover,.legal-links a:hover{ color:var(--text); }

/* ---- Logo d'en-tête : à hauteur du viseur, un peu plus grand ---- */
.bar .logo{ height:28px; }
.bar .vf svg{ width:28px; height:28px; }

/* ---- Cabinet : tuiles techno, icônes nettement plus petites ----
   (.icn est un <span> inline : sans display:block, la largeur était ignorée
   et le SVG remplissait toute la tuile) */
.tile .icn{ display:block; width:20px; height:20px; margin-bottom:16px; }
.tile{ padding:24px 22px; }

/* =====================================================================
   Flux matriciel (accueil) : le bruit du marché se recompose en décision
   ===================================================================== */
.matrix{position:relative; overflow:hidden; border:1px solid #26262c; border-radius:12px;
  background:radial-gradient(130% 100% at 50% -10%,#101013,#060607 70%);
  min-height:360px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 24px 70px rgba(0,0,0,.5);}
.mx-rain{position:absolute; inset:0; display:flex; overflow:hidden; pointer-events:none;
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 62%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 62%,transparent);}
.mx-col{flex:1 0 auto; font-family:var(--mono); font-size:14px; line-height:1.32;
  text-align:center; white-space:pre-line; color:rgba(212,255,58,.32);
  animation:mxfall linear infinite; will-change:transform;}
.mx-col b{color:#d4ff3a; font-weight:400; text-shadow:0 0 8px rgba(212,255,58,.7);}
@keyframes mxfall{from{transform:translateY(-52%);} to{transform:translateY(0);}}
.mx-read{position:relative; z-index:2; text-align:center; min-width:min(340px,80%);
  padding:26px 30px; background:rgba(6,6,7,.62); backdrop-filter:blur(2px);
  border:1px solid #24242a; border-radius:10px;}
.mx-line{font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:#7f7f88; margin:0 0 11px; min-height:1.1em; transition:color .3s;}
.mx-line .ck{color:#3a3a42; margin-right:9px;}
.mx-line.done{color:#c9c9cf;}
.mx-line.done .ck{color:#d4ff3a;}
.mx-verdict{margin-top:16px; padding-top:16px; border-top:1px solid #1f1f24;}
.mx-verdict .go{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans);
  font-weight:700; font-size:19px; letter-spacing:.03em; color:#5fd97a;
  opacity:0; transform:translateY(6px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.mx-verdict.on .go{opacity:1; transform:none;}
.matrix-wrap{max-width:620px; margin:0 auto;}
@media(prefers-reduced-motion:reduce){ .mx-col{animation:none;} }

/* =====================================================================
   Easter egg : Blackformance ⇄ Whiteformance (juste pour rigoler)
   ===================================================================== */
.ee-name{cursor:pointer; transition:color .2s;}
.ee-name:hover{color:var(--accent-dim);}

/* =====================================================================
   Curseur viseur : au repos, le curseur se transforme en mire
   ===================================================================== */
.vf-cursor{position:fixed; left:0; top:0; width:44px; height:44px; margin:-22px 0 0 -22px;
  pointer-events:none; z-index:400; color:#d4ff3a; opacity:0; will-change:transform;
  transition:opacity .22s var(--ease), width .22s var(--ease), height .22s var(--ease);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.55));}
.vf-cursor svg{display:block; width:100%; height:100%;}
.vf-cursor .rc{transform-box:fill-box; transform-origin:center; animation:lockon 3.2s var(--ease) infinite;}
.vf-cursor.show{opacity:.92;}
body.vf-idle{cursor:none;}
@media(pointer:coarse){ .vf-cursor{display:none;} }
@media(prefers-reduced-motion:reduce){ .vf-cursor .rc{animation:none;} }

/* =====================================================================
   Bandeau cookies (fenêtre, pas une page) + fenêtre de réglages
   ===================================================================== */
.ck-banner{position:fixed; left:0; right:0; bottom:0; z-index:300;
  transform:translateY(130%); transition:transform .45s var(--ease);
  background:#0a0a0b; border-top:1px solid #2b2b31; color:#d7d7db;
  box-shadow:0 -18px 50px rgba(0,0,0,.5);}
.ck-banner.show{transform:none;}
.ck-in{max-width:var(--maxw); margin:0 auto; padding:18px 28px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.ck-ico{flex:none; color:#d4ff3a;}
.ck-ico svg{display:block; width:26px; height:26px;}
.ck-txt{flex:1; min-width:250px; font-family:var(--sans); font-size:13.5px; line-height:1.55; color:#a6a6ae;}
.ck-txt b{display:block; font-size:14px; font-weight:600; letter-spacing:.02em; color:#fafaf7; margin-bottom:4px; font-family:var(--mono); text-transform:uppercase;}
.ck-txt a{color:#d4ff3a; border-bottom:1px solid rgba(212,255,58,.4);}
.ck-acts{display:flex; gap:12px; flex-wrap:wrap;}
.ck-btn{font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; padding:11px 20px;
  border-radius:4px; cursor:pointer; border:1px solid #34343b; background:transparent;
  color:#d7d7db; transition:.15s; white-space:nowrap;}
.ck-btn:hover{border-color:#5a5a64; color:#fff;}
.ck-btn.primary{background:#d4ff3a; color:#050505; border-color:#d4ff3a; font-weight:600;}
.ck-btn.primary:hover{background:#bdea2c; border-color:#bdea2c; color:#050505;}
@media(max-width:640px){ .ck-in{gap:16px;} .ck-acts{width:100%;} .ck-btn{flex:1;} }

.ck-modal{position:fixed; inset:0; z-index:320; display:none; align-items:center; justify-content:center; padding:24px;}
.ck-modal.open{display:flex;}
.ck-back{position:absolute; inset:0; background:rgba(0,0,0,.66); backdrop-filter:blur(3px);}
.ck-card{position:relative; width:100%; max-width:560px; max-height:86vh; overflow:auto;
  background:#0a0a0b; border:1px solid #26262c; border-radius:12px; padding:28px 30px 24px;
  color:#e8e8ea; box-shadow:0 30px 90px rgba(0,0,0,.6);}
.ck-x{position:absolute; top:14px; right:18px; background:transparent; border:0; color:#8a8a94;
  font-size:24px; line-height:1; cursor:pointer;}
.ck-x:hover{color:#fafaf7;}
.ck-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#d4ff3a; margin:0 0 8px;}
.ck-card h3{font-family:var(--sans); font-size:23px; letter-spacing:-.01em; color:#fafaf7; margin:0 0 6px;}
.ck-card .intro{font-family:var(--sans); font-size:13.5px; line-height:1.55; color:#8a8a94; margin:0 0 18px; max-width:52ch;}
.ck-card .intro a{color:#d4ff3a; border-bottom:1px solid rgba(212,255,58,.4);}
.ck-cat{display:flex; gap:18px; align-items:flex-start; padding:16px 0; border-top:1px solid #1f1f24;}
.ck-cat .info{flex:1;}
.ck-cat .nm{font-family:var(--sans); font-size:15px; font-weight:600; color:#fafaf7;}
.ck-cat .de{font-family:var(--sans); font-size:13px; line-height:1.5; color:#8a8a94; margin-top:5px;}
.ck-sw{position:relative; width:44px; height:25px; flex:none; margin-top:2px;}
.ck-sw input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1;}
.ck-sw .track{position:absolute; inset:0; background:#26262c; border:1px solid #34343b; border-radius:99px; transition:.2s;}
.ck-sw .track::after{content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#8a8a94; transition:.2s;}
.ck-sw input:checked + .track{background:rgba(212,255,58,.22); border-color:rgba(212,255,58,.55);}
.ck-sw input:checked + .track::after{background:#d4ff3a; transform:translateX(19px);}
.ck-sw input:disabled{cursor:not-allowed;}
.ck-sw input:disabled + .track{opacity:.55;}
.ck-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; padding-top:20px; border-top:1px solid #1f1f24;}
.ck-actions .ck-btn{flex:1; text-align:center; justify-content:center;}
@media(max-width:520px){ .ck-actions{flex-direction:column;} }

/* =====================================================================
   v0.14c — Expertise : les 8 domaines forment un anneau autour du cercle
   (grille 3×3, cartographie au centre). Au survol d'une carte OU de son nœud,
   la carte grandit fortement pour se lire, et le nœud s'allume.
   ===================================================================== */
.xp-ring{position:relative; display:grid;
  grid-template-columns:1fr minmax(300px,420px) 1fr;
  grid-template-areas:"cn mk of" "co circle fo" "de op ac";
  gap:16px 18px; align-items:center; justify-items:stretch;}
.xp-ring .xp-carto{grid-area:circle; align-self:center; z-index:1;}
.xp-carto svg{display:block; width:100%; height:auto; overflow:visible;}
.dom-card{background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; box-shadow:var(--shadow); min-height:150px; display:flex; flex-direction:column;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .18s, background .18s;}
/* Survol de la carte ou de son nœud (.hot) : mise en avant sobre (pas de zoom). */
.dom-card:hover,.dom-card:focus-within,.dom-card.hot{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%, var(--surface));
  transform:translateY(-3px); z-index:2; box-shadow:0 12px 30px rgba(0,0,0,.12); outline:none;}
.dom-card .dc-h{display:flex; align-items:center; gap:12px; margin-bottom:11px;}
.dom-card .dc-h .icn{display:block; width:26px; height:26px; color:var(--text); flex:none;}
.dom-card .dc-nm{font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--text);}
.dom-card .dc-verb{margin-left:auto; font-family:var(--mono); font-size:9.5px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--text3);}
.dom-card .dc-desc{color:var(--text2); font-size:13.5px; line-height:1.55; margin:0;}
/* Nœuds du cercle rendus interactifs (pilotent aussi l'agrandissement). */
.xp-ring .cnode{pointer-events:auto; cursor:pointer;}
@media(max-width:820px){
  .xp-ring{display:flex; flex-direction:column; gap:14px;}
  .xp-ring .xp-carto{order:-1; max-width:330px; margin:0 auto 6px; align-self:center;}
  .dom-card:hover,.dom-card:focus-within,.dom-card.hot{transform:none;}
}

/* v0.14c — petites icônes sur les étapes de la méthode (accueil) */
.step .s-ico{display:block; width:24px; height:24px; color:var(--text); margin-bottom:15px;}
.step .s-ico svg{display:block; width:100%; height:100%;}

/* =====================================================================
   v0.15 — flux de processus, domaines lisibles/non cliquables, notion de
   grandeur des tiers, centre d'Expertise discret, verdict en lime.
   ===================================================================== */

/* ---- Processus : cartes reliées par des flèches avec un flux animé ---- */
.process{display:flex; align-items:stretch; gap:6px;}
.process > .step, .process > .tile{flex:1 1 0; min-width:0;}
.p-arrow{flex:0 0 auto; align-self:center; display:flex; align-items:center; color:var(--accent-dim);}
.p-arrow svg{width:36px; height:20px; overflow:visible;}
.p-dot{fill:var(--accent);}
@keyframes p-flow{0%{transform:translateX(0);opacity:0} 12%{opacity:1} 80%{opacity:1} 100%{transform:translateX(30px);opacity:0}}
.p-dot{animation:p-flow 2.2s var(--ease) infinite;}
@media(prefers-reduced-motion:reduce){ .p-dot{animation:none;} }
@media(max-width:760px){
  .process{flex-direction:column; gap:4px;}
  .p-arrow{transform:rotate(90deg); padding:4px 0;}
}

/* ---- Domaines (accueil) : lisibles, et NON cliquables (pas d'effet survol) ---- */
.dom{cursor:default;}
.dom:hover{border-color:var(--line); transform:none;}
.dom .tx span{font-family:var(--sans); font-size:12px; letter-spacing:0; text-transform:none; color:var(--text2); margin-top:3px;}
@media(max-width:820px){ .dom-strip{grid-template-columns:repeat(2,1fr);} }

/* ---- Trois profondeurs : barres ascendantes = petit / moyen / grand ---- */
.t-size{display:flex; align-items:flex-end; gap:5px; height:22px; margin-bottom:16px;}
.t-size i{width:8px; border-radius:1px; background:var(--line); display:block;}
.t-size i:nth-child(1){height:9px;}
.t-size i:nth-child(2){height:15px;}
.t-size i:nth-child(3){height:22px;}
.tier.s1 .t-size i:nth-child(1){background:var(--accent);}
.tier.s2 .t-size i:nth-child(-n+2){background:var(--accent);}
.tier.s3 .t-size i{background:var(--accent);}

/* ---- Expertise : centre discret (mire) au lieu du radar ---- */
.xp-ring{grid-template-columns:1fr minmax(150px,230px) 1fr;}
.xp-carto .xp-mire{display:block; width:100%; height:auto; max-width:118px; margin:0 auto;}
.xp-mire .m-ring{fill:none; stroke:var(--line); stroke-width:1.5;}
.xp-mire .m-vf{fill:none; stroke:var(--accent-dim); stroke-width:2;}
.xp-mire .m-dot{fill:var(--accent); transform-box:fill-box; transform-origin:center; animation:lockon 3.2s var(--ease) infinite;}
@media(prefers-reduced-motion:reduce){ .xp-mire .m-dot{animation:none;} }

/* ---- Verdict du flux matriciel : lime (au lieu du vert) ---- */
.mx-verdict .go{color:#d4ff3a;}

/* v0.15 — date de mise à jour en tête des pages légales */
.prose .doc-date{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--text3);
  margin:0 0 26px; padding-bottom:16px; border-bottom:1px solid var(--line);}

/* =====================================================================
   v0.16 — processus en chevrons (flèches) + centre logique de l'Expertise
   ===================================================================== */

/* ---- Chevrons : chaque étape est une flèche, avec un léger espace ---- */
.process.chev{display:flex; align-items:stretch; gap:8px;}
.process.chev > .step, .process.chev > .tile{
  flex:1 1 0; min-width:0; background:var(--surface2); border:0; box-shadow:none;
  padding:24px 44px 24px 46px;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
}
.process.chev > :first-child{
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  padding-left:26px;
}
.process.chev .bkt::before, .process.chev .bkt::after{display:none;}
.process.chev .step .n, .process.chev .tile h3{position:relative;}
@media(max-width:760px){
  .process.chev{flex-direction:column; gap:6px;}
  .process.chev > .step, .process.chev > .tile,
  .process.chev > :first-child{
    padding:22px 24px 34px;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px));
  }
}

/* ---- Centre de l'Expertise : la décision, point de convergence ---- */
.xp-center{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;}
.xp-center .xp-mire{max-width:90px;}
.xp-c-lbl{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dim);}
.xp-c-sub{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--text3);}

/* =====================================================================
   v0.17 — ÉCHELLE TYPO CENTRALISÉE (source unique) + fond clair plus gris
   + chevrons avec relief + gris des widgets plus lisibles
   ===================================================================== */

/* ---- Tokens de taille de texte : à régler ICI, s'appliquent partout ---- */
:root{
  --fs-eyebrow:11.5px;   /* eyebrows // */
  --fs-label:11px;       /* micro-labels mono (verbe, code, niveau) */
  --fs-meta:13px;        /* méta secondaire */
  --fs-body:15.5px;      /* TOUTES les descriptions de cartes/blocs */
  --fs-lead:18px;        /* chapeaux */
  --fs-h3:20px;          /* titres de cartes */
}

/* ---- Descriptions unifiées (même taille partout) ---- */
.step p, .tile p, .dom-card .dc-desc, .why .item p, .tier p, .aside .blk p,
.generic .g p, .card-fam .desc{ font-size:var(--fs-body); line-height:1.55; }
/* ---- Titres de cartes unifiés ---- */
.step h3, .tile h3, .dom-card .dc-nm, .tier h3, .aside .blk h3{ font-size:var(--fs-h3); }
/* ---- Chapeaux / lede unifiés ---- */
.sec-head p, .page-hero p.lede, .hero p.lede{ font-size:var(--fs-lead); }

/* ---- Fond clair : gris neutre (moins crème), pour faire ressortir le lime ---- */
.paper, [data-theme="light"] .ink{
  --bg:#dcdbd5; --surface:#e8e7e1; --surface2:#cdccc4; --line:#b8b7ae;
  --text:#161614; --text2:#494940; --text3:#79776c;
}

/* ---- Chevrons : un peu de relief (dégradé + ombre portée), moins plats ---- */
.process.chev > .step, .process.chev > .tile{
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface2) 78%, #fff) 0%, var(--surface2) 100%);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.14));
}
[data-theme="dark"] .ink .process.chev > .tile, .ink .process.chev > .tile{
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface2) 68%, #fff) 0%, var(--surface2) 100%);
}
.process.chev .step h3{ margin-top:8px; }

/* ---- Widgets sombres : gris trop foncés remontés (lisibles sur noir) ---- */
.flux .c-foot, .mini .m-foot, .constel .c-foot{ color:#96969f; }
.flux .c-foot b, .mini .m-foot b, .constel .c-foot b{ color:#cbcbd1; }
.sim .sub, .sim-x, .sim-cost .lab, .sim-top{ color:#8b8b95; }
.silo .lab, .silo .pv{ color:#a6a6ae; }

/* v0.17 — page 404 */
.err{position:relative; overflow:hidden; min-height:calc(100vh - 160px); display:flex; align-items:center;}
.err .inner{position:relative; z-index:1; max-width:640px; margin:0 auto; text-align:center; padding:80px 0;}
.err-mire{display:inline-block; width:72px; height:72px; color:var(--text); margin-bottom:6px;}
.err-mire svg{display:block; width:100%; height:100%;}
.err-mire .core{transform-box:fill-box; transform-origin:center; animation:lockon 3.2s var(--ease) infinite;}
.err h1{font-size:clamp(32px,5vw,54px); margin-top:8px;}
.err .cta-row{justify-content:center;}
@media(prefers-reduced-motion:reduce){ .err-mire .core{animation:none;} }

/* =====================================================================
   v0.18 — chevrons sans dégradé (plus contrastés, en-tête groupé) ·
   registre des domaines (index éditorial disruptif) · compteurs à suffixe ·
   panneau Contact en terminal sombre
   ===================================================================== */

/* ---- Chevrons : fond plat, sans bordure ni ombre, nettement contrasté ---- */
.process.chev > .step, .process.chev > .tile{
  background:var(--surface2); border:0; box-shadow:none; filter:none;
}
/* clair : puce sensiblement plus sombre que le fond */
.paper .process.chev > .step, .paper .process.chev > .tile,
[data-theme="light"] .ink .process.chev > .step, [data-theme="light"] .ink .process.chev > .tile{
  background:#bebdb2;
}
/* sombre : puce sensiblement plus claire que le fond */
[data-theme="dark"] .ink .process.chev > .step, [data-theme="dark"] .ink .process.chev > .tile,
.ink .process.chev > .step, .ink .process.chev > .tile{
  background:#1d1d23;
}
/* En-tête du chevron : icône + label sur une même ligne (plus « nu ») */
.process.chev .s-top{display:flex; align-items:center; gap:11px; margin-bottom:14px;}
.process.chev .s-top > .icn, .process.chev .s-top > .s-ico{
  display:block; width:20px; height:20px; margin:0; flex:none; color:var(--text);
}
.process.chev .s-top .n{margin:0; font-family:var(--mono); font-size:var(--fs-label);
  letter-spacing:.12em; color:var(--accent-dim);}
.process.chev .s-top h3{margin:0; font-size:var(--fs-h3);}
.process.chev .step h3{margin:0 0 8px;}
.process.chev .step p, .process.chev .tile p{margin:0;}

/* ---- Registre des domaines : un index éditorial, une ligne par domaine ---- */
.dom-index{border-top:1px solid var(--line); margin-top:4px;}
.dom-index .dom-row{position:relative; display:grid; align-items:center;
  border-bottom:1px solid var(--line); transition:background .25s ease; outline:none;}
.dom-index .dom-row::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent); transform:scaleY(0); transform-origin:top;
  transition:transform .3s var(--ease);}
.dom-index .dom-row:hover::before, .dom-index .dom-row:focus-within::before{transform:scaleY(1);}
.dom-index .dom-row:hover, .dom-index .dom-row:focus-within{background:var(--surface);}
.dr-code{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--accent-dim);}
.dr-nm{font-weight:600; letter-spacing:-.02em; color:var(--text); transition:transform .3s var(--ease);}
.dom-index .dom-row:hover .dr-nm, .dom-index .dom-row:focus-within .dr-nm{transform:translateX(4px);}
.dr-gl{color:var(--text2); font-size:var(--fs-body);}
.dr-ct{font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--text3);
  text-transform:uppercase; text-align:right; white-space:nowrap;}
.dr-ct i{font-style:normal;}

/* Version compacte (Accueil) : code · nom · glose · compte */
.dom-index:not(.xp) .dom-row{grid-template-columns:56px minmax(150px,auto) 1fr auto;
  gap:24px; padding:20px 16px;}
.dom-index:not(.xp) .dr-nm{font-size:clamp(22px,2.6vw,32px);}

/* Version détaillée (Expertise) : index · code · nom+verbe+desc · compte */
.dom-index.xp .dom-row{grid-template-columns:40px 44px 1fr minmax(96px,auto);
  gap:22px; padding:24px 16px; align-items:start;}
.dom-index.xp .dr-ix{font-family:var(--mono); font-size:12px; color:var(--text3); padding-top:8px;}
.dom-index.xp .dr-code{padding-top:8px;}
.dr-main .dr-h{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px;}
.dom-index.xp .dr-nm{font-size:clamp(24px,3vw,36px);}
.dr-verb{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dim);}
.dom-index.xp .dr-desc{color:var(--text2); font-size:var(--fs-body); line-height:1.55; margin:0; max-width:64ch;}
.dom-index.xp .dr-ct{padding-top:12px;}
.dom-index.xp .dr-ct b{display:block; font-size:24px; color:var(--text); font-weight:600; letter-spacing:-.02em;}

/* Ligne de convergence sous le registre */
.dom-foot{display:flex; align-items:center; justify-content:center; gap:12px; text-align:center;
  margin:34px auto 0; font-size:var(--fs-body); color:var(--text2);}
.dom-foot .df-mire{display:inline-flex; width:26px; height:26px; color:var(--text); flex:none;}
.dom-foot .df-mire svg{width:100%; height:100%;}
.dom-foot b{color:var(--text); font-weight:600;}

@media(max-width:680px){
  .dom-index:not(.xp) .dom-row{grid-template-columns:48px 1fr; gap:4px 16px; padding:16px 12px;}
  .dom-index:not(.xp) .dr-code{grid-row:1 / 3; align-self:center;}
  .dom-index:not(.xp) .dr-ct{grid-column:2; text-align:left;}
  .dom-index.xp .dom-row{grid-template-columns:40px 1fr; gap:4px 14px; padding:18px 12px;}
  .dom-index.xp .dr-ix{display:none;}
  .dom-index.xp .dr-code{grid-row:1 / 3; padding-top:0; align-self:start;}
  .dom-index.xp .dr-ct{grid-column:1 / 3; text-align:left; padding-top:8px;}
  .dom-index.xp .dr-ct b{display:inline; font-size:16px; margin-right:6px;}
}

/* ---- Contact : aside en panneau terminal sombre (cohérent avec les widgets) ---- */
.aside{background:#0b0b0c; border:1px solid #2c2c34; border-radius:14px;
  padding:22px 24px 18px; color:#fafaf7; align-self:start; position:relative; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.28);}
.aside .a-top{display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#8b8b95; padding-bottom:14px; margin-bottom:2px; border-bottom:1px solid #202027;}
.aside .a-top .run{display:inline-flex; align-items:center; gap:7px; color:#d4ff3a;}
.aside .a-top .run .dot{width:6px; height:6px; border-radius:50%; background:#d4ff3a; animation:blink 1.1s steps(1) infinite;}
.aside .blk{border-top:1px solid #202027; padding:16px 0 0; margin:0;}
.aside .blk .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#d4ff3a;}
.aside .blk h3{color:#fafaf7; font-size:17px; margin:8px 0 6px;}
.aside .blk p{color:#9a9aa3; font-size:14px; margin:0;}
.aside .blk a{color:#fafaf7; border-bottom:1px solid #33333a;}
.aside .blk a:hover{color:#d4ff3a; border-color:#d4ff3a;}
.aside .a-foot{display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:#6a6a73;
  border-top:1px solid #202027; margin-top:18px; padding-top:14px;}
.aside .a-foot b{color:#a6a6ae;}
@media(prefers-reduced-motion:reduce){ .aside .a-top .run .dot{animation:none;} }

/* =====================================================================
   v0.18b — navigation mobile standard (bouton menu + panneau déroulant)
   Le bouton .nav-toggle est injecté par app.js ; il apparaît < 680px.
   ===================================================================== */
.nav-toggle{display:none;}

@media(max-width:680px){
  /* Bouton hamburger */
  .nav-toggle{display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:40px; padding:0 10px; background:transparent;
    border:1px solid var(--line); border-radius:9px; cursor:pointer; flex:none;}
  .nav-toggle span{display:block; height:1.5px; width:100%; background:var(--text);
    transition:transform .25s var(--ease), opacity .2s;}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  /* La barre : marque à gauche, hamburger à droite */
  .bar{gap:12px;}

  /* nav.main devient un panneau déroulant plein largeur sous le header */
  nav.main{position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(0,0,0,.28);
    padding:6px 0 14px; transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s var(--ease);
    max-height:calc(100vh - 66px); overflow:auto; z-index:49;}
  body.nav-open nav.main{opacity:1; transform:none; pointer-events:auto;}

  /* Liens : pleine largeur, réaffichés */
  nav.main .opt{display:block;}
  nav.main a{margin-left:0; padding:15px 28px; font-size:15px; letter-spacing:.02em;
    color:var(--text2); border-bottom:1px solid var(--line);}
  nav.main a:last-of-type{border-bottom:0;}
  nav.main a.active,nav.main a.opt.active{color:var(--text); padding-bottom:15px; position:relative;}
  nav.main a.active{border-bottom:1px solid var(--line);}
  nav.main a.active::before{content:""; position:absolute; left:0; top:12px; bottom:12px;
    width:3px; background:var(--accent);}
  .nav-cta{color:var(--accent-dim)!important;}

  /* Outils (langue + négatif) en bas du panneau */
  .tools{margin-left:0; padding:16px 28px 4px; gap:16px; justify-content:flex-start;}
}