/* QuizFighterOne — pages « Quiz <thème> » (quiz/*.html, générées par outils/generer_pages_themes.py) */
:root{
  --cranberry-900:#3b0d13; --cranberry-800:#5a1119; --cranberry-600:#9c2a2f;
  --gold-500:#c9973e; --gold-300:#e6c479;
  --parchment:#f7ecd8; --parchment-dim:#e6d5ac; --snow:#fff8ea;
  --ink:#2c2015; --ink-soft:#5c4a35; --pine-600:#2f6b4a; --ember:#b3242c;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  min-height:100vh; color:var(--snow); font-family:'Nunito','Segoe UI',system-ui,sans-serif; line-height:1.5;
  background:radial-gradient(ellipse 900px 500px at 50% -8%, var(--cranberry-600), transparent 60%),
             linear-gradient(180deg, var(--cranberry-800), var(--cranberry-900) 55%);
}
a{ color:var(--gold-300); }
.qt{ max-width:820px; margin:0 auto; padding:18px 16px 24px; }
.qt-crumbs{ font-size:.85rem; opacity:.85; }
.qt-crumbs a{ color:var(--snow); }
.qt-hero{ text-align:center; padding:26px 0 10px; }
.qt-emoji{ font-size:3.2rem; line-height:1; }
.qt h1{ font-family:'Baloo 2','Segoe UI',system-ui,sans-serif; font-weight:800; font-size:clamp(2rem, 6vw, 2.9rem); line-height:1.1; margin:.3rem 0 .4rem; color:var(--gold-300); }
.qt-lead{ font-size:1.08rem; margin:.2rem auto .6rem; max-width:620px; }
.qt-stats{ margin:0 auto .9rem; max-width:620px; opacity:.9; }
.qt-stats strong{ color:var(--gold-300); font-size:1.15em; }
.qt-play{
  display:inline-block; padding:.75rem 1.5rem; border-radius:999px; text-decoration:none; font-weight:800; font-size:1.1rem;
  background:linear-gradient(180deg, var(--gold-300), var(--gold-500)); color:var(--cranberry-900); box-shadow:0 4px 0 #8a6224;
}
.qt-play:hover{ transform:translateY(-1px); }
.qt-play-small{ font-size:.95rem; padding:.55rem 1.1rem; margin-top:.6rem; }
.qt-free{ font-size:.85rem; opacity:.8; margin:.7rem 0 0; }
.qt-card{ background:var(--parchment); color:var(--ink); border-radius:18px; border:2px solid var(--gold-500); padding:18px 18px 20px; margin:18px 0; }
.qt-card h2{ font-family:'Baloo 2','Segoe UI',system-ui,sans-serif; font-weight:800; font-size:1.45rem; margin:0 0 .3rem; color:var(--cranberry-800); }
.qt-card a{ color:var(--cranberry-600); font-weight:700; }
.qt-card .qt-play{ color:var(--cranberry-900); }
.qt-hint{ margin:0 0 .4rem; font-size:.88rem; color:var(--ink-soft); }
.qt-diff{ margin:1rem 0 .3rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; }
.qt-diff-facile{ color:var(--pine-600); } .qt-diff-moyen{ color:#a5761f; } .qt-diff-difficile{ color:var(--ember); }
.qt-questions{ margin:0; padding-left:1.4rem; }
.qt-questions li{ margin:.3rem 0; }
.qt-questions summary{ cursor:pointer; font-weight:700; }
.qt-questions summary:hover{ color:var(--cranberry-600); }
.qt-answer{ margin:.3rem 0 0; font-weight:800; color:var(--pine-600); }
.qt-info{ margin:.15rem 0 .4rem; font-size:.9rem; color:var(--ink-soft); }
.qt-how{ margin:.2rem 0 0; padding-left:1.2rem; }
.qt-how li{ margin:.25rem 0; }
.qt-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0; }
.qt-chip{ display:inline-block; padding:.3rem .7rem; border-radius:999px; background:var(--snow); border:1.5px solid var(--parchment-dim); text-decoration:none; font-size:.9rem; }
.qt-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; margin:18px 0; }
.qt-tile{
  display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:14px 8px; border-radius:16px; text-align:center; text-decoration:none;
  background:var(--parchment); color:var(--ink); border:2px solid var(--parchment-dim);
}
.qt-tile:hover{ border-color:var(--gold-500); transform:translateY(-2px); }
.qt-tile-emoji{ font-size:2rem; line-height:1.2; }
.qt-tile strong{ font-family:'Baloo 2','Segoe UI',system-ui,sans-serif; font-size:1.05rem; line-height:1.15; }
.qt-tile span:last-child{ font-size:.82rem; color:var(--ink-soft); }
.qt-footer{ text-align:center; font-size:.82rem; opacity:.8; padding:10px 16px 28px; }
.qt-footer p{ margin:.2rem 0; }
.qt-footer a{ color:var(--snow); }
@media (prefers-reduced-motion: reduce){ .qt-play:hover, .qt-tile:hover{ transform:none; } }