/**
 * Player One : plateforme publique.
 * Thème clair, disposition inspirée des grandes plateformes vidéo :
 * barre du haut fixe, navigation latérale gauche, grille de vignettes.
 *
 * La réinitialisation est enveloppée dans :where() pour avoir une priorité
 * nulle : elle ne doit jamais écraser nos propres règles de classe.
 */

.po-pf {
  --pf-bg:      #ffffff;
  --pf-surface: #f2f2f2;
  --pf-raise:   #e5e5e5;
  --pf-line:    #e5e5e5;
  --pf-text:    #0f0f0f;
  --pf-muted:   #606060;
  --pf-faint:   #8b8b8b;
  --pf-brand:   var(--ru-accent,#E50914);
  --pf-radius:  12px;
  --pf-font:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:where(.po-pf, .po-pf *, .po-pf *::before, .po-pf *::after) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.po-pf-page {
  margin:      0;
  padding:     0;
  background:  #ffffff;
  color:       var(--ru-texte,#0e2438);
  font-family: var(--ru-police,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif);
  -webkit-font-smoothing: antialiased;
}

.po-pf {
  background:  var(--pf-bg);
  color:       var(--pf-text);
  font-family: var(--pf-font);
  min-height:  100vh;
  font-size:   14px;
  line-height: 1.45;
}

.po-pf__dot { margin: 0 5px; color: var(--pf-muted); }

/* -- Barre du haut ------------------------------------------- */

.po-pf__top {
  position:      sticky;
  top:           0;
  z-index:       60;
  display:       flex;
  align-items:   center;
  gap:           16px;
  height:        60px;
  padding:       0 16px;
  background:    var(--pf-bg);
  border-bottom: 1px solid var(--pf-line);
}

/* Le hamburger et le logo forment UN bloc, aligné avec la colonne du menu :
   l'icône du hamburger doit tomber pile au-dessus de celles du menu. */
.po-pf__top-gauche {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-shrink: 0;
}

.po-pf__logo { flex-shrink: 0; display: block; line-height: 0; }
.po-pf__logo img { height: 34px; width: auto; display: block; }

.po-pf__search {
  position:  relative;
  flex:      1;
  max-width: 620px;
  margin:    0 auto;
}

.po-pf__search svg {
  position:  absolute;
  left:      15px;
  top:       50%;
  transform: translateY(-50%);
  width:     18px;
  height:    18px;
  fill:      var(--pf-faint);
  pointer-events: none;
}

.po-pf__search input[type="search"] {
  width:         100%;
  padding:       9px 16px 9px 44px;
  background:    var(--pf-bg);
  border:        1px solid #cccccc;
  border-radius: 999px;
  color:         var(--pf-text);
  font-size:     15px;
  font-family:   inherit;
  outline:       none;
  transition:    border-color .16s ease, box-shadow .16s ease;
}

.po-pf__search input[type="search"]:focus {
  border-color: var(--pf-brand);
  box-shadow:   0 0 0 3px rgba(229,9,20,.12);
}

.po-pf__search input[type="search"]::placeholder { color: var(--pf-faint); }

/* -- En-tête CLAIR (charte du Réseau, 2026-09-30) -------------
   La barre du haut reste claire comme le reste du site. Le logo de
   Player One, livré sur fond noir, est posé dans une petite pastille
   arrondie (l'œuvre du logo), et les contrôles gardent leurs couleurs
   claires de base. L'accent est le rouge de Player One. */
.po-pf__top {
  background:    var(--pf-bg);
  border-bottom: 1px solid var(--pf-line);
}
.po-pf__top .po-pf__logo img { border-radius: 8px; }
.po-pf__top .po-pf__burger { color: var(--pf-text); }
.po-pf__top .po-pf__burger:hover { background: var(--pf-surface); }

/* Se connecter : bouton plein à l'accent rouge. */
.po-pf__top .po-pf__act--suivre {
  background:   var(--ru-accent,#E50914);
  color:        var(--ru-sur-accent,#FFFFFF);
  border-color: var(--ru-accent,#E50914);
}
.po-pf__top .po-pf__act--suivre:hover { background: var(--ru-accent-fonce,#c20811); }

/* Un léger contour sur l'avatar. */
.po-pf__top .po-pf__moi-btn .po-avatar-rond,
.po-pf__top .po-pf__moi-btn img { box-shadow: 0 0 0 1px var(--pf-line); }

/* -- Ossature : navigation latérale + contenu ---------------- */

.po-pf__shell { display: flex; align-items: flex-start; }

.po-pf__nav {
  position:    sticky;
  top:         60px;
  flex-shrink: 0;
  width:       240px;
  height:      calc(100vh - 60px);
  overflow-y:  auto;
  /* On decolle le premier bouton (Accueil) de la barre du haut. */
  padding:     22px 12px 30px;
}

.po-pf__nav-group { padding: 6px 0; }
/* Respiration supplementaire au-dessus du tout premier groupe du menu. */
.po-pf__nav-group:first-child { padding-top: 2px; }

.po-pf__nav-group + .po-pf__nav-group {
  border-top: 1px solid var(--pf-line);
  margin-top: 6px;
}

.po-pf__nav-title {
  padding:     12px 12px 6px;
  font-size:   13px;
  font-weight: 600;
  color:       var(--pf-text);
}

.po-pf__nav-item {
  display:         flex;
  align-items:     center;
  gap:             22px;
  padding:         9px 12px;
  border-radius:   10px;
  color:           var(--pf-text);
  text-decoration: none;
  font-size:       14px;
  transition:      background .14s ease;
}

.po-pf__nav-item:hover { background: var(--pf-surface); }
.po-pf__nav-item.po-on { background: var(--pf-raise); font-weight: 600; }
.po-pf__nav-item svg   { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; transition: transform .12s ease; }

/* Icônes en couleur : la barre respire au lieu de paraître vide et éteinte. */
.po-pf__nav-item--accueil svg { fill: #0f9d58; }
.po-pf__nav-item--abos svg    { fill: #1f7ae0; }
.po-pf__nav-item--direct svg  { fill: #e50914; }
.po-pf__nav-item--events svg  { fill: #1A73E8; }
.po-pf__nav-item--onglet svg  { fill: #e0851f; }
.po-pf__nav-item--podcast svg { fill: #F28C00; }
.po-pf__nav-item--film svg    { fill: #f2a30f; }
.po-pf__nav-item--shorts svg  { fill: #E50914; }
.po-pf__nav-item:hover svg    { transform: scale(1.08); }
/* Catégories (dossiers) : un ambre chaleureux */
.po-pf__nav-group .po-pf__nav-item:not([class*="--"]) svg { fill: #e0a51f; }

.po-pf__nav-item span {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.po-pf__nav-caret {
  margin-left: auto;
  font-size: 12px;
  line-height: 1;
  color: var(--pf-muted);
}

/* Repli natif, au clavier et à la souris : aucun changement de page. */
.po-pf__nav-accordion > summary.po-pf__nav-item {
  list-style: none;
  cursor: pointer;
}
.po-pf__nav-accordion > summary.po-pf__nav-item::-webkit-details-marker { display: none; }
.po-pf__nav-accordion > summary.po-pf__nav-item::marker { content: ''; }
.po-pf__nav-accordion > summary.po-pf__nav-item:focus-visible {
  outline: 2px solid var(--pf-brand, #e50914);
  outline-offset: 2px;
}
.po-pf__nav-accordion .po-pf__nav-caret { transition: transform .16s ease; }
.po-pf__nav-accordion[open] .po-pf__nav-caret { transform: rotate(180deg); }

.po-pf__nav-sub {
  display: grid;
  gap: 4px;
  margin: 4px 0 8px 18px;
  padding: 2px 0 2px 14px;
  border-left: 1px solid var(--pf-line);
}

.po-pf__nav-subitem {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--pf-muted);
  text-decoration: none;
  font-size: 13px;
  transition: background .14s ease, color .14s ease;
}

.po-pf__nav-subitem svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.po-pf__nav-subitem:hover {
  background: var(--pf-surface);
  color: var(--pf-text);
}

.po-pf__nav-subitem.po-on {
  background: var(--pf-raise);
  color: var(--pf-text);
  font-weight: 600;
}

.po-pf__content { flex: 1; min-width: 0; padding: 22px 24px 60px; }

.po-pf__h1 {
  font-size:      20px;
  font-weight:    700;
  letter-spacing: -.02em;
  margin:         0 0 18px;
}

/* -- Chips de catégories ------------------------------------- */

.po-pf__chips {
  display:        flex;
  gap:            9px;
  overflow-x:     auto;
  padding-bottom: 4px;
  margin-bottom:  22px;
  scrollbar-width: none;
}

.po-pf__chips::-webkit-scrollbar { display: none; }

.po-pf__chip {
  flex-shrink:     0;
  padding:         7px 13px;
  background:      var(--pf-surface);
  border:          0;
  border-radius:   9px;
  color:           var(--pf-text);
  font-size:       14px;
  font-weight:     500;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background .14s ease;
}

.po-pf__chip:hover  { background: #e0e0e0; }
.po-pf__chip.po-on  { background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); }

/* -- Grille de vidéos ---------------------------------------- */

.po-pf__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   38px 16px;
}

.po-pf__card { min-width: 0; }

/* -- Barre d'outils : tri + bascule grille/liste --------------- */
.po-pf__toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  flex-wrap:       wrap;
  margin:          0 0 20px;
}
/* Groupe de gauche de la barre d'outils : les tris et, au besoin, le bouton
   « Essayer la régie ». Le bouton reste ainsi sur la MÊME ligne que « Plus
   anciennes » au lieu de prendre une ligne pour lui tout seul. */
.po-pf__toolbar-gauche { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
/* Groupe de droite : le bouton « Filtrer » PUIS les icônes grille/liste, sur
   la même ligne. « Filtrer » se retrouve ainsi toujours À GAUCHE des icônes. */
.po-pf__toolbar-droite { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.po-pf__tris { display: flex; gap: 6px; flex-wrap: wrap; }
/* On aligne la taille du bouton régie sur celle des pastilles de tri. */
.po-pf__toolbar-regie { padding: 6px 14px; font-size: 13px; white-space: nowrap; }
.po-pf__tri {
  font-size:     13px;
  font-weight:   600;
  color:         var(--pf-muted);
  text-decoration: none;
  padding:       6px 13px;
  border-radius: 999px;
  border:        1px solid transparent;
  transition:    background .15s ease, color .15s ease;
}
.po-pf__tri:hover { color: var(--pf-text); background: var(--pf-surface); }
.po-pf__tri.is-actif {
  color:        var(--pf-text);
  background:   var(--pf-surface);
  border-color: rgba(0,0,0,.12);
}
.po-pf__bascule {
  display:       inline-flex;
  gap:           2px;
  background:    var(--pf-surface);
  border-radius: 10px;
  padding:       3px;
  flex-shrink:   0;
}
.po-pf__bascule-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          30px;
  border:          0;
  background:      transparent;
  border-radius:   8px;
  color:           var(--pf-muted);
  cursor:          pointer;
  transition:      background .15s ease, color .15s ease;
}
.po-pf__bascule-btn svg { width: 18px; height: 18px; fill: currentColor; }
.po-pf__bascule-btn.is-actif {
  background: var(--pf-bg);
  color:      var(--pf-text);
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
}

/* -- Mode LISTE : cartes en rangées, plus compact -------------- */
.po-pf__grid--liste {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}
.po-pf__grid--liste .po-pf__card--pub { display: none; }
.po-pf__grid--liste .po-pf__card {
  display:       flex;
  gap:           14px;
  align-items:   flex-start;
  padding:       8px;
  border-radius: 12px;
  transition:    background .15s ease;
}
.po-pf__grid--liste .po-pf__card:hover { background: var(--pf-surface); }
.po-pf__grid--liste .po-pf__thumb {
  width:         246px;
  max-width:     40%;
  margin-bottom: 0;
  flex:          none;
}
.po-pf__grid--liste .po-pf__card-row { flex: 1; min-width: 0; }
@media (max-width: 560px) {
  .po-pf__grid--liste .po-pf__thumb { width: 44%; }
}

.po-pf__thumb {
  display:       block;
  position:      relative;
  width:         100%;
  aspect-ratio:  16 / 9;
  background:    var(--pf-surface);
  border-radius: var(--pf-radius);
  overflow:      hidden;
  margin-bottom: 12px;
}

.po-pf__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.po-pf__thumb-vide {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.po-pf__thumb-vide svg { width: 40px; height: 40px; fill: var(--pf-faint); }

/* Anatomie de carte : avatar de la chaîne à gauche du texte */
.po-pf__card-row { display: flex; gap: 12px; }

.po-pf__card-av { flex-shrink: 0; line-height: 0; }

.po-pf__card-av img {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  display:       block;
}

.po-pf__card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.po-pf__card-title {
  color:           var(--pf-text);
  font-size:       15px;
  font-weight:     600;
  line-height:     1.35;
  text-decoration: none;
  display:         -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:        hidden;
}

.po-pf__card-chan {
  color:           var(--pf-muted);
  font-size:       13px;
  text-decoration: none;
  width:           fit-content;
}

a.po-pf__card-chan:hover { color: var(--pf-text); }

.po-pf__card-meta { color: var(--pf-muted); font-size: 13px; }

/* -- Page de visionnement ------------------------------------ */

.po-pf__watch {
  flex:                  1;
  min-width:             0;
  padding:               22px 24px 60px;
  display:               grid;
  grid-template-columns: minmax(0, 1fr) 402px;
  gap:                   24px;
  align-items:           start;
}

.po-pf__main { min-width: 0; }

.po-pf__stage {
  border-radius: var(--pf-radius);
  overflow:      hidden;
  background:    #000000;
  margin-bottom: 14px;
}

.po-pf__title {
  font-size:      20px;
  font-weight:    700;
  letter-spacing: -.02em;
  line-height:    1.35;
  margin-bottom:  12px;
}

/* Rangée chaîne + actions */
.po-pf__bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  flex-wrap:       wrap;
  margin-bottom:   14px;
}

.po-pf__owner-link {
  display:         flex;
  align-items:     center;
  gap:             12px;
  text-decoration: none;
}

.po-pf__avatar { line-height: 0; flex-shrink: 0; }

.po-pf__avatar img {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  display:       block;
}

.po-pf__owner-name { color: var(--pf-text); font-weight: 600; font-size: 15px; }

.po-pf__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; max-width: 100%; }

/* J'aime / Je n'aime pas */
.po-pf__votes { display: inline-flex; align-items: center; background: var(--pf-raise); border-radius: 999px; overflow: hidden; }
.po-pf__vote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf-text);
}
.po-pf__vote + .po-pf__vote { border-left: 1px solid var(--pf-line); }
.po-pf__vote svg { width: 20px; height: 20px; fill: currentColor; }
.po-pf__vote:hover { background: rgba(0, 0, 0, .05); }
.po-pf__vote.po-on { color: var(--pf-brand); }

/* Bouton « Lire l'article sur Magazine Hip-Hop » (interconnexion) */
/* Bouton « Article » : compact, dans la rangée d'actions, teinté marque. */
.po-pf__act--article { background: var(--pf-brand); color: #fff; }
.po-pf__act--article:hover { background: #c20811; color: #fff; }
.po-pf__act--article svg { fill: currentColor; }

.po-pf__act {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         9px 16px;
  background:      var(--pf-surface);
  border:          0;
  border-radius:   999px;
  color:           var(--pf-text);
  font-size:       14px;
  font-weight:     600;
  font-family:     inherit;
  cursor:          pointer;
  text-decoration: none;
  transition:      background .14s ease;
}

.po-pf__act:hover { background: var(--pf-raise); }
.po-pf__act svg   { width: 20px; height: 20px; fill: currentColor; }

/* Bouton « Visite guidée » : ouvert a tous, connectes ou non. Icone au trait
   (et non pleine), donc on neutralise le remplissage herite ci-dessus. */
.po-pf__act--tour svg { fill: none; width: 18px; height: 18px; }
/* Sur les tres petits ecrans, on garde l'icone seule pour ne pas encombrer la
   barre du haut ; le titre reste accessible via l'attribut title/aria-label. */
@media (max-width: 640px) {
  .po-pf__act--tour span { display: none; }
  .po-pf__act--tour { padding: 9px; }
}

/* Bouton Suivre / Suivi : deux états visuellement distincts.
   « Suivre » (pas encore suivi) : bouton noir plein, appel à l'action.
   « Suivi » (déjà suivi, classe po-on) : contour transparent, discret. */
.po-pf__act--suivre { background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); font-weight: 600; }
.po-pf__act--suivre:hover { background: var(--ru-accent-fonce,#c20811); }
.po-pf__act--suivre.po-on {
  background:  transparent;
  color:       var(--pf-text);
  box-shadow:  inset 0 0 0 1px var(--pf-line);
  font-weight: 500;
}
.po-pf__act--suivre.po-on:hover { background: var(--pf-surface); }

.po-pf__meta-box {
  background:    var(--pf-surface);
  border-radius: var(--pf-radius);
  padding:       12px 14px;
}

.po-pf__meta {
  color:         var(--pf-text);
  font-size:     14px;
  font-weight:   600;
  margin-bottom: 6px;
}

.po-pf__desc { color: var(--pf-text); font-size: 14px; }
.po-pf__desc p { margin: 0 0 9px; }
.po-pf__desc p:last-child { margin-bottom: 0; }
.po-pf__desc a { color: #065fd4; }

/* Description repliée par défaut : 5 lignes nettes + « Lire plus » avec flèche. */
.po-pf__desc-box { position: relative; }
.po-pf__desc-box.po-collapsed .po-pf__desc {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.po-pf__desc-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  border: 0;
  background: none;
  color: var(--pf-text);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  padding: 4px 0;
}
/* Petite flèche : pointe vers le bas quand replié, vers le haut quand ouvert. */
.po-pf__desc-more::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform .15s ease;
}
.po-pf__desc-box:not(.po-collapsed) .po-pf__desc-more::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.po-pf__desc-more:hover { color: var(--pf-brand); }
.po-pf__desc-box.po-desc-court .po-pf__desc-more { display: none; }
.po-pf__desc-box.po-desc-court.po-collapsed .po-pf__desc {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
}

/* -- Panneau de partage -------------------------------------- */

/* L'attribut hidden doit gagner : sans cette règle, notre display:flex
   (règle d'auteur) écrase le display:none de la feuille du navigateur,
   et le panneau s'ouvre tout seul sans pouvoir se fermer. */
.po-pf__share-back[hidden] { display: none; }

.po-pf__share-back {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.55);
  z-index:         2000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
}

.po-pf__share {
  background:    #ffffff;
  border-radius: 14px;
  width:         100%;
  max-width:     480px;
  padding:       22px;
  box-shadow:    0 24px 70px rgba(0,0,0,.3);
  max-height:    min(90vh, 800px);
  overflow-y:    auto;
}

.po-pf__share-h {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   18px;
}

.po-pf__share-h strong { font-size: 17px; }

.po-pf__share-x {
  background:    transparent;
  border:        0;
  cursor:        pointer;
  width:         32px;
  height:        32px;
  border-radius: 50%;
  font-size:     20px;
  line-height:   1;
  color:         var(--pf-muted);
}

.po-pf__share-x:hover { background: var(--pf-surface); }

.po-pf__share-nets {
  display:       flex;
  gap:           14px;
  margin-bottom: 20px;
  flex-wrap:     wrap;
}

.po-pf__net {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             7px;
  text-decoration: none;
  color:           var(--pf-muted);
  font-size:       12px;
  width:           62px;
}

.po-pf__net i {
  width:           50px;
  height:          50px;
  border-radius:   50%;
  background:      var(--pf-surface);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background .14s ease;
}

/* Vrai bouton d'intégration dans la rangée de partage. */
.po-pf__net--bouton { border: 0; background: transparent; padding: 0; font: inherit; text-align: center; cursor: pointer; }
.po-pf__net--bouton[aria-expanded="true"] i { background: var(--pf-raise); }

.po-pf__net:hover i { background: var(--pf-raise); }
.po-pf__net svg { width: 24px; height: 24px; fill: var(--pf-text); }

.po-pf__copy {
  display:       flex;
  gap:           8px;
  background:    var(--pf-surface);
  border-radius: 10px;
  padding:       6px 6px 6px 14px;
  align-items:   center;
}

.po-pf__copy input {
  flex:        1;
  background:  transparent;
  border:      0;
  outline:     none;
  font-size:   14px;
  color:       var(--pf-text);
  font-family: inherit;
  min-width:   0;
}

.po-pf__copy button {
  background:    var(--pf-brand);
  color:         #ffffff;
  border:        0;
  border-radius: 8px;
  padding:       9px 18px;
  font-size:     14px;
  font-weight:   700;
  font-family:   inherit;
  cursor:        pointer;
  flex-shrink:   0;
}

.po-pf__copy button:hover { filter: brightness(1.07); }

.po-pf__embed[hidden] { display: none; }
/* Intégration externe : iframe natif, sans lecteur ou flux secondaire. */
.po-pf__embed { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--pf-border, #e6e6e6); }
.po-pf__embed h3 { margin: 0 0 7px; color: var(--pf-text); font-size: 15px; }
.po-pf__embed p { color: var(--pf-muted); font-size: 12px; line-height: 1.5; margin: 0 0 10px; }
.po-pf__embed textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 80px;
  padding: 10px; border: 1px solid var(--pf-border, #ddd); border-radius: 8px;
  background: var(--pf-surface, #f7f7f7); color: var(--pf-text, #111);
  font: 12px/1.5 ui-monospace, Consolas, monospace;
}
.po-pf__embed-actions { display: flex; align-items: center; gap: 15px; margin-top: 9px; }
.po-pf__embed-actions button {
  border: 0; padding: 9px 15px; border-radius: 8px; cursor: pointer;
  background: var(--pf-brand, #e50914); color: white; font-size: 13px; font-family: inherit; font-weight: 700;
}
.po-pf__embed-actions a { color: var(--pf-text); font-size: 13px; text-decoration: underline; }

/* -- Code QR dans le panneau Partager ------------------------ */
.po-pf__qr { margin-top: 14px; }
.po-pf__qr-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       9px 15px;
  border:        1px solid var(--pf-border, rgba(0,0,0,.14));
  border-radius: 999px;
  background:    var(--pf-bg);
  color:         var(--pf-text);
  font-size:     13.5px;
  font-weight:   600;
  font-family:   inherit;
  cursor:        pointer;
  transition:    background .15s ease;
}
.po-pf__qr-btn:hover { background: var(--pf-surface); }
.po-pf__qr-btn svg { width: 18px; height: 18px; fill: currentColor; }
.po-pf__qr-zone {
  margin-top:      12px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             10px;
}
.po-pf__qr-zone canvas,
.po-pf__qr-zone img {
  border:        8px solid #fff;
  border-radius: 10px;
  box-shadow:    0 2px 10px rgba(0,0,0,.14);
  background:    #fff;
}
.po-pf__qr-dl {
  font-size:      13px;
  font-weight:    700;
  color:          var(--pf-brand, #E50914);
  text-decoration: none;
  padding:        6px 12px;
  border:         1px solid var(--pf-brand, #E50914);
  border-radius:  999px;
}
.po-pf__qr-dl:hover { background: rgba(229,9,20,.08); }

/* -- Colonne latérale ---------------------------------------- */

.po-pf__side { min-width: 0; }

.po-pf__side-h { font-size: 14px; font-weight: 700; margin-bottom: 12px; }

.po-pf__side-vide { color: var(--pf-muted); font-size: 14px; }

.po-pf__side-list { display: flex; flex-direction: column; gap: 8px; }

.po-pf__sitem {
  display:         flex;
  gap:             8px;
  text-decoration: none;
  border-radius:   10px;
  padding:         4px;
  transition:      background .14s ease;
}

.po-pf__sitem:hover { background: var(--pf-surface); }

.po-pf__sthumb {
  position:        relative;
  width:           168px;
  flex-shrink:     0;
  aspect-ratio:    16 / 9;
  background:      var(--pf-surface);
  border-radius:   9px;
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.po-pf__sthumb img { width: 100%; height: 100%; object-fit: cover; }
.po-pf__sthumb svg { width: 24px; height: 24px; fill: var(--pf-faint); }

.po-pf__sinfo {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
  padding-top:    2px;
}

.po-pf__stitle {
  color:       var(--pf-text);
  font-size:   14px;
  font-weight: 600;
  line-height: 1.3;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

.po-pf__schan { color: var(--pf-muted); font-size: 12px; }
.po-pf__smeta { color: var(--pf-muted); font-size: 12px; }

/* -- Entête de chaîne ---------------------------------------- */

.po-pf__chan {
  display:       flex;
  align-items:   center;
  gap:           22px;
  padding:       10px 0 26px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--pf-line);
}

.po-pf__chan-av { line-height: 0; flex-shrink: 0; }

.po-pf__chan-av img {
  width:         96px;
  height:        96px;
  border-radius: 50%;
  display:       block;
}

.po-pf__chan-txt { min-width: 0; }

.po-pf__chan-name {
  font-size:      26px;
  font-weight:    800;
  letter-spacing: -.03em;
  margin-bottom:  5px;
}

.po-pf__chan-stats { color: var(--pf-muted); font-size: 14px; }
/* Petite pastille de classement (position aux vues) dans l'en-tete de chaine. */
.po-pf__chan-rang {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 10px;
  padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  color: var(--ru-texte,#0e2438); background: linear-gradient(120deg, var(--ru-accent,#E50914), var(--ru-accent,#E50914));
  border: 1px solid #e6ad1f; vertical-align: middle; white-space: nowrap;
}
.po-pf__chan-rang svg { width: 13px; height: 13px; fill: #0A0A0A; }

.po-pf__chan-bio {
  color:      var(--pf-muted);
  font-size:  14px;
  margin-top: 8px;
  max-width:  640px;
}

/* -- État vide ----------------------------------------------- */

.po-pf__empty {
  text-align: center;
  padding:    90px 20px;
  color:      var(--pf-muted);
}

.po-pf__empty svg { width: 54px; height: 54px; fill: var(--pf-raise); margin-bottom: 14px; }
.po-pf__empty p  { font-size: 15px; }

/* -- Pagination ---------------------------------------------- */

.po-pf__pages {
  display:         flex;
  justify-content: center;
  gap:             7px;
  margin-top:      44px;
  flex-wrap:       wrap;
}

.po-pf__pages a,
.po-pf__pages span.current {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       40px;
  height:          40px;
  padding:         0 13px;
  background:      var(--pf-surface);
  border:          0;
  border-radius:   9px;
  color:           var(--pf-text);
  font-size:       14px;
  font-weight:     600;
  text-decoration: none;
}

.po-pf__pages a:hover      { background: var(--pf-raise); }
.po-pf__pages span.current { background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); }

/* -- Adaptation ---------------------------------------------- */

@media (max-width: 1300px) {
  .po-pf__watch { grid-template-columns: 1fr; }
}

/* MOBILE : le menu devient un TIROIR, il ne disparaît plus.
   Avant, on le mettait en display:none : le hamburger basculait donc une
   classe sur un élément déjà mort, et ne faisait rien du tout. */
@media (max-width: 1000px) {
  .po-pf__nav {
    position:   fixed;
    top:        60px;
    left:       0;
    bottom:     0;
    width:      260px;
    height:     auto;
    z-index:    75;
    background: var(--pf-bg);
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
    transform:  translateX(-100%);
    transition: transform .22s ease;
    padding:    22px 12px 30px;
    opacity:    1;
    pointer-events: auto;
    overflow-y: auto;
  }

  /* Sur petit écran, le tiroir est fermé par défaut : le repli du bureau
     ne doit pas décider à sa place. */
  .po-pf.po-nav-off .po-pf__nav,
  .po-pf .po-pf__nav { transform: translateX(-100%); }

  .po-pf.po-nav-mobile .po-pf__nav {
    transform:     translateX(0);
    width:         260px;
    padding-left:  12px;
    padding-right: 12px;
    opacity:       1;
    pointer-events: auto;
  }

  /* Voile : on ferme en touchant à côté, comme partout ailleurs. */
  .po-pf__voile {
    position:   fixed;
    inset:      60px 0 0 0;
    z-index:    74;
    background: rgba(0,0,0,.45);
    opacity:    0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  .po-pf.po-nav-mobile .po-pf__voile { opacity: 1; pointer-events: auto; }

  /* Le contenu ne bouge pas : le tiroir passe par-dessus. */
  .po-pf__content,
  .po-pf__watch { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 780px) {
  .po-pf__top { height: 54px; padding: 0 14px; gap: 12px; }
  .po-pf__logo img { height: 27px; }
  .po-pf__content { padding: 16px 14px 48px; }
  .po-pf__watch   { padding: 0 0 48px; }
  .po-pf__stage   { border-radius: 0; }
  .po-pf__title,
  .po-pf__bar,
  .po-pf__meta-box { margin-left: 14px; margin-right: 14px; }
  .po-pf__side { padding: 0 14px; }
  .po-pf__grid { grid-template-columns: 1fr; gap: 26px; }
}

.po-pf__nav-item img.po-pf__nav-av {
  width:         22px;
  height:        22px;
  border-radius: 50%;
  flex-shrink:   0;
  display:       block;
}

.po-pf__card-av img {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  display:       block;
}

/* -- Profil artiste : badge vérifié, métier, fiche source ---- */

.po-pf__chan-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.po-pf__verif { display: inline-flex; line-height: 0; }
.po-pf__verif svg { width: 20px; height: 20px; fill: var(--pf-brand); }

.po-pf__chan-role {
  color:       var(--pf-muted);
  font-size:   14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.po-pf__chan-fiche {
  display:         inline-block;
  margin-top:      10px;
  padding:         6px 13px;
  background:      var(--pf-surface);
  border-radius:   999px;
  color:           var(--pf-text);
  font-size:       13px;
  font-weight:     600;
  text-decoration: none;
}

.po-pf__chan-fiche:hover { background: var(--pf-raise); }

.po-pf__chan-liens {
  display:   flex;
  gap:       9px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

.po-pf__chan-liens .po-pf__chan-fiche { margin-top: 0; }

/* -- Message de retour --------------------------------------- */

.po-pf__flash {
  padding:       11px 15px;
  border-radius: 10px;
  font-size:     13.5px;
  font-weight:   600;
  margin:        18px 0;
}

.po-pf__flash--ok { background: rgba(22,163,74,.11); color: #15803d; }
.po-pf__flash--no { background: rgba(229,9,20,.09);  color: var(--pf-brand); }

/* -- Commentaires -------------------------------------------- */

.po-pf__coms { margin-top: 26px; }

.po-pf__coms-h {
  font-size:      19px;
  font-weight:    700;
  letter-spacing: -.02em;
  margin-bottom:  22px;
}

.po-pf__com-av { flex-shrink: 0; line-height: 0; }

.po-pf__com-av img {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  display:       block;
}

.po-pf__com-form {
  display:       flex;
  gap:           14px;
  margin-bottom: 30px;
}

.po-pf__com-champs { flex: 1; min-width: 0; }

.po-pf__com-form textarea {
  width:         100%;
  border:        0;
  border-bottom: 1px solid var(--pf-line);
  background:    transparent;
  padding:       6px 0;
  font-size:     14px;
  font-family:   inherit;
  color:         var(--pf-text);
  outline:       none;
  resize:        vertical;
  line-height:   1.5;
}

.po-pf__com-form textarea:focus { border-bottom-color: var(--pf-text); }
.po-pf__com-form textarea::placeholder { color: var(--pf-muted); }

.po-pf__com-boutons {
  display:         flex;
  justify-content: flex-end;
  margin-top:      10px;
}

.po-pf__act--envoi { background: var(--pf-brand); color: #ffffff; }
.po-pf__act--envoi:hover { background: var(--pf-brand); filter: brightness(1.08); }

.po-pf__com-connexion {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           16px;
  flex-wrap:     wrap;
  background:    var(--pf-surface);
  border-radius: var(--pf-radius);
  padding:       16px 18px;
  margin-bottom: 26px;
}

.po-pf__com-connexion p { font-size: 14px; color: var(--pf-text); margin: 0; }

.po-pf__com-vide { color: var(--pf-muted); font-size: 14px; }

.po-pf__com-liste { display: flex; flex-direction: column; gap: 20px; }

.po-pf__com { display: flex; gap: 14px; }

.po-pf__com-corps { flex: 1; min-width: 0; }

.po-pf__com-tete {
  display:     flex;
  align-items: baseline;
  gap:         8px;
  flex-wrap:   wrap;
  margin-bottom: 3px;
}

.po-pf__com-nom  { font-size: 13px; font-weight: 700; color: var(--pf-text); }
.po-pf__com-date { font-size: 12px; color: var(--pf-muted); }

.po-pf__com-texte { font-size: 14px; color: var(--pf-text); }
.po-pf__com-texte p { margin: 0 0 6px; }
.po-pf__com-texte p:last-child { margin-bottom: 0; }

.po-pf__com-sup { margin-top: 6px; }

.po-pf__com-sup button {
  background:  none;
  border:      0;
  padding:     4px 8px;
  margin-left: -8px;
  border-radius: 7px;
  color:       var(--pf-muted);
  font-size:   12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor:      pointer;
}

.po-pf__com-sup button:hover { background: var(--pf-surface); color: var(--pf-brand); }

@media (max-width: 780px) {
  .po-pf__coms { padding: 0 14px; }
}

/* -- Suivre une chaîne --------------------------------------- */

.po-pf__suivre-form { display: inline-flex; margin: 0; }

.po-pf__act--suivre {
  background: var(--ru-accent,#E50914);
  color:      var(--ru-sur-accent,#FFFFFF);
}

.po-pf__act--suivre:hover { background: var(--ru-accent-fonce,#c20811); color: var(--ru-sur-accent,#FFFFFF); }

.po-pf__act--suivre.po-on {
  background: var(--pf-surface);
  color:      var(--pf-text);
}

.po-pf__act--suivre.po-on:hover { background: var(--pf-raise); }

/* -- Emplacements publicitaires ------------------------------ */

.po-ad { line-height: 0; }
.po-ad img { max-width: 100%; height: auto; display: block; border-radius: 10px; }
/* Emplacement à proportion figée : l'image tient dedans sans déformation. */
.po-ad--proportion { width: 100%; overflow: hidden; border-radius: 10px; background: #0b0b0b; }
.po-ad--proportion img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }

.po-ad--accueil-haut { margin-bottom: 20px; }
.po-ad--colonne      { margin-bottom: 18px; }
.po-ad--sous-lecteur { margin: 18px 0; }
.po-ad--chaine-haut  { margin-bottom: 22px; }

.po-ad--nav {
  margin-top:  16px;
  padding-top: 14px;
  border-top:  1px solid var(--pf-line);
}

.po-pf__pub-barre {
  margin-top:      34px;
  display:         flex;
  justify-content: center;
}

.po-pf__card--pub { position: relative; }
.po-pf__card--pub .po-ad img { border-radius: var(--pf-radius); }

.po-pf__pub-tag {
  position:       absolute;
  top:            10px;
  left:           10px;
  background:     rgba(15,15,15,.86);
  color:          #ffffff;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding:        4px 9px;
  border-radius:  6px;
}

/* Bannière mobile : fixée en bas, uniquement sur mobile */
.po-ad--mobile { display: none; }

@media (max-width: 780px) {
  .po-ad--mobile {
    display:    block;
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    70;
    background: #ffffff;
    border-top: 1px solid var(--pf-line);
    padding:    5px;
    text-align: center;
  }
  .po-ad--mobile img { margin: 0 auto; border-radius: 0; }
  .po-pf { padding-bottom: 90px; }
  .po-ad--nav { display: none; }
}

/* -- Emplacements à proportion figée --
   La boîte impose le format via aspect-ratio ; l'image se contient dedans
   sans déformer ni déborder, même si le fichier téléversé n'a pas le bon
   format. Avant, une hauteur libre laissait une image trop haute déborder
   en géant sous la grille. */

.po-ad--proportion img {
  width:      100%;
  height:     100%;
  object-fit: contain;
}

.po-pf__pub-barre { display: block; }

/* -- Menu hamburger ------------------------------------------ */

.po-pf__burger {
  width:           40px;
  height:          40px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  border:          0;
  border-radius:   50%;
  color:           var(--pf-text);
  cursor:          pointer;
  transition:      background .14s ease;
}

.po-pf__burger:hover { background: var(--pf-surface); }
.po-pf__burger svg   { width: 24px; height: 24px; fill: currentColor; }


/* -- Émoticônes dans les commentaires ------------------------ */

.po-pf__com-boutons { align-items: center; gap: 8px; }
.po-pf__com-espace  { flex: 1; }

.po-pf__emo { position: relative; }

.po-pf__emo-btn {
  width:           38px;
  height:          38px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  border:          0;
  border-radius:   50%;
  color:           var(--pf-muted);
  cursor:          pointer;
  transition:      background .14s ease, color .14s ease;
}

.po-pf__emo-btn:hover { background: var(--pf-surface); color: var(--pf-text); }
.po-pf__emo-btn svg   { width: 24px; height: 24px; fill: currentColor; }

/* L'attribut hidden doit gagner contre notre display */
.po-pf__emo-panneau[hidden] { display: none; }

.po-pf__emo-panneau {
  position:      absolute;
  bottom:        calc(100% + 8px);
  left:          0;
  z-index:       40;
  width:         318px;
  max-height:    290px;
  overflow-y:    auto;
  background:    #ffffff;
  border:        1px solid var(--pf-line);
  border-radius: 12px;
  box-shadow:    0 12px 40px rgba(0,0,0,.18);
  padding:       12px;
}

.po-pf__emo-groupe + .po-pf__emo-groupe { margin-top: 12px; }

.po-pf__emo-titre {
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--pf-muted);
  margin-bottom:  6px;
}

.po-pf__emo-grille {
  display:               grid;
  grid-template-columns: repeat(8, 1fr);
  gap:                   2px;
}

.po-pf__emo-item {
  background:    transparent;
  border:        0;
  border-radius: 8px;
  font-size:     21px;
  line-height:   1;
  padding:       6px 0;
  cursor:        pointer;
  transition:    background .12s ease, transform .12s ease;
}

.po-pf__emo-item:hover { background: var(--pf-surface); transform: scale(1.18); }

/* Les émoticônes reçues doivent rester lisibles dans le fil */
.po-pf__com-texte { font-size: 14px; line-height: 1.5; }

@media (max-width: 480px) {
  .po-pf__emo-panneau { width: 274px; }
  .po-pf__emo-grille  { grid-template-columns: repeat(7, 1fr); }
}

/* -- Hamburger : la transition doit être propre --------------- */

.po-pf__burger { margin-left: 0; }

/* -- Repli du menu : BUREAU UNIQUEMENT ----------------------
   Ces règles étaient hors de toute media query et plus bas dans le
   fichier que celles du tiroir mobile. À priorité égale, la dernière
   gagne : le tiroir naissait donc avec une largeur nulle et une opacité
   nulle sur téléphone. Le voile s'affichait, le menu jamais.
   Le repli est une notion de BUREAU : elle n'a rien à faire sur mobile. */
@media (min-width: 1001px) {
  .po-pf__nav {
    transition:  width .18s ease, opacity .14s ease;
    will-change: width;
  }

  .po-pf.po-nav-off .po-pf__nav {
    width:         0;
    padding-left:  0;
    padding-right: 0;
    opacity:       0;
    overflow:      hidden;
    pointer-events: none;
  }

  /* Menu replié : le contenu reprend une marge propre, pas collée */
  .po-pf.po-nav-off .po-pf__content,
  .po-pf.po-nav-off .po-pf__watch { padding-left: 32px; padding-right: 32px; }
}

/* -- Coin compte : Créer, avatar, menu ----------------------- */

.po-pf__compte {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
  margin-left: auto;
}

.po-pf__creer {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  padding:         8px 15px;
  background:      var(--pf-surface);
  border-radius:   999px;
  color:           var(--pf-text);
  font-size:       14px;
  font-weight:     600;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background .14s ease;
}

.po-pf__creer:hover { background: var(--pf-raise); }
.po-pf__creer svg   { width: 22px; height: 22px; fill: currentColor; }

.po-pf__moi { position: relative; }

.po-pf__moi-btn {
  width:         36px;
  height:        36px;
  padding:       0;
  border:        0;
  background:    transparent;
  border-radius: 50%;
  cursor:        pointer;
  line-height:   0;
  overflow:      hidden;
}

.po-pf__moi-btn img { width: 36px; height: 36px; border-radius: 50%; display: block; }

/* L'attribut hidden doit gagner contre notre display */
.po-pf__moi-menu[hidden] { display: none; }

.po-pf__moi-menu {
  position:      absolute;
  top:           calc(100% + 10px);
  right:         0;
  z-index:       80;
  width:         310px;
  background:    #ffffff;
  border:        1px solid var(--pf-line);
  border-radius: 12px;
  box-shadow:    0 12px 40px rgba(0,0,0,.18);
  padding:       16px;
}

.po-pf__moi-tete {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--pf-line);
}

.po-pf__moi-tete img { width: 44px; height: 44px; border-radius: 50%; display: block; flex-shrink: 0; }
.po-pf__moi-nom  { font-size: 15px; font-weight: 700; color: var(--pf-text); }

.po-pf__moi-lien {
  font-size:       13px;
  color:           #065fd4;
  text-decoration: none;
}

.po-pf__moi-lab {
  display:       block;
  font-size:     12px;
  font-weight:   700;
  color:         var(--pf-muted);
  margin-bottom: 6px;
}

.po-pf__moi-row { display: flex; gap: 7px; }

.po-pf__moi-row input {
  flex:          1;
  min-width:     0;
  padding:       8px 11px;
  border:        1px solid #cccccc;
  border-radius: 8px;
  font-size:     14px;
  font-family:   inherit;
  color:         var(--pf-text);
  outline:       none;
}

.po-pf__moi-row input:focus { border-color: var(--pf-brand); box-shadow: 0 0 0 3px rgba(229,9,20,.12); }

.po-pf__moi-row button {
  flex-shrink:   0;
  padding:       8px 14px;
  background:    var(--pf-brand);
  border:        0;
  border-radius: 8px;
  color:         #ffffff;
  font-size:     13px;
  font-weight:   700;
  font-family:   inherit;
  cursor:        pointer;
}

.po-pf__moi-row button:hover { filter: brightness(1.07); }

.po-pf__moi-aide { margin: 7px 0 0; font-size: 12px; color: var(--pf-muted); }

.po-pf__moi-liens {
  margin-top:  14px;
  padding-top: 12px;
  border-top:  1px solid var(--pf-line);
}

.po-pf__moi-liens a {
  display:         block;
  padding:         8px 10px;
  margin:          0 -10px;
  border-radius:   8px;
  color:           var(--pf-text);
  font-size:       14px;
  text-decoration: none;
}

.po-pf__moi-liens a:hover { background: var(--pf-surface); }

@media (max-width: 780px) {
  .po-pf__creer span { display: none; }
  .po-pf__creer { padding: 8px; }
  .po-pf__moi-menu { width: 280px; }
}

/* -- Coin compte : Créer, avatar, menu ----------------------- */

.po-pf__compte {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
  margin-left: auto;
}

.po-pf__creer {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  padding:         8px 15px;
  background:      var(--pf-surface);
  border-radius:   999px;
  color:           var(--pf-text);
  font-size:       14px;
  font-weight:     600;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background .14s ease;
}

.po-pf__creer:hover { background: var(--pf-raise); }
.po-pf__creer svg   { width: 22px; height: 22px; fill: currentColor; }

.po-pf__moi { position: relative; }

.po-pf__moi-btn {
  width:         36px;
  height:        36px;
  padding:       0;
  border:        0;
  background:    transparent;
  border-radius: 50%;
  cursor:        pointer;
  line-height:   0;
  overflow:      hidden;
}

.po-pf__moi-btn img { width: 36px; height: 36px; border-radius: 50%; display: block; }

/* L'attribut hidden doit gagner contre notre display */
.po-pf__moi-menu[hidden] { display: none; }

.po-pf__moi-menu {
  position:      absolute;
  top:           calc(100% + 10px);
  right:         0;
  z-index:       80;
  width:         310px;
  background:    #ffffff;
  border:        1px solid var(--pf-line);
  border-radius: 12px;
  box-shadow:    0 12px 40px rgba(0,0,0,.18);
  padding:       16px;
}

.po-pf__moi-tete {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--pf-line);
}

.po-pf__moi-tete img { width: 44px; height: 44px; border-radius: 50%; display: block; flex-shrink: 0; }
.po-pf__moi-nom  { font-size: 15px; font-weight: 700; color: var(--pf-text); }

.po-pf__moi-lien {
  font-size:       13px;
  color:           #065fd4;
  text-decoration: none;
}

.po-pf__moi-lab {
  display:       block;
  font-size:     12px;
  font-weight:   700;
  color:         var(--pf-muted);
  margin-bottom: 6px;
}

.po-pf__moi-row { display: flex; gap: 7px; }

.po-pf__moi-row input {
  flex:          1;
  min-width:     0;
  padding:       8px 11px;
  border:        1px solid #cccccc;
  border-radius: 8px;
  font-size:     14px;
  font-family:   inherit;
  color:         var(--pf-text);
  outline:       none;
}

.po-pf__moi-row input:focus { border-color: var(--pf-brand); box-shadow: 0 0 0 3px rgba(229,9,20,.12); }

.po-pf__moi-row button {
  flex-shrink:   0;
  padding:       8px 14px;
  background:    var(--pf-brand);
  border:        0;
  border-radius: 8px;
  color:         #ffffff;
  font-size:     13px;
  font-weight:   700;
  font-family:   inherit;
  cursor:        pointer;
}

.po-pf__moi-row button:hover { filter: brightness(1.07); }

.po-pf__moi-aide { margin: 7px 0 0; font-size: 12px; color: var(--pf-muted); }

.po-pf__moi-liens {
  margin-top:  14px;
  padding-top: 12px;
  border-top:  1px solid var(--pf-line);
}

.po-pf__moi-liens a {
  display:         block;
  padding:         8px 10px;
  margin:          0 -10px;
  border-radius:   8px;
  color:           var(--pf-text);
  font-size:       14px;
  text-decoration: none;
}

.po-pf__moi-liens a:hover { background: var(--pf-surface); }

@media (max-width: 780px) {
  .po-pf__creer span { display: none; }
  .po-pf__creer { padding: 8px; }
  .po-pf__moi-menu { width: 280px; }
}

/* -- Bandeau de stories -------------------------------------- */



/* -- Signalement --------------------------------------------- */

.po-pf__share-back[data-po-sig-panneau][hidden] { display: none; }

.po-pf__act--sig { background: transparent; color: var(--pf-muted); }
.po-pf__act--sig:hover { background: var(--pf-surface); color: var(--pf-text); }

.po-pf__sig-form select,
.po-pf__sig-form input,
.po-pf__sig-form textarea {
  width:         100%;
  padding:       9px 12px;
  border:        1px solid #cccccc;
  border-radius: 8px;
  font-size:     14px;
  font-family:   inherit;
  color:         var(--pf-text);
  background:    #ffffff;
  outline:       none;
}

.po-pf__sig-form select:focus,
.po-pf__sig-form input:focus,
.po-pf__sig-form textarea:focus {
  border-color: var(--pf-brand);
  box-shadow:   0 0 0 3px rgba(229,9,20,.12);
}

.po-pf__sig-form textarea { resize: vertical; }

.po-pf__sig-lab {
  display:       block;
  font-size:     12.5px;
  font-weight:   700;
  margin:        12px 0 5px;
  color:         var(--pf-text);
}

.po-pf__sig-note {
  margin:        14px 0 0;
  font-size:     12.5px;
  color:         var(--pf-muted);
  line-height:   1.5;
  background:    var(--pf-surface);
  border-radius: 8px;
  padding:       10px 12px;
}

.po-pf__sig-pied {
  display:         flex;
  gap:             9px;
  justify-content: flex-end;
  margin-top:      16px;
}

/* -- « Comment les vues sont comptabilisées ? » --------------- */

.po-pf__vues-info {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  margin-left: 8px;
  padding:     2px 8px;
  border:      0;
  border-radius: 999px;
  background:  transparent;
  color:       var(--pf-muted);
  font-size:   12.5px;
  cursor:      pointer;
}

.po-pf__vues-info:hover { background: var(--pf-surface); color: var(--pf-text); }

.po-pf__vues-info svg { width: 14px; height: 14px; fill: currentColor; flex: none; }

.po-pf__vues-corps { font-size: 14px; line-height: 1.55; }

.po-pf__vues-regle {
  display:     flex;
  gap:         12px;
  align-items: flex-start;
  padding:     10px 0;
  border-top:  1px solid var(--pf-line);
}

.po-pf__vues-regle p { margin: 0; }

.po-pf__vues-num {
  flex:          none;
  min-width:     46px;
  padding:       6px 8px;
  border-radius: 10px;
  background:    var(--pf-surface);
  color:         var(--pf-text);
  font-weight:   700;
  font-size:     13px;
  text-align:    center;
}

@media (max-width: 640px) {
  .po-pf__vues-info span { display: none; }
}

/* -- Question des droits de revenus (formulaire du hub) ------- */

.po-hub__droits {
  margin:        14px 0 0;
  padding:       14px 16px;
  border:        1px solid var(--pf-line, #e5e5e5);
  border-radius: 12px;
}

.po-hub__droits legend {
  font-weight: 700;
  font-size:   14px;
  padding:     0 6px;
}

.po-hub__droits label {
  display:     flex;
  gap:         10px;
  align-items: flex-start;
  padding:     7px 0;
  font-size:   13.5px;
  cursor:      pointer;
}

.po-hub__droits input { margin-top: 3px; flex: none; }

/* -- Statistiques du membre (hub) ----------------------------- */

.po-hub__stats {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
  margin:    14px 0;
}

.po-hub__stat {
  flex:          1 1 130px;
  padding:       14px 16px;
  border:        1px solid var(--pf-line, #e5e5e5);
  border-radius: 12px;
  text-align:    center;
}

.po-hub__stat b { display: block; font-size: 22px; }

.po-hub__stat span { font-size: 12px; color: var(--pf-muted, #777); text-transform: uppercase; letter-spacing: .04em; }

.po-hub__rapport {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  margin:        6px 0 2px;
  padding:       10px 18px;
  border-radius: 999px;
  background:    #E50914;
  color:         #fff !important;
  font-weight:   700;
  font-size:     14px;
  text-decoration: none;
}

.po-hub__rapport:hover { filter: brightness(1.08); }

.po-hub__rapport svg { width: 16px; height: 16px; fill: currentColor; }

/* -- Rond noir d'avatar : MÊMES tailles que les photos, partout --
   Les photos sont réduites par ces règles CSS, mais le rond porte sa taille
   sur l'élément (nécessaire là où cette feuille ne charge pas). !important
   pour que la feuille reprenne la main ici et garantisse l'uniformité. */

.po-pf__nav-item .po-avatar-rond { width: 22px !important; height: 22px !important; font-size: 10px !important; }
.po-pf__avatar   .po-avatar-rond { width: 40px !important; height: 40px !important; font-size: 17px !important; }
.po-pf__card-av  .po-avatar-rond { width: 36px !important; height: 36px !important; font-size: 15px !important; }
.po-pf__com-av   .po-avatar-rond { width: 40px !important; height: 40px !important; font-size: 17px !important; }
.po-pf__chan-av  .po-avatar-rond { width: 96px !important; height: 96px !important; font-size: 40px !important; }
.po-pf__moi-btn  .po-avatar-rond { width: 36px !important; height: 36px !important; font-size: 15px !important; }
.po-pf__moi-tete .po-avatar-rond { width: 44px !important; height: 44px !important; font-size: 18px !important; }

/* -- Bouton Créer : rouge plein, texte + « + » blancs ----------
   Placé en fin de feuille pour l'emporter sur les règles précédentes.
   Lisible sur la barre blanche : fini le blanc sur blanc / gris sur blanc. */
.po-pf__creer,
.po-pf__top .po-pf__creer {
  background:    var(--pf-brand);
  color:         #ffffff;
  border:        0;
  font-weight:   600;
}
.po-pf__creer:hover,
.po-pf__top .po-pf__creer:hover { background: var(--ru-accent-fonce,#c20811); color: #ffffff; }
.po-pf__creer svg,
.po-pf__top .po-pf__creer svg { fill: #ffffff; }

/* ======================================================================
   ÉVÉNEMENTS : liste, page d'événement (menu streamers + scène), formulaire
   ====================================================================== */

/* Pastille « en direct » (rouge qui pulse), aussi utilisée sur les cartes. */
.po-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pf-brand);
  box-shadow: 0 0 0 0 rgba(229, 9, 20, .6);
  animation: po-live-pulse 1.8s infinite;
}
@keyframes po-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(229, 9, 20, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(229, 9, 20, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 9, 20, 0); }
}

/* -- En-tête de la liste ----------------------------------------------- */
.po-ev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* -- Grille des événements --------------------------------------------- */
.po-ev-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.po-ev-carte {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
}
/* Carte régie avec bouton supprimer par-dessus (coin haut-droite). */
.po-ev-carte-wrap { position: relative; }
.po-ev-carte__suppr-f { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }
.po-ev-carte__suppr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 0; border-radius: 9px; cursor: pointer;
  background: rgba(0, 0, 0, .62); color: #fff; opacity: .9;
  transition: opacity .15s ease, background .15s ease;
}
.po-ev-carte-wrap:hover .po-ev-carte__suppr { opacity: 1; }
.po-ev-carte__suppr:hover { background: var(--pf-brand, #e50914); }

/* Menu 3 points (Modifier / Supprimer) sur une carte d'evenement, dans
   « Mon contenu ». Balise <details> native : aucun JS requis. */
.po-ev-carte__menu { position: absolute; top: 8px; right: 8px; z-index: 3; }
.po-ev-carte__menu[open] { z-index: 5; }
.po-ev-carte__menu-btn {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: rgba(0, 0, 0, .62); color: #fff; opacity: .92;
  transition: opacity .15s ease, background .15s ease;
}
.po-ev-carte__menu-btn::-webkit-details-marker { display: none; }
.po-ev-carte__menu-btn::marker { content: ""; }
.po-ev-carte-wrap:hover .po-ev-carte__menu-btn { opacity: 1; }
.po-ev-carte__menu-btn:hover { background: rgba(0, 0, 0, .8); }
.po-ev-carte__menu[open] .po-ev-carte__menu-btn { background: var(--pf-brand, #e50914); }
.po-ev-carte__menu-liste {
  position: absolute; top: 40px; right: 0; min-width: 168px;
  background: var(--pf-raise, #1c1f26); border: 1px solid var(--pf-line, rgba(255,255,255,.12));
  border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.45); overflow: hidden; padding: 5px;
}
.po-ev-carte__menu-liste form { margin: 0; }
.po-ev-carte__menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 7px; background: transparent;
  color: var(--pf-text, #e7eaf0); font-size: 13.5px; font-weight: 600; font-family: inherit;
  text-align: left; text-decoration: none; cursor: pointer;
}
.po-ev-carte__menu-item:hover { background: var(--pf-surface, rgba(255,255,255,.06)); }
.po-ev-carte__menu-item svg { flex: 0 0 auto; }
.po-ev-carte__menu-item--danger { color: #FF4D3D; }
.po-ev-carte__menu-item--danger:hover { background: rgba(229, 9, 20, .14); }
.po-ev-carte__vignette {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.po-ev-carte__vignette img { width: 100%; height: 100%; object-fit: cover; }
.po-ev-carte__ph svg { width: 46px; height: 46px; fill: #444; }
.po-ev-carte__live,
.po-ev__live,
.po-ev__streamer-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12.5px;
  color: #fff;
}
.po-ev-carte__live {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(0, 0, 0, .72);
  padding: 4px 8px;
  border-radius: 999px;
}
.po-ev-carte__meta { padding: 9px 2px 2px; }
.po-ev-carte__titre {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--pf-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-ev-carte__sous { display: block; margin-top: 3px; font-size: 12.5px; color: var(--pf-muted); }

/* -- Page d'un événement ----------------------------------------------- */
.po-ev__head { margin-bottom: 16px; }
.po-ev__banniere {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  max-height: 260px;
}
.po-ev__banniere img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-ev__titre-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.po-ev__titre { font-size: 1.5rem; font-weight: 800; margin: 0; color: var(--pf-text); }
.po-ev__live {
  color: var(--pf-brand);
  background: rgba(229, 9, 20, .08);
  padding: 4px 10px;
  border-radius: 999px;
}
.po-ev__live-mot { color: var(--pf-muted); font-weight: 600; }

/* Interrupteur « Lecture automatique » dans la barre d'actions du visionnage */
.po-pf__autoplay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text);
  user-select: none;
}
.po-pf__autoplay input { position: absolute; opacity: 0; width: 0; height: 0; }
.po-pf__autoplay-track {
  position: relative;
  width: 40px; height: 22px;
  border-radius: 999px;
  background: #c7c7cc;
  transition: background .15s ease;
  flex-shrink: 0;
}
.po-pf__autoplay-track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}
.po-pf__autoplay input:checked + .po-pf__autoplay-track { background: var(--pf-brand); }
.po-pf__autoplay input:checked + .po-pf__autoplay-track::after { transform: translateX(18px); }
.po-pf__autoplay input:focus-visible + .po-pf__autoplay-track { box-shadow: 0 0 0 3px rgba(229, 9, 20, .3); }

/* Compteur de spectateurs « en ce moment », placé dans la barre du propriétaire,
   entre le nom de la chaîne et le bouton Suivre. Les actions sont poussées à
   droite pour que le compteur reste calé juste après le nom. */
.po-pf__bar .po-pf__actions { margin-left: auto; }
.po-pf__vlive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--pf-brand);
  background: rgba(229, 9, 20, .08);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.po-pf__vlive-mot { color: var(--pf-muted); font-weight: 600; }

@media (max-width: 640px) {
  /* Sur mobile, on garde le compteur compact : juste le point + le nombre. */
  .po-pf__vlive-mot { display: none; }
}

/* -- Carte « Première » (vidéo programmée) --------------------------------- */
.po-prem {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #111 var(--po-prem-bg, none) center / cover no-repeat;
}
.po-prem__voile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  background: linear-gradient(rgba(10, 10, 10, .72), rgba(10, 10, 10, .82));
  color: #fff;
}
.po-prem__badge {
  background: var(--pf-brand);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.po-prem__dispo { font-size: 15px; opacity: .92; }
.po-prem__dispo strong { display: block; font-size: 18px; margin-top: 3px; }
.po-prem__compte {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.po-prem__pret { font-size: 18px; font-weight: 800; margin-bottom: 10px; color: #fff; }
.po-prem__attente {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  padding: 5px 12px;
  border-radius: 999px;
}
.po-prem__btn {
  display: inline-block;
  border: 0;
  background: var(--pf-brand);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 4px;
}
.po-prem__btn:hover { background: #c20811; }
.po-prem__btn:disabled { opacity: .6; cursor: default; }

/* Badge « Première » sur la vignette d'une vidéo programmée (listes) */
.po-pf__thumb { position: relative; }
.po-pf__card-prem {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  background: var(--pf-brand);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
}
.po-ev__mod {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text);
  text-decoration: none;
  border: 1px solid var(--pf-line);
  padding: 6px 12px;
  border-radius: 8px;
}
.po-ev__mod:hover { background: var(--pf-raise); }

/* État « terminé » : puce neutre dans l'en-tête + bouton du créateur. */
.po-ev__termine {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--pf-surface); color: var(--pf-muted);
  font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.po-ev__fin-form { margin: 0; display: inline; }
.po-ev__terminer {
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  color: var(--pf-brand); background: transparent;
  border: 1px solid var(--pf-brand); padding: 6px 12px; border-radius: 8px;
  transition: background .14s ease, color .14s ease;
}
.po-ev__terminer:hover { background: var(--pf-brand); color: #fff; }

/* Bouton Supprimer (créateur) : discret, en teinte danger au survol. */
.po-ev__suppr-form { margin: 0; display: inline; }
.po-ev__suppr {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  color: var(--pf-muted); background: transparent;
  border: 1px solid var(--pf-line); padding: 6px 12px; border-radius: 8px;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.po-ev__suppr:hover { background: #e5091422; color: #e50914; border-color: #e5091455; }

/* Mode multicaméra : accès régie sur la page du direct. */
.po-ev__multicam { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.po-ev__multicam a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--pf-line, rgba(0,0,0,.14));
  color: var(--pf-text); background: var(--pf-surface);
}
.po-ev__multicam a:hover { border-color: var(--pf-brand); color: var(--pf-brand); }
.po-ev__multicam-pilot { border-color: var(--pf-brand) !important; color: var(--pf-brand) !important; }
.po-ev__multicam-form { margin: 0; }
.po-ev__multicam-take {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--pf-brand); background: var(--pf-brand); color: #fff;
}
.po-ev__multicam-take:hover { filter: brightness(1.06); }
.po-ev__multicam-take.is-on { background: transparent; color: var(--pf-brand); }
.po-ev__multicam-onair {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--pf-brand);
  padding: 7px 12px; border: 1px solid var(--pf-brand); border-radius: 8px;
}
/* Régie embarquée en ondes sur la page du direct. */
.po-ev__player--mc { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }
/* Version « nue » de la régie (dans l'iframe) : sans marges du site. */
.po-pf--nu .po-pf__content { padding: 0; }
.po-pf--nu { background: #000; }

/* Réseaux sociaux propres à l'événement. */
.po-ev__socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.po-ev__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: #fff; background: #444; transition: transform .12s ease, filter .12s ease;
}
.po-ev__social:hover { transform: translateY(-1px); filter: brightness(1.08); }
/* Pastilles de réseaux en noir de marque, uniformes : les couleurs des
   plateformes (violet Twitch, dégradé rose Instagram) sont hors charte RU.
   Le pictogramme blanc suffit à reconnaître chaque réseau. */
.po-ev__social--facebook,
.po-ev__social--instagram,
.po-ev__social--tiktok,
.po-ev__social--youtube,
.po-ev__social--x,
.po-ev__social--twitch    { background: #0A0A0A; }
/* A69 (ligne 303, livraison 4) : le lien vers le site de l'événement est sur fond clair. */
.po-ev__social--site      { background: #F4F5F7; color: #14181F; border: 1px solid #D9DDE3; }
.po-ev__social--site svg  { fill: currentColor; }

/* Mode Modifier : on ne montre que le formulaire, pas la partie publique. */
.po-ev--edition .po-ev__banniere,
.po-ev--edition .po-ev__desc,
.po-ev--edition .po-ev__infos,
.po-ev--edition .po-ev__multicam,
.po-ev--edition .po-ev__socials,
.po-ev--edition .po-ev__scene,
.po-ev--edition .po-ev__replay,
.po-ev--edition .po-ev__partenaires { display: none !important; }

/* Bouton « changer de mode » sur la page publique (hôte). */
.po-ev__mode-form { margin: 0; display: inline-flex; }
.po-ev__mode-btn {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--pf-text); background: transparent;
  border: 1px solid var(--pf-line, rgba(0, 0, 0, .2)); padding: 6px 12px; border-radius: 8px;
}
.po-ev__mode-btn:hover { border-color: var(--pf-brand); color: var(--pf-brand); }

/* Badge « Terminé » sur la carte (même gabarit que « À venir », ton neutre). */
.po-ev-carte__termine {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.72); color: #fff;
  font-weight: 700; font-size: 11px; padding: 4px 9px; border-radius: 999px;
  letter-spacing: .03em;
}

.po-ev__desc { margin-top: 10px; color: var(--pf-text); line-height: 1.55; }

/* Rediffusion (VOD) d'un direct terminé. */
.po-ev__replay { margin: 0 0 18px; }
.po-ev__replay-t {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--pf-muted);
}
.po-ev__replay-video {
  width: 100%; aspect-ratio: 16 / 9; max-height: 60vh;
  background: #000; border-radius: 12px; display: block;
}
/* Case à cocher du formulaire d'événement (ex. enregistrement). */
.po-ev-form__check { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 4px; font-size: 14px; font-weight: 600; cursor: pointer; }
.po-ev-form__check input { margin-top: 2px; }

/* -- Commanditaires : bandeau sous la vidéo (sobre, sans cadre) -- */
.po-spo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0; padding: 10px 14px;
  background: var(--pf-surface); border-radius: 12px;
}
.po-spo__mention { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pf-muted); }
.po-spo__lien { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--pf-text); min-width: 0; }
.po-spo__img { height: 40px; max-width: 220px; width: auto; object-fit: contain; display: block; border-radius: 6px; }
.po-spo__nom { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pilotage en direct des commandites (créateur) : boutons « en ondes ». */
.po-spo-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 14px; }
.po-spo-ctl__t { font-size: 12px; font-weight: 800; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .04em; }
.po-spo-ctl__btn {
  padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--pf-surface); color: var(--pf-text); font-size: 13px; font-weight: 700;
  font-family: inherit; transition: background .14s ease, color .14s ease;
}
.po-spo-ctl__btn:hover { background: var(--pf-raise); }
.po-spo-ctl__btn.is-on { background: var(--pf-brand); color: #fff; }

/* Pastille de commanditaire sur la vignette : discrète, aucun cadre. */
.po-ev-carte__spo {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  max-width: calc(100% - 16px);
  font-size: 10px; font-weight: 600; letter-spacing: .02em;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.po-ev-carte__spo-nom { font-weight: 800; }

/* Étiquette de rubrique sur une carte (Podcast / Événement / ...). */
.po-ev-carte__rub { font-weight: 800; color: var(--pf-brand); }

/* Tableau de bord des commandites (créateur seulement). */
.po-spo-stats { margin: 18px 0; padding: 22px; background: var(--pf-bg, #fff); box-shadow: 0 2px 12px rgba(0,0,0,.06); border-radius: 14px; }
.po-spo-stats__t { font-size: 15px; font-weight: 800; }
.po-spo-stats__note { margin: 5px 0 14px; font-size: 12px; color: var(--pf-muted); line-height: 1.5; }
.po-spo-stats__scroll { overflow-x: auto; }
.po-spo-stats__table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.po-spo-stats__table th, .po-spo-stats__table td { text-align: right; padding: 10px 12px; white-space: nowrap; }
.po-spo-stats__pdf { display: inline-flex; align-items: center; margin-top: 16px; padding: 10px 18px; background: var(--pf-brand); color: #fff; border-radius: 999px; font-size: 13px; font-weight: 800; text-decoration: none; }
.po-spo-stats__pdf:hover { filter: brightness(1.06); }
.po-spo-stats__chart { margin-top: 18px; }
.po-spo-stats__chart-t { font-size: 12px; font-weight: 700; color: var(--pf-muted); margin-bottom: 8px; }
.po-spo-stats__bars { display: flex; align-items: flex-end; gap: 2px; height: 84px; }
.po-spo-stats__bar { flex: 1; min-height: 2px; background: var(--pf-brand); border-radius: 3px 3px 0 0; opacity: .85; }
.po-spo-stats__bar:hover { opacity: 1; }
.po-spo-stats__table th:first-child, .po-spo-stats__table td:first-child { text-align: left; }
.po-spo-stats__table thead th { color: var(--pf-muted); font-weight: 700; border-bottom: 1px solid var(--pf-line); }
.po-spo-stats__table tbody tr + tr td { border-top: 1px solid var(--pf-line); }
.po-spo-stats__table tbody td { font-weight: 600; }

/* Réglages de rotation dans le formulaire. */
.po-ev-form__spo-conf { margin-top: 12px; }

/* -- Scène : menu des streamers + lecteur ------------------------------ */
.po-ev__scene {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.po-ev__scene--nostream { grid-template-columns: minmax(0, 1fr); }

/* Rangée du haut : vidéo à gauche, chat à droite à la MÊME hauteur que la vidéo. */
.po-ev__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: stretch;
}
.po-ev__col { min-width: 0; }
.po-ev__menu {
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: 12px;
}
.po-ev__menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid var(--pf-line);
}
.po-ev__multi {
  border: 1px solid var(--pf-line);
  background: #fff;
  color: var(--pf-text);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.po-ev__multi.po-on { background: var(--pf-brand); color: #fff; border-color: var(--pf-brand); }
.po-ev__list { max-height: 70vh; overflow-y: auto; }
.po-ev__streamer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--pf-line);
}
.po-ev__streamer:last-child { border-bottom: 0; }
.po-ev__streamer.po-on { background: var(--pf-raise); }
.po-ev__streamer-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  padding: 7px 6px;
  text-decoration: none;
  color: var(--pf-text);
  min-width: 0;
}
.po-ev__streamer-nom {
  font-weight: 600;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-ev__streamer-live { color: var(--pf-brand); font-size: 12px; }
/* Streamer sans lien : nom visible + petite étiquette « Bientôt ». */
.po-ev__streamer--soon .po-ev__streamer-nom { color: var(--pf-muted, #888); }
.po-ev__streamer-soon {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--pf-muted, #888);
  border: 1px solid var(--pf-line, rgba(0,0,0,.18));
  border-radius: 999px;
  padding: 1px 8px;
}
.po-ev__stage { min-width: 0; position: relative; }

/* -- Bandeau de nouvelles (habillage broadcast) -- */
.po-bandeau { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 5; pointer-events: none; font-weight: 800; }
.po-band-preview .po-bandeau { position: absolute; }
.po-bandeau__tag {
  display: inline-flex; align-items: center; gap: 9px; color: #fff;
  background: linear-gradient(180deg, var(--pf-brand), #b00710);
  padding: 6px 15px 6px 13px; font-size: 13px; letter-spacing: .10em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  transition: opacity .4s ease, transform .4s ease;
}
.po-bandeau__dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: po-band-pulse 1.4s infinite; }
@keyframes po-band-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.po-bandeau__bar { display: flex; align-items: stretch; margin-top: 7px; min-height: 62px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.po-bandeau__marque {
  min-width: 150px; color: #fff; padding: 8px 18px 8px 14px;
  background: linear-gradient(180deg, #12305e, #0b1f42);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  display: flex; flex-direction: column; justify-content: center;
  transition: opacity .5s ease, transform .5s ease;
}
.po-bandeau__m1 { font-size: 17px; line-height: 1; }
.po-bandeau__m3 { display: flex; gap: 12px; font-size: 12px; font-weight: 700; color: #d7e6ff; margin-top: 5px; }
.po-bandeau__titres {
  flex: 1; position: relative; color: #fff; padding: 8px 24px; margin-left: -12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,52,102,.96), rgba(9,26,60,.96));
  clip-path: polygon(14px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  display: flex; flex-direction: column; justify-content: center;
  transition: opacity .5s ease, transform .5s ease;
}
.po-bandeau__titres::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--pf-brand); }
.po-bandeau__t1 { font-size: 22px; line-height: 1.04; text-transform: uppercase; letter-spacing: .01em; }
.po-bandeau__t2 { font-size: 13px; font-weight: 700; color: #bcd3f5; margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.po-bandeau__shine { position: absolute; top: 0; left: -40%; width: 32%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); transform: skewX(-18deg); animation: po-band-shine 5s 1s infinite; }
@keyframes po-band-shine { 0% { left: -40%; } 22%, 100% { left: 130%; } }
.po-bandeau__ticker {
  margin-top: 6px; height: 28px; display: flex; align-items: center; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, rgba(10,26,60,.95), rgba(6,17,40,.95));
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: opacity .5s ease, transform .5s ease;
}
.po-bandeau__lbl { flex: 0 0 auto; background: var(--pf-brand); color: #fff; height: 100%; display: flex; align-items: center; padding: 0 11px; font-size: 11px; letter-spacing: .10em; text-transform: uppercase; }
.po-bandeau__track { flex: 1; overflow: hidden; position: relative; white-space: nowrap; }
.po-bandeau__move { display: inline-block; padding-left: 100%; font-size: 13px; font-weight: 700; color: #dbe7fb; animation: po-band-scroll 24s linear infinite; }
.po-bandeau__move span { margin: 0 38px; color: #fff; }
@keyframes po-band-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Révélation par étapes (piloté en direct par le créateur). */
.po-bandeau .po-bandeau__tag    { opacity: 0; transform: translateY(10px); }
.po-bandeau .po-bandeau__marque { opacity: 0; transform: translateX(-24px); }
.po-bandeau .po-bandeau__titres { opacity: 0; transform: translateX(28px); }
.po-bandeau .po-bandeau__ticker { opacity: 0; transform: translateY(12px); }
.po-bandeau[data-step="1"] .po-bandeau__tag, .po-bandeau[data-step="2"] .po-bandeau__tag, .po-bandeau[data-step="3"] .po-bandeau__tag,
.po-bandeau[data-step="1"] .po-bandeau__marque, .po-bandeau[data-step="2"] .po-bandeau__marque, .po-bandeau[data-step="3"] .po-bandeau__marque { opacity: 1; transform: none; }
.po-bandeau[data-step="2"] .po-bandeau__titres, .po-bandeau[data-step="3"] .po-bandeau__titres { opacity: 1; transform: none; }
.po-bandeau[data-step="3"] .po-bandeau__ticker { opacity: 1; transform: none; }
/* Mode « Message » (step 4) : uniquement la pastille + la description (un petit
   message court). Pas de marque, pas de gros titre, pas de bande défilante. */
.po-bandeau[data-step="4"] .po-bandeau__tag,
.po-bandeau[data-step="4"] .po-bandeau__titres { opacity: 1; transform: none; }
.po-bandeau[data-step="4"] .po-bandeau__marque { display: none; }
.po-bandeau[data-step="4"] .po-bandeau__t1 { display: none; }
/* Style discret : pas de titres ni de ticker. */
.po-bandeau--discret .po-bandeau__titres, .po-bandeau--discret .po-bandeau__ticker { display: none; }

/* Mode « barre défilante seule » : uniquement le ticker, toujours visible. */
.po-bandeau--ticker-seul .po-bandeau__tag,
.po-bandeau--ticker-seul .po-bandeau__bar { display: none !important; }
.po-bandeau--ticker-seul .po-bandeau__ticker { display: flex !important; opacity: 1 !important; transform: none !important; margin-top: 0; }

/* Panneau de pilotage (créateur). */
.po-bandeau-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.po-bandeau-ctl__t { font-size: 12px; font-weight: 800; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .04em; }
.po-bandeau-ctl__btn { padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer; background: var(--pf-surface); color: var(--pf-text); font-size: 13px; font-weight: 700; font-family: inherit; transition: background .14s ease, color .14s ease; }
.po-bandeau-ctl__btn:hover { background: var(--pf-raise); }
.po-bandeau-ctl__btn.is-on { background: var(--pf-brand); color: #fff; }

/* Aperçu du bandeau dans le formulaire. */
.po-band-preview { position: relative; aspect-ratio: 16 / 6; max-height: 220px; border-radius: 12px; overflow: hidden; margin-top: 6px;
  background: radial-gradient(120% 90% at 30% 20%, #2a3340 0%, #141a22 60%, #0b0f14 100%); }
.po-band-preview:empty::after { content: "-"; }
.po-ev__stage--multi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.po-ev__player { width: 100%; border-radius: 12px; overflow: hidden; background: #000; }

/* -- Formulaire de création/édition ------------------------------------ */
.po-ev-form {
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
  background: #fff;
}
.po-ev-form__lbl { display: block; font-weight: 600; font-size: 13px; margin: 12px 0 5px; }
.po-ev-form__in {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--pf-line);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--pf-text);
  background: #fff;
}
.po-ev-form__in:focus { outline: none; border-color: var(--pf-brand); }
/* Bouton « Téléverser » posé à côté d'un champ d'image (médiathèque WordPress). */
.po-upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 7px 12px;
  border: 1px solid var(--pf-line, rgba(0,0,0,.16)); border-radius: 8px;
  background: var(--pf-surface, #f4f4f5); color: var(--pf-text);
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.po-upload-btn::before { content: "⬆"; font-size: 12px; }
.po-upload-btn:hover { border-color: var(--pf-brand, #e50914); color: var(--pf-brand, #e50914); }
/* Dans une ligne en grille (partenaires, commandites), le bouton occupe sa
   propre rangée pleine largeur, sous les champs, sans casser l'alignement. */
.po-upload-btn--row { grid-column: 1 / -1; justify-self: start; margin-top: 2px; margin-bottom: 4px; }
/* -- Mur de chat plein écran (tablette au régie) -- */
.po-chatmur {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column;
  background: #0b0d10; color: #fff;
}
.po-chatmur__barre {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: #14161a; border-bottom: 1px solid #262a31;
}
.po-chatmur__titre { font-weight: 800; font-size: 15px; margin-right: auto; }
.po-chatmur__modes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.po-chatmur__mode {
  padding: 7px 14px; border-radius: 999px; border: 1px solid #2f333b;
  background: #1b1f27; color: #cfd3da; font-weight: 700; font-size: 13px; cursor: pointer;
}
.po-chatmur__mode.is-on { background: var(--pf-brand, #e50914); border-color: var(--pf-brand, #e50914); color: #fff; }
.po-chatmur__chaine {
  padding: 7px 10px; border-radius: 8px; border: 1px solid #2f333b;
  background: #1b1f27; color: #fff; font-size: 13px;
}
.po-chatmur__zone { position: relative; flex: 1; min-height: 0; }
.po-chatmur__site, .po-chatmur__twitch { position: absolute; inset: 0; overflow: hidden; }
.po-chatmur__site .po-chat { height: 100%; max-height: none; border: 0; border-radius: 0; }
.po-chatmur__tw-if { width: 100%; height: 100%; border: 0; display: block; }

.po-ev-form__streamers { margin-top: 16px; }

/* Ligne de formulaire d'un épisode : disposition souple (titre pleine largeur,
   puis date / fin / lien / vignette qui s'enroulent, bouton Téléverser dessous). */
/* Double classe : bat la règle « .po-ev-form__row { display:grid } » définie plus
   bas (même spécificité, source plus tardive). Sans ça, la rangée épisode reste
   en grille et le bloc Parties fait exploser une colonne → tout se décale. */
.po-ev-form__row.po-ev-form__row--ep { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.po-ev-form__row--ep .po-ev-form__in { flex: 1 1 150px; width: auto; min-width: 0; }
.po-ev-form__row--ep .po-ep-titre { flex: 1 0 100%; }        /* titre : sa propre ligne, pleine largeur */
.po-ev-form__row--ep .po-ev-form__del { flex: 0 0 auto; }
.po-ev-form__row--ep .po-upload-btn { flex: 0 0 auto; margin-top: 0; }  /* bouton inline, juste après la vignette */
.po-ev-form__row--ep .po-ep-row-saison { flex: 0 1 160px; min-width: 130px; max-width: 180px; }

/* -- Onglets de saison (admin) -------------------------------------------- */
.po-ep-saisons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; }
.po-ep-saison-tab { display: inline-flex; align-items: center; border: 1px solid var(--pf-line, #e5e5e5); background: var(--pf-surface, #f2f2f2); border-radius: 999px; overflow: hidden; }
.po-ep-saison-tab.is-on { border-color: var(--pf-brand, #e50914); background: var(--pf-brand, #e50914); }
.po-ep-saison-tab__nom { font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; border: 0; background: transparent; color: var(--pf-muted, #606060); padding: 8px 14px; }
.po-ep-saison-tab.is-on .po-ep-saison-tab__nom { color: #fff; }
.po-ep-saison-tab__edit { border: 0; background: transparent; cursor: pointer; color: #fff; font-size: 13px; line-height: 1; padding: 8px 12px 8px 2px; }
.po-ep-saison-tab__edit:hover { opacity: .85; }
.po-ep-saison-tab__in { font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border: 0; outline: 2px solid var(--pf-brand, #e50914); border-radius: 999px; min-width: 120px; }
.po-ep-saison-add { font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; padding: 8px 14px; border-radius: 999px; color: var(--pf-brand, #e50914); background: transparent; border: 1px dashed var(--pf-brand, #e50914); }
.po-ep-saison-add:hover { background: rgba(229,9,20,.08); }
.po-ep-row--cache { display: none !important; }

/* Liste d'épisodes / archives sous la vidéo (playlist cliquable). */
.po-ev__episodes { margin: 16px 0 8px; }
.po-ev__episodes-t { font-weight: 800; font-size: 15px; margin: 0 0 10px; }
.po-ev__episodes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.po-ev__ep { display: block; text-decoration: none; color: inherit; border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 12px; overflow: hidden; background: var(--pf-surface, #fff); transition: border-color .15s ease, transform .1s ease; }
.po-ev__ep:hover { border-color: var(--pf-brand, #e50914); transform: translateY(-2px); }
.po-ev__ep.po-on { border-color: var(--pf-brand, #e50914); box-shadow: 0 0 0 2px rgba(229,9,20,.25); }
.po-ev__ep-vig { position: relative; display: block; aspect-ratio: 16/9; background: #0b0d10; }
.po-ev__ep-vig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-ev__ep-badge { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.po-ev__ep--soon .po-ev__ep-badge { background: var(--pf-brand, #e50914); }
.po-ev__ep--soon { opacity: .85; cursor: default; }
/* Épisode EN DIRECT : pastille rouge avec point clignotant. */
.po-ev__ep-badge--live { display: inline-flex; align-items: center; gap: 5px; background: var(--pf-brand, #e50914); }
.po-ev__ep--live { border-color: var(--pf-brand, #e50914); }
.po-ev__ep-titre { display: block; font-weight: 700; font-size: 13.5px; padding: 8px 10px 0; }
.po-ev__ep-date { display: block; color: var(--pf-muted, #888); font-size: 12px; padding: 2px 10px 10px; }
/* Sections par jour (Jour 1, Jour 2...) : chaque jour a son titre et sa grille,
   pour que les vidéos ne se collent pas les unes aux autres. */
.po-ev__episodes--jours .po-ev__jour + .po-ev__jour { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pf-line, rgba(0,0,0,.12)); }
.po-ev__jour-t { display: inline-block; font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--pf-brand, #e50914); margin: 0 0 10px; }

/* -- Épisodes en « saisons » : sélecteur d'onglets + liste verticale ------- */
/* Titre « Épisodes » sur sa ligne, puis les onglets de saison JUSTE EN DESSOUS,
   alignés à gauche. */
.po-ev__episodes-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 14px; }
.po-ev__episodes--saisons .po-ev__episodes-t { margin: 0; }
.po-ev__seasons { display: flex; gap: 8px; flex-wrap: wrap; }
.po-ev__season-tab {
  font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; line-height: 1;
  padding: 8px 15px; border-radius: 999px; color: var(--pf-muted, #606060);
  background: var(--pf-surface, #f2f2f2); border: 1px solid var(--pf-line, #e5e5e5);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.po-ev__season-tab:hover { border-color: var(--pf-brand, #e50914); color: var(--pf-text, #0f0f0f); }
.po-ev__season-tab.is-on { background: var(--pf-brand, #e50914); border-color: var(--pf-brand, #e50914); color: #fff; }

.po-ev__season { display: none; }
.po-ev__season.is-on { display: block; animation: po-ev-fade .18s ease; }
@keyframes po-ev-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.po-ev__season-cap { font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--pf-muted, #606060); margin: 0 0 10px; }

.po-ev__eprow {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  padding: 10px; margin-bottom: 10px; border-radius: 12px;
  border: 1px solid var(--pf-line, #e5e5e5); background: var(--pf-surface, #fff);
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.po-ev__eprow:last-child { margin-bottom: 0; }
.po-ev__eprow:hover { border-color: var(--pf-brand, #e50914); transform: translateY(-1px); }
.po-ev__eprow.po-on { border-color: var(--pf-brand, #e50914); box-shadow: 0 0 0 2px rgba(229,9,20,.22); }
.po-ev__eprow--soon { opacity: .85; }
.po-ev__eprow-vig { position: relative; flex: 0 0 auto; width: 150px; aspect-ratio: 16/9; border-radius: 9px; overflow: hidden; background: #0b0d10; }
.po-ev__eprow-vig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-ev__eprow-badge { position: absolute; left: 7px; top: 7px; display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,.72); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; }
.po-ev__eprow-badge--live, .po-ev__eprow-badge--bientot { background: var(--pf-brand, #e50914); }
.po-ev__eprow-info { flex: 1 1 auto; min-width: 0; }
.po-ev__eprow-kick { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pf-muted, #606060); }
.po-ev__eprow.po-on .po-ev__eprow-kick { color: var(--pf-brand, #e50914); }
.po-ev__eprow-titre { display: block; font-size: 14.5px; font-weight: 700; margin: 3px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-ev__eprow-date { display: block; font-size: 12px; color: var(--pf-muted, #888); }
.po-ev__eprow-go { flex: 0 0 auto; padding-right: 6px; font-size: 13px; color: var(--pf-muted, #888); opacity: 0; transition: opacity .15s ease, color .15s ease; }
.po-ev__eprow:hover .po-ev__eprow-go, .po-ev__eprow.po-on .po-ev__eprow-go { opacity: 1; color: var(--pf-brand, #e50914); }
@media (max-width: 560px) {
  .po-ev__eprow-vig { width: 118px; }
  .po-ev__eprow-titre { white-space: normal; }
  .po-ev__eprow-go { display: none; }
}
/* Écran d'attente d'un streamer sans lien, à la place du lecteur : image de
   fond (photo du streamer, sinon de l'événement, sinon logo de la marque) +
   nom + « En ondes bientôt ». Même format 16:9 que le lecteur. */
.po-ev__attente {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #0b0d10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.po-ev__attente-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.5) saturate(1.05);
}
.po-ev__attente-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 0 18px;
}
.po-ev__attente-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--pf-brand, #e50914);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}
.po-ev__attente-nom { color: #fff; font-size: 26px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.po-ev__attente-msg { color: #e7eaf0; font-size: 15px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
@media (max-width: 640px) {
  .po-ev__attente-nom { font-size: 20px; }
  .po-ev__attente-msg { font-size: 13px; }
}
.po-ev-form__streamers-head { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.po-ev-form__row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.2fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.po-ev-form__del {
  flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--pf-muted); font-size: 20px; line-height: 1;
  cursor: pointer; transition: background .14s ease, color .14s ease;
}
.po-ev-form__del:hover { background: rgba(229,9,20,.10); color: var(--pf-brand); }
.po-ev-form__add {
  border: 1px dashed var(--pf-line);
  background: #fff;
  color: var(--pf-text);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  margin-top: 4px;
}
.po-ev-form__actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.po-ev-form__sup {
  border: 1px solid var(--pf-line);
  background: #fff;
  color: var(--pf-brand);
  font-weight: 600;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 9px;
  cursor: pointer;
}

/* -- Adaptation mobile ------------------------------------------------- */
@media (max-width: 1040px) {
  .po-ev__scene,
  .po-ev__scene--nostream { grid-template-columns: 1fr; }
  .po-ev__menu { position: static; order: 2; }
  .po-ev__main { order: 1; }
  /* En écran étroit, la vidéo passe au-dessus et le chat en dessous. */
  .po-ev__top { grid-template-columns: 1fr; }
  .po-chat,
  .po-ev__scene--nostream .po-chat { height: 460px; max-height: none; }

  /* Sur mobile, on remonte le commanditaire et les partenaires JUSTE sous la
     vidéo, avant la liste des rediffusions : sinon ils se retrouvaient tout en
     bas, cachés derrière les épisodes. */
  .po-ev__main { display: flex; flex-direction: column; }
  .po-ev__main > .po-ev__top { order: 0; }
  .po-ev__main > .po-spo,
  .po-ev__main > .po-spo-ctl { order: 1; }
  .po-ev__main > .po-ev__partenaires { order: 2; }
  .po-ev__main > .po-ev__desc { order: 3; }
  .po-ev__main > .po-ev__episodes { order: 4; }
  .po-ev__main > .po-spo-stats { order: 5; }
}
@media (max-width: 860px) {
  .po-ev__stage--multi { grid-template-columns: 1fr; }
  .po-ev-form__row { grid-template-columns: 1fr; }
}

/* -- Menu « Créer » (haut à droite) : bouton + liste déroulante --------- */
.po-pf__creerwrap { position: relative; }
.po-pf__creer-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 264px;
  background: #fff;
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
  padding: 6px;
  z-index: 60;
}
.po-pf__creer-item {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--pf-text);
}
.po-pf__creer-item:hover { background: var(--pf-raise); }
.po-pf__creer-item-t { display: block; font-size: 14px; font-weight: 600; }
.po-pf__creer-item-d { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--pf-muted); }
/* Petit intertitre qui regroupe les trois « directs ». */
.po-pf__creer-sep {
  margin: 6px 12px 2px;
  padding-top: 8px;
  border-top: 1px solid var(--pf-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--pf-muted);
}

/* -- En-tête du formulaire d'événement : titre + fermeture (×) ---------- */
.po-ev-form__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -4px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pf-line);
}
.po-ev-form__titre { font-size: 15px; font-weight: 700; color: var(--pf-text); }
.po-ev-form__x {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  color: var(--pf-muted);
  text-decoration: none;
  border-radius: 8px;
}
.po-ev-form__x:hover { background: var(--pf-raise); color: var(--pf-text); }
.po-ev-form__aide { font-size: 12px; color: var(--pf-muted); margin: 6px 0 14px; line-height: 1.5; }
/* Champs empilés sans étiquette (réseaux sociaux d'un événement) : de l'air
   entre chaque champ pour qu'ils ne soient pas collés les uns aux autres. */
.po-ev-form__stack { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.po-ev-form__annuler {
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text);
  text-decoration: none;
  padding: 9px 16px;
  border: 1px solid var(--pf-line);
  border-radius: 9px;
}
.po-ev-form__annuler:hover { background: var(--pf-raise); }

/* -- Partenaires : bande du bas + version compacte dans le menu --------- */
.po-ev__part-titre {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pf-muted);
  margin-bottom: 10px;
}
.po-ev__part-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.po-ev__part {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--pf-text);
}
.po-ev__part img {
  max-height: 46px;
  max-width: 150px;
  object-fit: contain;
  display: block;
  /* Logo des partenaires TOUJOURS en couleur, tel que fourni : on n'altère
     plus le logo d'un commanditaire (avant : noir et blanc au repos). */
  filter: none;
  opacity: 1;
  transition: transform .15s;
}
.po-ev__part:hover img { transform: scale(1.04); }
.po-ev__part-nom {
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-text);
  padding: 6px 10px;
  border: 1px solid var(--pf-line);
  border-radius: 8px;
}

/* Bande du bas, pleine largeur sous la scène */
.po-ev__partenaires {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--pf-line);
}
.po-ev__partenaires .po-ev__part-logos { gap: 24px; }

/* Version compacte dans le menu latéral, sous les streamers */
.po-ev__part-side {
  padding: 12px;
  border-top: 1px solid var(--pf-line);
}
.po-ev__part-logos--side { gap: 12px; }
.po-ev__part-logos--side .po-ev__part img { max-height: 30px; max-width: 100px; }
.po-ev__part-logos--side .po-ev__part-nom { font-size: 12px; padding: 4px 8px; }

/* ======================================================================
   DIRECT / ÉVÉNEMENT : champs d'événement, à-venir, description streamer,
   formulaire vidéo, bandeau flash
   ====================================================================== */

/* Badge « À venir » sur les cartes d'événement */
.po-ev-carte__avenir {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--pf-brand);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: .03em;
}

/* Ligne d'infos d'un événement (date, adresse, billets) */
.po-ev__infos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 10px;
}
.po-ev__info {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pf-text);
}
.po-ev__info svg { width: 17px; height: 17px; fill: var(--pf-muted); flex-shrink: 0; }
.po-ev__avenir {
  margin-left: 8px;
  background: rgba(229, 9, 20, .1);
  color: var(--pf-brand);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}
.po-ev__billets {
  display: inline-flex;
  align-items: center;
  background: var(--pf-brand);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 999px;
}
.po-ev__billets:hover { background: #c20811; }

/* Total de spectateurs des plateformes externes (Twitch + YouTube). */
.po-ev__vext { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pf-muted, #888); margin-left: 10px; }
.po-ev__vext [data-po-vext-n] { font-weight: 800; color: var(--pf-text); }

/* Compte à rebours d'un direct à venir. */
.po-countdown {
  display: inline-flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px;
  color: var(--pf-brand, #e50914);
  background: rgba(229,9,20,.08); border: 1px solid rgba(229,9,20,.3);
  padding: 3px 10px; border-radius: 999px;
}
.po-countdown--live { color: #fff; background: var(--pf-brand, #e50914); }
/* Bouton « Ajouter à mon calendrier ». */
.po-ev__cal {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  border: 1px solid var(--pf-line, rgba(0,0,0,.16)); border-radius: 8px;
  padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--pf-text);
}
.po-ev__cal:hover { border-color: var(--pf-brand, #e50914); color: var(--pf-brand, #e50914); }
.po-ev__cal svg { width: 15px; height: 15px; }

/* -- Rail « En direct maintenant » (accueil) -- */
.po-live-rail { margin: 4px 0 20px; }
.po-live-rail__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.po-live-rail__t { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; }
.po-live-rail__tout { text-decoration: none; color: var(--pf-brand, #e50914); font-weight: 700; font-size: 13px; }
.po-live-rail__tout:hover { text-decoration: underline; }
.po-live-rail__grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 260px);
  gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity;
}
.po-live-rail__grid > * { scroll-snap-align: start; }
.po-live-rail__grid::-webkit-scrollbar { height: 8px; }
.po-live-rail__grid::-webkit-scrollbar-thumb { background: var(--pf-line, rgba(0,0,0,.2)); border-radius: 8px; }
@media (max-width: 640px) { .po-live-rail__grid { grid-auto-columns: minmax(200px, 78%); } }

/* Colonne lecteur + description du streamer sous le lecteur */
.po-ev__main { min-width: 0; }
.po-ev__sdesc { margin-top: 12px; }
.po-ev__sdesc-nom { font-size: 16px; color: var(--pf-text); margin-bottom: 4px; }
.po-ev__sdesc-intro { font-weight: 400; color: var(--pf-muted); }
.po-ev__sdesc-qui { font-weight: 700; }
.po-ev__sdesc-txt { font-size: 14px; line-height: 1.55; color: var(--pf-text); white-space: pre-wrap; }

/* Champ description du streamer dans le formulaire : pleine largeur */
.po-ev-form__desc { grid-column: 1 / -1; }

/* Formulaire de publication de vidéo : certification + droits */
.po-vid-form__cert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pf-text);
}
.po-vid-form__cert input { margin-top: 3px; flex-shrink: 0; }
.po-vid-form__cert a { color: var(--pf-brand); }
.po-vid-form__droits {
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 14px;
}
.po-vid-form__droits legend { font-weight: 700; font-size: 13.5px; padding: 0 6px; }
.po-vid-form__droits label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.po-vid-form__droits input { margin-top: 3px; flex-shrink: 0; }

/* Bandeau de confirmation / erreur */
.po-pf__flash {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  border-radius: 10px;
  padding: 8px 10px 8px 14px;
  margin: 0 0 14px;
  font-size: 13.5px;
  font-weight: 600;
}
.po-pf__flash--ok { background: rgba(22, 163, 74, .1); color: #16a34a; border: 1px solid rgba(22, 163, 74, .25); }
.po-pf__flash--no { background: rgba(229, 9, 20, .08); color: var(--pf-brand); border: 1px solid rgba(229, 9, 20, .25); }
.po-pf__flash-txt { white-space: nowrap; }
.po-pf__flash-lien {
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: #065fd4;
  text-decoration: none;
}
.po-pf__flash-lien:hover { text-decoration: underline; }
.po-pf__flash-copier {
  flex: none;
  border: 1px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 7px;
  padding: 3px 10px;
  cursor: pointer;
}
.po-pf__flash-copier:hover { background: rgba(0, 0, 0, .05); }
.po-pf__flash-x {
  flex: none;
  border: 0;
  background: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  opacity: .6;
  cursor: pointer;
  padding: 0 2px;
}
.po-pf__flash-x:hover { opacity: 1; }
@media (max-width: 560px) {
  .po-pf__flash { flex-wrap: wrap; }
  .po-pf__flash-lien { max-width: 100%; }
}

/* -- Publier une vidéo : téléversement --------------------------------- */
.po-vid-creer { max-width: 720px; }
.po-vid-upload {
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  padding: 16px;
  margin-top: 14px;
  background: #fff;
}
.po-vid-upload__sep {
  text-align: center;
  color: var(--pf-muted);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 12px;
  position: relative;
}
.po-vid-upload__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px;
  border: 2px dashed var(--pf-line);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.po-vid-upload__drop:hover { border-color: var(--pf-brand); background: rgba(229, 9, 20, .03); }
.po-vid-upload__drop svg { fill: var(--pf-muted); }
.po-vid-upload__drop-t { font-weight: 600; font-size: 14px; color: var(--pf-text); }
.po-vid-upload__drop-s { font-size: 12px; color: var(--pf-muted); }
/* Lot 10 (passe 4) : jauge de l'espace de stockage du membre (charte noir, or, gris). */
.po-quota { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--pf-line); border-radius: 10px; background: #fafafa; }
.po-quota__tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.po-quota__titre { font-weight: 700; font-size: 13.5px; color: var(--ru-texte,#0e2438); }
.po-quota__palier { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); }
.po-quota__barre { height: 8px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.po-quota__barre span { display: block; height: 100%; background: var(--ru-texte,#0e2438); }
.po-quota--alerte .po-quota__barre span { background: #b45309; }
.po-quota--plein .po-quota__barre span { background: #b91c1c; }
.po-quota__texte { margin: 8px 0 0; font-size: 12.5px; color: #374151; }
.po-quota__note { margin: 6px 0 0; font-size: 12px; color: var(--pf-muted); }
.po-quota__liens { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; }
.po-quota__lien { display: inline-block; margin-top: 0; font-size: 12.5px; font-weight: 700; color: var(--ru-texte,#0e2438); text-decoration: underline; text-decoration-color: var(--ru-accent,#E50914); text-underline-offset: 3px; }
/* Passe Player One (2026-10-02) : espace presque plein, plus grosses vidéos, achat de blocs, palier fermé. */
.po-quota__alerte { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; color: #92400e; background: rgba(180,83,9,.07); border: 1px solid rgba(180,83,9,.25); }
.po-quota__gros { margin: 8px 0 0; font-size: 12.5px; }
.po-quota__gros-t { display: block; font-weight: 700; color: var(--ru-texte,#0e2438); margin-bottom: 4px; }
.po-quota__gros ul { list-style: none; margin: 0; padding: 0; }
.po-quota__gros li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid var(--pf-line); color: #374151; }
.po-quota__gros li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.po-blocs { margin: 10px 0 0; padding: 12px; border: 1px solid var(--pf-line); border-radius: 10px; background: #fff; display: grid; gap: 8px; }
.po-blocs__titre { margin: 0; font-weight: 700; font-size: 13.5px; color: var(--ru-texte,#0e2438); }
.po-blocs__desc, .po-blocs__prix, .po-blocs__note { margin: 0; font-size: 12.5px; color: #374151; }
.po-blocs__n { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ru-texte,#0e2438); }
.po-blocs__n select { max-width: 100%; min-height: 40px; border-radius: 10px; border: 1px solid var(--pf-line); padding: 6px 8px; }
.po-blocs__si { font-size: 12.5px; color: #374151; }
.po-blocs__si summary { cursor: pointer; font-weight: 600; color: var(--ru-texte,#0e2438); }
.po-blocs__si ul { margin: 6px 0 0 18px; padding: 0; }
.po-blocs .po-btn { justify-self: start; min-height: 40px; border: 0; border-radius: 10px; padding: 8px 14px; font-weight: 700; background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); cursor: pointer; }
.po-ferme { margin: 0 0 14px; padding: 16px; border: 1px solid var(--pf-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.po-ferme__palier { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); }
.po-ferme__date { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: #F6F6F4; color: var(--ru-texte,#0e2438); }
.po-ferme__titre { margin: 12px 0 4px; font-weight: 700; font-size: 15px; color: var(--ru-texte,#0e2438); }
.po-ferme__texte, .po-ferme__note, .po-ferme__compte { margin: 4px 0 0; font-size: 13px; color: #374151; overflow-wrap: anywhere; }
.po-ferme__note, .po-ferme__compte { color: var(--pf-muted); font-size: 12.5px; }
.po-ferme__actions { margin: 12px 0 0; }
.po-ferme__lien { display: inline-flex; align-items: center; min-height: 40px; border: 0; border-radius: 10px; padding: 8px 14px; font-weight: 700; background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); text-decoration: none; cursor: pointer; }
.po-ferme__plus { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--pf-line); font-size: 12.5px; color: #374151; }
.po-ferme__plus a { color: var(--ru-texte,#0e2438); font-weight: 700; text-decoration: underline; text-decoration-color: var(--ru-accent,#E50914); text-underline-offset: 3px; }
.po-vid-upload .po-ev-form__in { margin-top: 10px; }
.po-vid-upload__prog {
  height: 8px;
  background: var(--pf-raise);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 12px;
}
.po-vid-upload__bar { height: 100%; width: 0; background: var(--pf-brand); transition: width .2s; }
.po-vid-upmsg { font-size: 13px; margin-top: 8px; min-height: 18px; }
.po-vid-upmsg--ok { color: #16a34a; }
.po-vid-upmsg--no { color: var(--pf-brand); }

/* -- Espacement des blocs du formulaire (streamers / partenaires) ------- */
.po-ev-form__block {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--pf-line);
}
.po-ev-form__streamers-head {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--pf-text);
  margin-bottom: 14px;
}
.po-ev-form__add { margin-top: 14px; margin-bottom: 4px; }
.po-ev-form__row { margin-bottom: 12px; }

/* ======================================================================
   CHAT EN DIRECT « façon Twitch » (événements / directs)
   Colonne à droite du lecteur : avatars, pseudos en couleur, badges de rôle,
   message épinglé, emojis, mentions, bouton Signaler.
   ====================================================================== */
.po-hide { display: none !important; }

/* Le chat remplit la rangée du haut : sa hauteur suit celle de la vidéo.
   Tout le module (messages + champ + Envoyer) tient donc à côté de la vidéo,
   sans jamais avoir à scroller la page. */
.po-chat {
  border: 1px solid var(--pf-line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  height: 100%;
  min-height: 380px;
  max-height: 80vh;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
/* Sans streamer (événement à venir), aucune vidéo ne fixe la hauteur :
   on donne au chat une hauteur raisonnable par lui-même. */
.po-ev__scene--nostream .po-chat { height: 460px; }
.po-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--pf-line);
  flex-wrap: wrap;
}
.po-chat__titre { font-weight: 800; font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; }
.po-chat__titre::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pf-brand);
  box-shadow: 0 0 0 0 rgba(229, 9, 20, .5);
  animation: po-live-pulse 1.8s infinite;
}
.po-chat__tabs { display: inline-flex; gap: 6px; }
.po-chat__tab {
  border: 1px solid var(--pf-line);
  background: #fff;
  color: var(--pf-text);
  font-weight: 700;
  font-size: 11.5px;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
}
.po-chat__tab.po-on { background: var(--pf-brand); color: #fff; border-color: var(--pf-brand); }

/* Bouton « Détacher » : ouvre le mur de chat dans une fenêtre à part. */
.po-chat__detach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--pf-line);
  background: #fff;
  color: var(--pf-text);
  font-weight: 700;
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.po-chat__detach:hover { background: var(--pf-brand); color: #fff; border-color: var(--pf-brand); }
.po-chat__detach-ic { font-size: 13px; line-height: 1; }

/* Filtres du flux : En direct / Filtré / Abonnements (façon YouTube). */
.po-chat__filtres {
  display: flex;
  gap: 6px;
  padding: 8px 13px;
  border-bottom: 1px solid var(--pf-line);
  flex-wrap: wrap;
}
.po-chat__filtre {
  border: 1px solid var(--pf-line);
  background: #fff;
  color: var(--pf-text);
  font-weight: 700;
  font-size: 11px;
  padding: 3px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.po-chat__filtre.po-on { background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); border-color: var(--ru-accent,#E50914); }

/* -- Salle d'attente des invités (régie) --------------------------------- */
.po-attente__liste { display: flex; flex-direction: column; gap: 6px; }
.po-attente__vide { font-size: 12.5px; color: var(--pf-muted, #667); }
.po-attente__inv {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--pf-line);
  border-radius: 8px;
}
.po-attente__inv--admis { border-color: #12a150; background: rgba(18, 161, 80, .08); }
.po-attente__nom { font-weight: 700; font-size: 13px; flex: 1; }
.po-attente__etat { font-size: 11px; color: var(--pf-muted, #667); }
.po-attente__btn {
  border: 1px solid var(--pf-brand);
  background: var(--pf-brand);
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.po-attente__inv--admis .po-attente__btn { background: #fff; color: var(--pf-text); border-color: var(--pf-line); }

/* -- Bilan post-direct --------------------------------------------------- */
.po-bilan { max-width: 920px; margin: 0 auto; padding: 28px 18px 40px; }
.po-bilan__tete { text-align: center; margin-bottom: 22px; }
.po-bilan__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pf-brand);
}
.po-bilan__titre { font-size: 26px; font-weight: 800; margin: 6px 0 0; }
.po-bilan__live {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--pf-brand);
}
.po-bilan__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 640px) { .po-bilan__grille { grid-template-columns: repeat(2, 1fr); } }
.po-bilan__carte {
  background: var(--pf-card, #fff);
  border: 1px solid var(--pf-line);
  border-radius: 16px;
  padding: 22px 16px;
  text-align: center;
}
.po-bilan__n { font-size: 30px; font-weight: 800; line-height: 1.1; }
.po-bilan__t { margin-top: 6px; font-size: 12.5px; color: var(--pf-muted, #667); font-weight: 600; }
.po-bilan__note { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--pf-muted, #667); }

/* Message d'une personne que le spectateur suit : léger surlignage. */
.po-chat__msg--suivi {
  background: var(--ru-accent-doux,rgba(229,9,20,.12));
  border-radius: 10px;
}
.po-chat__suivi-b {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--ru-texte,#0e2438);
  background: var(--ru-accent-filet,rgba(229,9,20,.45));
  vertical-align: middle;
}

/* Barre modérateur : bouton « épingler » */
.po-chat__modrow {
  padding: 8px 13px;
  border-bottom: 1px solid var(--pf-line);
  background: #fafafa;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.po-chat__pinset {
  border: 1px solid var(--pf-line);
  background: #fff;
  color: var(--pf-text);
  font-weight: 700;
  font-size: 11.5px;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
}
.po-chat__pinset:hover { border-color: var(--pf-brand); color: var(--pf-brand); }

/* Message épinglé */
.po-chat__pin {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 13px;
  background: #fff7e6;
  border-bottom: 1px solid #ffe6ad;
}
.po-chat__pin-ic { flex-shrink: 0; }
.po-chat__pin-tx { font-size: 12.5px; line-height: 1.45; word-break: break-word; flex: 1; }
.po-chat__pin-tx a { color: var(--pf-brand); font-weight: 700; text-decoration: none; }
.po-chat__pin-tx a:hover { text-decoration: underline; }
.po-chat__pin-x {
  flex-shrink: 0;
  border: 0; background: none; cursor: pointer;
  color: #c98a00; font-size: 18px; line-height: 1; font-weight: 700;
  padding: 0 2px;
}

/* -- Sondage épinglé (résultat en direct) -- */
.po-chat__sondage {
  padding: 12px 13px;
  background: #f3f7ff;
  border-bottom: 1px solid #d9e6ff;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.po-chat__sond-q {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--pf-text);
  word-break: break-word;
}
.po-chat__sond-opts { display: flex; flex-direction: column; gap: 7px; }
.po-chat__sond-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1.5px solid var(--pf-line);
  border-radius: 10px;
  background: #fff;
  color: var(--pf-text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.po-chat__sond-opt.is-fige { cursor: default; }
button.po-chat__sond-opt:hover { border-color: var(--pf-brand); }
.po-chat__sond-opt.is-moi { border-color: var(--pf-brand); box-shadow: 0 0 0 2px rgba(229, 9, 20, .16); }
/* La barre de remplissage (résultat), derrière le texte. */
.po-chat__sond-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: rgba(31, 122, 224, .16);
  z-index: 0;
  transition: width .35s ease;
}
.po-chat__sond-opt.is-moi .po-chat__sond-fill { background: rgba(229, 9, 20, .16); }
.po-chat__sond-lbl {
  position: relative; z-index: 1;
  flex: 1;
  font-weight: 700;
  word-break: break-word;
}
.po-chat__sond-val {
  position: relative; z-index: 1;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--pf-muted);
}
.po-chat__sond-opt.is-moi .po-chat__sond-val { color: var(--pf-brand); }
.po-chat__sond-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--pf-muted);
}
.po-chat__sond-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.po-chat__sond-x {
  border: 1px solid var(--pf-line);
  background: #fff;
  color: var(--pf-muted);
  font-weight: 700;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
}
.po-chat__sond-x:hover { border-color: var(--pf-brand); color: var(--pf-brand); }

/* « +X points » montre au membre juste apres son vote (s'efface tout seul). */
.po-chat__sond-gain {
  align-self: center;
  margin-top: 2px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--pf-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  animation: po-sond-gain 2.6s ease forwards;
}
@keyframes po-sond-gain {
  0%   { opacity: 0; transform: translateY(6px) scale(.92); }
  12%  { opacity: 1; transform: translateY(0) scale(1); }
  80%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-6px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  .po-chat__sond-gain { animation: none; }
}

.po-chat__msgs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  background: #fbfbfc;
}

/* État vide accueillant (compact) */
.po-chat__vide { margin: auto; text-align: center; color: var(--pf-muted); padding: 12px; }
.po-chat__vide-ic { font-size: 24px; margin-bottom: 5px; }
.po-chat__vide-t { font-weight: 800; font-size: 13.5px; color: var(--pf-text); margin-bottom: 2px; }
.po-chat__vide-p { font-size: 12px; }

/* Bandeau indicateurs (mode lent / abonnés) réglés dans l'admin */
.po-chat__modbar {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 8px 13px;
  border-bottom: 1px solid var(--pf-line);
  background: #fafafa;
}
.po-chat__chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #eee; color: #555; }
.po-chat__chip--on { background: rgba(229, 9, 20, .1); color: var(--pf-brand); }

/* Message */
.po-chat__msg {
  display: flex;
  gap: 9px;
  position: relative;
  padding-right: 6px;
}
.po-chat__msg--moi {
  background: rgba(229, 9, 20, .06);
  border-radius: 8px;
  margin: -3px -3px -3px -3px;
  padding: 3px 9px 3px 3px;
}
.po-chat__av {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 12px;
  background: var(--pf-brand);
}
.po-chat__body { font-size: 13.5px; line-height: 1.45; word-break: break-word; min-width: 0; }
.po-chat__badge {
  display: inline-block;
  font-size: 9px; font-weight: 800;
  padding: 1px 6px; border-radius: 4px;
  margin-right: 5px; vertical-align: 1px;
  text-transform: uppercase; letter-spacing: .03em;
  color: #fff;
}
.po-chat__badge--crea { background: var(--pf-brand); }
.po-chat__badge--modo { background: #0f9d58; }
.po-chat__auteur { font-weight: 800; color: var(--pf-brand); margin-right: 5px; }
.po-chat__txt { color: var(--pf-text); }
.po-chat__mention { color: var(--pf-brand); font-weight: 700; }

/* Actions au survol (signaler / masquer / bloquer / modifier) */
.po-chat__acts {
  position: absolute; top: 0; right: 0;
  display: none; gap: 6px; align-items: center;
}
.po-chat__msg:hover .po-chat__acts { display: flex; }
.po-chat__act {
  border: 1px solid var(--pf-line);
  background: #fff;
  border-radius: 6px;
  font-size: 10.5px; font-weight: 700;
  color: var(--pf-muted); cursor: pointer;
  padding: 2px 6px;
}
.po-chat__act:hover { color: var(--pf-brand); border-color: var(--pf-brand); }
.po-chat__act:disabled { opacity: .55; cursor: default; }
.po-chat__flag { font-size: 10.5px; font-weight: 700; color: var(--pf-brand); }

/* Pied : bouton emojis + bouton couleur + champ */
.po-chat__foot { border-top: 1px solid var(--pf-line); padding: 10px; }
.po-chat__status {
  font-size: 12px; font-weight: 600;
  color: var(--pf-brand);
  background: rgba(229, 9, 20, .08);
  padding: 6px 10px; border-radius: 8px;
  margin-bottom: 8px;
}
.po-chat__form { display: flex; gap: 6px; align-items: center; }
.po-chat__tool { position: relative; flex-shrink: 0; }
.po-chat__iconbtn {
  border: 1px solid var(--pf-line);
  background: #fff;
  border-radius: 999px;
  width: 38px; height: 38px;
  font-size: 16px; cursor: pointer;
  padding: 0;
}
.po-chat__iconbtn:hover { border-color: var(--pf-brand); }
.po-chat__emos {
  position: absolute;
  bottom: 46px; left: 0;
  background: #fff;
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(6, 26px);
  gap: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  z-index: 5;
}
.po-chat__emo {
  border: 0; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px;
  border-radius: 6px;
}
.po-chat__emo:hover { background: var(--pf-raise); }
.po-chat__palette {
  position: absolute;
  bottom: 46px; left: 0;
  background: #fff;
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, 22px);
  gap: 7px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  z-index: 5;
}
.po-chat__swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.po-chat__swatch.po-on { border-color: var(--pf-text); }
.po-chat__input {
  flex: 1;
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  color: var(--pf-text);
  min-width: 0;
}
.po-chat__input:focus { border-color: var(--pf-brand); }
.po-chat__send {
  border: 0;
  background: var(--pf-brand);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.po-chat__send:hover { background: #c20811; }
.po-chat__note { padding: 14px; text-align: center; color: var(--pf-muted); font-size: 13px; border-top: 1px solid var(--pf-line); }
.po-chat__note a { color: var(--pf-brand); font-weight: 600; text-decoration: none; }
.po-chat__note--ferme { color: var(--pf-text); font-weight: 600; }

/* Modale moderne (épingler / modifier / confirmer) */
.po-chat__modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  z-index: 100000;
}
.po-chat__modal-box {
  background: #fff;
  border-radius: 14px;
  width: 100%; max-width: 420px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.po-chat__modal-titre { font-weight: 800; font-size: 16px; margin-bottom: 14px; color: var(--pf-text); }
.po-chat__modal-champ { display: block; margin-bottom: 12px; }
.po-chat__modal-lbl { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--pf-text); }
.po-chat__modal-in {
  width: 100%;
  border: 1px solid var(--pf-line);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 14px; font-family: inherit;
  color: var(--pf-text); outline: none;
}
.po-chat__modal-in:focus { border-color: var(--pf-brand); }
textarea.po-chat__modal-in { min-height: 80px; resize: vertical; }
.po-chat__modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.po-chat__modal-annuler {
  border: 1px solid var(--pf-line); background: #fff; color: var(--pf-text);
  font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 9px; cursor: pointer;
}
.po-chat__modal-annuler:hover { border-color: var(--pf-brand); }
.po-chat__modal-ok {
  border: 0; background: var(--pf-brand); color: #fff;
  font-weight: 800; font-size: 13px; padding: 9px 18px; border-radius: 9px; cursor: pointer;
}
.po-chat__modal-ok:hover { background: #c20811; }

/* ======================================================================
   LISTES DE LECTURE ET FILE D'ATTENTE
   ====================================================================== */
.po-pf__nav-item--listes svg { fill: #159c8e; }

/* Bouton « Enregistrer » + menu déroulant */
.po-pf__save { position: relative; display: inline-block; }
.po-pf__save-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
  padding: 10px;
  z-index: 40;
}
.po-pf__save-t { font-weight: 800; font-size: 13px; margin: 2px 4px 8px; }
.po-pf__save-rows { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.po-pf__save-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 6px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
.po-pf__save-row:hover { background: var(--pf-raise); }
.po-pf__save-row input { width: 17px; height: 17px; accent-color: var(--pf-brand); }
.po-pf__save-new { border-top: 1px solid var(--pf-line); margin-top: 8px; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.po-pf__save-in { flex: 1; min-width: 120px; border: 1px solid var(--pf-line); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; outline: none; }
.po-pf__save-in:focus { border-color: var(--pf-brand); }
.po-pf__save-pub { font-size: 12.5px; color: var(--pf-muted); display: inline-flex; align-items: center; gap: 6px; }
.po-pf__save-go { border: 0; background: var(--pf-brand); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.po-pf__save-go:hover { background: #c20811; }

/* Cartes de liste dans la grille */
.po-pf__thumb--liste { position: relative; display: block; }
.po-pf__liste-badge {
  position: absolute; right: 8px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, .78); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 4px 9px; border-radius: 7px;
}
.po-pf__liste-badge svg { width: 15px; height: 15px; fill: currentColor; }
.po-pf__card-meta { font-size: 12.5px; color: var(--pf-muted); margin-top: 2px; }

/* Titre de section (chaîne : Listes / Vidéos) */
.po-pf__section-t { font-size: 17px; font-weight: 800; margin: 22px 0 12px; }

/* Entête d'une page de liste */
.po-pf__liste-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.po-pf__liste-sous { color: var(--pf-muted); font-size: 13.5px; margin-top: 4px; }
.po-pf__liste-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Panneau « À suivre » sous la vidéo */
.po-pf__queue {
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  margin: 12px 0;
  overflow: hidden;
  background: #fff;
}
.po-pf__queue-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--pf-line); background: var(--pf-surface);
}
.po-pf__queue-t { font-weight: 800; font-size: 14px; }
.po-pf__queue-n { font-size: 12.5px; color: var(--pf-muted); font-weight: 600; }
.po-pf__queue-list { max-height: 300px; overflow-y: auto; }
.po-pf__queue-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; text-decoration: none; color: var(--pf-text);
  border-bottom: 1px solid var(--pf-line);
}
.po-pf__queue-item:last-child { border-bottom: 0; }
.po-pf__queue-item:hover { background: var(--pf-raise); }
.po-pf__queue-item.po-on { background: rgba(229, 9, 20, .06); }
.po-pf__queue-num { width: 18px; text-align: center; color: var(--pf-muted); font-size: 12.5px; font-weight: 700; flex-shrink: 0; }
.po-pf__queue-item.po-on .po-pf__queue-num { color: var(--pf-brand); }
.po-pf__queue-thumb { width: 68px; height: 40px; border-radius: 6px; overflow: hidden; background: #000; flex-shrink: 0; }
.po-pf__queue-thumb img { width: 100%; height: 100%; object-fit: cover; }
.po-pf__queue-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }

@media (max-width: 640px) {
  .po-pf__save-menu { right: auto; left: 0; }
}

/* Menu du compte : navigation rapide (Mes vidéos, Mes listes, Historique) */
.po-pf__moi-nav { display: flex; flex-direction: column; padding: 6px 4px; border-bottom: 1px solid var(--pf-line); margin-bottom: 6px; }
.po-pf__moi-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--pf-text); text-decoration: none; font-weight: 600; font-size: 14px;
}
.po-pf__moi-nav a:hover { background: var(--pf-raise); }
.po-pf__moi-nav svg { width: 19px; height: 19px; fill: var(--pf-muted); flex-shrink: 0; }

/* Page « Mes vidéos » : actions sous chaque carte */
.po-pf__mesv-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

/* Fenêtre de modification d'une vidéo */
.po-pf__vmodale {
  position: fixed; inset: 0;
  background: rgba(10, 12, 16, .6);
  z-index: 100000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.po-pf__vboite {
  background: #fff; border-radius: 14px;
  width: 100%; max-width: 520px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.po-pf__vboite-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 16px; }
.po-pf__vx { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--pf-muted); }
.po-pf__vboite-p { display: flex; align-items: center; gap: 10px; margin-top: 16px; }

/* File d'attente « façon YouTube » (session, côté navigateur) */
.po-pf__squeue {
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  margin: 12px 0;
  overflow: hidden;
  background: #fff;
}
.po-pf__squeue .po-pf__queue-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--pf-line); background: var(--pf-surface); }
.po-pf__squeue-vider { border: 0; background: none; color: var(--pf-brand); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.po-pf__squeue .po-pf__queue-list { max-height: 300px; overflow-y: auto; }
.po-pf__squeue .po-pf__queue-item { position: relative; }
.po-pf__squeue-x {
  border: 0; background: none; cursor: pointer;
  color: var(--pf-muted); font-size: 18px; line-height: 1;
  padding: 0 4px; margin-left: auto; flex-shrink: 0;
}
.po-pf__squeue-x:hover { color: var(--pf-brand); }

/* Bouton « Ajouter à la file » en surimpression sur la vignette d'une carte */
.po-pf__thumbwrap { position: relative; }
.po-pf__file-btn {
  position: absolute; top: 8px; right: 8px;
  width: 34px; height: 34px;
  border: 0; border-radius: 8px;
  background: rgba(0, 0, 0, .72);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s ease;
  z-index: 3;
}
.po-pf__file-btn svg { width: 18px; height: 18px; fill: currentColor; }
.po-pf__thumbwrap:hover .po-pf__file-btn,
.po-pf__file-btn:focus-visible { opacity: 1; }
.po-pf__file-btn:hover { background: var(--pf-brand); }
.po-pf__file-btn.po-ok { background: #0f9d58; opacity: 1; }

/* Menu « 3 points » sur mes propres cartes (Mon contenu). */
/* Double classe : la règle générique « .po-pf__plus { position: relative } »,
   plus bas dans ce fichier, l'emportait et sortait le bouton de la vignette
   (il tombait sous l'image et creusait un vide avant le titre). Il se place
   sous le bouton « Ajouter à la file » pour ne pas le recouvrir. */
.po-pf__plus.po-pf__card-plus { position: absolute; top: 48px; right: 8px; z-index: 7; }
.po-pf__card-kebab {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff;
  cursor: pointer; opacity: 0; transition: opacity .12s;
}
.po-pf__thumbwrap:hover .po-pf__card-kebab,
.po-pf__card-kebab[aria-expanded="true"],
.po-pf__card-kebab:focus-visible { opacity: 1; }
.po-pf__card-kebab svg { width: 18px; height: 18px; fill: currentColor; }
.po-pf__card-plus .po-pf__plus-menu { z-index: 20; }
.po-pf__plus-form { margin: 0; width: 100%; }
@media (hover: none) { .po-pf__card-kebab { opacity: 1; } }

@media (hover: none) {
  .po-pf__file-btn { opacity: 1; }
}

/* Variante sur les cartes de suggestion « À suivre » (vignette 168px à gauche) */
.po-pf__sitemwrap { position: relative; }
.po-pf__file-btn--side {
  top: 6px; left: 6px; right: auto;
  width: 30px; height: 30px;
  border-radius: 7px;
}
.po-pf__file-btn--side svg { width: 16px; height: 16px; }
.po-pf__sitemwrap:hover .po-pf__file-btn--side,
.po-pf__file-btn--side:focus-visible { opacity: 1; }
@media (hover: none) {
  .po-pf__file-btn--side { opacity: 1; }
}

.po-pf__act.po-ok { color: #0f9d58; }

/* -- Réordonnancement des listes (glisser-déposer) --------------------------- */
.po-pf__drag {
  position: absolute; top: 8px; left: 8px;
  width: 34px; height: 34px;
  border: 0; border-radius: 8px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  opacity: 0; transition: opacity .12s ease;
  z-index: 4;
  touch-action: none;            /* le doigt glisse la carte, il ne fait pas défiler la page */
}
.po-pf__drag svg { width: 18px; height: 18px; fill: currentColor; }
.po-pf__thumbwrap:hover .po-pf__drag,
.po-pf__drag:focus-visible { opacity: 1; }
.po-pf__drag:active { cursor: grabbing; }
@media (hover: none) {
  .po-pf__drag { opacity: 1; }
}

.po-pf__grid--dragging { cursor: grabbing; }
.po-pf__card.po-dragging {
  opacity: .6;
  outline: 2px dashed var(--pf-brand);
  outline-offset: 2px;
  transform: scale(.98);
}
.po-pf__card.po-ok .po-pf__thumbwrap { box-shadow: 0 0 0 3px #0f9d58; }

.po-pf__reorder-aide {
  margin-top: 14px;
  color: var(--pf-muted);
  font-size: 13px;
}

/* -- Cloche de notifications -------------------------------------------------- */
.po-pf__cloche { position: relative; }
.po-pf__cloche-btn {
  position: relative;
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--pf-text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease;
}
.po-pf__cloche-btn:hover { background: var(--pf-surface); }
.po-pf__cloche-btn svg { width: 24px; height: 24px; fill: currentColor; }
/* Barre du haut (fond sombre) : la cloche doit rester claire et visible. */
.po-pf__top .po-pf__cloche-btn { color: var(--pf-text); }
.po-pf__top .po-pf__cloche-btn:hover { background: var(--pf-surface); }
.po-pf__cloche-pastille {
  position: absolute; top: 4px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px;
  background: var(--pf-brand); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center;
}
.po-pf__cloche-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 360px; max-width: 92vw; max-height: 70vh; overflow-y: auto;
  background: var(--pf-bg); color: var(--pf-text);
  border: 1px solid var(--pf-bord, rgba(0,0,0,.12));
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
  z-index: 60;
}
.po-pf__cloche-tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--pf-bord, rgba(0,0,0,.1));
  font-weight: 700;
}
.po-pf__cloche-lire {
  border: 0; background: transparent; color: var(--pf-brand);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.po-pf__cloche-lire:hover { text-decoration: underline; }
.po-pf__cloche-liste { display: flex; flex-direction: column; }
.po-pf__cloche-vide { padding: 24px 16px; color: var(--pf-muted); font-size: 14px; text-align: center; }
.po-pf__cloche-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 16px;
  text-decoration: none; color: var(--pf-text);
  border-bottom: 1px solid var(--pf-bord, rgba(0,0,0,.06));
  transition: background .12s ease;
}
.po-pf__cloche-item:last-child { border-bottom: 0; }
.po-pf__cloche-item:hover { background: var(--pf-surface); }
.po-pf__cloche-item.po-nonlu { background: #ffffff; box-shadow: inset 3px 0 0 var(--pf-brand, #E50914); font-weight: 600; }
.po-pf__cloche-txt { font-size: 14px; line-height: 1.35; }
.po-pf__cloche-temps { font-size: 12px; color: var(--pf-muted); }

/* -- Réponses aux commentaires ------------------------------------------------ */
.po-pf__com-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.po-pf__com-lien {
  border: 0; background: transparent; padding: 0;
  color: var(--pf-muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.po-pf__com-lien:hover { color: var(--pf-text); }
.po-pf__com-lien--sup:hover { color: var(--pf-brand); }
.po-pf__com-sup { margin: 0; }
.po-pf__com-fil {
  margin-left: 52px;
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 14px;
}
.po-pf__com--rep .po-pf__com-av img,
.po-pf__com--rep .po-pf__com-av { width: 32px; height: 32px; }
.po-pf__com-repform { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.po-pf__com-repform textarea {
  width: 100%; resize: vertical; border-radius: 10px;
  border: 1px solid var(--pf-bord, rgba(0,0,0,.2));
  padding: 8px 10px; font: inherit; background: var(--pf-bg); color: var(--pf-text);
}
.po-pf__com-repboutons { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* -- Onglets de chaîne -------------------------------------------------------- */
.po-pf__onglets {
  display: flex; gap: 6px;
  border-bottom: 1px solid var(--pf-bord, rgba(0,0,0,.12));
  margin: 6px 0 18px;
}
.po-pf__onglet {
  padding: 10px 16px;
  text-decoration: none; color: var(--pf-muted);
  font-weight: 600; font-size: 15px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.po-pf__onglet:hover { color: var(--pf-text); }
.po-pf__onglet.po-on { color: var(--pf-text); border-bottom-color: var(--pf-brand); }

/* Sous-menu d'un onglet (ex. « En direct » : Événements / Directs / Podcasts). */
.po-pf__sous { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.po-pf__sous-item {
  padding: 6px 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--pf-line, rgba(0,0,0,.14)); color: var(--pf-muted);
  font-weight: 700; font-size: 13px; background: var(--pf-surface, #fff);
}
.po-pf__sous-item:hover { color: var(--pf-text); border-color: var(--pf-muted); }
.po-pf__sous-item.po-on { color: #fff; background: var(--pf-brand, #e50914); border-color: var(--pf-brand, #e50914); }

/* -- Communauté : formulaire -------------------------------------------------- */
.po-pf__com-comm { max-width: 720px; }
.po-pf__comm-form {
  background: var(--pf-surface);
  border: 1px solid var(--pf-bord, rgba(0,0,0,.1));
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 22px;
}
.po-pf__comm-texte {
  width: 100%; resize: vertical; min-height: 70px;
  border: 1px solid var(--pf-bord, rgba(0,0,0,.2));
  border-radius: 10px; padding: 10px 12px;
  font: inherit; background: var(--pf-bg); color: var(--pf-text);
}
.po-pf__comm-outils { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.po-pf__comm-outil {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--pf-bord, rgba(0,0,0,.18));
  background: var(--pf-bg); color: var(--pf-text);
  font: inherit; font-size: 14px; cursor: pointer;
}
.po-pf__comm-outil:hover { background: var(--pf-surface); }
.po-pf__comm-outil svg { width: 18px; height: 18px; fill: currentColor; }
.po-pf__comm-nomfichier { margin-top: 10px; font-size: 13px; color: var(--pf-muted); }
.po-pf__comm-sondage { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.po-pf__comm-choix {
  border: 1px solid var(--pf-bord, rgba(0,0,0,.2));
  border-radius: 10px; padding: 8px 12px;
  font: inherit; background: var(--pf-bg); color: var(--pf-text);
}
.po-pf__comm-envoi { display: flex; justify-content: flex-end; margin-top: 14px; }

/* -- Communauté : billets ----------------------------------------------------- */
.po-pf__comm-liste { display: flex; flex-direction: column; gap: 18px; }
.po-pf__billet {
  border: 1px solid var(--pf-bord, rgba(0,0,0,.1));
  border-radius: 14px; padding: 16px;
}
.po-pf__billet-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.po-pf__billet-av img, .po-pf__billet-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.po-pf__billet-nom { font-weight: 700; }
.po-pf__billet-date { font-size: 12px; color: var(--pf-muted); }
.po-pf__billet-suppr { margin-left: auto; }
.po-pf__billet-txt { line-height: 1.5; margin-bottom: 10px; word-wrap: break-word; }
.po-pf__billet-txt a { color: var(--pf-brand); }
.po-pf__billet-img { border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.po-pf__billet-img img { width: 100%; display: block; }

.po-pf__sondage { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.po-pf__sondage-choix {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--pf-bord, rgba(0,0,0,.2));
  background: var(--pf-bg); color: var(--pf-text);
  font: inherit; text-align: left; cursor: pointer;
}
.po-pf__sondage-choix:hover { border-color: var(--pf-brand); }
.po-pf__sondage-choix.po-mien { border-color: var(--pf-brand); font-weight: 700; }
.po-pf__sondage-barre {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(26, 115, 232, .18);
  width: 0; transition: width .3s ease; z-index: 0;
}
.po-pf__sondage-txt, .po-pf__sondage-pct { position: relative; z-index: 1; }
.po-pf__sondage-pct { font-variant-numeric: tabular-nums; color: var(--pf-muted); }
.po-pf__sondage-total { font-size: 13px; color: var(--pf-muted); }

.po-pf__billet-pied { display: flex; align-items: center; gap: 12px; }
.po-pf__billet-aime {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent; color: var(--pf-muted);
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 6px 8px; border-radius: 999px;
}
.po-pf__billet-aime:hover { background: var(--pf-surface); color: var(--pf-text); }
.po-pf__billet-aime svg { width: 20px; height: 20px; fill: currentColor; }
.po-pf__billet-aime.po-on { color: var(--pf-brand); }

/* -- Mode théâtre ------------------------------------------------------------- */
.po-pf__watch.po-theater { grid-template-columns: 1fr; }
.po-pf__watch.po-theater .po-pf__stage { max-height: 82vh; }
.po-pf__watch.po-theater .po-pf__stage .player-one-wrap { max-height: 82vh; }
.po-pf__act.po-on { color: var(--pf-brand); }

/* -- Mode ambiance (lueur derrière le lecteur) -------------------------------- */
.po-pf__stage { position: relative; }
.po-pf__ambient {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity .5s ease;
  pointer-events: none;
}
.po-pf__stage.po-ambient-on { overflow: visible; background: transparent; }
.po-pf__stage.po-ambient-on .po-pf__ambient {
  opacity: .55;
  transform: scale(1.12);
  filter: blur(52px) saturate(1.7);
}
.po-pf__stage.po-ambient-on .player-one-wrap { position: relative; z-index: 1; }

/* -- Écran de fin : vignettes suggérées --------------------------------------- */
.po-pf__endsug {
  position: absolute; inset: 0; z-index: 5;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .82);
}
.po-pf__endsug.po-visible { display: flex; }
.po-pf__endsug-grille {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  padding: 18px; max-width: 92%;
}
.po-pf__endsug-carte { text-decoration: none; color: #fff; }
.po-pf__endsug-carte img { width: 100%; border-radius: 8px; display: block; aspect-ratio: 16/9; object-fit: cover; }
.po-pf__endsug-titre { display: block; margin-top: 6px; font-size: 13px; line-height: 1.3; }

/* -- Transcription ------------------------------------------------------------ */
.po-pf__transcript {
  border: 1px solid var(--pf-bord, rgba(0,0,0,.12));
  border-radius: 12px; padding: 12px; margin: 6px 0 14px;
  max-height: 340px; overflow-y: auto;
}
.po-pf__transcript-h { font-weight: 700; margin-bottom: 8px; }
.po-pf__transcript-vide { color: var(--pf-muted); font-size: 14px; }
.po-pf__transcript-ligne {
  display: flex; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 8px; border-radius: 8px; color: var(--pf-text); font: inherit;
}
.po-pf__transcript-ligne:hover { background: var(--pf-surface); }
.po-pf__transcript-t { color: var(--pf-brand); font-variant-numeric: tabular-nums; flex-shrink: 0; font-size: 13px; }
.po-pf__transcript-x { font-size: 14px; line-height: 1.4; }

/* -- Partage à un moment précis ----------------------------------------------- */
.po-pf__share-at { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 14px; }
.po-pf__share-at-time { width: 84px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--pf-bord, rgba(0,0,0,.2)); font: inherit; }

/* -- Commentaires : tri, j'aime, épingle, coeur ------------------------------- */
.po-pf__coms-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.po-pf__coms-tri { display: flex; gap: 4px; }
.po-pf__coms-tri-lien {
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
  color: var(--pf-muted); font-size: 13px; font-weight: 600;
}
.po-pf__coms-tri-lien:hover { background: var(--pf-surface); color: var(--pf-text); }
.po-pf__coms-tri-lien.po-on { background: var(--pf-text); color: var(--pf-bg); }

.po-pf__com--pin > .po-pf__com-corps { background: #ffffff; border: 1px solid var(--pf-line, #e5e5e5); border-left: 3px solid var(--pf-brand, #E50914); border-radius: 10px; padding: 8px 10px; }
.po-pf__com-badge-pin {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--pf-brand); margin-bottom: 4px;
}
.po-pf__com-badge-pin svg { width: 14px; height: 14px; fill: currentColor; }

.po-pf__com-aime {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--pf-muted); font: inherit; font-size: 13px; padding: 2px 4px; border-radius: 6px;
}
.po-pf__com-aime svg { width: 18px; height: 18px; fill: currentColor; }
.po-pf__com-aime:hover { color: var(--pf-text); }
.po-pf__com-aime.po-on { color: var(--pf-brand); }
.po-pf__com-coeur { display: inline-flex; align-items: center; color: var(--pf-brand); }
.po-pf__com-coeur svg { width: 16px; height: 16px; fill: currentColor; }
.po-pf__com-lien.po-on { color: var(--pf-brand); }

/* -- File d'attente : mélanger / boucler -------------------------------------- */
.po-pf__queue-outils { display: inline-flex; align-items: center; gap: 6px; }
.po-pf__queue-tog {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 0; border-radius: 7px;
  background: transparent; color: var(--pf-muted); cursor: pointer;
}
.po-pf__queue-tog:hover { background: var(--pf-surface); color: var(--pf-text); }
.po-pf__queue-tog svg { width: 18px; height: 18px; fill: currentColor; }
.po-pf__queue-tog.po-on { color: var(--pf-brand); }

.po-chat__emote { height: 20px; width: auto; vertical-align: -4px; margin: 0 1px; }

/* -- Aperçu en direct dans le formulaire de publication ----------------------- */
.po-vid-apercu {
  display: flex; gap: 12px; align-items: center;
  margin: 4px 0 8px; padding: 8px;
  border: 1px solid var(--pf-bord, rgba(0,0,0,.12)); border-radius: 10px;
  background: var(--pf-surface);
}
.po-vid-apercu img { width: 160px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; background: #000; flex-shrink: 0; }
.po-vid-apercu__titre { font-size: 14px; font-weight: 600; line-height: 1.3; }

/* -- Transfert / réclamation de vidéo ----------------------------------------- */
.po-pf__attr {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin: 4px 0 14px; padding: 12px 14px;
  border: 1px solid var(--pf-bord, rgba(0,0,0,.12)); border-radius: 12px;
  background: var(--pf-surface);
}
.po-pf__reclam-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.po-pf__reclam-cert { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pf-muted); }
.po-pf__reclam-attente { color: var(--pf-muted); cursor: default; }
.po-pf__transfert-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.po-pf__transfert-lbl { font-size: 13px; font-weight: 600; }
.po-pf__transfert-in {
  padding: 8px 10px; border-radius: 8px; font: inherit;
  border: 1px solid var(--pf-bord, rgba(0,0,0,.2)); min-width: 260px; width: 100%;
  background: var(--pf-bg); color: var(--pf-text);
}
/* Recherche dynamique d'artiste : liste déroulante de résultats. */
.po-pf__transfert-box { position: relative; min-width: 260px; }
.po-pf__transfert-res {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--pf-bg); color: var(--pf-text);
  border: 1px solid var(--pf-bord, rgba(0,0,0,.2)); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); overflow: hidden; max-height: 320px; overflow-y: auto;
}
.po-pf__transfert-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--pf-text); font: inherit;
}
.po-pf__transfert-item:hover { background: var(--pf-surface); }
.po-pf__transfert-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.po-pf__transfert-item-txt { display: flex; flex-direction: column; line-height: 1.25; }
.po-pf__transfert-item-txt small { color: var(--pf-muted); font-size: 12px; }
.po-pf__transfert-vide { padding: 12px; color: var(--pf-muted); font-size: 13px; text-align: center; }

.po-pf__reclam-liste { display: flex; flex-direction: column; gap: 12px; }
.po-pf__reclam {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--pf-bord, rgba(0,0,0,.12)); border-radius: 12px; padding: 14px;
}
.po-pf__reclam-titre { font-weight: 700; text-decoration: none; color: var(--pf-text); }
.po-pf__reclam-titre:hover { color: var(--pf-brand); }
.po-pf__reclam-meta { font-size: 13px; color: var(--pf-muted); margin-top: 4px; }
.po-pf__reclam-actions { display: flex; gap: 10px; }
.po-pf__reclam-actions form { margin: 0; }

.po-pf__moi-pastille {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--pf-brand); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* -- Import en lot ------------------------------------------------------------ */
.po-pf__import-intro { color: var(--pf-text); margin-bottom: 6px; }
.po-pf__import-note { color: var(--pf-muted); font-size: 14px; margin-bottom: 14px; }
.po-pf__import-zone {
  width: 100%; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.6; padding: 12px;
  border: 1px solid var(--pf-bord, rgba(0,0,0,.2)); border-radius: 10px;
  background: var(--pf-bg); color: var(--pf-text);
}
.po-pf__import-cert { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 14px; color: var(--pf-muted); }
.po-pf__import-barre { display: flex; align-items: center; gap: 14px; }
.po-pf__import-progres { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--pf-muted); }
.po-pf__import-journal {
  margin-top: 16px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--pf-bord, rgba(0,0,0,.12)); border-radius: 10px; padding: 8px;
}
.po-pf__import-ent {
  font-size: 13px; padding: 6px 8px; border-radius: 6px; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.po-pf__import-ent.po-st-cree     { background: rgba(15,157,88,.12); color: #0b7a43; }
.po-pf__import-ent.po-st-doublon  { background: rgba(0,0,0,.05); color: var(--pf-muted); }
.po-pf__import-ent.po-st-invalide,
.po-pf__import-ent.po-st-erreur   { background: rgba(229,57,53,.12); color: #b3261e; }

.po-pf__import-cat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; font-size: 14px; }
.po-pf__import-cat select { max-width: 260px; }

/* -- Shorts : éditeur --------------------------------------------------------- */
.po-short-ed__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 820px) { .po-short-ed__grid { grid-template-columns: 1fr; } }
.po-short-ed__preview { margin: 10px 0; border-radius: 12px; overflow: hidden; background: #000; }
.po-short-ed__vid { width: 100%; display: block; max-height: 46vh; }
.po-short-ed__note { color: var(--pf-muted); font-size: 14px; padding: 10px; background: var(--pf-surface); border-radius: 10px; }
.po-short-ed__temps { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.po-short-ed__t { width: 80px; padding: 8px; border-radius: 8px; border: 1px solid var(--pf-bord, rgba(0,0,0,.2)); font: inherit; text-align: center; background: var(--pf-bg); color: var(--pf-text); }
.po-short-ed__barre { height: 8px; background: var(--pf-surface); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.po-short-ed__barre span { display: block; height: 100%; background: var(--pf-brand); width: 0; transition: width .2s ease; }
.po-short-ed__total { font-size: 13px; color: var(--pf-muted); margin-bottom: 10px; }
.po-short-ed__segs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.po-short-ed__seg { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--pf-bord, rgba(0,0,0,.12)); border-radius: 8px; font-size: 13px; }
.po-short-ed__seg-lbl { flex: 1; }
.po-short-ed__mini { width: 26px; height: 26px; border: 0; border-radius: 6px; background: var(--pf-surface); cursor: pointer; color: var(--pf-text); }
.po-short-ed__mini:hover { background: var(--pf-brand); color: #fff; }
.po-short-ed__msg { margin-top: 10px; padding: 8px 10px; border-radius: 8px; }
.po-short-ed__msg.po-ok { background: rgba(15,157,88,.12); color: #0b7a43; }
.po-short-ed__msg.po-no { background: rgba(229,57,53,.12); color: #b3261e; }
.po-short-ed__liste { display: flex; flex-direction: column; gap: 8px; }
.po-short-ed__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--pf-bord, rgba(0,0,0,.12)); border-radius: 8px; }
.po-short-ed__item span { flex: 1; font-size: 14px; }

/* -- Shorts : fil de lecture -------------------------------------------------- */
.po-shorts-feed { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.po-short { position: relative; width: 100%; max-width: 420px; background: #000; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; }
.po-short--v { aspect-ratio: 9/16; max-width: 340px; }
.po-short__scene, .po-short__scene video, .po-short__scene iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.po-short__logo { position: absolute; top: 10px; right: 10px; z-index: 4; max-width: 38%; pointer-events: none; line-height: 0; }
.po-short__logo img { display: block; max-height: 34px; max-width: 100%; width: auto; height: auto; opacity: .92; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.po-short__info { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; }
.po-short__titre { display: block; font-weight: 700; }
.po-short__chan { color: #fff; opacity: .85; text-decoration: none; font-size: 13px; }

/* -- Badge d'âge (classification) --------------------------------------------- */
.po-pf__age {
  display: inline-block; vertical-align: middle;
  font-size: 12px; font-weight: 800; line-height: 1;
  padding: 3px 6px; border-radius: 5px;
  background: #222; color: #fff;
}
.po-pf__thumbwrap .po-pf__age { position: absolute; left: 8px; bottom: 8px; z-index: 3; }
.po-pf__age--g   { background: #0f9d58; }
.po-pf__age--13  { background: #f59e0b; color: #222; }
.po-pf__age--16  { background: #e58a00; }
.po-pf__age--18  { background: #d32f2f; }
.po-pf__title .po-pf__age { font-size: 14px; }

/* -- Bloc « Infos du film » dans le formulaire -------------------------------- */
.po-ev-form__sec { font-weight: 700; margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--pf-bord, rgba(0,0,0,.12)); }

/* -- Panneau fiche du film (page de visionnement) ----------------------------- */
.po-pf__film { display: flex; gap: 18px; margin: 14px 0; padding: 14px; border: 1px solid var(--pf-bord, rgba(0,0,0,.12)); border-radius: 14px; }
.po-pf__film-affiche img { width: 150px; border-radius: 10px; display: block; }
.po-pf__film-infos { flex: 1; min-width: 0; }
.po-pf__film-h { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.po-pf__film-ligne { display: flex; gap: 10px; padding: 4px 0; font-size: 14px; }
.po-pf__film-lbl { width: 120px; color: var(--pf-muted); flex-shrink: 0; }
.po-pf__film-val { font-weight: 600; }
.po-pf__film-synopsis { margin-top: 10px; line-height: 1.5; }

/* -- Note 5 étoiles ----------------------------------------------------------- */
.po-pf__note { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.po-pf__note-etoiles { display: inline-flex; }
.po-pf__note-e { background: transparent; border: 0; cursor: pointer; padding: 2px; color: var(--pf-muted); }
.po-pf__note-e svg { width: 24px; height: 24px; fill: currentColor; }
.po-pf__note-e.po-on { color: var(--ru-accent,#E50914); }
.po-pf__note-txt { font-size: 14px; color: var(--pf-muted); }
.po-pf__note-txt [data-po-note-moy] { font-weight: 700; color: var(--pf-text); }

/* -- Gestionnaire de catégories ----------------------------------------------- */
.po-cat__creer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 22px; }
.po-cat__creer .po-ev-form__in { width: auto; flex: 1; min-width: 180px; }
.po-cat__section { margin-bottom: 18px; }
.po-cat__enfant { margin-left: 26px; }
.po-cat__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 0; }
.po-cat__ligne--sec { font-weight: 700; border-bottom: 1px solid var(--pf-bord, rgba(0,0,0,.12)); }
.po-cat__ren { display: flex; align-items: center; gap: 8px; margin: 0; }
.po-cat__ren .po-ev-form__in { width: auto; min-width: 160px; }
.po-cat__nb { font-size: 12px; color: var(--pf-muted); min-width: 22px; text-align: center; }
.po-cat__protege { font-size: 12px; color: var(--pf-muted); }
.po-cat form { margin: 0; }

/* -- Assistant à étapes (dépôt de vidéo) -------------------------------------- */
.po-wz__barre { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0 4px; }
.po-wz__etape { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; text-align: center; }
.po-wz__etape:not(:last-child)::after {
  content: ""; position: absolute; top: 16px; left: 50%; width: 100%; height: 2px;
  background: var(--pf-bord, rgba(0,0,0,.15)); z-index: 0;
}
.po-wz__etape.po-done:not(:last-child)::after { background: var(--pf-brand); }
.po-wz__pastille {
  position: relative; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pf-bg); color: var(--pf-muted);
  border: 2px solid var(--pf-bord, rgba(0,0,0,.2));
  font-weight: 700; font-size: 14px;
}
.po-wz__etape.po-on .po-wz__pastille,
.po-wz__etape.po-done .po-wz__pastille { background: var(--pf-brand); color: #fff; border-color: var(--pf-brand); }
.po-wz__etitre { font-size: 13px; color: var(--pf-muted); font-weight: 600; }
.po-wz__etape.po-on .po-wz__etitre { color: var(--pf-text); }
.po-wz__compte { text-align: center; font-size: 13px; color: var(--pf-muted); margin-bottom: 16px; }
.po-wz__panel { display: flex; flex-direction: column; }
.po-wz__nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.po-wz__espace { flex: 1; }

/* -- Dépôt : écran de choix (lien / téléversement) --------------------------- */
.po-depot-choix__intro { text-align: center; font-size: 15px; color: var(--pf-text); margin: 8px 0 18px; }
.po-depot-choix__opts { display: flex; gap: 14px; flex-wrap: wrap; }
.po-depot-choix__opt {
  flex: 1; min-width: 200px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 24px 18px; cursor: pointer;
  background: var(--pf-bg); color: var(--pf-text);
  border: 2px solid var(--pf-bord, rgba(0,0,0,.15)); border-radius: 14px;
  transition: border-color .15s, background .15s, transform .1s;
}
.po-depot-choix__opt:hover { border-color: var(--pf-brand); background: rgba(229, 9, 20, .03); transform: translateY(-2px); }
.po-depot-choix__opt svg { fill: var(--pf-brand); }
.po-depot-choix__opt-t { font-weight: 700; font-size: 16px; }
.po-depot-choix__opt-s { font-size: 12.5px; color: var(--pf-muted); }
.po-depot-retour {
  background: none; border: 0; cursor: pointer; padding: 4px 8px; margin-right: auto;
  color: var(--pf-muted); font-size: 13px; font-weight: 600;
}
.po-depot-retour:hover { color: var(--pf-brand); }
.po-vid-upload__err { color: var(--pf-brand); font-weight: 600; }

/* Assistant : forcer le masquage des boutons de navigation cachés.
   .po-pf__creer impose display:inline-flex, ce qui écrasait [hidden]. */
.po-wz__nav [hidden] { display: none !important; }

/* Shorts : aide sur le format des temps (une ligne, sous les champs). */
.po-short-ed__aide { font-size: 12.5px; color: var(--pf-muted); margin: 8px 0 0; line-height: 1.4; }

/* Dépôt : écran de choix de la section (dropdown + Continuer). */
.po-depot-choix__select { max-width: 420px; margin: 0 auto; display: block; }
.po-depot-choix__go { display: flex; justify-content: center; margin-top: 18px; }

/* -- Page « Mon compte » : onglets par catégorie ----------------------------- */
.po-pf__moi-compte { display: flex; align-items: center; gap: 8px; }
.po-pf__moi-compte svg { width: 18px; height: 18px; fill: currentColor; }
.po-pf__compte-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; border-bottom: 1px solid var(--pf-line, rgba(0,0,0,.1)); padding-bottom: 12px; }
.po-pf__compte-tab {
  border: 1px solid var(--pf-bord, rgba(0,0,0,.15)); background: var(--pf-bg); color: var(--pf-muted);
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 650; font-size: 14px;
}
.po-pf__compte-tab:hover { color: var(--pf-text); }
.po-pf__compte-tab.po-on { background: var(--pf-brand); color: #fff; border-color: var(--pf-brand); }
/* Page « Mon compte » : conteneur propre (ne pas confondre avec .po-pf__compte,
   qui est le coin compte de l'en-tête et pousse tout à droite). */
.po-pf__moncompte { max-width: 760px; }

.po-pf__compte-carte {
  background: var(--pf-bg); border: 1px solid var(--pf-line, rgba(0,0,0,.1));
  border-radius: 14px; padding: 22px;
}
.po-pf__compte-liens { display: flex; flex-direction: column; gap: 4px; }
.po-pf__compte-liens a {
  display: block; padding: 12px 14px; border-radius: 10px;
  color: var(--pf-text); text-decoration: none; font-weight: 600;
}
.po-pf__compte-liens a:hover { background: var(--pf-surface); }

/* Tuiles d'accès rapide (Mon contenu, Administration) */
.po-pf__compte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.po-pf__compte-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border-radius: 12px;
  border: 1px solid var(--pf-line, rgba(0,0,0,.1));
  background: var(--pf-bg); color: var(--pf-text);
  text-decoration: none; font-weight: 650; font-size: 14px;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.po-pf__compte-tile:hover {
  background: var(--pf-surface);
  border-color: var(--pf-brand);
  transform: translateY(-1px);
}
.po-pf__compte-tile svg { width: 22px; height: 22px; fill: var(--pf-brand); flex-shrink: 0; }
.po-pf__compte-tile span { line-height: 1.25; }

/* Choix de la vignette au téléversement : images captées dans la vidéo. */
.po-up-vignettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.po-up-vignette {
  padding: 0; border: 2px solid transparent; border-radius: 8px;
  background: #000; cursor: pointer; overflow: hidden; line-height: 0;
  width: 128px; aspect-ratio: 16 / 9; flex-shrink: 0;
}
.po-up-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-up-vignette:hover { border-color: var(--pf-muted, #888); }
.po-up-vignette.po-on { border-color: var(--pf-brand, #e50914); }

/* Bandeau de confirmation sur « Mon compte » */
.po-pf__notice {
  margin: 0 0 16px; padding: 11px 14px; border-radius: 10px;
  background: rgba(46,160,67,.12); color: #1a7f37;
  border: 1px solid rgba(46,160,67,.35); font-weight: 600; font-size: 14px;
}
.po-pf__notice--err {
  background: rgba(229,9,20,.10); color: #b3261e; border-color: rgba(229,9,20,.35);
}

/* Bouton « Téléverser une photo » (champ fichier déguisé) */
.po-pf__moi-fichier {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; margin: 2px 0 8px;
  border: 1px dashed var(--pf-bord, rgba(0,0,0,.25)); border-radius: 10px;
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--pf-text);
  background: var(--pf-bg);
}
.po-pf__moi-fichier:hover { border-color: var(--pf-brand, #e50914); color: var(--pf-brand, #e50914); }
.po-pf__moi-fichier input { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Panneau admin sur la page de chaîne : modifier le profil d'un autre compte */
.po-pf__adminprofil {
  margin: 4px 0 20px; max-width: 620px; overflow: hidden;
  border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 12px; background: var(--pf-bg);
}
.po-pf__adminprofil > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14px;
  color: var(--pf-brand, #e50914); list-style: none;
}
.po-pf__adminprofil > summary::-webkit-details-marker { display: none; }
.po-pf__adminprofil > summary::before { content: '\2699  '; }
.po-pf__adminprofil[open] > summary { border-bottom: 1px solid var(--pf-line, rgba(0,0,0,.12)); }
.po-pf__adminprofil-in { padding: 16px; }

/* Bouton « Modifier » que l'admin voit sur chaque carte vidéo */
.po-pf__card-editadmin { margin-top: 8px; font-size: 13px; }
/* Chaîne : Modifier et Supprimer visibles sous chaque vidéo du propriétaire */
.po-pf__card-gestion { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.po-pf__card-gestion .po-pf__card-editadmin { margin-top: 0; }
.po-pf__card-gestion-form { margin: 0; display: contents; }
.po-pf__card-gestion .po-pf__act { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; font-size: 13px; }
.po-pf__card-gestion .po-pf__act svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.po-pf__card-suppr { color: #E50914; }
.po-pf__card-suppr:hover, .po-pf__card-suppr:focus-visible { background: #E50914; color: #fff; }

/* -- Régie multicaméra (V3) ----------------------------------------------- */
/* -- Régie multicaméra : un vrai tableau de régie -------------------------- */
.po-regie { margin-top: 8px; }
.po-regie--pilote { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 1100px) {
  .po-regie { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
}
.po-regie__stage { min-width: 0; }
.po-regie__side { min-width: 0; }

/* Le « programme » : l'écran principal, plafonné pour toujours voir le bas. */
.po-regie__prog { position: relative; }
.po-regie__prog-tag {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  background: var(--pf-brand, #e50914); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px;
  pointer-events: none;
}
.po-regie__scene {
  position: relative; width: 100%; margin: 0 auto;
  aspect-ratio: 16 / 9; max-height: 60vh;
  background: #000; border-radius: 12px; overflow: hidden;
  display: grid; gap: 5px; padding: 5px;
}
.po-regie__cam {
  position: relative; background: #050505; border-radius: 8px; overflow: hidden;
  cursor: pointer; min-width: 0; min-height: 0; display: none;
  border: 2px solid transparent; transition: border-color .15s ease;
  /* Couche GPU stable : bords nets, pas de scintillement au joint des vignettes. */
  transform: translateZ(0); backface-visibility: hidden;
}
.po-regie__cam.is-shown { display: block; }
/* Caméra « préchauffée » : montée hors écran mais bien rendue, donc elle joue
   déjà (un iframe en display:none ne jouerait pas). Passer en ondes ne fait que
   la révéler : bascule immédiate, sans image fixe ni rechargement. */
.po-regie__cam.po-regie__cam--warm {
  display: block !important;
  position: absolute !important;
  left: -99999px !important; top: 0 !important;
  width: 320px !important; height: 180px !important;
  opacity: .01 !important; pointer-events: none !important; z-index: -1 !important;
}
.po-regie__media {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
  /* Chaque flux est promu sur sa propre couche GPU, avec des bords alignes au
     pixel : cela supprime le scintillement clair au joint entre les vignettes
     que la lecture video provoquait a un zoom autre que 100 %. */
  transform: translateZ(0); backface-visibility: hidden;
}
iframe.po-regie__media { object-fit: fill; }
/* Case « En ondes bientôt » (streamer annoncé sans lien) : logo + message,
   sur fond sombre, dans le programme comme dans la préparation. */
.po-regie__soon {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(circle at 50% 40%, #1b1f27, #050505);
  color: #fff; text-align: center; padding: 10px;
}
.po-regie__soon-logo { max-width: 42%; max-height: 45%; object-fit: contain; opacity: .95; }
.po-regie__soon-txt {
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ru-accent,#E50914);
}
.po-regie__vig-ecran--soon {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #1b1f27, #050505);
}
.po-regie__vig-soon-logo { max-width: 55%; max-height: 55%; object-fit: contain; opacity: .9; }
.po-regie__vig.is-soon .po-regie__vig-off { color: #f59e0b; }

/* Source de secours : voile plein cadre par-dessus le programme (le couvre). */
.po-regie__secours { position: absolute; inset: 0; z-index: 6; background: #000; }
.po-regie__secours .po-regie__media { width: 100%; height: 100%; }
.po-regie__secours-btn {
  width: 100%; padding: 9px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid #2f333b; background: #1b1f27; color: #fff; font-weight: 700; font-size: 13px;
}
.po-regie__secours-btn.is-on { background: var(--pf-brand, #e50914); border-color: var(--pf-brand, #e50914); }
/* Repli affiché quand la régie n'a pas assez de caméras. */
.po-regie__secours-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px; color: #fff; background: var(--pf-brand, #e50914); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.po-regie__cam:hover { border-color: var(--pf-muted, #888); }
.po-regie__cam.is-primary { border-color: var(--pf-brand, #e50914); }
/* Logo de marque en haut à droite de chaque case de la régie. */
.po-regie__cam-logo {
  position: absolute; top: 6px; right: 6px; z-index: 6;
  height: 20px; width: auto; max-width: 45%;
  object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
.po-regie__nom {
  position: absolute; left: 8px; bottom: 8px; z-index: 3;
  background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px; max-width: 72%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  /* Étiquette purement décorative : les clics doivent atteindre les commandes
     du lecteur (son, lecture) qui sont dessous. */
  pointer-events: none;
}
/* On remonte le nom au-dessus de la barre de commandes Twitch (bouton du son)
   dans toutes les compositions à grande case : solo, duo, éclair, trio, quad et
   promo. Seule la mosaïque garde le nom en bas, ses cases étant trop petites. */
.po-regie__scene.lay-solo .po-regie__nom,
.po-regie__scene.lay-duo .po-regie__nom,
.po-regie__scene.lay-focus .po-regie__nom,
.po-regie__scene.lay-trio .po-regie__nom,
.po-regie__scene.lay-quad .po-regie__nom,
.po-regie__scene.lay-promo .po-regie__nom { bottom: 46px; }
.po-regie__badge {
  position: absolute; top: 8px; left: 8px; z-index: 3; display: none;
  background: var(--pf-brand, #e50914); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px;
}
.po-regie__cam.is-primary .po-regie__badge { display: block; }

/* Numéro d'écran + écran ciblé (où le prochain envoi se pose). */
.po-regie__ecran-num {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  background: rgba(0,0,0,.62); color: #fff; font-size: 13px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.po-regie--pilote .po-regie__cam { cursor: pointer; }
/* Surbrillance de l'ecran cible / du depot : ombre INTERNE (inset) pour qu'elle
   reste DANS la vignette et ne deborde jamais dans l'espace entre les cases.
   Avant, l'ombre exterieure (0 0 0 3px) bavait dans le joint noir de la grille
   et donnait une ligne jaune qui scintillait sur les video en lecture, surtout
   a un zoom autre que 100 %. */
.po-regie__cam.is-cible { border-color: #f59e0b; box-shadow: inset 0 0 0 3px rgba(245,158,11,.85); }
.po-regie__cam.is-cible .po-regie__ecran-num { background: #f59e0b; color: #111; }
.po-regie__cam.is-drop { border-color: #22c55e; box-shadow: inset 0 0 0 3px rgba(34,197,94,.9); }
.po-regie__cam.is-drop::after {
  content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(34,197,94,.18);
  border: 2px dashed rgba(34,197,94,.9); border-radius: 8px; pointer-events: none;
}

/* La case Promo. */
.po-regie__promo {
  position: relative; background: #0a0a0a; border-radius: 8px; overflow: hidden;
  display: none; align-items: center; justify-content: center; min-width: 0; min-height: 0;
}
.po-regie__promo.is-shown { display: flex; }
.po-regie__promo img { max-width: 76%; max-height: 76%; object-fit: contain; }

/* -- Les compositions -- */
.po-regie__scene.lay-solo { grid-template-columns: 1fr; }
.po-regie__scene.lay-duo  { grid-template-columns: 1fr 1fr; }

/* Grand + 3 : un grand angle a gauche, trois petits empiles a droite. */
.po-regie__scene.lay-focus { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); }
.po-regie__scene.lay-focus .po-regie__cam.is-primary { grid-column: 1; grid-row: 1 / span 3; }

/* Trio : un grand angle + deux petits en colonne. */
.po-regie__scene.lay-trio { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.po-regie__scene.lay-trio .po-regie__cam.is-primary { grid-column: 1; grid-row: 1 / span 2; }

/* Quad : quatre angles en carré. */
.po-regie__scene.lay-quad { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* Mosaïque / Promo : tous les angles ensemble. */
.po-regie__scene.lay-mosaique,
.po-regie__scene.lay-promo {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

/* -- Effets de transition -- */
@keyframes po-rg-fondu  { from { opacity: .15; } to { opacity: 1; } }
@keyframes po-rg-glisse { from { opacity: .3; transform: translateX(3%); } to { opacity: 1; transform: translateX(0); } }
.po-regie__scene[data-trans="fondu"].is-fx  { animation: po-rg-fondu .4s ease; }
.po-regie__scene[data-trans="glisse"].is-fx { animation: po-rg-glisse .4s ease; }

/* -- Le pupitre de régie -- */
.po-regie__board {
  margin-top: 14px; background: #14161a; border: 1px solid #262a31; border-radius: 14px;
  padding: 14px 16px 16px; display: grid; gap: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
@media (min-width: 720px) {
  .po-regie__board { grid-template-columns: 1fr 1fr; }
  .po-regie__grp--compo { grid-column: 1 / -1; }
  .po-regie__grp--promo { grid-column: 1 / -1; }
  .po-regie__grp--multi { grid-column: 1 / -1; }
  /* Le panneau Bandeau prend toute la largeur pour tenir sur deux colonnes
     internes (Principal à gauche, fiches en attente à droite). */
  .po-regie__grp--band  { grid-column: 1 / -1; }
}
.po-regie__grp-aide { font-size: 12px; color: #8b93a1; line-height: 1.5; margin-top: 4px; }
.po-regie__grp { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.po-regie__grp-t {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #8b93a1;
}
.po-regie__layouts { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 4px; min-width: 0; }
.po-regie__layouts .po-regie__lay { flex: 0 0 auto; min-width: 84px; }
/* Dans la disposition Test 1, le panneau de droite est etroit : les compositions
   passent sur plusieurs rangees et restent TOUTES visibles, sans barre de
   defilement horizontale. */
.po-regie--t1 .po-regie__layouts { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
.po-regie--t1 .po-regie__layouts .po-regie__lay { flex: 1 1 calc(33.333% - 6px); min-width: 0; }
.po-regie__lay {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: #1c1f26; color: #e7eaf0; border: 1px solid #2c313a; border-radius: 10px;
  padding: 9px 6px; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.po-regie__lay:hover { border-color: #47506080; background: #212530; }
.po-regie__lay:active { transform: translateY(1px); }
.po-regie__lay svg { width: 34px; height: 22px; }
.po-regie__lay svg rect, .po-regie__lay svg path[fill] { fill: #6b7482; }
.po-regie__lay.is-on { border-color: var(--pf-brand, #e50914); background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); }
.po-regie__lay.is-on svg rect { fill: #FF4D3D; }
.po-regie__pistes { display: flex; flex-wrap: wrap; gap: 8px; }
.po-regie__piste {
  display: inline-flex; align-items: center; gap: 8px;
  background: #1c1f26; color: #e7eaf0; border: 1px solid #2c313a; border-radius: 999px;
  padding: 7px 13px 7px 8px; font-size: 13px; font-weight: 600; cursor: pointer; max-width: 220px;
  transition: border-color .15s ease, background .15s ease;
}
.po-regie__piste span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-regie__piste b {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%; background: #2c313a; color: #cfd5df; font-size: 12px;
}
.po-regie__piste:hover { border-color: #47506080; background: #212530; }
.po-regie__piste.is-on { border-color: var(--pf-brand, #e50914); background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); }
.po-regie__piste.is-on b { background: var(--pf-brand, #e50914); color: #fff; }

/* -- Le multiview : un moniteur en direct par caméra -- */
/* La grille de caméras : des vignettes FIXES (aucune vidéo jouée), donc
   ça tient avec 4 comme avec 40 caméras. Un clic prépare, ENVOYER met en ondes. */
.po-regie__multi {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px;
  max-height: min(58vh, 520px); overflow-y: auto; padding-right: 4px;
  overscroll-behavior: contain;
}
.po-regie__vig {
  position: relative; background: #0a0c10; border: 2px solid #2c313a; border-radius: 10px;
  overflow: hidden; cursor: pointer; user-select: none;
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.po-regie__vig-ecran { position: relative; aspect-ratio: 16 / 9; background: #0f1216; }
.po-regie__vig-ecran img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-regie__vig-ecran--vide { background: linear-gradient(135deg, #171a20, #0d0f13); }
.po-regie__vig-num {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.po-regie__vig-barre {
  padding: 6px 8px; background: #14161a; color: #e7eaf0; font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.po-regie__vig-live {
  position: absolute; top: 6px; left: 6px; z-index: 2; display: none;
  background: var(--pf-brand, #e50914); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .05em; padding: 2px 7px; border-radius: 5px;
}
.po-regie__vig:hover { border-color: #47506080; }
.po-regie__vig.is-apercu { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
.po-regie__vig.is-programme { border-color: var(--pf-brand, #e50914); box-shadow: 0 0 0 2px rgba(229,9,20,.25); }
.po-regie__vig.is-programme .po-regie__vig-live { display: block; }
.po-regie__vig.is-programme .po-regie__vig-barre { background: #241115; color: #fff; }
.po-regie__vig.is-drag { opacity: .5; }
.po-regie__vig.is-over { border-color: #f59e0b; }

/* Écrans Programme + Préparation côte à côte, comme une vraie régie. */
.po-regie__screens { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) {
  .po-regie__screens { grid-template-columns: 1fr minmax(240px, 340px); align-items: start; }
  /* Spectateur (pas le réalisateur) : il n'y a pas d'écran de « Préparation »,
     donc le programme doit prendre TOUTE la largeur. Avant, la grille gardait
     une colonne vide de 240-340px à droite et le lecteur paraissait petit. */
  .po-regie:not(.po-regie--pilote) .po-regie__screens { grid-template-columns: 1fr; }
}
/* Chez le spectateur, on laisse le programme respirer plus haut. */
.po-regie:not(.po-regie--pilote) .po-regie__scene { max-height: 78vh; }
.po-regie__preview { display: flex; flex-direction: column; gap: 8px; }
.po-regie__pv-tag {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #22c55e;
}
.po-regie__pv-ecran {
  position: relative; aspect-ratio: 16 / 9; background: #000; border: 2px solid #22c55e;
  border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.po-regie__pv-media { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.po-regie__pv-ecran iframe.po-regie__pv-media { object-fit: fill; }
.po-regie__pv-vide { color: #6b7482; font-size: 13px; padding: 0 12px; text-align: center; }
.po-regie__pv-nom {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px; max-width: 80%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.po-regie__take {
  border: 0; border-radius: 10px; padding: 12px 14px; cursor: pointer;
  background: var(--pf-brand, #e50914); color: #fff; font-size: 14px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  transition: filter .15s ease, transform .1s ease;
}
.po-regie__take:hover { filter: brightness(1.08); }
.po-regie__take:active { transform: translateY(1px); }

/* Entête + compteur de spectateurs. Marge sous l'entête pour que la bande
   d'invitation (Test 1) ne colle pas au rond de l'avatar. */
.po-regie__entete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; }
/* Qui diffuse : avatar + nom de la chaîne + nom de la régie, cliquable. */
.po-regie__auteur { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.po-regie__auteur-av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: var(--pf-surface); }
.po-regie__auteur-txt { display: flex; flex-direction: column; min-width: 0; }
.po-regie__auteur-nom { font-size: 18px; font-weight: 800; color: var(--pf-text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-regie__auteur-sous { font-size: 13px; color: var(--pf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-regie__auteur:hover .po-regie__auteur-nom { color: var(--pf-brand, #e50914); }
.po-regie__vlive {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--pf-surface); border: 1px solid var(--pf-line, rgba(0,0,0,.12));
  border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; color: var(--pf-text);
}
.po-regie__vlive-mot { color: var(--pf-muted); font-weight: 600; }

/* Écran d'attente par-dessus le programme. */
.po-regie__attente {
  position: absolute; inset: 0; z-index: 6; border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, #1a1d24, #050608);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.po-regie__attente[hidden] { display: none; }
.po-regie__attente-logo { max-width: 46%; max-height: 42%; object-fit: contain; }
.po-regie__attente-msg { color: #e7eaf0; font-size: 18px; font-weight: 700; letter-spacing: .01em; text-align: center; padding: 0 16px; }
/* Compte à rebours d'avant-show : grande carte animée sur l'écran d'attente. */
.po-regie__cd { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.po-regie__cd[hidden] { display: none; }
.po-regie__cd-lbl { color: #f59e0b; font-size: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.po-regie__cd-time {
  color: #fff; font-weight: 800; line-height: 1; letter-spacing: .02em;
  font-size: clamp(44px, 12vw, 108px); font-variant-numeric: tabular-nums;
  text-shadow: 0 6px 30px rgba(0,0,0,.55); animation: po-cd-pulse 1s ease-in-out infinite;
}
@keyframes po-cd-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .po-regie__cd-time { animation: none; } }

/* Bouton écran d'attente (console). */
.po-regie__standby {
  display: inline-flex; align-items: center; gap: 9px;
  background: #1c1f26; color: #e7eaf0; border: 1px solid #2c313a; border-radius: 10px;
  padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.po-regie__standby:hover { border-color: #475060; }
.po-regie__standby-dot { width: 10px; height: 10px; border-radius: 50%; background: #4a5568; flex: none; }
.po-regie__standby.is-on { border-color: #ffb020; background: #1f1f1f; color: #fff; }
.po-regie__standby.is-on .po-regie__standby-dot { background: #ffb020; box-shadow: 0 0 0 3px rgba(255,176,32,.25); }

/* -- Transition animée (stinger) : habillage plein cadre par-dessus le
   programme, déclenché en direct par le pilote. Balayage d'entrée, tenue
   brève, balayage de sortie. Respecte prefers-reduced-motion. --------------- */
.po-regie__stinger {
  position: absolute; inset: 0; z-index: 8; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(120deg, #E50914 0%, #12141a 60%, #050608 100%);
  pointer-events: none;
}
.po-regie__stinger[hidden] { display: none; }
.po-regie__stinger-logo { max-width: 52%; max-height: 46%; object-fit: contain; filter: drop-shadow(0 8px 30px rgba(0,0,0,.5)); }
.po-regie__stinger.is-actif { animation: po-stinger-voile 1.6s cubic-bezier(.7,0,.3,1) both; }
.po-regie__stinger.is-actif .po-regie__stinger-logo { animation: po-stinger-logo 1.6s cubic-bezier(.7,0,.3,1) both; }
@keyframes po-stinger-voile {
  0%   { clip-path: inset(0 100% 0 0); }
  22%  { clip-path: inset(0 0 0 0); }
  70%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}
@keyframes po-stinger-logo {
  0%   { opacity: 0; transform: translateX(40px) scale(.9); }
  26%  { opacity: 1; transform: translateX(0) scale(1); }
  70%  { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-40px) scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .po-regie__stinger.is-actif,
  .po-regie__stinger.is-actif .po-regie__stinger-logo { animation: po-stinger-fade 1.6s ease both; }
  @keyframes po-stinger-fade { 0% { opacity: 0; } 15%,80% { opacity: 1; } 100% { opacity: 0; } }
}

/* Bouton « Lancer la transition » (console). */
.po-regie__stinger-btn {
  background: #1a1a1a; color: #ffffff; border: 1px solid #5c0a0e; border-radius: 10px;
  padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.po-regie__stinger-btn:hover { border-color: #E50914; background: var(--ru-accent-fonce,#c20811); color: var(--ru-sur-accent,#FFFFFF); }
.po-regie__stinger-btn:active { transform: translateY(1px); }

/* Banque de sons : une grille de petits boutons de réaction. */
.po-regie__sons { display: flex; flex-wrap: wrap; gap: 7px; }
.po-regie__son {
  background: #17242a; color: #d5eef5; border: 1px solid #274852; border-radius: 9px;
  padding: 8px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.po-regie__son:hover { border-color: #2fb6d6; background: #1c2f37; color: #fff; }
.po-regie__son:active { transform: translateY(1px); background: #24424c; }

/* Caméra hors ligne dans la grille. */
.po-regie__vig.is-offline { opacity: .55; }
.po-regie__vig.is-offline .po-regie__vig-ecran--vide { background: repeating-linear-gradient(45deg, #14161a, #14161a 8px, #0f1115 8px, #0f1115 16px); }
.po-regie__vig-off {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  background: #3a3f47; color: #cfd5df; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px;
}

/* -- Démo publique -- */
.po-pf__act--demo { display: inline-flex; background: var(--pf-brand, #e50914); color: #fff; border-color: var(--pf-brand, #e50914); }

/* Bouton « Essayer la régie » (sur En direct, Événements, Podcast). */
.po-pf__act--regie {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--pf-brand, #e50914);
  border: 1px solid var(--pf-brand, #e50914); border-radius: 999px;
  padding: 8px 15px; font-size: 14px; font-weight: 700; text-decoration: none;
}
.po-pf__act--regie:hover { background: var(--pf-brand, #e50914); color: #fff; }
.po-ev-head__act { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* On aère le bouton « Essayer la régie » pour qu'il ne colle pas au reste. */
.po-pf__regie-cta { margin: 12px 0 24px; }

/* Page Vidéos : entête + bouton Filtrer (menu déroulant natif). */
.po-pf__vid-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.po-pf__filtres { position: relative; }
.po-pf__filtres-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  background: var(--pf-surface); border: 1px solid var(--pf-line, rgba(0,0,0,.14)); border-radius: 999px;
  padding: 9px 16px; font-size: 14px; font-weight: 700; color: var(--pf-text);
}
.po-pf__filtres-btn::-webkit-details-marker { display: none; }
.po-pf__filtres-btn:hover { border-color: var(--pf-muted, #888); }
.po-pf__filtres-n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--pf-brand, #e50914); color: #fff; font-size: 11px; font-weight: 800;
}
.po-pf__filtres-menu {
  position: absolute; right: 0; z-index: 30; margin-top: 8px; width: 240px;
  background: var(--pf-bg, #fff); border: 1px solid var(--pf-line, rgba(0,0,0,.14)); border-radius: 12px;
  padding: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 6px;
}
.po-pf__filtres-lbl { font-size: 12px; font-weight: 700; color: var(--pf-muted); margin-top: 6px; }
.po-pf__filtres-sel {
  width: 100%; border: 1px solid var(--pf-line, rgba(0,0,0,.14)); border-radius: 8px;
  padding: 8px 10px; font-size: 14px; background: var(--pf-surface); color: var(--pf-text);
}
.po-pf__filtres-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.po-pf__filtres-reset { color: var(--pf-muted); font-size: 13px; text-decoration: none; }
.po-pf__filtres-reset:hover { color: var(--pf-text); }
.po-pf__filtres-ok {
  border: 0; border-radius: 8px; padding: 9px 16px; cursor: pointer;
  background: var(--pf-brand, #e50914); color: #fff; font-size: 14px; font-weight: 700;
}

/* -- Studio « Mon contenu » -- */
.po-pf__studio-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.po-pf__studio-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 18px;
  border-bottom: 1px solid var(--pf-line, rgba(0,0,0,.1)); padding-bottom: 0;
}
.po-pf__studio-tab {
  padding: 10px 14px; font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--pf-muted); border-bottom: 3px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.po-pf__studio-tab:hover { color: var(--pf-text); }
.po-pf__studio-tab.po-on { color: var(--pf-text); border-bottom-color: var(--pf-brand, #e50914); }
/* Corps du Studio : on éloigne le contenu des onglets, et surtout on donne de
   l'air entre le bouton d'action (Gérer mes vidéos / Créer un short / une
   régie...) et la grille en dessous, qui étaient collés. */
.po-pf__studio-corps { margin-top: 20px; }
.po-pf__studio-corps > p { margin: 0 0 22px; }
.po-pf__studio-short {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 9 / 16; max-height: 260px; background: var(--pf-surface);
  border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 12px; padding: 14px;
  text-decoration: none; color: var(--pf-text); font-weight: 600; text-align: center;
}
.po-pf__studio-short:hover { border-color: var(--pf-muted, #888); }
.po-pf__studio-short-ic { color: var(--pf-brand, #e50914); }
.po-pf__act--demo:hover { filter: brightness(1.06); }
.po-regie-demo__banniere {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(90deg, #1c1c1c, #14161a); border: 1px solid #333333; border-radius: 14px;
  padding: 14px 18px; margin-bottom: 16px;
}
.po-regie-demo__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.po-regie-demo__txt strong { color: var(--pf-brand, #FF4D3D); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.po-regie-demo__txt span { color: #cfd5df; font-size: 14px; }
.po-regie-demo__cta {
  flex: none; background: var(--pf-brand, #e50914); color: #fff; text-decoration: none;
  border-radius: 10px; padding: 11px 16px; font-size: 14px; font-weight: 800;
}
.po-regie-demo__cta:hover { filter: brightness(1.07); }

/* Chat de démo (statique). */
.po-regie-demo__chat { background: #14161a; border: 1px solid #262a31; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.po-regie-demo__chat-t { color: #e7eaf0; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.po-regie-demo__pastille { background: #2c313a; color: #cfd5df; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 5px; }
.po-regie-demo__msgs { display: flex; flex-direction: column; gap: 8px; }
.po-regie-demo__msg { color: #dfe3ea; font-size: 13px; line-height: 1.35; }
.po-regie-demo__msg b { font-weight: 800; margin-right: 5px; }
.po-regie-demo__champ { border: 1px solid #2c313a; background: #0f1115; color: #7b828d; border-radius: 8px; padding: 9px 11px; font-size: 13px; }
.po-regie__promo-ctl { display: inline-flex; align-items: center; gap: 8px; opacity: .5; transition: opacity .15s ease; }
.po-regie__promo-ctl.is-actif { opacity: 1; }

/* Boutons « Écran cible ». */
.po-regie__cibles { display: flex; flex-wrap: wrap; gap: 8px; }
.po-regie__cib {
  min-width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  background: #1c1f26; color: #e7eaf0; border: 1px solid #2c313a; font-size: 15px; font-weight: 800;
  transition: border-color .15s ease, background .15s ease;
}
.po-regie__cib:hover { border-color: #475060; }
.po-regie__cib.is-on { border-color: #f59e0b; background: #1f1f1f; color: #fff; box-shadow: 0 0 0 2px rgba(245,158,11,.25); }
.po-regie__pmove {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid #2c313a; background: #1c1f26;
  color: #e7eaf0; font-size: 13px; cursor: pointer;
}
.po-regie__pmove:hover { border-color: #475060; }
.po-regie__pval { min-width: 48px; text-align: center; font-weight: 700; color: #e7eaf0; }
.po-regie__paide { font-size: 12px; color: #8b93a1; }
.po-regie__trans { display: flex; flex-wrap: wrap; gap: 8px; }
.po-regie__tr {
  background: #1c1f26; color: #e7eaf0; border: 1px solid #2c313a; border-radius: 999px;
  padding: 7px 15px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.po-regie__tr:hover { border-color: #475060; }
.po-regie__tr.is-on { border-color: var(--pf-brand, #e50914); background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); }

/* Le spectateur : suivre la réalisation. */
.po-regie__suivre { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; font-size: 14px; cursor: pointer; }

/* Contrôles du spectateur : suivre le réalisateur / choisir sa caméra. */
.po-regie__viewer { margin-top: 14px; }
.po-regie__vmodes { display: inline-flex; background: var(--pf-surface); border-radius: 999px; padding: 4px; gap: 3px; }
.po-regie__vmode {
  border: 0; background: transparent; color: var(--pf-muted); cursor: pointer;
  font-weight: 700; font-size: 13.5px; padding: 8px 16px; border-radius: 999px;
  font-family: inherit; transition: background .15s ease, color .15s ease;
}
.po-regie__vmode:hover { color: var(--pf-text); }
.po-regie__vmode.is-on { background: var(--pf-brand, #e50914); color: #fff; }
.po-regie__vaide { margin: 9px 2px 0; font-size: 13px; color: var(--pf-muted); line-height: 1.45; }
.po-regie__vcams { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.po-regie__vcam {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--pf-surface); border: 1px solid var(--pf-line, rgba(0,0,0,.14));
  border-radius: 10px; padding: 8px 12px; font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--pf-text); transition: border-color .15s ease, background .15s ease;
}
.po-regie__vcam:hover { border-color: var(--pf-muted, #888); }
.po-regie__vcam.is-on { border-color: var(--pf-brand, #e50914); background: rgba(229,9,20,.08); }
.po-regie__vcam-n {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 6px; background: var(--pf-brand, #e50914); color: #fff; font-size: 12px; font-weight: 800; flex: none;
}
.po-regie__vcam-nom { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Partage + diffusion. */
.po-regie__partage { background: var(--pf-surface); border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.po-regie__partage-t { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.po-regie__partage-row { display: flex; gap: 8px; }
.po-regie__lien { flex: 1; min-width: 0; border: 1px solid var(--pf-line, rgba(0,0,0,.14)); border-radius: 8px; padding: 8px 10px; font-size: 13px; background: var(--pf-bg, #fff); color: var(--pf-text); }
.po-regie__copier { flex: none; border: 0; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; background: var(--pf-brand, #e50914); color: #fff; }
.po-regie__copier:hover { filter: brightness(1.05); }
.po-regie__direct { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.po-regie__partage-note { margin: 8px 0 0; font-size: 12px; color: var(--pf-muted); line-height: 1.45; }
.po-regie__ouvrir {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 7px 10px;
  border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 8px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--pf-text);
}
.po-regie__ouvrir:hover { background: var(--pf-surface); color: var(--pf-brand); }

/* Bandeau « Aperçu spectateur » : le régisseur voit sa page comme le public,
   sans console, avec un retour rapide vers la régie. */
.po-regie__apercu-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  background: rgba(229,9,20,.08); border: 1px solid rgba(229,9,20,.35); border-radius: 10px;
}
.po-regie__apercu-txt { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--pf-text); }
.po-regie__apercu-retour {
  display: inline-flex; align-items: center; text-decoration: none;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 700;
  color: #fff; background: var(--pf-brand, #e50914);
}
.po-regie__apercu-retour:hover { filter: brightness(1.08); }

/* Réglages « maître » de la régie (renommer / supprimer). */
.po-regie__reglages { background: var(--pf-surface); border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.po-regie__modifier {
  display: block; text-align: center; text-decoration: none; margin-bottom: 12px;
  border: 1px solid var(--pf-line, rgba(0,0,0,.16)); border-radius: 8px; padding: 9px 14px;
  font-size: 13px; font-weight: 700; color: var(--pf-text); background: var(--pf-bg, #fff);
  transition: border-color .15s ease, background .15s ease;
}
.po-regie__modifier:hover { border-color: var(--pf-brand, #e50914); color: var(--pf-brand, #e50914); }
.po-regie-form__annuler { display: inline-flex; align-items: center; color: var(--pf-muted); text-decoration: none; font-weight: 600; font-size: 14px; padding: 0 6px; }
.po-regie-form__annuler:hover { color: var(--pf-text); }
.po-regie__reglages-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--pf-muted); margin-bottom: 6px; }
.po-regie__renom-row { display: flex; gap: 8px; }
.po-regie__renom-in { flex: 1; min-width: 0; border: 1px solid var(--pf-line, rgba(0,0,0,.14)); border-radius: 8px; padding: 8px 10px; font-size: 13px; background: var(--pf-bg, #fff); color: var(--pf-text); }
.po-regie__renom-ok { flex: none; border: 0; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; background: var(--pf-brand, #e50914); color: #fff; }
.po-regie__renom-ok:hover { filter: brightness(1.05); }
.po-regie__suppr { margin-top: 12px; }
.po-regie__suppr-btn {
  width: 100%; border: 1px solid rgba(229,9,20,.5); background: transparent; color: #e50914;
  border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.po-regie__suppr-btn:hover { background: #e50914; color: #fff; }
.po-ev-carte--regie .po-ev-carte__ph { color: #6b7482; }
.po-ev-carte__regie-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: #14161a; color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px;
  border: 1px solid #2c313a;
}
/* -- Page d'accueil de la régie : formulaire + guide -- */
.po-regie-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px; align-items: start; margin-top: 16px;
}
@media (max-width: 900px) { .po-regie-intro { grid-template-columns: 1fr; } }

.po-regie-form__card,
.po-regie-guide {
  background: var(--pf-bg, #fff);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);   /* défini par une ombre douce, pas un trait */
  border-radius: 14px; padding: 24px;
}
.po-regie-form__card > .po-ev-form__lbl:first-child { margin-top: 0; }
.po-regie-form__aide { margin: 6px 0 12px; font-size: 12.5px; color: var(--pf-muted); line-height: 1.5; }
.po-regie-form__aide code {
  background: var(--pf-surface); padding: 1px 5px; border-radius: 5px;
  font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace;
}

.po-regie-form__cam { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.po-regie-form__cam input { flex: 1; min-width: 0; }
.po-regie-form__num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--pf-surface); color: var(--pf-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.po-regie-form__del {
  flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: var(--pf-muted); font-size: 20px; line-height: 1;
  cursor: pointer; transition: background .14s ease, color .14s ease;
}
.po-regie-form__del:hover { background: rgba(229,9,20,.10); color: var(--pf-brand); }
.po-regie-form__cams--min .po-regie-form__del { visibility: hidden; }

.po-regie-form__add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 4px; padding: 10px 14px;
  background: transparent; color: var(--pf-text);
  border: 1px dashed var(--pf-line, rgba(0,0,0,.2)); border-radius: 10px;
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.po-regie-form__add:hover { border-color: var(--pf-brand); background: var(--pf-surface); }

.po-regie-form__actions { margin-top: 18px; }
.po-regie-form__creer {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; background: var(--pf-brand); color: #fff;
  border: 0; border-radius: 999px; font-size: 15px; font-weight: 800;
  font-family: inherit; cursor: pointer; transition: filter .14s ease;
}
.po-regie-form__creer:hover { filter: brightness(1.06); }

.po-regie-guide__t { font-size: 15px; font-weight: 800; margin: 0 0 14px; }
.po-regie-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.po-regie-steps li { display: flex; gap: 11px; align-items: flex-start; }
.po-regie-steps__n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--pf-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.po-regie-steps__c strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.po-regie-steps__d { display: block; font-size: 12.5px; color: var(--pf-muted); line-height: 1.45; }
/* Les deux boutons de démo étaient collés l'un à l'autre : on les espace. */
.po-regie-guide__demo { width: 100%; justify-content: center; margin-top: 12px; }
.po-regie-guide__demo:first-of-type { margin-top: 0; }
.po-regie-guide__note { margin: 14px 0 0; font-size: 11.5px; color: var(--pf-muted); text-align: center; }

.po-regie-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-width: 620px; }
.po-regie-liste__item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 10px; text-decoration: none; color: var(--pf-text); font-weight: 600; }
.po-regie-liste__item:hover { background: var(--pf-surface); }
.po-regie-liste__n { color: var(--pf-muted); font-weight: 500; font-size: 13px; }

/* -- Shorts : onglets de mode (Découper / Lien / Téléverser) ------------------ */
.po-short-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.po-short-mode {
  border: 1px solid var(--pf-bord, rgba(0,0,0,.15)); background: var(--pf-bg); color: var(--pf-muted);
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 650; font-size: 14px;
}
.po-short-mode:hover { color: var(--pf-text); }
.po-short-mode.po-on { background: var(--pf-brand); color: #fff; border-color: var(--pf-brand); }
[data-mode-panel] .po-pf__creer { margin-top: 12px; }

/* Chapitres cliquables dans la description (horodatages façon YouTube). */
.po-pf__ts { color: var(--pf-brand); font-weight: 600; text-decoration: none; cursor: pointer; }
.po-pf__ts:hover { text-decoration: underline; }

/* -- Menu « 3 points » sous la vidéo (actions secondaires) -------------------- */
.po-pf__plus { position: relative; }
.po-pf__plus-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  background: var(--pf-bg); color: var(--pf-text);
  border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  min-width: 190px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.po-pf__plus-menu[hidden] { display: none; }
.po-pf__plus-item { justify-content: flex-start; width: 100%; background: none; border-radius: 8px; }
.po-pf__plus-item:hover { background: var(--pf-surface); }

/* Menu « Plus » de la page vidéo (maquette Cadeaux, livraison 3) : un vrai
   menu déroulant, jamais plus large que l'écran. Ancré à droite du bouton ;
   public.js l'ancre à gauche (po-ancre-gauche) s'il sortait par la gauche. */
.po-pf__plus-menu--video {
  width: 260px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}
.po-pf__plus-menu--video.po-ancre-gauche { right: auto; left: 0; }
.po-pf__plus-menu--video .po-pf__plus-item {
  gap: 12px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.po-pf__plus-menu--video .po-pf__plus-item svg { width: 18px; height: 18px; flex: none; }
.po-pf__plus-sep { display: block; height: 1px; margin: 6px 4px; background: var(--pf-line); }
.po-pf__plus-tag {
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid var(--pf-line);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--pf-muted);
}
.po-pf__plus-menu--video .po-pf__autoplay { cursor: pointer; }
.po-pf__plus-menu--video .po-pf__autoplay-track { margin-left: auto; width: 34px; height: 20px; }
.po-pf__plus-menu--video .po-pf__autoplay-track::after { width: 16px; height: 16px; }
.po-pf__plus-menu--video .po-pf__autoplay input:checked + .po-pf__autoplay-track::after { transform: translateX(14px); }

/* « Enregistrer » dans le menu : le choix des listes s'ouvre sous l'item,
   dans le menu lui-même. */
.po-pf__save--dans-menu { display: block; }
.po-pf__save-menu--dans-menu {
  position: static;
  min-width: 0;
  margin: 2px 0 6px;
  padding: 8px 6px;
  border: 0;
  border-top: 1px solid var(--pf-line);
  border-bottom: 1px solid var(--pf-line);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* Panneau « Transférer à un artiste » (admin), ouvert depuis le menu Plus. */
.po-pf__attr[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .po-pf__plus-menu--video .po-pf__autoplay-track,
  .po-pf__plus-menu--video .po-pf__autoplay-track::after { transition: none; }
}

/* --------------------------------------------------------------------------
 * Bandeau de nouvelles - habillage « Newsroom » (Direction A), utilisé en régie.
 * Look télé américaine : fond sombre, accents ROUGES, kicker biseauté « EN
 * DIRECT » à point pulsant, titre fort, horloge, et bandeau défilant à
 * étiquette rouge. Même structure HTML/JS qu'avant : seul l'habillage change.
 * -------------------------------------------------------------------------- */
.po-bandeau--tv .po-bandeau__tag {
  background: linear-gradient(180deg, #ff2a36, var(--pf-brand, #e50914));
  box-shadow: 0 4px 14px rgba(229,9,20,.42);
  font-weight: 900; letter-spacing: .09em;
}
.po-bandeau--tv .po-bandeau__bar { filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)); }
.po-bandeau--tv .po-bandeau__marque {
  background: linear-gradient(180deg, #16191f, #090b0e);
  border-top: 2px solid var(--pf-brand, #e50914);
}
.po-bandeau--tv .po-bandeau__m1 { letter-spacing: .02em; }
.po-bandeau--tv .po-bandeau__m3 { color: #FF4D3D; }
.po-bandeau--tv .po-bandeau__titres {
  background: linear-gradient(90deg, rgba(9,11,15,.95), rgba(9,11,15,.66));
  backdrop-filter: blur(2px);
}
.po-bandeau--tv .po-bandeau__titres::before { background: var(--pf-brand, #e50914); width: 5px; }
.po-bandeau--tv .po-bandeau__t1 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.po-bandeau--tv .po-bandeau__t2 { color: #d7dee7; }
.po-bandeau--tv .po-bandeau__ticker {
  background: linear-gradient(90deg, #090b11, #12151d);
  border-top: 1px solid rgba(255,255,255,.09);
}
.po-bandeau--tv .po-bandeau__lbl {
  background: linear-gradient(180deg, #ff2a36, var(--pf-brand, #e50914));
  font-weight: 900; letter-spacing: .09em;
}
.po-bandeau--tv .po-bandeau__move span { color: #eef2f6; }
.po-bandeau--tv .po-bandeau__move span::before {
  content: "\25C6"; color: #ff2a36; font-size: .7em; vertical-align: middle; margin-right: 14px;
}

/* Le bandeau posé sur le programme de la régie. */
.po-regie__bandeau { left: 12px; right: 12px; bottom: 12px; z-index: 6; }

/* Console : révélation du bandeau (mêmes pastilles que le pilotage du direct). */
.po-regie__bandeau-ctl { display: flex; flex-wrap: wrap; gap: 8px; }
.po-regie__band-btn {
  padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--pf-surface); color: var(--pf-text); font-size: 13px; font-weight: 700;
  font-family: inherit; transition: background .14s ease, color .14s ease;
}
.po-regie__band-btn:hover { background: var(--pf-raise); }
.po-regie__band-btn.is-on { background: #2f6bdc; color: #fff; }

/* Case Promo occupée par un commanditaire (au lieu du logo). */
.po-regie__promo--spo { position: relative; }
.po-regie__promo--spo img { max-width: 92%; max-height: 78%; }
.po-regie__promo-mention {
  position: absolute; left: 0; right: 0; bottom: 6px; text-align: center;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* Champs facultatifs du formulaire de régie (case à cocher alignée). */
.po-regie-form__check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--pf-text); margin: 4px 0; cursor: pointer; }
.po-regie-form__check input { width: 16px; height: 16px; }

/* Démo publique d'un direct. */
.po-directdemo__video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: #000; display: block; }
.po-directdemo__chat { align-self: start; }
.po-directdemo__cta { margin-top: 18px; display: flex; justify-content: center; }
.po-spo-stats__pdf--demo {
  display: inline-flex; align-items: center; margin-top: 16px; padding: 10px 18px;
  background: var(--pf-surface); color: var(--pf-muted); border-radius: 999px;
  font-size: 13px; font-weight: 700;
}

/* -- Régie : bandeau éditable en direct (taille, police), console, plein écran -- */
/* Taille pilotée par --pbs, police par data-font (scopé à la régie). */
.po-regie__bandeau { --pbs: 1; }
.po-regie__bandeau .po-bandeau__tag  { font-size: calc(13px * var(--pbs)); }
.po-regie__bandeau .po-bandeau__m1   { font-size: calc(17px * var(--pbs)); }
.po-regie__bandeau .po-bandeau__t1   { font-size: calc(22px * var(--pbs)); }
.po-regie__bandeau .po-bandeau__t2   { font-size: calc(13px * var(--pbs)); }
.po-regie__bandeau .po-bandeau__lbl  { font-size: calc(11px * var(--pbs)); }
.po-regie__bandeau .po-bandeau__move { font-size: calc(13px * var(--pbs)); }
.po-regie__bandeau[data-font="systeme"]  { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.po-regie__bandeau[data-font="condense"] { font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif; letter-spacing: .01em; }
.po-regie__bandeau[data-font="serif"]    { font-family: Georgia, "Times New Roman", serif; }
.po-regie__bandeau[data-font="display"]  { font-family: "Trebuchet MS", "Segoe UI", Impact, sans-serif; letter-spacing: .02em; }

/* Console du bandeau : révélation + champs texte + taille/police, en colonne. */
.po-regie__bandeau-ctl { display: flex; flex-direction: column; gap: 8px; }
.po-regie__band-reveal { display: flex; flex-wrap: wrap; gap: 8px; }
/* Deux colonnes internes du bandeau : à gauche le PRINCIPAL (en ondes), à
   droite les FICHES en attente (A et B). Se replient en une colonne si étroit. */
.po-regie__band-onair { margin-bottom: 4px; }
.po-regie__band-cols { display: grid; grid-template-columns: 1fr; gap: 14px 22px; margin-top: 2px; }
.po-regie__band-col  { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
@media (min-width: 620px) {
  .po-regie__band-cols { grid-template-columns: 1fr 1fr; align-items: start; }
}
/* Chaque champ est étiqueté (Titre, Description, Info… / Nom, Description) pour
   qu'on sache toujours quelle ligne on remplit, même une fois le texte saisi. */
.po-regie__band-field { display: flex; flex-direction: column; gap: 4px; }
.po-regie__band-flbl  { font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--pf-muted, #8b93a1); }
.po-regie__band-in {
  width: 100%; padding: 7px 10px; border: 0; border-radius: 8px;
  background: var(--pf-surface, #14161a); color: var(--pf-text, #e7eaf0);
  font: inherit; font-size: 13px;
}
.po-regie__band-in::placeholder { color: #8b93a1; }
.po-regie__band-typo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.po-regie__band-lbl { font-size: 12px; font-weight: 800; color: var(--pf-muted, #8b93a1); text-transform: uppercase; letter-spacing: .04em; min-width: 52px; }
.po-regie__band-select { padding: 6px 10px; border: 0; border-radius: 8px; background: var(--pf-surface, #14161a); color: var(--pf-text, #e7eaf0); font: inherit; font-size: 13px; }

/* Bouton plein écran du programme. */
.po-regie__prog { position: relative; }
.po-regie__fs {
  position: absolute; top: 8px; right: 8px; z-index: 7;
  width: 34px; height: 34px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.po-regie__fs:hover { background: rgba(0,0,0,.8); }

/* Plein écran du programme. IMPORTANT : chaque sélecteur préfixé est sur SA
   PROPRE règle. Groupés par des virgules, un navigateur qui ne comprend pas
   l'un d'eux (ex. Firefox avec -webkit-) jette TOUTE la règle - c'était le bug
   du « ça remplit pas tout l'écran ». */
.po-regie__prog:fullscreen        { width: 100vw; height: 100vh; background: #000; }
.po-regie__prog:-webkit-full-screen { width: 100vw; height: 100vh; background: #000; }
.po-regie__prog:-moz-full-screen  { width: 100vw; height: 100vh; background: #000; }
.po-regie__prog:-ms-fullscreen    { width: 100vw; height: 100vh; background: #000; }

/* La scène remplit tout : on lève le plafond 60vh et le ratio 16/9 fixes. */
.po-regie__prog:fullscreen        .po-regie__scene { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; margin: 0; }
.po-regie__prog:-webkit-full-screen .po-regie__scene { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; margin: 0; }
.po-regie__prog:-moz-full-screen  .po-regie__scene { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; margin: 0; }
.po-regie__prog:-ms-fullscreen    .po-regie__scene { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; margin: 0; }

/* Étiquette de section dans la console du bandeau (Principal / Fiche A / Fiche B). */
.po-regie__band-sec { margin-top: 16px; }

/* --------------------------------------------------------------------------
 * Tableau de bord des statistiques du créateur (?vue=stats).
 * -------------------------------------------------------------------------- */
.po-stats__intro, .po-stats__note, .po-stats__methode { color: var(--pf-muted, #777); font-size: 13px; margin: 6px 0 14px; max-width: 760px; }
.po-stats__methode { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--pf-line, rgba(0,0,0,.12)); font-size: 12px; }
.po-stats__cnx { margin-top: 12px; }

.po-stats__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 4px 0 18px; }
.po-stats__kpi { border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 14px; background: var(--pf-surface, #fff); padding: 16px 14px; text-align: center; }
.po-stats__kpi-n { display: block; font-size: 22px; font-weight: 800; color: var(--pf-brand, #e50914); line-height: 1.1; }
.po-stats__kpi-k { display: block; margin-top: 5px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--pf-muted, #777); }

.po-stats__actions { margin: 0 0 20px; }
.po-stats__pdf {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  background: var(--pf-brand, #e50914);
  border-radius: 999px;
  padding: 8px 18px;
}
.po-stats__pdf:hover { filter: brightness(1.05); }

.po-stats__sec { font-size: 16px; font-weight: 800; margin: 22px 0 8px; }
.po-stats__scroll { overflow-x: auto; border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 12px; }
.po-stats__table { width: 100%; border-collapse: collapse; min-width: 460px; }
.po-stats__table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--pf-muted, #777); padding: 10px 12px; border-bottom: 2px solid var(--pf-line, rgba(0,0,0,.14)); background: var(--pf-raise, #f7f7f8); }
.po-stats__table td { padding: 10px 12px; border-bottom: 1px solid var(--pf-line, rgba(0,0,0,.08)); font-size: 13.5px; vertical-align: top; }
.po-stats__table tr:last-child td { border-bottom: 0; }
.po-stats__table th.num, .po-stats__table td.num { text-align: right; white-space: nowrap; }
.po-stats__table td.num { font-weight: 700; }
.po-stats__lien { color: inherit; text-decoration: none; font-weight: 600; }
.po-stats__lien:hover { color: var(--pf-brand, #e50914); }
.po-stats__date { color: var(--pf-muted, #999); font-size: 11.5px; }
.po-stats__sup-mot { color: #b00; font-size: 11.5px; }
.po-stats__row--sup { opacity: .7; }
.po-stats__vide { text-align: center; color: var(--pf-muted, #999); }
@media (max-width: 640px) {
  .po-stats__kpi-n { font-size: 18px; }
}

/* --------------------------------------------------------------------------
 * Réordonner les lignes par glisser-déposer : poignée dans une gouttière à
 * gauche (posée en absolu pour ne pas déranger la grille/flex de la ligne).
 * -------------------------------------------------------------------------- */
.po-ev-form__row--movable { position: relative; padding-left: 26px; }
.po-ev-form__grip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--pf-muted, #999);
  touch-action: none;
}
.po-ev-form__grip:hover { color: var(--pf-brand, #e50914); }
.po-ev-form__grip:active { cursor: grabbing; }
.po-ev-form__grip svg { width: 16px; height: 16px; fill: currentColor; pointer-events: none; }
.po-ev-form__row--drag { opacity: .6; outline: 2px dashed var(--pf-brand, #e50914); outline-offset: 2px; border-radius: 8px; }

/* -- Tableau de bord stats : période, graphiques, rétention, export -- */
.po-stats__periodes { display: inline-flex; gap: 4px; margin: 2px 0 16px; border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 999px; padding: 3px; }
.po-stats__periode { text-decoration: none; color: var(--pf-muted, #777); font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.po-stats__periode.po-on { background: var(--pf-brand, #e50914); color: #fff; }
.po-stats__csv {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 13px;
  color: var(--pf-text, #111); background: var(--pf-raise, #f2f2f3);
  border: 1px solid var(--pf-line, rgba(0,0,0,.14)); border-radius: 999px; padding: 8px 18px; margin-left: 8px;
}
.po-stats__csv:hover { border-color: var(--pf-brand, #e50914); }

.po-stats__charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 6px 0 4px; }
.po-stats__chart { border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 12px; padding: 14px; background: var(--pf-surface, #fff); }
.po-stats__chart-t { font-size: 12px; font-weight: 700; color: var(--pf-muted, #777); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.po-stats__bars { display: flex; align-items: flex-end; gap: 2px; height: 110px; }
.po-stats__bar { flex: 1 1 0; min-width: 2px; background: var(--pf-brand, #e50914); border-radius: 2px 2px 0 0; opacity: .85; transition: opacity .12s ease; }
.po-stats__bar:hover { opacity: 1; }
.po-stats__bar--alt { background: #2b7de9; }

.po-stats__choix { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.po-stats__choix-lbl { font-size: 13px; font-weight: 600; color: var(--pf-muted, #777); }
.po-stats__choix .po-ev-form__in { width: auto; max-width: 340px; }
.po-stats__choix-btn { border: 0; background: var(--pf-brand, #e50914); color: #fff; font-weight: 700; font-size: 13px; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.po-stats__rv-titre { font-weight: 700; margin: 4px 0 8px; }

.po-stats__retention { display: flex; align-items: flex-end; gap: 4px; height: 150px; border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 12px; padding: 14px 12px 6px; background: var(--pf-surface, #fff); }
.po-stats__ret-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.po-stats__ret-bar { width: 70%; max-width: 34px; background: linear-gradient(180deg, var(--pf-brand, #e50914), #FF4D3D); border-radius: 3px 3px 0 0; }
.po-stats__ret-lbl { font-size: 10.5px; color: var(--pf-muted, #999); }
.po-stats__ret-legende { font-size: 11.5px; color: var(--pf-muted, #999); margin: 6px 0 0; }

/* -- Plein écran « cinéma » : vidéo + chat côte à côte (façon Twitch) -- */
/* Une fine bande au-dessus de la rangée vidéo+chat, pour y loger le bouton
   « Plein écran + chat » sans qu'il chevauche la vidéo ni l'en-tête du chat. */
.po-ev__top { position: relative; margin-top: 42px; }

/* Bouton discret, dans la bande, tout en haut à droite. */
.po-ev__cine {
  position: absolute; top: -34px; right: 8px; z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(17, 17, 20, .72); color: #fff; font-weight: 700; font-size: 12.5px;
  backdrop-filter: blur(4px); opacity: .8; transition: opacity .15s ease;
}
.po-ev__top:hover .po-ev__cine { opacity: 1; }
.po-ev__cine:hover { background: var(--pf-brand, #e50914); }
/* En plein écran, pas de bande : le bouton revient dans son coin. */
.po-ev__top:fullscreen { margin-top: 0; }
.po-ev__top:fullscreen .po-ev__cine { top: 8px; }

/* Bouton « masquer/afficher le chat », visible seulement en plein écran. */
.po-ev__cine-chat {
  position: absolute; top: 8px; right: 176px; z-index: 7;
  padding: 7px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(17, 17, 20, .72); color: #fff; font-weight: 700; font-size: 12.5px;
}
.po-ev__cine-chat:hover { background: var(--pf-brand, #e50914); }

/* En plein écran, la rangée devient : vidéo (centrée, letterbox) + chat à droite. */
.po-ev__top:fullscreen {
  display: flex; gap: 0; width: 100vw; height: 100vh;
  background: #000; padding: 0; align-items: stretch; grid-template-columns: none;
}
.po-ev__top:fullscreen .po-ev__col {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center;
}
.po-ev__top:fullscreen .po-ev__stage {
  width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0;
}
.po-ev__top:fullscreen .po-ev__stage > iframe,
.po-ev__top:fullscreen .po-ev__stage > video,
.po-ev__top:fullscreen .po-ev__stage .po-ev__player,
.po-ev__top:fullscreen .po-ev__stage .po-ev__player--mc,
.po-ev__top:fullscreen .po-ev__stage .player-one-wrap {
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
  border-radius: 0; aspect-ratio: auto;
}
.po-ev__top:fullscreen .po-ev__stage video { object-fit: contain; background: #000; }
.po-ev__top:fullscreen .po-ev__sdesc { display: none; }
.po-ev__top:fullscreen .po-chat {
  flex: 0 0 360px; width: 360px; height: 100vh; max-height: none;
  border-radius: 0; border-top: 0; border-bottom: 0; border-right: 0;
}
.po-ev__top--nochat:fullscreen .po-chat { display: none; }

/* Idem pour WebKit (Safari) qui n'expose pas encore :fullscreen partout. */
.po-ev__top--cinema {
  display: flex; gap: 0; width: 100vw; height: 100vh; background: #000; padding: 0;
}
.po-ev__top--cinema .po-ev__col { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; }
.po-ev__top--cinema .po-ev__stage { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.po-ev__top--cinema .po-ev__stage > iframe,
.po-ev__top--cinema .po-ev__stage > video,
.po-ev__top--cinema .po-ev__stage .po-ev__player,
.po-ev__top--cinema .po-ev__stage .po-ev__player--mc,
.po-ev__top--cinema .po-ev__stage .player-one-wrap { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; aspect-ratio: auto; }
.po-ev__top--cinema .po-ev__sdesc { display: none; }
.po-ev__top--cinema .po-chat { flex: 0 0 360px; width: 360px; height: 100vh; max-height: none; border-radius: 0; }

/* -- Barre de contrôle escamotable en plein écran ------------------------- */
/* En plein écran, le bouton « entrer » disparaît : c'est la barre qui pilote. */
.po-ev__top:fullscreen .po-ev__cine,
.po-ev__top--cinema .po-ev__cine { display: none; }

.po-ev__fsbar { position: fixed; top: 0; left: 0; right: 0; z-index: 2147483647; pointer-events: none; }
.po-ev__fsbar[hidden] { display: none; }
.po-ev__fsbar-body {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  height: 46px; background: rgba(10, 10, 12, .94); box-shadow: 0 2px 14px rgba(0, 0, 0, .4);
  transform: translateY(-100%); transition: transform .25s ease; pointer-events: auto;
}
.po-ev__fsbar.is-open .po-ev__fsbar-body { transform: translateY(0); }
.po-ev__fsbar-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700;
  background: rgba(255, 255, 255, .14); color: #fff;
}
.po-ev__fsbar-btn:hover { background: var(--pf-brand, #e50914); }
/* La poignée (flèche) : seule visible quand la barre est fermée. */
.po-ev__fsbar-handle {
  position: absolute; top: 0; right: 16px; left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 24px; border: 0; cursor: pointer; pointer-events: auto;
  background: rgba(10, 10, 12, .82); color: #fff; border-radius: 0 0 10px 10px;
  transition: top .25s ease;
}
.po-ev__fsbar.is-open .po-ev__fsbar-handle { top: 46px; }
.po-ev__fsbar-handle svg { transition: transform .25s ease; }
.po-ev__fsbar.is-open .po-ev__fsbar-handle svg { transform: rotate(180deg); }
.po-ev__top--cinema.po-ev__top--nochat .po-chat { display: none; }

/* En plein écran cinéma, la fleche escamotable (coin haut droit) ne doit pas
   recouvrir les onglets « Général / Ce live » du chat : on reserve la place a
   droite de l'entete du chat, ce qui tasse les onglets vers la gauche. */
.po-ev__top--cinema .po-chat__head,
.po-ev__top:fullscreen .po-chat__head { padding-right: 92px; }

/* Sur mobile en plein écran, le chat passe en superposition pour laisser la
   vidéo respirer. */
@media (max-width: 640px) {
  .po-ev__top:fullscreen .po-chat,
  .po-ev__top--cinema .po-chat {
    position: absolute; right: 0; top: 0; bottom: 0; width: 78vw; max-width: 320px;
    background: rgba(12, 12, 14, .86); backdrop-filter: blur(6px);
  }
}

/* -- Barre d'administration WordPress : NE PAS la masquer ici ---------------
   NE JAMAIS remettre "#wpadminbar { display:none }" ni "html { margin-top:0 }".
   L'administrateur doit GARDER sa barre WordPress sur toute la plateforme
   Player One. Le seul endroit ou elle est retiree est l'iframe du lecteur
   (page embed d'une video ?player_one_embed, ou multicam nu ?nu=1) et c'est
   gere UNIQUEMENT cote serveur par PublicPages::estLecteurEmbarque()
   (show_admin_bar(false)). Un ancien hack cachait la barre partout en CSS et
   forcait html{margin-top:0} : retire le 2026-08-10 (voir INCIDENTS, incident 12).
   Laisser WordPress gerer normalement le decalage de la barre. */

/* -- Épisodes : PARTIES (segments) -----------------------------------------
   Éditeur : chaque épisode contient un mini-éditeur de parties (Partie 1, 2...).
   Spectateur : sous un épisode à plusieurs parties, des boutons de bascule. */
.po-ev-form__row--ep { flex-wrap: wrap; }
.po-ep-parts {
  flex: 1 0 100%;               /* interdit de rétrécir : le bloc Parties occupe TOUJOURS sa propre ligne */
  margin: 6px 0 2px;
  padding: 8px 10px;
  border: 1px dashed var(--pf-line, #d9d9e0);
  border-radius: 10px;
  background: #fafafa;
}
.po-ep-parts-t {
  font-size: 11.5px; font-weight: 700; color: var(--pf-muted, #6b6b76);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.po-ep-parts-list { display: flex; flex-direction: column; gap: 6px; }
.po-ep-part { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.po-ep-part-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px;
  background: var(--pf-brand, #e50914); color: #fff; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.po-ep-part-titre { flex: 0 0 30%; min-width: 110px; }
.po-ep-part-lien  { flex: 1 1 auto; min-width: 140px; }
.po-ep-part-del   { flex: 0 0 auto; }
.po-ep-part-add   { margin-top: 8px; }

/* Spectateur : PARTIES en liste verticale facon serie (vignette + titre + duree). */
.po-ev__parts {
  margin: -2px 0 12px; padding: 8px 8px 8px 62px;
  display: flex; flex-direction: column; gap: 8px;
}
.po-ev__parts-t {
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--pf-muted, #6b6b76); margin-bottom: 2px;
}
.po-ev__part {
  display: flex; align-items: center; gap: 12px;
  padding: 6px; border-radius: 12px;
  border: 1px solid var(--pf-line, #d9d9e0); background: #fff; color: var(--pf-text, #111114);
  text-decoration: none; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.po-ev__part:hover { border-color: var(--pf-brand, #e50914); }
.po-ev__part.po-on { border-color: var(--pf-brand, #e50914); box-shadow: 0 0 0 2px rgba(229, 9, 20, .16); }
.po-ev__part-vig {
  position: relative; flex: 0 0 auto; width: 120px; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden; background: #0c0c0e;
}
.po-ev__part-vig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-ev__part-num {
  position: absolute; top: 4px; left: 4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: rgba(0, 0, 0, .72); color: #fff; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.po-ev__part-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; opacity: 0; transition: opacity .12s;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.po-ev__part:hover .po-ev__part-play, .po-ev__part.po-on .po-ev__part-play { opacity: 1; }
.po-ev__part-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-ev__part-l { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.po-ev__part-sub { font-size: 12px; color: var(--pf-muted, #6b6b76); }
.po-ev__part--soon { opacity: .65; cursor: default; }
.po-ev__part--soon .po-ev__part-vig { filter: grayscale(1); }

/* Éditeur : champs durée + vignette d'une partie. */
.po-ep-part-duree { flex: 0 0 120px; min-width: 90px; }
.po-ep-part-vignette { flex: 1 1 auto; min-width: 130px; }

@media (max-width: 640px) {
  .po-ev__parts { padding-left: 8px; }
  .po-ev__part-vig { width: 96px; }
  .po-ep-part-titre, .po-ep-part-lien, .po-ep-part-duree, .po-ep-part-vignette { flex-basis: 100%; }
}

/* ===================== TEST 1 : disposition console a droite =============
   Active uniquement quand .po-regie--t1 est present (opt-in ?ui=test1).
   Sans cette classe, la regie garde EXACTEMENT sa disposition d'origine. */

/* Barre d'invitation / retour (visible pour le pilote dans les deux modes) */
.po-regie__t1bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;
  background:linear-gradient(120deg,#1c2530,#141821);border:1px solid #23262d;border-radius:12px;font-size:13px;color:#c7cdd6}
.po-regie__t1bar-lbl{display:inline-flex;align-items:center;gap:9px;font-weight:600}
.po-regie__t1bar-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2);flex:none}
.po-regie__t1bar-btn{margin-left:auto;background:#1c1f26;border:1px solid #2f333b;color:#e7eaf0;border-radius:999px;
  padding:7px 15px;font-weight:700;font-size:12.5px;text-decoration:none;transition:border-color .15s ease}
.po-regie__t1bar-btn:hover{border-color:#475060}
.po-regie__t1bar-btn--on{background:#E50914;border-color:#E50914;color:#fff}
.po-regie__t1bar-btn--on:hover{background:#B00710;border-color:#B00710}

/* Menu de gauche du site masque + contenu pleine largeur sur la page regie */
.po-pf__shell--t1 .po-pf__nav{display:none !important}

/* Disposition : programme+apercu a gauche, multiviewer dessous, panneau a droite */
.po-regie.po-regie--t1{display:block;grid-template-columns:none}
.po-regie--t1 .po-regie__stage{
  display:grid;grid-template-columns:minmax(0,1fr) 430px;
  grid-template-areas:"screens panel" "mv panel";gap:14px;align-items:start;
}
.po-regie--t1 .po-regie__screens{grid-area:screens;grid-template-columns:1.6fr 1fr}
.po-regie--t1 .po-regie__mv{grid-area:mv;background:#14161a;border:1px solid #262a31;border-radius:14px;padding:12px 14px}
.po-regie--t1 .po-regie__mv .po-regie__grp{display:flex;flex-direction:column;gap:8px}

/* Panneau de controle a droite, colle en haut, une categorie a la fois */
.po-regie--t1 .po-regie__board{grid-area:panel;position:sticky;top:74px;display:block;margin-top:0;
  grid-template-columns:none;max-height:calc(100vh - 92px);overflow-y:auto}
.po-regie--t1 .po-regie__board .po-regie__grp{grid-column:auto}
.po-regie--t1 .po-regie__board [data-t1-cat].t1-hide{display:none}

/* Barre d'onglets du panneau */
.po-regie__t1tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;position:sticky;top:0;
  background:#14161a;padding:2px 0 10px;z-index:2}
.po-regie__t1tab{cursor:pointer;background:#1b1f27;color:#cfd3da;border:1px solid #2f333b;border-radius:999px;
  padding:7px 13px;font-size:12.5px;font-weight:700;font-family:inherit;transition:all .15s}
.po-regie__t1tab:hover{border-color:#475060;color:#fff}
.po-regie__t1tab.is-on{background:#E50914;border-color:#E50914;color:#fff}

/* Chat + reglages : en bas, pleine largeur */
.po-regie--t1 .po-regie__side{margin-top:14px}
@media (min-width:900px){
  .po-regie--t1 .po-regie__side{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:start}
}

/* Responsive : sous 1080px, tout s'empile proprement */
@media (max-width:1080px){
  .po-regie--t1 .po-regie__stage{grid-template-columns:1fr;grid-template-areas:"screens" "mv" "panel"}
  .po-regie--t1 .po-regie__board{position:static;max-height:none;overflow:visible}
}
@media (max-width:720px){
  .po-regie--t1 .po-regie__screens{grid-template-columns:1fr}
}

/* ===== Regie : bandeau proportionnel au moniteur (corrige l'agrandissement) =
   Avant, le bandeau avait des tailles en pixels fixes : quand le programme
   retrecissait (zoom du navigateur, petite fenetre), il restait gros, debordait
   du moniteur devenu court et le titre se cassait a la verticale.
   Maintenant il se mesure en fonction de la LARGEUR du programme (unites cqw),
   avec des bornes clamp() : il reduit proprement en petit et reste net en plein
   ecran, toujours proportionnel. */
.po-regie__prog { container-type: inline-size; }
.po-regie__bandeau { left: clamp(6px, 2cqw, 16px); right: clamp(6px, 2cqw, 16px); bottom: clamp(6px, 2cqw, 16px); }
.po-regie__bandeau .po-bandeau__tag  { font-size: calc(clamp(8px, 2.3cqw, 15px) * var(--pbs)); }
.po-regie__bandeau .po-bandeau__m1   { font-size: calc(clamp(10px, 3cqw, 19px) * var(--pbs)); white-space: nowrap; }
.po-regie__bandeau .po-bandeau__t1   { font-size: calc(clamp(12px, 3.9cqw, 26px) * var(--pbs)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-regie__bandeau .po-bandeau__t2   { font-size: calc(clamp(8px, 2.3cqw, 15px) * var(--pbs)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-regie__bandeau .po-bandeau__lbl  { font-size: calc(clamp(8px, 2cqw, 12px) * var(--pbs)); }
.po-regie__bandeau .po-bandeau__move { font-size: calc(clamp(9px, 2.3cqw, 15px) * var(--pbs)); }
.po-regie__bandeau .po-bandeau__marque { min-width: clamp(78px, 24cqw, 160px); padding: 6px 14px 6px 12px; }
.po-regie__bandeau .po-bandeau__bar { min-height: clamp(34px, 10cqw, 66px); }
.po-regie__bandeau .po-bandeau__ticker { height: clamp(18px, 5cqw, 30px); }

/* ==========================================================================
   Films et Séries (section + page d'une série). Thème clair, aligné sur le
   reste de la plateforme (variables --pf-*). Ajouté en 1.0.2.
   ========================================================================== */
.po-fs__sub { color: var(--pf-muted); font-size: 14px; margin: -4px 0 18px; }
.po-fs__railhead { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 12px; }
.po-fs__railt { font-size: 17px; font-weight: 800; margin: 0; color: var(--pf-text); }
.po-fs__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 8px;
}
@media (max-width: 1100px) { .po-fs__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .po-fs__grid { grid-template-columns: repeat(2, 1fr); } }

.po-fs__card {
  display: block; text-decoration: none; color: inherit;
  background: var(--pf-bg); border: 1px solid var(--pf-line); border-radius: 12px;
  overflow: hidden; transition: box-shadow .15s ease, transform .15s ease;
}
.po-fs__card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.12); transform: translateY(-2px); }
.po-fs__card-vig {
  position: relative; aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #1c1c1c, #0f0f0f);
  display: flex; align-items: center; justify-content: center;
}
.po-fs__card-vig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-fs__card-ph { color: rgba(255,255,255,.5); }
.po-fs__card-tag {
  position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.62);
}
.po-fs__card-tag--serie { background: var(--pf-brand); }
.po-fs__card-play {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center;
}
.po-fs__card-play svg { margin-left: 2px; }
.po-fs__card-meta { padding: 11px 12px; }
.po-fs__card-t { display: block; font-weight: 700; font-size: 14px; color: var(--pf-text); margin-bottom: 3px; }
.po-fs__card-s { color: var(--pf-muted); font-size: 12px; }

/* Page d'une série */
.po-pf__content--flush { padding-left: 0; padding-right: 0; padding-top: 0; }
.po-fs__hero {
  position: relative; aspect-ratio: 24 / 7; min-height: 200px;
  background: linear-gradient(120deg, #1c1c1c, #0f0f0f);
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}
.po-fs__hero-in { padding: 22px 26px; color: #fff; }
.po-fs__hero-t { font-size: 28px; font-weight: 900; margin: 0 0 8px; color: #fff; }
.po-fs__hero-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 9px; }
.po-fs__pill { background: rgba(255,255,255,.18); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; }
.po-fs__hero-desc { max-width: 640px; color: #f0f0f0; font-size: 13.5px; line-height: 1.5; margin: 0; }
.po-fs__detail { padding: 20px 26px; }
.po-fs__seasons { display: flex; gap: 8px; border-bottom: 1px solid var(--pf-line); margin-bottom: 16px; flex-wrap: wrap; }
.po-fs__season-tab {
  text-decoration: none; color: var(--pf-muted); font-weight: 700; font-size: 14px;
  padding: 10px 6px; border-bottom: 2px solid transparent;
}
.po-fs__season-tab.is-on { color: var(--pf-text); border-bottom-color: var(--pf-brand); }
.po-fs__ep {
  display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--pf-line);
  align-items: center; text-decoration: none; color: inherit;
}
.po-fs__ep:hover .po-fs__ep-t { color: var(--pf-brand); }
.po-fs__ep-n { font-size: 20px; font-weight: 800; color: var(--pf-muted); width: 24px; text-align: center; flex: none; }
.po-fs__ep-th {
  width: 150px; aspect-ratio: 16 / 9; border-radius: 8px; flex: none; position: relative;
  background: linear-gradient(135deg, #1c1c1c, #0f0f0f); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.po-fs__ep-th img { width: 100%; height: 100%; object-fit: cover; }
.po-fs__ep-play {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center;
}
.po-fs__ep-play svg { margin-left: 2px; }
.po-fs__ep-dur { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.78); color: #fff; font-size: 10.5px; padding: 1px 6px; border-radius: 5px; }
.po-fs__ep-info { flex: 1; min-width: 0; }
.po-fs__ep-kick { display: block; font-weight: 700; font-size: 14.5px; color: var(--pf-text); margin-bottom: 3px; }
.po-fs__ep-t { display: block; color: var(--pf-muted); font-size: 12.5px; }
.po-fs__ep-go { color: var(--pf-muted); flex: none; }
@media (max-width: 620px) { .po-fs__ep-th { width: 108px; } }

/* Champs Saison / Épisode côte à côte dans le formulaire vidéo */
.po-vid-film__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Numero d'episode dans l'editeur d'evenements : une etiquette pleine largeur
   au-dessus des champs, pour distinguer clairement un EPISODE d'une PARTIE. */
.po-ev-form__row--ep .po-ep-row-num {
  flex: 0 0 100%;
  order: -1;
  font-weight: 800; font-size: 13px; color: var(--pf-brand, #e50914);
  text-transform: uppercase; letter-spacing: .03em;
  margin: 2px 0 4px;
}
.po-ep-row-num:empty { display: none; }

/* ==========================================================================
   Onboarding : bulles d'aide (« ? ») + visite guidee. Thème clair. (1.0)
   ========================================================================== */
/* Petit bouton « ? » a poser a cote d'une option. */
.po-aide {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 6px; padding: 0; vertical-align: middle;
  border-radius: 50%; border: 1px solid var(--pf-line,#e5e5e5); background: var(--pf-surface,#f2f2f2);
  color: var(--pf-muted,#606060); font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer;
  font-family: inherit; transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.po-aide:hover { background: var(--pf-brand, #e50914); border-color: var(--pf-brand, #e50914); color: #fff; }

/* La petite fenetre d'aide (popover). */
.po-aide-pop {
  position: absolute; z-index: 100050; max-width: 300px; width: max-content; min-width: 200px;
  background: var(--pf-bg,#fff); color: var(--pf-text,#0f0f0f); border: 1px solid var(--pf-line,#e5e5e5);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.22); padding: 14px 16px 14px;
}
.po-aide-pop__x {
  position: absolute; top: 6px; right: 8px; border: none; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--pf-muted,#606060);
}
.po-aide-pop__x:hover { color: var(--pf-text,#0f0f0f); }
.po-aide-pop__t { font-weight: 800; font-size: 14px; margin: 0 18px 6px 0; color: var(--pf-text,#0f0f0f); }
.po-aide-pop__c { font-size: 13px; line-height: 1.5; color: var(--pf-muted,#606060); }
.po-aide-pop__nav { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.po-aide-pop__cpt { font-size: 11.5px; color: var(--pf-muted,#606060); margin-left: auto; }
.po-aide-pop__b {
  border: 1px solid var(--pf-line,#e5e5e5); background: var(--pf-surface,#f2f2f2); color: var(--pf-text,#0f0f0f);
  border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.po-aide-pop__b:disabled { opacity: .5; cursor: default; }
.po-aide-pop__b--on { background: var(--pf-brand, #e50914); border-color: var(--pf-brand, #e50914); color: #fff; }

/* Visite guidee : masque (bloque les clics), spot (halo sur la cible), bulle. */
.po-tour-catch { position: fixed; inset: 0; z-index: 100000; background: transparent; }
.po-tour-catch--dim { background: rgba(10,10,14,.55); }
.po-tour-spot {
  position: fixed; z-index: 100001; border-radius: 12px; pointer-events: none;
  border: 3px solid var(--pf-brand, #e50914);
  box-shadow: 0 0 0 3px rgba(229,9,20,.35), 0 0 0 9999px rgba(10,10,14,.55);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.po-tour-bulle {
  position: fixed; z-index: 100002; width: 320px; max-width: calc(100vw - 24px);
  background: var(--pf-bg,#fff); color: var(--pf-text,#0f0f0f); border: 1px solid var(--pf-line,#e5e5e5);
  border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.3); padding: 18px 18px 16px;
}
.po-tour-bulle--centre { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 380px; }
.po-tour-t { font-size: 17px; font-weight: 800; margin: 0 0 8px; color: var(--pf-text,#0f0f0f); }
.po-tour-c { font-size: 13.5px; line-height: 1.55; color: var(--pf-muted,#606060); }
.po-tour-cpt { font-size: 11.5px; color: var(--pf-muted,#606060); margin-top: 12px; text-transform: uppercase; letter-spacing: .04em; }
.po-tour-pied { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.po-tour-b {
  border: 1px solid var(--pf-line,#e5e5e5); background: var(--pf-surface,#f2f2f2); color: var(--pf-text,#0f0f0f);
  border-radius: 999px; padding: 8px 15px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.po-tour-b--on { margin-left: auto; background: var(--pf-brand, #e50914); border-color: var(--pf-brand, #e50914); color: #fff; }
.po-tour-b--on:hover { filter: brightness(.95); }

/* Consigne d'action : etape ou la personne doit cliquer elle-meme le vrai
   bouton mis en lumiere. Ton chaleureux pour inviter au geste. */
.po-tour-astuce {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 12px; padding: 10px 12px;
  background: rgba(229,9,20,.08); border: 1px solid rgba(229,9,20,.28);
  border-radius: 10px;
  font-size: 13px; line-height: 1.45; font-weight: 600;
  color: var(--pf-text,#0f0f0f);
}
.po-tour-astuce__i { font-size: 16px; line-height: 1.3; flex-shrink: 0; }

/* Bouton « Revoir le tour guidé » ajoute au menu de gauche. */
.po-pf__nav-tour { width: 100%; text-align: left; background: none; border: none; font-family: inherit; cursor: pointer; }

/* ============================================================
   Shorts : rail d'actions social (facon TikTok) + panneau de
   commentaires. Le fil affiche chaque short dans un cadre haut
   pour que le rail tienne toujours ; les clips horizontaux sont
   simplement mis en boite (letterbox) au lieu d'etre rognes.
   ============================================================ */
.po-shorts-feed .po-short { aspect-ratio: 9/16; max-width: 340px; }
.po-short:not(.po-short--v) .po-short__scene video,
.po-short:not(.po-short--v) .po-short__scene iframe { object-fit: contain; background: #000; }

/* Logo a gauche pour laisser le rail respirer a droite. */
.po-short__logo { left: 12px; right: auto; }

/* Le rail : colonne d'actions collee a droite, centree verticalement. */
.po-short__rail {
  position: absolute; right: 9px; top: 0; bottom: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 0; pointer-events: none;
}
.po-short__rail > * { pointer-events: auto; }
.po-short__votes { display: flex; flex-direction: column; align-items: center; gap: 12px; background: none; border: 0; padding: 0; }
.po-short__act {
  background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; font-family: inherit;
}
.po-short__ico {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.46);
  display: flex; align-items: center; justify-content: center; transition: transform .14s ease, background .14s ease;
}
.po-short__ico svg { width: 24px; height: 24px; fill: #fff; }
.po-short__act:hover .po-short__ico { transform: scale(1.06); background: rgba(0,0,0,.62); }
.po-short__num { font-size: 11.5px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.7); line-height: 1; }
.po-short__vote.po-on .po-short__ico { background: var(--pf-brand, #e50914); }

/* Bouton s'abonner (rendu par Suivis::bouton) restyle en pastille compacte. */
.po-short__act--sub { display: flex; }
.po-short__act--sub .po-pf__suivre-form { margin: 0; }
.po-short__act--sub .po-pf__act--suivre {
  background: var(--pf-brand, #e50914); color: #fff; border: 2px solid #fff; border-radius: 999px;
  font-size: 11px; font-weight: 800; padding: 7px 11px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.4);
  white-space: nowrap;
}
.po-short__act--sub .po-pf__act--suivre.po-on { background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.7); }

/* Le menu « Enregistrer dans » reutilise dans le rail. */
.po-short__rail .po-pf__save { position: static; }
.po-short__rail .po-pf__save > [data-po-listes-btn] {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.46); border: 0; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.po-short__rail .po-pf__save > [data-po-listes-btn] span { display: none; }
/* Le libellé « Enregistrer » est un nœud texte (pas un span) : on le masque
   visuellement dans le rail (il dépassait du bord droit) ; il reste le nom
   accessible du bouton pour les lecteurs d'écran. */
.po-short__rail .po-pf__save > [data-po-listes-btn] { font-size: 0; gap: 0; }
.po-short__rail .po-pf__save > [data-po-listes-btn] svg { width: 24px; height: 24px; fill: #fff; }
.po-short__rail .po-pf__save-menu { right: 52px; bottom: 0; left: auto; }

/* Ligne d'infos (titre + chaine + vues) en bas a gauche. */
.po-short__info { right: 70px; }
.po-short__meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 12.5px; opacity: .92; }
.po-short__chan { color: #fff; opacity: .95; }
.po-short__dot { opacity: .5; }
.po-short__vues { display: inline-flex; align-items: center; gap: 4px; opacity: .85; }
.po-short__vues svg { width: 14px; height: 14px; fill: #fff; }

/* Petit mot de confirmation (copie du lien). */
.po-short-toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(10px);
  background: var(--ru-texte,#0e2438); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600;
  z-index: 100003; opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.po-short-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Panneau de commentaires (feuille qui remonte). */
.po-noscroll { overflow: hidden; }
.po-short-coms { position: fixed; inset: 0; z-index: 100002; align-items: flex-end; justify-content: center; }
.po-short-coms[hidden] { display: none; }
.po-short-coms:not([hidden]) { display: flex; }
.po-short-coms__voile { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.po-short-coms__feuille {
  position: relative; width: 100%; max-width: 520px; max-height: 78vh; display: flex; flex-direction: column;
  background: var(--pf-bg, #fff); color: var(--pf-text, #0f0f0f);
  border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.35);
  animation: po-coms-up .22s ease;
}
@keyframes po-coms-up { from { transform: translateY(14px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.po-short-coms__tete {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  border-bottom: 1px solid var(--pf-line, #e5e5e5);
}
.po-short-coms__t { font-weight: 800; font-size: 15px; }
.po-short-coms__x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--pf-muted, #606060); }
.po-short-coms__corps { overflow-y: auto; padding: 6px 16px 18px; }
.po-short-coms__charge { height: 60px; }
.po-short-coms__charge::after {
  content: ""; display: block; width: 26px; height: 26px; margin: 16px auto; border-radius: 50%;
  border: 3px solid var(--pf-line, #e5e5e5); border-top-color: var(--pf-brand, #e50914); animation: po-spin .8s linear infinite;
}
@keyframes po-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .po-short-coms__feuille { animation: none; }
  .po-short-coms__charge::after { animation: none; }
}

/* Onglet « Shorts » sur la page de chaine : grille de tuiles verticales,
   legere (aucune lecture auto), qui ouvre le fil sur le short choisi. */
.po-pf__shortgrille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
}
.po-pf__shorttuile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 9/16; border-radius: 12px; overflow: hidden; text-decoration: none; color: #fff;
  padding: 12px; background: radial-gradient(120% 80% at 50% 0%, #2a2f3a 0%, #14161c 60%, #0a0b0f 100%);
}
.po-pf__shorttuile::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.72));
}
.po-pf__shorttuile-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; transition: transform .15s ease, background .15s ease;
}
.po-pf__shorttuile:hover .po-pf__shorttuile-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(255,255,255,.26); }
.po-pf__shorttuile-titre {
  position: relative; z-index: 1; font-weight: 700; font-size: 13.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.po-pf__shorttuile-vues { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; opacity: .9; margin-top: 4px; }
.po-pf__shorttuile-vues svg { width: 14px; height: 14px; fill: #fff; }


/* -- Régie (spectateur) : « Activer le son » ---------------------------------
   Les navigateurs refusent de démarrer le son sans geste de la personne ; les
   caméras jouent donc en muet jusqu'à ce toucher / clic. */
.po-regie__son-on {
  position: absolute; left: 10px; top: 10px; z-index: 8;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px 0 10px;
  border: 0; border-radius: 999px;
  background: rgba(10, 10, 10, .8); color: #fff;
  font: 600 13px/1.2 var(--pf-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.po-regie__son-on svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.po-regie__son-on:hover { background: var(--ru-accent-fonce,#c20811); }

/* Avis bref (« Ajoutée à À regarder plus tard », « Liste créée »). */
.po-pf-avis {
  position: fixed; left: 50%; bottom: 28px; z-index: 100004;
  transform: translateX(-50%) translateY(10px);
  max-width: min(92vw, 460px); padding: 11px 18px; border-radius: 12px;
  background: #0A0A0A; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.po-pf-avis.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Création d'une liste de lecture (page Listes de lecture, onglet Mes listes). */
.po-pf__nliste { border: 1px solid var(--pf-line, rgba(0,0,0,.12)); border-radius: 14px; padding: 14px; margin: 0 0 18px; max-width: 760px; }
.po-pf__nliste-lbl { display: block; font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.po-pf__nliste-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.po-pf__nliste-row .po-ev-form__in { flex: 1 1 220px; min-width: 0; margin: 0; }
.po-pf__nliste-pub { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; min-height: 44px; }
.po-pf__nliste-go { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); font-weight: 700; font-size: 14px; cursor: pointer; }
.po-pf__nliste-go:hover, .po-pf__nliste-go:focus-visible { background: #E50914; }
.po-pf__nliste-go:disabled { opacity: .6; cursor: default; }
.po-pf__nliste-aide { margin: 8px 0 0; font-size: 12.5px; color: var(--pf-muted, #777); }

/* Fenêtre de la plateforme (renommer, confirmer) : remplace les boîtes natives
   du navigateur. Centrée, X rond, boutons au doigt. */
html.po-pf-dlg-ouvert, html.po-pf-dlg-ouvert body { overflow: hidden; }
.po-pf-dlg-fond {
  position: fixed; inset: 0; z-index: 100020;
  background: rgba(10, 10, 10, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.po-pf-dlg {
  position: relative; width: min(92vw, 440px); max-height: 86vh; overflow-y: auto;
  background: #fff; color: var(--ru-texte,#0e2438); border-radius: 18px; padding: 22px 18px 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  animation: po-dlg-entre .18s ease-out;
}
@keyframes po-dlg-entre { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.po-pf-dlg__x { position: absolute !important; top: 12px; right: 12px; }
.po-pf-dlg__t { margin: 4px 52px 12px 0; font-family: inherit; font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--ru-texte,#0e2438); letter-spacing: 0; }
.po-pf-dlg__txt { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #444; }
.po-pf-dlg__in {
  display: block; width: 100%; box-sizing: border-box; min-height: 48px; margin: 0 0 18px;
  padding: 10px 14px; border: 1px solid #cfcfcf; border-radius: 12px; font-size: 16px; color: var(--ru-texte,#0e2438); background: #fff;
}
.po-pf-dlg__in:focus { outline: none; border-color: var(--ru-texte,#0e2438); box-shadow: 0 0 0 3px var(--ru-accent-filet,rgba(229,9,20,.45)); }
.po-pf-dlg__pied { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.po-pf-dlg__non, .po-pf-dlg__oui {
  min-height: 46px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer; border: 0;
}
.po-pf-dlg__non { background: #f1f1f1; color: var(--ru-texte,#0e2438); }
.po-pf-dlg__non:hover { background: #e2e2e2; }
.po-pf-dlg__oui { background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); }
.po-pf-dlg__oui:hover { background: var(--ru-accent-fonce,#c20811); }
.po-pf-dlg__oui--danger { background: var(--ru-erreur,#b42318); }
.po-pf-dlg__oui--danger:hover { background: #8f1c13; }
.po-pf-dlg__oui:disabled { opacity: .45; cursor: default; }
@media (max-width: 420px) { .po-pf-dlg__pied > * { flex: 1 1 0; } }

/* Menu « Enregistrer dans... » : nouvelle liste repliée, bouton Enregistrer. */
.po-pf__save-plus {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px 6px;
  border: 0; border-top: 1px solid var(--pf-line); background: none; color: var(--pf-text, #0A0A0A);
  font-size: 14px; font-weight: 700; cursor: pointer; text-align: left;
}
.po-pf__save-plus svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.po-pf__save-plus[hidden], .po-pf__save-new[hidden], .po-pf__save-go[hidden] { display: none !important; }
.po-pf__save-pied { display: flex; justify-content: flex-end; margin-top: 12px; }
.po-pf__save-ok {
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--ru-accent,#E50914); color: var(--ru-sur-accent,#FFFFFF); font-size: 14px; font-weight: 700; cursor: pointer;
}
.po-pf__save-ok:hover { background: var(--ru-accent-fonce,#c20811); }
.po-pf__save-ok:disabled { opacity: .6; }
@media (max-width: 599px) { .po-pf__save-ok { width: 100%; min-height: 48px; font-size: 16px; } }

@media (max-width: 599px), (max-height: 500px) and (pointer: coarse) {
  /* « Enregistrer dans... » sur la même ligne que le X. */
  .po-pf .po-pf__save .po-pf__save-menu:not(.po-pf__save-menu--dans-menu) { padding-top: 18px !important; }
  .po-pf .po-pf__save-menu:not(.po-pf__save-menu--dans-menu) .po-pf__save-t { margin: 8px 56px 12px 4px; font-size: 16px; }
}

/* Player One : audio et transitions des Shorts. Portée limitée aux Shorts. */
.po-short-ed__audio { display: grid; gap: 10px; padding: 14px; margin: 14px 0; border: 1px solid var(--pf-bord, rgba(0,0,0,.16)); border-radius: 12px; }
.po-short-ed__audio legend { padding: 0 6px; font-weight: 750; }
.po-short-ed__audio label { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.po-short-ed__audio-file { display: grid; gap: 8px; padding: 12px; background: var(--pf-surface); border-radius: 9px; }
.po-short-ed__audio-file.po-hide { display: none; }
.po-short-ed__audio-file input[type=file] { min-width: 0; max-width: 100%; }
.po-short-ed__audio-file p { font-size: 12px; margin: 0; color: var(--pf-muted); }
.po-short-ed__audio-file audio { width: 100%; max-width: 100%; }
.po-short-ed__audio-file audio[hidden] { display: none; }
.po-short-ed__transition { display: grid; gap: 6px; margin: 14px 0; font-size: 14px; font-weight: 650; }
.po-short__scene { z-index: 1; }
.po-short::after { content: ''; position: absolute; inset: 0; background: #000; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .15s ease-in-out; }
.po-short.po-short--transition::after { opacity: .85; }
.po-short__son { position: absolute; right: 12px; top: 12px; z-index: 7; width: 38px; height: 38px; display: grid; place-items: center; background: rgba(0,0,0,.66); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; cursor: pointer; font-size: 19px; }
.po-short__son[aria-pressed=true] { background: rgba(229,9,20,.9); }
.po-short__son:focus-visible { outline: 2px solid white; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .po-short::after { transition: none; } }

/* Lien vers la liste officielle, sous les recommandations (Player One). */
.po-pf__promo-link { display:inline-flex; align-items:center; max-width:100%; margin:0 0 12px; padding:6px 10px; border:1px solid var(--pf-brand,#E50914); border-radius:8px; color:var(--pf-brand,#E50914); text-decoration:none; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.po-pf__promo-link:hover,.po-pf__promo-link:focus-visible { text-decoration:underline; }