/* assets/css/style.css */
:root{
  --bg:#0f1410; --card:#1a2018; --text:#e6e9e6; --accent:#6e7f52; --muted:#93a28a;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}
header,footer{background:#121712;border-bottom:1px solid #20301e}
.container{max-width:1100px;margin:0 auto;padding:16px}
nav a{margin-right:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{background:var(--card);border:1px solid #233223;border-radius:16px;padding:12px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:var(--accent);color:#fff}
.btn-outline{background:transparent;border:1px solid var(--accent);color:var(--text)}
input,textarea,select{width:100%;padding:10px;border-radius:10px;border:1px solid #2b3c2a;background:#121712;color:#e6e9e6}
label{display:block;margin:8px 0 6px}
.form{max-width:600px;margin:0 auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px;border-bottom:1px solid #263626}
.badge{font-size:12px;padding:3px 8px;border-radius:999px;background:#233223}
.poster{width:100%;height:300px;object-fit:cover;border-radius:12px}
/* ---- UI polish pack (sans changer les couleurs) ---- */

/* Mise en page globale */
:root {
  /* si tu as déjà des variables, celles-ci n'écrasent pas tes couleurs */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 6px 24px rgba(0,0,0,.25);
  --shadow-sm: 0 2px 12px rgba(0,0,0,.18);
  --ring: 0 0 0 3px rgba(255,255,255,.06), 0 0 0 5px rgba(110,127,82,.45); /* utilise la teinte accent existante */
}

html { scroll-behavior: smooth; }
body { line-height: 1.6; letter-spacing: .2px; }

/* Conteneurs */
.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Header plus net */
header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
header a { text-decoration: none; }
header .brand { display:flex; align-items:center; gap:10px; }
.site-logo { height: 34px; width:auto; object-fit: contain; display:block; }

/* Navigation */
header nav a { padding: 10px 8px; border-radius: var(--radius-sm); }
header nav a:hover { background: rgba(255,255,255,.05); }

/* Boutons */
.btn, .btn-outline {
  border-radius: var(--radius);
  padding: 10px 14px;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-outline { border: 1px solid rgba(255,255,255,.12); background: transparent; }
.btn-outline:hover { background: rgba(255,255,255,.06); }

/* Badges / pastilles */
.badge {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: .9rem;
  opacity: .9;
}

/* Liens, états focus (accessibilité) */
a { transition: opacity .15s ease, background .15s ease; }
a:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: transparent;
}

/* Cartes & sections */
.card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Grille catalogue (s’adapte au mobile) */
.grid {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) );
  gap: 18px;
}
.film-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .2s ease;
  background: rgba(255,255,255,.02);
}
.film-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.film-card .poster {
  aspect-ratio: 2 / 3;            /* ratio d’affiche */
  width: 100%;
  object-fit: cover;
  display: block;
  background: rgba(255,255,255,.04);
}
.film-card .body { padding: 12px; display:grid; gap:8px; }
.price-pill {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  width: max-content;
}

/* Formulaires */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  width: 100%;
  padding: 12px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  transition: box-shadow .15s ease, background .15s ease;
}
input:hover, textarea:hover, select:hover { background: rgba(255,255,255,.04); }

/* Section héro (page d’accueil) */
.hero {
  padding: 40px 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero h1 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.2;
  margin: 0 0 10px;
  letter-spacing: .3px;
}

/* Footer plus fin */
footer {
  border-top: 1px solid rgba(255,255,255,.06);
  opacity: .95;
}

/* Petits écrans */
@media (max-width: 720px){
  header .container { gap: 10px; }
  .btn, .btn-outline { padding: 9px 12px; }
}