/* R10 — Contact. Chargée automatiquement par functions.php section 8 sur le
   gabarit résolu "page-contact". Deux cartes de coordonnées côte à côte, puis
   trois routes selon l'intention. Rien d'autre que de la mise en page : les
   couleurs, la typographie et les boutons viennent de la feuille partagée. */

.contact-hero h1{ margin-block:var(--space-4) var(--space-5); }
.contact-hero__lede{ max-width:52ch; font-size:var(--text-lg); }

.contact__wrap{ display:grid; gap:var(--space-8); }
.contact__wrap > *{ min-width:0; }
@media (min-width:800px){ .contact__wrap{ grid-template-columns:1fr 1fr; gap:var(--space-10); } }

.contact__card{ padding:var(--space-8); border:var(--border-firm); }
.contact__card h2{ margin-block:var(--space-3) var(--space-5); }
.contact__card p{ max-width:44ch; }
.contact__big{ font-family:var(--font-display); font-size:var(--text-2xl);
               line-height:1.15; margin-bottom:var(--space-4); min-width:0; overflow-wrap:anywhere; }
.contact__big a{ text-decoration:none; border-bottom:2px solid var(--color-bordeaux); }
.contact__big a:hover{ color:var(--color-bordeaux); }

.contact-routes h2{ margin-block:var(--space-4) var(--space-8); }
.contact-routes__grid{ display:grid; gap:var(--space-8); }
@media (min-width:900px){ .contact-routes__grid{ grid-template-columns:repeat(3,1fr); gap:var(--space-6); } }

.contact-route h3{ font-size:var(--text-lg); margin-bottom:var(--space-3);
                   padding-bottom:var(--space-3); border-bottom:var(--border-hair); }
.contact-route p{ max-width:40ch; }
.contact-route p + p{ margin-top:var(--space-5); }

/*── C4.3 - debordement horizontal mobile (contact__big, --text-2xl) ───────*/
@media (max-width:640px){
  .contact__big{ font-size:var(--text-lg); }
}