/**
 * @file
 * Conteneur central et grilles de zones.
 *
 * Les régions Drupal sont neutralisées en `display:contents` dans les zones
 * en grille : les blocs qu'elles contiennent deviennent alors les éléments
 * de grille directs, ce qui évite un niveau de <div> parasite.
 */

.wrap {
  max-width: var(--ccd-wrap);
  margin: 0 auto;
  padding: 0 var(--ccd-gutter);
}

/*
 * Masquage visuel conservant l'accès aux lecteurs d'écran.
 *
 * .visually-hidden et .focusable sont posées par le cœur sur le lien
 * d'évitement et sur les intitulés de navigation — mais stable9 ne fournit
 * pas leur feuille. Sans ces règles, « Aller au contenu principal » et
 * « Fil d'Ariane » s'affichaient en clair en haut des pages.
 */
.ccd-sr,
.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le lien d'évitement redevient visible à la prise de focus clavier. */
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus-within,
.visually-hidden.focusable:focus {
  position: static !important;
  overflow: visible;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  white-space: inherit;
}

.skip-link:focus {
  display: inline-block;
  padding: 10px 16px;
  background: var(--ccd-black);
  color: #fff;
}

/* Région transparente : ses blocs deviennent éléments de grille. */
.region--contents {
  display: contents;
}

/* --- Bandes de section --- */
.band {
  padding: 48px 0;
}

.band--white {
  background: var(--ccd-white);
}

.band--dark {
  background: var(--ccd-black);
  color: var(--ccd-grey-100);
}

/* --- Grille 6 : à la une (zone 6) --- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--ccd-gap);
}

/* --- Grille 8 : rubrique vedette (zone 8) --- */
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ccd-gap);
}

/* --- Grille 9 : mosaïque sombre (zone 9) --- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 230px 230px;
  gap: 14px;
}

/*
 * Zones 10 et 12 : remplissage en COLONNE.
 *
 * Chaque rubrique y occupe une colonne faite de deux blocs — l'article
 * vedette, puis la liste de brèves. En flux de grille normal, c'est-à-dire
 * par ligne, les quatre blocs de la zone 10 se répartiraient vedette /
 * vedette sur la première ligne et brèves / brèves sur la seconde, ce qui
 * séparerait chaque rubrique de sa propre liste. `grid-auto-flow: column`
 * remplit colonne par colonne et rétablit l'appariement.
 *
 * L'ordre des blocs dans la région détermine donc la mise en page. Il est
 * fixé par les poids des entités block.block livrées dans config/optional.
 */

/* --- Grille 10 : rubriques jumelles (zone 10) --- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  column-gap: 44px;
  row-gap: 0;
}

/* --- Grille 11 : magazine (zone 11) --- */
.magazine {
  display: grid;
  /* auto-fit plutôt qu'un gabarit figé à trois colonnes : la zone reste
     juste qu'on y place deux blocs ou quatre. */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--ccd-gap);
}

/* --- Grille 12 : rubriques basses (zone 12) --- */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  column-gap: var(--ccd-gap);
  row-gap: 0;
}

/* --- Pages intérieures : contenu + barre latérale --- */
/*
 * padding-block seul, et non le raccourci `padding`.
 *
 * .wrap et .page-content sont portées par le MÊME élément dans
 * page.html.twig. Un `padding: 40px 0` écrasait les 20 px latéraux de
 * .wrap : le contenu des pages intérieures touchait les bords de l'écran.
 */
.page-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ccd-gap);
  padding-block: 40px;
}

.page-content--sidebar {
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}