/* Contact : la feuille de la famille « contact », importée par /contact/ et
   /contact/merci/ après la mise en page. Jetons seulement, seuils de
   l'accueil seulement (DESIGN.md §1), classes préfixées par la famille.
   Depuis le 29/09/2026 : une demande de rendez-vous courte, sur le modèle
   donné par Jean-Marc. Le titre et qui répond à gauche, le formulaire à
   droite dans un panneau ; une colonne sous 1024 px. */

/* ============================================================ ouverture */
/* L'entête du site est fixe et hors du flux : l'ouverture réserve sa hauteur,
   comme EnTetePage. */
.contact__ouverture,
.contact__etat { padding-top: calc(var(--h-entete) + var(--e7)); }

.contact__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--e7);
  margin-top: var(--e6);
}

.contact__presentation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e7);
}

.contact__tete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e5);
}
.contact__chapo { max-width: 64ch; }

/* Un libellé posé à même le fond de sa section, sans panneau : sur la crème,
   la règle de l'accueil le teinte en crème, la boîte disparaît et le mot
   paraît décalé de sa marge interne par rapport au titre. Il reprend ici la
   brume de l'étiquette par défaut, bord gauche calé sur celui du titre. */
.contact__ouverture .contact__tete .libelle,
.contact__etat .contact__etat-bloc .libelle { background: var(--fond-alterne); }

/* À partir de 1024 px : cinq douzièmes pour le titre et qui répond, sept pour
   le formulaire, les deux partis du même haut. */
@media (min-width: 1024px) {
  .contact__grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--e8);
    align-items: start;
  }
}

/* ============================================================ qui répond */
/* La vignette de Jean-Marc, cadrée en buste, son nom, sa fonction et une
   ligne calés sur le bas de l'image. Le fichier fait 400 px de côté : la
   vignette ne dépasse jamais 200 px de large (160 ici, 120 sous 641 px). */
.contact__hote {
  display: flex;
  align-items: flex-end;
  gap: var(--e5);
  margin: 0;
}
.contact__hote-photo {
  flex: 0 0 auto;
  width: calc(var(--e9) + var(--e5));
  aspect-ratio: 4 / 5;
}
@media (min-width: 641px) {
  .contact__hote-photo { width: calc(var(--e9) + var(--e8)); }
}
.contact__hote-photo > img {
  object-position: 62% 30%;
  filter: grayscale(var(--photo-portrait-gris)) saturate(var(--photo-portrait-satur)) contrast(var(--photo-portrait-contraste));
}
.contact__hote-legende {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding-bottom: var(--e1);
}
.contact__hote-nom {
  font-size: var(--t-titre-bloc);
  line-height: var(--lh-titre-section);
  letter-spacing: var(--ls-titre-bloc);
  font-weight: var(--graisse-normale);
}
.contact__hote-fonction,
.contact__hote-ligne {
  font-size: var(--t-interface);
  line-height: var(--lh-petit);
  color: var(--texte-attenue);
}
.contact__hote-ligne { max-width: 32ch; }

/* ============================================================ formulaire */
/* Deux groupes posés dans le panneau blanc cassé : le mode du rendez-vous,
   puis la personne et son entreprise. L'intitulé au calibre d'un H3. */
.contact__formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--e7);
}

.contact__groupe {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

/* `float` et `width` : une <legend> ne se met pas en page comme un bloc tant
   qu'elle n'est pas sortie du cadre du fieldset. */
.contact__legende {
  float: left;
  width: 100%;
  padding: 0;
  font-size: var(--t-titre-bloc);
  line-height: var(--lh-titre-section);
  letter-spacing: var(--ls-titre-bloc);
  font-weight: var(--graisse-normale);
}
.contact__legende + * { clear: both; }

/* ------------------------------------------------------------------ mode */
/* Deux grands choix côte à côte, empilés sous 768 px : leurs libellés
   (« Visio découverte de 30 minutes ») s'y cassaient sur quatre lignes. Le bouton radio
   couvre tout le choix, invisible : un clic n'importe où le prend, le clavier
   le parcourt aux flèches comme un groupe radio. Le choix pris passe au
   cuivre de l'action. */
.contact__modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3);
}
@media (max-width: 767.98px) {
  .contact__modes { grid-template-columns: minmax(0, 1fr); }
}

.contact__mode {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e5) var(--e4);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-etiquette);
  background: var(--fond-blanc);
  color: var(--texte);
  cursor: pointer;
  transition: background-color var(--duree-survol) var(--courbe-survol), border-color var(--duree-survol) var(--courbe-survol), color var(--duree-survol) var(--courbe-survol);
}
.contact__mode:hover { border-color: var(--texte-attenue); }

.contact__mode-choix {
  position: absolute;
  inset: 0;
  z-index: var(--z-section);
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* La coche : un anneau au repos, un disque plein au centre une fois pris. */
.contact__mode-coche {
  flex: 0 0 auto;
  width: var(--e5);
  height: var(--e5);
  border: 1px solid var(--texte-attenue);
  border-radius: var(--rayon-pilule);
}

.contact__mode-texte {
  min-width: 0;
  font-size: var(--t-corps);
  line-height: var(--lh-compact);
  font-weight: var(--graisse-moyenne);
}

.contact__mode:has(:checked) {
  background: var(--action);
  border-color: var(--action);
  color: var(--texte-sur-accent);
}
.contact__mode:has(:checked) .contact__mode-coche {
  background: radial-gradient(circle, var(--action) 0 28%, var(--texte-sur-accent) 32%);
  border-color: var(--texte-sur-accent);
}
.contact__mode:has(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- champs */
/* Étiquette au-dessus du champ, jamais dedans (DESIGN.md §10). Deux colonnes
   dès 641 px : prénom et nom, l'entreprise sur toute la largeur, fonction et
   effectif, email et téléphone. */
.contact__rangee {
  display: grid;
  gap: var(--e5) var(--e4);
}
@media (min-width: 641px) {
  .contact__rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__champ[data-champ="entreprise"] { grid-column: 1 / -1; }
}

.contact__champ {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.contact__etiquette {
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  line-height: var(--lh-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  font-weight: var(--graisse-normale);
}

.contact__saisie {
  width: 100%;
  margin: 0;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-etiquette);
  background: var(--fond-blanc);
  color: var(--texte);
  font-family: var(--police);
  font-size: var(--t-interface);
  line-height: var(--lh-compact);
  font-weight: var(--graisse-normale);
  transition: border-color var(--duree-survol) var(--courbe-survol);
}
.contact__saisie:hover { border-color: var(--texte-attenue); }
.contact__saisie:focus { border-color: var(--accent); }

/* La liste déroulante perd sa flèche native, redessinée en chevron au trait
   des pictos du site : elle suit la couleur du texte sans image. */
.contact__liste { position: relative; display: block; }
.contact__liste .contact__saisie {
  appearance: none;
  padding-right: var(--e7);
  cursor: pointer;
}
.contact__liste-chevron {
  position: absolute;
  top: 50%;
  right: var(--e4);
  width: var(--e4);
  height: var(--e4);
  transform: translateY(-50%);
  color: var(--texte);
  pointer-events: none;
}

/* -------------------------------------------------------------- erreurs */
/* Pas de rouge dans la palette : l'erreur est un filet de la couleur du
   texte sur le champ, et une phrase en toutes lettres, 500, précédée du
   losange cuivré du libellé. Signalé en besoin commun. */
.contact__erreur:not([hidden]) {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
}
.contact__erreur {
  font-size: var(--t-interface);
  line-height: var(--lh-compact);
  font-weight: var(--graisse-moyenne);
  color: var(--texte);
}
.contact__erreur svg {
  flex: 0 0 auto;
  width: var(--e4);
  height: var(--e4);
  margin-top: var(--e1);
  color: var(--accent);
}
.contact__erreur a { color: var(--accent); }
.contact__saisie[aria-invalid="true"] {
  border-color: var(--texte);
  background: var(--fond-alterne);
}

/* ----------------------------------------------------------------- envoi */
.contact__envoi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e4);
}
.contact__robot:empty { display: none; }

/* Le bouton de l'accueil, sur un <button> : ses remises à zéro seulement. */
.contact__formulaire .cta {
  border: 0;
  font-family: var(--police);
  cursor: pointer;
}
.contact__formulaire .cta:disabled { opacity: var(--opacite-survol); cursor: progress; }

.contact__statut,
.contact__sans-js {
  font-size: var(--t-interface);
  line-height: var(--lh-petit);
  color: var(--texte-attenue);
}
.contact__sans-js a { color: var(--accent); }

/* Envoyé : le formulaire s'efface derrière sa confirmation. */
.contact__formulaire[data-etat="envoye"] > :not(.contact__envoye) { display: none; }
.contact__envoye:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e4);
}
/* Ciblé au focus après l'envoi : il s'arrête sous l'entête fixe. */
.contact__envoye { scroll-margin-top: var(--decalage-ancre); }
.contact__envoye:focus { outline: none; }
.contact__envoye-marque { display: inline-flex; color: var(--accent); }
.contact__envoye-marque svg { width: var(--e6); height: var(--e6); }
.contact__envoye-titre {
  font-size: var(--t-titre-section);
  line-height: var(--lh-titre-section);
  letter-spacing: var(--ls-titre);
  font-weight: var(--graisse-normale);
  max-width: 16ch;
}

/* ============================================================ page d'état */
.contact__etat-grille {
  display: grid;
  gap: var(--e7);
  align-items: center;
  margin-top: var(--e8);
}
.contact__etat-bloc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e5);
}
.contact__etat-bloc .h1 { max-width: 14ch; }
.contact__etat-bloc .corps a { color: var(--accent); }

/* Le refus ne s'affiche qu'à l'ancre #refus, où la fonction renvoie un envoi
   sans JavaScript qui n'a pas abouti. */
.contact__etat-bloc--refus { display: none; scroll-margin-top: var(--decalage-ancre); }
.contact__etat-bloc--refus:target { display: flex; }
.contact__etat-blocs:has(.contact__etat-bloc--refus:target) .contact__etat-bloc--ok { display: none; }

.contact__etat-photo { aspect-ratio: 4 / 5; }
.contact__etat-photo > img { object-position: 50% 50%; }

@media (max-width: 940.98px) {
  .contact__etat-photo { aspect-ratio: 3 / 2; }
  .contact__etat-photo > img { object-position: 50% 70%; }
}
@media (min-width: 941px) {
  .contact__etat-grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e8); }
}