/* ==========================================================================
   Tous pour Mila — "Mode magique" (couche d'animations enfantines)
   Tout est préfixé par html.magique : sans le mode, le site reste identique.
   ========================================================================== */

/* ---------- Bouton (toujours visible, sauf si le visiteur préfère réduire les animations) ---------- */
.mg-bouton{position:fixed; right:18px; bottom:18px; z-index:60; display:flex; align-items:center; gap:8px;
  background:var(--paper); color:var(--navy); border:2px solid var(--navy); border-radius:30px; padding:10px 16px 10px 12px;
  font-weight:800; font-size:14px; box-shadow:0 10px 24px -10px rgba(44,58,71,.45); transition:transform .2s, background .2s, color .2s;}
.mg-bouton:hover{transform:translateY(-2px) rotate(-2deg);}
.mg-bouton-icone{font-size:18px; display:inline-block;}
.mg-bouton[aria-pressed="true"]{background:linear-gradient(135deg, var(--coral), var(--gold)); color:white; border-color:transparent;}
.mg-bouton[aria-pressed="true"] .mg-bouton-icone{animation:mg-tourne 2.5s linear infinite;}
@media(max-width:600px){
  .mg-bouton{padding:12px; right:14px; bottom:14px;}
  .mg-bouton-texte{display:none;}
}
@keyframes mg-tourne{to{transform:rotate(360deg);}}

/* ---------- Ciel animé (derrière tout le site) ---------- */
.mg-ciel{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:linear-gradient(180deg, #E4F1F7 0%, #FBF3EC 55%);}
.mg-soleil{position:absolute; right:6%; top:90px; width:110px; animation:mg-flotte 6s ease-in-out infinite;}
.mg-soleil svg{display:block; width:100%;}
.mg-rayons{transform-origin:50px 50px; animation:mg-tourne 18s linear infinite;}
.mg-nuage{position:absolute; left:0; opacity:.9; animation:mg-nuage linear infinite; filter:drop-shadow(0 6px 10px rgba(44,58,71,.06));}
.mg-nuage svg{display:block; width:100%;}
@keyframes mg-nuage{from{transform:translateX(-200px);} to{transform:translateX(110vw);}}
.mg-ballon{position:absolute; bottom:-40px; opacity:.55; animation:mg-ballon linear infinite;}
.mg-ballon svg{display:block; width:100%; animation:mg-balance 2.2s ease-in-out infinite alternate;}
@keyframes mg-ballon{from{transform:translateY(0);} to{transform:translateY(-115vh);}}
@keyframes mg-balance{from{transform:translateX(-10px) rotate(-10deg);} to{transform:translateX(10px) rotate(10deg);}}
@keyframes mg-flotte{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
@media(max-width:860px){ .mg-soleil{width:70px; top:76px; right:4%;} }

/* Le haut des pages laisse voir le ciel */
html.magique body{background:transparent;}
html.magique{background:#FBF3EC;}

/* ---------- Cœurou, la mascotte ---------- */
.mg-mascotte{position:fixed; left:14px; bottom:10px; z-index:55; width:86px; cursor:pointer; animation:mg-arrive .9s cubic-bezier(.34,1.56,.64,1) both;}
.mg-mascotte:focus-visible{outline:3px solid var(--coral); outline-offset:4px; border-radius:12px;}
.mg-coeurou{display:block; width:100%; overflow:visible; animation:mg-sautille 1.6s ease-in-out infinite;}
.mg-bras-d{transform-origin:108px 58px; animation:mg-coucou 1.2s ease-in-out infinite alternate;}
.mg-bras-g{transform-origin:12px 62px; animation:mg-bras 1.6s ease-in-out infinite alternate;}
.mg-yeux{transform-origin:60px 50px; animation:mg-cligne 4s infinite;}
.mg-mascotte.mg-saute .mg-coeurou{animation:mg-saut .7s cubic-bezier(.34,1.56,.64,1);}
.mg-bulle{position:absolute; left:58px; bottom:100%; margin-bottom:-6px; background:white; color:var(--navy); font-family:'Gloria Hallelujah', 'Karla', cursive;
  font-size:14px; line-height:1.25; padding:8px 12px; border-radius:16px 16px 16px 4px; white-space:nowrap; box-shadow:0 8px 18px -8px rgba(44,58,71,.4);
  opacity:0; transform:scale(.6) translateY(8px); transform-origin:bottom left; pointer-events:none;}
.mg-bulle.mg-visible{animation:mg-bulle 4s ease forwards;}
@keyframes mg-arrive{from{transform:translateY(140%);} to{transform:translateY(0);}}
@keyframes mg-sautille{0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-6px) rotate(2deg);}}
@keyframes mg-coucou{from{transform:rotate(-14deg);} to{transform:rotate(18deg);}}
@keyframes mg-bras{from{transform:rotate(6deg);} to{transform:rotate(-8deg);}}
@keyframes mg-cligne{0%,92%,100%{transform:scaleY(1);} 95%{transform:scaleY(.1);}}
@keyframes mg-saut{0%{transform:translateY(0) scale(1);} 40%{transform:translateY(-40px) scale(1.12) rotate(-8deg);} 100%{transform:translateY(0) scale(1);}}
@keyframes mg-bulle{0%{opacity:0; transform:scale(.6) translateY(8px);} 10%,80%{opacity:1; transform:scale(1) translateY(0);} 100%{opacity:0; transform:scale(.9) translateY(-4px);}}
@media(max-width:600px){ .mg-mascotte{width:64px; left:10px;} .mg-bulle{left:44px; font-size:13px;} }

/* ---------- Pluie de cœurs et traînée de souris ---------- */
.mg-eclat{position:fixed; z-index:70; pointer-events:none; margin:-8px 0 0 -8px; animation:mg-eclat 1.1s cubic-bezier(.2,.8,.3,1) forwards;}
.mg-eclat svg, .mg-trainee svg{display:block; width:100%; height:100%;}
@keyframes mg-eclat{0%{transform:translate(0,0) scale(.3); opacity:1;} 70%{opacity:1;} 100%{transform:translate(var(--dx), calc(var(--dy) + 60px)) scale(1) rotate(25deg); opacity:0;}}
.mg-trainee{position:fixed; z-index:70; width:12px; height:12px; margin:-6px 0 0 -6px; pointer-events:none; animation:mg-trainee .9s ease-out forwards;}
@keyframes mg-trainee{from{transform:scale(1); opacity:.9;} to{transform:translateY(-26px) scale(.3); opacity:0;}}

/* ---------- Apparitions "autocollant" au défilement ---------- */
html.magique .mg-apparait{opacity:0; transform:translateY(34px) scale(.92) rotate(-1.5deg);}
html.magique .mg-apparait.mg-vu{animation:mg-colle .75s cubic-bezier(.34,1.56,.64,1) var(--mg-delai, 0s) forwards;}
@keyframes mg-colle{to{opacity:1; transform:none;}}

/* ---------- Titres mot par mot ---------- */
html.magique .mg-mot{display:inline-block; opacity:0; animation:mg-mot .6s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes mg-mot{from{opacity:0; transform:translateY(24px) rotate(-6deg) scale(.8);} to{opacity:1; transform:none;}}

/* ---------- Petits plus ---------- */
html.magique .hero h1 em{display:inline-block; animation:mg-danse 2.4s ease-in-out infinite;}
@keyframes mg-danse{0%,100%{transform:rotate(-3deg);} 50%{transform:rotate(3deg) translateY(-3px);}}
html.magique .photo-block{animation:mg-flotte 5s ease-in-out infinite;}
html.magique .card, html.magique .actu-card{transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;}
html.magique .card:hover, html.magique .actu-card:hover{transform:translateY(-8px) rotate(-1.5deg) scale(1.02); box-shadow:0 24px 40px -18px rgba(44,58,71,.4);}
html.magique .card .icon{animation:mg-flotte 3s ease-in-out infinite;}
html.magique .card:nth-child(2) .icon{animation-delay:-1s;}
html.magique .card:nth-child(3) .icon{animation-delay:-2s;}
html.magique .btn-primary:hover, html.magique .btn-don:hover{animation:mg-gigote .45s ease-in-out;}
@keyframes mg-gigote{0%,100%{transform:rotate(0);} 25%{transform:rotate(-4deg) scale(1.05);} 75%{transform:rotate(4deg) scale(1.05);}}

/* ---------- « À chaque pas de son chemin » : le petit bonhomme de la timeline (page Histoire) ---------- */
.mg-marcheur{position:absolute; left:-18px; top:0; width:56px; z-index:4; pointer-events:none; will-change:transform;}
.mg-perso{display:none; width:100%; overflow:visible; filter:drop-shadow(0 4px 4px rgba(44,58,71,.18));}
.mg-perso.mg-actif{display:block; animation:mg-change-mode .5s cubic-bezier(.34,1.56,.64,1);}
.mg-larme{animation:mg-larme 2.4s ease-in infinite;}
@keyframes mg-larme{0%,30%{transform:translateY(0); opacity:0;} 45%{opacity:1;} 100%{transform:translateY(7px); opacity:0;}}
.mg-ballon-main{transform-origin:45px 26px; animation:mg-ballon-flotte 2.2s ease-in-out infinite alternate;}
@keyframes mg-ballon-flotte{from{transform:rotate(-6deg);} to{transform:rotate(6deg);}}
.mg-boite{transform-origin:47px 48px; animation:mg-boite 1.8s ease-in-out infinite alternate;}
@keyframes mg-boite{from{transform:rotate(-4deg);} to{transform:rotate(4deg);}}
@keyframes mg-change-mode{from{transform:scale(.4) rotate(-20deg); opacity:0;} to{transform:none; opacity:1;}}
.mg-jambe-g{transform-origin:26px 50px;} .mg-jambe-d{transform-origin:34px 50px;}
.mg-en-route .mg-jambe-g{animation:mg-pas .35s ease-in-out infinite alternate;}
.mg-en-route .mg-jambe-d{animation:mg-pas .35s ease-in-out infinite alternate-reverse;}
.mg-en-route .mg-perso{animation:mg-trottine .35s ease-in-out infinite alternate;}
.mg-en-route .mg-roue{animation:mg-tourne .6s linear infinite;}
.mg-marcheur:not(.mg-en-route) .mg-coucou-bras{transform-origin:38px 36px; animation:mg-coucou .7s ease-in-out infinite alternate;}
.mg-perso-poussette .mg-coucou-bras{transform-origin:35px 34px;}
@keyframes mg-pas{from{transform:rotate(-18deg);} to{transform:rotate(18deg);}}
@keyframes mg-trottine{from{transform:translateY(0);} to{transform:translateY(-3px);}}
@media(max-width:600px){
  .mg-marcheur{width:46px; left:-13px;}
}

/* Laisser un peu d'espace en bas pour la mascotte et le bouton */
html.magique footer{padding-bottom:110px;}