/* Mizan — système partagé des pages publiques (index, plateforme, tarifs, drs).
   Palette = charte YOKARZA (marine, or) sur papier chaud — refonte du 30/09/2026 d'après les
   maquettes « Accueil desktop / mobile / Espace régulateur ». Polices Spectral + IBM Plex,
   AUTO-HÉBERGÉES (assets/fonts.css) : le site promet qu'aucune ressource ne part chez un tiers. */
@import url("fonts.css");
  :root{
    --navy:#0C2233; --navy-2:#123249; --navy-3:#3A4A58; --gold:#8A6417; --gold-2:#C99A3B; --gold-3:#AE8329;
    --bg:#F6F4EE; --surface:#ffffff; --surface-2:#EFECE4; --surface-3:#E4E0D6;
    --ink:#14202B; --muted:#5A6874; --line:#DCD8CE;
    --on-dark:#E8EDF1; --on-dark-muted:#B7C3CD; --line-dark:rgba(255,255,255,.14);
    --serif:Spectral,"Iowan Old Style","Palatino Linotype",Georgia,serif;
    --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --maxw:1200px;
    /* Héros : papier en clair, marine en sombre — il suit le thème (demande du 30/09/2026). */
    --hero-bg:#EFECE4; --hero-ink:#14202B; --hero-muted:#3A4A58; --hero-line:#B9B3A6; --hero-eyebrow:#8A6417;
  }
  /* Thème : la préférence système s'applique tant que le visiteur n'a pas choisi (bouton de la
     barre, mémorisé dans le navigateur — `data-theme` sur <html>). */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --navy:#08131C; --navy-2:#8FBEDD; --navy-3:#B7C3CD; --gold:#D9B968; --gold-2:#C99A3B; --gold-3:#D9B968;
      --bg:#101C27; --surface:#172633; --surface-2:#1B2B38; --surface-3:#223544;
      --ink:#E8EFF4; --muted:#93A6B3; --line:#2A3B49;
      --hero-bg:#08131C; --hero-ink:#FFFFFF; --hero-muted:#B7C3CD; --hero-line:rgba(255,255,255,.14); --hero-eyebrow:#C99A3B;
    }
  }
  :root[data-theme="dark"]{
      --navy:#08131C; --navy-2:#8FBEDD; --navy-3:#B7C3CD; --gold:#D9B968; --gold-2:#C99A3B; --gold-3:#D9B968;
      --bg:#101C27; --surface:#172633; --surface-2:#1B2B38; --surface-3:#223544;
      --ink:#E8EFF4; --muted:#93A6B3; --line:#2A3B49;
      --hero-bg:#08131C; --hero-ink:#FFFFFF; --hero-muted:#B7C3CD; --hero-line:rgba(255,255,255,.14); --hero-eyebrow:#C99A3B;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6}
  a{color:inherit}
  img,svg{max-width:100%}
  .wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px)}
  section{padding:clamp(56px,9vw,110px) 0}

  /* ---- nav ---- */
  header.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 86%,transparent);
    backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--line)}
  .nav-in{display:flex; align-items:center; gap:20px; height:64px}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--serif);
    font-weight:600; font-size:22px; color:var(--ink); letter-spacing:.01em}
  .brand .dot{color:var(--gold-2)}
  /* Le dessin du studio n'est pas carré (413×328) : on cale sur la HAUTEUR,
     sinon `preserveAspectRatio` le centre dans un carré et il paraît rapetissé. */
  /* 36px : à 26px les fléaux de la balance (traits fins) ne se lisaient plus, surtout sur fond sombre. */
  .brand svg{height:36px; width:auto; flex:none}
  .nav-links{margin-left:auto; display:flex; align-items:center; gap:26px}
  .nav-links a:not(.btn){text-decoration:none; color:var(--muted); font-size:14.5px; font-weight:500}
  .nav-links a:not(.btn):hover{color:var(--ink)}
  .btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:600;
    border-radius:9px; padding:11px 18px; font-size:14.5px; transition:transform .15s, background .2s, border-color .2s}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--navy-2); color:#fff; border:1px solid var(--navy-2)}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn-primary{color:#0A1620} }
  :root[data-theme="dark"] .btn-primary{color:#0A1620}
  .btn-primary:hover{background:var(--navy); border-color:var(--navy)}
  .btn-gold{background:var(--gold-2); color:#0C2233; border:1px solid var(--gold-2)}
  .btn-gold:hover{background:var(--gold-3); border-color:var(--gold-3)}
  .btn-light{background:transparent; color:#fff; border:1px solid var(--line-dark)}
  .btn-light:hover{border-color:var(--gold-2)}
  .btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
  .btn-ghost:hover{border-color:var(--gold-2)}
  .nav .btn{margin-left:4px}
  .nav-pages{display:flex; align-items:center; gap:26px}
  /* Bouton de menu — visible seulement quand les liens ne tiennent plus en ligne.
     Cible tactile 44px : c'est le minimum praticable au pouce. */
  .nav-burger{display:none; align-items:center; justify-content:center; width:44px; height:44px;
    border:0; background:none; color:var(--ink); cursor:pointer; border-radius:10px}
  .nav-burger:hover{background:var(--surface-2)}
  .nav-burger svg{width:22px; height:22px}
  .nav-burger:focus-visible{outline:2px solid var(--navy-2); outline-offset:2px}

  @media(max-width:720px){
    /* Les liens ne DISPARAISSENT plus : ils passent dans un panneau déroulant.
       Les masquer purement et simplement laissait un téléphone sans aucun moyen
       d'atteindre les autres pages — seul le bouton d'appel restait. */
    .nav-burger{display:inline-flex}
    .nav-pages{
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; align-items:stretch; gap:0;
      background:var(--bg); border-bottom:1px solid var(--line);
      box-shadow:0 12px 24px rgba(14,30,43,.08);
      padding:6px 0; display:none;
    }
    .nav-links[data-menu="ouvert"] .nav-pages{display:flex}
    .nav-pages a{padding:13px clamp(18px,5vw,28px); font-size:16px; color:var(--ink)}
    .nav-pages a[aria-current="page"]{color:var(--navy-2); font-weight:600}
    .nav-pages a + a{border-top:1px solid var(--line)}
    /* Le bouton d'appel reste dans la barre, mais raccourci : c'est l'action,
       elle ne doit pas repousser la marque hors de l'écran. */
    .nav-links .btn{white-space:nowrap; padding:9px 14px; font-size:14px}
  }
  /* Petits écrans : la barre porte trois objets (marque, appel à l'action, menu) et
     ne se replie pas — à 375px ils débordaient de 7px, la page entière glissait
     latéralement. On resserre les gouttières et l'échelle du bouton plutôt que de
     sacrifier l'un des trois. */
  @media(max-width:520px){
    .nav-in{gap:10px}
    .nav-links{gap:6px}
    .brand{font-size:19px; gap:8px}
    .brand svg{height:32px}
    .nav-links .btn{padding:8px 12px; font-size:13px}
  }

  /* Sous 380px (iPhone SE et assimilés), même resserrée la barre déborde encore de 8px.
     On garde les TROIS fonctions et on retire le mot : la marque se lit au dessin, et le
     nom accessible reste porté par l'`aria-label` du lien. */
  @media(max-width:380px){
    .brand{font-size:0; gap:0}
    .brand svg{height:34px}
  }

  /* Sans JavaScript, le panneau ne peut pas s'ouvrir : les liens restent en ligne. */
  html:not(.js) .nav-burger{display:none}
  html:not(.js) .nav-pages{position:static; display:flex; flex-wrap:wrap; gap:14px;
    background:none; border:0; box-shadow:none; padding:0}

  /* ---- shared ---- */
  .eyebrow{font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
    color:var(--gold); display:flex; align-items:center; gap:12px; margin:0 0 18px}
  h1,h2,h3{font-family:var(--serif); font-weight:500; text-wrap:balance; letter-spacing:-.005em}
  h2{font-size:clamp(28px,4.2vw,46px); line-height:1.12; margin:0 0 .5em}
  .lead{font-size:clamp(16px,1.9vw,20px); line-height:1.55; color:var(--muted); max-width:62ch}
  .lead strong{color:var(--ink); font-weight:600}
  .center{text-align:center}
  .center .eyebrow{justify-content:center}
  .center .lead{margin-left:auto; margin-right:auto}

  /* ---- hero ---- */
  .hero{padding-top:clamp(48px,7vw,84px); position:relative; overflow:hidden}
  .hero h1{font-size:clamp(32px,5.6vw,62px); line-height:1.04; margin:.1em 0 .4em; max-width:18ch}
  .hero .lead{font-size:clamp(17px,2.1vw,22px)}
  .hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
  .hero-cta .espaces{display:flex; flex-wrap:wrap; gap:14px}
  /* Le débord de -40px datait de la marque carrée dessinée à la main, dont on ne
     coupait qu'un angle. La marque du studio est large (413×328) et son plateau
     droit tombait dans le débord : un logo tronqué, pas un filigrane qui déborde.
     Le dessin tient donc entier dans la colonne. */
  .hero-mark{position:absolute; right:clamp(12px,2.5vw,48px); top:40px; width:min(38vw,420px);
    height:auto; opacity:.06; pointer-events:none}
  @media(max-width:820px){ .hero-mark{display:none} }

  /* ---- two métiers ---- */
  .duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px)}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:clamp(22px,3vw,34px); box-shadow:0 1px 0 rgba(0,0,0,.02)}
  .card .tag{display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    font-weight:700; color:var(--gold); border:1px solid var(--line); border-radius:20px; padding:4px 12px; margin-bottom:14px}
  .card h3{font-size:23px; margin:0 0 10px; color:var(--ink)}
  .card p{margin:0; color:var(--muted); font-size:15.5px}
  .flow{margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
    font-size:14.5px; color:var(--muted)}
  .flow b{color:var(--ink); font-weight:600; background:var(--surface-2); border:1px solid var(--line);
    border-radius:8px; padding:7px 13px}
  .flow .arw{color:var(--gold-2); font-weight:700}
  /* ---- 3 piliers audit ---- */
  .pillars-h{font-family:var(--serif); font-weight:600; font-size:clamp(19px,2.4vw,26px); color:var(--ink); margin:48px 0 6px}
  .pillars-s{color:var(--muted); font-size:15.5px; margin:0 0 22px}
  .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,22px)}
  .pillar{background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--gold-2); border-radius:14px; padding:22px 20px}
  .pillar h4{font-family:var(--serif); font-weight:600; font-size:20px; color:var(--navy-2); margin:0 0 8px}
  .pillar .pdef{margin:0; color:var(--ink); font-size:15px; line-height:1.5}
  .pillar .prisk{margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; line-height:1.45}
  .pillar .prisk b{display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:5px}

  /* ---- stats (marché) ---- */
  .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px)}
  .stat{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(22px,2.6vw,30px)}
  .stat .big{font-family:var(--serif); font-weight:600; font-size:clamp(34px,4.6vw,52px); color:var(--navy-2); line-height:1}
  .stat .lbl{margin-top:12px; color:var(--muted); font-size:15px; line-height:1.5}

  /* ---- priorités ---- */
  .prio{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,24px)}
  .prio .card h3{font-size:19px; display:flex; gap:10px; align-items:flex-start}
  .prio .num{font-family:var(--serif); color:var(--gold-2); font-size:19px; line-height:1.35}

  /* ---- plateforme ---- */
  .modsec{margin-top:26px}
  .modsec > h3{font-size:15px; text-transform:uppercase; letter-spacing:.12em; color:var(--navy-2);
    font-family:var(--sans); font-weight:700; margin:0 0 14px; display:flex; align-items:center; gap:12px}
  .modsec > h3::after{content:""; height:1px; background:var(--line); flex:1}
  .mods{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
  .mod{display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line);
    border-radius:11px; padding:12px 15px; font-size:14.5px; color:var(--ink)}
  .mod i{width:7px; height:7px; border-radius:2px; background:var(--gold-2); flex:none}

  /* ---- preuve ---- */
  .proof{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line);
    border-radius:16px; overflow:hidden; background:var(--surface)}
  .proof-col{padding:clamp(22px,3vw,34px)}
  .proof-col:first-child{border-right:1px solid var(--line)}
  .proof-col h3{font-size:19px; margin:0 0 18px}
  .proof-col.reveal-side h3{color:var(--navy-2)}
  .proof-col.fix-side{background:var(--surface-2)}
  .proof-col.fix-side h3{color:var(--gold)}
  .proof-list{list-style:none; margin:0; padding:0; display:grid; gap:14px}
  .proof-list li{font-size:15px; color:var(--muted); line-height:1.5; padding-left:20px; position:relative}
  .proof-list li::before{content:""; position:absolute; left:0; top:8px; width:8px; height:8px;
    border-radius:2px; background:var(--gold-2)}
  @media(max-width:720px){ .proof{grid-template-columns:1fr} .proof-col:first-child{border-right:0; border-bottom:1px solid var(--line)} }

  /* ---- risque (bandeau) ---- */
  .band{background:var(--navy); color:#eaf1f7; border-radius:20px; padding:clamp(30px,5vw,60px)}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .band{background:var(--surface-2); color:var(--ink); border:1px solid var(--line)} }
  :root[data-theme="dark"] .band{background:var(--surface-2); color:var(--ink); border:1px solid var(--line)}
  .band .eyebrow{color:var(--gold-2)}
  .band h2{color:#fff}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .band h2{color:var(--ink)} }
  :root[data-theme="dark"] .band h2{color:var(--ink)}
  .band .lead{color:#c3d4e2}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .band .lead{color:var(--muted)} }
  :root[data-theme="dark"] .band .lead{color:var(--muted)}
  .band .lead strong{color:#fff}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .band .lead strong{color:var(--ink)} }
  :root[data-theme="dark"] .band .lead strong{color:var(--ink)}
  .band .chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
  .band .chips span{border:1px solid rgba(255,255,255,.22); border-radius:24px; padding:8px 15px; font-size:14px}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .band .chips span{border-color:var(--line)} }
  :root[data-theme="dark"] .band .chips span{border-color:var(--line)}

  /* ---- déploiement ---- */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,24px)}
  .step{position:relative; padding-top:22px; border-top:2px solid var(--gold-2)}
  .step .ph{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--gold); margin-bottom:8px}
  .step h3{font-size:20px; margin:0 0 8px}
  .step p{margin:0; color:var(--muted); font-size:15px}

  /* ---- CTA ---- */
  .cta{background:var(--surface); border:1px solid var(--line); border-radius:20px;
    padding:clamp(34px,6vw,66px); text-align:center}
  .cta h2{margin-bottom:.35em}
  .cta .lead{margin:0 auto 30px}
  .cta-row{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}

  /* ---- footer ---- */
  footer{border-top:1px solid var(--line); padding:44px 0; color:var(--muted); font-size:14px}
  .foot-in{display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; justify-content:space-between}
  footer a{color:var(--navy-2); text-decoration:none}
  footer a:hover{color:var(--gold)}
  .foot-note{font-size:12.5px; max-width:56ch; margin-top:14px; opacity:.85}

  /* grids -> 1 col mobile */
  @media(max-width:760px){ .duo,.stats,.prio,.steps,.pillars{grid-template-columns:1fr} }

  /* reveal on scroll */
  .js .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
  .js .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1; transform:none; transition:none} }

  /* ================= Refonte 30/09/2026 — composants des maquettes ================= */
  /* ---- section sombre (héros, espace régulateur, pied) ---- */
  .dark{background:var(--navy); color:var(--on-dark)}
  .dark h1,.dark h2,.dark h3{color:#fff}
  .dark .lead{color:var(--on-dark-muted)}
  .dark .lead strong{color:#fff}
  .dark .eyebrow{color:var(--gold-2)}
  .dark a{color:#fff}
  /* Barre de navigation figée en sombre (option `on-dark`) — l'accueil ne l'utilise plus : la
     barre suit le thème choisi, le héros seul reste sombre. */
  header.nav.on-dark{background:color-mix(in srgb,var(--navy) 88%,transparent); border-bottom-color:var(--line-dark)}
  header.nav.on-dark .brand,header.nav.on-dark .nav-links a:not(.btn){color:#fff}
  header.nav.on-dark .nav-links a:not(.btn){opacity:.85}
  header.nav.on-dark .nav-links a:not(.btn):hover{opacity:1}
  header.nav.on-dark .nav-burger{color:#fff}
  header.nav.on-dark .nav-burger:hover{background:rgba(255,255,255,.12)}
  header.nav.on-dark .brand svg [style*="--ink"]{fill:#fff}
  @media(max-width:720px){
    header.nav.on-dark .nav-pages{background:var(--navy); border-bottom-color:var(--line-dark)}
    header.nav.on-dark .nav-pages a{color:#fff}
    header.nav.on-dark .nav-pages a + a{border-top-color:var(--line-dark)}
  }

  /* ---- héros en deux colonnes ---- */
  .hero2{padding:clamp(56px,8vw,110px) 0 clamp(56px,8vw,110px); background:var(--hero-bg); color:var(--hero-ink)}
  .hero2 h1{color:var(--hero-ink)}
  .hero2 .lead{color:var(--hero-muted)} .hero2 .lead strong{color:var(--hero-ink)}
  .hero2 .eyebrow{color:var(--hero-eyebrow)}
  .hero2 .btn-light{color:var(--hero-ink); border-color:var(--hero-line)}
  .hero2 .ctrl{box-shadow:0 24px 60px rgba(12,34,51,.22)}
  .hero2 .wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center}
  .hero2 h1{font-size:clamp(36px,5.2vw,64px); line-height:1.06; margin:.15em 0 .45em}
  .hero2 .lead{font-size:clamp(17px,1.7vw,20px); max-width:52ch}
  .hero2 .hero-cta{margin-top:30px}
  /* Trois actions : sur grand écran, l'action principale à gauche et les deux autres à sa suite,
     toutes à la même hauteur ; sous 640 px, chacune sur sa ligne et pleine largeur — trois
     boutons de largeurs différentes qui s'enroulent se lisent mal. */
  .hero2 .hero-cta .btn{justify-content:center; text-align:center}
  @media(max-width:640px){ .hero2 .hero-cta{flex-direction:column} .hero2 .hero-cta .btn{width:100%} .hero2 .hero-cta .espaces{flex-direction:column} }
  @media(max-width:900px){ .hero2 .wrap{grid-template-columns:1fr} }

  /* ---- la carte « contrôles rejoués à l'acte » ---- */
  /* La carte est une illustration : toujours claire, même en mode sombre — ses couleurs sont fixes. */
  .ctrl{background:#fff; color:#14202B; border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.28); overflow:hidden; font-size:14.5px}
  .ctrl-head{padding:18px 22px 14px; border-bottom:1px solid #DCD8CE; display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
  .ctrl-head .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#5A6874; margin:0 0 4px}
  .ctrl-head h3{font-size:19px; margin:0; color:#14202B}  /* la carte est claire dans une section sombre */
  .ctrl-head .badge{font-size:12px; color:#5A6874; border:1px solid #DCD8CE; border-radius:99px; padding:3px 10px; white-space:nowrap}
  .ctrl ul{list-style:none; margin:0; padding:0}
  .ctrl li{display:flex; align-items:center; gap:12px; padding:13px 22px; border-bottom:1px solid #DCD8CE}
  .ctrl li .ok{color:#2F6B4A; font-weight:700}
  .ctrl li.blocked{background:#FBF4E6}
  .ctrl li.blocked .ko{color:#8A3A1E; font-weight:700}
  .ctrl li.blocked .tag{margin-left:auto; font-size:12px; font-weight:700; color:#8A3A1E}
  .ctrl-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 22px; background:#EFECE4; color:#5A6874; font-size:13px}
  .ctrl-foot .btn-off{background:#CBD3DA; color:#5A6874; border-radius:6px; padding:10px 14px; font-weight:600; font-size:13px; cursor:not-allowed; flex:none; max-width:100%}
  .ctrl-foot .btn-off s{text-decoration-thickness:2px; text-decoration-color:#8A3A1E; font-size:14px}
  @media(max-width:520px){ .ctrl li{padding:11px 16px; font-size:13.5px} .ctrl-head,.ctrl-foot{padding-left:16px; padding-right:16px} .ctrl-foot{flex-direction:column; align-items:flex-start} }

  /* ---- bandeau du référentiel ---- */
  .refstrip{background:var(--surface); border-bottom:1px solid var(--line); padding:26px 0}
  .refstrip .k{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--muted); margin:0 0 10px}
  .refstrip ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 28px; font-family:var(--mono); font-size:13.5px; color:var(--navy-2)}
  @media(max-width:640px){ .refstrip ul{gap:8px} .refstrip li{border:1px solid var(--line); border-radius:6px; padding:5px 9px; font-size:12.5px} }

  /* ---- grille de cartes (contrôles) ---- */
  .cards4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,22px)}
  .ccard{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:26px 26px 28px}
  .ccard .n{font-family:var(--mono); font-size:12px; color:var(--gold); margin:0 0 12px}
  .ccard h3{font-size:22px; line-height:1.2; margin:0 0 12px}
  .ccard p{margin:0; color:var(--muted); font-size:15px; line-height:1.55}
  @media(max-width:1000px){ .cards4{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media(max-width:560px){ .cards4{grid-template-columns:1fr} }

  /* ---- en-tête de section en deux colonnes (titre / paragraphe) ---- */
  .split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,4vw,60px); align-items:end; margin-bottom:clamp(28px,4vw,44px)}
  .split .lead{max-width:none}
  @media(max-width:820px){ .split{grid-template-columns:1fr; align-items:start} }

  /* ---- grille des domaines (bordures partagées, comme un tableau) ---- */
  .domains{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--surface)}
  .domain{padding:26px 28px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0}
  .domain:nth-child(4n){border-right:0}
  .domain:nth-last-child(-n+4){border-bottom:0}
  .domain h3{font-size:21px; margin:0 0 10px}
  .domain p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.55}
  .domain.dark{background:var(--navy); color:var(--on-dark)}
  .domain.dark p{color:var(--on-dark-muted)}
  @media(max-width:1000px){
    .domains{grid-template-columns:repeat(2,minmax(0,1fr))}
    .domain:nth-child(4n){border-right:1px solid var(--line)}
    .domain:nth-child(2n){border-right:0}
    .domain:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
    .domain:nth-last-child(-n+2){border-bottom:0}
  }
  @media(max-width:560px){
    .domains{grid-template-columns:1fr}
    .domain,.domain:nth-child(2n){border-right:0; border-bottom:1px solid var(--line)}
    .domain:last-child{border-bottom:0}
    .domain{padding:20px 18px 22px}
  }

  /* ---- tableau à deux colonnes (audit / contrôle imposé) ---- */
  .tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:6px; background:var(--surface)}
  .tbl{width:100%; border-collapse:collapse; font-size:15px}
  .tbl th{background:var(--navy); color:#fff; text-align:left; font-weight:600; font-size:14px; padding:14px 26px}
  .tbl td{padding:16px 26px; border-top:1px solid var(--line); color:var(--ink); vertical-align:top; line-height:1.5}
  .tbl td.mono{font-family:var(--mono); font-size:13.5px; color:var(--navy-2); white-space:nowrap}
  @media(max-width:640px){ .tbl th,.tbl td{padding:12px 16px; font-size:14px} .tbl td.mono{white-space:normal} }

  /* ---- piliers (refonte : filet supérieur marine) ---- */
  .pillar{border-radius:0; border:0; border-top:2px solid var(--navy-2); background:transparent; padding:18px 0 0}
  .pillar h4{color:var(--ink); font-weight:500; font-size:24px}
  .pillar .prisk{border-top:0; padding-top:0; margin-top:6px; color:var(--muted); font-size:14px}
  .pillar .prisk b{display:inline; font-size:14px; letter-spacing:0; text-transform:none; color:var(--muted); font-weight:400}
  .pillar .prisk b::after{content:" : "}

  /* ---- espace régulateur : cartes de documents ---- */
  .reg{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center}
  @media(max-width:900px){ .reg{grid-template-columns:1fr} }
  .docs{display:grid; gap:16px}
  .doc{display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:20px; align-items:center; background:rgba(255,255,255,.05); border:1px solid var(--line-dark); border-radius:10px; padding:22px 24px; color:inherit; text-decoration:none}
  .doc:hover{border-color:var(--gold-2)}
  .doc .ic{width:52px; height:52px; border-radius:6px; background:#EFECE4; display:flex; align-items:center; justify-content:center}
  .doc .ic i{display:block; width:26px; height:3px; background:#123249; border-radius:2px; box-shadow:0 7px 0 #C99A3B,0 14px 0 #123249}
  .doc h3{font-size:20px; margin:0 0 4px; line-height:1.25}
  .doc p{margin:0; font-size:13.5px; color:var(--on-dark-muted)}
  .doc .st{font-size:12px; font-weight:600; color:#0C2233; background:#E7C77A; border-radius:99px; padding:5px 12px; white-space:nowrap}
  @media(max-width:520px){ .doc{grid-template-columns:1fr; gap:10px} .doc .ic{display:none} .doc .st{justify-self:start} }

  /* ---- étapes du déploiement (refonte : puces) ---- */
  .step{border-top:0; padding-top:0}
  .step .ph{display:flex; align-items:center; gap:8px; color:var(--navy-3)}
  .step .ph::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--navy-2); flex:none}
  .step.s2 .ph::before{background:var(--navy-3)}
  .step.s3 .ph::before{background:transparent; border:2px solid var(--navy-3); box-sizing:border-box}

  /* ---- CTA (refonte : deux colonnes, sans carte) ---- */
  .cta2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,60px); align-items:center}
  .cta2 .lead{max-width:48ch}
  .cta2 .mail{font-size:15px; color:var(--muted); margin-top:18px}
  .cta2 .mail a{color:var(--navy-2)}
  .cta2 .aside{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:clamp(22px,3vw,34px)}
  .cta2 .aside h3{font-size:20px; margin:0 0 8px}
  .cta2 .aside p{color:var(--muted); font-size:15px; margin:0 0 18px}
  .cta2 .aside ul{margin:0 0 20px; padding-left:18px; color:var(--ink); font-size:15px; line-height:1.7}
  @media(max-width:820px){ .cta2{grid-template-columns:1fr} }

  /* ---- pied de page sombre ---- */
  footer.dark{border-top:0; color:var(--on-dark-muted)}
  footer.dark .brand{color:#fff}
  footer.dark .brand svg [style*="--ink"]{fill:#fff}
  footer.dark a{color:#fff}
  footer.dark a:hover{color:var(--gold-2)}
  footer.dark .foot-links{display:flex; flex-wrap:wrap; gap:22px; font-size:14.5px}
  footer.dark .foot-in{padding-bottom:22px; border-bottom:1px solid var(--line-dark); margin-bottom:22px}
  footer.dark .foot-note{opacity:1; max-width:70ch}

  /* ---- référentiel appliqué : trois colonnes, un texte = une règle appliquée ---- */
  .refs-sec{background:var(--surface); border-bottom:1px solid var(--line)}
  .refs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px)}
  .refcol{border-top:2px solid var(--navy-2); padding-top:18px; min-width:0}
  .refcol h3{font-size:21px; margin:0 0 16px; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px}
  .refcol h3 span{font-family:var(--sans); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gold)}
  .refcol dl{margin:0}
  .refcol dt{font-family:var(--mono); font-size:13px; color:var(--navy-2); margin:0}
  .refcol dd{margin:3px 0 13px; color:var(--muted); font-size:14.5px; line-height:1.5}
  .refnote{margin:6px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); font-style:italic}
  @media(max-width:900px){ .refs{grid-template-columns:1fr} .refcol{padding-top:14px} }

  /* ---- bouton de thème ---- */
  .theme-toggle{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px;
    border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; flex:none}
  .theme-toggle:hover{border-color:var(--gold-2)}
  .theme-toggle:focus-visible{outline:2px solid var(--navy-2); outline-offset:2px}
  .theme-toggle svg{width:18px; height:18px}
  .theme-toggle .moon{display:none}
  :root[data-theme="dark"] .theme-toggle .sun{display:none}
  :root[data-theme="dark"] .theme-toggle .moon{display:block}
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-toggle .sun{display:none} :root:not([data-theme="light"]) .theme-toggle .moon{display:block} }
  header.nav.on-dark .theme-toggle{color:#fff; border-color:var(--line-dark)}
  html:not(.js) .theme-toggle{display:none}