/* Interface de visualisation vidéo — palette terre & kente */
:root{
  --nuit:#140F0C;
  --sable:#F3E4CE;
  --sable-doux:#C9B49A;
  --rouille:#C1440E;
  --or:#F2C14E;
  --vert:#2E8B57;
  --indigo:#3B5BA5;
  --radius:18px;
}

*{box-sizing:border-box}

/* L'attribut hidden vient de la feuille du navigateur, et TOUTE règle d'auteur
   l'emporte sur elle : sans ce garde-fou, un .empty{display:grid} ou un
   .reel{display:flex} réaffiche un élément marqué hidden. C'est ce qui masquait
   la vidéo derrière l'overlay « aucune vidéo ». */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  display:flex;flex-direction:column;
  background:
    radial-gradient(1200px 700px at 78% -18%, rgba(193,68,14,.26), transparent 60%),
    radial-gradient(900px 560px at 6% 6%, rgba(242,193,78,.11), transparent 58%),
    var(--nuit);
  color:var(--sable);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
/* Motif bogolan en filigrane */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F3E4CE' stroke-width='1.6'%3E%3Cpath d='M0 36h72M36 0v72'/%3E%3Cpath d='M18 18l18 18-18 18M54 18L36 36l18 18'/%3E%3Ccircle cx='36' cy='36' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.kente-strip{
  height:7px;flex:0 0 auto;position:relative;z-index:2;
  background:repeating-linear-gradient(90deg,
    var(--rouille) 0 22px, var(--or) 22px 40px, #0f0b09 40px 50px,
    var(--vert) 50px 72px, var(--or) 72px 82px, var(--indigo) 82px 104px, #0f0b09 104px 112px);
}
.kente-strip.bottom{opacity:.7}

/* ---------- scène ---------- */
.stage{
  position:relative;z-index:1;flex:1;
  width:100%;max-width:1180px;margin:0 auto;
  padding:34px 26px 44px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
}

/* ---------- lecteur ---------- */
.player-shell{
  width:100%;padding:10px;border-radius:calc(var(--radius) + 8px);
  background:linear-gradient(135deg,rgba(242,193,78,.32),rgba(193,68,14,.32) 45%,rgba(46,139,87,.28));
  box-shadow:0 26px 60px rgba(0,0,0,.5);
}
.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden}
.player video{width:100%;height:100%;display:block;background:#000;object-fit:contain}

.big-play{
  position:absolute;inset:0;margin:auto;width:88px;height:88px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#1a120c;
  background:linear-gradient(140deg,var(--or),var(--rouille));
  border:3px solid rgba(243,228,206,.85);
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  transition:transform .18s ease,opacity .18s ease;
}
.big-play:hover{transform:scale(1.07)}
.big-play svg{margin-left:5px}
.player.playing .big-play{opacity:0;pointer-events:none;transform:scale(.7)}

.controls{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(transparent,rgba(10,7,5,.55) 35%,rgba(10,7,5,.92));
  opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;
}
/* Le survol n'existe pas au doigt : on ne s'y fie que sur les pointeurs fins,
   et la classe .show-controls prend le relais sur écran tactile. */
@media (hover:hover){ .player:hover .controls{opacity:1;transform:none} }
.player.paused .controls,.player.show-controls .controls{opacity:1;transform:none}
.player.empty-state .controls,.player.empty-state .big-play{display:none}

.scrub{padding:7px 0;cursor:pointer}
.scrub-track{position:relative;height:5px;border-radius:99px;background:rgba(243,228,206,.22);transition:height .12s ease}
.scrub-buffer{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:rgba(243,228,206,.32)}
.scrub-played{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:linear-gradient(90deg,var(--or),var(--rouille))}
.scrub-knob{
  position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;
  background:var(--or);box-shadow:0 0 0 3px rgba(193,68,14,.45);
  transform:scale(0);transition:transform .16s ease;
}
.scrub:hover .scrub-knob,.scrub:focus-visible .scrub-knob{transform:scale(1)}
.scrub:hover .scrub-track{height:7px}

.controls-row{display:flex;align-items:center;gap:8px;margin-top:2px}
.ctl{background:none;border:none;color:var(--sable);cursor:pointer;width:38px;height:38px;display:grid;place-items:center;border-radius:10px}
.ctl:hover{background:rgba(243,228,206,.12);color:var(--or)}
.spacer{flex:1}
.time{font-size:13px;color:var(--sable-doux);font-variant-numeric:tabular-nums;margin-left:4px}
.time em{opacity:.5;font-style:normal;margin:0 2px}

.volume{display:flex;align-items:center}
.vol-slider{
  width:0;opacity:0;transition:width .22s ease,opacity .22s ease;
  -webkit-appearance:none;appearance:none;height:4px;border-radius:99px;background:rgba(243,228,206,.3);
}
.volume:hover .vol-slider,.vol-slider:focus{width:82px;opacity:1;margin-left:6px}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--or);cursor:pointer}
.vol-slider::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--or);cursor:pointer}

/* dossier vide : un simple trait, sans texte */
.empty{
  position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#1a1310 0 14px,#16100d 14px 28px);
  color:rgba(243,228,206,.28);font-size:34px;letter-spacing:6px;
}

/* ---------- titre ---------- */
.video-title{
  font-family:'Bricolage Grotesque',Georgia,serif;font-weight:800;
  font-size:clamp(20px,2.5vw,30px);line-height:1.2;letter-spacing:-.4px;
  margin:0;text-align:center;
}
/* Titre vide (aucune vidéo) : on n'affiche ni l'espace ni le trait décoratif. */
.video-title:empty{display:none}
.video-title::after{
  content:"";display:block;width:74px;height:4px;margin:14px auto 0;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--rouille) 0 12px,var(--or) 12px 22px,var(--vert) 22px 32px);
}

/* ---------- bande de vignettes (visible seulement si plusieurs vidéos) ---------- */
.reel{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.chip{
  position:relative;width:132px;aspect-ratio:16/9;border-radius:11px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;opacity:.62;transition:opacity .18s ease,border-color .18s ease,transform .18s ease;
  background:#1a120d;
}
.chip video{width:100%;height:100%;object-fit:cover;display:block}
.chip:hover{opacity:1;transform:translateY(-2px)}
.chip.active{opacity:1;border-color:var(--or)}

/* ---------- plein écran ---------- */
/* Règles séparées : un navigateur qui ne connaît pas :-webkit-full-screen
   rejetterait TOUTE la règle si les deux sélecteurs étaient groupés. */
.player:fullscreen{aspect-ratio:auto;width:100%;height:100%;border-radius:0}
.player:-webkit-full-screen{aspect-ratio:auto;width:100%;height:100%;border-radius:0}
.player:fullscreen video{object-fit:contain}
.player:-webkit-full-screen video{object-fit:contain}

/* Confort tactile : cibles plus grandes au doigt. */
@media (hover:none){
  .ctl{width:44px;height:44px}
  .scrub{padding:11px 0}
  .vol-slider{display:none}
}