/**
 * Formulaires (Contact Form 7).
 *
 * Le thème parent gère le comportement (module leb-forms : construction, RGPD,
 * enregistrement des envois) et fournit un habillage générique dans
 * `inc/leb-forms/assets/css/forms-fields.css`. On le remplace ici.
 *
 * ⚠ Spécificité : le parent écrit `.wpcf7-form input[type="submit"]` (0,2,1).
 * Envelopper nos sélecteurs dans `:where()` les ramènerait à (0,1,0) et ils
 * seraient tous perdants. On reprend donc la même forme de sélecteurs — notre
 * feuille étant chargée après celle du parent, elle l'emporte à égalité.
 */

.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/*
 * Deux champs côte à côte (classe posée dans le contenu du formulaire). Le
 * thème parent donne un retrait bas à cette rangée ; l'intervalle du formulaire
 * s'en charge déjà, et les deux s'additionneraient.
 */
.wpcf7-form .leb-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}

/*
 * Les colonnes du builder (leb-col) se contentent d'accueillir leur
 * étiquette, qui occupe toute la largeur disponible.
 */
.wpcf7-form .leb-col {
    display: flex;
    min-width: 0;
    /* Le parent borne les colonnes à data-width % de la rangée — la nôtre
       est une grille : la piste fait déjà la largeur voulue. */
    max-width: none;
}

.wpcf7-form .leb-col label {
    flex: 1;
    min-width: 0;
}

/*
 * Champs conditionnels (leb-showif du module parent) : nos règles de layout
 * ci-dessus, chargées après l'anti-flash du parent, l'écrasaient à spécificité
 * égale — et le parent ne révèle une rangée que si elle n'héberge qu'une seule
 * colonne. Ces trois règles rétablissent le contrat pour la rangée à DEUX
 * champs conditionnels (échéance + budget) : masquée par défaut, révélée en
 * grille dès qu'une colonne est activée par le script ; la colonne inactivée
 * reste masquée quoi qu'il arrive. Sans JavaScript, rien n'est activé : les
 * champs conditionnels (facultatifs) restent masqués — comportement du module.
 */
.wpcf7-form .leb-row:has([class*="leb-showif-"]) {
    display: none;
}

.wpcf7-form .leb-row:has(.is-cond-on),
.wpcf7-form .leb-row:has([class*="leb-showif-"].is-cond-on) {
    display: grid;
}

.wpcf7-form .leb-col:has([class*="leb-showif-"]):not(.is-cond-on) {
    display: none;
}

/*
 * Le retrait bas que le thème parent donne aux étiquettes est neutralisé : ici
 * l'écart entre deux rangées vient du seul intervalle du formulaire.
 */
.wpcf7-form label {
    display: block;
    min-width: 0;
    margin: 0;
    color: var(--wp--preset--color--text-soft);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--xxs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/*
 * Contact Form 7 enveloppe chaque champ dans un span, auquel le thème parent
 * donne un retrait haut — en visant `.wpcf7-form label .wpcf7-form-control-wrap`.
 * L'écart charte entre libellé et champ est de huit pixels, pas seize. On
 * reprend donc la forme de sélecteur du parent : à spécificité égale, notre
 * feuille passe après et l'emporte. Le libellé, l'astérisque du builder et le
 * champ vivent dans un même label en bloc : le texte reste un flux inline
 * (en flex, chaque séquence deviendrait un item séparé par le gap).
 */
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    min-width: 0;
}

.wpcf7-form label .wpcf7-form-control-wrap {
    margin: 8px 0 0;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--lp-border-strong);
    border-radius: var(--lp-radius-sm);
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--text);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--md);
    /* Le label est en capitales espacées, pas la saisie. */
    letter-spacing: normal;
    text-transform: none;
    transition: border-color 0.2s ease;
}

.wpcf7-form textarea {
    min-height: 140px;
    resize: vertical;
}

.wpcf7-form input:focus-visible,
.wpcf7-form select:focus-visible,
.wpcf7-form textarea:focus-visible {
    border-color: var(--wp--preset--color--rose);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.wpcf7-form ::placeholder {
    color: var(--wp--preset--color--kicker);
    opacity: 1;
}

/* ------------------------------------------------------------------ Envoi */

/*
 * Le bouton d'envoi n'accueille pas de pseudo-élément (hooks.php en fait un
 * <button>, mais la pastille reste une image de fond : elle se recentre seule
 * quel que soit le nombre de lignes). La pastille et sa flèche viennent donc de
 * cta-dot.svg, seule exception du projet où deux couleurs sont figées.
 *
 * Largeur : le libellé est en capitales espacées et peut dépasser la carte du
 * formulaire sur un petit écran (« Envoyer ma candidature »). `max-width: 100%`
 * borne le bouton à la colonne du formulaire ; comme le contenu d'un <button>
 * se répartit sur plusieurs lignes, le libellé n'est jamais coupé et le bouton
 * occupe naturellement toute la largeur là où il ne tient plus sur une ligne —
 * sans requête de média, et à sa largeur intrinsèque dès qu'il y a la place.
 *
 * Hauteur : `min-height` remplace la hauteur fixe. Le gabarit d'une et de deux
 * lignes (13px × 1.3 + 2 × 6px de retrait) reste sous ce plancher : le bouton
 * garde exactement ses 54 px partout, et ne grandirait qu'au-delà de deux
 * lignes. Le plancher tient aussi lieu de cible tactile (54 px > 44 px).
 */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    margin-top: 6px;
    padding: 6px 28px 6px 60px;
    min-height: 54px;
    border: 0;
    border-radius: var(--lp-radius-pill);
    background-color: var(--wp--preset--color--rose);
    background-image: url("../img/cta-dot.svg");
    background-repeat: no-repeat;
    background-position: left 6px center;
    background-size: 42px 42px;
    color: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    /* Un interligne serré sur une ligne, lisible sur deux. */
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

/*
 * La classe .wpcf7-submit s'ajoute au sélecteur d'attribut : le CSS générique
 * du module leb-forms (forms-fields.css, chargé après) pose un survol bleu
 * par défaut à spécificité égale — un cran de plus rend la charte gagnante
 * quel que soit l'ordre de chargement.
 */
.wpcf7-form input.wpcf7-submit[type="submit"]:hover,
.wpcf7-form input.wpcf7-submit[type="submit"]:focus-visible,
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus-visible {
    background-color: var(--wp--preset--color--rose-dark);
    /* La pastille est redéclarée : le survol générique du module leb-forms
       est un shorthand `background` qui l'efface sinon. */
    background-image: url("../img/cta-dot.svg");
    background-repeat: no-repeat;
    background-position: left 6px center;
    background-size: 42px 42px;
    transform: none;
}

/*
 * Le spinner suit le bouton dans le markup : en item de la colonne flex, il
 * creuserait la page de quarante-huit pixels (sa hauteur plus l'intervalle).
 * La marge haute négative rend exactement cet espace ; la marge gauche
 * automatique le pose au bout de la rangée, à droite du bouton. Un décalage
 * chiffré y supposerait une largeur de bouton fixe — elle ne l'est plus, et il
 * sortait alors de la carte sur un petit écran.
 */
.wpcf7-form .wpcf7-spinner {
    margin: -48px 0 0 auto;
}

/* --------------------------------------------------------------- Messages */

.wpcf7-form .wpcf7-response-output {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--wp--preset--color--border-soft);
    border-radius: var(--lp-radius-sm);
    font-size: var(--wp--preset--font-size--md);
}

.wpcf7-form .wpcf7-not-valid-tip {
    color: var(--wp--preset--color--rose);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

.wpcf7-form .wpcf7-not-valid {
    border-color: var(--wp--preset--color--rose);
}

/* -------------------------------------------------------------- Responsive */

@media (max-width: 640px) {
    /*
     * Deux champs côte à côte deviennent inconfortables au pouce : chacun
     * reprend sa ligne. Exception faite de la paire code postal / ville, que
     * l'on saisit d'un même geste et dont le premier terme est très court —
     * les séparer gaspillerait une ligne entière pour cinq chiffres.
     */
    .wpcf7-form .leb-row:not(:has(input[name="code-postal"])) {
        grid-template-columns: minmax(0, 1fr);
    }

    .wpcf7-form .leb-row:has(input[name="code-postal"]) {
        grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
        gap: 12px;
    }
}

/* ------------------------------------------------------ Type de projet */

/*
 * Les trois options de projet sont des pilules, comme dans la maquette. Le
 * pictogramme du métier est du décor : il vient de la feuille de styles, pas
 * du contenu du formulaire, et suit l'ordre des options. L'intitulé est le
 * label du champ, comme partout : seul l'écart avec les pilules diffère.
 */
.wpcf7-form label:has(.wpcf7-radio) > .wpcf7-form-control-wrap {
    margin-top: 10px;
}

/*
 * Le builder marque toujours radio et consentement d'un astérisque ; la
 * maquette n'en montre pas sur ces deux-là (l'intitulé du projet se termine
 * par deux-points, le consentement est une phrase).
 */
.wpcf7-form label:has(.wpcf7-radio) > .required,
.wpcf7-form label:has(.wpcf7-acceptance) > .required {
    display: none;
}

/*
 * Les pilules se répartissent d'elles-mêmes : trois de front quand la place
 * le permet, puis deux, puis une, sans palier déclaré. Leurs intitulés sont
 * courts, elles restent donc lisibles à deux de front sur un téléphone —
 * mieux vaut cela qu'une colonne unique qui étire la question sur trois
 * lignes.
 */
.wpcf7-form .wpcf7-radio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
    gap: 16px;
}

.wpcf7-form .wpcf7-radio .wpcf7-list-item label {
    width: 100%;
    justify-content: flex-start;
}

.wpcf7-form .wpcf7-radio .wpcf7-list-item {
    margin: 0;
}

.wpcf7-form .wpcf7-radio .wpcf7-list-item label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1px solid var(--lp-border-strong);
    border-radius: var(--lp-radius-sm);
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--text);
    font-size: var(--wp--preset--font-size--md);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Le pictogramme se glisse entre le bouton radio et le libellé. */
.wpcf7-form .wpcf7-radio .wpcf7-list-item label::before {
    content: "";
    order: 1;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background: var(--lp-projet-icon) center / contain no-repeat;
}

.wpcf7-form .wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label {
    order: 2;
}

.wpcf7-form .wpcf7-radio .wpcf7-list-item:nth-child(1) label {
    --lp-projet-icon: url("../img/ico-poele-couleur.svg");
}

.wpcf7-form .wpcf7-radio .wpcf7-list-item:nth-child(2) label {
    --lp-projet-icon: url("../img/ico-foyer-couleur.svg");
}

.wpcf7-form .wpcf7-radio .wpcf7-list-item:nth-child(3) label {
    --lp-projet-icon: url("../img/ico-cheminee-couleur.svg");
}

/*
 * Le rond natif disparaît : seule la pilule se lit. L'input reste dans le
 * flux d'accessibilité — masqué visuellement, jamais retiré — et le clavier
 * se repère à l'anneau posé sur la pilule au focus.
 */
.wpcf7-form .wpcf7-radio .wpcf7-list-item input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.wpcf7-form .wpcf7-radio .wpcf7-list-item label:hover {
    border-color: var(--wp--preset--color--rose);
}

/* L'option retenue se cerne d'un second trait, sans bouger d'un pixel. */
.wpcf7-form .wpcf7-radio .wpcf7-list-item label:has(input:checked) {
    border-color: var(--wp--preset--color--rose);
    box-shadow: inset 0 0 0 1px var(--wp--preset--color--rose);
    background: color-mix(in srgb, var(--wp--preset--color--rose) 6%, var(--wp--preset--color--white));
}

/* Le clavier retrouve la pilule qu'il parcourt. */
.wpcf7-form .wpcf7-radio .wpcf7-list-item label:has(input:focus-visible) {
    outline: 2px solid var(--wp--preset--color--rose);
    outline-offset: 2px;
}

/* --------------------------------------------------------- Pièce jointe */

/*
 * Le module leb-forms habille le champ fichier en gris et bleu génériques.
 * On reprend ici la matière des autres champs — même trait, même rayon — en
 * gardant le pointillé qui signale une zone de dépôt plutôt qu'une saisie.
 */
.wpcf7-form input[type="file"] {
    width: 100%;
    padding: 13px 16px;
    border: 1px dashed var(--lp-border-strong);
    border-radius: var(--lp-radius-sm);
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--text-soft);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--sm);
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.wpcf7-form input[type="file"]:hover,
.wpcf7-form input[type="file"]:focus-visible {
    border-color: var(--wp--preset--color--rose);
}

/*
 * Le bouton natif du sélecteur de fichier reprend l'allure d'un bouton
 * secondaire de la charte, à l'échelle du champ.
 */
.wpcf7-form input[type="file"]::file-selector-button {
    margin-right: 16px;
    padding: 8px 16px;
    border: 1px solid var(--lp-border-strong);
    border-radius: var(--lp-radius-pill);
    background: var(--wp--preset--color--bg);
    color: var(--wp--preset--color--text);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--xxs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wpcf7-form input[type="file"]:hover::file-selector-button {
    background: var(--wp--preset--color--rose);
    border-color: var(--wp--preset--color--rose);
    color: var(--wp--preset--color--white);
}

/*
 * Le navigateur écrit sa mention d'état (« Aucun fichier choisi », puis le nom
 * du fichier) DANS l'input, sur une seule ligne, sans repli possible : à 320 px
 * elle est coupée et le candidat ne peut pas relire le nom de son CV.
 *
 * `assets/js/champ-fichier.js` la redonne sous le champ, dans une mention qui
 * peut se replier. Le texte natif s'efface alors — la couleur transparente ne
 * touche que le texte de l'input, jamais le bouton qui déclare la sienne — et
 * la place qu'il occupait sert de zone cliquable, le champ restant une cible
 * pleine largeur. L'attribut `data-lp-fichier` est posé par ce script : sans
 * JavaScript, rien n'est masqué et le champ natif reste tel quel.
 */
.wpcf7-form input[type="file"][data-lp-fichier] {
    color: transparent;
}

/*
 * La mention vit dans le libellé, juste sous le champ, et occupe toute la
 * largeur de la colonne : elle n'est plus enfermée dans les quelques pixels
 * laissés libres par le bouton natif.
 */
.wpcf7-form .lp-fichier-etat {
    display: flex;
    min-width: 0;
    margin: 8px 0 0;
    color: var(--wp--preset--color--text);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
}

.wpcf7-form .lp-fichier-etat--vide {
    color: var(--wp--preset--color--kicker);
    font-weight: 400;
}

/*
 * Le nom se partage en deux boîtes voisines : le radical, seul à céder du
 * terrain, et l'extension, qui garde toujours sa largeur. La troncature est
 * donc celle du navigateur — aucun comptage de caractères en JavaScript — et
 * « mon-tres-long-curriculum….pdf » reste lisible jusqu'à l'extension.
 */
.wpcf7-form .lp-fichier-etat__nom {
    display: flex;
    min-width: 0;
    max-width: 100%;
}

.wpcf7-form .lp-fichier-etat__base {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wpcf7-form .lp-fichier-etat__extension {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------- Consentement */

/*
 * Le texte du consentement est le label du champ (dialecte builder). En flex
 * ou en grille, chaque séquence de texte autour du lien deviendrait un item
 * anonyme séparé par le gap : le label reste donc un bloc de texte ordinaire,
 * et la case s'ancre dans son retrait gauche.
 */
.wpcf7-form label:has(.wpcf7-acceptance) {
    display: block;
    position: relative;
    padding-left: 26px;
    color: var(--wp--preset--color--text-soft);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
    text-transform: none;
}

/*
 * Le plugin positionne le wrap en relative et le parent met le span
 * d'acceptation en flex : la case absolute s'ancrerait au wrap, en fin de
 * phrase. Tout le sous-arbre reste inline et non positionné — seul le label
 * porte le relative auquel la case s'ancre.
 */
.wpcf7-form label:has(.wpcf7-acceptance) .wpcf7-form-control-wrap {
    display: inline;
    margin: 0;
    position: static;
}

.wpcf7-form label:has(.wpcf7-acceptance) .wpcf7-acceptance,
.wpcf7-form label:has(.wpcf7-acceptance) .wpcf7-list-item,
.wpcf7-form label:has(.wpcf7-acceptance) .wpcf7-list-item label {
    display: inline;
}

.wpcf7-form label:has(.wpcf7-acceptance) .wpcf7-list-item {
    margin: 0;
}

.wpcf7-form label:has(.wpcf7-acceptance) a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.wpcf7-form label:has(.wpcf7-acceptance) a:hover,
.wpcf7-form label:has(.wpcf7-acceptance) a:focus-visible {
    color: var(--wp--preset--color--rose);
}

.wpcf7-form label:has(.wpcf7-acceptance) input[type="checkbox"] {
    position: absolute;
    top: 2px;
    left: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--wp--preset--color--rose);
}