/* ══════════════════════════════════════════════════════════════════════════
   CONTACT

   Mise en page reprise de la référence donnée (programa.design/contact-us) :
   un grand titre centré, une photo qui porte la page avec un panneau
   translucide dessus, une barre horizontale de motifs juste en dessous, puis
   une liste à séparateurs pointillés — jamais une grille de cartes.

   La page est volontairement COURTE. Le surtitre, la phrase d'accroche sur la
   photo et la section « une personne vous répond » ont sauté : sur une page
   de contact, tout ce qui retarde l'adresse est du bruit.

   LA PHOTO. Ciel blanc en haut, gris froids en bas : l'encre sombre s'y pose
   sans voile, là où du blanc aurait demandé un rideau noir. Elle vient de
   Pexels (photo 29703040, tours de Rotterdam), licence Pexels : usage
   commercial libre, sans attribution obligatoire. Servie en deux tailles,
   900 px (134 Ko) et 1800 px (466 Ko) — le navigateur choisit.
   ══════════════════════════════════════════════════════════════════════════ */

.ct-tete { text-align: center; margin: 0 0 clamp(26px, 3.4vw, 40px); }
/* Le titre de cette page est court : il peut monter plus haut que le gabarit
   commun sans casser la ligne. */
.ct-h1 {
  font-size: clamp(42px, 7vw, 86px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; margin: 0; color: var(--pg-ink);
}

/* ── La scène ─────────────────────────────────────────────────────────────
   Le bandeau sort du conteneur de 1 120 px : il a son propre gabarit, bien
   plus large, avec de petites marges de chaque côté. Il est sorti de `.pg-in`
   dans le HTML plutôt que rattrapé par des `100vw` — une largeur de fenêtre
   compte la barre de défilement sur certains navigateurs, et c'est comme ça
   qu'on fabrique un débordement horizontal sans le voir venir. */
.ct-large { padding: 0 24px; }
.ct-scene {
  max-width: 1560px; margin-left: auto; margin-right: auto;
  position: relative; margin: 0; border-radius: 28px; overflow: hidden;
  box-shadow: var(--pg-porte);
}
/* Plein 16:9. Le plafond à 620 px ramenait le rapport à 1,86 dès 1 200 px de
   large : il monte à 880, soit la hauteur exacte du 16:9 à 1 560 px. Le
   bandeau est grand, c'est voulu. */
.ct-scene-img {
  display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 880px;
  object-fit: cover; object-position: center 46%;
}
/* La carte flottante. Elle est CENTRÉE dans l'image, pas collée en haut :
   posée sur le ciel blanc, le voile ne se voyait pas et la carte n'existait
   plus. Au milieu, elle se détache sur les façades et le flou se voit — c'est
   tout l'intérêt du procédé. Le voile à 58 % garantit les contrastes quel que
   soit ce qui passe dessous. */
.ct-scene-texte {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.8vw, 34px);
  border-radius: 24px; text-align: center;
  background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 18px 44px -18px rgba(20, 28, 40, .45);
}
/* Le libellé est passé SOUS les touches : il signe la carte au lieu de la
   coiffer, et l'œil tombe d'abord sur l'adresse. */
.ct-scene-label {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #16181F; opacity: .66;
}
.ct-scene-actes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ct-sb1, .ct-sb2 {
  display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 13px;
  font-size: 15px; font-weight: 700; letter-spacing: -.012em; text-decoration: none;
  white-space: nowrap;
  transition: transform .24s var(--pg-ease), background .22s var(--pg-ease);
}
/* Encre pleine et blanc : 17,7:1. Sur une photo, on ne joue pas avec 4,6. */
.ct-sb1 { background: #16181F; color: #FFFFFF; }
.ct-sb1:hover { background: #2A2D36; transform: translateY(-2px); }
.ct-sb2 { background: rgba(255, 255, 255, .92); color: #16181F;
  box-shadow: inset 0 0 0 1.5px rgba(22, 24, 31, .18); }
.ct-sb2:hover { background: #FFFFFF; transform: translateY(-2px); }

/* ── La barre des motifs ──────────────────────────────────────────────────
   Une rangée horizontale sous la photo, en dehors d'elle : quatre entrées
   courtes, pas quatre paragraphes. Chaque lien ouvre un courriel dont l'objet
   est déjà rempli — c'est ça, « plus efficace » : une intention, un clic. */
.ct-barre {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin: 18px 0 0;
}
.ct-barre a {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 14px 16px; border-radius: 14px;
  background: var(--pg-carte); box-shadow: var(--pg-porte);
  font-size: 13.5px; font-weight: 700; letter-spacing: -.014em; line-height: 1.3;
  color: var(--pg-ink); text-decoration: none;
  transition: transform .24s var(--pg-ease), box-shadow .24s var(--pg-ease), color .22s var(--pg-ease);
}
.ct-barre a:hover { transform: translateY(-2px); box-shadow: var(--pg-porte-h); color: var(--pg-bleu-i); }
.ct-barre a:focus-visible { outline: 2px solid var(--pg-bleu-i); outline-offset: 3px; }
.ct-barre svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--pg-bleu-s); }


@media (max-width: 1000px) {
  .ct-large { padding: 0 24px; }
  .ct-barre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  /* En portrait, la photo 3:2 se recadre durement : on l'allonge pour que les
     touches tiennent dans le ciel ET qu'on voie encore les tours dessous. */
  /* Même en portrait, le bandeau reste plus large que haut. Pour ça il faut
     que la carte soit basse : les deux touches passent donc côte à côte, en
     corps réduit, au lieu de s'empiler. */
  /* Le 16:9 tient aussi en portrait, avec un plancher pour que la carte
     garde de l'air : 382 px de large donnent 215, on ne descend pas sous 224. */
  .ct-scene-img { min-height: 224px; object-position: center 50%; }
  .ct-scene-texte { padding: 14px 14px 16px; gap: 10px; width: min(94%, 340px); }
  .ct-scene-label { font-size: 10.5px; letter-spacing: .12em; }
  .ct-scene-actes { flex-wrap: nowrap; gap: 8px; }
  .ct-sb1, .ct-sb2 { padding: 10px 13px; font-size: 12.5px; border-radius: 11px; }
  .ct-barre { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ct-sb1, .ct-sb2, .ct-barre a { transition: none; }
  .ct-sb1:hover, .ct-sb2:hover, .ct-barre a:hover { transform: none; }
}