/* Magic School : « la leçon du soir ». Ciel de nuit étoilé, pupitre où trois cartes de mémoire
   se retournent tour à tour (chapeau, potion, grimoire : dessins originaux), baguette qui scintille. Rien sur la boîte. */
.sm--magic-school {
  --sm-fond: #232043; --sm-fond-2: #edf0fa; --sm-encre: #232043; --sm-doux: #4b4870;
  --sm-accent: #8f4c0c; --sm-accent-fonce: #6a3707; --sm-carte: #fff;
  --sm-police: "Fraunces", var(--titre);
  --ms-or: #f2c35b;
}
.sm--magic-school .sm-ouverture { background: radial-gradient(ellipse at 70% 10%, #3a3570 0, #232043 60%, #191733); color: #eef0fb; }
.sm--magic-school .sm-ouverture h1 { color: #fff; font-weight: 600; }
.sm--magic-school .sm-sur { color: var(--ms-or); }
.sm--magic-school .sm-accroche { color: #d6d8f0; font-style: italic; }
.sm--magic-school .fil-ariane, .sm--magic-school .fil-ariane a { color: #c9cbe8; }
.sm--magic-school .sm-boite img { filter: drop-shadow(0 24px 26px rgba(0, 0, 0, 0.6)); }

.ms-etoile { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; }
.ms-etoile--1 { top: 12%; left: 6%; } .ms-etoile--2 { top: 22%; left: 30%; } .ms-etoile--3 { top: 8%; left: 48%; }
.ms-etoile--4 { top: 30%; left: 4%; } .ms-etoile--5 { top: 18%; left: 92%; } .ms-etoile--6 { top: 3%; left: 55%; }
.ms-etoile--7 { top: 6%; left: 72%; } .ms-etoile--8 { top: 58%; left: 2%; } .ms-etoile--9 { top: 52%; left: 96%; }
.ms-etoile--10 { top: 10%; left: 95%; } .ms-etoile--11 { top: 14%; left: 18%; } .ms-etoile--12 { top: 70%; left: 6%; }
.ms-etoile--13 { top: 4%; left: 34%; } .ms-etoile--14 { top: 2%; left: 62%; }

.ms-pupitre { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 5vw, 4rem); background: linear-gradient(#5b3a22, #45291a); border-top: 0.5rem solid #7a5032; }
.ms-cartes { display: flex; gap: clamp(0.5rem, 2vw, 1.2rem); height: 76%; perspective: 600px; }
.ms-carte { position: relative; height: 100%; aspect-ratio: 5 / 7; transform-style: preserve-3d; }
.ms-carte__dos, .ms-carte__face { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; display: grid; place-items: center; }
.ms-carte__dos { background: radial-gradient(circle, var(--ms-or) 0 2px, transparent 3px) 0 0 / 14px 14px, #3a3570; border: 3px solid var(--ms-or); }
.ms-carte__face { background: #fdf8ec; border: 3px solid var(--ms-or); rotate: y 180deg; }
.ms-carte__face svg { width: 70%; height: auto; }
.ms-trait { fill: none; stroke: #3a3570; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ms-trait--or { stroke: #c08a1c; }
.ms-baguette { height: 60%; width: auto; }
.ms-baguette__bois { stroke: #2a170c; stroke-width: 6; stroke-linecap: round; }
.ms-baguette__bout { stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.ms-paillette { fill: var(--ms-or); }

@media (prefers-reduced-motion: no-preference) {
  .ms-etoile { animation: ms-scintille 3s ease-in-out infinite; }
  .ms-etoile:nth-child(3n) { animation-delay: -1s; } .ms-etoile:nth-child(3n+1) { animation-delay: -2s; }
  @keyframes ms-scintille { 50% { opacity: 0.25; } }
  .ms-carte { animation: ms-retourne 9s ease-in-out infinite; }
  .ms-carte--2 { animation-delay: 1.2s; } .ms-carte--3 { animation-delay: 2.4s; }
  @keyframes ms-retourne { 0%, 12% { rotate: y 0deg; } 20%, 55% { rotate: y 180deg; } 63%, 100% { rotate: y 360deg; } }
  .ms-paillette { animation: ms-paillette 2s ease-out infinite; }
  .ms-paillette--2 { animation-delay: 0.6s; } .ms-paillette--3 { animation-delay: 1.2s; }
  @keyframes ms-paillette { 0% { opacity: 0; translate: -8px 4px; } 30% { opacity: 1; } 100% { opacity: 0; translate: 8px -8px; } }
}