/* ===== Shaka Player : sous-titres style YouTube/Vimeo ===== */
.shaka-text-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;       /* centre le conteneur horizontalement */
    justify-content: flex-end !important; /* colle en bas */
    width: 100% !important;
    bottom: 5% !important;                /* distance par rapport au bas */
    left: 0 !important;
    pointer-events: none;
    text-align: center !important;
}

.shaka-text-container div {
    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 */
.shaka-controls-container {
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)) !important;
  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 */
.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: 9999; /* toujours au-dessus */
}





.shaka-text-container {
  position: absolute !important; /* s'assurer qu'il flotte au-dessus */
  bottom: 10% !important;       /* place au-dessus de la barre */
  left: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;          /* pas d'interaction */
  z-index: 10000 !important;     /* au-dessus de tout overlay */

  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;
}





/* 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);
}