/* ==========================================================================
   Duofilm — Design System « Velours Nocturne »
   Ambiance salle de cinéma : nuit encrée, rouge velours, doré projecteur.
   Même ADN que Duonom (deux cercles) mais univers visuel distinct.
   Polices : Fraunces (titres) + Outfit (UI) — chargées via <link>.
   ========================================================================== */

:root {
  /* — Mode sombre (défaut : on regarde des films dans le noir) — */
  --bg:#161122;             /* nuit encrée */
  --surface:#211A33;
  --muted-bg:#2C2344;       /* velours sombre */
  --accent:#E4564E;         /* rouge velours */
  --accent-ink:#FFF3EE;
  --secondary:#F0B95A;      /* doré projecteur */
  --secondary-ink:#2B1D0E;
  --teal:#57B8AE;           /* néon d'appoint */
  --ink:#F4EFFA;            /* texte */
  --ink-soft:#9C90B8;
  --ink-body:#C9BFDD;

  /* ambiances de séance (solo / duo / surprise) */
  --solo:#57B8AE;  --solo-bg:#1D2E35;
  --duo:#E4564E;   --duo-bg:#39222E;
  --rand:#F0B95A;  --rand-bg:#352B1D;

  /* rayons & espacement (grille 4px) */
  --r-16:16px; --r-20:20px; --r-24:24px; --r-30:30px; --pill:99px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;

  --shadow-card:0 18px 40px -16px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.05);
  --shadow-soft:0 8px 20px -12px rgba(0,0,0,.55);
  --shadow-btn:0 12px 26px -8px rgba(228,86,78,.55);

  --serif:'Fraunces', Georgia, 'Iowan Old Style', serif;
  --sans:'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:#F5F1FA; --surface:#FFFFFF; --muted-bg:#EAE3F4;
    --accent:#D24840; --accent-ink:#FFF3EE;
    --secondary:#C98A2B; --secondary-ink:#FFF8EC; --teal:#2E8D83;
    --ink:#241B36; --ink-soft:#7E7398; --ink-body:#4A3F63;
    --solo:#2E8D83; --solo-bg:#E2F1EF;
    --duo:#D24840;  --duo-bg:#FAE4E1;
    --rand:#B87E22; --rand-bg:#F7ECD8;
    --shadow-card:0 14px 30px -14px rgba(60,40,90,.28);
    --shadow-soft:0 8px 20px -12px rgba(60,40,90,.25);
    --shadow-btn:0 10px 24px -6px rgba(210,72,64,.5);
  }
}
:root[data-theme="dark"]{--bg:#161122;--surface:#211A33;--muted-bg:#2C2344;--accent:#E4564E;--accent-ink:#FFF3EE;--secondary:#F0B95A;--secondary-ink:#2B1D0E;--teal:#57B8AE;--ink:#F4EFFA;--ink-soft:#9C90B8;--ink-body:#C9BFDD;--solo:#57B8AE;--solo-bg:#1D2E35;--duo:#E4564E;--duo-bg:#39222E;--rand:#F0B95A;--rand-bg:#352B1D;--shadow-card:0 18px 40px -16px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.05);--shadow-btn:0 12px 26px -8px rgba(228,86,78,.55);}
:root[data-theme="light"]{--bg:#F5F1FA;--surface:#FFFFFF;--muted-bg:#EAE3F4;--accent:#D24840;--accent-ink:#FFF3EE;--secondary:#C98A2B;--secondary-ink:#FFF8EC;--teal:#2E8D83;--ink:#241B36;--ink-soft:#7E7398;--ink-body:#4A3F63;--solo:#2E8D83;--solo-bg:#E2F1EF;--duo:#D24840;--duo-bg:#FAE4E1;--rand:#B87E22;--rand-bg:#F7ECD8;--shadow-card:0 14px 30px -14px rgba(60,40,90,.28);--shadow-btn:0 10px 24px -6px rgba(210,72,64,.5);}

*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;}

/* — typo — */
.serif{font-family:var(--serif);}
.kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--secondary);}

/* — chips — */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:7px 13px;border-radius:22px;background:var(--muted-bg);color:var(--ink-body);}
.chip.on{background:var(--accent);color:var(--accent-ink);}
.chip.gold{background:var(--rand-bg);color:var(--rand);}

/* — boutons de swipe (cibles >= 44px) — */
.swipe-btn{border:0;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .12s ease;}
.swipe-btn:active{transform:scale(.9);}
.swipe-btn.no{width:52px;height:52px;background:var(--surface);box-shadow:var(--shadow-soft),inset 0 0 0 1px var(--muted-bg);}
.swipe-btn.star{width:60px;height:60px;background:var(--secondary);color:var(--secondary-ink);box-shadow:0 10px 24px -6px rgba(240,185,90,.55);margin-top:-4px;}
.swipe-btn.yes{width:52px;height:52px;background:var(--accent);box-shadow:var(--shadow-btn);}

/* — bouton principal — */
.btn{border:0;cursor:pointer;font-family:inherit;font-weight:700;border-radius:var(--r-20);padding:16px;font-size:15px;background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-btn);width:100%;}
.btn.ghost{background:transparent;color:var(--ink-soft);box-shadow:none;font-weight:600;}
.btn.gold{background:var(--secondary);color:var(--secondary-ink);box-shadow:0 10px 24px -6px rgba(240,185,90,.5);}

/* — toast — */
.toast{background:var(--ink);color:var(--bg);border-radius:var(--r-16);padding:13px 16px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-soft);}

@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}