/**
 * Le monogramme et son animation — partagés par les quatre points d'entrée.
 *
 * ⚠️ **Extrait de `styles.css` pour la page d'ouverture.** Celle-ci n'a aucune
 * raison de télécharger 196 Ko de feuille de style — 47 en gzip — pour trente
 * lignes d'animation ; et recopier ces trente lignes aurait fait deux versions
 * du même geste, dont une qu'on ne relit jamais. Un fichier, quatre pages.
 *
 * ⚠️ **Les teintes du sprite sont ici aussi** : elles remplacent des attributs
 * `style=`, interdits par la CSP. `--mv` reste l'override par usage, posé par
 * les classes `.mv-*` qui, elles, restent dans `styles.css` — elles ne peignent
 * pas, elles déclarent.
 */
/* Animation logo */
.lg-flame{animation:var(--a-flame,none);transform-box:view-box;transform-origin:50% 50%}
.lg-ring{animation:var(--a-ring,none);transform-box:view-box;transform-origin:50% 50%}
.lg-pet.lg-l{animation:var(--a-pet-l,none);transform-box:view-box;transform-origin:50% 50%}
.lg-pet.lg-r{animation:var(--a-pet-r,none);transform-box:view-box;transform-origin:50% 50%}
.lg-leaf{animation:var(--a-leaf,none);transform-box:fill-box;transform-origin:center}
.lg-arc{animation:var(--a-arc,none)}
/* Teintes du sprite du monogramme. Elles remplacent des attributs style=,
   interdits par la CSP. `--mv` reste l'override par usage : la sémantique est
   strictement identique. Ne pas confondre avec .mv-* plus bas, qui posent
   --mv au lieu de peindre. */
.lg-brun{fill:var(--mv,#b88058)}
.lg-rose{fill:var(--mv,#dbaea1)}
.lg-vert{fill:var(--mv,#a2a38b)}
.lg-degrade{fill:var(--mv,url(#mv-grad))}
/* Le séparateur des disciplines — « Yoga · Pilates · Danse » —, sur l'accueil
   et sur la page d'ouverture (Delphine, 28 septembre 2026). Le monogramme
   remplace le point médian ; `--mv` repeint les six couleurs du sprite d'un
   coup. Ici, dans `logo.css`, parce que c'est la seule feuille que les deux
   pages partagent — l'écrire deux fois serait deux tailles à tenir d'accord.
   ⚠️ **Il prend la couleur de SON TEXTE, `currentColor`**, pas une couleur à
   lui (Delphine, même jour) : il était terracotta, et l'est resté quand les
   disciplines sont passées à l'encre pleine pour être lisibles — deux couleurs
   sur une ligne qui n'en demandait qu'une. Une valeur recopiée ici aurait
   divergé à la prochaine correction du texte ; `currentColor` la suit, sur les
   deux pages, quelle que soit la couleur que chacune donne à ses disciplines.
   ⚠️ Il ne s'anime pas : les animations du sprite sont posées sur `.hero-logo`
   et la marque de l'en-tête seulement, par leurs variables `--a-*`. */
.disc-sep{--mv:currentColor;width:18px;height:18px;flex:none}
@media (prefers-reduced-motion: no-preference){
  /* `--lgT` est local au monogramme : posé sur les deux seuls éléments qui
     l'animent, et non sur `:root` — les jetons globaux vivent dans tokens.css. */
  .hero-logo, header .brand svg{
    --lgT:30s;
    --a-flame:lgFlame var(--lgT) ease-in-out infinite; --a-ring:lgRing var(--lgT) ease-in-out infinite;
    --a-pet-l:lgPetL var(--lgT) ease-in-out infinite; --a-pet-r:lgPetR var(--lgT) ease-in-out infinite;
    --a-leaf:lgLeaf var(--lgT) cubic-bezier(.4,1.2,.5,1) infinite; --a-arc:lgArc var(--lgT) ease-in-out infinite;
  }
  /* ⚠️ `backwards` n'est pas un ornement : sans lui, la première image ne
     s'applique qu'à 2,4 s. Pendant le délai l'élément est à `transform:none`,
     soit scale(1), et le battement démarre sur scale(.97) — un rétrécissement
     instantané de 3 %, six pixels sur un monogramme de 210, exactement le
     « léger zoom arrière brut » signalé. Le remplissage arrière pose la
     première image dès le chargement : la fleur se dessine déjà à sa taille
     de départ, et le battement s'enchaîne sans marche. */
  .hero-logo{animation:lgBreathe 6s 2.4s ease-in-out infinite backwards}
}
@keyframes lgFlame{0%{opacity:0;transform:scale(.4,.05)}2%{opacity:1}3.2%{transform:none}95%{opacity:1;transform:none}98.5%,100%{opacity:0;transform:scale(.4,.05)}}
@keyframes lgRing{0%,1.5%{opacity:0;transform:translateY(-5%)}4.4%{opacity:1;transform:none}94%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-5%)}}
@keyframes lgPetL{0%,1.2%{opacity:0;transform:rotate(-22deg) scale(.55)}5%{opacity:1;transform:none}93.5%{opacity:1;transform:none}97%,100%{opacity:0;transform:rotate(-22deg) scale(.55)}}
@keyframes lgPetR{0%,1.2%{opacity:0;transform:rotate(22deg) scale(.55)}5%{opacity:1;transform:none}93.5%{opacity:1;transform:none}97%,100%{opacity:0;transform:rotate(22deg) scale(.55)}}
@keyframes lgLeaf{0%,3.2%{opacity:0;transform:scale(0)}5.8%{opacity:1;transform:none}93%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(0)}}
@keyframes lgArc{0%,3.6%{opacity:0}7%{opacity:1}92%{opacity:1}95%,100%{opacity:0}}
@keyframes lgBreathe{0%,100%{transform:scale(.97)}50%{transform:scale(1.07)}}