/* Accroche de fin d'essai (Karima, 30/09/2026) : peu de mots, de l'animation, un seul mot sur le bouton : « Débloquer ». */
.qd{padding:8px 0 4px}
.qd > *{animation:acc-monte .6s cubic-bezier(.2,.8,.2,1) both}
.qd > :nth-child(2){animation-delay:.08s} .qd > :nth-child(3){animation-delay:.16s} .qd > :nth-child(4){animation-delay:.24s}
.qd-kick{margin:0;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bleu)}
.qd-q{margin:8px 0 0;font-family:"Archivo",sans-serif;font-weight:800;font-size:27px;line-height:1.15;letter-spacing:-.01em;color:var(--encre)}
.qd-aide{margin:8px 0 0;color:var(--gris);font-size:16px}
.qd-choix{display:grid;gap:10px;margin-top:20px}
.qd-choix button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:16px 18px;border-radius:16px;
  border:2px solid var(--trait,#D5DAE8);background:var(--blanc,#fff);color:var(--encre);font:600 18px inherit;font-family:inherit;text-align:left;cursor:pointer;
  animation:acc-monte .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.3s + var(--i,0) * .08s);transition:border-color .2s,background .2s,transform .15s}
.qd-choix button::after{content:"";width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--trait,#D5DAE8);transition:all .2s}
.qd-choix button:active{transform:scale(.98)}
.qd-choix button.choisi{border-color:var(--bleu);background:var(--bleu-pale)}
.qd-choix button.choisi::after{border-color:var(--bleu);background:var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.qd-choix.fait button:not(.choisi){opacity:.45}
.qd-suite{margin-top:18px}
.qd-suite p{margin:0;font-family:"Archivo",sans-serif;font-weight:700;font-size:20px;line-height:1.3;color:var(--bleu);animation:acc-monte .6s both}
.qd-suite .btn{display:block;width:100%;margin-top:16px;animation:acc-monte .6s .5s both}

.accroche{position:relative;overflow:hidden;margin:22px 0 0;background:linear-gradient(160deg,#F3F5FC,#fff 40%,#FDF3F4);border:1.5px solid var(--bleu);border-radius:20px;padding:28px 20px 20px;box-shadow:0 12px 30px rgba(22,37,126,.10);text-align:center}
.accroche::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--bleu) 0 33.4%,#DDE1EC 33.4% 66.7%,var(--rouge,#C41B2B) 66.7%);transform:scaleX(0);animation:acc-barre .9s cubic-bezier(.2,.8,.2,1) .1s forwards}
@keyframes acc-barre{to{transform:none}}
.acc-phrase{margin:0;font-family:"Archivo",sans-serif;font-weight:800;font-size:24px;line-height:1.2;letter-spacing:-.01em;color:var(--encre);animation:acc-monte .7s both}
.acc-texte{margin:0;font-size:17px;line-height:1.45;color:var(--encre);animation:acc-monte .7s both}
.acc-points{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:18px auto 0;max-width:320px}
.acc-points span{width:10px;height:10px;border-radius:50%;background:#DDE1EF;animation:acc-point .35s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.2s + var(--i) * 25ms)}
.acc-points span.fait{background:var(--bleu)}
.acc-points span:not(.fait){animation:acc-point .35s cubic-bezier(.3,1.6,.5,1) both,acc-appel 2.4s ease-in-out infinite;animation-delay:calc(.2s + var(--i) * 25ms),calc(1.4s + var(--i) * 45ms)}
.acc-nombre{margin:0;display:flex;align-items:baseline;justify-content:center;gap:8px;font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:-.03em;animation:acc-monte .7s both}
.acc-nombre b{font-size:64px;line-height:1;color:var(--bleu);font-variant-numeric:tabular-nums}
.acc-nombre span{font-size:30px;color:var(--rouge,#C41B2B)}
.acc-unite{margin:4px 0 0;font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);animation:acc-monte .7s .1s both}
.acc-perso{margin:16px 0 0;font-size:16px;line-height:1.45;color:var(--gris);animation:acc-monte .6s .7s both} .acc-perso b{color:var(--encre)}
.acc-flou{display:block;color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;margin:16px 0 0;border-radius:14px;background:var(--bleu-pale);padding:14px 16px;overflow:hidden;text-align:left;animation:acc-monte .7s .5s both}
.acc-flou .qn{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bleu)}
.acc-flou .l{display:block;height:11px;border-radius:6px;background:#C9CFE6;margin-top:10px;filter:blur(2.5px)}
.acc-flou .r{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;filter:blur(2.5px)}
.acc-flou .r i{height:30px;border-radius:10px;background:#fff;border:1.5px solid #C9CFE6}
.acc-flou::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75) 50%,transparent);transform:translateX(-120%);animation:acc-lueur 2.6s 1.2s ease-in-out infinite}
.acc-cad{position:absolute;left:50%;top:50%;z-index:1;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#fff;color:var(--bleu);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(22,37,126,.18);transition:transform .25s ease}
.acc-cad::before,.acc-cad::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--bleu);opacity:0;pointer-events:none;animation:acc-halo 2.4s 1.6s ease-out infinite}
.acc-cad::after{animation-delay:2.4s}
.acc-cad svg{overflow:visible}
.acc-cad .anse{transform-origin:16px 11px;animation:acc-anse 2.4s 1.6s ease-in-out infinite}
.acc-flou:hover .acc-cad,.acc-theme:hover .acc-cad,.acc-verrou:hover .acc-cad{transform:scale(1.1)}
.ouvre .acc-cad{transform:scale(1.18)}
.ouvre .acc-cad .anse{animation:acc-ouvre .35s ease-out forwards}
.acc-cad svg{width:24px;height:24px}
.acc-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.acc-theme{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 6px 12px;border-radius:14px;background:var(--bleu-pale);color:var(--encre);text-decoration:none;overflow:hidden;
  animation:acc-monte .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.3s + var(--i) * .15s)}
.acc-theme b{font-size:13.5px;line-height:1.25;font-weight:700}
.acc-theme .acc-cad{position:relative;left:auto;top:auto;margin:0;width:40px;height:40px}
.acc-theme .acc-cad::before,.acc-theme .acc-cad .anse{animation-delay:calc(1.6s + var(--i) * .35s)}
.acc-theme .acc-cad::after{animation-delay:calc(2.4s + var(--i) * .35s)}
.acc-theme::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7) 50%,transparent);transform:translateX(-140%);animation:acc-lueur 3s ease-in-out infinite;animation-delay:calc(1.2s + var(--i) * .3s)}
.accroche .acc-go{display:block;width:100%;margin-top:20px;text-align:center;text-decoration:none;animation:acc-monte .6s 1.1s both}
/* « Débloquer » garde toujours le bleu du site, même dans un thème coloré (sinon il paraît éteint) */
.accroche .acc-go{background:#1B2A7A!important;border-color:#1B2A7A!important;color:#fff!important;position:relative;overflow:hidden}
.accroche .acc-go::before{content:"";position:absolute;left:22%;right:22%;bottom:0;height:4px;z-index:1;border-radius:99px 99px 0 0;background:linear-gradient(90deg,#2B41C4 0 33.4%,#F2F4FA 33.4% 66.7%,#E0303F 66.7%)}
.theme.acc-verrou{position:relative;text-decoration:none;color:inherit}
.theme.acc-verrou .acc-cad{position:absolute;left:auto;top:50%;right:14px;margin:-20px 0 0;width:40px;height:40px}
@keyframes acc-monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes acc-point{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes acc-appel{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes acc-lueur{0%{transform:translateX(-140%)}60%,100%{transform:translateX(260%)}}
@keyframes acc-halo{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.75)}}
@keyframes acc-anse{0%,55%,100%{transform:none}65%{transform:translateY(-3px)}72%{transform:translateY(-3px) rotate(14deg)}80%{transform:translateY(-3px)}88%{transform:none}}
@keyframes acc-ouvre{to{transform:translateY(-4px) rotate(32deg)}}
@media (prefers-reduced-motion:reduce){.qd *,.accroche *,.accroche,.acc-verrou *{animation:none!important}.accroche::before{transform:none}.acc-flou::after,.acc-theme::after,.acc-cad::before,.acc-cad::after{display:none}}