/* modernite-2026-devis.css : lifting visuel du formulaire de devis (lot T3), chargee SEULEMENT par static/devis.html.
   Chargee APRES le dernier <style> de la page. Reversible en retirant le <link>.
   Feuille AUTOSUFFISANTE : ses propres variables --m26-* (repli litteral) ; ne depend de la page que pour les
   variables verifiees dans le :root de devis.html (--teal, --teal-deep, --teal-soft, --navy, --navy-glow, --ink,
   --muted, --line, --bg, --card, --ok, --radius) ; pas de mode nuit sur cette page.
   CHARTE DU DIAGNOSTIQUE : applyCharte() pose --teal / --teal-deep / --teal-soft / --navy / --navy-deep / --navy-soft /
   --navy-glow par setProperty. AUCUNE couleur de marque en dur ici : tout ce qui est teinte passe par ces variables ou par
   color-mix() dessus. Seules couleurs litterales : ombres neutres (ardoise) et blanc/gris de surface.
   Ne change JAMAIS la couleur d'un statut ni d'un message d'erreur/succes. Aucun selecteur nu (header, .btn...).
   Geometrie desktop confinee a @media (min-width: 801px) : la page a deja un bloc mobile a 800 px qu'on n'ecrase pas. */

:root {
  --m26-radius-card: 16px;
  --m26-radius-btn: 10px;
  --m26-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --m26-shadow-pop: 0 2px 4px rgba(15, 23, 42, .05), 0 16px 36px -12px rgba(15, 23, 42, .22);
  --m26-ease: 150ms ease;
  --m26-ring: 0 0 0 3px var(--teal-soft);
  --m26-tint: var(--teal-soft);
  --m26-border-hover: var(--muted);
  --m26-lift-teal: 0 8px 18px -10px var(--teal);
  --m26-lift-navy: 0 8px 18px -10px var(--navy-glow);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --m26-ring: 0 0 0 3px color-mix(in srgb, var(--teal) 30%, transparent);
    --m26-tint: color-mix(in srgb, var(--teal) 9%, var(--card));
    --m26-border-hover: color-mix(in srgb, var(--muted) 45%, var(--line));
  }
}

/* ── Marge de bas de page : reserve la hauteur du bandeau de la demo (--demo-bandeau-h, absente en production = 0) ── */
body {
  padding-bottom: var(--demo-bandeau-h, 0px);
}

/* ── En-tete de la page (header.intro) ── */
header.intro .tag {
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--m26-tint);
  font-weight: 700;
}
header.intro h1 {
  font-weight: 700;
}

/* ── Cartes (une par etape) ── */
.devis-col-main .card {
  border: 1px solid var(--line);
  border-radius: var(--m26-radius-card);
  box-shadow: var(--m26-shadow-card);
}
.section-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.section-title .num {
  box-shadow: var(--m26-ring);
}
.quote-head h2,
#rdvDone h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Champs : anneau de focus aux couleurs de la charte ── */
.devis-col-main input[type=text],
.devis-col-main input[type=email],
.devis-col-main input[type=tel],
.devis-col-main input[type=number],
.devis-col-main textarea,
.devis-col-main select {
  min-height: 46px;
  border-radius: var(--m26-radius-btn);
  transition: border-color var(--m26-ease), box-shadow var(--m26-ease);
}
.devis-col-main textarea {
  min-height: 0;
}
.devis-col-main input[type=text]:hover:not(:focus):not(.v-invalid),
.devis-col-main input[type=email]:hover:not(:focus):not(.v-invalid),
.devis-col-main input[type=tel]:hover:not(:focus):not(.v-invalid),
.devis-col-main input[type=number]:hover:not(:focus):not(.v-invalid),
.devis-col-main textarea:hover:not(:focus):not(.v-invalid),
.devis-col-main select:hover:not(:focus):not(.v-invalid) {
  border-color: var(--m26-border-hover);
}
.devis-col-main input[type=text]:focus,
.devis-col-main input[type=email]:focus,
.devis-col-main input[type=tel]:focus,
.devis-col-main input[type=number]:focus,
.devis-col-main textarea:focus,
.devis-col-main select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: var(--m26-ring);
}
/* les regles input.v-invalid:focus de la page portent !important : l'etat d'erreur garde son rouge et son anneau rouge */

/* ── Suggestions d'adresse ── */
.suggestions {
  border-radius: 12px;
  box-shadow: var(--m26-shadow-pop);
}
.suggestions div {
  transition: background-color var(--m26-ease);
}

/* ── Formule pack / a l'unite (cartes data-mode) ── */
.mode-pick {
  border-radius: var(--m26-radius-card);
  box-shadow: var(--m26-shadow-card);
  transition: border-color var(--m26-ease), transform var(--m26-ease), box-shadow var(--m26-ease), background-color var(--m26-ease);
}
.mode-pick:hover {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 16px 32px -16px var(--teal);
}
.mode-pick .mp-ic {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--m26-tint);
  font-size: 28px; line-height: 1;
}
.mode-pick .mp-title {
  letter-spacing: -0.01em;
}
.badge-reco {
  padding: 4px 11px;
  letter-spacing: .06em;
}
.mode-active {
  border-radius: 14px;
}

/* ── Cartes de choix : type de mission, type de bien, occupation (.toggle), options (.opts) ── */
.toggle label {
  border-radius: 14px;
  transition: border-color var(--m26-ease), background-color var(--m26-ease), color var(--m26-ease),
              box-shadow var(--m26-ease), transform var(--m26-ease);
}
.toggle input:not(:checked) + label:hover {
  border-color: var(--teal);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--m26-shadow-card);
}
.opts label {
  padding: 10px 16px;
  transition: border-color var(--m26-ease), background-color var(--m26-ease), color var(--m26-ease),
              box-shadow var(--m26-ease);
}
.opts input:not(:checked) + label:hover {
  border-color: var(--teal);
  color: var(--ink);
}

/* ── Choix des diagnostics (mode a l'unite) ── */
.diag-choice {
  border-radius: 14px;
  transition: border-color var(--m26-ease), background-color var(--m26-ease), box-shadow var(--m26-ease);
}
.diag-choice:hover:not(.checked) {
  background: var(--m26-tint);
}
.diag-choice.checked {
  box-shadow: var(--m26-shadow-card);
}

/* ── Boutons principaux : Commander, Choisir un creneau ── */
button.submit,
.next-cta {
  border-radius: var(--m26-radius-btn);
  transition: background-color var(--m26-ease), transform var(--m26-ease), box-shadow var(--m26-ease);
}
button.submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--m26-lift-teal);
}
.next-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--m26-lift-navy);
}
button.submit:active:not(:disabled),
.next-cta:active {
  transform: translateY(0);
  box-shadow: none;
}
.pack-banner .pb-btn {
  transition: background-color var(--m26-ease), transform var(--m26-ease);
}
.pack-banner .pb-btn:hover {
  transform: translateY(-1px);
}
.mode-active button {
  transition: background-color var(--m26-ease), color var(--m26-ease), border-color var(--m26-ease);
}

/* ── Bandeaux et messages : la forme s'arrondit, jamais la couleur ── */
.error,
.rdv-error,
.idf-note,
.pack-banner,
.rdv-banner {
  border-radius: 12px;
}
.rdv-contact-msg {
  border-radius: 14px;
}

/* ── Recapitulatif (colonne laterale desktop) ── */
.recap-sidebar {
  border: 1px solid var(--line);
  border-radius: var(--m26-radius-card);
  box-shadow: var(--m26-shadow-card);
}
.recap-sidebar h3 {
  font-weight: 700;
  letter-spacing: .06em;
}
.recap-row.total {
  letter-spacing: -0.01em;
}

/* ── Resultat du devis ── */
.price-box {
  border-radius: 14px;
}
.price-total .v {
  letter-spacing: -0.02em;
}

/* ── Choix du creneau ── */
.rdv-navbtn {
  transition: border-color var(--m26-ease), color var(--m26-ease), background-color var(--m26-ease);
}
.rdv-navbtn:hover:not(:disabled) {
  background: var(--m26-tint);
}
.slot {
  border-radius: 10px;
  padding: 10px 0;
  transition: background-color var(--m26-ease), border-color var(--m26-ease), color var(--m26-ease),
              box-shadow var(--m26-ease), transform var(--m26-ease);
}
.slot.ok:hover {
  transform: translateY(-1px);
}
.slot.sel {
  transform: none;
}
.rdv-preview {
  border-radius: 14px;
  box-shadow: var(--m26-shadow-card);
}
.spinner.dark {
  border-color: var(--teal-soft);
  border-top-color: var(--teal);
}

/* ── Ecran de confirmation ── */
#rdvDone .check {
  box-shadow: 0 0 0 8px var(--teal-soft);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  #rdvDone .check {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 16%, transparent);
  }
}

/* ── Barre de prix mobile (comportement inchange : seuls l'aspect et le decalage sous le bandeau de la demo) ── */
#recapMobileBar {
  bottom: var(--demo-bandeau-h, 0px);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .10);
}
#recapMobileSum {
  min-height: 52px;
}

@media (max-width: 800px) {
  body {
    padding-bottom: calc(70px + var(--demo-bandeau-h, 0px));
  }
  /* Correctif M2 (defaut preexistant releve sur capture a 390 px, mode « diagnostics isoles ») : le prix « a partir de 25 € · offert si
     commande avec un autre diagnostic » (white-space:nowrap dans la page) elargissait la page a 625 px. Sur mobile le prix passe
     sous le libelle, aligne sur lui (18 px de case + 12 px d'ecart) et peut se replier. */
  .diag-choice {
    flex-wrap: wrap;
  }
  .diag-choice .dc-name {
    min-width: 0;
  }
  .diag-choice .dc-price {
    flex: 1 1 100%;
    padding-left: 30px;
    white-space: normal;
  }
}
/* Correctif M2 : le montant d'une ligne du devis ne se coupe plus (« 110 / € » sur 2 lignes a 390 px) */
.diag-list li .px,
.diag-list li .inc {
  white-space: nowrap;
  margin-left: 12px;
}

/* ── Geometrie desktop (au-dela du point de rupture 800 px de la page) ── */
@media (min-width: 801px) {
  .devis-col-main .card {
    padding: 30px 30px;
  }
  .mode-grid {
    gap: 16px;
  }
  .mode-pick {
    padding: 24px 22px 20px;
  }
  .recap-sidebar {
    padding: 24px;
  }
}

/* ── Accessibilite : focus visible, limite au perimetre de la page ── */
.wrap button:focus-visible,
.wrap a:focus-visible,
.wrap select:focus-visible,
.wrap input[type=checkbox]:focus-visible,
.wrap input[type=radio]:focus-visible,
#recapMobileBar :focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.toggle input:focus-visible + label,
.opts input:focus-visible + label {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.diag-choice:has(input:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ── Reduction de mouvement : aucune animation decorative (le spinner de chargement reste : il porte une information) ── */
@media (prefers-reduced-motion: reduce) {
  .mode-pick, .toggle label, .opts label, .diag-choice, .slot, .rdv-navbtn,
  button.submit, .next-cta, .pack-banner .pb-btn, .mode-active button,
  .suggestions div,
  .devis-col-main input[type=text], .devis-col-main input[type=email], .devis-col-main input[type=tel],
  .devis-col-main input[type=number], .devis-col-main textarea, .devis-col-main select {
    transition: none;
  }
  .mode-pick:hover,
  .toggle input:not(:checked) + label:hover,
  button.submit:hover:not(:disabled), .next-cta:hover,
  .pack-banner .pb-btn:hover,
  .slot.ok:hover {
    transform: none;
  }
  #result.show, #rdvSection.show, #rdvDone.show {
    animation: none;
  }
}