/* Video.js 10.2.0 — lecteur Dado, composants officiels Compat.
   CSS partageable entre les pages 4:3 et 16:9. */
#animation { width:92%; margin:0 4%; height:auto; }
.dado-v4 { display:block; width:100%; color:#c8beb7; font-family:RoyalRomain,Garamond,serif; }
.dado-v4-surface { display:block; position:relative; width:100%; aspect-ratio:4/3; background:#292521 url('../images/dado-peintre-fond-noir.png') repeat; overflow:hidden; isolation:isolate; }
.dado-v4[data-ratio="16/9"] .dado-v4-surface { aspect-ratio:16/9; }
.dado-v4-surface > hlsjs-video { display:block; width:100%; height:100%; object-fit:contain; }
.dado-v4-poster { position:absolute; inset:0; z-index:2; display:block; pointer-events:none; }
.dado-v4-poster:not([data-visible]) { display:none; }
.dado-v4-poster img { display:block; width:100%; height:100%; object-fit:contain; }

/* Bouton central et commandes. */
.dado-v4-big { position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%); width:88px; height:58px; display:grid; place-items:center; box-sizing:border-box; border:2px solid #c8beb7; border-radius:7px; background:#292521 url('../images/dado-peintre-fond-noir.png') repeat; color:#c8beb7; cursor:pointer; font:inherit; appearance:none; }
.dado-v4-big:hover,.dado-v4-big:focus-visible { color:#fff; border-color:#fff; }
.dado-v4-big:not([data-paused]) { display:none; }
.dado-v4-controls { position:absolute; z-index:5; left:0; right:0; bottom:0; display:block; box-sizing:border-box; background:#292521 url('../images/dado-peintre-fond-noir.png') repeat; padding:8px 9px 7px; opacity:0; transform:translateY(100%); pointer-events:none; transition:opacity .2s ease,transform .2s ease; }
.dado-v4-controls[data-visible] { opacity:1; transform:translateY(0); pointer-events:auto; }

/* Progression : portion non chargée, chargée et lue. */
.dado-v4-progress { display:block; position:relative; height:12px; cursor:pointer; margin:0 0 5px; touch-action:none; }
.dado-v4-track { display:block; position:absolute; top:50%; left:0; right:0; height:5px; transform:translateY(-50%); background:rgba(200,190,183,.20); }
.dado-v4-fill,.dado-v4-buffer { display:block; position:absolute; top:0; bottom:0; left:0; }
.dado-v4-buffer { width:var(--media-slider-buffer,0%); background:rgba(200,190,183,.48); }
.dado-v4-fill { width:var(--media-slider-fill,0%); background:rgba(216,206,199,.94); }
.dado-v4-thumb { position:absolute; top:50%; left:var(--media-slider-fill,0%); transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%; background:#c8beb7; }

/* Boutons et icônes SVG officielles Compat. Ne pas forcer leur fill/stroke. */
.dado-v4-buttons { display:flex; align-items:center; gap:7px; min-height:32px; }
.dado-v4-btn { display:grid; place-items:center; flex:none; width:31px; height:30px; padding:4px; box-sizing:border-box; color:#c8beb7; cursor:pointer; background:transparent; border:0; font:inherit; appearance:none; }
.dado-v4-btn:hover,.dado-v4-btn:focus-visible { color:#fff; }
.dado-v4-btn media-icon,.dado-v4-big media-icon { display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; color:inherit; flex:none; }
.dado-v4-big media-icon { width:32px; height:32px; }
.dado-v4-btn media-icon svg,.dado-v4-big media-icon svg { display:block; width:100%; height:100%; stroke:unset; stroke-width:unset; stroke-linecap:unset; stroke-linejoin:unset; }
.dado-v4-play .dado-icon-pause { display:none; }
.dado-v4-play:not([data-paused]) .dado-icon-play { display:none; }
.dado-v4-play:not([data-paused]) .dado-icon-pause { display:inline-flex; }
.dado-v4-mute .dado-icon-muted { display:none; }
.dado-v4-mute[data-muted] .dado-icon-sound { display:none; }
.dado-v4-mute[data-muted] .dado-icon-muted { display:inline-flex; }
.dado-v4-volume { display:block; position:relative; width:65px; height:20px; cursor:pointer; touch-action:none; }
.dado-v4-times { font-size:16px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.dado-v4-spacer { flex:1; }
.dado-v4-captions { font-size:13px; font-weight:bold; letter-spacing:normal; color:#c8beb7; }
.dado-v4-captions:not([data-active]) { opacity:.85; }
.dado-v4-captions[data-active] { text-decoration:none; }
.dado-v4-captions[hidden] { display:none!important; }
.dado-v4-captions .dado-icon-captions-on { display:none; }
.dado-v4-captions .dado-icon-captions-off { display:inline-flex; }
.dado-v4-captions[data-active] .dado-icon-captions-on { display:inline-flex; }
.dado-v4-captions[data-active] .dado-icon-captions-off { display:none; }
.dado-v4-fullscreen .dado-icon-fullscreen-enter { display:inline-flex; }
.dado-v4-fullscreen .dado-icon-fullscreen-exit { display:none; }
.dado-v4-fullscreen[data-fullscreen] .dado-icon-fullscreen-enter { display:none; }
.dado-v4-fullscreen[data-fullscreen] .dado-icon-fullscreen-exit { display:inline-flex; }

/* Plein écran et affichages étroits. */
.dado-v4:fullscreen { width:100vw; height:100dvh; background:#000; display:flex; align-items:center; justify-content:center; }
.dado-v4:fullscreen .dado-v4-surface { width:min(100vw,calc(100dvh * 4 / 3)); height:auto; flex:none; }
.dado-v4[data-ratio="16/9"]:fullscreen .dado-v4-surface { width:min(100vw,calc(100dvh * 16 / 9)); }
.dado-v4-surface:fullscreen { width:100vw; height:100dvh; aspect-ratio:auto; display:flex; align-items:center; justify-content:center; }
.dado-v4-surface:fullscreen > hlsjs-video { object-fit:contain; }
@media(max-width:480px) { .dado-v4-volume { width:42px; } .dado-v4-times { font-size:12px; } .dado-v4-buttons { gap:3px; } .dado-v4-btn { width:28px; } }
@media(prefers-reduced-motion:reduce) { .dado-v4-controls { transition:none; } }

/* Sous-titres : décalage validé dans Chrome et Edge lors de l'affichage des commandes. */
.dado-v4-surface { --dado-caption-y:0px; }
.dado-v4-surface[data-controls-visible] { --dado-caption-y:-60px; }
.dado-v4-surface hlsjs-video::part(video)::-webkit-media-text-track-container,
.dado-v4-surface hlsjs-video video::-webkit-media-text-track-container {
  translate:0 var(--dado-caption-y);
  transition:translate .2s ease-out;
}

/* Police des sous-titres : fonctionne sous Chrome et Edge, pas sous Firefox. */
.dado-v4 hlsjs-video::cue { font-family:RoyalRomain,Garamond,serif; }

/* Aperçu temporel officiel Video.js : timecode à la position survolée. */
.dado-v5-time-preview {
  position:absolute;
  bottom:calc(100% + 7px);
  left:0;
  z-index:8;
  display:block;
  box-sizing:border-box;
  width:max-content;
  padding:4px 7px;
  border:1px solid #c8beb7;
  border-radius:3px;
  background:#292521 url('../images/dado-peintre-fond-noir.png') repeat;
  color:#c8beb7;
  font:15px RoyalRomain,Garamond,serif;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:none;
}
.dado-v4-progress:hover .dado-v5-time-preview {
  opacity:1;
  visibility:visible;
}

/* Infobulles officielles <media-tooltip>, sans JavaScript personnel. */
.dado-v5-tooltip {
  box-sizing:border-box;
  position:fixed;
  inset:auto;
  margin:0;
  padding:4px 7px;
  border:1px solid #c8beb7;
  border-radius:3px;
  background:#292521 url('../images/dado-peintre-fond-noir.png') repeat;
  color:#c8beb7;
  font:15px RoyalRomain,Garamond,serif;
  white-space:nowrap;
  pointer-events:none;
  z-index:100;
  --media-popup-side-offset:7px;
}
.dado-v5-tooltip:not([data-open]) { display:none; }
/* Chaque infobulle est directement après le bouton officiel concerné. */
.dado-v5-tooltip .dado-tip-playing,
.dado-v5-tooltip .dado-tip-muted,
.dado-v5-tooltip .dado-tip-captions-on,
.dado-v5-tooltip .dado-tip-fullscreen-on { display:none; }
.dado-v4-play:not([data-paused]) + .dado-v5-tooltip .dado-tip-paused { display:none; }
.dado-v4-play:not([data-paused]) + .dado-v5-tooltip .dado-tip-playing { display:inline; }
.dado-v4-mute[data-muted] + .dado-v5-tooltip .dado-tip-sound { display:none; }
.dado-v4-mute[data-muted] + .dado-v5-tooltip .dado-tip-muted { display:inline; }
.dado-v4-captions[data-active] + .dado-v5-tooltip .dado-tip-captions-off { display:none; }
.dado-v4-captions[data-active] + .dado-v5-tooltip .dado-tip-captions-on { display:inline; }
.dado-v4-fullscreen[data-fullscreen] + .dado-v5-tooltip .dado-tip-fullscreen-off { display:none; }
.dado-v4-fullscreen[data-fullscreen] + .dado-v5-tooltip .dado-tip-fullscreen-on { display:inline; }

/* Avant lecture, conserver le poster et le bouton central seuls.
   On utilise l'etat officiel data-visible de media-poster, sans JS personnel.
   Des que le poster disparait, media-controls reprend sa gestion native. */
.dado-v4-surface:has(> .dado-v4-poster[data-visible]) > .dado-v4-controls {
  opacity:0;
  transform:translateY(100%);
  pointer-events:none;
}

/* Boite d'erreur officielle : habillage sobre, compatible avec le theme. */
.dado-v6-error:not([data-open]) { display:none; }
.dado-v6-error-popup {
  position:absolute;
  z-index:30;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  box-sizing:border-box;
  width:min(90%,460px);
  max-height:85%;
  overflow:auto;
  padding:20px;
  border:1px solid #c8beb7;
  border-radius:5px;
  background:#292521 url('../images/dado-peintre-fond-noir.png') repeat;
  color:#c8beb7;
  font:17px RoyalRomain,Garamond,serif;
  text-align:center;
  box-shadow:0 5px 24px rgba(0,0,0,.65);
}
.dado-v6-error-popup media-dialog-title { display:block; font-size:21px; margin-bottom:10px; }
.dado-v6-error-popup media-dialog-description { display:block; margin-bottom:15px; }
.dado-v6-error-popup media-dialog-close {
  display:inline-block; padding:5px 14px;
  border:1px solid #c8beb7; border-radius:3px;
  background:transparent; color:#c8beb7;
  font:inherit; cursor:pointer;
}
.dado-v6-error-popup media-dialog-close:hover,
.dado-v6-error-popup media-dialog-close:focus-visible { color:#fff; border-color:#fff; }

.dado-v6-error { position:absolute; inset:0; z-index:20; }