/* ==========================================================================
   La préqualification : le formulaire en trois étapes de la section 11.
   16 septembre 2026, sur demande, d'après une référence fournie.

   L'intro à gauche, la carte du formulaire à droite. **Rien de neuf n'entre
   dans le système** : la carte prend la matière des cartes du site, les
   boutons sont ceux de la page, l'erreur est le rouge du système, et le violet
   dit le choix fait.

   Depuis le 16 septembre 2026, sur demande, la section est posée sur le
   panneau sombre du constat, et le choix fait et les boutons d'action sont
   violets.

   ⚠️ **Ce qui n'est pas repris de la référence, et ce sont des règles.**

   1. **Le rose et le bleu nuit.** Tous les textes sont en noir ou en gris.
   2. **L'astérisque des champs requis est gris**, pas rouge. Le rouge est
      l'erreur, et un champ vide n'en est pas une avant qu'on ait essayé.
   3. **L'envoi n'est jamais vraiment désactivé.** Il prend l'apparence
      désactivée tant que la case n'est pas cochée, mais il reste focalisable
      et cliquable, et le clic dit ce qui manque.
   ========================================================================== */

/* ---- La section ------------------------------------------------------- */

/* La section n'est plus un panneau gris : c'est la carte du formulaire qui
   porte la surface, comme dans la référence. Le sélecteur pèse deux classes
   pour passer devant la règle du rendez-vous, y compris sous 1024 px. */
.s-rdv.s-prequal {
  background: none;
  border-radius: 0;
  padding: 0;
}

.prequal-grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: calc(var(--spacing) * 48);
  align-items: start;
}

/* L'intro reste à l'écran pendant qu'on remplit, parce que la carte est
   longue. **Ce n'est pas une apparition au défilement** : rien n'apparaît,
   le bloc est déjà là et il cesse seulement de partir. */
.prequal-intro {
  position: sticky;
  top: calc(var(--hauteur-entete) + var(--spacing) * 16);
}

/* ⚠️ **La promesse est posée sur une teinte de noir à 4 %, et son texte est
   donc en noir.** Sur ce fond composé, le gris lisible ne tient que 4,35
   pour 1, sous le minimum AA : c'est la panne relevée sur la capsule du prix.
   Le noir y tient 14,3. */
.prequal-promesse {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 14);
  padding: calc(var(--spacing) * 28);
  background-color: rgb(28 28 28 / .04);
  border: 1px solid rgb(28 28 28 / .08);
  border-radius: var(--r-2xl);
  color: var(--noir);
}

/* ⚠️ **Sur le panneau sombre, la promesse inverse sa polarité** : une teinte
   de blanc à 6 % au lieu du noir à 4 %, et l'encre claire. Le blanc cassé y
   tient 15,8 pour 1, comme sur la carte qui recule du constat. */
.sur-sombre .prequal-promesse {
  background-color: rgb(255 255 255 / .06);
  border-color: rgb(255 255 255 / .12);
  color: #F5F5F5;
}

.sur-sombre .a-ecrire-ligne { color: #F5F5F5; border-color: #9A9A9A; }

.prequal-promesse p { max-width: none; margin: 0; }

.prequal-promesse-titre {
  font-size: var(--corps-sm);
  font-weight: 700;
  line-height: 1.45;
}

.prequal-coches {
  display: grid;
  gap: calc(var(--spacing) * 10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.prequal-coches li {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 10);
  font-size: var(--corps-sm);
  line-height: 1.5;
}

.prequal-coches svg {
  flex: none;
  inline-size: calc(var(--spacing) * 14);
  block-size: calc(var(--spacing) * 14);
  margin-block-start: .3em;
}

.prequal-promesse-note { font-size: var(--legende); line-height: 1.45; }

/* Un « à écrire » qui vit au milieu d'une phrase : le même pointillé que le
   bloc, en ligne. Il doit se voir tant qu'il n'est pas remplacé. */
.a-ecrire-ligne {
  display: inline;
  padding: 0 calc(var(--spacing) * 4);
  border: 1px dashed var(--gris-texte);
  border-radius: var(--r-xs);
  color: var(--noir);
  font-weight: 500;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- La carte --------------------------------------------------------- */

.prequal {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 24);
  padding: calc(var(--spacing) * 40);
  background-color: transparent;
  background-image: var(--fond-carte);
  border: 1px solid var(--gris-grille);
  border-radius: var(--r-2xl);
  box-shadow: var(--lueur-carte), var(--ombre-carte-forte);
}

.prequal-tete {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 6);
}

/* ⚠️ Un `display` posé par la feuille l'emporte sur l'attribut `hidden` :
   sans cette ligne, le titre de l'étape 1 et les trois repères restaient
   au-dessus du remerciement. Trouvé sur la capture, pas à la relecture. */
.prequal-tete[hidden] { display: none; }

.prequal-titre {
  margin: 0;
  font-size: var(--titre-sm);
  line-height: var(--lh-titre);
  letter-spacing: -.02em;
}

/* Le titre prend le focus au changement d'étape pour être annoncé ; il n'a
   pas besoin d'un anneau, ce n'est pas un contrôle. L'anneau des contrôles,
   lui, ne se supprime jamais. */
.prequal-titre:focus { outline: none; }

.prequal-sous-titre {
  margin: 0;
  font-size: var(--legende);
  line-height: 1.45;
  color: var(--gris-lisible);
}

/* ---- Les trois repères ------------------------------------------------ */

.prequal-reperes {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 10);
  margin: 0;
  margin-block-start: calc(var(--spacing) * 16);
  padding: 0;
  list-style: none;
}

.prequal-repere {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 8);
  min-width: 0;
  font-size: var(--legende);
  color: var(--gris-lisible);
}

/* Le filet qui relie deux repères. Il est posé devant le repère, et il se
   remplit quand l'étape d'avant est faite. */
.prequal-repere + .prequal-repere::before {
  content: "";
  flex: 0 0 calc(var(--spacing) * 28);
  block-size: 1px;
  margin-inline-end: calc(var(--spacing) * 2);
  background: var(--gris-grille);
}

.prequal-repere[data-etat="fait"] + .prequal-repere::before,
.prequal-repere[data-etat="courant"]::before { background: var(--noir); }

.prequal-repere[data-etat="courant"] { color: var(--noir); font-weight: 500; }

.prequal-pastille {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: calc(var(--spacing) * 28);
  block-size: calc(var(--spacing) * 28);
  border-radius: var(--r-full);
  background-color: rgb(28 28 28 / .06);
  color: var(--gris-lisible);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.prequal-pastille svg {
  display: none;
  inline-size: calc(var(--spacing) * 12);
  block-size: calc(var(--spacing) * 12);
}

.prequal-repere[data-etat="courant"] .prequal-pastille {
  background-color: var(--noir);
  color: var(--blanc);
}

.prequal-repere[data-etat="fait"] .prequal-pastille {
  background-color: var(--noir);
  color: var(--blanc);
}

.prequal-repere[data-etat="fait"] .prequal-pastille-num { display: none; }
.prequal-repere[data-etat="fait"] .prequal-pastille svg { display: block; }

/* ---- Les étapes ------------------------------------------------------- */

.prequal-etape {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 22);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.prequal-etape[hidden] { display: none; }

/* Sans script, les trois étapes restent visibles et empilées : les boutons
   qui avancent et qui reculent n'ont alors plus d'objet. */
.prequal:not([data-arme]) [data-suivant],
.prequal:not([data-arme]) [data-retour] { display: none; }
.prequal:not([data-arme]) .prequal-etape + .prequal-etape {
  padding-block-start: calc(var(--spacing) * 24);
  border-block-start: 1px solid var(--gris-grille);
}

.prequal-champ {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 8);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.prequal-champ[hidden] { display: none; }

.prequal-libelle {
  padding: 0;
  font-size: var(--corps-sm);
  font-weight: 700;
  line-height: 1.4;
  color: var(--noir);
}

.prequal-requis { color: var(--gris-lisible); font-weight: 400; }

.prequal-facultatif {
  margin-inline-start: calc(var(--spacing) * 4);
  font-weight: 400;
  color: var(--gris-lisible);
}

.prequal-paire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing) * 16);
}

/* ---- Les champs ------------------------------------------------------- */

/* ⚠️ **Le texte des champs ne descend jamais sous 16 px**, quel que soit
   l'unité fluide : en dessous, Safari iOS agrandit la page à la mise au
   point. C'est la même règle que le champ du chatbot. */
.prequal-saisie {
  inline-size: 100%;
  min-width: 0;
  padding: calc(var(--spacing) * 12) calc(var(--spacing) * 16);
  font: inherit;
  font-size: max(1rem, var(--corps-sm));
  line-height: 1.4;
  color: var(--noir);
  background-color: var(--blanc);
  border: 1px solid var(--gris-grille);
  border-radius: var(--r-md);
  transition: border-color var(--motion-instant) var(--ease-out);
}

.prequal-saisie::placeholder { color: var(--gris-lisible); opacity: 1; }
.prequal-saisie:hover { border-color: var(--gris-texte); }

textarea.prequal-saisie { resize: vertical; min-block-size: calc(var(--spacing) * 104); }

/* La flèche de la liste est dessinée : la flèche native change d'un système
   à l'autre et ne prend pas l'encre du texte. */
.prequal-liste {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: calc(var(--spacing) * 44);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25 7 8.75l3.5-3.5' stroke='%23202020' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(var(--spacing) * 16) center;
  background-size: calc(var(--spacing) * 14);
  cursor: pointer;
}

.prequal-tel {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: calc(var(--spacing) * 12);
}

/* ---- Oui et non ------------------------------------------------------- */

/* De vrais boutons radio, cachés à l'œil et gardés au clavier : les flèches
   passent de oui à non, et la voix dit « bouton radio, un sur deux ». */
.prequal-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing) * 12);
}

.prequal-option {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: calc(var(--spacing) * 48);
  padding: calc(var(--spacing) * 10) calc(var(--spacing) * 16);
  font-size: var(--cta-md);
  font-weight: 500;
  color: var(--gris-lisible);
  background-color: var(--blanc);
  border: 1px solid var(--gris-grille);
  border-radius: var(--r-md);
  cursor: pointer;
  transition:
    background-color var(--motion-instant) var(--ease-out),
    border-color var(--motion-instant) var(--ease-out),
    color var(--motion-instant) var(--ease-out);
}

.prequal-option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.prequal-option:hover { border-color: var(--gris-texte); color: var(--noir); }

/* ⚠️ **Le choix fait est violet depuis le 16 septembre 2026, sur demande.** Il
   a été noir, puis bleu le même jour. C'est le violet en aplat que la section 2
   a déjà ouvert sur les boutons, « ça rappelle le violet du logo ».

   **Aucun voile ici, et il ne faut pas en remettre** : le blanc sur ce violet
   tient 5,64 pour 1 sans artifice, là où le bleu tombait à 3,23 et exigeait le
   voile à 22 %. Un voile assombrirait précisément ce qu'on vient chercher. La
   lueur intérieure est réduite à un reflet d'arête : une lueur large
   éclaircirait le fond sous le libellé et mangerait cette marge. */
.prequal-option:has(input:checked) {
  background-color: var(--violet);
  border-color: transparent;
  color: var(--blanc);
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / .35);
}

/* L'état s'assombrit au lieu de s'éclaircir : assombrir ne fait que monter le
   contraste. */
.prequal-option:has(input:checked):hover {
  background-color: var(--violet);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / .35),
    inset 0 0 0 calc(var(--spacing) * 100) rgb(0 0 0 / .12);
}

/* L'anneau du système, porté par l'étiquette puisque le radio est invisible. */
.prequal-option:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---- Les secteurs, en tuiles ----------------------------------------- */

/* Huit tuiles, quatre colonnes sur deux lignes, de poids strictement égal :
   même largeur, même hauteur, même icône au même endroit. Une tuile est un
   bouton Oui/Non avec une icône au-dessus : même bordure, même violet une
   fois choisie, même anneau de focus. */
.prequal-secteurs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: calc(var(--spacing) * 8);
}

.prequal-option.prequal-tuile {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Calées en haut : les icônes tombent toutes à la même hauteur, même quand
     un nom passe sur trois lignes. Centrées, elles remontaient. */
  justify-content: flex-start;
  gap: calc(var(--spacing) * 8);
  min-block-size: calc(var(--spacing) * 92);
  padding: calc(var(--spacing) * 18) calc(var(--spacing) * 8) calc(var(--spacing) * 14);
  font-size: var(--cta);
  line-height: 1.25;
  text-align: center;
  hyphens: auto;
}

.prequal-tuile-icone {
  flex: none;
  inline-size: calc(var(--spacing) * 24);
  block-size: calc(var(--spacing) * 24);
}

/* Une ligne d'aide sous un champ : le gris du texte courant, qui tient 4,57
   pour 1 au point le plus sombre de la carte. */
.prequal-aide {
  margin: 0;
  font-size: var(--legende);
  line-height: 1.45;
  color: var(--gris-lisible);
}

/* ---- Les radios en liste et la case ----------------------------------- */

.prequal-radios {
  display: grid;
  gap: calc(var(--spacing) * 10);
}

.prequal-radio,
.prequal-consentement {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 12);
  font-size: var(--corps-sm);
  line-height: 1.45;
  color: var(--noir);
  cursor: pointer;
}

.prequal-radio input,
.prequal-consentement input {
  flex: none;
  inline-size: calc(var(--spacing) * 18);
  block-size: calc(var(--spacing) * 18);
  margin: .12em 0 0;
  /* Le même violet que les choix, pour que tout ce qui se sélectionne se lise
     pareil. Il tient 5,64 pour 1 sur blanc. */
  accent-color: var(--violet);
  cursor: pointer;
}

/* ⚠️ **Le texte du consentement est en noir**, sur un gris clair où le gris
   lisible tomberait à 4,41 pour 1. */
.prequal-consentement {
  padding: calc(var(--spacing) * 16) calc(var(--spacing) * 18);
  font-size: var(--legende);
  background-color: var(--gris-clair);
  border-radius: var(--r-lg);
}

/* ---- Les erreurs ------------------------------------------------------ */

/* Le rouge du système, 5,4 pour 1 sur blanc : c'est son seul emploi prévu. */
.prequal-erreur {
  margin: 0;
  font-size: var(--legende);
  line-height: 1.45;
  color: var(--erreur);
}

.prequal-champ[data-invalide] .prequal-saisie,
.prequal-champ[data-invalide] .prequal-option { border-color: var(--erreur); }

.prequal-champ[data-invalide] .prequal-consentement {
  box-shadow: inset 0 0 0 1px var(--erreur);
}

/* ---- Les actions ------------------------------------------------------ */

.prequal-actions {
  display: flex;
  gap: calc(var(--spacing) * 12);
  margin-block-start: calc(var(--spacing) * 8);
}

.prequal-actions .bouton { gap: calc(var(--spacing) * 8); }
.prequal-actions .fleche {
  inline-size: calc(var(--spacing) * 14);
  block-size: calc(var(--spacing) * 14);
}

.prequal-large { flex: 1 1 auto; }

/* ⚠️ **Les boutons d'action du formulaire sont violets, sur demande du
   16 septembre 2026** : Continuer, Suivant, Envoyer, et le raccourci WhatsApp
   de l'écran de remerciement. Ils gardent le dessin du bouton primaire et son
   ombre portée, et perdent ce qui ne servait qu'au bleu : le voile noir et la
   lueur large, pour la même raison que les choix. Le bouton primaire du reste
   de la page ne bouge pas. « Retour » reste le bouton secondaire gris. */
.prequal .bouton-primaire {
  background: var(--violet);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .35),
    -32px 24px 15px rgb(0 0 0 / .034),
    -18px 14px 14px rgb(0 0 0 / .11),
    -8px 6px 9px rgb(0 0 0 / .195),
    -2px 2px 6px rgb(0 0 0 / .22);
}

.prequal .bouton-primaire:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .40),
    inset 0 0 0 calc(var(--spacing) * 100) rgb(0 0 0 / .12),
    -39px 30px 20px rgb(0 0 0 / .042),
    -23px 17px 17px rgb(0 0 0 / .13),
    -9px 8px 12px rgb(0 0 0 / .21),
    -2px 3px 8px rgb(0 0 0 / .24);
}

.prequal .bouton-primaire:active {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .25),
    inset 0 0 0 calc(var(--spacing) * 100) rgb(0 0 0 / .22),
    -18px 14px 11px rgb(0 0 0 / .034),
    -11px 8px 9px rgb(0 0 0 / .10),
    -5px 3px 6px rgb(0 0 0 / .17),
    -2px 2px 5px rgb(0 0 0 / .20);
}

.bouton[data-occupe] { opacity: .7; cursor: progress; }

/* L'état désactivé de la section 5.5, tant que la case du consentement n'est
   pas cochée : fond gris des traits, texte gris clair, et plus d'ombre ni de
   voile. Un contrôle inactif n'est pas soumis au seuil de contraste, et c'est
   justement ce gris qui dit qu'il l'est. Le bouton reste cliquable. */
.bouton.bouton-primaire[aria-disabled="true"],
.bouton.bouton-primaire[aria-disabled="true"]:hover,
.bouton.bouton-primaire[aria-disabled="true"]:active {
  background: var(--gris-grille);
  color: var(--gris-texte);
  box-shadow: none;
  cursor: not-allowed;
}

/* ---- Les fins --------------------------------------------------------- */

.prequal-fin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 12);
  padding-block: calc(var(--spacing) * 24);
}

.prequal-fin[hidden] { display: none; }
.prequal-fin:focus { outline: none; }
.prequal-fin p { margin: 0; color: var(--gris-lisible); }

.prequal-fin-titre {
  margin: 0;
  font-size: var(--titre-md);
  line-height: var(--lh-titre);
  letter-spacing: -.02em;
}

.prequal-fin-pastille {
  display: grid;
  place-items: center;
  inline-size: calc(var(--spacing) * 44);
  block-size: calc(var(--spacing) * 44);
  border-radius: var(--r-full);
  background-color: var(--noir);
  color: var(--blanc);
}

.prequal-fin-pastille svg {
  inline-size: calc(var(--spacing) * 18);
  block-size: calc(var(--spacing) * 18);
}

/* Le raccourci WhatsApp, sous le remerciement. Un filet le sépare de ce qui
   précède : c'est une seconde proposition, pas la suite de la phrase.

   ⚠️ **Le bouton est le bouton primaire, et non le vert de WhatsApp.** Le vert
   d'une marque tierce n'entre pas dans la palette, comme les couleurs des
   moteurs ne touchent aucun texte. Et c'est le seul bouton de cet écran :
   l'envoi a disparu avec les étapes. L'icône est une bulle générique, pas le
   logo, qui est une marque déposée. */
.prequal-raccourci {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing) * 10);
  align-self: stretch;
  margin-block-start: calc(var(--spacing) * 12);
  padding-block-start: calc(var(--spacing) * 24);
  border-block-start: 1px solid var(--gris-grille);
}

.prequal-fin .prequal-raccourci-titre {
  font-size: var(--corps-sm);
  font-weight: 700;
  color: var(--noir);
}

.prequal-raccourci .bouton {
  gap: calc(var(--spacing) * 10);
  margin-block-start: calc(var(--spacing) * 6);
  text-decoration: none;
}

/* ⚠️ **Le raccourci WhatsApp est vert, sur demande du 16 septembre 2026.**
   Ce n'est pas le vert de la marque, #25D366 : le blanc n'y tient que 1,98
   pour 1, très loin du minimum AA. C'est le vert déjà au système, --succes,
   celui de la courbe du lead construit, où le blanc tient **5,02**. Il se
   reconnaît comme vert WhatsApp sans en prendre la valeur, et aucune couleur
   neuve n'entre.

   Le portrait à gauche dit à qui l'on écrit, le logo à droite dit où. Le
   portrait est cerclé de blanc pour se détacher du vert. */
.bouton.prequal-whatsapp {
  gap: calc(var(--spacing) * 12);
  padding: calc(var(--spacing) * 8) calc(var(--spacing) * 22) calc(var(--spacing) * 8) calc(var(--spacing) * 8);
  border-radius: var(--r-full);
  /* ⚠️ **Le dégradé est posé le 16 septembre 2026, sur demande, et il est
     borné par le contraste, pas par le goût.** Le blanc ne tient le minimum
     AA que sur le vert du système : 5,02 pour 1, et déjà 3,95 un cran plus
     clair. **Le texte est donc toujours sur --succes**, et le vert clair ne
     vit qu'aux deux bouts, là où il n'y a pas de lettres.

     À gauche, le vert clair court jusqu'au début du libellé, soit la
     garniture, le portrait et l'écart : 60 px. À droite, il remonte sur la
     zone du logo, qui est un élément graphique et ne demande que 3 pour 1 ;
     #28A865 y tient 3,05. Les arrêts sont en pixels et non en pour cent,
     pour que la zone du texte reste sombre quelle que soit la largeur, et
     même quand le libellé passe sur deux lignes. */
  background:
    linear-gradient(90deg,
      #2DB36C 0,
      var(--succes) calc(var(--spacing) * 60),
      var(--succes) calc(100% - var(--spacing) * 56),
      #28A865 100%);
  color: var(--blanc);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .30),
    -32px 24px 15px rgb(0 0 0 / .034),
    -18px 14px 14px rgb(0 0 0 / .11),
    -8px 6px 9px rgb(0 0 0 / .195),
    -2px 2px 6px rgb(0 0 0 / .22);
  transition: box-shadow var(--motion-instant) var(--ease-out);
}

/* Il s'assombrit au survol, ce qui ne fait que monter le contraste. */
.bouton.prequal-whatsapp:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .35),
    inset 0 0 0 calc(var(--spacing) * 100) rgb(0 0 0 / .14),
    -39px 30px 20px rgb(0 0 0 / .042),
    -23px 17px 17px rgb(0 0 0 / .13),
    -9px 8px 12px rgb(0 0 0 / .21),
    -2px 3px 8px rgb(0 0 0 / .24);
}

.bouton.prequal-whatsapp:active {
  box-shadow:
    inset 0 0 0 calc(var(--spacing) * 100) rgb(0 0 0 / .24),
    -2px 2px 5px rgb(0 0 0 / .20);
}

.prequal-whatsapp-avatar {
  flex: none;
  display: block;
  inline-size: calc(var(--spacing) * 40);
  block-size: calc(var(--spacing) * 40);
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--gris-clair);
  box-shadow: 0 0 0 2px var(--blanc);
}

.prequal-whatsapp-avatar img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.prequal-whatsapp-logo {
  flex: none;
  inline-size: calc(var(--spacing) * 22);
  block-size: calc(var(--spacing) * 22);
}

@media (max-width: 767px) {
  .prequal-raccourci .bouton { inline-size: 100%; }
}

/* ---- Le bouton WhatsApp flottant ---------------------------------------
   Sur demande du 24 septembre 2026 : rond, en bas à droite, logo en blanc,
   au vert du raccourci du formulaire (le #25D366 de la marque a été posé
   puis retiré le même jour, sur demande). Sous le bandeau de consentement (z-index 60), au-dessus du dock
   du chatbot. */
.whatsapp-flottant {
  position: fixed;
  inset-inline-end: calc(var(--spacing) * 24);
  inset-block-end: calc(var(--spacing) * 24);
  z-index: 56;
  display: grid;
  place-items: center;
  inline-size: calc(var(--spacing) * 56);
  block-size: calc(var(--spacing) * 56);
  border-radius: var(--r-full);
  /* Vert du raccourci du formulaire, éclairci et sans ombre portée, sur
     demande du 24 septembre 2026. Clair en haut à gauche, sombre en bas à
     droite. Aucun texte dessus, seul le logo blanc. */
  background: linear-gradient(135deg, #4CD68A 0%, #22A45D 100%);
  color: var(--blanc);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .30);
  transition: box-shadow var(--motion-instant) var(--ease-out);
}
.whatsapp-flottant svg {
  inline-size: calc(var(--spacing) * 28);
  block-size: calc(var(--spacing) * 28);
}
.whatsapp-flottant:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .35),
    inset 0 0 0 calc(var(--spacing) * 100) rgb(0 0 0 / .10);
}
.whatsapp-flottant:active {
  box-shadow: inset 0 0 0 calc(var(--spacing) * 100) rgb(0 0 0 / .18);
}

/* Sur téléphone, il monte au-dessus de la pilule du chatbot. */
@media (max-width: 767px) {
  .whatsapp-flottant {
    inset-inline-end: calc(var(--spacing) * 16);
    inset-block-end: calc(var(--spacing) * 76 + env(safe-area-inset-bottom, 0px));
    inline-size: calc(var(--spacing) * 52);
    block-size: calc(var(--spacing) * 52);
  }
}

/* ---- Le pot de miel --------------------------------------------------- */

.prequal-miel {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Sous 1024 px : une colonne --------------------------------------- */

@media (max-width: 1023px) {
  .prequal-grille { grid-template-columns: minmax(0, 1fr); gap: calc(var(--spacing) * 32); }
  .prequal-intro { position: static; }
}

@media (max-width: 767px) {
  .prequal { padding: calc(var(--spacing) * 24); border-radius: var(--r-xl); }
  .prequal-paire,
  .prequal-tel { grid-template-columns: minmax(0, 1fr); }
  /* ⚠️ **Les secteurs passent à deux colonnes, pas à une.** La section 2 veut
     une colonne sur mobile pour les contenus ; ce sont ici des boutons, et huit
     boutons empilés feraient sept cents pixels de défilement pour une seule
     question. Deux colonnes gardent le poids égal. */
  .prequal-secteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sur un téléphone, l'invite de la liste était coupée d'une lettre :
     la garniture latérale rend les quelques pixels qui manquaient. */
  .prequal-liste {
    padding-inline: calc(var(--spacing) * 14) calc(var(--spacing) * 34);
    background-position: right calc(var(--spacing) * 12) center;
  }
  .prequal-repere-nom { display: none; }
  .prequal-repere[data-etat="courant"] .prequal-repere-nom { display: inline; }
  .prequal-actions { flex-direction: column-reverse; }
  .prequal-actions .bouton { inline-size: 100%; }
}

@media print {
  .prequal { display: none; }
}