/* =========================================================================
   LA PAGE DE DEVIS — refaite le 25 septembre 2026 sur la maquette de Jeremy
   (« Votre devis personnalisé »). Une carte blanc cassé sur le navy, pensée
   pour le téléphone ; sur ordinateur, la même carte, centrée.

   Tailles de saisie ≥ 16 px : en dessous, iOS zoome au focus — un mouvement
   automatique de la page, exactement ce que le brief interdit.
   ========================================================================= */

.page--devis main.devis {
  background: var(--color-navy);
  color: var(--color-paper);
  padding: 0 16px 32px;
}

/* --- L'entrée --------------------------------------------------------- */
.devis__entree { max-width: 560px; margin: 0 auto; padding: 26px 0 20px; text-align: center; }
.devis__titre {
  margin: 0;
  font-family: var(--font-body); font-weight: 600;
  font-size: 2.75rem; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance;
  color: var(--color-paper);
}
.devis__sous-titre { margin: 10px 0 0; font-family: var(--font-util); font-size: 18px; line-height: 1.35; color: var(--color-paper); }
.devis__rassure { margin: 8px 0 0; font-family: var(--font-util); font-size: 14px; line-height: 1.4; color: #C9D1DA; }

/* --- La carte --------------------------------------------------------- */
.devis__carte {
  max-width: 560px; margin: 0 auto;
  padding: 22px 18px 20px;
  background: var(--color-paper); color: var(--color-ink);
  border-radius: 10px;
  font-family: var(--font-util);
}
.devis__carte > * + * { margin-top: 18px; }
.devis__carte fieldset { margin-inline: 0; padding: 0; border: 0; min-width: 0; }

.devis__alerte { margin: 0 0 4px; padding: 10px 12px; border-radius: 8px; background: #FDECEA; color: #8A1C12; font-size: 15px; line-height: 1.4; }

.dv-titre {
  margin: 0 0 12px; padding: 0;
  font-family: var(--font-body); font-weight: 600;
  font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em;
  color: var(--color-ink);
}
/* Les grands blocs se séparent d'un filet, comme sur la maquette. */
.dv-recap, .dv-bloc + .dv-bloc { padding-top: 18px; border-top: 1px solid #E3DFD8; }
.dv-bloc[data-dv-livraison] { border-top: 0; padding-top: 0; }
.dv-recap + .dv-bloc { padding-top: 18px; border-top: 1px solid #E3DFD8; }

/* --- Combien de bacs : un contrôle segmenté ---------------------------- */
.dv-segments {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: 1px solid #D8D4CC; border-radius: 8px; overflow: hidden;
  background: #F0EDE7;
}
.dv-segments__label {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; font-size: 18px; color: var(--color-ink); cursor: pointer;
  border-left: 1px solid #D8D4CC;
}
.dv-segments__input:first-child + .dv-segments__label { border-left: 0; }
.dv-segments__input:checked + .dv-segments__label { background: var(--color-navy); color: var(--color-paper); }
.dv-segments__input:focus-visible + .dv-segments__label { outline: 3px solid var(--color-soft-blue); outline-offset: -3px; }

/* --- Les champs -------------------------------------------------------- */
.dv-champ + .dv-champ { margin-top: 14px; }
.dv-champ__label { display: block; margin: 0 0 6px; font-size: 16px; font-weight: 500; color: var(--color-ink); }
.dv-champ__cadre { position: relative; }
.dv-champ__input {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 0 14px;
  border: 1px solid #D8D4CC; border-radius: 8px; background: #FDFCFA;
  font-family: var(--font-util); font-size: 17px; color: var(--color-ink);
}
.dv-champ__input::placeholder { color: #8A8F94; }
/* Un champ verrouillé (l'email du devis à l'étape 3, 30 septembre) se lit comme
   tel : fond grisé, sans bordure de saisie. */
/* Étape 3 (30 septembre, Jeremy) : un champ obligatoire encore VIDE se voit parmi
   ceux que le devis a déjà remplis — contour marqué, fond blanc. Rempli, il
   redevient un champ ordinaire. */
.dv-commande .dv-champ__input:required:placeholder-shown { border: 2px solid var(--color-ink); background: #fff; }
.dv-champ__input[readonly] { background: #ECE9E3; border-color: transparent; color: #4A5766; cursor: default; }
.dv-champ__input:focus-visible { outline: 3px solid var(--color-soft-blue); outline-offset: 1px; }
/* La coche verte d'un code postal complet et reconnu. */
.dv-champ__cadre.is-valide .dv-champ__input { padding-right: 48px; }
.dv-champ__cadre.is-valide::after {
  content: ""; position: absolute; right: 14px; top: 50%; translate: 0 -50%;
  width: 24px; height: 24px; border-radius: 50%;
  background: #2E7D4F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.dv-erreur { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: #B42318; }
.dv--erreur .dv-champ__input, .dv--erreur .dv-segments, .dv--erreur .dv-options__label { border-color: #B42318; }

/* Le formulaire de devis seul (`.dv-demande`, 2 octobre) : les trois champs se
   détachaient mal de la carte crème — fond blanc, bordure #858B93 (3,5:1 sur
   blanc), saisie et focus en marine. Le contour de focus est un `outline` : il
   ne déplace rien. L'erreur garde la priorité, au repos comme au focus. L'étape 3
   (`.dv-commande`) et le calcul de livraison ne sont pas concernés. */
.dv-demande .dv-champ__input { background: #FFFFFF; border: 1px solid #858B93; color: #0E1B2C; }
.dv-demande .dv-champ__input::placeholder { color: #626973; opacity: 1; }
.dv-demande .dv-champ__input:focus-visible { border-color: #0E1B2C; outline: 2px solid #0E1B2C; outline-offset: 2px; }
.dv-demande .dv--erreur .dv-champ__input,
.dv-demande .dv--erreur .dv-champ__input:focus-visible { border-color: #B42318; }

/* --- Livraison et installation : des cartes à cocher -------------------- */
.dv-options { display: grid; gap: 10px; }
.dv-options__label {
  position: relative; display: grid; gap: 2px;
  padding: 14px 16px 14px 56px;
  border: 1px solid #D8D4CC; border-radius: 8px; background: #FDFCFA;
  cursor: pointer;
}
.dv-options__label::before {
  content: ""; position: absolute; left: 18px; top: 50%; translate: 0 -50%;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #8A8F94; background: #fff; box-sizing: border-box;
}
.dv-options__input:checked + .dv-options__label { border: 2px solid var(--color-navy); padding: 13px 15px 13px 55px; background: #E9EEF3; }
.dv-options__input:checked + .dv-options__label::before { border: 7px solid var(--color-navy); left: 17px; }
.dv-options__input:focus-visible + .dv-options__label { outline: 3px solid var(--color-soft-blue); outline-offset: 2px; }
.dv-options__nom { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--color-ink); }
.dv-options__detail { font-size: 15px; line-height: 1.35; color: var(--color-gris); }
.dv-note { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--color-gris); }
.dv-note--alerte { margin-top: 0; padding: 10px 12px; border-radius: 8px; background: #FDECEA; color: #8A1C12; }

/* --- Le récapitulatif --------------------------------------------------- */
.dv-recap__ligne {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 4px 0; font-size: 16px; line-height: 1.35; color: var(--color-ink);
}
.dv-montant { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dv-recap__ligne--total { margin-top: 8px; padding-top: 10px; border-top: 1px solid #E3DFD8; }
.dv-recap__ligne--ttc {
  margin-top: 6px; padding: 10px 12px; border-radius: 6px;
  background: #ECE9E3; font-size: 19px; font-weight: 700;
}
.dv-aide {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
  margin-top: 14px; padding: 14px 16px;
  border-radius: 8px; background: #EAF3E8; color: var(--color-aide-fonce);
}
.dv-aide__icone {
  width: 30px; height: 30px; margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2317643B' stroke-width='1.6' stroke-linejoin='round' d='M12 2.8l7.5 2.9v5.6c0 4.6-3.1 8.4-7.5 9.9-4.4-1.5-7.5-5.3-7.5-9.9V5.7z'/%3E%3Cpath fill='none' stroke='%2317643B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M8.6 12.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dv-aide__titre { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; }
.dv-aide__texte { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }

/* --- Ajouter une adresse ou un SIRET ----------------------------------- */
.dv-plus { margin-top: 14px; }
.dv-plus__resume {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 16px; color: var(--color-ink); cursor: pointer; list-style: none;
}
.dv-plus__resume::-webkit-details-marker { display: none; }
.dv-plus__resume::before { content: "+"; font-size: 24px; line-height: 1; width: 16px; text-align: center; }
.dv-plus__resume::after {
  content: ""; margin-left: auto; width: 10px; height: 10px;
  border-right: 2px solid var(--color-gris); border-bottom: 2px solid var(--color-gris);
  rotate: 45deg; translate: 0 -3px;
}
.dv-plus[open] .dv-plus__resume::before { content: "−"; }
.dv-plus[open] .dv-plus__resume::after { rotate: 225deg; translate: 0 3px; }
.dv-plus__resume:focus-visible { outline: 3px solid var(--color-soft-blue); outline-offset: 2px; border-radius: 4px; }
.dv-plus .dv-champ { margin-top: 12px; }

/* --- L'envoi ----------------------------------------------------------- */
.dv-envoyer {
  display: block; width: 100%; min-height: 64px; margin-top: 20px; padding: 10px 16px;
  border: 0; border-radius: 8px; background: var(--color-navy); color: var(--color-paper);
  font-family: var(--font-body); font-weight: 600; font-size: 1.375rem; line-height: 1.15;
  cursor: pointer;
}
.dv-envoyer:focus-visible { outline: 3px solid var(--color-soft-blue); outline-offset: 3px; }
.dv-envoyer.is-envoi { opacity: .75; cursor: progress; }
.dv-pied { margin: 12px 0 0; text-align: center; font-size: 14px; line-height: 1.45; color: var(--color-ink); }
.dv-pied--discret { margin-top: 10px; font-size: 13px; color: var(--color-gris); }
.dv-pied a { color: inherit; }

@media (min-width: 43.8125rem) {         /* ≥ 701 px : la même carte, centrée */
  .devis__entree { padding-top: 40px; }
  .devis__titre { font-size: 3.25rem; }
  .devis__carte { padding: 28px 28px 24px; }
}

/* --- Finaliser la commande depuis un devis (25 septembre) -----------------
   Même carte que le formulaire de devis ; quelques pièces en plus. */
.dv-recap--premier { padding-top: 0; border-top: 0; }
.dv-note--haut { margin: 0 0 12px; }
.dv-facultatif { font-weight: 400; font-size: 14px; color: var(--color-gris); }
.dv-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dv-paire + .dv-champ, .dv-champ + .dv-paire, .dv-paire + .dv-erreur + .dv-champ { margin-top: 14px; }
.dv-paire--cp { grid-template-columns: 2fr 3fr; }
.dv-case { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.dv-case__input {
  width: 24px; height: 24px; margin: 1px 0 0;
  accent-color: var(--color-navy); cursor: pointer;
}
.dv-case__input:focus-visible { outline: 3px solid var(--color-soft-blue); outline-offset: 2px; }
.dv-case__label { font-size: 16px; line-height: 1.4; color: var(--color-ink); cursor: pointer; }
.dv--erreur .dv-case__label { color: #B42318; }
.dv-note a { color: inherit; }
/* Dans une paire, les deux champs partent de la même ligne : l'écart vertical
   entre champs successifs ne s'y applique pas. */
.dv-paire > .dv-champ + .dv-champ { margin-top: 0; }
.dv-envoyer--lien { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.dv-alerte__liste { margin: 6px 0 0; padding-left: 18px; }
.dv-alerte__liste a { color: inherit; font-weight: 600; }
.dv-barre { margin-right: 6px; font-size: 14px; color: var(--color-gris); }

/* --- Pictogrammes et prix nets (28 septembre, Jeremy) ---------------------
   Le camion et les outils accompagnent les libellés (formulaire, devis prêt,
   commande), même dessin (`App\Core\Icone`). Le bac se lit au prix NET, le
   catalogue barré à côté, la remise dite dessous — jamais re-soustraite. */
.dv-options__icones { display: flex; gap: 6px; color: var(--color-navy); margin-bottom: 2px; }
.dv-options__option {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 4px;
  background: #ECE9E3; font-size: 12px; font-weight: 600; line-height: 1.6;
  color: var(--color-gris); vertical-align: 2px; white-space: nowrap;
}
.dv-recap__ligne--bacs > span:first-child { display: grid; gap: 2px; }
.dv-recap__unite { font-size: 14px; color: var(--color-gris); }
.dv-recap__unite .dv-barre { margin: 0 0 0 4px; }
.dv-recap__remise { margin: 0 0 4px; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--color-sale); }
.dv-recap__avec-icone { display: inline-flex; align-items: center; gap: 8px; }
.dv-recap__avec-icone svg { flex: none; color: var(--color-navy); }
.dv-recap__lignes-montants { margin: 0; }
.dv-recap__ligne:has(.dv-recap__avec-icone) { align-items: center; }
.dv-recap__ligne--tva { color: var(--color-gris); font-size: 15px; }
.dv-recap__avec-icone [data-dv-icone-pose] { display: inline-flex; margin-left: -4px; }
.dv-recap__avec-icone [data-dv-icone-pose][hidden] { display: none; }
/* La colonne « Montants HT » et la remise en ligne (28 septembre) — même lecture
   que le devis prêt. */
.dv-recap__entete {
  display: flex; justify-content: space-between; margin: -4px 0 2px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-gris);
}
.dv-recap__ligne--remise, .dv-recap__ligne--remise .dv-recap__unite { color: var(--color-sale); }

/* --- L'indicateur d'étapes (28 septembre, brief de Jeremy) ----------------
   Discret, sur le navy de l'entrée : numéros en pastille, le nom de l'étape
   courante en clair. Au téléphone, seuls les numéros des autres étapes restent,
   pour tenir sur une ligne sans défilement horizontal. */
.dv-etapes { margin: 0 auto 14px; font-family: var(--font-util); }
.dv-etapes ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 4px;
}
.dv-etapes__etape { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #9AA6B6; }
.dv-etapes__etape + .dv-etapes__etape::before { content: "→"; margin: 0 4px 0 2px; color: #6B7A8E; }
.dv-etapes__etape a { display: inline-flex; align-items: center; gap: 6px; color: #C9D1DA; min-height: 32px; }
.dv-etapes__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid #6B7A8E; font-size: 12px; font-weight: 600;
}
.dv-etapes__etape.is-faite .dv-etapes__n { border-color: #8FD3A8; color: #8FD3A8; }
.dv-etapes__etape.is-courante { color: var(--color-paper); font-weight: 600; }
.dv-etapes__etape.is-courante .dv-etapes__n { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-navy); }
@media (max-width: 30rem) {
  .dv-etapes__etape:not(.is-courante) { font-size: 0; gap: 0; }
  .dv-etapes__etape:not(.is-courante) .dv-etapes__n { font-size: 12px; }
  .dv-etapes__etape:not(.is-courante) a { gap: 0; font-size: 0; }
  .dv-etapes__etape + .dv-etapes__etape::before { font-size: 13px; }
}

/* --- L'estimation compacte et son détail repliable ----------------------- */
.dv-recap__ligne--jour { margin-top: 8px; font-weight: 700; font-size: 17px; }
.dv-detail { margin-top: 10px; }
.dv-detail__resume {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--color-navy); cursor: pointer; list-style: none;
  text-decoration: underline; text-underline-offset: 3px;
}
.dv-detail__resume::-webkit-details-marker { display: none; }
.dv-detail__resume::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  rotate: 45deg; translate: 0 -2px;
}
.dv-detail[open] .dv-detail__resume::after { rotate: 225deg; translate: 0 2px; }
.dv-detail__resume:focus-visible { outline: 3px solid var(--color-soft-blue); outline-offset: 2px; border-radius: 4px; }
.dv-detail[open] { padding-bottom: 4px; }

/* --- Livraison et paiement (28 septembre) ---------------------------------
   Résumé compact, montant au bouton, trois faits sur la suite. Ordinateur :
   le formulaire à gauche, le résumé à droite, la même carte élargie. */
.dv-commande__quoi { margin: -4px 0 8px; font-size: 16px; font-weight: 600; color: var(--color-ink); }
.dv-commande__montant { margin: 18px 0 0; text-align: center; font-size: 17px; color: var(--color-ink); }
.dv-commande__montant + .dv-envoyer { margin-top: 8px; }
.dv-commande__apres { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.dv-commande__apres li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.45; color: var(--color-gris); }
.dv-commande__apres li::before { content: "✓"; position: absolute; left: 0; color: #2E7D4F; font-weight: 700; }
@media (min-width: 60rem) {
  .devis__carte.dv-commande {
    max-width: 1040px;
    display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 32px; align-items: start;
  }
  .dv-commande > * { grid-column: 1; }
  .dv-commande > .dv-commande__resume {
    grid-column: 2; grid-row: 1 / span 20; margin-top: 0 !important;
    padding: 18px; border: 1px solid #E3DFD8; border-radius: 8px; background: #FDFCFA;
  }
  .dv-commande > .devis__alerte { grid-column: 1 / -1; }
  .page--devis .devis__entree:has(+ .dv-commande) { max-width: 1040px; }
}

/* Le champ piège anti-robot (14 octobre) : hors de l'écran, pas `display:none`
   — certains robots sautent les champs masqués ainsi. */
.dv-piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }