/* ==========================================================================
   Modale de demande de devis — tunnel 3 étapes avec branchement 2A / 2B.
   Géométrie relevée sur les planches Desktop (838px) et Mobile (375px).
   ========================================================================== */

/* --- Châssis ------------------------------------------------------------- */

.devis-modal {
  width: min(var(--modal-w), 100vw);
  max-width: none;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: var(--c-white);
  box-shadow: 0 4px 4px rgb(0 0 0 / .25);
  overflow: hidden;
}

.devis-modal::backdrop {
  background: rgb(34 23 91 / .6);
}

/* Le scroll vit sur le panneau, pas sur le <dialog> : le bouton de fermeture
   doit rester fixe pendant que le contenu défile. */
.devis-modal__panel {
  position: relative;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.devis-modal__close {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 20px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-navy);
}

.devis-modal__close:hover { background: var(--c-blush); }
.devis-modal__close svg { width: 16px; height: 16px; }

/* --- Trame du formulaire -------------------------------------------------- */

.devis {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* LE RYTHME SUIT LA HAUTEUR DE FENÊTRE, il n'est plus figé. Les bornes
     hautes sont les valeurs de la maquette : au-delà de ~1430px de hauteur
     utile le rendu est identique au relevé. En dessous, ce sont les blancs
     qui cèdent — jamais le corps de texte — pour que le bouton reste
     atteignable sans ascenseur. */
  gap: clamp(20px, 3.5vh, 50px);
  width: var(--modal-inner);
  max-width: 100%;
  margin-inline: auto;
  padding-block: clamp(24px, 4vh, 50px);
}

.devis__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

.devis__badge {
  padding: 2px 6px 1px;
  border-radius: var(--r-sm);
  background: var(--c-blush);
  color: var(--c-magenta);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 26px;
  text-align: center;
  text-transform: uppercase;
}

.devis__title {
  margin: 0;
  color: var(--c-magenta);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: 40px;
  text-align: center;
}

/* Barre de progression + panneau d'étape. Le gap de 20px reproduit le bloc
   « Titre_3 » de la maquette, qui groupe l'indicateur et la question. */
.devis__tunnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.6vh, 20px);
  align-self: stretch;
}

/* Une étape = un panneau. Masquées par [hidden], pilotées en JS. */
.devis__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3.5vh, 50px);
  align-self: stretch;
}

.devis__step[hidden] { display: none; }

/* Bloc d'introduction : question(+accroche), puis les tags d'éligibilité.
   L'auto-layout donne 20px entre les deux, pas les 50px du reste de l'étape. */
.devis__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.6vh, 20px);
  align-self: stretch;
}

/* Question + accroche : collées, l'interligne suffit (bloc « Question »,
   h56 = 30 + 26, sans gap dans l'auto-layout). */
.devis__question-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

/* --- Barre de progression ------------------------------------------------- */

.devis__progress {
  width: 150px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--c-blush);
}

.devis__progress-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--c-pink);
  transition: width .3s ease;
}

.devis__question {
  align-self: stretch;
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: 30px;
  text-align: center;
}

.devis__hint {
  align-self: stretch;
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 26px;
  text-align: center;
}

/* --- Tags d'éligibilité (étapes 2A / 2B) ---------------------------------- */

.devis__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  /* Le marqueur est la coche du <svg>, pas la puce de liste : on retire
     celle-ci explicitement plutôt que de compter sur le inline-flex des
     items pour la supprimer. */
  margin: 0;
  padding: 0;
  list-style: none;
}

.devis__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding-inline: 20px;
  border-radius: var(--r-pill);
  background: var(--c-blush);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}

.devis__tag svg { flex: none; color: var(--c-magenta); }

/* --- Cartes d'option ------------------------------------------------------ */

.devis__options {
  display: grid;
  gap: 20px;
  align-self: stretch;
}

.devis__options--duo   { grid-template-columns: repeat(2, 1fr); }
.devis__options--trio  { grid-template-columns: repeat(3, 1fr); }

/* L'input reste dans le flux pour reste focusable au clavier ; c'est le
   <label> qui porte tout le rendu. */
.devis__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.devis__option-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding: 30px 20px 25px;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  background: var(--c-field);
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.devis__option-box:hover { background: rgb(34 23 91 / .09); }

/* État sélectionné : ABSENT de la maquette (seul l'état au repos est dessiné).
   Proposition construite sur la charte — à valider par le DA. */
.devis__option input:checked + .devis__option-box {
  border-color: var(--c-magenta);
  background: var(--c-blush);
}

.devis__option input:focus-visible + .devis__option-box {
  outline: 3px solid var(--c-pink);
  outline-offset: 2px;
}

.devis__option-icon { height: 60px; }
/* `img` AUTANT QUE `svg` : les pictogrammes sont servis en <img>, qui garde sa
   hauteur intrinsèque si on ne la contraint pas. La règle ne visait que <svg>,
   si bien que dès que la boîte se resserrait — paliers de hauteur ci-dessous —
   l'image débordait par le bas et chevauchait son libellé. */
.devis__option-icon svg,
.devis__option-icon img { height: 100%; width: auto; margin-inline: auto; }


/* Libellé et sous-libellé forment un seul bloc : le gap de 20px de la carte
   ne sépare que l'icône du texte. Les mesures donnent ~5px entre les deux
   lignes (carte 195px = 30 + 50 + 20 + 25 + 5 + 40 + 25). */
.devis__option-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.devis__option-label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 25px;
}

.devis__option-sub {
  color: var(--c-plum);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 20px;
}

/* --- Champs (étape 3) ----------------------------------------------------- */

.devis__fieldset {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.2vh, 24px);
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: 0;
}

.devis__row {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}

/* Adresse / CP / Ville : largeurs relevées 349 / 120 / 209 sur 718. */
.devis__row--adresse { grid-template-columns: 349fr 120fr 209fr; }
.devis__row--full    { grid-template-columns: 1fr; }

/* `margin: 0` N'EST PAS COSMÉTIQUE : ces champs sont des <p>, dont la marge
   par défaut de 1em s'ajoutait en haut ET en bas de chaque ligne du
   formulaire. Le pas entre deux lignes valait 134px au lieu des 102px voulus
   par le `gap` du fieldset — soit ~130px de hauteur en trop sur l'étape 3 à
   elle seule, et autant de défilement imposé au visiteur. */
.devis__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}

.devis__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: 25px;
}

.devis__optional {
  color: var(--c-navy);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
}

.devis__input,
.devis__select {
  width: 100%;
  height: 50px;
  padding-inline: 20px;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  background: var(--c-field);
  color: var(--c-navy);
  font: inherit;
}

.devis__input::placeholder,
.devis__select:invalid {
  color: var(--c-navy);
  font-weight: var(--fw-light);
}

.devis__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2322175B' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 12px;
  padding-inline-end: 44px;
}

.devis__input:focus,
.devis__select:focus { border-color: var(--c-pink); outline: none; }

.devis__input[aria-invalid="true"] { border-color: var(--c-magenta); }

.devis__error {
  color: var(--c-magenta);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

/* --- Bascule « moins de 3 ans » -------------------------------------------
   Piste 120x40, curseur 60x30 portant le libellé de l'état courant.
   Lecture de la maquette : un seul état y est dessiné (« Non »). */

.devis__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  align-self: stretch;
}

.devis__toggle {
  flex: none;
  position: relative;
  width: 120px;
  height: 40px;
  padding: 5px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-field);
}

.devis__toggle-thumb {
  display: grid;
  place-items: center;
  width: 60px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--c-navy);
  color: var(--c-white);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  transition: transform .2s ease;
}

.devis__toggle[aria-pressed="true"] .devis__toggle-thumb {
  transform: translateX(50px);
  background: var(--c-magenta);
}

/* --- Consentement --------------------------------------------------------- */

.devis__optin {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  font-size: var(--fs-base);
  line-height: 26px;
}

.devis__optin input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--c-magenta);
  border: 2px solid var(--c-pink);
  border-radius: var(--r-xs);
}

/* Pot de miel : retiré du flux sans display:none ni visibility, que les
   robots savent détecter. Hors écran et non focusable, donc inatteignable. */
.devis__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Actions -------------------------------------------------------------- */

/* Message d'échec d'envoi : au-dessus des boutons, dans le rouge d'erreur le
   plus proche du magenta de la charte. */
.devis__error {
  align-self: stretch;
  margin: 0;
  color: #C0192B;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
}

.devis__error[hidden] { display: none; }

.devis__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  align-self: stretch;
}

/* Le retour se place à gauche, le CTA reste calé à droite. */
.devis__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-end: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-magenta);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
}

.devis__back-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-white);
}

.devis__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 30px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-magenta);
  color: var(--c-white);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.devis__submit:hover { background: #B62D71; }
.devis__submit[disabled] { opacity: .5; cursor: not-allowed; }

/* --- Mentions ------------------------------------------------------------- */

/* Les mentions sont détachées du corps : l'auto-layout externe met 100px
   entre le formulaire et elles, soit 50 de plus que le gap de l'étape. */
.devis__legal {
  align-self: stretch;
  margin-block-start: clamp(16px, 2.5vh, 50px);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: 20px;
}

.devis__legal p { margin: 0; }

/* ==========================================================================
   Fenêtres basses — les paliers portent sur la HAUTEUR, pas sur la largeur.

   CE SONT LES CARTES D'OPTION QUI COÛTENT LE PLUS : 209 à 229px pièce, sur
   deux rangs à l'étape 2A. On serre leur intérieur — padding, gouttière,
   pictogramme — et jamais le corps du texte : réduire le texte ferait perdre
   la lisibilité que le défilement, lui, ne coûtait pas.

   Un palier sur la hauteur plutôt qu'une réduction uniforme, pour que le grand
   écran garde exactement le rendu de la maquette.
   ========================================================================== */

@media (max-height: 1000px) {
  .devis__option-box { padding: 20px 16px 16px; gap: 14px; }
  .devis__option-icon { height: 46px; }
  .devis__head { gap: 6px; }
}

/* Palier intermédiaire : les portables 13 à 15 pouces, où la fenêtre utile
   tourne autour de 820 à 880px. Sans lui, l'étape 2A y redemandait 60 à 80px
   de défilement — juste ce qu'il faut pour cacher le bouton. */
@media (max-height: 880px) {
  .devis { gap: 20px; padding-block: 20px; }
  .devis__step { gap: 18px; }
  .devis__option-box { padding: 16px 16px 14px; gap: 12px; }
  .devis__option-icon { height: 42px; }
}

@media (max-height: 800px) {
  .devis__option-box { padding: 12px 14px 10px; gap: 8px; }
  .devis__option-icon { height: 32px; }
  .devis__tag { height: 32px; }
  .devis__title { font-size: 26px; line-height: 34px; }
  .devis__step { gap: 12px; }
  .devis__tunnel { gap: 10px; }
  .devis__intro { gap: 10px; }
  .devis__legal { margin-block-start: 8px; }
  .devis { gap: 16px; padding-block: 16px; }

  /* L'étape 3 est la seule à ne pas tenir : huit champs, une case d'opt-in et
     la notice RGPD. On y gagne sur la boîte du champ, jamais sur son libellé. */
  .devis__fieldset { gap: 10px; }
  .devis__input,
  .devis__select { height: 44px; }
  .devis__label { line-height: 21px; }
  .devis__optin { line-height: 1.35; }
}

/* ==========================================================================
   Mobile — valeurs relevées sur les planches Mobile (modale 375px).

   ========================================================================== */

@media (max-width: 820px) {
  .devis-modal {
    width: 100vw;
    height: 100dvh;
    max-height: none;
  }

  .devis {
    width: 100%;
    gap: 40px;
    padding-block: 60px 40px;
    padding-inline: 20px;
  }

  .devis__step { gap: 40px; }

  /* 20 → 18px et 18 → 17px : réduction relevée, pas extrapolée. */
  .devis__question   { font-size: var(--fs-lg); line-height: 28px; }
  .devis__option-label { font-size: var(--fs-md); }

  .devis__tags { gap: 10px; }
  .devis__tag  { height: 37px; }

  /* Étape 1 : les deux cartes restent côte à côte (160x185 dans la maquette).
     Étapes 2A/2B : passage en pleine largeur empilée (335x110). */
  .devis__options--duo  { gap: 15px; }
  .devis__options--trio { grid-template-columns: 1fr; gap: 15px; }

  .devis__options--trio .devis__option-box {
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    min-height: 110px;
    padding: 20px;
    text-align: left;
  }

  .devis__options--trio .devis__option-icon { height: 50px; }

  .devis__row,
  .devis__row--adresse { grid-template-columns: 1fr; }

  .devis__actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .devis__back { margin-inline-end: 0; order: 2; }
  .devis__submit { order: 1; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .devis__progress-bar,
  .devis__toggle-thumb,
  .devis__option-box { transition: none; }
}