/* =========================================================
   Mathémagique · effets magiques (Prof. Belbacha)
   Fichier indépendant : le retirer d'une page suffit à couper les effets.
   Respecte le réglage « réduire les animations » du téléphone.
   ========================================================= */

/* 1. Le mot « magique » scintille (titre de chaque page) */
.mm-shine{background:linear-gradient(100deg,#0B4F9C 0%,#0B4F9C 38%,#E8772E 46%,#F6C453 50%,#E8772E 54%,#0B4F9C 62%,#0B4F9C 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#0B4F9C;
  animation:mm-shine 5.5s ease-in-out infinite;position:relative}
@keyframes mm-shine{0%,15%{background-position:100% 0}55%,100%{background-position:0 0}}
@media (prefers-color-scheme:dark){.mm-shine{background-image:linear-gradient(100deg,#7DB2F5 0%,#7DB2F5 38%,#F29A5C 46%,#FFE08A 50%,#F29A5C 54%,#7DB2F5 62%,#7DB2F5 100%)}}

/* petites étoiles qui scintillent autour du mot */
.mm-star{position:absolute;pointer-events:none;color:#F6C453;font-style:normal;line-height:1;-webkit-text-fill-color:#F6C453;
  text-shadow:0 0 8px rgba(246,196,83,.9);opacity:0;animation:mm-twinkle 2.8s ease-in-out infinite}
@keyframes mm-twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}45%,55%{opacity:1;transform:scale(1) rotate(25deg)}}

/* 2. Symboles mathématiques qui flottent derrière le haut de page */
.mm-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.mm-sym{position:absolute;bottom:-60px;font:400 28px/1 "Times New Roman",Georgia,serif;font-style:italic;color:#0B4F9C;opacity:0;
  animation:mm-float linear infinite;will-change:transform,opacity}
@keyframes mm-float{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:var(--o,.13)}85%{opacity:var(--o,.13)}100%{transform:translateY(calc(-1 * var(--h,520px))) rotate(var(--r,20deg));opacity:0}}
.mm-host{position:relative}
.mm-host>*:not(.mm-sky){position:relative;z-index:1}

/* 3. Apparition en douceur des cartes au défilement */
.mm-reveal{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.mm-reveal.mm-in{opacity:1;transform:none}

/* 4. Le logo s'illumine */
.mm-glow{animation:mm-glow 4.5s ease-in-out infinite}
@keyframes mm-glow{0%,100%{filter:var(--logofilter,none) drop-shadow(0 0 0 rgba(232,119,46,0))}50%{filter:var(--logofilter,none) drop-shadow(0 0 14px rgba(232,119,46,.55))}}

/* 5. Couche des étincelles (clic, toucher, célébrations) */
#mm-fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}

/* 6. Petit rebond magique sur les boutons et cartes */
a.card,.feat,.btn,.sujet{transition:transform .18s ease,box-shadow .18s ease}
a.card:active,.feat:active,.btn:active,.sujet:active{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  .mm-shine,.mm-star,.mm-sym,.mm-glow{animation:none!important}
  .mm-star,.mm-sky{display:none}
  .mm-reveal{opacity:1;transform:none;transition:none}
}