/* ==========================================================================
   LES RETOURNÉES — Blocs de page administrables
   Complète theme.css. Chaque type de bloc de BlockType a son gabarit dans
   templates/components/blocks/ ; ce fichier ne porte que leur habillage.

   Contrainte de conception : le contenu de ces blocs est saisi par un
   rédacteur, sa longueur est donc imprévisible. Aucune hauteur figée, aucun
   nombre de lignes supposé — tout est en flux et respire par des marges.
   ========================================================================== */

.rt-block { position: relative; }

/* ------- Fonds ------- */
.rt-block--white { background: var(--rt-white); }
.rt-block--cream { background: var(--rt-cream); }
.rt-block--plain { background: transparent; }
.rt-block--green {
  background: linear-gradient(180deg, var(--rt-green-top), var(--rt-green-bottom));
  color: var(--rt-white);
}
.rt-block--coral { background: var(--rt-orange); color: var(--rt-white); }
.rt-block--mint  { background: var(--rt-mint); color: var(--rt-green); }

/* Sur fond sombre, titres et texte suivent la couleur du bloc. */
.rt-block--green .rt-block__title,
.rt-block--coral .rt-block__title { color: var(--rt-white); }
.rt-block--green .rt-block__eyebrow,
.rt-block--coral .rt-block__eyebrow { color: var(--rt-mint); }
.rt-block--mint .rt-block__eyebrow { color: var(--rt-green); }

/* ------- Typographie commune ------- */
.rt-block__eyebrow {
  margin: 0 0 14px;
  font-family: var(--rt-font-body); font-weight: 700;
  font-size: var(--rt-fs-eyebrow); letter-spacing: .14em; text-transform: uppercase;
  color: var(--rt-orange);
}
.rt-block__title {
  margin: 0;
  font-family: var(--rt-font-title); font-weight: 700;
  font-size: var(--rt-fs-h2); line-height: 1.12; letter-spacing: -.01em;
  color: var(--rt-green);
}
.rt-block__body {
  margin-top: 22px;
  font-size: var(--rt-fs-body); line-height: 1.65;
}
.rt-block__body > :last-child { margin-bottom: 0; }
.rt-block__cta { margin-top: 30px; }

/* ------- Texte simple ------- */
.rt-block__narrow { max-width: 760px; }

/* ------- Texte + image ------- */
.rt-block__split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.rt-block__split--reverse .rt-block__col { order: 2; }
/* Le gabarit prévoit le cas « pas d'image » : sans ce repli, la deuxième
   colonne resterait vide et le texte n'occuperait que la moitié de l'écran. */
.rt-block__split:not(:has(.rt-block__media)) { grid-template-columns: minmax(0, 780px); }
.rt-block__media img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rt-radius);
  aspect-ratio: 3 / 2; object-fit: cover;
}

/* ------- Encadré ------- */
.rt-block__highlight {
  padding: clamp(28px, 4vw, 56px);
  border-radius: 24px;
  max-width: 900px; margin-inline: auto;
  text-align: center;
}
.rt-block__highlight-title {
  margin: 0;
  font-family: var(--rt-font-title); font-weight: 700;
  font-size: var(--rt-fs-h3); line-height: 1.18;
}

/* ------- Citation ------- */
.rt-block__quote { max-width: 860px; margin-inline: auto; text-align: center; }
.rt-block__quote blockquote {
  margin: 0;
  font-family: var(--rt-font-title); font-weight: 500;
  font-size: var(--rt-fs-h3); line-height: 1.3;
  color: var(--rt-green);
}
/* Guillemets français, posés en pseudo-éléments pour ne pas polluer la saisie. */
.rt-block__quote blockquote::before { content: "« "; }
.rt-block__quote blockquote::after { content: " »"; }
.rt-block--green .rt-block__quote blockquote,
.rt-block--coral .rt-block__quote blockquote { color: var(--rt-white); }
.rt-block__quote figcaption {
  margin-top: 22px;
  font-weight: 700; font-size: var(--rt-fs-body);
  color: var(--rt-orange);
}

/* ------- Appel à action ------- */
/* Réutilise .rt-cta de theme.css ; sans image de fond le dégradé de marque
   prend le relais pour que le bloc reste lisible. */
.rt-block--cta:not(:has(.rt-cta__bg)) {
  background: linear-gradient(180deg, var(--rt-green-top), var(--rt-green-bottom));
}

@media (max-width: 767.98px) {
  .rt-block__split { grid-template-columns: 1fr; }
  /* En une colonne l'image passe toujours au-dessus : l'ordre inversé n'a
     plus de sens et ferait descendre le visuel sous un long paragraphe. */
  .rt-block__split--reverse .rt-block__col { order: 0; }
  .rt-block__split .rt-block__media { order: -1; }
}