/**
 * Gravity Forms Modern Styler CSS
 * FORMULAIRE ID 15 - Style Minimaliste (modèle Form 61)
 * Markup legacy (ul/li) - formulaire de contact
 * Version: 2.0.1
 */

/* Variables CSS pour la palette de couleurs */
:root {
    --form15-navy: #1A2755;
    --form15-gold: rgb(201, 176, 134);
    --form15-slate: #64748b;
    --form15-bg-light: #f8fafc;
    --form15-transition: 300ms;
}

/* ========================================
   CONTENEUR GÉNÉRAL DU FORMULAIRE
======================================== */
#gform_wrapper_15 {
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

#gform_wrapper_15 .gform_body {
    max-width: 100%;
}

/* Reset des marges par défaut (markup legacy ul/li) */
#gform_wrapper_15 ul.gform_fields {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#gform_wrapper_15 ul.gform_fields > li.gfield {
    list-style: none !important;
    margin-bottom: 1.5rem !important;
}

/* ========================================
   LABELS - STYLE UPPERCASE MINIMALISTE
======================================== */
#gform_wrapper_15 .gfield_label,
#gform_wrapper_15 .gform-field-label {
    display: block !important;
    font-size: 0.75rem !important;
    /* 12px */
    font-weight: 700 !important;
    color: var(--form15-navy) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.5rem !important;
    transition: color var(--form15-transition) ease !important;
}

/* Label devient doré au focus du champ */
#gform_wrapper_15 .gfield:focus-within .gfield_label,
#gform_wrapper_15 .gfield:focus-within .gform-field-label {
    color: var(--form15-gold) !important;
}

/* Indicateur de champ requis */
#gform_wrapper_15 .gfield_required {
    color: var(--form15-gold) !important;
    margin-left: 0.25rem !important;
}

/* Gravity Forms imbrique l'astérisque dans un second .gfield_required :
   ne pas cumuler la marge sur le span interne. */
#gform_wrapper_15 .gfield_required .gfield_required {
    margin-left: 0 !important;
}

/* Sous-labels éventuels */
#gform_wrapper_15 .gform-field-label--type-sub {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    color: var(--form15-slate) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* ========================================
   INPUTS - BORDER-BOTTOM UNIQUEMENT
======================================== */
#gform_wrapper_15 input[type="text"],
#gform_wrapper_15 input[type="email"],
#gform_wrapper_15 input[type="tel"],
#gform_wrapper_15 input[type="url"],
#gform_wrapper_15 input[type="number"],
#gform_wrapper_15 input[type="date"],
#gform_wrapper_15 select,
#gform_wrapper_15 textarea {
    /* Ne pas forcer width: 100% - respecter les réglages Gravity Forms (Small/Medium/Large) */
    background-color: var(--form15-bg-light) !important;
    border: none !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 0.75rem 1rem !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    color: var(--form15-navy) !important;
    outline: none !important;
    transition: all var(--form15-transition) ease !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Placeholder */
#gform_wrapper_15 input::placeholder,
#gform_wrapper_15 textarea::placeholder {
    color: #d1d5db !important;
    opacity: 1 !important;
}

/* FOCUS - Border dorée + fond blanc */
#gform_wrapper_15 input[type="text"]:focus,
#gform_wrapper_15 input[type="email"]:focus,
#gform_wrapper_15 input[type="tel"]:focus,
#gform_wrapper_15 input[type="url"]:focus,
#gform_wrapper_15 input[type="number"]:focus,
#gform_wrapper_15 input[type="date"]:focus,
#gform_wrapper_15 select:focus,
#gform_wrapper_15 textarea:focus {
    background-color: white !important;
    border-bottom-color: var(--form15-gold) !important;
}

/* ========================================
   TEXTAREA (champ Your Message)
======================================== */
#gform_wrapper_15 textarea {
    min-height: 8rem !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

/* ========================================
   SELECT (champ Subject)
======================================== */
#gform_wrapper_15 select {
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231A2755' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    padding-right: 2.5rem !important;
}

/* ========================================
   UPLOAD DE FICHIERS (champ 5)
======================================== */
#gform_wrapper_15 .ginput_container_fileupload .gform_drop_area {
    background-color: var(--form15-bg-light) !important;
    border: 2px dashed #e2e8f0 !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    text-align: center !important;
    color: var(--form15-slate) !important;
    font-size: 0.875rem !important;
    transition: all var(--form15-transition) ease !important;
}

#gform_wrapper_15 .ginput_container_fileupload .gform_drop_area:hover {
    border-color: var(--form15-gold) !important;
    background-color: white !important;
}

#gform_wrapper_15 .gform_button_select_files {
    background-color: transparent !important;
    color: var(--form15-navy) !important;
    border: 2px solid var(--form15-navy) !important;
    border-radius: 9999px !important;
    padding: 0.5rem 1.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    transition: all var(--form15-transition) ease !important;
}

#gform_wrapper_15 .gform_button_select_files:hover {
    background-color: var(--form15-navy) !important;
    color: white !important;
}

#gform_wrapper_15 .ginput_preview_list .ginput_preview {
    font-size: 0.8125rem !important;
    color: var(--form15-slate) !important;
    padding: 0.5rem 0 !important;
}

/* ========================================
   CAPTCHA (champ 6)
======================================== */
#gform_wrapper_15 .ginput_container_captcha,
#gform_wrapper_15 .ginput_recaptcha {
    margin-top: 0.5rem !important;
}

/* ========================================
   CHECKBOXES & RADIOS
======================================== */
#gform_wrapper_15 .gfield_checkbox li,
#gform_wrapper_15 .gfield_radio li {
    margin-bottom: 0.75rem !important;
}

#gform_wrapper_15 input[type="checkbox"],
#gform_wrapper_15 input[type="radio"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    accent-color: var(--form15-gold) !important;
    margin-right: 0.75rem !important;
    cursor: pointer !important;
}

#gform_wrapper_15 .gfield_checkbox label,
#gform_wrapper_15 .gfield_radio label {
    font-size: 0.875rem !important;
    color: var(--form15-slate) !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
}

/* ========================================
   BOUTON DE SOUMISSION
======================================== */
#gform_wrapper_15 .gform_footer,
#gform_wrapper_15 .gform-footer {
    margin-top: 3rem !important;
    padding: 0 !important;
}

#gform_wrapper_15 .gform_button,
#gform_wrapper_15 input[type="submit"] {
    background-color: var(--form15-navy) !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 1rem 3rem !important;
    border: none !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    transition: all var(--form15-transition) ease !important;
    box-shadow: 0 10px 25px -5px rgba(26, 39, 85, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    width: auto !important;
}

#gform_wrapper_15 .gform_button:hover,
#gform_wrapper_15 input[type="submit"]:hover {
    background-color: #152044 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 15px 35px -5px rgba(26, 39, 85, 0.4) !important;
}

#gform_wrapper_15 .gform_button:disabled,
#gform_wrapper_15 input[type="submit"]:disabled {
    opacity: 0.6 !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* Effet ripple sur le bouton */
#gform_wrapper_15 .ripple {
    position: absolute !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.6) !important;
    width: 20px !important;
    height: 20px !important;
    margin-top: -10px !important;
    margin-left: -10px !important;
    animation: ripple-animation-15 0.6s ease-out !important;
    pointer-events: none !important;
}

@keyframes ripple-animation-15 {
    from {
        transform: scale(0);
        opacity: 1;
    }

    to {
        transform: scale(25);
        opacity: 0;
    }
}

/* ========================================
   MESSAGES DE VALIDATION
======================================== */
#gform_wrapper_15 .gfield_error .gfield_label,
#gform_wrapper_15 .gfield_error .gform-field-label {
    color: #ef4444 !important;
}

#gform_wrapper_15 .gfield_error input,
#gform_wrapper_15 .gfield_error select,
#gform_wrapper_15 .gfield_error textarea {
    border-bottom-color: #ef4444 !important;
}

#gform_wrapper_15 .validation_message,
#gform_wrapper_15 .gfield_description.validation_message {
    color: #ef4444 !important;
    font-size: 0.75rem !important;
    margin-top: 0.5rem !important;
    font-weight: 500 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

#gform_wrapper_15 .gform_validation_errors {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: none !important;
}

#gform_wrapper_15 .gform_validation_errors > h2 {
    color: #ef4444 !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
}

/* ========================================
   DESCRIPTIONS DE CHAMPS
======================================== */
#gform_wrapper_15 .gfield_description {
    color: var(--form15-slate) !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
    line-height: 1.5 !important;
    padding: 0 !important;
}

/* ========================================
   TITRE / DESCRIPTION DU FORMULAIRE
======================================== */
#gform_wrapper_15 .gform_heading {
    margin-bottom: 2rem !important;
}

#gform_wrapper_15 .gform_title {
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    color: var(--form15-navy) !important;
    margin-bottom: 0.5rem !important;
}

#gform_wrapper_15 .gform_description {
    color: var(--form15-slate) !important;
    font-size: 1rem !important;
}

/* ========================================
   MESSAGE DE CONFIRMATION
======================================== */
#gform_confirmation_wrapper_15 {
    background-color: #ecfdf5 !important;
    border: 2px solid #10b981 !important;
    border-radius: 1rem !important;
    padding: 2rem !important;
    text-align: center !important;
    margin: 2rem 0 !important;
}

#gform_confirmation_message_15 {
    color: var(--form15-navy) !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
}

/* ========================================
   RESPONSIVE - MOBILE
======================================== */
@media (max-width: 768px) {

    #gform_wrapper_15 input[type="text"],
    #gform_wrapper_15 input[type="email"],
    #gform_wrapper_15 input[type="tel"],
    #gform_wrapper_15 input[type="url"],
    #gform_wrapper_15 input[type="number"],
    #gform_wrapper_15 input[type="date"],
    #gform_wrapper_15 select,
    #gform_wrapper_15 textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        /* Éviter le zoom sur iOS */
    }

    #gform_wrapper_15 .gform_button,
    #gform_wrapper_15 input[type="submit"] {
        width: 100% !important;
        padding: 1.25rem !important;
    }
}

/* ========================================
   ANIMATIONS D'APPARITION
======================================== */
#gform_wrapper_15 ul.gform_fields > li.gfield {
    animation: fadeInUp15 0.4s ease both;
}

@keyframes fadeInUp15 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#gform_wrapper_15 ul.gform_fields > li.gfield:nth-child(1) { animation-delay: 0.05s; }
#gform_wrapper_15 ul.gform_fields > li.gfield:nth-child(2) { animation-delay: 0.10s; }
#gform_wrapper_15 ul.gform_fields > li.gfield:nth-child(3) { animation-delay: 0.15s; }
#gform_wrapper_15 ul.gform_fields > li.gfield:nth-child(4) { animation-delay: 0.20s; }
#gform_wrapper_15 ul.gform_fields > li.gfield:nth-child(5) { animation-delay: 0.25s; }
#gform_wrapper_15 ul.gform_fields > li.gfield:nth-child(6) { animation-delay: 0.30s; }
#gform_wrapper_15 ul.gform_fields > li.gfield:nth-child(7) { animation-delay: 0.35s; }
#gform_wrapper_15 ul.gform_fields > li.gfield:nth-child(8) { animation-delay: 0.40s; }

/* Sécurité : aucune animation ne doit pouvoir laisser un champ invisible */
@media (prefers-reduced-motion: reduce) {
    #gform_wrapper_15 ul.gform_fields > li.gfield {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}