/**
 * Mobile Money® — shared site header (theme toggle + language dropdown + mobile hamburger).
 *
 * Replicates the homepage nav so every page (legal, admin, etc.) shows the SAME dark/light
 * toggle and language switch. Self-contained: all colours come from --hdr-* tokens defined
 * here and switched on [data-theme], so it never clashes with a page's own stylesheet
 * (legal.css, admin css…). Wiring lives in /js/site-header.js.
 */
:root {
  --hdr-bg:      rgba(13, 13, 20, 0.85);
  --hdr-surface: #16161f;
  --hdr-border:  rgba(255, 255, 255, 0.10);
  --hdr-ink:     #f0f0f0;
  --hdr-ink2:    #b8b8c8;
  --hdr-bg3:     rgba(255, 255, 255, 0.06);
  --hdr-bg2:     rgba(255, 255, 255, 0.12);
  --hdr-shadow:  rgba(0, 0, 0, 0.5);
  --hdr-page:    #0d0d14;
}
html[data-theme="light"] {
  --hdr-bg:      rgba(255, 255, 255, 0.90);
  --hdr-surface: #ffffff;
  --hdr-border:  rgba(17, 17, 34, 0.10);
  --hdr-ink:     #15151f;
  --hdr-ink2:    #5b5b73;
  --hdr-bg3:     rgba(17, 17, 34, 0.05);
  --hdr-bg2:     rgba(17, 17, 34, 0.09);
  --hdr-shadow:  rgba(17, 17, 34, 0.16);
  --hdr-page:    #f6f7fb;
}

.nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--hdr-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hdr-border);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; max-width: 1120px; margin: 0 auto; padding: 13px 24px;
}
.nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.nav .brand img { width: 32px; height: 32px; }
.nav .brand-name {
  font-size: 16px; font-weight: 800; letter-spacing: .01em;
  font-family: 'Gotu', 'Inter', sans-serif;
  background: linear-gradient(90deg, #8432FF, #5E6FFF, #00D5FF);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nav .brand-name sup { font-size: 9px; }

/* ☠️ CHARTS-DESIGN P1 (18/09/2026, ordre du fondateur : « chaque site a son identite […] on peut mettre le by Mobile Money
   quelque part mais ce sont des services a part ») — LA MARQUE DU SITE COURANT, dans SA couleur.
   Le SQUELETTE ne bouge pas : c'est la meme barre, le meme bouton de theme, le meme menu de langues sur les quatre sites ;
   seuls le logo, le nom et le degrade changent, et la mention « par Mobile Money® » se pose a cote du nom des SERVICES.
   ☠️ Contraste calcule ici, jamais recopie (WCAG 1.4.3, texte < 18,66 px gras ⇒ 4,5:1 exiges) :
     Culture  sombre #F3C766 -> #C98A1E sur #0d0d14 = 12,2:1 et 5,8:1  |  clair #A06A0C -> #6E4508 sur #fff = 4,6:1 et 8,4:1
     News     sombre #FF8A80 -> #F0705E sur #0d0d14 =  7,7:1 et 5,8:1  |  clair #C62828 -> #8E1A1A sur #fff = 5,5:1 et 9,6:1
     Kongossas sombre #A78BFA -> #FDE68A sur #0d0d14 = 6,3:1 et 15,6:1 |  clair #6D28D9 -> #B45309 sur #fff = 7,1:1 et 5,0:1
   ☠️ Aucun violet SEUL : Kongossas porte le violet DANS un degrade (violet -> or), comme son blason. */
/* ☠️ R4 DE L'AUDIT (19/09/2026) — LA BARRE DU HAUT NE PEUT PLUS SE CHEVAUCHER. MESURE de l'auditeur sur Culture
   (`by.right - a1.left`, le debordement de la mention par-dessus la premiere entree du menu) : 660 px = +167 ;
   768 px (iPad portrait) = +62 ; 780 px = +62 ; 820 px = +22 ; 860 px = -15 (sain). VU : « par Mob[Accueil]ey® » et
   « par Mobile Money® » imprime par-dessus « Classements » — texte illisible.
   CAUSE : `.brand-bloc` etait un element flex qui se RETRECIT (`min-width: 0`) alors que `.brand-by` est en
   `white-space: nowrap` et sans clipping : le texte sortait de sa boite et peignait par-dessus `#nav-links`, dont
   Culture porte CINQ entrees depuis P2. News (2 entrees) et Kongossas (1) etaient sains par chance, pas par regle.
   DEUX GARDES, l'une structurelle, l'autre de place :
     (1) `overflow: hidden` sur le bloc de marque : quel que soit le NOMBRE d'entrees qu'un site portera demain,
         rien du bloc de marque ne peut PLUS etre peint hors de sa boite — la cause est fermee, pas le symptome ;
     (2) entre 641 px (ou le menu redevient une barre) et 900 px, la mention cede la place au menu. Elle reste
         dans le pied, et le nom du site ne bouge pas. Sous 641 px le menu est un panneau : la mention revient.
   La marque elle-meme ne se retrecit JAMAIS (`flex: 0 0 auto`) : seul le badge cede.
   Garde : functions/test/enteteBarreSansChevauchement.test.ts. */
.nav .brand-bloc { display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; }
.nav .brand-by {
  flex: 0 1 auto; min-width: 0;
  font-size: 10px; font-weight: 600; letter-spacing: .01em; line-height: 1.5;
  color: var(--hdr-ink2); text-decoration: none; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--hdr-border); background: var(--hdr-bg3);
}
/* ☠️ SIGNUP-SITES S6 (19/09/2026, ordre du fondateur : « sur le header de news.mobilemoney.co il faut aussi ajouter le tag
   "par Mobile Money®" a cote du logo comme sur Culture ») — MESURE AVANT (le manager, prod, 390 px) : la mention etait CACHEE
   (`display: none`) sous 420 px et entre 641 et 900 px, donc invisible sur tout telephone, sur News comme sur Culture.
   ☠️ PLUS JAMAIS `display: none` : a 900 px et moins, la mention DESCEND SOUS LE NOM du service, en petit (la marque garde
   sa ligne, la mention prend la seconde, au debut de la ligne dans le sens de la page, arabe compris). Le bloc
   empile ne s'elargit que de la mention elle-meme ; mesure de la boite a 320, 360, 390, 420, 700, 900, 1 280 px (clair et
   sombre, fr et ar). MESURE : alignee sur le NOM (decalage de 42 px), elle etait rognee et touchait le bouton de theme a
   320 px, et la premiere entree du menu de Culture a 700 px — elle s'aligne donc sous le LOGO, sans decalage. Garde : functions/test/enteteBarreSansChevauchement.test.ts ②. */
@media (max-width: 900px) {
  .nav .brand-bloc { display: grid; grid-template-columns: max-content; row-gap: 0; align-items: start; }
  .nav .brand-by {
    justify-self: start; margin-top: 1px; margin-inline-start: 0;
    font-size: 9px; line-height: 1.3; padding: 0 6px;
  }
  .nav .brand-by sup { font-size: 6px; }
}
/* Bande 641-900 px, ou le menu est une BARRE : MESURE a 700 px sur Culture (cinq entrees, fr) — le bloc de marque etait
   reduit a 70 px, le nom du service lui-meme rogne. L'ecart entre les entrees passe de 20 a 10 px : le bloc retrouve sa
   largeur, la mention tient sous le logo sans toucher « Accueil ». */
@media (min-width: 641px) and (max-width: 900px) { header.nav[data-mm-entete="commun"] .nav-inner .nav-links { gap: 10px; } }
.nav .brand-by:hover, .nav .brand-by:focus-visible { color: var(--hdr-ink); background: var(--hdr-bg2); }
.nav .brand-by sup { font-size: 7px; }

header.nav[data-mm-site="culture"] .brand-name { background-image: linear-gradient(90deg, #F3C766, #C98A1E); }
header.nav[data-mm-site="news"] .brand-name { background-image: linear-gradient(90deg, #FF8A80, #F0705E); }
header.nav[data-mm-site="kongossas"] .brand-name { background-image: linear-gradient(90deg, #A78BFA, #FDE68A); }
html[data-theme="light"] header.nav[data-mm-site="culture"] .brand-name { background-image: linear-gradient(90deg, #A06A0C, #6E4508); }
html[data-theme="light"] header.nav[data-mm-site="news"] .brand-name { background-image: linear-gradient(90deg, #C62828, #8E1A1A); }
html[data-theme="light"] header.nav[data-mm-site="kongossas"] .brand-name { background-image: linear-gradient(90deg, #6D28D9, #B45309); }

.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a:not(.btn) { color: var(--hdr-ink2); text-decoration: none; font-size: .9rem; font-weight: 600; }
.nav-links a:not(.btn):hover { color: var(--hdr-ink); }

.nav-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Theme toggle (sun in dark mode → switch to light; moon in light → switch to dark) */
.theme-btn {
  width: 38px; height: 38px; border-radius: 100px;
  background: var(--hdr-bg3); border: 1px solid var(--hdr-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--hdr-ink2);
  transition: background .2s, color .2s, border-color .2s; flex-shrink: 0; padding: 0;
}
.theme-btn:hover { background: var(--hdr-bg2); color: var(--hdr-ink); }
.theme-btn .icon-sun  { display: none; }
.theme-btn .icon-moon { display: block; }
html[data-theme="light"] .theme-btn .icon-sun  { display: block; }
html[data-theme="light"] .theme-btn .icon-moon { display: none; }

/* Language dropdown */
.lang-drop { position: relative; }
.lang-drop-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 100px;
  background: var(--hdr-bg3); border: 1px solid var(--hdr-border);
  font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--hdr-ink); cursor: pointer;
  transition: background .2s, border-color .2s;
}
.lang-drop-btn:hover { background: var(--hdr-bg2); }
/* LANGUE-SANS-GLOBE (23/09/2026) : le bouton n'a plus de globe ; son seul SVG est le chevron (`.lang-caret`, ci-dessous).
   Le drapeau ne doit jamais retrecir dans le bouton flex. */
.lang-drop-btn .lang-flag { flex-shrink: 0; }
.lang-caret { color: var(--hdr-ink2); flex-shrink: 0; transition: transform .2s; }
.lang-drop[open] .lang-caret { transform: rotate(180deg); }
.lang-drop-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--hdr-surface); border: 1px solid var(--hdr-border);
  border-radius: var(--r-card, 16px); padding: 6px; min-width: 150px;
  box-shadow: 0 8px 32px var(--hdr-shadow); z-index: 300;
}
.lang-drop-menu[hidden] { display: none; }
.lang-opt {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 12px; border: none;
  background: none; border-radius: var(--r-md, 12px);
  font: inherit; font-size: .85rem; font-weight: 500;
  color: var(--hdr-ink); cursor: pointer; transition: background .15s;
}
.lang-opt:hover { background: var(--hdr-bg3); }
.lang-opt.active {
  background: linear-gradient(135deg, rgba(132,50,255,.12), rgba(0,213,255,.12));
  color: #8432FF;
}
.lang-opt span { font-size: 1.1rem; }

/* Mobile hamburger */
.nav-menu {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.nav-menu span { display: block; width: 22px; height: 2px; background: var(--hdr-ink); border-radius: 2px; transition: all .25s; }

@media (max-width: 640px) {
  .nav-inner { padding: 12px 16px; }
  .nav-controls { gap: 6px; }
  /* LANGUE-SANS-GLOBE (23/09/2026) : sous 640px on masque le LIBELLE de la langue, JAMAIS le drapeau — il etait
     masque avec lui, et le globe restait alors seul visible. Sans JavaScript, le libelle court (« FR ») demeure. */
  .lang-drop-btn #lang-drop-label > span { display: none; }
  /* The hamburger toggles the page's nav links (collapsed dropdown panel on mobile). */
  .nav-menu { display: flex; }
  .nav-links {
    position: absolute; top: 100%; right: 12px; left: 12px;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--hdr-surface); border: 1px solid var(--hdr-border);
    border-radius: var(--r-card, 16px); padding: 10px; margin-top: 6px;
    box-shadow: 0 14px 34px var(--hdr-shadow); display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { padding: 10px 12px; border-radius: var(--r-md, 12px); }
  .nav-links a:not(.btn):hover { background: var(--hdr-bg3); }
}

/* ENTETE-COMMUNE (14/09/2026) - le PIED commun des quatre sites (balisage : functions/src/lib/siteChrome.ts).
   Autonome : ses couleurs viennent des jetons hdr ci-dessus, jamais de la feuille propre d'une page. */
.nav .brand-name, .mm-pied-brand span { white-space: nowrap; }
.mm-pied {
  margin-top: 48px;
  background: var(--hdr-surface);
  border-top: 1px solid var(--hdr-border);
  color: var(--hdr-ink2);
  font-size: .88rem;
  line-height: 1.5;
}
.mm-pied-inner {
  /* ☠️ CHARTS-DESIGN P2 (18/09/2026) : les SERVICES (www, Culture, News, Kongossas) vivent ICI, jamais dans la barre du haut.
     ☠️ ORDRE DU FONDATEUR (20/09/2026) : « le footer n'aura plus que 4 colonnes (Mobile Money, Our services, Legal et
     help) … chaque element ne doit plus utiliser 2 lignes ». La colonne des langues est retirée (le choix de langue vit
     dans l'en-tête, sur chaque page). L'espace rendu va à la colonne des SERVICES, dont chaque entrée est « Nom - descriptif » :
     c'est la plus large, et elle doit tenir sur UNE ligne par service. */
  display: grid;
  grid-template-columns: 1fr minmax(0, 2.1fr) minmax(0, 1.1fr) minmax(0, .8fr);
  gap: 24px;
  max-width: 1120px; margin: 0 auto; padding: 36px 24px 20px;
}
.mm-pied-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mm-pied-brand span {
  font-size: 15px; font-weight: 800; font-family: 'Gotu', 'Inter', sans-serif;
  background: linear-gradient(90deg, #8432FF, #5E6FFF, #00D5FF);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.mm-pied-brand sup, .mm-pied-tm sup { font-size: .6em; }
.mm-pied-tm { margin: 12px 0 0; color: var(--hdr-ink2); }
.mm-pied-tm a { color: inherit; text-decoration: none; }
.mm-pied-tm a:hover, .mm-pied-tm a:focus-visible { color: var(--hdr-ink); text-decoration: underline; }
.mm-pied-titre {
  margin: 0 0 10px; color: var(--hdr-ink); font-weight: 700; font-size: .8rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.mm-pied-col ul { list-style: none; margin: 0; padding: 0; }
.mm-pied-col li { margin: 0 0 6px; }
.mm-pied-col a { color: var(--hdr-ink2); text-decoration: none; }
.mm-pied-col a:hover, .mm-pied-col a[aria-current="true"] { color: var(--hdr-ink); text-decoration: underline; }
/* ☠️ UN SERVICE = UNE LIGNE (fondateur, 20/09/2026). Le nom et son descriptif ne se séparent jamais ; si la place manque
   vraiment (très petit écran), c'est le DESCRIPTIF qui s'efface par une ellipse, jamais le nom du service. */
.mm-pied-col li { max-width: 100%; }
.mm-pied-service {
  display: flex; align-items: baseline; gap: 4px;
  white-space: nowrap; min-width: 0; max-width: 100%;
}
.mm-pied-service > bdi, .mm-pied-service > span[dir="ltr"] { flex: 0 0 auto; }
.mm-pied-desc { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mm-pied-bas {
  max-width: 1120px; margin: 0 auto; padding: 14px 24px 24px;
  border-top: 1px solid var(--hdr-border);
}
.mm-pied-copy { margin: 0; font-size: .8rem; }
@media (max-width: 800px) {
  .mm-pied-inner { grid-template-columns: 1fr 1fr; }
  .mm-pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .mm-pied-inner { grid-template-columns: 1fr; padding: 28px 16px 16px; }
  .mm-pied-bas { padding: 12px 16px 20px; }
}

/* ENTETE-COMMUNE (14/09/2026) - l'en-tete commun garde les MEMES mesures quelle que soit la feuille de la page
   (site.css, legal.css, feuille en ligne d'une page ou d'une fonction) : selecteurs portes par data-mm-entete,
   plus specifiques que ceux des feuilles de page. */
header.nav[data-mm-entete="commun"], footer.mm-pied[data-mm-pied="commun"] {
  width: 100%; align-self: stretch; box-sizing: border-box; text-align: start;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.5;
}
/* Mesuré au navigateur (ENTETE-COMMUNE 4) : sans remise à zéro globale de la page (404 de Kongossas), la boîte
   de contenu élargissait la barre de 48 px. Les boîtes de l'en-tête et du pied comptent désormais leur remplissage. */
header.nav[data-mm-entete="commun"] *, footer.mm-pied[data-mm-pied="commun"] * { box-sizing: border-box; }
header.nav[data-mm-entete="commun"] {
  position: sticky; top: 0; z-index: 200; margin: 0;
  background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
header.nav[data-mm-entete="commun"] .nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; max-width: 1120px; margin: 0 auto; padding: 13px 24px; position: relative;
}
header.nav[data-mm-entete="commun"] .brand img { width: 32px; height: 32px; }
header.nav[data-mm-entete="commun"] .nav-links { display: flex; align-items: center; gap: 20px; }
header.nav[data-mm-entete="commun"] .nav-links a {
  color: var(--hdr-ink2); text-decoration: none; font-size: .9rem; font-weight: 600;
}
header.nav[data-mm-entete="commun"] .nav-links a:hover { color: var(--hdr-ink); }
header.nav[data-mm-entete="commun"] .nav-controls { display: flex; align-items: center; gap: 8px; }

/* ☠️📰 MENU-NEWS TOUR 2 (21/09/2026) — LES ONZE ENTRÉES DE NEWS SE VOIENT SANS AUCUN GESTE : ELLES ONT LEUR PROPRE RANGÉE.
   ☠️ CE QUI A ÉTÉ MESURÉ, ET QUI CONDAMNE LE TOUR 1 (Chromium, la 404 statique de news servie en local, `scrollLeft` = 0,
   c'est-à-dire l'état d'un visiteur qui ARRIVE) : la rangée partageait la ligne du bloc de marque et des commandes, donc
   une boîte de 653 px à 1280 px — et de 653 px ENCORE à 2560 px, `.nav-inner` étant plafonné à 1120. Il en fallait 908 en
   français et 963 en espagnol : QUATRE entrées restaient hors de la boîte à TOUTE largeur, dont « Classements », que
   l'ordre du fondateur NOMME. Et le défilement annoncé pour aller les chercher n'existait pas à la souris — molette
   verticale ET horizontale mesurées au centre de la barre : `scrollLeft` restait 0, c'est la PAGE qui défilait.
   ☠️ LA CAUSE N'ÉTAIT PAS « 1120 px », C'ÉTAIT LE PARTAGE DE LA LIGNE. Onze entrées ne tiennent pas dans ce qui reste
   d'une ligne une fois la marque (207 px) et les commandes (188 px) servies ; elles tiennent très largement dès que la
   ligne est À ELLES. C'est le bandeau des sites de presse, et c'est ce que pose ce bloc : `.nav-inner` passe à la ligne,
   la rangée prend 100 % de la largeur (`order: 3`), l'écart tombe à 12 px et le corps à .8rem.
   MESURÉ APRÈS (espagnol, la pire des six langues ; boîte = place offerte, rangée = place demandée, 404 de news) :
   ☠️ Les largeurs ci-dessous sont des `documentElement.clientWidth`, jamais des largeurs de FENÊTRE : le tour 2
   mélangeait les deux (« 768 → 705 », « 900 → 837 » : ce sont les boîtes de 753 et 885 px de client, fenêtre moins un
   ascenseur de 15 px). Toutes remesurées au tour 3, au client, après `await document.fonts.ready` :
      641 → boîte 593 / rangée 575 puis 211, DEUX lignes · 700 → 652 / 575 puis 211, DEUX lignes
      768 → 720 / 655 puis 131, deux lignes · 846 → 798 / 750 puis 37, deux lignes · 900 → 852 / 798, UNE ligne
     1024 → 976 / 798 · 1152 → 1072 / 798 · 1280 → 1072 / 798 · 1440 → 1072 / 798 · 1920 → 1072 / 798, UNE ligne.
   Entrées hors de la boîte : ZÉRO à chacune de ces largeurs, et dans chacune des six langues.
   ☠️ CORRECTION DU TOUR 3 — CE COMMENTAIRE DISAIT « TROIS LIGNES », ET C'EST FAUX. Le rendu du tour 2 démentait déjà
   son propre commentaire (« DEUX lignes au plus, jamais trois ») ; la feuille SERVIE, elle, gardait le chiffre d'hier.
   REMESURÉ (Chromium, `news-public/404.html` servie en local, APRÈS `await document.fonts.ready`, comptage des
   `offsetTop` DISTINCTS des onze entrées) : à 641 px — la plus étroite largeur où ce bloc s'applique, donc celle qui
   replie le plus — la rangée tient en DEUX lignes en fr/en/es/pt et en UNE en ar/zh. JAMAIS trois, dans aucune des six
   langues, à aucune largeur de 641 à 1920 px. Seuils de repli MESURÉS (dernière largeur à deux lignes → première à
   une) : fr 797 → 798 · en 691 → 692 · es 846 → 847 · pt 829 → 830 · ar et zh sur UNE ligne dès 641.
   ☠️ PLUS RIEN NE DÉFILE : ni la barre, ni le document (`scrollWidth` = `clientWidth` partout). Il n'y a donc plus
   d'affordance à promettre — le commentaire d'hier promettait une molette qui ne fonctionnait pas ; il est PARTI avec la
   règle qu'il décrivait. Sous ces seuils la rangée se REPLIE (DEUX lignes au plus) : tout reste visible, rien ne sort.
   ☠️ NEWS SEUL POUR LA RANGÉE PROPRE : `order: 3`, `flex: 0 0 100%`, l'écart de 12 px et le corps .8rem portent tous
   `[data-mm-site="news"]`. www (2 entrées), Culture (5) et Kongossas (1) gardent leur barre sur la ligne de la marque
   et ne gagnent pas une rangée à eux ; la feuille reste la MÊME sur les quatre sites (garde T-BARRE-HAUT ④), c'est le
   SÉLECTEUR qui la rend inerte ailleurs — remesuré : Culture 352 = 352, www 127 = 127 (fr, écart 20 px, ≥ 900 px).
   ☠️ DEUX RÈGLES SONT COMMUNES DANS CE BLOC, ET DEUX SEULEMENT, parce qu'elles protègent les QUATRE sites :
   `.brand-bloc { flex-shrink: 0 }` (la marque ne cède jamais) et `.nav-links { min-width: 0; flex-wrap: wrap }` (rien
   ne pousse `.nav-inner` hors de l'écran) — voir le renvoi 1 du tour 3, ci-dessous.
   ☠️ 640 px et moins, ce bloc ne s'applique PAS : la barre y est le PANNEAU MOBILE de MENU-MOBILE (une colonne bornée à
   l'écran, onze entrées de 46 px à 390 px) — voir le bloc @media ci-dessous. Garde : menuNewsOnzeEntrees.test.ts ⑥.
   ☠️ La spécificité est délibérée (`[data-mm-entete][data-mm-site] .nav-inner .nav-links`) : elle passe DEVANT la règle
   641-900 de T-BARRE-HAUT ② (`gap: 10px`), qui reste en vigueur pour les trois autres sites. */
@media (min-width: 641px) {
  /* ☠️ MESURE DU 20/09 (News, fr, 700 px, SANS cette ligne) : `.nav-links` étant devenue rétrécissable, les trois enfants
     de `.nav-inner` se partageaient la place et le bloc de marque tombait à 89 px pour un nom qui en demande 165 —
     « Mobile Money® News » rogné, le défaut que T-BARRE-HAUT a mesuré sur Culture le 19/09. La marque ne cède JAMAIS.
     (Remesuré après ce tour, de 641 à 1920 px : boîte de marque 207 px, nom 165 = 165, aucun rognage.) */
  header.nav[data-mm-entete="commun"] .brand-bloc { flex-shrink: 0; }
  /* ☠️☠️ RENVOI 1 DU TOUR 3 — LA BORNE EST COMMUNE AUX QUATRE SITES, ELLE N'APPARTIENT PAS À NEWS.
     Le tour 2 a RETIRÉ de la règle commune `min-width: 0` (avec le confinement qui allait avec) pour la redonner au
     seul `[data-mm-site="news"]` : les trois autres sites ont perdu la borne SANS RIEN RECEVOIR en échange, alors que
     la ligne ci-dessus venait d'interdire à la marque de céder et que `.nav-controls` ne cède pas non plus
     (`flex-shrink: 0`). Il ne restait plus personne pour absorber le trop-plein — sauf l'écran.
     ☠️ MESURE DU DÉFAUT (Chromium, `culture-public/404.html?lang=fr`, tête `c5d2a5f3a`, APRÈS `document.fonts.ready`,
     client 641 px) : `.nav-links` en `min-width: auto` réclamait ses 311,9 px, `.nav-inner` en demandait 628,5 pour
     593 offerts ; `documentElement.scrollWidth` 653 ≠ `clientWidth` 641, et le bouton de thème et le sélecteur de
     langue de Culture finissaient à 652,53 — 11,53 px HORS d'un écran de 641.
     ☠️ CORRECTION DU TOUR 3 SUR SA PROPRE NOTE : le premier jet écrivait « `scrollX` restait 0 après
     `window.scrollTo(500, 0)`, l'utilisateur ne pouvait pas atteindre ces 12 px ». REMESURÉ : `scrollX` vaut 12
     (8 à 645 px, 1 à 652), et il les vaut AUSSI quand on sert en plus `site.css`, dont le `body { overflow-x:
     hidden }` ne se propage pas à la fenêtre ici. La faute n'en est pas moindre, elle est AUTRE : au repos
     (`scrollX` 0, l'état d'un visiteur qui ARRIVE) le bouton de thème et le sélecteur de langue sont rognés de
     11,53 px au bord droit, et le bureau gagne un défilement LATÉRAL — celui-là même que ce lot venait de fermer
     sur News. Une note recopiée n'est pas une mesure.
     Bande mesurée : 641 → 652 px (dépassement 12 · 8 · 1 · 0 à 641 · 645 · 652 · 653), en FRANÇAIS seulement.
     ☠️ ELLE SE REPLIE, ELLE NE DÉFILE PAS. `min-width: 0` rend la rangée rétrécissable et `flex-wrap: wrap` lui fait
     passer à la ligne ce qui ne tient plus : aucune entrée n'est cachée, aucun ascenseur n'est masqué, aucun geste
     n'est promis — c'est la réponse même que le tour 2 a donnée à News, rendue aux quatre sites. Les trois autres ne
     gagnent PAS une rangée à eux (ni `order: 3`, ni `flex: 0 0 100%`) : leur barre reste sur la ligne de la marque.
     REMESURÉ APRÈS (Culture fr, client 641 px) : boîte 276,4 · les CINQ entrées visibles sur DEUX lignes ·
     commandes à 617 ≤ 641 · `scrollWidth` 641 = `clientWidth` · zéro entrée hors boîte, zéro hors écran.
     ☠️ CE QUE LE REPLI COÛTE, MESURÉ — et non « 65 → 80,2 » comme l'écrivait le premier jet (65 px, c'est la
     hauteur de l'en-tête de www, jamais celle de Culture dans cette bande) : l'en-tête de Culture passe de 75,69 à
     80,22 px, +4,53 px, et SEULEMENT là où la rangée se replie. Bande de repli MESURÉE par dichotomie : fr de 641
     à 676 px (une ligne dès 677), es de 641 à 655 (une ligne dès 656) ; en, pt, ar et zh restent sur UNE ligne dès
     641. Au-delà de ces seuils l'en-tête vaut 75,69 px jusqu'à 900, puis 65 px à 901 et au-delà (le bloc de marque
     cesse d'y être empilé). Ces trois hauteurs sont un ÉTAT DATÉ du 21/09/2026, jamais une constante.
     ☠️ Aucune marge de Culture ne se règle sur cette hauteur : la seule marge qui suive un en-tête est celle de
     News (`news-public/css/news.css`, garde `newsAncreSousEnteteNews.test.ts`), et News ne bouge pas ici.
     Garde : functions/test/menuBarreDansLEcran.test.ts (les QUATRE sites, à la largeur où ça mord). */
  header.nav[data-mm-entete="commun"] .nav-links { min-width: 0; flex-wrap: wrap; }
  header.nav[data-mm-entete="commun"][data-mm-site="news"] .nav-inner { flex-wrap: wrap; row-gap: 6px; }
  /* ☠️ R9 (ordre du fondateur, 21/09/2026, verbatim) : « sur news, il faut centrer les elements du menu au lieu de
     les aligner a gauche ». LA CAUSE, MESUREE : la rangee de News quitte la ligne de la marque (`order: 3` +
     `flex: 0 0 100%`), elle devient donc SON PROPRE conteneur flex — et le `justify-content: space-between` de
     `.nav-inner` (qui gouverne SES enfants, pas ceux de la rangee) ne l'atteint plus. Sans declaration propre, la
     valeur initiale `flex-start` collait les onze entrees au bord de DEPART. C'est la seule ligne qui manquait ;
     www et Culture, eux, restent centres par le `space-between` de la ligne qu'ils partagent avec la marque.
     MESURE AU NAVIGATEUR (22/09, fr, 1366 px) : avant 0 px / apres 322,22 px de chaque cote — apres : 161,11 / 161,11.
     ☠️ Elle ne change NI la hauteur de l'en-tete NI le point de repli : mesure (es, 700 px) 115,38 px et 8 + 3 entrees
     AVANT COMME APRES. Les trois `scroll-margin-top` de `news-public/css/news.css` (76 / 129 / 104) restent valides. */
  header.nav[data-mm-entete="commun"][data-mm-site="news"] .nav-inner .nav-links {
    order: 3; flex: 0 0 100%; min-width: 0;
    flex-wrap: wrap; gap: 6px 12px; justify-content: center;
  }
  header.nav[data-mm-entete="commun"][data-mm-site="news"] .nav-inner .nav-links a {
    font-size: .8rem; white-space: nowrap;
  }
}
@media (max-width: 640px) {
  header.nav[data-mm-entete="commun"] .nav-inner { padding: 12px 16px; }
  header.nav[data-mm-entete="commun"] .nav-menu { display: flex; }
  /* MENU-MOBILE (14/09/2026, ordre du fondateur : « sur mobile, on ne peut pas scroller les éléments du menu »).
     Mesuré avant : ni hauteur bornée ni overflow — avec neuf entrées et plus, le bas du menu tombait sous l'écran.
     Le panneau est borné à l'écran (100dvh, repli 100vh AVANT pour les navigateurs sans dvh), l'en-tête déduit
     (--mm-entete-h posé par site-header.js à l'ouverture, 63px sinon), défile en son sein, fond OPAQUE (--hdr-surface),
     left = right (RTL sans débordement). Garde : functions/test/menuMobileEnteteCommun.test.ts. */
  header.nav[data-mm-entete="commun"] .nav-links {
    display: none; position: absolute; top: 100%; right: 12px; left: 12px;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--hdr-surface); border: 1px solid var(--hdr-border);
    border-radius: var(--r-card, 16px); padding: 10px; margin-top: 6px;
    box-shadow: 0 14px 34px var(--hdr-shadow);
    box-sizing: border-box;
    max-height: calc(100vh - var(--mm-entete-h, 63px) - 18px);
    max-height: calc(100dvh - var(--mm-entete-h, 63px) - 18px);
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  }
  header.nav[data-mm-entete="commun"] .nav-links.open { display: flex; }
  header.nav[data-mm-entete="commun"] .nav-links a {
    padding: 12px 14px; border-radius: var(--r-md, 12px); min-height: 44px; box-sizing: border-box;
    display: flex; align-items: center; flex-shrink: 0; overflow-wrap: anywhere;
  }
}
/* MENU-MOBILE : menu ouvert, le document ne défile plus derrière (sans sauter en haut : la position est gardée).
   MENU-MOBILE 2 (15/09/2026, renvoi de l'auditeur) - LE VERROU EST PORTÉ PAR html SEUL, body RESTE visible. Mesuré (News fr
   375x667, scrollY 400) : avec « html, body { overflow: hidden } », body cessait de propager son overflow au viewport et devenait
   un CONTENEUR DE DÉFILEMENT (site.css : body { overflow-x: hidden }) ; l'en-tête sticky se collait à lui, à -400 px hors de
   l'écran, et le focus de la première entrée ramenait le document à 0 (le « saut en haut »). Même verrou pour la fenêtre
   d'invitation (html.mm-fenetre-ouverte, posée par site-header.js). Garde : menuMobileEnteteCommun.test.ts (les deux classes). */
html.mm-menu-ouvert, html.mm-fenetre-ouverte { overflow: hidden; }
html.mm-menu-ouvert body, html.mm-fenetre-ouverte body { overflow: visible; }

/* INVITATION-PARTAGÉE (14/09/2026, ordre du fondateur : la fenêtre « Invitation only » depuis tous nos sites) - la fenêtre
   commune aux quatre sites (balisage : functions/src/lib/siteChrome.ts, fenetreInvitation / formulaireInvitation ; pilote :
   site-header.js). Jetons hdr ; les jetons de PAGE (--bg, --ink, --border, --gp) sont redéfinis sur le panneau pour le champ
   téléphone de www (mm-phone.js, phone-input.css), qui les lit. Garde : functions/test/invitationPartageeSites.test.ts. */
.mm-inv { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.mm-inv[hidden] { display: none; }
.mm-inv-fond { position: absolute; inset: 0; background: rgba(9, 9, 11, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.mm-inv-panneau {
  --bg: var(--hdr-surface); --bg2: var(--hdr-bg2); --bg3: var(--hdr-bg3); --ink: var(--hdr-ink); --ink2: var(--hdr-ink2);
  --ink3: var(--hdr-ink2); --border: var(--hdr-border); --gp: #8432FF; --gm: #5E6FFF; --gc: #00D5FF;
  position: relative; box-sizing: border-box; width: 100%; max-width: 480px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--hdr-surface); color: var(--hdr-ink); border: 1px solid var(--hdr-border); border-radius: var(--r-card, 16px); padding: 40px 28px 28px;
  box-shadow: 0 32px 100px rgba(0, 0, 0, .55);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.5; text-align: start;
}
.mm-inv-panneau * { box-sizing: border-box; }
.mm-inv-fermer {
  position: absolute; top: 14px; inset-inline-end: 14px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--hdr-bg3); border: 1px solid var(--hdr-border); color: var(--hdr-ink2); cursor: pointer;
  font: inherit; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0;
}
.mm-inv-fermer:hover { background: var(--hdr-bg2); color: var(--hdr-ink); }
.mm-inv-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #92400E; background: rgba(217, 119, 6, .1); border: 1px solid rgba(217, 119, 6, .3); border-radius: 100px; padding: 5px 14px; margin-bottom: 14px;
}
.mm-inv-badge::before { content: '●'; font-size: .5em; color: #F59E0B; }
html:not([data-theme="light"]) .mm-inv-badge { color: #FCD34D; background: rgba(253, 211, 77, .1); border-color: rgba(253, 211, 77, .22); }
.mm-inv-appel { margin: 0 0 14px; font-size: .95rem; font-weight: 600; color: var(--hdr-ink2); }
/* ☠️ R12 (ordre du fondateur, 21/09/2026) : « il faut reduire le bloc "Demandez votre invitation" sur toute la
   longueur c'est moche, on peut en faire un petit widget comme la partie "La voix d'abord : un kongossa audio" ».
   LA CAUSE, MESUREE : POSE EN LIGNE, le bloc n'avait AUCUNE borne a lui — il prenait la largeur de son parent, soit
   1052 px sur l'accueil de Kongossas (1120 de `.kg-main` moins 2x16 de son remplissage et 2x18 de `.kg-signup`).
   ☠️ LA BORNE EST POSEE DANS LE COMPOSANT, jamais par une regle propre a Kongossas : c'est le MEME bloc sur les
   quatre sites, et une regle de site l'aurait laisse s'etaler partout ailleurs. 560 px = la largeur de la scene
   « La voix d'abord » (`kongossas-public/css/kongossas.css`, `.kg-voix-maquette`), celle que le fondateur nomme.
   ☠️ INERTE LA OU LE BLOC EST DEJA BORNE : en FENETRE le panneau fait 480 px, dans un article de News la colonne
   de `.nw-continue` est plus etroite — une borne SUPERIEURE ne peut pas elargir ce qui est deja plus petit. */
.mm-inv-bloc { position: relative; max-width: 560px; margin-inline: auto; }
.mm-inv-form { display: flex; flex-direction: column; gap: 10px; }
.mm-inv-form[hidden] { display: none; }
/* MENU-MOBILE reprise 1, R4 (15/09/2026) : le pot de miel est masque par le patron visually-hidden, jamais par un decalage
   hors ecran - en dir="rtl", un decalage de dix mille pixels rend la page defilable d'autant (mesure de NEWS-ARTICLES) ; le
   bloc est aussi pose DANS la page (milieu d'article). Garde : invitationPartageeSites.test.ts, 6 bis. */
.mm-inv-hp { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.mm-inv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mm-inv-input {
  width: 100%; min-height: 48px; padding: 13px 18px; border: 1.5px solid var(--hdr-border); border-radius: 100px;
  font: inherit; font-size: .95rem; background: var(--hdr-page); color: var(--hdr-ink); outline: none; margin: 0;
}
.mm-inv-input:focus { border-color: #8432FF; box-shadow: 0 0 0 3px rgba(132, 50, 255, .18); }
.mm-inv-input::placeholder { color: var(--hdr-ink2); }
/* MENU-MOBILE-4 (16/09/2026, ordre du fondateur) - le champ telephone du composant EST celui de www (input .wl-input monte par
   mm-phone.js) ; les jetons de page (--bg, --ink, --border, --gp, --ink3) que .wl-input et le menu des pays lisent sont poses
   sur le bloc, en ligne comme en fenetre, et rendus aux couleurs de l'en-tete commun. */
.mm-inv-bloc {
  --bg: var(--hdr-surface); --bg2: var(--hdr-bg2); --bg3: var(--hdr-bg3); --ink: var(--hdr-ink); --ink2: var(--hdr-ink2);
  --ink3: var(--hdr-ink2); --border: var(--hdr-border); --gp: #8432FF;
}
/* MENU-MOBILE-4 (16/09/2026) : UNE seule boite - l'input .wl-input de www, que mm-phone.js enveloppe dans .iti
   (drapeau et indicatif DEDANS). Sa pilule vient de /css/phone-input.css, la meme feuille sur les quatre sites. */
.mm-inv-phone { display: block; min-width: 0; }
.mm-inv-et { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hdr-ink2); }
/* NEWSLETTER-INSCRIPTION (25/09/2026) : la case de la newsletter sous les champs - DECOCHEE par defaut, texte sur SA ligne
   (le libelle passe a la ligne a 390 px, jamais tronque), cote de debut en RTL (flex suit dir). */
.mm-inv-nl { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 0; font-size: .84rem; line-height: 1.45; color: var(--hdr-ink2); text-align: start; cursor: pointer; }
.mm-inv-nl input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #8432FF; cursor: pointer; }
.mm-inv-nl span { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.mm-inv-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 26px; border-radius: 100px;
  border: none; cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #8432FF, #5E6FFF, #00D5FF); box-shadow: 0 4px 20px rgba(132, 50, 255, .28);
}
.mm-inv-btn[disabled] { opacity: .6; cursor: default; }
.mm-inv-btn[hidden] { display: none; }
.mm-inv-status { margin: 10px 0 0; font-size: .88rem; min-height: 1.4em; color: var(--hdr-ink2); }
.mm-inv-status.mm-inv-erreur { color: #DC2626; }
.mm-inv-status.mm-inv-ok { color: #16A34A; }
html:not([data-theme="light"]) .mm-inv-status.mm-inv-erreur { color: #F87171; }
html:not([data-theme="light"]) .mm-inv-status.mm-inv-ok { color: #4ADE80; }
.mm-inv-pret { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.mm-inv-pret[hidden] { display: none; }
/* SIGNUP-SITES S3 (19/09/2026) - LE MERCI DE www dans la fenetre commune (`merciInvitation`, `#success-overlay` de l'accueil).
   Couleurs des jetons hdr ; le degrade violet -> cyan de la marque, jamais un violet seul. */
.mm-inv-bloc[hidden], .mm-inv-merci[hidden] { display: none; }
.mm-inv-merci { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mm-inv-merci-arabe { font-size: 2rem; line-height: 1.2; color: var(--hdr-ink2); }
.mm-inv-merci-titre {
  margin: 0; font-size: clamp(1.6rem, 7vw, 2.2rem); font-weight: 800; line-height: 1.1;
  background: linear-gradient(90deg, #8432FF, #00D5FF); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mm-inv-merci-sous-titre { margin: 0; font-weight: 700; color: var(--hdr-ink); }
.mm-inv-merci-anneau {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #00A3C4; border: 2px solid transparent;
  background: linear-gradient(var(--hdr-surface), var(--hdr-surface)) padding-box, linear-gradient(135deg, #8432FF, #00D5FF) border-box;
}
.mm-inv-merci-corps { margin: 0; color: var(--hdr-ink2); overflow-wrap: anywhere; }
.mm-inv-merci-note { margin: 0; font-size: .82rem; color: var(--hdr-ink2); font-style: italic; }
.mm-inv-merci .mm-inv-btn { min-width: 160px; margin-top: 6px; }
.mm-inv-pret-titre { margin: 0; font-weight: 700; color: var(--hdr-ink); }
.mm-inv-code { margin: 0; color: var(--hdr-ink2); }
.mm-inv-code strong { color: var(--hdr-ink); letter-spacing: .12em; font-size: 1.1rem; }
.mm-inv-note { margin: 0; font-size: .82rem; color: var(--hdr-ink2); }
/* Fenêtre ouverte : le document ne défile plus derrière - la MÊME règle que le menu mobile, écrite une fois plus haut
   (html.mm-menu-ouvert, html.mm-fenetre-ouverte : verrou sur html seul, body visible). */
@media (max-width: 640px) {
  .mm-inv { padding: 10px; align-items: flex-end; }
  .mm-inv-panneau { padding: 36px 20px 22px; border-radius: var(--r-card, 16px); }
}
html[dir="rtl"] header.nav[data-mm-entete="commun"] .lang-drop-menu { right: auto; left: 0; }
header.nav[data-mm-entete="commun"] a.lang-opt { text-decoration: none; box-sizing: border-box; }

/* ENTETE-COMMUNE (14/09/2026) - la 404 statique commune des quatre sites (functions/src/lib/siteChrome.ts, page404Statique). */
body.mm-page-404 {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--hdr-page); color: var(--hdr-ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.5;
}
.mm-404 {
  flex: 1; box-sizing: border-box; width: 100%; max-width: 640px; margin: 0 auto; padding: 72px 24px 48px; text-align: center;
}
.mm-404 h1 { margin: 0 0 12px; font-size: 1.8rem; line-height: 1.25; color: var(--hdr-ink); }
.mm-404 p { margin: 0 0 20px; color: var(--hdr-ink2); }
.mm-404-accueil {
  display: inline-block; padding: 12px 22px; border-radius: 100px; font-weight: 700; text-decoration: none; color: #fff;
  background: linear-gradient(90deg, #8432FF, #5E6FFF);
}
.mm-404-accueil sup { font-size: .6em; }
body.mm-page-404 .mm-pied { margin-top: 0; }
/* SITES-LANGUE L3 (20/09/2026, ordre du fondateur : le bandeau de consentement sur tous nos sites, une fois pour tous).
   Le bandeau commun (siteChrome.ts, bandeauConsentement) : bloc a angles vifs colle en bas, NON modal ; clair et sombre par
   les jetons --hdr ; RTL par les proprietes logiques ; sur telephone il est borne (60 pour cent de l ecran, defilant) et le
   document garde sa fin atteignable (padding du corps = hauteur mesuree par le pilote, --mm-consent-h).
   MEME POIDS : Tout refuser et Tout accepter partagent la classe mm-consent-btn-choix et AUCUNE regle ne vise l un sans
   l autre (garde : sitesConsentement.test.ts). Personnaliser est le bouton discret. */
.mm-consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 1200; box-sizing: border-box;
  max-height: 60vh; max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--hdr-surface); color: var(--hdr-ink); border-top: 1px solid var(--hdr-border);
  box-shadow: 0 -8px 30px var(--hdr-shadow); border-radius: 0;
  font-family: inherit; text-align: start;
}
.mm-consent[hidden] { display: none; }
.mm-consent:focus { outline: none; }
.mm-consent:focus-visible { outline: 2px solid #5E6FFF; outline-offset: -2px; }
.mm-consent-inner { box-sizing: border-box; max-width: 1100px; margin: 0 auto; padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px)); }
.mm-consent-titre { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--hdr-ink); }
.mm-consent-texte { margin: 0 0 12px; font-size: .88rem; line-height: 1.5; color: var(--hdr-ink2); }
.mm-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mm-consent-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 10px 22px;
  border-radius: 100px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; text-align: center;
}
.mm-consent-btn-choix { flex: 1 1 160px; border: 1px solid var(--hdr-ink); background: var(--hdr-ink); color: var(--hdr-surface); }
.mm-consent-btn-choix:hover { opacity: .88; }
.mm-consent-btn-discret { flex: 0 1 auto; border: 1px solid var(--hdr-border); background: transparent; color: var(--hdr-ink); font-weight: 600; }
.mm-consent-btn-discret:hover { background: var(--hdr-bg3); }
.mm-consent-btn:focus-visible { outline: 2px solid #5E6FFF; outline-offset: 2px; }
.mm-consent-details { margin: 0 0 12px; }
.mm-consent-details[hidden] { display: none; }
.mm-consent-cats { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--hdr-border); }
.mm-consent-cat { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hdr-border); }
.mm-consent-cat-texte { display: block; flex: 1 1 auto; min-width: 0; cursor: default; }
label.mm-consent-cat-texte { cursor: pointer; }
.mm-consent-cat-nom { display: block; font-size: .9rem; font-weight: 700; color: var(--hdr-ink); }
.mm-consent-cat-desc { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.45; color: var(--hdr-ink2); }
.mm-consent-toujours { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--hdr-ink2); white-space: nowrap; }
.mm-consent-case { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: #5E6FFF; cursor: pointer; }
.mm-consent-details .mm-consent-btn-choix { flex: none; width: 100%; }
html.mm-consent-ouvert body { padding-bottom: var(--mm-consent-h, 0px); }
.mm-pied-cookies {
  display: inline; margin: 0; padding: 0; border: none; background: none; cursor: pointer; font: inherit; text-align: start;
  color: var(--hdr-ink2); text-decoration: none;
}
.mm-pied-cookies:hover, .mm-pied-cookies:focus-visible { color: var(--hdr-ink); text-decoration: underline; }
@media (max-width: 640px) {
  .mm-consent-inner { padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .mm-consent-texte { font-size: .84rem; }
  .mm-consent-btn-choix { flex: 1 1 130px; }
  .mm-consent-btn-discret { flex: 1 1 100%; }
}