/* =============================================================================
   Gravity Forms — surcharges thème Teamtreize
   =============================================================================
   Palette  : primary #373CF5 | secondary #FA9600 | grey #F7F7F7
   Maquette : carte bordée, titre uppercase, grille 2 cols,
              inputs gris, submit full-width pill.
   Accessibilité (RGAA / WCAG 2.1 AA) : contour des champs et cases à 3:1 minimum
   (--gf-teamtreize-contour), mention « obligatoire » et textes d'aide à 4,5:1 minimum.
   ============================================================================= */

.gform_wrapper {
    /* Contour des champs : noir de la charte à 55 % sur blanc ≈ 3,7:1 (3,4:1 sur le gris) */
    --gf-teamtreize-contour: color-mix(in srgb, var(--wp--preset--color--black) 55%, var(--wp--preset--color--white));
}


/* =============================================================================
   1. WRAPPER / CARTE
   ============================================================================= */

   .gform_wrapper {
    font-family: var(--wp--preset--font-family--primary) !important;
    color: var(--wp--preset--color--primary) !important;
    border-radius: 20px !important;
    max-width: 560px !important;
    margin-inline: auto !important;
}

.gform_wrapper * {
    box-sizing: border-box !important;
}


/* =============================================================================
   2. TITRE & DESCRIPTION
   ============================================================================= */

.gform_heading {
    margin-bottom: var(--wp--preset--spacing--30) !important;
}

.gform_heading .gform_title {
    font-size: var(--wp--preset--font-size--xl) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--primary) !important;
    margin: 0 0 0.5rem !important;
}

.gform_heading .gform_description {
    font-size: var(--wp--preset--font-size--m) !important;
    color: var(--wp--preset--color--black) !important;
    opacity: 0.7 !important;
}


/* =============================================================================
   3. GRILLE CHAMPS (2 colonnes desktop)
   ============================================================================= */

.gform_fields {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--wp--preset--spacing--30) !important;
    position: relative !important;
}

.gfield {
    grid-column: span 2 !important;
    margin: 0 !important;
}

.gfield--width-half {
    grid-column: span 1 !important;
}

@media (max-width: 640px) {
    .gform_fields {
        grid-template-columns: 1fr !important;
    }

    .gfield--width-half {
        grid-column: span 2 !important;
    }
}


/* =============================================================================
   4. LABELS
   ============================================================================= */

.gfield_label {
    display: block !important;
    font-size: var(--wp--preset--font-size--s) !important;
    font-weight: 700 !important;
    color: var(--wp--preset--color--black) !important;
    margin: 0 0 0.4rem !important;
}

.gfield_required {
    /* Orange de la charte à 2,2:1 sur blanc : illisible pour du petit texte (WCAG 1.4.3) */
    color: color-mix(in srgb, var(--wp--preset--color--black) 75%, var(--wp--preset--color--white)) !important;
    margin-left: 0.2em !important;
}


/* =============================================================================
   5. INPUTS & TEXTAREA
   ============================================================================= */

.ginput_container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.ginput_container textarea {
    width: 100% !important;
    font-family: var(--wp--preset--font-family--primary) !important;
    font-size: var(--wp--preset--font-size--m) !important;
    color: var(--wp--preset--color--black) !important;
    background-color: var(--wp--preset--color--grey) !important;
    border: 1.5px solid var(--gf-teamtreize-contour) !important;
    border-radius: 6px !important;
    padding: 0.85rem 1rem !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.ginput_container input::placeholder,
.ginput_container textarea::placeholder {
    font-family: inherit !important;
    font-size: var(--wp--preset--font-size--s) !important;
    font-weight: 400 !important;
    color: #707070 !important;
    font-style: italic !important;
    opacity: 1 !important;
}

.ginput_container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):focus,
.ginput_container textarea:focus {
    border-color: var(--wp--preset--color--primary) !important;
    box-shadow: 0 0 0 3px rgba(55, 60, 245, 0.15) !important;
}

.ginput_container textarea {
    min-height: 140px !important;
    resize: vertical !important;
}


/* =============================================================================
   6. SELECT
   ============================================================================= */

.ginput_container select {
    width: 100% !important;
    font-family: var(--wp--preset--font-family--primary) !important;
    font-size: var(--wp--preset--font-size--s) !important;
    font-weight: 400 !important;
    /* Valeur sélectionnée = style normal */
    /* color: var(--wp--custom--color--grey-darker) !important; */
    color: #707070 !important;
    font-style: italic !important;
    background-color: var(--wp--preset--color--grey) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231B242C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    border: 1.5px solid var(--gf-teamtreize-contour) !important;
    border-radius: 6px !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Focus */
.ginput_container select:focus {
    border-color: var(--wp--preset--color--primary) !important;
    box-shadow: 0 0 0 3px rgba(55, 60, 245, 0.15) !important;
}

/* Les options dans le dropdown restent en style normal */
.ginput_container select option {
    color: var(--wp--preset--color--black) !important;
    font-style: normal !important;
    background-color: var(--wp--preset--color--grey) !important;
}

/* Cas particulier : champ pays (structure différente) */
.ginput_address_country {
    inline-size: 100% !important;
}

.ginput_address_country select {
    width: 100% !important;
}


/* =============================================================================
   7. CHECKBOXES & RADIOS
   ============================================================================= */

.gfield_checkbox,
.gfield_radio {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.gfield_checkbox li,
.gfield_radio li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    padding: 0 !important;
}

.gfield_checkbox input[type="checkbox"],
.gfield_radio input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    margin-top: 0.2rem !important;
    border: 1.5px solid var(--gf-teamtreize-contour) !important;
    border-radius: 3px !important;
    background: var(--wp--preset--color--grey) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background-color 0.2s ease !important;
    position: relative !important;
}

.gfield_radio input[type="radio"] {
    border-radius: 50% !important;
}

.gfield_checkbox input[type="checkbox"]:checked,
.gfield_radio input[type="radio"]:checked {
    background-color: var(--wp--preset--color--primary) !important;
    border-color: var(--wp--preset--color--primary) !important;
}

.gfield_checkbox input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px 8px !important;
}

.gfield_radio input[type="radio"]:checked::after {
    content: '' !important;
    position: absolute !important;
    inset: 3px !important;
    background-color: var(--wp--preset--color--white) !important;
    border-radius: 50% !important;
}

.gfield_checkbox label,
.gfield_radio label {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--wp--preset--color--black) !important;
    cursor: pointer !important;
    font-weight: 400 !important;
}


/* =============================================================================
   8. TEXTE D'AIDE
   ============================================================================= */

.gfield_description {
    font-size: var(--wp--preset--font-size--s) !important;
    color: var(--wp--preset--color--black) !important;
    opacity: 0.8 !important;
    margin-top: 0.3rem !important;
}


/* =============================================================================
   9. VALIDATION & ERREURS
   ============================================================================= */

/* Erreur globale */
.validation_error {
    border: 1.5px solid #c0392b !important;
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    color: #c0392b !important;
    font-size: var(--wp--preset--font-size--s) !important;
    background: none !important;
    margin-bottom: var(--wp--preset--spacing--30) !important;
}

/* Erreur par champ */
.gfield_error .gfield_label {
    color: #c0392b !important;
}

.gfield_error .ginput_container input:not([type="checkbox"]):not([type="radio"]),
.gfield_error .ginput_container textarea,
.gfield_error .ginput_container select {
    border-color: #c0392b !important;
}

.gfield_validation_message,
.validation_message {
    font-size: var(--wp--preset--font-size--s) !important;
    color: #c0392b !important;
    margin-top: 0.3rem !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    opacity: 1 !important;
}


/* =============================================================================
   10. BOUTON SUBMIT
   ============================================================================= */

.gform_footer,
.gform_page_footer {
    margin-top: var(--wp--preset--spacing--40) !important;
    padding: 0 !important;
}

.gform_footer input[type="submit"],
.gform_footer button[type="submit"],
.gform_page_footer input[type="submit"],
.gform_page_footer button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    font-family: var(--wp--preset--font-family--primary) !important;
    font-size: var(--wp--preset--font-size--s) !important;
    font-weight: 700 !important;
    line-height: var(--wp--custom--line-height--m) !important;
    text-transform: uppercase !important;
    color: var(--wp--preset--color--white) !important;
    background-color: var(--wp--preset--color--primary) !important;
    border: 2px solid var(--wp--preset--color--primary) !important;
    padding: 1rem var(--wp--preset--spacing--30) !important;
    border-radius: var(--wp--custom--radius--full) !important;
    cursor: pointer !important;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.gform_footer input[type="submit"]:hover,
.gform_footer input[type="submit"]:focus-visible,
.gform_footer button[type="submit"]:hover,
.gform_footer button[type="submit"]:focus-visible,
.gform_page_footer input[type="submit"]:hover,
.gform_page_footer input[type="submit"]:focus-visible,
.gform_page_footer button[type="submit"]:hover,
.gform_page_footer button[type="submit"]:focus-visible {
    color: var(--wp--preset--color--black) !important;
    background-color: var(--wp--preset--color--secondary) !important;
    border-color: var(--wp--preset--color--secondary) !important;
    outline: none !important;
}


/* =============================================================================
   11. DIVERS (upload, spinner, confirmation)
   ============================================================================= */

.ginput_container_fileupload input[type="file"] {
    font-size: var(--wp--preset--font-size--s) !important;
    cursor: pointer !important;
}

.gform_ajax_spinner {
    display: none !important;
}

.gform_confirmation_message {
    font-size: var(--wp--preset--font-size--m) !important;
    padding: 1.375rem !important;
    background-color: var(--wp--preset--color--grey) !important;
    border-radius: 10px !important;
    border-left: 3px solid var(--wp--preset--color--primary) !important;
}


/* =============================================================================
   12. VARIANTE NEWSLETTER (formulaire inline dans wp-block-cover)
       Layout : [input large          ] [bouton]
       La carte est désactivée dans ce contexte.
   ============================================================================= */

.wp-block-cover__inner-container .gform_wrapper {
    max-width: 860px !important;
    margin-inline: auto !important;
    margin-top: 2rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.wp-block-cover__inner-container .gform_wrapper form {
    display: flex !important;
    align-items: center !important;
    background: var(--wp--preset--color--white) !important;
    border-radius: 6px !important;
    padding: 6px !important;
    gap: 0 !important;
}

.wp-block-cover__inner-container .gform_wrapper .gform_body {
    flex: 1 !important;
    min-width: 0 !important;
}

.wp-block-cover__inner-container .gform_wrapper .gform_fields {
    display: block !important;
    grid-template-columns: unset !important;
    columns: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.wp-block-cover__inner-container .gform_wrapper .gfield {
    margin-bottom: 0 !important;
}

.wp-block-cover__inner-container .gform_wrapper .gfield_label {
    display: none !important;
}

.wp-block-cover__inner-container .gform_wrapper .ginput_container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]) {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.75rem 1rem !important;
    font-size: var(--wp--preset--font-size--l) !important;
    width: 100% !important;
}

.wp-block-cover__inner-container .gform_wrapper .ginput_container input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.wp-block-cover__inner-container .gform_wrapper .gform_footer,
.wp-block-cover__inner-container .gform_wrapper .gform_page_footer {
    margin-top: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.wp-block-cover__inner-container .gform_wrapper .gform_footer input[type="submit"],
.wp-block-cover__inner-container .gform_wrapper .gform_button[type="submit"] {
    width: auto !important;
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--white) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0.75rem 1.5rem !important;
    font-size: var(--wp--preset--font-size--m) !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.wp-block-cover__inner-container .gform_wrapper .gform_footer input[type="submit"]:hover,
.wp-block-cover__inner-container .gform_wrapper .gform_button[type="submit"]:hover,
.wp-block-cover__inner-container .gform_wrapper .gform_button[type="submit"]:focus-visible {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--white) !important;
    opacity: 0.8 !important;
}

@media (max-width: 600px) {
    .wp-block-cover__inner-container .gform_wrapper form {
        flex-direction: column !important;
        border-radius: 10px !important;
        padding: 0.75rem !important;
        gap: 0.75rem !important;
    }

    .wp-block-cover__inner-container .gform_wrapper .gform_body,
    .wp-block-cover__inner-container .gform_wrapper .gform_footer {
        width: 100% !important;
    }

    .wp-block-cover__inner-container .gform_wrapper .gform_footer input[type="submit"],
    .wp-block-cover__inner-container .gform_wrapper .gform_button[type="submit"] {
        width: 100% !important;
        justify-content: center !important;
    }
}