/* ═══════════════════════════════════════════════════════════════════════
   SCROLER — Page « Nous écrire » · LE FORMULAIRE COMMUN
   ───────────────────────────────────────────────────────────────────────
   Suppose fonts.css, base.css puis page.css chargés avant.

   Le formulaire est le même sur les quatre pages : mêmes gestes et même
   grammaire que .sw-devis (site web), .cm-devis (communication) et
   .ia-devis (intelligence artificielle). Un visiteur qui vient d'une
   page de pôle doit reconnaître le même objet.

   Au premier regard : trois tuiles de pôle à cocher, le message, le
   nom, l'adresse e-mail et l'accord. Le reste attend dans un repli
   <details> natif, fermé. Ici, rien n'est coché d'avance et aucun
   panneau n'est piloté : le questionnaire détaillé de chaque pôle vit
   sur sa page, et une phrase y renvoie au-dessus du formulaire.

   Préfixes retenus : .ct-hero, .ct-engagement, .ct-devis, .ct-mention,
   .ct-poles / .ct-pole, .ct-champs / .ct-champ, .ct-plus, .ct-envoi,
   .ct-bilan, .ct-alerte, .ct-miel, .ct-consentement, .ct-oblig,
   .ct-erreur, .ct-joindre, .ct-trou, .ct-merci. Aucun `ct-` n'existe
   ailleurs dans le site, hors merci.html (vérifié par grep sur les
   CSS, les HTML et les JS) : pas de collision.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   1. LE HERO — court, sans WebGL
   ───────────────────────────────────────────────────────────────────────
   C'est une page de service : elle doit s'ouvrir vite et amener au
   formulaire. Toute la lumière vient d'un dégradé, pas d'un canvas.
   ═══════════════════════════════════════════════════════════════════════ */
.ct-hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 108px) clamp(34px, 4.5vw, 58px);
  overflow-x: clip;
}
.ct-hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto;
  height: 460px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 28% 46%, rgba(233,78,26,.11), transparent 70%);
}
.ct-hero h1 { max-width: 18ch; margin-bottom: 22px; }
.ct-hero h1 em { font-style: normal; color: var(--scr-orange); }
.ct-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 3vw, 38px);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. L'ENGAGEMENT DE RÉPONSE
   ───────────────────────────────────────────────────────────────────────
   Les trois promesses déjà affichées au bas des formulaires des pages
   de pôle, sorties ici en clair : c'est la première question qu'on se
   pose avant d'écrire à quelqu'un.
   ═══════════════════════════════════════════════════════════════════════ */
.ct-engagement {
  display: grid;
  gap: 14px;
  margin: clamp(30px, 4vw, 46px) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) { .ct-engagement { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.ct-engagement li {
  padding: 20px 22px;
  border: 1px solid var(--scr-bord);
  border-radius: 16px;
  background: var(--scr-verre-1);
}
.ct-engagement b {
  display: block;
  margin-bottom: 7px;
  font-family: var(--scr-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.ct-engagement span { font-size: 15.5px; line-height: 1.6; color: var(--scr-on-night-soft); }

/* ═══════════════════════════════════════════════════════════════════════
   3. LE CADRE DU FORMULAIRE
   ═══════════════════════════════════════════════════════════════════════ */
.ct-devis { position: relative; }
.ct-devis__cadre {
  position: relative;
  padding: clamp(26px, 3.6vw, 54px);
  border: 1px solid var(--scr-bord);
  border-radius: 24px;
  background: linear-gradient(170deg, var(--scr-verre-2), rgba(var(--scr-matiere-rgb),.72));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* `clip` rogne le halo comme `hidden`, mais sans faire du cadre un
     conteneur de défilement. Avec `hidden`, un saut vers
     #envoi-erreur calait le haut du cadre contre le bord de l'écran,
     sous l'en-tête collant, sans tenir compte de scroll-margin-top.
     `hidden` reste en repli pour les navigateurs qui ignorent `clip`. */
  overflow: hidden;
  overflow: clip;
}
/* Halo orange derrière le formulaire : c'est la zone éclairée de la pièce */
.ct-devis__cadre::before {
  content: "";
  position: absolute;
  left: 50%; top: -180px;
  width: 620px; height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(233,78,26,.20), transparent 68%);
  pointer-events: none;
}
.ct-devis__cadre > * { position: relative; }

/* Le renvoi vers le questionnaire détaillé de chaque pôle, en tête du
   cadre et hors du formulaire : la page généraliste n'en porte aucun,
   et le visiteur doit le lire avant d'avoir rien tapé.             */
.ct-devis__renvoi { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--scr-on-night-soft); }
.ct-devis__renvoi a { color: var(--scr-orange); }

/* Le formulaire n'a plus de cadres intérieurs : les fieldsets ne sont
   là que pour grouper, pas pour dessiner. `min-width: 0` leur retire
   la largeur minimale que le navigateur leur prête, qui pousserait la
   page de côté sur un téléphone.                                   */
.ct-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

/* La mention des obligatoires, en tête : l'astérisque s'explique
   avant d'apparaître.                                              */
.ct-mention { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--scr-on-night-mute); }
.ct-mention .ct-oblig { color: var(--scr-orange); }

/* ═══════════════════════════════════════════════════════════════════════
   4. LES CHAMPS
   ═══════════════════════════════════════════════════════════════════════ */
.ct-champs { display: grid; gap: 20px; }
@media (min-width: 720px) { .ct-champs--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ct-champs--espace { margin-top: 20px; }

/* `align-content: start` : sans elle, un champ voisin plus haut (parce
   qu'il porte une ligne d'aide) étirerait la ligne et décalerait le
   contrôle vers le bas. Les deux colonnes restent alignées en tête. */
.ct-champ { display: grid; align-content: start; gap: 7px; }
/* Libellés en casse normale, dans la police du texte : ils se lisent
   d'une traite, là où des capitales espacées se déchiffrent.       */
.ct-champ > label {
  font-family: var(--scr-font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night);
}
.ct-champ > label .ct-oblig { color: var(--scr-orange); }
.ct-champ input,
.ct-champ select,
.ct-champ textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  /* Trait et fond passent par des jetons locaux (--ct-champ-*) : le
     thème clair les redéfinit en fin de fichier, sans surcharger ce
     sélecteur — qui est aussi celui de la case de consentement.    */
  border: 1px solid var(--ct-champ-trait, rgba(var(--scr-encre-rgb),.16));
  border-radius: 12px;
  /* Verre clair, PLUS clair que le panneau qui le porte : le champ se
     présente comme une surface qui attend la main, pas comme un puits. */
  background: var(--ct-champ-fond, rgba(var(--scr-encre-rgb),.07));
  color: var(--scr-on-night);
  font-family: var(--scr-font);
  font-weight: 300;
  font-size: 16px;               /* 16px : iOS ne zoome pas au focus */
  line-height: 1.5;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.ct-champ textarea { min-height: 128px; resize: vertical; }
.ct-champ select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(var(--scr-encre-rgb),.6) 50%),
                    linear-gradient(135deg, rgba(var(--scr-encre-rgb),.6) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* Le menu déroulant natif emprunte les couleurs du système : sans cette
   ligne, du texte clair sur fond clair sur certains navigateurs.
   La matière en aplat : #17120F la nuit, le papier blanc le jour.
   Les titres de groupe (optgroup) aussi, et droits : certains
   navigateurs les mettent en italique.                            */
.ct-champ optgroup,
.ct-champ option { background: rgb(var(--scr-matiere-rgb)); color: var(--scr-on-night); font-style: normal; }
/* Le .48 des trois frères retombe sous le seuil sur le fond réel du
   champ (le verre clair composé sur le panneau). À .56, le rapport
   monte à 5,2:1 ; au focus, où le champ s'éclaircit, il tient encore
   4,9:1. Assez pâle pour rester un exemple, assez lisible pour être lu. */
.ct-champ input::placeholder,
.ct-champ textarea::placeholder { color: var(--scr-on-night-faint); }
.ct-champ input:hover,
.ct-champ select:hover,
.ct-champ textarea:hover { border-color: var(--ct-champ-trait-survol, rgba(var(--scr-encre-rgb),.3)); }
.ct-champ input:focus,
.ct-champ select:focus,
.ct-champ textarea:focus {
  /* Le focus ÉCLAIRE le champ : on écrit dans la lumière.
     `background-color` et non `background` : la forme courte remettrait
     `background-image` à `none` et effacerait la flèche du menu
     déroulant à l'instant précis où il reçoit le focus.           */
  background-color: var(--ct-champ-fond-focus, rgba(var(--scr-encre-rgb),.1));
  box-shadow: 0 0 0 4px rgba(233,78,26,.16);
}
.ct-champ__aide { font-size: 14px; line-height: 1.55; color: var(--scr-on-night-mute); }

/* État d'erreur : couleur ET texte, jamais la couleur seule */
.ct-champ input[aria-invalid="true"],
.ct-champ select[aria-invalid="true"],
.ct-champ textarea[aria-invalid="true"] { border-color: #FF7A4D; }
.ct-erreur {
  display: none;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: #FFA98B;
}
.ct-erreur::before { content: "▲"; font-size: 9px; }
.ct-champ.is-erreur .ct-erreur { display: flex; }

/* ═══════════════════════════════════════════════════════════════════════
   5. LES TROIS PÔLES — des tuiles à cocher
   ───────────────────────────────────────────────────────────────────────
   Des cases cumulables, pas des boutons radio : une demande peut
   toucher plusieurs pôles, ou aucun qui soit encore arrêté. D'où le
   repère CARRÉ, celui d'une case à cocher, et non la pastille ronde
   d'un choix unique. Le même dessin sur les quatre pages.
   ═══════════════════════════════════════════════════════════════════════ */
.ct-form .ct-poles { margin-bottom: 26px; }
.ct-poles > legend {
  padding: 0;
  margin-bottom: 14px;
  font-family: var(--scr-font);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night);
}
.ct-poles__aide { margin: -6px 0 12px; font-size: 14px; color: var(--scr-on-night-mute); }

.ct-poles__liste { display: grid; gap: 10px; }
@media (min-width: 760px) { .ct-poles__liste { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.ct-pole { position: relative; }
/* L'input reste dans le flux mais invisible : le focus clavier se voit
   sur le label grâce à `:focus-visible + label`.                      */
.ct-pole input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.ct-pole label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  height: 100%;
  padding: 14px 22px;
  border: 1px solid var(--scr-bord);
  border-radius: 16px;
  background: rgba(var(--scr-matiere-rgb),.35);
  font-family: var(--scr-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--scr-on-night-soft);
  cursor: pointer;
  transition: transform .3s var(--scr-ease), border-color .3s ease, color .3s ease, background-color .3s ease;
}
.ct-pole label::before {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-radius: 3px;
  border: 1px solid currentColor;
  transition: background-color .3s ease, border-color .3s ease;
}
.ct-pole label:hover { transform: translateY(-2px); border-color: var(--scr-orange); color: var(--scr-on-night); }
/* Le voile orange passe par color-mix : il suit seul le thème clair,
   où --scr-orange est plus profond.                                */
.ct-pole input:checked + label {
  border-color: var(--scr-orange);
  background: color-mix(in srgb, var(--scr-orange) 16%, transparent);
  color: var(--scr-on-night);
}
.ct-pole input:checked + label::before { background: var(--scr-orange); border-color: var(--scr-orange); }
.ct-pole input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════
   6. LE REPLI « Ajouter des précisions »
   ───────────────────────────────────────────────────────────────────────
   Un <details> natif : il s'ouvre au clavier (Entrée, Espace) comme à
   la souris, sans une ligne de script. Le marqueur du navigateur cède
   la place à un chevron orange, qui pivote à l'ouverture.
   ═══════════════════════════════════════════════════════════════════════ */
.ct-plus { margin: 26px 0 0; border-top: 1px solid var(--scr-bord); border-bottom: 1px solid var(--scr-bord); }
.ct-plus > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--scr-on-night);
  transition: color .3s ease;
}
.ct-plus > summary::-webkit-details-marker { display: none; }
.ct-plus > summary:hover { color: var(--scr-orange); }
.ct-plus > summary:focus-visible { outline: 3px solid var(--scr-orange); outline-offset: 2px; border-radius: 6px; }
.ct-plus > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--scr-orange);
  border-bottom: 1.5px solid var(--scr-orange);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .35s var(--scr-ease);
}
.ct-plus[open] > summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.ct-plus__quoi { display: block; margin-top: 3px; font-size: 14px; color: var(--scr-on-night-mute); }
.ct-plus__corps { padding: 6px 0 24px; }

/* ═══════════════════════════════════════════════════════════════════════
   7. CONSENTEMENT, POT DE MIEL, ENVOI, RÉCAPITULATIF
   ═══════════════════════════════════════════════════════════════════════ */
.ct-consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--scr-on-night-soft);
}
/* La case est enveloppée dans un .ct-champ : sans ces remises à zéro,
   elle hériterait du gabarit des champs de saisie (50 px de haut,
   13 px de renfoncement) et s'afficherait en rectangle vertical.

   Le DESSIN garde les 20 px de la famille, mais la CIBLE fait 44 px :
   les marges négatives font déborder la zone sensible autour du dessin
   sans déplacer d'un pixel ce que l'œil voit. Un contrôle natif ne sait
   pas avoir de cible plus grande que son dessin, d'où le
   `appearance: none` et la case redessinée en ::before. Le mode
   couleurs forcées rend la main au contrôle natif (§ 9).          */
.ct-consentement input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  box-sizing: border-box;
  width: 44px; height: 44px;
  min-height: 0;
  margin: -10px -12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
}
.ct-consentement input::before {
  content: "";
  width: 20px; height: 20px;
  border: 1px solid rgba(var(--scr-encre-rgb),.4);
  border-radius: 5px;
  transition: background-color .25s ease, border-color .25s ease;
}
.ct-consentement input:hover::before { border-color: rgba(233,78,26,.55); }
.ct-consentement input:checked::before {
  background: var(--scr-orange);
  border-color: var(--scr-orange);
  box-shadow: inset 0 0 0 3px rgba(var(--scr-matiere-rgb),.85);
}
/* Le champ de saisie s'éclaire au focus ; la case, elle, n'a pas de
   fond à éclairer — sans ces deux remises à zéro, la règle commune
   peindrait un rectangle de 44 px et son halo autour du dessin.   */
.ct-consentement input:focus { background-color: transparent; box-shadow: none; }
.ct-consentement input:focus-visible { outline: 3px solid var(--scr-orange); outline-offset: -8px; }
/* La bordure d'alerte de l'état d'erreur passe au dessin : l'élément
   lui-même n'a plus de bordure à colorer.                        */
.ct-consentement input[aria-invalid="true"]::before { border-color: #FF7A4D; }
.ct-consentement a { color: var(--scr-orange); }
.ct-consentement .ct-oblig { color: var(--scr-orange); }

/* Pot de miel : invisible pour l'humain, tentant pour le robot. */
.ct-miel {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.ct-envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--scr-bord);
}
.ct-envoi .scr-btn { flex: 0 0 auto; }
.ct-envoi__rassure {
  margin: 0;
  padding: 8px 18px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  background: var(--scr-verre-1);
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}

/* Récapitulatif d'erreurs, en tête du formulaire. role="alert" et
   tabindex="-1" sont posés dans le HTML ; le script y met le focus.
   L'alerte de retour d'échec (.ct-alerte), juste au-dessus du
   formulaire, porte le même dessin.                                */
.ct-bilan,
.ct-alerte {
  margin: 0 0 22px;
  padding: 16px 20px;
  border: 1px solid rgba(255,122,77,.5);
  border-radius: 12px;
  background: rgba(255,122,77,.08);
  font-size: 15px;
  line-height: 1.6;
  color: #FFC3AC;
}
.ct-bilan[hidden] { display: none; }
.ct-bilan p,
.ct-alerte p { margin: 0; }
.ct-bilan ul { margin: 8px 0 0; padding-left: 20px; }
.ct-bilan a { color: inherit; }

/* Retour d'échec : envoi.php renvoie vers #envoi-erreur. Sans cette
   ancre dans l'adresse, l'encadré n'existe pas ; avec elle, `:target`
   l'affiche, JavaScript ou pas. La marge haute le garde sous les
   barres collées en haut de l'écran.                              */
.ct-alerte { display: none; scroll-margin-top: calc(var(--scr-barres-px, 116px) + 14px); }
.ct-alerte:target { display: block; }

/* ═══════════════════════════════════════════════════════════════════════
   8. AUTRES FAÇONS DE NOUS JOINDRE — et les emplacements à remplir
   ───────────────────────────────────────────────────────────────────────
   E-mail, téléphone et adresse, fournis par Quentin le 26/09/2026.
   .ct-trou — pointillés orange et libellé en capitales, même convention
   que le .lg-trou des pages légales — n'a plus d'emplacement à marquer ;
   la règle reste pour la prochaine donnée attendue (horaires d'appel).
   ═══════════════════════════════════════════════════════════════════════ */
.ct-joindre {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) { .ct-joindre { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.ct-joindre li {
  padding: 24px;
  border: 1px solid var(--scr-bord);
  border-radius: 18px;
  background: var(--scr-verre-1);
}
.ct-joindre h3 {
  margin: 0 0 12px;
  font-family: var(--scr-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.ct-joindre p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--scr-on-night-mute); }
.ct-joindre p:last-child { margin-bottom: 0; }

/* L'emplacement lui-même */
.ct-trou {
  display: inline-block;
  padding: 4px 10px;
  border: 1px dashed rgba(233,78,26,.55);
  border-radius: 8px;
  background: rgba(233,78,26,.05);
  font-family: var(--scr-mono);
  font-size: 12px;
  letter-spacing: .08em;
  /* #FF7A3D : sur le verre-1 qui le porte, l'orange vif plafonne à
     4,47:1 — le clair y fait 6,5:1. Le liseré, lui, reste vif.     */
  color: #FF7A3D;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. PRÉFÉRENCES SYSTÈME
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Les tuiles ne se soulèvent plus au survol, le chevron du repli
     bascule sans pivoter.                                        */
  .ct-pole label:hover { transform: none; }
  .ct-pole label,
  .ct-plus > summary,
  .ct-plus > summary::after,
  .ct-consentement input::before,
  .ct-champ input,
  .ct-champ select,
  .ct-champ textarea { transition: none; }
}

@media (forced-colors: active) {
  .ct-hero::before,
  .ct-devis__cadre::before { display: none; }
  .ct-pole input:checked + label { border: 3px solid ButtonText; }
  .ct-trou { border: 1px dashed CanvasText; }
  /* La case de consentement redevient un contrôle natif : un dessin
     maison en ::before ne serait plus visible ici. La cible retombe
     à 20 px, mais son libellé reste cliquable sur toute la ligne. */
  .ct-consentement input {
    appearance: auto;
    -webkit-appearance: auto;
    width: 20px; height: 20px;
    margin: 2px 0 0;
  }
  .ct-consentement input::before { display: none; }
}

@media print {
  .ct-hero::before, .ct-devis__cadre::before { display: none; }
  .ct-devis__cadre { background: #fff; color: #000; border-color: #999; }
  .ct-champ__aide, .ct-plus__quoi, .ct-devis__renvoi { color: #222; }
  .ct-champ input, .ct-champ select, .ct-champ textarea { background: #fff; color: #000; border-color: #999; }
  .ct-plus > summary::after { display: none; }
  .ct-engagement li, .ct-joindre li { background: #fff; border-color: #999; }
  .ct-engagement span, .ct-joindre p { color: #222; }
  .ct-trou { color: #000; border-color: #000; }
  .ct-bilan, .ct-alerte { border-color: #999; background: none; color: #000; }
  .ct-joindre h3 { color: #000; }

  /* ⚠ page.css repeint le fond du pied de page en blanc, mais ses enfants
     gardent leurs couleurs claires : titres, liens et ligne de bas de
     page sortaient en blanc cassé sur blanc, soit un rapport de
     contraste de 1,05:1. Les pages juridiques masquent le pied à
     l'impression, ce qui n'aurait pas de sens ici — un tirage de la page
     de contact doit garder ses liens. On les repasse donc au noir. La
     correction de fond appartient à page.css, qui n'est pas modifié :
     les quatre autres pages restent concernées.                     */
  .scr-foot h2, .scr-foot a, .scr-foot__bottom, .scr-foot__baseline { color: #000; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LA CONFIRMATION — merci.html
   ───────────────────────────────────────────────────────────────────────
   Une page qui n'a qu'un travail : dire que c'est parti, puis laisser
   repartir. Centrée, courte, sans rien à remplir.
   ═══════════════════════════════════════════════════════════════════════ */
.ct-merci { text-align: center; min-height: 62svh; display: grid; align-content: center; }
.ct-merci .scr-eyebrow { justify-content: center; }
.ct-merci h1 {
  margin: 0 0 24px;
  font-size: clamp(30px, 5vw, 62px);
  font-weight: 200;
  letter-spacing: -.03em;
  color: var(--scr-on-night);
}
.ct-merci h1 em {
  font-style: normal;
  color: var(--scr-orange);
  text-shadow: 0 0 38px rgba(233,78,26,.5);
}
.ct-merci .scr-lede { max-width: 68ch; margin-inline: auto; }
.ct-merci .scr-lede + .scr-lede { margin-top: 16px; }
.ct-merci .scr-lede b { font-weight: 400; color: var(--scr-on-night); }
.ct-merci__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }

/* ═══════════════════════════════════════════════════════════════════════
   THÈME CLAIR — l'atelier de jour
   ───────────────────────────────────────────────────────────────────────
   Les jetons de base.css et page.css retournent déjà l'encre, la
   matière et le verre : le cadre, les tuiles et le repli passent seuls
   sur le papier — le voile des tuiles cochées est un color-mix de
   --scr-orange, qui suit le thème. Restent ici ce qu'ils ne savent pas
   dire — les champs, qui doivent rester PLUS clairs que le cadre ;
   les oranges clairs de la nuit (#FF7A4D, #FFA98B, #FFC3AC, #FF7A3D),
   pensés pour éclairer un fond noir et qui tombent entre 1,6 et 2,6:1
   sur le papier ; et les halos, qui deviennent des lavis.

   Les surcharges sont limitées à l'écran : l'impression garde ses
   propres règles (§ 9), qu'un sélecteur plus lourd écraserait.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  /* De jour, le champ est une feuille blanche posée sur le panneau.
     Sans le contraste de la nuit pour le détacher, c'est son trait
     d'encre qui le désigne : plus franc que le filet des dalles.   */
  --ct-champ-fond: rgba(255,255,255,.9);
  --ct-champ-fond-focus: #fff;
  --ct-champ-trait: rgba(27,23,20,.26);
  --ct-champ-trait-survol: rgba(27,23,20,.46);
}

@media screen {
  /* Les dalles deviennent des feuilles : une ombre chaude et courte,
     jamais le noir, qui ferait sale sur le papier.                  */
  :root[data-theme="light"] .ct-devis__cadre { box-shadow: 0 24px 60px -36px rgba(60,35,20,.28); }
  :root[data-theme="light"] .ct-engagement li,
  :root[data-theme="light"] .ct-joindre li { box-shadow: 0 18px 44px -34px rgba(60,35,20,.24); }

  /* La zone éclairée de la pièce devient un lavis : à .20, l'orange
     tacherait le haut du formulaire au lieu de l'éclairer.          */
  :root[data-theme="light"] .ct-devis__cadre::before {
    background: radial-gradient(ellipse at center, rgba(233,78,26,.09), transparent 68%);
  }
  /* Les alertes gardent leur couleur ET leur texte. L'orange profond
     tient 6,6:1 sur le blanc, 5,9:1 dans l'encadré teinté.          */
  :root[data-theme="light"] .ct-champ input[aria-invalid="true"],
  :root[data-theme="light"] .ct-champ select[aria-invalid="true"],
  :root[data-theme="light"] .ct-champ textarea[aria-invalid="true"],
  :root[data-theme="light"] .ct-consentement input[aria-invalid="true"]::before { border-color: var(--scr-orange); }
  :root[data-theme="light"] .ct-erreur { color: var(--scr-orange-d); }
  :root[data-theme="light"] .ct-bilan,
  :root[data-theme="light"] .ct-alerte {
    border-color: rgba(193,61,18,.45);
    background: rgba(233,78,26,.06);
    color: var(--scr-orange-d);
  }

  /* Les emplacements à remplir : même convention, encre orange
     profonde — l'orange de marque y plafonnerait à 4,5:1.           */
  :root[data-theme="light"] .ct-trou { border-color: rgba(193,61,18,.5); color: var(--scr-orange-d); }

  /* Une ombre portée floute un texte sur le papier : le mot orange
     suffit à porter l'accent.                                        */
  :root[data-theme="light"] .ct-merci h1 em { text-shadow: none; }
}