/* Infra Society, la page Contact (refonte, bloc B5, construit en avance sur la branche refonte-b1).

   Le dessin est celui de Maël (v8/contact.html ; assets/site.css, refinement.css, identity.css), repris à la main, avec
   les valeurs FINALES de sa cascade. Toutes les règles sont portées par body.ch-contact (aucune règle nue, P-42) ; ses
   noms de classes sont gardés, sauf .section → .volet, .ecto → .ecto-fixe (P-89), et les classes qui portaient un
   prénom (un seul fond pour les deux portraits). La charpente porte l'en-tête, le pied, les boutons, la ligne sous un
   lien « écrire », les questions et leurs « oreilles ».

   Différences avec la maquette, et leurs raisons (refonte/DECISIONS-A-CONSIGNER.md, P-99 ; la page de comparaison les
   liste) :
   - pas de formulaire : la carte porte un lien « Écrire un message » vers l'alias de contact, écrit en références de
     caractères (DEC-46 : aucun formulaire ; le formulaire de Maël ne faisait qu'ouvrir la messagerie, et sans script il
     aurait mis nom, adresse et message dans l'adresse de la page) ; nos textes publiés, et les deux lignes ancrées
     #entreprise et #collaboration (liens entrants gardés) ;
   - nos portraits déjà publiés, réduits (DEC-98, P-59), sans lien de profil ; « Parlons-en. » et la citation en Switzer
     (graisse 550, P-85) ;
   - la seconde question (« Depuis votre espace… ») serait fausse aujourd'hui : nos textes publiés à la place ;
   - la gravure de l'encadré est écartée (P-55) : sans elle, le plus proche du rendu de Maël (mesuré).
   Aucune ressource d'un autre site : les images viennent de images/ (registre images/LICENCES.md). */

/* ------------------------------------------------------------------ sections et voile de page */
body.ch-contact .volet { padding-top: 124px; padding-bottom: 20px; }
@media (min-width: 1440px) { body.ch-contact .volet { padding-top: 140px; } }   /* avant les règles des blocs, comme chez Maël */
body.ch-contact .ecto-fixe { height: auto; object-fit: contain; aspect-ratio: 320 / 284; }
body.ch-contact main { position: relative; isolation: isolate; }
body.ch-contact main::before {
  content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: 700px; pointer-events: none; opacity: .27;
  background: linear-gradient(112deg, #ccd9f0, #e9e6ec 47%, #efdbc5);
  -webkit-mask-image: linear-gradient(transparent, #000 23%, #000 42%, transparent 100%);
          mask-image: linear-gradient(transparent, #000 23%, #000 42%, transparent 100%);
}

/* ------------------------------------------------------------------ ouverture */
body.ch-contact .page-hero { position: relative; isolation: isolate; padding: 164px 0 44px; }
body.ch-contact .page-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
body.ch-contact .page-title-row { display: flex; align-items: center; justify-content: center; gap: 24px; max-width: 100%; margin-bottom: 24px; }
body.ch-contact .page-hero h1 {
  max-width: 1020px; margin: 0; font: 550 64px/1.08 var(--ch-switzer); letter-spacing: -.05em; color: var(--ch-encre); text-wrap: balance;
}
body.ch-contact .heading-ecto { flex-shrink: 0; width: 74px; height: 74px; transform: rotate(8deg); transition: transform .5s var(--ch-courbe); }
body.ch-contact .page-title-row:hover .heading-ecto { transform: rotate(-5deg) translateY(-4px); }
body.ch-contact .page-hero p { max-width: 500px; font-size: 16px; line-height: 1.65; }

/* ------------------------------------------------------------------ la carte « écrire » et les notes */
body.ch-contact .contact-booking { padding-top: 0; padding-bottom: 0; }
body.ch-contact .contact-section {
  display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 24px; align-items: start; margin: 0; padding: 0;
}
body.ch-contact .contact-form { display: grid; align-content: start; gap: 24px; padding: 32px; border-radius: 24px; background: #fff; scroll-margin-top: 30px; }
body.ch-contact .contact-form h2 { font-size: 27px; line-height: 1.2; letter-spacing: -.035em; }
body.ch-contact .contact-form > p:not(.note-ecrire) { font-size: 15px; line-height: 1.7; }
body.ch-contact .contact-chemins { display: grid; gap: 14px; }
body.ch-contact .contact-chemins li { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--ch-filet); font-size: 14px; line-height: 1.6; scroll-margin-top: 30px; }
body.ch-contact .contact-chemins strong { font-weight: 400; color: var(--ch-encre); }
body.ch-contact .contact-chemins span { color: var(--ch-gris); }
body.ch-contact .contact-form .button { justify-self: stretch; width: 100%; min-height: 46px; border-radius: 30px; }
body.ch-contact .contact-form .note-ecrire { margin-top: -8px; font-size: 13px; line-height: 1.6; }
body.ch-contact .contact-form .note-ecrire a { text-decoration: underline; text-underline-offset: 2px; }
body.ch-contact .contact-notes { display: grid; align-content: start; gap: 20px; }
body.ch-contact .founders-card { overflow: hidden; padding: 27px; border-radius: 20px; background: #fff; }
body.ch-contact .founders-card > .founders-quote { margin: 0 0 27px; font: 550 20px/1.45 var(--ch-switzer); letter-spacing: -.025em; color: var(--ch-encre); }
body.ch-contact .founders-portraits { display: flex; align-items: center; gap: 8px; }
body.ch-contact .founder-person { display: block; flex: 0 0 auto; border-radius: 50%; }
body.ch-contact .founder-portrait {
  position: relative; display: block; overflow: hidden; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(120deg, #91adf2, #c7bcdb 60%, #eee0c5);
}
body.ch-contact .founder-portrait > img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s var(--ch-courbe); }
body.ch-contact .founder-person:hover img { transform: scale(1.045); }
body.ch-contact .contact-note {
  position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: 28px; border-radius: 24px; color: var(--ch-encre);
  background: linear-gradient(150deg, #fff 38%, #fcf6ed 77%, #f4e8d8);
}
/* la tache gravée de Maël (voie de Ripetta) est écartée (P-55) ; sans elle, l'encadré est le plus proche de son rendu
   (mesuré : écart moyen 0,9 sur 255 ; une tache unie ne fait que l'éloigner) */
body.ch-contact .contact-note h2 { margin: 20px 0 14px; font-size: 27px; line-height: 1.2; letter-spacing: -.035em; }
body.ch-contact .contact-note > p { font-size: 14px; line-height: 1.7; }
body.ch-contact .contact-note-signature { display: flex; align-items: center; gap: 13px; margin-top: 28px; font-size: 12px; color: #787a7e; }
body.ch-contact .contact-note-signature .ecto-fixe { width: 35px; height: 43px; object-fit: contain; }
body.ch-contact .contact-note-signature span { display: block; margin-top: 4px; font-size: 12px; color: var(--ch-gris); }

/* ------------------------------------------------------------------ questions */
body.ch-contact .contact-faq { padding-top: 75px; padding-bottom: 30px; }
body.ch-contact .contact-faq > div > p { margin-top: 20px; font-size: 15px; line-height: 1.6; }

/* ------------------------------------------------------------------ paliers de Maël */
@media (min-width: 601px) {
  body.ch-contact .contact-simple { align-items: stretch; }
  body.ch-contact .contact-simple .contact-notes { align-content: stretch; grid-template-rows: auto 1fr; }
  body.ch-contact .contact-simple .contact-notes > .contact-note { display: flex; flex-direction: column; }
  body.ch-contact .contact-simple .contact-note-signature { margin-top: auto; padding-top: 28px; }
}
@media (max-width: 1000px) {
  body.ch-contact .contact-form { padding: 26px; }
  body.ch-contact .contact-section { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
  body.ch-contact .contact-note { padding: 24px; }
}
@media (max-width: 809px) {
  body.ch-contact .volet { padding-top: 90px; }
  body.ch-contact .page-hero { padding-top: 140px; }
  body.ch-contact .page-hero h1 { font-size: 52px; }
  body.ch-contact .contact-booking { padding-top: 0; }
  body.ch-contact .contact-section { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; }
  body.ch-contact .contact-form { padding: 24px; }
  body.ch-contact .contact-note { padding: 22px; }
  body.ch-contact .contact-note > p { font-size: 13px; }
  body.ch-contact .contact-note-signature { gap: 9px; }
  body.ch-contact .contact-note-signature span { font-size: 11px; }
  body.ch-contact .contact-note-signature .ecto-fixe { width: 35px; height: 35px; }
  body.ch-contact .contact-faq { padding-top: 75px; }
}
@media (max-width: 600px) {
  body.ch-contact .volet { padding-top: 75px; padding-bottom: 0; }
  body.ch-contact main::before { height: 780px; opacity: .23; }
  body.ch-contact .page-hero { padding: 124px 0 32px; }
  body.ch-contact .page-hero h1 { max-width: 350px; font-size: 42px; line-height: 1.1; }
  body.ch-contact .page-hero p { font-size: 15px; }
  body.ch-contact .page-title-row { gap: 14px; margin-bottom: 21px; }
  body.ch-contact .heading-ecto { width: 48px; height: 48px; }
  body.ch-contact .contact-booking { padding-top: 0; }
  body.ch-contact .contact-section { grid-template-columns: 1fr; gap: 20px; }
  body.ch-contact .contact-form { gap: 22px; padding: 24px; border-radius: 18px; }
  body.ch-contact .contact-form .button { font-size: 14px; }
  body.ch-contact .contact-notes { gap: 16px; }
  body.ch-contact .founders-card { padding: 25px; }
  body.ch-contact .founders-card > .founders-quote { font-size: 22px; }
  body.ch-contact .founder-portrait { flex-basis: 44px; width: 44px; height: 44px; }
  body.ch-contact .contact-note { padding: 25px; border-radius: 18px; }
  body.ch-contact .contact-note > p { font-size: 14px; }
  body.ch-contact .contact-note-signature span { font-size: 12px; }
  body.ch-contact .contact-note-signature .ecto-fixe { width: 35px; height: 43px; }
  body.ch-contact .contact-faq { padding-top: 58px; padding-bottom: 10px; }
  body.ch-contact .contact-faq > div > p { margin-top: 15px; font-size: 14px; }
}
@media (max-width: 360px) {
  body.ch-contact .heading-ecto { width: 39px; height: 39px; }
  body.ch-contact .page-title-row { gap: 10px; }
}

/* ------------------------------------------------------------------ « mouvement réduit » */
@media (prefers-reduced-motion: reduce) {
  body.ch-contact .heading-ecto, body.ch-contact .founder-portrait > img { transition: none; }
  body.ch-contact .page-title-row:hover .heading-ecto, body.ch-contact .founder-person:hover img { transform: none; }
}