/* Collage de la page contact : photo centrale et deux encarts en superposition.
   Proportions relevées sur la maquette de référence (contenu 1290px). */

.collage { position: relative; }

.collage__media { width: 100%; aspect-ratio: 630 / 579; overflow: hidden; }
.collage__media img { width: 100%; height: 100%; object-fit: cover; }

.collage__box { padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem) clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem); }

.collage__box--light { background: var(--gl-bg-tint); }

.collage__box--plum { background: var(--gl-plum); color: #fff; }
.collage__box--plum .collage__title { color: #fff; }
.collage__box--plum .collage__text { color: rgba(255, 255, 255, 0.85); }

.collage__title { margin-bottom: 0.6em; font-size: var(--gl-fs-h3); line-height: 1.09; }
.collage__text { margin-bottom: 1.4em; }
.collage__text:last-child { margin-bottom: 0; }

@media (min-width: 62em) {
  .collage { height: 39.0625rem; }               /* 625px */

  .collage__media {
    position: absolute;
    top: 0;
    left: 25.581%;                                /* 330 / 1290 */
    width: 48.837%;                               /* 630 / 1290 */
  }

  .collage__box {
    position: absolute;
    width: 31.318%;                               /* 404 / 1290 */
  }

  .collage__box--light { top: 15.375rem; left: 0; }        /* 246px */
  .collage__box--plum  { top: 4.25rem; left: 68.605%; }    /* 68px / 885px */
}

@media (max-width: 61.99em) {
  .collage { display: grid; gap: var(--gl-gap); }
  .collage__media { order: -1; }
}

/* Titre de page en sans-serif clair (contact), en serif ailleurs. */
.page-hero { padding-block: 0 2.3125rem; }

.page-hero--serif { padding-block: clamp(2rem, 1rem + 3vw, 3.75rem) clamp(1.5rem, 0.9rem + 2.4vw, 2.75rem); }
.page-hero--serif .page-hero__title {
  max-width: 40rem;
  margin-inline: auto;
  font-family: var(--gl-font-head);
  font-size: var(--gl-fs-h2);
  line-height: 1.02;
}

.page-hero__title {
  font-family: var(--gl-font-body);
  font-size: clamp(2rem, 1rem + 3.3vw, 3.563rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--gl-text-dark);
}