/* ==========================================================================
   Valdren : site vitrine
   Feuille unique partagée FR/EN. Structure :
   1. Fonts  2. Tokens  3. Base  4. Atomes partagés  5. Nav  6. Héro
   7. Bandeau secteurs  8. Constat + barres  9. Répartition  10. Méthode
   11. Plateforme  12. Intégrations  13. Souveraineté  14. Pourquoi
   15. CTA  16. Footer  17. Pages annexes  18. Responsive  19. Reduced motion
   ========================================================================== */

/* ---------- 1. Fonts (auto-hébergées, subset latin, SIL OFL 1.1) ---------- */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 2. Tokens ---------- */
:root{
  --ink:#1b2430;
  --ink-hover:#0f1622;
  --teal:#2f7d74;
  --teal-hover:#256259;
  --teal-light:#5ba99f;
  --teal-pale:#9fd4cc;
  --bg:#f4f6f9;
  --bg-alt:#eef1f5;
  --bg-card:#fafbfd;
  --line:#e3e7ee;
  --line-2:#dde2ea;
  --line-3:#e6eaf0;
  --line-4:#d5dae2;
  --line-5:#c8cfd9;
  --line-6:#d8dee7;
  --tx-2:#3a4452;
  --tx-3:#4a5462;
  --tx-muted:#5a636e;
  --tx-soft:#6b7482;
  --tx-faint:#8a93a1;
  --tx-ghost:#9aa3b0;
  --dk-tx:#e6edf3;
  --dk-muted:#8b97a8;
  --sev-crit:#9d4237;
  --sev-high:#96793d;
  --sev-med:#6b7480;
  --sev-low:#35705f;
  --font-sans:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}

/* ---------- 3. Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-hover)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-5);border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#aab3c0;background-clip:content-box}
::selection{background:#d9e8e5;color:var(--ink)}
@keyframes rowSettle{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes flowDash{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
/* Reveal au scroll : masqué uniquement quand JS est présent (html.js) */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
html.js .rv.in{opacity:1;transform:translateY(0)}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
.sov a:focus-visible,.sov button:focus-visible,.footer a:focus-visible{outline-color:var(--teal-light)}

/* ---------- 4. Atomes partagés ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;font-size:13px}
.skip-link:focus{left:0;color:#fff}

.wrap{max-width:1140px;margin:0 auto;padding:96px 28px}
.wrap--strip{padding:24px 28px}
.wrap--method{padding:96px 28px 72px}
.wrap--sov{padding:100px 28px}
.wrap--cta{padding:96px 28px 104px}

.sec{background:#fff;border-bottom:1px solid var(--line)}
.sec--alt{background:var(--bg-alt);border-bottom:1px solid var(--line)}

.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.kicker--dark{color:var(--teal-light)}
.sec-title{margin:0 0 16px;font-size:clamp(27px,4vw,34px);font-weight:700;letter-spacing:-.8px;line-height:1.15}
.sec-lead{margin:0;font-size:16px;color:var(--tx-2);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.lead-punch{color:var(--ink);font-weight:600}
.sub-label{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-faint);margin-bottom:12px}

.btn-primary{display:flex;align-items:center;justify-content:center;height:46px;padding:0 24px;background:var(--ink);color:#fff;border-radius:9px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.btn-primary:hover{background:var(--ink-hover);color:#fff}
.btn-primary--nav{height:38px;padding:0 18px;border-radius:8px;font-size:12px}
.btn-ghost{display:flex;align-items:center;gap:8px;height:46px;padding:0 20px;border:1px solid var(--line-5);background:#fff;color:var(--tx-2);border-radius:9px;font-size:13px;font-weight:500}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}

.logo-mark{position:relative;width:32px;height:32px;border-radius:8px;background:var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.logo-mark b{color:#fff;font-family:var(--font-mono);font-weight:700;font-size:16px;line-height:1}
.logo-mark i{position:absolute;top:5px;right:5px;width:4px;height:4px;background:var(--teal-light)}
.logo-mark--sm{width:22px;height:22px;border-radius:6px}
.logo-mark--sm b{font-size:11px}
.logo-mark--sm i{top:3.5px;right:3.5px;width:3px;height:3px}
.logo-mark--ft{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.08)}
.logo-mark--ft b{font-size:13px}
.logo-mark--ft i{top:4px;right:4px;width:3px;height:3px}
.logo-mark--xl{width:78px;height:78px;border-radius:18px;box-shadow:0 14px 34px rgba(20,26,36,.22)}
.logo-mark--xl b{font-size:34px}
.logo-mark--xl i{top:12px;right:12px;width:7px;height:7px}

.dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}
.dot--pulse{animation:pulseDot 2.4s ease-in-out infinite}
.sq{width:5px;height:5px;background:var(--teal-light);flex:none}
.demo-tag{font-family:var(--font-mono);font-size:9px;color:var(--tx-ghost);border:1px solid var(--line-3);background:#fff;padding:2px 6px;border-radius:4px;white-space:nowrap}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.card-grid--18{gap:18px}

/* ---------- 5. Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(244,246,249,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1140px;margin:0 auto;padding:0 28px;height:62px;display:flex;align-items:center;gap:12px}
.nav-brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.nav-brand:hover{color:var(--ink)}
.wordmark{font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:30px;font-size:13.5px}
.nav-links a{color:var(--tx-muted);white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-spacer{flex:1}
.lang-btn{font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--tx-muted);border:1px solid var(--line-4);background:#fff;border-radius:7px;padding:5px 10px}
.lang-btn:hover{color:var(--ink);border-color:var(--ink)}
/* Menu mobile (disclosure natif <details>, sans JS) : masqué tant que .nav-links est visible */
.nav-menu{display:none;position:relative}
.nav-toggle{list-style:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-4);background:#fff;border-radius:8px;cursor:pointer}
.nav-toggle::-webkit-details-marker{display:none}
.nav-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:16px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .2s ease,background .2s ease}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
.nav-toggle-bars::before{top:-5px}
.nav-toggle-bars::after{top:5px}
.nav-menu[open] .nav-toggle-bars{background:transparent}
.nav-menu[open] .nav-toggle-bars::before{transform:translateY(5px) rotate(45deg)}
.nav-menu[open] .nav-toggle-bars::after{transform:translateY(-5px) rotate(-45deg)}
.nav-drop{position:absolute;top:calc(100% + 12px);right:0;min-width:210px;display:flex;flex-direction:column;gap:1px;background:rgba(244,246,249,.98);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:0 18px 44px rgba(20,26,36,.16)}
.nav-drop a{color:var(--tx-muted);font-size:14px;padding:9px 12px;border-radius:7px;white-space:nowrap}
.nav-drop a:hover{color:var(--ink);background:var(--bg-alt)}

/* ---------- 6. Héro ---------- */
.hero{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#f4f6f9 0%,#eef1f5 100%)}
.hero-inner{max-width:1140px;margin:0 auto;padding:clamp(48px,7vw,84px) 28px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:clamp(32px,5vw,56px);align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-4);background:#fff;border-radius:99px;padding:5px 13px;font-family:var(--font-mono);font-size:11.5px;color:var(--tx-muted);margin-bottom:26px}
.hero h1{margin:0 0 20px;font-size:clamp(34px,5.2vw,52px);line-height:1.08;font-weight:700;letter-spacing:-1.2px}
.hero h1 span{color:var(--teal)}
.hero-lead{margin:0 0 30px;font-size:17.5px;line-height:1.65;color:var(--tx-2);max-width:46ch;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.hero-ctas{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-proofs{display:flex;gap:26px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.proof-t{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--ink)}
.proof-d{font-size:12px;color:var(--tx-faint)}

/* Vignette de triage */
.vign-wrap{align-self:end}
.vign{background:#fff;border:1px solid var(--line-2);border-radius:14px 14px 0 0;border-bottom:none;box-shadow:0 24px 64px rgba(20,26,36,.10);overflow:hidden}
.vign-head{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-bottom:1px solid var(--line-3);background:var(--bg-card)}
.vign-crumb{font-family:var(--font-mono);font-size:11.5px;color:var(--tx-soft)}
.vign-crumb b{color:var(--ink)}
.vign-chip{padding:1px 7px;border-radius:5px;background:var(--bg-alt);color:var(--tx-soft);font-size:10.5px;font-family:var(--font-mono)}
.vign-spacer{flex:1}
.vign-phase{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;color:var(--tx-muted);background:var(--bg-alt);border:1px solid var(--line-2);border-radius:6px;padding:2px 8px}
.vign-body{padding:10px 12px 0}
.vign-cols{display:grid;grid-template-columns:52px 128px 1fr 112px;gap:10px;padding:4px 10px 8px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-ghost)}
.vign-rows{display:flex;flex-direction:column;gap:5px;padding-bottom:12px;position:relative}
.vign-row{display:grid;grid-template-columns:52px 128px 1fr 112px;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line-3);border-radius:8px;background:#fff;animation:rowSettle .5s cubic-bezier(.22,.61,.36,1) both}
.vign-row:nth-child(2){animation-delay:70ms}
.vign-row:nth-child(3){animation-delay:140ms}
.vign-row:nth-child(4){animation-delay:210ms}
.vign-row:nth-child(5){animation-delay:280ms}
.vign-score{display:inline-flex;align-items:center;gap:6px}
.vign-num{font-family:var(--font-mono);font-size:11.5px;font-weight:600}
.vign-id{font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--teal)}
.vign-pkg{font-size:11.5px;color:var(--tx-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sev{width:8px;height:8px;border-radius:2px;flex:none;transition:background .35s ease}
.sev-crit{background:var(--sev-crit)}
.sev-high{background:var(--sev-high)}
.sev-med{background:var(--sev-med)}
.sev-low{background:var(--sev-low)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:10.5px;font-weight:600;line-height:1.3;padding:3px 10px;border-radius:99px;justify-self:center;transition:all .35s ease}
.verd-aff{color:var(--sev-crit);background:#f6edec}
.verd-lim{color:var(--sev-high);background:#f5f0e4}
.verd-fix{color:var(--sev-low);background:#e8f0ed}
.verd-non{color:var(--sev-med);background:var(--bg-alt)}
.verd-ana{color:var(--tx-muted);background:var(--bg-alt)}

/* ---------- 7. Bandeau secteurs ---------- */
.strip-band{background:var(--ink);border-radius:14px;padding:26px 32px;display:flex;align-items:center;gap:22px 40px;flex-wrap:wrap}
.strip-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dk-muted);max-width:30ch;line-height:1.6}
.strip-spacer{flex:1}
.strip-list{display:flex;align-items:center;gap:22px 38px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.strip-item{display:flex;flex-direction:column;gap:2px}
.strip-name{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#fff;letter-spacing:-.2px}
.strip-sub{font-family:var(--font-mono);font-size:10.5px;color:var(--dk-muted);padding-left:13px}

/* ---------- 8. Constat + barres ---------- */
.prob-head{max-width:62ch}
.prob-cards{margin-top:44px}
.prob-card{background:var(--bg-card);border:1px solid var(--line-3);border-radius:12px;padding:24px}
.prob-card h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.2px}
.prob-card p{margin:9px 0 0;font-size:13.5px;line-height:1.65;color:#5a6472}

.bars{margin-top:56px;display:flex;flex-direction:column;gap:30px}
.bars-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.bars-title{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--tx-soft)}
.bars-title--teal{color:var(--teal)}
.bars-note{font-family:var(--font-mono);font-size:11px;color:var(--tx-ghost)}
.bar-track{display:flex;gap:3px;height:34px}
.bar{border-radius:6px;overflow:hidden}
.bar i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
html:not(.js) .bar i,.bars-on .bar i{transform:scaleX(1)}
.bar-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;padding:0;list-style:none}
.bar-key{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;color:var(--tx-soft)}
.bar-key .sw{width:8px;height:8px;border-radius:2px;flex:none}
.bars-foot{font-family:var(--font-mono);font-size:10.5px;color:var(--tx-ghost)}

/* ---------- 9. Répartition (machine / expert) ---------- */
.split-head{max-width:60ch;margin-bottom:56px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:20px;align-items:stretch}
.col-auto{background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:26px 26px 22px;display:flex;flex-direction:column}
.col-head{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.col-label{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.col-rule{flex:1;height:1px;background:var(--line-3)}
.col-tag{font-size:11px;color:var(--tx-muted);background:var(--bg-alt);border:1px solid var(--line-2);border-radius:5px;padding:1px 8px;font-family:var(--font-mono)}
.col-tag--teal{color:var(--teal-pale);background:rgba(91,169,159,.14);border-color:rgba(91,169,159,.35)}
.pipe{display:flex;flex-direction:column;flex:1}
.pipe-step{display:flex;gap:14px}
.pipe-rail{display:flex;flex-direction:column;align-items:center;flex:none;width:26px}
.pipe-dot{width:22px;height:22px;border-radius:50%;background:#e8f0ed;border:1px solid #cfe0d9;color:var(--sev-low);display:flex;align-items:center;justify-content:center;font-size:11px;flex:none}
.pipe-line{width:1.5px;flex:1;background:linear-gradient(#cfe0d9,var(--line-3));margin:3px 0}
.pipe-body{padding:1px 0 18px}
.pipe-body h3{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.pipe-body p{margin:0;font-size:12.5px;color:var(--tx-faint);line-height:1.5;max-width:44ch}
.pipe-status{margin-top:6px;padding-top:16px;border-top:1px solid var(--bg-alt);display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;color:var(--tx-muted)}
.col-expert{background:var(--ink);border:1px solid var(--ink);border-radius:14px;padding:26px 26px 22px;color:var(--dk-tx);display:flex;flex-direction:column}
.col-expert .col-label{color:var(--dk-tx)}
.col-expert .col-rule{background:rgba(255,255,255,.12)}
.exp-list{display:flex;flex-direction:column;gap:16px;flex:1}
.exp-item{display:flex;gap:13px}
.exp-icon{flex:none;width:26px;height:26px;border-radius:7px;background:rgba(91,169,159,.16);border:1px solid rgba(91,169,159,.4);color:var(--teal-pale);display:flex;align-items:center;justify-content:center;font-size:12px}
.exp-item h3{margin:0;font-size:14px;font-weight:600;color:#fff}
.exp-item p{margin:0;font-size:12.5px;color:var(--dk-muted);line-height:1.5}
.exp-note{margin-top:20px;padding:14px 16px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.exp-note-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dk-muted);margin-bottom:6px}
.exp-note-text{font-size:14.5px;line-height:1.55;color:var(--dk-tx)}

/* ---------- 10. Méthode ---------- */
.method-cols{display:flex;gap:clamp(32px,4vw,64px);margin-top:20px}
.method-steps{flex:1;min-width:0;order:1}
.method-step{padding:clamp(36px,5vh,60px) 0;border-bottom:1px solid var(--line-2)}
.method-step:last-child{border-bottom:none}
.method-num{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--tx-ghost);transition:color .3s ease}
.method-step h3{margin:10px 0 0;font-size:22px;font-weight:600;letter-spacing:-.4px;color:#66707e;transition:color .3s ease}
.method-step p{margin:12px 0 0;max-width:480px;font-size:14.5px;line-height:1.7;color:var(--tx-3)}
.method-step.is-active .method-num{color:var(--teal)}
.method-step.is-active h3{color:var(--ink)}
html:not(.js) .method-step h3{color:var(--ink)}
html:not(.js) .method-step .method-num{color:var(--teal)}

.method-mock{width:min(520px,46%);flex:none;order:2}
.method-sticky{position:sticky;top:92px}
.mock{background:#fff;border:1px solid var(--line-6);border-radius:15px;box-shadow:0 30px 70px rgba(20,26,36,.13);overflow:hidden}
.mock-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-3);background:var(--bg-card)}
.mock-title{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.09em;color:var(--tx-faint);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-head .demo-tag{padding:1px 6px}
.mock-segs{display:flex;gap:4px;width:96px;margin-left:auto;flex:none}
.mock-seg{flex:1;height:3px;border-radius:99px;background:var(--line-2);transition:background .4s ease}
.mock-seg.on,html:not(.js) .mock-seg:first-child{background:var(--teal)}
.mock-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-height:470px}
.mock-panel{grid-area:1/1;min-width:0;padding:20px;pointer-events:none;transition:opacity .5s ease,transform .5s ease;opacity:0;transform:translateY(16px)}
.mock-panel.on,html:not(.js) .mock-panel:first-child{opacity:1;transform:translateY(0)}

.mp-title{font-size:15px;font-weight:700;letter-spacing:-.2px;margin-bottom:3px}
.mp-sub{font-family:var(--font-mono);font-size:10.5px;color:var(--tx-faint);margin-bottom:14px}
.mp-foot{margin-top:12px;font-family:var(--font-mono);font-size:10px;color:var(--tx-ghost)}
.mp-label{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.07em;color:var(--tx-faint);margin-bottom:7px}

/* Panneau 1 : imports & versions */
.imp-current{border:1.5px solid var(--ink);border-radius:10px;padding:12px 14px;margin-bottom:9px;background:#fff}
.imp-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tag-v{font-family:var(--font-mono);font-size:11px;font-weight:600;background:var(--ink);color:#fff;padding:2px 8px;border-radius:5px}
.tag-v--old{font-size:10.5px;background:var(--bg-alt);color:var(--tx-muted);padding:2px 7px}
.imp-date{font-size:12px;font-weight:600}
.tag-kind{font-size:10px;color:var(--tx-muted);background:var(--bg-alt);padding:1px 7px;border-radius:4px}
.tag-current{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.06em;color:#2c6157;background:#e3efe9;border:1px solid #c5ddd2;padding:1px 7px;border-radius:4px}
.imp-note{font-size:11.5px;color:var(--tx-soft);font-style:italic;margin-top:8px}
.imp-chips{display:flex;gap:6px;margin-top:9px}
.chip-new{font-size:10.5px;color:#7d6531;background:#f5f0e4;border:1px solid #e4dcc4;padding:1px 7px;border-radius:4px}
.chip-fixed{font-size:10.5px;color:var(--tx-muted);background:var(--bg-alt);border:1px solid var(--line-2);padding:1px 7px;border-radius:4px}
.imp-list{display:flex;flex-direction:column;gap:7px}
.imp-old{display:flex;align-items:center;gap:8px;border:1px solid var(--line-3);border-radius:9px;padding:9px 13px;background:#fff}
.imp-old-date{font-size:11.5px;color:var(--tx-2)}
.imp-old-kind{font-size:9.5px;color:var(--tx-faint);background:var(--bg-alt);padding:1px 6px;border-radius:4px}
.imp-old-meta{font-family:var(--font-mono);font-size:9.5px;color:var(--tx-faint);margin-left:auto}

/* Panneau 2 : enrichissement */
.sev-line{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.sev-sq{width:9px;height:9px;border-radius:2px;background:var(--sev-crit);flex:none}
.sev-word{font-size:10px;font-weight:600;letter-spacing:.05em;color:var(--sev-crit)}
.tag-new{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.06em;color:#7d6531;background:#f5f0e4;border:1px solid #e4dcc4;padding:1px 6px;border-radius:4px}
.mp-cve{font-family:var(--font-mono);font-size:17px;font-weight:600;letter-spacing:-.3px;margin-bottom:12px}
.adv-card{border:1px solid var(--line-3);border-radius:10px;background:#fff;padding:10px 12px;margin-bottom:7px}
.adv-row{display:flex;align-items:center;gap:9px}
.adv-logo{width:24px;height:24px;border-radius:6px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;font-family:var(--font-mono);flex:none}
.adv-logo--dsa{background:var(--sev-crit)}
.adv-logo--rh{background:#4a4a4a}
.adv-id-wrap{flex:1;min-width:0}
.adv-name{font-size:11.5px;font-weight:600}
.adv-id{font-family:var(--font-mono);font-size:10px;color:var(--tx-faint)}
.adv-status{display:inline-flex;align-items:center;gap:5px;font-size:10px;padding:2px 8px;border-radius:99px}
.adv-status--ok{color:#2c6157;background:#e3efe9;border:1px solid #c5ddd2}
.adv-status--ok .adv-dot{background:var(--sev-low)}
.adv-status--warn{color:#7d6531;background:#f5f0e4;border:1px solid #e4dcc4}
.adv-status--warn .adv-dot{background:var(--sev-high)}
.adv-dot{width:5px;height:5px;border-radius:50%;flex:none}
.adv-cmd{display:block;font-family:var(--font-mono);font-size:10px;color:var(--dk-tx);background:var(--ink);border-radius:6px;padding:7px 10px;margin-top:8px}
.ai-card{border:1px solid var(--line-4);border-radius:10px;overflow:hidden;background:#fff}
.ai-head{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-alt);border-bottom:1px solid var(--line-4)}
.ai-logo{width:20px;height:20px;border-radius:5px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;flex:none}
.ai-name{font-size:11.5px;font-weight:600}
.ai-model{font-family:var(--font-mono);font-size:9.5px;color:var(--tx-faint)}
.ai-regen{font-size:10px;color:var(--tx-2);border:1px solid var(--line-4);background:#fff;padding:2px 8px;border-radius:6px;margin-left:auto;white-space:nowrap}
.ai-text{margin:0;padding:10px 13px;font-size:11.5px;line-height:1.6;color:#2b3542}

/* Panneau 3 : score */
.score-card{background:var(--bg-card);border:1px solid var(--line-3);border-radius:11px;padding:16px}
.score-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.score-label{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.07em;color:var(--tx-faint)}
.tag-reeval{font-size:10px;color:#7d6531;background:#f5f0e4;border:1px solid #e4dcc4;padding:2px 8px;border-radius:5px}
.score-row{display:flex;align-items:flex-end;gap:22px}
.score-k{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.08em;color:var(--tx-ghost);margin-bottom:5px}
.score-k--applied{color:#b06a3b}
.score-base{font-family:var(--font-mono);font-size:30px;font-weight:600;color:var(--tx-ghost);line-height:.85}
.score-arrow{font-size:16px;color:#c2c8d2;padding-bottom:4px}
.score-val{font-family:var(--font-mono);font-size:38px;font-weight:600;color:#b06a3b;line-height:.85}
.score-spacer{flex:1}
.score-sev{text-align:right;padding-bottom:2px}
.score-sev-val{font-size:12px;font-weight:600;color:#b06a3b;text-transform:uppercase;letter-spacing:.04em}
.score-vec{display:block;font-family:var(--font-mono);font-size:10px;color:var(--tx-2);background:#fff;border:1px solid var(--line-3);border-radius:7px;padding:8px 10px;margin-top:14px;word-break:break-all}
.score-note{margin-top:10px;font-size:11px;line-height:1.55;color:#7d6531;background:#faf6e9;border:1px solid #eee3c4;border-radius:7px;padding:7px 10px}
.ctx-chips{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.ctx-chip{font-size:10.5px;color:var(--tx-2);border:1px solid var(--line-2);background:#fff;padding:3px 10px;border-radius:7px}

/* Panneau 4 : décision */
.verd-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.verd-grid--status{margin-bottom:13px}
.verd-opt{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:#fff;color:var(--tx-2);border-radius:9px;padding:9px 12px;font-size:12px}
.verd-opt--sel{border:1.5px solid #b56358;background:#f9edeb;color:var(--sev-crit);font-weight:600}
.verd-opt--sel-amber{border:1.5px solid #c4a95e;background:#f5f0e4;color:#7d6531;font-weight:600}
.vdot{width:7px;height:7px;border-radius:50%;flex:none}
.verd-check{margin-left:auto}
.comment{display:flex;gap:9px;border:1px solid var(--line-3);border-radius:10px;padding:10px 13px;background:#fff;margin-bottom:13px}
.avatar{width:26px;height:26px;border-radius:50%;background:#46627f;color:#fff;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:600;flex:none}
.comment-body{min-width:0}
.comment-head{display:flex;align-items:baseline;gap:7px}
.comment-name{font-size:11.5px;font-weight:600}
.comment-meta{font-family:var(--font-mono);font-size:9.5px;color:var(--tx-ghost)}
.comment-text{font-size:11.5px;line-height:1.55;color:var(--tx-2);margin-top:2px}
.export-block{border-top:1px solid var(--bg-alt);padding-top:14px}
.export-block .mp-label{margin-bottom:9px}
.export-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fmt{font-size:11px;color:var(--tx-muted);border:1px solid var(--line-2);background:#fff;padding:4px 12px;border-radius:7px}
.fmt--sel{font-weight:600;color:var(--ink);border:1.5px solid var(--ink)}
.export-btn{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;background:var(--ink);color:#fff;padding:6px 13px;border-radius:7px;margin-left:auto}

/* ---------- 11. Plateforme ---------- */
.plat-head{max-width:60ch;margin-bottom:52px}
.plat-card{border:1px solid var(--line-2);background:#fff;border-radius:12px;padding:22px 22px 20px;transition:border-color .2s ease}
.plat-card:hover{border-color:var(--line-5)}
.plat-icon{width:34px;height:34px;border-radius:9px;background:var(--bg-alt);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--teal);margin-bottom:16px;font-family:var(--font-mono)}
.plat-card h3{margin:0 0 6px;font-size:15.5px;font-weight:600}
.plat-card p{margin:0;font-size:13px;color:var(--tx-soft);line-height:1.6}

/* ---------- 12. Intégrations ---------- */
.duo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:clamp(32px,5vw,56px);align-items:center}
.duo-grid--top{align-items:start}
.integ-points{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.integ-points li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--tx-2)}
.integ-diagram{background:var(--bg-card);border:1px solid var(--line-2);border-radius:14px;padding:26px 22px 24px;display:flex;flex-direction:column;align-items:center}
.integ-sources{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.io-box{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:10px 14px;min-width:0}
.io-box--center{padding:10px 16px;align-items:center}
.io-box b{font-size:12.5px;font-weight:600;color:#2b3542}
.io-box span{font-size:10.5px;color:var(--tx-faint);font-family:var(--font-mono)}
.integ-arrows{display:flex;gap:52px;margin:4px 0}
.integ-arrows svg,.integ-out svg{flex:none;display:block}
.flow-line{animation:flowDash 1.1s linear infinite}
.integ-core{display:flex;flex-direction:column;align-items:center;gap:9px}
.integ-caption{font-family:var(--font-mono);font-size:10.5px;color:var(--tx-muted);letter-spacing:.06em;text-transform:uppercase}
.integ-out{margin:4px 0}

/* ---------- 13. Souveraineté ---------- */
.sov{background:var(--ink);color:var(--dk-tx)}
.sov-head{max-width:62ch;margin-bottom:54px}
.sov-head .sec-title{color:#fff}
.sov-head .sec-lead{color:var(--dk-muted)}
.sov-toggle{display:flex;align-items:center;gap:12px;margin-bottom:30px;flex-wrap:wrap}
.sov-toggle-label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dk-muted)}
.sov-switch{display:flex;gap:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:4px;border-radius:10px}
.sov-btn{height:32px;padding:0 16px;border-radius:7px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s ease;border:1px solid transparent;background:transparent;color:var(--dk-muted)}
.sov-btn.is-on{border-color:var(--teal-light);background:rgba(91,169,159,.18);color:var(--teal-pale)}
.sov-hint{font-size:12.5px;color:var(--dk-muted)}
.sov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:32px;align-items:center}
.sov-cards{display:flex;flex-direction:column;gap:14px}
.sov-card{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);border-radius:12px;padding:18px 20px}
.sov-card-head{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.sov-icon{width:26px;height:26px;border-radius:7px;background:rgba(91,169,159,.14);border:1px solid rgba(91,169,159,.38);color:var(--teal-pale);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none;font-family:var(--font-mono)}
.sov-card h3{margin:0;font-size:15px;font-weight:600;color:#fff}
.sov-card p{margin:0;font-size:13px;color:var(--dk-muted);line-height:1.6}
/* Bascule Connecté / Isolé : le CSS commute, le JS ne fait que poser data-mode */
[data-mode="connected"] .only-air{display:none}
[data-mode="airgap"] .only-connected{display:none}

/* Diagramme de frontière réseau */
.net{position:relative;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px}
.net-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}
.net-zone{border:1.5px dashed rgba(91,169,159,.5);border-radius:12px;padding:16px 13px;display:flex;flex-direction:column;gap:8px}
.net-zone-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-pale);margin-bottom:2px}
.net-node{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:11px 14px;display:flex;flex-direction:column;gap:2px}
.net-node b{font-size:12.5px;font-weight:600;color:var(--dk-tx)}
.net-node span{font-size:10.5px;color:var(--dk-muted);font-family:var(--font-mono)}
.net-node--hi{background:rgba(91,169,159,.12);border-color:rgba(91,169,159,.45)}
.net-node--hi b{color:var(--teal-pale)}
.net-border{width:34px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.net-border i{flex:1;width:0;border-left:1.5px dashed rgba(190,150,110,.6)}
.net-border span{font-family:var(--font-mono);font-size:8px;color:#a58c86;writing-mode:vertical-rl;transform:rotate(180deg);padding:6px 0;letter-spacing:.1em;text-transform:uppercase}
.net-ext{border:1.5px dashed rgba(190,120,100,.45);border-radius:12px;padding:16px 13px;display:flex;flex-direction:column;gap:10px;background:rgba(157,66,55,.06)}
.net-ext-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:#d8a79c;margin-bottom:2px}
.net-flow{display:flex;align-items:center;gap:8px}
.net-flow svg{flex:none}
.net-flow b{font-size:11.5px;font-weight:600;color:#c6e6e0}
.net-api{border:1px dashed rgba(190,120,100,.5);border-radius:8px;padding:9px 11px;display:flex;flex-direction:column;gap:6px;background:rgba(157,66,55,.1)}
.net-api-title{font-size:11.5px;font-weight:600;color:#e2b3a6}
.net-api .net-flow{gap:7px}
.net-api .net-flow span{font-size:9.5px;color:#a58c86;font-family:var(--font-mono);line-height:1.4}
.net-shield{margin-top:2px;display:flex;align-items:flex-start;gap:6px;border-top:1px dashed rgba(190,120,100,.3);padding-top:7px}
.net-shield i{font-style:normal;font-size:10px;color:#e2b3a6;flex:none;line-height:1.3}
.net-shield span{font-size:9.5px;color:#c8a99f;font-family:var(--font-mono);line-height:1.45}
.net-ext--closed{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.02);justify-content:center;gap:8px}
.net-ext--closed .net-ext-label{color:#6d7887}
.net-file{border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:11px;font-size:12px;font-weight:600;color:#aeb8c4;text-align:center}
.net-file-note{font-size:9.5px;color:#6d7887;font-family:var(--font-mono);text-align:center}
.net-status{margin-top:16px;display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:10.5px;color:var(--dk-muted);line-height:1.5}
.net-dot{width:6px;height:6px;border-radius:50%;background:var(--teal-light);animation:pulseDot 2.4s ease-in-out infinite;flex:none}
.net-dot--muted{background:var(--dk-muted)}

/* ---------- 14. Pourquoi Valdren ---------- */
.why-text p{margin:0 0 14px;font-size:16px;color:var(--tx-2);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.why-text p:last-child{margin-bottom:0}
.prin-list{display:flex;flex-direction:column;gap:14px}
.prin{border:1px solid var(--line-3);background:var(--bg-card);border-radius:12px;padding:20px 22px;display:flex;gap:16px}
.prin-num{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--teal);flex:none;padding-top:2px}
.prin h3{margin:0 0 4px;font-size:15px;font-weight:600}
.prin p{margin:0;font-size:13px;color:var(--tx-soft);line-height:1.6}

/* ---------- 15. CTA ---------- */
.cta-card{background:#fff;border:1px solid var(--line-2);border-radius:16px;padding:clamp(28px,5vw,56px) clamp(24px,4.5vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:40px;align-items:center;box-shadow:0 20px 56px rgba(20,26,36,.07)}
.cta-card h2{margin:0 0 14px;font-size:clamp(26px,3.8vw,32px);font-weight:700;letter-spacing:-.8px;line-height:1.15}
.cta-lead{margin:0 0 26px;font-size:15.5px;color:var(--tx-2);max-width:48ch;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.cta-mail{margin-top:16px;font-family:var(--font-mono);font-size:11.5px;color:var(--tx-faint)}
.cta-checks{border-left:1px solid var(--line-3);padding-left:24px;display:flex;flex-direction:column;gap:18px;margin:0;list-style:none}
.check{display:flex;gap:12px}
.check-mark{color:var(--teal);font-size:14px;flex:none;padding-top:1px}
.check-body{font-size:13.5px;color:var(--tx-2);line-height:1.55}
.check-body span{color:var(--tx-soft)}

/* ---------- 16. Footer ---------- */
.footer{background:var(--ink);color:var(--dk-muted)}
.footer-inner{max-width:1140px;margin:0 auto;padding:44px 28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.footer-tagline{font-size:12.5px}
.footer-spacer{flex:1}
.footer-nav{display:flex;gap:22px;font-size:12.5px;flex-wrap:wrap}
.footer-nav a{color:var(--dk-muted)}
.footer-nav a:hover{color:#fff}

/* ---------- 17. Pages annexes (mentions légales / legal) ---------- */
.prose{max-width:760px;margin:0 auto;padding:64px 28px 96px}
.prose h1{margin:0 0 10px;font-size:clamp(28px,4vw,36px);font-weight:700;letter-spacing:-.8px;line-height:1.15}
.prose .prose-updated{font-family:var(--font-mono);font-size:11.5px;color:var(--tx-faint);margin-bottom:36px}
.prose h2{margin:36px 0 10px;font-size:19px;font-weight:600;letter-spacing:-.3px}
.prose p,.prose li{font-size:15px;line-height:1.7;color:var(--tx-2)}
.prose ul{padding-left:22px}

/* ---------- 18. Responsive ---------- */
@media (max-width:1079px){
  .nav-links{display:none}
  .nav-menu{display:block}
}
@media (max-width:879px){
  .method-cols{flex-direction:column}
  .method-mock{width:100%}
  .method-sticky{position:static}
}
@media (max-width:560px){
  .nav-inner{padding:0 16px;gap:10px;height:58px}
  .btn-primary--nav{height:36px;padding:0 14px;font-size:11px;letter-spacing:.05em}
  .lang-btn{padding:5px 9px}
  /* Vignette hero décorative : l'en-tête à hauteur fixe et la grille à colonnes
     fixes débordent sous ~430px. On laisse l'en-tête passer sur deux lignes et on
     redonne de la place à la colonne Composant. */
  .vign-head{height:auto;min-height:44px;flex-wrap:wrap;gap:6px 8px;padding:8px 12px}
  .vign-spacer{display:none}
  .vign-phase{white-space:nowrap}
  .vign-cols,.vign-row{grid-template-columns:40px auto minmax(0,1fr) auto;gap:8px}
}
@media (max-width:400px){
  .nav-inner{padding:0 12px;gap:8px}
  .wordmark{display:none}
  .btn-primary--nav{padding:0 12px}
  /* Les maquettes produit décoratives (aria-hidden) ont des grilles à colonnes
     fixes plus larges que 320px : on rogne le débordement horizontal au niveau
     de <html> (sans casser le sticky de la nav, contrairement à body). */
  html{overflow-x:hidden}
}

/* ---------- 19. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  html.js .rv{opacity:1;transform:none}
}