/* ==========================================================================
   LEADVENOM — Section 01 / La Coupure
   Dossier technique numéroté. Noir profond, papier clair, vert chirurgical.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Couleurs */
  --green:#7de33f;
  --green-bright:#a4ff5e;
  --green-dim:#4c8a2e;
  --green-ink:#2f6b14;
  --ink:#060906;
  --ink-2:#0a0e09;
  --panel:#0d120c;
  --panel-2:#111710;
  --line:#1f291d;
  --line-strong:#2c3d28;
  --text:#e4e8e0;
  --muted:#8f9a8b;
  --paper:#f3f1e9;
  --paper-2:#e9e6da;
  --ink-on-paper:#141a12;
  --muted-on-paper:#5a6555;
  --line-on-paper:#c8c4b4;
  --danger:#ff7a6e;

  /* VENOM PRECISION — géométrie de coupe dérivée du V LeadVenom */
  --cut:34px;
  --cut-lg:clamp(56px,9vw,130px);
  --venom-cut:linear-gradient(135deg,var(--green) 0 1px,transparent 1px);
  --shadow-venom:0 22px 44px -20px rgba(125,227,63,.14);
  --font-serif:Georgia,"Times New Roman",serif;

  /* Rayons : angles vifs, jamais de pilules */
  --r-none:0;
  --r-xs:2px;
  --r-sm:4px;

  /* Mise en page */
  --container:1240px;
  --gutter:clamp(20px,4vw,48px);
  --hairline:1px;

  /* Typographie : pile système LeadVenom (aucune ressource externe) */
  --font-display:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Échelle */
  --fs-eyebrow:.6875rem;
  --fs-body:1rem;
  --fs-lead:clamp(1.0625rem,1.4vw,1.25rem);
  --fs-h3:clamp(1.15rem,1.8vw,1.375rem);
  --fs-h2:clamp(1.9rem,3.8vw,3.125rem);
  --fs-h1:clamp(2.4rem,6.2vw,4.75rem);
  --fs-folio:clamp(4.5rem,10vw,9rem);
  --fs-price:clamp(1.75rem,3vw,2.5rem);

  /* Ombres : nettes, décalées, pas de flou SaaS */
  --shadow-cut:8px 8px 0 0 rgba(125,227,63,.09);
  --shadow-cut-strong:10px 10px 0 0 rgba(125,227,63,.16);

  /* Mouvement */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.28s;
}

/* ---------- 2. BASE ---------- */
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:96px}
body{
  margin:0;
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(125,227,63,.008) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,227,63,.008) 1px,transparent 1px);
  background-size:72px 72px;
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--green-dim);text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--green-bright)}
button,input,textarea,select{font:inherit;color:inherit}
strong,b{font-weight:600;color:var(--text)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
::selection{background:var(--green);color:var(--ink)}

/* ---------- 3. LAYOUT ---------- */
.container{width:min(calc(100% - var(--gutter)*2),var(--container));margin-inline:auto}
.narrow{width:min(calc(100% - var(--gutter)*2),760px);margin-inline:auto}
.skip-link{
  position:fixed;left:16px;top:-80px;z-index:1000;
  padding:12px 20px;background:var(--green);color:var(--ink);
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;
  text-decoration:none;transition:top .2s var(--ease);
}
.skip-link:focus{top:16px}

/* ---------- 4. TYPOGRAPHIE ---------- */
h1,h2,h3,h4{
  margin:0 0 1.1em;
  font-family:var(--font-display);
  font-weight:700;
  text-wrap:balance;
  color:var(--text);
}
h1{
  font-size:var(--fs-h1);
  line-height:1.02;
  letter-spacing:-.03em;
  max-width:16ch;
}
h2{
  font-size:var(--fs-h2);
  line-height:1.06;
  letter-spacing:-.025em;
  max-width:26ch;
}
h3{
  font-size:var(--fs-h3);
  line-height:1.2;
  letter-spacing:-.015em;
  max-width:none;
}
p{margin:0 0 1.25em;max-width:68ch}
.lead{
  font-size:var(--fs-lead);
  line-height:1.6;
  color:var(--text);
  max-width:56ch;
  font-weight:400;
}
.micro{
  font-family:var(--font-mono);
  font-size:.8125rem;
  color:var(--muted);
  letter-spacing:.01em;
  max-width:none;
}
/* Micro-labels techniques */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 22px;
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--green);
  line-height:1.3;
}
.eyebrow:before{
  content:"";
  width:20px;height:1px;
  background:var(--green);
  flex-shrink:0;
}
.section-head{max-width:800px;margin-bottom:clamp(40px,6vw,64px)}
.section-head p:last-child{margin-bottom:0}

/* ---------- 5. HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(6,9,6,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:var(--hairline) solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
/* Signal venimeux courant le long de la base du header */
.site-header:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,transparent 0,rgba(125,227,63,.55) 18%,rgba(125,227,63,.55) 34%,transparent 62%);
  opacity:.6;
  pointer-events:none;
}
.site-header.is-scrolled{
  background:rgba(6,9,6,.97);
  border-bottom-color:var(--line-strong);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.7);
}
.site-header__inner{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  transition:min-height .3s var(--ease);
}
.site-header.is-scrolled .site-header__inner{min-height:74px}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  flex-shrink:0;
  position:relative;
  padding-left:18px;
}
/* Encoche venimeuse signalant la marque */
.brand:before{
  content:"";
  position:absolute;
  left:0;top:50%;
  width:3px;height:26px;
  transform:translateY(-50%) skewX(-18deg);
  background:var(--green);
}
.brand__logo{
  display:block;
  width:auto;height:auto;
  max-width:222px;max-height:66px;
  object-fit:contain;
  transition:transform .3s var(--ease);
}
.brand:hover .brand__logo{transform:translateX(2px)}
.brand__text{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.125rem;
  letter-spacing:-.02em;
  color:var(--text);
}
.nav-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  min-height:44px;
  background:transparent;
  border:var(--hairline) solid var(--line-strong);
  border-radius:var(--r-sm);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease);
}
.nav-toggle:hover{border-color:var(--green-dim)}
.nav-toggle__bars,.nav-toggle__bars:before,.nav-toggle__bars:after{
  display:block;width:18px;height:2px;background:var(--green);content:"";
}
.nav-toggle__bars:before{transform:translateY(-6px)}
.nav-toggle__bars:after{transform:translateY(4px)}
.primary-nav{
  display:none;
  position:absolute;
  inset:100% 0 auto;
  background:var(--ink);
  border-bottom:var(--hairline) solid var(--line);
  padding:24px var(--gutter) 32px;
  max-height:calc(100vh - 76px);
  overflow:auto;
}
.primary-nav.is-open{display:block}
.primary-nav ul{list-style:none;margin:0;padding:0}
.primary-nav a{text-decoration:none}
.primary-nav__list a{
  display:block;
  padding:14px 0;
  border-bottom:var(--hairline) solid var(--line);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:.875rem;
  letter-spacing:.02em;
  transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.primary-nav__list a:hover{color:var(--text);padding-left:8px}
.primary-nav__list a[aria-current=page]{color:var(--green)}
.primary-nav__list a[aria-current=page]:before{content:"→ "}
.primary-nav__list>li{position:relative}
.nav-group__toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  min-height:48px;
  padding:14px 0;
  border:0;
  border-bottom:var(--hairline) solid var(--line);
  background:transparent;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:.875rem;
  letter-spacing:.02em;
  text-align:left;
  cursor:pointer;
  transition:color var(--dur) var(--ease);
}
.nav-group__toggle:hover,.nav-group.has-current>.nav-group__toggle{color:var(--text)}
.nav-group.has-current>.nav-group__toggle{color:var(--green)}
.nav-group__caret{
  color:var(--green);
  font-size:.75rem;
  transition:transform var(--dur) var(--ease);
}
.nav-group.is-open>.nav-group__toggle .nav-group__caret{transform:rotate(180deg)}
.primary-nav .nav-submenu{
  padding:4px 0 8px 18px;
  border-left:var(--hairline) solid var(--line-strong);
}
.primary-nav__list .nav-submenu a{
  min-height:44px;
  padding:11px 12px;
  font-size:.8125rem;
}
.primary-nav__list .nav-submenu a:hover{padding-left:18px}
.js-enabled .nav-group:not(.is-open)>.nav-submenu{display:none}
.primary-nav__actions{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:24px;
}
.header-contact{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.header-contact__action{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
  align-items:center;
  min-height:58px;
  padding:7px 9px;
  border:var(--hairline) solid var(--line-strong);
  background:rgba(125,227,63,.035);
  box-shadow:inset 2px 0 0 rgba(125,227,63,.2);
  color:var(--text);
  text-decoration:none;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.header-contact__action:hover{
  border-color:var(--green-dim);
  background:rgba(125,227,63,.075);
  color:var(--text);
  transform:translateY(-1px);
}
.contact-icon{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  border:var(--hairline) solid rgba(125,227,63,.32);
  background:rgba(125,227,63,.08);
  color:var(--green-bright);
}
.contact-icon svg{
  width:18px;height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.contact-icon img{display:block;width:18px;height:18px}
.header-contact__copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  white-space:nowrap;
  font-family:var(--font-mono);
  line-height:1.25;
}
.header-contact__copy small{
  font-size:.6875rem;
  color:var(--muted);
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.header-contact__copy strong{
  margin-top:2px;
  font-size:.78rem;
  font-weight:600;
  color:var(--text);
}

/* ---------- 5.1 BREADCRUMBS ---------- */
.breadcrumb-strip{
  border-bottom:var(--hairline) solid var(--line);
  background:rgba(12,17,11,.72);
}
.breadcrumbs{padding:13px 0}
.breadcrumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 8px;
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--font-body);
  font-size:.875rem;
  line-height:1.45;
}
.breadcrumbs__item{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  max-width:100%;
}
.breadcrumbs__item a{
  color:#aab4a6;
  text-decoration:none;
  border-bottom:var(--hairline) solid transparent;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.breadcrumbs__item a:hover{
  color:var(--green-bright);
  border-bottom-color:var(--green-dim);
}
.breadcrumbs__item a:focus-visible{
  color:var(--text);
  outline:2px solid var(--green);
  outline-offset:3px;
}
.breadcrumbs__separator{
  flex-shrink:0;
  color:var(--green);
  opacity:.68;
}
.breadcrumbs__current{
  color:var(--text);
  font-weight:600;
  overflow-wrap:anywhere;
}
@media(max-width:520px){
  .breadcrumbs{padding:11px 0}
  .breadcrumbs__list{gap:4px 7px;font-size:.8125rem}
  .breadcrumbs__item{gap:7px}
}

/* ---------- 6. HERO ---------- */
.hero{
  position:relative;
  padding:clamp(72px,10vw,148px) 0 clamp(64px,8vw,120px);
  overflow:hidden;
}
/* Ligne de signal : injection horizontale sous le sommet du hero */
.hero:before{
  content:"";
  position:absolute;
  top:clamp(40px,6vw,72px);left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,var(--green) 0,var(--green) 72px,rgba(125,227,63,.25) 72px,rgba(125,227,63,.25) 46%,transparent 46%);
  opacity:.6;
  pointer-events:none;
}
/* Marqueur V monumental, fantôme derrière le hero de la home */
.page-home .hero:after{
  content:"V";
  position:absolute;
  right:-2vw;
  bottom:-6vw;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(16rem,34vw,34rem);
  line-height:.72;
  letter-spacing:-.08em;
  color:transparent;
  -webkit-text-stroke:1px rgba(125,227,63,.13);
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.hero__grid{display:grid;gap:clamp(40px,6vw,64px);align-items:start;position:relative;z-index:1}
.hero .lead{margin-top:8px}

/* Entrée maîtrisée */
.js-enabled:not(.reduced-motion) .reveal-hero > *{
  opacity:0;
  transform:translateY(18px);
  animation:hero-in .85s var(--ease) forwards;
}
.js-enabled:not(.reduced-motion) .reveal-hero > *:nth-child(1){animation-delay:.02s}
.js-enabled:not(.reduced-motion) .reveal-hero > *:nth-child(2){animation-delay:.1s}
.js-enabled:not(.reduced-motion) .reveal-hero > *:nth-child(3){animation-delay:.18s}
.js-enabled:not(.reduced-motion) .reveal-hero > *:nth-child(4){animation-delay:.26s}
.js-enabled:not(.reduced-motion) .reveal-hero > *:nth-child(5){animation-delay:.34s}
.js-enabled:not(.reduced-motion) .reveal-hero > *:nth-child(6){animation-delay:.42s}
.js-enabled:not(.reduced-motion) .reveal-hero > *:nth-child(7){animation-delay:.5s}
@keyframes hero-in{to{opacity:1;transform:none}}
/* Le point final du H1 devient un curseur de terminal.
   Injecté par CSS uniquement : le texte source reste verbatim, le pseudo-élément
   n'est pas vocalisé par les lecteurs d'écran. */
.hero h1:after{content:".";color:var(--green)}
@media(min-width:980px){
  .page-home .hero h1:after{animation:caret-blink 1.1s steps(1) infinite}
}
@keyframes caret-blink{0%,55%{opacity:1}56%,100%{opacity:0}}

.hero__actions,.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:36px 0 20px;
  align-items:center;
}
.conversion-link{
  margin:18px 0 12px;
  font-family:var(--font-mono);
  font-size:.875rem;
  color:var(--muted);
}
.conversion-link a{color:var(--green-bright);text-decoration:none;border-bottom:var(--hairline) solid var(--green-dim)}
.conversion-link a:hover{color:var(--text);border-bottom-color:var(--green)}
.section-alt .conversion-link{color:var(--muted-on-paper)}
.section-alt .conversion-link a{color:var(--green-ink)}
.section-alt>.cta-panel .conversion-link a{color:var(--green-bright)}
.section-alt>.cta-panel .conversion-link a:hover{color:var(--text)}

/* Visuel du hero : image recadrée, coin vert, cadre technique */
.hero .photo-frame--hero{position:relative}
.hero .photo-frame--hero:not(.venom-frame):before{
  content:"";
  position:absolute;
  top:-14px;right:-14px;
  width:56px;height:56px;
  border-top:var(--hairline) solid var(--green);
  border-right:var(--hairline) solid var(--green);
  z-index:2;
  pointer-events:none;
}
.hero .photo-frame--hero:not(.venom-frame):after{
  content:"";
  position:absolute;
  bottom:-14px;left:-14px;
  width:56px;height:56px;
  border-bottom:var(--hairline) solid var(--green);
  border-left:var(--hairline) solid var(--green);
  z-index:2;
  pointer-events:none;
}

/* ========== VENOM PRECISION — V2 ========== */

/* --- Venom Cut : incision diagonale propriétaire --- */
.venom-frame{
  position:relative;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
  border:0;
}
.venom-frame img{transform:scale(1.01)}
/* --- Coin crochet (fang) : stabilisateurs géométriques encadrant l'image --- */
.fang{position:relative;overflow:visible}
.fang:before,.fang:after{
  content:"";
  position:absolute;
  width:clamp(34px,5vw,64px);height:clamp(34px,5vw,64px);
  z-index:2;
  pointer-events:none;
}
.fang:before{
  top:-13px;right:-13px;
  border-top:1px solid var(--green);
  border-right:1px solid var(--green);
}
.fang:after{
  bottom:-13px;left:-13px;
  border-bottom:1px solid var(--green);
  border-left:1px solid var(--green);
}
/* Fang sur papier : retomber au vert encre */
.section-alt .fang:before,.section-alt .fang:after{border-color:var(--green-ink)}

/* --- Venom keywords : mots sélectionnés en italique éditoriale --- */
.venom-key{
  font-style:normal;
  color:var(--green);
  position:relative;
  white-space:nowrap;
}
.section-alt .venom-key{color:var(--green-ink)}
.venom-serif{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--green);
  letter-spacing:-.01em;
}
.section-alt .venom-serif{color:var(--green-ink)}

/* --- Venom Line : ligne de signal horizontale --- */
.venom-line{
  display:block;
  width:100%;
  height:1px;
  margin:clamp(28px,4vw,44px) 0;
  background:linear-gradient(90deg,transparent,var(--green) 22%,var(--green) 38%,transparent 70%);
  opacity:.55;
  pointer-events:none;
}
.section-alt .venom-line{background:linear-gradient(90deg,transparent,var(--green-ink) 22%,var(--green-ink) 38%,transparent 70%)}

/* --- Marqueur de section éditorial (label bas) --- */
.venom-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.venom-tag:after{
  content:"";
  width:36px;height:1px;
  background:var(--green);
  opacity:.7;
}
.section-alt .venom-tag{color:var(--muted-on-paper)}
.section-alt .venom-tag:after{background:var(--green-ink)}

/* ---------- 7. BOUTONS ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 24px;
  border-radius:var(--r-none);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.9375rem;
  letter-spacing:-.01em;
  text-decoration:none;
  border:var(--hairline) solid transparent;
  cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--green);
  color:var(--ink);
  /* filet plus discret : pas de dalle verte massive */
  box-shadow:3px 3px 0 0 rgba(125,227,63,.28);
}
.btn-primary:hover{
  background:var(--green-bright);
  color:var(--ink);
  transform:translate(-1px,-1px);
  box-shadow:5px 5px 0 0 rgba(125,227,63,.34);
}
.btn-primary:active{transform:translate(1px,1px);box-shadow:1px 1px 0 0 rgba(125,227,63,.3)}
.btn-secondary{
  background:transparent;
  border-color:var(--line-strong);
  color:var(--text);
}
.btn-secondary:hover{
  border-color:var(--green-dim);
  color:var(--green-bright);
  background:rgba(125,227,63,.05);
}
.btn-sm{min-height:44px;padding:10px 16px;font-size:.875rem}
/* Venom cut discret sur le CTA de navigation (desktop uniquement) */
@media(min-width:1380px){
  .primary-nav__actions .btn-primary{
    clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  }
}

/* ---------- 8. SECTIONS ---------- */
.section{
  position:relative;
  padding:clamp(72px,9vw,112px) 0;
  counter-increment:section;
}
/* Initialisation du compteur sur le premier container de la page */
main{counter-reset:section}
/* Folio technique sur les sections sombres uniquement */
.section:not(.section-alt):not(.confirm):before{
  content:counter(section,decimal-leading-zero);
  position:absolute;
  top:clamp(28px,4vw,48px);
  right:var(--gutter);
  font-family:var(--font-display);
  font-size:var(--fs-folio);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(125,227,63,.16);
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.section:not(.section-alt):after{
  content:"";
  position:absolute;
  top:clamp(28px,4vw,48px);
  left:var(--gutter);
  right:calc(var(--gutter) + clamp(90px,14vw,190px));
  height:1px;
  background:var(--line);
  pointer-events:none;
}
.section>.container,.section>.narrow{position:relative;z-index:1}

/* Sections claires : papier technique */
.section-alt{
  background:var(--paper);
  color:var(--ink-on-paper);
  border-block:var(--hairline) solid var(--line-on-paper);
}
.section-alt h1,.section-alt h2,.section-alt h3,.section-alt h4{color:var(--ink-on-paper)}
.section-alt .lead{color:var(--ink-on-paper)}
.section-alt p,.section-alt li{color:var(--muted-on-paper)}
.section-alt strong,.section-alt b{color:var(--ink-on-paper);font-weight:600}
.section-alt .eyebrow{color:var(--green-ink)}
.section-alt .eyebrow:before{background:var(--green-ink)}
.section-alt .micro{color:var(--muted-on-paper)}
.section-alt .list-check{color:var(--muted-on-paper)}
.section-alt .list-check li:before{color:var(--green-ink)}
.section-alt .card{background:#fff;border-color:var(--line-on-paper)}
.section-alt .card p{color:var(--muted-on-paper)}
.section-alt .card .btn-primary{box-shadow:4px 4px 0 0 rgba(47,107,20,.14)}
.section-alt .card .btn-primary:hover{box-shadow:6px 6px 0 0 rgba(47,107,20,.2)}
.section-alt .btn-secondary{border-color:#a3ada0;color:var(--ink-on-paper)}
.section-alt .btn-secondary:hover{border-color:var(--green-ink);color:var(--green-ink);background:rgba(47,107,20,.05)}
.section-alt a{text-decoration-color:rgba(47,107,20,.5)}
.section-alt a:hover{color:var(--green-ink)}
.section-alt .quote-box,.section-alt .honest{
  background:var(--paper-2);
  border-left-color:var(--green-ink);
  color:var(--ink-on-paper);
}
.section-alt .faq{border-top-color:var(--line-on-paper)}
.section-alt .faq details{border-bottom-color:var(--line-on-paper)}
.section-alt .faq summary{color:var(--ink-on-paper)}
.section-alt .faq details p{color:var(--muted-on-paper)}
.section-alt .result{background:#fff;border-color:var(--line-on-paper)}
.section-alt .result__label{color:var(--muted-on-paper)}
.section-alt .photo-caption{color:var(--muted-on-paper)}

/* ---------- 9. CARTES ---------- */
.card{
  position:relative;
  padding:clamp(26px,3.4vw,36px);
  background:var(--panel);
  border:var(--hairline) solid var(--line);
  border-radius:var(--r-none);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
/* Encoche venimeuse en haut à gauche */
.card:before{
  content:"";
  position:absolute;
  top:-1px;left:-1px;
  width:28px;height:4px;
  background:var(--green);
  opacity:.85;
}
.card:hover{
  border-color:var(--line-strong);
  transform:translate(-2px,-2px);
  box-shadow:var(--shadow-cut);
}
.card h3{margin-bottom:.75em}
.card p:last-of-type{margin-bottom:0}
.card .list-check{margin-bottom:0}
.card-number{
  display:block;
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--green);
}
.section-alt .card-number{color:var(--green-ink)}
.section-alt .card:before{background:var(--green-ink)}

/* ---------- 10. LISTES ---------- */
.list-check{
  list-style:none;
  padding:0;
  margin:24px 0;
  color:var(--muted);
}
.list-check li{
  position:relative;
  padding:8px 0 8px 26px;
  line-height:1.5;
}
.list-check li:before{
  content:"✓";
  position:absolute;
  left:0;top:8px;
  color:var(--green);
  font-weight:700;
  font-size:.9375rem;
  line-height:1.5;
}

/* ---------- 11. ENCADRÉS ---------- */
.quote-box,.honest{
  margin:28px 0;
  padding:20px 24px;
  background:rgba(125,227,63,.05);
  border-left:3px solid var(--green);
  color:var(--text);
  font-weight:500;
  max-width:72ch;
}
.quote-box p:last-child,.honest p:last-child{margin-bottom:0}

/* ---------- 12. PRIX ---------- */
.price{
  font-family:var(--font-display);
  font-size:var(--fs-price);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--green);
  margin:8px 0 20px;
}
.section-alt .price{color:var(--green-ink)}
.pricing-card--featured{
  border-color:var(--green-dim);
  box-shadow:var(--shadow-cut);
}

/* ---------- 13. ÉTAPES ---------- */
.steps{counter-reset:step;display:grid;gap:20px}
.step{
  counter-increment:step;
  position:relative;
  padding:24px 24px 24px 68px;
  background:var(--panel);
  border:var(--hairline) solid var(--line);
  border-left:3px solid var(--green);
  line-height:1.5;
}
.step:before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:20px;top:22px;
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:700;
  color:var(--green);
  letter-spacing:-.02em;
}
.section-alt .step{background:#fff;border-color:var(--line-on-paper);border-left-color:var(--green-ink)}
.section-alt .step:before{color:var(--green-ink)}

/* ---------- 14. FAQ ---------- */
.faq{border-top:var(--hairline) solid var(--line)}
.faq details{
  border-bottom:var(--hairline) solid var(--line);
  padding:22px 0;
}
.faq summary{
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.0625rem;
  line-height:1.4;
  list-style:none;
  position:relative;
  padding-right:32px;
  color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{
  content:"+";
  position:absolute;
  right:0;top:0;
  font-family:var(--font-mono);
  font-size:1.25rem;
  font-weight:400;
  color:var(--green);
  line-height:1.2;
  transition:transform var(--dur) var(--ease);
}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:14px 0 0;margin-bottom:0;max-width:64ch}

/* ---------- 15. FORMULAIRE & SIMULATEUR ---------- */
.split{display:grid;gap:clamp(40px,6vw,64px);align-items:start}
.sticky-copy{position:sticky;top:104px}
.simulator{
  padding:clamp(24px,4vw,36px);
  background:#fff;
  border:var(--hairline) solid var(--line-on-paper);
  border-radius:var(--r-none);
  color:var(--ink-on-paper);
  box-shadow:6px 6px 0 0 rgba(20,26,18,.06);
}
.simulator__inputs,.simulator__results{display:grid;gap:18px}
.simulator__results{margin-top:28px;padding-top:24px;border-top:var(--hairline) solid var(--line-on-paper)}
.field label{
  display:block;
  margin-bottom:8px;
  font-family:var(--font-mono);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-on-paper);
}
.field small{
  display:block;
  margin-top:6px;
  font-size:.8125rem;
  color:var(--muted-on-paper);
  line-height:1.4;
}
.input-wrap{
  display:flex;
  align-items:stretch;
  border:var(--hairline) solid #a3ada0;
  background:#fbfaf6;
  transition:border-color var(--dur) var(--ease);
}
.input-wrap:focus-within{border-color:var(--green-ink)}
.input-wrap input{
  width:100%;
  padding:13px 14px;
  border:0;
  background:transparent;
  color:var(--ink-on-paper);
}
.input-wrap input:focus{outline:none}
.input-wrap span{
  display:flex;
  align-items:center;
  padding:0 14px;
  font-family:var(--font-mono);
  font-size:.8125rem;
  color:var(--green-ink);
  border-left:var(--hairline) solid var(--line-on-paper);
  background:var(--paper-2);
  white-space:nowrap;
}
.result{
  padding:18px;
  background:var(--paper);
  border:var(--hairline) solid var(--line-on-paper);
}
.result--main{border-color:var(--green-ink);background:#fff}
.result__label{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-on-paper);
}
.result__value{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.375rem,3vw,2rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--green-ink);
  line-height:1.1;
}
.form-card{
  padding:clamp(26px,4vw,40px);
  background:#fff;
  color:var(--ink-on-paper);
  border:var(--hairline) solid var(--line-on-paper);
  box-shadow:8px 8px 0 0 rgba(20,26,18,.07);
}
.form-grid{display:grid;gap:20px}
.form-control{
  width:100%;
  padding:13px 14px;
  border:var(--hairline) solid #a3ada0;
  border-radius:var(--r-xs);
  background:#fbfaf6;
  color:var(--ink-on-paper);
  transition:border-color var(--dur) var(--ease);
}
.form-control:focus{border-color:var(--green-ink);outline:none}
textarea.form-control{min-height:150px;resize:vertical}
.error{color:#b03024;font-size:.8125rem;font-family:var(--font-mono);margin-top:6px;display:block}
.alert{padding:16px 18px;margin-bottom:22px;border-radius:var(--r-xs)}
.alert-error{background:#fdf0ee;border:var(--hairline) solid #d9a49e;color:#8c2b21}
.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* ---------- 16. IMAGES ---------- */
.photo-frame{
  position:relative;
  overflow:hidden;
  border:var(--hairline) solid var(--line);
  background:var(--panel);
  border-radius:var(--r-none);
}
.photo-frame img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .6s var(--ease),opacity .6s var(--ease);
}
.photo-frame:hover img{transform:scale(1.025)}
.photo-frame--hero{aspect-ratio:16/10;min-height:300px;border-color:var(--line-strong)}
.photo-frame--card{aspect-ratio:16/9;margin-bottom:20px}
.photo-frame--landscape{aspect-ratio:16/9;min-height:0}
.photo-frame--editorial{aspect-ratio:3/2;min-height:0}
.photo-frame--wide,.photo-frame--banner{aspect-ratio:2/1;min-height:0}
.photo-frame--portrait{
  width:min(100%,420px);
  aspect-ratio:4/5;
  min-height:0;
  justify-self:center;
}
.photo-frame--portrait img{object-position:center top}
.photo-frame--banner:hover img,.photo-frame--wide:hover img,.photo-frame--portrait:hover img{transform:none}
.page-electricien .electricien-working-portrait{
  width:min(100%,420px);
  aspect-ratio:auto;
  min-height:0;
  justify-self:center;
}
.page-electricien .electricien-working-portrait img{
  height:auto;
  object-fit:contain;
  object-position:center;
}
.page-electricien .electricien-working-portrait:hover img{transform:none}
.photo-frame--square{aspect-ratio:1/1}
.photo-caption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--muted);
  letter-spacing:.04em;
}
.media-pair{align-items:center;gap:clamp(32px,5vw,72px)}
.media-pair .photo-frame--card{margin-bottom:0}
.editorial-photo{margin:clamp(48px,6vw,72px) 0 0}
.editorial-photo--lead{margin:0 0 clamp(48px,6vw,72px)}
.editorial-photo--solo{margin:0}

/* Hero Paysagiste : composition centrée, sans impact sur les autres pages. */
.page-paysagiste .paysagiste-hero__grid{
  width:min(calc(100% - var(--gutter)*2),1120px);
  grid-template-columns:minmax(0,1fr);
  gap:clamp(36px,5vw,64px);
}
.page-paysagiste .paysagiste-hero__intro{text-align:center}
.page-paysagiste .paysagiste-hero__intro h1{
  max-width:20ch;
  margin-inline:auto;
}
.page-paysagiste .paysagiste-hero__intro>p{
  max-width:760px;
  margin-inline:auto;
}
.page-paysagiste .paysagiste-hero__intro .hero__actions{justify-content:center}
.page-paysagiste .paysagiste-hero__visual{
  width:100%;
  margin-inline:auto;
}
.page-paysagiste .paysagiste-hero__media{aspect-ratio:1672/941}
.page-paysagiste .paysagiste-hero__media img{
  height:auto;
  object-fit:contain;
  transform:none;
}
.page-paysagiste .paysagiste-hero__media:hover img{transform:none}
.page-paysagiste .paysagiste-hero__visual .photo-caption{text-align:center}
.page-paysagiste .paysagiste-hero__portfolio{
  width:min(100%,880px);
  margin-inline:auto;
}

/* Visuels Menuisier : dimensions natives, sans recadrage ni déformation. */
.page-menuisier .menuisier-native-frame{
  aspect-ratio:auto;
  min-height:0;
}
.page-menuisier .menuisier-native-frame img{
  height:auto;
  object-fit:contain;
  transform:none;
}
.page-menuisier .menuisier-native-frame:hover img{transform:none}
.page-menuisier .menuisier-hero__visual{
  grid-column:1/-1;
  width:min(100%,1080px);
  margin:0 auto;
  justify-self:center;
}
.page-menuisier .menuisier-bottom__visual{
  width:min(100%,1080px);
  margin-inline:auto;
}

/* Page Peintre en bâtiment : hero centré et ratios natifs strictement conservés. */
.page-peintre-batiment .peintre-hero__grid{
  width:min(calc(100% - var(--gutter)*2),1120px);
  grid-template-columns:minmax(0,1fr);
  gap:clamp(36px,5vw,64px);
}
.page-peintre-batiment .peintre-hero__intro{text-align:center}
.page-peintre-batiment .peintre-hero__intro h1{
  max-width:22ch;
  margin-inline:auto;
}
.page-peintre-batiment .peintre-hero__intro>p{
  max-width:780px;
  margin-inline:auto;
}
.page-peintre-batiment .peintre-hero__intro .hero__actions{justify-content:center}
.page-peintre-batiment .peintre-native-frame{
  aspect-ratio:auto;
  min-height:0;
}
.page-peintre-batiment .peintre-native-frame img{
  height:auto;
  object-fit:contain;
  transform:none;
}
.page-peintre-batiment .peintre-native-frame:hover img{transform:none}
.page-peintre-batiment .peintre-hero__visual{
  width:100%;
  margin-inline:auto;
}
.page-peintre-batiment .peintre-hero__visual .photo-caption{text-align:center}
.page-peintre-batiment .peintre-hero__sequence{
  width:min(100%,920px);
  margin-inline:auto;
}
.peintre-journey{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:0;
  margin:24px 0 0;
  padding:0;
  list-style:none;
  counter-reset:peintre-step;
}
.peintre-journey li{
  counter-increment:peintre-step;
  position:relative;
  padding:12px 8px;
  border-block:var(--hairline) solid var(--line-on-paper);
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:700;
  line-height:1.35;
  text-align:center;
  text-transform:uppercase;
  color:var(--green-ink);
}
.peintre-journey li:not(:last-child):after{
  content:"→";
  position:absolute;
  right:-5px;
  color:var(--green-ink);
}
.page-peintre-batiment .peintre-middle{margin-top:clamp(48px,6vw,72px)}
.page-peintre-batiment .peintre-middle__visual{
  width:min(100%,440px);
  margin-inline:auto;
}

@media(max-width:699px){
  .peintre-journey{grid-template-columns:minmax(0,1fr)}
  .peintre-journey li{padding:10px 30px 10px 12px;text-align:left}
  .peintre-journey li:not(:last-child):after{content:"↓";right:12px}
  .page-peintre-batiment .peintre-hero__visual{width:calc(100% + 16px);margin-inline:-8px}
}

/* ---------- 17. PANNEAU CTA ---------- */
.cta-panel{
  position:relative;
  padding:clamp(44px,7vw,96px) clamp(26px,5vw,72px);
  background:
    linear-gradient(135deg,rgba(125,227,63,.04) 0 50%,transparent 50%) top left/100% 100% no-repeat,
    var(--panel);
  border:var(--hairline) solid var(--line-strong);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-lg)),calc(100% - var(--cut-lg)) 100%,0 100%);
  box-shadow:var(--shadow-venom);
  overflow:hidden;
}
.cta-panel:before{
  content:"";
  position:absolute;
  top:0;right:-1px;
  width:clamp(96px,18vw,280px);height:clamp(96px,18vw,280px);
  border-top:1px solid rgba(125,227,63,.4);
  border-right:1px solid rgba(125,227,63,.4);
  pointer-events:none;
}
.cta-panel:after{
  content:"";
  position:absolute;
  bottom:0;right:0;
  width:var(--cut-lg);height:var(--cut-lg);
  background:linear-gradient(135deg,transparent 50%,rgba(125,227,63,.3) 50%,rgba(125,227,63,.3) calc(50% + 1px),transparent calc(50% + 1px));
  pointer-events:none;
}
.cta-panel .lead{color:var(--text);font-size:clamp(1.125rem,1.6vw,1.375rem)}
.cta-panel .micro{color:var(--muted)}
.cta-panel h2{font-size:clamp(2rem,4.5vw,3.5rem);max-width:20ch}
.cta-panel .btn-primary{margin-top:14px}

/* ---------- 18. FOOTER ---------- */
.site-footer{
  padding:64px 0 112px;
  background:var(--ink);
  border-top:var(--hairline) solid var(--line);
}
.site-footer__grid{display:grid;gap:40px}
.site-footer__logo{display:block;width:auto;height:auto;max-width:150px;max-height:56px;margin-bottom:16px;object-fit:contain}
.site-footer__name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.125rem;
  letter-spacing:-.02em;
  color:var(--text);
}
.site-footer__tagline{color:var(--muted);max-width:36ch}
.site-footer__contacts{display:grid;gap:8px;margin-top:24px}
.site-footer__contact{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  font-family:var(--font-mono);
  color:var(--text);
  text-decoration:none;
}
.site-footer__contact .contact-icon{width:30px;height:30px;flex:0 0 30px}
.site-footer__contact>span:last-child{display:flex;flex-direction:column;line-height:1.3}
.site-footer__contact strong{font-size:.875rem;color:var(--text)}
.site-footer__contact small{font-size:.6875rem;color:var(--muted)}
.site-footer__title{
  margin:0 0 16px;
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--green);
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:10px 0}
.site-footer p,.site-footer a{color:var(--muted);font-size:.9375rem}
.site-footer a:hover{color:var(--green-bright)}
.site-footer__copy{font-family:var(--font-mono);font-size:.8125rem}
.site-footer__cookie-button{
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:.9375rem;
  text-decoration:underline;
  text-decoration-color:var(--green-dim);
  text-underline-offset:4px;
  cursor:pointer;
}
.site-footer__cookie-button:hover{color:var(--green-bright)}

/* Consentement Analytics */
.cookie-consent[hidden]{display:none}
.cookie-consent{
  position:fixed;
  z-index:60;
  left:50%;
  bottom:88px;
  display:grid;
  gap:20px;
  width:min(calc(100% - 40px),880px);
  padding:22px;
  transform:translateX(-50%);
  background:var(--panel);
  border:var(--hairline) solid var(--green-dim);
  box-shadow:var(--shadow-cut-strong);
}
.cookie-consent:before{
  content:"";
  position:absolute;
  top:-1px;left:-1px;
  width:48px;height:4px;
  background:var(--green);
}
.cookie-consent h2{
  margin:0 0 8px;
  max-width:none;
  font-size:1.125rem;
  line-height:1.25;
}
.cookie-consent p{margin:0;color:var(--muted);font-size:.9375rem}
.cookie-consent__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cookie-consent__button{
  min-height:46px;
  padding:10px 18px;
  border:var(--hairline) solid var(--green-dim);
  background:var(--panel-2);
  color:var(--text);
  font-weight:600;
  cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.cookie-consent__button:hover{
  background:rgba(125,227,63,.08);
  border-color:var(--green);
  color:var(--green-bright);
}

/* ---------- 19. BARRE STICKY MOBILE ---------- */
/* Papier clair + filet venimeux : la barre ne rivalise plus avec le CTA principal du hero,
   et la masse verte reste limitée à de petites surfaces. */
.sticky-bar{
  position:fixed;
  z-index:45;
  bottom:0;left:0;right:0;
  padding:12px 14px;
  background:var(--paper);
  border-top:2px solid var(--green);
  box-shadow:0 -6px 24px rgba(0,0,0,.28);
}
.sticky-bar__text{
  display:none;
  font-family:var(--font-mono);
  font-size:.8125rem;
  color:var(--muted-on-paper);
}
.sticky-bar__actions{display:flex;gap:10px;justify-content:space-between;align-items:center}
.sticky-bar__contact{
  display:flex;
  align-items:stretch;
  flex:0 0 auto;
  min-height:48px;
  border:var(--hairline) solid var(--line-on-paper);
  background:#fff;
}
.sticky-bar__phone{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 6px;
  font-family:var(--font-mono);
  font-weight:700;
  text-decoration:none;
  color:var(--ink-on-paper);
  font-size:.8125rem;
  line-height:1.2;
  white-space:nowrap;
}
.sticky-bar__phone-icon{display:grid;place-items:center;color:var(--green-ink)}
.sticky-bar__phone-icon svg{
  width:18px;height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sticky-bar__whatsapp img{display:block;width:18px;height:18px}
.sticky-bar__whatsapp{
  display:grid;
  place-items:center;
  flex:0 0 44px;
  border-left:var(--hairline) solid var(--line-on-paper);
  background:rgba(47,107,20,.08);
  color:var(--green-ink);
  text-decoration:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.sticky-bar__whatsapp:hover{background:rgba(47,107,20,.15);color:var(--ink-on-paper)}
.sticky-bar .btn-primary{
  background:var(--ink);
  color:var(--green-bright);
  box-shadow:none;
  border-color:var(--ink);
}
.sticky-bar .btn-primary:hover{background:#1a2417;color:var(--green-bright);transform:none;box-shadow:none}

/* ---------- 20. NUDGE AUDIT ---------- */
.audit-nudge{
  display:none;
  position:fixed;
  right:24px;bottom:24px;
  z-index:44;
  width:min(360px,calc(100vw - 48px));
  padding:26px;
  background:var(--panel);
  border:var(--hairline) solid var(--green-dim);
  box-shadow:var(--shadow-cut-strong);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.audit-nudge:before{
  content:"";
  position:absolute;
  top:-1px;left:-1px;
  width:32px;height:4px;
  background:var(--green);
}
.audit-nudge h2{
  margin:0 30px 12px 0;
  font-size:1.3125rem;
  line-height:1.15;
  max-width:100%;
}
.audit-nudge p{margin-bottom:18px;color:var(--muted)}
.audit-nudge .btn{width:100%;margin-bottom:14px}
.audit-nudge .micro{margin-bottom:10px}
.audit-nudge__close{
  position:absolute;
  top:10px;right:10px;
  width:36px;height:36px;
  border:var(--hairline) solid transparent;
  background:transparent;
  color:var(--muted);
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.audit-nudge__close:hover{color:var(--text);border-color:var(--line-strong)}
.audit-nudge__continue{
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:.8125rem;
  text-decoration:underline;
  text-decoration-color:var(--green-dim);
  text-underline-offset:4px;
  cursor:pointer;
}
@media(min-width:980px){
  .audit-nudge:not([hidden]){display:block}
  .audit-nudge.is-visible{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.audit-nudge{transition:none}}

/* ---------- 21. PAGE GEO ---------- */
.page-geo h1{font-size:clamp(2.25rem,5vw,4.25rem);max-width:20ch}
.geo-visual{
  display:block;
  overflow:hidden;
  border:var(--hairline) solid var(--green-dim);
  background:#010402;
  position:relative;
}
.geo-visual:before{
  content:"";
  position:absolute;
  top:0;right:0;
  width:48px;height:48px;
  border-top:var(--hairline) solid var(--green);
  border-right:var(--hairline) solid var(--green);
  z-index:2;
  pointer-events:none;
}
.geo-visual img{width:100%;height:auto;object-fit:contain}
.geo-visual--hero{width:100%;align-self:center}
.geo-visual--protocol{width:min(100%,1040px);margin:clamp(44px,6vw,72px) auto 0}
.geo-visual--local{width:min(100%,1080px);margin:0 auto clamp(36px,5vw,56px)}
.comparison-table-wrap{
  overflow-x:auto;
  margin-bottom:28px;
  border:var(--hairline) solid var(--line-on-paper);
  background:#fff;
}
.comparison-table{width:100%;min-width:640px;border-collapse:collapse;color:var(--ink-on-paper)}
.comparison-table caption{
  padding:18px 22px;
  text-align:left;
  font-family:var(--font-display);
  font-weight:700;
  background:var(--paper-2);
  letter-spacing:-.01em;
}
.comparison-table th,.comparison-table td{
  width:50%;
  padding:16px 22px;
  text-align:left;
  border-top:var(--hairline) solid var(--line-on-paper);
  vertical-align:top;
}
.comparison-table th{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--green-ink);
}
.comparison-table tbody tr:nth-child(even){background:var(--paper)}
.geo-journey{
  list-style:none;
  padding:0;
  margin:0 0 36px;
  display:grid;
  gap:12px;
  counter-reset:journey;
}
.geo-journey li{
  counter-increment:journey;
  position:relative;
  padding:16px 40px 16px 18px;
  border:var(--hairline) solid var(--line);
  background:var(--panel);
  font-weight:600;
  font-size:.9375rem;
  line-height:1.4;
}
.geo-journey li:before{
  content:counter(journey,decimal-leading-zero);
  margin-right:10px;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--green);
}
.geo-journey li:not(:last-child):after{
  content:"→";
  position:absolute;
  right:14px;top:50%;
  transform:translateY(-50%);
  color:var(--green);
  font-family:var(--font-mono);
}
.geo-examples{margin-bottom:20px}
.geo-examples .card p{margin:14px 0 0;color:var(--muted)}
@media(min-width:700px){
  .geo-journey{grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch}
  .geo-journey li{display:flex;align-items:center}
}
@media(min-width:980px){
  .page-geo .geo-hero__grid{grid-template-columns:minmax(0,1fr) minmax(480px,1fr);gap:clamp(44px,5vw,72px)}
}
@media(max-width:699px){
  .page-geo h1{font-size:clamp(2.2rem,10.5vw,3.25rem);max-width:100%}
  .geo-visual:before{width:32px;height:32px}
  .geo-visual--hero{width:calc(100% + 16px);margin-inline:-8px}
  .comparison-table-wrap{margin-inline:-8px}
  .geo-journey li:not(:last-child):after{content:"↓";right:16px}
}

/* ---------- 22. CONFIRMATION ---------- */
.confirm{min-height:65vh;display:grid;place-items:center;text-align:center;padding:clamp(48px,8vw,80px) 0}
.confirm__icon{
  width:64px;height:64px;
  margin:0 auto 28px;
  display:grid;
  place-items:center;
  background:var(--green);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:700;
}

/* --- Section respirante : statement éditorial monumental --- */
.section--statement .narrow h2{
  font-size:clamp(1.55rem,2.9vw,2.5rem);
  max-width:30ch;
}
.section--statement .honest{
  border-left-width:2px;
  font-size:1.0625rem;
}

/* ---------- 22bis. VENOM SYSTEM — Trouvé → Compris → Contacté ---------- */
.venom-system{
  display:grid;
  gap:0;
  position:relative;
  background:var(--panel);
  border-block:var(--hairline) solid var(--line);
}
.venom-cell{
  position:relative;
  padding:clamp(26px,3.5vw,40px);
  background:transparent;
  border:0;
  overflow:visible;
}
.venom-cell__head{display:flex;align-items:baseline;gap:16px;margin-bottom:10px}
.venom-cell__index{
  font-family:var(--font-display);
  font-size:clamp(3rem,6vw,4.6rem);
  font-weight:700;
  line-height:.82;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(125,227,63,.45);
  flex-shrink:0;
}
.section-alt .venom-cell__index{-webkit-text-stroke-color:rgba(47,107,20,.4)}
.venom-cell__label{
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--green);
}
.section-alt .venom-cell__label{color:var(--green-ink)}
.venom-cell h3{
  font-size:clamp(1.45rem,2.6vw,2.05rem);
  letter-spacing:-.02em;
  margin-bottom:.65em;
}
.venom-cell p{color:var(--muted);max-width:56ch}
.section-alt .venom-cell p{color:var(--muted-on-paper)}
.venom-cell__tags{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:18px 0 0;
  padding:0;list-style:none;
}
.venom-cell__tags li{
  display:inline-flex;align-items:center;
  padding:5px 12px;
  border:var(--hairline) solid var(--line-strong);
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text);
  background:rgba(125,227,63,.04);
}
.section-alt .venom-cell__tags li{border-color:var(--line-on-paper);color:var(--ink-on-paper);background:rgba(47,107,20,.04)}
/* Venom Line reliant les cellules */
.venom-link{
  width:1px;height:44px;
  margin:0 0 0 clamp(38px,7vw,54px);
  background:var(--green);
  position:relative;
  z-index:2;
}
.venom-link:after{
  content:"";
  position:absolute;
  left:-3.5px;bottom:0;
  width:8px;height:8px;
  background:var(--green);
  transform:rotate(45deg);
}
/* Une cellule "crochue" : fang venimeux bas-droite */
.venom-cell:after{
  content:"";
  position:absolute;
  right:0;bottom:0;
  width:var(--cut);height:var(--cut);
  background:linear-gradient(135deg,transparent 50%,rgba(125,227,63,.35) 50%,rgba(125,227,63,.35) calc(50% + 1px),transparent calc(50% + 1px));
  pointer-events:none;
}
.section-alt .venom-system{background:#fff;border-color:var(--line-on-paper)}
.section-alt .venom-cell{background:transparent;border-color:var(--line-on-paper)}
.section-alt .venom-cell:after{background:linear-gradient(135deg,transparent 50%,rgba(47,107,20,.3) 50%,rgba(47,107,20,.3) calc(50% + 1px),transparent calc(50% + 1px))}
.section-alt .venom-link{background:var(--green-ink)}
.section-alt .venom-link:after{background:var(--green-ink)}

/* ---------- 23. RÉVÉLATION AU SCROLL ---------- */
.reveal-on-scroll{opacity:1;transform:none}
.js-enabled .reveal-on-scroll.is-animatable{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.js-enabled .reveal-on-scroll.is-animatable.revealed{opacity:1;transform:none}

/* ---------- 24. UTILITAIRES ---------- */
.confirm h1{max-width:100%}
.section-alt>.cta-panel{background:var(--ink);border-color:var(--green-dim)}
.section-alt>.cta-panel h2,.section-alt>.cta-panel .lead{color:var(--text)}
.section-alt>.cta-panel .micro{color:var(--muted)}
.section-alt>.cta-panel .btn-secondary{border-color:var(--line-strong);color:var(--text)}
.section-alt>.cta-panel .btn-secondary:hover{border-color:var(--green-dim);color:var(--green-bright);background:rgba(125,227,63,.06)}

/* ---------- 25. RESPONSIVE ---------- */
@media(max-width:699px){
  h1{font-size:clamp(2.2rem,11vw,3.25rem);max-width:100%}
  h2{font-size:clamp(1.75rem,8.5vw,2.5rem);max-width:100%}
  .hero{padding-top:56px}
  .hero:before{background:linear-gradient(90deg,var(--green) 0,var(--green) 48px,transparent 48px)}
  .hero .photo-frame--hero:before,.hero .photo-frame--hero:after{width:36px;height:36px}
  .hero .photo-frame--hero:before{top:-10px;right:-10px}
  .hero .photo-frame--hero:after{bottom:-10px;left:-10px}
  .section:not(.section-alt):not(.confirm):before{
    font-size:clamp(3.25rem,14vw,5rem);
    right:16px;top:20px;
    -webkit-text-stroke-width:1px;
  }
  .section:not(.section-alt):after{left:16px;right:calc(16px + clamp(70px,20vw,110px));top:20px}
  .primary-nav__actions .btn{width:100%}
  /* Les CTA primaires conservent leur largeur pleine mais la surface venimeuse
     reste cadrée par l'ombre ; on évite la dalle mur-à-mur. */
  .hero__actions .btn,.cta-actions .btn{width:100%;min-height:52px}
  .hero__actions .btn-primary,.cta-actions .btn-primary{width:88%;margin-inline:auto}
  .btn,.hero__actions .btn,.cta-actions .btn{padding-left:18px;padding-right:18px}
  .sticky-bar__actions .btn{width:auto;flex:1;min-height:48px;padding-inline:10px;font-size:.8125rem;white-space:nowrap}
  .pricing-card--featured{transform:none}
  .hero__grid--local .photo-frame--banner{width:calc(100% + 16px);margin-inline:-8px}
  .media-pair{gap:32px}

  /* --- VENOM PRECISION — mobile 390px : recomposer, ne pas compresser --- */
  .site-header__inner{min-height:72px}
  .site-header.is-scrolled .site-header__inner{min-height:64px}
  .brand{padding-left:14px}
  .brand:before{height:22px}
  .brand__logo{max-width:174px;max-height:54px}
  .page-home .hero{padding-top:48px}
  .page-home .hero h1{font-size:clamp(2.15rem,10.6vw,3rem);line-height:1;letter-spacing:-.035em;max-width:12ch}
  .page-home .hero .lead{font-size:1.0625rem}
  .page-home .hero__grid--showcase .venom-frame{
    margin-inline:calc(var(--gutter)*-1);
    width:calc(100% + var(--gutter)*2);
  }
  .page-home .hero:after{
    right:-14vw;
    bottom:-8vw;
    font-size:15rem;
    -webkit-text-stroke-width:1px;
    opacity:.7;
  }
  .hero:before{top:34px}
  .venom-cell__index{font-size:clamp(2.8rem,13vw,3.6rem)}
  .venom-cell h3{font-size:1.4rem}
  .venom-link{height:38px}
  .cta-panel{clip-path:polygon(0 0,100% 0,100% calc(100% - 44px),calc(100% - 44px) 100%,0 100%)}
  .cta-panel:before{width:72px;height:72px}
  .cta-panel .btn{width:100%}
}
@media(min-width:700px){
  .grid-2,.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3,.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .simulator__inputs,.simulator__results{grid-template-columns:repeat(2,minmax(0,1fr))}
  .simulator .result--main{grid-column:1/-1}
  .field--wide{grid-column:1/-1}
  .site-footer__grid{grid-template-columns:1.3fr 1fr 1fr}
  .sticky-bar__text{display:block}
  .sticky-bar{display:flex;justify-content:space-between;align-items:center;gap:16px}
  .sticky-bar__actions{justify-content:flex-end}
  .media-pair--visual-first{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .media-pair--audit{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
}
@media(min-width:980px){
  .page-plombier .hero h1{font-size:clamp(2.8rem,4.4vw,4rem);max-width:20ch}
  .hero__grid{grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr)}
  .hero__grid--showcase{grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:clamp(48px,6vw,84px);align-items:center}
  .hero__grid--portrait{grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:clamp(48px,6vw,84px);align-items:center}
  .hero__grid--local{grid-template-columns:minmax(0,.95fr) minmax(480px,1.05fr);gap:clamp(48px,6vw,80px);align-items:center}
  .split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sticky-bar{display:none}
  .site-footer{padding-bottom:64px}
  .cookie-consent{bottom:24px;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .cookie-consent__actions{grid-template-columns:repeat(2,124px)}
  .form-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,80px)}

  /* --- VENOM PRECISION — composition desktop du hero home --- */
  .page-home .hero{padding:clamp(96px,12vw,168px) 0 clamp(88px,10vw,140px)}
  .page-home .hero h1{
    font-size:clamp(2.8rem,5.6vw,4.9rem);
    max-width:15ch;
  }
  .page-home .hero__grid--showcase{
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    gap:clamp(44px,4.5vw,64px);
    align-items:center;
  }
  .page-home .hero__grid--showcase .venom-frame{
    width:calc(100% + clamp(112px,9.8vw,140px));
    margin-left:clamp(-40px,-2.8vw,-24px);
    margin-right:clamp(-100px,-7vw,-72px);
    align-self:center;
  }
  .page-about .hero__grid .venom-frame{margin-right:0}

  /* --- Venom system horizontal --- */
  .venom-system{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  .venom-link{
    position:absolute;
    top:62px;
    width:72px;height:1px;
    margin:0;
    transform:none;
  }
  .venom-link:nth-of-type(1){left:calc(33.333% - 36px)}
  .venom-link:nth-of-type(2){left:calc(66.666% - 36px)}
  .venom-link:after{
    left:auto;right:0;top:-3.5px;bottom:auto;
    transform:rotate(45deg);
  }
  .venom-cell:not(:first-child){border-left:var(--hairline) solid var(--line)}
  .section-alt .venom-cell:not(:first-child){border-left-color:var(--line-on-paper)}
  .venom-cell__index{font-size:clamp(4.4rem,6vw,5.8rem)}

}
@media(min-width:1380px){
  .site-header__inner{
    min-height:108px;
    gap:32px;
  }
  .site-header.is-scrolled .site-header__inner{min-height:92px}
  .nav-toggle{display:none}
  .primary-nav{
    position:static;
    display:flex!important;
    flex:1;
    align-items:center;
    justify-content:space-between;
    gap:clamp(22px,2vw,32px);
    background:none;
    padding:0;
    border:0;
    overflow:visible;
    max-height:none;
  }
  .primary-nav__list{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
  }
  .primary-nav__list>li{display:flex;align-items:center}
  .primary-nav__list>li>.primary-nav__link,.nav-group__toggle{
    min-height:52px;
    padding:12px 13px;
    border:var(--hairline) solid transparent;
    background:transparent;
    color:#bcc5b8;
    font-family:var(--font-body);
    font-size:.9375rem;
    font-weight:600;
    line-height:1.2;
    letter-spacing:-.005em;
    white-space:nowrap;
    transition:color .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease);
  }
  .primary-nav__list>li>.primary-nav__link:hover,.nav-group__toggle:hover{
    padding-left:13px;
    color:var(--text);
    background:rgba(125,227,63,.055);
    border-color:var(--line-strong);
  }
  .primary-nav__list>li>.primary-nav__link[aria-current=page],
  .nav-group.has-current>.nav-group__toggle{
    color:var(--green-bright);
    background:rgba(125,227,63,.045);
    border-color:rgba(125,227,63,.22);
  }
  .primary-nav__list>li>.primary-nav__link[aria-current=page]:before{
    content:"";
    display:inline-block;
    width:5px;height:5px;
    margin-right:8px;
    background:var(--green);
    transform:rotate(45deg) translateY(-1px);
  }
  .nav-group__toggle{justify-content:center;gap:9px}
  .nav-group__caret{
    font-size:.9375rem;
    line-height:1;
  }
  .nav-group{isolation:isolate}
  .nav-group:after{
    content:"";
    position:absolute;
    top:100%;left:-10px;right:-10px;
    height:12px;
  }
  .primary-nav .nav-submenu{
    display:block!important;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    z-index:70;
    min-width:260px;
    padding:10px;
    border:var(--hairline) solid var(--line-strong);
    background:rgba(6,9,6,.985);
    box-shadow:0 22px 42px -20px rgba(0,0,0,.92),inset 2px 0 0 rgba(125,227,63,.25);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-6px);
    transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s linear .16s;
  }
  .nav-group.is-open>.nav-submenu,
  html:not(.js-enabled) .nav-group:hover>.nav-submenu,
  html:not(.js-enabled) .nav-group:focus-within>.nav-submenu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition-delay:0s;
  }
  .primary-nav__list .nav-submenu li{display:block}
  .primary-nav__list .nav-submenu a{
    display:block;
    min-height:46px;
    padding:12px 14px;
    border:0;
    border-bottom:var(--hairline) solid var(--line);
    color:#b4beb0;
    font-family:var(--font-body);
    font-size:.875rem;
    font-weight:500;
    line-height:1.5;
    letter-spacing:0;
    white-space:normal;
    transition:color .16s var(--ease),background .16s var(--ease),padding-left .16s var(--ease);
  }
  .primary-nav__list .nav-submenu li:last-child a{border-bottom:0}
  .primary-nav__list .nav-submenu a:hover{
    padding-left:18px;
    color:var(--text);
    background:rgba(125,227,63,.055);
  }
  .primary-nav__actions{
    flex-direction:row;
    align-items:center;
    flex-shrink:0;
    margin:0;
    gap:14px;
  }
  .primary-nav__actions .btn{
    min-height:52px;
    padding-inline:22px;
    font-size:.8125rem;
  }
  .header-contact{
    grid-template-columns:1fr;
    gap:6px;
    min-width:174px;
    flex-shrink:0;
  }
  .header-contact__action{
    grid-template-columns:30px auto;
    gap:9px;
    min-height:44px;
    padding:5px 9px;
  }
  .header-contact__action .contact-icon{width:30px;height:30px}
  .header-contact__action .contact-icon svg,.header-contact__action .contact-icon img{width:17px;height:17px}
  .header-contact__copy small{font-size:.6875rem}
  .header-contact__copy strong{font-size:.8125rem}
  .brand__logo{max-width:216px;max-height:72px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .js-enabled .reveal-on-scroll.is-animatable{opacity:1;transform:none}
}

/* ---------- 25. BLOG V1 ---------- */
.blog-index-hero,.blog-article-header{
  position:relative;
  overflow:hidden;
  padding:clamp(72px,9vw,126px) 0 clamp(64px,8vw,104px);
  border-bottom:var(--hairline) solid var(--line);
}
.blog-index-hero:after,.blog-article-header:after{
  content:"";
  position:absolute;
  right:clamp(-90px,-5vw,-36px);bottom:clamp(-100px,-7vw,-48px);
  width:clamp(190px,24vw,350px);aspect-ratio:1;
  border:1px solid rgba(125,227,63,.18);
  transform:rotate(45deg);
  pointer-events:none;
}
.page-blog .blog-index-hero h1,.page-blog-article .blog-article-header h1{
  max-width:18ch;
  margin-bottom:.42em;
}
.blog-index-hero .lead{max-width:64ch;color:#b5beb2}
.blog-index-listing{min-height:50vh}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap:clamp(22px,3vw,34px);
}
.blog-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:clamp(26px,3vw,38px);
  border:var(--hairline) solid var(--line-on-paper);
  background:#fff;
  box-shadow:8px 8px 0 rgba(47,107,20,.08);
}
.blog-card:before{
  content:"";
  position:absolute;
  top:-1px;left:-1px;
  width:72px;height:3px;
  background:var(--green-ink);
}
.blog-card__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 18px;
  margin-bottom:24px;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted-on-paper);
}
.blog-card__meta span{font-weight:700;color:var(--green-ink)}
.blog-card h2{max-width:24ch;margin-bottom:.7em;font-size:clamp(1.55rem,2.6vw,2.25rem)}
.blog-card h2 a{color:var(--ink-on-paper);text-decoration:none}
.blog-card h2 a:hover{color:var(--green-ink)}
.blog-card p{margin:0 0 28px;color:var(--muted-on-paper)}
.blog-card__link{
  width:max-content;
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:.8125rem;
  font-weight:700;
  color:var(--green-ink);
  text-transform:uppercase;
  letter-spacing:.07em;
}
.blog-empty{padding:32px;border:var(--hairline) solid var(--line-on-paper);background:#fff}
.blog-empty p{margin:0;color:var(--muted-on-paper)}

.blog-article-header__excerpt{max-width:62ch;font-size:var(--fs-lead);color:#b5beb2}
.blog-article-header__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin-top:30px;
  font-family:var(--font-mono);
  font-size:.775rem;
  color:var(--muted);
}
.blog-reading-column{width:min(calc(100% - var(--gutter)*2),820px);margin-inline:auto}
.blog-prose{font-size:clamp(1rem,1.2vw,1.0875rem);line-height:1.78;color:var(--muted-on-paper)}
.blog-prose h2,.blog-prose h3{color:var(--ink-on-paper);scroll-margin-top:110px}
.blog-prose h2{max-width:25ch;margin:2.2em 0 .8em;font-size:clamp(1.75rem,3.5vw,2.65rem)}
.blog-prose h3{margin:1.9em 0 .65em;font-size:clamp(1.25rem,2.2vw,1.6rem)}
.blog-prose p{margin:0 0 1.35em;color:var(--muted-on-paper)}
.blog-prose strong{color:var(--ink-on-paper)}
.blog-prose a{font-weight:600;color:var(--green-ink);overflow-wrap:anywhere}
.blog-prose ul,.blog-prose ol{margin:0 0 1.7em;padding-left:1.4em}
.blog-prose li{margin:.5em 0;padding-left:.2em}
.blog-prose li::marker{color:var(--green-ink);font-weight:700}
.blog-prose blockquote{
  margin:clamp(28px,4vw,44px) 0;
  padding:22px clamp(20px,4vw,34px);
  border-left:4px solid var(--green-ink);
  background:rgba(47,107,20,.065);
}
.blog-prose blockquote p{margin:0;font-size:1.1em;font-weight:600;color:var(--ink-on-paper)}
.blog-prose__figure{margin:clamp(34px,5vw,58px) 0}
.blog-prose__figure img{
  width:100%;
  height:auto;
  object-fit:contain;
  border:var(--hairline) solid var(--line-on-paper);
  background:var(--ink);
  box-shadow:10px 10px 0 rgba(47,107,20,.12);
}
.blog-prose pre{
  max-width:100%;
  overflow:auto;
  margin:1.8em 0;
  padding:20px;
  background:var(--ink);
  color:var(--text);
  border-left:3px solid var(--green);
}
.blog-prose code{font-family:var(--font-mono);font-size:.88em}
.blog-prose hr{margin:3em 0;border:0;border-top:var(--hairline) solid var(--line-on-paper)}
.blog-related{
  margin-top:clamp(56px,8vw,88px);
  padding-top:32px;
  border-top:2px solid var(--green-ink);
}
.blog-related h2{margin-bottom:20px;font-size:clamp(1.45rem,2.5vw,2rem);color:var(--ink-on-paper)}
.blog-related ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.blog-related a{display:block;padding:14px 16px;border:var(--hairline) solid var(--line-on-paper);background:#fff;color:var(--ink-on-paper);font-weight:600;text-decoration:none}
.blog-related a:hover{border-color:var(--green-ink);color:var(--green-ink)}
.blog-article-cta-section{padding-top:clamp(58px,8vw,104px)}
.blog-not-found{padding-block:clamp(32px,5vw,60px)}
.blog-not-found h1{max-width:16ch}

@media(max-width:699px){
  .blog-index-hero,.blog-article-header{padding:54px 0 62px}
  .page-blog .blog-index-hero h1,.page-blog-article .blog-article-header h1{font-size:clamp(2.15rem,10vw,3rem)}
  .blog-card{padding:24px 20px}
  .blog-card__meta{display:grid;justify-content:start}
  .blog-reading-column{width:min(calc(100% - 40px),820px)}
  .blog-prose{font-size:1rem;line-height:1.72}
  .blog-prose h2{font-size:clamp(1.65rem,8vw,2.1rem)}
  .blog-prose__figure{width:calc(100% + 16px);margin-left:-8px}
}