/* ============ Intercalaires sur téléphone (YouTube) ============
   Chargée après site.css : à spécificité égale, ces règles l'emportent.
   Même seuil (860 px) que les ajustements téléphone de site.css et que
   PHONE_QUERY dans dividers.js.

   Sur bureau l'intercalaire ouvert est une vitrine : le player remplit la
   hauteur, l'étiquette de rôle chevauche son bord bas, tout tient sans
   défiler. Sur téléphone la hauteur manque (un client à sept projets empilait
   ses onglets sur toute la hauteur et écrasait le player) : l'intercalaire
   ouvert devient une page qui défile, avec les onglets sur une seule rangée
   défilante, le player pleine largeur en 16:9, le rôle puis la description en
   dessous, et la croix qui reste en haut à droite pendant le défilement. */
@media (max-width: 860px) {
  /* Zone défilante : c'est elle qui défile, pas le document. Le contenu part
     du haut (centré, le début serait inaccessible dès qu'il déborde). */
  .divider-content {
    justify-content: flex-start;
    padding: 8px 12px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .divider-content::-webkit-scrollbar { display: none; }
  /* Rien ne doit se comprimer pour tenir : ce qui dépasse défile. */
  .divider-content > * { flex-shrink: 0; }

  /* Croix : dans le flux, en tête, mais collante — elle reste en haut de la
     zone quand le contenu défile dessous (site.css lui donne déjà ses 44 px de
     cible tactile ; top: 0 se mesure depuis le padding de la zone, soit 8 px).
     Marge basse négative : la rangée d'onglets, ou le panneau, monte à sa
     hauteur ; la rangée lui laisse la place à droite. */
  .divider-close {
    position: sticky;
    top: 0;
    right: auto;
    align-self: flex-end;
    margin: 0 0 -44px;
  }

  /* Onglets de projet : une seule rangée qui défile en largeur (comme les
     onglets de couverture de l'étagère Brand), jamais d'empilement. Les marges
     automatiques du premier et du dernier centrent la rangée quand elle tient,
     sans rendre son début inaccessible quand elle déborde (ce que ferait
     justify-content: center). Le padding haut garde l'ombre des onglets ; les
     56 px de côté, symétriques pour un centrage exact, tiennent la rangée à
     l'écart de la croix. */
  .mini-tabs {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 56px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mini-tabs::-webkit-scrollbar { display: none; }
  /* Rangée qui déborde (classe posée par dividers.js) : elle part du bord
     gauche et les onglets s'estompent à gauche et sous la croix, signe qu'il y
     en a d'autres. */
  .mini-tabs.scrolls {
    padding-left: 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 68px), transparent calc(100% - 14px));
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 68px), transparent calc(100% - 14px));
  }
  .mini-tab {
    flex: none;
    padding: 9px 14px 13px;
    font-size: 14.5px;
    max-width: 240px;
  }
  .mini-tab:first-child { margin-left: auto; }
  .mini-tab:last-child { margin-right: auto; }
  /* Sans rangée d'onglets le panneau vient sous la croix : il l'évite. */
  .divider-close + .player-panel { margin-top: 52px; }

  /* Panneau pleine largeur ; dividers.js en déduit la largeur du player (16:9). */
  .player-panel {
    --panel-pad: 8px;
    width: 100%;
    gap: 8px;
  }

  /* Étiquette de rôle : dans le flux sous le player, seulement inclinée
     (dividers.js ne lui met plus de translate et lui donne, en marge, le débord
     dû à la rotation). Elle peut passer sur deux lignes plutôt que d'être
     tronquée. */
  .player-role {
    position: static;
    bottom: auto;
    left: auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.1;
  }

  .divider-desc {
    width: 100%;
    max-width: none;
    padding: 0 4px;
    line-height: 1.45;
  }
}