/* ═══════════════════════════════════════════════════════════════════
   Yendyx — système de design
   Principe : composer un document, pas assembler une page.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fontes, hébergées localement ──────────────────────────────────
   Un site qui affirme que les fichiers ne sortent pas de chez le client
   ne peut pas appeler un serveur tiers à chaque visite. Sous-ensemble
   latin uniquement. ───────────────────────────────────────────────── */
@font-face {
  font-family: 'Spectral';
  src: url('/fonts/spectral-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('/fonts/spectral-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Spectral';
  src: url('/fonts/spectral-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('/fonts/ibm-plex-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Couleurs — blanc franc, encre neutre, un seul accent.
     Le fond était un crème à 3 % du blanc : ni blanc ni teinte assumée.
     Les références qui tiennent font l'un ou l'autre. Le Monde, Pentagram,
     le Centre Pompidou et GOV.UK sont sur blanc pur ; le Financial Times
     tient un saumon (#FFF1E5) parce que son papier est saumon depuis 1893.
     Sans raison de ce genre, le blanc franc est le choix honnête.
     Aucune de ces références n'écrit en bleu marine : leur encre est un
     presque-noir. D'où ce gris très sombre, neutre.
     L'accent n'est plus l'ocre : c'est le bleu du logo (teinte 206°),
     assombri jusqu'à être lisible. La marque et le site disaient deux
     choses différentes. */
  --encre:        #161616;   /* 18,1:1 sur papier */
  --encre-2:      #393939;
  --gris:         #525252;   /* 7,8:1 sur papier */
  --gris-clair:   #6F6F6F;   /* 5,0:1 sur papier, 4,6:1 sur papier-2 */
  --papier:       #FFFFFF;
  --papier-2:     #F4F4F4;
  --trait:        #E0E0E0;
  --trait-fort:   #8D8D8D;   /* 3,3:1 — seuil des bordures de champs */
  --accent:       #0068B8;   /* 5,7:1 sur papier, 5,2:1 sur papier-2 */
  --accent-clair: #7FC0FF;   /* le même bleu sur fond sombre — 9,4:1 sur l'encre */
  --erreur:       #A32A1E;
  --succes:       #2E6B3E;

  /* Familles */
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans:  'Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Échelle typographique, ratio ~1.25 sur une base de 17px */
  --t-xs:   12.5px;
  --t-sm:   14.5px;
  --t-base: 17px;
  --t-md:   19px;
  --t-lg:   23px;
  --t-xl:   30px;
  --t-2xl:  40px;

  /* Espacement, base 4 */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;  --s10: 128px;

  --r: 2px;                /* rayon unique */
  --mesure: 68ch;          /* longueur de ligne confortable */
  --gouttiere: 32px;
  --large: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Le bandeau étant collé en haut, une ancre doit s'arrêter sous lui et
   non derrière. 72px de barre, plus une respiration. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Grille ────────────────────────────────────────────────────────
   12 colonnes. Les sections composent dessus différemment ; c'est ce
   qui donne le rythme, plutôt que de répéter le même bloc centré. */
.grille {
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gouttiere);
}
.bande { max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }

/* ── Typographie ───────────────────────────────────────────────────
   Les titres sont en Spectral, le texte fonctionnel en Plex Sans.
   Aucun titre n'est agrandi sans raison : l'échelle sert la hiérarchie. */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
h1 { font-size: var(--t-2xl); line-height: 1.14; letter-spacing: -0.017em; }
h2 { font-size: var(--t-lg); line-height: 1.22; letter-spacing: -0.008em; }
h3 { font-size: var(--t-base); line-height: 1.35; }
p  { margin: 0; max-width: var(--mesure); }

.chapo {
  font-family: var(--serif);
  font-size: var(--t-md);
  line-height: 1.52;
  color: var(--gris);
  max-width: 48ch;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--encre); }

/* Focus — visible partout, jamais supprimé. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── En-tête ───────────────────────────────────────────────────────
   Filet, fond opaque, pas de flou : la barre ne doit pas se faire
   remarquer, seulement séparer. Elle reste collée en haut pendant le
   défilement : la page est longue, et « Nous écrire » ne doit pas
   disparaître au premier écran. Fond opaque et non translucide, sinon
   le texte de la page se lit à travers en passant dessous. */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--trait);
  background: var(--papier);
}
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
/* La marque porte le nom : elle prend le pas sur les liens de navigation,
   qui restent en petit. L'interlettrage se resserre à mesure que le corps
   grossit — la valeur qui aérait 14px disloque 17px. */
.marque {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--encre);
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-base);
  letter-spacing: 0.13em;
}
/* Le signe n'occupe que 34 des 64 pixels de son fichier, le reste est
   transparent : la taille déclarée ici vaut environ 55 % de signe visible.
   40px affichent donc un Y d'environ 22px, soit deux fois la hauteur de
   capitale du nom. Recadrer le PNG permettrait de descendre à 24px. */
.marque img { display: block; width: 40px; height: 40px; }
.entete nav { display: flex; align-items: center; gap: var(--s6); }
.entete nav a {
  color: var(--gris);
  text-decoration: none;
  font-size: var(--t-sm);
  /* 8px haut/bas : porte la cible au-delà des 24px exigés (WCAG 2.5.8)
     sans changer la hauteur de la barre, fixée en flex. */
  padding: var(--s2) 0;
  transition: color .14s ease;
}
.entete nav a:hover { color: var(--encre); }
.entete nav a.appuye { color: var(--encre); font-weight: 500; }

/* ── Ouverture ─────────────────────────────────────────────────────
   Asymétrie fonctionnelle : le titre occupe 7 colonnes, les faits
   techniques les 4 dernières. Ils se lisent en parallèle, pas en file. */
.ouverture { padding-block: var(--s10) var(--s9); align-items: start; }
.ouverture-texte { grid-column: 1 / 8; }
.ouverture h1 { max-width: 22ch; margin-bottom: var(--s5); }
.ouverture .chapo { margin-bottom: var(--s7); }

.ouverture-faits {
  grid-column: 9 / 13;
  border-top: 2px solid var(--encre);
  padding-top: var(--s3);
}
.ouverture-faits dl { margin: 0; }
.ouverture-faits dt {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--gris-clair);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ouverture-faits dd {
  margin: 0 0 var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--encre);
}
.ouverture-faits dd:last-child { border-bottom: 0; margin-bottom: 0; }

.actions { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }

/* Un seul bouton plein dans la page. Rectangle, pas pilule. */
.bouton {
  display: inline-block;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  padding: 11px var(--s5);
  border: 1px solid var(--encre);
  border-radius: var(--r);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.bouton:hover { background: var(--encre-2); border-color: var(--encre-2); color: var(--papier); }
.bouton:disabled { opacity: .5; cursor: default; }

.lien-second {
  font-size: var(--t-sm);
  color: var(--encre);
  text-decoration: none;
  border-bottom: 1px solid var(--trait-fort);
  padding-bottom: 2px;
  transition: border-color .14s ease, color .14s ease;
}
.lien-second:hover { color: var(--accent); border-color: var(--accent); }

/* ── La situation ──────────────────────────────────────────────────
   Pas d'encadré : le changement de famille et de corps suffit à
   marquer que la voix change. */
.situation { background: var(--papier-2); border-top: 1px solid var(--trait); padding-block: var(--s9); }
.situation-recit { grid-column: 2 / 9; }
.situation-recit p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.55;
  max-width: 50ch;
  color: var(--encre);
}
.situation-suite { grid-column: 2 / 8; margin-top: var(--s7); }
.situation-suite p + p { margin-top: var(--s4); }
.situation-suite p { color: var(--gris); max-width: 58ch; }
.situation-suite strong { color: var(--encre); font-weight: 500; }

/* ── Prestations ───────────────────────────────────────────────────
   Composition tabulaire : nom, description, prix. Filets, pas cartes. */
.prestations { padding-block: var(--s9); }
.section-titre { grid-column: 1 / 5; }
.section-titre h2 { margin-bottom: var(--s2); }
.section-titre .note-titre {
  font-size: var(--t-sm);
  color: var(--gris);
  max-width: 30ch;
}
.liste-prestations { grid-column: 5 / 13; }

.ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--s7);
  align-items: baseline;
  padding: var(--s5) 0;
  border-top: 1px solid var(--trait);
}
.ligne:first-child { border-top: 2px solid var(--encre); padding-top: var(--s4); }
.ligne:last-child { border-bottom: 1px solid var(--trait); }
.ligne h3 { font-family: var(--sans); font-weight: 500; font-size: var(--t-md); margin-bottom: var(--s2); }
.ligne p { font-size: 16px; color: var(--gris); max-width: 52ch; }

.prix {
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--encre);
  text-align: right;
  white-space: nowrap;
}
.prix span {
  display: block;
  margin-top: var(--s1);
  font-size: var(--t-xs);
  color: var(--gris-clair);
}

/* ── Produits ──────────────────────────────────────────────────────
   Seule section inversée de la page. Un produit par rangée pleine
   largeur : deux colonnes jumelles auraient fait des cartes, et une
   grille à deux colonnes obligerait à recomposer la page à chaque
   produit ajouté ou retiré. Chaque rangée se lit en deux temps, la
   présentation puis la preuve. */
.produits { background: var(--encre); color: var(--papier); padding-block: var(--s9); }
.produits-titre { grid-column: 1 / 8; margin-bottom: var(--s8); }
.produits h2 { color: var(--papier); margin-bottom: var(--s3); }
.produits-titre p { color: #C6C6C6; font-size: 16px; max-width: 46ch; }

.produits-liste {
  grid-column: 1 / 13;
  display: grid;
  row-gap: var(--s8);
}
.fiche {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--gouttiere) * 2.5);
}
.fiche + .fiche {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: var(--s8);
}
.fiche h3 {
  font-family: var(--serif);
  font-size: var(--t-md);
  color: var(--papier);
  margin-bottom: var(--s2);
}
.fiche-role {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8D8D8D;
  border-top: 2px solid rgba(255,255,255,.4);
  padding-top: var(--s3);
  margin-bottom: var(--s3);
}
.fiche-texte { color: #C6C6C6; font-size: 16px; max-width: 40ch; margin-bottom: var(--s5); }

.lien-produit {
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--papier);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-clair);
  padding-bottom: 2px;
  transition: color .14s ease;
}
.lien-produit:hover { color: var(--accent-clair); }

.index-entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid rgba(255,255,255,.4);
  padding-top: var(--s3);
  margin-bottom: var(--s3);
}
.index-entete span {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8D8D8D;
}

/* Le premier libellé de la fiche technique porte le même filet épais que
   l'en-tête d'index en face : les deux colonnes démarrent sur la même
   ligne, sinon la rangée se lit comme deux blocs décalés. */
.fiche-preuve dl { margin: 0; }
.fiche-preuve dt {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8D8D8D;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: var(--s3);
  margin-top: var(--s4);
}
.fiche-preuve dt:first-child {
  border-top: 2px solid rgba(255,255,255,.4);
  margin-top: 0;
}
.fiche-preuve dd {
  margin: var(--s1) 0 0;
  font-size: var(--t-sm);
  color: #E0E0E0;
  line-height: 1.5;
}
.fiche ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--s6);
}
.fiche li {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 2.05;
  color: #E0E0E0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  break-inside: avoid;
}

/* ── Méthode ───────────────────────────────────────────────────────
   Numéros dans la marge, en mono. Pas de cercles. */
.methode { padding-block: var(--s9); border-top: 1px solid var(--trait); }
.methode-liste { grid-column: 5 / 13; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.methode-liste li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--s5);
  padding: var(--s5) 0;
  border-top: 1px solid var(--trait);
}
.methode-liste li:first-child { border-top: 2px solid var(--encre); }
.methode-liste li::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--accent);
  padding-top: 4px;
}
.methode-liste h3 { font-family: var(--sans); font-weight: 500; margin-bottom: var(--s1); }
.methode-liste p { font-size: 16px; color: var(--gris); max-width: 54ch; }

.reserve {
  grid-column: 5 / 13;
  margin-top: var(--s6);
  font-size: var(--t-sm);
  color: var(--gris);
  max-width: 56ch;
}

/* ── Contact ───────────────────────────────────────────────────────
   Formulaire à gauche, contreparties à droite : l'asymétrie répond à
   la question « qu'est-ce que je reçois si j'écris ? » */
.contact { background: var(--papier-2); border-top: 1px solid var(--trait); padding-block: var(--s9); }
.contact-forme { grid-column: 1 / 7; }
.contact h2 { margin-bottom: var(--s3); }
.contact-intro { color: var(--gris); font-size: 16px; margin-bottom: var(--s6); max-width: 46ch; }

.contact-aparte { grid-column: 8 / 13; padding-top: var(--s2); }
.contact-aparte dl { margin: 0; }
.contact-aparte dt {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris-clair);
  border-top: 1px solid var(--trait);
  padding-top: var(--s3);
}
.contact-aparte dd {
  margin: var(--s1) 0 var(--s5);
  font-size: var(--t-sm);
  color: var(--encre);
  line-height: 1.5;
}

.champ { margin-bottom: var(--s5); }
label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  margin-bottom: var(--s2);
}
label .facultatif { font-weight: 400; color: var(--gris-clair); }

input, select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
  padding: 10px 12px;
  transition: border-color .14s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--gris-clair); }
input:focus, select:focus, textarea:focus { border-color: var(--encre); }
textarea { min-height: 132px; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%),
                    linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.retour { margin-top: var(--s4); font-size: var(--t-sm); min-height: 22px; }
.retour.ok { color: var(--succes); }
.retour.ko { color: var(--erreur); }
.mention {
  margin-top: var(--s4);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--gris);
  max-width: 46ch;
}

/* ── Pages de texte : mentions légales, confidentialité ────────────
   Une colonne, mesure courte. Ces pages se lisent, elles ne se
   parcourent pas : rien d'autre n'est nécessaire. */
.document {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--s8) var(--gouttiere) var(--s9);
}
.document h1 { font-size: var(--t-xl); line-height: 1.2; margin-bottom: var(--s2); }
.document .date {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--gris-clair);
  margin-bottom: var(--s7);
}
.document h2 { font-size: var(--t-md); margin: var(--s7) 0 var(--s3); }
.document p, .document li { font-size: 16px; max-width: 62ch; }
.document p + p { margin-top: var(--s4); }
.document ul { margin: var(--s4) 0; padding-left: var(--s5); }
.document li { margin-bottom: var(--s2); }
.document dl { margin: var(--s4) 0 0; }
.document dt {
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris-clair);
  border-top: 1px solid var(--trait);
  padding-top: var(--s3);
  margin-top: var(--s4);
}
.document dd { margin: var(--s1) 0 0; font-size: 16px; line-height: 1.55; }

/* ── Pied ──────────────────────────────────────────────────────────  */
footer { border-top: 1px solid var(--trait); padding: var(--s6) 0 var(--s7); }
.pied { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s5); flex-wrap: wrap; }
.pied-liens { display: flex; gap: var(--s5); flex-wrap: wrap; }
.pied a { color: var(--gris); text-decoration: none; font-size: var(--t-sm); padding: var(--s2) 0; transition: color .14s ease; }
.pied a:hover { color: var(--encre); }
.pied-mail { font-family: var(--mono); font-size: var(--t-xs) !important; }
.pied-copy { font-size: var(--t-xs); color: var(--gris-clair); font-family: var(--mono); }

/* ═══════════════════════════════════════════════════════════════════
   Responsive — décisions explicites, pas une compression du desktop.
   ═══════════════════════════════════════════════════════════════════ */

/* Grand écran : la mesure de ligne reste bornée, seules les marges
   respirent. Élargir le texte le rendrait moins lisible, pas plus riche. */
@media (min-width: 1440px) {
  :root { --large: 1240px; --gouttiere: 40px; }
}

/* Tablette large : la grille tient, les gouttières se resserrent. */
@media (max-width: 1080px) {
  :root { --gouttiere: 26px; }
  .ouverture-texte { grid-column: 1 / 9; }
  .ouverture-faits { grid-column: 9 / 13; }
  .section-titre { grid-column: 1 / 4; }
  .liste-prestations, .methode-liste, .reserve { grid-column: 4 / 13; }
  .produits-titre { grid-column: 1 / 10; }
  .fiche { column-gap: calc(var(--gouttiere) * 1.6); }
}

/* Tablette : la grille à 12 colonnes ne tient plus. Les blocs passent
   les uns sous les autres, mais les faits d'ouverture deviennent une
   rangée horizontale plutôt qu'une pile — ils restent lisibles en
   parallèle, ce qui était leur raison d'être. */
@media (max-width: 860px) {
  :root { --t-2xl: 34px; }
  .grille { display: block; }
  .ouverture { padding-block: var(--s8) var(--s7); }
  .ouverture h1 { max-width: 18ch; }
  .ouverture-faits { margin-top: var(--s8); }
  /* La grille porte sur la liste elle-même : les dt/dd sont ses enfants,
     pas ceux du conteneur. Flux en colonne pour garder chaque paire
     libellé/valeur alignée verticalement. */
  .ouverture-faits dl, .contact-aparte dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: var(--s5);
  }
  .ouverture-faits dd {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .situation, .prestations, .produits, .methode, .contact { padding-block: var(--s8); }
  .section-titre { margin-bottom: var(--s6); }
  .section-titre .note-titre { max-width: 46ch; }
  .fiche { grid-template-columns: 1fr; row-gap: var(--s7); }
  .contact-aparte { margin-top: var(--s8); }
  .contact-aparte dd { margin-bottom: 0; }
  .reserve { margin-top: var(--s5); }
}

/* Mobile : une colonne stricte. La navigation perd ses ancres — sur un
   écran où l'on fait défiler, elles n'apportent rien — et ne garde que
   l'action utile. Le prix passe sous la description : la lecture
   devient verticale, l'alignement à droite n'a plus de sens. */
@media (max-width: 620px) {
  :root {
    --t-2xl: 29px;
    --t-lg: 21px;
    --t-md: 18px;
    --gouttiere: 22px;
  }
  .entete nav a:not(.appuye) { display: none; }
  .ouverture { padding-block: var(--s7) var(--s6); }
  .ouverture h1 { max-width: none; }
  .ouverture .chapo { margin-bottom: var(--s6); }
  .ouverture-faits { margin-top: var(--s7); }
  .ouverture-faits dd {
    border-bottom: 1px solid var(--trait);
    padding-bottom: var(--s4);
    margin-bottom: var(--s4);
  }
  .ouverture-faits dd:last-child { border-bottom: 0; }

  .situation-recit p { font-size: var(--t-md); }
  .situation-suite { margin-top: var(--s6); }

  .ligne { grid-template-columns: 1fr; row-gap: var(--s3); }
  .prix { text-align: left; }
  .prix span { display: inline; margin-left: var(--s2); }

  .fiche ol { columns: 2; column-gap: var(--s5); }
  .methode-liste li { grid-template-columns: 34px 1fr; column-gap: var(--s3); }
  .ouverture-faits dl, .contact-aparte dl { display: block; }
  .contact-aparte dd { margin-bottom: var(--s5); }

  .actions { gap: var(--s4); }
  /* Cibles tactiles : 44px minimum sur tout ce qui se touche. */
  .bouton { padding: 13px var(--s5); }
}

/* Respect des préférences système : aucune transition imposée. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}