/* Trivia Jolt — pages de quiz et quiz du jour. Direction C.
   La surface de JEU est noire ; tout le reste de la page est blanc. */

.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--mute);font-weight:500;padding-top:12px}
.crumb a{color:var(--mute)}
.crumb a:hover{color:var(--ink)}
.crumb b{color:var(--ink);font-weight:600}

.page-head{padding:14px 0 0}
.page-head h1{font-size:clamp(40px,11vw,56px);line-height:.92}
.page-head .lead{margin-top:14px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.facts li{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:2px solid var(--ink);border-radius:6px;font-family:var(--display);font-weight:800;font-size:15px;text-transform:uppercase}
.facts li.on{background:var(--ink);color:#fff}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 20px;border:2px solid var(--ink);border-radius:8px;background:var(--jolt);color:var(--ink);font-family:var(--display);font-weight:900;font-size:23px;text-transform:uppercase;box-shadow:4px 4px 0 var(--ink);cursor:pointer;width:100%}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-2{background:transparent;box-shadow:none;font-size:20px;min-height:50px}

.levels{display:flex;flex-direction:column;gap:22px;margin-top:26px}
.level-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.level-h .d{font-size:22px}
.level-h i{flex:1;height:3px;display:block}
.qz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qz button{display:flex;flex-direction:column;width:100%;padding:0;border:2px solid var(--ink);border-radius:12px;background:#fff;text-align:left;cursor:pointer;font-family:var(--body);overflow:hidden}
.qz button:hover{box-shadow:4px 4px 0 var(--ink)}
.qz img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;border-bottom:2px solid var(--ink);background:#F4F4F5}
.qz .row{display:flex;align-items:center;gap:10px;padding:10px 12px}
.qz .n{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:6px;border:2px solid var(--ink);font-family:var(--display);font-weight:900;font-size:17px;flex:none}
.qz .n.done{background:#16A34A;border-color:#16A34A;color:#fff;font-size:14px}
.qz b{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:19px;line-height:1.05}
.qz span{font-size:13px;color:var(--mute)}
.qz .row svg{margin-left:auto;flex:none}
.qz .n{width:30px;height:30px;font-size:15px}

/* --- surface de jeu --- */
.play{position:fixed;inset:0;z-index:50;background:var(--ink);color:#fff;display:flex;flex-direction:column;overflow-y:auto}
/* display:flex écrase le display:none de [hidden] : la surface masquée continuait
   d'intercepter les clics de toute la page (détecté au test du 16/09/2026). */
.play[hidden]{display:none}
.play .brand{border-bottom:2px solid #3F3F46}
.play .brand .logo{max-width:900px;margin:0 auto;padding:14px 20px;color:#fff;text-decoration:none}
.play .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 0;max-width:900px;margin:0 auto;width:100%}
.play .quit{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-10px;background:none;border:0;cursor:pointer}
.play .tag{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:18px;color:var(--jolt);text-align:center}
.play .cnt{font-family:var(--display);font-weight:900;font-size:26px;line-height:1}
.play .cnt em{font-style:normal;font-size:15px;color:var(--mute)}
.pips-play{display:flex;gap:4px;padding:14px 20px 0;max-width:900px;margin:0 auto;width:100%}
.pips-play i{flex:1;height:8px;border-radius:2px;background:#3F3F46}
.pips-play i.ok{background:#16A34A}
.pips-play i.ko{background:#DC2626}
.pips-play i.now{background:var(--jolt)}
.cover{width:100%;max-height:170px;object-fit:cover;border:2px solid #3F3F46;border-radius:10px;display:block}
.stage{padding:20px 20px 24px;max-width:900px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:18px;flex:1}
.q-text{font-family:var(--display);font-weight:900;font-size:clamp(30px,8vw,46px);line-height:.98;margin:0}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{display:flex;align-items:center;gap:14px;min-height:62px;padding:10px 16px 10px 14px;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);font-family:var(--body);font-size:18px;font-weight:600;text-align:left;cursor:pointer;box-shadow:4px 4px 0 #3F3F46;width:100%}
.opt .k{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:2px solid var(--ink);font-family:var(--display);font-weight:900;font-size:18px;flex:none}
.opt .tick{margin-left:auto;flex:none;display:none}
.opt.right{background:var(--jolt);box-shadow:4px 4px 0 #fff}
.opt.right .k{background:var(--ink);color:var(--jolt)}
.opt.right .tick{display:block}
.opt.wrong{background:#DC2626;border-color:#DC2626;color:#fff;box-shadow:4px 4px 0 #3F3F46}
.opt.wrong .k{border-color:#fff;color:#fff}
.opt.mute{background:#3F3F46;border-color:#3F3F46;color:#A1A1AA;box-shadow:none}
.opt.mute .k{border-color:#71717A;color:#A1A1AA}
.expl{display:none;flex-direction:column;gap:6px}
.expl.on{display:flex}
.expl b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:17px}
.expl p{margin:0;font-size:16px;line-height:1.45;color:#D4D4D8}
.play .btn{border-color:var(--jolt);box-shadow:4px 4px 0 #fff}
.foot-play{display:flex;flex-direction:column;gap:8px;margin-top:auto}

/* --- score --- */
.score{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.score .big{font-family:var(--display);font-weight:900;font-size:92px;line-height:.8;color:var(--jolt)}
.score .out{font-family:var(--display);font-weight:900;font-size:30px}
.squares{font-size:22px;letter-spacing:2px;line-height:1.3;word-break:break-all}
.missed{display:flex;flex-direction:column;gap:10px}
.missed div{border-left:6px solid #DC2626;padding:4px 0 4px 12px}
.missed p{margin:0;font-size:15px;line-height:1.4;color:#D4D4D8}
.missed p.q{color:#fff;font-weight:600}

/* --- liste imprimable --- */
.printable{margin-top:34px;border-top:2px solid var(--ink);padding-top:18px}
.printable summary{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:26px;cursor:pointer;list-style:none}
.printable summary::-webkit-details-marker{display:none}
.printable summary::after{content:" ▾";color:var(--mute)}
.printable[open] summary::after{content:" ▴"}
.printable ol{margin:16px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.printable li{font-size:16px;line-height:1.45}
.printable .a{display:block;font-weight:700}
.printable .e{display:block;color:var(--grey);font-size:15px}

.hubs{display:grid;grid-template-columns:1fr;gap:12px;margin-top:8px}
.hub{display:flex;align-items:center;gap:14px;padding:14px 16px;border:2px solid var(--ink);border-radius:12px}
.hub b{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:21px;line-height:1.05}
.hub span{font-size:13px;color:var(--mute)}
.hub svg{margin-left:auto;flex:none}

.method{margin:30px 0 40px;border-left:8px solid var(--jolt);padding:6px 0 6px 16px}
.method .d{font-size:22px}
.method p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--grey);max-width:44em}

@media (min-width:1000px){
  .qz{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .cover{max-height:210px}
  .hubs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .btn{width:auto;min-width:300px;align-self:flex-end}
  .btn-2{min-width:0}
  .page-head h1{font-size:64px}
  .foot-play{flex-direction:row;align-items:center;justify-content:space-between}
}
@media print{
  .play,.levels,.btn,.facts,.crumb,.strip,.head,.foot,.method{display:none!important}
  .printable{border:0}
  .printable ol{display:block}
  .printable li{break-inside:avoid;margin-bottom:12px}
}

/* compléments moteur */
.btn-link{background:none;border:0;color:var(--mute);font-family:var(--body);font-size:14px;cursor:pointer;min-height:44px;padding:0}
.play .btn-link{color:#71717A}
.foot-row{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.stage.is-results .q-text{display:none}
.stage.is-results .opts{display:flex;flex-direction:column;gap:20px}
.missed b.d{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:22px;display:block;margin-bottom:4px}
@media (min-width:1000px){
  .foot-row{flex-direction:row;align-items:center}
  .foot-row .btn{min-width:0;flex:1}
  .stage.is-results .opts{display:flex}
}

.credits ul{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.credits li{font-size:14px;color:var(--grey);line-height:1.4}
.credits a{text-decoration:underline}
.stage.is-results .cover{display:none}

/* --- classements (18/09/2026) -----------------------------------------------
   Les mêmes blocs servent sur une page claire et sur la surface de jeu, qui est
   noire : les couleurs de base sont celles de la page, et le bloc .play les
   repeint plus bas. Quatre colonnes fixes (rang, joueur, score, temps) pour que
   les chiffres s'alignent d'une ligne à l'autre — un classement dont les colonnes
   dansent ne se lit pas. */
.lb-sec{margin-top:34px}
.lb-sec>.d{font-size:26px}
.lb-sub{font-size:15px;color:var(--grey);margin:8px 0 0;max-width:46em}

/* Les onglets : les neuf quiz d'une page, le quiz du jour et ses éditions passées. */
.lb-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 14px}
.lb-tabs button{height:38px;padding:0 12px;border:2px solid var(--ink);border-radius:6px;background:#fff;color:var(--ink);font-family:var(--display);font-weight:800;font-size:15px;text-transform:uppercase;cursor:pointer}
.lb-tabs button:hover{box-shadow:3px 3px 0 var(--ink)}
.lb-tabs button.on{background:var(--ink);color:var(--jolt)}

.lb-head,.lb li{display:grid;grid-template-columns:34px minmax(0,1fr) 62px 62px;align-items:center;gap:10px}
.lb-head{padding:0 12px 8px;font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.lb-head .sc,.lb-head .tm{text-align:right}

.lb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lb li{padding:10px 12px;border:2px solid var(--line);border-radius:8px;background:#fff}
.lb li.top{border-color:var(--ink)}
/* Le joueur se retrouve d'un coup d'œil dans une liste de cinquante lignes. */
.lb li.moi{background:var(--jolt);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.lb .pos{font-family:var(--display);font-weight:900;font-size:19px;text-align:center;color:var(--mute)}
.lb li.top .pos,.lb li.moi .pos{color:var(--ink)}
.lb .who{font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .who em{display:block;font-style:normal;font-size:12px;font-weight:500;color:var(--mute)}
.lb li.moi .who em{color:var(--grey)}
.lb .sc{font-family:var(--display);font-weight:900;font-size:21px;text-align:right}
/* Le temps ne départage qu'à égalité de bonnes réponses : il se lit en retrait. */
.lb .tm{font-size:14px;font-variant-numeric:tabular-nums;color:var(--mute);text-align:right}
.lb li.moi .tm{color:var(--grey)}

.lb-empty{font-size:15px;color:var(--mute);margin:0;padding:14px 0}
.lb-more{display:inline-block;margin-top:14px;font-family:var(--display);font-weight:900;font-size:17px;text-transform:uppercase;text-decoration:underline}

/* --- le bloc de fin de partie, dans la surface de jeu --- */
.lb-box{display:flex;flex-direction:column;gap:16px}
.lb-state{display:flex;flex-direction:column;gap:8px}
.lb-rank{display:flex;align-items:baseline;gap:10px}
.lb-rank b{font-family:var(--display);font-weight:900;font-size:46px;line-height:1;color:var(--jolt)}
.lb-rank span{font-size:15px;color:#A1A1AA}
.lb-msg{margin:0;font-size:15px;line-height:1.45;color:#D4D4D8}
.lb-err{margin:0;font-size:14px;color:#F87171}

.lb-form{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.lb-form input{height:56px;padding:0 14px;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);font-family:var(--body);font-size:18px;font-weight:600;width:100%}
.lb-form input:focus{outline:3px solid var(--jolt);outline-offset:2px}

/* La surface de jeu est noire : le classement s'y retourne. */
.play .lb-msg{color:#D4D4D8}
.play .lb-head{color:#71717A}
.play .lb li{background:#18181B;border-color:#3F3F46;color:#fff}
.play .lb li.top{border-color:#71717A}
.play .lb li.moi{background:var(--jolt);border-color:var(--jolt);color:var(--ink);box-shadow:none}
.play .lb .pos{color:#71717A}
.play .lb li.top .pos{color:#fff}
.play .lb li.moi .pos,.play .lb li.moi .who em,.play .lb li.moi .tm{color:var(--ink)}
.play .lb .tm{color:#A1A1AA}
.play .lb .who em{color:#71717A}
.play .lb-empty{color:#A1A1AA}
.play .lb-more{color:var(--jolt)}

@media (min-width:1000px){
  /* Sans cette borne, la colonne du pseudo s'étire sur toute la largeur de l'écran
     et met vingt centimètres entre un nom et son score : on ne lit plus une ligne. */
  .lb,.lb-head{max-width:720px}
  .lb-head,.lb li{grid-template-columns:44px minmax(0,1fr) 90px 90px}
  .lb-form{flex-direction:row;align-items:center}
  .lb-form input{flex:1}
  .lb-form .btn{width:auto;min-width:220px}
  .lb-err{flex-basis:100%}
}
/* Le menu de /leaderboard/ : la liste des quiz grandit à chaque page publiée,
   des dizaines d'onglets ne tiendraient sur aucun écran. Même habillage. */
.lb-tabs select{height:46px;padding:0 12px;border:2px solid var(--ink);border-radius:6px;background:#fff;color:var(--ink);font-family:var(--display);font-weight:800;font-size:17px;text-transform:uppercase;cursor:pointer;max-width:100%}

/* --- texte éditorial et FAQ (19/09/2026) ------------------------------------
   Sous le jeu, pas au-dessus : le visiteur vient jouer. Mais la page doit dire
   ce qu'elle est, et les 90 questions de la liste imprimable ne le disent pas.
   Largeur bornée à 68 caractères — au-delà, l'œil perd sa ligne en revenant. */
.prose,.faq{margin-top:38px}
.prose>.d{font-size:26px}
.prose h3.d{font-size:20px;margin-top:22px}
.prose p{font-size:17px;line-height:1.58;color:var(--grey);max-width:68ch;margin:12px 0 0}
.prose em{font-style:italic;color:var(--ink)}

.faq>.d{font-size:26px;margin-bottom:6px}
.faq-item{border-top:2px solid var(--line);padding:16px 0 4px}
.faq-item:last-of-type{border-bottom:2px solid var(--line);padding-bottom:18px}
.faq-item h3{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:19px;line-height:1.1;margin:0;color:var(--ink)}
.faq-item p{font-size:16px;line-height:1.55;color:var(--grey);max-width:68ch;margin:8px 0 0}
.faq-item em{font-style:italic;color:var(--ink)}
.faq-src{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:18px 0 6px}
.faq-src-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.faq-src-list li{font-size:13px;color:var(--mute);line-height:1.4}
.faq-src-list a{text-decoration:underline}

@media print{
  .prose,.faq{display:none}
}