/* =========================================================
   Complément au système visuel repris de la landing Aster.
   Ne contient que ce que la page prestataire ajoute :
   boutons d'appel à l'action, sur-titres, bloc offres.
   Les tokens sont ceux de styles.css, aucun nouveau hex.
   ========================================================= */

/* ---------- Sur-titre ---------- */
.eyebrow {
  margin: 0 0 .9rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .6875rem;
}

/* ---------- Boutons ---------- */
.cta-row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px de hauteur utile au doigt */
  min-height: 44px;
  padding: .7rem 1.5rem;
  border-radius: var(--pill);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.005em;
  transition: transform .16s ease, background .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-pop);
}
.btn--primary:hover { background: var(--ink-soft); }

.btn--ghost {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.btn--ghost:hover { background: var(--bg-warm); }

/* Sur les fonds colorés du hero et du bloc de contact,
   le bouton fantôme reste posé sur du blanc : lisible partout. */
.cta-row--light .btn--ghost { background: rgba(255,255,255,.92); }

/* Anneau de focus visible au clavier, sur les deux fonds */
.btn:focus-visible,
.nav__link:focus-visible,
.nav__brand:focus-visible,
.qa summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.cta-row--light .btn:focus-visible { outline-color: #fff; }

/* ---------- Chapeau centré ---------- */
.lede-center {
  max-width: 40rem;
  margin: 1.6rem auto 0;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- Bloc référence ---------- */
.stat__note {
  max-width: 34rem;
  margin: 1.6rem auto 0;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.6;
}

/* .closing hérite de color:#fff sur un fond doré :
   le texte doit rester clair, pas encre. */
.closing__lede {
  max-width: 32rem;
  margin: 0 auto;
  color: rgba(255, 255, 255, .92);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.closing .cta-row { margin-top: 0; }

/* ---------- Qui suis-je ---------- */
.about {
  padding: 0 var(--gutter) clamp(5rem, 11vw, 11rem);
}
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 34rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  justify-content: center;
  max-width: 66rem;
  margin: 0 auto;
}
.about__portrait {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-warm);
  box-shadow: var(--shadow-card);
}
.about__portrait img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.about__body .display--md { margin-bottom: 1.4rem; }
.about__lede {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}
.about__facts {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .7rem;
}
.about__facts li {
  display: flex;
  align-items: baseline;
  gap: .9rem;
}
.about__fact-key {
  flex: none;
  min-width: 4.5rem;
  color: var(--green);
}
.about__fact-val {
  font-size: .9375rem;
  color: var(--ink-soft);
}

@media (max-width: 820px) {
  .about__grid { grid-template-columns: minmax(0, 30rem); }
  .about__portrait { max-width: 20rem; }
}

/* ---------- Offres ---------- */
.offers {
  padding: 0 var(--gutter) clamp(6rem, 13vw, 13rem);
  text-align: center;
}
.offers .display {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* Trois cartes depuis le 12/08 : la largeur passe de 58 à 70 rem,
   sinon les colonnes tombent sous leur minimum et la grille se
   replie en deux lignes dès 1200 px. */
.offers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1.25rem;
  max-width: 70rem;
  margin: 0 auto;
  text-align: left;
}

.offer {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.offer--alt { background: var(--bg-warm); }

.offer h3 {
  margin: 0 0 .9rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  letter-spacing: -.015em;
  line-height: 1.05;
}

.offer__price {
  margin: 0 0 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 1.375rem;
  color: var(--ink);
}
.offer__unit {
  display: block;
  margin-top: .3rem;
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--muted-light);
}

.offer__list {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: .6rem;
  flex: 1;
}
.offer__list li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.offer__list .icon--ok { flex: none; margin-top: .18rem; }

.offer__note {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- Bloc référence, tenue en petit écran ---------- */
@media (max-width: 900px) {
  .stat__figure .display--xl { font-size: clamp(3.5rem, 18vw, 6rem); }
}

/* ---------- Navigation en petit écran ----------
   À 390 px, la pilule « marque + 3 liens » dépasse la largeur
   disponible et le nom se fait rogner. On resserre d'abord,
   puis on retire le mot de la marque en dernier recours :
   le losange suffit à identifier le lien d'accueil. */
/* =========================================================
   Correctifs sur le système hérité
   ========================================================= */

/* 1. Saccade du hero.
   Les plaques portaient `filter: saturate(118%)` sur une surface
   plein écran, plus une animation `drift` de 26 s qui anime `scale`.
   Un filtre sur un élément animé force un recomposite à chaque
   image, sur toute la fenêtre. Le mouvement était par ailleurs
   presque invisible. On retire les deux : le crossfade entre
   plaques suffit et ne coûte qu'une transition d'opacité. */
.plate {
  filter: none;
  transform: scale(1.06);
}
.plate.is-on { animation: none; }
.closing__stage .plate--bloom { filter: none; }

/* 2. Textes des panneaux qui se superposent.
   Les panneaux sont en `position: sticky` et s'empilent. Le média
   est opaque et masque celui du dessous, mais `.panel__text` n'avait
   aucun fond : le texte du 3e panneau (colonne 1) venait se poser
   sur celui du 1er, qui occupe la même colonne. Un fond opaque et
   un peu de respiration règlent le recouvrement. */
.panel__text {
  position: relative;
  z-index: 1;
  padding: 1rem 1.1rem;
  margin: -1rem -1.1rem;
  border-radius: var(--r-md);
  background: var(--bg);
}

/* ---------- Captures d'écran dans les panneaux ---------- */
.shot {
  margin: 0;
  width: min(100%, 40rem);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-pop);
}
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption {
  padding: .55rem .8rem;
  background: var(--card);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: -.01em;
}

/* flex-shrink écrasait la pastille de marque au lieu de la laisser
   déborder : le losange et le nom disparaissaient sans que rien
   ne le signale. On fige les éléments, puis on retire le mot. */
.nav__brand,
.nav__link { flex: none; }

/* Le fond de la barre était à 50 % d'opacité : au-dessus du bloc de contact,
   le doré remontait à travers et salissait la pastille d'un halo flou, très
   visible autour des liens. Le fond est opacifié et les pastilles blanches
   deviennent franches. L'effet de verre est conservé, il ne porte plus que
   le flou du décor lointain, pas sa couleur. */
.nav { background: rgba(249, 248, 245, .82); }
.nav__brand,
.nav__link { background: #fff; }
.nav__link--muted { background: #e8e4da; }
.nav__brand { background: var(--ink); }

/* L'ombre d'origine descendait de 10 px avec un flou de 30 : sous la barre,
   elle s'ajoutait aux 3 px de fond et donnait l'illusion d'un liseré clair
   plus épais en bas qu'ailleurs. Mesuré : la barre est pourtant symétrique
   au pixel. L'ombre est resserrée et recentrée. */
.nav {
  box-shadow: 0 1px 2px rgba(16,15,13,.05), 0 4px 14px -8px rgba(16,15,13,.22);
}

/* CORRECTIF iOS, 13/08. Constaté sur iPhone : le fond de la barre débordait
   en marche sous la dernière pastille. C'est un défaut de rendu connu de
   Safari quand `backdrop-filter`, `border-radius` et un centrage par
   `transform` se combinent sur un élément fixe : la couche floutée est
   composée à côté de la boîte au lieu d'y être découpée.

   Les deux causes sont retirées plutôt que contournées. Le flou disparaît,
   compensé par un fond presque opaque, et le centrage passe par les marges
   automatiques, sans transformation. Ne pas réintroduire `backdrop-filter`
   ici : le gain visuel était nul à 82 % d'opacité, le défaut bien réel. */
.nav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(249, 248, 245, .94);
  left: 0;
  right: 0;
  transform: none;
  width: max-content;
  margin-inline: auto;
}

/* En petit écran, la barre atteignait presque les bords de l'écran et les
   quatre pastilles se touchaient. Trois corrections, mesurées en 390 px :
   la barre est ramenée à 88 % de la largeur pour retrouver des marges
   franches, les liens respirent horizontalement, et la pastille de marque
   perd sa largeur excédentaire une fois son nom masqué : elle devient un
   carré au format du losange, au lieu d'un bloc aussi large qu'un lien. */
@media (max-width: 520px) {
  .nav {
    gap: 3px;
    padding: 3px;
    max-width: 88vw;
  }
  .nav__brand,
  .nav__link {
    padding: .5rem .7rem;
    font-size: .8125rem;
    border-radius: 11px;
  }
  .nav__brand {
    padding: .5rem;
    font-size: .9375rem;
  }
}

@media (max-width: 400px) {
  .nav__link { padding: .5rem .55rem; font-size: .78125rem; }
}
/* « Présence Locale » est plus long que les noms envisagés avant lui :
   il est masqué dès 520 px, sinon la nav pousse le bouton Contact
   hors de la pastille. Seul le losange reste sous ce seuil. */
@media (max-width: 520px) {
  .nav__wordmark { display: none; }
}

/* ---------- Formulaire de contact ----------
   Posé sur le bloc doré, qui hérite de color: #fff. Tout ce qui est ajouté
   ici doit rester clair : un token d'encre y devient illisible. Les champs
   sont blancs pour que le texte saisi, lui, reste sombre.
   Trois champs, pas davantage : le tunnel à six champs de la page atelier
   de Heal Aria n'a produit aucune conversion sur du trafic froid. */
.form {
  width: min(100%, 34rem);
  margin: 2rem auto 0;
  display: grid;
  gap: .7rem;
  text-align: left;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}

.form__field { display: grid; gap: .3rem; }

.form__label {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

.form input,
.form textarea {
  width: 100%;
  padding: .6rem .7rem;
  border: 0;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.94);
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
}

.form textarea { resize: vertical; min-height: 4.5rem; }

.form input:focus-visible,
.form textarea:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Le bouton d'envoi porte l'ombre commune aux boutons primaires, qui sur le
   doré se lit comme un fin contour clair. Elle est retirée ici, remplacée
   par une bascule vers un gris clair au survol : le bouton s'éclaircit au
   lieu de s'entourer. La courbe est volontairement lente à l'arrivée. */
.form__send {
  justify-self: start;
  margin-top: .2rem;
  box-shadow: none;
  transition:
    background .28s cubic-bezier(.2, .7, .3, 1),
    color .28s cubic-bezier(.2, .7, .3, 1),
    transform .28s cubic-bezier(.2, .7, .3, 1);
}
.form__send:hover {
  background: var(--bg-warm);
  color: var(--ink);
  transform: translateY(-2px);
}
.form__send:active {
  transform: translateY(0);
  transition-duration: .08s;
}

.form__note {
  margin: 0;
  font-size: .75rem;
  color: rgba(255,255,255,.8);
}

/* ---------- Confirmation d'envoi ----------
   Les deux blocs occupent la même cellule de grille : la hauteur ne bouge
   pas au moment de la bascule, la page ne saute pas sous le pouce. La
   transition sur `visibility` porte un délai égal à la durée du fondu, sinon
   le formulaire resterait accessible au clavier alors qu'il est invisible. */
.form-zone { display: grid; }
.form-zone > * { grid-area: 1 / 1; }

.form {
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.form.is-sent {
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  pointer-events: none;
}

.form__done {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .15rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.form__done.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .55s ease .25s, transform .55s ease .25s, visibility 0s;
}

.form__check {
  width: 46px;
  height: 46px;
  margin-bottom: .6rem;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
}
/* Le cercle puis la coche se tracent, dans cet ordre. Les longueurs sont
   celles des chemins : 57 pour le cercle de rayon 9, 12 pour la coche. */
.form__check-ring { stroke-dasharray: 57; stroke-dashoffset: 57; }
.form__check-mark { stroke-dasharray: 12; stroke-dashoffset: 12; stroke-width: 2; }
.form__done.is-on .form__check-ring {
  animation: trace .55s ease .35s forwards;
}
.form__done.is-on .form__check-mark {
  animation: trace .3s ease .8s forwards;
}
@keyframes trace { to { stroke-dashoffset: 0; } }

.form__done-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.1;
}
.form__done-text {
  margin: 0;
  font-size: 1rem;
  color: rgba(255,255,255,.88);
}

/* Champ piège : masqué sans display:none, que certains robots détectent. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .form__send { justify-self: stretch; text-align: center; }
}

/* ---------- Texte justifié ----------
   Demandé par Adel le 13/08. Le justifié n'est appliqué qu'aux paragraphes
   de lecture : jamais aux titres, aux libellés, ni aux textes courts des
   cartes, où il créerait des mots isolés étirés sur une ligne entière.
   `hyphens: auto` est indispensable en français, sinon les colonnes étroites
   s'ouvrent en lézardes blanches. */
.lede-center,
.panel__text p,
.about__lede,
.stat__note,
.qa__body p,
.legal p,
.legal li {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---------- Bande des métiers ----------
   Deux listes identiques défilent côte à côte ; l'animation les décale de
   la moitié exacte de la piste, ce qui fait revenir la seconde là où était
   la première. La boucle est donc invisible, sans JavaScript. La bande
   reste basse, c'est un liseré entre deux sections, pas une section. */
.marquee {
  overflow: hidden;
  padding: .9rem 0;
  background: var(--ink);
  color: var(--bg);
  border-block: 1px solid rgba(255,255,255,.08);
  /* Les extrémités s'effacent au lieu d'être tranchées par le bord. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: defile 46s linear infinite;
}

.marquee__list {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  margin: 0;
  padding: 0 1.2rem;
  list-style: none;
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(249, 248, 245, .82);
  white-space: nowrap;
}

/* Le losange de la marque sert de séparateur. */
.marquee__list li::after {
  content: "◆";
  margin-left: 2.4rem;
  font-size: .5rem;
  vertical-align: middle;
  color: var(--green);
}

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

.marquee:hover .marquee__track { animation-play-state: paused; }

@media (max-width: 620px) {
  .marquee { padding: .7rem 0; }
  .marquee__list { gap: 1.6rem; font-size: .75rem; }
  .marquee__list li::after { margin-left: 1.6rem; }
  .marquee__track { animation-duration: 34s; }
}

/* ---------- Titre « Qui suis-je » ----------
   « Psychologue de formation, » doit rester d'un seul tenant sur sa ligne.
   Mesuré à 1440 px : la colonne fait 544 px et le membre de phrase 612 px à
   la taille commune de 68 px, d'où le plafond abaissé à 3,6rem. En dessous
   de 1300 px le clamp reprend la main et le cas ne se pose plus. */
.about__title { font-size: clamp(1.9rem, 5.2vw, 3.6rem); }

/* ---------- Comparaisons des panneaux ----------
   Deux états juxtaposés, sans libellé « avant / après » : le lecteur fait
   le rapprochement seul. Celui de gauche est toujours l'état subi, marqué
   par --red ; celui de droite l'état tenu, qui reprend --green.

   Ces deux rouges sont les seuls hex ajoutés à la palette de styles.css.
   Un rouge brique désaturé, pas un rouge d'alerte : sur un fond crème et à
   côté d'un vert forêt, un rouge saturé ferait tache et daterait la page. */
:root {
  --red:      #a8392e;
  --red-soft: #f7e4e0;
}

.compare {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.2rem);
  width: min(84%, 34rem);
}

.compare__card {
  display: grid;
  gap: .55rem;
  padding: .7rem .75rem .8rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .93);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 18px 40px -22px rgba(0,0,0,.5);
}

/* La carte tenue est surélevée et plus détachée du fond. La hiérarchie se
   lit avant le texte : c'est ce décalage qui fait la démonstration, pas la
   couleur. Annulé si l'utilisateur a demandé moins d'animation. */
.compare__card:not(.compare__card--fail) {
  transform: translateY(-1.1rem);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 28px 60px -24px rgba(0,0,0,.6);
}
.compare__card--fail { transform: translateY(.5rem); }

/* Ligne du haut : pastille d'état et mesure chiffrée. */
.compare__top {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.compare__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}
.compare__card--fail .compare__dot { background: var(--red); }
.compare__card--fail .compare__top { color: var(--red); }

/* Corps : lignes de contenu schématiques. */
.compare__screen {
  display: grid;
  gap: .3rem;
  padding: .55rem .5rem;
  border-radius: var(--r-sm);
  background: var(--bg-warm);
}
.compare__line {
  height: 6px;
  border-radius: 3px;
  background: rgba(16, 15, 13, .16);
}
.compare__line--short { width: 55%; }
.compare__line--mid   { width: 78%; }
.compare__card--fail .compare__screen { background: var(--red-soft); }
.compare__card--fail .compare__line { background: rgba(168, 57, 46, .28); }

/* Vignette : la photo est là, ou elle ne l'est pas. */
.compare__thumb {
  height: 2.6rem;
  border-radius: var(--r-sm);
  background:
    linear-gradient(135deg, #7d9a58 0%, #b6cd93 45%, #63864a 100%);
}
.compare__thumb--empty {
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px dashed rgba(168, 57, 46, .45);
  color: var(--red);
  font-family: var(--mono);
  font-size: .625rem;
}

/* Ligne d'information : intitulé à gauche, valeur à droite. */
.compare__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  font-size: .6875rem;
  color: var(--ink-soft);
}
.compare__row b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .75rem;
  color: var(--ink);
}
.compare__card--fail .compare__row { color: var(--red); }
.compare__card--fail .compare__row b { color: var(--red); }

/* Zone d'action : le bouton existe d'un côté, il manque de l'autre. */
.compare__action {
  display: grid;
  place-items: center;
  height: 1.9rem;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-size: .75rem;
  font-weight: 500;
}
.compare__action--none {
  background: transparent;
  border: 1px dashed rgba(168, 57, 46, .5);
  color: var(--red);
  font-family: var(--mono);
  font-size: .6875rem;
}

.compare__foot {
  margin: 0;
  font-size: .6875rem;
  line-height: 1.35;
  color: var(--muted);
}
.compare__card--fail .compare__foot { color: var(--red); }

.compare__row b { white-space: nowrap; }

/* En dessous de 620 px, deux colonnes forcent les cartes hors du cadre et
   coupent les valeurs en deux lignes. Vérifié en 390 px. On empile : la
   comparaison se lit alors de haut en bas, l'état subi d'abord, et les
   décalages verticaux qui portaient la hiérarchie en desktop n'ont plus
   lieu d'être. Le média reprend un rapport plus haut pour les contenir. */
@media (max-width: 620px) {
  .compare {
    grid-template-columns: 1fr;
    width: 82%;
    gap: .5rem;
  }
  .compare__card,
  .compare__card:not(.compare__card--fail) { transform: none; }
  .compare__card:not(.compare__card--fail) {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 20px 44px -24px rgba(0,0,0,.6);
  }
  .compare__screen { padding: .5rem .55rem; }
  .compare__thumb { height: 2.1rem; }
  /* Le cadre suit la hauteur des deux cartes empilées. Un ratio fixe les
     coupait en bas : le contenu est plus haut que 3/4 sur le panneau des
     campagnes, qui porte trois lignes de chaque côté. */
  .panel__media {
    aspect-ratio: auto;
    padding-block: 1.6rem;
  }
}

/* ---------- Signature du pied de page ----------
   « Restez Présent » doit tenir sur une seule ligne à toutes les largeurs.
   Le texte fait environ 4,4 fois la taille de police : 20vw le fait tenir
   dans la fenêtre une fois les gouttières retirées, et le minimum descend
   à 4,6rem pour le 390 px. Mesuré, pas estimé. Ne pas remonter ces valeurs
   sans remesurer : `.foot` est en overflow: hidden et couperait le
   débordement sans que rien ne le signale. Un texte plus long qu'ici
   impose de refaire la mesure. */
.foot__wordmark {
  white-space: nowrap;
  font-size: clamp(4.6rem, 20vw, 21rem);
}

/* ---------- Pages légales ----------
   Colonne de lecture unique, sans aucun décor. Ces pages se lisent,
   elles ne se parcourent pas. Elles n'utilisent ni app.js ni plaques. */
.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(7rem, 14vw, 9.5rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}

.legal__title {
  margin: 0 0 .5rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}

.legal__meta {
  margin: 0 0 3rem;
  color: var(--muted);
}

.legal h2 {
  margin: 2.75rem 0 .75rem;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

.legal h2:first-of-type { margin-top: 0; }

.legal p,
.legal li {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.legal ul {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

.legal li { margin-bottom: .5rem; }

.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}

.legal a:hover { text-decoration-color: currentColor; }

.legal__box {
  margin: 0 0 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-warm);
  border-radius: var(--r-md);
}

.legal__box p:last-child { margin-bottom: 0; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  /* La bascule du formulaire reste instantanée, mais elle a toujours lieu :
     le message de confirmation ne doit jamais être escamoté. */
  .form,
  .form__done { transition: none; transform: none; }
  /* La bande cesse de défiler et reste lisible à l'arrêt. */
  .marquee__track { animation: none; }
  .form__done.is-on .form__check-ring,
  .form__done.is-on .form__check-mark { animation: none; stroke-dashoffset: 0; }
}