/**
 * Style des formulaires Contact Form 7 (Contact + Adhésion)
 * S'appuie sur les classes natives CF7 pour rester compatible
 * avec les mises à jour du plugin (pas de dépendance à markup custom).
 */

/* --- Conteneur global du formulaire --- */
.wpcf7-form {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.wpcf7-form h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-navy, #071c42);
    margin: 1.75rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-green, #2ecc71);
}

.wpcf7-form h3:first-child {
    margin-top: 0;
}

/* --- Champs texte, email, tel, date, select, textarea --- */
.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="file"]) {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    margin-bottom: 1.1rem;
    font-size: 0.95rem;
    color: #1a1a1a;
    background-color: #f7f8fa;
    border: 1px solid #dcdfe4;
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="file"]):focus {
    outline: none;
    border-color: var(--color-green, #2ecc71);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15);
}

.wpcf7-form-control::placeholder {
    color: #9aa0a8;
}

/* --- Select : flèche custom pour cohérence visuelle cross-browser --- */
select.wpcf7-form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23071c42'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 18px;
    padding-right: 2.5rem;
    cursor: pointer;
}

/* --- Textarea --- */
textarea.wpcf7-form-control {
    min-height: 130px;
    resize: vertical;
}

/* --- Champ fichier (upload pièce justificative) --- */
.wpcf7-form-control[type="file"] {
    display: block;
    width: 100%;
    padding: 0.6rem;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    background: #f7f8fa;
    border: 1px dashed #c0c4cc;
    border-radius: 6px;
    cursor: pointer;
}

.form-help-text {
    font-size: 0.78rem;
    color: #7a8087;
    margin: 0 0 1.1rem;
}

/* --- Checkbox / acceptance (RGPD) --- */
.wpcf7-form .wpcf7-acceptance {
    display: block;
    margin: 1rem 0 1.5rem;
}

.wpcf7-form .wpcf7-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
}

.wpcf7-form .wpcf7-list-item-label {
    font-size: 0.85rem;
    color: #4a4f57;
    line-height: 1.4;
}

.wpcf7-form input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 16px;
    height: 16px;
    accent-color: var(--color-green, #2ecc71);
    flex-shrink: 0;
    cursor: pointer;
}

/* --- Bouton de soumission --- */
.wpcf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.9rem 1.5rem;
    background-color: var(--color-green, #2ecc71);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #27ae60;
    transform: translateY(-1px);
}

.wpcf7-form input[type="submit"]:active {
    transform: translateY(0);
}

/* --- État "envoi en cours" --- */
.wpcf7-form.submitting input[type="submit"] {
    opacity: 0.6;
    cursor: not-allowed;
}

.wpcf7-spinner {
    margin: 0 0 0 0.6rem;
}

/* --- Validation : champs invalides --- */
.wpcf7-form-control.wpcf7-not-valid {
    border-color: #e74c3c;
    background-color: #fdf2f1;
}

.wpcf7-not-valid-tip {
    display: block;
    font-size: 0.78rem;
    color: #e74c3c;
    margin: -0.8rem 0 1rem;
}

/* --- Message de statut global (succès / erreur) --- */
.wpcf7-response-output {
    margin-top: 1.2rem !important;
    padding: 0.9rem 1.1rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.wpcf7-form.sent .wpcf7-response-output {
    background-color: #eafaf0;
    border: 1px solid #2ecc71 !important;
    color: #1c7c43;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
    background-color: #fdf2f1;
    border: 1px solid #e74c3c !important;
    color: #c0392b;
}

/* --- Responsive : deux colonnes pour les champs courts sur desktop ---
 * CF7 enveloppe chaque champ dans un <p> (ou un span.wpcf7-form-control-wrap
 * si l'option "Exclude line breaks" est activée). Le grid doit cibler
 * ces enfants directs, pas les inputs internes, sinon grid-template-columns
 * n'a aucune prise sur le positionnement.
 */
@media (min-width: 768px) {
    .wpcf7-form-two-col > p {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1.2rem;
        align-items: start;
        margin: 0;
    }

    .wpcf7-form-two-col > p > br {
        display: none;
    }

    .wpcf7-form-two-col .wpcf7-form-control-wrap {
        width: 100%;
    }

    .wpcf7-form-two-col .wpcf7-form-control {
        width: 100%;
        margin-bottom: 1.1rem;
    }
}