/* ===== La carte d'événement — l'objet central du jeu ===== */
.card{
  position:relative; border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border:1px solid var(--line);
  box-shadow:var(--sh-2);
  padding:clamp(22px,3.4vw,36px);
  overflow:hidden;
}
.card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--tone,var(--violet)); opacity:.9;
}
.card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 200px at 50% -20%, var(--tone-soft,transparent), transparent 70%);
}
.card > *{ position:relative; z-index:1; }

.card-in{ animation:cardIn .34s var(--ease) both; }
@keyframes cardIn{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to{ opacity:1; transform:none; }
}

.card-kicker{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-title); font-weight:800; font-size:.80rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tone,var(--violet));
  margin-bottom:1.1em; text-align:center;
}
.card-headline{
  font-family:var(--f-title); font-weight:900; font-size:var(--fs-xl);
  text-align:center; margin-bottom:.5em; letter-spacing:-.02em;
}
.card-text{ font-size:var(--fs-lg); color:var(--txt); margin-bottom:1.4em; line-height:1.6; }
.card-text em{ color:var(--txt-2); }

.card-options{ display:flex; flex-direction:column; gap:.7em; }

/* les pastilles de gain/perte */
.card-chips{ display:flex; flex-wrap:wrap; gap:.45em; justify-content:center; margin:.2em 0 1.2em; }

/* personnes réelles citées */
.card-people{ display:flex; gap:.6em; justify-content:center; margin-bottom:1em; flex-wrap:wrap; }
.person{ display:flex; flex-direction:column; align-items:center; gap:.4em; width:78px; text-align:center; }
.person-ph{
  width:62px; height:62px; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg,var(--surface-3),var(--surface-2));
  border:2px solid var(--tone,var(--violet)); display:grid; place-items:center;
  font-family:var(--f-title); font-weight:800; font-size:1.15rem; color:var(--txt-2);
}
.person-ph img{ width:100%; height:100%; object-fit:cover; }
.person-name{ font-size:.74rem; color:var(--txt-2); font-weight:600; line-height:1.2; }

/* ===== Carte bilan de saison ===== */
.card--season .card-headline{ font-size:var(--fs-lg); font-style:italic; color:var(--gold); font-weight:700; }
.season-kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.5em; margin:1.1em 0;
}
.kpi{
  background:rgba(255,255,255,.045); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.7em .3em; text-align:center;
}
.kpi-v{ font-family:var(--f-title); font-weight:900; font-size:1.40rem; display:block; }
.kpi-k{ font-size:.70rem; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); font-weight:700; }
.season-lines{ display:flex; flex-direction:column; gap:.45em; font-size:var(--fs-sm); }
.season-line{ display:flex; align-items:flex-start; gap:.5em; }
.season-news{
  margin-top:1em; padding-top:.9em; border-top:1px dashed var(--line-strong);
  font-size:var(--fs-sm); color:var(--txt-2); font-style:italic;
}

/* ===== Carte mercato ===== */
.offer{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:.75em 1.05em; border-radius:var(--r-md);
  background:rgba(255,255,255,.035); border:1px solid var(--line); color:var(--txt);
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.offer:hover{ background:var(--violet-soft); border-color:var(--violet); transform:translateX(3px); }
.offer-top{ display:flex; align-items:center; gap:.5em; flex-wrap:wrap; margin-bottom:.25em; }
.offer-name{ font-family:var(--f-title); font-weight:800; font-size:var(--fs-lg); }
.offer-meta{ font-size:var(--fs-sm); color:var(--txt-2); }

/* --- mise en page à deux colonnes : texte à gauche, illustration à droite --- */
.card-body{ display:grid; gap:1.2em; align-items:center; margin-bottom:1.1em; }
@media (min-width:760px){
  .card-body{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
}
.card-txt{ min-width:0; }
.card-txt .card-text{ margin-bottom:0; }
.card-text--res{ margin-bottom:1.2em; }

.art{ border-radius:var(--r-md); overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.art svg{ width:100%; height:auto; display:block; }

/* --- pastille de lettre sur chaque option : le tchat peut voter --- */
.opt{ display:flex; align-items:flex-start; gap:.85em; }
.opt-key{
  flex:none; display:grid; place-items:center; width:1.85em; height:1.85em; border-radius:9px;
  background:var(--tone-soft,rgba(255,255,255,.07)); border:1px solid var(--tone,var(--line-strong));
  color:var(--tone,var(--violet));
  font-family:var(--f-title); font-weight:900; font-size:var(--fs-sm); line-height:1;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.opt:hover .opt-key{ background:var(--tone,var(--violet)); color:#12101C; }
.opt-body{ flex:1; min-width:0; }

/* Une carte ne doit jamais forcer à faire défiler la page sur ordinateur. */
@media (min-width:900px){
  .card{ max-height:calc(100dvh - 3.2rem); overflow-y:auto; }
  .card::-webkit-scrollbar{ width:6px; }
}
/* Quatre options ou plus : on resserre pour rester compact. */
.card-options:has(> .opt:nth-child(4)) .opt{ padding:.7em 1.05em; }
.card-options:has(> .offer:nth-child(5)) .offer{ padding:.6em .95em; }