* { margin: 0; padding: 0; box-sizing: border-box; }
    /* Filet de sécurité structurel : empêche toute barre de défilement
       horizontale et toute "bande blanche" sur le côté si un élément
       venait à dépasser légèrement la largeur de l'écran (image, carte,
       tableau...). Sans ce filet, le moindre débordement, même de
       quelques pixels, permet de faire glisser toute la page vers la
       droite et de révéler un vide blanc — exactement le bug rapporté
       sur mobile. */
    html, body { max-width: 100%; overflow-x: hidden; }
    body { font-family: 'Inter', sans-serif;
      /* PWA — zone sûre du haut : pousse les bannières (installation,
         hors-ligne, reprise de lecture, mise à jour) sous l'encoche/la
         barre système quand l'app est installée en plein écran. 0px sur
         un navigateur classique, donc sans effet ailleurs. */
      padding-top: env(safe-area-inset-top, 0px);
    }
    /* Filet de sécurité pour toutes les images "object-cover" du site
       (miniatures, pochettes, logos, bannières...) : elles doivent
       toujours remplir exactement leur conteneur (largeur/hauteur à
       100%, recadrées proprement) même si le CDN Tailwind n'a pas
       encore généré "w-full"/"h-full"/"object-cover" au moment où la
       page se charge. Sans ce filet, une image garde sa taille réelle
       (souvent bien plus large que l'écran sur mobile), ce qui pousse
       toute la page à déborder horizontalement et provoque la fameuse
       bande blanche sur le côté. */
    img.w-full { max-width: 100%; width: 100%; }
    img.w-full.h-full.object-cover { width: 100%; height: 100%; object-fit: cover; }
    .font-display { font-family: 'Montserrat', sans-serif; }
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    .page { display: none; animation: fadeIn 0.4s ease-in; }
    .page.active { display: block; }
    /* L'accueil a besoin d'un ordre de sections pilotable depuis
       l'administration (Gestion de l'accueil) : les rubriques
       dynamiques reçoivent un style.order en JS (voir applyHomeSectionsOrder). */
    #page-home.active { display: flex; flex-direction: column; }
    /* homeMoreContent (bascule « En savoir plus », ajoutée le 07/10/2026) doit
       rester un conteneur flex en colonne lui aussi : les sections qu'il
       contient (À propos, rubriques dynamiques, Explorez l'univers média)
       gardent leur ordre pilotable depuis l'administration (Gestion de
       l'accueil / applyHomeSectionsOrder) même une fois repliées dans ce
       conteneur. Le sélecteur #homeMoreContent.hidden doit l'emporter sur
       #homeMoreContent pour que le repli (classe .hidden) fonctionne malgré
       la spécificité plus forte d'un id. */
    #homeMoreContent { display: flex; flex-direction: column; }
    #homeMoreContent.hidden { display: none; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    .filter-btn { transition: all 0.2s; }
    .filter-btn.active { background-color: #009E49 !important; color: white !important; border-color: #009E49 !important; }
    
    .glass-nav {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      /* PWA — zones sûres : quand l'app est installée en plein écran sur
         un téléphone à encoche, on décale le point d'ancrage "sticky" de
         l'en-tête par la hauteur de l'encoche (0px sur tout le reste,
         donc aucun changement visuel ailleurs). Sans ceci, l'en-tête
         viendrait se coller sous l'encoche/la barre système au premier
         défilement. Le "!important" est volontaire : il garantit que
         cette règle l'emporte sur l'utilitaire Tailwind "top-0" déjà
         posé sur cet élément, quel que soit l'ordre de chargement des
         feuilles de style. */
      top: env(safe-area-inset-top, 0px) !important;
    }
    
    .dark .glass-nav {
      background: rgba(15, 23, 42, 0.95);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    
    .nav-link {
      position: relative;
      padding: 0.5rem 0.75rem;
      border-radius: 0.5rem;
      transition: all 0.3s ease;
      color: #1e293b;
      font-weight: 500;
      font-size: 0.875rem;
      white-space: nowrap;
    }
    
    .dark .nav-link {
      color: #e2e8f0;
    }
    
    .nav-link:hover {
      background: rgba(0, 158, 73, 0.1);
      color: #009E49;
      transform: translateY(-2px);
    }
    
    .nav-link.active {
      background: rgba(0, 158, 73, 0.15);
      color: #009E49;
      font-weight: 600;
    }
    
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background: #009E49;
      transition: width 0.3s ease;
    }
    
    .nav-link:hover::after,
    .nav-link.active::after {
      width: 70%;
    }

    /* ===== Méga-menus du bandeau (survol = aperçu des rubriques,
       comme demandé le 23/09/2026) — uniquement sur grand écran
       (desktopNav, xl:flex) : sur mobile/tablette, ces mêmes rubriques
       restent accessibles via des accordéons dépliables dans le menu ☰
       (voir .mobile-accordion plus bas), puisque le survol n'existe pas
       au doigt. Technique CSS pure (pas de JS pour ouvrir/fermer) :
       robuste, sans scintillement, ne dépend d'aucun minuteur. Le
       padding-top sur .mega-panel fait partie de la zone survolable
       (pas de "trou" invisible entre le lien et le panneau) — seul le
       contenu visuel (.mega-panel-inner) glisse et s'estompe. */
    .nav-item-group { position: relative; }
    .mega-panel {
      position: absolute;
      top: 100%;
      /* Aligné sur le bord GAUCHE de son déclencheur par défaut (pas
         centré) : un panneau centré déborde hors écran côté gauche
         pour les premiers éléments du menu (ex. "Médias", proche du
         logo) — voir .mega-panel-right ci-dessous pour l'exception. */
      left: 0;
      padding-top: 12px;
      width: max-content;
      max-width: min(92vw, 40rem);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.16s ease;
      z-index: 60;
    }
    /* Pour le dernier élément du bandeau (Boutique, proche du bord
       droit) : aligné sur le bord DROIT du déclencheur à la place,
       pour ne jamais déborder hors écran côté droit non plus. */
    .mega-panel-right { left: auto; right: 0; }
    .nav-item-group:hover .mega-panel,
    .nav-item-group:focus-within .mega-panel,
    .nav-item-group.js-open .mega-panel {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .mega-panel-inner {
      background: #fff;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 1rem;
      box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.25);
      padding: 0.9rem;
      display: grid;
      grid-template-columns: repeat(2, minmax(220px, 1fr));
      gap: 0.35rem;
      transform: translateY(-6px);
      transition: transform 0.16s ease;
    }
    .mega-panel.mega-panel-1col .mega-panel-inner { grid-template-columns: minmax(220px, 1fr); }
    .dark .mega-panel-inner {
      background: #1e293b;
      border-color: rgba(255, 255, 255, 0.08);
    }
    .nav-item-group:hover .mega-panel-inner,
    .nav-item-group:focus-within .mega-panel-inner,
    .nav-item-group.js-open .mega-panel-inner {
      transform: translateY(0);
    }
    .mega-item {
      display: flex;
      align-items: flex-start;
      gap: 0.7rem;
      padding: 0.6rem 0.65rem;
      border-radius: 0.75rem;
      cursor: pointer;
      transition: background 0.15s ease;
      text-align: left;
    }
    .mega-item:hover { background: rgba(0, 158, 73, 0.08); }
    .mega-item-icon {
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 0.6rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      flex-shrink: 0;
    }
    .mega-item-title {
      font-weight: 600;
      font-size: 0.85rem;
      color: #1e293b;
    }
    .dark .mega-item-title { color: #f1f5f9; }
    .mega-item-desc {
      font-size: 0.72rem;
      color: #64748b;
      line-height: 1.3;
      margin-top: 0.1rem;
    }
    .dark .mega-item-desc { color: #94a3b8; }
    .mega-panel-footer {
      grid-column: 1 / -1;
      border-top: 1px solid rgba(15, 23, 42, 0.08);
      margin-top: 0.25rem;
      padding-top: 0.5rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }
    .dark .mega-panel-footer { border-top-color: rgba(255, 255, 255, 0.08); }
    .mega-panel-footer a {
      font-size: 0.75rem;
      font-weight: 600;
      color: #475569;
      padding: 0.35rem 0.6rem;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.05);
      transition: background 0.15s ease, color 0.15s ease;
    }
    .dark .mega-panel-footer a { color: #cbd5e1; background: rgba(255, 255, 255, 0.06); }
    .mega-panel-footer a:hover { background: rgba(0, 158, 73, 0.12); color: #009E49; }
    .nav-link.has-caret::after { content: none; }
    .nav-caret {
      width: 0.7rem;
      height: 0.7rem;
      display: inline-block;
      margin-left: 0.15rem;
      transition: transform 0.16s ease;
      vertical-align: -1px;
    }
    .nav-item-group:hover .nav-caret,
    .nav-item-group:focus-within .nav-caret,
    .nav-item-group.js-open .nav-caret { transform: rotate(180deg); }

    /* Le libellé ("Médias"...) et le petit chevron sont maintenant deux
       éléments cliquables SÉPARÉS (avant : le chevron était à l'intérieur
       du même <a>, donc un simple clic — sans survol préalable — envoyait
       directement sur la page sans jamais montrer les sous-catégories ;
       souris à clic rapide, pavé tactile, écran tactile hybride). Cliquer
       sur le libellé va toujours directement à la page ; cliquer sur le
       chevron ouvre/ferme le sous-menu, sans naviguer — même principe que
       l'accordéon du menu ☰ mobile, appliqué ici au bandeau bureau. */
    .nav-link-row { display: inline-flex; align-items: center; }
    .nav-caret-btn {
      padding: 0.4rem 0.5rem;
      margin-left: -0.35rem;
      border-radius: 0.5rem;
      color: inherit;
      display: inline-flex;
      align-items: center;
    }
    .nav-caret-btn:hover { background: rgba(0, 158, 73, 0.1); color: #009E49; }
    .nav-caret-btn .nav-caret { margin-left: 0; }

    /* ===== Accordéons du menu mobile (☰) — équivalent tactile des
       méga-menus ci-dessus : on déplie/replie au tap au lieu de
       survoler. */
    .mobile-accordion-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
    .mobile-accordion-trigger .nav-caret { transition: transform 0.2s ease; }
    .mobile-accordion-trigger.open .nav-caret { transform: rotate(180deg); }
    .mobile-accordion-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s ease;
      padding-left: 0.5rem;
    }
    .mobile-accordion-panel.open { max-height: 32rem; }
    .mobile-accordion-item {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0.6rem 0.75rem;
      border-radius: 0.6rem;
      font-size: 0.85rem;
      color: #475569;
    }
    .dark .mobile-accordion-item { color: #cbd5e1; }
    .mobile-accordion-item:hover { background: rgba(0, 158, 73, 0.08); color: #009E49; }

    /* ===== Sous-menus au clic pour le pied de page ("Explorer") et les
       cartes "Explorez l'univers média" de l'accueil — visibles à TOUTES
       les largeurs d'écran (contrairement au méga-menu du bandeau, réservé
       au bureau, et à l'accordéon du ☰, réservé au mobile) : ils doivent
       donc réagir au clic/tap, jamais seulement au survol, pour fonctionner
       aussi bien à la souris qu'au doigt. */
    .footer-submenu-toggle {
      flex-shrink: 0;
      padding: 0.25rem;
      color: #64748b;
      transition: transform 0.2s ease, color 0.15s ease;
    }
    .footer-submenu-toggle:hover { color: #009E49; }
    .footer-submenu-toggle.open { transform: rotate(180deg); color: #009E49; }
    .footer-submenu-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s ease;
    }
    .footer-submenu-panel.open { max-height: 20rem; }
    .footer-submenu-item {
      display: block;
      padding: 0.4rem 0 0.4rem 0.75rem;
      font-size: 0.83rem;
      color: #64748b;
    }
    .footer-submenu-item:hover { color: #009E49; }

    .explore-card-toggle {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      margin-top: 0.5rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: #009E49;
    }
    .explore-card-toggle .nav-caret { width: 0.85rem; height: 0.85rem; transition: transform 0.2s ease; }
    .explore-card-toggle.open .nav-caret { transform: rotate(180deg); }
    .explore-card-submenu {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s ease;
    }
    .explore-card-submenu.open { max-height: 16rem; margin-top: 0.5rem; }
    .explore-card-submenu-item {
      display: block;
      padding: 0.35rem 0;
      font-size: 0.78rem;
      color: #475569;
      border-top: 1px solid rgba(100,116,139,0.15);
    }
    .dark .explore-card-submenu-item { color: #cbd5e1; border-top-color: rgba(255,255,255,0.08); }
    .explore-card-submenu-item:hover { color: #009E49; }

    .player-container { background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
      /* PWA — zone sûre du bas (barre d'accueil iPhone, etc.) : la barre
         garde sa couleur de fond jusqu'au vrai bord de l'écran, mais ses
         boutons ne viennent plus se coller dessus. 0px sur les appareils
         sans zone sûre, donc sans effet ailleurs. */
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* PWA — le menu mobile plein écran doit lui aussi respecter les
       zones sûres (encoche en haut, barre d'accueil en bas). */
    #mobileMenu { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
    /* Le lecteur doit toujours rester visible en bas de l'écran, même
       pendant le défilement de la page. Règle renforcée avec !important
       pour ne jamais être annulée par une autre règle CSS chargée après
       (même principe que les autres "filets de sécurité" déjà utilisés
       ailleurs sur le site pour des éléments qui doivent rester fixes). */
    #globalPlayer { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; }
    /* ===== Lecteur façon maquette ===== */
    #playerProgressWrap { display: contents; }
    #globalPlayer { background: #0B1120; border-top: 0; }
    #globalPlayer #progressBar { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 4px; margin: 0; border-radius: 0; cursor: pointer;
      background: linear-gradient(to right, transparent var(--pct, 0%), rgba(255,255,255,0.18) var(--pct, 0%)), linear-gradient(90deg, #EF2B2D, #009E49 55%, #FCD116); }
    #globalPlayer #progressBar::-webkit-slider-thumb { width: 12px; height: 12px; background: #FCD116; opacity: 0; }
    #globalPlayer #progressBar:hover::-webkit-slider-thumb { opacity: 1; }
    #globalPlayer #progressBar::-moz-range-thumb { width: 12px; height: 12px; border: 0; background: #FCD116; }
    #globalPlayer #playerTime { position: absolute; right: 1rem; top: 8px; font-size: 0.7rem; color: #94a3b8; display: none; }
    @media (min-width: 640px) { #globalPlayer #playerTime { display: block; } }
    .bfm-pl { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem 0.6rem; max-width: 80rem; margin: 0 auto; }
    .bfm-pl-left { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 0; min-width: 0; cursor: pointer; }
    .bfm-pl-thumb { width: 3rem; height: 3rem; border-radius: 0.5rem; background: #334155; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; overflow: hidden; }
    .bfm-pl-meta { min-width: 0; }
    .bfm-pl-titlerow { display: flex; align-items: center; gap: 0.5rem; }
    .bfm-pl-title { color: #fff; font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bfm-pl-sub { color: #94a3b8; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bfm-pl-center { display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex: 0 0 auto; }
    .bfm-pl-skip { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; }
    .bfm-pl-skip.prev { color: #EF2B2D; }
    .bfm-pl-skip.next { color: #FCD116; }
    .bfm-pl-play { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: #009E49; color: #fff; box-shadow: 0 0 0 4px rgba(0,158,73,0.25); }
    .bfm-pl-right { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; flex: 1 1 0; min-width: 0; padding-top: 0.9rem; }
    .bfm-pl-ico { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; }
    .bfm-pl-ico.yellow { color: #FCD116; } .bfm-pl-ico.green { color: #22C55E; } .bfm-pl-ico.red { color: #EF2B2D; }
    .bfm-pl-ico.on { background: rgba(252,209,22,0.2); }
    @media (max-width: 767px) {
      .bfm-pl-ico.opt { display: none; }
      .bfm-pl-center { gap: 0.5rem; }
      .bfm-pl-play { width: 3rem; height: 3rem; }
      .bfm-pl-right { flex: 0 0 auto; padding-top: 0; }
    }
    .player-btn { transition: all 0.2s; }
    .player-btn:hover { transform: scale(1.1); }
    .progress-bar { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.2); outline: none; cursor: pointer; }
    .progress-bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #009E49; cursor: pointer; }
    .volume-bar { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); outline: none; cursor: pointer; }
    .volume-bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: white; cursor: pointer; }
    
    /* Filet de sécurité pour la lisibilité des cartes (vidéos, musique,
       médias...) : ces cartes sont recréées dynamiquement en JavaScript
       (innerHTML) à chaque filtre/page, avec des classes Tailwind
       (bg-white / dark:bg-slate-800, texte sans couleur explicite qui
       hérite normalement du thème). Si le CDN Tailwind n'a pas encore
       généré ces classes au moment de l'injection, le fond peut rester
       transparent et le texte peut devenir illisible (texte sombre sur
       fond sombre, ou l'inverse). Ce filet fixe toujours un fond et un
       texte lisibles, quel que soit l'état de Tailwind. */
    .media-card { transition: all 0.3s; background-color: #ffffff; color: #0F172A; }
    body.dark .media-card { background-color: #1e293b; color: #F8FAFC; }
    #videoCategoryDropdown button, #lireCategoryDropdown button, #langMenu button, #langMenu a {
      color: #334155;
    }
    body.dark #videoCategoryDropdown button, body.dark #lireCategoryDropdown button,
    body.dark #langMenu button, body.dark #langMenu a {
      color: #e2e8f0;
    }
    .media-card:hover { transform: translateY(-4px); }

    /* ===== Sous-menu Boutique (Boutique / Tarifs / Distribution / Créateurs) ===== */
    .boutique-subnav-wrap { background: #ffffff; border-bottom: 1px solid #e2e8f0; }
    body.dark .boutique-subnav-wrap { background: #0f172a; border-bottom-color: #1e293b; }
    .boutique-subnav-btn {
      display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.1rem;
      border-radius: 9999px; font-weight: 600; font-size: 0.9rem; white-space: nowrap;
      border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; transition: all 0.2s;
    }
    body.dark .boutique-subnav-btn { background: #1e293b; color: #e2e8f0; border-color: #334155; }
    .boutique-subnav-btn:hover { border-color: #009E49; color: #009E49; }
    .boutique-subnav-btn.active { background: #009E49; border-color: #009E49; color: #ffffff; }

    /* ===== Bandeau de moyens de paiement (page Tarifs) : défilement horizontal infini ===== */
    .pay-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    .pay-marquee-track { display: flex; gap: 1.25rem; width: max-content; animation: pay-scroll 22s linear infinite; }
    .pay-marquee:hover .pay-marquee-track { animation-play-state: paused; }
    @keyframes pay-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .pay-badge {
      display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem;
      border-radius: 0.9rem; font-weight: 700; font-size: 0.95rem; color: #ffffff;
      box-shadow: 0 4px 14px rgba(0,0,0,0.12); shrink: 0;
    }

    /* ===== Hub déroulant (pied de page) : 4 bandes (artistes, médias,
       audios, vidéos) qui défilent en continu — même mécanisme que le
       bandeau de paiement ci-dessus (contenu dupliqué + pay-scroll). ===== */
    .hub-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
    .hub-marquee-track { display: flex; gap: 0.9rem; width: max-content; animation: pay-scroll 40s linear infinite; }
    .hub-marquee-track.hub-reverse { animation-direction: reverse; }
    .hub-marquee:hover .hub-marquee-track { animation-play-state: paused; }
    .footer-hub-row-label { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.85rem; color: #ffffff; margin-bottom: 0.5rem; }
    /* Fond du Hub : illustration (tour, drapeau, journaux Sidwaya) sur un
       fond dégradé sombre assorti au site, avec une superposition foncée
       pour garder le texte et les cartes du bandeau parfaitement
       lisibles par-dessus. */
    #footerHub { position: relative; background-image: linear-gradient(90deg, rgba(15,23,42,0.94) 0%, rgba(15,23,42,0.75) 45%, rgba(15,23,42,0.55) 100%), url('uploads/branding/hub-fond.jpg'); background-size: cover; background-position: center; }
    .hub-card {
      flex-shrink: 0; width: 160px; background: #1e293b; border: 1px solid #334155;
      border-radius: 0.75rem; padding: 0.65rem; cursor: pointer; transition: transform 0.15s, border-color 0.15s;
    }
    .hub-card:hover { transform: translateY(-3px); border-color: #009E49; }
    .hub-card-cover {
      width: 100%; height: 72px; border-radius: 0.5rem; overflow: hidden; margin-bottom: 0.5rem;
      display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff;
      background: linear-gradient(135deg,#009E49,#0F172A);
    }
    .hub-card-cover img { width: 100%; height: 100%; object-fit: cover; }
    .hub-card-title { font-weight: 600; font-size: 0.78rem; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hub-card-subtitle { font-size: 0.68rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.1rem; }

    /* ===== Accueil dynamique : rangées horizontales + carrousel "Temps forts" ===== */
    .home-row-wrap { position: relative; }
    .home-scroll-row {
      display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch; padding: 0.25rem 0.25rem 0.75rem;
      scrollbar-width: thin;
    }
    .home-scroll-row::-webkit-scrollbar { height: 6px; }
    .home-scroll-row > * { scroll-snap-align: start; flex: 0 0 auto; }
    .home-row-arrow {
      display: none; position: absolute; top: 40%; transform: translateY(-50%);
      width: 2.25rem; height: 2.25rem; border-radius: 9999px; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.95); box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 5; color: #0B1120;
    }
    .dark .home-row-arrow { background: rgba(30,41,59,0.95); color: white; }
    .home-row-arrow.left { left: -0.75rem; }
    .home-row-arrow.right { right: -0.75rem; }
    @media (min-width: 768px) { .home-row-arrow { display: flex; } }
    .home-card {
      width: 168px; background: white; border-radius: 1.1rem; border: 1px solid rgba(148,163,184,0.25);
      padding: 0.75rem; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .dark .home-card { background: #1e293b; }
    .home-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -10px rgba(0,158,73,0.35); border-color: rgba(0,158,73,0.5); }
    .home-card .home-card-cover {
      width: 100%; aspect-ratio: 1 / 1; border-radius: 0.85rem; object-fit: cover;
      background: linear-gradient(135deg, #1e293b, #334155);
      display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 0.5rem;
      position: relative; overflow: hidden;
    }
    .dark .home-card .home-card-cover { background: linear-gradient(135deg, #0f172a, #1e293b); }
    .home-card-title { font-weight: 600; font-size: 0.85rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .home-card-subtitle { font-size: 0.75rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Grandes cartes (style "Musique traditionnelle" / "Tendances" en
       haut de l'accueil, demandé le 07/10/2026) : visuel plus imposant
       qu'une .home-card classique, avec une étiquette (eyebrow) au-dessus
       du titre, comme les vitrines Apple Music/Spotify. Réutilise
       .home-row-wrap / .home-scroll-row pour le défilement horizontal. */
    .home-bigcard { width: 220px; cursor: pointer; }
    @media (min-width: 640px) { .home-bigcard { width: 290px; } }
    .home-bigcard-eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #009E49; margin-bottom: 0.2rem; }
    .home-bigcard-title { font-weight: 700; font-size: 0.95rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0F172A; }
    .dark .home-bigcard-title { color: #fff; }
    .home-bigcard-subtitle { font-size: 0.8rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0.6rem; }
    .home-bigcard-cover {
      width: 100%; aspect-ratio: 1 / 1; border-radius: 1rem; overflow: hidden; position: relative;
      background: linear-gradient(135deg, #1e293b, #334155);
      display: flex; align-items: center; justify-content: center; font-size: 2.5rem;
    }
    .home-bigcard-cover img { width: 100%; height: 100%; object-fit: cover; }
    .home-bigcard-soon-badge {
      position: absolute; bottom: 0.5rem; left: 0.5rem; background: rgba(15,23,42,0.75); color: #fff;
      font-size: 0.62rem; font-weight: 700; padding: 0.25rem 0.55rem; border-radius: 9999px; letter-spacing: 0.02em;
    }

    /* Panneaux latéraux « Temps forts » / « Tendances » autour du grand
       titre de l'accueil (demandé le 07/10/2026, d'après un croquis) :
       petites cartes empilées verticalement, visibles seulement à partir
       de lg (sur mobile/tablette l'espace latéral n'existe pas, donc rien
       n'est ajouté sous le titre pour ne pas casser l'accueil tenant sur
       un écran). */
    .home-side-panel-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.35rem; }
    .home-side-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem; border-radius: 0.85rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: background 0.15s, border-color 0.15s; margin-bottom: 0.6rem; }
    .home-side-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(0,158,73,0.4); }
    .home-side-card-cover { width: 44px; height: 44px; border-radius: 0.6rem; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, #1e293b, #334155); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; position: relative; }
    .home-side-card-cover img { width: 100%; height: 100%; object-fit: cover; }
    .home-side-card-text { min-width: 0; flex: 1; }
    .home-side-card-title { font-size: 0.78rem; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .home-side-card-subtitle { font-size: 0.68rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .home-side-card-soon-dot { position: absolute; bottom: 2px; right: 2px; width: 8px; height: 8px; border-radius: 9999px; background: #FCD116; border: 1.5px solid #0B1120; }
    .home-empty-row { padding: 1.5rem 0; color: #64748b; font-size: 0.9rem; text-align: center; width: 100%; }

    /* Vitrine « Regardez • Écoutez • Découvrez » du haut de page : 4
       raccourcis ALIGNÉS et TOUS cliquables en permanence (Vidéos / Radios
       / Télés / Presse), alimentés par du vrai contenu du site qui tourne
       automatiquement (voir bfmInitHeroShowcase) — jamais un seul raccourci
       affiché à la fois, et jamais d'image fabriquée. */
    .hero-shortcut-tile { position: relative; display: block; border-radius: 1rem; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid color-mix(in srgb, var(--hst-color) 45%, transparent); background: #131a2b; transition: transform 0.15s; }
    @media (min-width: 640px) { .hero-shortcut-tile { aspect-ratio: 1 / 1; } }
    .hero-shortcut-tile:active { transform: scale(0.96); }
    .hero-shortcut-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
    .hero-shortcut-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,17,32,0.92) 0%, rgba(11,17,32,0.25) 55%, color-mix(in srgb, var(--hst-color) 30%, transparent) 100%); }
    .hero-shortcut-badge { position: absolute; top: 0.4rem; left: 0.4rem; display: flex; align-items: center; gap: 0.25rem; background: rgba(11,17,32,0.55); border-radius: 9999px; padding: 0.2rem 0.5rem; font-size: 0.62rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
    .hero-shortcut-badge i { color: var(--hst-color); }
    .hero-shortcut-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.4rem 0.5rem 0.5rem; color: #fff; font-weight: 700; font-size: 0.68rem; line-height: 1.2; text-align: left; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: opacity 0.4s ease; }
    @media (prefers-reduced-motion: reduce) { .hero-shortcut-tile img, .hero-shortcut-label { transition: none; } }

    /* Onglets « Favoris / Récents » du lecteur plein écran (voir
       #fullPlayerScopedTabs et bfmSetScopedTab) */
    .scoped-tab { color: #94a3b8; background: transparent; transition: background 0.15s, color 0.15s; }
    .scoped-tab.active { background: rgba(255,255,255,0.12); color: #fff; }
    .scoped-list-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem; border-radius: 0.6rem; cursor: pointer; }
    .scoped-list-item:hover { background: rgba(255,255,255,0.06); }
    .scoped-list-item .scoped-list-thumb { width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; background: #1e293b; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
    .scoped-list-item .scoped-list-title { font-size: 0.8rem; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .scoped-list-item .scoped-list-subtitle { font-size: 0.7rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .scoped-list-empty { padding: 1rem 0.5rem; color: #64748b; font-size: 0.8rem; text-align: center; }

    /* Carrousel "Les temps forts Nibarka Box" */
    .home-hero-slide {
      position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.6s ease;
      background-size: cover; background-position: center;
    }
    .home-hero-slide.active { opacity: 1; pointer-events: auto; }
    .home-hero-slide::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(0deg, rgba(11,17,32,0.92) 0%, rgba(11,17,32,0.55) 45%, rgba(11,17,32,0.25) 100%);
    }
    .home-hero-slide-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem 1.25rem 3.5rem; max-width: 56rem; margin: 0 auto; }
    @media (min-width: 768px) { .home-hero-slide-inner { padding: 2rem 2rem 4rem; } }
    .home-hero-eyebrow { color: #FCD116; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
    .home-hero-title { font-weight: 800; font-size: 1.5rem; line-height: 1.15; margin-bottom: 0.5rem; }
    @media (min-width: 768px) { .home-hero-title { font-size: 2.25rem; } }
    .home-hero-desc { color: #cbd5e1; font-size: 0.9rem; margin-bottom: 1rem; max-width: 40rem; }
    .home-hero-dot { width: 8px; height: 8px; border-radius: 9999px; background: rgba(255,255,255,0.4); transition: all 0.2s; cursor: pointer; border: none; padding: 0; }
    .home-hero-dot.active { background: #ffffff; width: 22px; }
    @media (prefers-reduced-motion: reduce) {
      .home-hero-slide { transition: none; }
    }

    .notification { position: fixed; top: 20px; right: 20px; padding: 1rem 1.5rem; border-radius: 0.5rem; color: white; z-index: 10000; animation: slideIn 0.3s ease; }
    @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
    .notification.success { background: #009E49; }
    .notification.error { background: #EF2B2D; }
    .notification.info { background: #3b82f6; }

    .offline-banner { display: none; position: sticky; top: 0; z-index: 60; background: #92400E; color: white; text-align: center; font-size: 0.8rem; font-weight: 600; padding: 0.5rem 1rem; }
    .offline-banner.show { display: block; }

    .library-item { transition: all 0.2s; }
    .library-item:hover { background: rgba(0,158,73,0.05); }
    .download-btn.downloaded { background: #009E49 !important; }
    .fav-btn.active i { fill: #EF2B2D; color: #EF2B2D; }
    
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 1rem; }
    .modal-overlay.active { display: flex; }
    .modal-content { background: white; border-radius: 1rem; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 2rem; }
    /* Téléphone/tablette tenu en paysage (écran large mais peu haut) :
       demandé le 07/10/2026 pour que les panneaux de l'administration
       (ex. "Ajouter un contenu") utilisent vraiment l'écran au lieu de
       rester minuscules au milieu d'une grande zone vide — ce qui rendait
       aussi plus facile de cliquer "à côté" par erreur. */
    @media (orientation: landscape) and (max-height: 600px) {
      .modal-content { max-width: 92vw; max-height: 95vh; padding: 1.25rem; }
    }

    /* Lecteur vidéo réduit (« mini-player », comme Boomplay) : au lieu de
       bloquer tout l'écran, la vidéo/le direct continue de jouer dans une
       petite boîte ancrée en bas à droite, au-dessus de la barre audio
       (#globalPlayer, z-index 9999) — on peut alors naviguer librement sur
       le reste du site pendant la lecture. C'est le MÊME élément (iframe
       YouTube ou <video>) qui reste en place, jamais recréé : la lecture
       n'est donc jamais interrompue ni relancée. Voir minimizeVideoModal()/
       expandVideoModal() dans le script. */
    #videoModalOverlay.mini {
      inset: auto; top: auto; left: auto;
      right: 1rem; bottom: 88px;
      width: 300px; max-width: calc(100vw - 2rem);
      padding: 0; background: transparent; backdrop-filter: none;
      align-items: stretch; justify-content: stretch;
      z-index: 1500; pointer-events: none;
    }
    #videoModalOverlay.mini .modal-content {
      pointer-events: auto;
      max-width: none; width: 100%; max-height: none;
      padding: 0.4rem; border-radius: 0.75rem;
      box-shadow: 0 12px 32px rgba(0,0,0,0.5);
      cursor: pointer;
    }
    #videoModalOverlay.mini #videoModalBody { pointer-events: none; }
    /* Invisible mais au-dessus de tout (y compris l'iframe YouTube) tant
       que la boîte est réduite : garantit qu'un clic ne peut JAMAIS
       atteindre un lien interne à YouTube et faire quitter le site — seul
       effet possible d'un clic ici : agrandir la boîte. */
    #videoModalMiniCatcher { display: none; }
    #videoModalOverlay.mini #videoModalMiniCatcher {
      display: block; position: absolute; inset: 0; z-index: 5; cursor: pointer; background: transparent;
    }
    @media (max-width: 640px) {
      #videoModalOverlay.mini { width: 200px; right: 0.75rem; bottom: 80px; }
    }

    /* Lecteur plein écran : sur mobile, vraiment plein écran (bord à
       bord, pas une boîte flottante) — plus proche d'un lecteur natif.
       Sur ordinateur/tablette, garde la présentation en fenêtre centrée. */
    @media (max-width: 640px) {
      #fullPlayerOverlay.modal-overlay { padding: 0; }
      #fullPlayerOverlay .modal-content {
        max-width: none; width: 100vw; height: 100vh; max-height: 100vh;
        border-radius: 0; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
        padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
        display: flex; flex-direction: column;
      }
    }

    /* Erreur de validation d'un champ de formulaire : bordure rouge + léger
       tremblement, utilisés par bfmMarkFieldError()/bfmClearFieldError()
       (voir submitCreatorRegistration). Le son d'erreur associé est généré
       à la volée en JavaScript (bfmPlayErrorSound), aucun fichier audio à
       héberger. */
    /* "Comme une application native" (inscription, tableau de bord,
       profil) : sur grand écran, l'espace créateur (inscription +
       tableau de bord) tient dans la hauteur visible, avec un défilement
       interne à la carte plutôt que de faire défiler toute la page —
       même principe déjà utilisé pour .modal-content dans ce fichier.
       Sur mobile, on garde le défilement normal de la page entière (plus
       adapté aux petits écrans qu'un cadre figé). */
    @media (min-width: 1024px) {
      #creator-step-register, #creator-step-profile {
        max-height: calc(100vh - 140px);
        overflow-y: auto;
      }
      .dashboard-shell {
        height: calc(100vh - 220px);
        min-height: 480px;
      }
      .dashboard-sidebar-col, .dashboard-content-col { height: 100%; overflow-y: auto; }
      .dashboard-sidebar-col > div { min-height: 100%; }
      #page-account .max-w-3xl {
        max-height: calc(100vh - 140px);
        overflow-y: auto;
      }
    }

    .field-error-shake { animation: bfmFieldShake 0.4s; }
    .field-error-shake, .field-error-shake textarea, .field-error-shake select { border: 2px solid #EF2B2D !important; border-radius: 0.5rem; }
    @keyframes bfmFieldShake {
      10%, 90% { transform: translateX(-1px); }
      20%, 80% { transform: translateX(2px); }
      30%, 50%, 70% { transform: translateX(-4px); }
      40%, 60% { transform: translateX(4px); }
    }

    /* Filet de sécurité : si le CDN Tailwind (chargé via internet) est lent,
       bloqué ou indisponible au moment de l'ouverture de la page, les
       classes utilitaires Tailwind (dont "hidden") ne sont pas encore
       définies. Sans cette règle de secours, les panneaux ci-dessous
       resteraient visibles par défaut et bloqueraient les clics sur le
       reste du site (menu mobile plein écran, formulaires, panneaux
       admin...). Ces règles ne changent rien quand Tailwind se charge
       normalement : elles produisent le même résultat (display: none). */
    #mobileMenu.hidden, #adminPanel.hidden, #adminLoginCard.hidden,
    #accountLoginForm.hidden, #accountRegisterForm.hidden,
    #accountLoggedOut.hidden, #accountLoggedIn.hidden, #accountUpgradeBox.hidden,
    .faq-answer.hidden, #importFile.hidden, #localFileInput.hidden,
    #iconPause.hidden, #playerLiveBadge.hidden, #playerErrorBanner.hidden,
    #playerProgressWrap.hidden, #mediasRadiosView.hidden,
    #fullIconPause.hidden, #fullPlayerLiveBadge.hidden, #fullPlayerErrorBanner.hidden,
    #fullPlayerProgressWrap.hidden, #fullFavBtn.hidden, #pwaInstallBanner.hidden,
    #iosInstallBanner.hidden,
    #meModal.hidden, #meAccountGroup.hidden, #meLogoutGroup.hidden, #mePanelPlan.hidden, #mePanelOrders.hidden,
    #meHistClear.hidden,
    #libraryActiveBadge.hidden, #activeDownloadsWrap.hidden,
    #fullVoiceBtn.hidden, #voiceStatusBar.hidden, #resumePlaybackBanner.hidden,

    /* ===== Accueil façon maquette ===== */
    /* Le menu horizontal est supprimé : un seul menu, caché à gauche (tiroir ☰). */
    #desktopNav { display: none !important; }
    #mobileMenuBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9998; }
    #mobileMenuBackdrop.hidden { display: none; }
    body #mobileMenu:not(.hidden) { right: auto !important; width: min(340px, 86vw) !important; box-shadow: 10px 0 40px rgba(0,0,0,0.5) !important; animation: bfmDrawerIn 0.22s ease-out; }
    @keyframes bfmDrawerIn { from { transform: translateX(-100%); } to { transform: none; } }
    #homeMoreContent [data-home-section="tendances"] { order: -1 !important; }
    #homeTop { background: #0B1120; padding: 0.9rem 1rem 1.25rem; }
    #homeTop .hts-slogan { font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: 1.05rem; line-height: 1.35; color: #fff; margin: 0 auto 1rem; text-align: center; max-width: 46rem; }
    #homeTop .c-r { color: #EF2B2D; } #homeTop .c-y { color: #FCD116; } #homeTop .c-g { color: #009E49; }
    .home-logo-badge { width: 3.25rem; height: 3.25rem; margin: 0 auto 0.5rem; border-radius: 0.75rem; overflow: hidden; background: linear-gradient(135deg,#009E49,#059669); box-shadow: 0 6px 20px rgba(0,158,73,0.35); }
    .home-logo-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* ===== Vitrines « artiste principal » + « À la une » radios / télés / presse (09/10/2026) ===== */
    .spot { position: relative; border-radius: 1.25rem; overflow: hidden; color: #fff; background: #0B1120; box-shadow: 0 0 0 2px rgba(252,209,22,0.55), 0 14px 40px -12px rgba(0,158,73,0.55); margin: 0 0 1.5rem; }
    .spot-main { position: relative; display: flex; flex-direction: column; min-height: 420px; background: linear-gradient(90deg, rgba(11,17,32,0.96) 0%, rgba(11,17,32,0.82) 55%, rgba(11,17,32,0.55) 100%), var(--spot-bg, none) center / cover; }
    .spot-photo { position: relative; width: 100%; height: 280px; flex: none; }
    .spot-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
    .spot-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,17,32,0.95) 0%, rgba(11,17,32,0) 60%); }
    .spot-info { position: relative; z-index: 2; padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
    .spot-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #0F172A; background: #FCD116; padding: 0.25rem 0.7rem; border-radius: 9999px; }
    .spot-sim { font-size: 0.65rem; font-weight: 700; color: #FCD116; border: 1px dashed rgba(252,209,22,0.7); padding: 0.1rem 0.5rem; border-radius: 9999px; }
    .spot-eyebrow { font-size: 0.78rem; font-weight: 700; color: #FCD116; text-transform: uppercase; letter-spacing: 0.05em; }
    .spot-name { font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1.1; }
    .spot-desc { font-size: 0.9rem; color: rgba(255,255,255,0.82); max-width: 34rem; }
    .spot-btn { border: 0; cursor: pointer; margin-top: 0.3rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.3rem; border-radius: 9999px; background: #009E49; color: #fff; font-weight: 700; font-size: 0.85rem; }
    .spot-btn:hover { background: #047857; }
    .spot-une { display: grid; grid-template-columns: 1fr; gap: 0.75rem; padding: 0.9rem; background: rgba(255,255,255,0.06); border-top: 1px solid rgba(255,255,255,0.12); }
    .spot-une-col { background: rgba(15,23,42,0.75); border-radius: 0.9rem; padding: 0.7rem 0.8rem; min-width: 0; }
    .spot-une-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #FCD116; margin-bottom: 0.45rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
    .spot-une-title button { background: transparent; border: 0; cursor: pointer; font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.75); text-transform: none; letter-spacing: 0; }
    .spot-une-item { background: transparent; border: 0; color: inherit; text-decoration: none; cursor: pointer; display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left; padding: 0.3rem 0.25rem; border-radius: 0.6rem; }
    .spot-une-item:hover { background: rgba(255,255,255,0.1); }
    .spot-une-logo { width: 2rem; height: 2rem; border-radius: 0.55rem; flex: none; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 800; color: #fff; overflow: hidden; }
    .spot-une-logo img { width: 100%; height: 100%; object-fit: cover; }
    .spot-une-name { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .spot-une-meta { font-size: 0.68rem; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    @media (min-width: 768px) {
      .spot-main { flex-direction: row; align-items: stretch; min-height: 400px; }
      .spot-photo { width: 44%; height: auto; min-height: 400px; }
      .spot-photo::after { background: linear-gradient(to right, rgba(11,17,32,0) 55%, rgba(11,17,32,0.95) 100%); }
      .spot-info { width: 56%; justify-content: center; padding: 2rem 2rem 2rem 1rem; gap: 0.7rem; }
      .spot-name { font-size: 2.8rem; }
      .spot-une { grid-template-columns: repeat(3, 1fr); }
    }
    /* Dans l'accueil (colonne centrale plus étroite) : version compacte */
    #homeStaticHero .spot { margin: 0; box-shadow: none; border-radius: 1.25rem; }
    #homeStaticHero .spot-main { min-height: 0; flex-direction: column; }
    #homeStaticHero .spot-photo { width: 100%; height: 230px; min-height: 0; }
    #homeStaticHero .spot-photo::after { background: linear-gradient(to top, rgba(11,17,32,0.95) 0%, rgba(11,17,32,0) 60%); }
    #homeStaticHero .spot-info { width: 100%; padding: 0.9rem 1.1rem 1.1rem; }
    #homeStaticHero .spot-name { font-size: 1.7rem; }
    #homeStaticHero .spot-une { grid-template-columns: 1fr; }
    @media (min-width: 1280px) { #homeStaticHero .spot-photo { height: 280px; } #homeStaticHero .spot-name { font-size: 2rem; } }
    @media (min-width: 640px) { #homeStaticHero .spot-une { grid-template-columns: repeat(var(--n, 3), 1fr); } }
    @media (min-width: 768px) { .spot-une { grid-template-columns: repeat(var(--n, 3), 1fr); } }
    .spot-lineup { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: 0.75rem; padding: 1.25rem 1rem 0.25rem; }
    .spot-side { width: 5.5rem; height: 5.5rem; border-radius: 1rem; overflow: hidden; opacity: 0.8; border: 2px solid rgba(255,255,255,0.15); background: transparent; padding: 0; cursor: pointer; flex: none; }
    .spot-mainbtn { width: 13rem; height: 13rem; border-radius: 1.25rem; overflow: hidden; border: 3px solid #FCD116; box-shadow: 0 14px 40px rgba(0,0,0,0.6); background: transparent; padding: 0; cursor: pointer; flex: none; }
    .spot-side img, .spot-mainbtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
    @media (min-width: 1280px) { .spot-side { width: 7rem; height: 7rem; } .spot-mainbtn { width: 17rem; height: 17rem; } }
    #homeStaticHero .hs-banner { position: relative; background: linear-gradient(rgba(11,17,32,0.9), rgba(11,17,32,0.9)), var(--bg) center / cover; align-items: center; justify-content: center; gap: 1rem; }
    .hs-label { position: absolute; top: 0.9rem; left: 1rem; font-size: 0.8rem; font-weight: 700; background: rgba(0,0,0,0.5); padding: 0.3rem 0.75rem; border-radius: 9999px; }
    .hs-lineup { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
    .hs-lineup button { width: 6.5rem; height: 6.5rem; border-radius: 1rem; overflow: hidden; opacity: 0.85; border: 2px solid rgba(255,255,255,0.15); }
    .hs-lineup button.main { width: 10rem; height: 10rem; opacity: 1; border-color: #FCD116; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
    .hs-lineup img { width: 100%; height: 100%; object-fit: cover; }
    .home-ph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .home-ph-cover { aspect-ratio: 1; border-radius: 0.8rem; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,0.12); transition: transform 0.15s; }
    .home-ph-cover:hover { transform: scale(1.04); }
    .bfm-tile::before { content: ''; position: absolute; inset: 0; background: var(--img) center / cover; animation: bfmKen 16s ease-in-out infinite alternate; }
    .bfm-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0.05) 65%); }
    .bfm-tile-art { display: none; }
    @keyframes bfmKen { from { transform: scale(1); } to { transform: scale(1.12); } }
    @media (prefers-reduced-motion: reduce) { .bfm-tile::before { animation: none; } }
    #homeTopGrid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
    #homeColAffiche { order: 1; min-width: 0; } #homeColTemps { order: 2; } #homeColTendances { order: 3; }
    #homeTopGrid #homeSideTempsForts, #homeTopGrid #homeSideTendances { display: flex; flex-direction: column; gap: 0.5rem; }
    #homeHeroCarousel, #homeStaticHero { margin: 0; border-radius: 1.25rem; box-shadow: 0 0 0 2px rgba(252,209,22,0.55), 0 14px 40px -12px rgba(0,158,73,0.55); }
    #homeHeroTrack { height: 300px !important; }
    #homeStaticHero .hs-banner { background-size: cover; background-position: 62% center; padding: 1.5rem; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 0.5rem; }
    #homeStaticHero .hs-banner-eyebrow { font-size: 0.75rem; font-weight: 700; color: #FCD116; text-transform: uppercase; letter-spacing: 0.05em; }
    #homeStaticHero .hs-banner-title { font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1.2; max-width: 14rem; }
    #homeStaticHero .hs-banner-btn { margin-top: 0.4rem; padding: 0.45rem 1rem; border-radius: 9999px; background: #FCD116; color: #0F172A; font-weight: 700; font-size: 0.8rem; }
    #homeMosaic { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; gap: 0.6rem; }
    .bfm-tile { position: relative; overflow: hidden; border-radius: 1.1rem; cursor: pointer; color: #fff; display: flex; align-items: flex-end; padding: 0.9rem; transition: transform 0.15s; border: 1px solid rgba(255,255,255,0.12); }
    .bfm-tile:hover { transform: translateY(-3px); }
    .bfm-tile-art { position: absolute; right: -0.5rem; top: -0.5rem; width: 75%; height: 130%; max-height: 190px; pointer-events: none; }
    .bfm-tile-txt { position: relative; z-index: 1; }
    .bfm-tile-title { font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: 1.25rem; line-height: 1.1; }
    .bfm-tile-sub { font-size: 0.72rem; opacity: 0.85; margin-top: 0.15rem; }
    .t-music { grid-column: 1 / 3; background: linear-gradient(135deg, #009E49, #064e3b); }
    .t-radio { background: linear-gradient(135deg, #EF2B2D, #7f1d1d); }
    .t-tele { background: linear-gradient(135deg, #F59E0B, #92400e); }
    .t-clip { grid-column: 1 / 3; background: linear-gradient(135deg, #7C3AED, #3b0764); }
    @media (min-width: 640px) { #homeHeroTrack { height: 360px !important; } #homeStaticHero .hs-banner { min-height: 320px; } }
    @media (min-width: 1024px) {
      #homeTop { padding: 1rem 1.5rem 1.5rem; }
      #homeTop .hts-slogan { font-size: 1.6rem; }
      .hs-lineup button { width: 9rem; height: 9rem; } .hs-lineup button.main { width: 14rem; height: 14rem; }
      #homeTopGrid { grid-template-columns: 240px minmax(0, 1fr) 240px; align-items: start; }
      #homeColTemps { order: 1; } #homeColAffiche { order: 2; } #homeColTendances { order: 3; }
      #homeHeroTrack { height: 420px !important; }
      #homeStaticHero .hs-banner { min-height: 420px; }
      #homeStaticHero .hs-banner-title { font-size: 1.9rem; }
      #homeMosaic { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 130px; }
      .t-music { grid-column: 1 / 4; grid-row: 1 / 3; } .t-radio { grid-column: 4 / 7; grid-row: 1 / 2; }
      .t-tele { grid-column: 4 / 6; grid-row: 2 / 3; } .t-clip { grid-column: 6 / 7; grid-row: 2 / 3; }
      .t-music .bfm-tile-title { font-size: 2rem; } .t-clip .bfm-tile-sub { display: none; }
    }
    #langMenu.hidden, #homeHeroCarousel.hidden, #homeStaticHero.hidden, .home-dyn-section.hidden {
      display: none !important;
    }
    /* Même filet de sécurité, dans l'autre sens : ces éléments doivent
       s'afficher en ligne (flex) dès que la classe "hidden" est retirée,
       même si l'utilitaire Tailwind "flex" n'est pas encore chargé. */
    #playerLiveBadge:not(.hidden), #playerErrorBanner:not(.hidden),
    #fullPlayerLiveBadge:not(.hidden), #fullPlayerErrorBanner:not(.hidden),
    #pwaInstallBanner:not(.hidden), #iosInstallBanner:not(.hidden), #libraryActiveBadge:not(.hidden),
    #voiceStatusBar:not(.hidden), #resumePlaybackBanner:not(.hidden) {
      display: flex !important;
    }
    /* Filet de sécurité spécifique au menu mobile plein écran : il ne
       suffit pas de forcer "display", il faut aussi garantir que le
       panneau se place bien par-dessus TOUT le reste de la page (plein
       écran, fond opaque, au premier plan), sinon le contenu de la page
       (ex. la section d'accueil) transparaît à travers et se mélange
       visuellement avec les liens du menu — c'est exactement le bug
       rapporté. Sans cette règle, si le CDN Tailwind ne génère pas encore
       les classes "fixed inset-0 z-40 bg-white dark:bg-slate-900" au
       moment où le menu s'ouvre, le panneau reste positionné normalement
       dans le flux de la page (position:static) et transparent. */
    #mobileMenu:not(.hidden) {
      display: flex !important;
      flex-direction: column !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      z-index: 9999 !important;
      background-color: #ffffff !important;
      overflow-y: auto !important;
    }
    body.dark #mobileMenu:not(.hidden) {
      background-color: #0f172a !important;
    }
    /* Même filet de sécurité pour le petit menu de langue (liste
       déroulante en haut à droite) : doit rester positionné par rapport
       à son bouton et passer au-dessus du reste du contenu, avec un fond
       opaque, même si Tailwind n'a pas encore généré "absolute"/"z-50". */
    #langMenu:not(.hidden) {
      display: block !important;
      position: absolute !important;
      right: 0 !important;
      top: 100% !important;
      margin-top: 0.5rem !important;
      z-index: 9999 !important;
      background-color: #ffffff !important;
    }
    body.dark #langMenu:not(.hidden) {
      background-color: #1e293b !important;
    }
    /* Bandeau du haut sur téléphone : le logo (juste "Nibarka Box", sans
       slogan) et les icônes (langue, recherche, thème, menu — favoris et
       téléchargements ont été retirés d'ici, ils restent dans le menu ☰)
       tiennent maintenant sur une seule ligne bien alignée, avec un
       espacement régulier entre chaque icône. Écrit en CSS pur avec des
       sélecteurs par identifiant (toujours prioritaires sur les classes
       Tailwind, même si le CDN tarde à charger) pour que cet alignement
       soit fiable en toutes circonstances. */
    #headerIconsRow {
      gap: 0.35rem;
    }
    @media (max-width: 400px) {
      #headerIconsRow { gap: 0.15rem; }
      .brand-name { font-size: 1rem; }
    }
    /* Filet de sécurité pour le menu horizontal de bureau (10 liens,
       visible seulement à partir de 1280px de large) : s'il apparaissait
       par erreur sur mobile/tablette (CDN Tailwind lent ou indisponible
       au chargement), ces 10 liens s'empileraient en plein milieu du
       bandeau du haut et casseraient toute la mise en page. Cette règle
       garantit qu'il reste bien masqué en dessous de 1280px, et visible
       en ligne au-dessus, indépendamment de Tailwind. */
    #desktopNav { display: none; }
    @media (min-width: 1280px) {
      #desktopNav { display: flex; }
    }
    /* Même filet de sécurité pour le logo du bandeau du haut (badge NB +
       nom + slogan) : doit toujours s'aligner proprement sur une seule
       ligne horizontale, jamais s'étirer verticalement, quel que soit
       l'état du CDN Tailwind. */
    #headerLogoLink { display: flex; align-items: center; gap: 0.5rem; }
    #navLogoBadge { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
    /* Filet de sécurité pour le menu de langue : #langMenu est en
       position "absolute", ce qui le positionne par rapport au premier
       ancêtre "positionné" qu'il trouve. #langSwitcherWrap doit être cet
       ancêtre (petit repère à côté de l'icône 🌐). Mais si le CDN
       Tailwind n'a pas encore généré sa classe "relative" au moment où
       on clique, le navigateur remonte plus haut dans la page et trouve
       le <header> (qui a un fond flouté, lequel crée aussi un repère de
       positionnement) — le menu de langue s'affiche alors au mauvais
       endroit, ou semble ne pas s'ouvrir du tout. Cette règle garantit
       qu'il reste toujours ancré au bon endroit, sous l'icône 🌐. */
    #langSwitcherWrap { position: relative; }
    /* Même filet de sécurité pour le menu déroulant des rubriques Vidéos
       (et pour tout futur menu déroulant construit sur ce même modèle) :
       ancrage fiable et affichage garanti, indépendamment de Tailwind. */
    #videoCategoryDropdownWrap { position: relative; }
    #videoCategoryDropdownWrap > button, #lireCategoryDropdownWrap > button {
      background-color: #ffffff; color: #0F172A;
    }
    body.dark #videoCategoryDropdownWrap > button, body.dark #lireCategoryDropdownWrap > button {
      background-color: #1e293b; color: #F8FAFC;
    }
    #videoCategoryDropdown:not(.hidden) {
      display: block !important;
      position: absolute !important;
      left: 0 !important;
      top: 100% !important;
      margin-top: 0.5rem !important;
      z-index: 30 !important;
      background-color: #ffffff !important;
    }
    body.dark #videoCategoryDropdown:not(.hidden) {
      background-color: #1e293b !important;
    }
    #lireCategoryDropdownWrap { position: relative; }
    #lireCategoryDropdown:not(.hidden) {
      display: block !important;
      position: absolute !important;
      left: 0 !important;
      top: 100% !important;
      margin-top: 0.5rem !important;
      z-index: 30 !important;
      background-color: #ffffff !important;
    }
    body.dark #lireCategoryDropdown:not(.hidden) {
      background-color: #1e293b !important;
    }
    /* Même filet de sécurité pour le nom + slogan du logo : le slogan
       doit toujours apparaître sous le nom, jamais sur la même ligne,
       même si la classe utilitaire Tailwind "block" n'est pas encore
       disponible. */
    .brand-name, .brand-slogan {
      display: block;
      line-height: 1.25;
    }
    
    .form-group { margin-bottom: 1rem; }
    .form-group label { display: block; font-weight: 500; margin-bottom: 0.5rem; color: #374151; }
    .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.9rem; }
    
    .badge-new { background: #10B981; color: white; padding: 4px 12px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
    
    .genre-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 600; }
    .genre-afrobeat { background: #FDE68A; color: #92400E; }
    .genre-rap { background: #BFDBFE; color: #1E40AF; }
    .genre-rnb { background: #FBCFE8; color: #9D174D; }
    .genre-reggae { background: #BBF7D0; color: #166534; }
    .genre-traditionnel { background: #FED7AA; color: #9A3412; }
    .genre-gospel { background: #DDD6FE; color: #5B21B6; }
    .genre-jazz { background: #E0E7FF; color: #3730A3; }
    .genre-autre { background: #E5E7EB; color: #374151; }
    
    .creator-step { display: none; }
    .creator-step.active { display: block; animation: fadeIn 0.4s ease-in; }
    
    .profile-card { transition: all 0.3s; cursor: pointer; border: 2px solid transparent; }
    .profile-card:hover { transform: translateY(-4px); border-color: #009E49; }
    .profile-card.selected { border-color: #009E49; background: linear-gradient(135deg, rgba(0,158,73,0.1), rgba(0,158,73,0.05)); }
    
    .sidebar-item { transition: all 0.2s; cursor: pointer; }
    .sidebar-item:hover { background: rgba(0,158,73,0.1); }
    .sidebar-item.active { background: rgba(0,158,73,0.15); border-left: 3px solid #009E49; color: #009E49; font-weight: 600; }
    
    .stat-card { transition: all 0.3s; }
    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
    
    .content-type-btn { transition: all 0.2s; }
    .content-type-btn:hover { transform: scale(1.05); }
    .content-type-btn.selected { border-color: #009E49 !important; background: rgba(0,158,73,0.1) !important; }
    
    .faq-item { border-bottom: 1px solid #e2e8f0; }
    .faq-question { padding: 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
    .faq-question i, .faq-question svg { transition: transform 0.2s ease; }
    .faq-question.faq-open i, .faq-question.faq-open svg { transform: rotate(180deg); }
    .faq-answer { padding: 0 1rem 1rem; }
    
    .partner-card { background: white; border-radius: 12px; padding: 1.5rem; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.3s; }
    .partner-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
    .partner-logo { width: 80px; height: 80px; margin: 0 auto 1rem; background: linear-gradient(135deg, var(--bf-green), var(--bf-green-dark)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; }
    
    @media (max-width: 768px) {
      .player-content { padding: 0.5rem 1rem; }
    }
  
    /* ===== Cases en couleur façon « Hotlist » (09/10/2026) : cartes carrées égales, légende dessous ===== */
    .hl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 1.25rem 0 0.75rem; }
    .hl-head h2 { font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: 1.35rem; color: #fff; margin: 0; }
    .hl-head span { font-size: 0.78rem; color: #22D3EE; font-weight: 600; }
    #homeMosaic { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; gap: 1rem !important; }
    #homeMosaic .hl-item { min-width: 0; }
    #homeMosaic .bfm-tile { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 1 / 1; width: 100%; padding: 0; border-radius: 0.9rem; border: 0; box-shadow: 0 8px 22px -10px rgba(0,0,0,0.7); isolation: isolate; }
    #homeMosaic .bfm-tile::before { animation: none; background: radial-gradient(circle at 78% 18%, rgba(255,255,255,0.28), transparent 45%), radial-gradient(circle at 15% 95%, rgba(0,0,0,0.35), transparent 55%); transform: none; }
    #homeMosaic .bfm-tile::after { background: linear-gradient(0deg, rgba(0,0,0,0.45), transparent 45%); }
    #homeMosaic .bfm-tile:hover { transform: translateY(-4px) scale(1.02); }
    #homeMosaic .t-music { background: linear-gradient(145deg, #00B552, #00693A); }
    #homeMosaic .t-radio { background: linear-gradient(145deg, #FF4B4D, #A3141A); }
    #homeMosaic .t-tele  { background: linear-gradient(145deg, #FFC83D, #E0780B); }
    #homeMosaic .t-clip  { background: linear-gradient(145deg, #9B5CFF, #4C1D95); }
    .hl-art { position: absolute; z-index: 1; left: 50%; top: 46%; width: 58%; height: 58%; transform: translate(-50%, -50%); opacity: 0.95; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35)); }
    .hl-logo { position: absolute; z-index: 2; top: 0.5rem; left: 0.5rem; background: #fff; color: #0F172A; font: 800 0.65rem/1 Montserrat, system-ui, sans-serif; padding: 0.28rem 0.38rem; border-radius: 0.4rem; }
    .hl-pill { position: absolute; z-index: 2; left: 0.55rem; bottom: 0.55rem; font-size: 0.72rem; font-weight: 700; color: #fff; background: rgba(0,0,0,0.38); backdrop-filter: blur(3px); padding: 0.2rem 0.55rem; border-radius: 9999px; }
    .hl-cap { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.1rem; }
    .hl-cap b { color: #fff; font-size: 0.95rem; font-weight: 700; }
    .hl-cap span { color: #94a3b8; font-size: 0.75rem; }
    @media (min-width: 1024px) { #homeMosaic { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .hl-head h2 { font-size: 1.6rem; } }
  
    /* ===== Réglage 10/10/2026 : petites cases, recherche au bouton jaune, grande affiche ===== */
    .hs-actions-row { display: flex; justify-content: center; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.75rem 0.75rem; background: #0B1120; }
    .hs-actions-row .hs-banner-btn { margin-top: 0; display: inline-flex; align-items: center; gap: 0.4rem; line-height: 1.2; cursor: pointer; }
    .hs-actions-row .hs-search { background: #fff; color: #0F172A; }
    .hs-actions-row .hs-search input { background: transparent; border: 0; outline: 0; width: 8.5rem; font: inherit; font-weight: 600; color: #0F172A; padding: 0; }
    .hs-actions-row .hs-search input::placeholder { color: #64748b; font-weight: 500; }
    #homeMosaic { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; margin-top: 0.75rem; }
    #homeMosaic .hl-item { display: flex; align-items: center; gap: 0.55rem; background: #131a2b; border: 1px solid rgba(255,255,255,0.08); border-radius: 0.7rem; padding: 0.35rem 0.6rem 0.35rem 0.35rem; cursor: pointer; }
    #homeMosaic .hl-item:hover { border-color: #FCD116; }
    #homeMosaic .bfm-tile { flex: none; width: 2.4rem; height: 2.4rem; aspect-ratio: auto; border-radius: 0.55rem; box-shadow: none; }
    #homeMosaic .bfm-tile::before, #homeMosaic .bfm-tile::after, #homeMosaic .hl-logo, #homeMosaic .hl-pill, #homeMosaic .hl-cap span { display: none; }
    #homeMosaic .bfm-tile:hover { transform: none; }
    #homeMosaic .hl-art { width: 66%; height: 66%; top: 50%; filter: none; }
    #homeMosaic .hl-cap { margin: 0; } #homeMosaic .hl-cap b { font-size: 0.85rem; }
    @media (min-width: 640px) { #homeMosaic { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
    /* Le reste du milieu va à « À l'affiche » */
    #homeHeroTrack { height: 380px !important; }
    @media (min-width: 640px) { #homeHeroTrack { height: 440px !important; } #homeStaticHero .hs-banner { min-height: 440px; } }
    @media (min-width: 1024px) { #homeHeroTrack { height: 560px !important; } #homeStaticHero .hs-banner { min-height: 560px; } .spot-mainbtn { width: 22rem; height: 22rem; } .spot-side { width: 8rem; height: 8rem; } }
    @media (min-width: 1280px) { .spot-mainbtn { width: 24rem; height: 24rem; } .spot-side { width: 9rem; height: 9rem; } }
  
    /* ===== Réglage 10/10/2026 (2) : slogan en une box plus haut, cadres jaunes plus épais ===== */
    #homeTop { padding-top: 0.5rem !important; }
    #homeTop .hts-slogan { display: block; width: fit-content; max-width: 100%; margin: 0 auto 0.75rem; padding: 0.45rem 1.1rem; font-size: 0.9rem; line-height: 1.3; background: #131a2b; border: 1px solid rgba(255,255,255,0.12); border-radius: 0.8rem; }
    @media (min-width: 1024px) { #homeTop .hts-slogan { font-size: 1.15rem; } }
    #homeHeroCarousel, #homeStaticHero { border: 5px solid #FCD116; box-shadow: 0 14px 40px -12px rgba(0,158,73,0.55); overflow: hidden; }
    .spot-mainbtn { border-width: 6px; border-color: #FCD116; border-radius: 1.4rem; }
    .spot-mainbtn img { display: block; width: 100%; height: 100%; object-fit: cover; }
  
  
  
    /* ===== Réglage final (2) 10/10/2026 : recherche verte, petite, hors du cadre ; le cadre jaune porte l'artiste / le média à l'affiche ===== */
    .hs-actions-row { display: flex; justify-content: center; padding: 0 0 0.6rem; background: transparent; }
    .hs-actions-row .hs-search { display: flex; align-items: center; gap: 0.45rem; width: min(100%, 13rem); padding: 0.4rem 0.9rem; border-radius: 9999px; background: #009E49; color: #fff; font-weight: 600; font-size: 0.85rem; box-shadow: 0 4px 12px -4px rgba(0,158,73,0.7); cursor: text; margin: 0; }
    .hs-actions-row .hs-search svg { flex: none; width: 15px; height: 15px; }
    .hs-actions-row .hs-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; box-shadow: none; color: #fff; font: inherit; padding: 0; }
    .hs-actions-row .hs-search input::placeholder { color: rgba(255,255,255,0.88); }
    .hs-actions-row .hs-search:focus-within { background: #00863d; outline: 2px solid #FCD116; outline-offset: 2px; }
    #homeStaticHero { display: block; position: relative; min-height: 18rem; background: #0B1120; border: 4px solid #FCD116; }
    #homeStaticHero::before { content: "⭐ À l'affiche"; position: absolute; left: 1rem; top: 0.8rem; z-index: 0; font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: 1.1rem; color: rgba(255,255,255,0.2); }
    #homeStaticHero > * { position: relative; z-index: 1; }
    #homeHeroTrack { height: 20rem !important; }
    .spot-mainbtn { width: 11rem; height: 11rem; border-width: 5px; }
    .spot-side { width: 4.5rem; height: 4.5rem; }
    @media (min-width: 1024px) {
      #homeStaticHero { min-height: 21rem; } #homeHeroTrack { height: 21rem !important; }
      .spot-mainbtn { width: 13rem; height: 13rem; } .spot-side { width: 5.5rem; height: 5.5rem; }
    }
  
    /* ===== Réglage final (3) 10/10/2026 : cadre jaune plus petit et fluide selon l'écran ===== */
    #homeStaticHero { min-height: clamp(11rem, 30vw, 15rem); border-width: 3px; }
    #homeHeroTrack { height: clamp(11rem, 30vw, 15rem) !important; }
    .spot-lineup { padding: 0.6rem 0.75rem 0.2rem; gap: 0.5rem; }
    .spot-mainbtn { width: clamp(7rem, 18vw, 9.5rem); height: clamp(7rem, 18vw, 9.5rem); border-width: 4px; }
    .spot-side { width: clamp(3.2rem, 8vw, 4.5rem); height: clamp(3.2rem, 8vw, 4.5rem); }
    @media (min-width: 1024px) {
      #homeStaticHero { min-height: 15rem; } #homeHeroTrack { height: 15rem !important; }
      .spot-mainbtn { width: 10rem; height: 10rem; } .spot-side { width: 4.5rem; height: 4.5rem; }
    }
    @media (min-width: 1280px) { .spot-mainbtn { width: 10.5rem; height: 10.5rem; } }
  
    /* ===== Cadre « À l'affiche » lié aux cases + étiquette accrochée (10/10/2026) ===== */
    #homeStaticHero { padding-top: 2.4rem; }
    #homeStaticHero::before { content: none; }
    #homeStaticHero > .hs-pin { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.7rem; background: #FCD116; color: #0F172A; }
    .hs-pin-label { font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hs-pin-all { border: 0; background: rgba(15,23,42,0.88); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.65rem; border-radius: 9999px; cursor: pointer; white-space: nowrap; }
    #homeStaticHero .spot-badge { display: none; }
    #homeStaticHero > .hs-empty { display: none; position: absolute; inset: 2.4rem 0 0 0; align-items: center; justify-content: center; color: rgba(255,255,255,0.45); font-weight: 600; font-size: 0.9rem; text-align: center; padding: 1rem; }
    #homeStaticHero > .spot[style*="display: none"] + .hs-empty { display: flex; }
    #homeMosaic .hl-item.is-active { border-color: #FCD116; background: rgba(252,209,22,0.14); }
    #homeMosaic .hl-item.is-active .hl-cap b { color: #FCD116; }
    /* Version compacte pour Musique / Radio / Télé / Clip dans le cadre */
    #spot-affiche:not([data-spot="affiche"]) .spot-main { flex-direction: row; align-items: center; gap: 0.9rem; padding: 0.6rem 0.9rem; min-height: 0; }
    #spot-affiche:not([data-spot="affiche"]) .spot-photo { width: clamp(6.5rem, 22vw, 9.5rem); height: clamp(6.5rem, 22vw, 9.5rem); min-height: 0; flex: none; border-radius: 0.9rem; overflow: hidden; border: 3px solid #FCD116; }
    #spot-affiche:not([data-spot="affiche"]) .spot-photo::after { display: none; }
    #spot-affiche:not([data-spot="affiche"]) .spot-info { width: auto; flex: 1; min-width: 0; padding: 0; }
    #spot-affiche:not([data-spot="affiche"]) .spot-name { font-size: clamp(1.2rem, 3vw, 1.7rem); }
    #spot-affiche:not([data-spot="affiche"]) .spot-une { display: none; }
  
    /* ===== Refonte interface mobile (10/10/2026) ===== */
    /* En-tête : logo complet, centré, aéré ; boutons harmonisés */
    #headerLogoLink { padding: 0.35rem 0; margin-left: 0.15rem; gap: 0.6rem; align-items: center; }
    #navLogoBadge { width: 2.9rem; height: 2.9rem; background: #fff !important; padding: 2px; border-radius: 0.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
    #navLogoBadge img, #mobileNavLogoBadge img, #footerLogoBadge img { object-fit: contain !important; }
    #headerIconsRow { gap: 0.6rem; }
    #headerIconsRow > button { min-width: 2.5rem; min-height: 2.5rem; border-radius: 0.7rem; }
    .hdr-green { background: #0B5D3B !important; color: #fff !important; border: 0; }
    .hdr-green:hover { background: #0e7048 !important; }
    .hdr-green svg, .hdr-green i { color: #fff; stroke: #fff; }
    #headerIconsRow > button[aria-label="Ajouter mon contenu"] { background: #FCD116; color: #0F172A; }
    .hdr-plus { stroke: #0F172A !important; }
    /* Bannière : texte plus clair / plus contrasté */
    #homeTop .hts-slogan { color: #fff; background: #0e1424; border-color: rgba(255,255,255,0.2); text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
    #homeTop .c-r { color: #FF6466; } #homeTop .c-y { color: #FFDF4D; } #homeTop .c-g { color: #34D67D; }
    .hs-actions-row .hs-search { width: min(100%, 16rem); }
    .hs-filter { flex: none; display: flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; margin-right: -0.4rem; border: 0; border-radius: 9999px; background: rgba(255,255,255,0.18); color: #fff; cursor: pointer; }
    .hs-filter:hover { background: rgba(255,255,255,0.3); }
    /* État vide « À l'affiche » : illustration + Découvrir */
    #homeStaticHero > .hs-empty { gap: 1rem; flex-direction: row; padding: 0.75rem 1rem; color: #fff; text-align: left; }
    #homeStaticHero > .spot[style*="display: none"] + .hs-empty { display: flex; }
    .hs-empty-art { flex: none; width: clamp(6rem, 24vw, 9rem); height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.45)); }
    .hs-empty-txt { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; min-width: 0; }
    .hs-empty-txt b { font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: clamp(0.95rem, 2.6vw, 1.25rem); line-height: 1.15; }
    .hs-empty-txt span { font-size: 0.8rem; color: rgba(255,255,255,0.75); }
    .hs-discover { margin-top: 0.3rem; border: 0; cursor: pointer; background: #FCD116; color: #0F172A; font-weight: 800; font-size: 0.85rem; padding: 0.5rem 1.4rem; border-radius: 9999px; box-shadow: 0 4px 14px -4px rgba(252,209,22,0.7); }
    .hs-discover:hover { background: #ffdf3d; }
    /* Temps forts / Tendances : squelettes scintillants */
    @keyframes bfmShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
    #homeSideTempsForts .home-ph-cover, #homeSideTendances .home-ph-cover { background-image: linear-gradient(100deg, #131a2b 30%, #26334f 50%, #131a2b 70%) !important; background-size: 200% 100% !important; animation: bfmShimmer 1.8s linear infinite; pointer-events: none; }
    @media (prefers-reduced-motion: reduce) { #homeSideTempsForts .home-ph-cover, #homeSideTendances .home-ph-cover { animation: none; } }
    /* Lecteur : texte entier avec défilement, commandes plus espacées */
    .bfm-pl-title, .bfm-pl-sub { text-overflow: clip; }
    .bfm-pl-title.marq, .bfm-pl-sub.marq { animation: bfmPlMarq var(--pl-dur, 10s) linear infinite; }
    @keyframes bfmPlMarq { 0%, 12% { text-indent: 0; } 88%, 100% { text-indent: var(--pl-shift, 0); } }
    @media (prefers-reduced-motion: reduce) { .bfm-pl-title.marq, .bfm-pl-sub.marq { animation: none; } }
    .bfm-pl-center { gap: 1.7rem; }
    .bfm-pl-right { gap: 0.8rem; }
    .bfm-pl-skip { width: 2.6rem; height: 2.6rem; }
    .bfm-pl-ico { width: 2.5rem; height: 2.5rem; }
    @media (max-width: 767px) { .bfm-pl-center { gap: 1.05rem; } .bfm-pl-right { gap: 0.55rem; } .bfm-pl-left { flex: 1 1 0; } }
  
    /* ===== Bande de médias réels dans le cadre « À l'affiche » ===== */
    .hs-strip { display: flex; gap: 0.7rem; overflow-x: auto; padding: 0.7rem 0.8rem 0.8rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .hs-strip::-webkit-scrollbar { height: 6px; } .hs-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 9999px; }
    .hs-card { flex: 0 0 clamp(9rem, 38vw, 12.5rem); display: flex; flex-direction: column; gap: 0.3rem; text-align: left; background: transparent; border: 0; padding: 0; color: #fff; cursor: pointer; scroll-snap-align: start; min-width: 0; }
    .hs-card-cover { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; border-radius: 0.8rem; background-size: cover; background-position: center; border: 2px solid rgba(252,209,22,0.7); overflow: hidden; transition: transform 0.15s; }
    .hs-card:hover .hs-card-cover { transform: translateY(-2px); }
    .hs-card-emoji { font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
    .hs-card-play { position: absolute; right: 0.4rem; bottom: 0.4rem; width: 1.7rem; height: 1.7rem; border-radius: 9999px; background: #009E49; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
    .hs-card-title { font-size: 0.82rem; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .hs-card-sub { font-size: 0.7rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  
    /* ===== Mobile (10/10/2026) : ordre À l'affiche → Musique/Radio/Télé/Clip → Tendances → Temps forts ; affiche verticale et courte ===== */
    .hs-actions-row .hs-search { background: linear-gradient(135deg, #0B5D3B, #087a4a); border: 1px solid rgba(52,214,125,0.55); color: #fff; box-shadow: 0 4px 14px -6px rgba(0,158,73,0.8); }
    .hs-actions-row .hs-search:focus-within { background: #0B5D3B; outline: 2px solid #34D67D; outline-offset: 2px; }
    .hs-actions-row .hs-filter { background: rgba(255,255,255,0.16); }
    @media (max-width: 1023px) {
      #homeTop { display: flex; flex-direction: column; gap: 0.9rem; }
      #homeTopGrid { display: contents; }
      #homeTop > .hts-slogan { order: 0; margin-bottom: 0; }
      #homeColAffiche { order: 1; }
      #homeMosaic { order: 2; margin-top: 0; }
      #homeColTendances { order: 3; }
      #homeColTemps { order: 4; }
    }
    @media (max-width: 639px) {
      #homeStaticHero { min-height: 0; }
      .hs-strip { flex-direction: column; overflow: visible; gap: 0.5rem; padding: 0.6rem 0.7rem 0.7rem; }
      .hs-card { flex: none; width: 100%; display: grid; grid-template-columns: 5.6rem 1fr; column-gap: 0.7rem; row-gap: 0; align-items: center; }
      .hs-card-cover { grid-row: 1 / 3; }
      .hs-card-title { align-self: end; } .hs-card-sub { align-self: start; }
      .hs-card:nth-child(n+4) { display: none; }
    }
  
    /* ===== Cadre « À l'affiche » multicolore comme la barre du lecteur (rouge · vert · jaune) ===== */
    #homeHeroCarousel, #homeStaticHero {
      border: 4px solid transparent;
      background: linear-gradient(#0B1120, #0B1120) padding-box, linear-gradient(90deg, #EF2B2D, #009E49 55%, #FCD116) border-box;
    }
    #homeStaticHero > .hs-pin { background: linear-gradient(90deg, #EF2B2D, #009E49 55%, #FCD116); color: #fff; }
    #homeStaticHero .hs-pin-label { text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
    /* Mobile : UNE seule vidéo occupe tout le « trou » ; on fait défiler pour voir les suivantes */
    @media (max-width: 639px) {
      #homeStaticHero .hs-strip { display: block; height: 13.5rem; padding: 0; gap: 0; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; }
      #homeStaticHero .hs-card, #homeStaticHero .hs-card:nth-child(n+4) { display: block; position: relative; width: 100%; height: 100%; flex: none; scroll-snap-align: start; scroll-snap-stop: always; }
      #homeStaticHero .hs-card-cover { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; grid-row: auto; }
      #homeStaticHero .hs-card-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 55%); }
      #homeStaticHero .hs-card-play { width: 2.8rem; height: 2.8rem; right: 50%; bottom: 50%; transform: translate(50%, 50%); font-size: 1rem; z-index: 2; }
      #homeStaticHero .hs-card-title, #homeStaticHero .hs-card-sub { position: absolute; left: 0.9rem; right: 0.9rem; z-index: 2; }
      #homeStaticHero .hs-card-title { bottom: 1.45rem; font-size: 1rem; align-self: auto; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
      #homeStaticHero .hs-card-sub { bottom: 0.6rem; color: rgba(255,255,255,0.85); align-self: auto; }
    }
  
    /* Nouveau logo NB (10/10/2026) */
    #navLogoBadge { width: 3.1rem; height: 3.1rem; }

    /* ================= Correctifs UI — 10/10/2026 ================= */
    :root { --bfm-player-h: 96px; }

    /* Logo : SVG de secours sous l'image (l'image se retire si elle est cassée) */
    #navLogoBadge, #mobileNavLogoBadge, #footerLogoBadge, #homeLogoBadge { position: relative; }
    .nb-logo-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    #navLogoBadge > img, #mobileNavLogoBadge > img, #footerLogoBadge > img, #homeLogoBadge > img { position: absolute; inset: 0; width: 100%; height: 100%; }

    /* Recherche : champ assez large pour le nouveau texte d'invite */
    .hs-actions-row .hs-search input { width: clamp(9.5rem, 52vw, 19rem); text-overflow: ellipsis; }
    .hs-actions-row .hs-search input::placeholder { text-overflow: ellipsis; }

    /* Bouton « + » : infobulle au survol et au focus clavier */
    .hdr-tip { position: relative; }
    .hdr-tip::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; white-space: nowrap;
      background: #0F172A; color: #fff; font: 600 0.75rem/1.2 Inter, system-ui, sans-serif; padding: 0.4rem 0.65rem; border-radius: 0.5rem;
      border: 1px solid rgba(252,209,22,0.55); box-shadow: 0 6px 18px rgba(0,0,0,0.4);
      opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
    .hdr-tip:hover::after, .hdr-tip:focus-visible::after { opacity: 1; transform: none; }
    @media (hover: none) { .hdr-tip::after { display: none; } }

    /* Cartes Musique / Radio / Télé / Clip : même gabarit, même halo « néon », 1 couleur du drapeau chacune
       (Clip = tricolore rouge · jaune · vert au lieu du violet) */
    #homeMosaic .hl-item {
      --acc: #009E49; --acc-rgb: 0,158,73;
      --ring: linear-gradient(135deg, var(--acc), var(--acc));
      border: 1.5px solid transparent;
      background: linear-gradient(180deg, #151d30, #0d1424) padding-box, var(--ring) border-box;
      box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .10), 0 0 16px -4px rgba(var(--acc-rgb), .55);
      transition: transform .15s ease, box-shadow .2s ease;
    }
    #homeMosaic .hl-item[data-afkey="radio"] { --acc: #EF2B2D; --acc-rgb: 239,43,45; }
    #homeMosaic .hl-item[data-afkey="tele"]  { --acc: #FCD116; --acc-rgb: 252,209,22; }
    #homeMosaic .hl-item[data-afkey="clip"]  { --acc: #FCD116; --acc-rgb: 252,209,22;
      --ring: linear-gradient(135deg, #EF2B2D 0%, #FCD116 50%, #009E49 100%); }
    #homeMosaic .hl-item:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .25), 0 0 24px -2px rgba(var(--acc-rgb), .75); }
    #homeMosaic .hl-item.is-active {
      background: linear-gradient(rgba(var(--acc-rgb), .18), rgba(var(--acc-rgb), .18)) padding-box, linear-gradient(180deg, #151d30, #0d1424) padding-box, var(--ring) border-box;
      box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .35), 0 0 26px -2px rgba(var(--acc-rgb), .85);
    }
    #homeMosaic .hl-item.is-active .hl-cap b, #homeMosaic .hl-item .hl-cap b { color: #fff; }
    #homeMosaic .hl-item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    #homeMosaic .hl-item .bfm-tile {
      border: 1.5px solid transparent;
      background: linear-gradient(rgba(var(--acc-rgb), .14), rgba(var(--acc-rgb), .14)) padding-box, linear-gradient(#0d1424, #0d1424) padding-box, var(--ring) border-box;
    }
    #homeMosaic .hl-item .hl-art { stroke: var(--acc); stroke-width: 7; }

    /* Lecteur du bas : états synchronisés (lecture · pause · à l'affiche) */
    .bfm-pl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .bfm-pl-thumb { transition: box-shadow .2s ease, opacity .2s ease; font-size: 1.4rem; }
    #globalPlayer.is-playing .bfm-pl-thumb { box-shadow: 0 0 0 2px #009E49, 0 0 14px rgba(0,158,73,.65); }
    #globalPlayer.is-paused  .bfm-pl-thumb { box-shadow: 0 0 0 2px rgba(252,209,22,.75); }
    #globalPlayer.is-idle    .bfm-pl-thumb { box-shadow: 0 0 0 2px rgba(239,43,45,.55); }
    .bfm-pl-sub[data-state]::before { content: attr(data-state) " · "; color: #FCD116; font-weight: 700; }
    #globalPlayer.is-playing .bfm-pl-sub[data-state]::before { color: #22C55E; }

    /* Marge basse de la page = hauteur réelle du lecteur (mesurée en JS) + zone sûre : rien n'est masqué */
    footer.bg-bf-dark { padding-bottom: calc(var(--bfm-player-h) + 1.5rem) !important; }
    html { scroll-padding-bottom: calc(var(--bfm-player-h) + 1rem); }
    #videoModalOverlay.mini { bottom: calc(var(--bfm-player-h) + 0.5rem) !important; }

    /* ===== Accueil sobre : fond noir, écriture blanche (10/10/2026) =====
       Ne touche NI au header, NI à la barre/bouton de recherche (.hs-search), NI au lecteur du bas. */
    #page-home, #homeTop, #homeMoreContent { background: #000 !important; color: #fff; }
    .hs-actions-row { background: #000; }               /* seulement le fond de la rangée, pas le bouton */
    #homeTop .hts-slogan { background: #000; border-color: rgba(255,255,255,0.22); color: #fff; text-shadow: none; }
    #homeTop .c-r { color: #F0393B; } #homeTop .c-y { color: #FCD116; } #homeTop .c-g { color: #12B860; } /* rouge · jaune · vert (10/10/2026) */
    .home-side-panel-title { color: #fff; }
    .home-side-card { background: #0a0a0a; border-color: rgba(255,255,255,0.14); }
    .home-side-card:hover { background: #141414; border-color: rgba(255,255,255,0.4); }
    .home-side-card-title { color: #fff; } .home-side-card-subtitle { color: #a3a3a3; }
    .home-side-card-soon-dot { background: #fff; border-color: #000; }
    .home-side-card-cover { background: #171717; }

    /* Cadre « À l'affiche » : plus de jaune/vert, simple filet blanc */
    #homeHeroCarousel, #homeStaticHero { background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,0.28); }
    #homeStaticHero > .hs-pin { background: #000; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.22); }
    #homeStaticHero .hs-pin-label { text-shadow: none; color: #fff; }
    #homeStaticHero .hs-pin-all { background: #fff; color: #000; }
    #homeStaticHero .hs-banner-eyebrow { color: #d4d4d4; }
    #homeStaticHero .hs-banner-btn { background: #fff; color: #000; }
    #page-home .spot-main { background-color: #000; }
    #page-home .spot-badge { background: #fff; color: #000; }
    #page-home .spot-name { color: #fff; } #page-home .spot-desc { color: #d4d4d4; }
    #page-home .spot-btn { background: #fff; color: #000; } #page-home .spot-btn:hover { background: #e5e5e5; }
    #page-home .hs-lineup button.main { border-color: #fff; }
    #page-home .hs-empty-art { filter: grayscale(1) drop-shadow(0 8px 14px rgba(0,0,0,0.45)); }
    #page-home .hs-discover { background: #fff; color: #000; }

    /* Cartes Musique / Radio / Télé / Clip : monochromes */
    #homeMosaic .hl-item, #homeMosaic .hl-item[data-afkey] {
      --acc: #fff; --acc-rgb: 255,255,255; --ring: linear-gradient(135deg, #fff, #fff);
      background: #0a0a0a; border: 1px solid rgba(255,255,255,0.18); box-shadow: none;
    }
    #homeMosaic .hl-item:hover { border-color: rgba(255,255,255,0.55); box-shadow: none; }
    #homeMosaic .hl-item.is-active { background: #1a1a1a; border-color: #fff; box-shadow: none; }
    #homeMosaic .hl-item .bfm-tile { background: #000; border: 1px solid rgba(255,255,255,0.35); }
    #homeMosaic .hl-item .hl-art { stroke: #fff; }

    /* Rubriques dynamiques sous le haut de l'accueil */
    #page-home .home-dyn-section { background: #000 !important; }
    #page-home .home-dyn-section h2, #page-home .home-dyn-section h3 { color: #fff !important; }
    #page-home .home-dyn-section a.text-bf-green, #page-home .home-dyn-section [class*="text-bf-green"] { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
    #page-home .home-dyn-section [class*="text-slate"], #page-home .home-dyn-section [class*="text-gray"] { color: #a3a3a3 !important; }
    #page-home .home-dyn-section [class*="bg-white"], #page-home .home-dyn-section [class*="bg-slate-"] { background-color: #0a0a0a !important; }
    #page-home .home-card { background: #0a0a0a; border-color: rgba(255,255,255,0.14); color: #fff; }
    #page-home .home-card:hover { box-shadow: none; border-color: rgba(255,255,255,0.5); }
    #page-home .home-card-title { color: #fff; } #page-home .home-card-subtitle { color: #a3a3a3; }
    #page-home .home-row-arrow { background: #fff; color: #000; }

    /* ===== Administration : pages entières, menu à gauche (10/10/2026) ===== */
    .admin-wide { width: 100%; max-width: 1600px; margin: 0 auto; padding: 1.25rem 1rem; }
    @media (min-width: 1024px) { .admin-wide { padding: 1.5rem 2rem; } }
    #page-admin .admin-login-narrow { max-width: 32rem; margin-left: auto; margin-right: auto; }
    #adminPanel:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
    #adminMain { display: flex; flex-direction: column; min-width: 0; }
    #adminMain > [data-ag] { display: none; }
    #adminMain[data-view="contenus"] > [data-ag="contenus"],
    #adminMain[data-view="comptes"] > [data-ag="comptes"],
    #adminMain[data-view="boutique"] > [data-ag="boutique"],
    #adminMain[data-view="paiements"] > [data-ag="paiements"],
    #adminMain[data-view="medias"] > [data-ag="medias"],
    #adminMain[data-view="accueil"] > [data-ag="accueil"],
    #adminMain[data-view="site"] > [data-ag="site"],
    #adminMain[data-view="outils"] > [data-ag="outils"],
    #adminMain[data-view="form"] > [data-ag="form"] { display: block; }
    .admin-viewhead h2 { font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; margin: 0 0 .15rem; }
    .admin-viewhead p { font-size: .9rem; color: #64748b; margin: 0 0 1.25rem; }
    .dark .admin-viewhead p { color: #94a3b8; }
    #adminMain[data-view="form"] > .admin-viewhead { display: none; }

    /* Menu : colonne à gauche sur ordinateur, bandeau défilant sur téléphone */
    #adminNav { display: flex; gap: .5rem; overflow-x: auto; padding: .5rem 0; position: sticky; top: 4rem; z-index: 30; background: #f8fafc; scrollbar-width: thin; }
    .dark #adminNav { background: #0f172a; }
    .admin-nav-btn { display: inline-flex; align-items: center; gap: .5rem; flex: none; white-space: nowrap; padding: .6rem .9rem; border-radius: .75rem;
      font-weight: 600; font-size: .9rem; color: #334155; background: #fff; border: 1px solid #e2e8f0; cursor: pointer; text-align: left; }
    .dark .admin-nav-btn { color: #e2e8f0; background: #1e293b; border-color: #334155; }
    .admin-nav-btn:hover { border-color: #009E49; }
    .admin-nav-btn.is-active { background: #009E49; border-color: #009E49; color: #fff; }
    .admin-nav-out { color: #b91c1c; } .dark .admin-nav-out { color: #fca5a5; }
    @media (min-width: 1024px) {
      #adminPanel:not(.hidden) { grid-template-columns: 270px minmax(0, 1fr); gap: 2rem; align-items: start; }
      #adminNav { flex-direction: column; overflow: visible; top: 5rem; background: transparent; padding: 0; }
      .dark #adminNav { background: transparent; }
      .admin-nav-btn { width: 100%; padding: .75rem 1rem; font-size: .95rem; }
      .admin-nav-out { margin-top: .75rem; }
    }

    /* Page « Ajouter / modifier un contenu » (remplace l'ancienne fenêtre) */
    .admin-formpage-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
    .admin-back { padding: .55rem 1rem; border-radius: 9999px; font-weight: 700; font-size: .9rem; background: #fff; color: #0F172A; border: 1px solid #cbd5e1; cursor: pointer; }
    .dark .admin-back { background: #1e293b; color: #fff; border-color: #475569; }
    .admin-back:hover { border-color: #009E49; }
    .admin-formpage-card { background: #fff; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 10px 25px -12px rgba(0,0,0,.25); }
    .dark .admin-formpage-card { background: #1e293b; }
    @media (min-width: 1024px) { .admin-formpage-card { padding: 2rem; } }
    .admin-formpage-type { max-width: 28rem; }
    #contentModalFields { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.5rem; }
    @media (min-width: 1024px) { #contentModalFields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #contentModalFields .form-group:has(textarea) { grid-column: 1 / -1; } }
    .admin-form-actions { display: flex; gap: .75rem; margin-top: 1.5rem; position: sticky; bottom: calc(var(--bfm-player-h, 96px) + .5rem); padding: .75rem 0; background: inherit; }
    .admin-form-actions button { flex: 1; padding: .85rem 1rem; border-radius: .6rem; font-weight: 700; cursor: pointer; }
    @media (min-width: 1024px) { .admin-form-actions button { flex: 0 0 14rem; } .admin-form-actions { justify-content: flex-end; } }
    .admin-btn-cancel { background: #e2e8f0; color: #334155; } .dark .admin-btn-cancel { background: #334155; color: #e2e8f0; }
    .admin-btn-save { background: #009E49; color: #fff; }

    /* Sélecteur de langue du pied de page (en plus de « Mon Compte ») */
    .footer-lang { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 2rem; }
    .footer-lang-title { color: #fff; font-weight: 700; font-size: .9rem; }
    .footer-lang-list { display: flex; flex-wrap: wrap; gap: .5rem; }
    .footer-lang-btn { padding: .4rem .9rem; border-radius: 9999px; font-size: .8rem; font-weight: 600; cursor: pointer;
      color: #cbd5e1; background: transparent; border: 1px solid rgba(255,255,255,.25); }
    .footer-lang-btn:hover { border-color: #fff; color: #fff; }
    .footer-lang-btn.is-active { background: #009E49; border-color: #009E49; color: #fff; }

    /* ===== Améliorations design & lecteur (10/10/2026) ===== */
    /* Focus clavier visible et cohérent avec la charte (jaune) sur tous les éléments interactifs */
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid #FCD116; outline-offset: 2px; }
    /* Retour tactile sur les boutons du lecteur */
    .player-btn:active { transform: scale(0.92); }
    .bfm-pl-skip[aria-disabled="true"] { opacity: 0.6; }
    /* Vitesse de lecture dans le mini-lecteur */
    #miniSpeedBtn { font-variant-numeric: tabular-nums; min-width: 2.5rem; }
    /* Cibles tactiles d'au moins 44 px sur téléphone (recommandation d'accessibilité) */
    @media (max-width: 767px) { .bfm-pl-ico, .bfm-pl-skip { min-width: 2.75rem; min-height: 2.75rem; } }
    @media (prefers-reduced-motion: reduce) { .player-btn { transition: none; } .player-btn:active { transform: none; } }

    /* ===== Langue (10/10/2026) : bouton à côté du nom du site + liste déroulante en pied de page ===== */
    .lang-btn-head { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.6rem; border-radius: 9999px; border: 1px solid rgba(148,163,184,0.55); background: transparent; font-size: 0.75rem; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; }
    .lang-btn-head:hover { background: rgba(148,163,184,0.18); }
    .lang-btn-caret { width: 0.8rem; height: 0.8rem; }
    #langMenu:not(.hidden) { left: 0 !important; right: auto !important; min-width: 11rem; }
    .footer-lang-select { appearance: none; -webkit-appearance: none; min-width: 12rem; padding: 0.55rem 2.4rem 0.55rem 0.9rem; border-radius: 0.75rem; border: 1px solid rgba(255,255,255,0.28); color: #fff; font-weight: 600; font-size: 0.9rem; cursor: pointer;
      background: #0f172a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FCD116' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.8rem center / 1rem; }
    .footer-lang-select:hover { border-color: #FCD116; }
    .footer-lang-select option { background: #0f172a; color: #fff; }

    /* ===== Pied de page compact (12/10/2026) : sections repliées, on les ouvre d'un clic ===== */
    .nb-fgrid { display: grid; grid-template-columns: 1fr; gap: 0 1.5rem; align-items: start; }
    .nb-fbrand { padding-bottom: .5rem; }
    @media (min-width: 640px) { .nb-fgrid { grid-template-columns: repeat(3, 1fr); } .nb-fbrand { grid-column: 1 / -1; } }
    @media (min-width: 1024px) { .nb-fgrid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .nb-fbrand { grid-column: auto; } }
    .nb-fsec { border-top: 1px solid rgba(148,163,184,.18); }
    .nb-fsec > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer; list-style: none; padding: .7rem 0; color: #fff; font-weight: 600; font-size: .95rem; }
    .nb-fsec > summary::-webkit-details-marker { display: none; }
    .nb-fsec > summary::after { content: ""; flex-shrink: 0; width: .5rem; height: .5rem; margin-right: .2rem; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: rotate(45deg); transition: transform .2s ease, border-color .2s ease; }
    .nb-fsec > summary:hover { color: #009E49; }
    .nb-fsec[open] > summary::after { transform: rotate(-135deg); border-color: #009E49; }
    .nb-fsec > ul { padding: .1rem 0 .8rem; }
    .nb-fbottom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(148,163,184,.18); }
    @media (min-width: 768px) { .nb-fbottom { flex-direction: row; } }
    .footer-lang { margin-top: 0 !important; }
    .footer-lang-select { padding: .4rem 2.2rem .4rem .75rem !important; font-size: .85rem !important; min-width: 10rem !important; }
    @media (max-width: 480px) { .lang-btn-head { padding: 0.28rem 0.5rem; } #headerBrandGroup .brand-name { font-size: 0.95rem; } }
  
  /* ===== Accueil 11/10/2026 : « À l'affiche » = un seul élément, mise en page compacte ===== */
  #spot-affiche.spot-single .spot-main { flex-direction: row; align-items: center; gap: 0.9rem; padding: 0.6rem 0.9rem; min-height: 0; }
  #spot-affiche.spot-single .spot-photo { width: clamp(6.5rem, 22vw, 9.5rem); height: clamp(6.5rem, 22vw, 9.5rem); min-height: 0; flex: none; border-radius: 0.9rem; overflow: hidden; border: 3px solid #FCD116; }
  #spot-affiche.spot-single .spot-photo::after { display: none; }
  #spot-affiche.spot-single .spot-info { width: auto; flex: 1; min-width: 0; padding: 0; align-items: flex-start; text-align: left; }
  #spot-affiche.spot-single .spot-name { font-size: clamp(1.2rem, 3vw, 1.7rem); }
  #spot-affiche.spot-single .spot-une { display: none; }

  /* ===== « À l'affiche » : bouton ▶ sur la vignette (comme Temps forts / Tendances), lecture dans le bloc ===== */
  #spot-affiche.spot-single .spot-photo { position: relative; }
  #spot-affiche.spot-single .spot-cover { position: relative; width: 100%; height: 100%; }
  #spot-affiche.spot-single .spot-cover::after { content: "▶"; position: absolute; right: 0.45rem; bottom: 0.45rem; width: 2.2rem; height: 2.2rem; border-radius: 9999px; background: #009E49; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; box-shadow: 0 2px 10px rgba(0,0,0,0.55); pointer-events: none; }
  #spot-affiche.spot-single .spot-photo.is-playing .spot-cover::after { display: none; }
  #spot-affiche.spot-single .spot-main { flex-wrap: wrap; }
  #spot-affiche.spot-single .spot-photo.is-playing { width: 100%; height: auto; aspect-ratio: 16 / 9; flex: 1 1 100%; cursor: default; }

  /* ===== Accueil 11/10/2026 : Temps forts / Tendances en GRAND, la vidéo joue dans sa carte ===== */
  @media (min-width: 1024px) {
    #homeTopGrid { grid-template-columns: minmax(240px, 27%) minmax(0, 1fr) minmax(240px, 27%); }
  }
  #homeSideTempsForts .home-side-card, #homeSideTendances .home-side-card { flex-direction: column; align-items: stretch; gap: 0.6rem; padding: 0.6rem; }
  #homeSideTempsForts .home-side-card-cover, #homeSideTendances .home-side-card-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0.8rem; font-size: 3rem; }
  #homeSideTempsForts .home-side-card-cover::after, #homeSideTendances .home-side-card-cover::after { content: "▶"; position: absolute; right: 0.55rem; bottom: 0.55rem; width: 2.2rem; height: 2.2rem; border-radius: 9999px; background: #009E49; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; box-shadow: 0 2px 10px rgba(0,0,0,0.55); pointer-events: none; }
  #homeSideTempsForts .home-side-card.is-playing .home-side-card-cover::after, #homeSideTendances .home-side-card.is-playing .home-side-card-cover::after { display: none; }
  #homeSideTempsForts .home-side-card-title, #homeSideTendances .home-side-card-title { font-size: 1rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  #homeSideTempsForts .home-side-card-subtitle, #homeSideTendances .home-side-card-subtitle { font-size: 0.8rem; }
  .home-side-card.is-playing { cursor: default; }
  .home-side-player { position: absolute; inset: 0; background: #000; }
  .home-side-player iframe, .home-side-player video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
  .home-side-close { position: absolute; top: 0.35rem; right: 0.35rem; z-index: 4; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 9999px; background: rgba(11,17,32,0.8); color: #fff; font-size: 0.85rem; line-height: 1; cursor: pointer; }
  .home-side-close:hover { background: #EF2B2D; }

  /* ===== Accueil 11/10/2026 (2) : noms des blocs bien centrés ; bouton ▶ qui apparaît au survol (style Spotify) ===== */
  .home-col .home-side-panel-title { justify-content: center; text-align: center; font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.04em; margin-bottom: 0.6rem; }
  #homeStaticHero > .hs-pin { justify-content: center; text-align: center; }
  #homeStaticHero .hs-pin-label { flex: 0 1 auto; text-align: center; }
  #homeStaticHero .hs-pin-all { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); }
  @media (hover: hover) {
    #homeSideTempsForts .home-side-card-cover::after, #homeSideTendances .home-side-card-cover::after { opacity: 0; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease; }
    #homeSideTempsForts .home-side-card:hover .home-side-card-cover::after, #homeSideTendances .home-side-card:hover .home-side-card-cover::after,
    #homeSideTempsForts .home-side-card:focus-within .home-side-card-cover::after, #homeSideTendances .home-side-card:focus-within .home-side-card-cover::after { opacity: 1; transform: translateY(0); }
    #homeSideTempsForts .home-side-card:hover .home-side-card-cover, #homeSideTendances .home-side-card:hover .home-side-card-cover { box-shadow: 0 10px 24px -8px rgba(0,0,0,0.7); }
  }
  @media (prefers-reduced-motion: reduce) {
    #homeSideTempsForts .home-side-card-cover::after, #homeSideTendances .home-side-card-cover::after { transition: none; }
  }

    /* ===== Fonctions natives (11/10/2026) : bandeau hors ligne, boutons de capture ===== */
  .bfm-capture-btn { display: none; }
  @media (pointer: coarse) { .bfm-capture-btn { display: inline-flex; } }
  #bfmOfflineBar { position: fixed; left: 0; right: 0; top: 0; z-index: 10001; display: none; align-items: center; justify-content: center; gap: 0.6rem; padding: calc(0.45rem + env(safe-area-inset-top, 0px)) 0.8rem 0.45rem; background: #B45309; color: #fff; font-size: 0.82rem; font-weight: 600; text-align: center; }
  #bfmOfflineBar.show { display: flex; }
  #bfmOfflineBar button { border: 0; border-radius: 9999px; padding: 0.2rem 0.7rem; background: rgba(255,255,255,0.22); color: #fff; font-weight: 700; font-size: 0.78rem; cursor: pointer; }

  /* ===== Mobile (11/10/2026) : haut = Musique | Télé + loupe ; bas = Accueil · Rechercher · Radios · Moi ===== */
  #mTopBar, #mBottomNav { display: none; }
  @media (max-width: 767px) {
    header.glass-nav, #backToHomeBtn { display: none !important; }
    :root { --bfm-bnav-h: calc(58px + env(safe-area-inset-bottom, 0px)); }
    body { padding-bottom: calc(var(--bfm-bnav-h) + var(--bfm-player-h, 96px)); }
    #mTopBar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 35; height: 52px; padding: env(safe-area-inset-top, 0px) 0.6rem 0; box-sizing: content-box; background: #fff; border-bottom: 1px solid rgba(100,116,139,0.2); }
    .dark #mTopBar { background: #0B1120; border-bottom-color: rgba(255,255,255,0.08); }
    #mTopBar .m-ico { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: #475569; border-radius: 9999px; cursor: pointer; }
    .dark #mTopBar .m-ico { color: #cbd5e1; }
    #mTopTabs { display: flex; gap: 1.1rem; }
    #mTopTabs button { border: 0; background: none; cursor: pointer; padding: 0.3rem 0.1rem; font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: 1rem; color: #94a3b8; border-bottom: 3px solid transparent; white-space: nowrap; }
    #mTopTabs button.active { color: #0f172a; border-bottom-color: #22C55E; }
    .dark #mTopTabs button.active { color: #fff; }
    #mBottomNav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--bfm-bnav-h); padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; border-top: 1px solid rgba(100,116,139,0.25); }
    .dark #mBottomNav { background: #0B1120; border-top-color: rgba(255,255,255,0.08); }
    #mBottomNav button { flex: 1; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; font-size: 0.7rem; font-weight: 700; color: #64748b; cursor: pointer; }
    #mBottomNav button.active { color: #16a34a; }
    .dark #mBottomNav button { color: #94a3b8; } .dark #mBottomNav button.active { color: #fff; }
    #mBottomNav svg { width: 1.45rem; height: 1.45rem; }
    #globalPlayer { bottom: var(--bfm-bnav-h) !important; }
    #mChips { display: flex; gap: 0.5rem; overflow-x: auto; position: sticky; top: calc(52px + env(safe-area-inset-top, 0px)); z-index: 34; padding: 0.5rem 0.75rem; background: #fff; border-bottom: 1px solid rgba(100,116,139,0.2); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    #mChips::-webkit-scrollbar { display: none; }
    .dark #mChips { background: #0B1120; border-bottom-color: rgba(255,255,255,0.08); }
    #mChips button { flex: 0 0 auto; border: 1px solid rgba(100,116,139,0.35); background: transparent; color: #475569; border-radius: 9999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
    .dark #mChips button { color: #cbd5e1; border-color: rgba(255,255,255,0.18); }
    #mChips button.active { background: #16a34a; border-color: #16a34a; color: #fff; }
  }
  @media (min-width: 768px) { #mChips { display: none; } }
  /* ===== Recherche mobile (12/10/2026) : barre en haut + « Tendances » (Musiques · Radios · Télés · Vidéos) ===== */
  #bfmTrends { margin-bottom: 1.5rem; }
  .tr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
  .tr-title { font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: 1.35rem; display: flex; align-items: center; gap: 0.4rem; }
  .tr-all { font-size: 0.8rem; font-weight: 700; color: #16a34a; background: none; border: 0; cursor: pointer; }
  .tr-tabs { display: flex; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: 0.9rem; }
  .tr-tabs::-webkit-scrollbar { display: none; }
  .tr-tabs button { flex: 0 0 auto; border: 0; background: none; cursor: pointer; padding: 0.3rem 0.05rem; font-weight: 700; font-size: 1rem; color: #94a3b8; border-bottom: 3px solid transparent; white-space: nowrap; }
  .tr-tabs button.active { color: #0f172a; font-weight: 800; font-size: 1.1rem; border-bottom-color: #22C55E; }
  .dark .tr-tabs button.active { color: #fff; }
  .tr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  @media (min-width: 768px) { .tr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .tr-tile { position: relative; height: 104px; border-radius: 0.9rem; overflow: hidden; border: 0; padding: 0 0.9rem; text-align: left; color: #fff; cursor: pointer; background: var(--tc, #2f6b3f); display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; -webkit-tap-highlight-color: transparent; }
  .tr-tile:active { transform: scale(0.98); }
  .tr-tile img { position: absolute; right: 0; top: 0; width: 58%; height: 100%; object-fit: cover; opacity: 0.6; -webkit-mask-image: linear-gradient(to right, transparent, #000 65%); mask-image: linear-gradient(to right, transparent, #000 65%); }
  .tr-tile .tr-ico { position: absolute; right: 0.7rem; bottom: 0.5rem; font-size: 2.2rem; opacity: 0.35; }
  .tr-tile b, .tr-tile small { position: relative; z-index: 1; }
  .tr-tile b { font-size: 1rem; font-weight: 800; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tr-tile small { font-size: 0.74rem; font-weight: 600; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tr-tile.sk { background: linear-gradient(100deg, #131a2b 30%, #26334f 50%, #131a2b 70%); background-size: 200% 100%; animation: bfmShimmer 1.4s linear infinite; cursor: default; }
  .tr-empty { grid-column: 1 / -1; text-align: center; padding: 2rem 0.5rem; color: #94a3b8; font-size: 0.9rem; }
  @media (max-width: 767px) {
    body.m-search #mTopBar, body.m-search #mChips { display: none !important; }
    #searchHero { display: none; }
    #page-recherche > div + div { padding-top: 0; }
    .m-search-wrap { position: sticky; top: 0; z-index: 36; margin: 0 -1rem 0.6rem; padding: calc(0.6rem + env(safe-area-inset-top, 0px)) 1rem 0.2rem; background: #fff; }
    .dark .m-search-wrap { background: #0B1120; }
    .m-search-wrap input { margin-bottom: 0.4rem !important; border-radius: 0.9rem !important; font-size: 1rem; }
  }
  @media (prefers-reduced-motion: reduce) { .tr-tile.sk { animation: none; } .tr-tile:active { transform: none; } }

  /* ===== 12/10/2026 : plus aucun bouton ▶ sur les éléments — seul le bouton du lecteur reste ===== */
  #spot-affiche.spot-single .spot-cover::after,
  #homeSideTempsForts .home-side-card-cover::after, #homeSideTendances .home-side-card-cover::after,
  .hs-card-play { display: none !important; }

  /* ===== 12/10/2026 : lecteur plein écran façon Boomplay (fond flouté, pochette / logo rond qui tourne, avatar) ===== */
  .fp-bg { display: none; }
  .fp-stage { position: relative; width: fit-content; margin: 0 auto 1rem; }
  .fp-stage #fullPlayerThumbnail { margin-bottom: 0 !important; overflow: visible; }
  .fp-stage #fullPlayerThumbnail img { border-radius: 1rem; }
  .fp-stage.is-live #fullPlayerThumbnail { border-radius: 9999px; box-shadow: 0 0 0 6px rgba(0,0,0,0.55), 0 14px 40px rgba(0,0,0,0.45); animation: fpSpin 20s linear infinite; animation-play-state: paused; }
  .fp-stage.is-live #fullPlayerThumbnail img { border-radius: 9999px !important; }
  #fullPlayerOverlay.is-playing .fp-stage.is-live #fullPlayerThumbnail { animation-play-state: running; }
  @keyframes fpSpin { to { transform: rotate(360deg); } }

  .fp-avatar { position: absolute; right: -10px; bottom: -8px; width: 66px; z-index: 3; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45)); transform-origin: 50% 100%; }
  .fp-avatar svg { display: none; width: 100%; height: auto; overflow: visible; }
  .fp-avatar.stand svg.st, .fp-avatar.sit svg.si { display: block; }
  .fp-avatar.dance svg.st { animation: fpDance 0.55s ease-in-out infinite alternate; transform-origin: 50% 100%; }
  .fp-avatar.dance svg.st .arm-r { animation: fpWave 0.5s ease-in-out infinite alternate; transform-origin: 44px 40px; }
  .fp-avatar.dance svg.st .arm-l { animation: fpWave 0.5s ease-in-out infinite alternate-reverse; transform-origin: 16px 40px; }
  .fp-avatar.sit svg.si { animation: fpNod 1.1s ease-in-out infinite alternate; transform-origin: 50% 90%; }
  #fullPlayerOverlay:not(.is-playing) .fp-avatar svg { animation-play-state: paused !important; }
  #fullPlayerOverlay:not(.is-playing) .fp-avatar svg * { animation-play-state: paused !important; }
  @keyframes fpDance { from { transform: rotate(-7deg) translateY(0); } to { transform: rotate(7deg) translateY(-5px); } }
  @keyframes fpWave { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
  @keyframes fpNod { from { transform: rotate(-2.5deg) translateY(0); } to { transform: rotate(2.5deg) translateY(-2px); } }

  .fp-bubble { position: absolute; left: 6px; top: 34%; max-width: 72%; background: rgba(20,20,20,0.72); color: #fff; font-size: 0.75rem; line-height: 1.25; padding: 0.45rem 0.6rem; border-radius: 0.5rem; z-index: 3; opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; text-align: left; }
  .fp-bubble.show { opacity: 1; transform: none; }

  .fp-wave { display: none; align-items: center; justify-content: space-between; gap: 2px; height: 34px; margin: 0 0 1rem; }
  .fp-wave i { display: block; flex: 1 1 0; max-width: 3px; height: 100%; border-radius: 2px; background: rgba(255,255,255,0.85); transform: scaleY(var(--h, 0.4)); transform-origin: 50% 50%; animation: fpBar var(--d, 0.7s) ease-in-out infinite alternate; animation-play-state: paused; }
  #fullPlayerOverlay.is-playing .fp-wave i { animation-play-state: running; }
  @keyframes fpBar { from { transform: scaleY(0.15); } to { transform: scaleY(var(--h, 0.8)); } }
  .fp-stage.is-live ~ .fp-wave-slot { display: block; }

  @media (prefers-reduced-motion: reduce) {
    .fp-stage.is-live #fullPlayerThumbnail, .fp-avatar svg, .fp-avatar svg *, .fp-wave i { animation: none !important; }
  }

  @media (max-width: 767px) {
    #fullPlayerOverlay { padding: 0; align-items: stretch; background: #0b1220; backdrop-filter: none; }
    #fullPlayerOverlay .fp-sheet { max-width: none !important; max-height: none !important; height: 100%; width: 100%; border-radius: 0; padding: calc(0.8rem + env(safe-area-inset-top, 0px)) 1.1rem calc(1.2rem + env(safe-area-inset-bottom, 0px)) !important; background: transparent !important; position: relative; overflow-y: auto; }
    .fp-bg { display: block; position: fixed; inset: 0; z-index: 0; background: linear-gradient(160deg, #6b5a3a, #2b3547 70%) center / cover no-repeat; }
    .fp-bg::before { content: ""; position: absolute; inset: -40px; background: inherit; filter: blur(38px) saturate(1.15); transform: scale(1.15); }
    .fp-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.55)); }
    .fp-sheet > *:not(.fp-bg) { position: relative; z-index: 1; }
    .fp-sheet > .fp-topbar { flex-direction: row-reverse; margin-bottom: 1rem; }
    .fp-sheet #fullPlayerCategory { color: rgba(255,255,255,0.75); }
    .fp-stage #fullPlayerThumbnail { width: min(72vw, 300px) !important; height: min(72vw, 300px) !important; }
    .fp-sheet #fullPlayerTitle { font-size: 1.35rem; text-align: center; }
    .fp-sheet #fullPlayerSubtitle { text-align: center; }
    .fp-sheet #fullVolumeBar { display: none; }
    .fp-sheet .fp-volume-row { display: none !important; }
    .fp-sheet #fullPlayerProgressWrap ~ .flex button[onclick="togglePlayPause()"] { width: 4.2rem; height: 4.2rem; background: rgba(0,0,0,0.38) !important; border: 1px solid rgba(255,255,255,0.18); }
    .fp-sheet button[onclick="togglePlayPause()"] { width: 4.2rem !important; height: 4.2rem !important; background: rgba(0,0,0,0.38) !important; border: 1px solid rgba(255,255,255,0.18); }
    .fp-wave { margin-top: 0.4rem; }
  }
  .fp-wave-slot { display: none; }

  /* ===== 12/10/2026 : le menu vertical passe AU-DESSUS du lecteur ===== */
  body #mobileMenuBackdrop { z-index: 10002 !important; }
  body #mobileMenu:not(.hidden) { z-index: 10003 !important; }
  .notification { z-index: 10010 !important; }

  /* ===== 12/10/2026 : rangées horizontales (chaque rubrique montre directement ses éléments) ===== */
  .hrow { margin-bottom: 1.5rem; }
  .hrow-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
  .hrow-title { display: flex; align-items: center; gap: 0.5rem; font-family: Montserrat, system-ui, sans-serif; font-weight: 800; font-size: 1.1rem; min-width: 0; }
  .hrow-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hrow-ico { width: 1.7rem; height: 1.7rem; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
  .hrow-all { flex: 0 0 auto; border: 0; background: none; color: #16a34a; font-weight: 700; font-size: 0.82rem; cursor: pointer; padding: 0.2rem 0.1rem; }
  .hrow-wrap { position: relative; }
  .hrow-track { display: flex; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -1rem; padding: 0.1rem 1rem 0.6rem; overscroll-behavior-x: contain; }
  .hrow-track::-webkit-scrollbar { display: none; }
  .hrow-track > * { flex: 0 0 var(--hw, 9.6rem); width: var(--hw, 9.6rem); scroll-snap-align: start; min-width: 0; }
  .hrow-track .media-card p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .hrow-track .media-card .flex.gap-2 { flex-wrap: wrap; }
  .hrow-empty { padding: 1.2rem 0; color: #94a3b8; font-size: 0.9rem; }

  /* ===== 12/10/2026 : en-têtes de rubrique compacts (onglets + listes sur une seule ligne) ===== */
  .tab-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 1rem; }
  .tab-row > .relative { margin-bottom: 0 !important; }
  .tab-row > .flex { margin-bottom: 0 !important; }
  .mq-selects { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 1 1 22rem; min-width: 0; }
  .mq-selects select { min-width: 0; height: 2.5rem; padding-top: 0; padding-bottom: 0; text-overflow: ellipsis; }
  .mq-selects > .mq-sel-cat { flex: 1.5 1 11rem; width: 0; }
  .mq-selects > .mq-sel-genre { flex: 1 1 9rem; min-width: 0; }
  .mq-selects > .mq-sel-sort { flex: 0 1 9.5rem; width: 0; min-width: 8rem; }
  .tab-row-search { flex: 1 1 14rem; min-width: 0; }
  .bfm-near-btn { height: 2.5rem; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
  @media (max-width: 767px) {
    .tab-row { display: block; margin-bottom: 0; }
    .tab-row > .relative { margin-bottom: 0.75rem !important; }
    .mq-selects { display: grid; grid-template-columns: 1fr; margin-bottom: 0.75rem; }
    .mq-selects > .mq-sel-cat, .mq-selects > .mq-sel-sort { width: 100%; }
    .tab-row-search { margin-bottom: 0.75rem; }
  }
  /* ===== 12/10/2026 : filtres compacts sur mobile (une ligne de pastilles + bouton « Filtres » qui déplie le reste) ===== */
  .m-filter-toggle { display: none; }
  @media (max-width: 767px) {
    #radioTabs, #musiqueSubFilters, #videoSubFilters, #lireSubFilters { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 0.45rem !important; margin: 0 -1rem 0.6rem !important; padding: 0.1rem 1rem 0.25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    #radioTabs::-webkit-scrollbar, #musiqueSubFilters::-webkit-scrollbar, #videoSubFilters::-webkit-scrollbar, #lireSubFilters::-webkit-scrollbar { display: none; }
    #radioTabs .filter-btn, #musiqueSubFilters .filter-btn, #videoSubFilters .filter-btn, #lireSubFilters .filter-btn,
    .m-filter-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.42rem 0.85rem; border-radius: 9999px; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-weight: 700; font-size: 0.84rem; white-space: nowrap; cursor: pointer; }
    .dark #radioTabs .filter-btn, .dark #musiqueSubFilters .filter-btn, .dark #videoSubFilters .filter-btn, .dark #lireSubFilters .filter-btn, .dark .m-filter-toggle { background: #1e293b; border-color: #334155; color: #e2e8f0; }
    .m-filter-toggle { border-style: dashed; color: #16a34a; }
    .m-filters-open .m-filter-toggle { background: #16a34a; color: #fff; border-style: solid; border-color: #16a34a; }
    .page:not(.m-filters-open) .m-fold { display: none !important; }
    #radioFmTip > div:first-child { display: none; }
    #radioFmTip { padding: 0.6rem; margin-bottom: 0.6rem; }
    #page-radio > div, #page-musique > div, #page-videos > div, #page-lire > div { padding-top: 0.6rem !important; }
    #videoCategoryDropdownWrap, #lireCategoryDropdownWrap { display: block; margin-bottom: 0.5rem !important; }
    #videoCategoryDropdownWrap > button, #lireCategoryDropdownWrap > button { min-width: 0 !important; width: 100%; padding: 0.5rem 0.8rem !important; }
    #page-audios label { display: none; }
    #page-audios > div > div:first-child { margin-bottom: 0.8rem !important; }
  }
  .hrow-arrow { display: none; }
  @media (min-width: 768px) {
    .hrow-track { margin: 0; padding-left: 0; padding-right: 0; scrollbar-width: thin; }
    .hrow-track > * { flex-basis: var(--hwd, var(--hw, 9.6rem)); width: var(--hwd, var(--hw, 9.6rem)); }
    .hrow-arrow { display: flex; position: absolute; top: 38%; z-index: 5; width: 2.2rem; height: 2.2rem; border-radius: 9999px; border: 0; align-items: center; justify-content: center; background: rgba(15,23,42,0.85); color: #fff; font-size: 1.3rem; cursor: pointer; opacity: 0; transition: opacity 0.2s; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
    .hrow-arrow.l { left: -0.6rem; } .hrow-arrow.r { right: -0.6rem; }
    .hrow-wrap:hover .hrow-arrow { opacity: 1; }
  }
  /* Cœur du mini-lecteur : plein quand le contenu en cours est en favori */
  #playerFavBtn.fav-on svg { fill: currentColor; }
  /* Fond animé derrière les images à chargement différé (effet « squelette ») */
  img[loading="lazy"]:not(.object-contain) { background: linear-gradient(100deg, #131a2b 30%, #26334f 50%, #131a2b 70%); background-size: 200% 100%; animation: bfmShimmer 1.4s linear infinite; }
  @media (prefers-reduced-motion: reduce) { img[loading="lazy"] { animation: none; } }
  .home-recents-clear { font-size: 0.8rem; font-weight: 600; color: #64748b; }
  /* ===== Page « Moi » : menu de profil en listes (comme les applis de musique) ===== */
  .me-header { display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; padding: 0.4rem 0.2rem 1.1rem; background: none; border: 0; cursor: pointer; color: inherit; }
  .me-avatar { width: 4.2rem; height: 4.2rem; border-radius: 9999px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.7rem; color: #fff; background: linear-gradient(135deg, #009E49, #22D3EE 70%, #a78bfa); }
  .me-head-text { min-width: 0; flex: 1; }
  .me-name { font-weight: 800; font-size: 1.25rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .me-sub { font-size: 0.85rem; color: #64748b; margin-top: 0.15rem; }
  .dark .me-sub { color: #94a3b8; }
  .me-group { background: #fff; border-radius: 1rem; margin-bottom: 1rem; padding: 0 1rem; box-shadow: 0 1px 3px rgba(15,23,42,0.08); }
  .dark .me-group { background: #1e293b; box-shadow: none; }
  .me-row { display: flex; align-items: center; gap: 0.9rem; width: 100%; background: none; border: 0; padding: 1.05rem 0; color: inherit; cursor: pointer; text-align: left; border-top: 1px solid rgba(148,163,184,0.2); }
  .me-row:first-child { border-top: 0; }
  .me-label { flex: 1; font-weight: 600; font-size: 0.98rem; }
  .me-val { font-size: 0.88rem; color: #64748b; }
  .dark .me-val { color: #94a3b8; }
  .me-ico { width: 1.35rem; height: 1.35rem; color: #64748b; flex: 0 0 auto; }
  .dark .me-ico { color: #cbd5e1; }
  .me-chev { width: 1.1rem; height: 1.1rem; color: #94a3b8; flex: 0 0 auto; }
  .me-row:active, .me-header:active { opacity: 0.7; }
  .me-pagehead { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
  .me-pagehead h1 { font-weight: 800; font-size: 1.35rem; flex: 1; }
  .me-back { width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: none; border: 0; color: inherit; cursor: pointer; }
  .me-pagehead-action { font-size: 0.85rem; font-weight: 700; color: #ef4444; background: none; border: 0; cursor: pointer; }
  .me-hist-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0; border-top: 1px solid rgba(148,163,184,0.2); }
  .me-hist-row:first-child { border-top: 0; }
  .me-hist-cover { width: 3rem; height: 3rem; border-radius: 0.6rem; overflow: hidden; background: linear-gradient(135deg, #1e293b, #334155); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: 0 0 auto; }
  .me-hist-cover img { width: 100%; height: 100%; object-fit: cover; }
  .me-modal-card { width: 100%; max-width: 28rem; max-height: 90vh; overflow-y: auto; background: #fff; color: #0f172a; border-radius: 1.25rem 1.25rem 0 0; padding: 1.25rem; }
  .dark .me-modal-card { background: #1e293b; color: #fff; }
  @media (min-width: 640px) { .me-modal-card { border-radius: 1.25rem; } }
  .me-field { display: block; margin-bottom: 0.9rem; font-size: 0.8rem; font-weight: 600; color: #64748b; }
  .me-field input, .me-field textarea { display: block; width: 100%; margin-top: 0.3rem; padding: 0.7rem 0.8rem; border-radius: 0.6rem; border: 1px solid rgba(148,163,184,0.5); background: transparent; color: inherit; font-size: 0.95rem; font-weight: 400; }
  .me-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 1.1rem; border-radius: 0.7rem; font-weight: 700; font-size: 0.9rem; border: 0; cursor: pointer; text-decoration: none; }
  .me-btn.green { background: #009E49; color: #fff; }
  .me-btn.grey { background: rgba(148,163,184,0.2); color: inherit; }
  .me-contact-line { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0; border-top: 1px solid rgba(148,163,184,0.2); color: inherit; text-decoration: none; font-size: 0.95rem; }
  .me-contact-line:first-child { border-top: 0; }
  .lib-chip { padding: 0.4rem 0.9rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 700; background: rgba(148,163,184,0.2); color: inherit; border: 0; cursor: pointer; }
  .lib-chip.on { background: #009E49; color: #fff; }
  #accountLoggedOut { margin-bottom: 1rem; }
  /* Squelettes de rangées de l'accueil : mêmes dimensions que .home-card
     (carte, pochette carrée, titre, sous-titre, bouton) pour que la mise
     en page ne bouge pas quand les vraies cartes arrivent. */
  .home-card-skel { width: 168px; border-radius: 1.1rem; padding: 0.75rem; background: #0a0a0a; border: 1px solid rgba(255,255,255,0.14); pointer-events: none; }
  .home-card-skel .hcs-cover, .home-card-skel .hcs-line, .home-card-skel .hcs-dot {
    background: linear-gradient(100deg, #141414 30%, #2a2a2a 50%, #141414 70%); background-size: 200% 100%; animation: bfmShimmer 1.4s linear infinite;
  }
  .home-card-skel .hcs-cover { width: 100%; aspect-ratio: 1 / 1; border-radius: 0.85rem; margin-bottom: 0.5rem; }
  .home-card-skel .hcs-line { height: 0.7rem; border-radius: 9999px; margin-top: 0.4rem; }
  .home-card-skel .hcs-line.t { width: 78%; height: 0.8rem; }
  .home-card-skel .hcs-line.s { width: 52%; }
  .home-card-skel .hcs-dot { width: 1.5rem; height: 1.5rem; border-radius: 9999px; margin-top: 0.55rem; }
  @media (prefers-reduced-motion: reduce) { .home-card-skel .hcs-cover, .home-card-skel .hcs-line, .home-card-skel .hcs-dot { animation: none; } }
  .home-scroll-row:has(> .home-card-skel) { overflow-x: hidden; }