/* Rythme commun des sections : très grands titres en tête, beaucoup d'espace, alternance blanc et brume.
   Boutons et liens partagés par toutes les pages. */

.section {
  padding-block: var(--espace-section, 120px);
}

.section--brume {
  background: var(--brume, #f2f4f7);
}

.section .titre-section {
  max-width: 18ch;
}

.chapeau {
  max-width: var(--texte-max, 40rem);
  margin-top: 28px;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--graphite-2, #4a5261);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 36px;
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--roi, #1652d8);
  font-weight: 650;
  text-decoration: none;
}

.lien-fleche::after {
  content: "→";
  transition: transform 0.2s var(--ease-sortie, ease);
}

.lien-fleche:hover {
  text-decoration: underline;
}

.lien-fleche:hover::after {
  transform: translateX(4px);
}

.legende {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--graphite-2, #4a5261);
}

.source {
  max-width: 46rem;
  margin-top: 48px;
  font-size: 0.9rem;
  color: var(--graphite-2, #4a5261);
}

/* Photos réelles : jamais agrandies au-delà de leur taille, recadrées en 4:5 */
.photo img,
picture.photo img {
  width: 100%;
  height: auto;
}

/* Boutons sur fond bleu roi */
.bouton--blanc {
  background: var(--blanc, #fff);
  color: var(--roi-fonce, #0f3fae);
}

.bouton--blanc:hover {
  background: var(--roi-pale, #e9effd);
}

.bouton--trait-blanc {
  border-color: var(--blanc, #fff);
  color: var(--blanc, #fff);
  background: transparent;
}

.bouton--trait-blanc:hover {
  background: var(--blanc, #fff);
  color: var(--roi-fonce, #0f3fae);
}

.bouton--blanc:focus-visible,
.bouton--trait-blanc:focus-visible {
  outline-color: var(--blanc, #fff);
}