@charset "UTF-8";

/*
 * Mise en page de la position `bottom-b` de l'accueil : Actualités
 * (module 121), Ressources (module 110) et Rejoindre le réseau (module 122).
 *
 * Extrait d'actualites.css et de ressources-accueil.css (2026-09-11) : les
 * trois modules partagent une seule et même grille de conteneur, ce n'est pas
 * une affaire de style de carte — aucun des trois ne devait dépendre du CSS
 * d'un autre juste pour ça. Chargé par les trois gabarits concernés
 * (voir templates/html/mod_articles/actualites.php,
 * templates/html/mod_docman_documents/default.html.php, et le repli sur
 * l'Itemid de l'accueil dans templates/index.php pour le module Rejoindre).
 *
 * Cassiopeia dispose les modules d'une position en **ligne** de flex, avec
 * `flex: 1` sur chacun : les trois modules de bottom-b se retrouveraient
 * côte à côte sur un tiers de largeur chacun. On bascule en grille pour les
 * répartir soi-même — une seule colonne par défaut (tout empilé, pleine
 * largeur), et deux colonnes à partir de 62rem pour Actualités/Ressources,
 * Rejoindre restant seul sur sa ligne.
 */
.site-grid > .container-bottom-b {
  grid-column: full-start / full-end;
  max-width: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.site-grid > .container-bottom-b > * {
  min-inline-size: 0;
}

/* À partir de 62rem (seuil Cassiopeia), Actualités et Ressources passent de
   deux lignes empilées à deux colonnes côte à côte ; Rejoindre reste seul sur
   sa ligne, pleine largeur (comportement d'origine, inchangé).

   Les marges de page sont posées en **pistes de grille explicites** sur le
   conteneur (`var(--rem-marge-page)` de chaque côté), pas en `padding-inline`
   sur .sema-actus/.sema-ressources comme dans une première version : ce
   conteneur est en plein débord (`grid-column: full-start / full-end`), donc
   `100%` dans `--rem-marge-page` — `max(gouttière, (100% - 1320px)/2)` —
   se serait résolu contre la piste fractionnaire de CHAQUE section (2fr ou
   1fr de la largeur de l'écran) et non contre la page entière. Sur grand
   écran, ça ramenait la marge extérieure de Ressources à la seule gouttière
   minimale (1,25rem) au lieu des ~300px attendus : la colonne débordait
   jusqu'au bord de l'écran au lieu de rester dans les 1320px de la page. En
   fixant les deux pistes de bord à `var(--rem-marge-page)` sur le CONTENEUR
   (qui, lui, fait bien 100% de l'écran), Actualités et Ressources restent
   exactement dans la même colonne que le reste du site. */
@media (width >= 62rem) {
  .site-grid > .container-bottom-b {
    grid-template-columns:
      var(--rem-marge-page)
      minmax(0, 2fr)
      clamp(1.5rem, 3vw, 2.5rem)
      minmax(0, 1fr)
      var(--rem-marge-page);
  }

  .site-grid > .container-bottom-b > .sema-actus {
    grid-column: 2;
    padding-inline: 0;
  }

  .site-grid > .container-bottom-b > .sema-ressources {
    grid-column: 4;
    padding-inline: 0;
  }

  .site-grid > .container-bottom-b > .sema-rejoindre {
    grid-column: 1 / -1;
  }
}