/* ============================================================
   mm-origin - feuille de style
   Typo : TWK Lausanne seule (300 / 400 / 600), titres en 600.
   Palette « Mur bleu » : un seul bleu (#0A18B7, le mur), un vert vif,
   une menthe, un blanc froid. Le vert ne sert jamais de couleur de texte courant.
   ============================================================ */

@font-face { font-family:'TWK Lausanne'; font-weight:300; src:url('fonts/TWKLausanne-300.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'TWK Lausanne'; font-weight:400; src:url('fonts/TWKLausanne-400.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'TWK Lausanne'; font-weight:600; src:url('fonts/TWKLausanne-600.woff2') format('woff2'); font-display:swap; }

:root {
  --night:   #0A18B7;   /* le mur : hero, process, footer */
  --night-2: #050F86;   /* le mur dans l'ombre : L'offre, cartes d'étapes */
  --deep:    #1A2EE0;   /* départ du dégradé du portrait */
  --glow:    #2B42F5;   /* le mur éclairé : halo du hero */
  --ivory:   #F6F7FF;
  --ivory-2: #C0F3DA;   /* menthe : Participations, CTA final */
  --ink:     #0A18B7;   /* titres sur clair : le même bleu */
  --ink-soft:#3F436E;
  --mist:    #C8CFFF;
  --mist-2:  #97A2F4;
  --accent:  #16D276;   /* vert vif : boutons, tracés */
  --accent-2:#2EE689;   /* vert clair : seconde ligne du titre, liens sur bleu */
  --accent-ink:#0A18B7; /* accent sur clair */
  --num:     #0A18B7;
  --line-d:  color-mix(in srgb, var(--ivory) 13%, transparent);
  --line-l:  color-mix(in srgb, var(--ink) 16%, transparent);
  --burns:   'TWK Lausanne', 'Helvetica Neue', Arial, sans-serif;  /* nom historique : la typo d'affichage est désormais Lausanne */
  --laus:    'TWK Lausanne', 'Helvetica Neue', Arial, sans-serif;
  --w: 1160px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; font-synthesis:none; }

body {
  font-family:var(--laus);
  font-weight:300;
  background:var(--night);
  color:var(--ivory);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection { background:var(--accent); color:var(--night); }

a { color:inherit; }

/* Focus clavier : visible partout, sur fond clair comme sur fond sombre. */
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}
.light :focus-visible, .light-2 :focus-visible { outline-color:var(--accent-ink); }

.skip {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--night);
  padding:12px 20px; font-size:.85rem; font-weight:600; text-decoration:none;
}
.skip:focus { left:12px; top:12px; }

.wrap { max-width:var(--w); margin:0 auto; padding:0 clamp(20px, 4vw, 48px); }

/* ---------- Nav ---------- */

.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled {
  background:color-mix(in srgb, var(--night) 86%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-d);
}
.nav-in {
  max-width:var(--w); margin:0 auto;
  padding:18px clamp(20px, 4vw, 48px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo {
  font-family:var(--burns); font-weight:600; font-size:1.22rem;
  letter-spacing:.01em; text-decoration:none; color:var(--ivory);
  display:flex; align-items:baseline; gap:.45em;
}
.logo .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); align-self:center; }
.nav-links { display:flex; gap:30px; list-style:none; }
.nav-links a {
  font-size:.82rem; font-weight:400; letter-spacing:.05em;
  text-decoration:none; color:var(--mist);
  transition:color .2s;
}
.nav-links a:hover { color:var(--ivory); }

.nav-end { display:flex; align-items:center; gap:20px; }
.lang {
  display:flex; align-items:center; gap:7px;
  font-size:.74rem; font-weight:600; letter-spacing:.1em;
}
.lang a, .lang span { text-decoration:none; }
.lang a { color:var(--mist-2); transition:color .2s; }
.lang a:hover { color:var(--ivory); }
.lang [aria-current] { color:var(--ivory); }
.lang > * + *::before {
  content:'·'; color:var(--mist-2); opacity:.5;
  margin-right:7px; font-weight:400;
}

.btn {
  display:inline-block; font-family:var(--laus); font-weight:600;
  font-size:.85rem; letter-spacing:.04em; text-decoration:none;
  padding:13px 26px; border-radius:2px; cursor:pointer;
  transition:transform .18s ease, background .2s, color .2s, border-color .2s;
  border:1px solid transparent;
}
.btn:active { transform:translateY(1px); }
.btn-brass { background:var(--accent); color:var(--night); }
.btn-brass:hover { background:var(--accent-2); }
.btn-ghost { border-color:var(--line-d); color:var(--ivory); background:transparent; }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent-2); }
.btn-ink { background:var(--ink); color:var(--ivory); }
.btn-ink:hover { background:var(--glow); }
.btn-sm { padding:10px 20px; font-size:.8rem; }

/* ---------- Hero ---------- */

.hero {
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(1200px 700px at 68% 30%, color-mix(in srgb, var(--glow) 85%, transparent) 0%, transparent 60%),
    var(--night);
}
.hero-axes { position:absolute; inset:0; pointer-events:none; opacity:.9; }
/* padding-top plus grand que le bas : compense la nav fixe pour un centrage optique. */
.hero-in { position:relative; padding-top:150px; padding-bottom:90px; }
.kicker {
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mist); margin-bottom:34px;
  display:flex; align-items:center; gap:14px;
}
.kicker::before { content:''; width:34px; height:1px; background:var(--mist); }
.hero h1 {
  font-family:var(--burns); font-weight:600;
  font-size:clamp(2.7rem, 6.6vw, 5.4rem);
  line-height:1.04; letter-spacing:-.015em;
  /* 18ch : l'anglais est plus large que le français à nombre de caractères égal.
     Les retours à la ligne restent pilotés par le <br> explicite. */
  max-width:18ch;
}
.hero h1 .alt { color:var(--accent-2); }
.hero-sub {
  margin-top:36px; max-width:56ch;
  font-size:clamp(1.02rem, 1.5vw, 1.18rem); font-weight:300;
  color:var(--mist); line-height:1.75;
}
.hero-sub strong { color:var(--ivory); font-weight:400; }
.hero-cta { margin-top:44px; display:flex; gap:16px; flex-wrap:wrap; }

/* ---------- Sections communes ---------- */

section { position:relative; }
.sec { padding:clamp(90px, 12vw, 150px) 0; }

.sec-label {
  font-size:.75rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:26px; display:flex; align-items:center; gap:14px;
}
.sec-label::before { content:''; width:34px; height:1px; background:currentColor; opacity:.7; }
.dark .sec-label { color:var(--mist); }
.light .sec-label { color:var(--ink-soft); }

h2 {
  font-family:var(--burns); font-weight:600;
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  line-height:1.1; letter-spacing:-.01em;
  max-width:20ch;
}

.light { background:var(--ivory); color:var(--ink); }
.light-2 { background:var(--ivory-2); }
.dark { background:var(--night); color:var(--ivory); }
.dark-2 { background:var(--night-2); }

/* ---------- Manifeste ---------- */

.manifeste-grid {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(40px, 6vw, 96px); margin-top:64px; align-items:start;
}
.prose p {
  font-size:1.06rem; line-height:1.85; color:var(--ink-soft);
  margin-bottom:1.5em; max-width:58ch;
}
.prose p strong { color:var(--ink); font-weight:600; }
.prose .lede {
  font-family:var(--burns); font-weight:400; font-size:1.45rem;
  line-height:1.5; color:var(--ink); max-width:30ch;
}
.criteres { display:grid; gap:0; border-top:1px solid var(--line-l); }
.critere { padding:26px 0; border-bottom:1px solid var(--line-l); display:grid; grid-template-columns:52px 1fr; gap:18px; }
.critere .num { font-family:var(--burns); font-weight:300; font-size:1.5rem; color:var(--num); line-height:1.2; }
.critere h3 { font-family:var(--burns); font-weight:600; font-size:1.18rem; letter-spacing:0; margin-bottom:6px; }
.critere p { font-size:.94rem; color:var(--ink-soft); line-height:1.65; }
.pasmoi {
  margin-top:64px; padding:30px 34px;
  border:1px solid var(--line-l); border-left:3px solid var(--accent-ink);
  background:color-mix(in srgb, var(--ink) 3%, transparent);
  font-size:1rem; color:var(--ink); line-height:1.75; max-width:72ch;
}
.pasmoi b { font-weight:600; }

/* ---------- Offre ---------- */

.offre-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px, 5vw, 80px); margin-top:70px; align-items:start;
}
.offre-col h3 {
  font-family:var(--burns); font-weight:600; font-size:1.6rem;
  margin-bottom:34px; padding-bottom:18px; border-bottom:1px solid var(--line-d);
}
.apporte { display:grid; gap:34px; }
.apporte-item { display:grid; grid-template-columns:46px 1fr; gap:18px; }
.apporte-item .glyph {
  width:34px; height:34px; border:1px solid var(--accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--burns); font-size:.9rem; color:var(--accent-2); margin-top:2px;
}
.apporte-item h4 { font-family:var(--burns); font-weight:600; font-size:1.22rem; margin-bottom:7px; letter-spacing:0; }
.apporte-item p { font-size:.94rem; color:var(--mist); line-height:1.7; }
.attend { list-style:none; display:grid; gap:0; }
.attend li {
  padding:24px 0; border-bottom:1px solid var(--line-d);
  display:flex; gap:16px; align-items:baseline;
  font-size:1rem; color:var(--mist); line-height:1.7;
}
.attend li::before { content:'-'; color:var(--accent); font-weight:600; flex:0 0 auto; }
.attend li b { color:var(--ivory); font-weight:600; }
.offre-note {
  margin-top:34px; padding:22px 24px;
  border-left:2px solid var(--accent);
  font-size:.95rem; color:var(--mist); line-height:1.75;
}
.offre-note b { color:var(--ivory); font-weight:600; }

/* ---------- Ce que je construis ---------- */

.prod-head {
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,90px); align-items:end; margin-bottom:70px;
}
.prod-head .prose p { color:var(--ink-soft); margin-bottom:0; }

.prod-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.prod-card {
  border:1px solid var(--line-l); background:var(--ivory);
  padding:38px 36px 34px;
  display:flex; flex-direction:column; gap:22px;
}
.prod-card.feat {
  grid-column:1 / -1;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,70px); align-items:start;
  border-left:3px solid var(--accent-ink);
}
.prod-status {
  font-size:.71rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--accent-ink); display:flex; align-items:center; gap:9px; margin-bottom:16px;
}
.prod-status::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--accent-ink); flex:0 0 auto;
}
.prod-name {
  font-family:var(--burns); font-weight:600; letter-spacing:-.005em;
  font-size:1.75rem; line-height:1.1; color:var(--ink);
}
.prod-card.feat .prod-name { font-size:clamp(2rem,3.2vw,2.6rem); }
.prod-promise {
  font-family:var(--burns); font-weight:400; font-size:1.12rem;
  line-height:1.45; color:var(--accent-ink); margin-top:12px; max-width:26ch;
}
.prod-card.feat .prod-promise { font-size:1.32rem; }
.prod-body { display:flex; flex-direction:column; gap:14px; height:100%; }
.prod-body p { font-size:.95rem; color:var(--ink-soft); line-height:1.75; max-width:56ch; }
.prod-link {
  align-self:flex-start;
  font-size:.85rem; font-weight:600; letter-spacing:.03em;
  color:var(--accent-ink); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent-ink) 35%, transparent); padding-bottom:2px;
  transition:border-color .2s;
}
.prod-link:hover { border-bottom-color:var(--accent-ink); }
.prod-link::after { content:' ↗'; letter-spacing:0; }
.prod-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:14px; }
.prod-card.feat .prod-id .prod-meta { margin-top:30px; padding-top:0; }
/* Réserve deux lignes pour la promesse : aligne le corps des cartes jumelles. */
.prod-card:not(.feat) .prod-promise { min-height:3.2em; }
.prod-meta span {
  font-size:.7rem; font-weight:400; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); border:1px solid var(--line-l);
  padding:6px 11px; white-space:nowrap;
}

/* ---------- Preuve ---------- */

.preuve-head { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(40px,6vw,90px); align-items:end; margin-bottom:70px; }
.preuve-head .prose p { color:var(--ink-soft); }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-l); border:1px solid var(--line-l); }
.stat { background:var(--ivory); padding:34px 26px; }
.stat .n { font-family:var(--burns); font-weight:300; font-size:clamp(2.2rem,3.6vw,3.1rem); line-height:1; color:var(--ink); }
.stat .l { margin-top:12px; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:400; }
.cto-line {
  margin-top:56px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:28px 34px; background:var(--ink); color:var(--ivory);
}
.cto-line .q { font-family:var(--burns); font-size:1.3rem; font-weight:600; }
.cto-line a { font-size:.85rem; font-weight:600; letter-spacing:.05em; color:var(--accent-2); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent-2) 40%, transparent); padding-bottom:2px; transition:border-color .2s; }
.cto-line a:hover { border-bottom-color:var(--accent-2); }

.portfolio { margin-top:90px; }
.portfolio h3 { font-family:var(--burns); font-weight:600; font-size:1.6rem; margin-bottom:34px; }
.pf-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
/* Alignement HAUT : les descriptions n'ont pas la même longueur, un alignement
   bas ferait flotter les titres à des hauteurs différentes. */
.pf-card { border:1px solid var(--line-l); padding:34px 30px; min-height:220px; display:flex; flex-direction:column; justify-content:flex-start; gap:26px; background:var(--ivory); }
.pf-card .name { margin-bottom:10px; }
.pf-card .tag { font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.pf-card .name { font-family:var(--burns); font-size:1.7rem; font-weight:600; color:var(--ink); }
.pf-card p { font-size:.92rem; color:var(--ink-soft); line-height:1.65; max-width:44ch; }
.pf-next { border:1px dashed color-mix(in srgb, var(--ink) 35%, transparent); background:transparent; }
.pf-next .name { color:var(--ink-soft); }
.pf-next .tag { color:var(--accent-ink); }

/* ---------- Process ---------- */

.steps { margin-top:70px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-d); border:1px solid var(--line-d); }
.step { background:var(--night-2); padding:38px 30px 44px; position:relative; }
.step .n {
  font-family:var(--burns); font-weight:300; font-size:3.4rem; line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--accent);
  margin-bottom:26px;
}
.step h3 { font-family:var(--burns); font-weight:600; font-size:1.22rem; margin-bottom:10px; letter-spacing:0; }
.step p { font-size:.92rem; color:var(--mist); line-height:1.7; }
.process-note { margin-top:36px; font-size:.95rem; color:var(--mist-2); max-width:64ch; }
.process-note b { color:var(--accent-2); font-weight:600; }

/* ---------- Qui je suis ---------- */

.qui-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px,6vw,90px); align-items:center; }
.portrait {
  aspect-ratio:4/5; background:linear-gradient(160deg, var(--deep) 0%, var(--night-2) 100%);
  border:1px solid var(--line-d); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.portrait .mono { font-family:var(--burns); font-weight:300; font-size:5rem; color:color-mix(in srgb, var(--ivory) 28%, transparent); letter-spacing:.02em; }
.portrait .cap { position:absolute; bottom:18px; left:22px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist-2); }
.qui-txt h2 { margin-bottom:10px; }
.qui-role { font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; margin-bottom:32px; }
.qui-txt p { font-size:1.04rem; color:var(--ink-soft); line-height:1.85; margin-bottom:1.4em; max-width:56ch; }
.qui-txt p strong { color:var(--ink); font-weight:600; }

/* ---------- CTA final ---------- */

.cta-fin { text-align:center; padding:clamp(110px,14vw,180px) 0; position:relative; overflow:hidden; }
.cta-fin h2 { margin:0 auto 18px; max-width:24ch; }
.cta-fin .sous { color:var(--ink-soft); font-size:1.1rem; max-width:44ch; margin:0 auto 48px; line-height:1.7; }
.cta-fin .mini { margin-top:26px; font-size:.85rem; letter-spacing:.05em; color:var(--ink-soft); }

/* ---------- Footer ---------- */

footer { background:var(--night); border-top:1px solid var(--line-d); }
.foot-in {
  max-width:var(--w); margin:0 auto;
  padding:44px clamp(20px,4vw,48px);
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  font-size:.8rem; color:var(--mist-2);
}
.foot-in a { color:var(--mist); text-decoration:none; }
.foot-in a:hover { color:var(--ivory); }
.foot-links { display:flex; gap:26px; }
.foot-note { width:100%; font-size:.75rem; color:var(--mist-2); opacity:.75; }

/* ---------- Page pitch ---------- */

.page-head { padding:170px 0 70px; }
.page-head h1 { font-family:var(--burns); font-weight:600; font-size:clamp(2.4rem,5vw,4rem); line-height:1.08; letter-spacing:-.01em; max-width:18ch; }
.page-head .sous { margin-top:26px; color:var(--mist); font-size:1.08rem; max-width:56ch; line-height:1.75; }

.form-sec { padding-bottom:130px; }
.pitch-form { max-width:760px; display:grid; gap:44px; }
.field { display:grid; gap:12px; }
fieldset.field { border:0; padding:0; margin:0; }
.field legend { font-weight:600; font-size:1rem; letter-spacing:.01em; padding:0; margin-bottom:12px; float:left; width:100%; }
.field label { font-weight:600; font-size:1rem; letter-spacing:.01em; }
.field .hint { font-size:.86rem; color:var(--mist-2); margin-top:-6px; line-height:1.6; }
.field input[type=text], .field input[type=email], .field input[type=url], .field textarea {
  font-family:var(--laus); font-weight:300; font-size:1rem;
  background:var(--night-2); color:var(--ivory);
  border:1px solid var(--line-d); border-radius:2px;
  padding:15px 16px; width:100%;
  transition:border-color .2s;
}
.field textarea { min-height:120px; resize:vertical; line-height:1.7; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--accent); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.radios { display:grid; gap:10px; }
.radio {
  display:flex; gap:14px; align-items:center; padding:15px 16px;
  border:1px solid var(--line-d); border-radius:2px; cursor:pointer;
  transition:border-color .2s, background .2s; font-size:.96rem; color:var(--mist);
}
.radio:hover { border-color:var(--mist-2); }
.radio input { accent-color:var(--accent); width:16px; height:16px; }
.radio input:checked + span { color:var(--ivory); }
.form-foot { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.form-foot .note { font-size:.84rem; color:var(--mist-2); }
.confirm {
  display:none; padding:46px 40px; border:1px solid var(--accent);
  background:var(--night-2); max-width:760px;
}
.confirm.show { display:block; }
.confirm:focus { outline:none; }
.confirm h3 { font-family:var(--burns); font-weight:600; font-size:1.8rem; margin-bottom:14px; }
.confirm p { color:var(--mist); line-height:1.75; }

/* ---------- Page legal ---------- */

.legal-body { padding-bottom:140px; }
.legal-body > * { max-width:720px; }
.legal-body h2 { font-size:1.5rem; margin:48px 0 16px; }
.legal-body p { color:var(--mist); font-size:.98rem; line-height:1.8; margin-bottom:1em; }

/* ---------- Reveal ---------- */

/* Le voile d'apparition ne s'applique que si JS est là (classe .js posée dans <head>) */
.js .rv { opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
.js .rv.on { opacity:1; transform:none; }
.rv-1 { transition-delay:.08s; } .rv-2 { transition-delay:.16s; } .rv-3 { transition-delay:.24s; } .rv-4 { transition-delay:.32s; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .js .rv { opacity:1; transform:none; transition:none; }
}

/* ---------- Responsive ---------- */

@media (max-width:960px) {
  .nav-links { display:none; }
  .hero-in { padding-top:130px; padding-bottom:70px; }
  .manifeste-grid, .offre-grid, .preuve-head, .qui-grid, .pf-grid,
  .prod-head, .prod-grid, .prod-card.feat { grid-template-columns:1fr; }
  .prod-card.feat { display:flex; flex-direction:column; gap:22px; }
  .prod-card.feat .prod-promise { font-size:1.18rem; }
  .steps { grid-template-columns:1fr 1fr; }
  .stats { grid-template-columns:1fr 1fr; }
  .stat:last-child { grid-column:1 / -1; }
  .portrait { max-width:420px; }
}
@media (max-width:560px) {
  .steps { grid-template-columns:1fr; }
  .field-row { grid-template-columns:1fr; }
  .prod-card { padding:30px 24px 28px; }
  .prod-name { font-size:1.55rem; }
}

/* Repère du hero : couleurs de la palette (prioritaires sur les attributs SVG) */
.hero-axes stop { stop-color:var(--accent-2); }
.hero-axes g { stroke:var(--ivory); }
.hero-axes path { stroke:var(--accent); }
.hero-axes circle:nth-of-type(2) { fill:var(--accent-2); }
.hero-axes circle:nth-of-type(3) { stroke:var(--accent-2); }

/* Pied de page : les liens passent à la ligne sur petit écran (débordement à 390 px) */
.foot-links { flex-wrap:wrap; gap:10px 26px; }
.confirm a { color:var(--accent-2); }

/* ---------- Blog ---------- */

.nav-links a[aria-current] { color:var(--ivory); }
@media (max-width:1180px) { .nav-links { gap:22px; } }

.post-head {
  padding:170px 0 clamp(70px, 9vw, 104px);
  background:
    radial-gradient(1000px 560px at 78% 0%, color-mix(in srgb, var(--glow) 75%, transparent) 0%, transparent 62%),
    var(--night);
}
.post-head .kicker { margin-bottom:30px; }
.post-meta {
  font-size:.76rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--mist);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:30px;
}
.post-meta::before { content:''; width:34px; height:1px; background:var(--mist); }
.post-meta a { color:inherit; text-decoration:none; }
.post-meta a:hover { color:var(--ivory); }
.post-meta .sep { opacity:.5; font-weight:400; }
.post-head h1 {
  font-weight:600; font-size:clamp(2.3rem, 5.2vw, 4.2rem);
  line-height:1.06; letter-spacing:-.015em; max-width:19ch; text-wrap:balance;
}
.post-head .chapo {
  margin-top:30px; max-width:58ch;
  font-size:clamp(1.06rem, 1.5vw, 1.24rem); color:var(--mist); line-height:1.7;
}

/* Article : colonne de lecture à 66 caractères, auteur en marge sur grand écran */
.post-body { padding:clamp(64px, 8vw, 104px) 0 clamp(90px, 11vw, 140px); }
.post-grid { display:grid; grid-template-columns:200px minmax(0, 680px); gap:clamp(40px, 7vw, 112px); }
.post-aside { position:sticky; top:112px; align-self:start; display:grid; gap:28px; }
.post-author { display:grid; gap:14px; }
.post-author p { display:grid; gap:2px; font-size:.86rem; line-height:1.5; color:var(--ink-soft); }
.post-by { font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:6px; }
.post-author b, .post-sign b { font-weight:600; color:var(--ink); }
.post-role { display:block; font-size:.86rem; color:var(--ink-soft); line-height:1.5; }
.post-mono {
  width:48px; height:48px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--night); color:var(--ivory);
  font-weight:600; font-size:.86rem; letter-spacing:.02em;
}
.post-back { font-size:.84rem; font-weight:600; color:var(--ink); text-decoration:none; border-top:1px solid var(--line-l); padding-top:18px; }
.post-back::before { content:'← '; }
.post-back:hover { text-decoration:underline; text-underline-offset:3px; }

.post-text { min-width:0; }
.post-text > p { font-size:1.14rem; line-height:1.8; color:var(--ink-soft); margin-bottom:1.3em; max-width:66ch; }
.post-text > p:first-child { font-size:clamp(1.22rem, 1.8vw, 1.36rem); line-height:1.62; color:var(--ink); font-weight:400; }
.post-text strong { color:var(--ink); font-weight:600; }
.post-text em { font-style:italic; }
.post-text a { color:var(--ink); text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; }
.post-text h2 {
  font-size:clamp(1.45rem, 2.3vw, 1.85rem); line-height:1.2; letter-spacing:-.01em;
  color:var(--ink); margin:2.3em 0 .75em; max-width:30ch;
}
.post-text blockquote { margin:2.2em 0 2.4em; padding:4px 0 4px 28px; border-left:3px solid var(--accent-ink); }
.post-text blockquote p { font-size:clamp(1.36rem, 2.3vw, 1.72rem); line-height:1.4; letter-spacing:-.008em; color:var(--ink); font-weight:400; max-width:30ch; text-wrap:balance; }
.post-sign {
  margin-top:3.2em; padding-top:30px; border-top:1px solid var(--line-l);
  display:flex; align-items:center; gap:16px; font-size:1rem;
}
.post-sign > span:last-child { display:grid; gap:2px; line-height:1.4; }

/* Liste des articles */
.post-list-sec { padding:clamp(56px, 7vw, 96px) 0 clamp(100px, 12vw, 160px); }
.post-list { list-style:none; border-top:1px solid var(--line-l); }
.post-item {
  display:grid; grid-template-columns:200px minmax(0, 1fr); gap:clamp(24px, 6vw, 112px);
  padding:40px 0; border-bottom:1px solid var(--line-l); text-decoration:none; color:var(--ink);
}
.post-item time { font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); padding-top:.7em; }
.post-item-txt { display:grid; gap:14px; max-width:680px; }
.post-item-title { font-weight:600; font-size:clamp(1.6rem, 3vw, 2.3rem); line-height:1.12; letter-spacing:-.01em; text-wrap:balance; }
.post-item-chapo { font-size:1.06rem; line-height:1.7; color:var(--ink-soft); }
.post-more { font-size:.84rem; font-weight:600; margin-top:4px; }
.post-more::after { content:' →'; transition:margin .2s; }
.post-item:hover .post-item-title { text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:var(--accent); text-underline-offset:6px; }
.post-item:hover .post-more::after { margin-left:4px; }

@media (max-width:960px) {
  .post-grid, .post-item { grid-template-columns:1fr; }
  .post-aside { position:static; order:2; }
  .post-aside .post-author { display:none; }
  .post-back { border-top:0; padding-top:0; }
  .post-item time { padding-top:0; }
}
@media (max-width:560px) {
  .post-head { padding-top:130px; }
  .post-text > p { font-size:1.06rem; }
}

/* Tableau comparatif dans un article */
.post-table { margin:2.2em 0 2.4em; overflow-x:auto; }
.post-table table { width:100%; min-width:460px; border-collapse:collapse; font-size:.98rem; line-height:1.5; }
.post-table thead th {
  text-align:left; padding:0 18px 14px; vertical-align:bottom;
  font-size:1.02rem; font-weight:600; letter-spacing:0; color:var(--ink);
  border-bottom:2px solid var(--ink);
}
.post-table thead th:first-child { padding-left:0; }
.post-table thead th:last-child::before {
  content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--accent); margin-right:8px; vertical-align:middle; position:relative; top:-1px;
}
.post-table tbody th, .post-table td { padding:16px 18px; vertical-align:top; border-bottom:1px solid var(--line-l); text-align:left; }
.post-table tbody th { padding-left:0; width:27%; font-size:.86rem; font-weight:600; color:var(--ink); }
.post-table td { color:var(--ink-soft); }
.post-table td:last-child { color:var(--ink); background:color-mix(in srgb, var(--ivory-2) 38%, transparent); }
@media (max-width:560px) {
  .post-table table { font-size:.9rem; }
  .post-table tbody th, .post-table td { padding:13px 12px; }
  .post-table tbody th { padding-left:0; }
}

/* ---------- Pitch : message audio ---------- */

.audio-title { font-weight:600; font-size:1rem; letter-spacing:.01em; }
.audio[hidden] { display:none; }
.rec {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:'main wave time' 'acts acts acts';
  align-items:center; gap:18px 22px;
  padding:22px 24px; background:var(--night-2); border:1px solid var(--line-d); border-radius:2px;
  transition:border-color .25s;
}
.rec[data-state=recording] { border-color:color-mix(in srgb, var(--accent) 60%, transparent); }
.rec-main {
  grid-area:main; position:relative; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--laus); font-weight:600; font-size:.88rem; letter-spacing:.03em;
  background:none; border:0; color:var(--ivory); cursor:pointer; padding:0;
}
.rec-main:disabled { cursor:default; opacity:.5; }
.rec-ico {
  position:relative; z-index:1; width:56px; height:56px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--accent); color:var(--night);
  transition:transform .18s ease, background .2s;
}
.rec-main:hover:not(:disabled) .rec-ico { background:var(--accent-2); }
.rec-main:active:not(:disabled) .rec-ico { transform:scale(.96); }
.rec-ico svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.rec-ico svg .fill { fill:currentColor; stroke:none; }
.rec[data-state=review] .rec-ico { background:var(--ivory); color:var(--night); }
.rec[data-state=review] .rec-main:hover .rec-ico { background:#fff; }
.rec-ring {
  position:absolute; left:0; top:50%; width:56px; height:56px; margin-top:-28px; border-radius:50%;
  border:1px solid var(--accent); opacity:0; pointer-events:none;
}
.rec[data-state=recording] .rec-ring { animation:rec-pulse 1.6s cubic-bezier(.2,.6,.2,1) infinite; }
.rec-still .rec-ring { animation:none !important; }
@keyframes rec-pulse { 0% { transform:scale(1); opacity:.7; } 100% { transform:scale(1.7); opacity:0; } }

.rec-wave { grid-area:wave; position:relative; height:56px; min-width:0; border-radius:2px; }
.rec-wave canvas { display:block; width:100%; height:44px; margin-top:4px; }
.rec[data-state=review] .rec-wave { cursor:pointer; }
.rec-wave:focus-visible { outline-offset:4px; }
.rec-prog { position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--line-d); overflow:hidden; }
.rec-prog i { position:absolute; inset:0; background:var(--accent); transform-origin:0 50%; transform:scaleX(0); }
.rec-time { grid-area:time; font-size:.92rem; color:var(--mist-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rec-time b { color:var(--ivory); font-weight:600; }

.rec-actions { grid-area:acts; display:flex; gap:10px; flex-wrap:wrap; }
.rec-actions:not(:has(.rec-btn:not([hidden]))) { display:none; }
.rec-btn {
  font-family:var(--laus); font-weight:600; font-size:.8rem; letter-spacing:.03em;
  padding:9px 16px; border-radius:2px; cursor:pointer;
  background:transparent; color:var(--ivory); border:1px solid var(--line-d);
  transition:border-color .2s, color .2s;
}
.rec-btn:hover { border-color:var(--accent); color:var(--accent-2); }
.rec-btn-quiet { border-color:transparent; color:var(--mist-2); }
.rec-btn-quiet:hover { border-color:transparent; color:var(--ivory); text-decoration:underline; text-underline-offset:3px; }
.rec [data-act] { display:none; }
.rec[data-state=recording] [data-act=pause], .rec[data-state=paused] [data-act=pause],
.rec[data-state=review] [data-act=redo], .rec[data-state=review] [data-act=remove] { display:inline-block; }
.rec[data-state=idle] .rec-actions, .rec[data-state=asking] .rec-actions, .rec[data-state=unsupported] .rec-actions,
.rec[data-state=stopping] .rec-actions { display:none; }
.rec-status { font-size:.84rem; color:var(--mist-2); line-height:1.6; min-height:1.6em; }
.rec[data-state=unsupported] { opacity:.6; }

/* Avec un message audio, les questions écrites deviennent facultatives */
.pitch-form .opt-audio { display:none; font-weight:300; color:var(--mist-2); }
.pitch-form.has-audio .opt-audio { display:inline; }

/* Piège à robots : hors écran, jamais rempli par un humain */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.btn[disabled] { opacity:.7; cursor:progress; }
.confirm [data-variant] { display:none; }
.confirm [data-variant].on { display:block; }

@media (max-width:560px) {
  .rec { grid-template-columns:auto minmax(0,1fr); grid-template-areas:'main time' 'wave wave' 'acts acts'; padding:18px; }
  .rec-time { justify-self:end; }
}

.pulse-ok { align-items:flex-start; }
.pulse-ok input { flex:none; margin-top:4px; }

/* Portrait : la photo remplit le cadre 4:5 ; pendant le chargement, le bleu de son fond */
.portrait.has-photo { background:#0921A4; border-color:transparent; }
.portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
img.post-mono { object-fit:cover; display:block; }

/* Menu à six entrées : il se replie avant de déborder */
@media (max-width:1120px) { .nav-links { display:none; } }