/* ============================================
   COLLECTIF WEB — GABARIT EXPERTISES
   Extrait tel quel de maquettes/expertises.html, maquette validée et gelée.
   L'habillage commun (en-tête, menu, pied) vit dans commun.css.
   ============================================ */

/* ====== Gabarit Expertises — styles de page (tokens DS uniquement) ======
   Fondations reprises du gabarit agences (header, menu mobile, bascule,
   révélations). Les patterns partagés remonteront au DS à la réutilisation. */

/* Défilement doux vers les ancres du sommaire — jamais sous mouvement réduit */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
main section[id] { scroll-margin-top: 24px; }

/* Sections de page */
.band { margin-bottom: clamp(88px, 11vw, 136px); }
.band__head { margin-bottom: var(--space-6); }
.band__head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  padding-top: 22px;
  position: relative;
}
.band__head h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--border-w);
  background: var(--border);
  transform-origin: left;
  transition: transform .8s var(--ease-out);
}
html.js .band__head h2::before { transform: scaleX(0); }
html.js .band__head.in h2::before { transform: scaleX(1); }
.band__head h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--accent); }
.band__head p { font-size: var(--fs-body-l); color: var(--fg-soft); max-width: 76ch; margin: 0; }
.band__head p + p { margin-top: var(--space-3); }

/* ====== Sommaire — .expertise-list du DS en ancres cliquables ====== */
.expertise-list a.expertise { text-decoration: none; color: var(--fg); }
.expertise__arrow { transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease-out); }
a.expertise:hover .expertise__arrow,
a.expertise:focus-visible .expertise__arrow {
  background: var(--vert);
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(2px);
}
html.js .expertise-list .expertise { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out) var(--d, 0s), transform .5s var(--ease-out) var(--d, 0s); }
html.js .expertise-list.in .expertise { opacity: 1; transform: none; }
.expertise-list .expertise:nth-child(2) { --d: .06s; }
.expertise-list .expertise:nth-child(3) { --d: .12s; }
.expertise-list .expertise:nth-child(4) { --d: .18s; }
.expertise-list .expertise:nth-child(5) { --d: .24s; }
.expertise-list .expertise:nth-child(6) { --d: .30s; }
.expertise-list .expertise:nth-child(7) { --d: .36s; }

/* ====== Deux colonnes texte + photo ====== */
.duo-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-7); align-items: start; }
.duo-col .band__head { margin-bottom: var(--space-5); }

/* Vraie photo — teinte de marque (D-061) : désaturée + voile vert « color » 25 % */
.exp-photo { position: relative; overflow: hidden; border: var(--border-w) solid var(--border); }
.exp-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(.78) contrast(1.02);
}
.exp-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vert);
  mix-blend-mode: color;
  opacity: .25;
  pointer-events: none;
}

/* ====== Listes à filets (jamais une grille de cartes clonées) ====== */
.filets { list-style: none; margin: 0; padding: 0; }
.filets li { border-top: 1.5px solid var(--rule); padding: var(--space-4) 0; }
.filets li:last-child { border-bottom: 1.5px solid var(--rule); }
.dark-mode .filets li { border-color: var(--rule-dark); }
.filets h3 { margin: 0 0 6px; font-size: 19px; }
.filets p { margin: 0; font-size: var(--fs-body); color: var(--fg-soft); max-width: 58ch; }
html.js .filets li { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out) var(--d, 0s), transform .6s var(--ease-out) var(--d, 0s); }
html.js .filets.in li { opacity: 1; transform: none; }
.filets li:nth-child(2) { --d: .14s; }
.filets li:nth-child(3) { --d: .28s; }

/* Variante en colonnes (croissance, IA) */
.filets--cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-6); }
.filets--cols li:last-child { border-bottom: 0; }
.filets--cols li { border-bottom: 0; }

/* ====== Bande facturation (recasée de l'accueil, D-061.5) ====== */
.band--facture {
  background: var(--ink);
  color: var(--paper);
  border: var(--border-w) solid var(--border);
  padding: clamp(40px, 5.5vw, 72px) clamp(24px, 4vw, 56px);
  text-align: center;
}
.band--facture .ligne {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -.015em;
  max-width: 26ch;
  margin: 0 auto;
}
.band--facture .ligne em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--vert-bright);
}
.band--facture .strike { color: rgba(237, 241, 239, .62); }
.band--facture .apres {
  margin: var(--space-4) auto 0;
  font-size: var(--fs-small);
  color: rgba(237, 241, 239, .75);
  max-width: 72ch;
}

/* ====== Forfaits STATIC / DYNAMIC — deux dalles nommées ====== */
.forfaits { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.forfait {
  border: var(--border-w) solid var(--border);
  color: var(--paper);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
  /* La rangée 1fr pousse le prix au bas des deux dalles : montants alignés */
  grid-template-rows: auto auto 1fr auto;
}
.forfait--static { background: var(--ink); }
.forfait--dynamic { background: var(--vert-deep); }
.forfait__nom {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
}
.forfait__pour {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.forfait--static .forfait__pour { color: var(--vert-bright); }
.forfait--dynamic .forfait__pour { color: var(--vert-pale); }
.forfait ul { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.forfait ul li {
  border-top: 1px solid rgba(237, 241, 239, .22);
  padding: 10px 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: rgba(246, 248, 247, .9);
  max-width: 46ch;
}
.forfait__prix {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 44px);
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0;
}
.forfait__prix span {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .02em;
  color: rgba(246, 248, 247, .75);
}

/* Le socle commun aux deux forfaits (offre de service type) */
.socle {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-6);
}
.socle li {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 52ch;
}
.socle li b { color: var(--fg); display: block; }
.dark-mode .socle li { border-color: var(--rule-dark); }
.forfaits-suite { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }

/* Une phrase, une ligne : on lève le plafond 65ch du DS pour cette note */
.forfaits-suite p { margin: 0; font-size: var(--fs-small); color: var(--muted); max-width: none; }

/* ====== Croissance — la dalle encre et la courbe qui monte (retour #24).
   La section était la plus plate de la page : un titre, trois lignes, et rien à
   regarder là où ses voisines ont toutes leur motif. Elle prend l'encre plutôt
   que le vert profond, sinon deux dalles vertes se suivraient. ====== */
.band--croissance {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border: var(--border-w) solid var(--border);
  padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 56px);
}
.band--croissance .band__head h2 { color: var(--paper); }
.band--croissance .band__head h2::before { background: rgba(237, 241, 239, .35); }
.band--croissance .band__head h2 em { color: var(--vert-bright); }
.band--croissance .band__head p { color: rgba(237, 241, 239, .85); }
.band--croissance .filets li { border-color: rgba(237, 241, 239, .25); }
.band--croissance .filets h3 { color: var(--paper); }
.band--croissance .filets p { color: rgba(237, 241, 239, .85); }

/* La courbe. Elle se découvre de gauche à droite à l'arrivée dans le champ de
   vision, d'un seul balayage : trait, aire, attaches et points sortent ensemble
   au passage du front. Le trait garde son épaisseur malgré l'étirement
   horizontal (non-scaling-stroke), et les points sont des bouts de trait à
   embout rond, donc ronds à toute largeur.

   Le balayage plutôt qu'un tracé par stroke-dasharray : les deux ne s'accordent
   pas ici. Sous étirement anisotrope, le pointillé se calcule dans l'espace du
   rendu et la longueur normalisée dans celui du dessin, et la courbe s'arrêtait
   à 95 % de sa largeur. */
.croissance-courbe {
  display: block;
  width: 100%;
  height: clamp(150px, 19vw, 230px);
  margin-top: var(--space-6);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s var(--ease-out) .1s;
}
html:not(.js) .croissance-courbe,
.croissance-courbe.in { clip-path: inset(0 0 0 0); }
.croissance-courbe path { fill: none; vector-effect: non-scaling-stroke; }
.croissance-courbe .socle,
.croissance-courbe .attaches path {
  stroke: rgba(237, 241, 239, .3);
  stroke-width: 1.5;
}
.croissance-courbe .trace {
  stroke: var(--vert-bright);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.croissance-courbe .aire { fill: var(--vert-bright); fill-opacity: .12; stroke: none; }
.croissance-courbe .reperes path {
  stroke: var(--vert-bright);
  stroke-linecap: round;
  stroke-width: 9;
}

/* ====== IA — la dalle vitrine (retour du 25 juillet : service à mettre
   de l'avant). En filigrane, un scénario d'automatisation : des bulles
   d'applications reliées qui se passent le signal; découpe de lisibilité
   comme le portail agences — un seul langage décoratif. ====== */
.band--ia {
  position: relative;
  overflow: hidden;
  background: var(--vert-deep);
  color: var(--paper);
  border: var(--border-w) solid var(--border);
  padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 56px);
}
.band--ia .ia-fond { position: absolute; inset: 0; pointer-events: none; }
.band--ia .ia-fond canvas { width: 100%; height: 100%; display: block; }
.band--ia .inner { position: relative; z-index: 1; }
.band--ia .band__head h2 { color: var(--paper); }
.band--ia .band__head h2::before { background: rgba(246, 248, 247, .35); }
.band--ia .band__head h2 em { color: var(--vert-pale); }
.band--ia .band__head p { color: rgba(246, 248, 247, .9); }
.band--ia .filets li { border-color: rgba(246, 248, 247, .25); }
.band--ia .filets h3 { color: var(--paper); }
.band--ia .filets p { color: rgba(246, 248, 247, .9); }

/* Porte d'entrée IA — l'audit de 30 minutes, en pleine lumière sur la dalle */
.audit-porte {
  border: var(--border-w) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-6);
}
.audit-porte div { max-width: 62ch; }
.audit-porte strong { display: block; font-size: 20px; margin-bottom: 6px; }
.audit-porte p { margin: 0; font-size: var(--fs-body); color: rgba(23, 33, 29, .78); }

/* ====== Loi 25 — la dalle encre du tunnel ====== */
.band--loi {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border: var(--border-w) solid var(--border);
  padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 56px);
}
.band--loi > :not(.loi-bouclier) { position: relative; z-index: 1; }

/* Bouclier en filigrane (retour du 25 juillet) — protection des renseignements
   personnels. Contour qui se trace à l'arrivée de la section. */
.loi-bouclier {
  position: absolute;
  right: clamp(24px, 6vw, 110px);
  top: 34px;
  width: clamp(190px, 22vw, 320px);
  pointer-events: none;
}
.loi-bouclier path,
.loi-bouclier rect,
.loi-bouclier circle {
  fill: none;
  stroke: var(--vert-bright);
  stroke-width: 1.6;
  opacity: .3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-out) .2s;
}
html:not(.js) .loi-bouclier path,
html:not(.js) .loi-bouclier rect,
html:not(.js) .loi-bouclier circle,
.band--loi.in .loi-bouclier path,
.band--loi.in .loi-bouclier rect,
.band--loi.in .loi-bouclier circle { stroke-dashoffset: 0; }
@media (max-width: 1100px) { .loi-bouclier { display: none; } }
.band--loi .band__head h2 { color: var(--paper); }
.band--loi .band__head h2::before { background: rgba(237, 241, 239, .35); }
.band--loi .band__head h2 em { color: var(--vert-bright); }
.band--loi .band__head p { color: rgba(237, 241, 239, .85); }
.loi-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin: var(--space-6) 0; position: relative; }
.loi-steps::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vert-bright);
  opacity: .45;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-out) .1s;
}
html:not(.js) .loi-steps::before { transform: scaleX(1); }
.loi-steps.in::before { transform: scaleX(1); }
@media (max-width: 1000px) { .loi-steps::before { display: none; } }
.loi-steps .step .num {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--vert-bright);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--vert-bright);
  background: var(--ink);
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  position: relative;
}
.loi-steps .step h3 { margin: 0 0 4px; font-size: 17px; color: var(--paper); }
.loi-steps .step p { margin: 0; font-size: 16px; color: rgba(237, 241, 239, .72); max-width: 34ch; }
html.js .loi-steps .step { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out) var(--d, 0s), transform var(--dur-slow) var(--ease-out) var(--d, 0s); }
html.js .loi-steps.in .step { opacity: 1; transform: none; }
.loi-steps .step:nth-child(2) { --d: .09s; }
.loi-steps .step:nth-child(3) { --d: .18s; }
.loi-steps .step:nth-child(4) { --d: .27s; }
.band--loi .preuves { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); margin-bottom: var(--space-6); }
.band--loi .preuves p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: rgba(237, 241, 239, .8); max-width: 52ch; }
.band--loi .preuves b { color: var(--paper); }
/* La note court sur toute la largeur de la dalle : elle ferme les quatre
   preuves, elle ne fait pas une cinquième colonne de lecture (retour #26). */
.band--loi .preuves .note { grid-column: 1 / -1; max-width: none; color: rgba(237, 241, 239, .7); }
.band--loi .btn--paper { color: var(--paper); border-color: var(--paper); }

/* ====== Accompagnement — la méthode en deux colonnes (retour du 25 juillet :
   mieux qu'une liste empilée). À gauche, les avantages numérotés; à droite,
   la plateforme de suivi évoquée au trait — un schéma aux barres grises,
   zéro faux contenu, zéro faux chiffre. ====== */
.methode { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.methode .filets { counter-reset: avantage; }
.methode .filets li { display: grid; grid-template-columns: 42px 1fr; gap: var(--space-3); }
.methode .filets li::before {
  counter-increment: avantage;
  content: counter(avantage, decimal-leading-zero);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
  padding-top: 3px;
}
.methode .filets li:nth-child(4) { --d: .42s; }
.fenetre { border: var(--border-w) solid var(--border); background: var(--surface); box-shadow: var(--shadow-hard); }
.fenetre__barre {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 16px;
  border-bottom: var(--border-w-thin) solid var(--border-soft);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.fenetre__barre .pastilles { display: flex; gap: 5px; }
.fenetre__barre .pastilles i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); }
.fenetre__corps { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-5); padding: var(--space-5); }
.fenetre h4 {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.fenetre .tache { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--border-soft); }
.fenetre .tache i { width: 16px; height: 16px; border: 1.5px solid var(--accent); flex-shrink: 0; }
.fenetre .tache i.fait { background: var(--accent); }
.fenetre .tache span { height: 8px; background: var(--ink-faint); }
.fenetre .jauge { height: 12px; border: 1.5px solid var(--border-soft); }
.fenetre .jauge i { display: block; height: 100%; background: var(--vert); }
.fenetre .jalons { display: flex; align-items: center; position: relative; height: 26px; }
.fenetre .jalons::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--border-soft); }
.fenetre .jalons i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--surface); position: relative; margin-right: auto; }
.fenetre .jalons i.fait { background: var(--accent); }
.fenetre .jalons i:last-child { margin-right: 0; }
.fenetre__pied { display: flex; align-items: center; gap: var(--space-3); padding: 12px 16px; border-top: var(--border-w-thin) solid var(--border-soft); flex-wrap: wrap; }
.fenetre__pied .visages { display: flex; }
.fenetre__pied img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); margin-left: -8px; filter: grayscale(1); }
.fenetre__pied img:first-child { margin-left: 0; }
.fenetre__pied .pied-note { font-size: 16px; color: var(--muted); }
.devise {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  margin: var(--space-6) 0 var(--space-3);
  max-width: 40ch;
}

/* ====== CTA final — boutons côte à côte, mention sous le titre ====== */

/* La colonne des actions se dimensionne aux deux boutons en rangée */
.cta-block { grid-template-columns: 1fr auto; align-items: center; }
.cta-block .actions { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta-block .actions .btn { color: var(--paper); border-color: var(--paper); }
.cta-block .actions .btn--dark { background: var(--ink); border-color: var(--ink); }

/* ====== Motion (D-058) ====== */

/* Révélation au défilement — visible par défaut, le JS ajoute la retenue */
html.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }

/* Entrée orchestrée du hero (titre → sous-titre → boutons) */
html.js .hero__inner > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
html.js .hero__inner > :nth-child(2) { transition-delay: .12s; }
html.js .hero__inner > :nth-child(3) { transition-delay: .24s; }
html.js .hero--go .hero__inner > * { opacity: 1; transform: none; }
.hero { position: relative; overflow: hidden; }
.hero__inner { position: relative; z-index: 1; }

/* Fond hero — le plan qui se trace (verdict D-067 : direction A du brainstorm).
   Un plan de site au trait fin se dessine dans la zone libre, tient, s'efface,
   et un plan différent recommence. Sans JavaScript : fond uni (D-057). */
.hero__fond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__fond canvas { width: 100%; height: 100%; display: block; }

/* Raturage du hero : la teinte DS du texte barré manque de contraste sur l'encre */
.hero .strike { color: rgba(237, 241, 239, .66); }

/* Responsive */
@media (max-width: 1000px) {
  .duo-col { grid-template-columns: 1fr; gap: var(--space-5); }
  .filets--cols { grid-template-columns: 1fr; }
  .methode { grid-template-columns: 1fr; gap: var(--space-5); }
  .cta-block { grid-template-columns: 1fr; }
  .socle { grid-template-columns: 1fr; }
  .filets--cols li:last-child { border-bottom: 1.5px solid var(--rule); }
  .dark-mode .filets--cols li:last-child { border-color: var(--rule-dark); }
  .loi-steps { grid-template-columns: repeat(2, 1fr); }
  /* Les trois services s'empilent : les points de la courbe perdent leur
     colonne, la courbe garde son sens et se contente de moins de hauteur. */
  .croissance-courbe { height: clamp(120px, 24vw, 170px); }
  .band--loi .preuves { grid-template-columns: 1fr; }
  .site-footer .top { grid-template-columns: 1fr 1fr; }
  .site-footer .brand-col { grid-column: 1 / -1; }
  .site-footer .blocs { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .forfaits { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .loi-steps { grid-template-columns: 1fr; }
  /* Boutons du hero empilés : pleine largeur pour deux boutons égaux (QA mobile) */
  .hero__inner .btn { width: 100%; justify-content: center; }
  .site-footer .top { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .site-footer .col-contact { grid-column: 1 / -1; }
  /* 11vw poussait « L'EXPERTISE » au-delà de la marge de droite sur écran
     étroit : mot insécable dans une grille, il déborde au lieu de rétrécir. */
  .hero__title { font-size: clamp(30px, 9.8vw, 44px); }
  .site-header { padding: var(--space-2) var(--space-3); gap: var(--space-2) var(--space-3); margin-bottom: var(--space-5); }
  .site-header .logo-img { height: 20px; }
  .site-header__actions .btn { display: none; }
  .audit-porte .btn { width: 100%; justify-content: center; }
  .forfaits-suite .btn { width: 100%; justify-content: center; }
  .fenetre__corps { grid-template-columns: 1fr; }
  /* Rembourrage réduit de la dalle : les boutons pleine largeur respirent */
  .cta-block { padding: var(--space-6) var(--space-5); }
  .cta-block .actions .btn { width: 100%; justify-content: center; }
}