/* Styles propres à la page "Qui sommes-nous" (/a-propos) */

.section-histoire {
  padding-block: 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.section-histoire-texte { max-width: 32rem; }
.section-histoire h2 { margin-bottom: 1rem; }
.section-histoire p:not(.eyebrow) { color: rgba(0, 43, 69, 0.85); }

/* Deux photos qui se chevauchent en diagonale, façon collage (voir l'exemple fourni pour "Qui
   sommes-nous") : la seconde image, plus basse et plus à droite, vient recouvrir légèrement la
   première. */
.collage-photos {
  position: relative;
  width: 28rem;
  max-width: 100%;
  height: 32rem;
  margin-inline: auto;
}
.collage-photo {
  position: absolute;
  width: 17rem;
  height: 22rem;
  object-fit: cover;
  border-radius: var(--radius-carte);
  border: 6px solid var(--blanc);
  box-shadow: var(--ombre-douce);
}
.collage-photo-1 { top: 0; left: 0; z-index: 1; }
.collage-photo-2 { top: 10rem; left: 11rem; z-index: 2; }

@media (max-width: 768px) {
  .section-histoire { grid-template-columns: 1fr; gap: 2rem; }
  .section-histoire-texte { max-width: none; }
  .collage-photos { order: -1; width: 20rem; height: 23rem; }
  .collage-photo { width: 12.5rem; height: 16rem; }
  .collage-photo-2 { top: 7rem; left: 7.5rem; }
}

.bloc-mission { background: var(--bleu-ciel); padding-block: 3.5rem; }
.bloc-mission .container { max-width: 46rem; }
.bloc-mission h2 { margin-bottom: 1rem; }
.bloc-mission p:not(.eyebrow) { color: rgba(0, 43, 69, 0.85); }

.section-cta-apropos { padding-block: 4rem; text-align: center; }
.section-cta-apropos h2 { margin-bottom: 0.75rem; }
.section-cta-apropos p { max-width: 40ch; margin-inline: auto; color: rgba(0, 43, 69, 0.75); }
.cta-apropos-actions {
  margin-top: 1.75rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}