/*
|--------------------------------------------------------------------------
|   public/css/formulaire.css
|--------------------------------------------------------------------------
|
|   Formulaire de contact. Il vit sur fond sombre (.fond-sombre) :
|   huit champs sur un aplat rouge fatiguent l'œil, et la couleur perd
|   son rôle d'accent quand elle couvre la moitié de la page.
*/

/* --- Le pot de miel ---
   Piège à robots : invisible pour un humain, présent dans le HTML.
   Les robots remplissent tous les champs qu'ils trouvent ; s'il est
   rempli, la validation refuse l'envoi.

   Positionnement hors écran plutôt que display:none : certains robots
   ignorent les champs masqués par display, mais suivent rarement un
   décalage de position. */
.pot-miel {
    position: absolute; left: -9999px;
    width: 1px; height: 1px; overflow: hidden;
}

.contact-grille {
    display: grid; grid-template-columns: 1.8fr 1fr;
    gap: 2.5rem; margin-top: 2.5rem; align-items: start;
}

/* Le formulaire posé sur un panneau légèrement éclairci : il se détache
   du fond nuit comme une fenêtre d'application. */
.formulaire {
    padding: 2rem;
    background: rgb(255 255 255 / .035);
    border: 1px solid rgb(255 255 255 / .09);
    border-radius: 1.25rem;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.formulaire .champ { margin-bottom: 1.125rem; }
.formulaire .ligne-double {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}

.formulaire label {
    display: block; font-size: .875rem; font-weight: 500;
    margin-bottom: .4375rem; color: #dfe3ee;
}
.formulaire .requis { color: var(--orange); }

.formulaire input,
.formulaire select,
.formulaire textarea {
    width: 100%; padding: .75rem .875rem;
    border: 1px solid rgb(255 255 255 / .12);
    border-radius: .625rem;
    background: rgb(15 20 36 / .6);
    color: #f5f7fb;
    transition: border-color .15s, box-shadow .15s, background .15s;
    /* 1rem IMPÉRATIF, y compris sur mobile : sous 16px, Safari sur iOS
       zoome automatiquement à la sélection d'un champ et décale toute
       la page. C'est la seule exception à la réduction des tailles. */
    font-size: 1rem;
    font-family: inherit;
}
.formulaire textarea { resize: vertical; min-height: 8rem; }

.formulaire input::placeholder,
.formulaire textarea::placeholder { color: #6b7590; }

/* Le focus prend le teal de la marque, avec un halo plutôt qu'un
   contour épais : on voit où l'on tape sans que le champ « saute ». */
.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
    outline: none;
    border-color: var(--teal-vif);
    box-shadow: 0 0 0 3px rgb(45 212 191 / .2);
    background: var(--nuit);
}

/* Les OPTIONS d'un select sont rendues par le système d'exploitation,
   pas par la page : elles n'héritent pas des couleurs du parent.
   Sans cette règle, du texte clair sur fond clair les rendrait illisibles. */
.formulaire select option { color: var(--encre); background: #fff; }

/* La flèche native d'un select est grise et mal alignée sur fond sombre :
   on la remplace par un chevron clair. */
.formulaire select {
    -webkit-appearance: none; appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa2b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .875rem center;
    background-size: 1rem;
}

.formulaire input.invalide,
.formulaire select.invalide,
.formulaire textarea.invalide { border-color: #f87171; }

.erreur-champ {
    margin: .375rem 0 0; font-size: .8125rem;
    color: #f87171; font-weight: 500;
}

/* Le bouton est le seul élément coloré de la section : c'est donc
   le premier que l'œil trouve, et c'est voulu. */
.bouton-inverse { cursor: pointer; margin-top: .5rem; }

.mention-rgpd { margin: 1.25rem 0 0; font-size: .8125rem; color: #8a91a5; }

/* --- Coordonnées directes, à côté du formulaire ---
   Certaines personnes préfèrent décrocher leur téléphone ; leur imposer
   un formulaire les ferait partir. */
.contact-direct h3 { color: #fff; margin-bottom: 1.25rem; }
.contact-direct a:not(.bouton) { color: #dfe3ee; text-decoration: none; }
.contact-direct a:not(.bouton):hover { color: var(--teal-vif); }

/* Chaque moyen de contact est une ligne avec son icône. */
.moyen {
    display: flex; align-items: center; gap: .875rem;
    padding: .875rem 1rem; margin: 0 0 .75rem;
    border: 1px solid rgb(255 255 255 / .08);
    border-radius: .75rem;
    background: rgb(255 255 255 / .025);
    word-break: break-word;
}
.moyen svg {
    width: 1.125rem; height: 1.125rem; flex-shrink: 0;
    color: var(--teal-vif);
}
.contact-direct .reponse {
    margin-top: 1.5rem; padding-top: 1.25rem;
    border-top: 1px solid rgb(255 255 255 / .08);
    font-size: .875rem; color: #9aa2b8;
}

/* --- Messages de retour --- */
.alerte {
    padding: 1rem 1.25rem; border-radius: .75rem;
    margin: 1.5rem 0; font-weight: 500;
}
.alerte-succes { background: rgb(20 83 45 / .6); color: #bbf7d0; border: 1px solid rgb(74 222 128 / .3); }
.alerte-erreur { background: rgb(127 29 29 / .6); color: #fecaca; border: 1px solid rgb(248 113 113 / .3); }

@media (max-width: 48rem) {
    .contact-grille { grid-template-columns: 1fr; gap: 2rem; }
    .formulaire .ligne-double { grid-template-columns: 1fr; gap: 0; }
    .formulaire { padding: 1.25rem; }
    .formulaire .bouton { width: 100%; }
}