/* ═══════════════════════════════════════════════════════════════
   AUCTAVIS — feuille de style unique
   ---------------------------------------------------------------
   Source de vérité de l'identité : le deck Oracle AVENTI.
   Les valeurs ci-dessous en sont extraites, elles ne sont pas
   inventées. Ne pas en dévier sans mettre à jour le deck d'abord.

   Feuille externe et non inline : c'est ce qui permet la directive
   style-src 'self' sans 'unsafe-inline' dans _headers.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Police ────────────────────────────────────────────────
   Switzer est utilisée EN DÉVELOPPEMENT UNIQUEMENT, pendant que
   le site reste privé et non publié.

   Licence : gratuite pour un usage commercial, mais l'auto-
   hébergement comme police web exige l'accord écrit de l'Indian
   Type Foundry. Demande en cours.

   ⛔ NE JAMAIS charger la police depuis le CDN Fontshare : cela
   transmet l'IP de chaque visiteur à un tiers (motif exact des
   condamnations Google Fonts en Europe), oblige à assouplir la
   CSP et ajoute une dépendance externe.

   BASCULE VERS LA PILE SYSTÈME, si la licence est refusée ou
   sans réponse au moment de publier : supprimer le bloc
   @font-face ci-dessous et retirer 'Switzer' de --font. Aucune
   autre ligne du site n'est à toucher, la pile de repli est déjà
   en place et le rendu a été contrôlé dans les deux états.
   ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Switzer';
  /* La ligne url() est commentée tant que le fichier n'est pas là :
     sans elle, le navigateur passe directement à la pile système au
     lieu d'émettre une requête 404 à chaque chargement.
     Le jour où Switzer-Variable.woff2 est déposé dans assets/fonts/,
     décommenter la ligne url(). Rien d'autre à changer. */
  src: local('Switzer Variable'),
       local('Switzer-Regular');
     /* url('fonts/Switzer-Variable.woff2') format('woff2-variations'); */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─── 2. Jetons ────────────────────────────────────────────────
   Couleurs, typographie et rythme du deck Oracle.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* Couleurs : noir profond, texte crème, jaune acide en accent unique */
  --ink:         #0A0A0A;
  --ink-raised:  #131313;
  --paper:       #F4F3EF;
  --gray-1:      #C7C5BE;   /* texte secondaire     11,6:1 sur --ink, AA */
  --gray-2:      #86847A;   /* méta, sources         5,3:1 sur --ink, AA */
  --gray-3:      #4A4942;   /* GRAPHIQUE UNIQUEMENT  2,2:1, jamais du texte */
  --line:        rgba(244, 243, 239, 0.10);
  --line-strong: rgba(244, 243, 239, 0.20);
  --acid:        #D9FF00;   /* accent unique        17,2:1 sur --ink, AAA */
  --acid-dim:    rgba(217, 255, 0, 0.12);

  /* Typographie : une seule famille */
  --font: 'Switzer', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --fs-display: clamp(2.4rem, 6vw, 5.25rem);
  --fs-title:   clamp(1.35rem, 2.4vw, 1.9rem);
  --fs-body:    0.98rem;
  --fs-small:   0.82rem;
  --fs-micro:   0.72rem;

  --lh-tight:        0.92;
  --lh-body:         1.62;
  --tracking-tight:  -0.045em;
  --tracking-wide:   0.16em;

  /* Espacement, base 8 px */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --pad-x:   clamp(1.5rem, 5vw, 5rem);
  /* Deux familles d'angles.
     STRUCTURE (cartes, sections, tableaux, filets, encadrés) : angle droit.
     INTERACTIF (boutons, étiquettes, champs) : angle adouci.
     Ce qui invite au clic est doux, ce qui porte l'information reste
     rigoureux. ⛔ Ne jamais appliquer --radius-interactive à une carte
     ou à un tableau : c'est ce mélange qui ferait perdre la signature. */
  --radius:             0px;
  --radius-interactive: 6px;
  --col-max: 1400px;

  /* Mouvement : courbes et durées reprises du deck Oracle.
     --dur-state est interpolé entre --dur-stagger et --dur-reveal :
     le deck n'a pas de durée d'état au survol, une page interactive
     en demande une. Aucune autre valeur n'est modifiée. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-reveal:  700ms;
  --dur-stagger: 70ms;
  --dur-state:   160ms;
}

/* ─── 3. Réinitialisation ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* L'en-tête est collant : sans cette réserve, une ancre dépose le
     titre visé DERRIÈRE l'en-tête, donc invisible.
     Hauteur réelle mesurée au rendu : 75 px. La réserve est fixée
     au-dessus, à 5,5 rem (88 px), pour laisser respirer.
     ⛔ À remesurer si le contenu de l'en-tête change. */
  scroll-padding-top: 5.5rem;
}

/* ─── Accrochage de sections ────────────────────────────────────
   ⛔ « proximity », JAMAIS « mandatory » : le visiteur ne doit jamais
   sentir son défilement confisqué. En proximity, le navigateur ne
   recale que si le défilement s'arrête DÉJÀ près d'une limite de
   section ; au milieu d'un long bloc, il ne se passe rien.

   ⛔ Désactivé en dessous de 64 em. Sur tactile, l'inertie du doigt et
   l'accrochage se combinent mal, et c'est précisément sur petit écran
   que les sections sont les plus hautes (jusqu'à 2 475 px à 375 px de
   large, mesuré le 08/09/2026).

   ⚠️ Une section plus haute que la fenêtre ne se lit jamais en entier
   depuis son point d'accrochage. Remesurer après tout ajout de contenu.
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 64em) and (min-height: 40em) and (hover: hover) {
  html { scroll-snap-type: y proximity; }
  main > section, .site-foot { scroll-snap-align: start; }
}

/* Neutralisation des transitions, dans l'esprit du bloc du deck Oracle.
   L'état survolé reste atteint, seul le trajet vers cet état disparaît :
   couper la couleur casserait l'affordance, couper l'animation non. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none !important;
  }
  main > section, .site-foot { scroll-snap-align: none !important; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

/* ─── 4. Utilitaires de mise en page ───────────────────────────── */
.wrap {
  max-width: var(--col-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Lien d'évitement, visible uniquement au clavier */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acid);
  color: var(--ink);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-interactive);
  font-size: var(--fs-small);
  font-weight: 600;
  z-index: 100;
}
.skip:focus { left: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

/* ─── 5. Typographie de page ───────────────────────────────────
   --fs-h2 est interpolé entre --fs-display et --fs-title : le deck
   n'a qu'un niveau de titre par slide, une page longue en demande
   deux. Aucune autre valeur de l'échelle n'est modifiée.
   ─────────────────────────────────────────────────────────────── */
:root { --fs-h2: clamp(1.7rem, 3.4vw, 3rem); }

h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  max-width: 20ch;
  text-wrap: balance;
}
h1 em {
  font-style: normal;
  color: var(--acid);
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  max-width: 24ch;
  margin-block-end: var(--space-4);
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-title);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin-block-end: var(--space-2);
}

p { max-width: 62ch; }
p + p { margin-block-start: var(--space-2); }

.label {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--acid);
  font-weight: 500;
  margin-block-end: var(--space-3);
}
.label .num {
  color: var(--gray-2);
  margin-inline-end: var(--space-1);
}

.lead {
  font-size: var(--fs-title);
  line-height: 1.4;
  color: var(--paper);
  letter-spacing: -0.015em;
}

.answer {
  font-size: var(--fs-title);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--paper);
  font-weight: 500;
  margin-block-end: var(--space-3);
}
.answer.wide { max-width: 46ch; }

.band p:not(.answer):not(.lead):not(.label),
.band li,
.band dd { color: var(--gray-1); }

.micro, .source {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--gray-2);
  letter-spacing: 0.01em;
}
.source { display: block; margin-block-start: var(--space-1); }
.answer .source { text-transform: none; letter-spacing: 0.01em; }

.note-inline {
  font-size: var(--fs-small);
  color: var(--gray-2);
  border-inline-start: 1px solid var(--line-strong);
  padding-inline-start: var(--space-2);
  margin-block-start: var(--space-3);
}

/* ─── 6. Boutons ───────────────────────────────────────────────── */
.btn {
  /* ⛔ Centrage sur les DEUX axes, pas seulement en horizontal.
     Un bouton placé dans une rangée flex est étiré à la hauteur de son
     voisin le plus haut : « Contact » mesure 44 px naturellement et se
     retrouve rendu à 60 px à côté du bouton principal. Avec
     inline-block + text-align, le libellé restait collé en haut de
     cette hauteur imposée. inline-flex le recentre quoi qu'il arrive. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-interactive);
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.85em 1.5em;
  border: 1px solid transparent;
  transition: background-color var(--dur-state) var(--ease-out),
              color            var(--dur-state) var(--ease-out),
              border-color     var(--dur-state) var(--ease-out);
}
.btn-acid {
  background: var(--acid);
  color: var(--ink);
  border-color: var(--acid);
}
.btn-ghost {
  border-color: var(--line-strong);
  color: var(--paper);
}

/* ⛔ :hover et :focus-visible portent TOUJOURS le même état.
   Sans cette parité, la navigation au clavier ne voit jamais l'état actif.
   Le bouton secondaire passe au jaune acide ; le bouton principal, déjà
   acide au repos, s'inverse pour rester lisible comme changement d'état.
   Contrastes contrôlés dans les deux sens : acide sur encre 17,2:1,
   encre sur acide 17,2:1. */
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--ink);
}
.btn-acid:hover,
.btn-acid:focus-visible {
  background: var(--ink);
  color: var(--acid);
  border-color: var(--acid);
}
.btn-lg {
  font-size: var(--fs-body);
  padding: 1.05em 2em;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  max-width: none;
}

/* ─── 7. En-tête ───────────────────────────────────────────────── */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-block-end: 1px solid var(--line);
}
.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-2);
}
.wordmark {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--paper);
}
.site-head .btn { padding: 0.7em 1.2em; }

/* ─── 8. Accroche ──────────────────────────────────────────────── */
.hero {
  padding-block: clamp(3.5rem, 10vw, var(--space-6));
  border-block-end: 1px solid var(--line);
}
.hero-body { margin-block-start: var(--space-4); }
.hero-body .lead { margin-block-end: var(--space-2); }
.hero-body p:not(.lead):not(.micro):not(.cta-row) { color: var(--gray-1); }
.hero .micro { margin-block-start: var(--space-2); }

/* ─── 9. Bandes de contenu ─────────────────────────────────────── */
.band {
  padding-block: clamp(3rem, 8vw, var(--space-6));
  border-block-end: 1px solid var(--line);
}

.cols { display: grid; gap: var(--space-4); }
.col > * + * { margin-block-start: var(--space-2); }

/* Chiffre isolé */
.stat {
  margin: var(--space-4) 0 0;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--line-strong);
}
.stat-value {
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--acid);
  font-weight: 500;
  margin: 0 0 var(--space-2);
}
.stat figcaption {
  font-size: var(--fs-small);
  color: var(--gray-1);
  max-width: 42ch;
}

/* Les trois mouvements */
.moves {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
  counter-reset: none;
}
.move {
  border-block-start: 1px solid var(--line-strong);
  padding-block-start: var(--space-3);
}
.move-num {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--gray-2);
  margin-block-end: var(--space-2);
}
.move h3 { max-width: 22ch; }
.move p { font-size: var(--fs-small); }

.note {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--line);
}
.note p { font-size: var(--fs-small); }

/* ─── 10. Tableau de preuve ────────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  margin-block-start: var(--space-4);
  border-block-start: 1px solid var(--line-strong);
}
table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}
caption {
  text-align: left;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--gray-2);
  padding-block: var(--space-2);
}
thead th {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--gray-2);
  font-weight: 500;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-block-end: 1px solid var(--line-strong);
}
tbody th {
  font-weight: 400;
  color: var(--paper);
}
tbody th, tbody td {
  font-size: var(--fs-small);
  vertical-align: top;
  padding: var(--space-3) var(--space-2) var(--space-3) 0;
  border-block-end: 1px solid var(--line);
}
tbody td { color: var(--gray-1); }
td.src {
  font-size: var(--fs-micro);
  color: var(--gray-2);
}

/* ─── 11. Cartes ───────────────────────────────────────────────── */
.cards {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}
.card {
  background: var(--ink-raised);
  border: 1px solid var(--line);
  padding: var(--space-4) var(--space-3);
}
.card h3 { max-width: 26ch; }
.card p { font-size: var(--fs-small); }

.ticks {
  margin-block-start: var(--space-3);
  display: grid;
  gap: var(--space-2);
}
.ticks li {
  position: relative;
  padding-inline-start: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--gray-3);
}

/* ─── 12. Chiffres du cas livré ────────────────────────────────── */
.h3-plain {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--gray-2);
  font-weight: 500;
  margin-block-end: var(--space-3);
}
.figures { display: grid; }
.figure-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--line);
}
.figure-row dt {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--paper);
}
.figure-row dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* ─── 13. Contact ──────────────────────────────────────────────── */
.contact-grid { display: grid; gap: var(--space-4); }

/* ─── 14. Pied de page ─────────────────────────────────────────── */
.site-foot { padding-block: var(--space-5) var(--space-4); }
.foot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
}
.wordmark-foot {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-block-end: var(--space-1);
}
.site-foot .micro + .micro { margin-block-start: 0.25rem; }
.foot-links ul { display: grid; gap: var(--space-1); }
.foot-links a, .site-foot a {
  font-size: var(--fs-small);
  color: var(--gray-1);
  text-decoration: none;
  border-block-end: 1px solid var(--line-strong);
  padding-block-end: 2px;
}
.foot-links a:hover, .foot-links a:focus-visible,
.site-foot a:hover, .site-foot a:focus-visible {
  color: var(--acid);
  border-block-end-color: var(--acid);
}
.foot-date {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--line);
  max-width: none;
}

/* ─── 15. Points de rupture ────────────────────────────────────
   Mobile d'abord. Contrôles au rendu : 375, 768 et 1440 px.
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 48em) {          /* 768 px */
  .cols { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .moves { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .cards { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .card { padding: var(--space-4); }
  .figure-row { grid-template-columns: 5.5rem 1fr; }
  .figure-row dt { font-size: 2.6rem; }
}

@media (min-width: 68em) {          /* 1088 px */
  .cards.three { grid-template-columns: repeat(3, 1fr); }
  h1 { max-width: 18ch; }
}

/* ─── 16. Pages légales ────────────────────────────────────────── */
.legal { padding-block: clamp(2.5rem, 7vw, var(--space-6)); }
.legal h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-block-end: var(--space-5);
  max-width: 24ch;
}
.legal section { margin-block-end: var(--space-5); }
.legal h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  margin-block-end: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--line-strong);
  max-width: 32ch;
}
.legal h3 {
  font-size: 1.05rem;
  margin-block: var(--space-4) var(--space-2);
}
.legal p { color: var(--gray-1); font-size: var(--fs-small); }
.legal .answer {
  color: var(--paper);
  font-size: var(--fs-title);
  max-width: 42ch;
}
.legal table { min-width: 0; }
.legal tbody th {
  width: 32%;
  min-width: 11rem;
  color: var(--gray-2);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.legal .table-scroll { border-block-start: none; }

.legal-list { margin-block-start: var(--space-3); }
.legal-list > div {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--line);
}
.legal-list dt {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--gray-2);
}
.legal-list dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--paper);
}
.legal-date {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--line);
}

/* Champ obligatoire non renseigné : doit rester impossible à rater */
.pending {
  display: inline-block;
  background: var(--acid-dim);
  border: 1px dashed var(--acid);
  border-radius: var(--radius-interactive);
  color: var(--acid);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 0.35em 0.7em;
}

@media (min-width: 48em) {
  .legal-list > div {
    grid-template-columns: 16rem 1fr;
    gap: var(--space-3);
    align-items: baseline;
  }
}

/* Les trois mouvements de la méthode, en accent.
   Exception nommée à la règle de rareté : les trois mots forment une
   unité mémorisable et se lisent comme un seul objet.
   Contraste contrôlé sur --ink, le seul fond où ils apparaissent. */
.mvt {
  color: var(--acid);
  font-style: normal;
  font-weight: 500;
}

/* ─── 17. Méthode, version courte sur l'accueil ────────────────── */
.methode-resume {
  font-size: var(--fs-body);
  max-width: 68ch;
}
.methode-resume + .methode-resume {
  color: var(--paper);
  border-inline-start: 1px solid var(--acid);
  padding-inline-start: var(--space-2);
  margin-block-start: var(--space-3);
}

/* ─── 18. Les offres, empilées à la verticale ──────────────────
   ⛔ Un seul élément acide par offre au repos : l'étiquette de
   catégorie. Le survol ajoute la bordure et le titre, ce qui rend
   le changement d'état visible sans saturer la page de jaune.
   ⛔ Au repos, la carte est déjà entièrement lisible : bordure
   visible, hiérarchie claire, aucun contenu révélé au survol.
   C'est ce qui la rend utilisable sur mobile, où le survol n'existe pas.
   ─────────────────────────────────────────────────────────────── */
.offers {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}
.offer {
  background: var(--ink-raised);
  border: 1px solid var(--line-strong);
  padding: var(--space-4) var(--space-3);
  transition: border-color var(--dur-state) var(--ease-out);
}
.offer:hover,
.offer:focus-within { border-color: var(--acid); }

.offer-tag {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--acid);
  margin-block-end: var(--space-1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
/* Étiquette de statut : factuelle et sobre, jamais acide.
   ⛔ Pas de fausse rareté, pas d'incitation à réserver. */
.offer-statut {
  color: var(--gray-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-interactive);
  padding: 0.25em 0.6em;
  letter-spacing: var(--tracking-wide);
}
.offer h3 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: var(--tracking-tight);
  margin-block-end: var(--space-2);
  transition: color var(--dur-state) var(--ease-out);
}
.offer:hover h3,
.offer:focus-within h3 { color: var(--acid); }

.offer-pitch {
  font-size: var(--fs-title);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--paper) !important;
  max-width: 44ch;
}
/* Ligne de preuve de l'offre : factuelle et sobre.
   ⛔ Sans condition commerciale, sans chiffre de résultat.
   Le bandeau de confiance montre QUI, cette ligne dit QUOI. */
.offer-preuve {
  font-size: var(--fs-small);
  color: var(--gray-2) !important;
  border-inline-start: 1px solid var(--line-strong);
  padding-inline-start: var(--space-2);
  margin-block-start: var(--space-3);
}
.offer-head { padding-block-end: var(--space-3); }
.offer-body {
  display: grid;
  gap: var(--space-4);
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--space-4);
}
.offer-col h4 {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--gray-2);
  font-weight: 500;
  margin: 0 0 var(--space-2);
}
.offer-col .ticks { margin-block-start: 0; }
.offer-note {
  font-size: var(--fs-small);
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--line);
}

/* Les cartes « Pourquoi Auctavis » ne sont pas des offres :
   ⛔ elles ne passent pas au jaune, sinon l'accent se banalise. */
.card { transition: border-color var(--dur-state) var(--ease-out); }
.card:hover, .card:focus-within { border-color: var(--line-strong); }

/* ─── 19. Bandeau de confiance ─────────────────────────────────
   Le logo du client et, depuis le 19/09/2026, son témoignage écrit,
   côte à côte. ⛔ Aucune donnée d'audit publiée par Auctavis : le seul
   chiffre affiché est dans les mots du client, dans son verbatim.
   ─────────────────────────────────────────────────────────────── */
.band-trust { padding-block: clamp(2rem, 5vw, var(--space-5)); }

/* Logo + témoignage : empilés en dessous de 768 px, deux colonnes au
   dessus (logo en colonne auto, citation dans le reste). Le témoignage
   garde le style de la section 22, seule sa marge haute tombe, la
   grille espace déjà.
   ⛔ À partir de 3 marques, la piste défile en width: max-content et a
   besoin de toute la largeur : la grille repasse seule en une colonne,
   le témoignage sous la piste. */
.trust-grid {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-3);
  align-items: start;
}
/* Dans le bandeau, le témoignage s'étale sur toute sa colonne : la borne
   de 48ch de la figure (section 22) et celle de 62ch du paragraphe
   (section 5) sont levées, le filet reste à gauche. */
.trust-grid .temoignage { margin-block-start: 0; max-width: none; }
.trust-grid .temoignage p { max-width: none; }
@media (min-width: 48em) {
  .trust-grid {
    grid-template-columns: auto 1fr;
    gap: var(--space-5);
  }
  .trust-grid:has(.trust-item:nth-child(3)) { grid-template-columns: 1fr; }
}
.h2-trust {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--gray-2);
  font-weight: 500;
  max-width: none;
  margin-block-end: var(--space-3);
  line-height: 1.4;
}
/* ⛔ RÈGLE D'AFFICHAGE, à respecter en ajoutant des marques :
     1 ou 2 marques -> bandeau STATIQUE, aucune animation.
     3 marques ou plus -> le défilement s'active tout seul.
   Motif : une boucle sur un seul logo souligne qu'il n'y en a qu'un.

   Le déclenchement se lit en CSS, sans JavaScript : :has() teste la
   présence d'un 3e élément. Sur un navigateur sans :has(), la règle ne
   s'applique pas et le bandeau reste statique, ce qui est exactement la
   dégradation voulue.

   ⛔ À PARTIR DE 3 MARQUES, dupliquer la liste une fois dans le HTML,
   la copie portant aria-hidden="true" : la translation de -50 % suppose
   que la seconde moitié de la piste est la copie de la première. Sans
   duplication, la boucle saute. */
.trust-viewport {
  overflow: hidden;
  /* Réserve de 5 px pour le contour de focus du lien du logo (2 px, à
     3 px de décalage), sinon rogné par overflow: hidden. Les marges
     négatives compensent le padding : la géométrie ne bouge pas, le
     masque du défilement s'ouvre juste 5 px plus tôt. L'espace sous
     le titre est porté par .trust-grid. */
  padding: 5px;
  margin: -5px;
}
.trust-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}
.trust-track:has(.trust-item:nth-child(3)) {
  flex-wrap: nowrap;
  width: max-content;
  animation: trust-defile 38s linear infinite;
}
/* Le survol et le focus clavier suspendent le défilement, pour laisser
   lire un nom au passage. Parité :hover / :focus-within tenue. */
.trust-viewport:hover .trust-track,
.trust-viewport:focus-within .trust-track { animation-play-state: paused; }

@keyframes trust-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ⛔ Neutralisation explicite. La règle universelle de mouvement réduit
   ramène les animations à 0,01 ms en une seule itération, ce qui
   figerait la piste à la fin de la course, donc décalée de -50 %.
   Il faut donc couper l'animation elle-même, pas sa durée. */
@media (prefers-reduced-motion: reduce) {
  .trust-track {
    animation: none !important;
    width: auto !important;
    flex-wrap: wrap !important;
    transform: none !important;
  }
}

.trust-name {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--paper);
  white-space: nowrap;
}
/* Le logo fourni par le client (assets/aventi-studio.png, reçu le
   15/09/2026), enveloppé dans un lien vers son site. Le lien est en
   display: block : un <a> inline autour d'une image en display: block n'a
   que des fragments de ligne vides, le contour de focus clavier ne se
   dessinait pas, et inline-block laisserait 7 px de ligne de base sous
   l'image. ⛔ Parité :hover / :focus-visible, comme partout ailleurs. */
.trust-item a { display: block; }
.trust-item img { max-height: 40px; width: auto; }

/* ─── 20. Page méthode ─────────────────────────────────────────── */
.hero-page { padding-block: clamp(3rem, 8vw, var(--space-6)); }
.hero-page h1 { max-width: 16ch; }

.matrice-cloture {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--acid);
  margin-block-end: 0;
}

.refus {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}
.refus-item {
  border-block-start: 1px solid var(--line-strong);
  padding-block-start: var(--space-3);
}
.refus-item h3 {
  font-size: var(--fs-title);
  max-width: 24ch;
}
.refus-item p { font-size: var(--fs-small); }

@media (min-width: 48em) {
  .offer { padding: var(--space-5) var(--space-4); }
  .offer-body { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .refus { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}


/* ─── 21. Le protocole de mesure, exposé en clair ──────────────── */
.protocole {
  counter-reset: etape;
  margin-block-start: var(--space-4);
}
.protocole-etape {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--line);
}
.protocole-etape::before {
  content: counter(etape, decimal-leading-zero);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--gray-2);
  padding-block-start: 0.5em;
}
.protocole-etape h3 {
  font-size: var(--fs-title);
  margin-block-end: var(--space-1);
  max-width: 30ch;
}
.protocole-etape p { font-size: var(--fs-small); }

@media (min-width: 48em) {
  .protocole-etape { grid-template-columns: 4rem 1fr; gap: var(--space-4); }
}

/* ─── 22. Le témoignage ─────────────────────────────────────────────
   Verbatim écrit d'Anton Richer (AVENTI Studio), reçu par mail le
   15/09/2026 et reproduit mot pour mot. Affiché depuis le 19/09/2026
   dans le bandeau de confiance, à côté du logo (section 19). Un second
   emplacement, vide, reste prévu en commentaire près du CTA final.
   ⛔ Ne jamais reformuler ce verbatim, ni remplir un emplacement avec
   un témoignage inventé, reformulé, ou sollicité contre contrepartie.
   ─────────────────────────────────────────────────────────────── */
.temoignage {
  margin: var(--space-4) 0 0;
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--acid);
  max-width: 48ch;
}
.temoignage blockquote { margin: 0; }
.temoignage blockquote p {
  font-size: var(--fs-title);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.temoignage figcaption {
  margin-block-start: var(--space-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gray-2);
}

/* ─── 23. Menu de navigation, sans JavaScript ──────────────────────
   Construit sur <details> / <summary>, l'élément de divulgation natif
   du HTML. Il s'ouvre au clic ET au clavier sans une ligne de script,
   donc sans toucher à la CSP.

   ⛔ L'icône reste DISCRÈTE : trois barres grises, sans fond ni
   bordure. Elle ne doit pas concurrencer « Prendre 20 minutes », qui
   demeure l'action unique et dominante de l'en-tête.

   ⚠️ Limite assumée du sans-JavaScript : le panneau ne se ferme pas au
   clic à l'extérieur. On le referme en recliquant l'icône, ou par Échap
   quand le résumé a le focus.
   ─────────────────────────────────────────────────────────────── */
.head-gauche {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.menu { position: static; }

/* Retrait du triangle natif, sur les deux familles de moteurs */
.menu-declencheur {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline-start: calc(var(--space-1) * -1);
  border-radius: var(--radius-interactive);
  cursor: pointer;
}
.menu-declencheur::-webkit-details-marker { display: none; }
.menu-declencheur::marker { content: ""; }

/* Les trois barres : la barre centrale est l'élément, les deux autres
   ses pseudo-éléments. Aucune image, aucune requête. */
.menu-barres,
.menu-barres::before,
.menu-barres::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--gray-1);
  transition: background-color var(--dur-state) var(--ease-out);
}
.menu-barres { position: relative; }
.menu-barres::before,
.menu-barres::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}
.menu-barres::before { top: -6px; }
.menu-barres::after  { top: 6px; }

/* ⛔ Parité :hover / :focus-visible, comme partout ailleurs.
   Le survol va vers --paper et non vers l'acide : l'icône doit rester
   en retrait du bouton de rendez-vous. */
.menu-declencheur:hover .menu-barres,
.menu-declencheur:hover .menu-barres::before,
.menu-declencheur:hover .menu-barres::after,
.menu-declencheur:focus-visible .menu-barres,
.menu-declencheur:focus-visible .menu-barres::before,
.menu-declencheur:focus-visible .menu-barres::after {
  background: var(--paper);
}

/* Le panneau, collé au bord gauche, sous l'en-tête.
   .site-head est en position sticky, donc il fait bloc de référence. */
.menu-panneau {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  width: min(82vw, 17rem);
  background: var(--ink-raised);
  border: 1px solid var(--line-strong);
  border-inline-start: none;
  padding: var(--space-3) var(--space-3) var(--space-4);
}
.menu-panneau ul { display: grid; gap: 0; }
.menu-panneau li + li { border-block-start: 1px solid var(--line); }
.menu-panneau a {
  display: block;
  padding-block: 0.7rem;
  font-size: var(--fs-small);
  color: var(--gray-1);
  text-decoration: none;
  transition: color var(--dur-state) var(--ease-out);
}
.menu-panneau a:hover,
.menu-panneau a:focus-visible { color: var(--acid); }
/* La page en cours se signale sans dépendre de la seule couleur */
.menu-panneau a[aria-current="page"] {
  color: var(--paper);
  font-weight: 600;
}
.menu-panneau a[aria-current="page"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 0.6rem;
  vertical-align: 1px;
  background: var(--acid);
}

/* ─── 24. Adresse de contact en toutes lettres ─────────────────────
   Filet du mailto: un lien mailto ne fait rien chez un visiteur sans
   application de messagerie configurée, ce qui est courant en webmail.
   ⛔ Ne pas retirer en croyant faire propre.
   ─────────────────────────────────────────────────────────────── */
.contact-adresse {
  margin-block-start: var(--space-3);
  font-size: var(--fs-small);
  color: var(--gray-2) !important;
}
.contact-adresse a {
  color: var(--paper);
  text-decoration: none;
  border-block-end: 1px solid var(--line-strong);
  padding-block-end: 2px;
  transition: color var(--dur-state) var(--ease-out),
              border-color var(--dur-state) var(--ease-out);
}
.contact-adresse a:hover,
.contact-adresse a:focus-visible {
  color: var(--acid);
  border-block-end-color: var(--acid);
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  DÉBUT CHANTIER 2 — MENU EN VERRE ET ANIMÉ                    ║
   ║                                                               ║
   ║  ⚠️ CLAUSE DE RETOUR ARRIÈRE : tout ce chantier se retire en  ║
   ║  supprimant ce bloc, de cette ligne jusqu'au marqueur FIN.    ║
   ║  Aucune autre ligne de la feuille n'est à toucher. Le menu    ║
   ║  revient alors à son fond opaque et à son ouverture           ║
   ║  instantanée, tels qu'ils étaient au 09/09/2026.              ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ─── Le verre ─────────────────────────────────────────────────
   Hors @supports, le fond opaque de la règle de base s'applique :
   rien à écrire ici pour le repli, il existe déjà.

   ⛔ CONTRAINTE DE CONTRASTE. Le contenu qui défile derrière devient
   du bruit sous les libellés. Le fond reste donc majoritairement
   opaque et le flou fait le reste. Opacité retenue : 0,74.
   Pire cas mesuré, panneau au-dessus du bouton acide, libellé
   --gray-1 : voir le compte rendu du 10/09/2026.
   ⛔ Ne pas descendre sous 0,74 sans remesurer le contraste.
   ─────────────────────────────────────────────────────────────── */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .menu-panneau {
    background: rgba(19, 19, 19, 0.74);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    /* Liseré clair d'un pixel : c'est lui qui donne la lecture
       « matière » plutôt que « fond sale ». */
    border-block-start: 1px solid rgba(244, 243, 239, 0.22);
  }
}

/* ─── Le mouvement ─────────────────────────────────────────────
   ::details-content est animable avec transition-behavior:
   allow-discrete sur content-visibility.
   Hors support, le panneau s'ouvre instantanément, soit le
   comportement actuel : dégradation propre, rien de cassé.
   ─────────────────────────────────────────────────────────────── */
@supports (transition-behavior: allow-discrete) {
  /* ⚠️ NE PAS déclarer content-visibility sur ::details-content.
     Cette propriété applique un confinement de mise en page, ce qui
     fait du pseudo-élément le bloc de référence des descendants en
     position absolue : le panneau décrochait du bord gauche et
     revenait à 92 px, sous l'icône. Mesuré deux fois le 10/09/2026.

     On laisse donc le navigateur gérer l'affichage de
     ::details-content, et on anime le panneau seul. @starting-style
     donne l'état de départ à l'ouverture, sans toucher au
     positionnement. La fermeture est instantanée, ce qui ne se
     remarque pas et ne casse rien. */
  .menu-panneau {
    transition: opacity 180ms var(--ease-out),
                transform 200ms var(--ease-out);
  }
  @starting-style {
    .menu[open] .menu-panneau {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
}

/* ─── Les trois barres deviennent une croix ────────────────────
   État purement CSS sur details[open], donc gratuit, et c'est ce
   qui rend le menu lisible à l'usage.
   ─────────────────────────────────────────────────────────────── */
.menu-barres,
.menu-barres::before,
.menu-barres::after {
  transition: background-color var(--dur-state) var(--ease-out),
              transform 200ms var(--ease-out);
}
.menu[open] .menu-barres { background: transparent; }
.menu[open] .menu-barres::before { transform: translateY(6px) rotate(45deg); }
.menu[open] .menu-barres::after  { transform: translateY(-6px) rotate(-45deg); }

/* ─── Mouvement réduit ─────────────────────────────────────────
   La règle universelle ramène les durées à 0,01 ms, ce qui suffirait
   presque. On coupe ici explicitement, comme cela a déjà été fait
   pour le bandeau défilant : une transition discrète ramenée à
   0,01 ms reste une transition, et l'état de repos doit être
   l'état final, pas l'état de départ.
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .menu-panneau,
  .menu[open] .menu-panneau {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .menu-barres,
  .menu-barres::before,
  .menu-barres::after { transition: none !important; }
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║  FIN CHANTIER 2 — MENU EN VERRE ET ANIMÉ                      ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ─── 25. La citation signée ───────────────────────────────────────
   Unique prise de parole à la première personne du site, sur
   a-propos.html. ⛔ Pas de guillemets dessinés en CSS : le texte porte
   déjà ses guillemets typographiques, les doubler serait une faute.
   ─────────────────────────────────────────────────────────────── */
.citation {
  margin: var(--space-4) 0 0;
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--acid);
  max-width: 46ch;
}
.citation blockquote { margin: 0; }
.citation blockquote p {
  font-size: var(--fs-title);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--paper) !important;
}
.citation figcaption {
  margin-block-start: var(--space-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gray-2);
}

/* ─── 26. Centrage du contenu et des titres, éléments jaunes à gauche (proposition 2, 13/09/2026, revue les 18 et 19/09/2026) ─
   Le conteneur .wrap était déjà centré (margin-inline: auto, section 4).
   Ce qui donnait l'impression d'une page décalée à gauche, ce sont les
   blocs de texte : bornés en largeur (h1 20ch, h2 24ch, p 62ch, .answer
   46ch) et posés au bord gauche du conteneur, ils laissaient la moitié
   droite vide sur un grand écran.

   Historique : 13/09, tout centré sous <main>, titres et CTA compris,
   sur les cinq pages. 18/09, presque tout remis à gauche, seuls quelques
   blocs courts centrés. 19/09 matin, logique inversée : le CONTENU se
   centre, titres et boutons tiennent la marge gauche. 19/09, revue :
   les titres se centrent aussi, seuls les ÉLÉMENTS JAUNES restent à
   gauche.

   Règle retenue (19/09/2026), sous main.centre uniquement, posé sur
   index.html, methode.html et a-propos.html :
   · CENTRÉS, bloc et texte : tous les textes, blocs de contenu et titres.
     L'accroche .lead, la réponse .answer (dont .matrice-cloture), le
     résumé .methode-resume, les paragraphes de corps, les notes,
     .offer-pitch, .offer-note, le chiffre isolé .stat et sa légende,
     les notes .micro, l'adresse de contact, et les titres h1 à h4, blancs
     ou gris : .move-num, .h2-trust, .h3-plain, .offer h3, .offer-col h4,
     titres de cartes, de mouvements et de refus. Les titres centrés
     perdent leur borne en ch et prennent toute la largeur de leur
     colonne ;
   · À GAUCHE : ce qui est jaune. Les étiquettes .label, les étiquettes
     d'offre .offer-tag, et les rangées de boutons .cta-row (bouton
     acide) ;
   · À GAUCHE aussi, garde-fous : les listes à puces .ticks, les tableaux
     et leur légende, les étapes numérotées .protocole-etape et
     .figure-row, et les blocs à filet gauche .note-inline, .offer-preuve,
     .citation et .temoignage, dont le texte reste collé au filet. Les
     .methode-resume à filet (2e et suivants) se centrent avec les autres
     depuis le 19/09, bloc resserré sur le texte pour que le filet suive ;
   · EXCEPTION ACCUEIL : le bloc .hero de index.html (l'accroche
     « Generative Engine Optimization ») reste entièrement à gauche,
     texte compris. Les accroches des pages méthode et à-propos portent
     .hero-page et suivent la règle ;
   · les pages légales n'ont pas la classe : rien ne s'y applique ;
   · l'en-tête et le pied de page, hors <main>, ne sont pas concernés.
   ⛔ Pour centrer une page, poser class="centre" sur son <main> ; ne pas
   élargir les sélecteurs ci-dessous à main seul.
   Couleurs, police, angles, tailles : inchangés (CDC, section 4). Couche
   additive en fin de feuille, aucune règle antérieure n'est modifiée.
   L'ordre des blocs 26.1 à 26.4 compte : les remises à gauche viennent
   après le centrage et le battent à spécificité égale.
   ─────────────────────────────────────────────────────────────── */

/* 26.1 Le contenu et les titres : bloc borné en largeur centré dans son
   conteneur, texte centré. text-align est hérité : la valeur et la
   légende de .stat suivent la figure. */
main.centre p,
main.centre h1,
main.centre h2,
main.centre h3,
main.centre h4,
main.centre .move-num,
main.centre .h2-trust,
main.centre .h3-plain,
main.centre .lead,
main.centre .answer,
main.centre .methode-resume,
main.centre .offer-pitch,
main.centre .offer-note,
main.centre .stat,
main.centre .stat figcaption,
main.centre .micro,
main.centre .contact-adresse {
  margin-inline: auto;
  text-align: center;
}
/* Les titres centrés prennent toute la largeur de leur colonne. Les
   bornes de la section 5 (h1 20ch, h2 24ch, h3 22 à 26ch, .hero-page h1
   16ch) font des lignes courtes pour des titres à gauche ; centré, un
   bloc étroit flotte au milieu de la page. text-wrap: balance reste et
   équilibre les lignes. Hors champ : les h3 des étapes du protocole
   (garde-fou 26.3) et le h1 du hero de l'accueil (exception 26.4), qui
   gardent leur borne. */
main.centre :is(h1, h2, h3):not(.protocole-etape *, .hero:not(.hero-page) *) {
  max-width: none;
}
/* Les résumés à filet acide (2e .methode-resume et suivants) se
   resserrent sur leur texte : le filet reste collé à la phrase et se
   centre avec elle, au lieu de rester au bord gauche d'un bloc de 68ch.
   Sur plusieurs lignes, le bloc garde sa borne et le filet court sur
   toute sa hauteur. */
main.centre .methode-resume + .methode-resume { width: fit-content; }

/* 26.2 Les éléments jaunes : à la marge gauche, bloc et texte. .label
   et .offer-tag sont acides, .cta-row porte le bouton acide. */
main.centre .label,
main.centre .cta-row,
main.centre .offer-tag {
  margin-inline: 0;
  text-align: start;
}
/* Les rangées de boutons sont en flex : leur alignement par défaut est
   déjà à gauche, la règle le fixe noir sur blanc. */
main.centre .cta-row,
main.centre .offer-tag { justify-content: flex-start; }

/* 26.3 Garde-fous : listes, tableaux, étapes numérotées et blocs à filet
   gauche restent à gauche, eux et tout ce qu'ils contiennent. Les
   .methode-resume n'en font pas partie, filet ou non. */
main.centre :is(.ticks, .table-scroll, table, .protocole-etape, .figure-row,
                .note-inline, .offer-preuve, .citation, .temoignage),
main.centre :is(.ticks, .table-scroll, table, .protocole-etape, .figure-row,
                .note-inline, .offer-preuve, .citation, .temoignage) :is(h3, h4, p, li, dt, dd, caption, th, td, figcaption, blockquote) {
  margin-inline: 0;
  text-align: start;
}

/* 26.4 Exception accueil : l'accroche de index.html reste à gauche,
   texte compris. .hero-page (méthode, à-propos) n'est pas concerné. */
main.centre .hero:not(.hero-page) :is(h1, p, .lead, .micro, .stat, figcaption) {
  margin-inline: 0;
  text-align: start;
}