/* ============================================================
   referencement-formulaire.css — Section "Formulaire"
   (page 0-referencement.html)
   Architecture commune des sections (padding, titre) :
   voir referencement-commun.css
   ============================================================ */

.section-formulaire {
    background: white;
}

.section-formulaire .section-titre-pro {
    color: var(--vert-3);
}

.formulaire-grille {
    display: grid;
    grid-template-columns: 45% 10% 45%;
    position: relative;
}

.formulaire-separateur {
    position: absolute;
    top: 0;
    left: 45%;
    width: 10%;
    height: 100%;
    pointer-events: none;
}

.formulaire-separateur::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: var(--gris-2);
}

.formulaire-champs {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 1.57rem;
}

.formulaire-demande {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    gap: 1.57rem;
}

.formulaire-champ-paire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.formulaire-sous-titre {
    font-size: var(--font-size-3);
    font-weight: 700;
    color: var(--vert-2);
}

.formulaire-sous-titre-espace {
    margin-top: 1.57rem;
}

.formulaire-champ label,
.formulaire-objet-titre {
    display: block;
    font-size: var(--font-size-2);
    font-weight: 700;
    color: var(--gris-6);
    margin-bottom: 0.25rem;
}

.formulaire-champ input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.63rem 0.88rem;
    border: 1px solid var(--gris-3);
    border-radius: 8px;
    font-size: var(--font-size-2);
    font-family: var(--font-family);
    color: var(--gris-6);
    background: var(--gris-1);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.formulaire-champ input:focus {
    border-color: var(--vert-3);
    background: white;
}

/* Le contour standard ne s'affiche qu'au clavier : au clic souris,
   :focus-visible s'active quand même sur les champs de texte (voulu par
   le navigateur), donc on le masque par défaut et on ne le réaffiche que
   si le focus est arrivé via le clavier (classe posée une seule fois, au
   moment du focus, par referencement-formulaire.js — elle ne bouge plus
   ensuite pendant la frappe). Le fond blanc + bordure verte ci-dessus
   restent visibles dans tous les cas. */
.formulaire-champ input:focus-visible {
    outline: none;
}

.formulaire-champ input.focus-clavier:focus-visible {
    outline: 3px solid var(--gris-6);
    outline-offset: 4px;
}

/* ---- Objet de la demande (carte + liseré) ---- */
.formulaire-objet-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.63rem;
}

.formulaire-objet-carte {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.63rem;
    padding: 0.63rem 1rem;
    border: 1px solid var(--gris-3);
    border-left: 4px solid var(--gris-3);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.formulaire-objet-radio {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.formulaire-objet-carte:has(.formulaire-objet-radio:checked) {
    border-color: var(--vert-2);
    border-left-color: var(--vert-3);
}

.formulaire-objet-coche {
    visibility: hidden;
    color: var(--vert-3);
    flex-shrink: 0;
    display: flex;
}

.formulaire-objet-carte:has(.formulaire-objet-radio:checked) .formulaire-objet-coche {
    visibility: visible;
}

.formulaire-objet-texte {
    font-size: var(--font-size-2);
    font-family: var(--font-family);
    color: var(--gris-6);
}

.formulaire-objet-carte:has(.formulaire-objet-radio:checked) .formulaire-objet-texte {
    color: var(--vert-3);
}

/* Focus clavier : le radio réel est masqué (opacity: 0), donc son propre
   contour serait invisible — on le reporte sur la carte visible */
.formulaire-objet-carte:has(.formulaire-objet-radio:focus-visible) {
    outline: 3px solid var(--gris-6);
    outline-offset: 4px;
}

/* Aide clavier : n'apparaît que si une des cartes a le focus clavier
   (:focus-visible ne s'active pas au clic souris pour les radios, donc
   pas besoin de détection JS ici, contrairement aux champs input) */
.formulaire-objet-aide {
    font-size: var(--font-size-2);
    color: var(--vert-3);
    visibility: hidden;
}

.formulaire-objet-options:has(.formulaire-objet-radio:focus-visible) .formulaire-objet-aide {
    visibility: visible;
}

/* ---- Message libre ---- */
.formulaire-message {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.formulaire-message textarea {
    flex: 1;
    min-height: 8.75rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.88rem;
    border: 1px solid var(--gris-3);
    border-radius: 8px;
    font-size: var(--font-size-2);
    font-family: var(--font-family);
    color: var(--gris-6);
    background: var(--gris-1);
    resize: vertical;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.formulaire-message textarea:focus {
    border-color: var(--vert-3);
    background: white;
}

.formulaire-message textarea:focus-visible {
    outline: none;
}

.formulaire-message textarea.focus-clavier:focus-visible {
    outline: 3px solid var(--gris-6);
    outline-offset: 4px;
}

/* ---- Bouton d'envoi ---- */
.formulaire-bouton-zone {
    display: flex;
    justify-content: center;
    margin-top: 1.57rem;
}

.formulaire-bouton {
    background: var(--vert-3);
    color: white;
    font-weight: 700;
    font-size: var(--font-size-2);
    padding: 0.75rem 2.5rem;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-family: var(--font-family);
    transition: background 0.2s ease;
}

.formulaire-bouton:hover {
    background: var(--vert-4);
}

.formulaire-requis {
    color: var(--vert-3);
}

.formulaire-piege {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* ---- Mailto ---- */
.formulaire-mailto {
    max-width: 40%;
    margin: 0 0 3.75rem auto;
}

.formulaire-mailto-texte {
    font-size: var(--font-size-2);
    color: var(--vert-4);
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

.formulaire-mailto-email {
    color: var(--vert-4);
    text-decoration: none;
    transition: color 0.2s ease;
}

.formulaire-mailto-email:hover {
    color: var(--gris-6);
}

.formulaire-legende {
    font-size: var(--font-size-2);
    color: var(--vert-3);
    text-align: left;
}

.formulaire-erreur {
    color: var(--rouge-1);
    background: var(--gris-1);
    border: 1px solid var(--gris-3);
    border-left: 4px solid var(--rouge-1);
    border-radius: 8px;
    padding: 0.88rem 1.13rem;
    font-size: var(--font-size-2);
    margin-top: 1rem;
}

@media (max-width: 1023px) {
    .formulaire-mailto {
        max-width: 100%;
    }

    .formulaire-mailto-texte {
        text-align: right;
    }

    .formulaire-grille {
        grid-template-columns: 1fr;
    }

    .formulaire-separateur {
        display: none;
    }

    .formulaire-demande {
        grid-column: 1;
        border-top: 1px solid var(--gris-2);
        padding-top: 1.88rem;
        margin-top: 1.88rem;
    }
}

@media (max-width: 374px) {
    .formulaire-champ-paire {
        grid-template-columns: 1fr;
    }
}