/* Formulaire de contact public.

   Il partage la grammaire des formulaires du parcours participant : cibles
   larges, libellés au-dessus des champs, aucun placeholder tenant lieu de
   libellé — un placeholder disparaît dès qu'on tape, et l'on ne sait plus ce
   qu'on remplit. */

/* La page tient dans un ecran. En une seule colonne de 720 px, elle mesurait
   1390 px de haut pour une fenetre de 720 : il fallait defiler pour trouver le
   bouton d envoi. Le formulaire et les coordonnees passent cote a cote, et les
   champs reprennent la hauteur de cible minimale de 44 px au lieu de 48. */
.page-contact {
    max-width: 1100px;
    /* Le chapeau etait colle sous la topbar : 8 px ne separaient pas le titre
       de la barre, ils l y accrochaient. Il descend de 20 px le 11 aout, ce que
       le deplacement du bouton d envoi dans la colonne de droite rend possible
       — c est lui qui obligeait a economiser chaque pixel du haut. */
    margin-top: calc(var(--topbar-height) + 28px);
    /* La barre du bas est en `position: fixed` : elle ne pousse rien et
       recouvre ce qui finit sous elle. Le bouton d'envoi est le dernier
       élément de la colonne de droite — il passait donc dessous sur une
       fenêtre courte, et un bouton d'envoi qu'on ne peut pas cliquer est un
       formulaire mort. Signalé par Arnaud au premier tour de recette du
       Sprint 8. La marge du haut se réservait déjà de la même façon ; celle du
       bas manquait. */
    padding-bottom: calc(var(--bottombar-height) + 28px);
}

.page-contact h1 {
    margin: 0 0 6px;
    font-size: 1.7rem;
}

.page-contact .contact-form {
    gap: 10px;
}

.page-lead {
    margin: 0 0 14px;
    max-width: 90ch;
    color: #5b6270;
    font-size: 0.98rem;
    line-height: 1.5;
}

.contact-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
    gap: 32px;
    align-items: start;
}

@media (max-width: 900px) {
    .contact-columns {
        grid-template-columns: 1fr;
    }
}

/* Le message de confirmation, et les deux défauts qu'il portait (TD20).

   Il ne se distinguait pas du formulaire : un fond à #f0f7f3 sur une page
   blanche, c'est un blanc légèrement différent. Et rien ne l'effaçait — un
   visiteur qui revenait sur la page lisait « votre message est bien arrivé »
   à propos d'un message envoyé la semaine précédente.

   L'effacement se fait en CSS et non en JavaScript : la politique de contenu
   interdit le script en ligne (D47), et un fichier séparé pour faire
   disparaître un paragraphe serait disproportionné. Douze secondes — le temps
   de lire une phrase deux fois — puis `visibility` retire le message de
   l'arbre d'accessibilité en même temps que de l'écran, sans quoi un lecteur
   d'écran continuerait de l'annoncer. */
.form-flash {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-left: 5px solid #5b6270;
    background: #eceef2;
    font-weight: 600;
}

.form-flash-success {
    border-left-color: #1c6b45;
    background: #dff0e6;
    color: #10402a;
    animation: form-flash-dismiss 12s forwards;
}

.form-flash-error {
    border-left-color: #a4262c;
    background: #f7e3e4;
    color: #6b1418;
}

@keyframes form-flash-dismiss {
    0%, 83% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Une personne qui a demandé moins d'animations n'a pas demandé à perdre un
   message : il reste, simplement il ne bouge pas. */
@media (prefers-reduced-motion: reduce) {
    .form-flash-success {
        animation: none;
    }
}

/* Champ leurre : retiré du flux, de l'ordre de tabulation et de l'arbre
   d'accessibilité. `display: none` suffirait à le cacher, mais certains
   automates l'ignorent précisément pour cette raison ; on le déplace hors de
   l'écran, ce qui coûte le même effort et se remarque moins. */
.contact-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-field {
    display: block;
}

.contact-field span {
    display: block;
    margin-bottom: 6px;
    font-size: 0.95rem;
    color: #16181d;
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid #16181d;
    border-radius: 8px;
    font: inherit;
    background: #ffffff;
    color: #16181d;
    /* Sans cela, le rembourrage s'ajoute a `min-height` : chaque champ mesurait
       62 px pour une cible annoncee a 44, et le formulaire depassait de
       l'ecran sans qu'aucune valeur ne le laisse deviner. */
    box-sizing: border-box;
}

.contact-field textarea {
    min-height: 72px;
    resize: vertical;
}

.contact-field input:focus-visible,
.contact-field textarea:focus-visible {
    outline: 3px solid #b58b2c;
    outline-offset: 1px;
}

.contact-consent {
    margin: 0;
    font-size: 0.9rem;
    color: #5b6270;
    line-height: 1.55;
}

/* Colonne de droite : les coordonnees, puis le bouton d envoi sous elles. Le
   bouton reste rattache au formulaire par son attribut `form`, sans une ligne
   de JavaScript. */
.contact-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-submit {
    align-self: flex-start;
    min-height: 48px;
    padding: 10px 26px;
    border: 2px solid #16181d;
    border-radius: 10px;
    background: #16181d;
    color: #ffffff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
}

/* Les coordonnees passent a droite du formulaire : sous lui, elles etaient la
   raison pour laquelle il fallait defiler. */
.contact-identity {
    margin-top: 0;
    padding: 20px;
    border: 1px solid #d7dae0;
    background: rgba(255, 255, 255, 0.75);
}

.contact-legal-link {
    margin: 16px 0 0;
    font-size: 0.9rem;
}

.contact-identity h2 {
    margin: 0 0 12px;
    font-size: 1.1rem;
}

.contact-identity address {
    font-style: normal;
    line-height: 1.7;
    color: #5b6270;
}

@media (max-width: 768px) {
    .contact-row {
        grid-template-columns: 1fr;
    }

    .contact-submit {
        align-self: stretch;
        text-align: center;
    }
}

/* En colonne unique, le bouton d envoi remonte avant l adresse (B4.8, defaut
   F1 du 12/08/2026 : « le bouton d envoi passe sous la barre du bas »).

   CE QUI ETAIT REELLEMENT EN CAUSE. Sur un poste de travail, la page tient deux
   colonnes et le bouton est en haut a droite, sous les coordonnees — c est le
   placement que demande le test 5 du §2, et il est bon. Le defaut n apparait
   que SOUS 900 px, quand la grille se replie : la colonne laterale passe alors
   sous le formulaire, et le bouton se retrouve apres le bloc d adresse,
   c est-a-dire tout en bas d une page qu il faut deviner qu on doit faire
   defiler.

   La recette du 21/08 avait mesure le bouton a 1002 px dans un cadre de
   823 x 468 — donc dans la mise en page repliee, et non sur un poste de
   travail. Le releve etait juste, sa lecture ne l etait pas : ce n est pas la
   page qui est cassee, c est sa version etroite.

   `order` deplace le bouton A L ECRAN sans le bouger dans le document : il
   reste rattache au formulaire par son attribut `form`, il garde sa place dans
   l ordre de tabulation, et un lecteur d ecran le rencontre toujours au meme
   endroit. C est le geste minimal, et il n a pas besoin d une ligne de
   JavaScript. */
@media (max-width: 900px) {
    .contact-submit {
        order: -1;
    }
}