/* ══════════════════════════════════════════════════════════════
   PICBOIS47 — PAGE CONTACT (23 sept. 2026).
   La page la plus courte et la plus calme du site. Aucune révélation au
   défilement : un formulaire qui bouge pendant qu'on le remplit est un
   formulaire qu'on abandonne. Le seul mouvement est celui de l'en-tête,
   partagé par toutes les pages.

   LE GESTE DE LA PAGE : l'AIGUILLAGE. Quatre entrées sur un filet, le
   joint rouge se pose sur celle qui est choisie. C'est le seul rouge de
   la page avec le joint du bouton d'envoi, et il n'est jamais seul :
   l'entrée choisie porte aussi un encadrement et un texte en encre.

   Les champs viennent de pages.css (.champ) ; ici on ne fait que les
   poser sur la grille et ajouter ce que Contact a en propre.
   ══════════════════════════════════════════════════════════════ */

.co-zone { padding: var(--sp-6) 0 var(--sp-8); border-top: 1px solid var(--pg-filet); }
.co-zone > .cadre-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); row-gap: var(--sp-6); align-items: start; }

.co-hero { padding-bottom: var(--sp-5); }
.co-hero h1 { grid-column: 1 / span 8; }
.co-hero .page-chapo { grid-column: 1 / span 6; }


/* ═══ LA COLONNE DE CÔTÉ ═══════════════════════════════════════ */

.co-cote { grid-column: 1 / span 4; display: grid; gap: var(--sp-5); align-content: start; }
.co-bloc { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--pg-filet-fort); }
.co-coords { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.co-coords a { display: inline-block; padding: 10px 0; min-height: 44px; font-size: 1.125rem; color: var(--pg-encre); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); }
.co-coords a:hover { border-bottom-color: var(--pg-encre); }
.co-lieu { margin: 0; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.06em; color: var(--pg-sourdine); }
.co-diag { margin: 0; font-size: 1rem; line-height: 1.55; }
.co-diag b { color: var(--pg-encre); font-weight: 600; }
.co-qui { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--pg-encre); }


/* ═══ LE FORMULAIRE ════════════════════════════════════════════ */

.co-forme { grid-column: 6 / -1; display: grid; gap: var(--sp-4); }
.co-titre { margin: 0; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; letter-spacing: -0.03em; }
.co-form { display: grid; gap: var(--sp-5); }

/* ── L'aiguillage ──────────────────────────────────────────────
   Quatre entrées accrochées à un même filet. Le bouton radio natif
   reste dans le document (clavier, lecteur d'écran) mais n'est pas
   dessiné : c'est le joint qui le remplace, doublé d'un encadrement. */
.co-aiguillage { position: relative; margin: 0; padding: var(--sp-3) 0 0; border: 0; }
.co-aiguillage legend { padding: 0; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-sourdine); }
.co-rail { position: absolute; left: 0; right: 0; top: calc(var(--sp-3) + 20px); height: 1px; background: var(--pg-filet-fort); }
.co-choix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-3); padding-top: var(--sp-4); }
.co-entree { position: relative; display: block; cursor: pointer; }
.co-entree input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.co-entree > span {
  display: grid; gap: 6px; min-height: 44px; padding: 14px 12px 14px 0;
  border-top: 1px solid transparent; margin-top: -1px;
}
.co-entree > span::before { content: ""; display: block; width: 11px; height: 11px; margin-top: -20px; border: 1px solid var(--pg-filet-fort); background: var(--pg-ivoire); }
.co-entree b { font-size: 1.0625rem; font-weight: 600; color: var(--pg-sourdine); letter-spacing: -0.01em; }
.co-entree em { font-style: normal; font-size: 0.9375rem; line-height: 1.45; color: var(--pg-sourdine); }
/* l'entrée choisie : joint rouge PLUS encre PLUS filet — jamais la
   couleur toute seule */
.co-entree input:checked ~ span::before { background: var(--red); border-color: var(--red); }
.co-entree input:checked ~ span { border-top-color: var(--pg-encre); }
.co-entree input:checked ~ span b { color: var(--pg-encre); }
.co-entree input:checked ~ span em { color: var(--pg-texte); }
.co-entree input:focus-visible ~ span { outline: 2px solid var(--pg-encre); outline-offset: 4px; }
.co-entree:hover > span b { color: var(--pg-encre); }

/* ── Les champs sur la grille ─────────────────────────────────── */
.co-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-4); }
.co-c6 { grid-column: span 6; }
.co-c12 { grid-column: 1 / -1; }
.champ { margin: 0; }
.co-opt { text-transform: none; letter-spacing: 0.04em; color: var(--pg-sourdine); }
.co-aide { font-size: 0.9375rem; line-height: 1.45; color: var(--pg-sourdine); }

/* Le pot de miel. Retiré de l'écran sans display:none — un robot lit le
   style aussi ; retiré du parcours clavier par tabindex="-1" et du
   lecteur d'écran par l'aria-hidden de son paragraphe. */
.co-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }

.co-consentement { align-items: flex-start; }
.co-consentement label { color: var(--pg-texte); }

.co-envoi { display: grid; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--pg-filet); }
.co-action {
  position: relative; justify-self: start;
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 56px; padding: 0 26px 0 22px;
  font-family: var(--f-mono); font-size: 1.0625rem; font-weight: 500;
  color: var(--pg-ivoire); background: var(--pg-encre); border: 0; cursor: pointer;
  transition: gap var(--dur) var(--ease);
}
.co-action i { width: 8px; height: 8px; background: var(--red); }
.co-action:hover { gap: 1em; }
.co-action:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
.co-avis { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--pg-sourdine); max-width: 56ch; }
.co-avis .lien-mono { margin-left: 0.3em; }

/* L'état de l'envoi. Trois états, chacun avec un mot ET un filet :
   la couleur ne porte jamais le sens seule. */
.co-etat { margin: 0; font-size: 1rem; line-height: 1.55; }
.co-etat:empty { display: none; }
.co-etat[data-etat] { padding-left: 16px; border-left: 3px solid var(--pg-filet-fort); }
.co-etat[data-etat="attente"] { border-left-color: var(--pg-encre); color: var(--pg-encre); }
.co-etat[data-etat="succes"] { border-left-color: var(--pg-encre); color: var(--pg-encre); }
.co-etat[data-etat="echec"] { border-left-color: var(--red); color: var(--pg-encre); }


/* ═══ TABLETTE ═════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .co-hero h1, .co-hero .page-chapo { grid-column: 1 / -1; }
  .co-cote { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .co-forme { grid-column: 1 / -1; }
  .co-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-rail { display: none; }
  .co-entree > span { border-top: 1px solid var(--pg-filet); }
  .co-entree > span::before { margin-top: 0; }
}

/* ═══ TÉLÉPHONE ════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .co-zone { padding: var(--sp-5) 0 var(--sp-6); }
  .co-zone > .cadre-section { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .co-hero h1, .co-hero .page-chapo, .co-cote, .co-forme { grid-column: auto; }
  .co-cote { grid-template-columns: 1fr; gap: var(--sp-4); }
  .co-choix { grid-template-columns: 1fr; row-gap: 0; padding-top: var(--sp-2); }
  .co-grille { grid-template-columns: 1fr; }
  .co-c6, .co-c12 { grid-column: auto; }
  .co-action { width: 100%; justify-content: center; }
  .co-avis { max-width: none; }
}