/* Finition premium : mouvement doux, profondeur et score en anneau. Aucune structure de page ne change.
   Tous les effets de mouvement disparaissent si le système demande de réduire les animations. */
:root{--aegis-ease:cubic-bezier(.22,1,.36,1)}
.hub-start{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 22px;margin-top:24px;padding:16px 18px;border:1px solid #d8b56855;border-radius:14px;background:linear-gradient(135deg,#d8b5681c,#d8b56808)}
.hub-start-intro{display:flex;align-items:center;gap:14px;min-width:0}
.hub-start-intro .atlas{width:auto;height:88px;flex:none}
.hub-start-text{display:grid;gap:3px;min-width:0}
.hub-start-text strong{font-size:16px;color:#fff}
.hub-start-text span{font-size:12px;color:var(--muted)}
.hub-start-actions{display:flex;flex-wrap:wrap;gap:10px}
.hub-start-level{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid var(--gold);border-radius:10px;font-weight:700;font-size:14px;color:var(--gold);text-decoration:none;transition:background-color .16s ease,color .16s ease}
.hub-start-level:hover,.hub-start-level:focus-visible{background:var(--gold);color:#1b1913}
.hub-start-level span{display:inline-block}
@media (max-width:560px){.hub-start-intro .atlas{height:72px}.hub-start{padding:14px}.hub-start-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.hub-start-level{justify-content:space-between}}
/* Profondeur : titres équilibrés, barre de progression lumineuse, anneau de score. */
.heading h1,.result h2{text-wrap:balance}
.bar i{background:linear-gradient(90deg,#b8923f,var(--gold));box-shadow:0 0 12px #d8b56866}
.result-score{position:relative;isolation:isolate;display:grid;place-items:center;width:200px;height:200px;margin:22px auto;border-radius:50%;font-size:54px;background:conic-gradient(var(--gold) calc(var(--p,0)*1%),#2b2e30 0);filter:drop-shadow(0 0 18px #d8b56833)}
.result-score.long{font-size:36px}
.result-score::before{content:'';position:absolute;inset:9px;z-index:-1;border-radius:50%;background:#181c1e}
.hub-formation::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),#d8b5681f,transparent 60%);transition:opacity .25s ease}
.hub-formation:hover::after{opacity:1}
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#ffffff40 50%,transparent 70%);transform:translateX(-130%)}
@media (prefers-reduced-motion:no-preference){
 .answer{transition:border-color .16s ease,background-color .16s ease,transform .18s var(--aegis-ease)}
 .answer:hover:not(:disabled){transform:translateX(4px);border-color:#d8b56877}
 .answer:active:not(:disabled){transform:scale(.985)}
 .answer.correct{animation:aegis-correct .6s ease-out}
 .answer.wrong{animation:aegis-wrong .4s ease-out}
 .correction{animation:aegis-rise .4s var(--aegis-ease)}
 #quiz[open]{animation:aegis-pop .28s var(--aegis-ease)}
 .result{animation:aegis-rise .5s var(--aegis-ease)}
 .bar i{transition:width .5s var(--aegis-ease)}
 .btn-gold{transition:transform .18s var(--aegis-ease),box-shadow .25s ease}
 .btn-gold:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 26px #d8b56838}
 .btn-gold:active:not(:disabled){transform:scale(.98)}
 .btn-gold:hover:not(:disabled)::after{transform:translateX(130%);transition:transform .7s ease}
 .hub-formation{transition:border-color .16s ease,transform .3s var(--aegis-ease),box-shadow .3s ease}
 .hub-formation:hover{transform:translateY(-4px);box-shadow:0 18px 38px #00000050}
 .hub-primary span,.hub-start-level span{transition:transform .2s ease}
 .hub-primary:hover span,.hub-start-level:hover span{transform:translateX(4px)}
 /* Changement de page : le contenu arrive en douceur, une seule fois par navigation. */
 #app.aegis-entering>*{animation:aegis-rise .5s var(--aegis-ease) backwards}
 #app.aegis-entering>*:nth-child(2){animation-delay:.05s}
 #app.aegis-entering>*:nth-child(3){animation-delay:.1s}
 #app.aegis-entering>*:nth-child(n+4){animation-delay:.15s}
 /* Apparition au défilement, là où le navigateur sait le faire sans script. Sans effet une fois l’élément affiché. */
 @supports (animation-timeline:view()){
  #app .hub-formation,#app .hub-method,#app .hub-faq,#app .learn-definition{animation:aegis-reveal linear backwards;animation-timeline:view();animation-range:entry 0% entry 40%}
 }
}
@keyframes aegis-correct{0%{box-shadow:0 0 0 0 #8bbb9c70;transform:scale(1)}35%{transform:scale(1.014)}100%{box-shadow:0 0 0 12px #8bbb9c00;transform:scale(1)}}
@keyframes aegis-wrong{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}60%{transform:translateX(4px)}}
@keyframes aegis-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes aegis-reveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes aegis-pop{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* Atlas : un peu plus présent sur la page Missions, et un mot d’encouragement à l’écran de résultat. */
@media (min-width:900px){.guardian-scene{width:48%;max-width:270px}.atlas-note .atlas{width:auto;height:180px}}
.atlas-note .atlas{width:auto;height:150px;margin-bottom:14px}
.result-atlas{display:flex;align-items:center;gap:14px;max-width:440px;margin:0 auto 16px;padding:12px 16px;border:1px solid #d8b56833;border-radius:14px;background:linear-gradient(135deg,#d8b5680f,transparent);text-align:left}
.result-atlas .atlas{width:auto;height:84px;flex:none}
.result-atlas p{margin:0;font-size:13px;line-height:1.55;color:#cfd5de}
.result-atlas strong{display:block;margin-bottom:2px;font-size:10px;font-weight:800;letter-spacing:2px;color:#f4cb72}
@media (prefers-reduced-motion:no-preference){
 .atlas-halo{animation:atlas-halo 5s ease-in-out infinite}
 .atlas-ear-l{transform-origin:66px 90px;animation:atlas-ear 7s ease-in-out infinite}
 .atlas-ear-r{transform-origin:154px 90px;animation:atlas-ear 7s ease-in-out 3.2s infinite}
 .result-atlas{animation:aegis-rise .6s var(--aegis-ease) .35s backwards}
}
@keyframes atlas-halo{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes atlas-ear{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-5deg)}94%{transform:rotate(2deg)}}

/* Atlas en illustration : ombre douce, et le renard montre l’exercice depuis les cartes de la page Missions. */
.atlas-photo{display:block;max-width:100%;filter:drop-shadow(0 8px 14px #00000066)}
.atlas-note .atlas-photo,.guardian-scene .atlas-photo{margin-inline:auto;transform:scaleX(-1)}
@media (prefers-reduced-motion:no-preference){.atlas-photo{animation:atlas-bob 4.6s ease-in-out infinite}.hub-start-intro .atlas-photo{animation-duration:5.2s}}
@keyframes atlas-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}