/* ---------- Theme ---------- */
/* CLAIR par défaut */
:root {
  --bg: #f7f7fb;
  --fg: #1c1e21;
  --muted: #6b7280;
  --card: #ffffff;
  --card-2: #fcfcfe;
  --accent: #2563EB;
  --accent-2: #10B981;
  --danger: #ef4444;
  --border: #e5e7eb;
  --ring: rgba(37,99,235,.25);
  --card-max-width: 420px;                  /* largeur max d'une carte */
  --media-height: clamp(220px, 32vh, 300px);/* hauteur du visuel */
  --skip: #f59e0b;                          /* ambre pour “Aucun des deux” */
}

/* SOMBRE seulement si l’OS est en dark */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0f14;
    --fg: #e5e7eb;
    --muted: #9aa3ad;
    --card: #12161c;
    --card-2: #0f141a;
    --accent: #2563EB;
    --accent-2: #22C55E;
    --danger: #ef4444;
    --border: #1f2937;
    --ring: rgba(37,99,235,.30);
    --skip: #f59e0b;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f7fb;
    --fg: #1c1e21;
    --muted: #6b7280;
    --card: #ffffff;
    --card-2: #fcfcfe;
    --accent: #2563eb;
    --accent-2: #10b981;
    --danger: #ef4444;
    --border: #e5e7eb;
    --ring: rgba(37,99,235,.25);
    /* tu peux garder la même teinte en clair */
    --skip: #f59e0b;
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: radial-gradient(1200px 600px at 50% -20%, rgba(59,130,246,.08), transparent 60%), var(--bg);
  color: var(--fg);
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif;
}
.container { max-width: 1080px; margin: 0 auto; padding: 24px; }

/* === FORCE LIGHT THEME (override final) === */
html { color-scheme: light !important; } /* ignore le thème OS */

body[data-theme="light"]{
  /* variables en clair – override :root même en dark OS */
  --bg:#f7f7fb; --fg:#1c1e21; --muted:#6b7280;
  --card:#ffffff; --card-2:#fcfcfe;
  --accent:#2563EB; --accent-2:#10B981; --danger:#EF4444;
  --border:#e5e7eb; --ring:rgba(37,99,235,.25);
}

/* (optionnel) si une règle change le fond ailleurs, on verrouille aussi ici */
body[data-theme="light"]{
  background: radial-gradient(1200px 600px at 50% -20%, rgba(59,130,246,.08), transparent 60%), var(--bg) !important;
}

/* ---------- Header ---------- */
header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.brand { font-weight: 800; letter-spacing:.2px; display:flex; align-items:center; gap:10px; }
/* .brand::before{content:"⚖️"; filter:saturate(1.1);} */

header nav a {
  color: var(--muted); text-decoration:none; margin-left:18px; padding:6px 8px; border-radius:10px;
}
header nav a:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent); }

/* ---------- Notice ---------- */
.notice {
  background: color-mix(in oklab, var(--fg) 4%, var(--card));
  border: 1px solid var(--border);
  padding: 12px 14px; border-radius: 14px; margin: 16px 0 18px 0;
  color: var(--muted);
}

/* ---------- Grid ---------- */
.grid {
  display:grid; gap:16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 860px){ .grid{ grid-template-columns:1fr; } }

/* ---------- Card ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}

/* Media bloc avec overlay */
/* Boîte image à ratio constant (pas de recadrage) */
.media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;            /* hauteur homogène dans la grille */
  background: var(--card-2);
  border-bottom: 1px solid var(--border);
}
.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;             /* ← affiche l’image entière, sans crop */
  display: block;
}

.overlay {
  position:absolute; inset:auto 0 0 0; padding:14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.0) 65%);
}
.title { font-weight:800; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.meta  { font-size:13px; color:#d1d5db; opacity:.95; }

/* ---------- Actions ---------- */
.actions {
  display:grid; grid-template-columns: repeat(2,1fr); gap:12px;
  margin-top: 14px;
}
.actions .wide { grid-column: 1 / -1; }

/* Boutons */
button, .btn {
  appearance:none; border:1px solid var(--border); background: var(--card);
  color: var(--fg); padding: 12px 14px; border-radius: 12px; cursor:pointer;
  font-weight:700; letter-spacing:.2px; transition: border-color .15s, box-shadow .15s, transform .02s;
}
button:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); }
button:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 85%, black 0%), var(--accent));
  color:#fff; border-color: color-mix(in oklab, var(--accent) 65%, var(--border));
  box-shadow: 0 6px 14px rgba(59,130,246,.25);
}
.btn-primary:hover {
  box-shadow: 0 8px 18px rgba(59,130,246,.32);
}
.btn-green {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent-2) 85%, black 0%), var(--accent-2));
  color: #041009; border-color: color-mix(in oklab, var(--accent-2) 65%, var(--border));
  box-shadow: 0 6px 14px rgba(34,197,94,.20);
}
.btn-ghost { background: transparent; border-style: dashed; color: var(--muted); }
.btn-danger { background: var(--danger); color:#fff; border-color: var(--danger); }

/* ---------- Table (ranking) ---------- */
.table {
  width:100%; border-collapse: collapse; overflow:hidden; border-radius: 14px;
  border:1px solid var(--border); background: var(--card);
}
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align:left; }
.table th { font-size: 13px; color: var(--muted); font-weight: 800; }
.table tr:hover td { background: color-mix(in oklab, var(--fg) 6%, transparent); }

/* ---------- Footer ---------- */
/* .footer { margin: 26px 0 6px; color: var(--muted); text-align:center; font-size: 14px; } */

/* cartes plus compactes dans la page duel */
.duel .card{
  max-width: var(--card-max-width);
  margin-inline: auto;                  /* centre chaque carte dans sa colonne */
}

/* Centre le bouton "Je préfère" sous chaque carte (gauche/droite) */
.duel .grid > div .actions{
  display: flex;                 /* override du grid par défaut */
  justify-content: center;
  align-items: center;
  gap: 0;                        /* optionnel: pas d'espace latéral */
  margin-top: 14px;              /* petit espace sous la carte */
}

/* Largeur confortable du bouton */
.duel .grid > div .actions button,
.duel .grid > div .actions .btn{
  width: clamp(140px, 60%, 220px);
}

/* IMPORTANT: on laisse les boutons du bas en grid (Les deux / Aucun) */

.prose {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  max-width: 820px;
  margin: 16px auto;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.prose h1 { font-size: 28px; margin: 0 0 14px; }
.prose h2 { font-size: 20px; margin: 18px 0 10px; }
.prose p, .prose li { line-height: 1.7; }
.prose a { color: var(--accent); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose .back { margin-top: 12px; }

/* ---------- Compact mode (duel) — v3 un peu + grand ---------- */
.duel.compact .grid{ gap: 14px; }

.duel.compact .card{
  max-width: 600px;                /* + largeur carte */
  border-radius: 14px;
  margin-inline: auto;
}

.duel.compact .media{
  height: clamp(300px, 34vh, 370px); /* + hauteur visuel, sans recadrage */
  aspect-ratio: auto;
}
.duel.compact .media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.duel.compact .overlay{ padding: 12px 16px; }
.duel.compact .title{ font-size: 17px; }
.duel.compact .meta{ font-size: 13px; }

.duel.compact .actions{ gap: 10px; margin-top: 12px; }
.duel.compact button, .duel.compact .btn{
  padding: 11px 14px;              /* boutons un poil plus hauts/larges */
  border-radius: 10px;
}

/* un peu plus large/haut sur très grands écrans */
@media (min-width: 1200px){
  .duel.compact .card{ max-width: 550px; }
  .duel.compact .media{ height: 400px; }
}

/* mobile: garder plein écran mais lisible */
@media (max-width: 550px){
  .duel.compact .card{ max-width: 100%; }
  .duel.compact .media{ height: clamp(260px, 40vh, 330px); }
}

/* Ligne du bas : plus d'espace entre les "lignes" de boutons */
.duel .actions-bottom{
  margin-top: clamp(18px, 3vh, 28px);  /* ↑ espace entre les lignes */
  gap: 14px;                           /* espace entre les 2 boutons du bas */
}

/* Bouton "Aucun des deux" (ambre) */
.btn-none{
  background: linear-gradient(180deg, color-mix(in oklab, var(--skip) 85%, black 0%), var(--skip));
  color: #0b0d10; /* texte sombre, très lisible sur ambre */
  border: 1px solid color-mix(in oklab, var(--skip) 65%, var(--border));
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(245,158,11,.25);
  font-weight: 800;
  letter-spacing: .2px;
}
.btn-none:hover{
  box-shadow: 0 8px 18px rgba(245,158,11,.32);
  border-color: color-mix(in oklab, var(--skip) 75%, var(--border));
}
.btn-none:focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring), 0 8px 18px rgba(245,158,11,.32);
}

[data-theme="emerald"]
{
  --accent:#10B981; --accent-2:#3B82F6; --ring:rgba(16,185,129,.30);
}

[data-theme="violet"]
{
  --accent:#7C3AED; --accent-2:#22C55E; --ring:rgba(124,58,237,.30);
}

[data-theme="teal"]
{
  --accent:#14B8A6; --accent-2:#3B82F6; --ring:rgba(20,184,166,.30);
}

/* === Overlay toujours lisible sur l'image === */
.overlay{ position:absolute; inset:auto 0 0 0; padding:16px; }

/* 1) Scrim + gradient plus fort sous le texte */
.overlay::before{
  content:"";
  position:absolute; inset:-50% 0 0 0;          /* couvre bien la zone basse */
  background: linear-gradient(
    to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.55) 40%,
    rgba(0,0,0,0)   75%
  );
  z-index:0;
}

/* 2) Pastille derrière le titre & les meta (lisible même sur fond clair) */
.overlay .title,
.overlay .meta{
  position: relative; z-index: 1;
  color: #fff !important;
  background: rgba(0,0,0,.62);
  padding: 6px 10px;
  border-radius: 10px;
  /* la pastille se duplique proprement sur chaque ligne */
  display: inline;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Titre en plusieurs lignes, sans troncature */
.overlay .title{
  font-weight: 800; font-size: 18px; line-height: 1.25;
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  text-shadow: none;
}

/* Les infos passent à la ligne sous le titre */
.overlay .meta{
  display: inline-block;
  margin-top: 6px;
  font-size: 12.5px;
  background: rgba(0,0,0,.5);
}

/* + Petit filet d'ombre sur l'image pour améliorer encore le contraste bas */
.media{ position: relative; }
.media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:10px;
  background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,0));
}

.footer{
  margin: 26px 0 6px;
  color: var(--muted);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;         /* ← centre horizontalement */
  gap: 6px;
  text-align: center;          /* sécurité si <p> a une largeur complète */
}

.footer .links{
  display: flex;
  align-items: center;
  gap: 10px;                   /* espace entre lien et “·” */
  flex-wrap: wrap;
  justify-content: center;     /* ← centre la rangée de liens */
}

.footer .links a{
  color: var(--accent);
  text-decoration: none;
}
.footer .links a:hover{ text-decoration: underline; }