/* ═══════════════════════════════════════════════════════════════════════════
   MEGA MENU v2 — refonte densité / lisibilité / a11y          desktop ≥1021px
   ───────────────────────────────────────────────────────────────────────────
   Chargé APRÈS gold.min.css. Surcharge par cascade, sans toucher aux 324 Ko
   partagés. Rollback = retirer le <link> dans include_header_general.tpl.

   NOTE DE SPÉCIFICITÉ — à lire avant d'éditer :
   gold.min.css contient 14 règles `html.light .mm-*` de spécificité (0,2,x).
   Une règle `.mm-*` simple (0,1,x) NE LES BAT PAS, même en étant plus tard
   dans la cascade. Toute déclaration de couleur doit donc être écrite avec le
   sélecteur miroir `html.light .X` en plus de `.X`. Les valeurs restent en
   source unique : ce sont les tokens --mm-* qui changent selon le thème.

   Idem pour les grilles : `.mm-cards--5 .thumb` est en (0,2,0). Les règles
   génériques utilisent donc `.mm-cards.mm-cards--5 > *` (0,2,0) et gagnent
   par l'ordre des feuilles, pas par la spécificité.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────── 1. TOKENS ── */

:root {
  /* Métriques — thème-indépendantes. Réassignées au breakpoint md sur .mm-bar */
  --mm-sidebar-w: 244px;   /* 24 pad + 12 + 18 icône + 12 gap + 150 texte + 12 + 24 */
  --mm-pad: 24px;
  --mm-row-h: 40px;
  --mm-row-gap: 2px;
  --mm-link-fs: 15px;
  --mm-ico-size: 18px;
  --mm-ico-gap: 12px;
  --mm-grid-gap: 16px;
  --mm-trigger-h: 38px;
  --mm-trigger-fs: 15px;
  --mm-trigger-px: 16px;
  --mm-radius: 8px;
  --mm-t-fast: .15s;
  --mm-t: .22s;
  --mm-ease: cubic-bezier(.2, .7, .3, 1);

  /* Couleurs — thème sombre (défaut) */
  --mm-gold:        #D4A853;
  --mm-gold-text:   #D4A853;          /* or utilisé comme couleur de TEXTE */
  --mm-gold-hover:  #E0B664;
  --mm-gold-soft:   rgba(212, 168, 83, .12);
  --mm-gold-faint:  rgba(212, 168, 83, .08);
  --mm-on-gold:     #000;
  --mm-panel-bg:    #161616;
  --mm-sidebar-bg:  #0e0e0e;
  --mm-txt:         #d0d0d0;
  --mm-txt-strong:  #ffffff;
  --mm-txt-dim:     #8a8a8a;
  --mm-ico:         #8e8e8e;          /* 5,84:1 — était #666 = 3,34:1 */
  --mm-border:      rgba(255, 255, 255, .10);
  --mm-hairline:    rgba(255, 255, 255, .06);
  --mm-bar-hover:   rgba(255, 255, 255, .06);
  --mm-shadow:      0 24px 64px rgba(0, 0, 0, .70), 0 2px 8px rgba(0, 0, 0, .40);
  --mm-overlay-bg:  rgba(0, 0, 0, .55);
  --mm-skel:        rgba(255, 255, 255, .05);
  --mm-skel-hi:     rgba(255, 255, 255, .09);
}

html.light {
  --mm-gold:        #B8860B;
  --mm-gold-text:   #8C6209;          /* 5,20:1 sur blanc — #B8860B ne faisait que 3,12:1 */
  --mm-gold-hover:  #A57509;
  --mm-gold-soft:   rgba(184, 134, 11, .10);
  --mm-gold-faint:  rgba(184, 134, 11, .06);
  --mm-on-gold:     #000;             /* était #fff = 3,25:1 → échec AA */
  --mm-panel-bg:    #ffffff;
  --mm-sidebar-bg:  #f4f4f4;
  --mm-txt:         #4a4a4a;
  --mm-txt-strong:  #111111;
  --mm-txt-dim:     #6b6b6b;
  --mm-ico:         #7f7f7f;
  --mm-border:      rgba(0, 0, 0, .10);
  --mm-hairline:    rgba(0, 0, 0, .06);
  --mm-bar-hover:   rgba(0, 0, 0, .04);
  --mm-shadow:      0 24px 64px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .08);
  --mm-overlay-bg:  rgba(0, 0, 0, .32);
  --mm-skel:        rgba(0, 0, 0, .05);
  --mm-skel-hi:     rgba(0, 0, 0, .09);
}


/* ═══════════════════════════════════════════ 2. DESKTOP (≥1021px) ═══════ */
@media (min-width: 1021px) {

/* ── 2.1 Barre : sticky + conteneur ─────────────────────────────────────── */

/* Le mega menu reste accessible après le premier écran de scroll.
   .header-nav est enfant direct de .wrapper — aucun overflow bloquant.
   Repli si un ancêtre casse le sticky : position:fixed + spacer (cf. .mh-spacer). */
.header-nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

.mm-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  position: relative;
  padding: 4px 0;
}

.mm-item {
  position: static;          /* le panneau s'ancre sur .mm-bar, pas sur l'item */
  display: flex;
  align-items: center;
}


/* ── 2.2 Triggers ───────────────────────────────────────────────────────── */

.mm-trigger {
  position: relative;        /* ancre du soulignement ::after */
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--mm-trigger-h);
  padding: 0 var(--mm-trigger-px);
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--mm-trigger-fs);
  letter-spacing: .3px;
  border-radius: var(--mm-radius);
  transition: background var(--mm-t-fast), color var(--mm-t-fast);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.mm-trigger,
html.light .mm-trigger { color: var(--mm-txt); }

.mm-trigger:hover,
.mm-item.mm-open .mm-trigger,
html.light .mm-trigger:hover,
html.light .mm-item.mm-open .mm-trigger {
  background: var(--mm-bar-hover);
  color: var(--mm-txt-strong);
}

.mm-trigger.mm-active,
html.light .mm-trigger.mm-active { color: var(--mm-gold-text); }

.mm-trigger.mm-active:hover,
.mm-item.mm-open .mm-trigger.mm-active,
html.light .mm-trigger.mm-active:hover,
html.light .mm-item.mm-open .mm-trigger.mm-active {
  background: var(--mm-gold-faint);
  color: var(--mm-gold-text);
}

/* Soulignement de l'onglet actif / ouvert.
   bottom:-4px le place dans le padding de .mm-bar → affleure la border-bottom
   de .header-nav, et se raccorde au border-top du panneau qui s'ouvre dessous. */
.mm-trigger.mm-active::after,
.mm-item.mm-open > .mm-trigger::after {
  content: '';
  position: absolute;
  left: var(--mm-trigger-px);
  right: var(--mm-trigger-px);
  bottom: -4px;
  height: 3px;
  background: var(--mm-gold);
  border-radius: 3px 3px 0 0;
}


/* ── 2.3 Bouton de divulgation (généré par mega-menu.js) ────────────────── */

/* Pattern APG « Disclosure Navigation Menu » : le lien navigue, le bouton
   ouvre. Résout d'un coup le clavier ET le tactile ≥1021px. */
.mm-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;               /* WCAG 2.2 SC 2.5.8 exige ≥ 24×24 */
  height: 32px;
  margin-left: -8px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--mm-radius);
  cursor: pointer;
  color: inherit;
  transition: background var(--mm-t-fast);
  flex-shrink: 0;
}
.mm-toggle:hover { background: var(--mm-bar-hover); }

/* Le chevron vit désormais dans le bouton */
.mm-chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--mm-t-fast), opacity var(--mm-t-fast);
  flex-shrink: 0;
  opacity: .55;
  pointer-events: none;
}
.mm-item:hover .mm-chevron,
.mm-item.mm-open .mm-chevron,
.mm-toggle:hover .mm-chevron,
.mm-toggle[aria-expanded="true"] .mm-chevron { opacity: 1; }

.mm-item.mm-open .mm-chevron,
.mm-toggle[aria-expanded="true"] .mm-chevron { transform: rotate(180deg); }


/* ── 2.4 Liens sponsorisés ──────────────────────────────────────────────── */

/* Corrige le désalignement : padding 10px 16px donnait une hauteur de 35,6px
   contre 30,8px pour .mm-trigger. La hauteur vient maintenant du min-height. */
.mm-spacer { flex: 1; }

.mm-sponsored {
  font-size: 13px;
  font-weight: 600;
  padding: 0 14px;
  text-transform: none;
  letter-spacing: 0;
}
.mm-sponsored,
html.light .mm-sponsored { color: var(--mm-txt-dim); }

/* inset au lieu de border : ne modifie pas la hauteur de boîte */
.mm-sponsored { box-shadow: inset 0 0 0 1px var(--mm-hairline); }

.mm-badge-live,
.mm-badge-new {
  font-size: 9px;
  padding: 2px 6px;
  margin-left: 6px;
}
.mm-badge-new,
html.light .mm-badge-new {
  background: var(--mm-gold);
  color: var(--mm-on-gold);
}


/* ── 2.5 Panneau ────────────────────────────────────────────────────────── */

.mm-panel {
  border-radius: 0 0 14px 14px;
  /* Corrige un bug réel : sans max-height le panneau Models déborde sous le
     pli en 1366×768 sans aucun moyen de scroller.
     overflow-x hidden force le clipping par le border-radius. */
  max-height: min(64vh, calc(100vh - 132px));
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  transform: translateY(-8px);   /* -4px était sous le seuil de perception */
  transition: opacity var(--mm-t-fast) ease,
              transform var(--mm-t) var(--mm-ease);
}
.mm-panel,
html.light .mm-panel {
  background: var(--mm-panel-bg);
  border-top: 1px solid var(--mm-hairline);
  box-shadow: var(--mm-shadow);
}
.mm-item.mm-visible .mm-panel { transform: translateY(0); }

.mm-panel::-webkit-scrollbar { width: 8px; }
.mm-panel::-webkit-scrollbar-thumb {
  background: var(--mm-border);
  border-radius: 4px;
}

.mm-inner {
  display: flex;
  align-items: stretch;
  min-height: 320px;
}


/* ── 2.6 Colonne de gauche ──────────────────────────────────────────────── */

.mm-sidebar {
  width: var(--mm-sidebar-w);
  min-width: var(--mm-sidebar-w);
  padding: var(--mm-pad);
  display: flex;
  flex-direction: column;
  /* gap:4px ne s'appliquait qu'entre les BLOCS (cta / ul / sep), jamais entre
     les liens — l'espacement inter-liens réel était de 0. C'est la cause
     directe du « pas assez aéré ». Le rythme vient maintenant de .mm-links. */
  gap: 0;
}
.mm-sidebar,
html.light .mm-sidebar {
  background: var(--mm-sidebar-bg);
  border-right: 1px solid var(--mm-border);
}

/* CTA — reste un pavé doré, mais aligné à gauche sur l'axe de la colonne.
   Il était centré alors que tous les liens sont à gauche : deux axes optiques
   concurrents dans une colonne de 244px. */
.mm-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-ico-gap);
  min-height: 44px;
  padding: 0 14px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-align: left;
  border-radius: var(--mm-radius);
  text-decoration: none;
  margin-bottom: 18px;
  transition: background var(--mm-t-fast), transform var(--mm-t-fast),
              box-shadow var(--mm-t-fast);
}
.mm-cta,
html.light .mm-cta {
  background: var(--mm-gold);
  color: var(--mm-on-gold);
}
.mm-cta::after {
  content: '\2192';
  font-size: 15px;
  opacity: .65;
  flex-shrink: 0;
}
.mm-cta:hover,
html.light .mm-cta:hover { background: var(--mm-gold-hover); }
.mm-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--mm-gold-soft);
}
.mm-cta:active { transform: translateY(0); }

/* Titre de section — remplace le simple filet .mm-sep.
   Un filet dit « c'est différent » ; un libellé dit EN QUOI, et donne un point
   de repos à l'œil dans une colonne autrement indifférenciée. Coût : +9px.
   padding 0 12px aligne l'étiquette sur le bord du PAVÉ de lien, pas sur son
   texte — c'est le bon décalage pour un label de groupe. */
.mm-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 0 12px;
  margin: 16px 0 6px;
}
.mm-sidebar-title,
html.light .mm-sidebar-title { color: var(--mm-txt-dim); }

.mm-sidebar-title:first-child,
.mm-cta + .mm-sidebar-title { margin-top: 0; }

.mm-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-row-gap);
}

.mm-links li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mm-ico-gap);
  min-height: var(--mm-row-h);       /* hauteur pilotée par min-height, pas par
                                        le padding : tient si un libellé passe
                                        sur 2 lignes en traduction */
  padding: 0 12px;
  font-size: var(--mm-link-fs);
  /* Quicksand est déclaré `font-weight: 400 500` : 600/700 serait du faux-gras
     synthétisé, plus baveux et non plus net. La hiérarchie passe par la taille
     et le contraste, pas par le poids. */
  font-weight: 500;
  line-height: 1.35;                 /* aucun line-height n'était déclaré dans
                                        tout le bloc mega menu → héritait 1.2 */
  border-radius: var(--mm-radius);
  text-decoration: none;
  overflow: hidden;
  transition: background var(--mm-t-fast), color var(--mm-t-fast);
}
.mm-links li a,
html.light .mm-links li a { color: var(--mm-txt); }

.mm-links li a:hover,
html.light .mm-links li a:hover {
  background: var(--mm-gold-soft);
  color: var(--mm-gold-text);
}

/* Barre d'accent au hover — délibérément PAS de translateX : l'utilisateur
   traverse 5 à 7 rangées en diagonale pour atteindre la grille de droite, une
   translation par rangée produirait une cascade de sursauts. La barre pousse
   depuis le centre, coûte zéro layout, et indique la direction du contenu. */
.mm-links li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--mm-gold);
  border-radius: 0 3px 3px 0;
  transition: height var(--mm-t) var(--mm-ease);
}
.mm-links li a:hover::before { height: 20px; }

.mm-link-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.mm-link-ico {
  width: var(--mm-ico-size);
  height: var(--mm-ico-size);
  flex-shrink: 0;
  transition: fill var(--mm-t-fast);
}
.mm-link-ico,
html.light .mm-link-ico { fill: var(--mm-ico); }

.mm-links li a:hover .mm-link-ico,
html.light .mm-links li a:hover .mm-link-ico { fill: var(--mm-gold); }

/* Variante « tags » (onglet Modèles) : répéter icon-user 5 fois serait pire
   que pas d'icône. La puce garde EXACTEMENT le même axe optique que les
   icônes des autres onglets : 12 (pad) + 18 (icône) + 12 (gap) = 42px. */
.mm-links--tags li a { padding-left: 42px; gap: 0; }
.mm-links--tags li a::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-ico);
  transition: background var(--mm-t-fast);
}
.mm-links--tags li a:hover::after { background: var(--mm-gold); }

/* Compteurs */
.mm-count {
  flex-shrink: 0;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.mm-count,
html.light .mm-count {
  background: var(--mm-hairline);
  color: var(--mm-txt-dim);
}
.mm-links li a:hover .mm-count,
html.light .mm-links li a:hover .mm-count {
  background: var(--mm-gold);
  color: var(--mm-on-gold);
}
.mm-count--alert,
html.light .mm-count--alert {
  background: #e53e3e;
  color: #fff;
}

.mm-sep {
  height: 1px;
  margin: 14px 0;
}
.mm-sep,
html.light .mm-sep { background: var(--mm-hairline); }


/* ── 2.7 Bloc invité (conversion) ───────────────────────────────────────── */

/* Le HTML invité est memcaché jusqu'à 86400s → il doit être identique pour
   TOUS les invités. Rien de dynamique ici. */
.mm-guest-pitch {
  font-size: 13px;
  line-height: 1.45;
  padding: 0 2px;
  margin-bottom: 14px;
}
.mm-guest-pitch,
html.light .mm-guest-pitch { color: var(--mm-txt-dim); }

.mm-links--perks li span {
  display: flex;
  align-items: center;
  gap: var(--mm-ico-gap);
  min-height: 34px;
  padding: 0 12px;
  font-size: 14px;
}
.mm-links--perks li span,
html.light .mm-links--perks li span { color: var(--mm-txt); }

.mm-guest-login {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 10px;
  border-radius: var(--mm-radius);
  text-decoration: none;
  cursor: pointer;
}
.mm-guest-login,
html.light .mm-guest-login { color: var(--mm-gold-text); }
.mm-guest-login:hover { background: var(--mm-gold-soft); }


/* ── 2.8 Zone de contenu ────────────────────────────────────────────────── */

.mm-content {
  flex: 1;
  min-width: 0;
  padding: var(--mm-pad);
  overflow: hidden;
}

/* Libellé de grille — sans lui l'utilisateur ne sait pas ce qu'il regarde,
   donc n'y projette aucune intention. */
.mm-content-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 0 0 14px;
}
.mm-content-title,
html.light .mm-content-title { color: var(--mm-txt-dim); }

.mm-content-more {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}
.mm-content-more,
html.light .mm-content-more { color: var(--mm-gold-text); }
.mm-content-more:hover { text-decoration: underline; }

/* Deux rails empilés (onglet Vidéos, membre connecté) */
.mm-rail + .mm-rail { margin-top: 22px; }


/* ── 2.9 Grilles ────────────────────────────────────────────────────────── */

/* wrap (et non nowrap) : les enfants ont un flex-basis fixe, donc 5 ou 6 items
   tiennent exactement sur une ligne et rien ne change. Mais si un bloc renvoie
   PLUS d'items que sa classe ne l'annonce (categories est passé à 12 = 2
   rangées), la grille passe à la ligne au lieu de se comprimer. */
.mm-cards,
.mm-model-grid,
.mm-community-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-grid-gap);
  padding: 0;
}

/* Deux règles génériques remplacent les 6 règles par type d'enfant
   (.mm-cards--5 .thumb, .mm-cards--6 .trending-cat-card, .mm-model-grid .mc,
   .mm-community-grid .community-card, .mm-cards--8 .thumb…).
   Corrige structurellement le bug community : le template sortait
   `mm-cards--5` alors que le CSS forçait un calc sur 6 colonnes → 5 cartes
   larges de 1/6 et un vide de 1/6 à droite. */
.mm-cards.mm-cards--5 > * {
  flex: 0 0 calc((100% - var(--mm-grid-gap) * 4) / 5);
  max-width: calc((100% - var(--mm-grid-gap) * 4) / 5);
  min-width: 0;
  width: auto;
  padding: 0;
}
.mm-cards.mm-cards--6 > * {
  flex: 0 0 calc((100% - var(--mm-grid-gap) * 5) / 6);
  max-width: calc((100% - var(--mm-grid-gap) * 5) / 6);
  min-width: 0;
  width: auto;
  padding: 0;
}
/* Filet : si le bloc albums renvoie encore 8 items avant le réglage admin */
.mm-cards.mm-cards--8 > * {
  flex: 0 0 calc((100% - var(--mm-grid-gap) * 7) / 8);
  max-width: calc((100% - var(--mm-grid-gap) * 7) / 8);
  min-width: 0;
  width: auto;
  padding: 0;
}

.mm-cards .img-holder { border-radius: 10px; overflow: hidden; }

.mm-cards .title {
  font-size: 13px;
  line-height: 1.4;
  margin-top: 8px;
}
.mm-cards .title,
html.light .mm-cards .title { color: var(--mm-txt); }

.mm-cards .thumb-bottom { font-size: 12px; margin-top: 5px; }
.mm-cards .thumb-bottom,
html.light .mm-cards .thumb-bottom { color: var(--mm-txt-dim); }

/* Les titres d'album sont courts (truncate:30) : un clamp à 2 lignes crée des
   bas de cartes en dents de scie. */
.mm-cards.mm-album-grid .title { -webkit-line-clamp: 1; }

/* .trending-cat-card et .community-card se soulèvent déjà au survol ;
   .thumb non. Cohérence. */
.mm-cards .thumb { transition: transform var(--mm-t) var(--mm-ease); }
.mm-cards .thumb:hover { transform: translateY(-2px); }
.mm-cards .thumb a:hover .title,
html.light .mm-cards .thumb a:hover .title { color: var(--mm-gold-text); }


/* ── 2.10 Rail personnalisé : squelette / état vide ─────────────────────── */

.mm-skel { display: flex; gap: var(--mm-grid-gap); }
.mm-skel i {
  flex: 1;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: linear-gradient(90deg,
              var(--mm-skel) 25%, var(--mm-skel-hi) 37%, var(--mm-skel) 63%);
  background-size: 400% 100%;
  animation: mm-shimmer 1.4s ease-in-out infinite;
}
@keyframes mm-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.mm-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 0 4px;
  font-size: 14px;
}
.mm-empty,
html.light .mm-empty { color: var(--mm-txt-dim); }

.mm-empty-cta {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--mm-radius);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.mm-empty-cta,
html.light .mm-empty-cta {
  background: var(--mm-gold);
  color: var(--mm-on-gold);
}
.mm-empty-cta:hover,
html.light .mm-empty-cta:hover { background: var(--mm-gold-hover); }


/* ── 2.11 Overlay ───────────────────────────────────────────────────────── */

.mm-overlay,
html.light .mm-overlay { background: var(--mm-overlay-bg); }


/* ── 2.12 Focus visible ─────────────────────────────────────────────────── */

/* Il y a 0 occurrence de :focus-visible dans tout gold.min.css, et le CSS
   critique inline du header pose `*,input,textarea{outline:0}`. */
.mm-trigger:focus-visible,
.mm-toggle:focus-visible,
.mm-cta:focus-visible,
.mm-links li a:focus-visible,
.mm-content a:focus-visible,
.mm-guest-login:focus-visible,
.mm-empty-cta:focus-visible {
  outline: 2px solid var(--mm-gold);
  outline-offset: 2px;
  border-radius: var(--mm-radius);
}


/* ── 2.13 Breakpoint compact 1021–1350px ────────────────────────────────── */

/* Une seule réassignation de tokens remplace les 4 règles éparpillées.
   Corrige au passage l'asymétrie actuelle (sidebar padding 16px mais contenu
   resté à 20px) : --mm-pad pilote désormais les deux. */
@media (max-width: 1350px) {
  .mm-bar {
    --mm-sidebar-w: 208px;
    --mm-pad: 18px;
    --mm-row-h: 38px;
    --mm-link-fs: 14px;
    --mm-ico-size: 17px;
    --mm-ico-gap: 10px;
    --mm-grid-gap: 12px;
    --mm-trigger-h: 34px;
    --mm-trigger-fs: 14px;
    --mm-trigger-px: 12px;
  }
  .mm-sponsored { font-size: 12px; padding: 0 10px; }
  .mm-cta { min-height: 40px; font-size: 13px; margin-bottom: 14px; }
}

/* Sous 1200px, 5 colonnes donneraient des vignettes de 146×82px — inutilisables.
   Mieux vaut 4 vignettes lisibles (185px) que 5 illisibles. */
@media (max-width: 1200px) {
  .mm-cards.mm-cards--5 > *:nth-child(5),
  .mm-cards.mm-cards--6 > *:nth-child(6),
  .mm-cards.mm-cards--8 > *:nth-child(n+7) { display: none; }

  .mm-cards.mm-cards--5 > * {
    flex-basis: calc((100% - var(--mm-grid-gap) * 3) / 4);
    max-width:  calc((100% - var(--mm-grid-gap) * 3) / 4);
  }
  .mm-cards.mm-cards--6 > *,
  .mm-cards.mm-cards--8 > * {
    flex-basis: calc((100% - var(--mm-grid-gap) * 4) / 5);
    max-width:  calc((100% - var(--mm-grid-gap) * 4) / 5);
  }
}

} /* ═══════════════════════════ fin @media (min-width: 1021px) ═══════════ */


/* ═════════════════════════════════════════ 3. HORS MEDIA QUERY ═════════ */

/* Filet de sécurité anti-pollution de cache. guest-state.js pose déjà
   is-guest / is-member sur <html>. Le serveur ne rend jamais le bloc membre
   pour un invité ; ceci couvre le cas où une entrée memcache serait polluée
   (déploiement, bug de session, proxy). Coût : 2 lignes. */
html.is-guest  .mm-member-only { display: none !important; }
html.is-member .mm-guest-only  { display: none !important; }

/* mm-pulse-live tourne en `infinite` sans garde — violation WCAG 2.2.2. */
@media (prefers-reduced-motion: reduce) {
  .mm-panel {
    transition-duration: .01ms;
    transform: none;
  }
  .mm-item.mm-visible .mm-panel { transform: none; }
  .mm-cards .thumb:hover,
  .mm-cta:hover { transform: none; }
  .mm-links li a::before { transition: none; }
  .mm-badge-live { animation: none; }
  .mm-skel i { animation: none; }
}