/* Polices servies par midi-strat.fr, jamais par Google. Sous-ensemble latin.
   Instrument Serif (accent éditorial italique) et Martian Mono (labels) ont
   été rapatriés depuis Google Fonts. Helvetica est une police système : aucun
   fichier, aucune requête — rendu identique à « Helvetica Now » chez Cappen. */
@font-face{
  font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/instrument-serif.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src:url(fonts/instrument-serif-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Martian Mono'; font-style:normal; font-weight:300 500; font-display:swap;
  src:url(fonts/martian-mono.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════
   Midi&Strat — feuille de style unique. Direction « studio créatif ».

   Type : Helvetica (grotesque, display + courant)
          × Instrument Serif italique (accent éditorial)
          × Martian Mono (micro-labels : eyebrows, nav, scores).
   Couleur : papier greige, encre noire chaude, un seul accent cobalt ;
   couleurs de données (vert/ambre/rouge) réservées aux scores.
   Motion : révélations CSS + IntersectionObserver (posées par app.js) ;
   sans JS, rien n'est caché. Scroll fluide via Lenis, servi en local.

   Une seule feuille, mise en cache pour toute la visite. Les noms de classes
   des pages intérieures sont conservés : la bascule se fait ici.
   ═══════════════════════════════════════════════════════════════════ */

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

:root{
  --paper:#EFEEE7; --paper-2:#E6E4DA; --white:#F6F5F0;
  --ink:#131210; --ink-2:#3C3932; --muted:#6A655B; --faint:#938D7E;
  --line:rgba(19,18,16,.16); --line-soft:rgba(19,18,16,.09);
  --accent:#2A2CEB; --accent-2:#6E6FFF;
  --paper-on-ink:#EFEEE7; --line-on-ink:rgba(239,238,231,.16);
  /* données — teintes lisibles sur papier clair */
  --green:#1C8A5E; --amber:#B5730C; --red:#C8341F; --teal:#0E8F86;
  --green-dim:rgba(28,138,94,.1); --amber-dim:rgba(181,115,12,.1);
  --red-dim:rgba(200,52,31,.1); --teal-dim:rgba(14,143,134,.1);
  --accent-dim:rgba(42,44,235,.07); --accent-dim-2:rgba(42,44,235,.12);
  /* données — teintes vives sur fond encre */
  --green-b:#35C88A; --amber-b:#EFA43A; --red-b:#F0604C;

  --sh-sm:0 1px 2px rgba(16,16,12,.05), 0 1px 1px rgba(16,16,12,.03);
  --sh-md:0 14px 34px -16px rgba(16,16,12,.16), 0 4px 12px -8px rgba(16,16,12,.1);
  --sh-lg:0 40px 80px -28px rgba(16,16,12,.24);

  --display:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono:'Martian Mono', ui-monospace, "SF Mono", Menlo, monospace;
  --large:1300px;
  --r:18px; --r-sm:12px;
}

html{ font-size:108%; scroll-behavior:smooth; overflow-x:hidden; -webkit-text-size-adjust:100% }
:target,[id]{ scroll-margin-top:92px }
body{
  font-family:var(--body); font-weight:400; background:var(--paper); color:var(--ink-2);
  line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto }
a{ color:inherit }
::selection{ background:var(--accent); color:var(--paper-on-ink) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px }

/* ── Eyebrow / mention (mono) ───────────────────────────────────── */
.mention, .eyebrow{ display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.2rem }
.mention p, .eyebrow span, .eyebrow{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:1.4; margin:0 }
.mention-point, .eyebrow .dot, .point-vert{ width:7px; height:7px; background:var(--accent); border-radius:50%; flex-shrink:0 }
.point-vert{ background:var(--green) }

/* ── Titres ─────────────────────────────────────────────────────── */
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1.08 }
.serif, .serif-em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0 }
.titre{ font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,4.2vw,3.4rem); line-height:1.05; letter-spacing:-.025em; color:var(--ink) }
.titre em, h1 em, h2 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent); letter-spacing:0 }

/* ── Boutons ────────────────────────────────────────────────────── */
.bouton{
  font-family:var(--mono); font-weight:500; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  background:var(--ink); color:var(--paper-on-ink); padding:1rem 1.8rem; border-radius:100px; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:.55rem; transition:background .22s, transform .22s, box-shadow .22s; box-shadow:var(--sh-sm);
}
.bouton:hover{ background:var(--accent); transform:translateY(-2px); box-shadow:var(--sh-md) }
.bouton-clair{
  font-family:var(--mono); font-weight:500; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); border:1px solid var(--line); padding:.95rem 1.6rem; border-radius:100px;
  text-decoration:none; display:inline-flex; align-items:center; gap:.55rem; transition:color .22s, border-color .22s, background .22s;
}
.bouton-clair:hover{ color:var(--ink); border-color:var(--ink); background:var(--white) }

/* ── Curseur custom ─────────────────────────────────────────────── */
/* Curseur custom SANS mix-blend-mode (le blend forçait une recomposition de
   la page à chaque frame → saccades au défilement). Accent cobalt, visible
   aussi bien sur le papier que sur les bandes encre. */
.cursor,.cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; will-change:transform }
.cursor{ width:8px; height:8px; background:var(--accent); margin:-4px 0 0 -4px; opacity:0 }
.cursor.show{ opacity:1 }
.cursor-ring{ width:40px; height:40px; border:1px solid rgba(42,44,235,.55); margin:-20px 0 0 -20px; transition:width .25s,height .25s,margin .25s,opacity .25s; opacity:0 }
.cursor-ring.show{ opacity:1 }
.cursor-ring.grow{ width:72px; height:72px; margin:-36px 0 0 -36px; background:var(--accent-dim) }
@media (hover:none){ .cursor,.cursor-ring{ display:none } }

/* ── Bandeau de navigation ──────────────────────────────────────── */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:76px;
  display:flex; align-items:center; justify-content:space-between; padding:0 2.5rem;
  transition:background .4s ease, border-color .4s ease, box-shadow .4s ease, height .3s ease; border-bottom:1px solid transparent;
}
/* nav opaque au défilement, SANS backdrop-filter : le flou se recalculait à
   chaque frame sur le contenu qui défile → saccades. Fond quasi plein à la place. */
#nav.defile{ background:rgba(240,239,232,.96); border-bottom-color:var(--line); box-shadow:0 1px 24px -16px rgba(16,16,12,.3); height:66px }
.nav-logo img{ height:30px; width:auto; display:block; transition:height .3s ease }
#nav.defile .nav-logo img{ height:27px }
.nav-links{ display:flex; gap:1.9rem; list-style:none }
.nav-links a{ font-family:var(--mono); color:var(--muted); text-decoration:none; font-size:.62rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; transition:color .2s; white-space:nowrap }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--ink) }
.nav-cta{ font-family:var(--mono); background:var(--ink); color:var(--paper-on-ink); font-size:.6rem; font-weight:500; padding:.6rem 1.15rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border-radius:100px; transition:background .2s, transform .2s }
.nav-cta:hover{ background:var(--accent); transform:translateY(-1px) }

.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem; z-index:200 }
.hamburger span{ display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
.menu-mobile{ display:none; position:fixed; inset:0; background:rgba(239,238,231,.98); z-index:150; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px) }
.menu-mobile.ouvert{ display:flex }
.menu-mobile a{ font-family:var(--mono); color:var(--muted); text-decoration:none; font-size:.95rem; letter-spacing:.1em; text-transform:uppercase }
.menu-mobile a[aria-current="page"]{ color:var(--accent) }
.menu-mobile .m-cta{ background:var(--ink); color:var(--paper-on-ink); padding:.8rem 2rem; border-radius:100px; font-size:.8rem; margin-top:.6rem }
.m-fermer{ position:absolute; top:1.3rem; right:1.6rem; background:none; border:none; color:var(--muted); font-size:1.8rem; cursor:pointer; line-height:1 }

/* ── Communs ────────────────────────────────────────────────────── */
.large{ max-width:var(--large); margin:0 auto }
.section{ padding:clamp(4.5rem,9vw,8rem) 2.5rem }
.section.carte{ background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }

/* ── Révélations — l'opacité n'est retirée que si app.js tourne (html.anim).
      Sans JS, rien n'est caché ; les classes .rv du HTML restent visibles. ── */
html.anim .rv{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1) }
html.anim .rv.vu{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  html.anim .rv{ opacity:1 !important; transform:none !important; transition:none }
  html{ scroll-behavior:auto }
  .marquee .track{ animation:none !important }
  .scrollcue .bar, .point-vert{ animation:none !important }
}

/* ═══ PAGE D'ACCUEIL ════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────────── */
.hero{ min-height:90svh; display:flex; flex-direction:column; justify-content:center; padding:8rem 2.5rem 4rem; position:relative; overflow:hidden }
.hero-fond{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 48% 52% at 82% 16%, rgba(42,44,235,.07) 0%, transparent 60%); }
.hero-fond::after{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 42%,#000,transparent 78%); mask-image:radial-gradient(ellipse 85% 70% at 50% 42%,#000,transparent 78%); }
.hero-inner{ position:relative; z-index:1; max-width:var(--large); margin:0 auto; width:100% }
.hero .eyebrow{ margin-bottom:2.2rem; padding:.42rem .9rem; border:1px solid var(--line); border-radius:100px; background:rgba(255,255,255,.5) }
.hero .eyebrow span{ color:var(--ink-2) }
.hugetitle{ font-family:var(--display); font-weight:800; line-height:.9; letter-spacing:-.03em; margin:0; color:var(--ink);
  font-size:clamp(2.7rem, 9.4vw, 9rem); text-transform:uppercase }
.hugetitle .line-mask{ overflow:hidden; display:block; padding-block:.02em }
.hugetitle .line{ display:block; will-change:transform }
.hugetitle .serif-line{ font-family:var(--serif); font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; color:var(--accent); display:block; line-height:.98 }
.hero-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-top:3.4rem; flex-wrap:wrap }
.hero-deck{ max-width:42ch; font-size:1.02rem; line-height:1.7; color:var(--ink-2) }
.hero-deck strong{ color:var(--ink); font-weight:600 }
.hero-cta{ display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap }
.hero-note{ font-family:var(--mono); font-size:.6rem; color:var(--faint); letter-spacing:.04em; text-transform:uppercase }
.scrollcue{ font-family:var(--mono); position:absolute; bottom:1.6rem; right:2.5rem; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:.6rem; z-index:1 }
.scrollcue .bar{ width:1px; height:32px; background:linear-gradient(var(--ink),transparent); animation:cue 2s ease-in-out infinite }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); transform-origin:top; opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* entrée du hero — html.anim/.ready, filet de sécurité dans app.js */
html.anim .hugetitle .line{ transform:translateY(118%) }
html.anim .hero .eyebrow, html.anim .hero-foot{ opacity:0; transform:translateY(20px) }
html.anim.ready .hugetitle .line{ transform:translateY(0); transition:transform 1.05s cubic-bezier(.19,1,.22,1) }
html.anim.ready .hugetitle .line-mask:nth-child(2) .line{ transition-delay:.12s }
html.anim.ready .hugetitle .line-mask:nth-child(3) .line{ transition-delay:.24s }
html.anim.ready .hero .eyebrow{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease }
html.anim.ready .hero-foot{ opacity:1; transform:none; transition:opacity .9s ease .4s, transform .9s ease .4s }
@media (prefers-reduced-motion: reduce){ html.anim .hugetitle .line, html.anim .hero .eyebrow, html.anim .hero-foot{ opacity:1 !important; transform:none !important } }

/* ── Marquee ────────────────────────────────────────────────────── */
.marquee{ border-block:1px solid var(--line); overflow:hidden; background:var(--paper); padding-block:1.1rem }
.marquee .track{ display:inline-flex; gap:2.5rem; white-space:nowrap; will-change:transform; animation:slide 32s linear infinite }
.marquee .item{ font-family:var(--display); font-weight:800; font-size:clamp(1.2rem,3.1vw,2.3rem); text-transform:uppercase; letter-spacing:-.02em; color:var(--ink); display:inline-flex; align-items:center; gap:2.5rem }
.marquee .item::after{ content:"✴"; color:var(--accent); font-size:.5em; font-weight:400 }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ── Manifeste ──────────────────────────────────────────────────── */
.manifest{ display:grid; grid-template-columns:1.3fr .9fr; gap:3rem; align-items:end }
.statement{ font-family:var(--display); font-weight:700; letter-spacing:-.025em; line-height:1.04; font-size:clamp(1.8rem,4.8vw,3.8rem); max-width:18ch; color:var(--ink) }
.statement em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent); letter-spacing:0 }
.manifest .lede{ color:var(--ink-2); font-size:1.02rem; line-height:1.75; max-width:42ch }
.manifest .lede strong{ color:var(--ink); font-weight:600 }
@media (max-width:860px){ .manifest{ grid-template-columns:1fr; gap:2rem } }

/* ── Offres (index) ─────────────────────────────────────────────── */
.offers{ border-top:1px solid var(--line); margin-top:2.6rem }
.offer{ border-bottom:1px solid var(--line); display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center; padding-block:2.6rem; text-decoration:none; color:inherit }
.offer .idx{ font-family:var(--mono); font-weight:500; font-size:.68rem; color:var(--muted); letter-spacing:.06em; align-self:start; padding-top:.9rem }
.offer h3{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,6vw,4.2rem); letter-spacing:-.035em; line-height:.95; margin:0; text-transform:uppercase; transition:color .3s, transform .4s cubic-bezier(.22,1,.3,1) }
.offer .meta{ max-width:34ch; color:var(--ink-2); font-size:.9rem; line-height:1.65 }
.offer .meta ul{ list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem }
.offer .meta li{ font-size:.8rem; color:var(--muted); display:flex; gap:.5rem }
.offer .meta li::before{ content:""; width:5px; height:5px; margin-top:.5rem; border-radius:50%; background:var(--accent); flex-shrink:0 }
.offer .go{ width:56px; height:56px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-size:1.2rem; color:var(--ink); transition:background .3s, color .3s, border-color .3s, transform .4s }
.offer:hover h3{ color:var(--accent); transform:translateX(14px) }
.offer:hover .go{ background:var(--accent); color:var(--paper-on-ink); border-color:var(--accent); transform:rotate(45deg) }
@media (max-width:860px){ .offer{ grid-template-columns:auto 1fr; gap:1rem 1.2rem } .offer .go{ display:none } .offer .meta{ grid-column:1/-1 } }

/* ── Preuve / restitution ───────────────────────────────────────── */
.proof{ background:var(--ink); color:var(--paper-on-ink); border-radius:28px; padding:clamp(1.9rem,4.5vw,3.6rem); margin-top:2.6rem; position:relative; overflow:hidden }
.proof::after{ content:""; position:absolute; inset:0; opacity:.4; pointer-events:none; background-image:linear-gradient(var(--line-on-ink) 1px,transparent 1px),linear-gradient(90deg,var(--line-on-ink) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse 60% 70% at 88% 0%,#000,transparent 68%); mask-image:radial-gradient(ellipse 60% 70% at 88% 0%,#000,transparent 68%) }
.proof>*{ position:relative; z-index:1 }
.proof .tag{ font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2); border:1px solid var(--line-on-ink); padding:.35rem .7rem; border-radius:100px; display:inline-block; margin-bottom:1.3rem }
.proof-head{ max-width:62ch; margin-bottom:2.6rem }
.proof-head h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,3.4vw,2.4rem); letter-spacing:-.02em; line-height:1.1; margin:0 0 .7rem; color:var(--paper-on-ink) }
.proof-head h3 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent-2); letter-spacing:0 }
.proof-head p{ color:rgba(239,238,231,.66); font-size:.92rem; line-height:1.7; margin:0 }
.proof-body{ display:grid; grid-template-columns:220px 1fr; gap:clamp(2rem,5vw,4rem); align-items:center }
.gauge{ text-align:center }
.gauge svg{ width:100%; max-width:214px; height:auto }
.gauge .status{ display:inline-block; font-family:var(--mono); font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-b); border:1px solid rgba(239,164,58,.45); background:rgba(239,164,58,.1); padding:.26rem .62rem; border-radius:100px; margin-top:.9rem }
.gauge .label{ font-family:var(--mono); font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:.7rem }
.plot-head{ display:grid; grid-template-columns:128px 1fr 54px 92px; margin-bottom:1.1rem }
.plot-head .field{ grid-column:2; position:relative; height:1rem }
.plot-head .avg{ position:absolute; left:var(--avg,66%); top:0; transform:translateX(-50%); white-space:nowrap; font-family:var(--mono); font-size:.5rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(239,238,231,.72) }
.rows{ display:flex; flex-direction:column; gap:1.2rem }
.axis{ display:grid; grid-template-columns:128px 1fr 54px 92px; align-items:center; gap:1rem }
.axis .n{ font-family:var(--mono); font-size:.63rem; letter-spacing:.02em; color:rgba(239,238,231,.82) }
.axis .plot{ position:relative; height:12px; background:rgba(239,238,231,.1); border-radius:10px }
.axis .plot .fill{ display:block; height:100%; width:0; border-radius:10px; transition:width 1.2s cubic-bezier(.2,.8,.2,1) }
.axis .plot::after{ content:""; position:absolute; top:-12px; bottom:-12px; left:var(--avg,66%); width:0; border-left:1px dashed rgba(239,238,231,.42); z-index:2 }
.axis .v{ font-family:var(--display); font-weight:700; font-size:1.35rem; text-align:right; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--paper-on-ink) }
.axis .chip{ justify-self:end; font-family:var(--mono); font-size:.46rem; letter-spacing:.07em; text-transform:uppercase; padding:.26rem .55rem; border-radius:100px; border:1px solid currentColor; white-space:nowrap }
.chip.g{ color:var(--green-b) } .chip.a{ color:var(--amber-b) } .chip.r{ color:var(--red-b) }
.verdict{ display:flex; gap:.7rem; align-items:flex-start; margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--line-on-ink); font-size:.9rem; line-height:1.6; color:rgba(239,238,231,.8) }
.verdict .arrow{ color:var(--accent-2); font-weight:700; flex-shrink:0 }
.verdict strong{ color:var(--paper-on-ink); font-weight:600 }
@media (max-width:820px){ .proof-body{ grid-template-columns:1fr; gap:2.6rem } }
@media (max-width:560px){
  .plot-head{ display:none }
  .axis{ grid-template-columns:1fr auto auto; grid-template-areas:"n v c" "p p p"; gap:.3rem .7rem; row-gap:.55rem }
  .axis .n{ grid-area:n; align-self:center } .axis .v{ grid-area:v; font-size:1.15rem } .axis .chip{ grid-area:c; align-self:center } .axis .plot{ grid-area:p }
}

/* ── Méthode (steps) ────────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:2.6rem; box-shadow:var(--sh-md) }
.step{ background:var(--white); padding:2rem 1.7rem; min-height:220px; display:flex; flex-direction:column; transition:background .3s }
.step:hover{ background:var(--paper) }
.step .num{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:2.8rem; color:var(--accent); line-height:1; margin-bottom:auto }
.step h3{ font-family:var(--display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; margin:1.6rem 0 .5rem; text-transform:uppercase; color:var(--ink) }
.step p{ font-size:.84rem; color:var(--ink-2); line-height:1.6; margin:0 }
@media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr } }
@media (max-width:460px){ .steps{ grid-template-columns:1fr } }

/* ── Fondateur (.matthieu — partagé avec cabinet.html) ──────────── */
.matthieu{ display:grid; grid-template-columns:minmax(0,1fr) 1.1fr; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:2.6rem }
.matthieu-vis{ background:var(--ink); color:var(--paper-on-ink); padding:clamp(2.2rem,4vw,3.4rem); min-height:380px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden }
.matthieu-vis::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:linear-gradient(var(--line-on-ink) 1px,transparent 1px),linear-gradient(90deg,var(--line-on-ink) 1px,transparent 1px); background-size:38px 38px; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 30% 20%,#000,transparent 75%); mask-image:radial-gradient(ellipse 70% 70% at 30% 20%,#000,transparent 75%) }
.matthieu-vis img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9 }
.monogramme{ width:66px; height:66px; border:1px solid var(--line-on-ink); border-radius:14px; display:grid; place-items:center; font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.7rem; color:var(--paper-on-ink); margin-bottom:2.4rem; position:relative; z-index:1 }
.matthieu-vis h2{ font-family:var(--display); font-weight:800; font-size:2rem; letter-spacing:-.02em; color:var(--paper-on-ink); margin-bottom:.4rem; position:relative; z-index:1; text-transform:uppercase; line-height:1.05 }
.matthieu-role{ font-family:var(--mono); color:var(--accent-2); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; position:relative; z-index:1 }
.matthieu-texte{ background:var(--white); padding:clamp(2.2rem,4vw,3.4rem); display:flex; flex-direction:column; justify-content:center }
.matthieu-texte p{ color:var(--ink-2); font-size:1rem; line-height:1.85; margin-bottom:1rem }
.matthieu-texte p strong{ color:var(--ink); font-weight:600 }
@media (max-width:760px){ .matthieu{ grid-template-columns:1fr } .matthieu-vis{ min-height:260px } }

/* ── Appel final (bandeau encre — partagé accueil + pages) ──────── */
.appel{ background:var(--ink); color:var(--paper-on-ink); padding:clamp(5rem,10vw,8.5rem) 2.5rem; text-align:center; position:relative; overflow:hidden }
.appel::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(var(--line-on-ink) 1px,transparent 1px),linear-gradient(90deg,var(--line-on-ink) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 42%,#000,transparent 72%); mask-image:radial-gradient(ellipse 70% 80% at 50% 42%,#000,transparent 72%) }
.appel>*{ position:relative; z-index:1 }
.appel .titre{ max-width:20ch; margin:0 auto 1.4rem; color:var(--paper-on-ink); font-size:clamp(2.2rem,6.5vw,5rem); text-transform:uppercase; letter-spacing:-.03em; line-height:.98 }
.appel .titre em{ color:var(--accent-2) }
.appel>p{ color:rgba(239,238,231,.7); font-size:.98rem; max-width:48ch; margin:0 auto 2.4rem; line-height:1.8 }
.appel-boutons{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }
.appel .bouton{ background:var(--paper-on-ink); color:var(--ink) }
.appel .bouton:hover{ background:var(--accent); color:var(--paper-on-ink) }
.appel .bouton-clair{ color:rgba(239,238,231,.9); border-color:var(--line-on-ink) }
.appel .bouton-clair:hover{ color:var(--paper-on-ink); border-color:var(--paper-on-ink); background:rgba(255,255,255,.08) }
.appel-coord{ display:flex; gap:2.4rem; justify-content:center; margin-top:2.4rem; color:rgba(239,238,231,.55); font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; text-transform:uppercase; flex-wrap:wrap }
.appel-coord a{ color:var(--accent-2); text-decoration:none }
.appel-coord a:hover{ color:var(--paper-on-ink) }

/* ── Pied de page ───────────────────────────────────────────────── */
footer{ background:var(--paper); border-top:1px solid var(--line); padding:2.4rem 2.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.2rem }
footer .f-logo img{ height:30px; width:auto; opacity:.85; transition:opacity .2s }
footer .f-logo:hover img{ opacity:1 }
footer nav{ display:flex; flex-wrap:wrap; gap:.2rem }
footer nav a{ font-family:var(--mono); color:var(--muted); font-size:.6rem; text-decoration:none; padding:.25rem .55rem; letter-spacing:.06em; text-transform:uppercase; transition:color .2s }
footer nav a:hover{ color:var(--ink) }
.f-copy{ font-family:var(--mono); color:var(--faint); font-size:.58rem; letter-spacing:.04em; text-transform:uppercase }

@media (max-width:960px){
  #nav{ padding:0 1.3rem }
  .hamburger{ display:flex }
  .nav-links, .nav-cta{ display:none }
  .hero{ padding:7rem 1.3rem 4.5rem }
  .scrollcue{ display:none }
  .section{ padding:4.5rem 1.3rem }
  footer{ flex-direction:column; align-items:flex-start }
}
@media (max-width:560px){
  .hero{ padding:6.5rem 1.1rem 4rem }
  .hugetitle{ font-size:clamp(2.1rem,11.5vw,3.1rem); line-height:.95 }
  .offer h3{ font-size:clamp(2rem,13vw,3rem) }
  .appel .titre{ font-size:clamp(2rem,10vw,3rem) }
  .statement{ font-size:clamp(1.7rem,7vw,2.4rem) }
}

/* ═══ PAGES INTÉRIEURES ═════════════════════════════════════════ */

.fil{ font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:1.7rem }
.fil a{ color:var(--faint); text-decoration:none; transition:color .2s }
.fil a:hover{ color:var(--accent) }
.fil span{ margin:0 .5rem; opacity:.5 }

.entete{ padding:10rem 2.5rem 4.5rem; position:relative; overflow:hidden; background:var(--paper) }
.entete::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 55% 80% at 84% 10%, rgba(42,44,235,.06) 0%, transparent 60%) }
.entete::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; opacity:.32; -webkit-mask-image:radial-gradient(ellipse 70% 90% at 72% 0%,#000,transparent 72%); mask-image:radial-gradient(ellipse 70% 90% at 72% 0%,#000,transparent 72%) }
.entete>*{ position:relative; z-index:1 }
.entete h1{ font-family:var(--display); font-weight:800; font-size:clamp(2.3rem,5.4vw,4.4rem); line-height:1; margin-bottom:1.4rem; max-width:20ch; letter-spacing:-.035em }
.entete h1 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent); letter-spacing:0 }
.entete .chapeau{ color:var(--ink-2); font-size:1.02rem; line-height:1.8; max-width:62ch }
.entete .chapeau strong{ color:var(--ink); font-weight:600 }
.entete .chapeau + .chapeau{ margin-top:1rem }
.entete-actions{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-top:2.6rem }

.pourqui{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:2.2rem; list-style:none }
.pourqui li{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm); padding:1.15rem 1.3rem; font-size:.86rem; color:var(--ink-2); line-height:1.6; display:flex; gap:.75rem; box-shadow:var(--sh-sm) }
.pourqui li::before{ content:"→"; color:var(--accent); flex-shrink:0; font-size:.78rem; margin-top:.2rem }

.modules{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:2.6rem; box-shadow:var(--sh-md) }
.module{ background:var(--white); padding:2.2rem 2.4rem; display:grid; grid-template-columns:1fr 1.15fr; gap:2.6rem; transition:background .2s }
.module:hover{ background:var(--paper) }
.module-num{ font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.65rem }
.module h3{ font-family:var(--display); font-size:1.4rem; font-weight:700; color:var(--ink); line-height:1.2; margin-bottom:.65rem; letter-spacing:-.01em }
.module .resume{ font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--accent); line-height:1.4; margin-bottom:1rem }
.module .quoi{ font-size:.86rem; color:var(--ink-2); line-height:1.85 }
.module ul{ list-style:none; display:flex; flex-direction:column }
.module ul li{ font-size:.82rem; color:var(--ink-2); line-height:1.55; padding:.5rem 0; border-bottom:1px solid var(--line); display:flex; gap:.6rem }
.module ul li:last-child{ border-bottom:none }
.module ul li::before{ content:""; width:5px; height:5px; margin-top:.5rem; border-radius:50%; background:var(--accent); flex-shrink:0 }

.livrables{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:2.6rem; box-shadow:var(--sh-md) }
.livrable{ background:var(--white); padding:2rem 1.8rem; transition:background .2s }
.livrable:hover{ background:var(--paper) }
.livrable-num{ font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:.65rem }
.livrable h3{ font-family:var(--display); font-size:1.05rem; font-weight:700; color:var(--ink); margin-bottom:.5rem; line-height:1.35; letter-spacing:-.01em }
.livrable p{ font-size:.82rem; color:var(--ink-2); line-height:1.75 }

.compare-cadre{ overflow-x:auto; margin-top:2.6rem; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm) }
table.compare{ width:100%; border-collapse:collapse; min-width:560px; background:var(--white) }
table.compare th, table.compare td{ padding:.85rem 1.2rem; text-align:left; border-bottom:1px solid var(--line); font-size:.84rem }
table.compare thead th{ font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:500; background:var(--paper); position:sticky; top:0 }
table.compare tbody th{ font-weight:400; color:var(--ink-2) }
table.compare td{ text-align:center; width:170px; color:var(--muted) }
table.compare .oui{ color:var(--green); font-weight:600 }
table.compare .non{ color:var(--faint); opacity:.5 }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td{ border-bottom:none }
table.compare tbody tr:hover{ background:var(--paper) }

.etapes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:2.6rem; box-shadow:var(--sh-md) }
.etape{ background:var(--white); padding:1.9rem 1.6rem; transition:background .2s }
.etape:hover{ background:var(--paper) }
.etape-num{ font-family:var(--serif); font-style:italic; font-size:1.8rem; color:var(--accent); line-height:1; margin-bottom:.9rem }
.etape h3{ font-family:var(--display); font-size:.96rem; font-weight:700; color:var(--ink); margin-bottom:.5rem; letter-spacing:-.01em }
.etape p{ font-size:.8rem; color:var(--ink-2); line-height:1.7 }

.piliers{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:2.6rem }
.pilier{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.8rem; box-shadow:var(--sh-sm); transition:transform .35s cubic-bezier(.22,1,.32,1), box-shadow .35s, border-color .25s }
.pilier:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--line) }
.pilier-num{ font-family:var(--serif); font-style:italic; font-size:2.6rem; color:var(--accent); line-height:1; margin-bottom:.6rem }
.pilier h3{ font-family:var(--display); font-size:1.2rem; font-weight:700; color:var(--ink); margin-bottom:.6rem; line-height:1.25; letter-spacing:-.01em }
.pilier p{ font-size:.86rem; color:var(--ink-2); line-height:1.85 }
@media (max-width:960px){ .piliers{ grid-template-columns:1fr } }

.garanties{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:2.6rem; list-style:none; box-shadow:var(--sh-md) }
.garanties li{ background:var(--white); padding:1.8rem 1.9rem; transition:background .2s }
.garanties li:hover{ background:var(--paper) }
.garanties h3{ font-family:var(--display); font-size:.98rem; font-weight:700; color:var(--ink); margin-bottom:.5rem; display:flex; gap:.6rem; letter-spacing:-.01em }
.garanties h3::before{ content:"✓"; color:var(--green); flex-shrink:0; font-weight:700 }
.garanties p{ font-size:.83rem; color:var(--ink-2); line-height:1.8; padding-left:1.3rem }
@media (max-width:760px){ .garanties{ grid-template-columns:1fr } }

.scqa{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:2.2rem; box-shadow:var(--sh-md) }
.scqa div{ background:var(--white); padding:1.7rem 1.5rem; transition:background .2s }
.scqa div:hover{ background:var(--paper) }
.scqa .lettre{ font-family:var(--serif); font-style:italic; font-size:2rem; color:var(--accent); line-height:1; margin-bottom:.5rem }
.scqa h3{ font-family:var(--display); font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; letter-spacing:-.01em }
.scqa p{ font-size:.8rem; color:var(--ink-2); line-height:1.7 }
@media (max-width:760px){ .scqa{ grid-template-columns:1fr 1fr } }

.chiffres{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; margin-top:2.6rem }
.chiffre{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.9rem; box-shadow:var(--sh-sm) }
.chiffre strong{ display:block; font-family:var(--display); font-size:3rem; font-weight:800; line-height:1; color:var(--ink); margin-bottom:.8rem; letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.chiffre p{ font-size:.88rem; color:var(--ink-2); line-height:1.8 }
.chiffre cite{ display:block; margin-top:.9rem; font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-style:normal }
@media (max-width:760px){ .chiffres{ grid-template-columns:1fr } }

.citation{ border-left:3px solid var(--accent); padding:.4rem 0 .4rem 1.8rem; margin:2.6rem 0 0 }
.citation p{ font-family:var(--serif); font-size:1.7rem; font-weight:400; font-style:italic; line-height:1.4; color:var(--ink) }
.citation footer{ background:none; border:none; padding:1rem 0 0; display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint) }

.encart{ background:var(--accent-dim); border:1px solid var(--accent-dim-2); border-left:3px solid var(--accent); border-radius:var(--r-sm); padding:1.5rem 1.7rem; margin-top:2.6rem }
.encart p{ font-size:.86rem; color:var(--ink-2); line-height:1.8 }
.encart p + p{ margin-top:.6rem }
.encart strong{ color:var(--ink); font-weight:600 }

.articles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; margin-top:2.6rem }
.article{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:1.9rem; display:block; text-decoration:none; color:inherit; box-shadow:var(--sh-sm); transition:border-color .25s, transform .35s cubic-bezier(.22,1,.32,1), box-shadow .35s }
.article:hover{ border-color:var(--line); transform:translateY(-5px); box-shadow:var(--sh-lg) }
.article-cat{ display:inline-block; font-family:var(--mono); padding:.26rem .7rem; border-radius:100px; font-size:.54rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.1rem }
.article h3{ font-family:var(--display); font-size:1.3rem; font-weight:700; line-height:1.2; margin-bottom:.6rem; color:var(--ink); letter-spacing:-.02em }
.article p{ font-size:.82rem; color:var(--ink-2); line-height:1.7 }

.prose{ max-width:70ch }
.prose h2{ font-family:var(--display); font-size:2rem; font-weight:700; margin:2.8rem 0 1rem; line-height:1.1; color:var(--ink); letter-spacing:-.02em }
.prose h2 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent) }
.prose h3{ font-family:var(--display); font-size:1.3rem; font-weight:700; margin:2rem 0 .6rem; line-height:1.25; color:var(--ink); letter-spacing:-.01em }
.prose p{ color:var(--ink-2); font-size:.96rem; line-height:1.9; margin-bottom:1.1rem }
.prose strong{ color:var(--ink); font-weight:600 }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.prose ul, .prose ol{ margin:0 0 1.3rem 0; padding-left:1.1rem; color:var(--ink-2) }
.prose li{ font-size:.94rem; line-height:1.8; margin-bottom:.45rem }
.prose ul{ list-style:none; padding-left:0 }
.prose ul li{ display:flex; gap:.65rem }
.prose ul li::before{ content:""; width:5px; height:5px; margin-top:.6rem; border-radius:50%; background:var(--accent); flex-shrink:0 }

.faq{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:2.6rem; box-shadow:var(--sh-sm) }
.faq details{ border-bottom:1px solid var(--line); background:var(--white) }
.faq details:last-child{ border-bottom:none }
.faq summary{ padding:1.25rem 1.5rem; cursor:pointer; font-family:var(--display); font-size:.98rem; font-weight:500; color:var(--ink); display:flex; justify-content:space-between; gap:1rem; align-items:center; list-style:none; transition:background .2s }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--accent); font-size:1.3rem; flex-shrink:0; transition:transform .25s; line-height:1 }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq summary:hover{ background:var(--paper) }
.faq p{ padding:0 1.5rem 1.4rem; font-size:.88rem; color:var(--ink-2); line-height:1.85 }

.art-meta{ display:flex; flex-wrap:wrap; gap:1.3rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-top:1.5rem }
.art-cat{ display:inline-block; font-family:var(--mono); padding:.26rem .7rem; border-radius:100px; font-size:.54rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.3rem }
.cat-finance{ background:var(--green-dim); color:var(--green); border:1px solid rgba(28,138,94,.25) }
.cat-strategie{ background:var(--accent-dim); color:var(--accent); border:1px solid var(--accent-dim-2) }
.cat-lancement{ background:var(--amber-dim); color:var(--amber); border:1px solid rgba(181,115,12,.25) }
.cat-outils{ background:var(--teal-dim); color:var(--teal); border:1px solid rgba(14,143,134,.25) }
.cat-marche{ background:var(--red-dim); color:var(--red); border:1px solid rgba(200,52,31,.25) }

.formule{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:1.4rem 1.6rem; margin:1.7rem 0 }
.formule .nom{ font-family:var(--display); font-size:.96rem; font-weight:700; color:var(--ink); margin-bottom:.7rem }
.formule dl{ display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.1rem; font-size:.84rem }
.formule dt{ font-family:var(--mono); color:var(--faint); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; padding-top:.2rem }
.formule dd{ color:var(--ink-2); line-height:1.65 }
.formule code{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.82rem; color:var(--accent); background:var(--accent-dim); padding:.1rem .35rem; border-radius:4px }

/* ── Jauge « ancien format » — diagnostic.html (carte claire) ───── */
.jauge-bloc{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:2.6rem; display:grid; grid-template-columns:280px 1fr; gap:3rem; align-items:center; box-shadow:var(--sh-md) }
.jauge{ text-align:center }
.jauge svg{ width:100%; max-width:240px; height:auto; display:block; margin:0 auto .8rem }
.jauge-note{ font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint) }
.jauge-lecture h3{ font-family:var(--display); font-size:1.7rem; font-weight:700; color:var(--ink); margin-bottom:.8rem; line-height:1.15; letter-spacing:-.02em }
.jauge-lecture > p{ color:var(--ink-2); font-size:.92rem; line-height:1.85; margin-bottom:1.6rem }
.lignes{ display:flex; flex-direction:column; gap:.7rem }
.ligne{ display:flex; align-items:center; gap:.9rem }
.ligne-nom{ font-family:var(--mono); font-size:.64rem; color:var(--ink-2); width:130px; flex-shrink:0 }
.ligne-piste{ flex:1; height:7px; background:var(--paper-2); border-radius:4px; overflow:hidden }
.ligne-part{ display:block; height:100%; border-radius:4px }
.ligne-val{ font-family:var(--display); font-size:.9rem; color:var(--ink); width:34px; text-align:right; flex-shrink:0; font-weight:700; font-variant-numeric:tabular-nums }
.etiquette{ display:inline-flex; align-items:center; font-family:var(--mono); font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); background:var(--teal-dim); border:1px solid rgba(14,143,134,.2); padding:.26rem .62rem; border-radius:100px; margin-bottom:.9rem }
@media (max-width:960px){ .jauge-bloc{ grid-template-columns:1fr; gap:2.2rem; padding:1.8rem } }

/* ── preuve-entete (methode.html) ───────────────────────────────── */
.preuve-entete{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:end; margin-bottom:3rem }
.preuve-entete p{ color:var(--ink-2); font-size:.92rem; line-height:1.85 }
@media (max-width:960px){ .preuve-entete{ grid-template-columns:1fr; gap:1.5rem } }

/* ── Formulaire & contact ───────────────────────────────────────── */
.etat{ border-radius:var(--r-sm); padding:1.1rem 1.4rem; margin-bottom:1.7rem; font-size:.88rem; line-height:1.7 }
.etat-ok{ background:var(--green-dim); border:1px solid rgba(28,138,94,.3); color:var(--ink) }
.etat-ko{ background:var(--red-dim); border:1px solid rgba(200,52,31,.3); color:var(--ink) }
.champ{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.2rem }
.champ label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint) }
.champ input, .champ textarea, .champ select{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm); padding:.8rem 1rem; color:var(--ink); font-family:var(--body); font-size:.9rem; transition:border-color .2s, box-shadow .2s }
.champ input:focus, .champ textarea:focus, .champ select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim) }
.champ textarea{ min-height:140px; resize:vertical }
.contact-grille{ display:grid; grid-template-columns:1.1fr 1fr; gap:3.5rem; align-items:start }
.coord{ list-style:none; display:flex; flex-direction:column; gap:1rem }
.coord li{ display:flex; flex-direction:column; gap:.2rem }
.coord .quoi{ font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint) }
.coord a, .coord span{ color:var(--ink-2); font-size:.94rem; text-decoration:none }
.coord a:hover{ color:var(--accent) }

@media (max-width:960px){
  .entete{ padding:7.5rem 1.3rem 3.5rem }
  .pourqui{ grid-template-columns:1fr }
  .module{ grid-template-columns:1fr; gap:1.3rem; padding:1.7rem 1.4rem }
  .livrables{ grid-template-columns:1fr 1fr }
  .articles{ grid-template-columns:1fr }
  .contact-grille{ grid-template-columns:1fr; gap:2.5rem }
}
@media (max-width:480px){
  .entete{ padding:6.5rem 1.1rem 3rem }
  .livrables{ grid-template-columns:1fr }
}