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

   Quatrième frère de la famille des devis : 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.

   Ce qui change ici, et seulement ça : l'axe se choisit en DEUX temps.
   D'abord le pôle (trois boutons radio), ensuite l'axe propre à ce pôle
   — sept types de projet, neuf secteurs ou cinq types de besoin. Les
   vingt et un panneaux qui suivent sont ceux des trois pages, repris
   tels quels.

   Sans JavaScript, tout est visible et envoyable : les trois listes
   d'axes et les vingt et un panneaux restent affichés. Avec JavaScript,
   un seul panneau reste actif ; les champs des vingt autres sont
   `disabled`, donc jamais transmis.

   Préfixes retenus : .ct-hero, .ct-engagement, .ct-devis, .ct-poles /
   .ct-pole, .ct-axe / .ct-axelist, .ct-panneau, .ct-champs / .ct-champ,
   .ct-cases / .ct-case, .ct-pas, .ct-envoi, .ct-bilan, .ct-miel,
   .ct-consentement, .ct-oblig, .ct-erreur, .ct-joindre, .ct-trou,
   .ct-consigne. Aucun `ct-` n'existe ailleurs dans le site (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(23,18,15,.72));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
/* 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 fil des étapes — repère de lecture, décoratif (aria-hidden).
   Quatre temps ici, et non trois : le pôle vient avant l'axe.       */
.ct-pas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242,239,234,.62);
}
/* Chaque temps est insécable : c'est le fil qui se replie, jamais le
   couple numéro + libellé.                                        */
.ct-pas span { white-space: nowrap; }
/* #FF7A4D et non le vif : sous le halo du cadre (orange à .20),
   #E94E1A retombe à 3,3:1 — l'orange clair y tient 4,8:1.        */
.ct-pas b { color: #FF7A4D; font-weight: 500; }
.ct-pas i { flex: 1 1 24px; height: 1px; background: rgba(242,239,234,.14); }
/* Sous 640 px, quatre temps ne tiennent plus sur une ligne : les
   traits de liaison disparaissent et les temps se replient en
   colonnes, plutôt que d'être hachés au milieu d'un mot.       */
@media (max-width: 640px) {
  .ct-pas { gap: 7px 20px; }
  .ct-pas i { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   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; }
/* `display: grid` l'emporte sur le `display: none` que le navigateur
   attache à l'attribut `hidden` : il faut le rétablir, comme pour
   .ct-axe et .ct-panneau. Seul le champ de budget est concerné — c'est
   le seul champ commun que le script masque selon le pôle.        */
.ct-champ[hidden] { display: none; }
.ct-champ > label {
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scr-on-night-soft);
}
.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;
  border: 1px solid rgba(242,239,234,.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: rgba(242,239,234,.07);
  color: var(--scr-paper);
  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(242,239,234,.6) 50%),
                    linear-gradient(135deg, rgba(242,239,234,.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.     */
.ct-champ select option { background: #17120F; color: var(--scr-paper); }
/* Le champ de date du panneau « Événementiel » : le pictogramme du
   sélecteur natif est dessiné en sombre, donc invisible sur ce fond. */
.ct-champ input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .66;
  cursor: pointer;
}
/* 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: rgba(242,239,234,.56); }
.ct-champ input:hover,
.ct-champ select:hover,
.ct-champ textarea:hover { border-color: rgba(242,239,234,.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: rgba(242,239,234,.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 DEUX ÉTAGES DE CHOIX
   ───────────────────────────────────────────────────────────────────────
   Étage 1 : le pôle. Étage 2 : l'axe propre à ce pôle. Même dessin de
   puce dans les deux cas — c'est le même geste, à deux profondeurs —
   le pôle étant simplement posé sur une cible plus large.
   ═══════════════════════════════════════════════════════════════════════ */
.ct-poles,
.ct-axe {
  margin: 0 0 30px;
  padding: 0;
  border: 0;
}
.ct-poles > legend,
.ct-axe > legend {
  padding: 0;
  margin-bottom: 14px;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scr-on-night-soft);
}
.ct-poles > legend .ct-oblig,
.ct-axe > legend .ct-oblig { color: var(--scr-orange); }

/* L'input reste dans le flux mais invisible : le focus clavier se voit
   sur le label grâce à `:focus-visible + label`.                      */
.ct-pole input,
.ct-case input,
.ct-axelist input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ─── Étage 1 · les trois pôles ──────────────────────────────────────── */
.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; }
.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(23,18,15,.35);
  font-family: var(--scr-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  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: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.ct-pole label:hover { transform: translateY(-2px); border-color: var(--scr-orange); color: var(--scr-paper); }
.ct-pole input:checked + label {
  border-color: var(--scr-orange);
  background: rgba(233,78,26,.16);
  color: var(--scr-paper);
}
.ct-pole input:checked + label::before {
  background: var(--scr-orange);
  box-shadow: 0 0 10px rgba(233,78,26,.9);
}
.ct-pole input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

/* ─── Étage 2 · l'axe du pôle choisi ─────────────────────────────────── */
.ct-axe[hidden] { display: none; }
.js .ct-axe.is-swap,
.js .ct-panneau.is-swap { animation: ctBascule .5s var(--scr-ease); transform-origin: 0 50%; }
@keyframes ctBascule {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
.ct-axelist { display: flex; flex-wrap: wrap; gap: 9px; }
.ct-axelist > span { position: relative; }
.ct-axelist label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  font-family: var(--scr-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  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-axelist label::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.ct-axelist label:hover { transform: translateY(-2px); border-color: var(--scr-orange); color: var(--scr-paper); }
.ct-axelist input:checked + label {
  border-color: var(--scr-orange);
  background: rgba(233,78,26,.14);
  color: var(--scr-paper);
}
.ct-axelist input:checked + label::before {
  background: var(--scr-orange);
  box-shadow: 0 0 10px rgba(233,78,26,.9);
}
.ct-axelist input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════
   6. LES PANNEAUX
   ═══════════════════════════════════════════════════════════════════════ */
.ct-panneau {
  margin: 0 0 26px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--scr-bord);
  border-left: 2px solid var(--scr-orange);
  border-radius: 4px 18px 18px 4px;
  background: rgba(23,18,15,.45);
}
.ct-panneau[hidden] { display: none; }
/* Le bloc de coordonnées n'appartient à aucun pôle : il reste affiché
   quel que soit le choix, d'où le liseré neutre.                    */
.ct-panneau--commun { border-left-color: rgba(242,239,234,.2); }
.ct-panneau > legend {
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.ct-panneau__phrase { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--scr-on-night-soft); }

/* Cases à cocher : de vraies cibles (44 px), pas des puces décoratives */
.ct-cases { display: flex; flex-wrap: wrap; gap: 9px; }
.ct-case { position: relative; }
.ct-case label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid rgba(242,239,234,.16);
  border-radius: 12px;
  font-size: 14.5px;
  color: var(--scr-on-night-soft);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.ct-case label::before {
  content: "";
  flex: 0 0 auto;
  width: 15px; height: 15px;
  border: 1px solid rgba(242,239,234,.4);
  border-radius: 4px;
  transition: background-color .25s ease, border-color .25s ease;
}
.ct-case label:hover { border-color: rgba(233,78,26,.55); color: var(--scr-paper); }
.ct-case input:checked + label {
  border-color: var(--scr-orange);
  background: rgba(233,78,26,.12);
  color: var(--scr-paper);
}
.ct-case input:checked + label::before {
  background: var(--scr-orange) linear-gradient(transparent, transparent);
  border-color: var(--scr-orange);
  box-shadow: inset 0 0 0 2px rgba(23,18,15,.8);
}
.ct-case input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════
   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 dans la marge du
   panneau 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 — même idiome
   que .ct-case plus haut. 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(242,239,234,.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(23,18,15,.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: rgba(242,239,234,.62);
}

/* 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. */
.ct-bilan {
  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 { margin: 0; }
.ct-bilan ul { margin: 8px 0 0; padding-left: 20px; }
.ct-bilan a { color: inherit; }

/* Le même encadré, mais servi par <noscript> juste au-dessus du bouton.
   Sans JavaScript le formulaire s'affiche et se remplit, mais l'envoi ne
   peut pas aboutir : il vaut mieux le dire là où le visiteur va cliquer
   que le laisser partir sur une page d'erreur muette.               */
.ct-noscript {
  margin: 30px 0 0;
  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-noscript a { color: inherit; }

/* ═══════════════════════════════════════════════════════════════════════
   8. AUTRES FAÇONS DE NOUS JOINDRE — et les emplacements à remplir
   ───────────────────────────────────────────────────────────────────────
   Le dépôt ne contient AUCUNE coordonnée de Scroler. Plutôt que d'en
   inventer une plausible — ce qui ferait de cette page un faux —, on
   pose des emplacements visibles, dans la convention déjà employée
   ailleurs sur le site : pointillés orange et libellé en capitales.
   Même convention que le .lg-trou des pages légales ; ici elle porte
   le préfixe de cette page.
   ═══════════════════════════════════════════════════════════════════════ */
.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;
}

/* Consigne de remplissage, sous les trois cartes */
.ct-consigne {
  margin-top: clamp(24px, 3vw, 38px);
  padding: 20px 24px;
  border: 1px dashed rgba(233,78,26,.45);
  border-radius: 14px;
  background: rgba(233,78,26,.05);
  font-size: 15px;
  line-height: 1.6;
  color: var(--scr-on-night-soft);
}
.ct-consigne b { font-weight: 400; color: var(--scr-paper); }
.ct-consigne ul { margin: 10px 0 0; padding-left: 20px; }
.ct-consigne li { margin-bottom: 5px; }
.ct-consigne code {
  font-family: var(--scr-mono);
  font-size: 13px;
  color: var(--scr-orange);
}

/* ═══════════════════════════════════════════════════════════════════════
   9. PRÉFÉRENCES SYSTÈME
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* La bascule perd son animation : le panneau apparaît, net. */
  .js .ct-axe.is-swap,
  .js .ct-panneau.is-swap { animation: none; }
  .ct-pole label:hover,
  .ct-axelist label:hover { transform: none; }
  .ct-pole label,
  .ct-axelist label,
  .ct-case label,
  .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,
  .ct-axelist input:checked + label,
  .ct-case 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-panneau { background: #fff; border-color: #999; }
  .ct-panneau > legend { color: #000; }
  .ct-panneau__phrase, .ct-champ__aide { color: #222; }
  .ct-champ input, .ct-champ select, .ct-champ textarea { background: #fff; color: #000; border-color: #999; }
  .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-noscript { border-color: #999; background: none; color: #000; }
  /* Même écueil que le pied de page : ce bloc de consigne est celui qui
     dit au client ce qu'il lui reste à remplir. C'est précisément lui
     qu'il imprimera. Il sortait en gris très clair sur blanc.      */
  .ct-consigne { border-color: #999; background: none; color: #000; }
  .ct-consigne b, .ct-consigne code, .ct-consigne a { 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-paper);
}
.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-paper); }
.ct-merci__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }