/* ******************************************************************
   GRAVITY FORMS – SIGNATURE BEC (beckcommunication.fr)
   Version globale (tous formulaires)
   ****************************************************************** */

/* ==========================================================
   1) Variables (palette & typo)
   ========================================================== */
:root {
    --bc-bg: #E2E8F0;
    --bc-bg-soft: #F4F3EF;

    --bc-main: #dd4124;
    --bc-main-light: #e27662;
    --bc-main-dark: #833224;

    --bc-text: #2D3339;
    --bc-muted: #7a6c64;

    --bc-border: #e0d5cd;

    --bc-radius: 18px;
    --bc-radius-soft: 14px;

    --bc-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);

    --bc-error: #2F3E46;

    --bc-font: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bc-titre: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==========================================================
   2) Wrapper & structure
   ========================================================== */
.gform_wrapper {
    position: relative;
    width: 90%;
    max-width: none;
    margin: 3rem auto;
    padding: 2.75rem 2rem 2.5rem;
    background: #fff;
    border-radius: var(--bc-radius);
    box-shadow: var(--bc-shadow);
    font-family: var(--bc-font);
    overflow: visible;
    z-index: 1;
}

.gform_wrapper .gform_heading,
.gform_wrapper .gform_body,
.gform_wrapper .gform_footer {
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.gform_wrapper .gform_body .gform_fields {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
}

/* ==========================================================
   3) En-tête (titre / description)
   ========================================================== */
.gform_wrapper .gform_heading {
    margin-bottom: 2.4rem;
}

.gform_wrapper .gform_title {
    font-family: var(--bc-titre);
    font-size: clamp(1.6rem, 1.2rem + 0.9vw, 2.4rem);
    margin: 0 0 0.4rem;
    color: var(--bc-text);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.gform_wrapper .gform_title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 0.6rem;
    border-radius: 999px;
    background: var(--bc-main);
}

.gform_wrapper .gform_description {
    margin: 0;
    color: var(--bc-muted);
    font-size: 0.98rem;
    line-height: 1.8;
}

/* ==========================================================
   4) Sections GF (gsection) + version “carte”
   ========================================================== */
.gform_wrapper .gsection {
    background: transparent;
    border: none;
    padding: 0;
    margin: 1.5rem 0 0.75rem;
}

.gform_wrapper .gsection .gsection_title {
    font-family: var(--bc-font);
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--bc-main-dark);
    margin: 0 0 0.3rem;
}

.gform_wrapper .gsection .gsection_description {
    font-size: 0.9rem;
    color: var(--bc-muted);
    margin: 0 0 0.4rem;
}

.gform_wrapper .gsection .gsection_title::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin-top: 0.5rem;
    border-radius: 999px;
    background: var(--bc-border);
}

/* Version “section en carte” — maintenant GLOBAL */
.gform_wrapper .gfield.gsection {
    padding: 2.2rem 2rem 1.9rem !important;
    margin: 2.5rem 0 2.2rem !important;

    background: #FFF3C4 !important;
    border-left: 4px solid #E0A800 !important;
    border-radius: 14px !important;

    border: 1px solid rgba(194, 106, 74, 0.15);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06) !important;
}

.gform_wrapper .gfield.gsection .gsection_title {
    font-family: var(--bc-font);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--bc-main-dark);
    margin-bottom: 0.6rem;
}

.gform_wrapper .gfield.gsection .gsection_description {
    font-size: 1rem;
    color: #4b4746;
    line-height: 1.6;
}

/* ==========================================================
   5) Champs (labels / inputs)
   ========================================================== */
.gform_wrapper .gfield_label {
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: var(--bc-text);
    font-size: 1rem;
}

.gform_wrapper .gfield_required {
    color: var(--bc-main);
}

.gform_wrapper .gfield_description,
.gform_wrapper .ginput_complex label {
    font-size: 0.86rem;
    color: var(--bc-muted);
}

/* Champs texte */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--bc-border);
    padding: 0.6rem 0.75rem;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--bc-text);
    background-color: #fff;
    transition: 0.2s ease;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    outline: none;
    border-color: var(--bc-main);
    box-shadow: 0 0 0 2px rgba(194, 106, 74, 0.2);
    background-color: #fffdf9;
}

.gform_wrapper ::placeholder {
    color: #b19c90;
    opacity: 1;
}

.gform_wrapper textarea {
    min-height: 140px;
    resize: vertical;
}

/* Champ HTML type carte */
.gform_wrapper .gfield.gfield_html {
    padding: 1.3rem 1.25rem 1.1rem;
    border-radius: var(--bc-radius-soft);
    background: #F6F5F1;
    border: 1px solid var(--bc-border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Hover gfield */
@media (hover:hover) {
    .gform_wrapper .gfield:hover {
        border-color: var(--bc-main-light);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.04);
        background-color: #fffaf6;
    }
}

/* ==========================================================
   6) Erreurs (unifiées)
   ========================================================== */
.gform_wrapper .validation_message {
    color: var(--bc-error) !important;
    font-weight: 600;
    font-size: 0.86rem;
    margin-top: 0.35rem;
}

.gform_wrapper .gfield_error {
    border-color: rgba(47, 62, 70, 0.45) !important;
    background: rgba(47, 62, 70, 0.06) !important;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
    border-color: var(--bc-error) !important;
    box-shadow: 0 0 0 2px rgba(47, 62, 70, 0.12) !important;
}

/* Résumé d’erreurs */
.gform_wrapper .gform_validation_errors {
    border: 1px solid var(--bc-error) !important;
    background: rgba(47, 62, 70, 0.08) !important;
    color: var(--bc-error) !important;
    padding: 1.4rem 1.6rem !important;
    border-radius: 12px;
    margin-bottom: 2.2rem !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.gform_wrapper .gform_validation_errors>h2 {
    color: var(--bc-error) !important;
    font-size: 1.1rem !important;
    margin: 0 0 0.6rem !important;
    font-weight: 700;
    line-height: 1.4;
}

.gform_wrapper .gform_validation_errors ul {
    margin: 0 !important;
    padding-left: 1.2rem !important;
}

.gform_wrapper .gform_validation_errors li {
    color: var(--bc-error) !important;
    font-size: 0.95rem !important;
    margin: 0.2rem 0 !important;
}

/* ==========================================================
   7) Bouton premium (submit)
   ========================================================== */
.gform_wrapper .gform_footer {
    margin-top: 2.8rem !important;
    text-align: right;
}

.gform_wrapper .gform_footer .gform_button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;

    padding: 1.1rem 2.9rem !important;
    border-radius: 999px !important;

    border: 1px solid var(--bc-main-dark);
    background-image: linear-gradient(135deg, var(--bc-main), var(--bc-main-dark));
    background-size: 140% 140%;
    background-position: 0% 50%;

    color: #fff;
    font-family: var(--bc-font);
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase !important;

    cursor: pointer;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    transform: translateY(0);
    transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease, background-position 0.25s ease;
}

.gform_wrapper .gform_footer .gform_button::after {
    content: "➜";
    font-size: 1.1rem;
    transform: translateX(0);
    transition: transform 0.18s ease;
}

@media (hover:hover) {
    .gform_wrapper .gform_footer .gform_button:hover {
        background-position: 100% 50%;
        filter: brightness(1.03);
        transform: translateY(-2px);
        box-shadow: 0 16px 38px rgba(0, 0, 0, 0.26);
    }

    .gform_wrapper .gform_footer .gform_button:hover::after {
        transform: translateX(3px);
    }
}

.gform_wrapper .gform_footer .gform_button:active {
    transform: translateY(0);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
}

.gform_wrapper .gform_footer .gform_button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(194, 106, 74, 0.9);
}

/* ==========================================================
   8) Radios/Checkbox – base (pills) [global]
   ========================================================== */
.gform_wrapper .ginput_container_radio ul.gfield_radio,
.gform_wrapper .ginput_container_checkbox ul.gfield_checkbox,
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: row !important;
    gap: 0.6rem 0.8rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.gform_wrapper .gfield_radio li,
.gform_wrapper .gfield_checkbox li {
    display: inline-flex !important;
    margin: 0;
    list-style: none;
}

.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--bc-border);
    background: #fff;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* ==========================================================
   10) Mode “radio clean” (opt-in) — GLOBAL (tous formulaires)
   ========================================================== */
.gform_wrapper .gfield.bc-radio-clean .gfield_radio label {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    justify-content: flex-start !important;
    white-space: normal !important;
}

.gform_wrapper .gfield.bc-radio-clean .gfield_radio li {
    display: flex !important;
    align-items: flex-start !important;
    gap: .65rem !important;
}

.gform_wrapper .gfield.bc-radio-clean .gfield_radio input[type="radio"] {
    position: static !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: .18rem !important;

    appearance: auto !important;
    -webkit-appearance: radio !important;

    accent-color: var(--bc-main) !important;
}

.gform_wrapper .gfield.bc-radio-clean .gfield_radio label {
    font-size: .98rem;
    line-height: 1.45;
    color: var(--bc-text);
}

@media (hover:hover) {
    .gform_wrapper .gfield.bc-radio-clean .gfield_radio li:hover {
        background: rgba(221, 65, 36, .06);
        border-radius: 10px;
        padding: .35rem .45rem;
    }
}

.gform_wrapper .gfield.bc-radio-clean .gfield_radio input[type="radio"]:checked+label {
    font-weight: 700;
    color: var(--bc-main-dark);
}

.gform_wrapper .gfield.bc-radio-clean .gfield_radio input[type="radio"]:focus-visible {
    outline: 3px solid rgba(221, 65, 36, .22);
    outline-offset: 2px;
    border-radius: 999px;
}

/* ==========================================================
   11) Mode “échelle” Jamais→Toujours (opt-in) — GLOBAL
   ========================================================== */
.gform_wrapper .gfield.bc-radio-scale input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: radio !important;
    opacity: 1 !important;
    position: static !important;

    accent-color: #0061A3 !important;
    width: 22px !important;
    height: 22px !important;
    margin-top: 0.25rem !important;
}

.gform_wrapper .gfield.bc-radio-scale input[type="radio"]:checked+label {
    color: #0061A3 !important;
    font-weight: 700 !important;
}

.gform_wrapper .gfield.bc-radio-scale .gfield_radio li {
    margin-bottom: 1.2rem !important;
}

.gform_wrapper .gfield.bc-radio-scale .gfield_radio li:last-child {
    margin-bottom: 0 !important;
}

.gform_wrapper .gfield.bc-radio-scale .gfield_radio label {
    line-height: 1.4 !important;
}

/* ==========================================================
   MULTI-PAGES (progress + navigation) — GLOBAL
   ========================================================== */

/* Progress bar (si activée) */
.gform_wrapper .gf_progressbar_wrapper {
    margin: 0 0 1.6rem !important;
    padding: 1.25rem 1.25rem 1.1rem !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(221, 65, 36, .10), rgba(255, 255, 255, .70)) !important;
    border: 1px solid rgba(221, 65, 36, .18) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .04) !important;
}

.gform_wrapper .gf_progressbar_title {
    margin: 0 0 .75rem !important;
    font-family: var(--bc-font) !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    color: var(--bc-text) !important;
    font-size: clamp(1rem, .95rem + .35vw, 1.2rem) !important;
}

/* piste */
.gform_wrapper .gf_progressbar {
    height: 12px !important;
    border-radius: 999px !important;
    background: rgba(45, 51, 57, .14) !important;
    overflow: hidden !important;
}

/* remplissage */
.gform_wrapper .gf_progressbar_percentage {
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #0061A3, #334EE2) !important;
    box-shadow: 0 8px 18px rgba(0, 97, 163, .18) !important;
}

.gform_wrapper .gf_progressbar_percentage span {
    display: none !important;
}

/* Zone boutons multi-pages */
.gform_wrapper .gform_page_footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .75rem !important;
    margin-top: 1.8rem !important;
}

/* base commune */
.gform_wrapper .gform_page_footer .button,
.gform_wrapper .gform_page_footer input[type="button"],
.gform_wrapper .gform_page_footer input[type="submit"] {
    appearance: none !important;
    -webkit-appearance: none !important;

    border-radius: 999px !important;
    padding: .95rem 1.35rem !important;

    font-family: var(--bc-font) !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;

    border: 1px solid transparent !important;
    cursor: pointer !important;

    transition: transform .12s ease, box-shadow .18s ease, background-position .25s ease, filter .18s ease !important;
}

/* Précédent = secondaire */
.gform_wrapper .gform_page_footer .gform_previous_button {
    background: #fff !important;
    color: var(--bc-text) !important;
    border-color: rgba(45, 51, 57, .18) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .06) !important;
}

/* Suivant + Terminer = primaire terracotta */
.gform_wrapper .gform_page_footer .gform_next_button,
.gform_wrapper .gform_page_footer .gform_button {
    background-image: linear-gradient(135deg, var(--bc-main), var(--bc-main-dark)) !important;
    background-size: 140% 140% !important;
    background-position: 0% 50% !important;
    color: #fff !important;
    border-color: var(--bc-main-dark) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important;
}

@media (hover:hover) {
    .gform_wrapper .gform_page_footer .gform_previous_button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, .10) !important;
    }

    .gform_wrapper .gform_page_footer .gform_next_button:hover,
    .gform_wrapper .gform_page_footer .gform_button:hover {
        background-position: 100% 50% !important;
        filter: brightness(1.03) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, .22) !important;
    }
}

/* Focus clavier */
.gform_wrapper .gform_page_footer .button:focus-visible,
.gform_wrapper .gform_page_footer input:focus-visible {
    outline: 3px solid rgba(221, 65, 36, .25) !important;
    outline-offset: 2px !important;
}

/* Mobile : pleine largeur */
@media (max-width: 640px) {
    .gform_wrapper .gform_page_footer {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }

    .gform_wrapper .gform_page_footer .button,
    .gform_wrapper .gform_page_footer input[type="button"],
    .gform_wrapper .gform_page_footer input[type="submit"] {
        width: 100% !important;
        justify-content: center !important;
    }
}