/* ═══════════════════════════════════════════════
   AllIn Académie — main.css
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* Palette */
  --bg:        #0a0c0f;
  --bg2:       #111318;
  --bg3:       #181b22;
  --surface:   #1e2129;
  --surface2:  rgba(255,255,255,0.04);
  --surface3:  rgba(255,255,255,0.07);
  --border:    rgba(201,162,39,0.15);
  --border2:   rgba(201,162,39,0.4);
  --gold:      #c9a227;
  --gold2:     #e8c94a;
  --gold3:     #8a6b15;
  --cream:     #f0e6cc;
  --text:      #ccc5b0;
  --muted:     #6b6350;
  --felt:      #0d4528;
  --red:       #c0392b;
  --green:     #22c55e;
  --danger:    #ef4444;
  --warn:      #f59e0b;
  --blue:      #3b82f6;
  /* Sidebar */
  --sidebar-w: 260px;
  --header-h:  60px;
  --radius:    10px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  line-height:1.7;
  min-height:100vh;
}
a { color:var(--gold); text-decoration:none; transition:color .18s; }
a:hover { color:var(--gold2); }
img { max-width:100%; }
button { font-family:'DM Sans',sans-serif; cursor:pointer; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(201,162,39,0.25); border-radius:3px; }

/* ══════════════════════
   LAYOUT
══════════════════════ */
.layout { display:flex; min-height:100vh; }

/* ── SIDEBAR ── */
.sidebar {
  width:var(--sidebar-w);
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:200;
  overflow-y:auto;
  transition:transform .3s ease;
}
.sidebar-logo {
  padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:0.75rem;
  flex-shrink:0;
}
.logo-icon {
  width:36px; height:36px;
  background:linear-gradient(135deg, var(--gold3), var(--gold));
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  box-shadow:0 2px 8px rgba(201,162,39,0.3);
  flex-shrink:0;
}
.logo-text {
  font-family:'Playfair Display',serif;
  font-size:1rem; font-weight:900;
  color:var(--gold);
  line-height:1.1;
}
.logo-text span { color:var(--cream); }

/* Progress bar in sidebar */
.sidebar-progress {
  padding:0.8rem 1.4rem;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sp-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:.4rem; display:flex; justify-content:space-between; }
.sp-bar { height:4px; background:var(--surface3); border-radius:2px; overflow:hidden; }
.sp-fill { height:100%; background:linear-gradient(90deg,var(--gold3),var(--gold)); border-radius:2px; transition:width .5s; }

/* Nav sections */
.nav-section { padding:.5rem 0; }
.nav-section-title {
  padding:.35rem 1.4rem;
  font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted);
}
.nav-item {
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem 1.4rem;
  font-size:12.5px; font-weight:500;
  color:var(--muted);
  transition:all .18s;
  position:relative;
  text-decoration:none;
  border-left:2px solid transparent;
}
.nav-item:hover { color:var(--cream); background:var(--surface2); border-left-color:var(--border2); }
.nav-item.active { color:var(--gold); background:rgba(201,162,39,0.07); border-left-color:var(--gold); }
.nav-item .ni-icon { font-size:.9rem; width:16px; text-align:center; flex-shrink:0; }
.nav-item .ni-badge {
  margin-left:auto;
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  flex-shrink:0;
  opacity:0;
}
.nav-item.done .ni-badge { opacity:1; }
.nav-item .ni-lock { margin-left:auto; font-size:10px; color:var(--muted); }

/* Sidebar toggle (mobile) */
.sidebar-toggle {
  display:none;
  position:fixed; top:12px; left:12px; z-index:300;
  width:36px; height:36px; border-radius:8px;
  background:var(--bg2); border:1px solid var(--border);
  font-size:1.1rem; color:var(--gold);
  align-items:center; justify-content:center;
}

/* ── MAIN CONTENT ── */
.main-wrap {
  margin-left:var(--sidebar-w);
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ── TOPBAR ── */
.topbar {
  height:var(--header-h);
  background:rgba(10,12,15,0.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  padding:0 2rem;
  position:sticky; top:0; z-index:100;
  gap:1rem;
  flex-shrink:0;
}
.topbar-breadcrumb {
  display:flex; align-items:center; gap:.5rem;
  font-size:12px; color:var(--muted);
}
.topbar-breadcrumb span { color:var(--gold); font-weight:600; }
.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:.75rem; }
.topbar-progress-text { font-size:11px; color:var(--muted); font-family:'DM Mono'; }

/* ── PAGE CONTENT ── */
.page-content {
  flex:1;
  padding:2.5rem 2.5rem 4rem;
  max-width:860px;
}

/* ── FOOTER ── */
.footer {
  background:var(--bg2);
  border-top:1px solid var(--border);
  padding:1.5rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:var(--muted);
}
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { color:var(--muted); font-size:11px; }
.footer-links a:hover { color:var(--gold); }

/* ══════════════════════
   TYPOGRAPHY
══════════════════════ */
.page-hero {
  margin-bottom:2.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--border);
}
.page-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(201,162,39,0.1); border:1px solid var(--border2);
  border-radius:999px; padding:.2rem .8rem;
  font-size:10px; font-weight:700; color:var(--gold);
  text-transform:uppercase; letter-spacing:.07em;
  margin-bottom:.9rem;
}
.page-tag .dot { width:5px; height:5px; background:var(--gold); border-radius:50%; }
h1.page-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:900; color:var(--cream);
  line-height:1.2; margin-bottom:.6rem;
}
h1.page-title span { color:var(--gold); }
.page-intro { color:var(--muted); font-size:.95rem; max-width:620px; line-height:1.8; }

h2.section-title {
  font-family:'Playfair Display',serif;
  font-size:1.25rem; font-weight:700;
  color:var(--cream); margin:2rem 0 .8rem;
  display:flex; align-items:center; gap:.5rem;
}
h2.section-title::after { content:''; flex:1; height:1px; background:var(--border); }
h3.sub-title {
  font-size:1rem; font-weight:700; color:var(--gold);
  margin:1.5rem 0 .6rem;
  text-transform:uppercase; letter-spacing:.04em; font-size:.85rem;
}
p { margin-bottom:.9rem; font-size:.92rem; }
strong { color:var(--cream); font-weight:600; }

/* ══════════════════════
   COMPONENTS
══════════════════════ */

/* ── CARDS ── */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.4rem 1.6rem;
  margin-bottom:1.2rem;
}
.card-title {
  font-weight:700; color:var(--cream); font-size:.95rem;
  margin-bottom:.8rem; display:flex; align-items:center; gap:.5rem;
}
.card-title .icon { color:var(--gold); }

.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; margin:1rem 0; }
.card-sm {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px; padding:1rem 1.2rem;
  transition:all .2s;
}
.card-sm:hover { border-color:var(--border2); background:var(--surface3); }

/* ── STAT BOX ── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.75rem; margin:1rem 0; }
.stat-box {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px; padding:.9rem; text-align:center;
}
.stat-val {
  font-family:'Playfair Display',serif;
  font-size:1.7rem; font-weight:700; color:var(--gold);
  display:block; line-height:1;
}
.stat-lbl { font-size:10px; color:var(--muted); margin-top:.3rem; }

/* ── TABLES ── */
.data-table { width:100%; border-collapse:collapse; font-size:.85rem; margin:.6rem 0; }
.data-table th {
  background:rgba(201,162,39,0.1);
  color:var(--gold); font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.5rem .8rem; text-align:left;
}
.data-table td { padding:.45rem .8rem; border-bottom:1px solid rgba(255,255,255,.04); }
.data-table tr:hover td { background:var(--surface3); }
.data-table tr:last-child td { border:none; }

/* ── BADGES ── */
.badge {
  display:inline-block; padding:.15rem .55rem; border-radius:5px;
  font-size:.75rem; font-weight:700; letter-spacing:.04em;
}
.badge-gold   { background:rgba(201,162,39,.2); color:var(--gold2); }
.badge-green  { background:rgba(34,197,94,.15); color:#4ade80; }
.badge-red    { background:rgba(239,68,68,.15); color:#f87171; }
.badge-blue   { background:rgba(59,130,246,.15); color:#93c5fd; }
.badge-gray   { background:rgba(255,255,255,.07); color:var(--muted); }

/* ── INSIGHT BOXES ── */
.insight, .tip-box, .warn-box, .note-box {
  border-radius:0 8px 8px 0;
  padding:.75rem 1rem;
  margin:.7rem 0;
  font-size:.88rem;
  line-height:1.7;
  border-left:3px solid;
}
.insight  { background:rgba(201,162,39,.07); border-color:var(--gold);    color:var(--text); }
.tip-box  { background:rgba(34,197,94,.07);  border-color:var(--green);   color:#86efac; }
.warn-box { background:rgba(239,68,68,.07);  border-color:var(--danger);  color:#fca5a5; }
.note-box { background:rgba(59,130,246,.07); border-color:var(--blue);    color:#93c5fd; }
.insight .box-title, .tip-box .box-title, .warn-box .box-title, .note-box .box-title {
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; margin-bottom:.3rem;
}
.insight .box-title  { color:var(--gold); }
.tip-box .box-title  { color:var(--green); }
.warn-box .box-title { color:var(--danger); }
.note-box .box-title { color:var(--blue); }

/* ── PROGRESS BAR ── */
.bar-wrap { margin:.4rem 0; }
.bar-label { display:flex; justify-content:space-between; font-size:.75rem; color:var(--muted); margin-bottom:.25rem; }
.bar { height:6px; background:var(--surface3); border-radius:3px; overflow:hidden; }
.bar-fill { height:100%; border-radius:3px; transition:width .6s cubic-bezier(.4,0,.2,1); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1.2rem; border-radius:7px;
  font-size:.82rem; font-weight:600;
  transition:all .18s; border:1px solid transparent;
  text-decoration:none;
}
.btn-primary { background:var(--gold); color:var(--bg); border-color:var(--gold); }
.btn-primary:hover { background:var(--gold2); color:var(--bg); }
.btn-outline { background:transparent; border-color:var(--border2); color:var(--gold); }
.btn-outline:hover { background:rgba(201,162,39,.1); }
.btn-ghost { background:var(--surface3); border-color:var(--border); color:var(--text); }
.btn-ghost:hover { border-color:var(--border2); color:var(--cream); }
.btn-sm { padding:.3rem .8rem; font-size:.75rem; }

/* ── TOOLTIPS (hover definitions) ── */
.tt {
  display:inline;
  border-bottom:1px dashed var(--gold);
  color:var(--gold2);
  cursor:help;
  position:relative;
}
.tt::after {
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%; transform:translateX(-50%);
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:7px;
  padding:.5rem .8rem;
  font-size:.78rem;
  color:var(--text);
  white-space:nowrap;
  max-width:280px;
  white-space:normal;
  text-align:center;
  line-height:1.5;
  opacity:0; pointer-events:none;
  transition:opacity .2s;
  z-index:500;
  box-shadow:0 4px 20px rgba(0,0,0,.5);
  font-style:normal;
  font-weight:400;
}
.tt:hover::after { opacity:1; }

/* ── DIVIDER ── */
hr.divider { border:none; border-top:1px solid var(--border); margin:2rem 0; }

/* ── QUIZ ── */
.quiz-option {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px; padding:.7rem .9rem;
  margin:.4rem 0; cursor:pointer;
  transition:all .18s;
  display:flex; align-items:center; gap:.6rem;
  font-size:.88rem;
}
.quiz-option:hover { border-color:var(--border2); background:var(--surface3); }
.quiz-option.correct { border-color:var(--green); background:rgba(34,197,94,.08); }
.quiz-option.wrong   { border-color:var(--danger); background:rgba(239,68,68,.08); }
.quiz-letter {
  width:24px; height:24px; border-radius:50%;
  background:var(--surface3);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:var(--gold);
  flex-shrink:0;
}
.quiz-feedback {
  display:none; padding:.7rem .9rem; border-radius:8px;
  font-size:.85rem; margin-top:.6rem; line-height:1.6;
}
.quiz-feedback.show { display:block; }
.quiz-feedback.ok  { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); color:#86efac; }
.quiz-feedback.nok { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.25);  color:#fca5a5; }

/* ── MODULE CARDS (homepage) ── */
.module-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; margin:1.5rem 0; }
.module-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.4rem;
  transition:all .22s;
  cursor:pointer;
  text-decoration:none;
  display:block;
}
.module-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.mc-icon { font-size:1.6rem; margin-bottom:.7rem; }
.mc-title { font-size:.95rem; font-weight:700; color:var(--cream); margin-bottom:.3rem; }
.mc-desc  { font-size:.8rem; color:var(--muted); line-height:1.5; }
.mc-badge { margin-top:.7rem; }

/* ── NEXT/PREV NAVIGATION ── */
.page-nav {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:3rem; padding-top:1.5rem;
  border-top:1px solid var(--border);
}
.page-nav-btn {
  display:flex; align-items:center; gap:.5rem;
  font-size:.82rem; color:var(--muted);
  text-decoration:none; transition:color .18s;
  padding:.5rem .8rem; border-radius:7px;
  border:1px solid var(--border);
}
.page-nav-btn:hover { color:var(--gold); border-color:var(--border2); }
.page-nav-btn .pnb-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:.1rem; }
.page-nav-btn .pnb-title { font-weight:600; color:var(--cream); }

/* ── POKER PLAYING CARD ── */
.pcard {
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:44px; height:62px; border-radius:6px;
  background:#fafaf5; border:1px solid #ccc;
  font-weight:800; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  color:#111 !important;
  flex-shrink:0;
}
.pcard.sm  { width:36px; height:50px; }
.pcard.xs  { width:28px; height:40px; }
.pcard .pr { font-size:14px; }
.pcard.sm .pr { font-size:12px; }
.pcard.xs .pr { font-size:10px; }
.pcard .ps { font-size:12px; }
.pcard.sm .ps { font-size:10px; }
.pcard.xs .ps { font-size:8px; }
.pcard.red { color:#c0392b !important; }

/* ── GLOSSARY ── */
.glossary-grid { columns:2; column-gap:1.5rem; }
@media(max-width:600px){ .glossary-grid { columns:1; } }
.gloss-entry {
  break-inside:avoid;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px; padding:.7rem .9rem;
  margin-bottom:.6rem;
}
.gloss-term { font-weight:700; color:var(--gold2); font-size:.88rem; margin-bottom:.2rem; }
.gloss-def  { font-size:.82rem; color:var(--muted); line-height:1.6; }

/* ── FAQ ── */
.faq-item { border-bottom:1px solid var(--border); }
.faq-q {
  width:100%; text-align:left; background:none; border:none;
  padding:.9rem 0; color:var(--cream); font-size:.9rem; font-weight:600;
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; transition:color .18s;
}
.faq-q:hover { color:var(--gold); }
.faq-arrow { color:var(--muted); font-size:.8rem; transition:transform .25s; }
.faq-a { display:none; padding:0 0 .9rem; font-size:.88rem; color:var(--muted); line-height:1.7; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-item.open .faq-a { display:block; }

/* ── BIBILOGRAPHY ── */
.biblio-list { display:flex; flex-direction:column; gap:.8rem; margin:.8rem 0; }
.biblio-item {
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:1rem 1.2rem;
  display:flex; gap:1rem; align-items:flex-start;
}
.biblio-num {
  width:28px; height:28px; border-radius:50%;
  background:rgba(201,162,39,.15); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; flex-shrink:0;
  margin-top:2px;
}
.biblio-content .bt { font-weight:700; color:var(--cream); font-size:.9rem; }
.biblio-content .ba { font-size:.8rem; color:var(--gold); margin:.15rem 0; }
.biblio-content .bd { font-size:.8rem; color:var(--muted); line-height:1.6; }
.biblio-content .by { font-size:.75rem; color:var(--muted); margin-top:.2rem; font-family:'DM Mono'; }

/* ══════════════════════
   RESPONSIVE
══════════════════════ */
@media(max-width:900px){
  :root { --sidebar-w:0px; }
  .sidebar { transform:translateX(-260px); width:260px; }
  .sidebar.open { transform:translateX(0); }
  .sidebar-toggle { display:flex; }
  .main-wrap { margin-left:0; }
  .page-content { padding:1.5rem 1.2rem 3rem; }
  .topbar { padding:0 1rem 0 3.5rem; }
}
@media(max-width:500px){
  .card-grid, .module-cards { grid-template-columns:1fr; }
  .stat-grid { grid-template-columns:1fr 1fr; }
}

/* ══════════════════════
   ANIMATIONS
══════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.fade-up { animation:fadeUp .3s ease; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }