/* ============================================================
   HENUSSE — couche "Éditorial élevé" (revamp home + piliers)
   Chargée APRÈS henusse.css. Fonts: Fraunces (display+serif) + Hanken Grotesk (UI).
   ============================================================ */

:root {
  /* largeur de contenu élargie (marketing) ; la prose garde une mesure de lecture */
  --shell-wide: min(92vw, 1300px);
  --display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --serif: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --shadow-card: 0 1px 2px rgba(29,26,22,.05), 0 12px 34px -14px rgba(29,26,22,.22);
  --shadow-soft: 0 1px 2px rgba(29,26,22,.04), 0 20px 60px -30px rgba(29,26,22,.30);
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --paper-2: #f4efe6;
  --gold: #b98a2e;
}

/* ---- réglages typographiques globaux ---- */
body {
  font-family: var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .wordmark, .hero h1 {
  font-family: var(--display);
  font-optical-sizing: auto;
}
h1, h2 { letter-spacing: -.012em; }

/* ---- largeur de contenu élargie ---- */
.shell { max-width: var(--shell-wide); }
.shell.article-body { max-width: 68ch; }          /* préserver la mesure de lecture */
.shell.article-head { max-width: 68ch; }          /* titre + plaque sur le meme axe que le corps */
.crumbs.shell { max-width: var(--shell-wide); }
.pillars__head { max-width: 60ch; }

/* chrome / UI en grotesque */
.eyebrow, .section-label, .mainnav, .nav-cta, .btn, .btn-note, .btn-row,
.masthead__meta, .exhibit__top, .tick-cite, .tick-verify, .badge,
.crumbs, .lede, .footer h2, .footer__legal, .softnote, .cta-line {
  font-family: var(--sans);
}
.exhibit__top, .masthead__meta {
  letter-spacing: .16em;
}

/* grain papier, très subtil, sur tout le fond */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* ============================================================
   HERO — coup d'éclat
   ============================================================ */
.hero.hero--elevated {
  padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  background:
    radial-gradient(120% 80% at 92% 4%, rgba(195,27,27,.06), transparent 55%),
    linear-gradient(180deg, var(--panel), var(--paper) 60%);
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
}
.hero--elevated .shell { position: relative; }

.hero--elevated .hero__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.hero--elevated .kicker {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--muted);
  display: block;
  margin: 0 0 1.4rem;
}

.hero--elevated h1 {
  font-size: clamp(2.7rem, 5.2vw, 4.5rem);
  line-height: 1.0;
  font-weight: 540;
  margin: 0 0 1.5rem;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.hero--elevated h1 .nowrap { white-space: nowrap; }
.hero--elevated h1 .accent {
  font-style: italic;
  color: var(--red);
  font-weight: 500;
}
.hero--elevated .lede {
  font-family: var(--sans);
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 40ch;
  margin: 0 0 2rem;
}
.hero--elevated .btn-row { align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; display: flex; }
.hero--elevated .btn-note { color: var(--muted); font-size: .82rem; margin: 0; }

/* boutons élevés */
.btn {
  border-radius: var(--radius);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .2s;
  will-change: transform;
}
.btn--primary {
  background: var(--red); color: #fff; border: 1px solid var(--red);
  box-shadow: none;
}
.btn--primary:hover { transform: none; box-shadow: none; background: var(--red-deep); }
.btn--ghost:hover { transform: none; }

/* la pièce à conviction, élevée */
.hero--elevated .exhibit {
  box-shadow: var(--shadow-soft);
  border-radius: 6px;
  transform: rotate(.5deg);
  transition: transform .5s var(--ease);
}
.hero--elevated .exhibit:hover { transform: none; }
.hero--elevated .exhibit__top { background: var(--ink); color: var(--paper); }
.hero--elevated .exhibit__row--you { border-top: 1px dashed var(--hair); }

/* filigrane : marque en ascension, très discrète */
.hero--elevated .hero__mark {
  position: absolute; right: -3%; bottom: -18%;
  width: min(46%, 420px); opacity: .05; pointer-events: none;
  transform: rotate(-4deg);
  z-index: 0;
}
.hero--elevated .hero__grid { position: relative; z-index: 1; }

/* ---- révélation au défilement (piloté par IntersectionObserver) ---- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-inview { opacity: 1; transform: none; }
[data-reveal="1"].is-inview { transition-delay: .05s; }
[data-reveal="2"].is-inview { transition-delay: .16s; }
[data-reveal="3"].is-inview { transition-delay: .27s; }
[data-reveal="4"].is-inview { transition-delay: .38s; }
/* sans JS : tout reste visible */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .hero--elevated .exhibit__row { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ============================================================
   RYTHME DE SECTION — piliers en vedette
   ============================================================ */
.pillars { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.pillars__head { max-width: 54ch; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.pillars__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.6vw, 2rem); }
.pillar {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.pillar:hover { transform: none; box-shadow: none; }
.pillar__no { font-family: var(--display); font-style: italic; font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.pillar h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: .5rem 0 .7rem; line-height: 1.08; }
.pillar p { color: var(--fg-soft); font-family: var(--sans); font-size: .98rem; line-height: 1.6; }
.pillar__link { font-family: var(--sans); font-weight: 600; font-size: .9rem; color: var(--red); text-decoration: none; display: inline-flex; align-items: center; gap: .4em; margin-top: 1.1rem; }


/* ============================================================
   FLOWVIZ — l'IA intégrée dans le flux (animation méthode op)
   ============================================================ */
.flowviz {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1.6rem 1.8rem;
}
.flowviz__top {
  display: flex; justify-content: space-between;
  font-family: var(--sans); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 1rem; margin-bottom: .4rem; border-bottom: 1px solid var(--hair);
}
.flowviz__top b { color: var(--red-deep); font-weight: 700; }
.flow { position: relative; padding-left: 2.1rem; }
.flow::before { /* le rail vertical */
  content: ""; position: absolute; left: .62rem; top: .6rem; bottom: .6rem; width: 2px;
  background: linear-gradient(var(--hair), var(--hair));
}
.flow__pulse { /* la bille qui descend le flux */
  position: absolute; left: .38rem; top: .4rem; width: 10px; height: 10px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 4px rgba(195,27,27,.14);
  animation: flowDown 3.6s var(--ease) infinite;
}
@keyframes flowDown {
  0% { top: .4rem; opacity: 0; } 8% { opacity: 1; }
  90% { opacity: 1; } 100% { top: calc(100% - 1rem); opacity: 0; }
}
.flow-node { position: relative; padding: .55rem 0 .95rem; }
.flow-node__dot {
  position: absolute; left: -1.86rem; top: .7rem; width: 12px; height: 12px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--slate);
}
.flow-node--ai .flow-node__dot { border-color: var(--red); background: var(--red); box-shadow: 0 0 0 0 rgba(195,27,27,.5); animation: aiPulse 2.2s ease-out infinite; }
@keyframes aiPulse { 0% { box-shadow: 0 0 0 0 rgba(195,27,27,.45); } 70% { box-shadow: 0 0 0 12px rgba(195,27,27,0); } 100% { box-shadow: 0 0 0 0 rgba(195,27,27,0); } }
.flow-node__k { font-family: var(--sans); font-weight: 700; font-size: .82rem; letter-spacing: .04em; color: var(--ink); display: block; }
.flow-node--ai .flow-node__k { color: var(--red-deep); }
.flow-node__d { font-family: var(--sans); font-size: .84rem; color: var(--fg-soft); }
@media (prefers-reduced-motion: reduce) {
  .flow__pulse { display: none; }
  .flow-node--ai .flow-node__dot { animation: none; }
}

/* ============================================================
   LITÉRATIE IA — comprendre avant d'intégrer
   ============================================================ */
.lit { padding: clamp(3rem, 6vw, 5rem) 0; }
.lit__head { max-width: 56ch; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.lit__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.lit-card {
  border: 1px solid var(--hair); border-radius: 6px; background: var(--panel);
  padding: 1.4rem 1.3rem; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.lit-card:hover { transform: none; box-shadow: none; }
.lit-card__k { font-family: var(--display); font-style: italic; font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.lit-card h3 { font-size: 1.2rem; margin: .5rem 0 .5rem; line-height: 1.12; }
.lit-card p { font-family: var(--sans); font-size: .9rem; line-height: 1.55; color: var(--fg-soft); }

@media (max-width: 900px) { .lit__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) {
  .hero--elevated .hero__grid { grid-template-columns: 1fr; }
  .hero--elevated .hero__mark { display: none; }
  .pillars__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .lit__grid { grid-template-columns: 1fr; } }

/* ============================================================
   PASSE CONSEIL — retirer les tells "template", ajouter la craft
   ============================================================ */
/* 1. Cartes = onglets de dossier (liseré rouge en tête), plus de <div> à bordure */
.pillar, .lit-card, .callout {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fg);
  border-radius: 0;
  box-shadow: none;
}
.pillar { padding: 22px 0 0; }
.pillar:hover, .lit-card:hover, .callout:hover { transform: none; box-shadow: none; }
.callout { padding: 18px 0 0; }

/* 2. Respiration + rythme tonal entre sections */
.pillars { background: #f7f1e6; padding-block: clamp(3.4rem, 6vw, 6rem); }
.lit { background: #f2ead9; padding-block: clamp(3.4rem, 6vw, 6rem); }

/* 4. Hero : caler les colonnes en haut, moins de vide, colonnes équilibrées */
.hero--elevated { padding-top: clamp(2.4rem, 4.5vw, 3.6rem); }
.hero--elevated .hero__grid {
  align-items: start;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr);
  gap: clamp(2rem, 4vw, 5rem);
}
.hero--elevated .hero__proof-col { margin-top: .4rem; }

/* 5. Boutons avec de la matière */
.btn--primary {
  border-radius: 2px;
  border: 1px solid var(--red);
  border-bottom: 2px solid var(--red-deep);
  box-shadow: 0 1px 0 rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.14), 0 10px 22px -12px rgba(195,27,27,.5);
  letter-spacing: .06em;
}

/* 6. Barres sombres des pièces : ancre chaude, pas noir pur */
.exhibit__top, .receipt__top, .flowviz__top { background: #1a1613; color: var(--paper); }
.flowviz__top { color: #d9cdb8; }
.flowviz__top b { color: #f0b8b0; }
.hero--elevated .exhibit, .flowviz {
  border: 1px solid rgba(50,25,10,.08);
  box-shadow: 0 20px 44px -24px rgba(50,25,10,.30);
}
.exhibit__top { border-radius: 6px 6px 0 0; }

/* 7. Titre display : interligne serré, coupures maîtrisées */
.hero--elevated h1 { line-height: .98; text-wrap: balance; }

/* 3. Étiquettes de carte : sérif rouge discret, casser la monotonie des capitales */
.lit-card__k, .pillar__no {
  font-family: var(--display); font-style: italic; font-weight: 500;
  text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--muted);
}

/* ============================================================
   PASSE 2 — réassurance, honnêteté, exemples/preuve
   ============================================================ */
/* bandeau réassurance sous chaque CTA */
.reassure {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  font-family: var(--sans); font-size: .82rem; color: var(--muted);
}
.reassure li { position: relative; padding-left: 1.1rem; }
.reassure li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--red); opacity: .8;
}

/* ligne d'honnêteté (le levier de confiance) */
.creed { background: #1a1613; color: var(--paper); padding-block: clamp(3rem, 6vw, 5rem); }
.creed__line {
  font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.22; letter-spacing: -.01em; max-width: 26ch; margin: 0;
  color: var(--paper);
}
.creed__line span { color: #e0a49d; font-style: italic; display: inline-block; margin-top: .5rem; }

/* section preuve / exemples */
.proof { background: var(--paper); padding-block: clamp(3.4rem, 6vw, 6rem); }
.proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 1.6rem; }
.proof-card {
  display: block; text-decoration: none; color: inherit;
  background: transparent; border: 0; border-top: 1px solid var(--fg); border-radius: 0;
  box-shadow: none;
  padding: 18px 0 16px;
}
.proof-card:hover { transform: none; box-shadow: none; }
.proof-card:hover .proof-card__host { color: var(--red); }
.proof-card__host { font-family: var(--display); font-size: 1.2rem; color: var(--ink); }
.proof-card__meta { font-family: var(--sans); font-size: .82rem; color: var(--muted); font-weight: 500; margin: .2rem 0 .7rem; letter-spacing: 0; }
.proof-card p { font-family: var(--sans); font-size: .9rem; line-height: 1.55; color: var(--fg-soft); margin: 0; }
.proof-card__go { font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--red); margin-top: .9rem; display: inline-flex; gap: .35em; }


/* bloc "ce que vous obtenez" (méthode) — réutilise .lit__grid */
.outcomes { padding-block: clamp(3rem, 6vw, 5rem); }

@media (max-width: 820px) { .proof__grid { grid-template-columns: 1fr; } }

/* ============================================================
   PASSE 3 — ANTI-AI : refroidir la terre cuite, durcir les angles,
   retirer les puces radio. Palette resserrée : ivoire / quasi-blanc / encre / rouge.
   ============================================================ */
:root { --card: #fffdfa; }

/* cartes : quasi-blanc net, angles vifs, liseré rouge franc, ombre discrète */
.pillar, .lit-card, .callout, .proof-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fg);
  border-radius: 0;
  box-shadow: none;
}
.pillar:hover, .lit-card:hover, .callout:hover, .proof-card:hover {
  transform: none;
  box-shadow: none;
}

/* sections : plus de beige. Séparation par filet + air, fond ivoire uniforme */
.pillars, .lit, .proof { background: var(--paper); }
.pillars, .lit, .proof, .creed { border-top: 1px solid var(--hair); }

/* boutons : rectangle net, sans arrondi */
.btn, .btn--primary, .btn--ghost { border-radius: 0; }

/* pièces (exhibit / flowviz / receipt) : angles vifs, pas de rotation gadget */
.hero--elevated .exhibit, .flowviz, .receipt,
.exhibit__top, .flowviz__top, .receipt__top { border-radius: 0; }
.hero--elevated .exhibit { transform: none; }
.hero--elevated .exhibit:hover { transform: none; }

/* réassurance : ligne éditoriale, séparateurs fins, aucune puce */
.reassure { gap: 0; flex-wrap: wrap; font-size: .88rem; color: var(--muted); letter-spacing: .01em; }
.reassure li { padding-left: 0; }
.reassure li::before { display: none; }
.reassure li:not(:last-child)::after {
  content: "·"; margin: 0 .7rem; color: var(--slate);
}

/* grain encore plus discret (éviter la texture "IA") */
body::before { opacity: .32; }

/* pied du flowviz : la charge utile concrète */
.flowviz__foot {
  margin-top: 1.1rem; padding-top: .95rem; border-top: 1px solid var(--hair);
  font-family: var(--display); font-style: italic; font-size: 1rem; line-height: 1.35; color: var(--ink);
}

/* ============================================================
   DEMO — "de la parole au livrable" (vraie démo d'intégration)
   ============================================================ */
.demo {
  background: var(--card); border: 1px solid var(--hair);
  box-shadow: none;
}
.demo__top {
  display: flex; justify-content: space-between; background: #1a1613; color: #d9cdb8;
  font-family: var(--sans); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .75rem 1.1rem;
}
.demo__top b { color: #f0b8b0; font-weight: 700; }
.demo__body { padding: 1.3rem 1.35rem 0; }
.demo__tag { font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.demo__tag--red { color: var(--red-deep); }
/* la phrase dite */
.demo__said { }
.demo__msg {
  margin: .45rem 0 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; color: var(--ink);
  background: #f3ede2; border-left: 2px solid var(--slate); padding: .7rem .85rem; border-radius: 0 4px 4px 0;
  min-height: 3.4em;
}
.demo__typed::after { content: "▏"; color: var(--red); animation: caret 1s step-end infinite; }
.demo.is-done .demo__typed::after { content: ""; }
@keyframes caret { 50% { opacity: 0; } }
/* la flèche de transformation */
.demo__arrow { text-align: center; color: var(--red); font-size: 1.2rem; margin: .55rem 0 .15rem; }
/* le livrable structuré */
.demo__fields { list-style: none; margin: .5rem 0 0; padding: 0; }
.demo__fields li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--hair);
  font-family: var(--sans); opacity: 0; transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.demo__fields li:last-child { border-bottom: 0; }
.demo__fields li.in, .no-js .demo__fields li, .demo.static .demo__fields li { opacity: 1; transform: none; }
.demo__fields span { font-size: .82rem; color: var(--muted); letter-spacing: .04em; }
.demo__fields b { font-size: .92rem; color: var(--ink); font-weight: 600; text-align: right; }
.demo__fields b.ok { color: #2e7d46; }
.demo__foot {
  margin-top: .2rem; padding: .95rem 1.35rem 1.2rem; border-top: 1px solid var(--hair);
  font-family: var(--display); font-style: italic; font-size: .95rem; line-height: 1.35; color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .demo__fields li { opacity: 1 !important; transform: none !important; }
  .demo__typed::after { content: "" !important; }
}

/* démo : COMPLET par défaut (robuste au rendu), masqué seulement pendant l'animation */
.demo__fields li { opacity: 1; transform: none; }
.demo.animating .demo__fields li:not(.in) { opacity: 0; transform: translateY(6px); }
.demo__typed::after { content: ""; }
.demo.animating .demo__typed::after { content: "▏"; color: var(--red); animation: caret 1s step-end infinite; }

/* ============================================================
   FLOW — respiration (inspiré realfrench.co / english-performance.com)
   Sections plus aérées, intros plus généreuses, moins "forcé".
   ============================================================ */
.band { padding-block: clamp(3.8rem, 7.5vw, 7.5rem); }
.band .grid-2 { gap: clamp(2.4rem, 5.5vw, 6rem); align-items: start; }
.band .grid-3 { gap: clamp(1.6rem, 3vw, 2.4rem); }
/* les cartes de principes se lisent cote a cote des que la largeur le permet */
@media (min-width: 880px) {
  .band .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band .grid-3 > div + div { margin-top: 0; }
  .band .grid-3 > .callout { margin-top: 0; }
}
.band .grid-3 .callout > * { margin-left: 0; margin-right: 0; }
.band h2, .pillars__head h2, .lit__head h2, .proof h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.7rem); line-height: 1.12; letter-spacing: -.015em;
}
.band h2 + p, .filet p { font-size: 1.06rem; line-height: 1.74; }
.eyebrow, .section-label { margin-bottom: 1rem; }
.ledger { gap: .2rem; }
.ledger article { padding-block: 1.2rem; }
.exhibit__note, .demo__foot, .flowviz__foot { line-height: 1.5; }
/* filet : une vraie colonne de lecture aérée à droite */
.filet { max-width: 60ch; }
.filet p + p { margin-top: 1.1rem; }

/* dial-back : la passe flow surdimensionnait le padding (trous vides). Modéré. */
.band { padding-block: clamp(2.8rem, 4.6vw, 4.8rem); }

/* ============================================================
   FLOW v2 — COMPOSITION éditoriale (remplir la largeur, varier le rythme)
   ============================================================ */
/* colonne éditoriale : remplace les grid-2 "titre | petit texte" rigides */
/* La colonne éditoriale avait une largeur maximale mais aucune marge automatique :
   elle se collait au bord gauche de son conteneur, avec jusqu'à 686 px de vide à
   droite sur cinq pages. Le centrage vivait dans le modificateur --center, que les
   blocs Gutenberg ont perdu à la migration. Une colonne centrée devient la règle,
   le texte centré reste le modificateur.
   Exception : dans une grille à deux colonnes, la colonne de texte doit rester
   contre sa gouttière, sinon elle dérive vers la droite et le duo se disloque. */
.editorial { max-width: 66ch; margin-inline: auto; }
[class*="__grid"] > .editorial { margin-inline: 0; }
.editorial--center { margin-inline: auto; text-align: center; }
.editorial .eyebrow, .editorial .section-label { margin-bottom: .95rem; }
.editorial h2 { font-size: clamp(1.95rem, 3.8vw, 3rem); line-height: 1.1; margin: 0 0 .8rem; letter-spacing: -.018em; }
.editorial > p { font-size: 1.09rem; line-height: 1.76; color: var(--fg-soft); margin: 0; }
.editorial > p.eyebrow, .editorial > p.section-label, .shell > p.eyebrow, .shell > p.section-label { font-size: 1.05rem; }
.editorial > p + p { margin-top: 1.15rem; }
.editorial .btn-row, .editorial .cta-line { margin-top: 1.6rem; }

/* feature : split où les DEUX colonnes sont pleines (texte + visuel/carte) */
.feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2.4rem,5vw,5.5rem); align-items: center; }
.feature--wide-right { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
@media (max-width: 820px){ .feature, .feature--wide-right { grid-template-columns: 1fr; } }

/* statement : un moment fort, grande typo, pleine largeur */
.statement { font-family: var(--display); font-size: clamp(2rem,4.4vw,3.3rem); line-height: 1.14; letter-spacing: -.02em; max-width: 24ch; margin: 0; }
.statement .accent { font-style: italic; color: var(--red); }

/* ledger/cartes en pleine largeur sous un titre plein (3 colonnes qui remplissent) */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.6vw, 2rem); margin-top: clamp(1.8rem, 3.5vw, 2.8rem); }
/* A fourth card in a three-column row would otherwise sit orphaned at a third
   of the width. When a card set holds exactly four, the last one spans the full
   second row: it reads as a deliberate closing panel and gives longer copy room.
   The mobile single-column override still wins, it is flagged important. */
.cards-3 > :nth-child(4):last-child { grid-column: 1 / -1; }
@media (max-width: 820px){ .cards-3 { grid-template-columns: 1fr; } }

/* ============================================================
   TARIFS AEO — le pourquoi, la différence, les paliers (sobre, dossier)
   ============================================================ */
/* le POURQUOI : 3 mécanismes */
.mechanisms { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.4vw, 1.8rem); margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.mechanism { background: transparent; border: 0; border-top: 1px solid var(--fg); padding: 18px 0 0; }
.mechanism__k { font-family: var(--display); font-style: italic; font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.mechanism h3 { font-family: var(--display); font-size: 1.15rem; line-height: 1.15; margin: .45rem 0 .45rem; }
.mechanism p { font-family: var(--sans); font-size: .9rem; line-height: 1.55; color: var(--fg-soft); margin: 0; }
@media (max-width: 820px) { .mechanisms { grid-template-columns: 1fr; } }

/* la DIFFÉRENCE : ce que les agences "IA" ne font pas */
.diff-list { list-style: none; margin: clamp(1.2rem, 2.6vw, 1.8rem) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.8rem; }
.diff-list li { font-family: var(--sans); font-size: .96rem; line-height: 1.4; padding-left: 1.5rem; position: relative; color: var(--ink); }
.diff-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--red); font-weight: 700; }
@media (max-width: 640px) { .diff-list { grid-template-columns: 1fr; } }

/* les PALIERS : table éditoriale (pas des cartes SaaS) */
.pricing { border: 1px solid var(--hair); background: var(--card); margin-top: clamp(1.8rem, 3.5vw, 2.6rem); overflow-x: auto; }
.pricing table { width: 100%; border-collapse: collapse; font-family: var(--sans); min-width: 640px; }
.pricing th, .pricing td { padding: .85rem 1.15rem; text-align: left; border-bottom: 1px solid var(--hair); font-size: .9rem; vertical-align: top; line-height: 1.4; }
.pricing thead th { font-family: var(--display); font-size: 1.1rem; border-bottom: 2px solid var(--ink); }
.pricing thead th small { display: block; font-family: var(--sans); font-size: .78rem; font-weight: 700; color: var(--ink); margin-top: .2rem; }
.pricing tbody th { font-weight: 600; color: var(--muted); font-size: .82rem; }
.pricing col.reco, .pricing td.reco, .pricing th.reco { background: #fbf5f3; }
.pricing thead th.reco { border-top: 0; }
.pricing .reco-badge { display: inline-block; font-family: var(--display); font-style: italic; font-size: .82rem; letter-spacing: 0; text-transform: none; color: var(--red-deep); background: transparent; padding: 0; margin-top: .35rem; }
.pricing .ok { color: #2e7d46; font-weight: 600; }
.pricing .none { color: var(--slate); }
.tarif-note { font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--ink); margin-top: 1.4rem; max-width: 60ch; }
.tarif-posture { font-family: var(--sans); font-size: .9rem; color: var(--muted); margin-top: 1rem; }

/* tagline sous le logo : signature de marque (pas une étiquette en capitales) */
.wordmark small, .masthead .wordmark small {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Dock flottant : WhatsApp + retour en haut.
   Registre de la maison : pas de bulle verte criarde, deux pastilles papier
   à filet, glyphe à l'encre, l'accent rouge réservé à l'action de contact.
   --------------------------------------------------------------------------- */
.dock {
  position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px);
  z-index: 60; display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none;
}
.dock__btn {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 0; justify-content: flex-start;
  width: 48px; height: 48px; padding: 0; overflow: hidden;
  border: 1px solid var(--hair); border-radius: 999px;
  background: var(--panel); color: var(--ink);
  box-shadow: 0 6px 20px rgba(29, 26, 22, .12);
  font: 500 .82rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: width .22s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.dock__ico { display: inline-flex; flex: 0 0 46px; justify-content: center; align-items: center; }
.dock__label { flex: 0 0 auto; }
.dock__label {
  white-space: nowrap; opacity: 0; padding-right: 16px;
  transition: opacity .16s ease;
}
.dock__btn--wa { color: var(--red); }
.dock__btn--wa:hover, .dock__btn--wa:focus-visible { background: var(--red); color: #fff; border-color: var(--red); }
.dock__btn--top:hover, .dock__btn--top:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dock__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.dock__btn[hidden] { display: none; }

/* le libellé ne se déplie qu'au survol, et seulement là où il y a une souris */
@media (hover: hover) and (min-width: 780px) {
  .dock__btn:hover, .dock__btn:focus-visible { width: auto; }
  .dock__btn:hover .dock__label, .dock__btn:focus-visible .dock__label { opacity: 1; }
}

/* la scène épinglée occupe tout l'écran : le dock s'efface pendant la démonstration */
.dock--away { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }

@media (prefers-reduced-motion: reduce) {
  .dock__btn, .dock__label { transition: none; }
}

/* Le bouton d'action reste lisible sur sa propre page. La règle d'état courant
   (.mainnav a[aria-current]) l'emportait en spécificité sur .mainnav .nav-cta
   et le repeignait en rouge sur rouge : sur /contact/, le bouton disparaissait. */
.mainnav a.nav-cta[aria-current="page"],
.mainnav a.nav-cta[aria-current="location"] {
  color: #fff; background: var(--red-deep); border-color: var(--red-deep);
}

/* ---------------------------------------------------------------------------
   Diptyque de la maison : deux responsables, un seul traitement.
   Les deux photos sont en noir et blanc pour qu'elles se lisent comme une
   direction artistique et non comme deux clichés rapportés.
   --------------------------------------------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); }
.duo__fig { margin: 0; }
.duo__fig img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--panel);
}
.duo__fig figcaption {
  margin-top: 10px; font: 400 .82rem/1.45 var(--sans); color: var(--muted);
}
.duo__fig figcaption strong {
  display: block; font-weight: 600; color: var(--ink); margin-bottom: 2px;
}
/* sur mobile on garde le diptyque : deux carrés pleine largeur empilés
   feraient près de 800 px d'images avant le premier paragraphe */
@media (max-width: 640px) {
  .duo { gap: 12px; }
  .duo__fig figcaption { font-size: .76rem; line-height: 1.4; }
}

/* photo d'atelier dans la section de Nicole : le métier, pas le portrait */
.atelier { margin: 26px 0 24px; }
.atelier img {
  display: block; width: 100%; height: auto;
  background: var(--panel);
}
.atelier figcaption {
  margin-top: 10px; font: 400 .82rem/1.45 var(--sans); color: var(--muted);
}

/* pages de catalogue dans un diptyque : format portrait, pas carré.
   Sur mobile elles s'empilent : côte à côte elles seraient illisibles. */
.duo__fig--doc img { aspect-ratio: auto; }
@media (max-width: 720px) {
  .duo--doc { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------------------------------------------------------------------------
   Auto-démonstration en pied d'article du Journal.
   Registre : une fiche de relevé, pas une bannière de vente. Les chiffres sont
   mesurés sur l'article rendu, donc le bloc parle de CETTE page, pas du site.
   --------------------------------------------------------------------------- */
.jdemo__liste {
  margin: 1.9rem 0 1.6rem; padding: 0;
  border-top: 1px solid var(--line);
}
.jdemo__ligne {
  display: grid; grid-template-columns: minmax(140px, 22%) 1fr;
  gap: clamp(14px, 2.4vw, 34px);
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.jdemo__ligne dt {
  margin: 0; font: 600 .78rem/1.35 var(--sans);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.jdemo__ligne dd {
  margin: 0; font: 400 1rem/1.62 var(--sans); color: var(--fg-soft);
}
.jdemo__verif { font-size: .95rem; color: var(--muted); margin-bottom: .9rem; }

@media (max-width: 680px) {
  .jdemo__ligne { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .jdemo__ligne dd { font-size: .96rem; }
}
.jdemo__ligne dd sup { font-size: .68em; vertical-align: super; line-height: 0; }

/* La règle « .callout + .callout » sert aux encadrés EMPILÉS. Dans une rangée en
   grille, elle décalait vers le bas toutes les cartes sauf la première, qui
   dépassait donc de 18 px. La grille porte déjà son propre gap. */
:is([class*="cards-"], [class*="__grid"]) > .callout + .callout { margin-top: 0; }

/* WordPress pose « margin-block-start: 1.25rem » sur tout enfant d'un conteneur
   is-layout-flow. Quand le thème transforme ce conteneur en grille, la première
   carte reste en place et toutes les suivantes descendent de 20 px. La grille
   porte déjà son gap : on annule la marge de flux sur ses enfants directs. */
:is([class*="cards-"], [class*="__grid"], .ledger, .stage) > * { margin-block-start: 0; }

/* Les surtitres des blocs (preuve, anatomie) sont rouges, ceux des pages etaient
   gris : deux conventions pour un meme role. La regle .editorial > p est plus
   specifique que .eyebrow et gagnait ; on passe devant, sans toucher au reste. */
.editorial > p.eyebrow, .editorial > p.section-label,
.shell > p.eyebrow, .shell > p.section-label,
.grid-2 p.eyebrow { color: var(--muted); }
.editorial > p.eyebrow--quiet { color: var(--fg-soft); }

/* Les titres « statement » partaient du bord du shell pendant que leur corps
   vivait dans la colonne éditoriale, soit 194 px d'écart. C'était un motif
   volontaire, appliqué sur quatre pages, mais il se lit comme un défaut
   d'alignement plutôt que comme un effet. Un effet que personne ne reconnaît
   n'est plus un effet. On les ramène dans la colonne, avec leur surtitre, et
   uniquement là où ce motif existe. */
.shell:has(> .statement) > .statement,
.shell:has(> .statement) > .eyebrow,
.shell:has(> .statement) > .section-label {
  max-width: 45.4rem;
  margin-inline: auto;
}

/* Bouton doublé : .btn et .btn--primary sont écrits pour un <a> nu. Quand ces
   classes atterrissent sur le CONTENEUR Gutenberg (.wp-block-button), le
   conteneur se peint comme un bouton et le lien qu'il enveloppe se peint une
   seconde fois : on voit deux rectangles emboîtés. Le conteneur ne peint rien,
   c'est le lien qui porte l'apparence. Dix occurrences sur cinq pages au
   2026-08-04, et le motif se recopiera : la garde est ici, pas dans le contenu. */
.wp-block-button.btn,
.wp-block-button.btn--primary,
.wp-block-button.btn--ghost {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  color: inherit;
}
.wp-block-button.btn:hover,
.wp-block-button.btn--primary:hover,
.wp-block-button.btn--ghost:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
}

/* heros contact : texte a gauche, carte RDV a droite (seul grid-2 en deux colonnes du site) */
.hero .grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.hero .grid-2 > div + div { margin-top: 0; }
@media (max-width: 920px) {
  .hero .grid-2 { grid-template-columns: 1fr; }
  .hero .grid-2 > div + div { margin-top: 26px; }
}