/* =====================================================================
   Formulaire de demande de demo — feuille partagee
   ---------------------------------------------------------------------
   Le style de la modale #leadModal, de ses deux etapes et de ses pastilles.
   Vit ici depuis le 23/08/2026 : il etait recopie a l'identique dans le
   <style> de /lp-standing-4 et de /lp-revenu, et la page d'accueil n'en
   portait qu'une copie TRONQUEE, amputee de tout ce qui suit les pastilles.
   Il lui manquait donc `.lead-step { display: none }` : ses deux etapes
   s'affichaient l'une sous l'autre, formulaire de dix champs d'un bloc, la
   ou les deux landings en montraient cinq. Personne ne l'avait vu.

   Va avec js/lead-form.js, qui porte le comportement.
   Apres modification : bumper le ?v=N dans index.html, lp-standing-4.html
   et lp-revenu.html (_headers sert /css/* en immutable pour un an).
   ===================================================================== */

/* ---------- Sélecteur prix/nuitée : pastilles à cocher (pas de menu déroulant) ---------- */
.lead-field-label { display: block; font-family: var(--font-body); font-size: 0.84rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
/* En grille, pas en ligne qui se replie. Les quatre tranches de prix se
   rangeaient a la suite : « Plus de 500 € » tombait seule sur la derniere
   ligne et se lisait comme un cas particulier, alors que c'est la cible.
   Toutes ont maintenant exactement le meme poids. Valentin, 23/08. */
/* Choix a cocher, jamais des champs a remplir.
   La version en grille pleine largeur sur fond blanc reprenait la bordure, le
   rayon et la largeur des inputs voisins : l'oeil lisait quatre champs vides de
   plus. Deux signaux les en distinguent maintenant, la largeur libre (chaque
   choix fait la taille de son texte) et le fond sable. */
.price-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.price-pill { position: relative; margin: 0; cursor: pointer; }
.price-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.price-pill span {
    display: inline-block;
    padding: 9px 15px; border-radius: 999px;
    border: 1.5px solid var(--border); background: var(--cream-dark);
    font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--ink);
    line-height: 1; text-align: center; white-space: nowrap; transition: border-color .15s, background .15s, color .15s;
}
.price-pill:hover span { border-color: var(--terra-doux); background: var(--linen); }
/* Mention discrete accolee au libelle du groupe : « Prix d'une nuitee · un seul choix ». */
.lead-field-label .choix-unique { font-weight: 400; color: var(--zinc); font-size: 0.78rem; }
.price-pill input:checked + span { background: var(--sienna); border-color: var(--sienna); color: #fff; font-weight: 600; }
.price-pill input:focus-visible + span { outline: 2px solid var(--sienna); outline-offset: 2px; }

/* ---------- Modal compact : le formulaire tient sans scroll (desktop + mobile) ---------- */
#leadModal .lead-modal-card { max-height: 96vh; overflow: hidden; padding: 22px 26px 20px; }
#leadModal .lead-modal-eyebrow { margin-bottom: 5px; }
#leadModal .lead-modal-title { font-size: 1.18rem; line-height: 1.24; margin-bottom: 13px; }
#leadModal .lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: end; margin-bottom: 9px; }
#leadModal .lead-row .lead-field { margin-bottom: 0; }
#leadModal .lead-field { margin-bottom: 9px; }
#leadModal .lead-field label { margin-bottom: 3px; }
#leadModal .lead-field input { padding: 9px 12px; }
#leadModal .lead-field-label { margin-bottom: 7px; }
#leadModal .price-pills { gap: 6px; }
#leadModal .price-pill span { padding: 8px 13px; font-size: 0.86rem; }
#leadModal .lead-consent { margin: 7px 0 11px; }
#leadModal .lead-reassurance { margin-top: 6px; }
@media (max-width: 767px) {
    #leadModal .lead-modal-card { padding: 20px 18px 18px; max-height: 94vh; }
    #leadModal .price-pill span { padding: 9px 8px; font-size: 0.82rem; }
}
/* ====== Formulaire en 2 etapes ====== */
.lead-step { display: none; }
.lead-step.is-active { display: block; animation: leadStepIn .28s ease both; }
/* Le clavier virtuel ne reduit pas les vh : la carte etait plafonnee en 94vh
   et son bas passait sous le clavier, bouton de validation compris.
   Les dvh, eux, suivent le clavier. */
@supports (height: 100dvh) {
    @media (max-width: 767px) {
        .lead-modal { height: 100dvh; }
        .lead-modal-card { max-height: 94dvh; }
    }
}
@media (max-width: 767px) {
    .lead-submit { position: sticky; bottom: 0; z-index: 2; }
    .lead-step.is-active .lead-submit { box-shadow: 0 -10px 18px -8px var(--cream); }
    /* Cibles tactiles : 29 px mesures, 44 px recommandes */
    #leadModal .price-pill span { min-height: 44px; }
    .lead-consent { min-height: 44px; align-items: center; }
    .lead-consent input { width: 22px; height: 22px; flex: 0 0 22px; }
    .lead-back { min-height: 44px; }
}
/* Sous 16 px, Safari iOS zoome au focus et fait deriver la page. */
#leadModal textarea, #leadModal input { font-size: 16px; }
@keyframes leadStepIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

.lead-steps[hidden] { display: none; }
.lead-steps { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.lead-steps-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(0,0,0,0.09); overflow: hidden; }
.lead-steps-bar i { display: block; height: 100%; width: 50%; border-radius: 3px; background: var(--sienna); transition: width .3s ease; }
.lead-steps-label { font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--zinc); white-space: nowrap; }

.lead-hint { font-family: var(--font-body); font-size: 0.78rem; color: var(--zinc); margin: 8px 0 0; }

.lead-last-step { font-family: var(--font-body); font-size: 0.88rem; color: var(--zinc); margin: 0 0 14px; line-height: 1.5; }
.lead-last-badge {
    display: inline-block; margin-right: 6px; padding: 3px 9px; border-radius: 999px;
    background: rgba(186, 74, 44, 0.1); color: var(--sienna);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}

#leadModal textarea {
    width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px;
    font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); background: #fff;
    resize: vertical; min-height: 74px; transition: border-color .2s ease;
}
#leadModal textarea:focus { outline: none; border-color: var(--sienna); }

.lead-back {
    display: block; margin: 12px auto 0; padding: 6px 10px; border: 0; background: none; cursor: pointer;
    font-family: var(--font-body); font-size: 0.85rem; color: var(--zinc); text-decoration: underline;
    text-decoration-color: rgba(0,0,0,0.2); text-underline-offset: 3px;
}
.lead-back:hover { color: var(--ink); }

.lead-error { font-family: var(--font-body); font-size: 0.92rem; color: #b3261e; margin: 12px 0; padding: 10px 13px; border-radius: 10px; background: rgba(179,38,30,0.07); border: 1px solid rgba(179,38,30,0.22); }
/* Signalement du champ fautif : la validation native accrochait ses bulles a
   des boutons radio invisibles de 1x1 px, donc a rien du tout. */
.champ-erreur { border-color: #b3261e !important; box-shadow: 0 0 0 3px rgba(179,38,30,0.12); }
.price-pills.champ-erreur { border-radius: 12px; padding: 6px; margin: -6px; }