/**
 * Formulaires Contact Form 7 — design A « champs à contour, libellés
 * au-dessus » (validé le 30/09/2026).
 *
 * Tous les formulaires CF7 du site : fenêtre « Demande d'information » des
 * fiches (101181), Contactez-nous, brochures, newsletter, sondages… Chargé
 * après le thème (functions.php) pour l'emporter sur les règles historiques
 * du thème parent (bordure kaki, BellGothic, pleine largeur).
 *
 * Langage visuel commun (pages-php/COMPOSANTS.md §2) : teal #1F5C56 /
 * #2D7A72 / #3A9C92, texte #0F2E2A, filet #DCE6E4, DM Sans, rayon 3 px,
 * bouton des blocs (dégradé teal qui glisse au survol, 220 px minimum),
 * mouvement cubic-bezier(0.22, 1, 0.36, 1), focus visible teal clair.
 *
 * Mise en page sur 2 colonnes (nom / prénom, e-mail / téléphone,
 * Turnstile / bouton) : seulement pour les formulaires de contact bâtis en
 * « div.form-row » avec une ligne de bouton « div.ctSbt », et seulement si
 * le formulaire a la place (requête de conteneur, 560 px). Les autres
 * formulaires gardent leur disposition, avec les mêmes champs et boutons.
 */

.wpcf7 {
    --form-teal: #1F5C56;
    --form-teal-moyen: #2D7A72;
    --form-teal-clair: #3A9C92;
    --form-texte: #0F2E2A;
    --form-discret: #6E8683;
    --form-filet: #DCE6E4;
    --form-fond: #F4F7F7;
    --form-rouge: #B3261E;
    --form-ease: cubic-bezier(0.22, 1, 0.36, 1);
    container-type: inline-size;
    max-width: 860px; /* lisibilité : pas de champs de 1 170 px de large */
    margin-left: auto;
    margin-right: auto;
    color: var(--form-texte);
    font-family: "DM Sans", Arial, sans-serif;
}

.wpcf7 .wpcf7-form p {
    margin: 0;
}

/* -------------------------------------------------------------------------
   Libellés
   ------------------------------------------------------------------------- */

.wpcf7 .wpcf7-form label {
    display: block;
    margin: 0 0 7px;
    padding: 0;
    color: var(--form-texte);
    font: 600 14px/1.35 "DM Sans", Arial, sans-serif;
    text-align: left;
}

/* Astérisque des champs obligatoires (functions.php : « (*) : » → « * ») */
.wpcf7 .verdon-oblig {
    color: var(--form-teal-clair);
    font-weight: 700;
}

/* -------------------------------------------------------------------------
   Champs
   ------------------------------------------------------------------------- */

/* :where() : spécificité basse (0,2,0), qui suffit face au thème parent et
   laisse les règles textarea / select / focus / erreur ci-dessous s'appliquer. */
.wpcf7 .wpcf7-form :where(input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="date"], [type="password"], [type="search"]), select, textarea) {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0 0 16px; /* formulaires sans grille : espace avant le libellé suivant */
    padding: 0 14px;
    border: 1px solid var(--form-filet);
    border-radius: 3px;
    background: #fff;
    box-shadow: none;
    color: var(--form-texte);
    font: 400 15px/1.4 "DM Sans", Arial, sans-serif;
    transition: border-color .3s var(--form-ease), box-shadow .3s var(--form-ease);
    -webkit-appearance: none;
    appearance: none;
}

.wpcf7 .wpcf7-form textarea {
    height: 140px;
    min-height: 110px;
    padding: 12px 14px;
    resize: vertical;
}

.wpcf7 .wpcf7-form select {
    padding-right: 40px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D7A72' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
    cursor: pointer;
}

.wpcf7 .wpcf7-form :is(input, textarea)::placeholder {
    color: #9AAEAB;
    opacity: 1;
}

.wpcf7 .wpcf7-form :where(input, select, textarea):hover {
    border-color: #C3D3D0;
}

.wpcf7 .wpcf7-form :where(input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="date"], [type="password"], [type="search"]), select, textarea):focus {
    border-color: var(--form-teal-clair);
    box-shadow: 0 0 0 3px rgba(58, 156, 146, .18);
    outline: none;
}

/* Champ piège à robots (functions.php, verdon_honeypot_validation) : reste caché */
.wpcf7 .wpcf7-form .hidden-field {
    position: absolute !important;
    left: -9999px;
    width: 0;
    height: 0;
    opacity: 0;
}

/* Cases à cocher, boutons radio, acceptation */
.wpcf7 .wpcf7-form :is(input[type="checkbox"], input[type="radio"]) {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--form-teal-moyen);
    cursor: pointer;
}

.wpcf7 .wpcf7-list-item {
    margin: 0 18px 8px 0;
}

.wpcf7 .wpcf7-list-item label,
.wpcf7 .wpcf7-form .wpcf7-radio label,
.wpcf7 .wpcf7-form .wpcf7-checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-weight: 400;
}

.wpcf7 .wpcf7-acceptance,
.wpcf7 .wpcf7-acceptance a {
    color: var(--form-discret);
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Erreurs de saisie
   ------------------------------------------------------------------------- */

.wpcf7 .wpcf7-form .wpcf7-not-valid {
    border-color: var(--form-rouge);
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .1);
    color: var(--form-texte) !important; /* le thème parent colorait le texte en rose */
}

.wpcf7 .wpcf7-not-valid-tip {
    margin: 6px 0 0;
    color: var(--form-rouge);
    font: 600 13px/1.4 "DM Sans", Arial, sans-serif;
    text-align: left;
}

/* -------------------------------------------------------------------------
   Bouton d'envoi (bouton des blocs)
   ------------------------------------------------------------------------- */

/* !important sur les couleurs : le bouton porte parfois la classe historique
   .buttonSecondary / .button, dont le fond (et le survol blanc) est forcé en
   !important par le thème parent. */
.wpcf7 .wpcf7-form .wpcf7-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 220px;
    height: auto;
    margin: 0 !important;
    padding: 14px 28px;
    border: 0 !important;
    border-radius: 3px;
    background-color: var(--form-teal) !important;
    background-image: linear-gradient(to right, var(--form-teal-moyen) 0%, var(--form-teal) 50%, #143F3A 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 8px 24px rgba(31, 92, 86, .18);
    color: #fff !important;
    cursor: pointer;
    font: 600 14px/1.2 "DM Sans", Arial, sans-serif;
    letter-spacing: .01em;
    text-transform: none;
    transition: background-position .45s ease, box-shadow .35s var(--form-ease), transform .12s ease;
}

.wpcf7 .wpcf7-form .wpcf7-submit:hover,
.wpcf7 .wpcf7-form .wpcf7-submit:focus {
    background-color: var(--form-teal) !important;
    background-image: linear-gradient(to right, var(--form-teal-moyen) 0%, var(--form-teal) 50%, #143F3A 100%) !important;
    background-position: 100% 0% !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 12px 28px rgba(31, 92, 86, .22);
    color: #fff !important;
}

.wpcf7 .wpcf7-form .wpcf7-submit:active {
    transform: scale(.97);
    filter: brightness(.88);
}

.wpcf7 .wpcf7-form .wpcf7-submit:focus-visible,
.wpcf7 .wpcf7-form :is(input[type="checkbox"], input[type="radio"]):focus-visible {
    outline: 2px solid var(--form-teal-clair);
    outline-offset: 3px;
}

.wpcf7 .wpcf7-form .wpcf7-submit:disabled {
    cursor: wait;
    opacity: .7;
}

/* Indicateur d'envoi de CF7 : dans le bouton, à droite (il ne décale plus
   le bouton quand il est caché) */
.wpcf7 .wpcf7-form p:has(> .wpcf7-submit) {
    position: relative;
}

.wpcf7 .wpcf7-form .wpcf7-submit + .wpcf7-spinner {
    position: absolute;
    top: 50%;
    right: 12px;
    margin: -12px 0 0;
    background-color: rgba(255, 255, 255, .3);
}

/* Turnstile */
.wpcf7 .wpcf7-turnstile {
    margin: 0;
    min-height: 65px;
}

/* -------------------------------------------------------------------------
   Message de retour (envoyé, erreurs)
   ------------------------------------------------------------------------- */

.wpcf7 form .wpcf7-response-output {
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 0;
    border-left: 3px solid var(--form-teal-clair);
    border-radius: 3px;
    background: #E8F4F2;
    color: var(--form-teal);
    font: 500 14px/1.5 "DM Sans", Arial, sans-serif;
    text-align: left;
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
    display: none;
}

.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
    border-left-color: var(--form-rouge);
    background: #FBEDEC;
    color: #7A1C16;
}

/* -------------------------------------------------------------------------
   Formulaires de contact (div.form-row + div.ctSbt) : grille
   ------------------------------------------------------------------------- */

.wpcf7 .wpcf7-form:has(> .ctSbt) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px 20px;
}

/* Dans la grille, l'espacement vient du « gap » */
.wpcf7 .wpcf7-form:has(> .ctSbt) :where(input, select, textarea) {
    margin-bottom: 0;
}

.wpcf7 .wpcf7-form:has(> .ctSbt) > * {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
}

.wpcf7 .wpcf7-form:has(> .ctSbt) > .wpcf7-response-output {
    margin-top: 0;
}

.wpcf7 .wpcf7-form > .ctSbt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
}

.wpcf7 .wpcf7-form > .ctSbt p {
    display: flex;
    align-items: center;
}

@container (min-width: 560px) {
    /* Champs courts (texte, e-mail, téléphone) côte à côte */
    .wpcf7 .wpcf7-form:has(> .ctSbt) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wpcf7 .wpcf7-form:has(> .ctSbt) > .form-row:has(input:is([type="text"], [type="email"], [type="tel"]):not(.hidden-field)):not(:has(textarea, select, .wpcf7-checkbox, .wpcf7-radio, .wpcf7-acceptance)) {
        grid-column: auto;
    }

    /* Turnstile à gauche, bouton à droite, sur la même ligne */
    .wpcf7 .wpcf7-form:has(> .ctSbt) > .wpcf7-turnstile {
        grid-column: 1;
        align-self: center;
    }

    .wpcf7 .wpcf7-form:has(> .wpcf7-turnstile + .ctSbt) > .ctSbt {
        grid-column: 2;
    }
}

/* Petit écran : bouton pleine largeur, Turnstile centré */
@container (max-width: 559px) {
    .wpcf7 .wpcf7-form > .ctSbt {
        justify-content: stretch;
    }

    .wpcf7 .wpcf7-form > .ctSbt p {
        flex: 1;
        flex-wrap: wrap;
        justify-content: center;
    }

    .wpcf7 .wpcf7-form .wpcf7-submit {
        width: 100%;
        min-width: 0;
    }

    .wpcf7 .wpcf7-form > .wpcf7-turnstile {
        justify-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wpcf7 .wpcf7-form * {
        transition: none !important;
    }
}