/* ==========================================================================
   Formulaires Contact Form 7 — Séché AE
   Style fidèle aux maquettes propositions/pages/contact.html, etre-rappele.html
   et demande-rdv.html.

   NOTE : le thème parent (leb-theme-core) fournit des styles CF7 génériques
   via inc/leb-forms/assets/css/forms-fields.css. On force ici une spécificité
   supérieure (préfixe div.wpcf7) pour garantir l'override sans !important.

   Wrapper custom : .seche-form (à ajouter en "CSS class" du bloc CF7 dans
   l'éditeur) pour activer le layout en grille 2 colonnes.
   ========================================================================== */

/* --- Wrapper CF7 ---------------------------------------------------------- */
div.wpcf7 {
    max-width: 820px;
    margin: 0 auto;
    font-family: var(--wp--preset--font-family--body);
    color: var(--wp--preset--color--black, #202020);
}

div.wpcf7 .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    font-size: var(--wp--preset--font-size--md);
    color: var(--wp--preset--color--black, #202020);
}

/* Paragraphes générés par CF7 autour de chaque champ */
div.wpcf7 .wpcf7-form p {
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Override du margin-top 16px du parent leb-forms-fields.css sur les wrappers de champs */
div.wpcf7 .wpcf7-form :is(label, fieldset) .wpcf7-form-control-wrap {
    margin-top: 4px;
}

/* Cache le fieldset des hidden fields CF7 */
div.wpcf7 .wpcf7-form .hidden-fields-container {
    border: 0;
    padding: 0;
    margin: 0;
}

/* --- Labels --------------------------------------------------------------- */
div.wpcf7 .wpcf7-form :is(label, legend) {
    display: block;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wp--preset--color--gray, #797872);
    margin-bottom: 0;
}

div.wpcf7 .wpcf7-form :is(label, legend) .required,
div.wpcf7 .wpcf7-form .leb-required .required {
    color: var(--wp--preset--color--green-accent, #A6D71C);
    margin-left: 2px;
}

/* --- Inputs texte / email / tel / textarea / select ----------------------- */
div.wpcf7 .wpcf7-form input[type="text"],
div.wpcf7 .wpcf7-form input[type="email"],
div.wpcf7 .wpcf7-form input[type="tel"],
div.wpcf7 .wpcf7-form input[type="url"],
div.wpcf7 .wpcf7-form input[type="number"],
div.wpcf7 .wpcf7-form input[type="date"],
div.wpcf7 .wpcf7-form textarea,
div.wpcf7 .wpcf7-form select {
    width: 100%;
    background: transparent;
    border: 1px solid var(--wp--preset--color--border, #E0DED6);
    border-radius: 8px;
    padding: 14px 20px;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.4;
    color: var(--wp--preset--color--black, #202020);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-top: 0;
    box-shadow: none;
}

/* Gap resserré label/input pour tous les <p> CF7 en flex column */
div.wpcf7 .wpcf7-form p {
    gap: 4px;
}

div.wpcf7 .wpcf7-form input[type="text"]:focus,
div.wpcf7 .wpcf7-form input[type="email"]:focus,
div.wpcf7 .wpcf7-form input[type="tel"]:focus,
div.wpcf7 .wpcf7-form input[type="url"]:focus,
div.wpcf7 .wpcf7-form input[type="number"]:focus,
div.wpcf7 .wpcf7-form input[type="date"]:focus,
div.wpcf7 .wpcf7-form textarea:focus,
div.wpcf7 .wpcf7-form select:focus {
    border-color: var(--wp--preset--color--green-accent, #A6D71C);
    box-shadow: 0 0 0 3px rgba(166, 215, 28, 0.12);
}

div.wpcf7 .wpcf7-form input::placeholder,
div.wpcf7 .wpcf7-form textarea::placeholder {
    color: #b5b3aa;
    opacity: 1;
}

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

/* Select custom arrow */
div.wpcf7 .wpcf7-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23797872' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-color: transparent;
    padding-right: 44px;
    cursor: pointer;
}

/* --- Radio buttons (Civilité M. / Mme) et Checkboxes --------------------- */
div.wpcf7 .wpcf7-form .wpcf7-radio,
div.wpcf7 .wpcf7-form .wpcf7-checkbox {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 8px;
}

div.wpcf7 .wpcf7-form .wpcf7-radio .wpcf7-list-item,
div.wpcf7 .wpcf7-form .wpcf7-checkbox .wpcf7-list-item {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

div.wpcf7 .wpcf7-form .wpcf7-radio .wpcf7-list-item label,
div.wpcf7 .wpcf7-form .wpcf7-checkbox .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--wp--preset--font-size--md);
    font-weight: 400;
    color: var(--wp--preset--color--black, #202020);
}

div.wpcf7 .wpcf7-form input[type="radio"],
div.wpcf7 .wpcf7-form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--wp--preset--color--border, #E0DED6);
    background: var(--wp--preset--color--white, #fff);
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    position: relative;
    accent-color: var(--wp--preset--color--green-accent, #A6D71C);
}

div.wpcf7 .wpcf7-form input[type="radio"] {
    border-radius: 50%;
}

div.wpcf7 .wpcf7-form input[type="checkbox"] {
    border-radius: 4px;
}

div.wpcf7 .wpcf7-form input[type="radio"]:hover,
div.wpcf7 .wpcf7-form input[type="checkbox"]:hover {
    border-color: var(--wp--preset--color--green-accent, #A6D71C);
}

div.wpcf7 .wpcf7-form input[type="radio"]:checked {
    border-color: var(--wp--preset--color--green-accent, #A6D71C);
    background: var(--wp--preset--color--green-accent, #A6D71C);
    box-shadow: inset 0 0 0 3px var(--wp--preset--color--white, #fff);
}

div.wpcf7 .wpcf7-form input[type="checkbox"]:checked {
    border-color: var(--wp--preset--color--green-accent, #A6D71C);
    background: var(--wp--preset--color--green-accent, #A6D71C);
}

div.wpcf7 .wpcf7-form input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid var(--wp--preset--color--teal, #224C58);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

div.wpcf7 .wpcf7-form input[type="radio"]:focus,
div.wpcf7 .wpcf7-form input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(166, 215, 28, 0.2);
}

div.wpcf7 .wpcf7-form input[type="radio"]:checked:focus {
    box-shadow: inset 0 0 0 3px var(--wp--preset--color--white, #fff),
                0 0 0 3px rgba(166, 215, 28, 0.25);
}

/* --- Acceptance RGPD ------------------------------------------------------ */
div.wpcf7 .wpcf7-form .wpcf7-acceptance {
    display: block;
    margin-top: 8px;
}

div.wpcf7 .wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
    display: flex;
    align-items: flex-start;
}

div.wpcf7 .wpcf7-form .wpcf7-acceptance .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 400;
    line-height: 1.5;
    color: var(--wp--preset--color--gray, #797872);
}

div.wpcf7 .wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    margin-top: 1px;
}

/* --- Bouton submit : réplique le style btn-primary global ---------------- */
/* Le filter wpcf7_form_elements (inc/cf7-customizations.php) transforme les
   <input type="submit"> en <button type="submit"> pour permettre le ::after. */
div.wpcf7 .wpcf7-form button.wpcf7-submit,
div.wpcf7 .wpcf7-form .wpcf7-submit,
div.wpcf7 .wpcf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background-color: var(--wp--preset--color--green-accent, #A6D71C);
    color: var(--wp--preset--color--teal, #224C58);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--md);
    font-weight: 600;
    line-height: 1;
    border-radius: 3000px;
    padding: 7px 7px 7px 20px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 8px;
    align-self: flex-start;
    width: auto;
    box-shadow: none;
}

div.wpcf7 .wpcf7-form button.wpcf7-submit .wpcf7-submit__label {
    display: inline-block;
    padding-right: 4px;
}

/* Icône ronde blanche avec flèche teal (uniquement sur <button>) */
div.wpcf7 .wpcf7-form button.wpcf7-submit::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background-color: var(--wp--preset--color--white, #fff);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23224C58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

div.wpcf7 .wpcf7-form button.wpcf7-submit:hover::after {
    transform: rotate(-45deg);
}

div.wpcf7 .wpcf7-form button.wpcf7-submit:hover,
div.wpcf7 .wpcf7-form .wpcf7-submit:hover,
div.wpcf7 .wpcf7-form input[type="submit"]:hover {
    background-color: #bde619;
}

div.wpcf7 .wpcf7-form button.wpcf7-submit:active,
div.wpcf7 .wpcf7-form .wpcf7-submit:active,
div.wpcf7 .wpcf7-form input[type="submit"]:active {
    transform: scale(0.98);
}

div.wpcf7 .wpcf7-form button.wpcf7-submit:disabled,
div.wpcf7 .wpcf7-form .wpcf7-submit:disabled,
div.wpcf7 .wpcf7-form input[type="submit"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Spinner CF7 */
div.wpcf7 .wpcf7-form .wpcf7-spinner {
    margin-left: 12px;
}

/* --- Messages de validation / réponse ------------------------------------- */
div.wpcf7 .wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    color: #d9534f;
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 500;
    margin-top: 6px;
}

div.wpcf7 .wpcf7-form .wpcf7-not-valid {
    border-color: #d9534f;
}

/* Les messages response-output globaux sont déjà stylés par le parent
   leb-forms-fields.css (avec icônes SVG). On laisse faire. */

/* --- Layout colonnes (leb-row) : gap conforme maquette (22px) ------------- */
/* Le parent leb-forms-front.css définit .leb-row { gap: 16px }.
   Les maquettes utilisent gap: 22px pour les rangées de champs. */
div.wpcf7 .wpcf7-form .leb-row {
    gap: 22px;
    margin-bottom: 0;
}

/* Gap vertical entre les rangées : conforme maquette form-grid gap 22px */
div.wpcf7 .wpcf7-form > .leb-row + .leb-row,
div.wpcf7 .wpcf7-form > p + .leb-row,
div.wpcf7 .wpcf7-form > .leb-row + p {
    margin-top: 0;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 720px) {
    div.wpcf7 .wpcf7-form input[type="text"],
    div.wpcf7 .wpcf7-form input[type="email"],
    div.wpcf7 .wpcf7-form input[type="tel"],
    div.wpcf7 .wpcf7-form textarea,
    div.wpcf7 .wpcf7-form select {
        padding: 12px 16px;
        font-size: var(--wp--preset--font-size--md);
    }
}

/* --- Bloc Recherche natif (core/search) -----------------------------------
   Même habillage que les champs CF7 ci-dessus : bordure fine, coins 8px,
   focus vert. Variante « bouton à l'intérieur » : le cadre porte la bordure,
   le bouton loupe est un carré accent logé dedans (rayons concentriques :
   8px = 4px de bouton + 4px de retrait). */
.wp-block-search .wp-block-search__inside-wrapper {
    background: var(--wp--preset--color--white);
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
    align-items: center;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 8px;
    padding: 4px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
    border-color: var(--wp--preset--color--green-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--green-accent) 12%, transparent);
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0 clamp(8px, 2vw, 16px);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.4;
    color: var(--wp--preset--color--black);
    outline: none;
}

.wp-block-search .wp-block-search__input::placeholder {
    color: var(--wp--preset--color--gray);
    opacity: 1;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.5em;
    block-size: 2.5em;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background-color: var(--wp--preset--color--green-accent);
    color: var(--wp--preset--color--teal);
    font-size: var(--wp--preset--font-size--md);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.wp-block-search .wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:focus-visible {
    background-color: color-mix(in srgb, var(--wp--preset--color--green-accent) 80%, var(--wp--preset--color--white));
}

.wp-block-search .wp-block-search__button.has-icon svg {
    inline-size: 1.4em;
    block-size: 1.4em;
    fill: currentColor;
}