/* Bible Quiz : thème « table de jeu » (sombre, accents dorés). Les couleurs de catégories sont aussi dans jeu.js (CATS). */
:root {
  --fond: #141b3a; --fond2: #0c1128; --carte: rgba(255,255,255,.07); --bord: rgba(255,255,255,.16);
  --texte: #f4f1e8; --discret: #b8bdd6; --or: #f2c94c; --or2: #d9a521; --encre: #1b1608;
  --bon: #2ecc71; --mauvais: #ff6b5e; --parchemin: #f6edd3; --encre-p: #3a2e17;
  --c0: #e67e22; --c1: #e74c3c; --c2: #3498db; --c3: #f1c40f; --c4: #2ecc71; --c5: #9b59b6;
}
* { box-sizing: border-box; }
html { background: var(--fond2); }
body {
  margin: 0; color: var(--texte); min-height: 100vh;
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1200px 700px at 50% -10%, #2a3770 0%, var(--fond) 55%, var(--fond2) 100%) fixed;
}
header, main, footer { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
header { display: flex; align-items: center; gap: 14px; padding-top: 18px; padding-bottom: 6px; }
.logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 30px; font-weight: 700; color: var(--encre);
  background: radial-gradient(circle at 35% 30%, #fff1b0, var(--or) 55%, var(--or2)); box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 -3px 6px rgba(0,0,0,.2); }
h1 { margin: 0; font: 700 2rem/1.1 Georgia, "Times New Roman", serif; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff3b8, var(--or) 60%, var(--or2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { margin: 0 0 8px; font: 700 1.35rem/1.25 Georgia, serif; }
.sous { margin: 2px 0 0; color: var(--discret); font-size: .95rem; }
footer { padding: 26px 16px 34px; color: var(--discret); font-size: .8rem; }
a { color: var(--or); }

.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 18px; padding: 16px; margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28); }
button { font: inherit; cursor: pointer; color: var(--texte); background: rgba(255,255,255,.1); border: 1px solid var(--bord);
  border-radius: 12px; padding: 10px 16px; min-height: 46px; transition: transform .12s, background .12s, box-shadow .12s; }
button:hover:not(:disabled) { background: rgba(255,255,255,.18); transform: translateY(-1px); }
button:disabled { opacity: .55; cursor: default; }
button.principal { color: var(--encre); font-weight: 700; border: 0; padding: 12px 22px; font-size: 1.05rem;
  background: linear-gradient(180deg, #ffe27a, var(--or) 55%, var(--or2)); box-shadow: 0 4px 0 #9a7412, 0 8px 16px rgba(0,0,0,.35); }
button.principal:hover:not(:disabled) { background: linear-gradient(180deg, #fff0a8, #f7d05a 55%, var(--or)); }
button.principal:active { transform: translateY(3px); box-shadow: 0 1px 0 #9a7412; }
button:focus-visible, input:focus-visible, select:focus-visible, path.cible:focus-visible { outline: 3px solid #8ec5ff; outline-offset: 2px; }
input, select { font: inherit; color: var(--texte); padding: 8px 12px; min-height: 46px; border-radius: 12px; border: 1px solid var(--bord); background: rgba(0,0,0,.28); }
/* Constat du 03/11/2026 (Chrome sous Windows) : la liste déroulante a un fond sombre imposé par le navigateur, et le texte
   noir « #111 » y était illisible. On fixe fond ET texte des options, et on déclare le thème sombre pour les contrôles. */
select { color-scheme: dark; }
select option { background: #1b2146; color: #f4f1e8; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

/* ----- Réglages ----- */
.legende { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 12px 0 4px; padding: 0; }
.legende li { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 99px; background: rgba(0,0,0,.25); font-size: .92rem; }
.puce { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; line-height: 1;
  background: linear-gradient(180deg, var(--c-haut, var(--couleur)), var(--couleur) 55%, var(--c-bas, var(--couleur)));
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 3px 8px rgba(0,0,0,.45); margin: 3px 4px; }
.puce .ico { width: 62%; height: 62%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.ligne-joueur { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.pion-css { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,.45); text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* ----- Jeu ----- */
.jeu { display: grid; gap: 14px; grid-template-columns: 1fr; }
.jeu > :nth-child(2) { order: -1; } /* mobile : la question avant le plateau */
@media (min-width: 860px) { .jeu { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } .jeu > :nth-child(2) { order: 0; } }
.plateau-carte { padding: 10px; }
svg.plateau { width: 100%; height: auto; display: block; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif; }
svg.plateau text { user-select: none; }
.tuile { stroke: #10163a; stroke-width: 2.5; }
.tuile.camembert { stroke: var(--or); stroke-width: 4; }
.cible { fill: rgba(255,255,255,.14); stroke: #fff; stroke-width: 4; stroke-dasharray: 9 6; cursor: pointer; animation: marche-cible 1s linear infinite; }
@keyframes marche-cible { to { stroke-dashoffset: -30; } }
.halo { transform-box: fill-box; transform-origin: center; animation: pouls 1.2s ease-in-out infinite; }
@keyframes pouls { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.55); opacity: .15; } }
.legende-plateau { margin-top: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.legende-plateau li { font-size: .84rem; }
.legende-plateau .puce { width: 30px; height: 30px; }

.joueurs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.joueurs li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 16px;
  background: var(--carte); border: 2px solid var(--bord); }
.joueurs li.actif { border-color: var(--or); background: rgba(242,201,76,.14); box-shadow: 0 0 0 4px rgba(242,201,76,.16), 0 6px 18px rgba(0,0,0,.3); }
.joueurs .nom { font-weight: 700; line-height: 1.2; }
.joueurs .niv { display: block; color: var(--discret); font-size: .82rem; font-weight: 400; }
.joueurs .score { font-size: .85rem; color: var(--or); font-weight: 700; }
.joueurs svg.pie { width: 54px; height: 54px; display: block; }

.de-zone { display: grid; place-items: center; gap: 6px; margin: 6px 0 12px; }
.de { width: 96px; height: 96px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.de.roule { animation: secoue .5s ease-in-out infinite; }
@keyframes secoue { 0% { transform: rotate(-14deg) translateY(0); } 25% { transform: rotate(10deg) translateY(-10px); } 50% { transform: rotate(-8deg) translateY(0); } 75% { transform: rotate(14deg) translateY(-8px); } 100% { transform: rotate(-14deg) translateY(0); } }
.gros { font-size: 1.1rem; text-align: center; margin: 0; }

.bandeau { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; color: var(--txt, #fff); background: var(--couleur);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.3); margin-bottom: 12px; }
.bandeau .puce { width: 50px; height: 50px; }
.bandeau b { font: 700 1.1rem/1.2 Georgia, serif; display: block; }
.bandeau small { opacity: .92; }
.etoile { margin-left: auto; padding: 3px 10px; border-radius: 99px; background: rgba(0,0,0,.28); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.temps { height: 10px; border-radius: 5px; background: rgba(0,0,0,.35); overflow: hidden; margin-bottom: 12px; }
.temps > i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #2ecc71, #f1c40f); transition: width 1s linear; }
.temps > i.urgent { background: linear-gradient(90deg, #ff6b5e, #ff9a5e); }
.question { font: 700 1.28rem/1.35 Georgia, serif; margin: 6px 0 16px; }
.choix { display: grid; gap: 10px; }
.choix button { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 14px; min-height: 54px; border-width: 2px; background: rgba(255,255,255,.09); }
.choix .lettre { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 800; color: var(--encre);
  background: linear-gradient(180deg, #ffe27a, var(--or)); }
.choix button.bon { border-color: var(--bon); background: rgba(46,204,113,.24); box-shadow: 0 0 0 3px rgba(46,204,113,.25); }
.choix button.mauvais { border-color: var(--mauvais); background: rgba(255,107,94,.22); }
.choix button.bon::after { content: "✔"; margin-left: auto; color: var(--bon); font-size: 1.3rem; }
.choix button.mauvais::after { content: "✘"; margin-left: auto; color: var(--mauvais); font-size: 1.3rem; }
.bilan { font: 700 1.25rem/1.3 Georgia, serif; margin: 14px 0 0; }
.bilan.bon { color: var(--bon); } .bilan.mauvais { color: var(--mauvais); }
.verset { margin: 12px 0 0; padding: 12px 14px 10px; border-radius: 6px 14px 14px 6px; border-left: 6px solid var(--or2); color: var(--encre-p);
  background: var(--parchemin); font: italic 1rem/1.55 Georgia, serif; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.verset cite { display: block; margin-top: 6px; font: normal 700 .85rem system-ui, sans-serif; color: #7b5d12; }
.fin { text-align: center; }
.fin .trophee { font-size: 4rem; line-height: 1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.fin svg.pie { width: 150px; height: 150px; margin: 6px auto; display: block; }

.confetti { position: fixed; top: -40px; font-size: 26px; pointer-events: none; z-index: 10; animation: chute 2.2s ease-in forwards; }
@keyframes chute { to { transform: translateY(110vh) rotate(540deg); opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .cible, .halo, .de.roule, .confetti { animation: none; } .temps > i { transition: none; } .confetti { display: none; }
}

/* ----- Accueil, formulaires, salon (partie en ligne) ----- */
.choix-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }
.carte-choix { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 22px 16px; border-radius: 18px; min-height: 0;
  border: 2px solid var(--bord); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }
.carte-choix:hover:not(:disabled) { border-color: var(--or); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.carte-choix b { font: 700 1.2rem/1.2 Georgia, serif; color: var(--or); }
.carte-choix span:last-child { color: var(--discret); font-size: .92rem; }
.gros-ico { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; color: var(--encre); margin-bottom: 4px;
  background: radial-gradient(circle at 35% 30%, #fff1b0, var(--or) 55%, var(--or2)); box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 -3px 6px rgba(0,0,0,.2); }
.ico { display: block; }
.lien-retour { min-height: 0; padding: 4px 10px; margin-bottom: 8px; background: transparent; border-color: transparent; color: var(--discret); }
.formulaire { display: grid; gap: 14px; max-width: 460px; margin-top: 10px; }
.champ { display: grid; gap: 4px; }
.champ > span { color: var(--discret); font-size: .88rem; }
.saisie-code { font: 700 1.6rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .22em; text-transform: uppercase; text-align: center; color: var(--or); }
.erreur { margin: 0; min-height: 1.4em; color: var(--mauvais); font-weight: 600; }
.salon { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .salon { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.salon-haut { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.qr-boite { background: #fff; border-radius: 14px; padding: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.4); line-height: 0; }
.qr-boite svg { width: min(220px, 60vw); height: auto; }
.salon-code { display: grid; gap: 4px; min-width: 200px; }
.salon-code small { color: var(--discret); }
.code-partie { display: flex; gap: 14px; font: 800 2.1rem/1.1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .12em; color: var(--or);
  text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.salon-liste li { grid-template-columns: auto 1fr auto; }
.joueurs em { font-style: normal; color: var(--or); font-weight: 400; font-size: .85rem; }
.hote { display: inline-flex; align-items: center; gap: 4px; color: var(--or); font-size: .8rem; font-weight: 700; }
.hote .ico { color: var(--or); }
.barre-partie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.barre-partie .gauche { display: flex; align-items: center; gap: 10px; }
.barre-partie button { min-height: 38px; padding: 6px 14px; }
.etiquette { padding: 3px 12px; border-radius: 99px; background: rgba(255,255,255,.1); color: var(--discret); font-size: .85rem; }
.code-mini { font: 700 1rem ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; color: var(--or); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; max-width: min(92vw, 460px); padding: 12px 18px; border-radius: 14px;
  background: #0b1030; color: var(--texte); border: 1px solid var(--or); box-shadow: 0 10px 26px rgba(0,0,0,.5); }