:root { --ink:#17324d; --muted:#64778a; --blue:#288eb7; --blue-dark:#16749d; --pale:#eef8fb; --green:#23a77a; --red:#df5c65; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(145deg,#f9fcff 0%,#eff9f8 100%); font-family:"DM Sans",sans-serif; overflow-x:hidden; }
button { font:inherit; }
[hidden] { display:none !important; }
.ambient { position:fixed; border-radius:50%; filter:blur(3px); opacity:.42; pointer-events:none; }
.ambient--one { width:330px; height:330px; right:-120px; top:-110px; background:#c9edf4; }
.ambient--two { width:290px; height:290px; left:-130px; bottom:-100px; background:#d8f2e5; }
.app-shell { position:relative; width:min(100% - 32px,680px); margin:auto; padding:24px 0 48px; }
.brand { display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:22px; color:#267c9e; font-family:"Fredoka",sans-serif; font-size:23px; }
.brand strong { color:#f08b57; }
.brand__icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#dff4f7; }
.brand svg { width:26px; fill:none; stroke:#2685a7; stroke-width:2.8; stroke-linecap:round; }
.quiz-card { padding:28px; border:1px solid rgba(40,142,183,.12); border-radius:28px; background:rgba(255,255,255,.9); box-shadow:0 20px 60px rgba(38,92,112,.11); backdrop-filter:blur(10px); }
.progress-heading { display:flex; align-items:center; justify-content:space-between; }
.eyebrow { margin:0; color:var(--blue-dark); font-size:13px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.score-pill { margin:0; padding:7px 11px; border-radius:99px; color:#a56822; background:#fff5d8; font-size:13px; font-weight:700; }
.score-pill span:first-child { color:#f2b63d; }
.progress-track { height:8px; margin:14px 0 32px; border-radius:99px; background:#e8f0f3; overflow:hidden; }
.progress-bar { width:10%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#32b4c2,#278db7); transition:width .35s ease; }
.question-zone { display:grid; grid-template-columns:112px 1fr; align-items:center; gap:20px; margin-bottom:28px; }
.avatar-wrap { width:112px; height:112px; border:5px solid #fff; border-radius:28px; background:#dff4f2; overflow:hidden; box-shadow:0 8px 25px rgba(30,119,139,.14); }
.avatar-wrap img { width:100%; height:100%; object-fit:cover; }
.speech-bubble { position:relative; min-height:120px; display:flex; align-items:center; padding:22px 24px; border-radius:8px 22px 22px 22px; background:var(--pale); }
.speech-bubble::before { content:""; position:absolute; left:-12px; top:23px; border-width:0 14px 14px 0; border-style:solid; border-color:transparent var(--pale) transparent transparent; }
h1,h2 { font-family:"Fredoka",sans-serif; }
.speech-bubble h1 { margin:0; font-size:clamp(18px,3.4vw,23px); line-height:1.35; }
.answers { display:grid; gap:12px; }
.answer-button { display:flex; align-items:center; gap:14px; width:100%; padding:13px 16px; border:2px solid #e4edf0; border-radius:16px; color:var(--ink); background:white; text-align:left; cursor:pointer; transition:.18s ease; }
.answer-button:hover:not(:disabled),.answer-button:focus-visible { border-color:#75c4d5; transform:translateY(-2px); box-shadow:0 7px 18px rgba(40,142,183,.10); outline:none; }
.answer-button:disabled { cursor:default; }
.answer-letter { flex:0 0 35px; display:grid; place-items:center; height:35px; border-radius:10px; color:var(--blue-dark); background:#eaf6f9; font-weight:700; }
.answer-button.is-correct { border-color:#68c9a9; background:#edf9f4; }
.answer-button.is-correct .answer-letter { color:white; background:var(--green); }
.answer-button.is-wrong { border-color:#ec979d; background:#fff2f3; }
.answer-button.is-wrong .answer-letter { color:white; background:var(--red); }
.feedback { min-height:0; margin-top:15px; font-weight:600; }
.feedback--correct { color:#16845f; }.feedback--wrong { color:#c64a54; }
.primary-button { display:block; min-width:170px; margin:22px auto 0; padding:14px 24px; border:0; border-radius:14px; color:white; background:linear-gradient(135deg,#269bb5,#227ca8); font-weight:700; cursor:pointer; box-shadow:0 9px 22px rgba(34,124,168,.23); transition:.18s; }
.primary-button:hover { transform:translateY(-2px); box-shadow:0 12px 25px rgba(34,124,168,.3); }
.next-button { margin-right:0; }
.welcome-dialog { width:min(calc(100% - 32px),480px); padding:34px; border:0; border-radius:28px; color:var(--ink); text-align:center; box-shadow:0 25px 80px rgba(19,61,79,.25); }
.welcome-dialog::backdrop { background:rgba(20,47,61,.58); backdrop-filter:blur(5px); }
.welcome-dialog h2 { margin:9px 0 12px; font-size:29px; }
.welcome-dialog p:not(.eyebrow) { color:var(--muted); line-height:1.6; }
.welcome-visual { width:80px; height:80px; display:grid; place-items:center; margin:-4px auto 20px; border-radius:24px; background:#e2f6f5; font-size:40px; transform:rotate(-3deg); }
.welcome-details { display:flex; justify-content:center; gap:10px; margin-top:18px; }
.welcome-details span { padding:8px 11px; border-radius:10px; color:var(--blue-dark); background:#edf7fa; font-size:12px; font-weight:700; }
.result { padding:55px 28px; text-align:center; }
.result__icon { width:90px; height:90px; display:grid; place-items:center; margin:0 auto 20px; border-radius:50%; background:#fff4d0; font-size:45px; }
.result h1 { margin:10px 0 26px; font-size:32px; }
.result__copy { margin:0; color:var(--muted); }
.result__score { margin:2px 0 14px; color:var(--blue-dark); font-family:"Fredoka",sans-serif; font-size:64px; font-weight:700; }
.result__message { max-width:390px; margin:0 auto; color:var(--muted); line-height:1.55; }
@media (max-width:560px) {
  .app-shell { width:min(100% - 20px,680px); padding-top:15px; }
  .quiz-card { padding:20px 17px; border-radius:22px; }
  .progress-track { margin-bottom:23px; }
  .question-zone { grid-template-columns:80px 1fr; gap:13px; align-items:start; }
  .avatar-wrap { width:80px; height:80px; border-radius:21px; }
  .speech-bubble { min-height:104px; padding:17px; }
  .speech-bubble h1 { font-size:17px; }
  .answer-button { padding:11px 12px; font-size:14px; }
  .welcome-dialog { padding:28px 22px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }

/* Révision par objectifs, banque et corrections. */
.app-shell { width:min(100% - 32px,960px); }
.main-nav { display:flex; gap:6px; padding:6px; margin:0 auto 24px; border:1px solid #d8e8ec; border-radius:16px; background:#fff; }
.main-nav button { flex:1; border:0; border-radius:11px; padding:13px 8px; color:var(--ink); background:transparent; cursor:pointer; font-weight:700; }
.main-nav button[aria-current] { color:#fff; background:var(--blue-dark); }
button:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.table-wrap:focus-visible { outline:3px solid #165b7a; outline-offset:4px; }
.intro-card { padding:32px; }
.intro-card h1,#bank-title { margin:12px 0; font-size:clamp(26px,4vw,37px); }
.intro-card p { line-height:1.65; max-width:720px; }
.intro-card .primary-button { margin-left:0; }
.source-note { color:#52697a; font-size:13px; line-height:1.6; font-weight:400; overflow-wrap:anywhere; }
.module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:22px 0; }
.module-card { display:flex; flex-direction:column; align-items:flex-start; min-height:180px; padding:24px; text-align:left; border:1px solid #d8e8ec; border-radius:20px; background:#fff; color:var(--ink); cursor:pointer; }
.module-card:last-child { grid-column:1 / -1; min-height:150px; }
.module-card:hover,.module-card[aria-expanded="true"] { border-color:var(--blue); background:#f0f9fb; }
.module-card h2 { margin:10px 0 6px; font-size:23px; }
.module-card p { margin:0 0 15px; color:var(--muted); line-height:1.5; }
.module-count { margin-top:auto; font-size:13px; font-weight:700; color:var(--blue-dark); }
.study-detail { scroll-margin-top:20px; }
.study-detail h2 { font-size:29px; margin:12px 0 20px; }
.study-detail h3 { margin:30px 0 12px; font-size:19px; }
.study-detail p,.study-detail li,.bank-item p,.bank-item li { line-height:1.7; }
.study-detail li,.bank-item li { margin:8px 0; }
.takeaway,.recall-card { padding:18px 20px; background:#eef8fb; border-radius:14px; }
.recall-card { margin:28px 0 18px; background:#eff9f4; }
summary { cursor:pointer; font-weight:700; line-height:1.55; }
.table-wrap { overflow:auto; border:1px solid #d8e8ec; border-radius:12px; margin-bottom:20px; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th,td { padding:13px 15px; text-align:left; vertical-align:top; border-bottom:1px solid #e4eef0; line-height:1.65; min-width:130px; }
thead { background:#eef8fb; } tbody th { font-weight:600; } tr:last-child td,tr:last-child th { border-bottom:0; }
.quiz-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-12px 0 22px; }
.topic-tag { margin:0; font-size:13px; color:var(--blue-dark); font-weight:700; }
.text-button { background:transparent; color:var(--ink); border:1px solid #c9dce2; border-radius:9px; padding:8px 10px; white-space:nowrap; cursor:pointer; font-size:13px; }
.answer-hint { color:var(--muted); font-size:13px; }
.explanation { color:var(--ink); font-weight:400; line-height:1.65; }
.feedback p { margin:10px 0; }
#quiz-view { max-width:760px; margin:auto; }
#question-text:focus,#detail-title:focus,#result-title:focus,#bank-title:focus,#study-title:focus { outline:none; }
.bank-filters { display:grid; grid-template-columns:1.2fr 1fr; gap:15px; margin:24px 0; }
.bank-filters label { font-weight:700; font-size:14px; }
input,select { display:block; width:100%; min-width:0; margin-top:8px; padding:13px; border:1px solid #b8d1da; border-radius:10px; background:#fff; color:var(--ink); font:inherit; }
.bank-item { padding:18px 0; border-bottom:1px solid #d8e8ec; }
.bank-item .topic-tag { margin-top:15px; }
.correct-answer { color:#137451; font-weight:700; }
.topic-results { display:grid; gap:10px; margin-top:25px; }
.topic-result { padding:14px; border:1px solid #c5dee5; border-radius:12px; color:var(--blue-dark); background:#eef8fb; text-align:left; cursor:pointer; }
.review-answers { text-align:left; margin-top:32px; }
.result { padding:32px; }
.result__score { font-size:56px; }
.app-footer { margin:24px auto 0; max-width:740px; text-align:center; color:#52697a; font-size:12px; line-height:1.7; }
.skip-link { position:absolute; left:15px; top:-100px; z-index:10; padding:12px; background:#fff; color:var(--ink); }
.skip-link:focus { top:15px; }
@media(max-width:600px) {
 .app-shell { width:calc(100% - 24px); }
 .main-nav { gap:2px; } .main-nav button { font-size:12px; padding:12px 5px; }
 .intro-card { padding:23px; } .intro-card .eyebrow { font-size:11px; }
 .module-grid { grid-template-columns:1fr; gap:12px; } .module-card,.module-card:last-child { padding:20px; min-height:0; }
 .module-card h2 { font-size:21px; } .bank-filters { grid-template-columns:1fr; }
 .quiz-tools { align-items:flex-start; } .topic-tag { max-width:70%; }
 .study-detail h2 { font-size:24px; } .result { padding:24px 18px; }
 th,td { padding:10px; font-size:13px; }
}