/* ═══════════════════════════════════════════════════════════
   topbar.css — barre persistante unifiée de Cizi.fr
   Layout : [logo / catégorie ▾] [🔍]  ──── [HH:MM] ────  [modules] [⛶]
═══════════════════════════════════════════════════════════ */

/* La topbar elle-même : fixe en haut, sur toute la largeur */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(240, 235, 220, 0.18);
  font-family: monospace;
  color: rgba(240, 235, 220, 0.85);
}

/* Compensation du padding-top sur le body pour ne pas masquer le contenu */
body { padding-top: 48px; }

/* ───────── Zone gauche : logo + breadcrumb + loupe ───────── */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.topbar-logo {
  display: flex;
  align-items: center;
  height: 32px;
  transition: filter 0.2s, transform 0.2s;
}
.topbar-logo img {
  height: 100%;
  width: auto;
  display: block;
}
.topbar-logo:hover {
  filter: drop-shadow(0 0 6px rgba(240, 235, 220, 0.6));
  transform: scale(1.05);
}

.topbar-sep {
  color: rgba(240, 235, 220, 0.4);
  font-size: 18px;
  user-select: none;
}

.topbar-cat {
  background: none;
  border: none;
  color: rgba(240, 235, 220, 0.9);
  font-family: monospace;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}
.topbar-cat:hover { background: rgba(240, 235, 220, 0.1); }
.topbar-cat.is-open { background: rgba(240, 235, 220, 0.15); }
.topbar-cat-arrow {
  font-size: 10px;
  opacity: 0.6;
  transition: transform 0.2s;
}
.topbar-cat.is-open .topbar-cat-arrow { transform: rotate(180deg); }

.topbar-search-btn,
.topbar-fullscreen {
  background: none;
  border: none;
  color: rgba(240, 235, 220, 0.7);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, color 0.2s;
}
.topbar-search-btn:hover,
.topbar-fullscreen:hover {
  background: rgba(240, 235, 220, 0.12);
  color: rgba(240, 235, 220, 1);
}
.topbar-search-btn svg,
.topbar-fullscreen svg {
  width: 18px;
  height: 18px;
}

/* ───────── Zone centre : horloge ───────── */
.topbar-center {
  display: flex;
  justify-content: center;
}
.topbar-clock {
  font-family: monospace;
  font-size: 18px;
  font-weight: 600;
  color: rgba(240, 235, 220, 0.95);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* ───────── Zone droite : modules + plein écran ───────── */
.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}
.topbar-modules {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Vide pour l'instant — espace réservé pour les modules à venir */
  min-height: 32px;
}

/* ───────── Menu déroulant des catégories ───────── */
.topbar-dropdown {
  position: fixed;
  top: 52px;
  left: 16px;
  z-index: 1001;
  background: rgba(20, 20, 20, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(240, 235, 220, 0.2);
  border-radius: 12px;
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}
.topbar-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  color: rgba(240, 235, 220, 0.85);
  text-decoration: none;
  font-family: monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.topbar-dropdown-item:hover {
  background: rgba(240, 235, 220, 0.12);
  color: rgba(240, 235, 220, 1);
}
.topbar-dropdown-item:hover .topbar-dropdown-icon {
  filter: drop-shadow(0 0 4px rgba(240, 235, 220, 0.4)) brightness(1.1);
}
.topbar-dropdown-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 8px;
  transition: filter 0.15s;
}
.topbar-dropdown-label {
  flex: 1;
}
.topbar-dropdown-item.is-current {
  color: rgba(240, 235, 220, 0.4);
  pointer-events: none;
}
.topbar-dropdown-item.is-current .topbar-dropdown-icon {
  opacity: 0.45;
}
.topbar-dropdown-item.is-current::before {
  content: '●';
  font-size: 8px;
  opacity: 0.5;
  margin-right: 4px;
}

/* ───────── Overlay recherche (déclenché par la loupe) ───────── */
.topbar-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.topbar-search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.topbar-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.topbar-search-panel {
  position: relative;
  width: min(720px, 92vw);
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid rgba(240, 235, 220, 0.2);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  transform: translateY(-8px);
  transition: transform 0.2s;
}
.topbar-search-overlay.is-open .topbar-search-panel {
  transform: translateY(0);
}

/* On annule les styles "ancien header" sur le module search injecté dans l'overlay */
.topbar-search-panel .search-wrap {
  margin: 0;
  padding: 0;
}

/* ───────── Responsive ───────── */
@media (max-width: 720px) {
  .topbar {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    padding: 0 10px;
  }
  .topbar-clock { font-size: 15px; }
  .topbar-cat { font-size: 12px; padding: 6px 8px; }
  .topbar-logo { height: 26px; }
}
@media (max-width: 480px) {
  /* Sur très petit écran, on cache la zone "modules" pour respirer */
  .topbar-modules { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH : horloge FS-only sur PC + topbar sans bordure
   Marker: topbar-clock-fs-only-marker
   ─────────────────────────────────────────────────────────────────── */

.topbar {
  border-bottom: none !important;
  grid-template-columns: 1fr 1fr !important;
}

.topbar-clock {
  display: none !important;
}

@media (min-width: 721px) {
  :fullscreen .topbar {
    grid-template-columns: 1fr auto 1fr !important;
  }
  :fullscreen .topbar-clock {
    display: block !important;
  }
  :fullscreen .topbar-clock {
    font-size: 36px !important;
  }
  /* Préfixe WebKit pour Safari / vieux Chrome */
  :-webkit-full-screen .topbar {
    grid-template-columns: 1fr auto 1fr !important;
  }
  :-webkit-full-screen .topbar-clock {
    display: block !important;
  }
  :-webkit-full-screen .topbar-clock {
    font-size: 36px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH : topbar transparente + contour noir net
           (reproduit l'effet outline du GIF cizi.fr)
   Marker: topbar-outline-marker
   ─────────────────────────────────────────────────────────────────── */

/* Topbar entièrement transparente */
.topbar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Séparateur "/" : contour noir net + halo flou */
.topbar-sep {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
    0 0 4px rgba(0, 0, 0, 0.7);
}

/* Label catégorie : contour noir net, fond uniquement au hover */
.topbar-cat {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
    0 0 4px rgba(0, 0, 0, 0.7);
}
.topbar-cat:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}
.topbar-cat.is-open {
  background: rgba(0, 0, 0, 0.35) !important;
}

/* Boutons ronds (loupe + plein écran) : transparents, halo via SVG */
.topbar-search-btn,
.topbar-fullscreen {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.topbar-search-btn:hover,
.topbar-fullscreen:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Icônes SVG : contour noir empilé via drop-shadow */
.topbar-search-btn svg,
.topbar-fullscreen svg {
  filter:
    drop-shadow( 1px  1px 0 rgba(0, 0, 0, 1))
    drop-shadow(-1px -1px 0 rgba(0, 0, 0, 1))
    drop-shadow(-1px  1px 0 rgba(0, 0, 0, 1))
    drop-shadow( 1px -1px 0 rgba(0, 0, 0, 1))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
}

/* Horloge en plein écran : contour épais (texte plus gros = ombre plus large) */
@media (min-width: 721px) {
  :fullscreen .topbar-clock {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    text-shadow:
      -2px -2px 0 #000,
       2px -2px 0 #000,
      -2px  2px 0 #000,
       2px  2px 0 #000,
      0 0 8px rgba(0, 0, 0, 0.8);
  }
  :-webkit-full-screen .topbar-clock {
    background: transparent;
    -webkit-backdrop-filter: none;
    padding: 0;
    text-shadow:
      -2px -2px 0 #000,
       2px -2px 0 #000,
      -2px  2px 0 #000,
       2px  2px 0 #000,
      0 0 8px rgba(0, 0, 0, 0.8);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH : styles spécifiques topbar Vision (React)
           Sous-label dynamique + sous-menu Films/Séries
   Marker: topbar-vision-submenu-marker
   ─────────────────────────────────────────────────────────────────── */

/* Sous-label affiché à droite de la catégorie (ex: "/ Films") */
.topbar-sublabel {
  color: rgba(240, 235, 220, 0.75);
  font-family: monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 6px 8px;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
    0 0 4px rgba(0, 0, 0, 0.7);
}

/* Item "Vision" dans le dropdown : layout particulier (label + flèche sous-menu) */
.topbar-dropdown-vision-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.topbar-dropdown-vision-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.topbar-dropdown-vision-row .topbar-dropdown-item--main {
  flex: 1;
}
.topbar-dropdown-sub-toggle {
  background: none;
  border: none;
  color: rgba(240, 235, 220, 0.6);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  font-size: 11px;
  transition: background 0.15s, transform 0.15s, color 0.15s;
}
.topbar-dropdown-sub-toggle:hover {
  background: rgba(240, 235, 220, 0.12);
  color: rgba(240, 235, 220, 1);
}
.topbar-dropdown-sub-toggle.is-open {
  transform: rotate(90deg);
  color: rgba(240, 235, 220, 1);
}

/* Sous-menu Films/Séries */
.topbar-dropdown-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 16px;
  border-left: 1px solid rgba(240, 235, 220, 0.15);
  margin-left: 4px;
}
.topbar-dropdown-item--sub {
  font-size: 12px;
  opacity: 0.85;
  padding: 6px 10px;
}
.topbar-dropdown-item--sub:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH : tuning topbar (espacement, tailles, padding, logo)
   Marker: topbar-tuning-1-marker
   ─────────────────────────────────────────────────────────────────── */

/* 1. Padding droit augmenté pour décoller le plein écran du bord */
.topbar {
  padding-right: 28px !important;
}

/* 2. Zone gauche : espacement réduit entre logo / sep / catégorie */
.topbar-left {
  gap: 4px !important;
}

/* 3. Logo Cizi : ne se laisse jamais comprimer horizontalement */
.topbar-logo {
  flex-shrink: 0 !important;
}
.topbar-logo img {
  flex-shrink: 0 !important;
}

/* 4. Séparateur "/" : un peu plus serré */
.topbar-sep {
  padding: 0 2px;
}

/* 5. Label catégorie : taille x2 (14 → 22), padding ajusté */
.topbar-cat {
  font-size: 22px !important;
  padding: 4px 8px !important;
  letter-spacing: 0.04em !important;
}
.topbar-cat-arrow {
  font-size: 14px !important;
}

/* 6. Sous-label (Films / Séries dans Vision) proportionnel */
.topbar-sublabel {
  font-size: 18px !important;
  padding: 4px 6px !important;
}

/* 7. Responsive mobile : on baisse un peu les tailles mais on protège le logo */
@media (max-width: 720px) {
  .topbar {
    padding-right: 16px !important;
    gap: 6px !important;
  }
  .topbar-left {
    gap: 3px !important;
    min-width: 0 !important;
  }
  .topbar-logo {
    height: 32px !important; /* on remonte de 26 → 32 */
    flex-shrink: 0 !important;
  }
  .topbar-cat {
    font-size: 18px !important;
    padding: 4px 6px !important;
    /* Si plus de place, on tronque le label plutôt que d'écraser le logo */
    min-width: 0;
  }
  .topbar-cat-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-sublabel {
    font-size: 15px !important;
    /* On masque le sous-label sur petit écran si manque de place */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH : refactor flex simple — fin du système de colonnes
   Marker: topbar-refactor-flex-marker
   ─────────────────────────────────────────────────────────────────── */

/* Topbar : flex au lieu de grid. Tout aligné à gauche, plein écran poussé
   à droite par margin-left:auto sur sa colonne dédiée. */
.topbar {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Zone gauche : tout collé serré */
.topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-width: 0 !important;
}

/* Ancien séparateur span "/" : on le retire visuellement (le slash sera
   en préfixe du label catégorie via ::before) */
.topbar-sep {
  display: none !important;
}

/* Label catégorie : préfixé d'un "/" intégré au texte via ::before */
.topbar-cat::before {
  content: '/';
  margin-right: 6px;
  color: rgba(240, 235, 220, 0.55);
  font-weight: normal;
  /* Même contour noir que le reste */
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
    0 0 4px rgba(0, 0, 0, 0.7);
}

/* Label catégorie : pas de tronquage par défaut (PC large), gardé en mobile */
.topbar-cat {
  margin: 0 !important;
}
.topbar-cat-label {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* Loupe et plein écran : agrandis 32 → 40px pour respirer */
.topbar-search-btn,
.topbar-fullscreen {
  width: 40px !important;
  height: 40px !important;
}
.topbar-search-btn svg,
.topbar-fullscreen svg {
  width: 22px !important;
  height: 22px !important;
}

/* La zone centre (horloge) reste invisible par défaut.
   En FS sur PC, le patch 'topbar-clock-fs-only-marker' la fait apparaître.
   Pour la positionner au centre malgré le flex (pas de grid), on la sort
   du flow flex via position absolute. */
.topbar-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* l'horloge ne capture pas les clics */
}

/* Zone droite : poussée tout à droite via margin-left auto */
.topbar-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* ───────── Responsive mobile ─────────
   Le label catégorie peut maintenant tronquer si vraiment manque de place,
   mais sur PC c'est désactivé (white-space: nowrap + overflow: visible). */
@media (max-width: 720px) {
  .topbar-cat-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50vw;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH : icône catégorie dans la topbar + tuning espaces
   Marker: topbar-icone-cat-marker
   ─────────────────────────────────────────────────────────────────── */

/* Resserrement entre logo et catégorie : "/" ::before plus collé */
.topbar-cat::before {
  margin-right: 3px !important;
}

/* Pousser la loupe en lui mettant un margin-left généreux */
.topbar-search-btn {
  margin-left: 18px !important;
}

/* L'icône catégorie affichée à droite du texte (dans la topbar) */
.topbar-cat-icon {
  height: 28px;
  width: auto;
  margin-left: 6px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  flex-shrink: 0;
  filter:
    drop-shadow( 1px  1px 0 rgba(0, 0, 0, 0.9))
    drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

/* La flèche ▾ : un peu d'espace côté gauche pour respirer */
.topbar-cat-arrow {
  margin-left: 4px !important;
}

@media (max-width: 720px) {
  .topbar-search-btn {
    margin-left: 0px !important;
  }
  .topbar-cat-icon {
    height: 22px;
  }
}

/* === topbar-clock-visibility-marker : horloge centrée entre gauche et droite === */
.topbar { position: fixed; }

/* Conteneur invisible qui occupe tout l'espace entre topbar-left et topbar-right,
   permet à .topbar-clock d'être centrée dans CET espace et pas dans l'écran */
.topbar-center {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none;
  z-index: 0;
}

.topbar-clock {
  display: inline-block !important;
  pointer-events: auto;
  transition: opacity 120ms ease;
  /* Le contour noir + halo pour rester lisible */
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
    0 0 4px rgba(0, 0, 0, 0.7);
}

.topbar-clock.is-hidden {
  visibility: hidden;
  opacity: 0;
}
/* ═══════════════════════════════════════════════════════════════════
   PATCH : typo cartoon Cizi + jeu d'ombre uniforme sur la topbar
   Marker: topbar-cizi-typo-marker
   Alternatives font : 'Bowlby One', 'Bagel Fat One', 'Lilita One', 'Sniglet'
   ─────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap');

:root {
  --cizi-text-outline:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0    0   4px rgba(0, 0, 0, 0.75);
  --cizi-img-outline:
    drop-shadow( 1px  1px 0 rgba(0, 0, 0, 0.95))
    drop-shadow(-1px -1px 0 rgba(0, 0, 0, 0.95))
    drop-shadow(-1px  1px 0 rgba(0, 0, 0, 0.95))
    drop-shadow( 1px -1px 0 rgba(0, 0, 0, 0.95))
    drop-shadow( 0    0   3px rgba(0, 0, 0, 0.7));
}

.topbar-cat,
.topbar-cat-label,
.topbar-cat-arrow,
.topbar-sublabel,
.topbar-dropdown-label {
  font-family: 'Bowlby One', system-ui, sans-serif !important;
  font-weight: normal !important;
  letter-spacing: 0.02em !important;
}

.topbar-cat::before {
  font-family: 'Bowlby One', system-ui, sans-serif !important;
  font-weight: normal !important;
  color: rgba(240, 235, 220, 0.95) !important;
  text-shadow: var(--cizi-text-outline) !important;
}

.topbar-cat,
.topbar-cat-label,
.topbar-cat-arrow,
.topbar-sep,
.topbar-sublabel,
.topbar-clock,
.topbar-dropdown-label {
  text-shadow: var(--cizi-text-outline) !important;
}

.topbar-cat-icon {
  filter: var(--cizi-img-outline) !important;
}

.topbar-dropdown-icon {
  filter: var(--cizi-img-outline);
}
.topbar-dropdown-item:hover .topbar-dropdown-icon {
  filter: var(--cizi-img-outline) brightness(1.15);
}

.topbar-search-btn svg,
.topbar-fullscreen svg {
  filter: var(--cizi-img-outline) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH : tuning topbar Cizi — taille + alignement bas + blanc pur
   Marker: topbar-cizi-size-white-marker

   - Catégorie agrandie (22 → 30px) pour matcher la hauteur du logo
   - Alignement vertical bas : logo bottom = label bottom
   - Pleine opacité (1.0) sur tous les textes & icônes (plus de gris)
   ─────────────────────────────────────────────────────────────────── */

/* Catégorie + slash : plus grands & blanc pur */
.topbar-cat,
.topbar-cat-label {
  font-size: 30px !important;
  color: rgba(240, 235, 220, 1) !important;
}
.topbar-cat::before {
  font-size: 30px !important;
  color: rgba(240, 235, 220, 1) !important;
}

/* Flèche ▾ : visible (était à opacity 0.6 → effectif 0.54 = gris) */
.topbar-cat-arrow {
  font-size: 18px !important;
  opacity: 1 !important;
}

/* Sublabel (Films/Séries dans Vision) : proportionné */
.topbar-sublabel {
  font-size: 24px !important;
  color: rgba(240, 235, 220, 1) !important;
}

/* Boutons loupe + plein écran : blanc pur (étaient à 0.7) */
.topbar-search-btn,
.topbar-fullscreen {
  color: rgba(240, 235, 220, 1) !important;
}
.topbar-search-btn:hover,
.topbar-fullscreen:hover {
  color: rgba(255, 255, 255, 1) !important;
}

/* Horloge : full blanc pour cohérence */
.topbar-clock {
  color: rgba(240, 235, 220, 1) !important;
}

/* Alignement vertical : bottom du logo = bottom des labels */
.topbar-left {
  align-items: flex-end !important;
  padding-bottom: 4px !important;
}

/* Responsive mobile : tailles adoucies, alignement conservé */
@media (max-width: 720px) {
  .topbar-cat,
  .topbar-cat-label,
  .topbar-cat::before {
    font-size: 22px !important;
  }
  .topbar-sublabel {
    font-size: 18px !important;
  }
  .topbar-cat-arrow {
    font-size: 14px !important;
  }
  .topbar-left {
    padding-bottom: 2px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH : fix alignement bas texte cat / logo
   Marker: topbar-cizi-align-fix-marker

   - Strip padding vertical du bouton cat (était 4px haut + 4px bas)
   - line-height: 1 → supprime l'espace descender de la line-box
   → bas du texte = bas du bouton = bas du logo (via flex-end précédent)
   ─────────────────────────────────────────────────────────────────── */

.topbar-cat {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

.topbar-sublabel {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}

/* Plus besoin du padding-bottom de breathing room sur .topbar-left :
   la cat strippée touche déjà le bord visuel du logo. */
.topbar-left {
  padding-bottom: 0 !important;
}

/* Si après ce fix le label apparaît légèrement TROP bas (le GIF cizi_mir
   pourrait avoir une padding interne au-dessus de ses lettres), tu peux
   ajuster cette variable de -1 à -4px pour remonter d'un cheveu : */
:root {
  --cizi-cat-fine-tune: -4px;
}
.topbar-cat {
  transform: translateY(var(--cizi-cat-fine-tune)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH : dropdown catégories — tailles agrandies + current encadré
   Marker: topbar-cizi-dropdown-marker

   - Tout est proportionnel à la cat topbar à 30px
   - Current : box-shadow inset (pas de shift de layout) + pleine opacité
   - Suppression du ::before '●' et du gris-grisé
   ─────────────────────────────────────────────────────────────────── */

/* Conteneur dropdown : plus large, plus de padding interne */
.topbar-dropdown {
  top: 58px !important;
  min-width: 280px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  gap: 4px !important;
  border: 1px solid rgba(240, 235, 220, 0.25) !important;
}

/* Items : padding plus généreux + gap icône/label augmenté */
.topbar-dropdown-item {
  padding: 10px 14px !important;
  gap: 16px !important;
  border-radius: 10px !important;
  color: rgba(240, 235, 220, 1) !important;
  /* On prépare une bordure transparente pour que .is-current ne crée
     pas de shift quand il prend une bordure visible : ici on utilise
     box-shadow inset qui ne prend pas de place, mais on harmonise. */
}

/* Label : plus gros (13 → 20px), proportionnel à la cat à 30px */
.topbar-dropdown-label {
  font-size: 20px !important;
  letter-spacing: 0.02em !important;
}

/* Icônes : 40 → 52px */
.topbar-dropdown-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 10px !important;
}

/* ── CATÉGORIE COURANTE : encadrée, pas grisée ─────────────────── */

/* Annule le grisé + le point */
.topbar-dropdown-item.is-current {
  color: rgba(240, 235, 220, 1) !important;
  /* On garde pointer-events:none → click impossible (déjà dans la cat) */
  /* Encadré via box-shadow inset (n'affecte pas les dimensions) */
  box-shadow: inset 0 0 0 2px rgba(240, 235, 220, 1) !important;
  background: rgba(240, 235, 220, 0.06) !important;
}

/* Supprime le point '●' */
.topbar-dropdown-item.is-current::before {
  content: none !important;
}

/* Icône courante : pleine opacité (était à 0.45) */
.topbar-dropdown-item.is-current .topbar-dropdown-icon {
  opacity: 1 !important;
}

/* ── Sous-menu Vision (Films / Séries) proportionnel ───────────── */

.topbar-dropdown-item--sub {
  font-size: 16px !important;
  padding: 8px 12px !important;
}

.topbar-dropdown-sub-toggle {
  width: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH : espacement logo↔cat + uniformisation dropdown
   Marker: topbar-cizi-spacing-uniform-marker
   ─────────────────────────────────────────────────────────────────── */

/* ── 1. Resserrer logo ↔ catégorie ────────────────────────────── */
/* Suppression du padding gauche du bouton, slash très collé au label */
.topbar-cat {
  padding-left: 0 !important;
}
.topbar-cat::before {
  margin-right: 3px !important;
}

/* ── 2. Labels du dropdown = mêmes specs que la cat en cours ───
   La police (Fredoka One) et l'ombre (var(--cizi-text-outline)) sont
   déjà appliquées au .topbar-dropdown-label via topbar-cizi-typo-marker.
   Il restait juste la taille à harmoniser (était 20px). */
.topbar-dropdown-label {
  font-size: 30px !important;
}

/* Élargir le dropdown pour accommoder les labels plus larges
   (sinon "Contact" déborde ou wrap sur 2 lignes) */
.topbar-dropdown {
  min-width: 320px !important;
}

/* Sous-items Films/Séries proportionnels (mais légèrement plus petits
   pour marquer la hiérarchie) */
.topbar-dropdown-item--sub {
  font-size: 24px !important;
}

/* ── Responsive mobile : on baisse les tailles ──────────────── */
@media (max-width: 720px) {
  .topbar-dropdown-label {
    font-size: 22px !important;
  }
  .topbar-dropdown {
    min-width: 240px !important;
  }
  .topbar-dropdown-item--sub {
    font-size: 18px !important;
  }
}

/* topbar-zindex-iframe-marker — assure que la topbar reste cliquable au-dessus de l'iframe Vision */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }
.topbar-dropdown { z-index: 11; }
.topbar-search-overlay { z-index: 12; }
body { padding-top: var(--topbar-h, 56px); }

/* spa-fix-body-padding-marker — supprime la marge body sur Vision/Sono (iframe gère sa hauteur) */
body[data-categorie="vision"],
body[data-categorie="sono"] {
  padding-top: 0 !important;
  overflow: hidden;
}
body[data-categorie="vision"] main,
body[data-categorie="sono"] main {
  display: none !important;
}

/* vision-fs-topbar-sync-marker — topbar cizi.fr cachée quand Vision est en mode lecteur non-mini */
body[data-vision-fs="true"] .topbar {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 300ms ease !important;
}
body[data-vision-fs="true"] {
  /* compense le padding-top qui réservait la hauteur de la topbar */
  padding-top: 0 !important;
}


/* vision-tabs-marker — nav onglets sous la topbar, visible uniquement sur /vision/* */
.topbar-tabs {
  position: fixed;
  /* vision-tabs-polish-marker — chevauche 8px le bas de la topbar pour resserrement maximal */
  top: 40px;
  left: 0;
  right: 0;
  /* vision-tabs-flat-marker — hauteur réduite (40→32) pour rapprocher visuellement de la topbar */
  height: 32px;
  z-index: 999;
  /* vision-tabs-flat-marker — transparence totale (extension visuelle de la topbar) */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  transition: opacity 300ms ease;
}

/* vision-tabs-transparency-marker — masquage onglets en vidéo plein écran (clone .topbar) */
body[data-vision-fs="true"] .topbar-tabs {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* vision-tabs-transparency-marker — masquage topbar + onglets en audio plein écran.
   Signal data-music-fs posé par spa-nav.js quand le MusicPlayer envoie
   postMessage { type: "vision:music-fullscreen-mode", on: true|false }. */
/* vision-tabs-transparency-marker — TRIMMED le 30/05/2026 :
   on retire .topbar du sélecteur (la topbar est désormais contrôlée par
   React via fix-cizi-bar-fs-marker en appbar.tsx, qui respecte
   musicControlsVisible pour permettre auto-hide réveillable au mousemove) */
body[data-music-fs="true"] .topbar-tabs {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 300ms ease !important;
}
body[data-music-fs="true"] {
  padding-top: 0 !important;
}
.topbar-tab {
  color: rgba(240, 235, 220, 0.65);
  text-decoration: none;
  font-size: 14px;
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid transparent;
  white-space: nowrap;
  /* vision-tabs-polish-marker — halo noir pour lisibilité sur fond clair (jaquettes blanches etc) */
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.9),
    0 0 2px rgba(0, 0, 0, 0.9),
    1px 1px 2px rgba(0, 0, 0, 0.8),
    -1px -1px 2px rgba(0, 0, 0, 0.8);
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.topbar-tab:hover {
  color: rgba(240, 235, 220, 1);
  background: rgba(255, 255, 255, 0.06);
}
.topbar-tab.is-current {
  /* vision-tabs-highlight-marker — surlignage background au lieu de border */
  color: rgba(240, 235, 220, 1);
  background: rgba(240, 235, 220, 0.18);
  border-color: transparent;
}

/* ════════════════════════════════════════════════════════════
   topbar-stacking-isolation-marker
   Hisse la topbar et les onglets Vision au sommet absolu du
   stacking arbre, pour qu'aucune vignette Vision (jaquettes,
   captures de lecture) ne puisse passer par-dessus, quel que
   soit son propre stacking context (transform, will-change,
   backdrop-filter, etc.).

   z-index 2147483640 = INT_MAX - 7 (suffisamment haut pour
   battre tout ce qui s'invente dans Vision, suffisamment bas
   pour laisser place à d'éventuels overlays critiques).

   isolation: isolate crée un stacking context racine explicite,
   qui prime sur les contextes des descendants même si leur
   z-index est élevé dans leur propre contexte.

   transform: translateZ(0) en garde-fou (force la promotion
   en couche compositing, donc stacking context garanti).
   ════════════════════════════════════════════════════════════ */
.topbar {
  z-index: 2147483640 !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
}
.topbar-tabs {
  z-index: 2147483639 !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
}

/* ════════════════════════════════════════════════════════════
   cizi-mini-player-marker
   Mini-lecteur audio centre topbar
   ════════════════════════════════════════════════════════════ */
.cizi-mini-track {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(60vw, 480px);
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  font-family: monospace;
  font-size: 13px;
  color: rgba(240, 235, 220, 0.85);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(240, 235, 220, 0.1);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
  cursor: pointer;
  overflow: hidden;
}
.cizi-mini-track[hidden] { display: none !important; }
.cizi-mini-track:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(240, 235, 220, 0.25);
  color: rgba(240, 235, 220, 1);
}
.cizi-mini-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.85;
}
.cizi-mini-icon svg { width: 16px; height: 16px; }
.cizi-mini-title,
.cizi-mini-artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cizi-mini-title  { flex: 0 1 auto; font-weight: 600; }
.cizi-mini-artist { flex: 0 1 auto; opacity: 0.7; }
.cizi-mini-sep    { opacity: 0.4; flex-shrink: 0; }

/* Mobile : artiste + séparateur masqués, titre seul */
@media (max-width: 720px) {
  .cizi-mini-track { max-width: 55vw; padding: 0 10px; }
  .cizi-mini-artist,
  .cizi-mini-sep { display: none; }
}

/* ════════════════════════════════════════════════════════════
   cizi-mini-player-v2-marker
   Bouton-icône (GIF animé) qui toggle le BottomPlayer
   ════════════════════════════════════════════════════════════ */
.cizi-mini-toggle {
  background: transparent;
  border: none;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}
.cizi-mini-toggle[hidden] { display: none !important; }
.cizi-mini-toggle:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.08);
}
.cizi-mini-toggle:active {
  transform: scale(0.95);
}
.cizi-mini-toggle img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
}

/* ════════════════════════════════════════════════════════════
   cizi-mini-player-v3-marker
   Module .cizi-mini-bar dans .topbar-right :
     mode réduit : [icône] (=v2)
     mode étendu : [icône] [▶/⏸] [titre]
   ════════════════════════════════════════════════════════════ */
.cizi-mini-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
}
.cizi-mini-bar[hidden] { display: none !important; }

/* Bouton ▶/⏸ + titre cachés en mode réduit */
.cizi-mini-bar .cizi-mini-pp,
.cizi-mini-bar .cizi-mini-title { display: none; }
.cizi-mini-bar.is-extended .cizi-mini-pp { display: inline-flex; }
.cizi-mini-bar.is-extended .cizi-mini-title { display: inline-block; }

/* Bouton play/pause */
.cizi-mini-bar .cizi-mini-pp {
  background: transparent;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(240, 235, 220, 0.85);
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.cizi-mini-bar .cizi-mini-pp:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(240, 235, 220, 1);
  transform: scale(1.05);
}
.cizi-mini-bar .cizi-mini-pp:active { transform: scale(0.95); }
.cizi-mini-bar .cizi-mini-pp svg { width: 18px; height: 18px; display: block; }

/* Titre cliquable */
.cizi-mini-bar .cizi-mini-title {
  max-width: 200px;
  font-family: monospace;
  font-size: 13px;
  color: rgba(240, 235, 220, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  padding: 0 6px;
  transition: color 150ms ease;
}
.cizi-mini-bar .cizi-mini-title:hover { color: rgba(240, 235, 220, 1); }

/* Mobile : titre masqué, icône + play/pause restent */
@media (max-width: 720px) {
  .cizi-mini-bar.is-extended .cizi-mini-title { display: none; }
}

/* ════════════════════════════════════════════════════════════
   cizi-mini-bar-css-v4-marker — barre 4 boutons + zone tray
   Layout : [zone-tray (titre+▶/⏸, si trayMode)] [tray][mini][cast][fs]
   ════════════════════════════════════════════════════════════ */

/* Visibilité globale : la barre se cache via data-music-controls-hidden
   (signal d'auto-hide 10s envoyé depuis le FullScreenPlayer Vision) */
body[data-music-controls-hidden="true"] .cizi-mini-bar {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cizi-mini-bar { transition: opacity 0.3s ease; }

/* Zone tray (titre + play/pause) : visible uniquement si trayMode */
.cizi-mini-bar .cizi-tray-zone {
  display: none;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}
body[data-tray-active="true"] .cizi-mini-bar .cizi-tray-zone {
  display: inline-flex;
}

/* Les 4 boutons d'action */
.cizi-mini-bar .cizi-act {
  background: transparent;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(240, 235, 220, 0.65);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.cizi-mini-bar .cizi-act:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(240, 235, 220, 1);
  transform: scale(1.05);
}
.cizi-mini-bar .cizi-act:active { transform: scale(0.95); }
.cizi-mini-bar .cizi-act svg { width: 18px; height: 18px; display: block; }

/* États actifs */
.cizi-mini-bar .cizi-act.is-active { color: rgba(240, 235, 220, 1); }
.cizi-mini-bar .cizi-act-cast.is-active { color: #60a5fa; } /* bleu Cast */

/* ════════════════════════════════════════════════════════════
   loupe-hide-fs-marker — loupe masquée en full fenêtre / full screen
   - FS Vision musique (data-music-fs)
   - FS Vision vidéo  (data-vision-fs)
   - F11 navigateur   (Fullscreen API :fullscreen)
   ════════════════════════════════════════════════════════════ */
body[data-music-fs="true"]  #topbar-search-btn,
body[data-vision-fs="true"] #topbar-search-btn {
  display: none;
}
html:fullscreen #topbar-search-btn,
:fullscreen #topbar-search-btn {
  display: none;
}

/* tabs-hide-fs-marker — masquer onglets Accueil/Films/Séries/Sono en FS */
body[data-music-fs="true"]  #topbar-tabs,
body[data-vision-fs="true"] #topbar-tabs {
  display: none !important;
}
html:fullscreen #topbar-tabs,
:fullscreen #topbar-tabs {
  display: none !important;
}

/* barre-cizi-fadein-fs-marker — barre cizi visible en FS musique,
   soumise uniquement à l'auto-hide souple (controls hidden = opacity 0).
   Le mouvement souris/touch en FS réinitialise le timer 10s côté Vision,
   ce qui repose controls hidden = false → barre réapparaît en fade-in. */
body[data-music-fs="true"] .cizi-mini-bar {
  /* assure visibilité par défaut en FS (override toute règle [hidden]) */
  display: inline-flex;
  position: relative;
  z-index: 2147483641; /* > topbar pour être au-dessus du voile FS */
}
/* Quand controls hidden, fade-out doux mais barre reste cliquable jusqu'au mouvement */
body[data-music-fs="true"][data-music-controls-hidden="true"] .cizi-mini-bar {
  opacity: 0;
  transition: opacity 0.4s ease;
}
body[data-music-fs="true"] .cizi-mini-bar {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* ════════════════════════════════════════════════════════════
   cizi-bar-visible-fs-marker — barre cizi VISIBLE et CLIQUABLE en FS musique
   ────────────────────────────────────────────────────────────
   Annule l'opacity:0 / pointer-events:none hérités de :
     body[data-music-fs="true"] .topbar { opacity:0; pointer-events:none; }
   pour la barre cizi uniquement (île visible dans la topbar opacity:0).
   ════════════════════════════════════════════════════════════ */

/* Force la barre cizi visible (opacity 1) en FS musique malgré .topbar opacity:0 */
body[data-music-fs="true"] .topbar .cizi-mini-bar {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Soumet la barre cizi à l'auto-hide souple (controls hidden) */
body[data-music-fs="true"][data-music-controls-hidden="true"] .topbar .cizi-mini-bar {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease !important;
}

/* La topbar parent doit accepter le pointer-events de ses enfants même
   si elle-même est en pointer-events:none. Ça marche grâce à la cascade
   pointer-events:auto explicite sur l'enfant ci-dessus. */

/* Transition fluide à la réapparition */
body[data-music-fs="true"] .topbar .cizi-mini-bar {
  transition: opacity 0.3s ease !important;
}

/* tabs-hide-fs-music-css-marker — onglets cachés en FS musique
   (data-music-fs est posé par body via Vision postMessage,
   et par Vision lui-même qui rend les tabs hors topbar) */
body[data-music-fs="true"] .topbar-tabs,
body[data-music-fs="true"] #topbar-tabs {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 300ms ease !important;
}

/* ════════════════════════════════════════════════════════════
   cizi-bar-fixed-fs-marker — barre cizi extraite du stacking topbar en FS musique
   Quand .topbar parent passe en opacity:0, la cascade d'opacité rend ses enfants
   invisibles. Solution : passer .cizi-mini-bar en position:fixed pour l'extraire.
   ════════════════════════════════════════════════════════════ */
body[data-music-fs="true"] .cizi-mini-bar {
  position: fixed !important;
  top: 6px !important;
  right: 8px !important;
  z-index: 2147483641 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Auto-hide souple : reste fixed mais opacity 0 */
body[data-music-fs="true"][data-music-controls-hidden="true"] .cizi-mini-bar {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* topbar-zindex-fs-marker — en FS musique, la topbar passe AU-DESSUS du FS
   overlay Vision (z-90), sinon le opacity:1 fix-cizi-bar-fs-marker ne suffit
   pas (la topbar est cachée derrière l'overlay). */
body[data-music-fs="true"] .topbar {
  z-index: 100 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PATCH : dropdown — icône agrandie (position inchangée, reste à gauche)
   Marker: topbar-dropdown-icon-size-marker
   ─────────────────────────────────────────────────────────────────── */
.topbar-dropdown-icon {
  width: 64px !important;
  height: 64px !important;
  order: -1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   cizi-bar-fs-no-overlap-marker — en FS musique, décale la mini-bar
   (♪/cast) vers la gauche pour ne plus chevaucher le bouton [  ] de Vision.
   Cible : ...  📡  [  ]
   ─────────────────────────────────────────────────────────────────── */
body[data-music-fs="true"] .cizi-mini-bar {
  right: 72px !important;
}