/* ============================================================
   Radio MLK — pages d'émission (lot 4, 16/10/2026)
   Traduction fidèle des 11 pages Bricks relevées le 16/10/2026 (CSS post-<id>, règles de base de Bricks pour
   section / container / div / block / code, CSS additionnel de WordPress qui forçait .brxe-container à 100 %
   sans marge à gauche). Un seul gabarit ; variantes : .mlk-pe-moitie (MLK36), .mlk-pe-fond-<couleur>.
   Toutes les règles sont limitées aux sections de la page : la navigation sans rechargement (mlk-nav.js)
   garde cette feuille chargée quand on quitte la page.
   Points de bascule de Bricks : 767 px (mobile paysage) et 478 px (mobile portrait).
   Référence : claude code/references/site-public-2026-10-16/.
   ============================================================ */

/* ── Fond de page (réglage « fond du site » de la page dans Bricks : MLK36, On the bay) ── */
html:has(.mlk-pe-fond-212121) { background-color: #212121; }
html:has(.mlk-pe-fond-000000) { background-color: #000; } /* On the bay : #050505 dans Bricks, aligné sur le noir des autres pages (Emmanuel, 16/10/2026) */
body:has(.mlk-pe-fond-212121), body:has(.mlk-pe-fond-000000) { background: none; }

/* ── Base commune (ce que Bricks donnait à tout le site, limité à la page) ── */
.mlk-pe-s, .mlk-pe-s2 {
  font-family: -apple-system, "system-ui", "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px; line-height: 1.7; color: #363636;
}
:where(.mlk-pe-s, .mlk-pe-s2) *, :where(.mlk-pe-s, .mlk-pe-s2) *::before, :where(.mlk-pe-s, .mlk-pe-s2) *::after { box-sizing: border-box; }
/* :where() garde la priorité faible de la règle Bricks « img » */
:where(.mlk-pe-s, .mlk-pe-s2) img { border-style: none; height: auto; max-width: 100%; vertical-align: middle; }

/* Sections */
.mlk-pe-s, .mlk-pe-s2 {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;
  margin-left: auto; margin-right: auto; width: 100%; max-width: 100%;
  background-color: #212121;
}
/* Conteneurs (largeur forcée à 100 % sans marge à gauche, comme le CSS additionnel de WordPress) */
.mlk-pe-c, .mlk-pe-c2, .mlk-pe-vide {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;
  margin-left: 0; margin-right: auto; padding-left: 0; width: 100%; max-width: 100%;
}
.mlk-pe-c { flex-direction: row; }
/* Blocs (« block » de Bricks) */
.mlk-pe-img-b, .mlk-pe-txt-b {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; width: 100%; max-width: 100%;
}
.mlk-pe-img, .mlk-pe-txt, .mlk-pe-txt-in, .mlk-pe-part, .mlk-pe-texte { max-width: 100%; }
.mlk-pe-part-c { width: 100%; max-width: 100%; }

/* Colonne du texte */
.mlk-pe-txt { margin-left: 20px; margin-right: 20px; flex-direction: column; }
.mlk-pe-txt-b { flex-direction: row; flex-wrap: nowrap; padding-top: 30px; padding-bottom: 30px; }
.mlk-pe-texte { font-family: "IBM Plex Sans Condensed"; font-size: 20px; color: #e0e0e0; line-height: 1.2; }
.mlk-pe-texte a { font-family: "IBM Plex Sans Condensed"; color: #e0e0e0; line-height: 1.2; font-size: inherit; }

/* ── MLK36 : image et texte à 50 %, conteneur vide masqué ── */
.mlk-pe-moitie .mlk-pe-vide {
  align-self: flex-end !important; justify-content: flex-end; align-items: flex-start;
  margin-top: 10px; margin-bottom: 10px; display: none;
}
.mlk-pe-moitie .mlk-pe-img { width: 50%; }
.mlk-pe-moitie .mlk-pe-txt { width: 50%; }

/* ── Mobile paysage de Bricks : sections, conteneurs et blocs passent à la ligne
      (sauf le bloc du texte, réglé « sans retour à la ligne » dans chaque page) ── */
@media (max-width: 767px) {
  .mlk-pe-s, .mlk-pe-s2, .mlk-pe-c, .mlk-pe-c2, .mlk-pe-vide, .mlk-pe-img-b { flex-wrap: wrap; }
}

/* ── Téléphone (mobile portrait de Bricks) ── */
@media (max-width: 478px) {
  .mlk-pe-txt { padding-top: 11px; padding-bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; }
  .mlk-pe-txt-b { padding-top: 20px; padding-bottom: 20px; }
  .mlk-pe-texte { font-size: 15px; }
  .mlk-pe-moitie .mlk-pe-img { width: 100%; }
  .mlk-pe-moitie .mlk-pe-txt { width: 100%; align-items: normal; }
  .mlk-pe-moitie .mlk-pe-txt-b { flex-direction: column; align-items: flex-start; row-gap: 20px; }
}