/* ============================================================
   PHOTOVIDEOTEK - Feuille de styles principale
   Thèmes : dark (défaut), light, pastel
   ============================================================ */

/* ---- Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ============================
   THÈME : DARK (défaut)
   ============================ */
:root,
[data-theme="dark"] {
  --bg:          #0c0c18;
  --bg2:         #12121f;
  --surface:     #1a1a2e;
  --surface2:    #22223a;
  --border:      #2d2d50;
  --border2:     #3a3a60;
  --accent:      #c9a84c;
  --accent2:     #e8c97e;
  --accent-rgb:  201,168,76;
  --text:        #e8e8f4;
  --text2:       #b0b0cc;
  --muted:       #666688;
  --danger:      #e05555;
  --success:     #55c073;
  --info:        #5599e0;
  --shadow:      rgba(0,0,0,.5);
  --overlay:     rgba(0,0,0,.85);
  --thumb-bg:    #1a1a2e;
  --scrollbar:   #2d2d50;
  --scroll-thumb:#c9a84c;
}

/* ============================
   THÈME : LIGHT
   ============================ */
[data-theme="light"] {
  --bg:          #f5f5f0;
  --bg2:         #efefea;
  --surface:     #ffffff;
  --surface2:    #f0f0ea;
  --border:      #d8d8cc;
  --border2:     #c8c8bc;
  --accent:      #7b5ea7;
  --accent2:     #9b7ec7;
  --accent-rgb:  123,94,167;
  --text:        #1a1a2e;
  --text2:       #444466;
  --muted:       #888890;
  --danger:      #cc3333;
  --success:     #338855;
  --info:        #3366cc;
  --shadow:      rgba(0,0,0,.12);
  --overlay:     rgba(0,0,0,.7);
  --thumb-bg:    #e8e8e0;
  --scrollbar:   #d8d8cc;
  --scroll-thumb:#7b5ea7;
}

/* ============================
   THÈME : PASTEL
   ============================ */
[data-theme="pastel"] {
  --bg:          #fdf0f5;
  --bg2:         #f8e8f0;
  --surface:     #fff5fb;
  --surface2:    #f5e0ee;
  --border:      #e8c8dc;
  --border2:     #ddb8cc;
  --accent:      #d47fa6;
  --accent2:     #e8a0c0;
  --accent-rgb:  212,127,166;
  --text:        #3a1a2e;
  --text2:       #6a3a54;
  --muted:       #a07090;
  --danger:      #cc4466;
  --success:     #5599aa;
  --info:        #6688cc;
  --shadow:      rgba(180,80,120,.12);
  --overlay:     rgba(60,20,40,.75);
  --thumb-bg:    #f0d8e8;
  --scrollbar:   #e8c8dc;
  --scroll-thumb:#d47fa6;
}

/* ============================
   RESET & BASE
   ============================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { font-size:16px; scroll-behavior:smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  min-height: 100vh;
  transition: background .3s, color .3s;
}

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--scrollbar); }
::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border-radius:3px; }

/* ============================
   LAYOUT PRINCIPAL
   ============================ */
.pvt-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- HEADER ---- */
.pvt-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px var(--shadow);
}

.pvt-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pvt-logo span { color: var(--text2); font-size:.75rem; font-weight:300; font-family:'DM Sans',sans-serif; }

.pvt-header-center { flex:1; }

.pvt-search-bar {
  display: flex;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .75rem;
  gap: .5rem;
  transition: border-color .2s;
}
.pvt-search-bar:focus-within { border-color: var(--accent); }
.pvt-search-bar input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  width: 100%;
}
.pvt-search-bar input::placeholder { color: var(--muted); }

.pvt-header-right { display:flex; align-items:center; gap:.5rem; }

/* ---- NAV ---- */
.pvt-nav {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: .4rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .25rem;
  overflow-x: auto;
  font-size: .85rem;
}
.pvt-nav-item {
  color: var(--text2);
  text-decoration: none;
  padding: .3rem .7rem;
  border-radius: 6px;
  transition: background .15s, color .15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.pvt-nav-item:hover, .pvt-nav-item.active {
  background: rgba(var(--accent-rgb),.15);
  color: var(--accent);
}
.pvt-nav-sep { color: var(--muted); margin: 0 .2rem; }

/* ---- MAIN ---- */
.pvt-main {
  flex: 1;
  padding: 1.25rem;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* ---- STATS BAR ---- */
.pvt-stats-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  font-size: .85rem;
}
.pvt-stat { display:flex; align-items:center; gap:.4rem; }
.pvt-stat-icon { font-size:1.1rem; }
.pvt-stat-val { font-weight:600; color:var(--accent); }
.pvt-stat-lbl { color:var(--muted); }

/* ============================
   TOOLBARS & BUTTONS
   ============================ */
.pvt-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(var(--accent-rgb),.08); }
.btn.active { background:var(--accent); color:#000; border-color:var(--accent); font-weight:600; }
.btn-icon { padding:.45rem .55rem; }
.btn-primary { background:var(--accent); color:#000; border-color:var(--accent); font-weight:600; }
.btn-primary:hover { background:var(--accent2); border-color:var(--accent2); color:#000; }
.btn-danger { border-color:var(--danger); color:var(--danger); }
.btn-danger:hover { background:var(--danger); color:#fff; }
.btn-sm { padding:.3rem .65rem; font-size:.8rem; }

/* ============================
   MOSAÏQUE
   ============================ */
.pvt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem;
}

.pvt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
}
.pvt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(--shadow);
  border-color: var(--border2);
}
.pvt-card.selected { border-color:var(--accent); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.4); }

.pvt-card-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--thumb-bg);
  display: block;
}
.pvt-card-dir-thumb {
  width: 100%;
  aspect-ratio: 1;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--accent);
}
.pvt-card-info {
  padding: .5rem .6rem;
  font-size: .78rem;
}
.pvt-card-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.pvt-card-meta { color: var(--muted); margin-top:.15rem; }

/* Badge vidéo */
.pvt-video-badge {
  position: absolute;
  top: .4rem; right: .4rem;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: .7rem;
  padding: .15rem .4rem;
  border-radius: 4px;
}

/* Checkbox sélection */
.pvt-card-check {
  position: absolute;
  top: .5rem; left: .5rem;
  width: 1.3rem; height: 1.3rem;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.4);
  display: flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s;
  font-size: .8rem;
}
.pvt-card:hover .pvt-card-check, .pvt-card.selected .pvt-card-check { opacity:1; }
.pvt-card.selected .pvt-card-check { background:var(--accent); border-color:var(--accent); color:#000; }

/* ============================
   LISTE
   ============================ */
.pvt-list { display:flex; flex-direction:column; gap:.35rem; }

.pvt-list-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pvt-list-item:hover { background:var(--surface2); border-color:var(--border2); }
.pvt-list-item.selected { border-color:var(--accent); background:rgba(var(--accent-rgb),.06); }

.pvt-list-icon { font-size:1.4rem; flex-shrink:0; }
.pvt-list-thumb { width:2.5rem; height:2.5rem; border-radius:6px; object-fit:cover; flex-shrink:0; }
.pvt-list-name { flex:1; font-weight:500; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pvt-list-meta { color:var(--muted); font-size:.8rem; flex-shrink:0; }

/* ============================
   LIGHTBOX / DIAPORAMA
   ============================ */
.pvt-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 1000;
  flex-direction: column;
}
.pvt-lightbox.open { display:flex; }

.pvt-lb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(10px);
  flex-shrink:0;
}
.pvt-lb-title { font-size:.9rem; color:#fff; font-family:'Playfair Display',serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }
.pvt-lb-counter { color:rgba(255,255,255,.6); font-size:.8rem; }

.pvt-lb-main {
  flex:1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.pvt-lb-media {
  max-width:100%;
  max-height:100%;
  border-radius:4px;
  user-select:none;
  object-fit:contain;
}
video.pvt-lb-media { background:#000; width:100%; height:100%; }

.pvt-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  padding: .5rem .75rem;
  border-radius: 10px;
  transition: background .15s;
  line-height:1;
}
.pvt-lb-nav:hover { background:rgba(var(--accent-rgb),.6); }
.pvt-lb-prev { left:.75rem; }
.pvt-lb-next { right:.75rem; }

.pvt-lb-filmstrip {
  display: flex;
  gap: .4rem;
  padding: .5rem 1rem;
  background: rgba(0,0,0,.5);
  overflow-x: auto;
  flex-shrink:0;
}
.pvt-lb-strip-item {
  width: 60px; height:60px; border-radius:5px; overflow:hidden;
  border: 2px solid transparent; cursor:pointer; flex-shrink:0;
  transition: border-color .15s;
}
.pvt-lb-strip-item.active { border-color:var(--accent); }
.pvt-lb-strip-item img { width:100%; height:100%; object-fit:cover; }
.pvt-lb-strip-item .vid-icon { width:100%; height:100%; background:#222; display:flex; align-items:center; justify-content:center; font-size:1.5rem; }

/* ============================
   FORMULAIRES
   ============================ */
.pvt-form { max-width:480px; }
.pvt-form-group { margin-bottom:1rem; }
.pvt-form-group label { display:block; font-size:.85rem; color:var(--text2); margin-bottom:.35rem; font-weight:500; }
.pvt-form-group input, .pvt-form-group select, .pvt-form-group textarea {
  width:100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .85rem;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
}
.pvt-form-group input:focus, .pvt-form-group select:focus { border-color:var(--accent); }
.pvt-form-group select option { background:var(--surface); }

/* ============================
   PAGES SPÉCIALES
   ============================ */

/* Login */
.pvt-login-wrap {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--bg);
  padding:1rem;
}
.pvt-login-box {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:2.5rem;
  width:100%;
  max-width:380px;
  box-shadow: 0 20px 60px var(--shadow);
}
.pvt-login-logo {
  text-align:center;
  font-family:'Playfair Display',serif;
  font-size:1.8rem;
  color:var(--accent);
  margin-bottom:2rem;
}
.pvt-login-logo small { display:block; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:300; margin-top:.25rem; }

/* Alerts */
.pvt-alert {
  padding: .75rem 1rem;
  border-radius: 8px;
  font-size:.875rem;
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.pvt-alert-success { background:rgba(85,192,115,.15); border:1px solid rgba(85,192,115,.4); color:var(--success); }
.pvt-alert-error   { background:rgba(224,85,85,.15);  border:1px solid rgba(224,85,85,.4);  color:var(--danger); }
.pvt-alert-info    { background:rgba(85,153,224,.15); border:1px solid rgba(85,153,224,.4); color:var(--info); }

/* Tables */
.pvt-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.pvt-table th { text-align:left; padding:.6rem 1rem; border-bottom:2px solid var(--border); color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; }
.pvt-table td { padding:.65rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.pvt-table tr:hover td { background:rgba(var(--accent-rgb),.04); }

/* Badges rôles */
.badge { display:inline-flex; align-items:center; padding:.2rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600; }
.badge-admin  { background:rgba(var(--accent-rgb),.2);  color:var(--accent); }
.badge-editor { background:rgba(85,153,224,.2);          color:var(--info); }
.badge-reader { background:rgba(85,192,115,.15);         color:var(--success); }

/* Cards stats */
.pvt-stat-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.pvt-stat-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.25rem; text-align:center; }
.pvt-stat-card .big { font-size:1.8rem; font-weight:700; color:var(--accent); font-family:'Playfair Display',serif; }
.pvt-stat-card .lbl { color:var(--muted); font-size:.8rem; margin-top:.25rem; }

/* Upload zone */
.pvt-dropzone {
  border: 2px dashed var(--border2);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.pvt-dropzone:hover, .pvt-dropzone.drag-over {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb),.05);
  color: var(--text);
}
.pvt-dropzone .icon { font-size:2.5rem; margin-bottom:.75rem; }

/* Breadcrumb */
.pvt-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; font-size:.85rem; color:var(--muted); margin-bottom:1rem; }
.pvt-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; font-size:1.85rem; color:var(--muted); margin-bottom:1rem; }
.pvt-breadcrumb a { color:var(--text2); text-decoration:none; }
.pvt-breadcrumb a:hover { color:var(--accent); }
.pvt-breadcrumb .sep_DESACTIVE { color:var(--border2); }
.pvt-breadcrumb .current { color:var(--text); font-weight:500; }

/* Recherches récentes */
.pvt-recent-searches { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.75rem; }
.pvt-search-tag {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:999px; padding:.25rem .7rem; font-size:.78rem;
  cursor:pointer; color:var(--text2); transition:all .15s;
}
.pvt-search-tag:hover { border-color:var(--accent); color:var(--accent); }

/* Theme switcher */
.pvt-theme-btn {
  width:2rem; height:2rem; border-radius:50%; border:2px solid var(--border);
  cursor:pointer; transition:border-color .15s; position:relative; overflow:hidden;
}
.pvt-theme-btn.t-dark  { background: linear-gradient(135deg,#0c0c18 50%,#c9a84c 50%); }
.pvt-theme-btn.t-light { background: linear-gradient(135deg,#f5f5f0 50%,#7b5ea7 50%); }
.pvt-theme-btn.t-pastel{ background: linear-gradient(135deg,#fdf0f5 50%,#d47fa6 50%); }
.pvt-theme-btn.active  { border-color:var(--accent); transform:scale(1.15); }

/* ============================
   PROGRESS BAR
   ============================ */
.pvt-progress { background:var(--surface2); border-radius:999px; height:6px; overflow:hidden; }
.pvt-progress-bar { height:100%; background:var(--accent); border-radius:999px; transition:width .3s; }

/* ============================
   FULLSCREEN (PWA-like)
   ============================ */
@media (display-mode: fullscreen) {
  .pvt-header { padding-top: env(safe-area-inset-top, .75rem); }
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 640px) {
  .pvt-main { padding:.75rem; }
  .pvt-header { padding:.6rem .75rem; gap:.5rem; }
  .pvt-logo span { display:none; }
  .pvt-stats-bar { flex-direction:column; gap:.75rem; }
  .pvt-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:.5rem; }
  .pvt-lb-nav { padding:.4rem .5rem; font-size:1.4rem; }
  .pvt-lb-filmstrip { display:none; }
  .pvt-login-box { padding:1.75rem 1.25rem; }
  .pvt-table { display:block; overflow-x:auto; }
}

@media (min-width: 1024px) {
  .pvt-grid { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); }
}

@media (min-width: 1440px) {
  .pvt-grid { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
}

/* ============================
   ANIMATIONS
   ============================ */
@keyframes pvt-fade-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.pvt-fade-in { animation: pvt-fade-in .25s ease forwards; }

@keyframes pvt-spin { to{transform:rotate(360deg)} }
.pvt-spin { animation:pvt-spin .8s linear infinite; display:inline-block; }

/* Loading overlay */
.pvt-loading {
  position:fixed; inset:0; background:var(--overlay);
  z-index:2000; display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:1rem; color:#fff;
}
.pvt-loading.show { display:flex; }
.pvt-loading-spinner { font-size:2.5rem; }