/* ==========================================================================
   Qualiova — Design system
   Clair, bleu nuit / bleu profond en action #0A5FA8 / orange brûlé en accent #B85200
   Montserrat 900 + Outfit — direction C retenue le 27/10/2026, voir DESIGN.md
   ========================================================================== */

/* ---------- Fonts (auto-hébergées, variables 100–900) ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --green: #B85200;
  --green-deep: #9A4400;
  --teal: #0A5FA8;
  /* Le vert et le bleu de marque sont calibrés pour le fond noir : sur du
     blanc ils tombent à 1,8:1 et 3,5:1, illisibles. Ces deux variantes
     assombries tiennent 5,1:1 et 5,7:1 sur blanc, en gardant la teinte. */
  --green-ink: #B85200;
  --teal-ink: #0A5FA8;
  --cta-grad: var(--action);

  --bg: #F2F6FB;        /* noir, très légèrement teinté vers le vert de marque */
  --bg-deep: #E4EBF4;   /* bandeaux défilants */
  --card: #FFFFFF;      /* surface surélevée */
  --border: #D3DCE8;

  --ink: #0F2238;
  --ink-dim: #3E5168;
  --ink-faint: #566A82;

  --paper: #FFFFFF;
  --paper-alt: #EDF2F8;
  --paper-ink: #0F2238;
  --paper-dim: #4A5D75;
  --paper-border: #D6E0EC;
  --lavender: #E6EEF8;

  --font-display: "Montserrat", sans-serif;
  --font-body: "Outfit", sans-serif;

  --container: 1200px;
  --container-wide: min(1760px, 94vw);  /* hero : occupe la largeur de l'écran */
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 78px;
  /* Hauteur du bandeau d'offre, 0 quand il n'y en a pas. Le JS la mesure et
     l'écrase ; ces valeurs servent de repli et suffisent au cas courant. */
  --promo-h: 0px;
  --radius: 22px;
  --radius-sm: 14px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* échelle typographique — le h1 suit la largeur ET la hauteur de l'écran,
     pour rester monumental sans jamais repousser le CTA sous la ligne de flottaison */
  --h1: clamp(2.05rem, min(6.3vw, 9.5vh), 7rem);
  --h2: clamp(1.8rem, 3.4vw, 2.7rem);
  --h3: clamp(1.1rem, 1.9vw, 1.4rem);

  /* rythme vertical unique */
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --section-y-sm: clamp(2.5rem, 4.5vw, 3.75rem);

  --hexes: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="112" height="128" viewBox="0 0 112 128"><g fill="none" stroke="%230b1f38" stroke-opacity="0.07" stroke-width="1.5"><path d="M28 2 54 17v30L28 62 2 47V17zM84 2l26 15v30L84 62 58 47V17zM56 66l26 15v30l-26 15-26-15V81z"/></g></svg>');
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* le motif est porté par le body, donc continu : appliqué section par
     section, il laissait un raccord visible à chaque jointure */
  background: var(--hexes) var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.28; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 700; }
::selection { background: var(--green); color: #FFFFFF; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 880px; }

.hl { color: var(--green); }
.hl-teal { color: var(--teal); }
.muted { color: var(--ink-dim); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05em;
  min-height: 58px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  background: var(--cta-grad);
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  padding: 0.75em 1.8em;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 0 0 3px rgba(242, 246, 251, 0.5), 0 10px 26px -10px rgba(184, 82, 0, 0.6);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  cursor: pointer;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(242, 246, 251, 0.65), 0 16px 34px -10px rgba(184, 82, 0, 0.8);
}
.btn small {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9em;
  text-transform: none;
  letter-spacing: 0.01em;
  opacity: 0.95;
}
.btn--lg { font-size: 1.05rem; min-height: 66px; padding: 0.85em 2.2em; }
.btn--ghost {
  background: transparent;
  border: 2px solid var(--green);
  color: var(--green);
  text-shadow: none;
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(184, 82, 0, 0.1); box-shadow: none; }
.btn--inline { flex-direction: row; gap: 0.55em; }
.btn-row {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: stretch;
  margin-top: 1.8rem;
}
.center .btn-row, .btn-row--center { justify-content: center; }

/* Prix barré à côté d'un module offert : le repère hors offre reste lisible. */
.price-card__was {
  font-size: 0.55em; font-weight: 600; opacity: 0.55;
  text-decoration: line-through; margin-inline-start: 0.35em; white-space: nowrap;
}

/* ---------- Bandeau d'offre ---------- */
/* Au-dessus de l'en-tête, qui reste seul collant : le bandeau défile avec la
   page au lieu de rogner la hauteur utile en permanence. --header-h ne bouge
   donc pas, et le calcul du hero reste valable. */
.promo {
  background: var(--cta-grad);
  color: #0F2238;
  font-family: var(--font-body);
}
.promo[hidden] { display: none; }
.promo__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem 1rem; flex-wrap: wrap;
  padding-block: 0.55rem; min-height: 40px;
}
.promo__text { margin: 0; font-size: 0.9rem; line-height: 1.35; text-align: center; }
.promo__text strong { font-weight: 800; }
.promo__value, .promo__note { opacity: 0.82; }
.promo__sep { opacity: 0.5; }
/* Le décompte arrive après le chargement : une largeur minimale évite que le
   bandeau se réorganise sous les yeux du visiteur à la première seconde. */
.promo__count { font-variant-numeric: tabular-nums; font-weight: 700; display: inline-block; min-width: 8.5ch; }
.promo__link {
  color: #0F2238; font-weight: 800; font-size: 0.87rem;
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.promo__link:hover { text-decoration-thickness: 2px; }
.promo__close {
  position: absolute; right: 0.75rem;
  background: none; border: 0; cursor: pointer;
  color: #0F2238; font-size: 1.35rem; line-height: 1;
  padding: 0.1rem 0.35rem; border-radius: 4px; opacity: 0.55;
}
.promo__close:hover { opacity: 1; }
.promo__inner { position: relative; padding-inline-end: 2.25rem; }
.promo__short { display: none; }
body:has(.promo:not([hidden])) { --promo-h: 40px; }
@media (max-width: 720px) { body:has(.promo:not([hidden])) { --promo-h: 72px; } }
@media (max-width: 720px) {
  .promo__inner { padding-inline-end: 2rem; gap: 0.35rem 0.6rem; }
  .promo__text { font-size: 0.8rem; }
  /* Sur un écran étroit : titre et échéance en version courte, la mention et le
     séparateur qui la précède sautent. L'essentiel est l'offre et son échéance ;
     le détail reste sur la page prix. */
  .promo__long { display: none; }
  .promo__short { display: inline; }
  .promo__note, .promo__sep:has(+ .promo__note) { display: none; }
  .promo__count { min-width: 0; }
  /* Le lien repasse dans le fil du texte : en élément flex, il occupait une
     ligne à lui seul et le bandeau en faisait trois. */
  .promo__inner { display: block; text-align: center; }
  .promo__text { display: inline; }
  .promo__link { margin-inline-start: 0.5rem; }
}
@media print { .promo { display: none !important; } }

/* ---------- Header ---------- */
/* Bandeau et en-tête collent ensemble : un seul conteneur, donc aucune hauteur
   à calculer pour décaler l'en-tête, et rien à défaire quand le visiteur masque
   le bandeau. */
.topbar { position: sticky; top: 0; z-index: 50; }
.site-header {
  background: var(--bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header__inner { display: flex; align-items: center; gap: 1.6rem; min-height: 78px; }
.site-header__logo img { height: 32px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; margin-inline: auto; }
.site-nav a {
  font-size: 0.96rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
  padding-block: 0.35em;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.site-nav a:hover { color: var(--green); }
.site-nav a[aria-current="page"] { color: var(--green); border-bottom-color: var(--green); }

.nav-drop { position: relative; }
.nav-drop > button {
  all: unset; cursor: pointer;
  font-family: var(--font-body); font-size: 0.96rem; font-weight: 500;
  color: var(--ink); display: inline-flex; align-items: center; gap: 0.4em;
  padding-block: 0.35em;
  transition: color 0.2s;
}
.nav-drop > button::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.nav-drop:hover > button, .nav-drop:focus-within > button { color: var(--green); }
.nav-drop__menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  translate: -50% 0;
  min-width: 330px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.5rem;
  display: grid;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}
.nav-drop:hover .nav-drop__menu, .nav-drop:focus-within .nav-drop__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-drop__menu::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.nav-drop__menu a {
  padding: 0.65rem 0.9rem; border-radius: 9px;
  font-size: 0.93rem; color: var(--ink-dim); text-decoration: none; border: 0;
}
.nav-drop__menu a:hover { background: var(--card); color: var(--green); }

.site-header .btn {
  font-size: 0.78rem; min-height: 44px; padding: 0.55em 1.3em;
  border-radius: 999px; box-shadow: 0 0 0 2px rgba(242, 246, 251, 0.45);
}

.nav-toggle { display: none; }
.nav-burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav-burger span {
  width: 22px; height: 2px; background: var(--ink);
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}

@media (max-width: 1120px) {
  .site-nav {
    position: fixed; inset: calc(var(--promo-h) + var(--header-h)) 0 auto; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
    padding: 0.6rem var(--gutter) 1.4rem;
    display: none;
    max-height: calc(100dvh - 78px); overflow-y: auto;
  }
  .site-nav a, .nav-drop > button { padding: 0.8rem 0; font-size: 1.05rem; width: 100%; border-bottom: 0; }
  .nav-drop__menu {
    position: static; translate: none; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; background: transparent; padding: 0 0 0 1rem; min-width: 0;
  }
  .nav-drop__menu::before { display: none; }
  .nav-drop > button::after { display: none; }
  .site-header .btn { display: none; }
  .nav-burger { display: flex; }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Sections : rythme unique ---------- */
.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
/* deux sections de même fond qui se suivent : pas de double padding */
.section + .section:not(.section--paper):not(.section--deep) { padding-top: 0; }
.section.section--deep + .section:not(.section--paper):not(.section--deep) { padding-top: var(--section-y); }
.section.section--deep + .section.section--sm:not(.section--paper):not(.section--deep) { padding-top: var(--section-y-sm); }
.section--paper + .section--paper { padding-top: 0; }
.section--paper { background: var(--paper); color: var(--paper-ink); }
.section--paper p { color: var(--paper-dim); }
.section--paper strong, .section--paper .eyebrow { color: var(--paper-ink); }

.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .checklist, .center .steps { text-align: left; }
.section-head { max-width: 800px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.center .section-head, .section-head.center { margin-inline: auto; }
.section-head p { font-size: 1.22rem; color: var(--ink-dim); }
.section--paper .section-head p { color: var(--paper-dim); }
.lead { font-size: 1.22rem; color: var(--ink-dim); max-width: 50em; }
.center .lead { margin-inline: auto; }

/* Texte courant : gris clair sur fond sombre, gris foncé sur fond blanc.
   :where() met la spécificité à zéro pour ce sélecteur, afin qu'un composant
   qui définit sa propre couleur (prix en vert, mentions grises…) garde la main. */
.section :where(p), .hero :where(p) { color: var(--ink-dim); }
.section--paper :where(p) { color: var(--paper-dim); }
.section :where(strong), .hero :where(strong) { color: var(--ink); }
.section--paper :where(strong) { color: var(--paper-ink); }
a.text-link { color: var(--green); font-weight: 500; }
.section--paper a.text-link { color: var(--teal-ink); } /* le teal de marque fait 3,4:1 sur blanc, l'encre teal 5,3:1 */
.fine { font-size: 0.87rem; color: var(--ink-faint); }
.rating-line { margin-top: 1.1rem; }
.h2-soft { color: var(--ink-faint); }
.section--paper .fine { color: var(--paper-dim); } /* #8a8a92 faisait 3,4:1 sur blanc */
.center .fine { margin-inline: auto; }

/* utilitaires de composition */
.stack-center { max-width: 860px; margin-inline: auto; }
.stack > * + * { margin-top: 1.4rem; }
.figure-price {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 3.4vw, 2.6rem); color: var(--green);
  line-height: 1; margin: 0 0 0.5rem;
}

/* texture hexagonale : hero uniquement */
.texture { position: relative; overflow: clip; }
.texture::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 65% at 76% 2%, rgba(184, 82, 0, 0.07), transparent 64%),
    radial-gradient(ellipse 55% 60% at 20% 100%, rgba(10, 95, 168, 0.05), transparent 66%);
  pointer-events: none;
}
.texture > * { position: relative; z-index: 1; }

/* ---------- Hero ----------
   Volontairement plus court qu'une hauteur d'écran : le début de la section
   suivante entre dans le champ, coupé par le bas. C'est cette découpe qui fait
   comprendre qu'il y a une suite. Le CTA, lui, reste toujours au-dessus de la
   ligne de flottaison — voir la borne en vh de --h1. */
.hero {
  min-height: calc(78svh - var(--header-h) - var(--promo-h));
  display: grid;
  align-content: center;
  padding-block: clamp(1.6rem, 3.2vh, 3rem);
}
.hero + .section { padding-top: var(--section-y-sm); }
.hero__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  text-align: center;
}
.hero h1 {
  margin-bottom: 0.42em;
  line-height: 1.02;
  letter-spacing: -0.015em;
  /* pas de text-wrap: balance ici : on veut des lignes pleines, bord à bord */
  text-wrap: initial;
}
.hero__sub {
  font-size: clamp(1.08rem, 1.55vw, 1.4rem);
  color: var(--ink-dim);
  max-width: 44em; margin-inline: auto;
}
.hero__sub strong { color: var(--ink); }
/* le hero est centré, mais une liste à puces se lit alignée à gauche.
   Sur grand écran elle passe en deux colonnes : le CTA remonte d'autant. */
.hero .checklist {
  max-width: 1100px;
  margin: clamp(1.1rem, 2.4vh, 1.8rem) auto 0;
  text-align: left;
}
@media (min-width: 900px) {
  .hero .checklist {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    row-gap: 0.7rem;
  }
}
.hero__cta {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.8rem;
  margin-top: clamp(1.3rem, 3vh, 2rem);
}

/* Écran bas (portables 768–900px) : les heros chargés — titre, sous-titre,
   liste à puces, CTA, note Google — dépassent la hauteur disponible et
   mangent l'amorce de la section suivante. On resserre l'ensemble plutôt que
   de retirer du contenu. */
@media (max-height: 950px) {
  .hero { padding-block: 1rem; }
  .hero__sub { font-size: 1.18rem; }
  .hero .checklist { margin-top: 0.9rem; row-gap: 0.45rem; }
  .hero .checklist li { font-size: 1.02rem; gap: 0.65rem; }
  .hero .checklist li::before { width: 18px; height: 18px; background-size: 10px; }
  .hero__cta { margin-top: 1rem; gap: 0.55rem; }
  .hero .btn--lg { min-height: 56px; font-size: 0.97rem; padding-block: 0.7em; }
  .scroll-cue { margin-top: 0.9rem; width: 13px; height: 13px; }
}

/* Mobile : le CTA passe avant la liste, pour rester au-dessus de la ligne
   de flottaison sur un écran de téléphone. */
@media (max-width: 780px) {
  .hero__inner { display: flex; flex-direction: column; }
  .hero__sub { order: 1; }
  .hero__cta { order: 2; margin-top: 1.4rem; }
  .hero .checklist { order: 3; margin-top: 1.8rem; }
  /* sans order explicite, le chevron remonte entre le titre et le sous-titre */
  .scroll-cue { order: 9; }
  /* même piège pour une mention posée sous le bouton : sans order, elle remonte
     au-dessus du sous-titre et repousse le CTA sous la ligne de flottaison */
  .hero__inner > .fine { order: 5; margin-top: 1rem; }
  /* les rubriques du blog restent sous le sous-titre, comme sur grand écran */
  .hero .cat-nav { order: 4; }
  .hero .checklist li { font-size: 0.97rem; }
  .hero h1 { order: 0; }
  /* sur petit écran, on resserre le bouton pour que son sous-titre tienne
     sur une seule ligne */
  .hero__cta .btn--lg { font-size: 1rem; padding-inline: 1.3em; }
}

/* note Google */
.rating {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-dim);
}
.rating__stars { color: #f6b93b; font-size: 0.92rem; letter-spacing: 0.08em; }
.rating strong { color: var(--ink); }
.section--paper .rating { color: var(--paper-dim); }
.section--paper .rating strong { color: var(--paper-ink); }

/* ---------- Vidéo (façade cliquable, pas d'iframe au chargement) ---------- */
.video {
  position: relative;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  max-width: 940px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.7);
  border: 0; padding: 0; cursor: pointer;
  display: block; width: 100%;
}
.video img { width: 100%; height: 100%; object-fit: cover; }
.video::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.15);
  transition: background 0.25s;
}
.video:hover::after { background: rgba(0, 0, 0, 0.05); }
.video__play {
  position: absolute; inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 78px; height: 54px;
  border-radius: 14px;
  background: rgba(20, 20, 20, 0.8);
  display: grid; place-items: center;
  z-index: 1;
  transition: background 0.25s, scale 0.25s var(--ease-out);
}
.video:hover .video__play { background: var(--green); scale: 1.06; }
.video__play svg { width: 24px; height: 24px; fill: #fff; }
.video:hover .video__play svg { fill: #FFFFFF; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video.is-playing::after, .video.is-playing .video__play { display: none; }

/* ---------- Checklist ---------- */
.checklist { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.checklist li { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: 500; }
.checklist li::before {
  content: ""; flex: none;
  width: 21px; height: 21px; margin-top: 3px;
  border-radius: 5px;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="3.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / 12px no-repeat,
    var(--green);
}
.checklist--lg li { font-size: 1.05rem; }

/* ---------- Marquees ---------- */
.marquee {
  background: var(--bg-deep);
  border-block: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  padding-block: 1rem;
}
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee span {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink);
  white-space: nowrap;
  display: inline-flex; align-items: center;
  padding-inline: 1.1rem;
}
.marquee span::after { content: "•"; color: var(--green); margin-left: 2.2rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee--pills { background: var(--bg); border: 0; padding-block: 1.1rem; }
.marquee--pills .marquee__track { align-items: center; }
/* Lettres pleines, pas détourées : au-delà de ~1,5rem le contour suit aussi
   l'intérieur des boucles (R, S, A, Ç) et les lettres se remplissent de
   formes parasites. */
.marquee--pills span {
  font-weight: 800; font-size: clamp(0.82rem, 1.15vw, 1rem);
  letter-spacing: 0.08em;
  color: var(--green);
  border: 1px solid rgba(184, 82, 0, 0.5);
  border-radius: 999px;
  padding: 0.5em 1.1em;
  margin-inline: 0.35rem;
}
.marquee--pills span::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Logos clients : bandeau qui défile en continu ---------- */
/* p.…  : sinon la règle générique « .section p » l'emporte et le vert saute */
p.logos__label {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 900; text-transform: uppercase;
  color: var(--green);
  margin: 0 0 2rem;
}
.logos {
  overflow: hidden;
  /* fondu sur les bords : les logos entrent et sortent sans coupure nette */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos__track {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 6vw, 6rem);
  width: max-content;
  animation: marquee 45s linear infinite;
}
.logos__track img {
  height: clamp(34px, 3.6vw, 52px);
  width: auto;
  flex: none;
  opacity: 0.9;
  transition: opacity 0.25s;
}
.logos:hover .logos__track { animation-play-state: paused; }
.logos__track img:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  /* Sans animation, les 22 images (11 logos doublés pour la boucle) se
     replient sur trois rangées et 605 px de haut. On garde une seule rangée,
     défilable à la main, et on masque le doublon devenu inutile. */
  .logos { overflow-x: auto; scrollbar-width: thin; }
  .logos__track { animation: none; width: max-content; }
  .logos__track img:nth-child(n + 12) { display: none; }
}

/* ---------- Cartes ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.5rem);
}
.offer { text-align: center; display: flex; flex-direction: column; align-items: center; }
.offer__icon { width: 84px; height: 84px; margin-bottom: 1.2rem; color: #fff; }
.offer__icon svg { width: 100%; height: 100%; }
.offer__kicker {
  font-family: var(--font-display);
  font-weight: 900; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 0.2em;
}
.offer h3 {
  color: var(--green);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  margin-bottom: 0.6em;
}
/* la couleur vient déjà de « .section :where(p) » — ne pas la redéfinir ici,
   sinon elle écrase celle du sur-titre */
.offer p { max-width: 46em; }
.offer .btn { margin-top: 1.5rem; }

/* carte bordée vert + avatar en débord */
.green-card {
  position: relative;
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: rgba(184, 82, 0, 0.04);
}
.green-card--avatar { margin-top: 52px; padding-top: 3.6rem; }
.green-card__avatar {
  position: absolute; top: 0; left: 50%;
  translate: -50% -50%;
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 3px solid var(--bg);
}
.green-card__kicker {
  font-family: var(--font-display);
  color: var(--green);
  font-weight: 800; font-size: 0.9rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.green-card h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); text-transform: none; letter-spacing: 0; }
.green-card .checklist li { font-weight: 400; font-size: 0.97rem; }
.green-card .btn { margin-top: 1.5rem; }
/* ::: appel dans un article. .prose a colore tous les liens en vert : les
   boutons reprennent leur propre couleur, sinon le texte disparaît sur le dégradé. */
.green-card.appel .btn-row { margin-top: 1.2rem; justify-content: center; }
.green-card.appel .btn { margin-top: 0; color: #fff; }
.green-card.appel .btn--ghost { color: var(--green); }

/* ---------- Comparatif ---------- */
.compare {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  align-items: start;      /* chaque colonne à sa hauteur : pas de vide en bas */
  padding-top: 40px;       /* la place de la couronne, prise sur la grille…   */
}
.compare__col {
  position: relative;
  background: #fff;
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column;
  box-shadow: 0 14px 40px -26px rgba(15, 34, 56, 0.3);
}
.compare__col h3 {
  background: var(--lavender);
  color: var(--paper-ink);
  font-size: 1.1rem; text-transform: none; letter-spacing: 0;
  margin: 0; padding: 1.05rem 1.4rem;
  border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0;
}
.compare__col ul { list-style: none; margin: 0; padding: 1.3rem 1.4rem; display: grid; gap: 0.8rem; align-content: start; }
.compare__col li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.97rem; color: var(--paper-dim); }
.compare__col li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 5px;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="3.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>') center / 11px no-repeat,
    var(--green);
}
/* la colonne gagnante se distingue par l'élévation, la couronne et les coches —
   pas par un aplat sombre, qui écrasait la composition */
.compare__col--win {
  border-color: var(--green);
  box-shadow: 0 26px 60px -28px rgba(15, 34, 56, 0.45);
}
.compare__col--win h3 { background: var(--green); }
.compare__col--win li { color: var(--paper-ink); font-weight: 500; }
.compare__col--win li::before {
  border-radius: 50%;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="3.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / 11px no-repeat,
    var(--green);
}
/* …de sorte que les trois colonnes restent alignées sur la même ligne haute */
.compare__crown {
  position: absolute; top: -34px; left: 50%; translate: -50% 0;
  width: 76px; color: var(--green); z-index: 2;
  filter: drop-shadow(0 6px 10px rgba(15, 34, 56, 0.2));
}

/* ---------- Étapes ---------- */
.steps { display: grid; }
.step {
  display: grid; gap: 1.3rem;
  grid-template-columns: auto 1fr;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.section--paper .step { border-bottom-color: var(--paper-border); }
.step:last-child { border-bottom: 0; }
.step__num {
  font-family: var(--font-display);
  font-weight: 900; font-size: 2.4rem; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--green);
  min-width: 2.2ch;
}
.step h3 { margin-bottom: 0.35em; }
.step p { margin: 0; color: var(--ink-dim); }
.section--paper .step p { color: var(--paper-dim); }

.section-after { margin-top: clamp(1.8rem, 3.5vw, 2.8rem); }
.lead--center { margin-inline: auto; }

/* ---------- Frise des étapes ---------- */
/* Un tableau à six lignes donnait les durées mais pas l'essentiel : lesquelles
   dépendent de nous et lesquelles dépendent d'une administration. La frise
   porte cette distinction dans sa couleur — vert : nous exécutons, le délai
   est tenu ; bleu : une administration instruit, sans engagement de date.
   Le trait est tracé segment par segment plutôt qu'en un seul rail : il doit
   s'arrêter au dernier pastillon, et les cartes n'ont pas toutes la même
   hauteur. */
.tl { list-style: none; margin: 0; padding: 0; }
.tl__step {
  position: relative;
  display: grid; grid-template-columns: 56px 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
  padding-bottom: 1.15rem;
}
.tl__step:last-child { padding-bottom: 0; }
.tl__step:not(:last-child)::before {
  content: ""; position: absolute; left: 27px; top: 58px; bottom: -2px; width: 2px;
  background: linear-gradient(180deg, rgba(184, 82, 0, 0.6), rgba(184, 82, 0, 0.14));
}
.tl__step--attente:not(:last-child)::before {
  background: linear-gradient(180deg, rgba(10, 95, 168, 0.65), rgba(10, 95, 168, 0.14));
}
.tl__node {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 1.1rem;
  background: var(--bg); border: 2px solid var(--green); color: var(--green);
}
.section--paper .tl__node { background: var(--paper); }
.tl__step--attente .tl__node { border-color: var(--teal); color: var(--teal); }
.tl__body {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1.15rem 1.35rem;
}
.section--paper .tl__body {
  background: #fff; border-color: var(--paper-border);
  box-shadow: 0 14px 40px -30px rgba(15, 34, 56, 0.4);
}
.tl__step--attente .tl__body {
  border-color: rgba(10, 95, 168, 0.45);
  background: linear-gradient(180deg, rgba(10, 95, 168, 0.11), rgba(10, 95, 168, 0.02));
}
.section--paper .tl__step--attente .tl__body {
  background: linear-gradient(180deg, rgba(10, 95, 168, 0.09), rgba(10, 95, 168, 0.015)), #fff;
  border-color: rgba(10, 95, 168, 0.4);
}
.tl__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; margin-bottom: 0.4rem; }
.tl__head h3 { margin: 0; font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.section--paper .tl__head h3 { color: var(--paper-ink); }
.tl__dur {
  font-family: var(--font-display); font-weight: 900;
  font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--green); border: 1px solid rgba(184, 82, 0, 0.45);
  border-radius: 999px; padding: 0.2em 0.75em; white-space: nowrap;
}
.tl__step--attente .tl__dur { color: var(--teal); border-color: rgba(10, 95, 168, 0.5); }
.tl__body p { margin: 0; font-size: 0.95rem; }
.tl__who {
  display: block; margin-top: 0.6rem;
  font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-faint);
}
.section--paper .tl__who { color: #8a8a92; }
.tl__legend {
  display: flex; flex-wrap: wrap; gap: 0.7rem 1.7rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.section--paper .tl__legend { color: #8a8a92; }
.tl__legend span { display: inline-flex; align-items: center; gap: 0.55rem; }
.tl__legend i { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--green); }
.tl__legend .is-attente { border-color: var(--teal); }
@media (max-width: 620px) {
  .tl__step { grid-template-columns: 40px 1fr; gap: 0.85rem; }
  .tl__step:not(:last-child)::before { left: 19px; top: 42px; }
  .tl__node { width: 40px; height: 40px; font-size: 0.9rem; }
  .tl__body { padding: 1rem 1.1rem; }
}

/* Encadré « une administration décide » : même code couleur que la frise. */
.card--teal {
  border: 1px solid rgba(10, 95, 168, 0.45);
  background: linear-gradient(180deg, rgba(10, 95, 168, 0.11), rgba(10, 95, 168, 0.02));
}

/* Formule la plus choisie : elle se distingue par un liseré et un fond teinté,
   pas par un aplat plein qui écraserait sa voisine. */
.price-card--reco {
  border: 1px solid rgba(184, 82, 0, 0.5);
  background: linear-gradient(180deg, rgba(184, 82, 0, 0.08), rgba(184, 82, 0, 0.01)), var(--card);
}

/* Sur fond clair, la frise et les compteurs passent aux variantes assombries. */
.section--paper .stat__num { color: var(--green-ink); }
.section--paper .tl__node { border-color: var(--green-ink); color: var(--green-ink); }
.section--paper .tl__dur { color: var(--green-ink); border-color: rgba(184, 82, 0, 0.4); }
.section--paper .tl__step--attente .tl__node { border-color: var(--teal-ink); color: var(--teal-ink); }
.section--paper .tl__step--attente .tl__dur { color: var(--teal-ink); border-color: rgba(10, 95, 168, 0.42); }
.section--paper .tl__legend i { border-color: var(--green-ink); }
.section--paper .tl__legend .is-attente { border-color: var(--teal-ink); }
.section--paper .tl__step:not(:last-child)::before {
  background: linear-gradient(180deg, rgba(184, 82, 0, 0.55), rgba(184, 82, 0, 0.12));
}
.section--paper .tl__step--attente:not(:last-child)::before {
  background: linear-gradient(180deg, rgba(10, 95, 168, 0.6), rgba(10, 95, 168, 0.12));
}
.section--paper .price-card li::before { color: var(--teal-ink); }

/* ---------- Équipe ---------- */
.team { display: grid; gap: clamp(1rem, 2.2vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.team-card { position: relative; border-radius: 8px; overflow: hidden; }
.team-card__photo {
  width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: center top;
  filter: grayscale(1);
  transition: filter 0.35s;
}
.team-card:hover .team-card__photo { filter: grayscale(0); }
.team-card__meta {
  position: absolute; inset: auto 0 0;
  padding: 2.6rem 1.2rem 1.2rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
  text-align: center;
}
.team-card__meta h3 { margin: 0; font-size: 1.1rem; letter-spacing: 0.04em; }
.team-card__role {
  margin: 0.15rem 0 0; font-size: 0.76rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-dim);
}
.team-card__links { position: absolute; top: 0.8rem; right: 0.8rem; display: flex; gap: 0.4rem; }
.team-card__links a {
  background: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 0.72rem; font-weight: 600; text-decoration: none;
  border-radius: 999px; padding: 0.35em 0.75em;
}
.team-card__links a:hover { background: var(--green); color: #FFFFFF; }

/* ---------- Compteurs ---------- */
.stats {
  display: grid; gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  text-align: center;
}
/* Les libellés des chiffres venaient toucher le bloc suivant. Limité aux
   sections de page : dans un article, .stats sort de ::: chiffres et le
   rythme vertical est déjà donné par .prose--article. */
.container > .stats + * { margin-top: clamp(2.4rem, 4.5vw, 3.6rem); }
.stat__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  color: var(--green);
  line-height: 1;
}
.stat__label { margin-top: 0.45rem; font-size: 0.93rem; }

/* ---------- FAQ ---------- */
.faq-grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: start;
}
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-grid__title h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: 0.5em; }
.faq-grid__title p { font-size: 1.12rem; }
.faq details { border-bottom: 1px solid var(--paper-border); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.02rem;
  color: var(--paper-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-size: 1.5rem; font-weight: 400; color: var(--paper-ink);
  transition: rotate 0.25s var(--ease-out);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq details > div { padding: 0 0 1.2rem; color: var(--paper-dim); }
.faq details > div a { color: var(--teal); }

/* ---------- Contact ---------- */
.contact-cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.contact-card { background: var(--card); border-radius: var(--radius-sm); padding: 1.5rem; }
.contact-card h3 { font-size: 0.76rem; letter-spacing: 0.2em; color: var(--green); margin-bottom: 0.6rem; }
.contact-card p, .contact-card a { margin: 0; font-size: 1rem; font-weight: 500; color: var(--ink); text-decoration: none; }
.contact-card a:hover { color: var(--green); }

/* ---------- Cartes OPCO ---------- */
.opco-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.opco-card {
  background: #fff;
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-sm);
  padding: 1.4rem;
  display: flex; flex-direction: column;
}
.opco-card h3 { font-size: 0.92rem; letter-spacing: 0.05em; margin-bottom: 0.45rem; color: var(--paper-ink); }
.opco-card p { font-size: 0.9rem; flex: 1; margin-bottom: 0.8rem; }
.opco-card a {
  font-size: 0.84rem; font-weight: 600; text-decoration: none;
  color: var(--teal-ink); align-self: flex-start; /* 5,3:1 sur la carte blanche, contre 3,4:1 pour le teal de marque */
  border-bottom: 1px solid currentColor;
}
.opco-card a:hover { color: var(--paper-ink); }

/* ---------- Prix ---------- */
.price-grid { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); align-items: stretch; }
.price-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.7rem;
  display: flex; flex-direction: column;
}
.price-card__num {
  font-family: var(--font-display); font-weight: 900;
  color: transparent; -webkit-text-stroke: 1.3px var(--green);
  font-size: 1.7rem; line-height: 1;
}
.price-card h3 { margin: 0.5rem 0 0.15rem; font-size: 1.1rem; }
.price-card__price {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.8rem; color: var(--green);
  margin-bottom: 0.9rem;
}
.price-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; flex: 1; }
.price-card li { display: flex; gap: 0.55rem; font-size: 0.92rem; color: var(--ink-dim); }
.price-card li::before { content: "→"; color: var(--green); flex: none; }
.price-card__note {
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.84rem; color: var(--ink-faint);
}

/* ---------- Indicateur de défilement ---------- */
.scroll-cue {
  display: block;
  width: 16px; height: 16px;
  margin: clamp(1.4rem, 3vh, 2.4rem) auto 0;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  rotate: 45deg;
  animation: cue-bob 1.9s ease-in-out infinite;
  transition: opacity 0.4s;
}
body.is-scrolled .scroll-cue { opacity: 0; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* ---------- Recherche d'entreprise ---------- */
.company { position: relative; max-width: 620px; }
.company__results {
  /* au-dessus de la barre de total mobile (z-index 40), sinon elle la recouvre */
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.35rem;
  display: none;
  max-height: 340px; overflow-y: auto;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
}
.company__results.on { display: block; }
.company__hit {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 8px;
  padding: 0.7rem 0.8rem;
  color: var(--ink); font-family: var(--font-body);
  display: grid; gap: 2px;
}
.company__hit:hover, .company__hit:focus-visible, .company__hit[aria-selected="true"] { background: var(--card); }
.company__hit b { font-size: 0.95rem; font-weight: 600; }
.company__hit span { font-size: 0.82rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.company__hit mark { background: none; color: var(--green); }
.company__msg { padding: 0.7rem 0.8rem; font-size: 0.88rem; color: var(--ink-faint); }
.company__toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.9rem; color: var(--green);
  text-decoration: underline; text-underline-offset: 3px;
  margin-top: 0.9rem;
}
.company__toggle:hover { color: var(--ink); }
.field-grid[hidden] { display: none; }
.field-grid { margin-top: 1.2rem; }
.field input[readonly] { color: var(--ink-dim); }

/* ---------- Simulateur de faisabilité NDA ----------
   Les choix sont des pastilles plutôt que des listes déroulantes : l'outil se
   parcourt à l'œil, sans ouvrir de menu, et le résultat se met à jour à chaque
   clic. Les champs société reprennent tels quels ceux de l'éditeur de devis. */
.sim { max-width: 820px; margin-inline: auto; }
.sim-q { border: 0; padding: 0; margin: 0 0 1.6rem; }
.sim-q legend {
  padding: 0; margin-bottom: 0.7rem;
  font-size: 0.97rem; color: var(--ink-dim);
}
.sim-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Le bouton radio reste dans le flux pour rester focusable au clavier ; seul
   son rendu disparaît au profit de la pastille. */
.sim-choices input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.sim-choices label {
  cursor: pointer; padding: 0.62rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  font-size: 0.93rem; line-height: 1.25;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.sim-choices label:hover { border-color: var(--green); }
.sim-choices input:checked + label {
  background: var(--green); border-color: var(--green);
  color: #FFFFFF; font-weight: 700;
}
.sim-choices input:focus-visible + label { outline: 2px solid var(--green); outline-offset: 3px; }
.sim .field { margin-bottom: 1.6rem; }
.sim-societe { margin-top: 0.4rem; }
.sim-societe[hidden] { display: none; }
.sim-societe .field-grid[hidden] { display: none; }

.sim-intro { max-width: 70ch; margin: 0 0 0.9rem; font-size: 0.97rem; }
.sim-cta { display: flex; justify-content: center; margin-top: 2.4rem; }

/* Modale de résultat. <dialog> apporte le piège de focus, la fermeture par
   Échap et le fond assombri ; il ne reste que l'habillage. */
.sim-modal {
  width: min(680px, calc(100vw - 2rem));
  max-height: min(86vh, 900px);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--bg); color: var(--ink);
  overflow: auto;
  /* Surtout ne pas poser de `position` ici : le navigateur place lui-même une
     dialogue modale en `fixed` et la centre. La redéclarer la renvoie dans le
     flux, donc tout en bas de la page, invisible derrière le fond assombri.
     Ce `fixed` natif sert aussi de référence au bouton de fermeture. */
}
.sim-modal::backdrop { background: rgba(0, 0, 0, 0.72); }
.sim-modal__close {
  position: absolute; top: 0.6rem; right: 0.8rem;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-faint); font-size: 1.7rem; line-height: 1;
  padding: 0.1rem 0.4rem; border-radius: 6px;
}
.sim-modal__close:hover { color: var(--ink); }
.sim-modal .green-card, .sim-modal .card { margin: 0; }
/* Le texte courant de la fenêtre : un cran au-dessus du reste de la page, c'est
   un résultat qu'on lit une fois et en entier. */
.sim-modal p { font-size: 1.02rem; line-height: 1.6; }
.sim-modal .sim-verdict__head h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }

/* Attente : le temps de lire le résultat qui s'écrit. */
.sim-loading { display: grid; justify-items: center; gap: 1rem; padding: 2.6rem 0 2.2rem; text-align: center; }
.sim-spinner {
  width: 54px; height: 54px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--teal) 120deg, var(--green) 300deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: sim-tourne 0.9s linear infinite;
}
@keyframes sim-tourne { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .sim-spinner { animation-duration: 3s; } }
.sim-loading p { margin: 0; color: var(--ink-dim); }

.sim-result { max-width: 820px; margin: 2.2rem auto 0; }
.sim-result__attente { color: var(--ink-faint); text-align: center; margin: 0; }
.sim-attente h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.sim-attente p { margin: 0; color: var(--ink-dim); font-size: 0.95rem; }
/* Récapitulatif du dossier, repris tel quel dans le message WhatsApp. */
.sim-recap { margin: 1.3rem 0 1.5rem; }
.sim-recap h4 {
  margin: 0 0 0.7rem; font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}
.sim-recap__list {
  margin: 0; display: grid; gap: 0.3rem 1rem;
  grid-template-columns: minmax(9rem, auto) 1fr;
}
.sim-recap__list dt { color: var(--ink-faint); font-size: 0.95rem; }
.sim-recap__list dd { margin: 0; font-size: 1rem; }
@media (max-width: 560px) {
  .sim-recap__list { grid-template-columns: 1fr; gap: 0 }
  .sim-recap__list dd { margin-bottom: 0.55rem; }
}
.sim-fine { margin: 0.9rem 0 0; font-size: 0.88rem; color: var(--ink-faint); text-align: center; }
.sim-verdict { display: grid; gap: 1rem; }
.sim-verdict__head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.sim-verdict__head h3 { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
.sim-points { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.sim-point {
  display: grid; gap: 0.2rem;
  border-left: 3px solid var(--green); padding-left: 0.9rem;
}
.sim-point--info { border-left-color: var(--teal); }
.sim-point b { font-size: 1.02rem; }
.sim-point span { font-size: 1rem; line-height: 1.55; color: var(--ink-dim); }
/* Le récapitulatif des étapes suit la liste des points : sans respiration, les
   deux blocs se lisent comme un seul. */
.sim-verdict .sim-points + p { margin-top: 1.4rem; }
.sim-etapes { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.sim-etapes li { font-size: 1rem; line-height: 1.5; }
.sim-etapes b { color: var(--green); }

/* ---------- Éditeur de devis ---------- */
.quote-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}
@media (max-width: 1000px) { .quote-grid { grid-template-columns: 1fr; } }

.quote-step { margin-bottom: 2.5rem; }
.quote-step__head {
  display: flex; align-items: center; gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.quote-step__n {
  flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: #FFFFFF;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 0.95rem;
}
.quote-step__head h2 { margin: 0; font-size: 1.15rem; }

.field-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.field { display: grid; gap: 0.35rem; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  min-height: 48px;
  transition: border-color 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: #8d8d92; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); outline: none; }
.field textarea { resize: vertical; line-height: 1.45; }
.field select {
  appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%237ed957" stroke-width="2"/></svg>');
  background-repeat: no-repeat; background-position: right 1rem center;
}
.field input[type="date"], .field select { color-scheme: dark; }
/* La liste ouverte suit color-scheme sous Chrome et Firefox ; Safari garde le
   menu natif du système. */
.field select option { background: var(--card); color: var(--ink); }

/* Page /rib-bloque-edof/ : titre de la notice de données (le formulaire a été retiré le 28/10/2026). */
.signal-rgpd-titre { font-size: 1.05rem; margin-bottom: 1rem; }
/* Le vert de marque tombe à 1,8:1 sur blanc : sur fond papier, le bouton
   secondaire passe à la variante assombrie. */
.section--paper .btn--ghost { color: var(--green-ink); border-color: var(--green-ink); }
.section--paper .btn--ghost:hover { background: rgba(184, 82, 0, 0.08); }

.quote-option {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 0.8rem;
}
.quote-option:hover { border-color: var(--ink-faint); }
.quote-option:has(input:checked) { border-color: var(--action); background: #EAF2FB; }
.quote-option input { width: 21px; height: 21px; margin: 3px 0 0; accent-color: var(--action); cursor: pointer; }
.quote-option h3 { margin: 0; font-size: 0.98rem; text-transform: none; letter-spacing: 0; }
.quote-option p { margin: 0.3rem 0 0; font-size: 0.87rem; color: var(--ink-faint); }
.quote-option__price { font-family: var(--font-display); font-weight: 900; color: var(--green); white-space: nowrap; }
@media (max-width: 560px) {
  /* le prix passe sous le titre : sinon il ampute la largeur du libellé */
  .quote-option { grid-template-columns: auto 1fr; }
  .quote-option__price { grid-column: 2; margin-top: 0.4rem; }
}

/* panneau récap (aperçu écran) */
.quote-panel {
  background: #fff; color: var(--paper-ink);
  border-radius: var(--radius-sm);
  padding: 1.6rem;
  position: sticky; top: 96px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}
.quote-panel__logo { height: 22px; width: auto; filter: invert(1); }
.quote-panel__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 0.9rem; margin-bottom: 0.9rem;
  border-bottom: 2px solid var(--paper-ink);
}
.quote-panel__head span {
  font-family: var(--font-display); font-weight: 900;
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.quote-panel table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.quote-panel td { padding: 0.5rem 0; border-bottom: 1px solid var(--paper-border); color: var(--paper-dim); vertical-align: top; }
.quote-panel td:last-child { text-align: right; white-space: nowrap; font-weight: 600; color: var(--paper-ink); }
.quote-panel .quote-total td {
  border-bottom: 0; padding-top: 0.8rem;
  font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; color: var(--paper-ink);
}
.quote-panel__sched {
  margin: 0.5rem 0 0; padding: 0.7rem 0.85rem;
  background: var(--paper-alt); border-radius: 8px;
  font-size: 0.82rem; color: var(--paper-dim);
}
.quote-panel__actions { display: grid; gap: 0.6rem; margin-top: 1.3rem; }
.quote-panel__actions .btn { font-size: 0.84rem; min-height: 50px; }
.quote-panel__actions .btn--ghost { color: var(--teal); border-color: var(--teal); }
.quote-panel__actions .btn--ghost:hover { background: rgba(10, 95, 168, 0.08); }
.quote-panel__fine { margin: 0.9rem 0 0; font-size: 0.75rem; color: #8a8a92; }
.quote-panel__empty { color: var(--paper-dim); font-size: 0.93rem; padding: 0.6rem 0; }

/* le détail est repliable — c'est ce qui permet la barre de total sur mobile */
.quote-sheet > summary { display: none; }
.quote-sheet__body { display: block; }

/* « screen and » est indispensable : une page A4 fait moins de 1000px de large,
   sans quoi ces règles s'appliqueraient aussi à l'impression du devis. */
@media screen and (max-width: 1000px) {
  /* Mobile : le récapitulatif quitte le flux et devient une barre de total
     collée en bas, dépliable d'un tap. Sinon le montant n'est jamais visible. */
  .quote-panel {
    position: fixed; z-index: 40;
    inset: auto 0 0;
    border-radius: 16px 16px 0 0;
    padding: 0.9rem 1.1rem 1.1rem;
    box-shadow: 0 -12px 40px -12px rgba(0, 0, 0, 0.6);
    max-height: 82svh; overflow-y: auto;
  }
  .quote-panel__head { display: none; }
  .quote-sheet > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    cursor: pointer; list-style: none;
    padding: 0.2rem 0 0.6rem;
  }
  .quote-sheet > summary::-webkit-details-marker { display: none; }
  .quote-sheet__total {
    font-family: var(--font-display); font-weight: 900; font-size: 1.15rem;
    color: var(--paper-ink);
  }
  .quote-sheet__total small {
    display: block; font-family: var(--font-body); font-weight: 500;
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--paper-dim);
  }
  .quote-sheet__more {
    font-size: 0.85rem; font-weight: 600; color: var(--teal);
    display: inline-flex; align-items: center; gap: 0.4em;
  }
  .quote-sheet__more::after {
    content: ""; width: 7px; height: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    rotate: -135deg; transition: rotate 0.25s var(--ease-out);
  }
  .quote-sheet[open] .quote-sheet__more::after { rotate: 45deg; }
  .quote-sheet[open] .quote-sheet__more span::after { content: " le détail"; }
  .quote-panel__actions { margin-top: 0.9rem; grid-auto-flow: column; gap: 0.5rem; }
  .quote-panel__actions .btn {
    font-size: 0.72rem; min-height: 46px; padding: 0.5em 0.7em; letter-spacing: 0.01em;
  }
  .quote-panel__fine { display: none; }
  /* de la place pour que la barre ne masque pas la fin du formulaire */
  body:has(.quote-panel) { padding-bottom: 190px; }
  /* pendant la recherche, la barre s'efface : deux surfaces flottantes qui se
     disputent le bas de l'écran, c'est une de trop */
  body.search-open .quote-panel { opacity: 0; pointer-events: none; }
}

/* ---------- Document devis (écran caché, visible à l'impression) ---------- */
.quote-doc { display: none; }

/* ---------- Prose (pages légales) ---------- */
.prose { max-width: 760px; }
.prose h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 0.8em; }
.prose h2 { font-size: 1.2rem; margin: 2.2em 0 0.6em; }
.prose p, .prose li { color: var(--ink-dim); }
.prose a { color: var(--green); }
.prose ul { padding-left: 1.2em; }

/* Articles de blog. Deux corrections nécessaires sur .prose :
   - les titres héritent de `text-transform: uppercase` (l. 89), illisible sur
     un titre d'article de dix mots ;
   - .prose h2 vaut 1.2rem alors que h3 hérite de --h3 (jusqu'à 1.4rem) : le
     sous-titre était plus gros que le titre. */
.prose--article h1,
.prose--article h2,
.prose--article h3 { text-transform: none; letter-spacing: 0; }
.prose--article h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 2.4em 0 0.6em; }
.prose--article h3 { font-size: clamp(1.08rem, 1.7vw, 1.25rem); margin: 1.8em 0 0.5em; }
.prose--article ol { padding-left: 1.4em; }
.prose--article li + li { margin-top: 0.4em; }
.prose--article .checklist { padding-left: 0; }
.prose--article .checklist li + li { margin-top: 0; }
.prose--article .checklist li > span { min-width: 0; overflow-wrap: anywhere; }
.prose--article .green-card,
.prose--article .card,
.prose--article .stats { margin: 2em 0; text-align: left; }
.prose--article nav.card ol { margin: 0; }

/* Bouton WhatsApp flottant (articles de blog).
   Fixe en bas à droite pendant toute la lecture : sur un article long, le
   lecteur convaincu au tiers n'a pas à descendre jusqu'au bloc de fin.
   z-index 45 : au-dessus du contenu, sous l'en-tête collant (50) et sous le
   menu déroulant mobile (49) — il ne doit jamais recouvrir la navigation. */
.wa-float {
  position: fixed; right: clamp(12px, 2.5vw, 26px); bottom: clamp(12px, 2.5vw, 26px);
  z-index: 45;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1.15rem;
  border-radius: 999px;
  background: var(--cta-grad);
  color: #0F2238; font-weight: 800; font-size: 0.92rem; line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) inset; }
.wa-float:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.wa-float svg { width: 22px; height: 22px; flex: none; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } .wa-float:hover { transform: none; } }
/* Sous 560px : pastille ronde, le libellé disparaît pour ne pas manger l'écran. */
@media (max-width: 560px) {
  .wa-float { padding: 0.85rem; gap: 0; }
  .wa-float span { display: none; }
}
/* Avis Google — section statique sur fond blanc. Étoiles dans le jaune Google. */
.avis-head { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.avis-head > div { flex: 1 1 18rem; }
.avis-head h2 { margin-bottom: 0.3rem; }
.avis-g { width: 44px; height: 44px; flex: none; }
.avis-note { margin: 0; color: var(--paper-dim); }
.avis-note strong { color: var(--paper-ink); font-size: 1.15rem; }
.avis-stars { color: #FBBC04; letter-spacing: 0.06em; font-size: 1.05rem; }
.avis-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.avis-card { background: #fff; border: 1px solid var(--paper-border); border-radius: var(--radius-sm); padding: 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; }
.avis-card header { display: flex; align-items: center; gap: 0.75rem; }
.avis-card header strong { display: block; color: var(--paper-ink); font-size: 0.95rem; }
.avis-card header .fine { display: block; font-size: 0.78rem; }
.avis-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--cta-grad); color: #0F2238; font-weight: 800; display: grid; place-items: center; flex: none; }
.avis-card p { margin: 0; font-size: 0.93rem; color: var(--paper-ink); }
.avis-source { margin-top: auto; font-size: 0.82rem; }
.avis-suite { margin-top: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1.5rem; }
/* Page prix : le panneau de devis a ses propres boutons en bas à droite ; le
   bouton flottant passe à gauche sur grand écran et disparaît sur mobile, où
   la barre de total et « Envoyer sur WhatsApp » remplissent déjà ce rôle. */
body:has(.quote-grid) .wa-float { right: auto; left: clamp(12px, 2.5vw, 26px); }
@media (max-width: 1000px) { body:has(.quote-grid) .wa-float { display: none; } }
/* L'ancre #devis ne doit pas se cacher sous l'en-tête collant. */
#devis { scroll-margin-top: calc(var(--header-h) + var(--promo-h) + 1.5rem); }

/* Hero en deux colonnes : la promesse et la vidéo sur le même écran, au lieu
   de deux ouvertures successives qui font 1 457 px avant le premier argument. */
.hero--split { min-height: 0; padding-block: clamp(2rem, 5vh, 3.4rem); }
.hero--split .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
  text-align: left;
  max-width: var(--container-wide);
}
.hero--split .hero__cta { align-items: flex-start; }
.hero--split .checklist { margin-top: 1.1rem; }
.hero--split .video { margin: 0; max-width: none; width: 100%; }
/* Le titre du hero est calibré pour la pleine largeur (jusqu'à 6,3vw) :
   dans une colonne deux fois plus étroite, il produisait six lignes et
   un hero de 1 339 px. On le ramène à une échelle de colonne. */
.hero--split h1 { text-wrap: balance; font-size: clamp(1.95rem, 3.35vw, 3.05rem); line-height: 1.06; }
.hero--split .hero__sub { font-size: clamp(1rem, 1.2vw, 1.12rem); }
.hero--split .checklist li { font-size: 0.95rem; }
@media (max-width: 900px) {
  .hero--split .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero--split .hero__cta { align-items: center; }
  .hero--split .video { order: -1; }
}

/* Bandeau de preuve : la note Google et les logos sur une seule ligne. */
.proof-strip {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2.4rem); flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.proof-strip .rating { white-space: nowrap; }
/* À l'impression, un bouton flottant n'a aucun sens. */
@media print { .wa-float { display: none; } }

/* Grille des listes d'articles (index du blog, catégories, page auteur,
   articles liés).
   .opco-grid utilise `auto-fit` : les pistes vides s'effondrent et une carte
   seule s'étire sur toute la largeur. C'est le bon comportement pour les
   11 cartes OPCO, mais avec un ou deux articles la carte devient une bande.
   `auto-fill` conserve les pistes : une carte garde sa largeur normale. */
.post-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  align-items: stretch;
}
.post-grid .opco-card h3 { font-size: 1rem; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.post-grid .opco-card time { display: block; font-size: 0.78rem; color: var(--paper-dim); margin-bottom: 0.5rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* Carte d'article avec vignette. L'image sort du padding de la carte : elle
   occupe toute la largeur, le texte garde sa marge. */
.post-card { padding: 0; overflow: hidden; }
.post-thumb { display: block; aspect-ratio: 16 / 9; background: var(--paper-alt); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease-out); }
.post-card:hover .post-thumb img { transform: scale(1.03); }
.post-card__body { padding: 1.15rem 1.3rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.post-card__body p { flex: 1; }
@media (prefers-reduced-motion: reduce) { .post-card:hover .post-thumb img { transform: none; } }

/* Tableaux d'article. Très repris par Google et par les réponses IA, mais le
   design system n'en avait aucun (seul le devis imprimable en style un).
   Le conteneur défile horizontalement : sur mobile un tableau de 4 colonnes
   déborderait sinon et ferait défiler la page entière de travers. */
.table-wrap { overflow-x: auto; margin: 2em 0; -webkit-overflow-scrolling: touch; }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.93rem; }
.table-wrap th,
.table-wrap td { padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.table-wrap thead th {
  font-family: var(--font-display); font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  border-bottom: 2px solid var(--green);
}
.table-wrap tbody td { color: var(--ink-dim); }
.section--paper .table-wrap th,
.section--paper .table-wrap td { border-bottom-color: var(--paper-border); }
.section--paper .table-wrap thead th { color: var(--paper-ink); }
.section--paper .table-wrap tbody td { color: var(--paper-dim); }
.section--paper .table-wrap tbody tr:hover td { background: rgba(10, 95, 168, 0.05); }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover td { background: rgba(184, 82, 0, 0.05); }

/* Une carte posée sur une section claire prend la surface claire de la section :
   blanc, filet, ombre portée — comme .compare__col et .opco-card. Deux raisons.
   D'abord la lisibilité : .section--paper impose un texte foncé à tout son
   contenu, donc un aplat sombre y devient du noir sur noir. Ensuite la
   composition : des rectangles noirs posés sur du blanc découpent la page. */
.section--paper :is(.card, .price-card) {
  background: #fff;
  border: 1px solid var(--paper-border);
  box-shadow: 0 14px 40px -26px rgba(15, 34, 56, 0.3);
  color: var(--paper-dim);
}
.section--paper :is(.card, .price-card) :where(p, li) { color: var(--paper-dim); }
.section--paper :is(.card, .price-card) :where(strong) { color: var(--paper-ink); }
.section--paper :is(.card, .price-card) :is(h2, h3, h4) { color: var(--paper-ink); }
.section--paper :is(.card, .price-card) .eyebrow { color: var(--paper-ink); }
.section--paper :is(.card, .price-card) .fine { color: #8a8a92; }
.section--paper .price-card__price { color: var(--paper-ink); }
.section--paper .price-card li::before { color: var(--teal); }
.section--paper .price-card__note { border-top-color: var(--paper-border); color: #8a8a92; }
/* …sauf celles qui portent une couleur de sens : l'encadré « une administration
   décide » et la formule la plus choisie gardent leur teinte sur fond clair.
   Elles doivent suivre la règle générique, sinon elle les repeint en blanc. */
.section--paper .card--teal {
  background: linear-gradient(180deg, rgba(10, 95, 168, 0.10), rgba(10, 95, 168, 0.02)), #fff;
  border-color: rgba(10, 95, 168, 0.35);
}
.section--paper .price-card--reco {
  background: linear-gradient(180deg, rgba(184, 82, 0, 0.10), rgba(184, 82, 0, 0.02)), #fff;
  border-color: rgba(184, 82, 0, 0.4);
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-deep); padding-block: clamp(3rem, 5vw, 4rem) 1.8rem; font-size: 0.94rem; }
.site-footer__grid { display: grid; gap: 2.4rem; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__brand img { height: 26px; width: auto; margin-bottom: 0.9rem; }
.site-footer__brand p { color: var(--ink-faint); max-width: 24em; }
.site-footer h3 {
  font-family: var(--font-body);
  font-size: 0.98rem; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--green);
  margin-bottom: 0.9rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.site-footer li { color: var(--ink-dim); }
.site-footer li a { color: var(--ink-dim); text-decoration: none; transition: color 0.2s; }
.site-footer li a:hover { color: var(--green); }
.site-footer__bottom {
  margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  color: var(--ink-faint); font-size: 0.84rem;
}
.site-footer__bottom a { color: inherit; text-decoration: none; }
.site-footer__bottom a:hover { color: var(--green); }

/* ---------- Rubriques du blog ----------
   Mêmes pilules que le bandeau défilant, mais cliquables et statiques. Sur
   l'index elles se centrent sous le hero ; sur une rubrique elles suivent le
   chapeau, alignées à gauche comme le reste de la colonne de lecture. */
.cat-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.6rem; }
.prose .cat-nav { justify-content: flex-start; margin-top: 1.2rem; }
.cat-nav__item, .prose .cat-nav__item {
  font-family: var(--font-display); font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--green);
  border: 1px solid rgba(184, 82, 0, 0.5); border-radius: 999px;
  min-height: 2.4rem; padding: 0.35em 1.05em;
  display: inline-flex; align-items: center; gap: 0.5em;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.cat-nav__item:hover, .cat-nav__item:focus-visible { background: rgba(184, 82, 0, 0.12); }
.cat-nav__item.is-current, .prose .cat-nav__item.is-current { background: var(--green); color: #FFFFFF; border-color: var(--green); }
.cat-nav__count { font-weight: 600; font-size: 0.9em; opacity: 0.8; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Split ---------- */
.split { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); grid-template-columns: 1fr 1fr; align-items: center; }
.split--top { align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.badge-row { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.3rem; }
.badge {
  font-size: 0.8rem; font-weight: 600;
  border: 1px solid var(--green); color: var(--green);
  border-radius: 999px; padding: 0.3em 0.85em;
}

/* ==========================================================================
   IMPRESSION — document de devis A4
   ========================================================================== */
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }

  body { background: #fff !important; color: #000 !important; font-size: 10.5pt; }
  body > *:not(main) { display: none !important; }
  main > *:not(.quote-print-host) { display: none !important; }
  .topbar, .site-header, .site-footer, .quote-panel__actions { display: none !important; }

  .quote-doc {
    display: block !important;
    color: #16161a;
    font-family: "Outfit", sans-serif;
    line-height: 1.45;
  }
  .quote-doc a { color: inherit; text-decoration: none; }

  .qd-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding-bottom: 6mm; margin-bottom: 6mm;
    border-bottom: 2px solid #16161a;
  }
  .qd-head img { height: 12mm; width: auto; }
  .qd-head__right { text-align: right; font-size: 9.5pt; }
  .qd-title {
    font-family: "Montserrat", sans-serif; font-weight: 900;
    font-size: 20pt; text-transform: uppercase; letter-spacing: 0.04em;
    margin: 0 0 1mm;
  }
  .qd-meta { color: #4A5D75; }
  .qd-meta strong { color: #16161a; }

  .qd-parties { display: flex; gap: 8mm; margin-bottom: 7mm; }
  .qd-party { flex: 1; }
  .qd-party h3 {
    font-family: "Montserrat", sans-serif; font-weight: 900;
    font-size: 8pt; letter-spacing: 0.16em; text-transform: uppercase;
    color: #4A5D75; margin: 0 0 2mm; padding-bottom: 1.5mm;
    border-bottom: 1px solid #d8d8de;
  }
  .qd-party p { margin: 0; font-size: 10pt; }
  .qd-party .qd-name { font-weight: 700; font-size: 11pt; }

  table.qd-table { width: 100%; border-collapse: collapse; margin-bottom: 5mm; }
  table.qd-table thead th {
    font-family: "Montserrat", sans-serif; font-weight: 900;
    font-size: 8pt; letter-spacing: 0.1em; text-transform: uppercase;
    text-align: left; color: #fff; background: #16161a;
    padding: 2.5mm 3mm;
  }
  table.qd-table thead th:last-child, table.qd-table td.qd-num { text-align: right; }
  table.qd-table td { padding: 3mm; border-bottom: 1px solid #e2e2e8; vertical-align: top; font-size: 10pt; }
  table.qd-table .qd-desc { font-weight: 600; }
  table.qd-table .qd-detail { display: block; font-size: 8.5pt; color: #6a6a75; margin-top: 0.8mm; }
  table.qd-table tr { break-inside: avoid; }

  .qd-totals { width: 62mm; margin-left: auto; margin-bottom: 6mm; }
  .qd-totals table { width: 100%; border-collapse: collapse; }
  .qd-totals td { padding: 1.6mm 0; font-size: 10pt; }
  .qd-totals td:last-child { text-align: right; font-weight: 600; }
  .qd-totals .qd-grand td {
    border-top: 2px solid #16161a; padding-top: 2.5mm;
    font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 13pt;
  }
  .qd-tva { font-size: 8.5pt; color: #6a6a75; text-align: right; margin: 0 0 6mm; }

  .qd-section { break-inside: avoid; margin-bottom: 6mm; }
  .qd-section h3 {
    font-family: "Montserrat", sans-serif; font-weight: 900;
    font-size: 9pt; letter-spacing: 0.12em; text-transform: uppercase;
    margin: 0 0 2.5mm;
  }
  table.qd-sched { width: 100%; border-collapse: collapse; }
  table.qd-sched td { padding: 2mm 3mm; border-bottom: 1px solid #e2e2e8; font-size: 9.5pt; }
  table.qd-sched td:last-child { text-align: right; font-weight: 600; }
  table.qd-sched tr:first-child td { border-top: 1px solid #e2e2e8; }

  .qd-notes { font-size: 8.5pt; color: #4A5D75; }
  .qd-notes li { margin-bottom: 1mm; }

  .qd-sign {
    display: flex; gap: 8mm; break-inside: avoid;
    margin-top: 8mm; padding-top: 5mm; border-top: 1px solid #d8d8de;
  }
  .qd-sign div { flex: 1; }
  .qd-sign h3 {
    font-family: "Montserrat", sans-serif; font-weight: 900;
    font-size: 8pt; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 1mm;
  }
  .qd-sign p { font-size: 8.5pt; color: #6a6a75; margin: 0; }
  .qd-sign .qd-box { height: 24mm; border: 1px dashed #b9b9c2; border-radius: 2mm; margin-top: 2mm; }

  .qd-foot {
    margin-top: 7mm; padding-top: 3mm;
    border-top: 1px solid #d8d8de;
    font-size: 8pt; color: #6a6a75;
    display: flex; justify-content: space-between; gap: 6mm;
  }
}

/* Extraits commentés : documents lisibles et points de contrôle métier. */
.document-proof { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.document-proof__sheet { margin: 0; padding: clamp(22px, 3vw, 40px); background: var(--paper-alt); border: 1px solid var(--paper-border); }
.document-proof__head { padding-bottom: 24px; border-bottom: 2px solid var(--teal-ink); }
.document-proof h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.4; }
.document-proof dl { margin: 0; }
.document-proof dl > div { padding: 18px 0; border-bottom: 1px solid var(--paper-border); }
.document-proof dt { font-weight: 700; color: var(--paper-ink); }
.document-proof dd { margin: 5px 0 0; color: var(--paper-dim); line-height: 1.6; }
.document-proof figcaption { margin-top: 20px; font-size: .85rem; line-height: 1.5; color: var(--paper-dim); }
.document-proof__notes ol { padding-left: 1.4rem; margin: 24px 0 0; }
.document-proof__notes li { padding-left: 10px; margin-bottom: 24px; }
.document-proof__notes li::marker { color: var(--teal-ink); font-weight: 700; }
.document-proof__notes p { margin: 8px 0 0; }
.offer-reading { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--paper-border); }
.offer-reading h3 { font-size: 1rem; }
.offer-reading ul { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 30px; padding: 0; margin: 16px 0 0; }
.offer-reading a { display: inline-block; padding: 6px 0; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .document-proof { grid-template-columns: 1fr; }
  .offer-reading ul { display: grid; gap: 8px; }
}

/* ---------- Direction C : jetons et règles propres au thème clair ----------
   Posés à la suite des règles héritées du générateur (lot 1, 27/10/2026) ; à
   fusionner dans les blocs d'origine lors du nettoyage CSS du lot 2. */
:root { --action: #0A5FA8; --action-ink: #FFFFFF; --action-deep: #084B85; --accent: #B85200; --accent-ink: #B85200; --accent-soft: #FFE3CC; --ok: #1E7A48; --err: #B3261E; }
.btn, .btn:hover, .btn:focus-visible { box-shadow: none; text-shadow: none; }
.btn { background: var(--action); color: var(--action-ink); border-color: transparent; }
.btn:hover { background: var(--action-deep); }
.btn--ghost, .section--paper .btn--ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--ghost:hover { background: var(--accent-soft); }
.promo { background: #FFE3CC; color: var(--paper-ink); }
.site-header { background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- Bandes sombres : bleu ardoise, décision du fondateur du 27/10/2026 ----------
   Dominante claire ; une bande de clôture par page, une bande médiane sur les pages
   longues, pied de page bleu ardoise. Les pages légales restent claires. */
:root { --deep: #234B76; --deep-dim: #D3DFEE; --deep-accent: #FFD4B0; --deep-card: rgba(255, 255, 255, 0.08); --deep-border: rgba(255, 255, 255, 0.22); }
.section--deep { background: var(--deep); color: #FFFFFF; }
.section--deep :where(p) { color: var(--deep-dim); }
.section--deep h2, .section--deep h3, .section--deep strong, .section--deep .lead, .section--deep .h2-soft, .section--deep .stat__num { color: #FFFFFF; }
.section--deep .fine, .section--deep .stat__label, .section--deep .card p, .section--deep .green-card p { color: var(--deep-dim); }
.section--deep .eyebrow { color: var(--deep-accent); }
.section--deep .eyebrow::before { background: var(--deep-accent); }
.section--deep .btn { background: #FFFFFF; color: var(--deep); }
.section--deep .btn:hover { background: #EAF2FB; }
.section--deep .btn--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.75); }
.section--deep .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.section--deep .text-link, .section--deep .hl-teal { color: #FFFFFF; }
.section--deep .card, .section--deep .green-card { background: var(--deep-card); border-color: var(--deep-border); color: #FFFFFF; }
.site-footer { background: var(--deep); color: #FFFFFF; border-top: 0; }
.site-footer h3, .site-footer li, .site-footer li a, .site-footer__bottom a { color: #FFFFFF; }
.site-footer li a:hover, .site-footer__bottom a:hover { color: var(--deep-accent); }
.site-footer__brand p, .site-footer__bottom { color: var(--deep-dim); }
.logos img { filter: brightness(0.25); opacity: 0.85; }
.card, .green-card { background: var(--card); border-color: var(--border); }

/* ---------- Pages d'offres : premier écran avec encart de conversion (28/10/2026) ----------
   Titre et preuves à gauche, encart à droite ; empilés sous 900 px. Réservé aux pages
   d'offres : l'accueil garde son titre pleine largeur. */
.offer-hero { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.offer-hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1.35fr 1fr; align-items: center; }
.offer-hero h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); margin-bottom: 0.4em; }
.offer-hero__lead { font-size: 1.15rem; color: var(--ink-dim); max-width: 38em; }
.proof-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.proof-list li { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 600; color: var(--ink); }
.proof-list li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--accent) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="3.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / 12px no-repeat; }
.convert-card { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: 0 24px 50px -30px rgba(15, 34, 56, 0.35); }
.convert-card__label { margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.convert-card__price { margin: 0.2rem 0 1rem; font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; color: var(--ink); line-height: 1.1; }
.convert-card__facts { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: 0.55rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.convert-card__facts li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.6rem; font-size: 0.98rem; color: var(--ink-dim); }
.convert-card__facts strong { color: var(--ink); }
.convert-card .btn { width: 100%; }
.convert-card__note { margin: 0.8rem 0 0; text-align: center; font-size: 0.92rem; color: var(--ink-faint); }
@media (max-width: 900px) { .offer-hero__grid { grid-template-columns: 1fr; } .convert-card__facts li { grid-template-columns: 1fr; gap: 0.1rem; } }
/* Guide, tableau, glossaire */
.guide { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.guide article h3 { font-size: 1.15rem; margin-bottom: 0.4em; }
.compare-table { width: 100%; border-collapse: collapse; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.compare-table th, .compare-table td { padding: 0.9rem 1rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 0.98rem; }
.compare-table thead th { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.04em; background: var(--bg-deep); color: var(--ink); }
.compare-table thead th:last-child { background: var(--action); color: #FFFFFF; }
.compare-table td:last-child { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) {
  .compare-table thead { display: none; }
  .compare-table tr { display: block; border-bottom: 1px solid var(--border); padding: 0.6rem 0; }
  .compare-table td { display: block; border: 0; padding: 0.3rem 1rem; }
  .compare-table td:first-child { font-weight: 800; color: var(--ink); }
  .compare-table td[data-col]::before { content: attr(data-col) " : "; font-weight: 700; color: var(--ink-faint); }
}
.glossary { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); margin: 0; }
.glossary dt { font-weight: 800; color: var(--ink); }
.glossary dd { margin: 0.2rem 0 0; color: var(--ink-dim); }
.official-links { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }

/* ---------- Parcours en zigzag (pages d'offres, 28/10/2026) ---------- */
.journey { position: relative; display: grid; gap: clamp(1.2rem, 3vw, 2rem); max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; }
.journey::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: repeating-linear-gradient(var(--action) 0 10px, transparent 10px 18px); }
.journey__step { position: relative; display: grid; grid-template-columns: 1fr 72px 1fr; align-items: center; }
.journey__num { grid-column: 2; justify-self: center; z-index: 1; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--action); color: #FFFFFF; font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; box-shadow: 0 0 0 8px var(--bg); }
.journey__card { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: 0 18px 40px -30px rgba(15, 34, 56, 0.45); }
.journey__card h3 { margin-bottom: 0.4em; font-size: 1.12rem; }
.journey__card p { margin: 0; color: var(--ink-dim); }
.journey__tag { display: inline-block; margin-bottom: 0.5rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.journey__step:nth-child(odd) .journey__card { grid-column: 1; grid-row: 1; }
.journey__step:nth-child(even) .journey__card { grid-column: 3; grid-row: 1; }
.journey__step:nth-child(odd) .journey__num, .journey__step:nth-child(even) .journey__num { grid-row: 1; }
@media (max-width: 760px) {
  .journey::before { left: 28px; }
  .journey__step { grid-template-columns: 56px 1fr; gap: 0.9rem; }
  .journey__num { grid-column: 1; width: 52px; height: 52px; font-size: 1.1rem; box-shadow: 0 0 0 6px var(--bg); }
  .journey__step:nth-child(odd) .journey__card, .journey__step:nth-child(even) .journey__card { grid-column: 2; }
}
/* ---------- Guide visuel en cinq points ---------- */
.points { display: grid; gap: 1.1rem; grid-template-columns: repeat(6, 1fr); }
.point { position: relative; grid-column: span 2; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.4rem 1.4rem; overflow: hidden; }
.point:nth-child(1), .point:nth-child(2) { grid-column: span 3; }
.point::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--action); }
.point:nth-child(even)::before { background: var(--accent); }
.point__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; }
.point__icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #EAF2FB; color: var(--action); }
.point:nth-child(even) .point__icon { background: var(--accent-soft); color: var(--accent); }
.point__icon svg { width: 26px; height: 26px; }
.point h3 { margin: 0; font-size: 1.08rem; }
.point p { margin: 0; color: var(--ink-dim); }
.point__big { display: block; margin: 0.2rem 0 0.4rem; font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--ink); line-height: 1; }
.point--deep { background: var(--deep); border-color: var(--deep); }
.point--deep h3, .point--deep .point__big { color: #FFFFFF; }
.point--deep p { color: var(--deep-dim); }
.point--deep .point__icon { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
@media (max-width: 900px) { .points { grid-template-columns: 1fr 1fr; } .point, .point:nth-child(1), .point:nth-child(2) { grid-column: span 1; } .point:nth-child(5) { grid-column: span 2; } }
@media (max-width: 560px) { .points { grid-template-columns: 1fr; } .point:nth-child(5) { grid-column: span 1; } }

/* ---------- Cas client (pages d'offres, 28/10/2026) ---------- */
.case { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); grid-template-columns: 0.9fr 1.1fr; align-items: center; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.4rem, 3.5vw, 2.6rem); }
.case__who h3 { font-size: 1.5rem; margin-bottom: 0.2em; }
.case__who p { margin: 0 0 0.8rem; color: var(--ink-dim); }
.case__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.case__facts li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.8rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
.case__facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.case__facts strong { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--accent); padding-top: 0.2rem; }
.case__facts span { color: var(--ink); }
@media (max-width: 800px) { .case { grid-template-columns: 1fr; } .case__facts li { grid-template-columns: 1fr; gap: 0.2rem; } }

/* ---------- Cas client en grand et pièces du dossier (28/10/2026) ---------- */
.case-feature { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(15, 34, 56, 0.45); }
.case-feature__head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--deep); color: #FFFFFF; }
.case-feature__head h3 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); color: #FFFFFF; }
.case-feature__head p { margin: 0.3rem 0 0; color: var(--deep-dim); }
.case-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.case-tags li { padding: 0.25rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 0.85rem; font-weight: 700; }
.case-feature__body { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.4rem, 3.5vw, 3rem); padding: clamp(1.4rem, 3.5vw, 2.6rem); }
.case-feature__story h4 { margin: 0 0 0.35rem; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--accent); }
.case-feature__story p { margin: 0 0 1.3rem; color: var(--ink-dim); }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 1.2rem; }
.case-stat { background: var(--bg); border-radius: var(--radius-sm); padding: 1rem 0.8rem; text-align: center; }
.case-stat strong { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.9rem; color: var(--action); line-height: 1.05; }
.case-stat span { font-size: 0.86rem; color: var(--ink-dim); }
.case-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.case-timeline li { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.6rem; align-items: center; }
.case-timeline b { font-family: var(--font-display); font-weight: 900; font-size: 0.85rem; color: #FFFFFF; background: var(--action); border-radius: 999px; padding: 0.2rem 0.5rem; text-align: center; }
.case-timeline li:nth-child(even) b { background: var(--accent); }
.case-timeline span { color: var(--ink); font-weight: 600; }
.case-feature__foot { padding: 0 clamp(1.4rem, 3.5vw, 2.6rem) clamp(1.4rem, 3.5vw, 2.2rem); }
@media (max-width: 860px) { .case-feature__body { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .case-stats { grid-template-columns: 1fr; } }
.docs-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; }
.docs-col { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.docs-col--us { border-top: 5px solid var(--action); }
.docs-col--you { border-top: 5px solid var(--accent); }
.docs-col h3 { font-size: 1.1rem; margin-bottom: 0.2em; }
.docs-col > p { margin: 0 0 1rem; color: var(--ink-faint); font-size: 0.95rem; }
.docs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.docs-col li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink); }
.docs-col li::before { content: ""; flex: none; width: 18px; height: 22px; margin-top: 1px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230A5FA8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>') center / 18px no-repeat; }
.docs-col--you li::before { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23B85200" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>'); }
.docs-col li small { display: block; color: var(--ink-faint); font-size: 0.88rem; }
@media (max-width: 800px) { .docs-split { grid-template-columns: 1fr; } }
.case-tags--light li { background: var(--accent-soft); color: var(--accent); }
.convert-card .case-stats { margin-bottom: 1rem; }
.points--3 { grid-template-columns: repeat(3, 1fr); }
.points--3 .point, .points--3 .point:nth-child(n) { grid-column: auto; }
@media (max-width: 900px) { .points--3 { grid-template-columns: 1fr; } }
.case-quote { margin: 0 0 1.3rem; padding: 1rem 1.2rem; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1.08rem; color: var(--ink); }
.case-quote cite { display: block; margin-top: 0.4rem; font-style: normal; font-size: 0.9rem; color: var(--ink-faint); }
.case-proof { margin: 0; }
.case-proof img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.case-proof figcaption { margin-top: 0.5rem; font-size: 0.88rem; color: var(--ink-faint); }
.cases-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.case-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--border); border-top: 5px solid var(--action); border-radius: var(--radius); padding: 1.5rem; }
.case-card:nth-child(even) { border-top-color: var(--accent); }
.case-card h2 { font-size: 1.3rem; margin-bottom: 0.2em; }
.case-card p { color: var(--ink-dim); }
.case-card .case-stat { margin: 0.6rem 0 1rem; text-align: left; }
.case-card .btn { margin-top: auto; align-self: flex-start; }
.case-stat strong { font-size: clamp(1.25rem, 2.2vw, 1.7rem); white-space: nowrap; }
.case-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Études de cas détaillées (28/10/2026, structure inspirée de ceos.fr) ---------- */
.study-hero { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.study-hero h1 { font-size: clamp(1.9rem, 4vw, 3.2rem); max-width: 22ch; }
.study-hero .offer-hero__lead { margin-bottom: 1.6rem; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.6rem; }
.kpi { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.kpi strong { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.05; color: var(--action); }
.kpi:nth-child(2) strong { color: var(--accent); }
.kpi span { display: block; margin-top: 0.35rem; color: var(--ink-dim); font-size: 0.95rem; }
@media (max-width: 640px) { .kpis { grid-template-columns: 1fr; } }
.study { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.study__main > section + section { margin-top: clamp(2.5rem, 5vw, 4rem); }
.study__num { display: inline-block; font-family: var(--font-display); font-weight: 900; color: var(--accent); font-size: 1rem; letter-spacing: 0.08em; margin-bottom: 0.3rem; }
.study__main h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.study__main h3 { font-size: 1.15rem; margin: 1.6rem 0 0.5rem; }
.study__main p, .study__main li { color: var(--ink-dim); font-size: 1.05rem; }
.study__main ul.bullets { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.study__main ul.bullets li::marker { color: var(--accent); }
.objective { margin-top: 1.4rem; padding: 1.1rem 1.3rem; background: #EAF2FB; border-left: 4px solid var(--action); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink); }
.objective strong { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--action); margin-bottom: 0.2rem; }
.pillar { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 1.8rem); margin-top: 1.2rem; }
.pillar__head { display: flex; gap: 0.9rem; align-items: center; margin-bottom: 0.6rem; }
.pillar__n { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--action); color: #FFFFFF; font-family: var(--font-display); font-weight: 900; }
.pillar:nth-of-type(even) .pillar__n { background: var(--accent); }
.pillar h3 { margin: 0; }
.pillar__result { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px dashed var(--border); color: var(--ink) !important; font-weight: 600; }
.pillar__result::before { content: "Résultat : "; color: var(--accent); font-weight: 800; }
.results { display: grid; gap: 0.7rem; list-style: none; margin: 0; padding: 0; }
.results li { display: flex; gap: 0.8rem; align-items: baseline; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; color: var(--ink) !important; }
.results b { flex: none; min-width: 6.5rem; font-family: var(--font-display); font-weight: 900; color: var(--action); }
.study__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1rem; }
.brief { background: var(--deep); color: #FFFFFF; border-radius: var(--radius); padding: 1.5rem; }
.brief h2 { color: #FFFFFF; font-size: 1.1rem; margin-bottom: 0.8rem; }
.brief dl { margin: 0 0 1rem; display: grid; gap: 0.6rem; }
.brief dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--deep-accent); font-weight: 800; }
.brief dd { margin: 0.1rem 0 0; color: #FFFFFF; font-weight: 600; }
.brief .btn { width: 100%; background: #FFFFFF; color: var(--deep); }
.contact-card { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem; }
.contact-card p { margin: 0; color: var(--ink-dim); font-size: 0.95rem; }
.contact-card strong { display: block; color: var(--ink); font-size: 1.05rem; }
@media (max-width: 980px) { .study { grid-template-columns: 1fr; } .study__aside { position: static; } }
.diag-list { list-style: none; margin: 1.2rem auto 1.6rem; padding: 0; display: grid; gap: 0.5rem; max-width: 34rem; text-align: left; }
.diag-list li { display: flex; gap: 0.6rem; color: var(--deep-dim); }
.diag-list li::before { content: "✓"; color: var(--deep-accent); font-weight: 900; }

/* ---------- Études de cas, style récit (v2, 28/10/2026) : ce qui a été fait, au passé ---------- */
.story-hero { background: var(--deep); color: #FFFFFF; padding-block: clamp(2.8rem, 6vw, 5rem); }
.story-hero .fine, .story-hero .fine a { color: var(--deep-dim); }
.story-hero .eyebrow { color: var(--deep-accent); }
.story-hero h1 { color: #FFFFFF; font-size: clamp(1.9rem, 4vw, 3.1rem); max-width: 24ch; }
.story-hero h1 .hl { color: var(--deep-accent); }
.story-hero__lead { font-size: 1.18rem; color: var(--deep-dim); max-width: 46em; margin-bottom: 1.8rem; }
.story-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.8rem; }
.story-kpis div { border-top: 3px solid var(--deep-accent); padding-top: 0.8rem; }
.story-kpis strong { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.05; color: #FFFFFF; }
.story-kpis span { color: var(--deep-dim); }
.story-hero .btn { background: #FFFFFF; color: var(--deep); }
@media (max-width: 640px) { .story-kpis { grid-template-columns: 1fr; } }
.story-facts { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.story-facts div { font-size: 0.95rem; color: var(--ink-dim); }
.story-facts b { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); }
.story { max-width: 820px; margin: 0 auto; }
.story h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.story > p, .story__lede { font-size: 1.12rem; color: var(--ink-dim); }
.story__lede::first-letter { float: left; font-family: var(--font-display); font-weight: 900; font-size: 3.6rem; line-height: 0.9; padding: 0.3rem 0.5rem 0 0; color: var(--action); }
.story-start { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start; }
.story-start__box { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.story-start__box h3 { font-size: 1rem; margin-bottom: 0.6rem; }
.story-start__box ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; color: var(--ink-dim); }
@media (max-width: 820px) { .story-start { grid-template-columns: 1fr; } }
.log { list-style: none; margin: 1.6rem 0 0; padding: 0; border-left: 3px solid var(--border); }
.log > li { position: relative; padding: 0 0 2rem 1.8rem; }
.log > li::before { content: ""; position: absolute; left: -9px; top: 0.35rem; width: 15px; height: 15px; border-radius: 50%; background: var(--action); box-shadow: 0 0 0 4px var(--bg); }
.log > li:last-child::before { background: var(--accent); }
.log__when { display: inline-block; font-family: var(--font-display); font-weight: 900; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.log h3 { margin: 0.2rem 0 0.4rem; font-size: 1.2rem; }
.log p { margin: 0 0 0.6rem; color: var(--ink-dim); font-size: 1.05rem; }
.log__done { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.log__done li { padding: 0.2rem 0.7rem 0.2rem 1.6rem; border-radius: 999px; background: #EAF2FB; color: var(--action); font-size: 0.85rem; font-weight: 700; position: relative; }
.log__done li::before { content: "✓"; position: absolute; left: 0.6rem; top: 0.15rem; background: none; box-shadow: none; width: auto; height: auto; color: var(--action); }
.before-after { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 1.2rem; }
.before-after th { text-align: left; font-family: var(--font-display); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; padding: 0.8rem 1rem; }
.before-after th:first-child { background: var(--bg-deep); color: var(--ink-dim); border-radius: var(--radius-sm) 0 0 0; }
.before-after th:last-child { background: var(--action); color: #FFFFFF; border-radius: 0 var(--radius-sm) 0 0; }
.before-after td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); background: #FFFFFF; vertical-align: top; }
.before-after td:first-child { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: rgba(86, 106, 130, 0.4); }
.before-after td:last-child { color: var(--ink); font-weight: 700; }
@media (max-width: 600px) { .before-after thead { display: none; } .before-after tr { display: block; margin-bottom: 0.8rem; } .before-after td { display: block; border-radius: 0; } .before-after td:first-child::before { content: "Avant : "; text-decoration: none; display: inline; } .before-after td:last-child::before { content: "Après : "; color: var(--action); } }
.pullquote { margin: 2rem 0; padding: 1.6rem 1.8rem; background: var(--deep); color: #FFFFFF; border-radius: var(--radius); font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.3; }
.pullquote cite { display: block; margin-top: 0.8rem; font-family: var(--font-body); font-weight: 400; font-style: normal; font-size: 0.95rem; color: var(--deep-dim); }
.story-who { display: flex; gap: 1rem; align-items: center; margin-top: 2rem; padding: 1.1rem 1.3rem; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius); }
.story-who__mark { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--action); color: #FFFFFF; font-family: var(--font-display); font-weight: 900; font-size: 1.2rem; }
.story-who p { margin: 0; color: var(--ink-dim); }