.bdf-dictee-container {
  max-width: 800px;
  margin: 2em auto;
  position: relative;
}

.bdf-dictee-toggle-subtitles {
    background-color: var( --e-global-color-accent );
	font-family: var( --e-global-typography-3e02be5-font-family ), Sans-serif;
  font-size: var( --e-global-typography-3e02be5-font-size );
  font-weight: var( --e-global-typography-3e02be5-font-weight );
  text-transform: var( --e-global-typography-3e02be5-text-transform );
  letter-spacing: var( --e-global-typography-3e02be5-letter-spacing );
  padding: 20px 30px 20px 30px;
    color: #fff;
  transition: background 0.2s ease-in-out, transform 0.1s;
  box-shadow: none;
  text-decoration: none;
  border-radius: 3px;
  border:none;
  margin-top:20px;
  width:100%;
}

.bdf-dictee-toggle-subtitles:hover {
  background-color: var( --e-global-color-b55fbe6 );
  color: var( --e-global-color-05b83e8 );
}

.bdf-dictee-toggle-subtitles:disabled {
  opacity: 0.6;
  cursor: default;
  background: #a5b4fc;
}



  /* Cible le <div> interne à .vjs-text-track-cue */
.video-js .vjs-text-track-cue > div {
  /* Taille du texte plus grande */
  font-size: 3em !important;
  /* Hauteur de ligne ajustée */
  line-height: 2 !important;
  padding:8px !important;
  padding-left:16px !important;
  padding-right:16px !important;
  display:block !important;
  /* Cadre transparent ou semi-opaque */
  background: rgba(0, 0, 0, 0.7) !important;
  /* Couleur du texte */
  color: #ffffff !important;
  /* Centre le bloc de texte */
  text-align: center !important;
  /* Largeur max pour éviter les lignes trop longues */
  max-width: 90% !important;
  margin: 0 auto !important;
  /* Optionnel : ombre portée pour la lisibilité */
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8) !important;
}

/* Pour décaler verticalement la zone de sous-titres si besoin */
.video-js .vjs-text-track-display {
  bottom: 26.2em !important; /* remonte ou descend la barre */
  height:150px;
  min-height:150px;
}

/* Si vous voulez aussi cibler purement via ::cue (dans le cas d’un <video> natif) */
video::cue {
  font-size: 1.5em;
  line-height: 1.2;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}



/* dans votre bdf-dictee.css */

/* 1. On réaffiche le poster même en mode playing */
.video-js.vjs-has-started .vjs-poster {
  display: block !important;
  opacity: 1 !important;    /* on remet l’opacité à 100% */
}

/* 2. On s’assure que le tech layer (.vjs-tech) n’écrase pas tout */
.video-js .vjs-tech {
  background: none !important;
}

/* 3. Si besoin, on ajuste la hauteur du lecteur */
.video-js {
  height: 360px; /* ou la hauteur de votre image, ou vjs-fluid + aspect-ratio en CSS */
}


/* Fond du conteneur global */
.bdf-dictee-container {
  
  
}

/* Si vous préférez cibler directement le player Video.js */
.bdf-dictee-container .video-js,.bdf-dictee-container .vjs-poster {
  background-color: #fec4c6 !important;
  /* vous pouvez aussi ajouter un padding pour simuler un cadre */
  
}


.bdf-dictee-popin-content p{
color: rgb(6, 9, 45);
font-family: "Nunito Sans", sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 34px
}