/**
 * section — ligne de mise en page à 1, 2 ou 3 colonnes, utilisée en
 * Layout Paragraphs à la racine de la page.
 *
 * La grille est portée par le module, plus par aucun framework. Les colonnes
 * ne portent pas de classe de largeur : c'est le modificateur du parent
 * (`section--cols-N`, `section--ratio-1-2`, `section--ratio-2-1`) qui décide,
 * ce qui garde `section.twig` sans table de correspondance.
 *
 * Les proportions passent par `flex-grow` et une base, pas par un pourcentage
 * figé : une colonne qui n'a plus la place de tenir sa base passe à la ligne
 * d'elle-même, et le partage 1/2 se retrouve intact dès qu'elle la retrouve.
 * Une largeur en pourcentage aurait tenu ses deux tiers jusqu'au dernier
 * pixel, quitte à réduire la colonne voisine à une syllabe par ligne.
 *
 * Deux points de rupture, comme le reste des composants : à 1120px une ligne
 * de trois colonnes passe à deux, à 900px tout s'empile dans l'ordre du flux.
 * Ils sont écrits en dur — une media query ne peut pas lire une variable CSS.
 */

.section--cols-2,
.section--cols-3 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ffc-gouttiere, 1.5rem);
}

.section--cols-2 > .section__col,
.section--cols-3 > .section__col {
  flex: 1 1 18.75rem; /* 300 */
  min-width: 0;
}

/* Deux colonnes déséquilibrées : un tiers / deux tiers, dans un sens ou dans
   l'autre. */
.section--ratio-1-2 > .section__col--1,
.section--ratio-2-1 > .section__col--2 {
  flex: 1 1 15rem; /* 240 */
}

.section--ratio-1-2 > .section__col--2,
.section--ratio-2-1 > .section__col--1 {
  flex: 2 1 30rem; /* 480 */
}

@media (max-width: 1119px) {
  .section--cols-3 > .section__col {
    flex: 1 1 calc(50% - var(--ffc-gouttiere, 1.5rem) / 2);
  }
}

@media (max-width: 899px) {
  .section--cols-2,
  .section--cols-3 {
    display: block;
  }

  .section--cols-2 > .section__col + .section__col,
  .section--cols-3 > .section__col + .section__col {
    margin-block-start: var(--ffc-espace-section, 3rem);
  }
}

.section img:not(.spamspan-image) {
  width: 100%;
  height: auto;
}