/* ═══════════════════════════════════════════════════════
   Capitali - Composants (pages actives)
   Les tokens et les bases vivent dans /css/tokens.css, chargé
   avant ce fichier par TOUTES les pages du site. Ne redéclarer
   aucun token ici : scripts/design-system/check.py le refuse.

   Les pages PEE gelées chargent /css/tokens.css puis leur propre
   /css/brand.css : elles restent gelées côté contenu et parcours,
   mais suivent la marque côté tokens (police, palette, espacements).
   ═══════════════════════════════════════════════════════ */
*{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;}
/* En-tête sans bandeau (le simulateur LPV n'affiche pas un bandeau qui
   pointerait vers lui-même) : l'en-tête est plus court d'autant.
   Posé sur <body> et non sur .topstack : ce sont les héros, ailleurs dans
   l'arbre, qui consomment --header-h, et une custom property n'hérite que
   dans le sous-arbre de l'élément qui la déclare. */
body.has-bare-header{--header-h:3rem;}

.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 ──
   Scoped to direct body children so it doesn't leak into nested
   navigation regions like .article-toc, .article-breadcrumb or
   .footer-sitemap.
   Scopé sur .topstack et non sur body : la nav d'en-tête est enfant du
   .topstack (bandeau + nav), jamais de body. Un `body > nav` ne matchait
   donc rien : la nav perdait son display:flex et ses enfants s'empilaient. */
.topstack > nav{
  position:relative;
  padding:0 2rem;
  height:var(--control-h);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--paper);
  border-bottom:1px solid var(--line-hair);
}
.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, .nav-logo-icon{display:block; flex-shrink:0;}
.nav-right{display:flex; align-items:center; gap:0.15rem;}
.nav-toggle{display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:40px; height:40px; margin-left:0.4rem; background:none; border:none; cursor:pointer; padding:0;}
.nav-toggle span{display:block; width:20px; height:2px; background:var(--ink); border-radius:1px; transition:transform .2s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.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{display:inline-flex; align-items:center; height:var(--control-h); color:var(--ink); text-decoration:none; font-size:0.85rem; font-weight:600; letter-spacing:0.04em; padding:0 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; justify-content:center; gap:0.75rem; height:var(--control-h); background:var(--ink); color:var(--paper); text-decoration:none; font-weight:600; letter-spacing:0.04em; 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 1.1rem; font-size:0.85rem; margin-left:0.5rem;}
.btn-primary{padding:0 1.6rem; font-size:1rem;}
.btn-ghost{display:inline-flex; align-items:center; height:var(--control-h); color:var(--muted); text-decoration:none; font-size:0.95rem; font-weight:500; letter-spacing:0.04em; transition:color .15s; background:none; border:none; cursor:pointer;}
.btn-ghost:hover{color:var(--ink);}

section{padding:var(--section-y) 2rem;}
.thesis, .final{padding-block:var(--section-y-loose);}  /* respirent : une seule idée à porter */
.trustband{padding-block:var(--section-y-tight);}

.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:calc(var(--header-h) + var(--hero-gap)) 2rem 3.5rem; text-align:center;}
.page-hero .eyebrow{justify-content:center; display:flex;}
.page-hero h1{font-family:var(--serif); font-weight:var(--display-weight); font-size:clamp(2.2rem, 4.4vw, 3.1rem); line-height:1.08; letter-spacing:-0.025em; 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:calc(var(--header-h) + var(--hero-gap)) 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:var(--display-weight); font-size:clamp(2.4rem, 5vw, 3.6rem); line-height:1.05; letter-spacing:-0.025em; 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-savings{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 -1.4rem 1.7rem; padding:1rem 1.4rem; background:var(--green-bg); border-top:1px solid rgba(0,184,107,0.25); border-bottom:1px solid rgba(0,184,107,0.25);}
.sim-savings-label{font-size:0.85rem; font-weight:600; color:var(--ink);}
.sim-savings-value{font-family:var(--mono); font-size:1.6rem; font-weight:500; color:var(--green-dark); font-variant-numeric:tabular-nums;}
.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:var(--display-weight); 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:var(--display-weight); font-size:clamp(1.9rem, 3.6vw, 2.6rem); line-height:1.16; text-wrap:balance;}
.compare-sub{max-width:44rem; margin:0.9rem auto 0; color:var(--text-strong); line-height:1.65; text-wrap:pretty;}
.compare-sub a{color:var(--green-dark); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.compare-sub a:hover{color:var(--ink);}

/* Section « Enfin une solution complète », deux colonnes de nature différente :
   à gauche un énoncé typographique (titre gris + publics visés), à droite des
   cartes bordées. Les publics ne sont volontairement PAS des cartes : ce sont
   des destinataires, pas des arguments, et leur donner la même boîte les
   mettrait sur le même plan. Angles vifs, aucun token nouveau. */
.solution{padding:var(--section-y) 1.5rem;}
.solution-inner{display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:3.5rem; max-width:1080px; margin:0 auto; align-items:start;}
.solution-titre{font-family:var(--serif); font-weight:var(--display-weight); font-size:clamp(1.9rem, 3.4vw, 2.5rem); line-height:1.14; letter-spacing:-0.025em; color:var(--line-strong); text-wrap:balance;}
.solution-positioning{margin-top:0.9rem; font-size:1rem; line-height:1.55; color:var(--text-strong); text-wrap:pretty;}
.solution-titre em{font-style:normal; color:var(--text-strong);}
.solution-intro{margin-top:1.5rem; font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);}
.solution-publics{list-style:none; margin:0.6rem 0 0; padding:0;}
.solution-publics li{font-family:var(--serif); font-size:clamp(1.35rem, 2.4vw, 1.8rem); line-height:1.5; color:var(--ink); letter-spacing:-0.02em;}
.solution-publics li::before{content:''; display:inline-block; width:0.42rem; height:0.42rem; margin-right:0.7rem; vertical-align:middle; background:var(--green);}
.solution-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);}
.solution-card{padding:1.6rem 1.5rem; background:var(--surface);}
.solution-card h3{font-size:1rem; font-weight:600; letter-spacing:-0.01em; line-height:1.3;}
.solution-card p{margin-top:0.6rem; font-size:0.88rem; color:var(--muted); line-height:1.6;}
.solution-card ul{margin:0.7rem 0 0; padding-left:1.1rem;}
.solution-card ul li{font-size:0.88rem; color:var(--muted); line-height:1.7;}
.solution-card .btn-ghost{margin-top:1rem; white-space:nowrap;}
@media (max-width:900px){
  .solution-inner{grid-template-columns:1fr; gap:2.5rem;}
}
@media (max-width:640px){
  .solution-grid{grid-template-columns:1fr;}
}

/* ── 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;}
.why-grid.is-quatre{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){
  .why-grid, .why-grid.is-quatre{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .why-grid, .why-grid.is-quatre{grid-template-columns:1fr;}
}

/* ── PRICING ── */
.pricing-head{text-align:center; margin-bottom:2.75rem;}
.pricing-head h2{font-family:var(--serif); font-weight:var(--display-weight); 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:var(--display-weight); 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{display:flex; flex-direction:column; padding:1.8rem; background:#fff; text-decoration:none; color:inherit; transition:background .15s;}
.guide-card.is-soon{background:var(--paper);}
a.guide-card:hover{background:var(--green-bg);}
a.guide-card:hover h3{color:var(--green-dark);}
.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:500;}
.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; transition:color .15s;}
.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:grid; grid-template-columns:minmax(180px,260px) 1fr; gap:3rem; padding:3.5rem 2rem 2.5rem; max-width:1080px; margin:0 auto;}
.footer-brand{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:grid; grid-template-columns:repeat(3, minmax(120px,1fr)); gap:2rem 2.5rem; justify-content:end;}
.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:820px){
  .footer-inner{grid-template-columns:1fr; gap:2.2rem;}
  .footer-sitemap{grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.5rem 2rem; justify-content:start;}
}
@media (max-width:520px){
  .footer-sitemap{grid-template-columns:repeat(2, minmax(0,1fr));}
}

/* ── 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;}
  .nav-toggle{display:flex;}
  .nav-right{gap:0.5rem;}
  .nav-right.is-open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line-hair);
    padding:0.3rem 2rem 1rem; box-shadow:0 12px 24px -12px rgba(0,0,0,0.15);
  }
  .nav-right.is-open .nav-link{display:block; padding:0.8rem 0; border-bottom:1px solid var(--line-hair); font-size:0.95rem;}
  .nav-right.is-open .nav-login{width:100%; justify-content:center; margin:0.8rem 0 0.5rem;}
  .nav-right.is-open .nav-cta{width:100%; justify-content:center;}
}

/* ═══════════════════════════════════════════════════════
   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:calc(var(--header-h) + var(--hero-gap)) 2rem 2.5rem;}
.article-hero h1{font-family:var(--serif); font-weight:var(--display-weight); font-size:clamp(2.2rem, 4.2vw, 3rem); line-height:1.1; letter-spacing:-0.025em; 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); flex-wrap:wrap;}
.article-meta .dot{width:3px; height:3px; background:var(--muted);}
.article-author{display:inline-flex; align-items:center; gap:0.45rem;}
.article-author-avatar{width:24px; height:24px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.article-author a{color:inherit; font-weight:600; text-decoration:none;}
.article-author a:hover{text-decoration:underline;}

.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:var(--display-weight); 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(--ink);}
.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:var(--display-weight); 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-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;}

/* Onglets de profil (simulateur AGA), il n'existait aucun composant d'onglets
   dans le design system ; construit dans la grammaire de .yn-btn, à angles vifs
   comme le reste (aucun token de rayon n'existe, et on n'en introduit pas). */
.tabs{display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:1.5rem;}
.tab{padding:0.75rem 1rem; border:1px solid var(--line-strong); background:var(--surface); font-family:var(--sans); text-align:left; cursor:pointer; transition:all .15s;}
.tab:hover{border-color:var(--ink);}
.tab.is-active{border-color:var(--green-dark); background:var(--green-bg);}
.tab-title{display:block; font-size:0.9rem; font-weight:600; color:var(--ink);}
.tab.is-active .tab-title{color:var(--green-dark);}
.tab-sub{display:block; font-size:0.78rem; color:var(--muted); margin-top:0.15rem; line-height:1.35;}

/* Verdict : le chiffre unique, puis les deux colonnes rouge/vert. */
.verdict{border:1px solid var(--green-dark); background:var(--green-bg); padding:1rem 1.15rem; margin-bottom:0.75rem;}
.verdict.is-negative{border-color:var(--coral); background:var(--red-bg);}
.verdict-main{font-size:1.05rem; line-height:1.4; color:var(--ink); font-weight:500;}
.verdict-sub{font-size:0.85rem; line-height:1.5; color:var(--text-strong); margin-top:0.35rem;}
.verdict-cols{display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:0.75rem;}
.verdict-col{border:1px solid var(--line); padding:0.85rem 1rem;}
.verdict-col.bad{border-color:var(--coral); background:var(--red-bg);}
.verdict-col.good{border-color:var(--green-dark); background:var(--green-bg);}
.verdict-col-head{font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase; font-weight:600;}
.verdict-col.bad .verdict-col-head{color:var(--coral);}
.verdict-col.good .verdict-col-head{color:var(--green-dark);}
.verdict-col-value{font-size:1.5rem; line-height:1.1; margin:0.35rem 0 0.15rem;}
.verdict-col.bad .verdict-col-value{color:var(--coral);}
.verdict-col.good .verdict-col-value{color:var(--green-dark);}
.verdict-col-note{font-size:0.72rem; color:var(--muted); line-height:1.35;}

.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:500; 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:500; 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:500; 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:500; 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; flex-wrap:wrap; gap:0.6rem;}
.capture-form input{flex:1; min-width:0; 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-dark); outline-offset:-1px;}
.capture-form button{padding:0.75rem 1.4rem; background:var(--ink); color:var(--paper); 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;}
@media (max-width:420px){
  .capture-form{flex-direction:column;}
  .capture-form button{width:100%;}
}
.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){
  .tabs{grid-template-columns:1fr;}
  .verdict-cols{grid-template-columns:1fr;}
  .sim-inputs.grid-2, .kpi-grid{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════
   VISUELS D'ARTICLE (blog)
   Couvertures génératives en SVG inline : pas d'asset binaire,
   pas de pipeline d'images, rendu identique en light/print et
   parfaitement net à tout DPI. Chaque motif illustre la donnée
   centrale de l'article plutôt qu'une photo d'illustration.
   Scopé par .has-visual pour ne pas affecter les cartes sans
   couverture (/ressources/ réutilise .guide-card).
   ═══════════════════════════════════════════════════════ */
.guide-card.has-visual{padding:0;}
.guide-card-visual{
  aspect-ratio:16/9;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.guide-card-visual svg{display:block; width:100%; height:100%;}
.guide-card-body{padding:1.8rem; display:flex; flex-direction:column; flex:1;}
a.guide-card.has-visual:hover{background:#fff;}
a.guide-card.has-visual:hover .guide-card-visual{background:var(--green-bg);}
.guide-card-visual{transition:background .15s;}

/* Couverture en tête d'article */
.article-cover{
  margin:0 0 2.5rem;
  aspect-ratio:16/9;
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
}
.article-cover svg{display:block; width:100%; height:100%;}
@media (max-width:640px){
  .guide-card-body{padding:1.4rem;}
  .article-cover{margin-bottom:1.75rem;}
}



/* ═══════════════════════════════════════════════════════
   BANDEAU DE GARANTIES
   Même grammaire que le bandeau « ils nous font confiance » de la
   référence (puce carrée + énoncé, puis rangée d'items séparés par des
   filets), mais rempli avec ce que Capitali peut réellement affirmer.
   Pas de logos clients : il n'y en a aucun à ce stade, et en inventer
   fabriquerait de fausses références.
   ═══════════════════════════════════════════════════════ */
.trustband{border-top:1px solid var(--line-hair); border-bottom:1px solid var(--line-hair); background:var(--surface);}
.trustband-inner{max-width:1080px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem 2.5rem;}
.trustband-claim{display:flex; align-items:flex-start; gap:0.7rem; font-size:0.95rem; font-weight:600; line-height:1.35; letter-spacing:0.02em; max-width:26rem; text-wrap:balance;}
.trustband-claim::before{content:''; width:0.7rem; height:0.7rem; background:var(--ink); flex-shrink:0; margin-top:0.25rem;}
.trustband-items{display:flex; flex-wrap:wrap; align-items:center; gap:0 1.75rem;}
.trustband-item{display:flex; align-items:center; gap:0.55rem; padding:0.35rem 0; font-size:0.82rem; font-weight:500; color:var(--text-strong); letter-spacing:0.02em; white-space:nowrap;}
.trustband-item + .trustband-item{padding-left:1.75rem; border-left:1px solid var(--line);}
.trustband-item .ico{width:16px; height:16px; flex-shrink:0; fill:none; stroke:var(--green-dark); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
@media (max-width:760px){
  .trustband-items{gap:0.15rem 1.1rem;}
  .trustband-item + .trustband-item{padding-left:0; border-left:none;}
}


/* ── TRÈS PETITS ÉCRANS (< 380px : iPhone SE, petits Android) ──
   Mesuré : à 345px la rangée logo + « Se connecter » + CTA dépasse de ~17px,
   et le pied de page déborde à 305px. Le lien de connexion cède la place
   (il reste accessible depuis le pied de page) et le CTA se resserre. */
@media (max-width:380px){
  .nav-login{display:none;}
  .nav-cta{padding:0 0.8rem; font-size:0.8rem; gap:0.5rem;}
  nav{padding:0 1rem;}
  .nav-right.is-open{padding:0.3rem 1rem 1rem;}
  section{padding-inline:1.25rem;}
  .footer-inner, .footer-bottom{padding-inline:1.25rem;}
  .trustband-claim{font-size:0.9rem;}
}

/* ═══════════════════════════════════════════════════════
   CARTES ÉTUDE DE CAS
   Photo carrée sous une grille blanche, quelques cellules
   remplies en blanc translucide (dissolution « pixélisée »),
   le tout sous un grain. Traitement entièrement en CSS : il
   s'applique à n'importe quelle photo déposée, sans retouche
   ni pipeline d'images.

   En attente des photos clients. Aucune page ne l'utilise
   encore : on ne publie pas d'étude de cas sans client réel.

   Markup attendu :
   <a class="case-card" href="…">
     <div class="case-media"><img src="/img/client.jpg" alt="…">
       <span class="case-grid"></span><span class="case-grain"></span></div>
     <h3>Titre de l'étude de cas</h3>
     <img class="case-logo" src="/img/logo-client.svg" alt="Nom du client">
   </a>
   ═══════════════════════════════════════════════════════ */
.case-grid-wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:3rem;}
.case-card{display:flex; flex-direction:column; gap:1rem; text-decoration:none; color:inherit;}
/* Cadre carré imposé et recadrage en `cover` : les cartes restent alignées
   quelles que soient les dimensions des photos fournies, sans retouche. */
.case-media{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--line); border:1px solid var(--line); line-height:0;}
.case-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}

/* Grille + cellules pleines. Une seule couche de fond : les traits sont des
   dégradés répétés, les blocs des dégradés pleins calés sur le pas de grille
   (--cell). Rien à dessiner à la main, rien à charger. */
.case-grid{
  position:absolute; inset:12%; pointer-events:none;
  --cell:14.2857%;   /* 7 colonnes sur la zone encadrée */
  background-image:
    linear-gradient(rgba(255,255,255,.34) 0 100%), linear-gradient(rgba(255,255,255,.28) 0 100%),
    linear-gradient(rgba(255,255,255,.30) 0 100%), linear-gradient(rgba(255,255,255,.22) 0 100%),
    linear-gradient(rgba(255,255,255,.26) 0 100%), linear-gradient(rgba(255,255,255,.20) 0 100%),
    repeating-linear-gradient(to right,  rgba(255,255,255,.55) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.55) 0 1px, transparent 1px var(--cell));
  background-size:var(--cell) var(--cell), var(--cell) var(--cell), var(--cell) var(--cell),
                  var(--cell) var(--cell), var(--cell) var(--cell), var(--cell) var(--cell),
                  100% 100%, 100% 100%;
  background-position:
    calc(var(--cell)*1) calc(var(--cell)*2), calc(var(--cell)*4) calc(var(--cell)*1),
    calc(var(--cell)*5) calc(var(--cell)*3), calc(var(--cell)*2) calc(var(--cell)*5),
    calc(var(--cell)*6) calc(var(--cell)*4), calc(var(--cell)*3) calc(var(--cell)*6),
    0 0, 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  border-right:1px solid rgba(255,255,255,.55); border-bottom:1px solid rgba(255,255,255,.55);
}
/* Grain : turbulence SVG en data-URI, donc aucun fichier image à servir. */
.case-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.42; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.case-card h3{font-size:1rem; font-weight:600; line-height:1.3; letter-spacing:0.01em; text-wrap:balance;}
.case-logo{height:28px; width:auto; margin-top:auto; object-fit:contain; object-position:left center;}
a.case-card:hover h3{color:var(--green-dark);}
a.case-card:hover .case-media img{transform:scale(1.02);}
.case-media img{transition:transform .4s cubic-bezier(.22,1,.36,1);}
@media (max-width:860px){ .case-grid-wrap{grid-template-columns:1fr; gap:2.25rem;} }

/* ═══════════════════════════════════════════════════════
   TÉMOIGNAGE
   Photo traitée (même grille / grain que les cartes étude de cas)
   et citation. La photo est toujours servie au même format carré :
   le recadrage se fait à la source via scripts/crop-photo.sh, et
   `object-fit:cover` rattrape toute source non carrée.
   ═══════════════════════════════════════════════════════ */
.testimonial{background:var(--surface); border-top:1px solid var(--line-hair); border-bottom:1px solid var(--line-hair);}
.testimonial-inner{max-width:60rem; margin:0 auto;}

/* Variante par défaut : sans photo. La citation porte seule, précédée de la
   puce carrée du design system. La photo n'est pas un prérequis pour publier
   une preuve client, elle s'ajoute quand elle existe (voir --photo). */
.testimonial blockquote{
  margin:0 0 1.5rem; position:relative; padding-left:2rem;
  font-size:clamp(1.2rem, 2.4vw, 1.7rem); font-weight:var(--display-weight);
  line-height:1.4; letter-spacing:-0.015em; color:var(--ink); text-wrap:pretty;
}
.testimonial blockquote::before{
  content:''; position:absolute; left:0; top:0.55em;
  width:0.75rem; height:0.75rem; background:var(--green);
}
.testimonial blockquote .said{color:var(--green-dark);}
.testimonial figure{margin:0;}
.testimonial figcaption{display:flex; flex-direction:column; gap:0.3rem; padding-left:2rem;}
.testimonial .who{font-size:0.95rem; font-weight:600; letter-spacing:0.02em;}
.founder-byline{display:flex; align-items:center; gap:0.55rem;}
.testimonial .where a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.testimonial .where a:hover{color:var(--green-dark);}
.testimonial .where{font-family:var(--mono); font-size:0.76rem; letter-spacing:0.06em; color:var(--muted);}

/* Avec photo : deux colonnes. À activer en ajoutant la classe sur la section
   et le bloc .case-media dans le balisage. */
.testimonial--photo .testimonial-inner{
  max-width:1080px; display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:3rem; align-items:center;
}
.testimonial--photo blockquote, .testimonial--photo figcaption{padding-left:0;}
.testimonial--photo blockquote::before{display:none;}

@media (max-width:820px){
  .testimonial--photo .testimonial-inner{grid-template-columns:1fr; gap:1.75rem;}
  .testimonial--photo .case-media{max-width:320px;}
}
  .testimonial--compact .testimonial-inner{grid-template-columns:minmax(0,110px) minmax(0,1fr);}

/* ── Honeypot anti-spam (formulaires de capture) ──
   Hors-écran plutôt que display:none : certains bots ignorent les champs
   display:none mais remplissent quand même les champs positionnés hors champ. */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ── Bandeau de consentement cookies ── */
#cookie-banner{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:1000;
  max-width:640px; margin:0 auto;
  background:var(--surface); border:1px solid var(--line); border-radius:0.75rem;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  padding:1.25rem 1.5rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
}
#cookie-banner p{margin:0; font-size:0.9rem; color:var(--text-strong); flex:1 1 260px;}
#cookie-banner a{color:inherit; text-decoration:underline;}
#cookie-banner .cookie-banner-actions{display:flex; gap:0.5rem; flex:0 0 auto;}
#cookie-banner .btn-primary{height:2.5rem; padding:0 1.25rem; font-size:0.9rem;}
#cookie-banner .btn-ghost{height:2.5rem; padding:0 0.5rem; font-size:0.9rem;}
@media (max-width:480px){
  #cookie-banner{flex-direction:column; align-items:stretch;}
  #cookie-banner .cookie-banner-actions{justify-content:flex-end;}
}
}