/* ═══════════════════════════════════════════════════════
   Capitali — Design system (v2)
   Palette claire, coins carrés, DA inspirée de linkup.so.
   Chargé par toutes les pages "actives" du site marketing.
   Ne PAS charger sur les pages gelées PEE (elles utilisent
   encore l'ancien /css/brand.css — voir CLAUDE.md, "geler
   sans supprimer").
   ═══════════════════════════════════════════════════════ */
:root{
  --paper:#faf9f5;
  --ink:#12100c;
  --line:#e3ddd0;
  --line-strong:#c9c1af;
  --muted:#847d6c;
  --green:#00b86b;
  --green-dark:#009a59;
  --green-bg:rgba(0,184,107,0.08);
  --coral:#c2481f;
  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:'DM Mono', ui-monospace, SFMono-Regular, monospace;

  /* Alias vers les anciens tokens de /css/brand.css — permet aux pages qui
     ne sont pas encore migrées vers la palette --paper/--ink/--muted de
     rester lisibles si elles chargent ce fichier par erreur, et sert de
     pont pendant la migration page par page. */
  --white:#ffffff;
  --black:var(--ink);
  --gray-50:var(--paper);
  --gray-100:#f2efe6;
  --gray-200:var(--line);
  --gray-400:var(--line-strong);
  --gray-600:var(--muted);
  --gray-800:var(--ink);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;} }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}
.container{max-width:1080px; margin:0 auto; padding:0 2rem;}
a{color:inherit;}
img,svg{max-width:100%;}
::selection{background:var(--green); color:#fff;}
a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
button,input{font-family:inherit;}

/* ── TOP STACK (bandeau + nav) ── */
.topstack{position:fixed; top:0; left:0; right:0; z-index:100;}

.banner{
  display:flex; align-items:center; justify-content:center; gap:0.7rem;
  padding:0.6rem 2.5rem;
  background:#eaf7f1;
  border-bottom:1px solid rgba(0,184,107,0.2);
  font-size:0.82rem; color:var(--ink); text-align:center;
  position:relative;
}
.banner strong{color:var(--green-dark); font-weight:700;}
.banner a{color:var(--green-dark); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(0,154,89,0.4); white-space:nowrap;}
.banner a:hover{border-color:var(--green-dark);}
.banner-close{
  position:absolute; right:0.9rem; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border:none; background:transparent;
  color:var(--muted); font-size:1rem; line-height:1; cursor:pointer;
}
.banner-close:hover{background:rgba(0,0,0,0.06); color:var(--ink);}
.banner.is-hidden{display:none;}

/* ── NAV ── */
nav{
  padding:0 2rem;
  height:3.5rem;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav-logo{display:flex; align-items:center; gap:0.6rem; font-weight:700; font-size:1.02rem; text-decoration:none; color:var(--ink);}
.nav-logo-mark{display:block; flex-shrink:0;}
.nav-right{display:flex; align-items:center; gap:0.15rem;}
.nav-link{color:var(--muted); text-decoration:none; font-size:0.85rem; font-weight:500; padding:0.5rem 0.85rem; transition:color .15s;}
.nav-link:hover, .nav-link.is-active{color:var(--ink);}
.nav-login{color:var(--ink); text-decoration:none; font-size:0.85rem; font-weight:600; padding:0.5rem 0.85rem; border:1px solid var(--line); margin-left:0.7rem; transition:border-color .15s;}
.nav-login:hover{border-color:var(--line-strong);}
.btn-dot{width:7px; height:7px; background:currentColor; display:inline-block; flex-shrink:0; transition:border-radius .5s cubic-bezier(.22,1,.36,1);}
.nav-cta, .btn-primary{display:inline-flex; align-items:center; gap:0.55rem; background:var(--ink); color:var(--paper); text-decoration:none; font-weight:600; transition:background .15s, transform .15s; border:none; cursor:pointer;}
.nav-cta:hover, .btn-primary:hover{background:var(--green-dark); transform:translateY(-1px);}
.nav-cta:hover .btn-dot, .btn-primary:hover .btn-dot{border-radius:50%;}
.nav-cta{padding:0.5rem 1.1rem; font-size:0.85rem; margin-left:0.5rem;}
.btn-primary{padding:0.9rem 1.6rem; font-size:1rem;}
.btn-ghost{color:var(--muted); text-decoration:none; font-size:0.95rem; font-weight:500; transition:color .15s; background:none; border:none; cursor:pointer;}
.btn-ghost:hover{color:var(--ink);}

section{padding:5.5rem 2rem;}

.eyebrow{font-family:var(--mono); font-size:0.72rem; font-weight:500; text-transform:uppercase; letter-spacing:0.1em; color:var(--green-dark); margin-bottom:1rem;}

/* ── PAGE HEADER (pages internes : ressources, simulateurs, livre blanc) ── */
.page-hero{padding:9.5rem 2rem 3.5rem; text-align:center;}
.page-hero .eyebrow{justify-content:center; display:flex;}
.page-hero h1{font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem, 4.4vw, 3.1rem); line-height:1.08; letter-spacing:-0.01em; text-wrap:balance; margin-bottom:1rem;}
.page-hero h1 em{font-style:italic; color:var(--green-dark);}
.page-hero p{font-size:1.02rem; color:var(--muted); line-height:1.6; max-width:520px; margin:0 auto;}

/* ── HERO (homepage) ── */
.hero{padding:9.5rem 2rem 4.5rem; text-align:center;}
.hero-inner{max-width:600px; margin:0 auto 2.75rem;}
.hero-badge{display:inline-flex; align-items:center; gap:0.55rem; padding:0.4rem 0.8rem; border:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:1.6rem;}
.hero-badge::before{content:''; width:6px; height:6px; background:var(--green); flex-shrink:0;}
.hero h1{font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem, 5vw, 3.6rem); line-height:1.05; letter-spacing:-0.01em; text-wrap:balance; margin-bottom:1.1rem;}
.hero h1 em{font-style:italic; color:var(--green-dark);}
.hero-sub{font-size:1.05rem; color:var(--muted); line-height:1.55; max-width:440px; margin:0 auto 1.8rem;}
.hero-ctas{display:flex; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap;}

/* ── SIMULATEUR (widget interactif, réutilisable) ── */
.sim{max-width:820px; margin:0 auto; text-align:left; background:#fff; border:1.5px solid var(--ink); box-shadow:7px 7px 0 var(--green-dark);}
.sim-head{display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.9rem 1.4rem; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.sim-tag{font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:500; color:var(--ink);}
.sim-note{font-size:0.76rem; color:var(--muted);}
.sim-body{padding:1.6rem 1.4rem;}
.sim-controls{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; margin-bottom:1.7rem;}
.sim-field{display:flex; flex-direction:column; gap:0.6rem;}
.sim-field > span:first-child{font-size:0.8rem; color:var(--muted);}
.sim-field select, .sim-field input[type="text"], .sim-field input[type="number"]{
  font-family:var(--mono); font-size:0.95rem; color:var(--ink);
  border:1px solid var(--line-strong); background:#fff; padding:0.55rem 0.7rem;
}
.sim-stepper{display:flex; align-items:center; gap:0.9rem;}
.sim-step{width:34px; height:34px; border:1px solid var(--line-strong); background:#fff; color:var(--ink); font-size:1.1rem; cursor:pointer; line-height:1; transition:background .15s, border-color .15s;}
.sim-step:hover{background:var(--green-bg); border-color:var(--green-dark);}
.sim-value{font-family:var(--mono); font-size:1.1rem; font-weight:500; font-variant-numeric:tabular-nums; min-width:2.5ch; text-align:center;}
input[type="range"]{-webkit-appearance:none; appearance:none; width:100%; height:2px; background:var(--line-strong); outline:none; margin:0.3rem 0;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; background:var(--ink); cursor:pointer;}
input[type="range"]::-moz-range-thumb{width:16px; height:16px; background:var(--ink); border:none; cursor:pointer;}
.sim-result{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; padding-top:1.5rem; border-top:1px solid var(--line);}
.sim-col-label{font-size:0.78rem; color:var(--muted); margin-bottom:0.4rem;}
.sim-col-value{font-family:var(--mono); font-size:1.65rem; font-weight:500; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; margin-bottom:0.6rem;}
.sim-col.bad .sim-col-value{color:var(--coral);}
.sim-col.good .sim-col-value{color:var(--green-dark);}
.sim-bar{height:7px; background:var(--line); width:100%;}
.sim-bar-fill{height:100%; transition:width .35s ease;}
.sim-bar-fill.bad{background:var(--coral);}
.sim-bar-fill.good{background:var(--green);}
.sim-foot{margin-top:1.3rem; font-size:0.78rem; color:var(--muted); line-height:1.5;}

.hero-trust{display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center; font-size:0.78rem; color:var(--muted); font-weight:500; margin-top:2.2rem;}
.hero-trust span{display:inline-flex; align-items:center; gap:0.4rem;}

/* ── THESIS ── */
.thesis{background:var(--ink); color:var(--paper); text-align:center;}
.thesis .container{max-width:800px;}
.thesis p{font-family:var(--serif); font-weight:400; font-style:italic; font-size:clamp(1.6rem, 3.4vw, 2.4rem); line-height:1.3; text-wrap:balance;}
.thesis p .no{color:rgba(250,249,245,0.4); font-style:normal;}
.thesis p .yes{color:var(--green);}
.thesis-foot{margin-top:1.6rem; font-size:0.84rem; color:rgba(250,249,245,0.45); font-style:normal; font-family:var(--sans);}

/* ── FIT (pour qui) ── */
.fit-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; max-width:1080px; margin:0 auto; background:var(--line);}
.fit-card{padding:2rem 2.2rem; background:#fff;}
.fit-card.yes{background:var(--green-bg);}
.fit-label{font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:500; margin-bottom:1rem;}
.fit-card.yes .fit-label{color:var(--green-dark);}
.fit-card.no .fit-label{color:var(--muted);}
.fit-card ul{list-style:none; display:flex; flex-direction:column; gap:0.7rem;}
.fit-card li{display:flex; gap:0.6rem; font-size:0.92rem; line-height:1.5;}
.fit-card.no li{color:var(--muted);}
.fit-card.yes li::before{content:'✓'; color:var(--green-dark); font-weight:700; flex-shrink:0;}
.fit-card.no li::before{content:'✕'; color:var(--muted); font-weight:700; flex-shrink:0;}

.compare-head{text-align:center; margin-bottom:2.75rem;}
.compare-head h2{font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem, 3.6vw, 2.6rem); line-height:1.16; text-wrap:balance;}

/* ── HOW ── */
.how{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; max-width:1080px; margin:0 auto; background:var(--line);}
.step{background:#fff; padding:2rem;}
.step-num{font-family:var(--mono); font-weight:500; font-size:0.85rem; color:var(--green-dark); margin-bottom:0.9rem; font-variant-numeric:tabular-nums;}
.step h3{font-size:1.05rem; font-weight:700; margin-bottom:0.5rem;}
.step p{font-size:0.87rem; color:var(--muted); line-height:1.5;}

/* ── WHY (pourquoi Capitali) ── */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; max-width:1080px; margin:0 auto; background:var(--line);}
.why-card{padding:1.8rem 1.7rem; background:#fff;}
.why-icon{width:24px; height:24px; stroke:var(--green-dark); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:1rem; display:block;}
.why-stat{font-family:var(--mono); font-size:1.7rem; font-weight:500; letter-spacing:-0.01em; margin-bottom:0.5rem;}
.why-stat span{font-family:var(--sans); font-size:0.82rem; font-weight:500; color:var(--muted); margin-left:0.3rem;}
.why-card h3{font-size:0.95rem; font-weight:700; margin-bottom:0.4rem; line-height:1.3;}
.why-card p{font-size:0.85rem; color:var(--muted); line-height:1.5;}
.info-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 4px; margin-left:0.3rem; vertical-align:middle;
  border:1px solid var(--line-strong); background:#fff; color:var(--muted);
  font-family:var(--serif); font-style:italic; font-size:0.8rem; line-height:1;
  cursor:pointer; transition:border-color .15s, color .15s;
}
.info-btn:hover, .info-btn[aria-expanded="true"]{border-color:var(--green-dark); color:var(--green-dark);}
.info-tip{display:none; margin-top:0.8rem; padding:0.7rem 0.85rem; background:var(--green-bg); border-left:2px solid var(--green-dark); font-size:0.8rem; color:var(--ink); line-height:1.5;}
.info-tip.is-open{display:block;}
@media (max-width:900px){
  .why-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .why-grid{grid-template-columns:1fr;}
}

/* ── PRICING ── */
.pricing-head{text-align:center; margin-bottom:2.75rem;}
.pricing-head h2{font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem, 3.6vw, 2.6rem); text-wrap:balance;}
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; max-width:1080px; margin:0 auto; align-items:stretch;}
.price-card{padding:2.2rem;}
.price-card.us{background:#fff; border:1.5px solid var(--ink); box-shadow:7px 7px 0 var(--green-dark);}
.price-card.them{background:transparent; border:1px solid var(--line);}
.price-eyebrow{font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:500; margin-bottom:0.9rem;}
.price-card.us .price-eyebrow{color:var(--green-dark);}
.price-card.them .price-eyebrow{color:var(--muted);}
.price-amount{font-family:var(--mono); font-size:clamp(1.9rem, 3.6vw, 2.3rem); font-weight:500; letter-spacing:-0.01em; font-variant-numeric:tabular-nums;}
.price-amount small{font-family:var(--sans); font-size:1rem; font-weight:500; color:var(--muted);}
.price-card.them .price-amount{color:var(--muted);}
.price-sub{font-size:0.86rem; color:var(--muted); margin:0.6rem 0 1.3rem; line-height:1.5;}
.price-list{list-style:none; display:flex; flex-direction:column; gap:0.55rem;}
.price-list li{display:flex; gap:0.55rem; font-size:0.86rem; line-height:1.5;}
.price-card.us .price-list li::before{content:'✓'; color:var(--green-dark); font-weight:700;}
.price-card.them .price-list li{color:var(--muted);}
.price-card.them .price-list li::before{content:'—'; color:var(--muted);}
.price-cta{margin-top:1.6rem;}
.price-foot{text-align:center; margin-top:1.6rem; font-size:0.82rem; color:var(--muted); max-width:1080px; margin-left:auto; margin-right:auto;}

/* ── FINAL CTA ── */
.final{background:var(--ink); color:var(--paper); text-align:center;}
.final h2{font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,4.2vw,2.7rem); line-height:1.16; margin-bottom:1rem; text-wrap:balance;}
.final h2 em{font-style:italic; color:var(--green);}
.final p{color:rgba(250,249,245,0.68); max-width:460px; margin:0 auto 1.9rem; line-height:1.6;}
.final .btn-primary{background:var(--green); color:var(--ink);}
.final .btn-primary:hover{background:var(--paper);}
.final-note{margin-top:1.3rem; font-size:0.8rem; color:rgba(250,249,245,0.45);}

/* ── GUIDES (page /ressources/) ── */
.guides-section{background:#fff;}
.guides-toolbar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; max-width:1080px; margin:0 auto 2.5rem; padding:0 2rem;}
.guides-toolbar-label{font-family:var(--mono); font-size:0.78rem; color:var(--muted);}
.guides-tags{display:flex; gap:0.5rem; flex-wrap:wrap;}
.guides-tag{font-size:0.8rem; padding:0.4rem 0.85rem; border:1px solid var(--line); color:var(--muted);}
.guides-tag.is-active{border-color:var(--ink); color:var(--ink); font-weight:600;}
.guides-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; max-width:1080px; margin:0 auto; background:var(--line);}
.guide-card{padding:1.8rem; background:#fff;}
.guide-card.is-soon{background:var(--paper);}
.guide-card-meta{display:flex; align-items:center; gap:0.5rem; margin-bottom:0.8rem; font-size:0.75rem; color:var(--muted);}
.guide-card-tag{font-family:var(--mono); text-transform:uppercase; letter-spacing:0.06em; color:var(--green-dark); font-weight:600;}
.guide-card-meta .dot{width:3px; height:3px; background:var(--muted); border-radius:50%;}
.guide-card h3{font-size:1.05rem; font-weight:700; margin-bottom:0.5rem; line-height:1.35;}
.guide-card p{font-size:0.88rem; color:var(--muted); line-height:1.55;}
@media (max-width:640px){ .guides-grid{grid-template-columns:1fr;} }

/* ── FOOTER ── */
footer{border-top:1px solid var(--line); background:#fff;}
.footer-inner{display:flex; justify-content:space-between; gap:3rem; flex-wrap:wrap; padding:3.5rem 2rem 2.5rem; max-width:1080px; margin:0 auto;}
.footer-brand{max-width:260px; display:flex; flex-direction:column; gap:1.1rem;}
.footer-mark{display:block;}
.footer-tag{font-size:0.85rem; color:var(--muted); line-height:1.55;}
.footer-sitemap{display:flex; gap:3.5rem; flex-wrap:wrap;}
.footer-col{display:flex; flex-direction:column; gap:0.65rem;}
.footer-col-title{font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:0.2rem;}
.footer-col a{font-size:0.85rem; color:var(--ink); text-decoration:none;}
.footer-col a:hover{color:var(--green-dark);}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; padding:1.4rem 2rem; max-width:1080px; margin:0 auto; border-top:1px solid var(--line); font-size:0.78rem; color:var(--muted);}
@media (max-width:640px){
  .footer-inner{flex-direction:column; gap:2.2rem;}
  .footer-sitemap{gap:2rem;}
}

/* ── ICONS ── */
.ico{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; flex-shrink:0;}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

@media (max-width:860px){
  .fit-grid,.steps{grid-template-columns:1fr;}
  .price-grid{grid-template-columns:1fr;}
  .sim-controls, .sim-result{grid-template-columns:1fr;}
  .nav-link{display:none;}
  .banner{flex-direction:column; gap:0.25rem; padding:0.65rem 2.6rem 0.65rem 1rem; font-size:0.78rem;}
  .hero{padding-top:11.5rem;}
  .page-hero{padding-top:11.5rem;}
}

/* ═══════════════════════════════════════════════════════
   ARTICLE (livre blanc, guide individuel)
   ═══════════════════════════════════════════════════════ */
.container-narrow{max-width:760px; margin:0 auto; padding:0 2rem;}

.btn-outline{
  display:inline-flex; align-items:center; gap:0.4rem;
  color:var(--paper); border:1px solid rgba(255,255,255,0.25);
  padding:0.9rem 1.6rem; text-decoration:none; font-weight:600; font-size:0.95rem;
  transition:border-color .15s, background .15s;
}
.btn-outline:hover{border-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.06);}

.article-hero{padding:9.5rem 2rem 2.5rem;}
.article-hero h1{font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem, 4.2vw, 3rem); line-height:1.1; letter-spacing:-0.01em; text-wrap:balance; margin-bottom:1.25rem;}
.article-hero h1 em{font-style:italic; color:var(--green-dark);}

.article-breadcrumb{font-size:0.82rem; color:var(--muted); margin-bottom:1.5rem;}
.article-breadcrumb a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s, color .15s;}
.article-breadcrumb a:hover{color:var(--ink); border-bottom-color:var(--line-strong);}

.article-tag{font-family:var(--mono); display:inline-block; font-size:0.7rem; font-weight:500; text-transform:uppercase; letter-spacing:0.1em; color:var(--green-dark); margin-bottom:0.9rem;}

.article-meta{display:flex; align-items:center; gap:0.6rem; font-size:0.85rem; color:var(--muted);}
.article-meta .dot{width:3px; height:3px; background:var(--muted);}

.article-body{padding:1rem 2rem 4rem;}

.article-prose{font-size:1.05rem; line-height:1.75; color:var(--ink);}
.article-prose > * + *{margin-top:1.1rem;}
.article-prose h2{font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem, 3vw, 2rem); line-height:1.2; letter-spacing:-0.01em; color:var(--ink); margin-top:3rem; margin-bottom:0.75rem;}
.article-prose h3{font-family:var(--sans); font-weight:700; font-size:1.15rem; color:var(--ink); margin-top:2rem; margin-bottom:0.5rem;}
.article-prose p{color:var(--ink);}
.article-prose strong{color:var(--ink); font-weight:600;}
.article-prose a{color:var(--green-dark); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.article-prose a:hover{color:var(--green);}
.article-prose ul, .article-prose ol{padding-left:1.4rem; color:var(--ink);}
.article-prose li + li{margin-top:0.4rem;}
.article-prose ul li::marker{color:var(--green-dark);}

.article-callout{margin-top:1.5rem; padding:1.25rem 1.5rem; background:var(--green-bg); border:1px solid rgba(0,184,107,0.2); border-left:2px solid var(--green-dark); font-size:0.95rem; color:var(--ink); line-height:1.6;}
.article-callout strong{color:var(--green-dark);}

.article-toc{background:var(--gray-100); border:1px solid var(--line); padding:1.5rem 1.75rem; margin:0 0 2.5rem;}
.article-toc-title{font-family:var(--mono); font-size:0.7rem; font-weight:500; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-bottom:0.75rem;}
.article-toc ol{list-style:decimal; padding-left:1.2rem; font-size:0.92rem; color:var(--ink);}
.article-toc a{color:var(--ink); text-decoration:none; border-bottom:1px solid transparent;}
.article-toc a:hover{color:var(--ink); border-bottom-color:var(--green-dark);}

.article-disclaimer{margin-top:3rem; padding:1.25rem 1.5rem; background:var(--paper); border:1px dashed var(--line-strong); font-size:0.82rem; color:var(--muted); line-height:1.6;}

.article-cta{margin-top:3rem; padding:2.5rem 2rem; background:var(--ink); color:var(--paper); text-align:center;}
.article-cta h3{font-family:var(--serif); font-weight:400; font-size:1.6rem; line-height:1.2; margin-bottom:0.5rem; color:var(--paper);}
.article-cta h3 em{color:var(--green); font-style:italic;}
.article-cta p{color:rgba(250,249,245,0.62); font-size:0.95rem; margin-bottom:1.5rem; max-width:460px; margin-left:auto; margin-right:auto; line-height:1.55;}
.article-cta-buttons{display:flex; align-items:center; justify-content:center; gap:0.85rem; flex-wrap:wrap;}
.article-cta-buttons .btn-primary{color:var(--paper);}
.article-cta-buttons .btn-primary:hover{color:var(--ink);}

.comparison-table{width:100%; border-collapse:collapse; font-size:0.9rem; margin:1.25rem 0;}
.comparison-table th, .comparison-table td{padding:0.6rem 0.75rem; text-align:left; border-bottom:1px solid var(--line);}
.comparison-table th{font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); font-weight:500;}
.comparison-table td:first-child{font-weight:600;}

.capture-box{margin:2rem 0; padding:1.75rem; background:var(--gray-100); border:1px solid var(--line);}
.capture-box-title{font-weight:700; font-size:1.05rem; margin-bottom:0.3rem;}
.capture-box-subtitle{font-size:0.88rem; color:var(--muted); margin-bottom:1.1rem;}

@media (max-width:900px){
  .article-hero, .page-hero{padding-top:7rem;}
  .article-body{padding:0.5rem 1.25rem 3rem;}
}

/* ═══════════════════════════════════════════════════════
   OUTILS (simulateurs LPV / AGA / PPV — page dédiée)
   Widget interactif du hero de la home = .sim* ; ces classes
   couvrent la mise en page pleine page des simulateurs dédiés.
   ═══════════════════════════════════════════════════════ */
.simpage-body{padding:0 2rem 4rem;}
.sim-card{max-width:900px; margin:0 auto; background:#fff; border:1px solid var(--line); overflow:hidden;}

.sim-inputs{padding:2rem 2.25rem; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:1.75rem;}
.sim-inputs.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:2rem;}

.input-group{display:flex; flex-direction:column; gap:0.65rem;}
.input-label{font-family:var(--mono); font-size:0.72rem; font-weight:500; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);}
.input-value-row{display:flex; align-items:baseline; gap:0.35rem;}
.input-display{font-family:var(--mono); font-size:1.7rem; font-weight:500; font-variant-numeric:tabular-nums;}
.input-unit{font-size:0.9rem; color:var(--muted);}
.input-slider{width:100%; -webkit-appearance:none; appearance:none; height:2px; background:var(--line-strong); outline:none;}
.input-slider::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; background:var(--ink); cursor:pointer;}
.input-slider::-moz-range-thumb{width:16px; height:16px; background:var(--ink); border:none; cursor:pointer;}
.slider-range{display:flex; justify-content:space-between; font-size:0.75rem; color:var(--muted);}
.input-hint{font-size:0.8rem; color:var(--muted);}

.siren-row{display:flex; gap:0.6rem;}
.siren-row input{flex:1; padding:0.75rem 1rem; border:1px solid var(--line-strong); font-family:var(--sans); font-size:1rem; letter-spacing:0.03em;}
.siren-row input:focus{outline:2px solid var(--green); outline-offset:-1px;}
.siren-btn{padding:0.75rem 1.25rem; background:var(--ink); color:var(--paper); border:none; font-weight:600; font-size:0.9rem; cursor:pointer; white-space:nowrap;}
.siren-btn:hover{background:var(--green-dark);}
.siren-btn:disabled{opacity:0.5; cursor:default;}
.siren-hint{font-size:0.82rem; color:var(--muted);}
.siren-result{display:none; padding:0.9rem 1rem; background:var(--gray-100); font-size:0.88rem; gap:0.3rem; flex-direction:column;}
.siren-result.visible{display:flex;}
.siren-result strong{color:var(--ink);}
.siren-result.error{background:#fbeae6; color:#8a2e12;}
.siren-result.error strong{color:#8a2e12;}
.manual-toggle{font-size:0.82rem; color:var(--muted); text-decoration:underline; cursor:pointer; background:none; border:none; padding:0; text-align:left;}
#manual-effectif-wrap{display:none;}
#manual-effectif-wrap.visible{display:flex;}
#manual-effectif-wrap input{width:120px; padding:0.65rem 0.9rem; border:1px solid var(--line-strong); font-family:var(--sans); font-size:1rem;}

.yn-row{display:flex; gap:0.75rem;}
.yn-btn{flex:1; padding:0.75rem 1rem; border:1px solid var(--line-strong); background:#fff; font-family:var(--sans); font-size:0.9rem; font-weight:500; cursor:pointer; transition:all .15s;}
.yn-btn.selected{border-color:var(--green-dark); background:var(--green-bg); color:var(--green-dark); font-weight:600;}

.valo-input-wrap, .budget-input-wrap{display:flex; align-items:center; gap:0.5rem;}
.valo-input-wrap input, .budget-input-wrap input{flex:1; padding:0.75rem 1rem; border:1px solid var(--line-strong); font-family:var(--mono); font-size:1.1rem; font-weight:500;}
.valo-input-wrap input:focus, .budget-input-wrap input:focus{outline:2px solid var(--green); outline-offset:-1px;}
.valo-input-wrap .euro, .budget-input-wrap .euro{color:var(--muted); font-weight:600; font-family:var(--mono);}

.fs-badge{font-family:var(--mono); display:inline-flex; align-items:center; gap:0.35rem; padding:0.3rem 0.7rem; font-size:0.75rem; font-weight:600; width:fit-content;}
.fs-badge.zero{background:var(--green-bg); color:var(--green-dark);}
.fs-badge.twenty{background:#fdf0d9; color:#8a5a10;}

.sim-sep{height:1px; background:var(--line); margin:1.5rem 0;}
.sim-results{padding:2rem 2.25rem; display:none; flex-direction:column; gap:1.5rem;}
.sim-results.visible{display:flex;}
.results-headline{font-weight:700; font-size:1rem;}

.result-card{padding:1.5rem; text-align:center;}
.result-card.subject{background:var(--green-bg); border:1px solid rgba(0,184,107,0.2);}
.result-card.not-subject{background:var(--gray-100); border:1px solid var(--line);}
.result-card.unsure{background:#fdf6e0; border:1px solid #ecd989;}
.result-label{font-family:var(--mono); font-size:0.72rem; font-weight:500; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-bottom:0.5rem;}
.result-value{font-family:var(--serif); font-size:1.5rem;}
.result-card.subject .result-value{color:var(--green-dark);}

.criteria-table{width:100%; border-collapse:collapse; font-size:0.88rem;}
.criteria-table td{padding:0.5rem 0; border-bottom:1px solid var(--line);}
.criteria-table td:first-child{color:var(--muted);}
.criteria-table td:last-child{text-align:right; font-weight:600; font-family:var(--mono);}

.kpi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem;}
.kpi-card{padding:1.25rem; background:var(--gray-100);}
.kpi-card.highlight{background:var(--green-bg); border:1px solid rgba(0,184,107,0.2);}
.kpi-label{font-size:0.75rem; color:var(--muted); margin-bottom:0.4rem;}
.kpi-value{font-family:var(--mono); font-size:1.5rem; font-weight:500; font-variant-numeric:tabular-nums;}
.kpi-card.highlight .kpi-value{color:var(--green-dark);}
.kpi-sub{font-size:0.78rem; color:var(--muted); margin-top:0.2rem;}

.table-section{margin-bottom:1.5rem;}
.table-label{font-size:0.82rem; font-weight:600; color:var(--muted); margin-bottom:0.75rem;}
.sim-table{width:100%; border-collapse:collapse; font-size:0.88rem;}
.sim-table th{text-align:left; padding:0.5rem 0; color:var(--muted); font-weight:500; font-size:0.75rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.04em; border-bottom:1px solid var(--line);}
.sim-table td{padding:0.6rem 0; border-bottom:1px solid var(--line); font-family:var(--mono);}
.col-gain{font-weight:600; color:var(--green-dark);}

.bars-section{margin-bottom:2rem;}
.bar-row{display:flex; align-items:center; gap:1rem; margin-bottom:0.9rem;}
.bar-label{width:130px; font-size:0.85rem; color:var(--muted); flex-shrink:0;}
.bar-track{flex:1; height:36px; background:var(--gray-100);}
.bar-fill{height:100%; display:flex; align-items:center; justify-content:flex-end; padding-right:0.75rem; transition:width .2s;}
.bar-fill.prime{background:var(--line-strong);}
.bar-fill.pee{background:var(--green);}
.bar-value{color:#fff; font-weight:600; font-size:0.85rem; font-family:var(--mono);}

.cross-link{max-width:900px; margin:0.75rem auto 0; padding:0 0.5rem; font-size:0.85rem;}
.cross-link a{color:var(--green-dark); font-weight:600; text-decoration:none;}
.cross-link a:hover{text-decoration:underline;}

.capture-section{display:flex; flex-direction:column; gap:0.9rem;}
.capture-header{display:flex; gap:0.75rem; align-items:flex-start;}
.capture-icon{font-size:1.3rem;}
.capture-title{font-weight:700; font-size:1rem;}
.capture-subtitle{font-size:0.85rem; color:var(--muted); margin-top:0.2rem;}
.capture-form{display:flex; gap:0.6rem;}
.capture-form input{flex:1; padding:0.75rem 1rem; border:1px solid var(--line-strong); font-family:var(--sans); font-size:0.95rem;}
.capture-form input:focus{outline:2px solid var(--green); outline-offset:-1px;}
.capture-form button{padding:0.75rem 1.4rem; background:var(--green); color:#fff; border:none; font-weight:600; font-size:0.9rem; cursor:pointer; white-space:nowrap;}
.capture-form button:hover{background:var(--green-dark);}
.capture-form button:disabled{opacity:0.6; cursor:default;}
.rgpd-line{display:flex; gap:0.5rem; font-size:0.78rem; color:var(--muted); align-items:flex-start;}
.rgpd-line input{margin-top:0.2rem;}
.capture-error{display:none; font-size:0.82rem; color:#a3311a;}
.capture-error.visible{display:block;}
.capture-success{display:none; align-items:center; gap:0.5rem; padding:0.9rem 1rem; background:var(--green-bg); font-size:0.9rem;}
.capture-success.visible{display:flex;}

.sim-disclaimer{max-width:900px; margin:1.5rem auto 0; padding:0 0.5rem; font-size:0.78rem; color:var(--muted); line-height:1.6;}

.gate-card{padding:2.5rem 2.25rem; text-align:center;}
.gate-icon{font-size:1.8rem; margin-bottom:0.75rem;}
.gate-title{font-family:var(--serif); font-size:1.5rem; margin-bottom:0.4rem;}
.gate-subtitle{font-size:0.9rem; color:var(--muted); max-width:420px; margin:0 auto 1.5rem; line-height:1.5;}
.gate-card .capture-form{max-width:420px; margin:0 auto;}
.gate-card .rgpd-line{max-width:420px; margin:0.75rem auto 0; text-align:left;}
.gate-card .capture-error{max-width:420px; margin:0.5rem auto 0;}

@media (max-width:720px){
  .sim-inputs.grid-2, .kpi-grid{grid-template-columns:1fr;}
}