/* =========================================================================
   MOMA — Conteneurs et mises en page
   Mobile-first : tout est en colonne unique par defaut. Les compositions
   editoriales a deux colonnes sont declarees dans responsive.css.
   ========================================================================= */

.section {
  padding-block: var(--section-y);
  position: relative;
}

/* Section resserree, pour les blocs courts (traiteur, avis). */
.section--tight {
  padding-block: calc(var(--section-y) * 0.72);
}

/* --- En-tete de section -------------------------------------------------- */
.section-head {
  max-width: 46rem;
  margin-bottom: var(--sp-6);
}

/* --- Grille editoriale texte + image ------------------------------------
   L'ordre du DOM (donc l'ordre de lecture et l'empilement mobile) varie
   selon la section : Epicerie place le texte avant les photos (D-22).
   A partir de 48em, .duo--reverse force le media en premiere colonne via
   `order: -1`, independamment de sa position dans le DOM.
   ------------------------------------------------------------------------ */
.duo {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.duo__media {
  position: relative;
}

.duo__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* --- Paire d'images --------------------------------------------------------
   Mobile : deux images sur une ligne. A partir de 34em, la grille explicite
   stabilise leurs colonnes (responsive.css). */
.media-pair {
  display: flex;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Rangee horizontale qui passe a la ligne ---------------------------- */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* --- Filet de separation ------------------------------------------------- */
.rule {
  height: 1px;
  background-color: var(--line-dark);
  border: 0;
  margin: 0;
}

.is-dark .rule {
  background-color: var(--line-light);
}