/* ==========================================================================
   DEVIS — formulaire en 4 étapes (JS) ou d'un seul tenant (sans JS).
   Décor jaune : encre sur jaune, contrastes AA partout.
   ========================================================================== */

.devis {
    padding-bottom: var(--esp-2xl);
}

.formulaire,
.devis__merci {
    display: grid;
    gap: var(--esp-l);
}

@media (min-width: 64em) {
    .formulaire,
    .devis__merci {
        grid-column: 3 / span 8;
    }
}

/* Champ piège : hors écran pour les humains, rempli par les robots. */
.formulaire__piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formulaire__alerte {
    padding: var(--esp-s) var(--esp-m);
    background: var(--c-encre);
    color: var(--c-jaune);
    font-weight: 600;
    box-shadow: var(--decalage-ombre) var(--decalage-ombre) 0 var(--c-rouge);
}

/* --- Le billet (JS) ----------------------------------------------------------
   Appliqué dès le premier rendu sous .js (posée par head.js), talons compris,
   pour éviter tout décalage de mise en page quand devis.js prend la main.
   Le formulaire par étapes devient un billet d'entrée crème : encoches rondes sur
   les côtés, ligne de perforation, et une rangée de talons (un par étape). Chaque
   étape franchie détache son talon (devis.js) ; il reste son pointillé. */
.js .formulaire {
    --billet-pad: clamp(1.25rem, 0.8rem + 2.2vw, 2.75rem);
    --encoche: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
    --talon-h: 4.25rem;
    position: relative;
    padding: var(--billet-pad);
    border: var(--trait) solid var(--c-encre);
    background: var(--c-creme);
    box-shadow: calc(var(--decalage-ombre) * 1.5) calc(var(--decalage-ombre) * 1.5) 0 var(--c-encre);
}

/* Encoches du billet : deux demi-disques (couleur du décor) qui mordent le bord,
   au bout de la ligne de perforation. */
.formulaire__progression::before,
.formulaire__progression::after {
    content: "";
    position: absolute;
    top: calc(100% - var(--encoche) / 2 + var(--trait) / 2);
    width: calc(var(--encoche) / 2 + var(--trait));
    height: var(--encoche);
    border: var(--trait) solid var(--c-encre);
    background: var(--fond);
}

.formulaire__progression::before {
    left: calc(var(--billet-pad) * -1 - var(--trait));
    border-left: 0;
    border-radius: 0 999px 999px 0;
}

.formulaire__progression::after {
    right: calc(var(--billet-pad) * -1 - var(--trait));
    border-right: 0;
    border-radius: 999px 0 0 999px;
}

/* Sans JS (long formulaire d'un seul tenant), ni billet ni talons. */
.formulaire__billet,
.formulaire__progression {
    display: none;
}

.js .formulaire__billet {
    display: block;
}

.formulaire__billet {
    margin-bottom: calc(var(--esp-l) * -0.6);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    color: var(--discret);
}

.js .formulaire__progression {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-bottom: var(--esp-s);
    border-bottom: var(--trait) dashed var(--c-encre);
}

/* Emplacement du talon : il reste un pointillé quand le talon est parti. */
.formulaire__repere {
    position: relative;
    height: var(--talon-h);
    border: 1px dashed var(--filet);
    border-left-width: 0;
}

.formulaire__repere:first-child {
    border-left-width: 1px;
}

.talon {
    position: absolute;
    inset: -1px;
    display: grid;
    align-content: space-between;
    padding: 0.55rem 0.6rem;
    border: var(--trait) solid var(--c-encre);
    background: var(--c-jaune);
    color: var(--c-encre);
    font-size: 0.625rem;
    line-height: 1.25;
    transform-origin: 50% 0;
}

.formulaire__repere + .formulaire__repere .talon {
    border-left-style: dashed;
}

.talon__num {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.formulaire__repere.est-courant .talon {
    background: var(--c-encre);
    color: var(--c-jaune);
}

.formulaire__repere.est-fait .talon {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 29.99em) {
    .talon__nom {
        display: none;
    }
}

/* --- Tampon de confirmation : monogramme et « Ta-dam ! » à l'encre rouge,
   apposé de travers sur le billet : en haut sur mobile (bandeau réservé), dans le
   coin bas droit sur grand écran (zone libre à côté des actions). */
.tampon {
    position: absolute;
    top: -1.5rem;
    right: 0.75rem;
    display: grid;
    place-items: center;
    width: clamp(7rem, 6rem + 4vw, 9.5rem);
    aspect-ratio: 1;
    border: 3px solid var(--c-rouge);
    background: rgb(243 236 221 / 0.6);
    border-radius: 50%;
    outline: 1px solid var(--c-rouge);
    outline-offset: 4px;
    color: var(--c-rouge);
    rotate: -12deg;
}

.tampon__logo {
    width: 4.25rem;
    height: 4.25rem;
    color: var(--c-rouge);
}

.tampon__logo .logo__fond {
    fill: transparent;
}

.tampon__texte {
    position: absolute;
    left: 50%;
    bottom: 0.9rem;
    padding: 0.1em 0.5em 0;
    background: var(--c-creme);
    font-family: var(--f-display);
    font-size: 1.375rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    translate: -50% 0;
    border: 2px solid var(--c-rouge);
}

/* --- Étapes ---------------------------------------------------------------- */
.etape-devis {
    display: grid;
    gap: var(--esp-m);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.etape-devis__titre {
    display: flex;
    align-items: baseline;
    gap: var(--esp-xs);
    margin-bottom: var(--esp-s);
    padding: 0;
    font-family: var(--f-display);
    font-size: var(--fs-titre-section);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.etape-devis__num {
    font-size: var(--fs-mono);
    translate: 0 -1.4em;
}

/* Sans JS, les étapes s'enchaînent, séparées par un filet. */
.etape-devis + .etape-devis {
    padding-top: var(--esp-l);
    border-top: var(--trait) solid var(--c-encre);
}

.js .formulaire.est-par-etapes .etape-devis + .etape-devis {
    padding-top: 0;
    border-top: 0;
}

/* --- Champs ---------------------------------------------------------------- */
.champ {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.champ__etiquette {
    padding: 0;
    font-weight: 600;
}

.champ__statut {
    margin-left: 0.3em;
    font-family: var(--f-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--discret);
}

.champ__aide {
    font-size: var(--fs-legende);
    color: var(--discret);
}

.champ__saisie {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 0.9rem;
    border: var(--trait) solid var(--c-encre);
    border-radius: 0;
    background: var(--c-creme);
    color: var(--c-encre);
    font-size: 1rem;     /* 16 px minimum : pas de zoom automatique sur iOS */
    line-height: 1.4;
    box-shadow: 4px 4px 0 var(--c-encre);
    transition: translate var(--dur-rapide) var(--ease-entree);
}

textarea.champ__saisie {
    min-height: 9rem;
    resize: vertical;
}

select.champ__saisie {
    appearance: none;
    padding-right: 2.5rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--c-encre) 50%), linear-gradient(135deg, var(--c-encre) 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
}

.champ__saisie:focus-visible {
    outline: var(--trait) solid var(--c-encre);
    outline-offset: 3px;
    translate: -2px -2px;
}

.champ__saisie[aria-invalid="true"] {
    border-color: var(--c-rouge);
    box-shadow: 4px 4px 0 var(--c-rouge);
}

.champ__erreur {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--c-encre);
    font-size: var(--fs-legende);
    font-weight: 700;
}

.champ__erreur::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--c-rouge);
    color: var(--c-creme);
    font-family: var(--f-mono);
    font-size: 0.6875rem;
}

.champs-duo {
    display: grid;
    gap: var(--esp-m);
}

@media (min-width: 48em) {
    .champs-duo {
        grid-template-columns: 1fr 1fr;
        gap: var(--gouttiere);
    }
}

/* --- Choix (radios, cases) : grandes tuiles cliquables ------------------- */
.choix {
    display: grid;
    gap: var(--esp-xs);
}

@media (min-width: 48em) {
    .choix {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .champ--type_demande .choix {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .choix--cases {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .choix--costumes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.choix__option {
    position: relative;
    display: flex;
}

.choix__option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.choix__libelle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.7rem 0.9rem;
    border: var(--trait) solid var(--c-encre);
    background: var(--c-creme);
    line-height: 1.3;
    transition: background-color var(--dur-rapide) linear, color var(--dur-rapide) linear;
}

/* Indicateur : anneau (radio) ou carré (case), écho au monogramme. */
.choix__libelle::before {
    content: "";
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    border: var(--trait) solid currentColor;
    border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--c-creme);
}

.choix--cases .choix__libelle::before,
.choix--costumes .choix__libelle::before {
    border-radius: 0;
}

.choix__option input:checked + .choix__libelle {
    background: var(--c-encre);
    color: var(--c-jaune);
}

.choix__option input:checked + .choix__libelle::before {
    background: var(--c-jaune);
    box-shadow: inset 0 0 0 3px var(--c-encre);
}

.choix__option input:focus-visible + .choix__libelle {
    outline: var(--trait) solid var(--c-encre);
    outline-offset: 3px;
}

.choix__option--costume .choix__libelle {
    min-height: 2.75rem;
    font-size: var(--fs-legende);
}

.champ[aria-invalid="true"] .choix__libelle {
    border-color: var(--c-rouge);
}

/* Consentement */
.consentement {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.consentement input {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    accent-color: var(--c-encre);
}

.consentement a {
    font-weight: 600;
}

/* --- Navigation des étapes -------------------------------------------------- */
.formulaire__navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-s);
    padding-top: var(--esp-m);
    border-top: var(--trait) solid var(--c-encre);
}

.formulaire__etape {
    order: -1;
    width: 100%;
    color: var(--discret);
}

.formulaire__suivant,
.formulaire__envoyer {
    margin-left: auto;
}

@media (min-width: 48em) {
    .formulaire__etape {
        order: 0;
        width: auto;
    }
}

.formulaire__envoyer[aria-busy="true"] {
    opacity: 0.7;
    pointer-events: none;
}

/* --- Confirmation : le billet tamponné ------------------------------------------ */
.devis__merci {
    position: relative;
    justify-items: start;
    margin-top: var(--esp-l);
    padding-top: calc(var(--esp-l) + 4.5rem);
    padding: var(--esp-l) clamp(1.25rem, 0.8rem + 2.2vw, 2.75rem);
    border: var(--trait) solid var(--c-encre);
    background: var(--c-creme);
    box-shadow: calc(var(--decalage-ombre) * 1.5) calc(var(--decalage-ombre) * 1.5) 0 var(--c-encre);
}

@media (min-width: 48em) {
    .devis__merci { padding-top: var(--esp-l); }
    .tampon { top: auto; bottom: -2rem; right: clamp(1rem, 4vw, 3rem); }
}

.devis__merci-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-m);
}

@media (prefers-reduced-motion: reduce) {
    .champ__saisie {
        transition: none;
    }
}

/* --- Le conducteur (JS) ------------------------------------------------------
   À côté du formulaire, le spectacle du visiteur s'écrit en direct, comme le
   conducteur d'un show : en-tête de scène (capitales), didascalies (italique
   de théâtre), informations de production (mono). Grand écran : feuille épinglée
   à droite. Mobile : onglet en bas de l'écran qui déplie la feuille. Sans JS :
   absent (le formulaire suffit). Mis en page dès le premier rendu sous .js
   (pas de décalage quand devis.js prend la main). */
.conducteur {
    display: none;
}

.js .conducteur:not([hidden]) {
    display: block;
}

.conducteur__feuille {
    position: relative;
    padding: var(--esp-m) var(--esp-m) var(--esp-s);
    border: var(--trait) solid var(--c-encre);
    background: var(--c-creme);
    color: var(--c-encre);
    box-shadow: var(--decalage-ombre) var(--decalage-ombre) 0 var(--c-encre);
}

.conducteur__entete {
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    color: var(--c-gris-creme);
}

.conducteur__titre {
    margin: 0.2rem 0 var(--esp-s);
    padding-bottom: var(--esp-xs);
    border-bottom: var(--trait) solid var(--c-encre);
    font-family: var(--f-display);
    font-size: var(--fs-sous-titre);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.conducteur__texte {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    min-height: 8rem;
}

.conducteur__vide {
    font-family: var(--f-italique);
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--c-gris-creme);
}

/* Les trois voix du script. */
.ligne--scene {
    margin-bottom: 0.2rem;
    font-family: var(--f-display);
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
}

.ligne--didascalie {
    padding-left: var(--esp-s);
    font-family: var(--f-italique);
    font-style: italic;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    line-height: 1.3;
}

.ligne--info {
    font-family: var(--f-mono);
    font-size: var(--fs-mono);
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.ligne--fin {
    margin-top: var(--esp-xs);
    font-family: var(--f-display);
    font-size: var(--fs-sous-titre);
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

/* Curseur de machine à écrire, en fin de dernière ligne écrite. */
.conducteur__curseur {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 0.15em;
    vertical-align: -0.12em;
    background: currentColor;
    animation: curseur-clignote 1s steps(1) infinite;
}

@keyframes curseur-clignote {
    50% { opacity: 0; }
}

.conducteur__page {
    margin-top: var(--esp-s);
    font-size: 0.625rem;
    text-align: center;
    color: var(--c-gris-creme);
}

.conducteur__onglet {
    display: none;
}

/* Mobile et tablette : onglet fixé en bas, feuille dépliable. */
@media (max-width: 63.99em) {
    .js .devis {
        padding-bottom: calc(var(--esp-2xl) + 3.5rem);
    }
    .conducteur {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: calc(var(--z-entete) - 1);
    }
    .conducteur__onglet {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-height: 3.25rem;
        padding: 0 var(--marge);
        background: var(--c-encre);
        color: var(--c-jaune);
        font-size: var(--fs-mono);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .conducteur__onglet::after {
        content: "";
        width: 0.6rem;
        height: 0.6rem;
        border-top: var(--trait) solid currentColor;
        border-left: var(--trait) solid currentColor;
        rotate: 45deg;
        translate: 0 0.15rem;
        transition: rotate var(--dur-rapide) var(--ease-entree);
    }
    .conducteur.est-ouvert .conducteur__onglet::after {
        rotate: 225deg;
        translate: 0 -0.15rem;
    }
    .conducteur__compte {
        margin-left: auto;
        margin-right: var(--esp-s);
        color: var(--c-creme);
        font-weight: 500;
    }
    .conducteur__feuille {
        display: none;
        max-height: 70vh;
        overflow-y: auto;
        border-width: var(--trait) 0 0;
        box-shadow: none;
    }
    .conducteur.est-ouvert .conducteur__feuille {
        display: block;
    }
}

/* Grand écran : formulaire à gauche, conducteur épinglé à droite. */
@media (min-width: 64em) {
    .js .formulaire,
    .js .devis__merci {
        grid-column: 1 / span 7;
        grid-row: 2;
    }
    .js .conducteur {
        grid-column: 9 / span 4;
        grid-row: 2;
        align-self: start;
        position: sticky;
        top: calc(var(--hauteur-entete) + var(--esp-m));
    }
    .conducteur__feuille {
        rotate: 0.8deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .conducteur__curseur { animation: none; }
}

/* --- Deux formulaires : devis complet ou simple question -----------------------
   Sans JS : deux ancres, puis les deux formulaires l'un sous l'autre.
   Avec JS : deux onglets ; .mode-question sur la section affiche le mot court. */
.modes {
    display: inline-flex;
    justify-self: start;
    grid-row: 1;
    margin-bottom: var(--esp-m);
    padding: 3px;
    border: var(--trait) solid var(--c-encre);
    border-radius: 999px;
}

.modes__bouton {
    display: inline-grid;
    place-items: center;
    min-height: 44px;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    font-size: var(--fs-mono);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--c-encre);
    transition: background-color var(--dur-rapide) linear, color var(--dur-rapide) linear;
}

.modes__bouton[aria-pressed="true"] {
    background: var(--c-encre);
    color: var(--c-jaune);
}

.js .devis.mode-question .formulaire,
.js .devis.mode-question .conducteur,
.js .devis:not(.mode-question) .question {
    display: none;
}

/* Le mot : une feuille crème glissée en coulisses, tenue par un bout de ruban. */
.question {
    margin-top: var(--esp-xl);
}

.js .question {
    grid-row: 2;
    margin-top: 0;
}

.mot {
    position: relative;
    display: grid;
    gap: var(--esp-m);
    padding: var(--esp-l) clamp(1.25rem, 0.8rem + 2.2vw, 2.75rem);
    border: var(--trait) solid var(--c-encre);
    background: var(--c-creme);
    box-shadow: calc(var(--decalage-ombre) * 1.5) calc(var(--decalage-ombre) * 1.5) 0 var(--c-encre);
    rotate: -0.6deg;
}

.mot::before {
    content: "";
    position: absolute;
    top: -0.9rem;
    left: 50%;
    width: 8rem;
    height: 1.8rem;
    background: rgb(243 236 221 / 0.75);
    border: 1px solid rgb(20 18 16 / 0.15);
    translate: -50% 0;
    rotate: 3deg;
}

.mot__entete {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: var(--c-gris-creme);
}

.mot__titre {
    margin-top: calc(var(--esp-m) * -0.6);
}

.mot__chapo {
    max-width: 46ch;
    font-size: var(--fs-chapo);
    line-height: 1.4;
}

.mot--merci {
    justify-items: start;
    padding-bottom: calc(var(--esp-l) + 2rem);
}

.mot--merci .tampon {
    top: auto;
    bottom: -2rem;
    right: clamp(1rem, 4vw, 3rem);
}

@media (min-width: 64em) {
    .modes { grid-column: 1 / -1; }
    .question { grid-column: 3 / span 8; }
}