/* ============================================================================
   SITE — styles propres à Signature Qualité.

   Pourquoi un troisième fichier alors que le socle met les styles de site dans
   un bloc <style> de la page : ce site a cinq pages plus deux pages légales.
   Le même bloc recopié sept fois aurait divergé dès la première correction.
   theme.css et base.css restent ceux du socle, ce fichier est le seul propre
   au site.

   Règle héritée du socle et tenue ici : aucune couleur ni aucune taille de
   texte écrite en dur. Tout passe par les variables de theme.css. Si une
   valeur manque, on l'ajoute au thème.
   ========================================================================= */

/* --- Bandeau de maquette ---------------------------------------------------
   Sur le vert sauge, le texte est en --ink : 5,94. Jamais de blanc ici. */
.maquette {
  background: var(--sauge);
  color: var(--ink);
  text-align: center;
  padding: 12px var(--marge-page);
  font-size: var(--t-petit);
  letter-spacing: 0.02em;
}

/* --- En-tête ---------------------------------------------------------------
   Reprise du composant du socle. Se masque à la descente, revient à la
   remontée. Le menu passe en burger sous 900 px. */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  transition: transform var(--transition);
}
.entete--masque { transform: translateY(-110%); }
.entete__barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pas); min-height: 72px;
}
.entete__marque {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; min-height: 44px;
}
.entete__identite { display: flex; flex-direction: column; gap: 2px; }
.entete__nom {
  font-family: var(--font-titre); font-size: var(--t-sous-titre);
  color: var(--ink); letter-spacing: 0.02em; line-height: 1.1;
}
.entete__signature {
  font-size: var(--t-nano); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.entete__nav { display: flex; align-items: center; gap: 4px; }
.entete__burger {
  display: none; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 14px;
  background: none; border: 1px solid var(--panel);
  border-radius: var(--arrondi); color: var(--ink);
  font-family: var(--font-texte); font-size: var(--t-micro);
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}

/* Entrée de navigation : soulignement au survol et sur la page courante.
   `aria-current="page"` porte l'information, la bordure ne fait que la
   montrer : une indication portée par la seule couleur ne suffirait pas. */
/* DEUX AJOUTS LE 26/09/2026, ET ILS SE TIENNENT.
   Au-delà de 1400 px de fenêtre, quatre intitulés sur six se repliaient sur
   deux lignes, ferrés à gauche sous un « Accueil » et un « Contact » restés
   sur une seule : la barre avait l'air cassée. La cause tient à un pixel. La
   gouttière `--pas` atteint son plafond de 28 px à 1400 px exactement, la
   barre en cède un à la navigation, qui passe de 800 à 799 px pour un contenu
   qui en demande 800. Les entrées se comprimaient donc, et le texte cassait.
   `nowrap` interdit la coupure, et il y a de quoi : la barre garde 127 px
   libres à cette largeur, personne ne débordera.
   `text-align: center` est la ceinture. Si un intitulé plus long finit un
   jour par passer à la ligne malgré tout, il le fera centré sous lui-même et
   non ferré à gauche. C'est ce que Marie a demandé, et ça reste vrai quel que
   soit le libellé. */
.entete__lien {
  padding: 12px 14px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; white-space: nowrap;
  font-size: var(--t-petit); letter-spacing: 0.03em;
  color: var(--body); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.entete__lien:hover { color: var(--ink); border-bottom-color: var(--accent-decor); }
.entete__lien[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent-decor); }

/* SEUIL RELEVÉ DE 900 À 1170 px LE 02/09/2026, ET C'EST UNE MESURE.
   La navigation est passée de cinq à six entrées avec la page de veille. Les
   six intitulés, gouttières comprises, occupent 799 px et ne tiennent sur une
   seule ligne qu'à partir de 1170 px de fenêtre : mesuré au pixel, 1160 les
   fait passer à deux lignes, 1170 non. À 900 px, la barre horizontale
   s'affichait donc en repliant quatre entrées sur deux lignes de 1160 jusqu'à
   901 px, ce que la version à cinq entrées ne faisait que sous 980.
   Le seuil n'est pas un chiffre rond parce que ce n'est pas un choix de
   maquette : c'est la largeur à laquelle le menu cesse de tenir. Il se
   remesure si un intitulé change. */
@media (max-width: 1170px) {
  .entete__burger { display: inline-flex; }
  .entete__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px var(--marge-page) 20px;
  }
  .entete__nav[hidden] { display: none; }
  .entete__lien {
    min-height: 48px; padding: 14px 0;
    font-size: var(--t-texte); border-bottom: 1px solid var(--line);
    /* Le menu replié est une liste de lignes pleine largeur : elles se lisent
       ferrées à gauche. Le centrage de la barre horizontale n'a pas cours. */
    justify-content: flex-start; text-align: left;
  }
  .entete__lien:last-child { border-bottom: 0; }
}

/* --- Monogramme -----------------------------------------------------------
   Dessiné en typographie plutôt qu'importé en image : net à toute taille, et
   aucun fichier à charger. Le M en vert sauge foncé, le B en terracotta, les
   deux lettres légèrement chevauchées. Marqué aria-hidden car le nom du
   cabinet est écrit juste à côté : le lire deux fois n'apporte rien. */
.monogramme {
  font-family: var(--font-titre); line-height: 1;
  display: inline-flex; align-items: baseline;
}
.monogramme span:first-child { color: var(--panel); }
.monogramme span:last-child { color: var(--accent-decor); margin-left: -0.14em; }
.monogramme--hero {
  font-size: var(--t-monogramme); font-weight: 300; line-height: 0.85;
}
.monogramme--hero span:last-child { margin-left: -0.16em; }
.monogramme--entete { font-size: 1.875rem; }
.monogramme--pied { font-size: 2.75rem; }

/* --- Ouverture de section -------------------------------------------------
   Le filet terracotta puis, facultatif, un surtitre en capitales. C'est le
   rythme d'ouverture de toutes les sections du site : filet, surtitre, titre.

   Le surtitre n'utilise pas `.eyebrow` du socle, qui est en police
   monospace : cette charte n'a que deux familles. Candidat à remonter dans le
   socle sous forme de variante. */
.filet { display: block; width: 48px; height: 1px; background: var(--accent-decor); border: 0; margin: 0; }
.filet--large { width: 64px; }
.surtitre {
  display: block; font-size: var(--t-micro); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.surtitre--accent { color: var(--accent); }
.ouverture { display: flex; flex-direction: column; gap: 14px; max-width: 44rem; }
.ouverture h1, .ouverture h2 { margin: 0; }
/* RESSERRÉ LE 26/09/2026, plafond de 60 à 44 px. Même motif que `--section`
   dans theme.css : sur grand écran, un titre de section flottait à 60 px de
   son propre texte, ce qui le détachait du bloc qu'il annonce au lieu de
   l'introduire. */
.ouverture + * { margin-top: clamp(30px, 3.4vw, 44px); }

/* --- Accueil --------------------------------------------------------------
   Le seul bloc centré du site. Répéter le centrage ailleurs lui retirerait
   son statut d'entrée. */
.hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: clamp(16px, 2.2vw, 26px);
  /* Resserré après mesure : avec le monogramme en image, les deux boutons
     d'action tombaient 120 px sous la ligne de flottaison sur un écran de
     800 px de haut. Un appel à l'action qu'il faut aller chercher en défilant
     n'est pas un appel à l'action. */
  padding: clamp(28px, 5vw, 76px) 0 clamp(40px, 6vw, 88px);
}
.hero h1 { margin: 0; letter-spacing: 0.01em; line-height: 1.05; }
.hero__signature {
  font-family: var(--font-titre); font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  color: var(--panel); letter-spacing: 0.06em; margin: 0;
}
.hero__publics {
  font-size: var(--t-petit); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.hero__accroche {
  max-width: 42rem; font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  line-height: 1.7; color: var(--body); margin: 0;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
}

/* --- Actions --------------------------------------------------------------
   Le socle fournit `.bouton`. Ici il monte à 52 px de haut, ce qui est la
   valeur de la charte, et perd son arrondi par le thème. */
.bouton--grand { min-height: 52px; padding: 14px 30px; }

/* Lien qui a la taille d'un bouton sans en être un. Volontairement souligné :
   sans soulignement, seule la couleur le distinguerait du texte. */
.lien-action {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 8px;
  color: var(--accent); font-size: var(--t-texte); letter-spacing: 0.05em;
  text-decoration: underline; text-underline-offset: 6px;
}
.lien-action:hover { color: var(--ink); }

/* Lien d'entrée dans un contenu, en pied de carte ou de section. */
.lien-decouverte {
  display: inline-flex; align-items: center; align-self: flex-start;
  min-height: 44px; font-size: var(--t-petit); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent-decor);
}
.lien-decouverte:hover { color: var(--ink); border-bottom-color: var(--ink); }
.lien-decouverte--bas { margin-top: auto; }

/* --- Les deux entrées -----------------------------------------------------
   Elles ne sont pas à égalité, et la mise en page doit le dire : la carte des
   organismes de formation est plus large et porte l'accent terracotta, la
   seconde est visiblement secondaire. Deux cartes identiques annonceraient
   deux priorités égales, ce qui n'est pas le positionnement. */
.entrees { display: grid; gap: var(--pas); }
@media (min-width: 901px) {
  .entrees { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
}
.entree {
  background: var(--card); padding: clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 18px;
  border-top: 2px solid var(--panel);
}
.entree h2, .entree h3 { margin: 0; }
.entree p { margin: 0; max-width: none; }
.entree--principale { border-top-color: var(--accent-decor); border-top-width: 3px; }

/* --- Les quatre piliers -------------------------------------------------- */
.piliers {
  display: grid; gap: clamp(28px, 4vw, 52px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.pilier { display: flex; flex-direction: column; gap: 14px; }
.pilier h2, .pilier h3 { margin: 0; font-size: var(--t-sous-titre); }
.pilier p { margin: 0; }
.pilier svg { color: var(--panel); }

/* --- Bande de citation ---------------------------------------------------
   Fond vert sauge, texte encre. Une seule fois par page. */
.bande-sauge { background: var(--sauge); color: var(--ink); }
.bande-sauge h2 { color: var(--ink); }
.bande-sauge__grille {
  display: grid; gap: clamp(32px, 6vw, 80px); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.bande-sauge__grille h2 { margin: 0; line-height: 1.25; }
.liste-nue { list-style: none; margin: 0; padding: 0; }
.liste-nue li {
  padding: 18px 0; border-bottom: 1px solid rgba(46, 50, 45, 0.22);
  font-size: var(--t-texte);
}
.liste-nue li:last-child { border-bottom: 0; }

/* --- Grille de filets ---------------------------------------------------
   L'écart de grille vaut 1 px sur un fond alterné, chaque case portant le
   fond principal : le fond alterné apparaît alors comme un réseau de filets
   d'un pixel, sans qu'aucune bordure ne soit déclarée.

   Ce sont des paragraphes, pas des données : ne jamais en faire un <table>. */
.grille-filets {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  grid-template-columns: 1fr;
}
/* Colonnes fixes et non `auto-fit` : `auto-fit` donnait quatre intitulés par
   ligne, donc deux cases vides où le fond du conteneur apparaissait en aplat.

   LA DERNIÈRE CASE OCCUPE LA LIGNE QU'ELLE ENTAME, et cette règle manquait.
   Le commentaire d'origine disait « les grilles de ce site comptent six
   intitulés, 2 et 3 divisent 6 », ce qui était vrai le jour où il a été écrit
   et faux depuis : la grille d'offre de l'accueil en compte cinq, et elle
   affichait donc **une case grise vide** en bas à droite à partir de 560 px,
   c'est-à-dire sur l'écran de tout le monde. Mesuré à trois largeurs le
   10/09/2026, pas déduit : 1 trou à 768 px et 1 à 1280 px.

   Une grille ne doit pas dépendre du nombre d'intitulés qu'on y met, sans quoi
   retirer une prestation casse une mise en page trois pages plus loin. Les
   deux sélecteurs couvrent tous les restes possibles, et ne s'appliquent pas
   quand le compte tombe juste. */
@media (min-width: 560px) {
  .grille-filets { grid-template-columns: repeat(2, 1fr); }
  .grille-filets > :last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 960px) {
  .grille-filets { grid-template-columns: repeat(3, 1fr); }
  .grille-filets > :last-child:nth-child(3n + 1) { grid-column: span 3; }
  .grille-filets > :last-child:nth-child(3n + 2) { grid-column: span 2; }
}
.grille-filets > * {
  background: var(--bg); padding: 26px 24px; margin: 0;
  font-family: var(--font-titre); font-size: var(--t-sous-titre);
  color: var(--ink); max-width: none;
}
/* Les cases doivent porter le fond de LEUR section, sinon le fond du
   conteneur remplit tout et les filets disparaissent. */
.section-alt .grille-filets > * { background: var(--bg-alt); }

/* --- Encart de prestation mise en avant --------------------------------- */
.phare {
  background: var(--card); border-left: 3px solid var(--accent);
  padding: clamp(28px, 4.5vw, 52px);
  display: flex; flex-direction: column; gap: 16px;
}
.phare h2, .phare h3 { margin: 0; }
.phare p { margin: 0; }

/* --- Bloc « à compléter » -----------------------------------------------
   Le seul trait non continu du site, et c'est délibéré : le pointillé dit
   « provisoire » sans avoir à l'écrire. Ce n'est pas un brouillon à retirer
   avant livraison, il disparaît quand l'information arrive. */
.a-completer {
  border: 1px dashed var(--panel); padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 40rem;
}
.a-completer p { margin: 0; }
.a-completer__texte { font-size: var(--t-petit); color: var(--muted); }

/* --- Le portrait ---------------------------------------------------------
   La photographie occupe les deux emplacements, l'accueil et la page À propos.
   Remplacée le 29/08/2026 par une seconde prise, carrée elle aussi, donc rien
   n'a bougé ici.

   **Aucun recadrage.** La première avait d'abord été coupée en 4:5 pour tenir
   le cadre d'origine, ce qui resserrait sur le visage ; c'est le carré fourni
   qui est publié, en entier. Donc pas de `aspect-ratio` ni d'`object-fit` ici :
   le rapport du fichier est le rapport affiché, et les attributs `width` et
   `height` de la balise réservent la place avant que l'image n'arrive.

   La largeur est bornée à 30 rem, et la colonne peut atteindre 530 px. Le carré
   fourni fait 1254 px et le fichier servi 960 : au-delà du double de la borne,
   la finesse ne se voit plus sur aucun écran et le poids, lui, se paie.

   Le trait sauge compte plus qu'avant. La première photographie avait un fond
   bleu-vert froid qui la détachait tout seul ; celle-ci a un fond crème chaud,
   à quelques points du --bg de la page. Sans cette limite nette, elle se
   dissoudrait dans le fond. Ne pas le retirer. */
.portrait-photo {
  display: block; width: 100%; max-width: 30rem; height: auto;
  border: 1px solid var(--sauge);
}

/* --- Emplacement du portrait, gardé ---------------------------------------
   Plus employé sur ce site, gardé pour le template : un site de ce secteur se
   construit souvent avant que la photographie existe, et l'emplacement dit
   qu'il est vide au lieu d'afficher une silhouette ou une initiale dans un
   rond. */
.portrait {
  aspect-ratio: 4 / 5; background: var(--card); border: 1px solid var(--sauge);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; text-align: center; padding: var(--pas);
}
.portrait__titre {
  font-family: var(--font-titre); font-size: var(--t-sous-titre);
  color: var(--panel); margin: 0;
}
.portrait__format {
  font-size: var(--t-micro); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}

/* --- Deux colonnes ------------------------------------------------------ */
.duo {
  display: grid; gap: clamp(32px, 6vw, 80px); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* Texte plus large que l'illustration : la colonne des traits n'a pas besoin
   de la moitié de la page, et un h1 de trois lignes dans une demi-colonne se
   lit mal. */
.duo--texte-large { align-items: center; }
@media (min-width: 900px) {
  .duo--texte-large { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.duo__texte { display: flex; flex-direction: column; gap: 20px; }
.duo__texte h1, .duo__texte h2 { margin: 0; }
.duo__texte p { margin: 0; }

/* --- Formulaire ---------------------------------------------------------
   Étend le composant du socle. Chaque champ porte une étiquette visible :
   jamais de texte d'invite seul dans le champ, qui disparaît à la saisie.
   Le corps de 1 rem sur les champs empêche le zoom automatique d'iOS. */
.form {
  background: var(--bg-alt); padding: clamp(24px, 4vw, 48px);
  display: grid; gap: 22px; max-width: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.form__champ { display: flex; flex-direction: column; gap: 8px; }
.form__champ label { font-size: var(--t-petit); letter-spacing: 0.04em; color: var(--ink); }
.form__champ input,
.form__champ select,
.form__champ textarea {
  min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--panel); border-radius: var(--arrondi);
  background: var(--card); color: var(--ink);
  font-family: var(--font-texte); font-size: var(--t-texte);
}
.form__champ textarea { resize: vertical; }
.form__pleine { grid-column: 1 / -1; }
.form__obligatoire { color: var(--accent); }
.form__facultatif { color: var(--muted); }
.form__envoi {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap;
  align-items: center; gap: 20px;
}
.form__reponse { margin: 0; font-size: var(--t-petit); color: var(--ink); max-width: 34rem; }
.form__mention { margin: 0; font-size: var(--t-petit); color: var(--muted); line-height: 1.75; }
.mentions-donnees { display: flex; flex-direction: column; gap: 12px; max-width: 44rem; }

/* --- Les coordonnées de la page contact --------------------------------
   Cette liste n'existe pas encore dans les pages : elle est écrite le jour de
   l'immatriculation par `completer-identite.mjs`, à la place du bloc « à
   compléter ». La règle est posée d'avance, le 22/09/2026, parce qu'un script
   qui tourne une seule fois dans la vie de l'entreprise ne doit pas ce jour-là
   produire une liste à puces sans mise en forme au milieu d'une page composée.
   Mêmes filets que `.liste-nue`, resserrés : trois lignes, pas une section. */
.coordonnees { list-style: none; margin: 0; padding: 0; }
.coordonnees li {
  padding: 10px 0; border-bottom: 1px solid rgba(46, 50, 45, 0.22);
  font-size: var(--t-petit);
}
.coordonnees li:last-child { border-bottom: 0; }
.coordonnees strong { color: var(--ink); }

/* --- Bande d'appel final -----------------------------------------------
   Sur le vert sauge foncé, le bouton terracotta ne donnerait que 1,17 de
   contraste de surface : sa limite serait invisible, et l'anneau de focus
   avec. Le bouton s'inverse donc, et le focus passe en clair. */
.bande-action { background: var(--panel); color: var(--on-panel); }
.bande-action h2 { color: var(--on-panel); }
.bande-action__contenu {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 26px; max-width: 44rem; margin: 0 auto;
}
.bande-action__contenu h2 { margin: 0; line-height: 1.25; }
.bande-action .bouton {
  background: var(--bg); border-color: var(--bg); color: var(--ink);
}
.bande-action .bouton:hover {
  background: var(--accent-clair); border-color: var(--accent-clair); color: var(--ink);
}
.bande-action :focus-visible { outline-color: var(--bg); }

/* --- Pied de page ------------------------------------------------------- */
.pied { border-top: 1px solid var(--line); padding: clamp(44px, 6vw, 76px) 0 40px; }
.pied__grille {
  display: grid; gap: 36px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.pied__bloc { display: flex; flex-direction: column; gap: 12px; }
.pied__bloc p { margin: 0; max-width: none; }
.pied__nom { font-family: var(--font-titre); font-size: var(--t-sous-titre); color: var(--ink); }
.pied__nav { display: flex; flex-direction: column; }
.pied__nav a, .pied__legal a {
  min-height: 44px; display: flex; align-items: center; font-size: var(--t-petit);
}
.pied__nav a { color: var(--body); text-decoration: none; }
.pied__nav a:hover { color: var(--ink); text-decoration: underline; }
.pied__legal { display: flex; flex-direction: column; gap: 12px; }
.pied__note { font-size: var(--t-petit); color: var(--muted); line-height: 1.7; }

/* --- Article de contenu ------------------------------------------------- */
.prestation { display: flex; flex-direction: column; gap: 12px; }
.prestation h2, .prestation h3 { margin: 0; }
.prestation ul { margin: 0; padding-left: 1.25em; }
.prestation li { margin-bottom: 6px; }
.prestations {
  display: grid; gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1fr;
}
/* Deux colonnes et non `auto-fit` : les quatre prestations tombaient en trois
   plus une, ce qui laisse une ligne bancale. Quatre se lit en carré. */
@media (min-width: 700px) { .prestations { grid-template-columns: repeat(2, 1fr); } }
.texte-long p { max-width: var(--largeur-texte); }
/* --- Une section courte, sur deux colonnes ------------------------------
   AJOUTÉ LE 26/09/2026. Une section qui ne contient qu'un titre et trois
   lignes occupait, sur un écran de 1440, la moitié gauche de deux écrans
   empilés : la colonne de texte s'arrête à 68 caractères, comme partout, et
   les 320 px restants à droite ne portaient rien. C'est ce que Marie a
   appelé « trop d'espace blanc sans rien ».

   Le titre passe donc à gauche et le texte à droite, ce qui remplit la
   largeur sans allonger la ligne de lecture d'un seul caractère. En dessous
   de 1000 px la section redevient un empilement, et le rythme normal
   reprend : sur un téléphone, deux colonnes de 160 px ne seraient pas une
   mise en page mais un accident. */
@media (min-width: 1000px) {
  .section--cote-a-cote > .wrap {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    gap: clamp(32px, 5vw, 72px);
  }
  .section--cote-a-cote > .wrap > .ouverture + * { margin-top: 0; }
}

.pile { display: flex; flex-direction: column; gap: var(--pas); }
.pile--large { gap: clamp(28px, 4vw, 48px); }

/* --- Pages de contenu long et pages légales -----------------------------
   Un titre de section à 44 px est juste pour une page de vitrine et faux pour
   une page de mentions légales, où les niveaux servent à se repérer et non à
   impressionner. Dans un bloc de texte long, les h2 reprennent donc la taille
   d'un sous-titre. */
.texte-long h2 {
  font-size: var(--t-sous-titre);
  margin: clamp(20px, 3vw, 34px) 0 0;
}
.texte-long h2:first-child { margin-top: 0; }
.texte-long ul { margin: 0; padding-left: 1.35em; max-width: var(--largeur-texte); }
.texte-long li { margin-bottom: 8px; }
.texte-long li:last-child { margin-bottom: 0; }
.texte-long strong { color: var(--ink); }

/* Marge haute quand un bloc suit un contenu sans passer par `.pile`. */
/* Un numéro de téléphone ne se coupe pas en fin de ligne : « 07 70 67 » sur
   une ligne et « 84 28 » sur la suivante se recopie de travers, et se lit mal
   à voix haute. */
a[href^="tel:"] { white-space: nowrap; }

.marge-haut { margin-top: var(--pas); }

/* ==========================================================================
   ANIMATIONS REPRISES DU SOCLE

   Quatre composants, choisis parce qu'ils vont dans le sens de la charte :
   sobres, sans mouvement continu, et tous neutralisés sous « réduire les
   animations ».

   Un cinquième a été écarté volontairement, `compteurs-animes` : il faudrait
   des chiffres à faire défiler, et le cabinet n'a ni client, ni audit compté,
   ni taux de réussite. Le composant serait beau et le contenu serait faux.
   ========================================================================= */

/* --- 1. Révélation par volets --------------------------------------------
   Chaque mot remonte de sous une fenêtre qui le masquait. Mécanique du
   composant « Vertical Cut Reveal » de 21st.dev, découpée par mots et non par
   caractères : chaque mot reste un mot, la page se lit normalement, aucune
   copie invisible n'est nécessaire.

   L'état masqué n'existe que si le script a démarré : sans lui, le titre est
   simplement là. */
.volet__mot {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding: 0.16em 0; margin: -0.16em 0; /* place pour accents et jambages */
}
.volet__mot > span { display: inline-block; }
.volets [data-volet] .volet__mot > span {
  transform: translateY(108%);
  transition: transform 460ms cubic-bezier(0.2, 1.06, 0.35, 1);
}
.volets [data-volet].est-ouvert .volet__mot > span { transform: none; }

/* --- 2. Marqueur de section ---------------------------------------------
   Un numéro et un filet. Il donne à une énumération la progression qu'un
   simple enchaînement de titres ne donne pas. Masqué aux technologies
   d'assistance : le titre qui suit dit déjà la même chose.

   Écart avec le socle : la police est celle du texte et non `--font-mono`,
   cette charte n'ayant que deux familles. */
.marque {
  display: flex; align-items: center; gap: 16px;
  font-size: var(--t-micro); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted);
  margin: 0;
}
.marque__no { color: var(--accent); }
.marque__trait { flex: 0 1 120px; height: 1px; background: var(--line-strong); }
.bande-sauge .marque, .bande-action .marque { color: var(--ink); }
.bande-action .marque { color: var(--on-panel); }
.bande-action .marque__no { color: var(--accent-clair); }
.bande-action .marque__trait { background: var(--line-sombre); }

/* --- 3. Rail-règle de progression ---------------------------------------
   Une règle graduée collée au bord gauche, dont le repère descend au rythme
   de la page. Repris du composant « Scroll Bars » de 21st.dev : 41 traits, un
   trait long tous les cinq, et un ressort de raideur 200 amortissement 20,
   intégré à la main puisque ce site n'embarque aucune bibliothèque
   d'animation.

   Purement décoratif : masqué, non cliquable, construit par le script. S'il
   n'apparaît pas, rien n'est perdu. Il n'existe qu'à partir de 1200 px, en
   dessous la marge n'existe pas. */
.regle {
  position: fixed; left: clamp(14px, 1.8vw, 26px); top: 50%;
  transform: translateY(-50%); z-index: 90;
  display: none; pointer-events: none;
}
@media (min-width: 1200px) { .regle { display: block; } }
.regle__piste { position: relative; display: flex; flex-direction: column; gap: 5px; }
.regle__piste i {
  display: block; height: 1px; width: 9px;
  background: var(--muted); opacity: 0.5;
  transition: background 400ms ease, opacity 400ms ease;
}
.regle__piste i.est-longue { width: 16px; opacity: 0.75; }
.regle__repere {
  position: absolute; left: 0; top: 0;
  height: 2px; width: 26px; background: var(--accent);
  transition: background 400ms ease;
}
/* Sur une bande sombre, des traits foncés disparaîtraient. */
.regle--clair .regle__piste i { background: var(--on-panel); }
.regle--clair .regle__repere { background: var(--on-panel); }
@media print { .regle { display: none; } }

/* --- 4. Signature en pied de page ---------------------------------------
   Le nom en très grand, tout en bas, pour fermer la page. Il tombe bien ici :
   le cabinet s'appelle Signature Qualité.

   La leçon du socle, à ne pas défaire : la première version de ce composant
   était en lettres presque effacées, et Palier l'a refusée à 1,21 de
   contraste, là où un texte de cette taille en exige 3. Masqué aux
   technologies d'assistance ou pas, un texte affiché reste un texte affiché.

   La teinte ci-dessous est mesurée pour CETTE palette : #7F8A76 sur le fond
   crème donne 3,39. La valeur du socle ne s'appliquait pas, elle était
   calculée pour un autre thème. Si on la change, refaire le calcul.

   Le sélecteur est aussi spécifique que `.pied p` qui le précède, sinon la
   taille du texte courant du pied l'emporte et le nom sort à 16 px.

   La taille est plus mesurée que dans le socle : « Signature Qualité » fait
   dix-sept caractères là où « Terra Rossa » en fait onze, et le 14,5vw
   d'origine débordait de l'écran. Mesuré, pas estimé. */
.pied p.pied__signature {
  max-width: var(--largeur-max); margin: clamp(36px, 5vw, 72px) auto 0;
  font-family: var(--font-titre); font-weight: 300;
  font-size: clamp(1.6rem, 9.4vw, 8rem); line-height: 0.85;
  letter-spacing: 0.01em; text-align: center; white-space: nowrap;
  /* Une interligne de 0,85 fait sortir les jambages hors de la boîte : le « g »
     et la queue du « Q » de « Signature Qualité » touchaient le bas de la page.
     Le rembourrage est en em pour suivre la taille de la police. */
  padding-bottom: 0.18em;
  color: #7F8A76; /* seule couleur en dur du site, et elle est mesurée : 3,39 */
}
@media print { .pied p.pied__signature { display: none; } }

/* --- Survol des deux cartes d'entrée ------------------------------------
   Pas d'ombre et pas de déplacement : la charte n'en a pas. Survoler la carte
   allume son lien, ce qui indique que la carte entière est une entrée sans
   rien bouger dans la page. */
.entree:hover .lien-decouverte { color: var(--ink); border-bottom-color: var(--ink); }

/* ==========================================================================
   L'IDENTITÉ REPRISE DU VRAI LOGO

   Le logo fourni dit trois choses que le site ignorait :

   1. le monogramme n'est pas un M à côté d'un B. C'est une ligature : la panse
      du M plonge et passe sous le B. Aucune police ne rend ça, d'où l'image ;
   2. le nom est BICOLORE. « Signature » en vert sauge, « Qualité » en
      terracotta. C'est le geste de marque le plus reconnaissable, et l'écrire
      d'une seule couleur revenait à jeter l'identité ;
   3. un séparateur à point ferme le bloc : filet sauge, point terracotta,
      filet terracotta.
   ========================================================================= */

/* --- Le monogramme, en image ---------------------------------------------
   `monogramme-mb.png` fait 55 Ko pour 420 px de large. Le logo d'origine en
   faisait 893 pour 1254 px, fond crème compris. Le fond a été détaché en
   calculant une opacité par pixel plutôt qu'en seuillant : un seuil aurait
   laissé des franges crème sur les bords adoucis, visibles sur fond coloré. */
.monogramme-image { display: block; height: auto; }
.monogramme-image--entete { width: 42px; }
.monogramme-image--hero { width: clamp(130px, 20vw, 210px); }
.monogramme-image--pied { width: 76px; }

/* --- Le nom, bicolore ----------------------------------------------------
   Le mot est coupé en deux `span` et non en deux nœuds de texte : le nom reste
   un seul mot pour un lecteur d'écran, qui lit « Signature Qualité » d'un
   trait. */
.nom-marque__a { color: var(--panel); }
.nom-marque__b { color: var(--accent); }
.bande-action .nom-marque__a,
.bande-action .nom-marque__b { color: var(--on-panel); }

/* --- Le séparateur à point -----------------------------------------------
   Repris tel quel du logo. Il remplace le filet simple partout où un bloc se
   ferme, plutôt que là où une section s'ouvre : le filet ouvre, le point
   ferme. */
.separateur-point {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0; padding: 0;
}
.separateur-point i {
  display: block; height: 1px; width: clamp(48px, 9vw, 92px);
  background: var(--panel);
}
.separateur-point i:last-child { background: var(--accent-decor); }
.separateur-point b {
  display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-decor);
}

/* ==========================================================================
   LES ANIMATIONS DE SECTION

   Toutes pilotées par un seul observateur, toutes neutralisées sous
   « réduire les animations », et toutes forcées à l'état final à l'impression.
   Aucune n'utilise de bibliothèque : ce site n'en embarque aucune.
   ========================================================================= */

/* --- 1. Le dévoilement de bande ------------------------------------------
   Une bande de couleur ne se contente pas d'apparaître : elle se dévoile de
   bas en haut, comme une feuille qu'on glisse. `clip-path` est animé plutôt
   que la hauteur, ce qui ne provoque aucun recalcul de mise en page et laisse
   le texte immobile pendant le mouvement. */
.js [data-devoile] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js [data-devoile].est-devoile { clip-path: inset(0 0 0 0); }

/* Le contenu de la bande monte en même temps, un peu plus lentement, ce qui
   donne la profondeur. Sans ce décalage, le dévoilement paraît plat. */
.js [data-devoile] > * {
  transform: translateY(34px);
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1) 80ms;
}
.js [data-devoile].est-devoile > * { transform: none; }

/* --- 2. Le filet qui se trace -------------------------------------------
   Il part de zéro et s'étire jusqu'à sa largeur. C'est le geste d'ouverture de
   chaque section, et le voir se tracer en fait un signal plutôt qu'un décor.
   La transformation porte sur l'échelle et non sur la largeur, pour la même
   raison que ci-dessus. */
.js .filet { transform-origin: left center; }
/* L'attribut est porté par la SECTION et non par le filet. Raison mesurée :
   `scaleX(0)` réduit la boîte du filet à zéro largeur, et un élément d'aire
   nulle n'atteint jamais le seuil d'un IntersectionObserver. L'état de départ
   rendait l'élément inobservable, donc l'animation ne partait jamais. */
.js [data-trace] .filet { transform: scaleX(0); transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1); }
.js [data-trace].est-trace .filet { transform: scaleX(1); }
.hero .filet { transform-origin: center; }

/* --- 3. L'entrée du monogramme -------------------------------------------
   Le monogramme monte, se dévoile et se pose. Le séparateur du hero s'ouvre
   ensuite depuis son point central, ce qui reprend exactement le geste du
   logo. C'est la seule animation du site qui dure plus d'une seconde, et elle
   ne joue qu'une fois, à l'ouverture. */
.js .hero__marque {
  opacity: 0; transform: translateY(26px) scale(0.965);
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js .hero.est-entre .hero__marque { opacity: 1; transform: none; }
.js .hero .separateur-point i { transform: scaleX(0); transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1) 520ms; }
.js .hero .separateur-point i:first-child { transform-origin: right center; }
.js .hero .separateur-point i:last-child { transform-origin: left center; }
.js .hero .separateur-point b { transform: scale(0); transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 380ms; }
.js .hero.est-entre .separateur-point i,
.js .hero.est-entre .separateur-point b { transform: none; }

/* --- 4. Le repère de chapitre dans la marge ------------------------------
   Le rail-règle affiche désormais le nom de la section traversée, à la
   verticale, sous le repère. Ça transforme une décoration en repère de
   lecture, et c'est ce qui fait lire « document » plutôt que « page web ».
   Purement décoratif et masqué : le titre de la section est déjà dans la page. */
.regle__chapitre {
  position: absolute; left: 34px; top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: var(--t-nano); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
  opacity: 0; transition: opacity 420ms ease;
}
.regle__chapitre.est-vu { opacity: 1; }
.regle--clair .regle__chapitre { color: var(--on-panel); }

/* Effacé pendant qu'un rail épinglé occupe l'écran : ses cartes glissent
   latéralement et passent sous le repère, qui se retrouve écrit par-dessus
   elles. Le repère est un décor, le contenu passe avant. */
.regle--efface { opacity: 0; transition: opacity 300ms ease; }

/* --- 5. Le glissement de la signature de pied ---------------------------
   Elle arrive par la gauche pendant les derniers écrans de défilement, ce qui
   donne une fin à la page au lieu d'un arrêt. Le déplacement est piloté par le
   script, en pourcentage de sa propre largeur, donc sans débordement possible. */
.js .pied__signature { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js [data-devoile],
  .js [data-devoile] > *,
  .js [data-trace] .filet,
  .js .hero__marque,
  .js .hero .separateur-point i,
  .js .hero .separateur-point b {
    clip-path: none !important; transform: none !important;
    opacity: 1 !important; transition: none !important;
  }
}

@media print {
  .js [data-devoile],
  .js [data-devoile] > *,
  .js [data-trace] .filet,
  .js .hero__marque,
  .js .hero .separateur-point i,
  .js .hero .separateur-point b {
    clip-path: none !important; transform: none !important;
    opacity: 1 !important; transition: none !important;
  }
  .regle__chapitre { display: none; }
}

/* --- L'entrée coordonnée du hero ----------------------------------------
   Le monogramme se pose, puis le titre, le séparateur, la signature et les
   boutons arrivent en cascade. Un décalage régulier de 80 ms : plus court, la
   cascade ne se lit pas ; plus long, on attend. */
.js .hero > *:not(.hero__marque) {
  opacity: 0; transform: translateY(18px);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js .hero.est-entre > *:not(.hero__marque) { opacity: 1; transform: none; }
.js .hero > h1 { transition-delay: 300ms; }
.js .hero > .separateur-point { transition-delay: 380ms; }
.js .hero > .hero__signature { transition-delay: 460ms; }
.js .hero > .hero__publics { transition-delay: 540ms; }
.js .hero > .hero__accroche { transition-delay: 620ms; }
.js .hero > .hero__actions { transition-delay: 700ms; }

@media (prefers-reduced-motion: reduce) {
  .js .hero > *:not(.hero__marque) {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}
@media print {
  .js .hero > *:not(.hero__marque) {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ==========================================================================
   HERO À EXPANSION AU DÉFILEMENT

   Même principe que la section « Commander » de Valbonn'Express : une section
   haute, un intérieur collant qui occupe l'écran, et une progression de 0 à 1
   calculée au défilement. La composition grossit jusqu'à remplir l'écran
   pendant que le texte s'efface.

   Deux choix qui viennent de contraintes réelles :

   1. **Ce sont la largeur et la hauteur qui sont animées, pas une échelle.**
      Une mise à l'échelle aurait rééchantillonné l'image à chaque image de
      l'animation, et l'aurait floutée en fin de course. Le bloc est en
      position absolue, donc changer sa taille ne provoque aucun recalcul de la
      page : le coût est le même qu'une transformation.

   2. **Le texte ne passe jamais par-dessus l'image.** Il s'efface avant que
      l'image ne l'atteigne. Un titre posé sur une image est le cas type d'un
      contraste que personne ne peut garantir : ici l'image mélange du crème
      très clair, du sauge et du terracotta, et aucune couleur de texte ne
      passerait sur les trois.
   ========================================================================== */

.hero-expansion {
  /* La taille au repos est déclarée une fois : le bloc image l'emploie pour
     ses dimensions, et l'indice de défilement pour se placer juste dessous. */
  --repos-l: min(700px, 86vw);
  --repos-h: min(466px, 57vw);
  position: relative;
  /* 180vh : la section ne porte plus que l'animation, le texte étant descendu
     en section à part. Un écran pour voir la composition posée, puis un peu
     moins d'un écran pour l'expansion. */
  height: 180vh;
}
.hero-expansion__fixe {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
}

/* Tout est placé en pourcentage de la hauteur de l'écran, et dans sa moitié
   haute. Raison mesurée : au premier écran, l'intérieur collant n'a pas encore
   atteint le haut de la fenêtre, il est décalé vers le bas par le bandeau de
   maquette et l'en-tête, soit environ 125 px. Un contenu centré verticalement
   se retrouve donc amputé d'autant par le bas, et les boutons d'action
   sortaient de l'écran. */
.hero-expansion__media {
  position: absolute; left: 50%;
  /* Centrée du début à la fin : plus rien d'autre n'occupe cet écran, donc
     plus besoin de la caler en haut pour laisser la place au texte. */
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--repos-l) + (100vw - var(--repos-l)) * var(--pp, 0));
  height: calc(var(--repos-h) + (100vh - var(--repos-h)) * var(--pp, 0));
  overflow: hidden;

  /* Le contour fondu. La composition ne se termine plus par une coupe nette :
     ses quatre bords se dissolvent dans le crème du fond, ce qui la pose dans
     la page au lieu de l'y coller.

     Deux dégradés croisés plutôt qu'un seul : un dégradé ne fond que sur un
     axe, et il faut les quatre côtés. Ils sont recoupés l'un par l'autre
     (`intersect`), sinon leurs zones opaques s'additionneraient et l'image
     resterait entière.

     Le fondu se retire à mesure que l'image gagne l'écran. Gardé jusqu'au
     bout, il laisserait voir le fond sur tout le pourtour d'une image plein
     cadre, ce qui se lit comme un défaut d'affichage et non comme un effet. */
  --fondu: calc(clamp(20px, 3.8vw, 54px) * (1 - var(--pp, 0)));
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-expansion__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 46%;
  display: block;
}

/* Le bloc de texte de l'accueil, en section normale. Il portait la classe
   `hero-expansion__texte` et vivait dans l'écran de l'animation ; il en est
   sorti, parce qu'une image qui grandit finit toujours par atteindre un texte
   immobile, quel que soit le réglage d'opacité. */
.hero-texte__contenu {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: clamp(12px, 1.6vw, 20px);
}
/* LE NOM DE MARQUE A CHANGÉ DE BALISE LE 05/10/2026, pas d'apparence. Il était
   le `h1` de l'accueil, ce qui faisait porter au titre principal de la page le
   nom du cabinet au lieu de ce qu'il vend. Il est devenu un `p` et reprend ici
   mot pour mot la mise en forme qu'il avait, le sélecteur de l'ancien `h1`
   compris : à l'écran, rien ne bouge. */
.hero-texte__contenu h1,
.hero-texte__contenu .nom-marque-titre {
  margin: 0; letter-spacing: 0.01em; line-height: 1.05;
}
.hero-texte__contenu .nom-marque-titre {
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  /* Reprises telles quelles de la règle `h1, h2, h3` du socle, que l'élément
     ne reçoit plus depuis qu'il est un `p`. La graisse est 500, pas 600 : une
     valeur devinée aurait épaissi le nom du cabinet sans que personne ne sache
     pourquoi. */
  font-family: var(--font-titre);
  font-weight: 500;
  color: var(--ink);
  /* `p` impose `max-width: var(--largeur-texte)` dans le socle, ce qui aurait
     coupé le nom en deux lignes sur grand écran. Un `h1` ne la recevait pas. */
  max-width: none;
}

/* Le `h1` est désormais la ligne de proposition, qui portait la classe
   `.hero__signature`. Elle tenait trois mots, elle en tient maintenant sept :
   la hauteur de ligne passe de la valeur des titres à une valeur lisible sur
   deux lignes, et la largeur est bornée pour éviter la ligne trop longue. */
.hero-texte__contenu h1.hero__signature {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.35;
  max-width: 34rem;
  font-weight: 500;
}

/* La phrase de lieu de l'accueil. Volontairement discrète : elle existe pour
   le référencement local et pour le visiteur qui cherche « est-ce qu'elle
   intervient chez moi », pas pour concurrencer l'accroche. */
.hero__lieu {
  max-width: 42rem; margin: 0;
  font-size: var(--t-petit); line-height: 1.7; color: var(--muted);
}
.hero__lieu strong { color: var(--body); font-weight: 600; }

/* L'indice de défilement, qui dit qu'il y a quelque chose à faire. Il
   disparaît dès que l'expansion commence. */
/* Accroché à l'image et non au bas de l'écran. Posé en bas, il tombait sous la
   ligne de flottaison au premier écran : l'intérieur collant n'a pas encore
   atteint le haut de la fenêtre, il est décalé d'environ 125 px par le bandeau
   et l'en-tête, donc son propre bas est hors champ d'autant. */
.hero-expansion__indice {
  position: absolute; top: calc(50% + var(--repos-h) / 2 + 26px); left: 50%;
  transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;
  margin: 0;
  font-size: var(--t-nano); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  opacity: calc(1 - var(--pp, 0) * 4);
  pointer-events: none;
}
.hero-expansion__indice span {
  display: block; width: 1px; height: 26px; background: var(--accent-decor);
  transform-origin: top;
  animation: descendre 1.9s ease-in-out infinite;
}
@keyframes descendre {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* L'indice est le seul élément facultatif de cet écran : il est retiré dès
   que la place manque, plutôt que de dépasser en bas.

   Le seuil est calculé, pas choisi. Au premier écran l'intérieur collant est
   décalé d'environ 125 px ; l'image finit donc à 125 + hauteur/2 + 233, et
   l'indice demande 66 px de plus. Il tient tant que 424 <= hauteur/2, soit à
   partir de 848 px de haut. Marge prise à 860. */
@media (min-width: 900px) and (max-height: 860px) {
  .hero-expansion__indice { display: none; }
}

/* Sous « réduire les animations », l'expansion n'a pas lieu : la section
   redevient une section normale, la composition garde une taille contenue et
   le texte est simplement là. */
@media (prefers-reduced-motion: reduce) {
  .hero-expansion { height: auto; }
  .hero-expansion__fixe {
    position: relative; height: auto;
    padding: clamp(28px, 5vw, 76px) 0 clamp(40px, 6vw, 88px);
    display: flex; flex-direction: column; align-items: center; gap: var(--pas);
  }
  .hero-expansion__media {
    position: relative; left: auto; top: auto; transform: none;
    width: min(560px, 88vw); height: auto; aspect-ratio: 3 / 2;
  }
  .hero-expansion__indice { display: none; }
}

/* À l'impression, même repli : une section de 200vh sortirait sur deux pages
   blanches suivies d'une image. */
@media print {
  .hero-expansion { height: auto; }
  .hero-expansion__fixe { position: relative; height: auto; display: block; }
  .hero-expansion__media {
    position: relative; left: auto; top: auto; transform: none;
    width: 100%; height: auto; aspect-ratio: 3 / 2;
    /* Bords nets à l'impression : un fondu sur papier passe pour une
       impression ratée, pas pour un parti pris. */
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-expansion__indice { display: none; }
}


/* ==========================================================================
   LA SECTION QUALIOPI DE L'ACCUEIL

   Troisième bloc de la page d'accueil. Qualiopi était nommé dans l'accroche,
   dans la carte de la spécialité et dans la liste de l'offre, mais aucun bloc
   n'en parlait.

   LE FAIT EST EN GRAND, LES ÉTAPES EN PETIT. C'est l'inverse de ce qu'on fait
   d'habitude, et c'est délibéré : ce qui décide un organisme de formation n'est
   pas la liste des étapes, c'est de savoir que sans certification il perd
   l'accès aux financements. La phrase porte donc la taille d'un titre.

   LES NUMÉROS SONT DÉCORATIFS AU SENS STRICT, et pourtant ils ne sont pas
   masqués : la liste est un `ol`, donc l'ordre est déjà porté par la structure,
   mais « 01 » « 02 » « 03 » lus à voix haute ne gênent pas et évitent une
   incohérence entre ce qui est vu et ce qui est annoncé.
   ========================================================================== */

.qualiopi__fait {
  margin: clamp(28px, 4vw, 44px) 0 0;
  max-width: 46rem;
  font-family: var(--font-titre);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.4; color: var(--ink);
}
.qualiopi__fait sup { font-size: 0.6em; }

.cycle {
  list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0;
  display: grid; gap: var(--pas);
}
@media (min-width: 860px) {
  .cycle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cycle__etape {
  background: var(--card); padding: clamp(24px, 2.8vw, 36px);
  border-top: 2px solid var(--sauge);
  display: flex; flex-direction: column; gap: 12px;
}
/* Seule la première étape porte l'accent : c'est celle que la plupart des
   visiteurs cherchent, et trois traits terracotta en feraient un motif. */
.cycle__etape:first-child { border-top-color: var(--accent-decor); border-top-width: 3px; }
/* Même traitement que les numéros du rail et de la pile : police de texte,
   capitales espacées. En Cormorant, dont les chiffres sont elzéviriens, « 01 »
   se lisait « oı ». Et trois séries numérotées sur le site qui ne se
   ressembleraient pas seraient trois inventions au lieu d'une convention. */
.cycle__no {
  font-size: var(--t-micro); letter-spacing: 0.22em;
  color: var(--accent);
}
.cycle__etape h3 { margin: 0; font-size: var(--t-sous-titre); }
.cycle__etape p { margin: 0; max-width: none; font-size: var(--t-petit); line-height: 1.7; }
.cycle__etape sup { font-size: 0.7em; }

/* La source est citée dans le bloc, comme Palier publie sa méthode : un
   chiffre réglementaire sans son texte est une affirmation de plus. */
.qualiopi__source {
  margin: var(--pas) 0 0; max-width: 46rem;
  font-size: var(--t-micro); color: var(--muted); line-height: 1.7;
}
.qualiopi .lien-decouverte { margin-top: var(--pas); }


/* ==========================================================================
   L'ARITHMÉTIQUE DE LA COORDINATION

   Haut de la page « Entreprises & organisations ». Un curseur de 3 à 25
   personnes, le nombre de canaux de coordination qui en découle, et le dessin
   de ces canaux.

   CE N'EST PAS UN ORNEMENT. Le paragraphe d'à côté affirme que « des pratiques
   qui tenaient à trois personnes ne tiennent plus à dix ». Le bloc laisse le
   visiteur le vérifier : 3 personnes font 3 canaux, 10 en font 45, 25 en font
   300. L'affirmation devient une courbe qu'on voit monter.

   TOUT EST EN JETONS DE LA CHARTE ET EN FORMES DÉJÀ PRÉSENTES : un cadre à
   angles vifs, des traits, des points. L'arrondi reste l'exception unique de la
   pile de cartes.

   LE CURSEUR N'EST PAS REDESSINÉ à coups de pseudo-éléments : `accent-color`
   suffit à le teinter, et un curseur natif garde son comportement au clavier,
   ses flèches et son annonce vocale.
   ========================================================================== */

.coord {
  border: 1px solid var(--line);
  padding: clamp(22px, 2.6vw, 34px);
  display: flex; flex-direction: column; gap: 14px;
  max-width: 26rem;
}
.coord__titre {
  margin: 0;
  font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.coord__dessin { display: block; width: 100%; height: auto; }
.coord__liens line { stroke: var(--line-strong); }
.coord__points circle { fill: var(--ink); }

.coord__chiffres { margin: 0; font-size: var(--t-petit); color: var(--body); }
/* Le nombre est en police de titre : c'est lui qu'on regarde bouger. */
.coord__nombre {
  font-family: var(--font-titre); font-size: 1.65rem; line-height: 1;
  color: var(--ink);
}
.coord__lecture {
  margin: 0; font-family: var(--font-titre);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--accent);
}

.coord__label {
  margin: 0; font-size: var(--t-micro); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.coord__curseur { width: 100%; accent-color: var(--accent); margin: 0; }
.coord__curseur:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.coord__note { margin: 0; font-size: var(--t-micro); color: var(--muted); line-height: 1.6; }

/* Le dessin apparaît en fondu quand le nombre change, ce qui donne une
   transition douce sans animer 300 lignes une par une. Coupé sous « réduire
   les animations ». */
.coord__dessin { transition: opacity 220ms ease; }
.coord.est-en-cours .coord__dessin { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .coord__dessin { transition: none; }
  .coord.est-en-cours .coord__dessin { opacity: 1; }
}

/* À l'impression, le curseur ne sert à rien : l'état affiché reste, la
   commande disparaît. */
@media print {
  .coord__label, .coord__curseur { display: none; }
}


/* ==========================================================================
   LES CARTES QUI S'EMPILENT

   Portage du composant « Stacking Cards » de Khoa Phan, écrit en React avec
   Tailwind et la bibliothèque Motion. Rien de tout cela n'est ici : ce site
   n'a ni dépendance ni étape de construction, donc la mécanique est refaite en
   CSS collant plus une ligne de script.

   COMMENT ÇA MARCHE. Chaque carte vit dans un étage de hauteur fixe, collé en
   haut de l'écran. Les étages se suivent dans le fil du document, donc la carte
   suivante monte par-dessus la précédente, qui reste collée dessous. Le script
   n'a qu'un rôle : rapetisser les cartes déjà passées, ce qui laisse voir leur
   tranche et donne la pile. Sans script, l'empilement a quand même lieu, il est
   seulement plat.

   LES CARTES SONT OPAQUES, ET CE N'EST PAS UN CHOIX D'ESTHÉTIQUE : une carte
   transparente laisserait lire deux textes superposés le temps du recouvrement.

   L'ÉTAGE EST PLUS HAUT QUE SA CARTE, 76 %. Le quart vide sous la carte est la
   distance de défilement qui sépare deux cartes : sans lui, chacune serait
   remplacée à l'instant où elle arrive.

   LES COINS SONT ARRONDIS, ET C'EST LA SEULE ENTORSE AU PARTI PRIS DU SITE.
   Ailleurs le rayon est de 0 partout, sans exception. Ici, deux cartes qui se
   recouvrent sans coin arrondi ne montrent aucun bord : la pile se lit comme des
   bandes de couleur qui se remplacent, et non comme des objets qui passent l'un
   sur l'autre. C'est le coin à 24 px du composant d'origine qui porte l'effet,
   pas le rapetissement.

   Le collage se fait sous la hauteur de l'en-tête. L'en-tête se masque en
   descendant, mais il revient dès qu'on remonte, et il écrirait alors par-dessus
   le haut de la carte du dessus.
   ========================================================================== */

.empile__pile {
  --pas-pile: clamp(360px, 64vh, 560px);
  --haut-pile: clamp(84px, 10vh, 112px);
  --decalage: clamp(12px, 1.8vh, 24px);
  margin-top: clamp(28px, 4vw, 56px);
}

/* Sans script, les étages restent dans le fil et les cartes se lisent à la
   suite : la hauteur fixe et le collage n'existent que sous `.js`. */
.js .empile__etage { position: sticky; top: var(--haut-pile); height: var(--pas-pile); }
.empile__etage + .empile__etage { margin-top: var(--pas); }
.js .empile__etage + .empile__etage { margin-top: 0; }

.empile__carte {
  margin: 0; padding: clamp(26px, 3.4vw, 56px);
  display: grid; grid-template-columns: 1fr; align-content: center;
  gap: clamp(18px, 2.2vw, 30px);
  /* Angles vifs, comme partout ailleurs. Ces cartes ont porté un rayon de 16 à
     26 px, repris du composant d'origine et assumé comme la seule entorse du
     site ; il a été retiré le 27/08/2026 sur demande, et le parti pris « rayon 0
     partout » ne souffre donc plus d'exception.
     Ce que le rayon servait à faire tient toujours sans lui : le bord d'une
     carte qui en recouvre une autre se voit, les quatre fonds étant de quatre
     couleurs franches. C'eût été un problème si elles étaient de même teinte. */
  border-radius: var(--arrondi);
}
/* Chaque étage décale sa carte un peu plus bas que le précédent : c'est ce
   décalage, et non le seul rapetissement, qui rend la tranche de la pile
   visible. */
.js .empile__carte {
  position: relative; height: 76%;
  transform: scale(var(--e, 1)); transform-origin: top center;
  will-change: transform;
}
.js .empile__etage:nth-child(1) .empile__carte { top: 0; }
.js .empile__etage:nth-child(2) .empile__carte { top: var(--decalage); }
.js .empile__etage:nth-child(3) .empile__carte { top: calc(var(--decalage) * 2); }
.js .empile__etage:nth-child(4) .empile__carte { top: calc(var(--decalage) * 3); }

/* Deux colonnes dès qu'il y a la place : une carte large avec un paragraphe
   centré sur 900 px se lit mal, et le titre perd son bloc. */
@media (min-width: 820px) {
  .empile__carte {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center; align-content: center;
    gap: clamp(32px, 5vw, 80px);
  }
}

/* --- Les cartes illustrées ------------------------------------------------
   Une image par accompagnement, ajoutée le 27/08/2026. Le texte se regroupe
   dans une colonne, l'image occupe l'autre et remplit la carte en hauteur.

   Les colonnes repassent à parts égales : la répartition 0,8 / 1,2 était faite
   pour un titre à gauche et un paragraphe à droite. Avec le texte réuni d'un
   côté, elle donnait une colonne de texte étroite face à une image trop large.

   L'IMAGE NE PARAÎT QU'À PARTIR DE 820 px, et c'est une contrainte du composant
   et non un choix esthétique : la hauteur des cartes est fixée à 76 % d'une
   valeur en `vh`, ce qui fait tenir le collage de la pile. En une seule
   colonne, l'image passerait sous le texte dans une carte qui ne peut pas
   grandir, et l'un des deux déborderait. `loading="lazy"` évite qu'elle soit
   téléchargée pour rien sur un téléphone. */
.empile__visuel { display: none; }

@media (min-width: 820px) {
  /* L'image prend un peu plus que la moitié : à parts égales, une carte se
     lisait comme deux blocs interchangeables, alors que l'image est le sujet. */
  .empile__carte--illustree { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }

  /* Texte centré, comme le haut de page de la page Entreprises. Le pictogramme
     et le numéro se recentrent avec lui : en `flex-direction: column`, leur
     alignement par défaut les collerait à gauche pendant que le texte se
     centre, ce qui se voit tout de suite. */
  .empile__texte {
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(18px, 2.2vw, 30px); min-width: 0; text-align: center;
  }
  .empile__texte .empile__tete { align-items: center; }
  .empile__texte p { max-width: 28rem; }

  /* `min-height: 0` et `align-self: stretch` : sans le premier, un élément de
     grille refuse de descendre sous la hauteur de son contenu et l'image pousse
     la carte ; sans le second, `align-items: center` la laisse à sa hauteur
     naturelle et elle flotte au milieu. */
  .empile__visuel {
    display: block; margin: 0;
    min-width: 0; min-height: 0; align-self: stretch;
  }
  .empile__visuel img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
    /* Angles vifs, comme la carte qui la porte depuis le 27/08. */
    border-radius: var(--arrondi);
  }
}

/* À l'impression, les cartes ne collent plus et reprennent leur hauteur :
   l'image peut donc passer sous le texte sans rien déborder. */
@media print {
  .empile__visuel { display: block; margin: 0; }
  .empile__visuel img { width: 100%; height: auto; }
}

/* Le contenu d'une carte s'efface quand la suivante commence à la recouvrir,
   sinon son titre est coupé en deux par le bord de la carte qui arrive. C'est
   le contenu qui s'efface et jamais le fond : une carte translucide laisserait
   lire deux textes superposés. */
.js .empile__carte > * { opacity: var(--o, 1); }

.empile__tete { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.empile__carte h3 { margin: 0; color: inherit; font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.empile__carte p { margin: 0; max-width: 34rem; color: inherit; line-height: 1.75; }
.empile__no { font-size: var(--t-micro); letter-spacing: 0.22em; }
.empile__carte svg { color: inherit; }

/* Les quatre couleurs et leurs textes sont ceux du rail qu'elles remplacent,
   avec les mêmes rapports de contraste vérifiés. */
.empile__carte--a { background: var(--sauge);       color: var(--ink); }
.empile__carte--b { background: var(--panel);       color: var(--on-panel); }
.empile__carte--c { background: var(--accent);      color: var(--card); }
.empile__carte--d { background: var(--accent-soft); color: var(--ink); }

/* Sous « réduire les animations » et à l'impression, rien ne colle et rien ne
   rapetisse : quatre cartes à la suite, toutes lisibles en entier. Le script
   ne tourne pas non plus dans ce cas, donc `--e` n'est jamais posé. */
@media (prefers-reduced-motion: reduce) {
  .js .empile__etage { position: static; height: auto; }
  .js .empile__etage + .empile__etage { margin-top: var(--pas); }
  .js .empile__carte { position: static; top: auto; height: auto; transform: none; }
  .js .empile__carte > * { opacity: 1; }
}
@media print {
  .js .empile__etage, .empile__etage { position: static; height: auto; }
  .empile__etage + .empile__etage { margin-top: 14px; }
  .js .empile__carte { position: static; top: auto; height: auto; transform: none; }
  /* Le `!important` est nécessaire, et c'est le seul du fichier : les opacités
     posées par le script survivent à l'impression. Imprimer après avoir fait
     défiler la pile sortait sinon deux cartes au texte effacé. */
  .js .empile__carte > * { opacity: 1 !important; }
}


/* ==========================================================================
   RAIL HORIZONTAL ÉPINGLÉ

   Portage du composant « Horizontal Scroll Gallery », déjà repris dans
   Valbonn'Express. La section est volontairement haute, son contenu est collé
   en haut de l'écran, et la progression du défilement à l'intérieur de la
   section est convertie en translation latérale du rail. Un pixel vertical
   vaut un pixel horizontal : le geste reste naturel, sans effet de tapis
   roulant.

   Deux écarts avec la version de Valbonn'Express :

   - **les cartes ne portent aucune image**, seulement un numéro, un titre et
     quelques lignes. Ce site n'a pas de photographies, et un mot seul par
     carte ne disait rien ;
   - **la piste est atteignable au clavier**, `tabindex="0"` et un nom
     accessible. Une zone qui défile sans pouvoir recevoir le focus enferme
     son contenu pour qui n'a pas de souris. C'est le défaut trouvé par Palier
     sur ses propres tableaux le 25/08.

   Sur petit écran rien n'est épinglé : la bande se fait défiler au doigt, avec
   un calage CSS.
   ========================================================================== */

.rail { position: relative; }
.rail__fixe { display: flex; flex-direction: column; justify-content: center; }
.rail__entete { padding: 0 var(--marge-page); }
.rail__entete .ouverture { max-width: min(72vw, 40rem); }

.rail__piste {
  display: flex; gap: clamp(14px, 2vw, 24px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--marge-page) 14px;
  scrollbar-width: none;
  margin-top: clamp(24px, 3vh, 40px);
}
.rail__piste::-webkit-scrollbar { display: none; }
.rail__piste:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.rail__carte {
  position: relative; flex: 0 0 auto; scroll-snap-align: center;
  margin: 0; padding: clamp(22px, 2.4vw, 32px);
  width: clamp(232px, 74vw, 360px);
  min-height: clamp(280px, 46vh, 420px);
  /* Centré, pas réparti aux deux bouts : avec `space-between`, le pictogramme
     restait collé en haut et le texte en bas, et les quatre cartes n'ayant pas
     la même longueur de texte, leurs titres ne s'alignaient jamais. */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 18px;
}
.rail__carte--a { background: var(--sauge); color: var(--ink); }
.rail__carte--b { background: var(--panel); color: var(--on-panel); }
.rail__carte--c { background: var(--accent); color: var(--card); }
.rail__carte--d { background: var(--accent-soft); color: var(--ink); }
.rail__carte h3 { margin: 0; color: inherit; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.rail__carte p { margin: 0; max-width: none; color: inherit; font-size: var(--t-petit); line-height: 1.7; }
.rail__no { font-size: var(--t-micro); letter-spacing: 0.22em; }
.rail__carte svg { color: inherit; }
.rail__bas { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.rail__barre { display: none; }

/* --- Mode épinglé, posé par le script au-delà de 900 px ------------------ */

/* LE PADDING DE SECTION TOMBE EN MODE ÉPINGLÉ, ET C'EST LA CORRECTION DU
   26/09/2026. C'est la cause du défaut que Marie décrivait ainsi : « après le
   double regard, sur PC, l'animation démarre un peu trop tôt ».

   Le script fixe la hauteur de la section à `100vh + course`, et il calcule
   l'avancée des cartes sur cette hauteur-là. Mais `.section` posait 120 px de
   marge en haut et 120 en bas, en `border-box`, donc la boîte de contenu ne
   mesurait pas 1410 px mais 1170. Or c'est la boîte de contenu qui borne un
   élément collant : le bandeau restait épinglé 270 px, pendant que les cartes
   se déplaçaient sur 510 px de défilement.

   Deux conséquences, mesurées à 1440 × 900 avant correction :
   - les cartes commençaient à glisser dès que le HAUT de la section touchait
     le haut de l'écran, c'est-à-dire alors que le titre était encore 120 px
     plus bas et n'avait pas fini de se mettre en place. C'est le « trop tôt » ;
   - à la fin, le bandeau se décollait 120 px avant que les cartes aient fini
     leur course, et le dernier tiers défilait en s'échappant vers le haut.

   Padding à zéro : la boîte de contenu retrouve exactement `100vh + course`,
   la fenêtre d'épinglage vaut exactement la course, et le script n'a rien à
   deviner. La respiration n'est pas perdue, le bandeau fait un écran entier
   et centre son contenu. */
.rail.est-epingle { padding-top: 0; padding-bottom: 0; }
.rail.est-epingle .rail__fixe {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; padding: 0;
}
.rail.est-epingle .rail__piste {
  overflow: visible; width: max-content; scroll-snap-type: none;
  padding: 0 22vw 0 var(--marge-page);
  will-change: transform;
}
.rail.est-epingle .rail__carte {
  width: clamp(280px, 26vw, 380px);
  min-height: clamp(320px, 50vh, 460px);
}
.rail.est-epingle .rail__barre {
  display: block; position: absolute;
  left: var(--marge-page); right: var(--marge-page);
  bottom: clamp(22px, 4vh, 40px); height: 2px; z-index: 3;
  background: var(--line);
}
.rail.est-epingle .rail__barre span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--accent);
}

/* Sous « réduire les animations » et à l'impression, rien n'est épinglé : la
   bande reste une bande, et toutes les cartes se lisent. */
@media (prefers-reduced-motion: reduce) {
  .rail.est-epingle .rail__fixe { position: relative; height: auto; }
  .rail.est-epingle .rail__piste { overflow-x: auto; width: auto; transform: none !important; }
}
@media print {
  .rail { height: auto !important; }
  .rail__fixe { position: relative !important; height: auto !important; }
  .rail__piste {
    overflow: visible !important; width: auto !important; transform: none !important;
    display: grid; grid-template-columns: repeat(2, 1fr); padding: 0;
  }
  .rail__carte { width: auto !important; min-height: 0 !important; }
  .rail__barre { display: none !important; }
}

/* ==========================================================================
   PILE DE CARTES QUI DÉFILE

   Mécanique reprise du composant « Flux Card Hero » : des cartes légèrement
   inclinées empilées derrière une carte principale dont le contenu change tout
   seul, avec des points pour naviguer.

   CE QUI A ÉTÉ GARDÉ : la pile inclinée, le changement automatique, les points
   de navigation. C'est ce qui fait l'effet, et ça évoque un dossier posé sur un
   bureau, ce qui tombe juste pour un cabinet qualité.

   CE QUI A ÉTÉ JETÉ, ET POURQUOI :

   - **la barre de navigation flottante** avec son logo « Mysh.ai », ses quatre
     entrées et son bouton « Login ». Le site en a déjà une, et deux navigations
     sur une page est un défaut, pas une option ;
   - **la fausse interface de chat, les faux projets et les fausses
     statistiques**, « 14 280 / 50 000 jetons », « 1 786 requêtes », « dernier
     lancement il y a 2 minutes ». Ce sont des chiffres inventés sur un site qui
     s'interdit d'en inventer un seul ;
   - **la palette**, verte, bleue, violette, rose et jaune sur un dégradé
     lilas. Quatre couleurs de la charte suffisent ;
   - **les arrondis de 24 px et les ombres portées**, à l'exact opposé du parti
     pris du site.

   CE QUI A ÉTÉ AJOUTÉ, ET QUI MANQUAIT : de quoi arrêter le défilement. Un
   contenu qui change tout seul plus de cinq secondes doit pouvoir être mis en
   pause, sans quoi il devient illisible pour qui lit lentement. Le composant
   d'origine n'a pas ce bouton.
   ========================================================================== */

.pile-cartes { position: relative; }

/* La scène est ce qui porte la pile. Les commandes sont EN DEHORS d'elle, et
   c'est une correction : les cartes de fond, en `inset: 0` sur toute la pile,
   recouvraient les points et le bouton de pause et interceptaient les clics.
   Le bouton était visible, correctement étiqueté, et inutilisable. */
.pile-cartes__scene { position: relative; }

/* Les cartes de fond : des feuilles posées de travers, en aplat, sans ombre.
   Décoratives, masquées, et transparentes au pointeur. */
.pile-cartes__fond {
  position: absolute; inset: 0;
  pointer-events: none;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 900ms ease;
}
.pile-cartes__fond:nth-child(1) { background: var(--sauge);       transform: rotate(2.5deg) scale(0.97); opacity: 0.55; }
.pile-cartes__fond:nth-child(2) { background: var(--accent-soft); transform: rotate(-2deg)  scale(0.98); opacity: 0.7; }
.pile-cartes__fond:nth-child(3) { background: var(--panel);       transform: rotate(1deg)   scale(0.99); opacity: 0.35; }
.pile-cartes__fond.est-releve { opacity: 0.9; }

.pile-cartes__carte {
  position: relative; z-index: 2;
  background: var(--card);
  border-top: 3px solid var(--accent);
  padding: clamp(24px, 3vw, 40px);
  min-height: clamp(260px, 32vw, 340px);
  display: flex; flex-direction: column; justify-content: center;
  transition: background 700ms ease;
}

/* Les quatre contenus sont superposés, un seul visible : la hauteur ne saute
   donc pas d'un contenu à l'autre. */
.pile-cartes__volets { display: grid; }
.pile-cartes__volets > * {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; visibility: hidden;
  transition: opacity 620ms ease, visibility 620ms;
}
.pile-cartes__volets > [data-actif] { opacity: 1; visibility: visible; }
/* En h2 et non en h3 : la page n'a pas de h2 entre son h1 et ces titres, et
   sauter un niveau casse la navigation par titres. */
.pile-cartes__volets h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.pile-cartes__volets p { margin: 0; max-width: none; }

.pile-cartes__commandes {
  display: flex; align-items: center; gap: 14px;
  margin-top: var(--pas);
}
.pile-cartes__points { display: flex; gap: 10px; }

/* Cible tactile de 44 px, obtenue par du rembourrage transparent : le point
   lui-même reste petit, ce qu'on peut atteindre ne l'est pas. */
.pile-cartes__point {
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.pile-cartes__point::before {
  content: ''; display: block; width: 8px; height: 8px;
  background: var(--line-strong);
  transition: background 300ms ease, transform 300ms ease;
}
.pile-cartes__point[aria-selected="true"]::before {
  background: var(--accent); transform: scale(1.5);
}
.pile-cartes__point:focus-visible { outline: 2px solid var(--accent); outline-offset: -8px; }

.pile-cartes__pause {
  min-height: 44px; padding: 8px 16px;
  background: none; border: 1px solid var(--line-strong);
  color: var(--body); cursor: pointer;
  font-family: var(--font-texte); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.pile-cartes__pause:hover { border-color: var(--accent); color: var(--ink); }

/* --- La grille du haut de page ------------------------------------------
   Une seule colonne, à toutes les largeurs : le titre en haut, centré, et la
   pile de cartes en dessous. La pile occupait la colonne de droite, ce qui
   poussait le titre dans la moitié gauche et laissait le haut de page sans
   axe. */
.of-hero__grille {
  display: grid; gap: clamp(32px, 5vw, 72px);
  grid-template-columns: 1fr;
  justify-items: center;
}
.of-hero__texte {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--pas);
  max-width: 46rem;
}
.of-hero__texte .ouverture { max-width: none; align-items: center; }
/* Le filet s'ouvre depuis son milieu et non depuis sa gauche : centré, il
   partirait sinon de côté pour arriver au centre. */
.of-hero__texte .filet { transform-origin: center; }
.of-hero__texte p { margin: 0; }

/* La pile prend la largeur d'une colonne de lecture, pas celle de la page :
   étirée sur toute la largeur, une carte de 300 px de haut se lit comme un
   bandeau, et son texte court perd son bloc. */
.of-hero__grille .pile-cartes { width: 100%; max-width: 42rem; }
.of-hero__grille .pile-cartes__commandes { justify-content: center; }
/* La hauteur plancher de la carte était réglée pour une colonne étroite. Plus
   large, le même texte tient sur deux lignes de moins, et la hauteur d'avant
   laissait un tiers de carte vide. */
.of-hero__grille .pile-cartes__carte { min-height: clamp(200px, 18vw, 250px); }

@media (prefers-reduced-motion: reduce) {
  .pile-cartes__fond, .pile-cartes__carte, .pile-cartes__volets > * { transition: none; }
}

/* À l'impression, les quatre contenus sont mis à la suite : un seul visible
   sortirait trois quarts de l'information à la poubelle. */
@media print {
  .pile-cartes__fond { display: none; }
  .pile-cartes__volets { display: block; }
  .pile-cartes__volets > * { opacity: 1 !important; visibility: visible !important; margin-bottom: 14px; }
  .pile-cartes__commandes { display: none; }
}

/* ============================================================================
   ENTRÉE DU HAUT DE PAGE — transposition du hero « Launch UI » (21st.dev)

   Le composant d'origine est du React sur shadcn et Tailwind. Ce site est en
   HTML et CSS, donc rien n'est copié : c'est l'intention qui est reprise.

   DEUXIÈME VERSION, 27/08/2026. La première ne se voyait pas. Elle était
   pourtant correcte, servie et mesurée : 14 px de montée et un halo à 20 %
   d'opacité derrière un seul bloc. Sur une capture, la page était identique.
   Une animation juste qu'on ne remarque pas ne vaut pas mieux qu'aucune, et
   « sobre » ne veut pas dire « invisible ». Les valeurs sont donc celles qui se
   voient, et les garde-fous du thème sont vérifiés un par un plus bas.

   TROIS GESTES, dans l'ordre où ils se déclenchent.

   1. La cascade. Chaque bloc du haut de page monte de 30 px, avec 150 ms
      d'écart entre deux. L'écart compte autant que la distance : c'est lui qui
      fait lire une cascade plutôt qu'un fondu collectif.
   2. Le halo de section, derrière tout le haut de page. C'est la vraie
      signature visuelle du composant d'origine, et la première version l'avait
      réduit à une lueur derrière une seule carte.
   3. Le bloc de coordination arrive en dernier, avec un léger agrandissement,
      comme l'`appear-zoom` de l'original.

   CE QUI N'EST PAS REPRIS, ET POURQUOI.

   - La pastille arrondie du badge. Cette charte est à zéro arrondi partout,
     c'est son parti pris le plus visible. Le filet plus le surtitre tiennent
     déjà ce rôle dans le vocabulaire d'ici, et deviennent le premier étage.
   - Le halo orange saturé de l'original. Il vient d'une autre palette. Celui-ci
     emploie --accent-decor, le terracotta clair, dont le thème dit qu'il est
     réservé au décor : un halo en est exactement un. Et --sauge en second plan,
     pour que la chaleur ne vire pas au rose.

   FONCTIONNEMENT SANS RIEN. Aucun script, c'est de l'animation CSS pure.
   L'état de repos est l'état VISIBLE, et l'animation part de l'invisible avec
   `backwards`, ce qui la fait tenir pendant le délai. L'original fait
   l'inverse, il pose `opacity-0` en classe et compte sur l'animation pour le
   corriger : une animation qui ne part pas y laisse un haut de page vide. Ici,
   si l'animation ne part pas, tout est là.
   ========================================================================= */

/* --- 1. La cascade -------------------------------------------------------- */

/* La cascade porte sur les enfants directs, quels qu'ils soient : le haut de
   page est passé de quatre blocs à deux le 27/08, et une liste de sélecteurs
   nommés un par un aurait cessé d'animer la moitié sans rien dire. */
[data-entree] > * { --rang: 1; }
[data-entree] > *:nth-child(2) { --rang: 2; }
[data-entree] > *:nth-child(3) { --rang: 3; }

[data-entree] > * {
  animation: entree-monte 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--rang, 1) * 150ms);
}

/* L'accroche : une seule, et plus large que le texte courant. Un haut de page
   se lit en deux secondes, il portait deux paragraphes de quatre lignes.

   `.haut-page` et non `.entree`, qui existe déjà ligne 191 : un composant carte
   à fond blanc et bordure haute. La collision posait un cadre blanc autour du
   titre de la page, et elle ne se voyait qu'à l'écran, pas dans le CSS. */
/* Centré, comme le hero d'origine. C'est le seul endroit du site qui l'est :
   toutes les autres pages sont alignées à gauche, et c'est voulu, un haut de
   page centré est une adresse au visiteur quand un corps de texte centré est
   illisible passé trois lignes. */
.haut-page {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(24px, 3vw, 36px);
  text-align: center;
}
/* L'ouverture reprend le centrage, filet compris : en `flex-direction: column`
   son alignement par défaut étirerait le filet sur toute la largeur. */
/* Largeur en rem et non en ch : l'unité `ch` se calcule sur la police du
   conteneur, du Jost à 16 px, pas sur le Cormorant à 68 px du titre. À 34ch,
   soit environ 270 px, la contrainte ne servait à rien : la largeur minimale
   du mot « accompagnement » à cette taille en fait déjà 455, et `max-width` ne
   descend jamais sous le contenu minimal. */
.haut-page .ouverture { align-items: center; max-width: min(52rem, 100%); }
.haut-page h1 { text-wrap: balance; }
.haut-page__accroche {
  margin: 0; max-width: 46ch;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7;
  color: var(--body); text-wrap: pretty;
}

@keyframes entree-monte {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* La fenêtre monte en grandissant un peu, comme l'`appear-zoom` de l'original.
   Elle n'est pas dans la cascade du haut de page : elle est dans la section
   suivante, donc elle se déclenche au défilement et non au chargement. */
.fenetre {
  animation: entree-bloc 1100ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 120ms;
}

@keyframes entree-bloc {
  from { opacity: 0; transform: translateY(36px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* --- 2. Le halo de section ------------------------------------------------
   Il déborde volontairement la colonne de texte. `overflow-x: clip` sur la
   section garantit qu'il ne pousse jamais la page latéralement, quelle que
   soit sa taille : c'est le critère 10.11, et c'est le défaut qu'a produit la
   première version en bornant le halo à la main. `clip` et non `hidden` :
   `hidden` transformerait la section en zone défilante et forcerait l'axe
   vertical à `auto`, ce qui couperait le rail-règle. */
.section--entree {
  position: relative;
  overflow-x: clip;
}

.lueur {
  position: absolute;
  pointer-events: none;
  /* Centré derrière le titre depuis le 27/08. Il était ancré à droite tant
     qu'un bloc y vivait ; le titre étant maintenant au milieu, c'est lui que
     la lumière doit porter. */
  left: 50%;
  top: 2%;
  width: min(1250px, 112%);
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
  /* Les deux ellipses portent une TAILLE explicite, et ce n'est pas un
     raffinement. Sans taille, un dégradé radial est dimensionné sur le coin le
     plus éloigné : le dégradé sauge valait encore 0,11 d'opacité en atteignant
     le bord gauche de sa boîte, et le bord se voyait comme un trait vertical
     en plein milieu de la page. Mesuré au pixel : saut de rgb(250,247,242) à
     rgb(245,243,237) sur cinq pixels.
     Règle à tenir si on retouche ces valeurs : centre moins rayon doit rester
     positif à gauche, et centre plus rayon rester sous 100 % en bas. Ce sont
     les deux seuls bords visibles, le droit et le haut sortant du cadre. */
  background:
    /* Le foyer est descendu à 58 % de la hauteur, et ce n'est pas un réglage
       d'équilibre : c'est un réglage de contraste. Centré à 46 %, le halo
       passait derrière le surtitre, dont le --muted tombait à 4,37 pour un
       seuil de 4,5, mesuré au pixel. Le grand titre en --ink garde 7,58 sous
       la même lumière, il a la réserve que le petit texte gris n'a pas.
       La lumière porte donc le titre, et laisse la ligne au-dessus tranquille. */
    radial-gradient(ellipse 46% 40% at 50% 50%,
      rgba(198, 124, 91, 0.24) 0%,
      rgba(198, 124, 91, 0.10) 38%,
      rgba(198, 124, 91, 0) 100%),
    radial-gradient(ellipse 38% 33% at 50% 54%,
      rgba(169, 178, 160, 0.16) 0%,
      rgba(169, 178, 160, 0.05) 45%,
      rgba(169, 178, 160, 0) 100%);
}

/* Le halo se déploie le premier et lentement : il installe le décor pendant
   que le texte monte par-dessus. */
/* `entree-halo-centre` et non `entree-halo` : le halo est centré par un
   `translateX(-50%)`, qu'une image-clé n'animant que `scale` écraserait. Il
   partait alors vers la droite en s'agrandissant. */
.section--entree .lueur {
  animation: entree-halo-centre 1600ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 80ms;
}

/* En colonne unique, le bloc de coordination passe SOUS le texte : le halo
   doit descendre avec lui, sinon il se retrouve derrière le surtitre.
   Ce n'est pas un réglage esthétique. Mesuré au pixel sur le rendu composité,
   le surtitre en --muted tombait à 4,63 pour un seuil de 4,5 : conforme, mais
   à 0,13 près, ce qui n'est pas une marge. Descendu, il retrouve 5,29, la
   valeur qu'il a sur le fond nu. */
@media (max-width: 899px) {
  .section--entree .lueur {
    top: auto;
    bottom: -8%;
    right: -22%;
    width: min(760px, 150%);
  }
}

/* Le contenu est positionné, donc peint après le halo, sans index négatif : un
   index négatif se glisse sous le fond de la section dès qu'un ancêtre crée un
   contexte d'empilement, et le halo disparaît sans prévenir. */
.section--entree .wrap, .section--fenetre .wrap { position: relative; }

/* --- Réglages d'accessibilité --------------------------------------------
   Sous « réduire les animations », tout est là d'emblée. Le halo RESTE : c'est
   une couleur de fond, pas un mouvement, et le réglage porte sur le mouvement.
   Le retirer priverait ces visiteurs du décor sans rien leur épargner. */
@media (prefers-reduced-motion: reduce) {
  [data-entree] > *,
  .fenetre,
  .section--entree .lueur,
  .section--fenetre .lueur {
    animation: none;
  }
}

/* Le halo ne s'imprime pas : un aplat de couleur sur du papier ne dit rien et
   coûte de l'encre. */
@media print {
  .lueur { display: none; }
  [data-entree] > *, .fenetre { animation: none; }
  /* À l'impression, la fenêtre perd son cadre et son aplat : un fond teinté
     sur une page A4 coûte de l'encre sans rien apporter, le texte étant déjà
     foncé. */
  .fenetre__panneau { background: none; padding: 0; }
  .grille-filets--fenetre > * { background: #FFF; }
  .fenetre__mention { color: var(--muted); }
}

/* --- 3. La fenêtre --------------------------------------------------------
   Le couple `MockupFrame` + `Mockup` de l'original : un cadre teinté, une
   marge, puis le contenu à l'intérieur dans une couleur franchement différente.
   C'est la marge du cadre qui fait exister l'objet, pas la bordure.

   La couleur est --fenetre, dont la valeur exacte est donnée par Marie. Elle a
   remplacé le vert --panel, puis l'encre --ink, puis quatre teintes cherchées
   à l'œil : le vert annonçait deux fois la même couleur sur une page qui porte
   déjà la bande de contact en sauge, et l'encre faisait un bloc noir dans une
   charte qui n'en a aucun. Les quatre suivantes sont listées dans `theme.css`,
   avec ce qui n'allait dans chacune.

   Le cadre du `MockupFrame` a été retiré au passage. Il ne reste donc qu'un
   ton contre un autre, sans bande ni filet : c'est l'écart de valeur seul qui
   fait exister l'objet. Le texte y est --ink à 9,81 et --body à 6,31, ratios
   calculés et notés dans `theme.css`.

   Zéro arrondi : c'est le seul écart visible avec l'original, et c'est le parti
   pris le plus net de cette charte. */
/* Moins d'air au-dessus que le rythme habituel : la fenêtre est la suite du
   haut de page, pas une section indépendante. Au rythme normal, 115 px de
   chaque côté, les deux blocs se lisaient comme deux sujets séparés. */
.section--fenetre { position: relative; overflow-x: clip; padding-top: clamp(24px, 3vw, 40px); }

/* Ni fond, ni marge, ni filet : la bande claire du cadre a été retirée le
   27/08. Cet élément ne sert plus qu'à porter l'animation et le positionnement
   du halo. */
.fenetre { position: relative; }

.fenetre__panneau {
  background: var(--fenetre);
  color: var(--ink);
  padding: clamp(28px, 4.5vw, 60px);
  display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 44px);
}

.fenetre__panneau h2 { color: var(--ink); margin: 0; }

/* Le filet prend --accent et non --accent-decor : sur le sable, le terracotta
   clair ne donne que 2,44 quand l'accent plein donne 4,14, au-dessus du seuil
   de 3 des éléments non textuels. */
.fenetre__panneau .filet { background: var(--accent); }

/* La grille sur fond sombre. Les séparateurs viennent de --line-sombre, et
   chaque case porte le fond du PANNEAU : sans ça le fond du conteneur remplit
   tout et les filets disparaissent, exactement comme sur `.section-alt`. */
/* Les séparateurs repassent en --line, la version claire : --line-sombre est
   fait pour du texte clair sur fond foncé, et il devenait invisible sur le
   sable. Chaque case porte le fond du PANNEAU, sinon le fond du conteneur
   remplit tout et les filets disparaissent. */
.grille-filets--fenetre { background: var(--line); border-color: var(--line); }
.grille-filets--fenetre > * { background: var(--fenetre); color: var(--ink); }

/* Pas d'`opacity` sur ce texte, et c'est une correction du 27/08/2026.
   Réglée à 0,82 pour le faire lire comme une mention secondaire, elle le
   faisait tomber à 4,32 de contraste sur le panneau, mesuré au pixel, pour un
   seuil de 4,5. Sur le site d'une consultante en conformité, atténuer du texte
   à l'opacité est précisément ce qu'un audit relève.
   La hiérarchie vient de la taille, qui ne coûte aucun contraste : la mention
   est en --t-petit quand les cases sont en --t-sous-titre.
   --body et non --muted : sur ce fond, --muted tombe à 4,18. */
.fenetre__mention {
  margin: 0; max-width: 62ch;
  font-size: var(--t-petit); line-height: 1.7;
  color: var(--body);
}

/* Le halo de la fenêtre, et sa position est tout le sujet.

   Première version : centré sur la fenêtre. Il était donc INTÉGRALEMENT caché
   derrière elle, le panneau étant opaque, et seuls ses bords atteignaient le
   dehors, là où son opacité est déjà nulle. Mesuré : le halo existait bien, de
   755 à 1875, et ne se voyait nulle part.

   C'est le `Glow variant="top"` de l'original : il ne se met pas derrière la
   capture, il déborde AU-DESSUS d'elle. Le centre est donc calé sur le bord
   haut de la fenêtre, et la forme est aplatie pour éclairer large sans monter
   dans le texte.

   Les deux bornes valent ici aussi : centre moins rayon positif à gauche ET en
   haut, sinon le bord de la boîte se voit comme un trait. */
.lueur--fenetre {
  left: 50%; right: auto; top: -14%;
  width: min(1400px, 128%);
  aspect-ratio: 2.3 / 1;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 46% 40% at 50% 42%,
      rgba(198, 124, 91, 0.38) 0%,
      rgba(198, 124, 91, 0.15) 40%,
      rgba(198, 124, 91, 0) 100%),
    radial-gradient(ellipse 38% 34% at 50% 48%,
      rgba(169, 178, 160, 0.28) 0%,
      rgba(169, 178, 160, 0) 100%);
}

.section--fenetre .lueur {
  animation: entree-halo 1600ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 80ms;
}

/* Le halo de la fenêtre garde son centrage pendant son agrandissement, sinon
   il part vers la droite en arrivant. */
@keyframes entree-halo-centre {
  from { opacity: 0; transform: translateX(-50%) scale(0.82); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
.section--fenetre .lueur { animation-name: entree-halo-centre; }


/* ==========================================================================
   AJOUTS DU 02/09/2026

   Trois blocs de l'accueil et la page « Veille réglementaire ». Toutes les
   couleurs sont des jetons du thème, aucune valeur en dur, et les rapports en
   commentaire sont CALCULÉS pour le fond réel de chaque bloc.
   ========================================================================== */

/* --- La nuance du bloc Qualiopi ------------------------------------------
   Elle vit sous l'affirmation sur les financements, à l'endroit exact où le
   raccourci « j'ai Qualiopi, donc c'est finançable » se forme. Filet à gauche
   plutôt qu'un encadré : un cadre en ferait un avertissement, or ce n'est pas
   une alerte, c'est une précision de lecture. */
.qualiopi__nuance {
  margin: var(--pas) 0 0;
  max-width: 46rem;
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 2px solid var(--accent-decor);
  font-size: var(--t-petit); line-height: 1.75;
  color: var(--body); /* 7,20 sur --bg-alt */
}

/* --- La date à venir du bloc Qualiopi ------------------------------------
   La seule information de l'accueil qui périme. Le fond teinté de la famille
   de l'accent la distingue sans faire un bandeau d'alerte, et --accent-dark
   dessus donne 10,15, mesure déjà portée par le thème. */
.qualiopi__alerte {
  margin: var(--pas) 0 0;
  max-width: 46rem;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px clamp(14px, 1.6vw, 20px);
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: var(--t-petit); line-height: 1.75;
}
.qualiopi__alerte > span:last-child { flex: 1 1 20rem; min-width: 0; }
.qualiopi__alerte a { color: inherit; }
/* En police de texte et non en Cormorant, comme tous les nombres du site :
   les chiffres elzéviriens du Cormorant rendent « 1 » et « 2026 » bancals à
   cette taille. Même convention que les numéros du rail et de la pile. */
.qualiopi__alerte__date {
  flex: none;
  font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap;
}
.qualiopi__alerte__date sup { font-size: 0.7em; letter-spacing: 0; }

/* --- La citation signée --------------------------------------------------
   Le titre et la signature sont un seul enfant de `.bande-sauge__grille`.
   C'est structurel et pas cosmétique : la grille est en `auto-fit`, un
   troisième enfant y ouvrirait une troisième colonne sur grand écran et la
   signature se retrouverait à côté de la liste.

   La signature est en --ink, à 5,94 sur le vert sauge. Ni --muted ni --body
   n'y passent, et c'est la raison pour laquelle elle n'est pas un `.surtitre`
   ordinaire : celui-ci est en --muted, qui donne 2,94 sur ce fond. */
.citation { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 28px); }
.citation__signature {
  margin: 0;
  display: flex; align-items: center; gap: 12px;
  font-size: var(--t-micro); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink);
}
.citation__signature::before {
  content: ''; flex: none;
  width: 28px; height: 1px; background: var(--ink);
}

/* --- Le renvoi vers un autre site ---------------------------------------
   PLUS APPELÉ PAR AUCUNE PAGE DEPUIS LE 06/09/2026. Le bloc « Création web »
   de l'accueil l'employait, avec sa colonne « Ce qu'il fait » et ses cinq
   prestations listées ; il a été ramené à deux paragraphes et un bouton quand
   la création de sites est devenue une prestation du cabinet, et il tient
   désormais dans `.texte-long`. Le composant est gardé et non supprimé, comme
   `images/accompagnement-conformite.jpg` : il attend qu'on décide, et
   l'historique git n'est pas un endroit où l'on va chercher une mise en page.
   Deux colonnes, le texte et la liste de ce que l'autre fait. Même partage
   que `.duo`, sans image : il n'y a pas de capture du site à montrer tant que
   son adresse n'est pas publique, et une capture inventée serait pire que
   rien. */
.renvoi {
  display: grid; gap: clamp(28px, 4vw, 64px);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .renvoi { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
}
.renvoi__texte { display: flex; flex-direction: column; gap: var(--pas); }
.renvoi__texte p { margin: 0; }
.renvoi__cote {
  border-top: 2px solid var(--accent-decor);
  padding-top: clamp(18px, 2vw, 24px);
}
.renvoi__intitule {
  margin: 0 0 6px;
  font-size: var(--t-micro); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); /* 4,85 sur --bg-alt, davantage sur --bg */
}


/* ==========================================================================
   LA PAGE DE VEILLE RÉGLEMENTAIRE

   Elle n'invente aucun composant : les cartes reprennent `.cycle`, la
   chronologie reprend le partage date / corps déjà employé par les listes du
   site, et les liens officiels reprennent `.lien-decouverte` avec une flèche
   en plus.

   LE SEUL VRAI POINT D'ATTENTION EST L'OUVERTURE DANS UN NOUVEL ONGLET. Elle
   est signalée deux fois, et il en faut deux : une phrase visible en tête de
   la chronologie pour tout le monde, et une mention dans le nom accessible de
   chaque lien pour qui n'a pas lu la phrase. Un lien qui ouvre un onglet sans
   le dire est le critère RGAA 13.2.
   ========================================================================== */

.veille__maj {
  margin: 0;
  font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}

/* --- Le bloc « À la une » ------------------------------------------------ */

/* Même traitement que `.qualiopi__fait` sur l'accueil : le fait porteur de la
   section est en Cormorant, à taille de sous-titre. Deux blocs qui disent la
   même chose doivent se ressembler. */
.reforme__fait {
  margin: clamp(28px, 4vw, 44px) 0 0;
  max-width: 46rem;
  font-family: var(--font-titre);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.4; color: var(--ink);
}
.reforme__fait sup { font-size: 0.6em; }

/* Les trois dates. `dl` avec un `div` par couple : c'est la seule façon
   valide de grouper un `dt` et son `dd` pour la mise en page. */
.reforme__dates {
  margin: clamp(24px, 3vw, 36px) 0 0; padding: 0;
  display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .reforme__dates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.reforme__date {
  background: var(--bg);
  padding: clamp(18px, 2vw, 24px);
  display: flex; flex-direction: column; gap: 8px;
}
/* La date qui compte est la troisième, et elle est la seule à porter la
   couleur : trois blocs accentués ne seraient plus un accent. */
.reforme__date--accent { background: var(--accent-soft); }
.reforme__date dt {
  font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.reforme__date--accent dt { color: var(--accent-dark); }
.reforme__date dd {
  margin: 0;
  font-family: var(--font-titre); font-size: var(--t-sous-titre);
  line-height: 1.25; color: var(--ink);
}
.reforme__date dd sup { font-size: 0.65em; }

.reforme__consequence { margin: var(--pas) 0 0; max-width: var(--largeur-texte); }

.reforme__titre {
  margin: clamp(36px, 5vw, 60px) 0 0;
  font-size: var(--t-sous-titre);
}

/* Les indicateurs. Grille de cartes blanches, comme `.cycle`, mais en deux
   colonnes et non trois : chaque carte porte un paragraphe entier et non deux
   lignes, et trois colonnes en feraient des colonnes de six mots. */
.indicateurs {
  list-style: none; margin: var(--pas) 0 0; padding: 0;
  display: grid; gap: var(--pas); grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.indicateur {
  background: var(--card);
  padding: clamp(22px, 2.6vw, 32px);
  border-top: 2px solid var(--sauge);
  display: flex; flex-direction: column; gap: 10px;
}
/* Le seul indicateur nouveau du référentiel prend l'accent. C'est la même
   règle que la première étape du cycle sur l'accueil : un accent unique. */
.indicateur--neuf { border-top-color: var(--accent-decor); border-top-width: 3px; }
.indicateur__no {
  margin: 0;
  font-size: var(--t-micro); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); /* 4,72 sur --card, davantage encore */
}
.indicateur h4 {
  margin: 0;
  font-family: var(--font-titre); font-weight: 500; color: var(--ink);
  font-size: 1.2rem; line-height: 1.2;
}
.indicateur p { margin: 0; max-width: none; font-size: var(--t-petit); line-height: 1.75; }

.reforme__mention {
  margin: clamp(28px, 3.5vw, 40px) 0 0; max-width: 46rem;
  font-size: var(--t-petit); line-height: 1.75; color: var(--body);
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 2px solid var(--line-strong);
}

/* --- Le lien vers un texte officiel ------------------------------------- */

.source-officielle { margin: var(--pas) 0 0; max-width: none; }
.lien-officiel {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; /* cible tactile, même règle que les boutons */
  color: var(--accent); /* 4,72 sur --bg-alt, 5,29 sur --bg */
  font-size: var(--t-petit); letter-spacing: 0.02em;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.lien-officiel:hover { color: var(--accent-dark); }
.lien-officiel sup { font-size: 0.7em; }
/* La flèche n'est pas décorative au sens strict, elle dit « ça sort du site ».
   Elle est pourtant `aria-hidden` : l'information est déjà dans le nom
   accessible du lien, en toutes lettres, et la lire deux fois n'apporte rien. */
.lien-officiel__fleche { flex: none; }

/* --- La chronologie ----------------------------------------------------- */

.chrono__avis {
  margin: clamp(24px, 3vw, 36px) 0 0;
  max-width: 46rem; font-size: var(--t-petit); color: var(--muted);
}

.chrono {
  list-style: none; margin: var(--pas) 0 0; padding: 0;
  display: flex; flex-direction: column;
}
.chrono__entree {
  display: grid; gap: 6px clamp(24px, 3vw, 48px);
  grid-template-columns: 1fr;
  padding: clamp(26px, 3vw, 38px) 0;
  border-top: 1px solid var(--line);
}
.chrono__entree:last-child { border-bottom: 1px solid var(--line); }
/* La date en colonne fixe, et non en largeur libre : alignées, les sept dates
   forment la colonne qui fait lire la liste comme une chronologie. En largeur
   libre, chacune se cale sur son propre texte et l'effet disparaît. */
@media (min-width: 800px) {
  .chrono__entree { grid-template-columns: 11rem minmax(0, 1fr); }
}
.chrono__date {
  margin: 0;
  font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  padding-top: 0.35em; /* aligne la ligne de base sur celle du titre en Cormorant */
}
.chrono__date sup { font-size: 0.7em; letter-spacing: 0; }
.chrono__corps { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.chrono__corps h3 { margin: 0; font-size: var(--t-sous-titre); }
.chrono__corps h3 sup { font-size: 0.6em; }
.chrono__corps p { margin: 0; }
.chrono__corps .source-officielle { margin: 2px 0 0; }
/* L'étiquette qui dit « ceci n'est pas un texte contraignant ». Contour et pas
   aplat de couleur : un aplat en ferait une catégorie de plus dans la liste,
   alors que c'est une réserve sur une entrée. */
.chrono__etiquette {
  display: inline-block; vertical-align: middle;
  margin-left: 10px; padding: 4px 10px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-texte);
  font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

/* --- Ce qui vient ------------------------------------------------------- */

.attente {
  list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px);
}
.attente > li {
  padding-left: clamp(18px, 2.2vw, 28px);
  border-left: 2px solid var(--sauge);
  display: flex; flex-direction: column; gap: 10px;
}
.attente h3 { margin: 0; font-size: var(--t-sous-titre); }
.attente h3 sup { font-size: 0.6em; }
.attente p { margin: 0; max-width: var(--largeur-texte); }

/* ==========================================================================
   LES HONORAIRES — ajouté le 05/09/2026

   Trois composants, et un seul est nouveau au sens strict : `.prestation` et
   `.prestations` existaient dans cette feuille depuis le premier jour sans
   qu'aucune page ne les appelle. Ils attendaient exactement ça.

   Aucune couleur, aucune taille et aucun rythme inventés ici : tout vient du
   thème. Le montant est en Cormorant parce que c'est la police des titres de
   ce site, et un prix est ce qu'on lit en premier dans un bloc d'honoraires.
   ========================================================================= */

/* --- La grille de synthèse ----------------------------------------------
   Un vrai <table>, et c'est l'inverse de la consigne de `.grille-filets`
   quelques centaines de lignes plus haut. La règle n'a pas changé : là-bas ce
   sont des intitulés isolés, ici une prestation et son montant sont deux
   données liées, et un lecteur d'écran doit pouvoir annoncer « Audit blanc,
   demi-journée : 390 euros » sans que la personne ait à retenir la colonne.

   Deux colonnes seulement : rien à faire défiler, même à 320 px de large, ce
   qui est le critère 10.11 du RGAA et le seul motif pour lequel un tableau se
   refuse habituellement sur mobile. */
.tarifs {
  width: 100%; border-collapse: collapse; margin: 0;
  max-width: 46rem;
}
.tarifs th, .tarifs td {
  text-align: left; vertical-align: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.tarifs thead th {
  font-family: var(--font-texte); font-weight: 400;
  font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 12px; border-bottom: 1px solid var(--line-strong);
}
.tarifs tbody th {
  font-family: var(--font-texte); font-weight: 400;
  font-size: var(--t-texte); color: var(--body);
  padding-right: clamp(16px, 3vw, 40px);
}
/* Le montant ne se coupe jamais en deux lignes : « 390 » d'un côté et « € »
   de l'autre se lit comme une erreur d'affichage.

   `.tarifs td` ET `.tarifs th` en tête du sélecteur, ce n'est pas de la
   verbosité : `.tarifs th, .tarifs td` plus haut pose `text-align: left` avec
   une classe ET un élément, donc une spécificité que `.tarifs__prix` seul ne
   bat pas. Écrit sans ce préfixe, la colonne des montants restait alignée à
   gauche, et la capture du 05/09/2026 l'a montré avant la mise en ligne. */
.tarifs td.tarifs__prix, .tarifs th.tarifs__prix {
  text-align: right; white-space: nowrap;
  font-family: var(--font-titre); font-size: var(--t-sous-titre);
  color: var(--ink);
}
/* L'en-tête de colonne reste une étiquette, pas un montant : il garde la
   police et la taille des autres en-têtes, et n'hérite que de l'alignement. */
.tarifs thead th.tarifs__prix {
  font-family: var(--font-texte); font-size: var(--t-micro); color: var(--muted);
}
.tarifs tbody tr:last-child th,
.tarifs tbody tr:last-child td { border-bottom: 0; }

/* --- Le montant dans une carte de prestation ----------------------------
   Le filet du montant doit tomber à la MÊME hauteur dans les deux cartes
   d'une ligne, sinon la grille se lit de travers : la capture du 05/09/2026
   montrait 40 px d'écart entre « assistance externalisée », dont la
   description tient sur trois lignes, et « assistance spécialisée », qui en
   fait deux. Les cartes sont déjà de même hauteur, la grille les étirant ;
   c'est la description qui doit absorber la différence, donc elle grandit et
   le montant se retrouve posé au même endroit dans les deux. */
.prestation > p:first-of-type { flex-grow: 1; }
.prestation__prix {
  margin: 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-family: var(--font-titre); font-size: var(--t-sous-titre);
  line-height: 1.65;
  color: var(--ink);
  /* LA PLACE DE LA LIGNE SECONDAIRE EST RÉSERVÉE, qu'elle existe ou non.
     Sans ça, la description qui grandit aligne le BAS des deux blocs, et le
     filet du montant tombe 27 px plus haut dans la carte qui porte un
     « sur devis » que dans celle qui n'en a pas. Mesuré, pas estimé.
     Le calcul reprend les valeurs du bloc lui-même, dans l'ordre où elles
     s'empilent : le retrait au-dessus du filet, la ligne du montant à la
     hauteur de ligne du site, l'écart de la ligne secondaire, puis cette
     ligne. Rien n'y est en dur qui ne soit déjà déclaré ici. */
  min-height: calc(14px + 1.65em + 4px + 1.65 * var(--t-petit));
}
/* La ligne secondaire d'un montant : un minimum d'intervention, un « sur
   devis » qui complète un tarif unitaire. En dessous et en petit, jamais à
   côté : deux montants sur la même ligne se lisent comme une fourchette. */
.prestation__prix span {
  display: block; margin-top: 4px;
  font-family: var(--font-texte); font-size: var(--t-petit);
  color: var(--muted);
}

/* --- La mention en petits caractères ------------------------------------
   En --muted et non en --body : c'est une réserve sur un montant, elle doit
   se lire après lui et non avec lui. 4,85 sur le fond le plus sombre du
   site, donc au-dessus du seuil de 4,5 pour du texte courant. */
.mention-fine {
  margin: 0; font-size: var(--t-petit); color: var(--muted);
  max-width: var(--largeur-texte);
}
.mention-fine em { font-style: italic; }

/* --- L'arrivée sur une ancre --------------------------------------------
   `#honoraires` est la première ancre interne du site, posée le 05/09/2026.
   L'en-tête est `position: sticky` et haut de 72 px : sans cette marge, le
   saut dépose le titre de la section DERRIÈRE la barre de navigation, et la
   personne croit avoir atterri au mauvais endroit. La règle porte sur toute
   section identifiée pour que la prochaine ancre n'ait rien à réapprendre. */
.section[id] { scroll-margin-top: calc(72px + var(--pas)); }

/* --- Le périmètre listé dans un encart phare -----------------------------
   Six intitulés en pleine largeur, à 18 px de retrait chacun, font descendre
   le montant à un écran de son titre : l'encart cesse d'être un encart. Deux
   colonnes dès 560 px le ramènent à sa hauteur.

   Le filet du bas se retire sur les DEUX dernières cases et non sur la
   dernière seule : en deux colonnes, l'avant-dernier intitulé est en bas de
   la première colonne, et son trait pendait dans le vide. */
@media (min-width: 560px) {
  .phare .liste-nue {
    display: grid; grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(24px, 4vw, 56px);
  }
  .phare .liste-nue li:nth-last-child(-n+2) { border-bottom: 0; }
}

/* --- La grille de paliers dans un encart phare --------------------------
   `.tarifs` se borne à 46 rem pour qu'une grille de dix lignes ne s'étire pas
   sur toute la page. Dans un encart, cette borne devient un défaut : le
   tableau s'arrêtait 400 px avant le bord de la carte, alors que la liste
   juste au-dessus allait jusqu'au bout, et le bloc avait deux bords droits.
   Dans un encart, c'est la carte qui borne, pas le tableau. */
.phare .tarifs { max-width: none; }