:root { --gap: 16px; --maxw: 1100px; --blue:#0d6efd; --green:#22c55e; --red:#ef4444; --muted:#6b7280; }
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;margin:0;background:#fafafa;color:#333827}
body.canada{background-image:url('../media/images/bg-canada.svg');background-size:320px 320px;background-repeat:repeat}
header,.footer{max-width:var(--maxw);margin:0 auto;padding:16px}
.site-header{display:flex;align-items:center;gap:16px}
.site-header img.logo{height:36px}
.site-nav{margin-left:auto;display:flex;gap:10px;align-items:center}
.site-nav a{padding:8px 10px;border-radius:8px;text-decoration:none;color:#fff;background:#000;border:1px solid #000;font-weight:700}
h1{margin:0;font-size:1.1rem}
.timer{margin-left:12px;font-weight:700}
.grid{max-width:var(--maxw);margin:24px auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap);padding:0 16px}
.pill{display:inline-block;text-decoration:none;text-align:center;padding:12px 16px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.quiz{max-width:var(--maxw);margin:16px auto;padding:0 16px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.media{margin:12px 0}
.choices{display:grid;gap:8px}
.choice{padding:12px;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;background:#fff;font-weight:600}
.choice:hover{background:#f9fafb}
.choice.correct{background:rgba(34,197,94,.15);border-color:var(--green)}
.choice.incorrect{background:rgba(239,68,68,.15);border-color:var(--red)}
.footer{display:flex;gap:var(--gap);justify-content:center;border-top:1px solid #eee;background:#fff}
button{padding:10px 16px;border-radius:8px;border:1px solid #d1d5db;background:#fff;cursor:pointer}
button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.result{max-width:var(--maxw);margin:24px auto;padding:0 16px}
.result h2{margin-top:0}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef2ff}
.muted{color:var(--muted);font-size:.9em}
.hidden{display:none}
/* Flags progress */
.flags{max-width:var(--maxw);margin:12px auto;padding:12px;border:1px solid #dbe3ff;border-radius:12px;background:#fff;overflow-x:auto}
.flags-inner{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:6px;align-items:center}
.flag{width:34px;height:34px;border:1px solid #d1d5db;border-radius:999px;position:relative;cursor:pointer;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;color:#6b7280;opacity:1}
.flag .num{position:static;font-size:13px;background:none;color:inherit;padding:0;border-radius:0;line-height:1}
.flag.current{border-color:var(--blue);box-shadow:0 0 0 2px rgba(13,110,253,.25);opacity:1;color:#333}

.flag.locked{cursor:not-allowed;filter:grayscale(1)}
/* Level bar */
.levelbar{display:flex;gap:6px;margin:12px 0}
.levelbar .seg{flex:1;height:14px;background:#e5e7eb;border-radius:4px;position:relative}
.levelbar .seg.active{background:#111}
.levelbar .labels{display:flex;justify-content:space-between;font-weight:700;font-size:12px;margin-top:6px;color:#333}
.actions{display:flex;gap:12px;justify-content:center;margin:12px auto}
.btn{padding:10px 14px;border-radius:8px;border:1px solid #c7d2fe;background:#eef2ff;color:#1e3a8a;font-weight:600;cursor:pointer}
.btn:hover{background:#e0e7ff}
.footer .social{display:flex;gap:12px;align-items:center}
.icon{width:22px;height:22px;display:inline-block;vertical-align:middle}
.icon svg{width:22px;height:22px;display:block}

/* Larger footer nav buttons */
.footer button{padding:12px 20px;font-size:16px}

/* Result choice bars */
.result-question{margin:12px 0;padding:12px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.result-choice{padding:10px;border-radius:8px;border:1px solid #e5e7eb;margin:6px 0}
.result-choice.correct{background:rgba(34,197,94,.18);border-color:#22c55e}
.result-choice.incorrect{background:rgba(239,68,68,.18);border-color:#ef4444}
.bonne{font-weight:700}

.flag.answered{filter: grayscale(1) contrast(1.2); opacity:1}
.flag.locked{opacity:.35; filter: grayscale(1)}


/* Custom: plain numeric flags and selected answer visuals */
.flag.answered{color:#333;opacity:1;border-color:#9ca3af}
.flag.current{border-color:var(--blue);box-shadow:0 0 0 2px rgba(13,110,253,.25);opacity:1;color:#333}
.flag.locked{cursor:not-allowed;filter:grayscale(1);color:#9ca3af;opacity:.6}

.choice.selected{background:#f3f4f6;border-color:#e5e7eb}
.choice input[type="radio"]:checked + span{}


/* Circular flags – states */
.flag.current{border-color:#333;box-shadow:0 0 0 3px rgba(0,0,0,.1);opacity:1;background:#111;color:#fff}
.flag.answered{background:#111;color:#fff;border-color:#333;opacity:1}
.flag.locked{cursor:not-allowed;filter:grayscale(1);opacity:.5}

.flag.answered{background:#111;color:#fff;border-color:#333}

.flag.current{box-shadow:0 0 0 2px rgba(13,110,253,.55);border-color:#0d6efd}

.flag.locked{opacity:.5;cursor:not-allowed}


.result {animation: fadeIn .7s ease-in-out;}
@keyframes fadeIn {from {opacity:0; transform: translateY(10px);} to {opacity:1; transform: translateY(0);}}
.flag:hover {transform: scale(1.05); transition: transform 0.15s ease;}

.niv-normal{padding:8px}
.niv-normal img{width:100%;max-width:680px;height:auto;border-radius:12px;display:block;margin:0 auto}


.flag:hover{transform:translateY(-1px);transition:transform .15s ease}
.badge{transition:transform .3s ease}
.badge:hover{transform:scale(1.05)}


.card{box-shadow:0 1px 3px rgba(0,0,0,0.08),0 4px 8px rgba(0,0,0,0.04)}
button.primary:hover{box-shadow:0 0 0 3px rgba(0,0,0,0.1)}

.niv-banner{background:#fff;padding:8px;border-radius:14px;border:1px solid #e5e7eb;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.niv-banner img{width:100%;max-width:680px;height:auto;border-radius:12px;display:block;margin:0 auto}

#nav-ecrit{background:#111 !important;border-color:#111 !important;color:#fff !important}
#nav-orale{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important}

.choice.selected{background:#e6e9ef;border-color:#cbd5e1}


/* Polished buttons & focus */
.pill{display:inline-block;text-decoration:none;text-align:center;padding:12px 14px;border-radius:10px;background:#f3f4f6;border:1px solid #d1d5db;color:#111;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pill:hover{background:#e9ecef}
.pill:focus{outline:3px solid rgba(13,110,253,.35);outline-offset:2px}
/* Ecrit vs Orale color coding everywhere */
.pill-ecrit{background:#111 !important;border-color:#111 !important;color:#fff !important}
.pill-orale{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important}
/* Main grid pills (top) */
#sections a[data-type="ecrit"]{background:#111 !important;border-color:#111 !important;color:#fff !important}
#sections a[data-type="orale"]{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important}

/* Choice card polish */
.choice{position:relative; padding:14px 44px 14px 14px}
.choice.selected{background:#e6e9ef;border-color:#cbd5e1}
.choice.selected::after{content:'✓'; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-weight:800; opacity:.65}

/* Progress bar during quiz */
.progress{height:8px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin:8px 0 12px 0}
.progress .bar{height:100%; background:#111; width:0%; border-radius:999px; transition:width .25s ease}

/* Footer polish */
.app-footer{max-width:var(--maxw); margin:16px auto; padding:16px; color:#6b7280; font-size:.9rem; display:flex; gap:16px; align-items:center; justify-content:space-between; border-top:1px solid #eee}
.app-footer .links a{color:inherit; text-decoration:none; margin-right:12px}
.app-footer .links a:hover{text-decoration:underline}


/* Anti-copy hints for NIV image (best-effort) */
.niv-banner img.niv-img{
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}


/* Dark mode theme (toggle-ready via body.dark) */
:root { --bg:#0b0f14; --card:#121821; --border:#1f2937; --text:#dbe1ea; --muted:#8b98a7; --blue:#0d6efd; --green:#22c55e; --red:#ef4444; }
body.dark{ background:var(--bg); color:var(--text); }
body.dark .card, body.dark .result-question, body.dark .flags, body.dark .footer{ background:var(--card); border-color:var(--border); }
body.dark .choice{ background:var(--card); border-color:var(--border); color:var(--text); }
body.dark .levelbar .seg{ background:#1f2937; }
body.dark .levelbar .seg.active{ background:#fff; }
.media img{ display:block; margin:0 auto; max-width:100%; height:auto; border-radius:12px; }
.media audio{ width:100%; }

/* Custom audio player */
.audio-player{ display:flex; align-items:center; gap:10px; padding:10px; border:1px solid #d1d5db; border-radius:12px; background:#fff; }
.audio-player .progress{ flex:1; height:6px; background:#e5e7eb; border-radius:999px; position:relative; cursor:pointer; }
.audio-player .bar{ position:absolute; left:0; top:0; bottom:0; width:0%; background:#0d6efd; border-radius:999px; }
.audio-player .time{ font-variant-numeric:tabular-nums; min-width:86px; text-align:center; }
.audio-player .vol{ width:90px; }

/* Anti-download UI hints */
img, audio { -webkit-user-drag: none; user-select: none; }
