/* ========================================
   AubeVideo — identité visuelle « Aube »
   Surcouche chargée en dernier : démarque le site
   (ciel nocturne, accents d'aurore or/rose) sans
   toucher à style.css ni v3.css.
======================================== */

:root {
  /* Nuit étoilée plutôt que noir neutre */
  --bg: #0b1020;
  --bg-elev: #121a31;
  --bg-hover: #1c2745;
  --bg-card: #111831;
  --border: #232f52;
  /* Aurore : or en accent principal */
  --accent: #e8b84a;
  --accent-hover: #f3cc6e;
  --accent-dark: #c79a2e;
  /* Dégradé d'aube réutilisable */
  --aube-grad: linear-gradient(90deg, #e8b84a 0%, #f0915e 55%, #c96fa0 100%);
}

html[data-theme="light"] {
  /* Aube claire : ivoire chaud plutôt que blanc pur */
  --bg: #faf6ee;
  --bg-elev: #f2ecdf;
  --bg-hover: #e9e1cf;
  --bg-card: #fffdf8;
  --border: #e3d9c3;
  --accent: #b8860b;
  --accent-hover: #9a6f08;
  --accent-dark: #7d5a06;
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --bg: #faf6ee;
    --bg-elev: #f2ecdf;
    --bg-hover: #e9e1cf;
    --bg-card: #fffdf8;
    --border: #e3d9c3;
    --accent: #b8860b;
    --accent-hover: #9a6f08;
    --accent-dark: #7d5a06;
  }
}

/* ===== Barre du haut : liseré d'aurore ===== */
.topbar {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, #e8b84a) 100%);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--aube-grad);
  opacity: .55;
  pointer-events: none;
}

/* ===== Recherche : pilule pleine largeur ===== */
.search-bar { border-radius: 999px; }

/* ===== Boutons principaux : dégradé d'aube, forme pilule ===== */
.btn-upload, .btn-login {
  background: var(--aube-grad);
  color: #1a1206;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(232, 184, 74, .25);
}
.btn-upload:hover, .btn-login:hover {
  background: var(--aube-grad);
  filter: brightness(1.1);
}

/* ===== Catégories : pilules, active en dégradé ===== */
.chip { border-radius: 999px; }
.chip.active {
  background: var(--aube-grad);
  color: #1a1206;
  font-weight: 700;
}

/* ===== Navigation latérale : barre dorée à gauche de l'actif ===== */
.nav-item { border-radius: 0 999px 999px 0; }
.nav-item.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ===== Cartes vidéo : arrondi marqué + halo doré au survol ===== */
.video-card {
  border-radius: 16px;
  padding: 6px;
  margin: -6px;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.video-card:hover {
  background: var(--bg-card);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35),
              0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.thumb-wrap { border-radius: 14px; }

/* ===== Titres de section : soulignement d'aurore ===== */
.section-h {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.section-h::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 42px; height: 3px;
  border-radius: 2px;
  background: var(--aube-grad);
}

/* ===== Marque : « Video » en dégradé d'aube ===== */
.brand-accent {
  background: var(--aube-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}