/* ===================================================================
 * Formulaire de devis (Gravity Forms, thème « orbital »)
 *
 * Portée : le conteneur .attps-uni-devis-form posé autour du shortcode
 * [gravityform] dans attps-builder. Rien ne fuit hors de ce bloc : les autres
 * formulaires du site gardent le rendu natif.
 *
 * DEUX CONTRAINTES DE CASCADE, d'où la forme du fichier :
 *
 * 1. Gravity Forms charge ses feuilles APRÈS celle-ci (il les enfile au moment
 *    du rendu du formulaire). À spécificité égale, c'est donc GF qui gagne :
 *    tout est imbriqué sous `.gform_wrapper.gform-theme--framework` pour passer
 *    devant ses sélecteurs `.gform-theme--framework …`.
 * 2. GF imprime ses variables dans un <style> inline porté par un sélecteur
 *    d'ID (#gform_wrapper_3…). Les variables qu'il y déclare ne peuvent être
 *    remappées qu'avec !important — elles sont regroupées et signalées.
 *
 * Le gros du travail passe par les variables --gf-* du thème plutôt que par des
 * redéclarations de propriétés : c'est ce que le framework attend, et ça résiste
 * aux mises à jour de GF.
 * ================================================================ */

.attps-uni-devis-form {
    /* --- Jetons locaux ------------------------------------------- */
    --devis-surface: color-mix(in srgb, var(--atb-neutral) 6%, var(--atb-light));
    --devis-surface-strong: color-mix(in srgb, var(--atb-neutral) 10%, var(--atb-light));
    --devis-card-radius: var(--atb-radius);
    --devis-indicator: 1.75rem;
    /* Chevron servant de MASQUE : seule sa forme compte, la couleur est
       donnée par le background-color du pseudo-élément. */
    --devis-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --devis-indicator-offset: 0.625rem;

    .gform_wrapper.gform-theme--framework {

        /* ===========================================================
         * REMAPPAGE DU THÈME SUR LA CHARTE
         * ======================================================== */

        /* Déclarées en inline par GF → !important obligatoire. */
        --gf-color-primary: var(--atb-primary) !important;
        --gf-color-primary-contrast: var(--atb-light) !important;
        --gf-color-primary-darker: color-mix(in srgb, var(--atb-primary) 85%, var(--atb-dark)) !important;
        --gf-color-primary-lighter: color-mix(in srgb, var(--atb-primary) 70%, var(--atb-light)) !important;
        /* Canaux RVB de --atb-primary : à tenir à jour si la charte change
           (CSS ne sait pas décomposer une couleur en canaux). */
        --gf-color-primary-rgb: 0, 153, 221 !important;
        --gf-ctrl-border-color: transparent !important;
        --gf-ctrl-size: 3.25rem !important;
        --gf-radius: var(--atb-radius) !important;
        --gf-field-img-choice-card-space: 0 !important;
        /* Bride la largeur des cartes (200px par défaut) : la grille ci-dessous
           s'en charge, on laisse chaque carte remplir sa colonne. */
        --gf-field-img-choice-size: 100% !important;

        /* Déclarées seulement par la feuille du framework → cascade normale. */
        --gf-ctrl-bg-color: var(--devis-surface);
        --gf-ctrl-bg-color-hover: var(--devis-surface-strong);
        --gf-ctrl-bg-color-focus: var(--atb-light);
        --gf-ctrl-border-color-focus: var(--atb-primary);
        --gf-ctrl-color: var(--atb-neutral);
        --gf-ctrl-radius: var(--atb-radius-pill);
        --gf-ctrl-padding-x: var(--atb-space-5);
        --gf-ctrl-font-size: var(--atb-text-sm);
        --gf-ctrl-font-family: var(--atb-font-body, inherit);

        --gf-ctrl-textarea-height: 18rem;
        --gf-ctrl-textarea-radius: var(--atb-radius-lg);
        --gf-ctrl-textarea-padding-y: var(--atb-space-3);
        --gf-ctrl-textarea-resize: vertical;

        --gf-field-img-choice-aspect-ratio: 4 / 3;

        --gf-form-gap-y: var(--atb-space-6);
        --gf-form-gap-x: var(--atb-space-4);

        font-family: var(--atb-font-body, inherit);

        /* ===========================================================
         * CHROME SUPERFLU
         * ======================================================== */

        /* La progression est déjà rendue par [attps_uni_gform_steps]. */
        .gform_required_legend,
        .gf_progressbar_wrapper {
            display: none;
        }

        .gform_heading {
            margin-block-end: 0;
        }

        /* ===========================================================
         * INTITULÉS
         * ======================================================== */

        .gfield_label,
        .gsection_title {
            font-family: var(--atb-font-heading, inherit);
            font-weight: 700;
            color: var(--atb-neutral);
        }

        .gfield_label {
            font-size: var(--atb-text-base);
            margin-block-end: var(--atb-space-3);
        }

        .gsection {
            border: 0;
            padding-block-end: 0;
        }

        .gsection_title {
            font-size: var(--atb-text-lg);
            margin: 0;
        }

        /* ===========================================================
         * CHOIX IMAGE — cartes à libellé incrusté
         * ======================================================== */

        .gfield--type-image_choice {

            .gfield_checkbox {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: var(--atb-space-3);
            }

            /* La carte : l'image fait le fond, plus de cadre blanc. */
            .gchoice {
                position: relative;
                width: 100%;
                max-width: none;
                overflow: hidden;
                padding: 0;
                border: 2px solid transparent;
                border-radius: var(--devis-card-radius);
                background: var(--devis-surface-strong);
                box-shadow: none;
                transition: border-color var(--atb-transition), transform var(--atb-transition);
            }

            .gchoice:hover {
                transform: translateY(-2px);
            }

            .gchoice:has(.gfield-choice-input:checked) {
                border-color: var(--atb-primary);
            }

            /* Pastille native de GF : remplacée par la case elle-même. */
            .gchoice::after {
                content: none;
            }

            .gfield-image-choice-wrapper-outer {
                display: block;
                padding: 0;
                aspect-ratio: var(--gf-field-img-choice-aspect-ratio);
            }

            .gfield-choice-image-wrapper {
                position: absolute;
                inset: 0;
                margin: 0;
                border-radius: 0;
            }

            .gfield-choice-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            /* Voile dégradé + libellé, par-dessus l'image. */
            .gfield-image-choice-wrapper-inner {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: flex-end;
                padding: var(--atb-space-3);
            }

            .gfield-image-choice-wrapper-inner::before {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(to top,
                        color-mix(in srgb, var(--atb-dark) 78%, transparent) 0%,
                        color-mix(in srgb, var(--atb-dark) 35%, transparent) 40%,
                        transparent 75%);
            }

            .gchoice .gform-field-label--type-inline {
                position: static;
                z-index: 1;
                margin: 0;
                padding: 0;
                color: var(--atb-light);
                font-family: var(--atb-font-heading, inherit);
                font-size: var(--atb-text-sm);
                font-weight: 700;
                line-height: var(--atb-leading-snug);
                cursor: pointer;
            }

            /* Toute la carte devient cliquable. */
            .gchoice .gform-field-label--type-inline::after {
                content: "";
                position: absolute;
                inset: 0;
            }

            /* La case native devient la pastille de sélection. */
            .gfield-choice-input {
                position: absolute;
                inset-block-start: var(--devis-indicator-offset);
                inset-inline-end: var(--devis-indicator-offset);
                z-index: 2;
                width: var(--devis-indicator);
                height: var(--devis-indicator);
                margin: 0;
                appearance: none;
                -webkit-appearance: none;
                /* border: 2px solid var(--atb-light); */
                border-radius: var(--atb-radius-full);
                background: color-mix(in srgb, var(--atb-light) 50%, transparent);
                box-shadow: none;
                cursor: pointer;
                transition: background-color var(--atb-transition);
            }

            .gfield-choice-input:checked {

                background: var(--atb-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 60% no-repeat;
            }

            /* GF dessine sa propre coche en ::before : on ne garde que la nôtre,
               qui suit la couleur de la pastille. */
            .gfield-choice-input::before {
                content: none;
            }

            .gfield-choice-input:focus-visible {
                outline: 2px solid var(--atb-light);
                outline-offset: 2px;
            }
        }

        /* ===========================================================
         * BOUTONS RADIO — pastilles
         * ======================================================== */

        .gfield--type-radio {

            .gfield_radio {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: var(--atb-space-3);
            }

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

            /* Case native masquée mais toujours focusable et cliquable. */
            input[type="radio"] {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                appearance: none;
                -webkit-appearance: none;
                border: 0;
                background: none;
                box-shadow: none;
                opacity: 0;
                cursor: pointer;
            }

            .gform-field-label--type-inline {
                flex: 1;
                margin: 0;
                padding: var(--atb-space-4) var(--atb-space-5);
                border-radius: var(--atb-radius-pill);
                background: var(--devis-surface);
                color: var(--atb-neutral);
                font-size: var(--atb-text-lg);
                text-align: center;
                cursor: pointer;
                transition: background-color var(--atb-transition), color var(--atb-transition);
            }

            .gchoice:hover .gform-field-label--type-inline {
                background: var(--devis-surface-strong);
            }

            input[type="radio"]:checked+.gform-field-label--type-inline {
                background: var(--atb-secondary);
                color: var(--atb-light);
            }

            input[type="radio"]:focus-visible+.gform-field-label--type-inline {
                outline: 2px solid var(--atb-primary);
                outline-offset: 2px;
            }
        }

        /* ===========================================================
         * CHAMPS DE SAISIE
         *
         * L'apparence vient des variables --gf-ctrl-* ci-dessus ; il ne reste
         * ici que ce qu'elles ne couvrent pas.
         * ======================================================== */

        ::placeholder {
            color: color-mix(in srgb, var(--atb-neutral) 45%, var(--atb-light));
            opacity: 1;
        }

        select {
            cursor: pointer;
        }

        /* --gf-ctrl-textarea-height ne descend pas jusqu'à l'élément : on pose
           la hauteur, en laissant le redimensionnement vertical. */
        textarea.textarea {
            block-size: var(--gf-ctrl-textarea-height);
            min-block-size: var(--gf-ctrl-textarea-height);
        }

        /* ===========================================================
         * PIED DE PAGE — boutons
         *
         * Les <input> sont convertis en <button> par Gform_Buttons_Controller :
         * les icônes passent donc par ::before / ::after, sans background-image
         * ni couleur figée dans un SVG.
         *
         * Ciblage par classes uniquement, jamais par [type] : GF déduit le type
         * du bouton de sa page cible (GFFormDisplay::get_form_button), si bien
         * que le bouton « Précédent » sort en type=submit dans le rendu de la
         * page 1 et en type=button une fois la page 2 affichée.
         * Les règles sont ancrées sur .at-gfbtn.button : le thème orbital
         * empile jusqu'à cinq classes sur ses propres sélecteurs de boutons,
         * il faut passer au-dessus.
         * ======================================================== */

        .gform_page_footer {
            display: flex;
            align-items: center;
            gap: var(--atb-space-3);
            margin-block-start: var(--atb-space-6);
            border: 0;
            padding: 0;
        }

        .gform_page_footer .at-gfbtn.button {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            border: 0;
            box-shadow: none;
            font-family: var(--atb-font-heading, inherit);
            font-size: var(--atb-text-base);
            font-weight: 700;
            line-height: var(--atb-leading-none);
            cursor: pointer;
            transition: background-color var(--atb-transition);
        }

        /* Avancer / envoyer : pastille pleine, médaillon fléché à droite.
           Disque en ::before, chevron en ::after — deux pseudo-éléments plutôt
           qu'un SVG bicolore, pour que les deux couleurs restent pilotées par
           les variables. */
        .gform_footer .at-gfbtn.button.gform_button,
        .gform_page_footer .at-gfbtn.button.gform_next_button,
        .gform_page_footer .at-gfbtn.button.gform_button {
            position: relative;
            flex: 1;
            height: auto;
            padding: var(--atb-space-4) var(--atb-space-12) var(--atb-space-4) var(--atb-space-6);
            border-radius: var(--atb-radius-pill);
            background: var(--atb-primary);
            color: var(--atb-light);
            font-size: var(--atb-text-lg);

        }

        .gform_footer .at-gfbtn.button.gform_button::before,
        .gform_page_footer .at-gfbtn.button.gform_next_button::before,
        .gform_page_footer .at-gfbtn.button.gform_button::before {
            content: "";
            position: absolute;
            inset-inline-end: var(--atb-space-2);
            inset-block-start: 50%;
            translate: 0 -50%;
            height: 80%;
            aspect-ratio: 1;
            border-radius: var(--atb-radius-full);
            background: var(--atb-light);
        }

        .gform_footer .at-gfbtn.button.gform_button::after,
        .gform_page_footer .at-gfbtn.button.gform_next_button::after,
        .gform_page_footer .at-gfbtn.button.gform_button::after {
            content: "\f344";
            position: absolute;
            inset-inline-end: calc(var(--atb-space-2) + 0.5rem);
            font-family: dashicons !important;
            color: var(--atb-primary);
        }

        .gform_page_footer .at-gfbtn.button.gform_next_button:hover,
        .gform_page_footer .at-gfbtn.button.gform_button:hover {
            background: color-mix(in srgb, var(--atb-primary) 85%, var(--atb-dark));
        }

        /* Retour : pastille ronde, chevron seul. Le libellé reste dans le DOM
           pour les lecteurs d'écran, son span est simplement masqué. */
        .gform_page_footer .at-gfbtn.button.gform_previous_button {
            flex: 0 0 auto;
            width: 3rem;
            height: 3rem;
            padding: 0;
            border-radius: var(--atb-radius-full);
            background: var(--devis-surface-strong);
        }

        .gform_page_footer .at-gfbtn.button.gform_previous_button .at-gfbtn__label {
            display: none;
        }

        .gform_page_footer .at-gfbtn.button.gform_previous_button::after {
            content: "\f340";
            position: absolute;
            inset-inline-end: calc(var(--atb-space-2) + 0.5rem);
            font-family: dashicons !important;
            color: var(--atb-secondary);
        }

        .gform_page_footer .at-gfbtn.button.gform_previous_button:hover {
            background: color-mix(in srgb, var(--atb-neutral) 18%, var(--atb-light));
        }

        /* ===========================================================
         * ERREURS
         * ======================================================== */

        .gfield_error input,
        .gfield_error select,
        .gfield_error textarea {
            --gf-ctrl-bg-color: color-mix(in srgb, var(--atb-danger) 6%, var(--atb-light));
            --gf-ctrl-border-color: var(--atb-danger);
        }

        .gfield_validation_message,
        .gform_submission_error {
            border-radius: var(--atb-radius-sm);
            font-size: var(--atb-text-sm);
        }

        /* ===========================================================
         * RESPONSIVE
         * ======================================================== */

        @media (max-width: 640px) {
            .gfield--type-image_choice .gfield_checkbox {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .gfield--type-radio .gfield_radio {
                grid-template-columns: 1fr;
            }
        }
    }
}


/* ===================================================================
 * Devis express « collant »
 *
 * Deux présentations pour le même bloc :
 *  - au fil du texte  : le panneau est ouvert, le bouton n'existe pas ;
 *  - collé (.is-active, ancré en bas à droite par jquery-sticky) : le panneau
 *    se replie derrière un bouton rond, et `.is-open` le rouvre.
 *
 * L'ouverture/fermeture est jouée par les animations slide-*-blurred-right
 * (custom.css) ; c'est custom.js qui pose/retire `.is-open` au bon moment,
 * après la fin de l'animation de sortie.
 * ================================================================ */
.attps-uni-sticky-devis-form-container {
    width: 100%;
    max-width: 300px;
    /* Chevron du <select>, dessiné une fois l'apparence native coupée.
       La couleur est figée dans le SVG (une data-URI ne sait pas lire
       currentColor) : à tenir en accord avec --atb-light. */
    --devis-sticky-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    transition: all 0.2s ease-in-out;
    display: flex;
    /* align-items: flex-end; */
    flex-direction: column;
    color: var(--atb-light);



    .attps-uni-sticky-devis-form {

        border-radius: 0.7rem;
        overflow: hidden;
        background: color-mix(in srgb, #d9d9d9 20%, transparent);
        backdrop-filter: blur(5px);
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

        .attps-uni-sticky-devis-form__title {
            background: var(--atb-accent);
            padding: 0.5rem;
            text-transform: uppercase;
            font-family: var(--atb-font-heading);
            font-weight: 600;
            font-size: 1.25rem;
            display: flex;
            gap: 1rem;
            justify-content: center;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 1rem;

            select,
            input[type="email"],
            input[type="text"],
            input[type="tel"],
            textarea {
                background: color-mix(in srgb, #d9d9d9 20%, transparent);
                border-radius: 0.7rem;
                padding: 0.7rem;
                color: var(--atb-light);
                border: none;

                /* Le panneau est clair sur l'image du hero : laissé au gris par
                   défaut du navigateur (#757575), le placeholder se noie dans le
                   fond translucide du champ et passe pour absent. */
                &::placeholder {
                    color: color-mix(in srgb, var(--atb-light) 75%, transparent);
                    opacity: 1;
                }
            }

            /* Le <select> demande trois corrections que les autres champs
               n'ont pas, toutes issues du rendu natif du contrôle.
               Règle posée APRÈS le groupe ci-dessus : le raccourci
               `background` y remet background-image à none. */
            select {
                /* 1. Safari (macOS comme iOS) impose son propre habillage —
                   fond, rayon, hauteur et padding internes — tant que
                   l'apparence native n'est pas coupée. */
                appearance: none;
                -webkit-appearance: none;

                /* 2. Plus d'apparence native, donc plus de flèche : on la
                   redessine, écartée du bord et suivie d'une réserve de
                   padding pour que le libellé ne passe pas dessous. */
                background-image: var(--devis-sticky-chevron);
                background-repeat: no-repeat;
                background-position: right 0.8rem center;
                background-size: 0.8rem;
                padding-right: 2.3rem;

                /* 3. Chrome et Firefox peignent la liste déroulante avec la
                   couleur du <select> (blanche ici) sur un fond clair, d'où
                   des options illisibles : les <option> reçoivent donc leur
                   propre couple fond/texte. Firefox et Chrome gardent la
                   couleur du <select> pour l'état fermé, le champ reste donc
                   blanc sur le panneau translucide.
                   color-scheme neutralise le repeint sombre de la liste
                   quand le système est en thème sombre. */
                color-scheme: light;

                option {
                    background-color: var(--atb-light);
                    color: var(--atb-neutral);
                }
            }

            button {
                background: var(--atb-accent);
                border-radius: 0.7rem;
                padding: 0.7rem;
                color: var(--atb-light);
                border: none;
                cursor: pointer;
                text-align: center;
            }
        }
    }

    &.is-active {
        top: unset !important;
        left: unset !important;
        bottom: 45px !important;
        right: 15px !important;
        /* jquery-sticky fige la largeur du bloc : replié, le conteneur reste
           donc large et vide. Sans ça, il avalerait les clics sur la page. */
        pointer-events: none;

        .attps-uni-sticky-devis-form {
            display: none;
            background: color-mix(in srgb, var(--atb-dark) 70%, transparent);
        }

        .attps-uni-sticky-devis-form-container__toggle {
            display: flex;
            pointer-events: auto;
        }

        /* Panneau déplié — reste posé pendant toute l'animation de sortie,
           custom.js ne retire `.is-open` qu'une fois celle-ci terminée. */
        &.is-open .attps-uni-sticky-devis-form {
            display: block;
            pointer-events: auto;
        }
    }

    .attps-uni-sticky-devis-form-container__toggle {
        /* N'apparaît qu'en mode collé. */
        display: none;
        width: 48px;
        height: auto;
        background: var(--atb-accent);
        aspect-ratio: 1;
        align-items: center;
        justify-content: center;
        border-radius: 0.7rem;
        cursor: pointer;
        margin-top: 0.7rem;
        align-self: end;
    }
}