/* ============================================================
   PES-TOGO — Catalogue Solaire
   videos.css : onglet « Vidéos » de la page « Rendus 3D & vidéos »,
   visionneuse vidéo plein écran, formulaire admin et sélecteur de
   la bibliothèque partagée (réutilisation d'une même vidéo).
   Reprend les variables de couleurs définies dans index.html (:root).
   ============================================================ */

/* ---------- Onglets « Rendus 3D | Vidéos » ---------- */
.mv-tabs{
  display:inline-flex;gap:4px;padding:4px;margin:2px 0 16px;
  background:var(--paper-dim);border:1px solid var(--line);border-radius:999px;
  max-width:100%;
}
.mv-tab{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 20px;border:none;border-radius:999px;background:transparent;
  font:inherit;font-weight:700;font-size:14.5px;color:var(--muted);cursor:pointer;
  -webkit-tap-highlight-color:transparent;white-space:nowrap;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.mv-tab .ico{width:19px;height:19px;}
.mv-tab:hover{color:var(--dark);}
.mv-tab[aria-selected="true"]{background:var(--dark);color:#fff;box-shadow:0 4px 12px -4px rgba(2,36,91,.5);}
.mv-tab:focus-visible{outline:3px solid var(--primary);outline-offset:2px;}
@media (max-width:520px){
  .mv-tabs{display:flex;width:100%;}
  .mv-tab{flex:1;padding:0 10px;}
}

.mv-panel-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 6px;}
.mv-panel-head .count{color:var(--muted);font-size:14px;margin-right:auto;}
.mv-panel-head .btn{padding:9px 16px;font-size:14px;}

/* ---------- Cartes vidéo ---------- */
.vid-card{font:inherit;color:inherit;text-align:left;padding:0;width:100%;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.vid-card:hover{transform:translateY(-3px);border-color:var(--primary);}
.vid-card:active{transform:translateY(-1px);}
.vid-card:focus-visible{outline:3px solid var(--primary);outline-offset:2px;}
.vid-card.is-hidden{opacity:.72;border-style:dashed;}
.vid-card .prod-thumb{background:#0b1220;}
.vid-card .prod-thumb video{width:100%;height:100%;object-fit:cover;pointer-events:none;background:#0b1220;}
.vid-card:hover .m3d-play{background:var(--primary);}
.vid-card .badge3d.is-warn{background:var(--primary);}
.vid-meta{display:none;font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:2px;}
body.admin-mode .vid-meta{display:block;}
.vid-meta b{color:var(--dark);font-weight:700;}
.vid-empty-ico{width:44px;height:44px;color:var(--primary);margin:0 auto 10px;display:block;}
.vid-empty .m3d-admin-hint{display:none;margin-top:10px;font-size:13.5px;}
body.admin-mode .vid-empty .m3d-admin-hint{display:block;}

@media (max-width:700px){
  .vid-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .vid-card .prod-body{padding:10px 12px 12px;}
  .vid-card .prod-body h3{font-size:15px;}
  .vid-card .m3d-play{width:34px;height:34px;right:8px;bottom:8px;}
  .vid-card .m3d-play .ico{width:18px;height:18px;}
}

/* ---------- Visionneuse vidéo plein écran (reprend les barres de la visionneuse 3D) ---------- */
#vidViewer{background:#05070d;}
#vidViewer .m3d-vbar,#vidViewer .m3d-vfoot{background:rgba(10,16,32,.9);border-color:rgba(255,255,255,.12);}
#vidViewer .m3d-vbtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff;}
#vidViewer .m3d-vbtn:hover{border-color:var(--primary);color:var(--primary);}
#vidViewer .m3d-vtitle strong{color:#fff;}
#vidViewer .m3d-count{color:rgba(255,255,255,.75);}
#vidStage{background:#000;display:flex;align-items:center;justify-content:center;}
#vidStage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;}
#vidStage .m3d-error{color:rgba(255,255,255,.75);}
#vidStage .m3d-error strong{color:#fff;}
#vidStage.has-error video{display:none;}
.vid-desc{
  max-width:900px;margin:0 auto;padding:0 14px 6px;text-align:center;
  color:rgba(255,255,255,.8);font-size:13.5px;line-height:1.4;
}
.vid-desc:empty{display:none;}

/* ---------- Formulaire admin ---------- */
#vidFormOverlay{z-index:110;}
.vid-check{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:var(--radius-s);cursor:pointer;background:#fff;}
.vid-check input{width:20px;height:20px;margin-top:1px;accent-color:var(--primary);flex:none;}
.vid-check span{font-size:14px;line-height:1.35;}
.vid-check small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;}
.vid-usage{margin-top:12px;padding:10px 12px;border-radius:var(--radius-s);background:var(--paper-dim);
  font-size:13px;line-height:1.45;color:var(--ink);}
.vid-usage:empty{display:none;}
.vid-note{margin-top:10px;padding:10px 12px;border-radius:var(--radius-s);background:#EAF5EC;color:#1E5B2E;
  font-size:13px;line-height:1.4;display:none;}
.vid-note.show{display:block;}

/* ---------- Sélecteur « bibliothèque de vidéos » (au-dessus du formulaire produit) ---------- */
#vidPickOverlay{z-index:115;}
.vpk-search{margin-bottom:12px;}
.vpk-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto;padding:2px;}
.vpk-row{display:flex;align-items:center;gap:12px;padding:8px;border:1.5px solid var(--line);
  border-radius:var(--radius-s);background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.vpk-row:hover{border-color:var(--primary);}
.vpk-row.is-picked{border-color:var(--primary);background:#FFF4EC;}
.vpk-row.is-disabled{opacity:.5;cursor:default;}
.vpk-row.is-disabled:hover{border-color:var(--line);}
.vpk-row input{width:20px;height:20px;accent-color:var(--primary);flex:none;}
.vpk-thumb{width:84px;height:56px;border-radius:6px;overflow:hidden;background:#0b1220;flex:none;}
.vpk-thumb video{width:100%;height:100%;object-fit:cover;pointer-events:none;}
.vpk-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;}
.vpk-info strong{font-size:14.5px;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vpk-info small{font-size:12.5px;color:var(--muted);line-height:1.3;}
.vpk-empty{padding:26px 12px;text-align:center;color:var(--muted);font-size:14px;}

/* Bouton « Choisir dans la bibliothèque » du formulaire produit */
.pf-vid-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.pf-vid-actions .btn{padding:9px 14px;font-size:13.5px;}
.chip .chip-tag{font-size:10.5px;font-weight:700;color:var(--primary);letter-spacing:.3px;text-transform:uppercase;}

@media (prefers-reduced-motion:reduce){
  .vid-card,.mv-tab{transition:none;}
}