/* Layout: lignes de transport. Bandes pleine largeur, contenu 1180px, sections claires alternées, bandes obsidienne pour l'ouverture et la formule. */
:root{
  --bg:#FFFFFF; --surface:#F2F6F4; --ink:#071A17; --muted:#4B5F59; --line:#DAE4E0;
  --emerald:#00C896; --emerald-ink:#007A5A; --gold:#C59B27; --gold-ink:#8A6A12;
  --band:#071A17; --band-2:#0C2420; --band-ink:#FFFFFF; --band-muted:#A9BDB7; --band-line:#1F3B35; --band-emerald:#00E5A3;
  --btn-ink:#071A17; --todo-bg:#FBF5E4;
  --f-display:"Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-body:"Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#071A17; --surface:#0B231F; --ink:#EAF2EF; --muted:#A3B8B1; --line:#1E3A34;
    --emerald:#00E5A3; --emerald-ink:#00E5A3; --gold:#D4AA3A; --gold-ink:#D9B24A;
    --band:#03100E; --band-2:#0A201C; --band-ink:#FFFFFF; --band-muted:#A9BDB7; --band-line:#1D3A34; --band-emerald:#00E5A3;
    --btn-ink:#071A17; --todo-bg:#2A2610; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#071A17; --surface:#0B231F; --ink:#EAF2EF; --muted:#A3B8B1; --line:#1E3A34;
  --emerald:#00E5A3; --emerald-ink:#00E5A3; --gold:#D4AA3A; --gold-ink:#D9B24A;
  --band:#03100E; --band-2:#0A201C; --band-ink:#FFFFFF; --band-muted:#A9BDB7; --band-line:#1D3A34; --band-emerald:#00E5A3;
  --btn-ink:#071A17; --todo-bg:#2A2610; color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{animation:none!important; transition:none!important}}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:1.0625rem; line-height:1.6}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--bg)}
a{color:var(--emerald-ink)}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; margin:0; letter-spacing:-0.015em}
h1{font-size:clamp(2.3rem, 5vw, 4rem); font-weight:800; line-height:1.06}
h2{font-size:clamp(1.85rem, 3.4vw, 2.7rem); font-weight:800; line-height:1.12}
h3{font-size:1.2rem; font-weight:700; line-height:1.3}
p{margin:0}
.wrap{max-width:1180px; margin-inline:auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px))}
.sec{padding-block:clamp(64px, 9vw, 112px)}
.alt{background:var(--surface)}
.band{background:var(--band); color:var(--band-ink)}
.eyebrow{font-family:var(--f-mono); font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--emerald-ink); display:inline-flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--gold)}
.band .eyebrow{color:var(--band-emerald)}
.sec-head{display:flex; flex-direction:column; gap:16px; max-width:760px; margin-bottom:clamp(36px, 5vw, 56px)}
.lead{font-size:1.2rem; color:var(--muted); max-width:65ch}
.band .lead{color:var(--band-muted)}
.todo{background:var(--todo-bg); border:1px dashed var(--gold); color:var(--gold-ink); font-family:var(--f-mono); font-size:.82em; padding:.1em .45em; border-radius:4px; white-space:nowrap}

/* Boutons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:999px; background:var(--emerald); color:var(--btn-ink); font-family:var(--f-display); font-weight:700; font-size:1rem; text-decoration:none; border:2px solid var(--emerald); cursor:pointer; transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent; color:inherit; border-color:currentColor}
.btn-sm{min-height:44px; padding:0 18px; font-size:.95rem}

/* Emblème */
.em .fr{fill:none; stroke:var(--em-frame); stroke-width:26}
.em .ln{fill:none; stroke:var(--em-line); stroke-width:20; stroke-linecap:round}
.em .ring{fill:var(--em-bg)}
.em .st{fill:var(--gold)}
.em .tm{fill:var(--em-line)}

/* En-tête */
.site-head{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
.head-row{display:flex; align-items:center; gap:24px; min-height:72px; position:relative}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); --em-frame:var(--ink); --em-line:var(--emerald); --em-bg:var(--bg)}
.brand svg{width:44px; height:auto; flex-shrink:0}
.wm{font-family:var(--f-display); font-weight:800; font-size:1.45rem; letter-spacing:-0.02em; line-height:1}
.wm .moov{color:var(--emerald)}
.nav-desk{display:flex; gap:22px; margin-left:auto}
.nav-desk a, .nav-mob a{color:var(--ink); text-decoration:none; font-family:var(--f-display); font-weight:600; font-size:.95rem}
.nav-desk a:hover, .nav-mob a:hover{color:var(--emerald-ink)}
.nav-mob{display:none; margin-left:auto}
.nav-mob summary{list-style:none; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; gap:8px; padding:0 14px; border:1px solid var(--line); border-radius:999px; font-family:var(--f-display); font-weight:700}
.nav-mob summary::-webkit-details-marker{display:none}
.nav-mob nav{position:absolute; left:0; right:0; top:100%; background:var(--bg); border-bottom:1px solid var(--line); display:flex; flex-direction:column; padding-block:8px 20px; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px))}
.nav-mob nav a{padding:12px 0; border-bottom:1px solid var(--line); font-size:1.05rem}
.lang{display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 12px; border:1px solid var(--line); border-radius:999px; font-family:var(--f-mono); font-weight:500; font-size:.8rem; letter-spacing:.1em; color:var(--ink); text-decoration:none}
.lang:hover{border-color:var(--emerald); color:var(--emerald-ink)}
@media (max-width:1040px){.nav-desk{display:none} .nav-mob{display:block; margin-left:0} .head-cta{display:none} .lang{margin-left:auto}}

/* Hero */
.hero{padding-block:clamp(56px, 8vw, 104px); overflow:hidden}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(32px, 5vw, 72px); align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:24px; min-width:0}
.hero h1{color:var(--band-ink)}
.hero h1 .hl{color:var(--band-emerald)}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px}
.hero-actions .btn{--emerald:var(--band-emerald)}
.hero-sign{font-family:var(--f-mono); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--band-muted)}
.hero-sign b{color:var(--gold); font-weight:500}
.hero-art{--em-frame:var(--band-ink); --em-line:var(--band-emerald); --em-bg:var(--band); display:flex; flex-direction:column; align-items:center; gap:18px}
.hero-art svg{width:100%; max-width:440px; height:auto}
.hero-art .pulse{fill:none; stroke:var(--band-emerald); stroke-width:2; opacity:.5; transform-origin:550px 193px; animation:pulse 3.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(1); opacity:.55} 70%{transform:scale(2.1); opacity:0} 100%{opacity:0}}
.hero-art figcaption{font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--band-muted); text-align:center}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr} .hero-art svg{max-width:300px}}

/* Zones de frein */
.chips{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
.chips li{border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:8px 16px; font-weight:600; font-size:.98rem}
.alt .chips li{background:var(--bg)}
.levers{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; margin-top:48px; padding-top:32px; border-top:1px solid var(--line)}
.lever{display:flex; flex-direction:column; gap:6px; min-width:0}
.lever .k{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.lever strong{font-family:var(--f-display); font-size:1.15rem}
@media (max-width:760px){.levers{grid-template-columns:repeat(2, minmax(0,1fr))}}

/* Ligne de conviction */
.statement{font-family:var(--f-display); font-weight:700; font-size:clamp(1.3rem, 2.2vw, 1.7rem); line-height:1.35; max-width:30ch}
.metro{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr))}
.metro li{position:relative; padding:52px 20px 0 0; min-width:0}
.metro li::before{content:""; position:absolute; top:16px; left:0; right:0; height:6px; background:var(--emerald)}
.metro li:first-child::before{left:14px; border-radius:3px 0 0 3px}
.metro li:last-child::before{right:calc(100% - 16px); border-radius:0 3px 3px 0}
.metro .stop{position:absolute; top:5px; left:2px; width:28px; height:28px; border-radius:50%; background:var(--surface); border:6px solid var(--emerald); box-shadow:0 0 0 5px var(--surface)}
.metro li.fin .stop{background:var(--gold); border-color:var(--gold)}
.metro li.end .stop{background:var(--emerald); width:32px; height:32px; top:3px; left:0}
.metro .k{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.12em; color:var(--muted); text-transform:uppercase}
.metro h3{margin:6px 0 8px; font-size:1.12rem}
.metro p{color:var(--muted); font-size:.98rem}
@media (max-width:820px){
  .metro{grid-template-columns:1fr; margin-top:36px}
  .metro li{padding:0 0 28px 52px}
  .metro li::before{top:0; bottom:0; left:13px; right:auto; width:6px; height:auto; border-radius:0}
  .metro li:first-child::before{top:16px; left:13px}
  .metro li:last-child::before{bottom:auto; height:16px; right:auto}
  .metro .stop{top:2px}
  .metro li.end .stop{top:0}
}
.assemble{margin-top:56px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:32px; align-items:start; padding:32px; border-radius:var(--radius); background:var(--bg); border:1px solid var(--line)}
.assemble h3{font-size:1.3rem}
.assemble p{color:var(--muted); margin-top:10px}
@media (max-width:820px){.assemble{grid-template-columns:1fr; padding:24px}}

/* Méthode */
.steps{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px}
.step{border-top:6px solid var(--emerald); padding-top:24px; display:flex; flex-direction:column; gap:12px; min-width:0}
.step .k{font-family:var(--f-mono); font-size:.8rem; letter-spacing:.12em; color:var(--emerald-ink)}
.step h3{font-size:1.5rem}
.step p{color:var(--muted)}
.step ul{margin:4px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.step li{display:flex; gap:10px; align-items:baseline}
.step li::before{content:""; flex-shrink:0; width:8px; height:8px; border-radius:50%; border:2px solid var(--emerald); transform:translateY(-1px)}
.step.mid{border-top-color:var(--gold)}
.step.mid .k{color:var(--gold-ink)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.gate{margin-top:56px; padding:28px 32px; border-radius:var(--radius); background:var(--band); color:var(--band-ink); display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px}
.gate .g-step{font-family:var(--f-display); font-weight:700}
.gate .arrow{font-family:var(--f-mono); color:var(--band-muted)}
.gate .g-note{flex-basis:100%; color:var(--band-muted); font-size:.98rem}
.pills{display:flex; flex-wrap:wrap; gap:10px}
.pill{font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em; padding:7px 14px; border-radius:999px; border:1.5px solid}
.pill.go{background:var(--band-emerald); border-color:var(--band-emerald); color:#071A17}
.pill.cond{border-color:var(--gold); color:var(--gold)}
.pill.no{border-color:var(--band-muted); color:var(--band-muted)}

/* Engagements */
.eng{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px 48px; padding-block:32px; border-top:1px solid var(--line)}
.eng:last-child{border-bottom:1px solid var(--line)}
.eng h3{font-size:1.35rem; display:flex; gap:12px; align-items:baseline}
.eng h3::before{content:""; flex-shrink:0; width:10px; height:10px; border-radius:50%; background:var(--gold); transform:translateY(-2px)}
.eng-body{display:flex; flex-direction:column; gap:14px; color:var(--muted); min-width:0}
.trio{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg)}
.trio div{padding:14px 16px; display:flex; flex-direction:column; gap:4px; color:var(--ink); min-width:0}
.trio div + div{border-left:1px solid var(--line)}
.trio .k{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.trio strong{font-family:var(--f-display); font-size:1rem}
@media (max-width:820px){.eng{grid-template-columns:1fr} .trio{grid-template-columns:1fr} .trio div + div{border-left:0; border-top:1px solid var(--line)}}

/* Terrains */
.fields{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.field{border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:12px; background:var(--bg); min-width:0}
.field svg{width:44px; height:44px; color:var(--emerald-ink); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.field p{color:var(--muted)}
.field.cta{background:var(--band); color:var(--band-ink); border-color:var(--band)}
.field.cta p{color:var(--band-muted)}
.field.cta .btn{--emerald:var(--band-emerald); align-self:flex-start; margin-top:auto}
@media (max-width:980px){.fields{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:620px){.fields{grid-template-columns:1fr}}

/* Pour qui */
.audiences{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px}
.aud{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:28px 30px; display:flex; flex-direction:column; gap:14px; min-width:0}
.aud .k{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--emerald-ink)}
.aud ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; color:var(--muted)}
.aud li{display:flex; gap:12px; align-items:baseline}
.aud li::before{content:""; flex-shrink:0; width:14px; height:3px; background:var(--emerald); transform:translateY(-4px)}
.aud.fin .k{color:var(--gold-ink)}
.aud.fin li::before{background:var(--gold)}
@media (max-width:820px){.audiences{grid-template-columns:1fr}}

/* Positionnement */
.not-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px 64px; align-items:start}
.nots{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.nots li{display:flex; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); font-family:var(--f-display); font-weight:700; font-size:1.2rem}
.nots li:first-child{border-top:1px solid var(--line)}
.nots .x{flex-shrink:0; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--muted); display:grid; place-items:center; font-family:var(--f-mono); font-size:.95rem; color:var(--muted)}
.nots .ni{color:var(--muted); font-weight:600}
.not-after{margin-top:28px; display:flex; flex-direction:column; gap:16px; color:var(--muted)}
.not-after strong{color:var(--ink); font-family:var(--f-display); font-size:1.15rem; line-height:1.45}
@media (max-width:860px){.not-grid{grid-template-columns:1fr}}

/* Formule */
.formule{padding-block:clamp(72px, 10vw, 128px)}
.formule blockquote{margin:24px 0 0; font-family:var(--f-display); font-weight:700; font-size:clamp(1.55rem, 3.2vw, 2.55rem); line-height:1.3; letter-spacing:-0.01em; max-width:34ch}
.formule .e{color:var(--band-emerald)}
.formule .g{color:var(--gold)}

/* À propos */
.about{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:start}
.about-copy{display:flex; flex-direction:column; gap:18px; color:var(--muted)}
.about-copy h3{color:var(--ink); margin-top:12px}
.founder{border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:16px; background:var(--surface)}
.founder-top{display:flex; gap:16px; align-items:center}
.avatar{width:64px; height:64px; border-radius:50%; background:var(--band); color:var(--band-ink); display:grid; place-items:center; font-family:var(--f-display); font-weight:800; font-size:1.3rem; flex-shrink:0; border:3px solid var(--gold)}
.founder .role{font-family:var(--f-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--emerald-ink)}
.founder p{color:var(--muted)}
@media (max-width:860px){.about{grid-template-columns:1fr}}

/* FAQ */
.faq{display:flex; flex-direction:column; max-width:860px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; font-family:var(--f-display); font-weight:700; font-size:1.12rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--f-mono); font-size:1.3rem; color:var(--emerald-ink); flex-shrink:0}
.faq details[open] summary::after{content:"−"}
.faq .ans{padding:0 0 24px; color:var(--muted); max-width:65ch}

/* Contact */
.contact{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:start}
.coords{display:flex; flex-direction:column; gap:14px; margin-top:28px}
.coord{display:flex; flex-direction:column; gap:4px; padding:16px 18px; border:1px solid var(--line); border-radius:12px}
.coord .k{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.coord-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.coord-row span, .coord-row a{font-family:var(--f-display); font-weight:700; font-size:1.05rem; color:var(--ink); user-select:all; overflow-wrap:anywhere}
.coord-row a{user-select:auto; text-decoration-color:var(--emerald)}
.copy{min-height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-family:var(--f-mono); font-size:.75rem; cursor:pointer}
.copy:hover{border-color:var(--emerald)}
form.cf{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px, 4vw, 36px); display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px}
.fld{display:flex; flex-direction:column; gap:6px; min-width:0}
.fld.full{grid-column:1 / -1}
.fld label{font-family:var(--f-display); font-weight:600; font-size:.95rem}
.fld input, .fld select, .fld textarea{font:inherit; font-size:1rem; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; min-height:48px; width:100%}
.fld textarea{min-height:140px; resize:vertical}
.fld input:focus, .fld select:focus, .fld textarea:focus{border-color:var(--emerald)}
.cf .btn{justify-self:start}
.cf .fine{grid-column:1 / -1; font-size:.88rem; color:var(--muted)}
.result{grid-column:1 / -1; border:1px solid var(--emerald); border-radius:12px; padding:18px; background:var(--bg); display:flex; flex-direction:column; gap:12px}
.result pre{margin:0; white-space:pre-wrap; font-family:var(--f-mono); font-size:.85rem; color:var(--ink); max-height:240px; overflow:auto}
.result-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
@media (max-width:560px){form.cf{grid-template-columns:1fr}}

/* Pied de page */
.foot{padding-block:64px 32px}
.foot-grid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2, minmax(0,1fr)); gap:40px}
.foot .brand{color:var(--band-ink); --em-frame:var(--band-ink); --em-line:var(--band-emerald); --em-bg:var(--band)}
.foot .wm .moov{color:var(--band-emerald)}
.foot-sign{margin-top:14px; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--band-muted)}
.foot-sign b{color:var(--gold); font-weight:500}
.foot h4{margin:0 0 14px; font-family:var(--f-mono); font-weight:500; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--band-muted)}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.foot a{color:var(--band-ink); text-decoration:none}
.foot a:hover{color:var(--band-emerald)}
.legal{margin-top:48px; border-top:1px solid var(--band-line); padding-top:20px; display:flex; flex-direction:column; gap:4px}
.legal details summary{cursor:pointer; padding:10px 0; font-family:var(--f-display); font-weight:600; color:var(--band-ink)}
.legal .ldoc{padding:4px 0 18px; color:var(--band-muted); font-size:.95rem; display:flex; flex-direction:column; gap:10px; max-width:75ch}
.legal .todo{background:transparent; color:var(--gold)}
.copyright{margin-top:24px; color:var(--band-muted); font-size:.88rem}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}