/* ============================================================
   Radio MLK — en-tête et pied de page du site (lot 2, 16/10/2026)
   Traduction fidèle des réglages Bricks (modèles d'en-tête et de pied relevés le 16/10/2026,
   CSS post-12864 et post-15618, règles de base de Bricks utiles, CSS additionnel de WordPress).
   Chargé juste après mlk-player.css, à la place des feuilles de Bricks, pour garder le même ordre.
   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/ et entete-pied-reference/.
   ============================================================ */

/* ── Base commune (ce que Bricks donnait à tout le site, limité à l'en-tête et au pied) ── */
#brx-header.mlk-et, #brx-footer.mlk-pied {
  position: relative; width: 100%;
  background-position: 50%; background-size: cover;
  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;
}
.mlk-et *, .mlk-et *::before, .mlk-et *::after,
.mlk-pied *, .mlk-pied *::before, .mlk-pied *::after { box-sizing: border-box; }
.mlk-et img, .mlk-pied img { border-style: none; height: auto; max-width: 100%; vertical-align: middle; }

/* ── En-tête : la barre (section) ── */
#brx-header .mlk-et-s {
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; /* Bricks : jamais à la ligne */
  justify-content: flex-end; column-gap: 50px;
  margin-left: auto; margin-right: auto; width: 100%; max-width: 100%;
  padding-top: 5px; padding-bottom: 5px;
  position: static; background-color: #212121;
}
/* Bloc du logo */
#brx-header .mlk-et-logo-bloc {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;
  width: 75%; max-width: 100%; position: static;
}
#brx-header .mlk-et-logo {
  display: inline-block; position: relative; height: fit-content; width: auto; max-width: 80px;
  top: 0; margin: 5px 22px 5px 22px; background-color: #212121;
}
#brx-header .mlk-et-logo img { border-radius: inherit; height: 100%; width: 100%; position: static !important; }
/* Bloc « Le direct » (masqué sur l'accueil et dans l'appli par mlk-player.css et mlk-app.css) */
#brx-header .mlk-et-direct-bloc {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;
  align-self: center !important; width: 80%; max-width: 100%; margin-top: 0; margin-left: 0;
}
#brx-header .mlk-et-direct { width: 100%; max-width: 100%; }
/* Bouton compte (position absolue, à droite) */
#brx-header .mlk-et-compte { position: absolute; display: flex; flex-wrap: nowrap; right: 50px; max-width: 100%; }
#brx-header .mlk-et-compte-in {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; /* à la ligne sous 768 px seulement (Bricks) */
  width: 100%; max-width: 30px; transform: scaleX(160%) scaleY(160%);
}
/* Ancien shortcode Bricks : le CSS additionnel de WordPress le forçait à 100 % */
#brx-header .mlk-et-compte-sc { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; margin-left: 0 !important; }
.mlk-login-btn { --mlk-lb-fs: 25px; --mlk-lb-fs-m: 18px; }
/* Styles du bouton compte. Le shortcode [mlk_login_btn] ne les imprime qu'une fois par page, et Bricks fabrique
   encore son propre en-tête juste avant que l'extension le remplace : sa copie les consommait (vu en ligne le
   16/10/2026, bouton en 15 px gris). On les garde donc ici, toujours chargés avec le nouvel en-tête. */
.mlk-login-btn { font-size: var(--mlk-lb-fs, 22px); line-height: 1; display: inline-flex; align-items: center; text-decoration: none; transition: color .15s; }
.mlk-login-btn i { font-style: normal; -webkit-font-smoothing: antialiased; }
.mlk-login-btn--out { color: #f6f6f6; }
.mlk-login-btn--out:hover { color: #D20658; }
.mlk-login-btn--in { color: #D20658; }
.mlk-login-btn--in:hover { color: #f6f6f6; }

/* Réglages du bloc « Le direct » écrits dans l'élément Code de Bricks */
.mlk-header-live-wrap .mlk-live-btn--round { --btn-size: 44px; }
.mlk-header-live-text {
  --txt-color: #D20658; --txt-size: 15px; --txt-weight: 700; --txt-style: normal;
  letter-spacing: 0.12em; text-transform: uppercase;
}

@media (max-width: 767px) {
  /* Bricks : blocs, sections et conteneurs passent à la ligne sous 768 px (vu au lot 6, le 16/10/2026) */
  #brx-header .mlk-et-compte-in { flex-wrap: wrap; }
  #brx-header .mlk-et-s { justify-content: flex-start; height: 80px; }
  #brx-header .mlk-et-logo-bloc { width: 50%; }
  #brx-header .mlk-et-logo { position: static; }
  #brx-header .mlk-et-direct-bloc { width: 40%; }
  .mlk-login-btn { font-size: var(--mlk-lb-fs-m, 18px); }
  .mlk-header-live-wrap .mlk-live-btn--round { --btn-size-m: 36px; }
  .mlk-header-live-text { display: inline; --txt-size: 11px; letter-spacing: 0.08em; }
}
@media (max-width: 478px) {
  /* Bricks : hauteur de 64 px de l'en-tête seulement sur téléphone (la règle de 72 px au-delà de 900 px,
     imbriquée par erreur dans cette même règle, ne s'appliquait jamais) */
  #brx-header.mlk-et { height: 64px; }
  #brx-header .mlk-et-s { height: 55px; }
  #brx-header .mlk-et-logo-bloc { flex-direction: column; flex-wrap: nowrap; width: 50%; }
  #brx-header .mlk-et-logo { position: relative; margin-top: 0; margin-bottom: 0; margin-left: 10px; padding-top: 2px; width: 50px; }
  #brx-header .mlk-et-direct-bloc { flex-wrap: wrap; width: 70%; }
  #brx-header .mlk-et-direct { margin-bottom: 2px; }
  #brx-header .mlk-et-compte { flex-direction: row; align-self: center !important; right: 40px; }
  #brx-header .mlk-et-compte-in { margin-top: 5px; margin-left: 0; flex-wrap: nowrap; }
}

/* ── Pied de page ── */
#brx-footer.mlk-pied { flex-shrink: 0; margin-top: auto; }
#brx-footer .mlk-pied-s {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;
  margin-left: auto; margin-right: auto; width: 100%; max-width: 100%;
}
/* Conteneur : 1100 px chez Bricks, mais le CSS additionnel de WordPress le forçait à 100 % */
#brx-footer .mlk-pied-c {
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;
  margin-right: auto; width: 100% !important; max-width: 100% !important; padding-left: 0 !important; margin-left: 0 !important;
  background-color: #212121;
}
#brx-footer .mlk-pied-t { color: #D20658; max-width: 100%; }
#brx-footer .mlk-pied-t a { color: #D20658; font-size: inherit; }
/* Typographie de base de Bricks, limitée au pied */
#brx-footer .mlk-pied-t :where(p) { margin-block: 0 1.2em; }
#brx-footer .mlk-pied-t :where(p:last-of-type) { margin-block-end: 0; }
#brx-footer .mlk-pied-t h6 { font-size: 1.1em; margin: 0; text-rendering: optimizelegibility; }
#brx-footer .mlk-pied-t :where(p:last-of-type) + h6 { margin-block: 1.2em 0; }
/* Bricks : section et conteneur du pied passent à la ligne sous 768 px (après les règles du pied, pour gagner) */
@media (max-width: 767px) {
  #brx-footer .mlk-pied-s, #brx-footer .mlk-pied-c { flex-wrap: wrap; }
}