/* ENGENDRE par construire-theme.py depuis 04-contenu/contact.src.html. */
/* --- propre à la page ---
   Version 3 du 16/09/2026, construite sur les choix d'Alexandre dans l'atelier
   des pages : une page sobre, sans photo en haut ; l'adresse électronique et
   un formulaire ; le numéro derrière un bouton « Afficher le numéro » ; pas des
   « trois étapes », mais les réponses possibles selon le degré de certitude du
   besoin (sa note, reformulée) ; une photo abstraite en bas de page (H24).
   Protection : ni l'adresse ni le numéro ne sont écrits dans la page ; le
   script les reconstitue (base64, à l'envers). Le formulaire prépare un
   courriel dans la messagerie du visiteur tant qu'il n'est pas relié au
   serveur : aucune demande ne se perd (11-wordpress/formulaire-contact.md).
   La version 2 est dans _archives/. */

/* le haut de page, en texte seul */
.tete-page{padding-block:calc(var(--respire) * 1.6) 0}
.tete-page h1{font-size:clamp(2rem,3.6vw,3.6rem);line-height:1;letter-spacing:-.045em;margin:0;max-width:14ch;text-wrap:balance}
.tete-page .accroche{margin:clamp(16px,1.8vw,28px) 0 0;max-width:52ch;font-size:clamp(1.1875rem,1.4vw,1.45rem);line-height:1.5;text-wrap:pretty}

/* les coordonnées et le formulaire, côte à côte à partir de 1100 px */
/* deux colonnes égales, avec l'écart des grilles : le formulaire et ses
   propres colonnes tombent sur les colonnes du bloc des réponses */
.joindre{display:grid;gap:clamp(36px,4vw,72px);margin-top:clamp(36px,4vw,72px)}
@media (min-width:1100px){.joindre{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,72px);align-items:start}}
.coord{margin:0;display:grid;row-gap:var(--s5)}
.coord div{border-bottom:1px solid var(--ink);padding:var(--s3) 0}
.coord dt{font-family:var(--f-display);font-weight:600;font-size:var(--t-mention);letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--s2)}
.coord dd{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,1.2rem + .5vw,1.8rem);letter-spacing:-.02em;overflow-wrap:anywhere}
.coord dd a{color:inherit;text-decoration:none}
.coord dd a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.coord .btn{font-family:var(--f-body);letter-spacing:0}
/* les intitulés de gauche et les libellés du formulaire sur les mêmes lignes
   (mesuré de 1152 à 2560 px, relecture du 17/09) ; le périmètre détaché */
.coord__perimetre{margin:var(--s6) 0 0;max-width:44ch;text-wrap:pretty}
/* une même hauteur des deux côtés, assez grande pour les coordonnées écrites
   en grand (à 6 rem, elles débordaient de 3 à 9 px selon l'écran) ; l'intitulé
   en haut, la valeur ou le champ en bas, sur le filet (relecture du 17/09) */
@media (min-width:1100px){
  .champ{padding-top:var(--s3);grid-template-rows:auto 1fr}
  .champ > input,.champ > select{align-self:end}
  .coord div{display:flex;flex-direction:column;justify-content:space-between}
  .coord div,.champ{min-height:7rem}
  .champ:has(textarea){min-height:0}
}
@media (max-width:760px){.coord .btn{min-height:44px}}

/* le formulaire : des champs à filet, sans cadre */
.formulaire{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) clamp(28px,4vw,72px)}
.champ{display:grid;gap:var(--s2);min-width:0}
.champ--large{grid-column:1/-1}
.champ label,.champ legend{font-family:var(--f-display);font-weight:600;font-size:var(--t-mention);letter-spacing:.02em}
.champ input,.champ select,.champ textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:var(--s2) 0;width:100%}
.champ textarea{min-height:9em;resize:vertical}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.champ small{font-size:var(--t-mention)}
.accord{grid-column:1/-1;display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-mention);line-height:1.5}
.accord input{width:1.1em;height:1.1em;margin-top:.2em;accent-color:var(--ink);flex:none}
.accord a{color:inherit}
.piege{display:none}
.envoi{grid-column:1/-1;display:grid;justify-items:start;gap:var(--s3)}
.envoi button{cursor:pointer;background:transparent;border:0}
.envoi__note{margin:0;font-size:var(--t-mention);max-width:52ch}
/* La note passe en alerte quand une reponse manque ou que le message est
   trop long. Pas de rouge : la charte n a que du noir et du blanc, et un
   filet a gauche suffit a dire que quelque chose demande attention. */
/* Le lien qui emporte le message, en fin de note. Dessine comme un lien et
   non comme un bouton : la zone d envoi n en porte qu un. */
.envoi__copie{appearance:none;-webkit-appearance:none;background:none;border:0;
  margin:0;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--rule-strong)}
.envoi__copie:hover,.envoi__copie:focus-visible{color:var(--ink);
  text-decoration-color:currentColor}
.envoi__note--alerte{color:var(--ink);border-left:2px solid var(--ink);
  padding-left:var(--s3)}
@media (max-width:620px){.formulaire{grid-template-columns:1fr}}

/* les réponses possibles */

/* la photo abstraite du bas de page */
.photo-fin{margin:clamp(44px,5vw,96px) 0 0;aspect-ratio:21/6;overflow:hidden;background:var(--ink)}
/* la coupe tombe entre deux rangées de fenêtres, pas au milieu (17/09) */
.photo-fin img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 69%}
@media (max-width:760px){.photo-fin{aspect-ratio:16/9}}