/* HOTACONNECT — lecteurs vidéo et audio, visionneuse d'images, états des modules. */

/* Vidéo SKYFIELDS OF MANA */
.lecteur-video { margin: 0 auto; max-width: 960px; }
.lecteur-video-cadre { position: relative; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(242, 198, 109, .45), 0 0 50px rgba(242, 198, 109, .14), var(--hc-ombre); }
.lecteur-video video { display: block; width: 100%; aspect-ratio: 3 / 2; background: #000; }
.lecteur-video video.en-erreur { opacity: .25; }
.lecteur-video figcaption { margin-top: 12px; font-size: .92rem; color: var(--hc-texte-doux); }
.lecteur-video figcaption strong { color: var(--hc-or); }
.lecteur-video-cadre .media-erreur { position: absolute; left: 16px; right: 16px; top: 50%; translate: 0 -50%; margin: 0; }

.media-erreur {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--hc-rayon-petit);
  background: rgba(255, 107, 129, .12); border: 1px solid rgba(255, 107, 129, .55); color: #ffd0d8; font-weight: 600; margin: 12px 0 0;
}
.media-erreur[hidden] { display: none; }
.media-erreur .icone { color: var(--hc-erreur); margin-top: 2px; }

/* Lecteur audio HOTAKIDS */
.lecteur-audio {
  margin-top: 18px; padding: 20px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(40, 46, 104, .9), rgba(24, 26, 66, .95)); border: 1px solid rgba(143, 216, 255, .35);
}
.lecteur-titre { font-weight: 700; margin-bottom: 14px; color: #dff3ff; }
.lecteur-commandes { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 16px); flex-wrap: wrap; }
.lecteur-bouton {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 64px; height: 64px; border-radius: 50%; cursor: pointer; border: 1px solid rgba(143, 216, 255, .45);
  background: rgba(143, 216, 255, .1); color: #e8f7ff; transition: transform var(--hc-transition), background var(--hc-transition);
}
.lecteur-bouton:hover:not(:disabled) { background: rgba(143, 216, 255, .2); transform: translateY(-1px); }
.lecteur-bouton .icone { width: 22px; height: 22px; }
.lecteur-etiquette { font-size: .66rem; font-weight: 700; letter-spacing: .02em; }
.lecteur-principal { width: 92px; height: 92px; background: linear-gradient(135deg, #8fd8ff, #c58bff 60%, #ffb3e4); color: #1d1550; border: 0; box-shadow: 0 10px 30px rgba(197, 139, 255, .4); }
.lecteur-principal .icone { width: 32px; height: 32px; }
.lecteur-principal .lecteur-etiquette { font-size: .78rem; }
.lecteur-principal:hover:not(:disabled) { background: linear-gradient(135deg, #a8e2ff, #d3abff 60%, #ffc6ea); }
.lecteur-bouton:disabled { opacity: .45; cursor: not-allowed; }
.lecteur-bouton-petit { width: 44px; height: 44px; }

.lecteur-progression { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 18px; }
.lecteur-temps { font-variant-numeric: tabular-nums; font-size: .9rem; color: #dff3ff; min-width: 3.2em; text-align: center; }
.barre { position: relative; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); cursor: pointer; touch-action: none; }
.barre-tampon, .barre-remplie { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; width: 0; }
.barre-tampon { background: rgba(255, 255, 255, .14); }
.barre-remplie { background: linear-gradient(90deg, #8fd8ff, #c58bff, #ffb3e4); }
.barre-curseur { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.barre:focus-visible { outline: 3px solid var(--hc-cyan); outline-offset: 4px; }
.en-erreur .barre { cursor: not-allowed; opacity: .5; }

.lecteur-volume { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.volume-etiquette { font-size: .88rem; color: #dff3ff; }
.lecteur-volume input[type="range"] { flex: 1; min-width: 120px; max-width: 260px; accent-color: #c58bff; height: 28px; cursor: pointer; }
.volume-valeur { font-size: .85rem; color: var(--hc-texte-doux); font-variant-numeric: tabular-nums; min-width: 3.4em; }
.lecteur-etat { margin: 12px 0 0; font-size: .9rem; color: var(--hc-texte-doux); }

/* Visionneuse d'images */
.visionneuse { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 94vh; color: var(--hc-texte); }
.visionneuse::backdrop { background: rgba(3, 5, 12, .86); backdrop-filter: blur(6px); }
.visionneuse-cadre { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.visionneuse-image { max-width: 100%; max-height: 84vh; width: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--hc-trait-fort), var(--hc-ombre); }
.visionneuse-legende { margin: 0; font-size: .92rem; color: var(--hc-texte-doux); text-align: center; }
.visionneuse-fermer { position: absolute; top: 10px; right: 10px; z-index: 1; }

/* Modules externes */
.module-chargement { padding: 18px; text-align: center; color: var(--hc-texte-doux); }
.module-chargement[hidden], .module-hote[hidden] { display: none; }