/* Oratorio — jeu « Connais-tu saint Philippe ? » (js/jeu.js).
   Couleur « bonne réponse » : --ok, définie ici pour les deux thèmes, comme dans style.css. */
:root{ --ok:#2F7A4B; --ok-soft:#E3F1E7; --faux-soft:var(--soft); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --ok:#6CC08A; --ok-soft:#1B2E22; }
}
:root[data-theme="dark"]{ --ok:#6CC08A; --ok-soft:#1B2E22; }

#jeu-root{gap:16px}
.jeu-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- intro ---------- */
.jeu-intro .eyebrow{margin:0 0 -8px}
.jeu-intro h2:focus,.jeu-fin h2:focus,.jeu-question:focus{outline:none}
.jeu-niveaux{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.jeu-niveaux legend{font-family:var(--sc);font-weight:700;letter-spacing:.12em;font-size:15px;color:var(--gold);padding:0;margin-bottom:10px}
.jeu-niveau{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground);cursor:pointer}
.jeu-niveau input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.jeu-niveau-nom{font-family:var(--display);font-size:19px;line-height:1.2}
.jeu-niveau small{font-size:13.5px;color:var(--muted)}
.jeu-niveau:hover{border-color:var(--red)}
.jeu-niveau:has(input:checked){border-color:var(--red);background:var(--soft);box-shadow:inset 0 0 0 1px var(--red)}
.jeu-niveau:has(input:checked) .jeu-niveau-nom{color:var(--red)}
.jeu-niveau:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.jeu-intro .jeu-go,.jeu-suite .btn,.jeu-actions .btn{font-size:16px;padding:11px 22px;min-height:46px}
.jeu-intro .jeu-go{align-self:flex-start}

/* ---------- question ---------- */
.jeu-carte{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px clamp(16px,5vw,32px) 24px;display:flex;flex-direction:column;gap:16px}
.jeu-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;font-family:var(--sc);font-weight:700;letter-spacing:.08em;font-size:14px}
.jeu-progres{color:var(--gold)}
.jeu-score{color:var(--muted)}
.jeu-barre{flex-basis:100%;height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:4px}
.jeu-barre span{display:block;height:100%;background:var(--red);transition:width .3s}
.jeu-progres{display:inline-flex;align-items:baseline;gap:8px}
.jeu-niv{font-size:12px;letter-spacing:.08em;padding:1px 8px;border-radius:999px;background:var(--mint-soft);color:var(--mint)}
.jeu-niv-moyen{background:var(--sun-soft);color:var(--gold)}
.jeu-niv-difficile{background:var(--soft);color:var(--red)}
.jeu-serie{padding:2px 10px;border-radius:999px;background:var(--sun);color:var(--sun-ink);letter-spacing:.04em}
@media (prefers-reduced-motion:no-preference){ .jeu-serie.pop{animation:jeuPop .45s ease} @keyframes jeuPop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:none}} }
.jeu-image{margin:0;display:flex;justify-content:center}
.jeu-image img{display:block;width:auto;max-width:100%;max-height:min(46vh,380px);border-radius:var(--r-sm);border:1px solid var(--line);background:#fff}
.jeu-outils{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.jeu-outils .jeu-joker{font-size:14.5px;padding:7px 14px;min-height:40px;border-color:var(--sky);color:var(--sky)}
.jeu-outils .jeu-joker:disabled{opacity:.5;cursor:default;border-color:var(--line);color:var(--muted)}
.jeu-joker-aide{font-size:13.5px;color:var(--muted)}
.jeu-rep.ecarte .jeu-rep-texte{text-decoration:line-through}
.jeu-question{font-family:var(--display);font-weight:400;font-size:clamp(21px,5.2vw,25px);line-height:1.3;margin:0;text-wrap:pretty;overflow-wrap:anywhere}

.jeu-choix{display:flex;flex-direction:column;gap:10px}
.jeu-rep{appearance:none;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;min-height:54px;padding:10px 14px;text-align:left;font:inherit;font-size:17px;line-height:1.35;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;overflow-wrap:anywhere}
.jeu-rep:hover:not([aria-disabled]){border-color:var(--red)}
.jeu-rep:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jeu-lettre{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);font-family:var(--sc);font-weight:700;font-size:14px;color:var(--muted);background:var(--paper)}
.jeu-marque{font-size:20px;font-weight:500;min-width:1em;text-align:center}
.jeu-rep[aria-disabled]{cursor:default}
.jeu-rep.ok{border-color:var(--ok);background:var(--ok-soft);box-shadow:inset 0 0 0 1px var(--ok)}
.jeu-rep.ok .jeu-lettre{background:var(--ok);border-color:var(--ok);color:var(--paper)}
.jeu-rep.ok .jeu-marque{color:var(--ok)}
.jeu-rep.faux{border-color:var(--red);background:var(--faux-soft);box-shadow:inset 0 0 0 1px var(--red)}
.jeu-rep.faux .jeu-lettre{background:var(--red);border-color:var(--red);color:var(--red-ink)}
.jeu-rep.faux .jeu-marque{color:var(--red)}
.jeu-rep.eteint{opacity:.55}

.jeu-retour:empty{display:none}
.jeu-retour{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:var(--r-sm);border-left:4px solid var(--line);background:var(--ground)}
.jeu-retour.ok{border-left-color:var(--ok)}
.jeu-retour.faux{border-left-color:var(--red)}
.jeu-retour p{margin:0}
.jeu-verdict{font-family:var(--display);font-size:20px;line-height:1.3}
.jeu-retour.ok .jeu-verdict{color:var(--ok)}
.jeu-retour.faux .jeu-verdict{color:var(--red)}
.jeu-expl{font-size:16px;color:var(--ink)}
.jeu-plus{align-self:flex-start;color:var(--red);font-family:var(--sc);font-weight:700;letter-spacing:.06em;font-size:15px;text-decoration:none;padding:6px 0}
.jeu-plus:hover{text-decoration:underline}
.jeu-plus:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.jeu-suite{display:flex;justify-content:flex-end}

/* ---------- fin ---------- */
.jeu-fin{text-align:center;align-items:center}
.jeu-fin h2{font-family:var(--sc);font-weight:700;font-size:16px;letter-spacing:.14em;color:var(--gold)}
.jeu-total{font-family:var(--display);font-size:30px;line-height:1;color:var(--muted)}
.jeu-total b{font-weight:400;font-size:76px;color:var(--red);font-variant-numeric:lining-nums}
.jeu-phrase{font-size:18px}
.jeu-record{font-family:var(--sc);font-weight:700;letter-spacing:.06em;font-size:14px;color:var(--muted)}
.jeu-maxime{font-size:clamp(19px,4.6vw,22px);max-width:34ch;margin:6px auto 0;padding-top:14px;border-top:1px solid var(--line)}
.jeu-maxime::first-letter{float:none;font-size:1em;padding:0;color:inherit}
.jeu-sig{font-family:var(--sc);font-weight:700;letter-spacing:.08em;color:var(--muted);font-size:14px;margin-top:-6px!important}
.jeu-actions{justify-content:center;margin-top:6px}
.jeu-fin .jx-revoir{align-self:stretch;text-align:left}

@media (max-width:420px){
  .jeu-niveaux{grid-template-columns:1fr 1fr}
  .jeu-actions{flex-direction:column;align-self:stretch}
  .jeu-actions .btn,.jeu-suite .btn{width:100%}
  .jeu-intro .jeu-go{align-self:stretch}
}
@media (prefers-reduced-motion:no-preference){
  .jeu-carte,.jeu-fin{animation:jeuFade .3s ease}
  @keyframes jeuFade{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){ .jeu-barre span{transition:none} }