/**
 * Player One : couche mobile.
 *
 * Chargée APRÈS public.css, uniquement sur les pages de la plateforme. Tout
 * ce qui concerne le téléphone et la tablette est regroupé ici, avec les seuils
 * standard de l'industrie (classes de fenêtre Material 3) :
 *
 *   téléphone        : jusqu'à 599 px   (360, 375, 390, 393, 412, 430)
 *   petite tablette  : 600 à 839 px     (iPad mini portrait 744/768, 810, 820, 834)
 *   tablette / portable : 840 à 1199 px
 *
 * Règles de la maison, vérifiées au pixel à chaque passe :
 *   1. Jamais de défilement horizontal de la page.
 *   2. Un menu ou une option qui s'ouvre reste FIXE et entier dans l'écran
 *      (sur téléphone : feuille qui monte du bas, jamais coupée sur un côté).
 *   3. Cibles tactiles de 44 px minimum (Apple 44 pt, Google 48 dp).
 *   4. Champs à 16 px : sous ce seuil, l'iPhone zoome toute la page.
 *   5. Zones sûres (encoche, barre d'accueil) respectées.
 *
 * Rien ici ne s'applique au-delà de 1199 px : l'affichage ordinateur reste
 * exactement celui de public.css.
 */

/* ==========================================================================
 * 0. Jetons
 * ========================================================================== */

/* Aussi sur :root : des éléments hors de .po-pf (boutons flottants d'autres
   logiciels RU, voile) s'en servent. */
:root,
.po-pf {
  --pf-tabbar-h: 58px;
  --pf-top-h:    56px;
  --pf-or:       var(--ru-accent,#E50914);
  --pf-barre:    #FFFFFF; /* barre du bas claire (charte : plus de thème foncé) */
  /* Marges système (encoche, zone de gestes) : volontairement à 0. Voir la
     balise viewport de templates/page-pleine.php : sans « viewport-fit=cover »,
     le navigateur garde lui-même la page hors de ces zones. Les brancher sur
     env(safe-area-*) a produit, sur RU Community, une bande vide sous la barre
     du bas (Firefox Android, Samsung Internet). */
  --sa-top:      0px;
  --sa-bottom:   0px;
  --sa-left:     0px;
  --sa-right:    0px;
}

/* ==========================================================================
 * 1. Fondations (toutes tailles d'écran tactiles)
 * ========================================================================== */

/* Filet de sécurité : la page ne défile JAMAIS de côté. « clip » (et non
   « hidden ») ne crée pas de conteneur de défilement : la barre du haut reste
   collante (sticky). Les vraies causes de débordement sont corrigées plus bas,
   ce filet ne sert qu'à absorber un contenu imprévu (image collée, etc.). */
/* Pas de « overflow » sur html ni body (comme FluentCommunity) : on laisse la
   fenêtre défiler normalement, la barre du bas reste calée sur elle. */
.po-pf { overflow-x: clip; }

/* Les longs mots et les adresses web se coupent au lieu de pousser la page. */
.po-pf { overflow-wrap: break-word; }
.po-pf :is(.po-pf__desc, .po-pf__com-texte, .po-ev__desc, .po-pf__chan-bio,
           .po-ev__sdesc-txt, .po-pf__card-title, .po-pf__stitle, .po-pf__title,
           .po-ev__title, .po-pf__billet-txt, .po-chat__txt) {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Contenu libre (description, commentaires) : rien ne dépasse sa colonne. */
.po-pf :is(.po-pf__desc, .po-pf__com-texte, .po-ev__desc) :is(img, video, iframe, table, pre) {
  max-width: 100%;
  height: auto;
}
.po-pf :is(.po-pf__desc, .po-ev__desc) pre { overflow-x: auto; }

/* Hauteur réelle de l'écran : 100vh déborde sous la barre d'adresse mobile. */
.po-pf { min-height: 100vh; }   /* pas de dvh : il change pendant le défilement et fait sautiller la page */

/* iPhone (quelle que soit la largeur) : un champ sous 16 px fait zoomer toute
   la page au toucher. On aligne tous les champs sur 16 px. */
@supports (-webkit-touch-callout: none) {
  .po-pf :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea),
  .po-email-gate :is(input, select, textarea) { font-size: 16px !important; }
}

/* Tout écran tactile (Android, iPad, téléphone couché) : champs à 16 px. */
@media (pointer: coarse) {
  :is(.po-pf, .po-chatmur) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) {
    font-size: 16px !important;
  }
}

/* Pas de surbrillance grise au toucher, pas de délai de double-toucher. */
.po-pf :is(a, button, summary, label, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Écrans tactiles : ce qui n'apparaissait qu'au survol de la souris est
   toujours visible (on ne peut pas « survoler » avec un doigt). */
@media (hover: none) {
  .po-chat__acts { display: flex !important; position: static; margin-top: 6px; flex-wrap: wrap; }
  .po-chat__msg { padding-right: 0; }
  .po-ev__part-play { opacity: 1 !important; }
}


/* ==========================================================================
 * 0b. COQUE D'APPLICATION (téléphone et petite tablette)
 *
 * Symptôme : la barre du bas « sursaute » pendant le défilement au doigt,
 * puis revient à sa place. Cause (la même que sur RU Community, 2026-09-23) :
 * quand la PAGE entière défile, le navigateur cache et remontre sa barre
 * d'adresse ; la zone visible change de hauteur à chaque geste et toute barre
 * fixée en bas suit ce mouvement.
 * Solution (celle de RU Community en ligne, confirmée sur le téléphone de
 * Dany) : la page ne défile plus ; seul le contenu de Player One défile, dans
 * un cadre fixé aux quatre bords. La barre d'adresse ne bouge plus, la barre
 * du bas non plus. Ordinateur (840 px et plus) : inchangé.
 * ========================================================================== */
@media (max-width: 839px) {
  html:has(body.po-pf-page .po-pf__tabbar),
  body.po-pf-page:has(.po-pf__tabbar) {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body.po-pf-page .po-pf:has(> .po-pf__tabbar),
  body.po-pf-page .po-pf:has(.po-pf__tabbar) {
    position: fixed;
    inset: 0;
    height: auto;          /* ancrée aux deux bords, aucune unité d'écran */
    min-height: 0 !important;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  /* Barre d'administration WordPress (comptes admin seulement). */
  body.admin-bar.po-pf-page .po-pf:has(.po-pf__tabbar) { top: 46px; }
  /* Menu ouvert : le contenu ne défile plus dessous. */
  html.po-pf-verrou body.po-pf-page .po-pf { overflow: hidden !important; }
  /* Shorts : le défilement cran par cran se fait maintenant dans la coque. */
  body.po-pf-page .po-pf:has(.po-shorts-feed) { scroll-snap-type: y mandatory; }
  /* Plein écran simulé : la barre d'admin ne passe pas par-dessus. */
  html.po-pseudo-fs-actif #wpadminbar { display: none !important; }
}
@media (min-width: 783px) and (max-width: 839px) {
  body.admin-bar.po-pf-page .po-pf:has(.po-pf__tabbar) { top: 32px; }
}

/* ==========================================================================
 * 1b. Tiroir de navigation (mode tiroir : 1000 px et moins, comme public.js)
 * ========================================================================== */

@media (max-width: 1000px) {
  /* -- Tiroir de navigation : pleine hauteur, par-dessus la barre du haut --
     (Avant : calé à 60 px alors que la barre fait 54 px, et coupé sous la
     barre d'adresse. Standard Material : le tiroir couvre toute la hauteur.) */
  .po-pf__nav {
    top: 0 !important;
    bottom: 0;
    height: 100vh !important;
    height: 100dvh !important;
    width: min(300px, 84vw) !important;
    z-index: 120 !important;
    padding: calc(18px + var(--sa-top)) 12px calc(24px + var(--sa-bottom)) calc(12px + var(--sa-left)) !important;
    overscroll-behavior: contain;
  }
  .po-pf__voile { inset: 0 !important; z-index: 119 !important; }
  /* Barre d'administration WordPress (comptes admin) : le haut du tiroir ne
     doit pas passer dessous. */
  body.admin-bar .po-pf__nav { padding-top: calc(18px + 46px + var(--sa-top)) !important; }
  .po-pf .po-pf__nav:not(:is(.po-nav-mobile *)) { visibility: hidden; transition: transform .22s ease, visibility 0s .22s; }
  .po-pf.po-nav-mobile .po-pf__nav { visibility: visible; transition: transform .22s ease; }
  .po-pf__nav-item { min-height: 44px; }

}

/* ==========================================================================
 * 2. Téléphone et petite tablette (jusqu'à 839 px)
 * ========================================================================== */

@media (max-width: 839px) {

  /* Champs à 16 px sur tout mobile (Android zoome moins, mais la lisibilité
     et la cohérence priment). */
  .po-pf :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) {
    font-size: 16px !important;
  }

  /* -- Barre de navigation du bas (standard YouTube / Instagram / TikTok) -- */
  /* Même recette que la barre du bas de FluentCommunity, qui fonctionne sur
     le même serveur : fixée en bas, sans marge système, sans transform, sans
     script qui la déplace, hauteur fixe. La page défile normalement dessous. */
  .po-pf__tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;              /* sous le voile (999) et les feuilles de menu (1000) */
    height: var(--pf-tabbar-h);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transform: none;
    background: var(--pf-barre);
    border-top: 1px solid rgba(0, 0, 0, .10);
  }
  .po-pf__tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #606060;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
  }
  .po-pf__tab svg { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }
  .po-pf__tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
  .po-pf__tab.po-on { color: var(--pf-or); }
  /* Boutons flottants des autres logiciels RU (roue des témoins, sélecteur de
     langue RU Translator) : posés AU-DESSUS de la barre du bas, gauche et
     droite, comme dans RU Community. Aucun autre plugin n'est modifié. */
  body.po-pf-page #ru-revoke-btn { left: 14px !important; right: auto !important; top: auto !important; bottom: calc(var(--pf-tabbar-h) + 12px) !important; }
  body.po-pf-page #rutr-sw-float, body.po-pf-page .rutr-sw-float { right: 14px !important; left: auto !important; top: auto !important; bottom: calc(var(--pf-tabbar-h) + 12px) !important; }
  /* Avec la bannière publicitaire du bas, ils montent au-dessus d'elle aussi. */
  body.po-pf-page:has(.po-ad--mobile) #ru-revoke-btn,
  body.po-pf-page:has(.po-ad--mobile) #rutr-sw-float, body.po-pf-page:has(.po-ad--mobile) .rutr-sw-float { bottom: calc(var(--pf-tabbar-h) + 104px) !important; }
  /* Clavier ouvert, menu ouvert, plein écran simulé : ils se retirent. */
  html.po-kb body.po-pf-page #ru-revoke-btn, html.po-kb body.po-pf-page .rutr-sw-float, html.po-kb body.po-pf-page #rutr-sw-float,
  html.po-pf-verrou body.po-pf-page #ru-revoke-btn, html.po-pf-verrou body.po-pf-page .rutr-sw-float, html.po-pf-verrou body.po-pf-page #rutr-sw-float,
  html.po-pseudo-fs-actif #ru-revoke-btn, html.po-pseudo-fs-actif .rutr-sw-float, html.po-pseudo-fs-actif #rutr-sw-float { display: none !important; }

  /* Clavier ouvert (classe posée par mobile.js) : la barre du bas se retire,
     comme dans RU Community ; elle ne monte jamais sur le clavier. */
  html.po-kb .po-pf__tabbar,
  html.po-kb .po-ad--mobile { display: none !important; }
  .po-pf__tab:active { opacity: .7; }
  /* Bouton « + » au centre (17 octobre 2026) : ouvre le panneau Créer. */
  button.po-pf__tab { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
  .po-pf__tab--plus { color: var(--pf-or); }
  .po-pf__plus { display: flex; align-items: center; justify-content: center; width: 46px; height: 30px; border-radius: 9px; background: var(--pf-or); }
  .po-pf__plus svg { width: 22px; height: 22px; fill: #fff; }
  .po-creer-bas { position: fixed; inset: 0; z-index: 1001; }
  .po-creer-bas[hidden] { display: none; }
  .po-creer-bas__voile { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s ease; }
  /* Fenêtre centrée, comme tous les menus de Player One au téléphone (pas de feuille collée en bas). */
  .po-creer-bas__panneau { position: absolute; left: 50%; top: 50%; width: min(92vw, 420px); max-height: 80vh; overflow-y: auto; background: #fff; color: #0f0f0f;
    border-radius: 18px; padding: 8px 16px 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); transform: translate(-50%, -46%); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
  .po-creer-bas.ouvert .po-creer-bas__voile { opacity: 1; }
  .po-creer-bas.ouvert .po-creer-bas__panneau { transform: translate(-50%, -50%); opacity: 1; }
  .po-creer-bas__tete { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 800; min-height: 44px; }
  .po-creer-bas__x { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 50%; cursor: pointer; color: inherit; }
  .po-creer-bas__x svg { width: 20px; height: 20px; fill: currentColor; }
  .po-creer-bas__it { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 8px 4px; border-top: 1px solid rgba(0, 0, 0, .08); color: inherit; text-decoration: none; }
  .po-creer-bas__t { font-size: 15px; font-weight: 700; }
  .po-creer-bas__d { font-size: 13px; color: #606060; }
  @media (prefers-reduced-motion: reduce) { .po-creer-bas__voile, .po-creer-bas__panneau { transition: none; } }

  /* La page garde de la place pour la barre du bas. */
  .po-pf { padding-bottom: calc(var(--pf-tabbar-h) + var(--sa-bottom) + 12px); }

  /* La bannière publicitaire mobile se pose AU-DESSUS de la barre du bas. */
  .po-ad--mobile {
    bottom: calc(var(--pf-tabbar-h) + var(--sa-bottom)) !important;
    max-width: 100vw;
    overflow: hidden;
  }
  .po-ad--mobile.po-ad--proportion,
  .po-ad--mobile .po-ad--proportion { width: 100% !important; max-width: 100%; }
  .po-ad--mobile :is(img, a, div) { max-width: 100%; }
  .po-pf:has(.po-ad--mobile) { padding-bottom: calc(var(--pf-tabbar-h) + var(--sa-bottom) + 100px); }

  /* Le mini-lecteur flotte au-dessus de la barre du bas. */
  .player-one-wrap.po-mini { bottom: calc(var(--pf-tabbar-h) + var(--sa-bottom) + 10px) !important; }

  /* Marge latérale standard de 16 px (la vidéo pleine largeur s'y cale). */
  .po-pf__content { padding-left: calc(16px + var(--sa-left)) !important; padding-right: calc(16px + var(--sa-right)) !important; }

  /* Tablette : une seule carte par rangée à 768 px, c'était du gaspillage. */
  .po-pf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }

  /* Chips de catégories : on les fait passer à la ligne, pas de défilement
     de côté pour trouver une option. */
  .po-pf__chips { flex-wrap: wrap; overflow-x: visible; }

  /* Onglets d'une chaîne : se partagent la largeur, jamais de débordement. */
  .po-pf__onglets { display: flex; flex-wrap: nowrap; width: 100%; overflow: visible; }
  .po-pf__onglet {
    flex: 1 1 0; min-width: 0;
    padding: 12px 4px !important;
    text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }

  /* Filtres : le menu est une feuille fixe (voir §4). */

  /* Fiche d'un film : étiquette au-dessus de la valeur. */
  .po-pf__film { flex-direction: column; }
  .po-pf__film-affiche img { width: 120px; }
  .po-pf__film-row, .po-pf__film-ligne { flex-wrap: wrap; }
  .po-pf__film-lbl { width: auto !important; flex: 0 0 100% !important; }

  /* Série : bandeau plus sobre. */
  .po-fs__hero { aspect-ratio: auto; min-height: 180px; padding: 18px 16px; }
  .po-fs__detail { padding: 18px 16px; }
}

/* ==========================================================================
 * 3. Téléphone (jusqu'à 599 px)
 * ========================================================================== */

@media (max-width: 599px) {

  /* -- Barre du haut --
     Hamburger + logo à gauche ; loupe, Créer, cloche, avatar à droite.
     La recherche se déplie par-dessus la barre au toucher de la loupe. */
  .po-pf__top {
    position: sticky;
    height: calc(var(--pf-top-h) + var(--sa-top)) !important;
    padding: var(--sa-top) calc(10px + var(--sa-right)) 0 calc(8px + var(--sa-left)) !important;
    gap: 6px !important;
  }
  .po-pf__top-gauche { gap: 6px; min-width: 0; }
  .po-pf__burger { width: 44px; height: 44px; }
  .po-pf__logo img { height: 26px !important; }

  /* Bouton « Visite guidée » : retiré de la barre sur téléphone (il reste
     dans le menu, « Revoir le tour guidé »). */
  .po-pf__top .po-pf__act--tour { display: none !important; }

  .po-pf__compte { gap: 2px !important; margin-left: auto; min-width: 0; }

  /* La recherche repliée en loupe de 44 px. */
  .po-pf__top .po-pf__search {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0 0 0 auto;
    max-width: none;
    order: 2;
  }
  .po-pf__top .po-pf__compte { order: 3; margin-left: 0; }
  .po-pf__top .po-pf__search svg { left: 13px; width: 20px; height: 20px; z-index: 1; fill: var(--pf-text, #0f0f0f) !important; }
  .po-pf__top .po-pf__search input[type="search"] {
    width: 44px; height: 44px;
    padding: 0 0 0 44px !important;
    border-color: transparent !important;
    background: transparent !important;
    color: transparent !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .po-pf__top .po-pf__search input[type="search"]::placeholder { color: transparent; }
  .po-pf__top .po-pf__search input[type="search"]::-webkit-search-cancel-button { display: none; }
  /* Déplié : la recherche prend toute la barre. */
  .po-pf__top .po-pf__search:focus-within {
    position: absolute;
    left: calc(8px + var(--sa-left)); right: calc(8px + var(--sa-right));
    top: calc(var(--sa-top) + 6px);
    width: auto; height: 44px;
    z-index: 5;
  }
  .po-pf__top .po-pf__search:focus-within input[type="search"] {
    width: 100%;
    padding: 0 16px 0 44px !important;
    background: var(--pf-bg, #ffffff) !important;
    border-color: var(--ru-accent-filet, rgba(229,9,20,.45)) !important;
    color: var(--pf-text, #0f0f0f) !important;
    cursor: text;
  }
  .po-pf__top .po-pf__search:focus-within input[type="search"]::placeholder { color: var(--pf-faint, #6b7280); }

  /* Créer, cloche, avatar : 44 px de zone de toucher. */
  .po-pf__top .po-pf__creer {
    width: 44px; height: 44px; padding: 0 !important;
    justify-content: center; border-radius: 50%;
  }
  .po-pf__top .po-pf__creer span { display: none; }
  .po-pf__top .po-pf__creer svg { width: 26px; height: 26px; }
  .po-pf__cloche-btn { width: 44px !important; height: 44px !important; }
  .po-pf__moi-btn {
    width: 44px !important; height: 44px !important;
    display: flex; align-items: center; justify-content: center;
    overflow: visible !important;
  }
  .po-pf__moi-btn :is(img, .po-avatar-rond) { width: 32px !important; height: 32px !important; }
  .po-pf__top .po-pf__act--suivre { padding: 0 14px; height: 40px; font-size: 14px; white-space: nowrap; }

  /* -- Contenu -- */
  .po-pf__content { padding: 14px 16px 24px !important; }
  .po-pf__grid { grid-template-columns: 1fr; gap: 24px; }

  /* Rangée « En direct » : sur téléphone, une vraie liste verticale compacte
     (vignette + texte), pas un carrousel qu'il faut pousser de côté. */
  .po-live-rail__grid {
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-columns: 1fr;
    overflow: visible !important;
    gap: 14px;
  }

  /* Barre de tri : les options passent à la ligne. */
  .po-pf__tris, .po-pf__tri-barre, .po-pf__sortbar { flex-wrap: wrap; }

  /* Onglets de chaîne : pleine largeur (bord à bord) pour que chaque libellé
     tienne entier, même « Communauté » à 360 px. */
  .po-pf__onglets { margin-left: -16px !important; margin-right: -16px !important; width: auto !important; gap: 0 !important; }
  .po-pf__onglet { font-size: 14px !important; min-height: 48px; display: flex !important; align-items: center; justify-content: center; }

  /* Fiche film */
  .po-pf__film { padding: 14px; gap: 12px; }

  /* Cartes d'événement : la bannière garde son format, sans écraser le texte. */
  .po-ev__banniere img, .po-ev__banniere { max-height: 180px; }
}

/* ==========================================================================
 * 4. Menus et options : FENÊTRES CENTRÉES sur téléphone
 *
 * Chaque menu qui s'ouvre (notifications, Créer, compte, Enregistrer, « ⋮ »,
 * filtres, options d'un événement, bulle d'aide) et chaque fenêtre (partage,
 * signalement, commentaires des shorts, modification d'une vidéo) s'ouvre AU
 * CENTRE de l'écran, entière, avec un voile derrière et un bouton X rond en
 * haut à droite (ajouté par mobile.js quand le menu n'en a pas). Elle ne
 * dépend plus de la position du bouton : elle ne peut plus sortir de l'écran.
 * ========================================================================== */

@media (max-width: 599px), (max-height: 500px) and (pointer: coarse) {
  .po-pf :is(.po-pf__cloche-menu, .po-pf__creer-menu, .po-pf__moi-menu,
             .po-pf__save-menu:not(.po-pf__save-menu--dans-menu), .po-pf__plus-menu, .po-pf__filtres-menu,
             .po-ev-carte__menu-liste),
  .po-aide-pop {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(92vw, 440px) !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 82vh !important;
    max-height: 82dvh !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 18px !important;
    border: 0 !important;
    padding: 58px 16px 16px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35) !important;
    z-index: 1000 !important;
    transform: translate(-50%, -50%) !important;
    animation: po-fenetre-entre .18s ease-out;
    background: #ffffff;
    color: var(--pf-text, #0f0f0f);
  }
  /* Bulle d'aide : son X existe déjà, un peu moins d'espace en haut. */
  .po-aide-pop { padding-top: 54px !important; }

  /* Les éléments dans une fenêtre : 48 px de haut, lisibles au doigt. */
  .po-pf :is(.po-pf__creer-item, .po-pf__moi-nav a, .po-pf__moi-liens a,
             .po-pf__plus-item, .po-ev-carte__menu-item, .po-pf__save-row) {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: 16px;
  }
  .po-pf__creer-item { flex-direction: column; align-items: flex-start !important; justify-content: center; padding: 10px 12px !important; }
  .po-pf__creer-item-d { font-size: 13px; }
  .po-pf__cloche-menu { padding-left: 0 !important; padding-right: 0 !important; }
  .po-pf__cloche-lire { min-height: 44px; padding: 0 8px; }
  .po-pf__save-rows { max-height: none !important; }
  .po-pf__filtres-menu { gap: 8px !important; }
  .po-pf__filtres-sel { min-height: 48px; }
  .po-pf__filtres-ok, .po-pf__filtres-reset { min-height: 48px; display: inline-flex; align-items: center; padding: 0 18px; }

  /* La fenêtre de filtres est dans un <details> : on garde le bouton à sa place. */
  .po-pf__filtres { position: static !important; }

  /* Fenêtres (partage, signalement, infos des vues) : centrées. */
  .po-pf__share-back { align-items: center !important; justify-content: center !important; padding: 16px !important; }
  .po-pf__share-back > .po-pf__share,
  .po-pf__share-back > * {
    max-width: 480px !important;
    width: 100% !important;
    border-radius: 18px !important;
    max-height: 86vh; max-height: 86dvh;
    overflow-y: auto;
    animation: po-fenetre-entre-simple .18s ease-out;
  }
  .po-pf__share-nets { flex-wrap: wrap; justify-content: space-around; }

  /* Commentaires des shorts : fenêtre centrée aussi. */
  .po-short-coms { align-items: center !important; padding: 16px; }
  .po-short-coms__feuille { border-radius: 18px !important; max-height: 82vh; max-height: 82dvh; animation: po-fenetre-entre-simple .18s ease-out !important; }

  /* Visite guidée : la bulle reste en bas ou en haut (placée par public.js). */
  .po-tour-bulle, .po-tour-bulle--centre {
    left: 10px !important; right: 10px !important;
    width: auto !important; max-width: none !important;
    transform: none !important;
    max-height: 60vh; max-height: 60dvh; overflow-y: auto;
  }
  .po-tour-bulle--centre { top: auto !important; bottom: calc(10px + var(--sa-bottom)) !important; }
  .po-tour-b { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .po-tour-c { font-size: 15px; }

  /* Bulle d'aide « ? » */
  .po-aide-pop__c { font-size: 15px; }
  .po-aide-pop__b { min-height: 44px; padding: 0 16px; }
}

@keyframes po-fenetre-entre {
  from { transform: translate(-50%, -48%) scale(.97); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes po-fenetre-entre-simple {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
 * Bouton X de fermeture : le MÊME partout, rond, avec le X dessiné au centre
 * exact du cercle (image vectorielle centrée, jamais le caractère « × », dont
 * la position varie d'une police à l'autre). S'applique à tous les écrans.
 * -------------------------------------------------------------------------- */
.po-pf-feuille-x, .po-pf-dlg__x,
.po-pf__vx, .po-pf__share-x, .po-short-coms__x, .po-aide-pop__x, .po-ev-form__x {
  display: inline-block !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f1f1f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230A0A0A' d='M18.3 5.7a1 1 0 00-1.4 0L12 10.6 7.1 5.7a1 1 0 10-1.4 1.4l4.9 4.9-4.9 4.9a1 1 0 101.4 1.4l4.9-4.9 4.9 4.9a1 1 0 001.4-1.4L13.4 12l4.9-4.9a1 1 0 000-1.4z'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  flex: none;
  box-sizing: border-box;
  transition: background-color .12s ease;
}
.po-pf-feuille-x:hover, .po-pf-dlg__x:hover, .po-pf__vx:hover, .po-pf__share-x:hover, .po-short-coms__x:hover, .po-aide-pop__x:hover, .po-ev-form__x:hover,
.po-pf-feuille-x:focus-visible, .po-pf__vx:focus-visible, .po-pf__share-x:focus-visible, .po-short-coms__x:focus-visible, .po-aide-pop__x:focus-visible, .po-ev-form__x:focus-visible {
  background-color: #e2e2e2 !important;
}
/* Le X ajouté aux menus : en haut à droite de la fenêtre. Il n'existe que sur
   téléphone (mobile.js l'ajoute seulement quand le menu est une fenêtre). */
.po-pf-feuille-x { position: absolute !important; top: 10px; right: 10px; z-index: 2; }
.po-aide-pop__x { top: 10px !important; right: 10px !important; }

/* ==========================================================================
 * 5. Cibles tactiles (téléphone et petite tablette)
 *
 * Objectif : 44 px pour toute commande principale (norme Apple ; Google 48 dp).
 * Commandes secondaires très denses (en-tête du chat, console de régie) :
 * 36 px minimum, toujours au-dessus du seuil légal WCAG 2.2 (24 px).
 * ========================================================================== */

@media (max-width: 839px), (pointer: coarse) {
  .po-pf :is(button, summary, select, [role="button"],
             .po-pf__act, .po-pf__tri, .po-pf__creer, .po-pf__studio-tab, .po-pf__compte-tab,
             .po-stats__periode, .po-ev__mod, .po-ev__streamer-btn, .po-pf__owner-link,
             .po-pf__sous-item, .po-pf__chip, .po-short-mode) {
    min-height: 44px;
  }
  .po-pf :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"])) {
    min-height: 44px;
  }
  .po-pf :is(.po-pf__act, .po-pf__tri, .po-pf__creer, .po-pf__studio-tab, .po-pf__compte-tab,
             .po-stats__periode, .po-ev__mod, .po-ev__streamer-btn, .po-pf__sous-item, .po-pf__chip) {
    display: inline-flex;
    align-items: center;
  }

  /* Boutons-icônes : carré de 44 px. */
  .po-pf :is(.po-pf__file-btn, .po-pf__card-kebab, .po-regie-form__del, .po-ev-form__x,
             .po-chat__iconbtn, .po-pf__bascule-btn, .po-ev-carte__menu-btn, .po-ev-carte__suppr,
             .po-ev__social, .po-pf__emo-btn, .po-regie__pmove, .po-regie__cib, .po-pf__share-x,
             .po-ev-form__del, .po-pf__queue-tog, .po-pf__drag, .po-short-ed__mini, .po-ev-form__grip) {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .po-pf__file-btn { width: 44px !important; height: 44px !important; }
  .po-pf__card-av a { display: block; line-height: 0; }
  .po-pf__logo { padding: 9px 0; }
  .po-pf :is(.po-regie__fs, .po-stats__pdf, .po-stats__csv, .po-stats__lien) { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
  .po-short__rail .po-pf__save > [data-po-listes-btn] { width: 48px !important; height: 48px !important; }
  .po-chatmur :is(.po-chat__iconbtn, .po-chatmur__mode) { min-width: 44px; min-height: 44px; }
  .po-chat__iconbtn { width: 44px !important; height: 44px !important; }
  .po-pf__plus.po-pf__card-plus { top: 58px; }
  .po-pf__card-kebab { width: 44px !important; height: 44px !important; }

  /* Petites bulles « ? » et « i » : le dessin reste petit, la zone de toucher
     fait 44 px (pseudo-élément invisible). */
  .po-pf :is(.po-aide, .po-pf__vues-info) { position: relative; }
  .po-pf :is(.po-aide, .po-pf__vues-info)::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Liens texte des commentaires (Répondre, Annuler, Effacer, J'aime). */
  .po-pf :is(.po-pf__com-lien, .po-pf__com-aime, .po-pf__desc-more, .po-pf__coms-tri-lien) {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding-top: 8px; padding-bottom: 8px;
    display: inline-flex; align-items: center;
  }

  /* Chat : en-tête et outils à 36 px (dense), saisie à 44 px. (Le mur de
     chat détaché n'est pas dans .po-pf : on le vise aussi.) */
  :is(.po-pf, .po-chatmur) :is(.po-chat__tab, .po-chat__filtre, .po-chat__pinset, .po-chat__detach,
             .po-chat__act, .po-ev__multi, .po-attente__btn) {
    min-height: 36px !important;
    padding-top: 6px; padding-bottom: 6px;
    display: inline-flex; align-items: center;
    font-size: 13px;
  }
  .po-chat__send { min-height: 44px; min-width: 64px; }
  .po-chat__swatch { width: 36px !important; height: 36px !important; }
  .po-chat__emo { min-width: 40px; min-height: 40px; font-size: 22px; }

  /* Régie (console) : boutons denses à 36 px. */
  .po-pf :is(.po-regie__band-btn, .po-regie__son, .po-regie__tr, .po-regie__lay) { min-height: 36px !important; }
}

@media (max-width: 599px) {
  /* Tri (Plus récentes / Plus vues / Plus anciennes) : contrôle segmenté sur
     une seule ligne, les trois options visibles d'un coup. */
  .po-pf__tris { flex-wrap: nowrap !important; gap: 4px !important; width: 100%; }
  .po-pf__tri { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center;
                padding-left: 6px !important; padding-right: 6px !important; font-size: 13px !important; white-space: nowrap; }
  .po-pf__toolbar { flex-wrap: wrap; row-gap: 10px; }
  .po-pf__toolbar-gauche { flex: 1 1 100%; min-width: 0; }
}

@media (max-width: 389px) {
  .po-pf__onglet { font-size: 13px !important; }
  .po-pf__tri { font-size: 12.5px !important; padding-left: 4px !important; padding-right: 4px !important; }
}

/* Menus du lecteur (vitesse, options avancées) : fenêtre centrée sur
   téléphone, au lieu d'un menu coupé en haut d'un lecteur de 200 px. */
@media (max-width: 599px), (max-height: 500px) and (pointer: coarse) {
  .player-one-wrap :is(.po-settings-menu.po-open, .po-tune-menu.po-open) {
    position: fixed !important;
    left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important;
    width: min(92vw, 420px) !important; max-width: none !important;
    max-height: 80vh; max-height: 80dvh; overflow-y: auto;
    border-radius: 18px !important;
    padding: 58px 12px 16px !important;
    z-index: 1000 !important;
    transform: translate(-50%, -50%) !important;
    background: #161616 !important;
    opacity: 1 !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  }
}


/* ==========================================================================
 * 6. Shorts : plein écran vertical, un short par cran (standard TikTok/Reels)
 * ========================================================================== */

@media (max-width: 599px) {
  html:has(.po-shorts-feed) { scroll-snap-type: y mandatory; } /* repli sans coque */
  /* Fil de Shorts : l'image occupe l'écran, la bannière du bas n'y a pas sa
     place (elle recouvrait le bas du short et ses boutons). */
  .po-pf:has(.po-shorts-feed) .po-ad--mobile { display: none !important; }
  .po-pf:has(.po-shorts-feed) { padding-bottom: calc(var(--pf-tabbar-h) + var(--sa-bottom)) !important; }
  .po-shorts-feed { gap: 0 !important; margin: 0 -16px; }
  .po-pf__content:has(> .po-shorts-feed) > .po-pf__h1 { display: none; }
  .po-pf__content:has(> .po-shorts-feed) { padding-top: 0 !important; padding-bottom: 0 !important; }
  .po-shorts-feed .po-short {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    /* Écran visible moins la barre du haut et la barre du bas. */
    height: calc(100vh - var(--pf-top-h) - var(--pf-tabbar-h));
    height: calc(100dvh - var(--pf-top-h) - var(--sa-top) - var(--pf-tabbar-h) - var(--sa-bottom));
    border-radius: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: calc(var(--pf-top-h) + var(--sa-top));
  }
  .po-short__ico { width: 48px !important; height: 48px !important; }
  :is(.po-ev__stage, .po-directdemo, .po-ev__player) .po-bandeau { --po-band-k: .56; }
  .po-short__num { font-size: 12px !important; }
  .po-short__info { padding-bottom: 18px; }
  .po-short__act--sub .po-pf__act--suivre { font-size: 12px !important; min-height: 36px; }
}


/* Page d'un direct sur téléphone : ordre des blocs standard (YouTube Live,
   Twitch) : la vidéo d'abord, le titre juste dessous, puis le chat, puis les
   caméras, les réseaux et les outils du créateur. Avant, la bannière et les
   boutons de gestion poussaient la vidéo sous le pli.
   « display: contents » aplatit les enveloppes pour ordonner leurs enfants ;
   il est retiré dès que le mode cinéma / plein écran s'active. */
@media (max-width: 839px) {
  .po-ev:has(.po-ev__stage) { display: flex; flex-direction: column; }
  .po-ev:has(.po-ev__stage) :is(.po-ev__head, .po-ev__scene, .po-ev__main) { display: contents; }
  .po-ev:has(.po-ev__stage) .po-ev__top:not(:fullscreen):not(.po-ev__top--cinema) { display: contents; }

  .po-ev:has(.po-ev__stage) .po-ev__col      { order: 1; }
  .po-ev:has(.po-ev__stage) .po-ev__cine     { order: 2; align-self: flex-end; margin: 8px 0 0; position: static; }
  .po-ev:has(.po-ev__stage) .po-ev__titre-row { order: 3; margin-top: 12px; }
  .po-ev:has(.po-ev__stage) .po-chat         { order: 4; margin-top: 14px; }
  .po-ev:has(.po-ev__stage) .po-ev__menu     { order: 5; margin-top: 16px; }
  .po-ev:has(.po-ev__stage) .po-ev__socials  { order: 6; margin-top: 14px; }
  .po-ev:has(.po-ev__stage) .po-ev__desc     { order: 7; margin-top: 14px; }
  .po-ev:has(.po-ev__stage) .po-ev__banniere { order: 8; margin-top: 16px; }
  .po-ev:has(.po-ev__stage) .po-ev__fsbar    { order: 9; }
  .po-ev:has(.po-ev__stage) > :not(.po-ev__head):not(.po-ev__scene) { order: 10; }

  /* La vidéo colle aux bords (plein écran de largeur), comme les applis. */
  .po-ev:has(.po-ev__stage) .po-ev__col { margin-left: -16px; margin-right: -16px; }
  .po-ev:has(.po-ev__stage) .po-ev__stage { border-radius: 0; }
  .po-ev:has(.po-ev__stage) .po-ev__sdesc { padding: 8px 16px 0; }
  .po-ev__titre { font-size: 21px !important; line-height: 1.25; }
}

/* Mode cinéma simulé (iPhone) : vidéo + chat couvrent tout l'écran visible. */
.po-ev__top.po-ev__top--pseudo {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  height: 100vh; height: 100dvh !important;
  margin: 0 !important;
  padding: var(--sa-top, 0px) var(--sa-right, 0px) var(--sa-bottom, 0px) var(--sa-left, 0px);
  background: #000;
}
html.po-pseudo-fs-actif, html.po-pseudo-fs-actif body { overflow: hidden !important; }
/* Vidéo en plein écran simulé (bouton ou téléphone couché) : barres et
   bannière du bas s'effacent, la coque ne défile plus derrière. */
html.po-pseudo-fs-actif .po-pf__tabbar,
html.po-pseudo-fs-actif .po-pf__top,
html.po-pseudo-fs-actif .po-ad--mobile { visibility: hidden !important; }
html.po-pseudo-fs-actif body.po-pf-page .po-pf { overflow: hidden !important; }
@media (max-width: 640px) {
  .po-ev__top--pseudo .po-chat { position: absolute; right: 0; top: 0; bottom: 0; width: 78vw; max-width: 320px; }
}

/* ==========================================================================
 * 7. Direct, événement, chat
 * ========================================================================== */

/* Mode cinéma et plein écran : hauteur réelle (100dvh) et zones sûres. Avec
   100vh, le champ du chat passait sous la barre de Safari. */
.po-ev__top:fullscreen,
.po-ev__top--cinema { height: 100vh; height: 100dvh !important; }
.po-ev__top:fullscreen .po-chat,
.po-ev__top--cinema .po-chat { height: 100vh; height: 100dvh !important; padding-bottom: var(--sa-bottom, 0px); }
.po-regie__prog:fullscreen { height: 100dvh !important; }
.po-ev__fsbar { top: var(--sa-top, 0px) !important; }

@media (max-width: 839px) {
  /* Chat sous la vidéo : il suit la hauteur visible (clavier ouvert compris,
     variable posée par mobile.js), jamais plus haut que l'écran. */
  .po-ev__top .po-chat,
  .po-ev .po-chat {
    height: min(460px, calc(var(--po-vvh, 100dvh) - 120px)) !important;
    max-height: none;
  }
  .po-chat__input { min-width: 0; flex: 1 1 auto; }
  .po-chat__form, .po-chat__saisie { gap: 6px; }

  /* Bandeau de nouvelles sur la vidéo : réduit en proportion du lecteur
     (avant : 22 px de titre et 62 px de haut, soit 70 % d'une vidéo de
     200 px). L'échelle garde exactement le dessin du bandeau. */
  :is(.po-ev__stage, .po-directdemo, .po-ev__player) .po-bandeau {
    --po-band-k: .8;
    left: 8px !important; right: auto !important; bottom: 8px !important;
    width: calc((100% - 16px) / var(--po-band-k));
    transform: scale(var(--po-band-k));
    transform-origin: bottom left;
  }
  /* Carte « Première » et suggestions de fin : tiennent dans le cadre. */
  .po-prem { padding: 12px !important; }
  .po-prem * { font-size: 13px; }
  .po-pf__endsug-grille { grid-template-columns: 1fr !important; padding: 10px !important; overflow-y: auto; }
}


/* ==========================================================================
 * 8. Lisibilité : aucun texte sous 12 px sur téléphone et tablette
 * (étiquettes, pastilles de chat, statistiques, régie). Les graphismes posés
 * SUR la vidéo (bandeau, mention de commandite) gardent leur échelle.
 * ========================================================================== */
@media (max-width: 839px), (pointer: coarse) {
  .po-pf :is(.po-pf__pub-tag, .po-pf__emo-titre, .po-pf__card-prem, .po-ev-carte__termine, .po-spo__mention,
             .po-ev-carte__spo, .po-ev__streamer-soon, .po-ev__ep-badge, .po-ev__eprow-badge, .po-ev__eprow-kick,
             .po-pf__creer-sep, .po-ev__part-titre, .po-ev-carte__avenir, .po-chat__tab, .po-chat__detach,
             .po-chat__filtre, .po-attente__etat, .po-attente__btn, .po-chat__suivi-b, .po-chat__pinset,
             .po-chat__sond-pied, .po-chat__sond-x, .po-chat__chip, .po-chat__badge, .po-chat__act, .po-chat__flag,
             .po-regie__prog-tag, .po-regie__badge, .po-regie__grp-t, .po-regie__vig-live, .po-regie__pv-tag,
             .po-regie__vig-off, .po-regie-demo__pastille, .po-ev-carte__regie-tag, .po-regie-guide__note,
             .po-regie__band-flbl, .po-stats__kpi-k, .po-stats__table th, .po-stats__date, .po-stats__sup-mot,
             .po-stats__ret-lbl, .po-stats__ret-legende, .po-ep-parts-t, .po-ev__parts-t, .po-ev__part-num,
             .po-fs__card-tag, .po-fs__ep-dur, .po-aide-pop__cpt, .po-tour-cpt, .po-short__num) {
    font-size: 12px !important;
  }
  .po-stats__table td { font-size: 13px; }
}


/* ==========================================================================
 * 9. Téléphone couché (paysage : 844×390, 932×430...)
 * La hauteur est la vraie contrainte : la vidéo ne dépasse jamais l'écran.
 * ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .po-pf__top { padding-left: calc(12px + var(--sa-left)) !important; padding-right: calc(12px + var(--sa-right)) !important; }

  /* Vidéo d'une page de lecture : tient dans la hauteur visible, centrée. */
  .po-pf__stage { max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); display: flex; justify-content: center; background: #000; }
  .po-pf__stage .player-one-wrap,
  .po-ev__stage .player-one-wrap {
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    width: auto !important;
    max-width: 100%;
    margin-left: auto; margin-right: auto;
  }

  /* Shorts : le cadre vertical tient dans la hauteur. */
  .po-shorts-feed .po-short { max-height: calc(100dvh - 76px); width: auto; aspect-ratio: 9 / 16; }

  /* Chat d'un direct : jamais plus haut que l'écran. */
  .po-ev .po-chat { height: calc(var(--po-vvh, 100dvh) - 80px) !important; max-height: none; }
}

/* Menu déroulant ouvert vers le haut (placé par mobile.js quand la place
   manque sous le bouton, tablette et ordinateur). */
.po-pf :is(.po-pf__plus-menu, .po-pf__save-menu).po-vers-haut { top: auto !important; bottom: calc(100% + 6px) !important; }


/* ==========================================================================
 * 10. Assistants (publier, modifier, créer un direct) et fenêtre « Modifier »
 * Avant : la rangée Supprimer · Précédent · Annuler · Suivant débordait à
 * droite ; « Suivant » et « Enregistrer » étaient coupés sur téléphone.
 * ========================================================================== */
@media (max-width: 599px) {
  .po-wz__nav { flex-wrap: wrap; gap: 10px !important; }
  .po-wz__espace { display: none; }
  .po-wz__nav > :not([hidden]) { flex: 1 1 calc(50% - 5px); min-width: 0; justify-content: center; text-align: center; min-height: 48px; }
  /* L'action principale (Suivant, Enregistrer, Publier, Déposer) en premier,
     pleine largeur, sous le pouce. */
  .po-wz__nav > :is([data-wz-next], [data-wz-publier]) { order: -1; flex-basis: 100%; }
  /* Supprimer : à part, en dernier, pleine largeur. */
  .po-wz__nav > [data-po-vsupprimer] { order: 10; flex-basis: 100%; }

  /* Fenêtre « Modifier la vidéo » : centrée, presque tout l'écran. */
  .po-pf__vmodale { padding: 12px !important; align-items: center; }
  .po-pf__vboite { max-width: 560px; max-height: 94vh; max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; padding: 16px 16px 22px; }
}

/* Choisir une image de l'appareil pour la vignette. */
.po-up-image-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; margin: 4px 0 10px;
  border: 1px solid var(--pf-line, #e5e5e5); border-radius: 999px;
  background: #ffffff; color: var(--pf-text, #0f0f0f);
  font-weight: 600; font-size: 14px; cursor: pointer;
}
.po-up-image-btn svg { fill: currentColor; flex-shrink: 0; }
.po-up-vignettes-rien { color: var(--pf-text, #0f0f0f); font-weight: 600; }

/* Voile derrière une feuille ouverte (créé par mobile.js). */
.po-pf-feuille-voile {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, .45);
  animation: po-voile-entre .18s ease-out;
}
.po-pf-feuille-voile[hidden] { display: none; }
html.po-pf-verrou, html.po-pf-verrou body { overflow: hidden !important; }

@keyframes po-feuille-monte { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes po-voile-entre   { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .po-pf *, .po-aide-pop, .po-pf-feuille-voile { animation: none !important; }
  /* Livraison 4 : les glissements (tiroir, barre, feuilles) aussi. */
  .po-pf *, .po-pf__nav, .po-pf__voile, .po-aide-pop, .po-pf-feuille-voile { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   §12 Navigation mobile RU (livraison 4, RU Design, éteinte par défaut)
   La flèche Retour se pose à gauche dans la barre du haut existante, sur les
   pages intérieures (vidéo, chaîne, liste, événement) : 44 px, rouge Player
   One, aucune hauteur ajoutée. Ordinateur : cachée par RU Design.
   ========================================================================== */
.po-pf__top .rud-nav-integree { --rud-nav-couleur: #E50914; }
@media (max-width: 599px) {
  /* Téléphone, page intérieure : la flèche prend la place du logo (le logo
     reste sur les écrans principaux) ; le nom de la page d'avant est coupé
     court pour laisser la loupe, Créer, la cloche et l'avatar entiers. */
  .po-pf__top-gauche:has(> .rud-nav-integree:not([hidden])) .po-pf__logo { display: none; }
  .po-pf__top .rud-nav-integree .rud-nav-retour-nom { max-width: 86px; }
}

/* Barre du bas : absente sur ordinateur et grande tablette. */
@media (min-width: 840px) {
  .po-pf__tabbar { display: none !important; }
}

/* ==========================================================================
   §11 Boutons flottants déplaçables (roue des témoins, traducteur RU)
   mobile.js leur ajoute le glisser-déposer ; ici : le doigt ne fait pas
   défiler la page quand il les pousse, et on voit qu'on les tient.
   ========================================================================== */
body.po-pf-page [data-po-deplacable] {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
}
body.po-pf-page [data-po-deplacable].po-flottant--glisse {
  cursor: grabbing;
  transition: none !important;
  opacity: .85;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}

/* Avis brefs : au-dessus de la barre du bas. */
@media (max-width: 839px) {
  body.po-pf-page .po-pf-avis,
  body.po-pf-page .po-short-toast { bottom: calc(var(--pf-tabbar-h) + 16px) !important; }
}


/* ==========================================================================
 * Barre du haut du Réseau (RU Design, 17 octobre 2026)
 * Sur téléphone et tablette, la barre de RU Design remplace celle de Player
 * One ; le menu du compte (rond) y est déplacé par un petit script.
 * ========================================================================== */
@media (max-width: 999px) {
  .po-pf header.po-pf__top.po-pf__top--ru { display: none; }
  .po-pf .rud-barre-reseau .po-rond-ru { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; }
  .po-pf .rud-barre-reseau .po-pf__moi-btn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; }
  .po-pf .rud-barre-reseau .po-pf__moi-btn img,
  .po-pf .rud-barre-reseau .po-pf__moi-btn .po-avatar-rond { width: 32px; height: 32px; border-radius: 50%; }
  .po-pf .rud-barre-reseau .po-pf__moi-menu { right: 4px; left: auto; }
}