/* =====================================================================
 * Page Contact — feuille de page
 *
 * Chargée APRÈS styles.css, qui reste en lecture seule pour cette page.
 * Tout ce qui est créé ici porte le préfixe « contact- », pour qu'aucun
 * sélecteur nouveau ne puisse entrer en collision avec le tronc commun et
 * que la fusion reste mécanique plutôt qu'arbitrale. Vérifié le 28 août :
 * styles.css ne contient aucun sélecteur commençant par « .contact ».
 *
 * Ce qui devra être PROMU au tronc commun à la fusion est signalé par
 * « [TRONC] ». Le reste appartient à la page.
 *
 * IL N'EXISTE AUCUNE MAQUETTE DE CETTE PAGE — dossier OneDrive vérifié
 * vide le 28 août, comme les deux dossiers de textes. Toutes les cotes sont
 * donc TRANSPOSÉES, et chaque transposition dit ci-dessous sur quoi elle
 * s'appuie. Deux sources, dans cet ordre : le desktop validé de Réalisations
 * pour le gabarit et la hiérarchie, la maquette v4 de Présentation pour ce
 * qui relève du bouton et des jetons.
 *
 * Version 003 — 28 août 2026. Composition desktop, retouche du bas de page,
 * et la case de consentement remplacée par une mention d'information.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * [TRONC] Bandeau de page
 *
 * COPIÉ depuis realisations.css, où il est déjà marqué [TRONC], et non
 * déplacé : deux conversations n'écrivent pas dans le tronc en même temps.
 * À la fusion, une seule copie survit et sert aux trois pages sans écran
 * d'ouverture — Contact, Mentions légales, Politique de confidentialité.
 *
 * ATTENTION — « data-site-header » est posé sur ce bandeau pour régler le
 * seuil du header au survol. Conséquence relevée le 27 août sur
 * Réalisations : script.js y écrit « --p: 1 » en style en ligne et lui
 * ajoute « est-compact ». Les deux marques sont exactes — cette page est en
 * permanence dans l'état compact — mais elles ne sont pas inertes : tout ce
 * que le tronc fait dépendre de « --p » s'applique ici. Un seul sélecteur
 * est concerné, la réduction du logo, neutralisée juste en dessous. Les
 * trois autres emplois de « --p » sont portés par « .site-header » ou
 * « .hero-content », absents de cette page ; « est-compact » n'y intervient
 * que combiné à « .site-header ». Vérifié le 28 août.
 * ------------------------------------------------------------------- */

.contact-bandeau__blanc {
  height: 110px;
  display: grid;
  place-items: center;
  background: var(--color-white);
}

/*
 * Logo relevé sur la maquette : 273 x 61, soit le SVG 600 x 133 réduit.
 * La taille est écrite, pas obtenue par réduction — sans « transform: none »
 * le facteur 0,62 du tronc s'appliquerait une seconde fois, sur une largeur
 * déjà réduite, et le logo tomberait à 169 px.
 */
.contact-bandeau__blanc .brand-link {
  display: block;
  width: 273px;
  margin-inline: auto;
  transform: none;
}

.contact-bandeau__blanc .brand-logo {
  width: 273px;
  height: auto;
  display: block;
}

/*
 * « .compact-nav » du tronc est en position absolue, invisible, et son
 * opacité dépend de « --p ». Ici la barre est un objet ordinaire : on
 * neutralise ces trois états. On ne touche pas au tronc, on le recouvre.
 */
.contact-bandeau__nav {
  position: static;
  height: 56px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---------------------------------------------------------------------
 * Gabarit de la page
 *
 * TRANSPOSITION. La coquille garde les 994 px de Réalisations alors que
 * cette page n'a pas de présentoir à porter. C'est délibéré : les deux
 * pages sans écran d'ouverture commencent par un titre au même endroit, et
 * passer de l'une à l'autre ne doit pas faire sauter le bord gauche du
 * texte de 63 px. La largeur ne sert donc pas un contenu, elle sert la
 * continuité entre deux pages du même site.
 *
 * En dessous de 1200 px elle se réduit au lieu de pousser un défilement
 * horizontal — la plage 900 → 1200 px reste sans arbitrage sur tout le
 * site, elle est portée à la revue Go / No Go.
 * ------------------------------------------------------------------- */

.contact-shell {
  width: min(calc(100% - 2 * var(--gutter)), 994px);
  margin-inline: auto;
}


/* ---------------------------------------------------------------------
 * ⚠ PAS DE RÉSERVE BASSE EN BUREAU — DÉCISION DE FLORIAN DU 30 AOÛT 2026.
 *
 * Cette section portait « padding-bottom: 40px », la réserve basse du
 * gabarit. Elle est retirée EN BUREAU, et en bureau seulement.
 *
 * Pourquoi. Le pictogramme ZZ ne tombait pas au même endroit d'une page à
 * l'autre. MESURÉ à 1440 le 30 août : sur l'accueil, dont la maquette v4 est
 * la seule qui existe, le pictogramme fait 82 px de large et s'arrête à
 * 32 px du filet du pied de page — les 32 px étant la seule réserve haute du
 * pied de page lui-même. Sur Contact, il faisait 100 px et s'arrêtait
 * à 72 px : 40 px de réserve basse, puis les 32 px du pied de page.
 *
 * Florian a tranché sur image : « 82 et 32 sont les invariants du site ».
 * Les six fiches projets les respectent aussi.
 *
 * ⚠ LA RÉSERVE BASSE MOBILE, ELLE, NE BOUGE PAS. Le bloc sous 900 px garde
 * ses 32 px : la composition mobile de cette page a été jugée sur l'iPhone
 * de Florian et validée telle quelle. C'est pour cela que la valeur mobile
 * est écrite ici sans valeur bureau au-dessus d'elle — ce n'est pas un
 * oubli.
 * ------------------------------------------------------------------- */
.contact {
  position: relative;
  padding-top: 56px;
}

/* ---------------------------------------------------------------------
 * Titre, chapô, corps
 *
 * TRANSPOSITION LITTÉRALE du desktop validé de Réalisations : mêmes corps,
 * mêmes interlignes, mêmes largeurs décroissantes — 994 pour la coquille,
 * 868 pour le chapô, 617 pour le corps. Deux pages sans écran d'ouverture
 * n'ont aucune raison de s'ouvrir dans deux typographies différentes.
 *
 * 617 px n'est pas un caprice : à 994 px une ligne de texte à 18 px compte
 * environ 120 signes, soit le double du confort de lecture. À 617 elle en
 * compte 78.
 * ------------------------------------------------------------------- */

.contact-titre {
  max-width: 868px;
  margin: 0;
  color: var(--color-anthracite);
  font-size: 27px;
  font-weight: var(--weight-semibold);
  line-height: 34px;
}

.contact-chapo {
  max-width: 868px;
  margin: 5px 0 0;
  color: var(--color-orange-mid);   /* 3,84:1 sur blanc — au-dessus du seuil du grand texte */
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: var(--weight-bold);
  line-height: 46px;
}

.contact-corps {
  max-width: 617px;
  margin-top: 17px;
}

.contact-corps p {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
}

.contact-corps p + p {
  margin-top: 15px;
}

/* ---------------------------------------------------------------------
 * Le formulaire
 *
 * Il prend 868 px, la largeur du chapô, et non les 617 de la colonne de
 * lecture ni les 994 de la coquille.
 *
 * 617 a été essayé d'abord, par symétrie avec le corps de texte. Mesuré à
 * 1440 px : le formulaire s'arrêtait à x 840 et laissait 377 px de vide à sa
 * droite, sans que rien ne vienne les reprendre. Sur Réalisations le corps de
 * texte fait la même chose, mais le présentoir de 994 rétablit l'équilibre
 * juste en dessous ; ici il n'y a rien après le formulaire. Le bord droit du
 * formulaire aligne donc celui du chapô, et la page tient sur ses deux bords.
 *
 * La colonne de lecture reste à 617 pour le corps de texte : ce qui se lit en
 * continu garde ses 78 signes par ligne. Ce qui se remplit n'en a pas besoin.
 *
 * L'écart au-dessus emprunte « --souffle-long » du tronc : il s'ouvre avec
 * la hauteur de fenêtre et se resserre en dessous de 900 px, comme tous les
 * écarts structurants du site (P4.0 § 3.3).
 * ------------------------------------------------------------------- */

.contact-form {
  max-width: 868px;
  margin-top: var(--souffle-long);
}

/*
 * Le titre du formulaire prend la voix des « h2 » du site — Barlow gras —
 * et le corps du « h1 », 27 / 34. La hiérarchie se lit alors sans effort :
 * le chapô est en Barlow gras 42 orange, celui-ci en Barlow gras 27
 * anthracite. Même famille, plus petit, autre couleur.
 */
.contact-form__titre {
  margin: 0 0 24px;
  color: var(--color-anthracite);
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: var(--weight-bold);
  line-height: 34px;
}

/*
 * Résumé des erreurs. UN SEUL endroit parle : ce bloc est en « role=alert »
 * dans le balisage, et les messages sous les champs, eux, sont simplement
 * liés par « aria-describedby ». Deux régions vivantes annonceraient deux
 * fois la même chose.
 *
 * L'orange foncé sert d'encre d'alerte : c'est la seule couleur de la
 * palette qui puisse jouer ce rôle, et elle donne 6,4:1 sur blanc. Mais
 * l'erreur n'est JAMAIS dite par la couleur seule — elle est écrite en
 * toutes lettres, et annoncée.
 */
.contact-form__resume {
  margin: 0 0 24px;
  padding: 16px 20px;
  border-left: 3px solid var(--color-orange-dark);
  background: var(--color-off-white);
  font-size: 18px;
  line-height: 26px;
}

.contact-form__resume p {
  margin: 0;
}

.contact-form__resume ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.contact-form__resume a {
  color: var(--color-orange-dark);
}

/*
 * Deux colonnes de 421,5 px dans 868, gouttière de 25 — la même que celle qui
 * sépare la fenêtre de projet de son cadre sur Réalisations (585 = 535 + 2 x 25).
 * Nom et adresse tiennent sur une ligne, société et téléphone sur la
 * suivante : quatre champs courts occupent deux lignes au lieu de quatre, et
 * la page reste courte, ce qui est justement l'enjeu de cette page.
 */
.contact-form__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 25px;
}

.contact-champ {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.contact-champ--large {
  grid-column: 1 / -1;
}

/*
 * Étiquette visible et liée au champ. Jamais dans le champ lui-même : une
 * étiquette posée dans le champ disparaît dès qu'on écrit, et l'on ne sait
 * plus ce qu'on est en train de remplir.
 */
.contact-champ label {
  margin-bottom: 6px;
  color: var(--color-anthracite);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: 22px;
}

/*
 * « (facultatif) » plutôt qu'un astérisque sur les obligatoires. Un
 * astérisque demande une légende, et il marque le plus grand nombre pour
 * signaler le plus petit. Ici deux champs sur cinq portent la mention, et
 * elle se lit sans clé de lecture.
 */
.contact-champ__option {
  color: var(--color-blue-gray);    /* 4,99:1 sur blanc */
  font-weight: var(--weight-regular);
}

.contact-champ input,
.contact-champ textarea {
  width: 100%;
  margin: 0;
  border: 1px solid var(--color-blue-gray);
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-deep-black);
  font-family: inherit;
  font-size: 18px;
  line-height: 26px;
  transition: border-color var(--transition-fast);
}

.contact-champ input {
  height: 52px;
  padding: 0 14px;
}

.contact-champ textarea {
  min-height: 180px;
  padding: 12px 14px;
  resize: vertical;
}

/*
 * [TRONC] Traitement du focus des champs de saisie.
 *
 * Le tronc pose C05 — anneau blanc à l'intérieur, contour noir profond à
 * l'extérieur — sur « :where(a, button, [tabindex]) », c'est-à-dire sur tout
 * ce qui existait avant qu'il y ait un formulaire sur le site. Les champs de
 * saisie ne sont couverts par aucune des trois. La règle est donc ÉTENDUE
 * ici, avec les jetons du tronc et non des valeurs recopiées : le jour où
 * « --focus-outer » change, cette règle change avec lui.
 *
 * À PROMOUVOIR au tronc à la fusion, en ajoutant simplement « input,
 * select, textarea » à la liste du « :where() » existant. Signalé à Florian.
 */
.contact-champ input:focus-visible,
.contact-champ textarea:focus-visible {
  outline: var(--focus-outer);
  outline-offset: 3px;
  box-shadow: var(--focus-inner);
}

/*
 * Champ en erreur. Le trait passe à 2 px et prend l'encre d'alerte — mais
 * ce n'est qu'un renfort : ce qui dit l'erreur, c'est le message écrit
 * dessous, et l'annonce du résumé.
 */
.contact-champ input[aria-invalid="true"],
.contact-champ textarea[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--color-orange-dark);
}

.contact-champ__erreur {
  margin-top: 6px;
  color: var(--color-orange-dark);   /* 6,4:1 sur blanc */
  font-size: 16px;
  line-height: 22px;
}

/* ---------------------------------------------------------------------
 * La mention d'information
 *
 * Elle remplace la case de consentement, retirée le 28 août. Ce n'est pas
 * une commande : rien à cocher, rien à valider. C'est ce que le RGPD
 * appelle l'information au moment de la collecte, et c'est ce qui manquait
 * vraiment — la case, elle, faisait consentir à ce qui était de toute façon
 * nécessaire.
 *
 * Elle tient dans la colonne de lecture, 617 px et non les 868 du
 * formulaire : c'est du texte suivi, il obéit aux mêmes règles que le corps
 * de la page. Corps 16 et gris bleuté — 4,99:1 sur blanc, au-dessus du
 * seuil : une mention secondaire, pas une note de bas de page illisible.
 * ------------------------------------------------------------------- */

.contact-mention {
  max-width: 617px;
  margin: 24px 0 0;
  color: var(--color-blue-gray);
  font-size: 16px;
  line-height: 24px;
}

.contact-mention a {
  color: inherit;
}

/* ---------------------------------------------------------------------
 * Le bouton d'envoi
 *
 * 390 x 61, la cote du bouton principal du site relevée sur la maquette v4
 * en 02-3. Il est aligné à gauche sur la colonne du formulaire et non
 * centré : en 02-3 le bouton est centré parce que son bloc l'est aussi ;
 * ici tout le formulaire est calé à gauche, et un bouton centré sortirait
 * seul de l'alignement.
 *
 * « .button » du tronc est écrit pour des liens : les remises à zéro
 * ci-dessous sont celles qu'un « <button> » réclame en plus, pas une
 * redéfinition de son dessin.
 * ------------------------------------------------------------------- */

.contact-form__envoyer {
  width: min(390px, 100%);
  min-height: 61px;
  margin-top: 32px;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* ---------------------------------------------------------------------
 * Le piège à robots
 *
 * Sorti de l'écran plutôt que masqué : un robot un peu soigneux saute ce
 * qui est déclaré « display: none » ou « hidden », et le piège ne prendrait
 * plus rien. Il est retiré des technologies d'assistance et de l'ordre de
 * tabulation dans le balisage, pas ici.
 *
 * « clip-path » en plus du déport : sur une page en écriture de droite à
 * gauche, « left: -9999px » ne sort pas de l'écran.
 * ------------------------------------------------------------------- */

.contact-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---------------------------------------------------------------------
 * Le message de confirmation
 *
 * Il prend la place du formulaire, à l'endroit exact où il se trouvait, et
 * le visiteur ne change pas de page. Encre normale et non orange : ce n'est
 * pas une alerte, c'est une réponse.
 * ------------------------------------------------------------------- */

.contact-merci {
  max-width: 868px;
  margin-top: var(--souffle-long);
  padding: 24px 28px;
  border-left: 3px solid var(--color-orange);
  background: var(--color-off-white);
}

.contact-merci p {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
}

.contact-merci[tabindex]:focus {
  outline: none;
}

/* ---------------------------------------------------------------------
 * Pictogramme de fin de page
 *
 * Même cote et même rôle que sur les deux autres pages : il ferme <main> et
 * sert de butée au « Retour en haut ».
 *
 * L'ÉCART AU-DESSUS EST PROPRE À CETTE PAGE : 125 px au lieu des 56 de
 * Réalisations. Constat de Florian le 28 août : « je trouve le footer (à
 * commencer par le picto zz) trop proche du formulaire et du bouton », et
 * il l'a chiffré lui-même — « je le descendrais d'à peu près la hauteur des
 * z ».
 *
 * La hauteur des deux Z est relevée dans le dessin, pas estimée à l'œil :
 * dans « pictogramme-zz.svg », les deux tracés vont de y 91,141 à y 160 sur
 * un « viewBox » de 160. À la cote de rendu de 100 x 160, cela fait
 * 68,9 px. 56 + 69 = 125.
 *
 * POURQUOI L'ÉCART EST PLUS GRAND ICI que sur les deux autres pages : ce qui
 * précède le pictogramme n'est pas de même nature. Sur Présentation et sur
 * Réalisations, il suit un contenu qu'on a fini de lire. Ici il suit un
 * bouton d'envoi, c'est-à-dire une commande — et une commande a besoin
 * d'air en dessous d'elle pour qu'on ne la confonde pas avec ce qui suit.
 *
 * Les cotes de « .rea-mark » et « .project__mark » ne bougent pas : elles
 * sont validées, et cette règle ne porte que sur « .contact-mark ».
 * ------------------------------------------------------------------- */

.contact-mark {
  margin: 125px auto 0;
  display: block;
  width: 82px;   /* 82 et non 100 : voir la note du 30 août ci-dessus */
}

.contact-mark img {
  width: 100%;
  height: auto;
  display: block;
}

/* =====================================================================
 * SOUS 900 px — LE CHASSIS, PUIS LA COMPOSITION
 *
 * Ce bloc a d'abord contenu le seul bandeau de page, écrit le 28 août avec
 * le desktop parce que sans lui la page était fausse. LA COMPOSITION DU
 * CONTENU A ÉTÉ AJOUTÉE À LA SUITE, dans ce même bloc, le 28 août au soir —
 * en deux passes, les textes puis le formulaire. Le bandeau ci-dessous n'a
 * pas bougé d'une ligne.
 *
 * Fenêtre de composition : 375 x 768, l'iPhone 11 Pro de Florian, mesuré
 * sur une capture de son appareil et non supposé. Sa barre d'adresse flotte
 * par-dessus la page et ne lui retire aucune hauteur : le viewport commence
 * sous la barre d'état, à 44 pt, et mesure donc 812 - 44 = 768.
 *
 * POURQUOI IL EST OBLIGATOIRE DÈS MAINTENANT. « data-bandeau-permanent »
 * est posé sur le <body> : le header fixe du site est donc là dès le premier
 * pixel. Mesuré à 390 x 844 avant ce bloc : le bandeau de page gardait ses
 * cotes d'ordinateur — 166 px de haut, logo de 273 px centré — et le header
 * fixe de 76 px venait se poser dessus. Deux logos superposés, une réserve
 * haute fausse de 90 px, et la navigation du bandeau restée visible.
 *
 * Les cotes ci-dessous sont celles de « .rea-bandeau » sous 900 px, copiées
 * sans en changer une : elles reproduisent EXACTEMENT ce que le tronc donne
 * à « .panneau-header__blanc » et « .panneau-header__marque », y compris les
 * 5 px de descente du logo, qui n'est pas centré sur la hauteur de la barre.
 * Conséquence voulue : le header fixe se pose sur ce bandeau sans rien
 * déplacer d'un pixel. C'est la règle posée par Florian le 27 août — le
 * header mobile est le même sur tout le site, seul le moment où il descend
 * dépend de ce qu'il y a au-dessus de lui.
 *
 * La cote de bascule est celle du site, 900 px, et il n'y en a pas d'autre.
 * Ce bloc est UNIQUE et CONTIGU, et il n'habille aucun sélecteur du tronc :
 * « .contact-bandeau » appartient à cette page, comme « .rea-bandeau »
 * appartient à Réalisations.
 * ===================================================================== */

@media (max-width: 899px) {

  .contact-bandeau__blanc {
    height: var(--mob-bandeau);        /* 76 px */
    display: flex;                     /* reprise explicite du « grid » desktop */
    align-items: center;
    justify-content: flex-start;       /* reprise explicite de « place-items: center » */
    padding-inline: var(--mob-marge);  /* 20 px */
  }

  .contact-bandeau__blanc .brand-link {
    width: var(--mob-logo-compact);    /* 160 px */
    margin-inline: 0;                  /* reprise explicite du « auto » desktop */
    margin-top: 5px;                   /* le logo n'est pas centré : il descend */
  }

  .contact-bandeau__blanc .brand-logo {
    width: var(--mob-logo-compact);
  }

  /*
   * Avec JavaScript, le header fixe est posé exactement sur ce bandeau. Le
   * laisser peint dessous ne montrerait rien de plus, mais laisserait une
   * seconde cible clavier invisible sous la première — ce que le projet
   * interdit. « visibility » et non « display » : la boîte de 76 px reste,
   * donc la réserve sous le header fixe reste, et « #haut-de-page » reste
   * une cible d'ancre positionnable. « display: none » casserait la flèche
   * de remontée, qui vise cette ancre.
   *
   * Le sélecteur est préfixé « .js » : sans JavaScript, le header fixe
   * n'existe pas et c'est ce bandeau-ci qui porte le logo. Rien n'est perdu.
   */
  .js .contact-bandeau__blanc {
    visibility: hidden;
  }

  /*
   * Reprise EXPLICITE, non complétée : à trois entrées, la navigation du
   * bandeau dépasse 320 px de large, et le projet interdit tout défilement
   * horizontal de 320 à 1920 px. Le menu du site reste atteignable par le
   * burger du header fixe.
   */
  .contact-bandeau__nav {
    display: none;
  }


  /* ..................................................................
   * LA COMPOSITION DU CONTENU — passe A, les textes
   *
   * 28 août 2026. Aucune maquette de cette page n'existe : tout ce qui suit
   * est TRANSPOSÉ, et chaque cote dit sur quoi elle s'appuie. La source est
   * Réalisations mobile, composée la veille — c'est la page la plus proche :
   * même absence d'écran d'ouverture, même bandeau de 76 px, même suite
   * titre / chapô / corps.
   *
   * Largeur de composition : 375 px, l'iPhone 11 Pro de Florian.
   * .................................................................. */

  /*
   * La colonne passe de 327 à 335 px, et son bord gauche de 24 à 20.
   *
   * En desktop, la coquille garde délibérément les 994 px de Réalisations
   * pour que passer d'une page à l'autre ne fasse pas sauter le bord gauche
   * du texte. La même raison vaut ici : « --mob-colonne » est la colonne de
   * Réalisations mobile, au pixel. Sans cette ligne, la coquille retombe sur
   * « --gutter », qui vaut 24 px sous 900, et les deux pages se décalent de
   * 4 px l'une par rapport à l'autre.
   */
  .contact-shell {
    width: var(--mob-colonne);
  }

  /*
   * Réserve haute : 56 → 36 px. En desktop la page respire 56 px sous un
   * bandeau de 166 ; en mobile le bandeau tombe à 76 et la réserve se
   * resserre avec lui. Cote reprise de Réalisations mobile, qui pose sa
   * première encre à 112 px du haut de la page. Contact l'y pose désormais
   * aussi.
   */
  .contact {
    padding-top: 36px;
    padding-bottom: 32px;   /* 40 en desktop — la réserve basse de Réalisations mobile */
  }

  /*
   * Titre 27 / 34 → 22,5 / 29, la cote de « .rea-titre », elle-même reprise
   * du « h1 » de l'ouverture mobile de Présentation.
   */
  .contact-titre {
    max-width: none;
    font-size: 22.5px;
    line-height: 29px;
  }

  /*
   * Chapô 42 / 46 → 33,5 / 38, la cote de « .rea-chapo », reprise des grands
   * titres mobiles de 02-4 et 02-5.
   *
   * C'est le défaut le plus visible de la page avant cette passe : à 42 px
   * sur une colonne de 327, le chapô occupait NEUF lignes et 414 px, soit
   * plus de la moitié de l'écran d'un iPhone 11 Pro avant qu'on ait lu un
   * mot du corps. Le rapport titre / chapô est conservé — x 1,56 en desktop,
   * x 1,49 ici, exactement comme sur Réalisations.
   *
   * « max-width: none » : les 868 px du desktop ne bornent plus rien sous
   * 900, mais la reprise est explicite. Une règle de composition se redit,
   * elle ne s'hérite pas.
   */
  .contact-chapo {
    max-width: none;
    margin-top: 6px;
    font-size: 33.5px;
    line-height: 38px;
  }

  /*
   * Corps 18 / 26 → 17 / 26 : le corps de TOUTE la page mobile de
   * Présentation, et celui de Réalisations mobile. L'écart au-dessus passe
   * de 17 à 20 px, la cote de « .rea-corps ».
   */
  .contact-corps {
    max-width: none;
    margin-top: 20px;
  }

  .contact-corps p {
    font-size: 17px;
    line-height: 26px;
  }

  /*
   * Écart entre paragraphes : 15 px, la même valeur qu'en desktop, que sur
   * Réalisations mobile et que sur 02-1 et 02-5. Redit explicitement, non
   * hérité.
   */
  .contact-corps p + p {
    margin-top: 15px;
  }

  /*
   * Le titre du formulaire prend le corps du « h1 » — c'est déjà ce qu'il
   * fait en desktop, où tous deux sont à 27 / 34. Le « h1 » descendant à
   * 22,5 / 29, celui-ci le suit : sans quoi il deviendrait le plus gros
   * anthracite de la page, au-dessus de son propre titre. Sa marge basse de
   * 24 px ne bouge pas.
   */
  .contact-form__titre {
    font-size: 22.5px;
    line-height: 29px;
  }


  /* ..................................................................
   * LE FORMULAIRE — passe B
   *
   * UNE COLONNE sur téléphone, DEUX dès que la largeur les rend utiles.
   * Le nombre de colonnes n'est écrit nulle part : IL DÉCOULE DE LA
   * LARGEUR, exactement comme la grille de vignettes de Réalisations
   * mobile. Aucune seconde cote de bascule n'est introduite — celle du
   * site reste 900 px, et reste unique.
   *
   * Le chiffre. À 375 px, les deux colonnes du desktop donnaient des champs
   * de 155 px pour saisir une adresse électronique : on tapait sans voir ce
   * qu'on écrivait. 250 px est la largeur en dessous de laquelle un champ
   * cesse de montrer sa valeur. Deux colonnes réapparaissent donc quand la
   * colonne peut loger 2 x 250 plus la gouttière, soit à partir de 560 px
   * de fenêtre ; sur une tablette en portrait, où la colonne est plafonnée
   * à 560, elles font 270 px chacune.
   *
   * « min(100%, 250px) » et non « 250px » seul : sans le « min », une
   * colonne plus étroite que 250 déborderait, et le projet interdit tout
   * défilement horizontal de 320 à 1920 px.
   *
   * CE PASSAGE EN UNE COLONNE RÈGLE AU PASSAGE LE DÉFAUT DE L'ÉTIQUETTE
   * « Société ou organisation (facultatif) » : elle tenait sur trois lignes
   * quand celle du téléphone en tenait une, et décalait son champ par
   * rapport au voisin de la même rangée. Il n'y a plus de rangée.
   *
   * Gouttière 24 / 25 → 20, la marge de la page : les blancs se resserrent
   * en mobile, les contenus ne rétrécissent pas (P4.0 § 3.3).
   */
  .contact-form__grille {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 20px;
  }

  /*
   * LES CHAMPS NE CHANGENT PAS, et c'est une décision, pas un oubli.
   *
   * Leur hauteur de 52 px est déjà au-dessus de la cible tactile de 44 que
   * le site s'impose. Et leur corps de 18 px ne suit PAS le corps de la
   * page, qui descend à 17 : sur iOS, tout champ dont le texte est inférieur
   * à 16 px déclenche un zoom automatique de la page à la mise au point, et
   * la page ne revient jamais tout à fait à sa place ensuite. 18 laisse la
   * marge de sécurité, et ce qu'on tape n'obéit pas aux mêmes règles que ce
   * qu'on lit : un corps de lecture peut se resserrer, une valeur qu'on
   * saisit doit rester nette.
   *
   * La hauteur du champ « message » ne bouge pas non plus : 180 px, soit,
   * clavier ouvert sur un iPhone 11 Pro, un champ visible en entier.
   */

  /*
   * Le résumé des erreurs suit le corps de la page — 18 → 17 — et resserre
   * ses réserves intérieures. Il ne s'affiche qu'avec PHP, donc jamais dans
   * le prototype servi par « python3 -m http.server » : il est composé ici
   * quand même, parce qu'un visiteur qui se trompe sur son téléphone est le
   * cas le plus probable de toute la page.
   */
  .contact-form__resume {
    padding: 14px 16px;
    font-size: 17px;
    line-height: 26px;
  }

  /* ..................................................................
   * LA MENTION D'INFORMATION
   *
   * Son corps ne descend pas : 16 px, la cote du desktop. C'est le plus
   * petit texte de la page, et le rétrécir encore en ferait une note de bas
   * de page illisible sur un téléphone — or c'est le texte qui dit au
   * visiteur ce qu'on fait de ce qu'il écrit. Sa mise à distance du corps
   * de la page est portée par la couleur, le gris bleuté, et non par la
   * taille.
   *
   * SON INTERLIGNE, LUI, S'OUVRE : 24 → 26, celui du corps de la page.
   * C'est le seul geste possible pour ses deux liens — l'adresse de
   * courriel et la politique de confidentialité.
   *
   * L'ÉCART ASSUMÉ, annoncé à Florian et accepté par lui le 28 août : ces
   * liens n'atteignent pas les 44 px de cible que le site s'impose
   * ailleurs. Les deux procédés existants — le pseudo-élément en « inset »
   * des filtres de Réalisations, et la « min-height » des boutons de 02-6 —
   * valent pour une commande isolée. Appliqués à un lien EN COURS DE LIGNE,
   * ils déborderaient sur les lignes du dessus et du dessous, et deux liens
   * proches deviendraient deux cibles qui se chevauchent : on toucherait
   * l'une en visant l'autre. Un texte suivi se rend confortable par son
   * interligne, pas en gonflant les mots. C'est ce que fait cette règle, et
   * c'est aussi ce qui vaut pour LE TROISIÈME LIEN de la page, celui du
   * corps (« mon adresse est contact@zemoritz.fr »), qui hérite déjà des
   * 26 px du corps.
   */
  .contact-mention {
    max-width: none;
    line-height: 26px;
  }

  /* ..................................................................
   * LE MESSAGE DE CONFIRMATION
   *
   * Invisible dans le prototype, comme le résumé d'erreurs : il n'existe
   * qu'une fois le message parti, donc qu'avec PHP. Il suit le corps de la
   * page et resserre ses réserves ; son filet orange de 3 px ne bouge pas.
   */
  .contact-merci {
    max-width: none;
    padding: 20px 20px;
  }

  .contact-merci p {
    font-size: 17px;
    line-height: 26px;
  }

  /* ..................................................................
   * LE PICTOGRAMME DE FIN DE PAGE
   *
   * 100 → 83 px, la cote du pictogramme mobile de 02-6, celle qu'a reprise
   * Réalisations mobile.
   *
   * SA RÉSERVE HAUTE EST CALCULÉE, PAS RECOPIÉE. Le desktop de cette page
   * porte 125 px là où les autres portent 56, parce que Florian a demandé
   * de descendre le bas de page « d'à peu près la hauteur des z » — 68,9 px
   * mesurés dans le dessin à la cote de rendu de 100. Transposer ce
   * raisonnement, et non le chiffre : la réserve mobile de Réalisations est
   * de 48 px, et la hauteur des z à la cote de 83 vaut 68,9 x 83 / 100,
   * soit 57. 48 + 57 = 105.
   *
   * (Transposer le chiffre par simple proportion — 125 x 48 / 56 — aurait
   * donné 107. Les deux voies convergent à 2 px près, ce qui est le signe
   * que la cote est juste ; celle qui est écrite ici est celle qui suit le
   * raisonnement de Florian.)
   *
   * La raison de cet écart plus grand qu'ailleurs ne change pas en mobile :
   * ce pictogramme ne suit pas un contenu qu'on a fini de lire, il suit une
   * commande, et une commande a besoin d'air en dessous d'elle.
   *
   * « .rea-mark » et « .project__mark » ne sont pas touchées.
   */
  .contact-mark {
    margin-top: 105px;
    width: 83px;
  }

}