/* =========================================================================
   Quiz — feuille de style
   Les couleurs ne sont JAMAIS écrites en dur ici : tout passe par les
   variables ci-dessous, que data/theme.json peut surcharger au démarrage.
   Les valeurs présentes servent de repli si theme.json est absent ou
   incomplet — et évitent le flash de couleur au chargement.
   ========================================================================= */
:root{
  --bg:#f5f6f8; --card:#ffffff; --ink:#1c1f24; --muted:#5d6672;
  --line:#d9dee6;
  --accent:#12355b; --accent-soft:#e8eef7;
  --warn:#a35a00;   --warn-soft:#fdf3e4;
  --ok:#1f7a45;     --ok-soft:#e6f4ec;
  --ko:#b3261e;     --ko-soft:#fceceb;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 6px 20px rgba(16,24,40,.07);
  --radius:14px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Encoche, coins arrondis et barre d'accueil de l'iPhone */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --wrap-x:16px;
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#12151a; --card:#1a1f27; --ink:#e8ecf2; --muted:#9aa5b4;
  --line:#2c3441;
  --accent:#8fb6e8; --accent-soft:#1d2b3e;
  --warn:#e0a35c;   --warn-soft:#33281a;
  --ok:#6fd398;     --ok-soft:#16301f;
  --ko:#f08f88;     --ko-soft:#341a19;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.35);
}}

*,*::before,*::after{box-sizing:inherit}

html{
  /* 100dvh, pas 100vh : la barre d'adresse de Safari se rétracte et fausse vh */
  min-height:100dvh;
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;min-height:100dvh;
  background:var(--bg);color:var(--ink);
  font-family:var(--font);
  font-size:16px;line-height:1.5;
  /* coupe le rebond élastique qui donne l'impression que la page « décroche » */
  overscroll-behavior-y:none;
  /* supprime le voile gris au toucher et le délai de double-tap de 300 ms */
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.wrap{
  max-width:800px;margin:0 auto;
  padding:calc(20px + var(--safe-t)) calc(var(--wrap-x) + var(--safe-r))
          calc(40px + var(--safe-b)) calc(var(--wrap-x) + var(--safe-l));
}
/* En session, la barre du haut gère déjà l'encoche et la barre du bas occupe l'espace */
body.in-quiz .wrap{padding-top:14px;padding-bottom:16px}

h1{font-size:1.45rem;margin:0 0 6px;color:var(--accent);letter-spacing:-.01em}
h2{font-size:1.08rem;margin:0 0 12px;color:var(--accent)}
p{margin:0 0 12px}
.lede{color:var(--muted);font-size:.92rem;margin-bottom:18px}
.mini{font-size:.79rem;color:var(--muted)}
.lbl{font-size:.8rem;color:var(--muted);font-weight:600;margin:0 0 6px}
.hidden{display:none !important}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);margin-bottom:16px}

.tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.tag.multi{background:var(--warn-soft);color:var(--warn)}

/* --- boutons : 44 px minimum, recommandation Apple HIG --- */
button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid transparent;transition:.12s;
  touch-action:manipulation}
.btn{background:var(--accent);color:var(--bg);padding:13px 20px;font-weight:600;font-size:.98rem;
  width:100%;min-height:48px}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--line)}
.btn.sm{width:auto;padding:10px 16px;font-size:.87rem;min-height:44px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:active{transform:scale(.985);filter:brightness(1.1)}
/* :hover ne s'applique qu'aux vrais pointeurs : sur iOS il resterait « collé » après un tap */
@media (hover:hover) and (pointer:fine){
  .btn:hover{filter:brightness(1.12)}
  .opt:hover{border-color:var(--accent)}
}

.row{display:flex;gap:9px;flex-wrap:wrap}
.row>.btn{flex:1;min-width:140px}

.pick{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.pick label{display:flex;align-items:flex-start;gap:11px;padding:12px 13px;border:1.5px solid var(--line);
  border-radius:10px;cursor:pointer;font-size:.92rem;min-height:44px}
.pick label.on{border-color:var(--accent);background:var(--accent-soft)}
.pick input{margin:2px 0 0;accent-color:var(--accent);flex:none;width:20px;height:20px}
.pick .meta{display:block;font-size:.79rem;color:var(--muted);margin-top:2px}

.segs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.segs label{flex:1;min-width:70px;min-height:44px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:10px 6px;border:1.5px solid var(--line);
  border-radius:10px;cursor:pointer;font-size:.9rem;user-select:none;-webkit-user-select:none}
.segs label.on{border-color:var(--accent);background:var(--accent-soft);font-weight:700;color:var(--accent)}
.segs input{position:absolute;opacity:0;pointer-events:none}

.kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.kpi{flex:1;min-width:110px;background:var(--accent-soft);border-radius:10px;padding:11px 13px}
.kpi .v{font-size:1.4rem;font-weight:800;color:var(--accent);line-height:1.1}
.kpi .k{font-size:.74rem;color:var(--muted);margin-top:2px}

/* --- barre de session, pleine largeur, sous l'encoche --- */
.bar{position:sticky;top:0;z-index:20;background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:calc(var(--safe-t) + 10px) calc(var(--wrap-x) + var(--safe-r)) 10px calc(var(--wrap-x) + var(--safe-l));
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px)}
.barinner{max-width:800px;margin:0 auto}
.barrow{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.85rem;color:var(--muted)}
#timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.05rem;color:var(--accent)}
#timer.warn{color:var(--warn)} #timer.crit{color:var(--ko)}
.prog{height:5px;background:var(--line);border-radius:999px;margin-top:9px;overflow:hidden}
.prog span{display:block;height:100%;background:var(--accent);width:0;transition:width .25s}

/* --- navigation collée en bas, dans la zone du pouce --- */
.navbar{position:sticky;bottom:0;z-index:20;background:var(--bg);
  border-top:1px solid var(--line);
  padding:10px calc(var(--wrap-x) + var(--safe-r)) calc(var(--safe-b) + 10px) calc(var(--wrap-x) + var(--safe-l));
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px)}
.navinner{max-width:800px;margin:0 auto;display:flex;gap:10px}
.navinner .btn{flex:1}

.qhead{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.qnum{font-size:.78rem;color:var(--muted);font-weight:600}
.qtext{font-size:1.05rem;font-weight:600;margin:0 0 4px;line-height:1.35}
.hint{font-size:.81rem;color:var(--muted);margin:0 0 14px}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border:1.5px solid var(--line);
  border-radius:10px;cursor:pointer;background:var(--card);font-size:.93rem;min-height:48px}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt:active{transform:scale(.99)}
.opt input{margin:2px 0 0;accent-color:var(--accent);flex:none;width:20px;height:20px}

.score{text-align:center;padding:6px 0 14px}
.score .n{font-size:2.5rem;font-weight:800;color:var(--accent);line-height:1}
.score .l{color:var(--muted);font-size:.88rem;margin-top:6px}
.verdict{padding:12px 14px;border-radius:10px;font-size:.89rem;border-left:4px solid var(--line)}
.rev{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px}
.rev.ok{background:var(--ok-soft);border-color:var(--ok)}
.rev.ko{background:var(--ko-soft);border-color:var(--ko)}
.rev .q{font-weight:600;font-size:.93rem;margin-bottom:8px}
.rev .a{font-size:.86rem;margin:3px 0;color:var(--muted)}
.rev .a b{color:var(--ink)}
.rev .why{font-size:.84rem;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);color:var(--muted)}

.weak{border-bottom:1px solid var(--line);padding:9px 0}
.weak:last-child{border-bottom:none}
.weak .t{font-size:.87rem;margin-bottom:5px}
.weak .m{display:flex;align-items:center;gap:9px;font-size:.76rem;color:var(--muted)}
.gauge{flex:1;height:6px;background:var(--line);border-radius:999px;overflow:hidden;max-width:190px}
.gauge span{display:block;height:100%}

.warnbox{border-left:4px solid var(--warn);background:var(--warn-soft);padding:11px 13px;border-radius:8px;
  font-size:.85rem;margin-bottom:14px}
textarea{width:100%;min-height:110px;font-family:ui-monospace,Menlo,Consolas,monospace;
  /* 16 px minimum : en dessous, Safari iOS zoome automatiquement à la mise au point */
  font-size:16px;
  border:1px solid var(--line);border-radius:9px;padding:10px;background:var(--bg);color:var(--ink);resize:vertical}
.foot{margin-top:20px;font-size:.75rem;color:var(--muted);text-align:center;line-height:1.5}
details{border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-bottom:10px}
summary{cursor:pointer;font-size:.89rem;font-weight:600;color:var(--accent);min-height:24px}
details[open] summary{margin-bottom:10px}

/* --- bannière « ajouter à l'écran d'accueil » --- */
.a2hs{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);
  border-top:1px solid var(--line);box-shadow:var(--shadow);
  padding:14px calc(var(--wrap-x) + var(--safe-r)) calc(var(--safe-b) + 14px) calc(var(--wrap-x) + var(--safe-l))}
.a2hs-in{max-width:800px;margin:0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.a2hs p{margin:0;flex:1;min-width:200px;font-size:.84rem;color:var(--muted)}
.a2hs .gl{display:inline-block;border:1px solid var(--line);border-radius:5px;padding:0 5px;color:var(--accent)}

/* --- dialogue de confirmation --- */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  padding:calc(20px + var(--safe-t)) 20px calc(20px + var(--safe-b))}
.modal-box{background:var(--card);border-radius:var(--radius);padding:20px;max-width:420px;width:100%;
  box-shadow:var(--shadow)}
.modal-box p{font-size:.95rem}

/* --- écran de chargement / erreur de configuration --- */
.boot{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;align-items:center;
  justify-content:center;padding:24px;text-align:center;color:var(--muted);font-size:.9rem}
.boot.err{color:var(--ko)}

@media (max-width:520px){
  :root{--wrap-x:12px}
  h1{font-size:1.24rem}
  .qtext{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}