/* ===== Shaka Player : sous-titres style YouTube/Vimeo =====
   IMPORTANT (2026-07-16) : Shaka ne positionne PAS le texte via ce conteneur.
   Chaque "cue" (ligne/bloc de sous-titre actif) est un <div> créé par Shaka
   avec un style INLINE "position:absolute; top/bottom:XX%" calculé depuis le
   réglage "line" du fichier .vtt — indépendant du flex/bottom qu'on mettait
   ici. C'est pourquoi plusieurs essais sur .shaka-text-container n'ont RIEN
   changé visuellement. Le vrai point d'ancrage à écraser (avec !important,
   seul moyen de battre un style inline) est ".shaka-text-container div"
   plus bas. Source : github.com/shaka-project/shaka-player issue #4567. */
.shaka-text-container {
    width: 100% !important;
    left: 0 !important;
    pointer-events: none;
    text-align: center !important;
    z-index: 10000 !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.9) !important;
    background: none !important;
    opacity: 1 !important;
    font-size: 1.2em !important;
    font-weight: 600 !important;
}

.shaka-text-container div {
    /* Écrase le "top"/"bottom" en % fixé en style inline par Shaka sur CE div
       (calculé depuis le fichier .vtt) — c'est lui qui positionne réellement
       le texte à l'écran, pas .shaka-text-container. */
    position: absolute !important;
    top: auto !important;
    bottom: 80px !important; /* nettement au-dessus de la barre de contrôle */
    display: flex !important;
    justify-content: center !important;   /* centre le span horizontalement */
    width: 100% !important;
    text-align: center !important;
}

.shaka-text-container span {
    font-size: 1.8vw !important;          /* taille responsive */
    line-height: 1.2 !important;          /* hauteur de ligne compacte */
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9) !important;
    background: rgba(0,0,0,0.15) !important; /* léger fond sous texte */
    padding: 2px 8px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    max-width: 95% !important;            /* permet à une phrase courte de rester sur une seule ligne */
    white-space: nowrap !important;       /* empêche le wrapping sur plusieurs lignes */
    overflow: hidden !important;          /* coupe le texte qui dépasse */
    text-overflow: ellipsis !important;   /* ajoute ... si le texte dépasse */
    box-sizing: border-box !important;
    margin: 0 auto !important;             /* centre parfaitement le span */
}

/* Conteneur vidéo global */
.shaka-video-container {
    overflow: visible !important;
}



/* 🎬 Bande noire dégradée derrière tous les contrôles.
   IMPORTANT : le dégradé doit être sur .shaka-scrim-container (l'élément prévu par
   Shaka pour ça, qui suit le fondu automatique [shown=true]/[shown=false]) et PAS
   sur .shaka-controls-container (le conteneur global, qui lui ne bascule qu'une
   fois entre display:none et affiché — le mettre là rendait le dégradé visible en
   permanence après la première interaction, peu importe pause/lecture/navigateur). */
.shaka-scrim-container {
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)) !important;
}
.shaka-controls-container {
  padding: 8px 0; /* espace haut-bas */
}

/* Icônes en rose */
.shaka-controls-container svg {
  fill: #e45f62 !important;
  color: #e45f62 !important;
}

/* Boutons transparents, juste les icônes visibles */
.shaka-controls-container button {
  background: transparent !important;
  border: none !important;
  padding: 6px;
}

/* Hover : icônes plus foncées */
.shaka-controls-container button:hover svg {
  fill: #c94c4f !important;
  color: #c94c4f !important;
}

/* 📑 Menus (settings + overflow) : fond blanc, texte rose */
.shaka-controls-container .shaka-settings-menu,
.shaka-controls-container .shaka-overflow-menu {
  background-color: #fff !important;
  color: #e45f62 !important;
  border-radius: 8px;
}

/* Icônes dans les menus */
.shaka-controls-container .shaka-settings-menu svg,
.shaka-controls-container .shaka-overflow-menu svg {
  fill: #e45f62 !important;
  color: #e45f62 !important;
}

/* Hover dans les menus */
.shaka-controls-container .shaka-settings-menu button:hover,
.shaka-controls-container .shaka-overflow-menu button:hover {
  background-color: rgba(228, 95, 98, 0.1) !important;
  color: #c94c4f !important;
}

.shaka-controls-container .shaka-settings-menu button:hover svg,
.shaka-controls-container .shaka-overflow-menu button:hover svg {
  fill: #c94c4f !important;
  color: #c94c4f !important;
}



/* Conteneur parent de la vidéo */
.shaka-video-container {
  position: relative; /* pour que le logo se place par rapport à la vidéo */
}

/* Logo en haut à droite — apparaît/disparaît avec les contrôles (comme YouTube/
   Vimeo) au lieu de flotter en permanence sur l'image. La classe .is-visible est
   ajoutée/retirée en JS (init-shaka-player.js), synchronisée avec l'attribut
   [shown] du même conteneur de contrôles que le dégradé (.shaka-scrim-container). */
.shaka-logo-top-right {
  position: absolute;
  top: 8px;      /* espace depuis le haut */
  right: 12px;   /* espace depuis la droite */
  height: 32px;  /* ajuste selon ton besoin */
  width: auto;
  pointer-events: none; /* ne bloque pas la vidéo */
  /* z-index bas volontairement (pas 9999) : #masthead (menu du site,
     css/style.css) est à z-index:5 — un z-index plus élevé ici faisait
     passer le logo PAR-DESSUS le menu au scroll, dès que la vidéo défile
     sous le menu collant. Le logo étant ajouté en dernier dans le DOM du
     conteneur vidéo (container.appendChild), il reste quand même au-dessus
     de ses propres voisins (vidéo, contrôles) sans avoir besoin d'un
     z-index élevé. Retour Nicolas, 2026-07-16. */
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.6, 1);
}
.shaka-logo-top-right.is-visible {
  opacity: 1;
}

/* Minuteur (temps actuel / durée) : blanc et un peu plus gros que le défaut
   Shaka (gris peu lisible). Retour Nicolas, 2026-07-16. */
.shaka-controls-container .shaka-current-time {
  color: #fff !important;
  font-size: 14px !important;
}





/* (règle .shaka-text-container fusionnée avec celle du haut du fichier — voir
   le commentaire "Règle unique consolidée" plus haut) */





/* partie qui avance pendant la lecture */
.shaka-seek-bar .shaka-played,
.shaka-seek-bar .shaka-slider-fill {
    background-color: #e45f62 !important;
}

/* portion bufferisée (chargée mais non jouée) */
.shaka-seek-bar .shaka-buffered {
    background-color: rgba(228, 95, 98, 0.3) !important;
}

/* bouton à glisser */
.shaka-seek-bar .shaka-knob {
    background-color: #e45f62 !important;
    border: none !important;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}