/* ═══ QUIZ « Connaissez-vous vraiment bien votre cerveau ? » ═══ */
#quiz{position:relative;scroll-margin-top:24px;margin-top:var(--large,96px)}
#quiz .avis{display:flex;gap:10px;align-items:flex-start;margin-bottom:clamp(24px,4vw,44px);
      padding:13px 16px;border-radius:12px;background:color-mix(in srgb,var(--vf-rose) 18%,transparent);
      border:1px solid color-mix(in srgb,var(--vf-rose) 44%,transparent);font-size:1rem}
#quiz .avis b{color:var(--vf-rose)}
#quiz .tete{text-align:center;margin-bottom:clamp(26px,4vw,46px)}
#quiz .kick{display:inline-block;font:700 clamp(1.15rem,.9rem + .9vw,1.6rem)/1.1 var(--font-hand);
      color:var(--vf-sable);transform:rotate(-2deg);margin-bottom:10px}
#quiz .quiz-titre{font:400 clamp(2rem,1rem + 3.6vw,4.25rem)/1.02 var(--font-display);text-transform:uppercase;
   letter-spacing:.01em;
   background-image:linear-gradient(96deg,var(--vf-sable),var(--vf-rose-clair) 46%,var(--vf-canard-clair));
   -webkit-background-clip:text;background-clip:text;color:transparent}
#quiz .quiz-titre .gros{display:block}

/* le professeur */
#quiz .scene{position:relative;height:210px;margin:clamp(8px,2vw,18px) 0 clamp(14px,2vw,24px)}
#quiz .prof{position:absolute;bottom:0;width:152px;height:137px;left:50%;margin-left:-76px;
      transition:left .9s var(--ease-out),transform .5s var(--ease-out)}
#quiz .prof__blob{fill:var(--vf-rose)}
#quiz .prof__plis{fill:none;stroke:var(--vf-nuit);stroke-width:5;stroke-linecap:round}
#quiz .prof__lun .verre{fill:color-mix(in srgb,var(--vf-lin) 62%,transparent);stroke:var(--vf-nuit);stroke-width:5}
#quiz .prof__yeux .oeil{fill:var(--vf-nuit);transition:transform .25s var(--ease-out)}
#quiz .prof__lun path{fill:none;stroke:var(--vf-nuit);stroke-width:5;stroke-linecap:round}
#quiz .prof__ombre{fill:#000;opacity:.3}
#quiz .motion .prof__corps{animation:flotte 3.1s ease-in-out infinite;transform-origin:60px 60px}
#quiz .motion .prof__ombre{animation:ombre 3.1s ease-in-out infinite;transform-origin:60px 101px}
#quiz .prof.oui{animation:oui .8s var(--ease-out)}
#quiz .prof.bof{animation:bof .8s var(--ease-out)}
#quiz .bulle{position:absolute;bottom:146px;left:50%;transform:translateX(-50%) rotate(-1.4deg);
       white-space:nowrap;background:var(--vf-lin);color:var(--vf-nuit);border-radius:16px;
       padding:11px 18px;font:700 clamp(1rem,.9rem + .5vw,1.3rem)/1.2 var(--font-hand);
       box-shadow:0 12px 34px rgba(0,0,0,.45);opacity:0;transition:opacity .45s,transform .45s var(--ease-out)}
#quiz .bulle.on{opacity:1;transform:translateX(-50%) translateY(-10px) rotate(-1.4deg)}
#quiz .bulle::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-8px;width:0;height:0;
              border:9px solid transparent;border-top-color:var(--vf-lin);border-bottom:0}

/* progression */
#quiz .puces{display:flex;gap:9px;justify-content:center;margin-bottom:clamp(18px,3vw,30px)}
#quiz .puces i{width:12px;height:12px;border-radius:999px;background:color-mix(in srgb,var(--vf-lin) 22%,transparent);
         transition:background .4s,transform .4s var(--ease-out)}
#quiz .puces i.faite{background:var(--vf-canard-clair)}
#quiz .puces i.ratee{background:var(--vf-brique-clair)}
#quiz .puces i.ici{background:var(--vf-rose);transform:scale(1.5)}

/* question */
#quiz .q{background:linear-gradient(158deg,color-mix(in srgb,var(--c) 17%,transparent),transparent 62%),
   color-mix(in srgb,var(--vf-violet-deep) 62%,var(--vf-nuit));
   border:1px solid color-mix(in srgb,var(--c) 30%,transparent);border-radius:22px;
   padding:clamp(22px,3.4vw,42px)}
#quiz .q[hidden]{display:none}
#quiz .q__n{font:700 .78rem/1 var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
#quiz .q__n span{color:color-mix(in srgb,var(--vf-lin) 52%,transparent)}
#quiz .q__t{margin:14px 0 clamp(20px,3vw,30px);
      font:650 clamp(1.45rem,1.1rem + 1.5vw,2.5rem)/1.22 var(--font-title);
      font-variation-settings:"WONK" 1,"SOFT" 60}
#quiz .reps{display:grid;gap:11px}
#quiz .rep{display:flex;align-items:center;gap:16px;width:100%;min-height:70px;cursor:pointer;text-align:left;
     padding:12px 20px;border-radius:15px;color:var(--vf-lin);font:500 clamp(1.0625rem,1rem + .35vw,1.3rem)/1.3 var(--font-text);
     background:color-mix(in srgb,var(--vf-lin) 7%,transparent);
     border:2px solid color-mix(in srgb,var(--vf-lin) 17%,transparent);
     transition:background .25s,border-color .25s,transform .25s var(--ease-out)}
#quiz .rep:hover:not(:disabled){background:color-mix(in srgb,var(--c) 20%,transparent);
                          border-color:var(--c);transform:translateX(5px)}
#quiz .rep__l{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:999px;
        font:700 1rem/1 var(--font-ui);background:color-mix(in srgb,var(--vf-lin) 13%,transparent)}
#quiz .rep:disabled{cursor:default;opacity:.55}
#quiz .rep.juste{opacity:1;background:color-mix(in srgb,var(--vf-canard-clair) 30%,transparent);
           border-color:var(--vf-canard-clair)}
#quiz .rep.juste .rep__l{background:var(--vf-canard-clair);color:var(--vf-nuit)}
#quiz .rep.faux{opacity:1;background:color-mix(in srgb,var(--vf-brique-clair) 26%,transparent);
          border-color:var(--vf-brique-clair)}
#quiz .rep.faux .rep__l{background:var(--vf-brique-clair);color:var(--vf-nuit)}
#quiz .sol{margin-top:clamp(20px,3vw,30px);padding-top:clamp(18px,2.6vw,26px);
     border-top:1px solid color-mix(in srgb,var(--vf-lin) 16%,transparent)}
#quiz .sol[hidden]{display:none}
#quiz .sol__v{font:700 clamp(1.15rem,1rem + .7vw,1.6rem)/1.2 var(--font-hand);margin-bottom:10px}
#quiz .sol__v.ok{color:var(--vf-canard-clair)}
#quiz .sol__v.ko{color:var(--vf-brique-clair)}
#quiz .sol__e{max-width:66ch;color:color-mix(in srgb,var(--vf-lin) 92%,transparent)}
#quiz .sol__e b{color:var(--c)}
#quiz .nuance{display:block;margin-top:10px;font-size:.95rem;color:color-mix(in srgb,var(--vf-lin) 70%,transparent)}
#quiz .sol__s{margin-top:12px;font:400 .875rem/1.45 var(--font-ui);
        color:color-mix(in srgb,var(--vf-lin) 58%,transparent)}
#quiz .suite{margin-top:22px;cursor:pointer;min-height:62px;padding:0 30px;border:0;border-radius:999px;
       background:var(--vf-rose);color:var(--vf-nuit);font:700 clamp(1.05rem,1rem + .3vw,1.25rem)/1 var(--font-ui);
       transition:transform .25s var(--ease-out)}
#quiz .suite:hover{transform:translateY(-2px) scale(1.02)}

/* fin */
#quiz .fin[hidden]{display:none}
#quiz .fin{text-align:center;background:linear-gradient(136deg,var(--vf-rose-clair),var(--vf-sable));
     color:var(--vf-nuit);border-radius:24px;padding:clamp(28px,5vw,58px)}
#quiz .fin__s{font:400 clamp(3rem,2rem + 5vw,7rem)/1 var(--font-display)}
#quiz .fin__s em{font-style:normal;font-size:.42em;opacity:.6}
#quiz .fin__t{margin:8px 0 12px;font:650 clamp(1.5rem,1.2rem + 1.6vw,2.6rem)/1.15 var(--font-title);
        font-variation-settings:"WONK" 1,"SOFT" 60}
#quiz .fin__p{max-width:52ch;margin:0 auto}
#quiz .fin__b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
#quiz .fin__b a, #quiz .fin__b button{cursor:pointer;min-height:62px;display:inline-flex;align-items:center;
   padding:0 28px;border-radius:999px;text-decoration:none;font:700 1.0625rem/1 var(--font-ui);border:2px solid var(--vf-nuit)}
#quiz .fin__b .plein{background:var(--vf-nuit);color:var(--vf-sable)}
#quiz .fin__b .vide{color:var(--vf-nuit);background:transparent}
#quiz .scene{height:172px}
#quiz .bulle{white-space:normal;max-width:82vw;text-align:center}
}
@keyframes flotte{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-11px) rotate(1.5deg)}}
@keyframes ombre{0%,100%{transform:scaleX(1);opacity:.3}50%{transform:scaleX(.82);opacity:.18}}
@keyframes oui{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) translateY(-8px)}60%{transform:rotate(9deg)}}
@keyframes bof{0%,100%{transform:rotate(0)}30%{transform:rotate(14deg)}65%{transform:rotate(-8deg)}}
@media (max-width:620px){
  .prof{width:112px;height:101px;margin-left:-56px}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}