:root{
  --bg-grad-1:#2c3e50;
  --bg-grad-2:#4ca1af;

  --surface:#0b0f1a;
  --card-bg: rgba(0,0,0,0.65);
  --text:#fff;
  --muted:#e5e7eb;
  --border: rgba(255,255,255,0.2);

  --accent:#e74c3c;
  --accent-hover:#c0392b;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;

  --shadow-sm:0 4px 10px rgba(0,0,0,0.3);
  --shadow-md:0 10px 20px rgba(0,0,0,.25);
  --shadow-lg:0 16px 26px rgba(0,0,0,.3);

  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, "Arial", sans-serif;

  --step--1: clamp(.8rem, .7rem + .3vw, .95rem);
  --step-0:  clamp(1rem, .95rem + .4vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  --step-3:  clamp(2.0rem, 1.6rem + 1.8vw, 2.8rem);

  --space-1: clamp(6px, 0.6vw, 10px);
  --space-2: clamp(10px, 1vw, 16px);
  --space-3: clamp(16px, 1.6vw, 24px);
  --space-4: clamp(24px, 2.2vw, 36px);
  --space-5: clamp(36px, 3vw, 56px);
}

*{ box-sizing:border-box }

html{ 
  background: linear-gradient(135deg, var(--bg-grad-1), var(--bg-grad-2)); 
  min-height: 100%; 
}
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--text);
  background: transparent;
  min-height: 100%;
}
h1 { font-size: var(--step-3); margin: 0 0 var(--space-3); }
h2 { font-size: var(--step-2); margin: 0 0 var(--space-2); }
p, .btn, .input, .select, .tag, .date { font-size: var(--step-0); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-2); }
.center-screen{ min-height: 100vh; display:flex; align-items:center; justify-content:center; }

.card{
  position:relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-pad { padding: var(--space-4); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--accent); color:#fff; border:none; border-radius: var(--radius-sm);
  padding: 12px 18px; cursor:pointer; transition: background .2s ease;
}
.btn:hover{ background: var(--accent-hover); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.input, .select{
  width: 100%;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text); outline: none;
}
.select{ color-scheme: dark; }
.select option{ background:#0f172a; color:#e5e7eb; }
.select option:checked,
.select option:hover{ background:#1f2937; color:#fff; }

.modal{
  display:none; position:fixed; inset:0; z-index:9999;
  background: rgba(0,0,0,.9);
  align-items:center; justify-content:center;
}
.modal.open{ display:flex; }
body.no-scroll{ overflow:hidden; }

.modal-content{
  position:relative; background:#2c3e50; color:#fff;
  border-radius: var(--radius-md);
  max-width: 600px; max-height: 90vh; padding: var(--space-4); text-align:center;
}
.modal-close{
  position:absolute; top:-25px; right:-25px;
  width:20px; height:20px; line-height:20px; text-align:center;
  border:none; border-radius:50%;
  background: var(--accent); color:#fff; cursor:pointer;
}

.modal-content--video{
  width: min(85vw, 1400px);
  height: min(85vh, 900px);
  background:#0b0f1a; color:#fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display:flex; flex-direction:column;
  overflow:hidden;
}

.modal-header{
  padding:10px 14px; display:flex; align-items:center; justify-content:space-between;
  background: rgba(255,255,255,.06); border-bottom:1px solid var(--border);
}

.modal-title{ margin:0; font-size: var(--step-1); 
}

.modal-body{
  flex:1; background:#000;
  display:flex; align-items:center; justify-content:center;
}

.modal-body video{
  display:block;
  max-width: 95%;
  max-height: 95%;
  width:auto;
  height:auto;
  object-fit: contain;
  background:#000; 
}

.video-wrap{
  position:relative;
  width:100%; height:100%;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
}

.video-wrap > video{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit: contain;
  display:block; 
  background:#000;
}

.modal-close{ width: 32px; height: 32px; line-height: 32px; border-radius:999px; }

.grid{
  display:grid; gap: var(--space-2);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width:1000px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){ .grid{ grid-template-columns: 1fr; } }

.media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.media > img,
.media > video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.playBadge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:999px; background: rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm);
  cursor:pointer; z-index:2; pointer-events:auto;
}
.playBadge::before{
  content:''; display:block;
  border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.card:hover .playBadge{ transform:translate(-50%,-50%) scale(1.05); background: rgba(0,0,0,.6); }

.meta{ padding: var(--space-2) var(--space-2) var(--space-3); display:flex; flex-direction:column; gap:var(--space-1); }
.title{ font-weight:700; font-size:var(--step-1); line-height:1.3; }
.tags{ display:flex; flex-wrap:wrap; gap:var(--space-1); opacity:.95; }
.tag{
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,.06);
  cursor: pointer;
}
.tag:hover{ background: rgba(255,255,255,.12); }
.date{ font-size:var(--step--1); opacity:.8; }
.empty{ text-align:center; opacity:.9; padding: 40px 10px; }

.filters{
  position: sticky; top: 0; z-index: 5;
  background: rgba(15, 23, 42, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: var(--space-2);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  border-bottom: 1px solid var(--border);
}
.filters .inner{
  max-width: 1200px; margin:0 auto;
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.filters label{ display:flex; flex-direction:column; gap:6px; font-size:.9rem; }
.filters .actions{ display:flex; gap:var(--space-2); align-items:flex-end; justify-content:flex-end; }


.pager{
  margin-top: var(--space-2);
  display:flex; gap:var(--space-1); align-items:center; justify-content:center; flex-wrap:wrap;
}
.pbtn{
  background: rgba(0,0,0,.35);
  color:#fff; border:1px solid var(--border);
  padding:8px 12px; border-radius:8px; cursor:pointer; transition:.15s;
}
.pbtn:hover{ background: rgba(0,0,0,.5); }
.pbtn[disabled]{ opacity:.45; cursor:not-allowed; }
.ppos{ opacity:.9; font-size: var(--step--1); }

.backButton{
  position: fixed; top: 13px; left: 13px;
  background: #333; color: #fff; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 5px;
  text-decoration: none; font-size: 1em; z-index: 10000;
  transition: background .2s;
}
.backButton:hover{ background:#555; }

.page-header{
  display:flex; align-items:center; justify-content:center;
  padding: var(--space-5) var(--space-3) var(--space-2);
  text-align:center;
}

.hero { padding: var(--space-5) var(--space-3); text-align: center; }
.hero .title { font-size: var(--step-3); margin-bottom: var(--space-2); }
.hero .subtitle { font-size: var(--step-1); opacity:.95; margin-bottom: var(--space-3); }
.hero-actions{ display:flex; flex-wrap: wrap; gap: var(--space-2); align-items:center; justify-content:center; }

/* ===============================
   Petites améliorations mobiles
================================= */
@media (max-width:480px){
  .btn{ width: 100%; }
  .filters .actions{ justify-content: stretch; }
  .backButton{ top: 8px; left: 8px; padding: 6px 10px; }
}