/* ══════════════════════════════════════════════════
   DCG QUIZ — Style
   Système de couleurs IDENTIQUE aux fichiers
   index.html (cartes mentales) et index__1_.html (flashcards)
   Fond : #0f0f13  |  Fonts : Playfair Display + DM Sans
   ══════════════════════════════════════════════════ */

/* ── Variables (copie exacte des fichiers de référence) ── */
:root {
  --bg:      #0f0f13;
  --surface: #1a1a22;
  --surface2:#22222e;
  --border:  #2e2e3e;
  --accent:  #c9a96e;
  --text:    #e8e6f0;
  --muted:   #888098;
  --green:   #5ecb8a;
  --red:     #e06b6b;
  --purple:  #8b6fd4;
  --radius:  16px;
  --shadow:  0 8px 40px rgba(0,0,0,.5);

  /* Couleurs des 7 thèmes (identiques a --t1..t7 du fichier cartes mentales) */
  --t1: #c9a96e;
  --t2: #5ecb8a;
  --t3: #e06b6b;
  --t4: #8b6fd4;
  --t5: #5aafd4;
  --t6: #d46f8b;
  --t7: #6fb86f;

  /* Etats quiz */
  --ok-bg:   rgba(94,203,138,.12);
  --ok-bd:   rgba(94,203,138,.35);
  --err-bg:  rgba(224,107,107,.12);
  --err-bd:  rgba(224,107,107,.35);
  --warn-bg: rgba(201,169,110,.12);
  --warn-bd: rgba(201,169,110,.35);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100svh;
  line-height:1.6;
  overflow-x:hidden;
}
button{font-family:'DM Sans',sans-serif;cursor:pointer;border:none;background:none}

/* ── Screens ── */
.screen{display:none;min-height:100svh;flex-direction:column}
.screen.active{display:flex}

/* ══ NAV PARTAGEE ═══════════════════════════════ */
.nav-bar,.quiz-topbar{
  display:flex;align-items:center;gap:12px;
  padding:10px 20px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:30;flex-shrink:0;
}
.nav-label{
  flex:1;text-align:center;
  font-size:.63rem;font-weight:500;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);
}
.btn-back{
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface2);
  color:var(--muted);font-size:.72rem;font-weight:500;
  white-space:nowrap;transition:border-color .15s,color .15s;
}
.btn-back:hover{border-color:var(--accent);color:var(--accent)}

/* ══ ECRAN 0 - ACCUEIL ══════════════════════════ */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;
  background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-name{
  font-family:'Playfair Display',serif;
  font-size:1.1rem;font-weight:700;color:var(--accent);
  text-decoration:none;
}
.header-sep{width:1px;height:18px;background:var(--border);flex-shrink:0}
.header-title{font-size:.82rem;font-weight:500;color:var(--text);white-space:nowrap}
.site-matiere{display:none}

.home-body{flex:1;max-width:1040px;width:100%;margin:0 auto;padding:2.5rem 1.5rem 2rem}
.home-intro{margin-bottom:2rem}
.home-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:700;line-height:1.2;color:var(--text);margin-bottom:.4rem;
}
.title-em{color:var(--accent)}
.home-kpi{font-size:.78rem;color:var(--muted)}

.themes-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.75rem}
.theme-card{
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--tc,var(--accent));
  border-radius:var(--radius);padding:1.2rem 1.3rem;
  cursor:pointer;position:relative;overflow:hidden;
  transition:border-color .15s,transform .2s,box-shadow .2s;
  animation:rise .3s ease both;
}
.theme-card:hover{border-color:var(--tc,var(--accent));transform:translateY(-3px);box-shadow:var(--shadow)}
.tc-row{display:flex;align-items:flex-start;gap:.65rem;margin-bottom:.65rem}
.tc-icon{font-size:1.5rem;flex-shrink:0;margin-top:2px}
.tc-name{
  font-family:'Playfair Display',serif;
  font-size:.95rem;font-weight:600;color:var(--text);line-height:1.3;
}
.tc-meta{font-size:.72rem;color:var(--muted);margin-bottom:.7rem}
.tc-chips{display:flex;gap:4px;flex-wrap:wrap}
.tc-chip{
  font-size:.58rem;font-weight:500;
  padding:2px 8px;border-radius:99px;
  text-transform:uppercase;letter-spacing:.04em;
  background:var(--surface2);color:var(--muted);border:1px solid var(--border);
}
.tc-progress{margin-top:.75rem;height:2px;border-radius:99px;background:var(--border);overflow:hidden}
.tc-bar{height:100%;border-radius:99px;background:var(--tc,var(--accent));transition:width .5s ease}
.tc-arrow{
  position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);
  color:var(--border);font-size:1rem;transition:color .15s,transform .15s;
}
.theme-card:hover .tc-arrow{color:var(--tc,var(--accent));transform:translateY(-50%) translateX(3px)}

.site-footer{text-align:center;padding:.75rem;font-size:.68rem;color:var(--muted);border-top:1px solid var(--border)}

/* ══ ECRAN 1 - CHAPITRES ════════════════════════ */
.chapters-body{flex:1;max-width:680px;width:100%;margin:0 auto;padding:1.75rem 1.5rem}
.chapters-hero{display:flex;align-items:flex-start;gap:.85rem;margin-bottom:1.5rem}
.theme-emoji{font-size:2rem;flex-shrink:0}
.chapters-title{
  font-family:'Playfair Display',serif;
  font-size:1.4rem;font-weight:700;color:var(--text);margin-bottom:.15rem;
}
.chapters-sub{font-size:.75rem;color:var(--muted)}

.ch-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.ch-item{
  display:flex;align-items:center;gap:.8rem;
  padding:.85rem 1.1rem;
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--ch-c,var(--accent));
  border-radius:var(--radius);cursor:pointer;
  transition:border-color .15s,transform .18s,background .15s;
  animation:rise .25s ease both;
}
.ch-item:hover{border-color:var(--ch-c,var(--accent));background:var(--surface2);transform:translateX(4px)}
.ch-num{font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--ch-c,var(--accent));min-width:46px}
.ch-info{flex:1;min-width:0}
.ch-name{font-size:.86rem;font-weight:500;color:var(--text);line-height:1.4}
.ch-pills{display:flex;gap:3px;margin-top:4px}
.pill{font-size:.56rem;font-weight:600;padding:1px 6px;border-radius:99px;text-transform:uppercase;letter-spacing:.04em;border:1px solid}
.pill.qcu{background:rgba(201,169,110,.12);color:var(--accent);border-color:rgba(201,169,110,.3)}
.pill.qcm{background:rgba(139,111,212,.12);color:var(--purple);border-color:rgba(139,111,212,.3)}
.pill.vf {background:rgba(94,203,138,.12); color:var(--green); border-color:rgba(94,203,138,.3)}
.ch-score{font-size:.66rem;font-weight:600;background:var(--ok-bg);color:var(--green);border:1px solid var(--ok-bd);border-radius:99px;padding:2px 9px;white-space:nowrap}
.ch-arrow{color:var(--border);font-size:1rem;transition:color .15s,transform .15s}
.ch-item:hover .ch-arrow{color:var(--ch-c,var(--accent));transform:translateX(3px)}

/* ══ ECRAN 2 - CONFIG ════════════════════════════ */
.config-body{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem}
.config-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:2rem 1.75rem;
  max-width:440px;width:100%;box-shadow:var(--shadow);
  animation:rise .25s ease both;
}
.cfg-header{
  display:flex;align-items:flex-start;gap:.85rem;
  padding-bottom:1.25rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem;
}
.cfg-emoji{font-size:2rem;flex-shrink:0}
.cfg-title{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--text);line-height:1.35;margin-bottom:.15rem}
.cfg-sub{font-size:.72rem;color:var(--muted)}

.cfg-field{border:none;margin-bottom:1.35rem}
.cfg-legend{font-size:.63rem;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:.65rem;display:block}

.count-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.count-opt{display:block;cursor:pointer}
.count-opt input{position:absolute;opacity:0;pointer-events:none}
.count-face{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:.8rem .4rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  transition:border-color .15s,background .15s,transform .18s;
}
.count-opt:hover .count-face{border-color:var(--accent);transform:translateY(-2px)}
.count-opt input:checked~.count-face{border-color:var(--accent);background:rgba(201,169,110,.1)}
.count-opt.disabled .count-face{opacity:.3;cursor:not-allowed;transform:none!important}
.count-n{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:700;color:var(--text);line-height:1}
.count-opt input:checked~.count-face .count-n{color:var(--accent)}
.count-hint{font-size:.65rem;color:var(--muted)}
.count-warn{font-size:.73rem;color:var(--accent);margin-top:.45rem;padding:.35rem .7rem;background:var(--warn-bg);border-radius:6px;border:1px solid var(--warn-bd)}
.count-warn.hidden{display:none}

.toggle-label{display:flex;align-items:center;gap:.7rem;cursor:pointer}
.toggle-wrap{position:relative;flex-shrink:0}
.toggle-wrap input{position:absolute;opacity:0;pointer-events:none}
.toggle-pill{display:block;width:42px;height:24px;background:var(--surface2);border:1px solid var(--border);border-radius:99px;transition:background .15s,border-color .15s}
.toggle-knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .2s ease,background .15s}
.toggle-wrap input:checked~.toggle-pill{background:rgba(201,169,110,.2);border-color:var(--accent)}
.toggle-wrap input:checked~.toggle-pill .toggle-knob{transform:translateX(18px);background:var(--accent)}
.toggle-text{font-size:.82rem;color:var(--text)}

.btn-launch{
  width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem;
  background:var(--accent);color:#0f0f13;
  font-size:.9rem;font-weight:600;border-radius:10px;
  box-shadow:0 4px 20px rgba(201,169,110,.3);
  transition:opacity .15s,transform .18s;
}
.btn-launch:hover{opacity:.9;transform:translateY(-2px)}

/* ══ ECRAN 3 - QUIZ ══════════════════════════════ */
.qbar-center{flex:1;display:flex;align-items:center;gap:.6rem}
.progress-track{flex:1;height:3px;background:var(--border);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .35s ease;width:0%}
.progress-text{font-size:.68rem;color:var(--muted);white-space:nowrap}
.score-chip{
  font-family:'Playfair Display',serif;font-size:.85rem;font-weight:700;
  color:var(--accent);background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:3px 11px;min-width:50px;text-align:center;
}

.timer-float{position:absolute;top:62px;right:1.25rem;width:52px;height:52px;display:none;z-index:20;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.timer-float.on{display:block}
.timer-svg{width:100%;height:100%;transform:rotate(-90deg)}
.arc-bg{fill:none;stroke:var(--border);stroke-width:6}
.arc-fg{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:163.36;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke .15s}
.arc-fg.warn  {stroke:#e09a3e}
.arc-fg.danger{stroke:var(--red)}
.timer-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:.78rem;color:var(--muted)}

.quiz-stage{flex:1;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1.25rem 2.5rem;gap:1.1rem;max-width:700px;width:100%;margin:0 auto}

.card-shell{width:100%}
.card-body{
  width:100%;min-height:175px;
  background:var(--surface);border:1px solid var(--border);
  border-top:3px solid var(--qcolor,var(--accent));
  border-radius:var(--radius);padding:1.5rem 1.6rem 1.35rem;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
  animation:card-in .25s ease both;transition:border-color .15s;
}
.card-body.flash-ok{animation:flash-ok .5s ease both}
.card-body.flash-err{animation:flash-err .5s ease both}
@keyframes flash-ok{0%,100%{background:var(--surface)}35%{background:rgba(94,203,138,.1);border-color:rgba(94,203,138,.4)}}
@keyframes flash-err{0%,100%{background:var(--surface)}35%{background:rgba(224,107,107,.1);border-color:rgba(224,107,107,.4)}}

.card-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem}
.type-badge{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;padding:2px 9px;border-radius:99px;border:1px solid}
.type-badge.qcu{background:rgba(201,169,110,.12);color:var(--accent);border-color:rgba(201,169,110,.3)}
.type-badge.qcm{background:rgba(139,111,212,.12);color:var(--purple);border-color:rgba(139,111,212,.3)}
.type-badge.vf {background:rgba(94,203,138,.12); color:var(--green); border-color:rgba(94,203,138,.3)}
.q-index{font-size:.7rem;color:var(--muted)}

.q-statement{
  font-family:'Playfair Display',serif;
  font-size:clamp(.95rem,2.3vw,1.2rem);font-weight:600;line-height:1.5;color:var(--text);
}
.q-hint{font-size:.72rem;color:var(--muted);margin-top:.45rem}
.q-hint:empty{display:none}

.opts-zone{width:100%}
.opts-list{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.8rem}
.opt-btn{
  display:flex;align-items:flex-start;gap:.7rem;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:.7rem .9rem;font-size:.84rem;color:var(--muted);
  text-align:left;line-height:1.5;width:100%;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,transform .15s;
  animation:opt-in .18s ease both;
}
.opt-btn:nth-child(2){animation-delay:.04s}
.opt-btn:nth-child(3){animation-delay:.08s}
.opt-btn:nth-child(4){animation-delay:.12s}
@keyframes opt-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
.opt-btn:hover:not(:disabled){border-color:var(--accent);background:var(--surface2);color:var(--text);transform:translateX(4px)}
.opt-btn.sel{border-color:var(--accent);background:rgba(201,169,110,.1);color:var(--text)}
.opt-btn.ok {border-color:var(--ok-bd); background:var(--ok-bg); color:var(--green)}
.opt-btn.err{border-color:var(--err-bd);background:var(--err-bg);color:var(--red)}
.opt-btn:disabled{cursor:default;transform:none!important}
.opt-ltr{
  flex-shrink:0;width:22px;height:22px;border-radius:5px;
  border:1px solid var(--border);background:var(--surface2);
  display:flex;align-items:center;justify-content:center;
  font-size:.67rem;font-weight:700;color:var(--muted);
  transition:all .15s;margin-top:1px;
}
.opt-btn.sel .opt-ltr{background:var(--accent);border-color:var(--accent);color:#0f0f13}
.opt-btn.ok  .opt-ltr{background:var(--green); border-color:var(--green); color:#0f0f13}
.opt-btn.err .opt-ltr{background:var(--red);   border-color:var(--red);   color:#fff}

.feedback-box{font-size:.8rem;line-height:1.55;border-radius:8px;padding:.7rem .9rem;border-left:3px solid;margin-bottom:.8rem;display:none}
.feedback-box.ok {display:block;background:var(--ok-bg); color:var(--green);border-color:var(--green)}
.feedback-box.err{display:block;background:var(--err-bg);color:var(--red);  border-color:var(--red)}

.act-row{display:flex;gap:.55rem}
.btn-confirm{background:var(--accent);color:#0f0f13;font-size:.84rem;font-weight:600;padding:.65rem 1.4rem;border-radius:8px;transition:opacity .15s,transform .15s}
.btn-confirm:disabled{opacity:.28;cursor:not-allowed}
.btn-confirm:not(:disabled):hover{opacity:.88;transform:translateY(-1px)}
.btn-forward{background:var(--surface2);color:var(--text);font-size:.84rem;font-weight:500;padding:.65rem 1.4rem;border-radius:8px;border:1px solid var(--border);transition:border-color .15s,background .15s,transform .15s}
.btn-forward:hover{border-color:var(--accent);background:rgba(201,169,110,.08);transform:translateY(-1px)}
.btn-forward.hidden{display:none}

/* ══ ECRAN 4 - RESULTATS ════════════════════════ */
.results-scene{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem}
.results-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:2rem 1.75rem;
  max-width:440px;width:100%;box-shadow:var(--shadow);
  text-align:center;animation:rise .35s ease both;
}
.res-label{font-size:.63rem;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin-bottom:1.25rem}

.ring-wrap{position:relative;width:130px;height:130px;margin:0 auto .9rem}
.ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg {fill:none;stroke:var(--border);stroke-width:9}
.ring-bar{fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:round;stroke-dasharray:351.86;stroke-dashoffset:351.86;transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1),stroke .2s}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-score{font-family:'Playfair Display',serif;font-size:2.3rem;font-weight:700;color:var(--text);line-height:1}
.ring-total{font-size:.72rem;color:var(--muted)}
.res-pct{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:var(--text);margin-bottom:.15rem}
.res-mention{font-size:.84rem;color:var(--muted);margin-bottom:1.25rem}

.note-block{
  display:flex;align-items:baseline;justify-content:center;gap:.3rem;
  padding:.8rem 1.1rem;
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;margin-bottom:1.1rem;
}
.note-label{font-size:.63rem;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted)}
.note-value{font-family:'Playfair Display',serif;font-size:1.9rem;font-weight:700;color:var(--accent);line-height:1}
.note-denom{font-size:.8rem;color:var(--muted)}

.res-breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1.25rem}
.res-stat{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.6rem .25rem}
.res-stat-v{font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:700;color:var(--text);line-height:1}
.res-stat-l{font-size:.58rem;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.05em}

.res-btns{display:flex;flex-direction:column;gap:.5rem}
.btn-replay{background:var(--accent);color:#0f0f13;font-size:.88rem;font-weight:600;padding:.75rem;border-radius:10px;box-shadow:0 4px 16px rgba(201,169,110,.25);transition:opacity .15s,transform .15s}
.btn-replay:hover{opacity:.9;transform:translateY(-2px)}
.btn-pick{background:transparent;color:var(--muted);font-size:.84rem;padding:.75rem;border-radius:10px;border:1px solid var(--border);transition:border-color .15s,color .15s,background .15s}
.btn-pick:hover{border-color:var(--accent);color:var(--accent);background:rgba(201,169,110,.05)}

/* ══ ANIMATIONS ══════════════════════════════════ */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ══ RESPONSIVE ══════════════════════════════════ */
@media(max-width:600px){
  .site-header{padding:8px 14px}
  .home-body{padding:1.5rem 1rem 1.25rem}
  .themes-wrap{grid-template-columns:1fr}
  .chapters-body{padding:1.25rem .875rem}
  .config-body{padding:1rem}
  .config-card{padding:1.4rem 1.25rem}
  .quiz-stage{padding:1.1rem 1rem 2rem}
  .card-body{padding:1.2rem 1.1rem 1rem}
  .q-statement{font-size:.9rem}
  .timer-float{top:58px;right:.875rem;width:44px;height:44px}
  .res-breakdown{grid-template-columns:repeat(2,1fr)}
  .results-card{padding:1.5rem 1.1rem}
}

/* ══════════════════════════════════════════════════
   AJOUTS v3 : timer barre · score delta · résultats
   ══════════════════════════════════════════════════ */

/* ── TIMER barre horizontale ── */
.timer-bar-wrap{
  display:flex;align-items:center;gap:8px;
  padding:0 20px 0;height:20px;background:var(--surface);
  border-bottom:1px solid var(--border);
}
.timer-bar{
  flex:1;height:4px;border-radius:99px;
  background:var(--green);
  transition:width 1s linear,background 1s linear;
}
.timer-bar.timer-urgent{
  box-shadow:0 0 8px currentColor;
  animation:timer-pulse .5s ease infinite alternate;
}
@keyframes timer-pulse{from{opacity:1}to{opacity:.5}}
.timer-label{
  font-family:'Playfair Display',serif;
  font-size:.75rem;color:var(--muted);min-width:18px;text-align:right;
  transition:color .3s;
}

/* ── Score delta (floating +1 / ✕) ── */
.score-delta{
  font-family:'Playfair Display',serif;
  font-size:.9rem;font-weight:700;
  margin-left:auto;opacity:0;
  transition:opacity .2s,transform .4s;
}
.score-delta.show{opacity:1}
.score-delta.ok   {color:var(--green)}
.score-delta.wrong{color:var(--red)}
.score-delta.time {color:#e09a3e}

/* ── Score chip pulse ── */
.score-chip.pulse{animation:chip-pulse .3s ease}
@keyframes chip-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* ── RÉSULTATS v3 ── */
.res-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.res-emoji{font-size:2.2rem;animation:emoji-bounce .6s ease .3s both}
@keyframes emoji-bounce{0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)}}

/* Anneau plus grand */
.ring-wrap{position:relative;width:160px;height:160px;margin:0 auto .9rem}
.ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg {fill:none;stroke:var(--border);stroke-width:10}
.ring-bar{fill:none;stroke:var(--green);stroke-width:10;stroke-linecap:round;
  stroke-dasharray:402.12;stroke-dashoffset:402.12;
  transition:stroke-dashoffset 1.3s cubic-bezier(.22,1,.36,1),stroke .2s}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-score{font-family:'Playfair Display',serif;font-size:2.6rem;font-weight:700;color:var(--text);line-height:1}
.ring-total{font-size:.72rem;color:var(--muted)}

.res-pct{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:var(--text);margin-bottom:.5rem}

/* Message bloc */
.res-message-block{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:10px;padding:.85rem 1rem;margin-bottom:1rem;
  border-left:3px solid var(--green);
  transition:border-color .3s;
}
.res-mention{font-family:'Playfair Display',serif;font-size:.95rem;color:var(--text);margin-bottom:.25rem}
.res-encouragement{font-size:.78rem;color:var(--muted)}

/* Stats avec barre */
.res-breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}
.res-stat{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.6rem .4rem;text-align:center}
.res-stat.res-stat-total{border-color:var(--accent)}
.res-stat-v{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;color:var(--text);line-height:1}
.res-stat-sub{font-size:.65rem;font-weight:400;color:var(--muted)}
.res-stat-l{font-size:.58rem;color:var(--muted);margin:.2rem 0;text-transform:uppercase;letter-spacing:.05em}
.res-stat-bar{height:3px;background:var(--border);border-radius:99px;overflow:hidden;margin-top:.3rem}
.res-stat-fill{height:100%;border-radius:99px;transition:width .8s cubic-bezier(.22,1,.36,1)}

/* Erreurs */
.errors-section{margin-bottom:1rem}
.btn-toggle-errors{
  display:flex;align-items:center;gap:6px;
  width:100%;padding:.65rem .9rem;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-size:.8rem;font-weight:500;
  transition:border-color .15s,background .15s;
}
.btn-toggle-errors:hover{border-color:var(--accent);background:rgba(201,169,110,.08)}
.btn-toggle-errors svg{transition:transform .25s;flex-shrink:0}

.errors-list{margin-top:.65rem;display:flex;flex-direction:column;gap:.6rem}
.errors-list.hidden{display:none}

.error-item{
  background:var(--surface2);border:1px solid var(--border);
  border-left:3px solid var(--red);
  border-radius:8px;padding:.85rem .9rem;font-size:.78rem;
}
.err-q-num{font-size:.65rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:.3rem}
.err-statement{color:var(--text);margin-bottom:.5rem;font-size:.83rem;line-height:1.4}
.err-row{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.3rem;line-height:1.4}
.err-badge{
  flex-shrink:0;font-size:.58rem;font-weight:600;
  padding:1px 7px;border-radius:99px;text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;margin-top:1px;
}
.err-badge.wrong  {background:var(--err-bg);color:var(--red);  border:1px solid var(--err-bd)}
.err-badge.correct{background:var(--ok-bg); color:var(--green);border:1px solid var(--ok-bd)}
.err-wrong  span:last-child{color:var(--red)}
.err-correct span:last-child{color:var(--green)}
.err-expl{
  font-size:.74rem;color:var(--muted);margin-top:.4rem;
  padding-top:.4rem;border-top:1px solid var(--border);
  line-height:1.5;font-style:italic;
}

@media(max-width:600px){
  .res-breakdown{grid-template-columns:repeat(2,1fr)}
  .ring-wrap{width:130px;height:130px}
  .ring-score{font-size:2.1rem}
}

/* ── Bouton retour accueil (identique fichiers de référence) ── */
.back-btn{
  margin-left:auto;
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface2);
  color:var(--muted);font-family:'DM Sans',sans-serif;
  font-size:.72rem;cursor:pointer;text-decoration:none;
  transition:border-color .15s,color .15s;
}
.back-btn:hover{border-color:var(--accent);color:var(--accent)}