/* =====================================================================================
   MOTION ET FINITION - L'ENTREE DANS LE JEU ET LE CADRE (30/09/2026)
   Ecrans : connexion / creation de compte / accueil sobre, ecran-titre (menu principal,
   emplacements), parcours de nouvelle carriere (president, bienvenue, pays, dossiers,
   fondation du club), fenetre des nouveautes, etats « Un instant... / Chargement... ».
   Cadre : barre laterale (.side, .nav-item, sous-menus), menu mobile, telephone (#wp-*).

   Regles :
   - la police a empattements (Cormorant Garamond) seulement sur le GRAND titre d'un
     ecran : .ts-h2 de l'ecran-titre et le h1 de l'accueil. Nulle part ailleurs.
   - on n'anime que transform / translate / scale / opacity ; les lueurs sont des
     calques fixes dont on ne fait varier que l'opacite et la position.
   - rien en boucle dans le cadre (menu, telephone) : survol et ouverture seulement.
   - tout mouvement vit sous prefers-reduced-motion: no-preference ET body:not(.anim-off).
   - la barre du haut n'est pas touchee (fond teinte par menu) : un leger relief au
     survol des pastilles, sans fond.
   - vie privee, Ballon d'Or, dilemmes, promo, match, mascotte : jamais touches.
   ===================================================================================== */

/* ---------------------------------------------------------------------------------
   1. ECRAN-TITRE : decor, panneau, titres
   --------------------------------------------------------------------------------- */

/* Le contenu trop haut pour l'ecran (creation de compte sur un petit telephone) etait
   coupe : l'ecran-titre ne defilait pas. Il defile maintenant, et le panneau reste
   centre tant qu'il tient (marges automatiques). Le decor reste en place. */
#titlescreen{overflow-y:auto;align-items:flex-start}
#titlescreen .ts-decor{position:fixed;inset:0}
#titlescreen .ts-inner{margin-block:auto}
#titlescreen:not(:has(.acs)){padding-block:20px}

/* Une lueur doree tres lente derriere le panneau, et une trame fine. */
#titlescreen .ts-decor::before{content:'';position:absolute;z-index:1;left:50%;top:44%;
  width:80vmax;height:80vmax;margin:-40vmax 0 0 -40vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#f4c04a26 0%,#f4c04a0d 30%,transparent 62%);opacity:.8}
#titlescreen .ts-inner:not(:has(>.acs,>.acp))::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(135deg,#ffffff06 0 1px,transparent 1px 13px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%)}

/* Le panneau : sombre et presque opaque (les cartes translucides se lisaient mal au-dessus
   du rond central du decor), une arete doree en haut, une ombre profonde. */
#titlescreen .ts-inner:not(:has(>.acs,>.acp)){
  background:
    radial-gradient(120% 70% at 50% -10%,#4db8ff1f 0%,transparent 60%),
    radial-gradient(90% 60% at 100% 110%,#f4c04a14 0%,transparent 60%),
    linear-gradient(170deg,#0c1b3ff2,#07112af5);
  border:1px solid #ffffff1c;border-radius:26px;
  box-shadow:0 40px 90px #020a1fcc,0 0 0 1px #00000040,inset 0 1px 0 #ffffff1a;
  box-sizing:border-box}
#titlescreen .ts-inner:not(:has(>.acs,>.acp))::before{content:'';position:absolute;left:14%;right:14%;top:-1px;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#f4c04a,#fff3c4,#f4c04a,transparent)}
#titlescreen .ts-inner:not(:has(>.acs,>.acp))>*{position:relative;z-index:1}

/* Surtitre espace (pose par motion-entree.js au-dessus du grand titre). */
#titlescreen .me-sur{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 8px;
  font-size:11px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:#e8c872;white-space:nowrap}
#titlescreen .me-sur::before,#titlescreen .me-sur::after{content:'';width:26px;height:1px;background:linear-gradient(90deg,transparent,#e8c87299)}
#titlescreen .me-sur::after{transform:scaleX(-1)}

/* Le grand titre de chaque ecran, a empattements, et son trait qui se dessine. */
#titlescreen .ts-h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:32px;line-height:1.08;
  letter-spacing:.005em;color:#fff8ec;margin:2px 0 6px}
#titlescreen .ts-h2 .pays-drapeau{vertical-align:-3px}
#titlescreen .ts-h2::after{content:'';display:block;width:64px;height:2px;margin:12px auto 10px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#f4c04a,transparent);transform-origin:50% 50%}

/* Le logo du menu principal : garde sa police (c'est la marque), gagne un trait. */
#titlescreen .ts-logo::after{content:'';display:block;width:90px;height:2px;margin:12px auto 0;border-radius:2px;
  background:linear-gradient(90deg,transparent,#f4c04a,transparent)}

/* Les champs : un anneau dore a la saisie. */
#titlescreen .inp,#titlescreen .np-field input{transition:border-color .2s,box-shadow .25s,background-color .2s;
  background-color:#060d22;border-color:#ffffff24}
#titlescreen .inp:focus,#titlescreen .np-field input:focus{outline:none;border-color:#f4c04a99;
  box-shadow:0 0 0 3px #f4c04a26,0 10px 24px #0007}
#titlescreen .np-field label{letter-spacing:.14em;font-weight:700;color:#9fb0d8;font-size:11px}

/* Boutons : relief au survol, reflet qui traverse le bouton principal. */
#titlescreen .ts-btn{transition:transform .2s cubic-bezier(.2,.8,.3,1),background .2s,border-color .2s,box-shadow .2s}
#titlescreen .ts-btn.primary,#titlescreen .acs-cta{position:relative;overflow:hidden}
#titlescreen .ts-btn.primary::after,#titlescreen .acs-cta::after{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,#ffffff59,transparent);transform:translateX(-160%) skewX(-18deg);opacity:0}
@media(hover:hover){
  #titlescreen .ts-btn:hover:not([disabled]){transform:translateY(-2px)}
  #titlescreen .ts-btn.primary:hover{box-shadow:0 12px 30px #2a8fff66}
}
#titlescreen .ts-btn:active:not([disabled]){transform:translateY(0) scale(.985)}
#titlescreen .np-back{transition:transform .2s,background .2s,border-color .2s}

/* Cartes du parcours (pays, dossiers, emplacements) : un leve en relief. */
#titlescreen .cl-card,#titlescreen .ts-slot{transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s,border-color .2s,background-color .2s}
@media(hover:hover){
  #titlescreen .cl-card:hover,#titlescreen .pays-slot:hover{transform:perspective(900px) translateY(-3px) rotateX(2deg);
    box-shadow:0 18px 36px #020a1fb3,0 0 0 1px #4db8ff33}
  #titlescreen .cl-card.cc-carte:hover{box-shadow:0 18px 36px #020a1fb3,0 0 26px #f4c04a33}
}
#titlescreen .jv-somme{box-shadow:inset 0 1px 0 #ffffff14,0 16px 34px #020a1f99}
#titlescreen .ts-affiche,#titlescreen .ts-club{box-shadow:inset 0 1px 0 #ffffff12}

/* Accueil sobre : le grand titre a empattements, le surtitre espace. */
#titlescreen .acs h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:0;
  font-size:clamp(36px,5.2vw,60px);line-height:1.02}
#titlescreen .acs h1 em{font-style:italic}
#titlescreen .acs h1::after{content:'';display:block;width:84px;height:2px;margin-top:20px;border-radius:2px;
  background:linear-gradient(90deg,#f4c04a,transparent);transform-origin:0 50%}
#titlescreen .acs-sur{background:none;color:#f4d27a;padding:0;border-radius:0;letter-spacing:.32em;font-size:11.5px;
  display:inline-flex;align-items:center;gap:10px}
#titlescreen .acs-sur::before{content:'';width:28px;height:1px;background:#f4d27a}
#titlescreen .acs-visuel{box-shadow:0 30px 70px #02102acc,0 0 0 1px #ffffff1a}
#titlescreen .acs-bloc{transition:transform .3s cubic-bezier(.2,.8,.3,1),border-color .2s,box-shadow .3s}
@media(hover:hover){#titlescreen .acs-bloc:hover{transform:perspective(900px) translateY(-5px) rotateX(2deg);box-shadow:0 22px 44px #02102acc}}

/* Etats d'attente (« Un instant... », « Chargement... ») : une barre de lumiere discrete. */
.me-attente::after{content:'';display:block;width:140px;max-width:60%;height:2px;margin:14px auto 0;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--ciel,#4db8ff),transparent)}
#content .me-attente::after{margin-left:0}
/* ⚠️ Page entiere en attente du serveur (classe posee par motion-entree.js) : la petite carte
   « Chargement… » laissait 73 a 88 % de l'ecran au fond noir du jeu pendant tout le trajet
   reseau. La carte d'attente tient maintenant l'ecran : le cadre ne se vide plus et la page
   ne se replie pas de toute sa hauteur a 150 px avant de revenir. */
#content.me-page-attente :is(.card:has(.me-attente),.me-carte-attente){min-height:calc(100svh - 190px);box-sizing:border-box}
@media(max-width:700px){#content.me-page-attente :is(.card:has(.me-attente),.me-carte-attente){min-height:calc(100svh - 150px)}}

/* La bulle de la mascotte du decor passait sous le panneau : sur les ecrans ou elle est
   visible, le panneau etroit se decale un peu vers la gauche pour la laisser parler. */
@media(min-width:1100px) and (max-width:1700px){
  #titlescreen:not(.jv-solo) .ts-inner:not(.wide){translate:-7vw 0}
}
/* Telephone : l'ecran-titre en panneau plus compact. */
@media(max-width:620px){
  #titlescreen:not(:has(.acs)){padding-block:12px}
  #titlescreen .ts-inner:not(:has(>.acs,>.acp)){width:calc(100% - 24px);padding:24px 16px 22px;border-radius:22px}
  #titlescreen .ts-h2{font-size:28px}
  #titlescreen .me-sur{letter-spacing:.24em;font-size:10.5px}
}

/* ---------------------------------------------------------------------------------
   2. FENETRE DES NOUVEAUTES
   --------------------------------------------------------------------------------- */
.modal:has(>.maj-pop){position:relative;overflow:hidden;border-color:#f4c04a33;border-radius:24px;
  background:
    radial-gradient(80% 60% at 85% -5%,#f4c04a24,transparent 60%),
    radial-gradient(70% 60% at 0% 105%,#4db8ff1f,transparent 60%),
    linear-gradient(170deg,#18234c,#0b1230);
  box-shadow:0 40px 90px #000c,inset 0 1px 0 #ffffff1a}
.modal:has(>.maj-pop)::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,#ffffff06 0 1px,transparent 1px 13px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);mask-image:linear-gradient(180deg,#000,transparent 60%)}
.modal:has(>.maj-pop)>.maj-pop{position:relative}
.maj-titre::before{content:'Journal du club';display:block;font-family:inherit;font-size:10.5px;font-weight:800;letter-spacing:.32em;
  text-transform:uppercase;color:#e8c872;margin-bottom:6px}
.maj-titre::after{content:'';display:block;width:60px;height:2px;margin-top:10px;border-radius:2px;
  background:linear-gradient(90deg,#f4c04a,transparent);transform-origin:0 50%}
.maj-pt{padding:4px 10px;margin:0 -10px;border-radius:12px;transition:background-color .2s}
@media(hover:hover){.maj-pt:hover{background:#ffffff08}}
.maj-ok{position:relative;overflow:hidden}
@media(max-width:600px){.maj-titre::after{margin-left:auto;margin-right:auto;background:linear-gradient(90deg,transparent,#f4c04a,transparent)}}

/* ---------------------------------------------------------------------------------
   3. BARRE LATERALE
   --------------------------------------------------------------------------------- */
.side{isolation:isolate}
/* Lueur froide en haut a gauche et trame fine, sous le contenu (z-index -1 dans le
   contexte isole) : les fonds propres aux modes (or, Super League) restent visibles. */
.side::before{content:'';position:absolute;left:0;right:0;top:0;height:560px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(110% 55% at 0% 0%,color-mix(in srgb,var(--vp-accent,#4db8ff) 12%,transparent),transparent 62%),
    repeating-linear-gradient(135deg,#ffffff05 0 1px,transparent 1px 14px);
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.brand::after{content:'';position:absolute;left:10px;bottom:6px;width:54px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--vp-accent,var(--gold,#f4c04a)),transparent);transform-origin:0 50%}

.nav-item{position:relative}
/* Filet de survol : il pousse depuis le centre ; l'element actif garde son liseré dore fixe. */
.nav-item::before{content:'';position:absolute;left:0;top:24%;bottom:24%;width:3px;border-radius:3px;pointer-events:none;
  background:linear-gradient(180deg,var(--vp-accent,var(--ciel,#4db8ff)),var(--vp-accent,var(--gold,#f4c04a)));opacity:0;transform:scaleY(0);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .2s}
@media(hover:hover){.nav-item:not(.active):hover::before{opacity:.85;transform:scaleY(1)}}
.nav-item.active::before{display:none}
.nav-item.active{font-weight:700}
/* Les rubriques a sous-menu portent un chevron qui pivote a l'ouverture. */
.nav-item:has(+.nav-sub)::after{content:'';flex:0 0 auto;width:6px;height:6px;margin-left:auto;margin-right:4px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:.45;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .2s}
.nav-item:has(+.nav-sub):has(>.badge:not(.hidden))::after{margin-left:6px}
.nav-item:has(+.nav-sub.open)::after{transform:translateY(1px) rotate(225deg);opacity:.8}

/* Pastilles de la barre du haut : un leve au survol, sans toucher a leur fond. */
@media(hover:hover){
  .topbar .pill{transition:translate .22s cubic-bezier(.2,.8,.3,1)}
  .topbar .pill:hover{translate:0 -2px}
}

/* ---------------------------------------------------------------------------------
   4. TELEPHONE
   --------------------------------------------------------------------------------- */
#wp-fab::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 0%,#ffffff4d,transparent 55%);opacity:.55;transition:opacity .3s}
#wp-fab>svg{transition:transform .35s cubic-bezier(.2,.8,.3,1)}
@media(hover:hover){
  #wp-fab:hover::before{opacity:1}
  #wp-fab:hover>svg{transform:rotate(-8deg) scale(1.06)}
}
/* Le panneau s'ouvre en basculant legerement vers l'avant. */
#wp-panel{transform:perspective(1100px) rotateX(9deg) translateY(30px) scale(.35)}
#wp-panel.show{transform:none}
.wp-screen{background:
  radial-gradient(90% 40% at 100% 0%,#4db8ff1a,transparent 70%),
  radial-gradient(80% 35% at 0% 100%,#f4c04a10,transparent 70%),
  radial-gradient(140% 60% at 50% 0%,#16203f,#0a1020 60%)}
.wp-appbar b{font-weight:800}
.wp-appbar{position:relative}
.wp-appbar::after{content:'';position:absolute;left:20px;bottom:-1px;width:44px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--vp-accent,var(--ciel,#4db8ff)),transparent)}
.wp-notif{position:relative}
@media(hover:hover){.wp-notif:hover{box-shadow:inset 3px 0 0 var(--vp-accent,#3f7dff),0 8px 20px #0006}}
.wp-notif.chaud:hover{box-shadow:inset 3px 0 0 #ff5f6d,0 8px 20px #0006}

/* ---------------------------------------------------------------------------------
   5. MENU MOBILE
   --------------------------------------------------------------------------------- */
@media(max-width:900px){
  .side{transition:transform .38s cubic-bezier(.22,.9,.24,1),box-shadow .38s}
  .side.show{box-shadow:26px 0 70px #000b,1px 0 0 #ffffff14}
}

/* =================================================================================
   MOUVEMENTS (seulement si le joueur les veut)
   ================================================================================= */
/* ⚠️ L'ECRAN-TITRE S'ETEIGNAIT A CHAQUE BOUTON (mesure 01/10/2026, Chrome sans ecran, 390 px).
   Chaque ecran (Emplacements, Parametres, Classement, Achats, Soutenir...) reecrit #ts-inner :
   tous ses enfants repartaient d'une opacite 0 avec 14 px de montee, en cascade jusqu'a 0,28 s
   de retard, et la carte entiere basculait de 22 px (meCarte). Resultat : 11 a 14 images ou
   plus de 70 % de l'ecran montrait le fond (pire 83 %, Achats du jeu), et le bouton qu'on
   venait de toucher glissait sous le doigt. Meme regle que stabilite.css pour le contenu des
   pages : un simple eclaircissement 0,75 -> 1, sans noir et sans deplacement. Les fenetres
   (meModal, meBulle) gardent leur entree : elles arrivent PAR-DESSUS une page qui reste la. */
@keyframes meMonte{from{opacity:.75}to{opacity:1}}
@keyframes meCarte{from{opacity:.75}to{opacity:1}}
@keyframes meTrait{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes meLueur{from{transform:translate(-6%,-4%) scale(.92);opacity:.55}to{transform:translate(6%,5%) scale(1.08);opacity:1}}
@keyframes meCharge{0%{transform:translateX(-70%) scaleX(.25);opacity:0}50%{transform:none;opacity:1}100%{transform:translateX(70%) scaleX(.25);opacity:0}}
@keyframes meReflet{from{transform:translateX(-160%) skewX(-18deg);opacity:1}to{transform:translateX(330%) skewX(-18deg);opacity:1}}
/* ⚠️ Le menu (burger sur telephone, sous-menus partout) : chaque entree partait d'une opacite 0
   avec 8 px de glissement, apres 0,08 a 0,2 s de retard — on ouvrait le menu sur un panneau
   vide, et une entree touchee trop tot n'etait pas encore a sa place. Eclaircissement seul. */
@keyframes meSub{from{opacity:.75}to{opacity:1}}
@keyframes meFondu{from{opacity:0}}
@keyframes meModal{from{opacity:0;transform:perspective(1200px) rotateX(8deg) translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes meBulle{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
@keyframes mePop{0%{transform:scale(.4)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

@media(prefers-reduced-motion:no-preference){
  /* Ecran-titre */
  body:not(.anim-off) #titlescreen .ts-decor::before{animation:meLueur 24s ease-in-out infinite alternate}
  body:not(.anim-off) #titlescreen.show .ts-inner:not(:has(>.acs,>.acp)){animation:meCarte .6s cubic-bezier(.2,.8,.25,1) both}
  /* Chaque ecran qui s'affiche monte en cascade (les enfants sont neufs a chaque ecran :
     l'animation ne rejoue que quand le contenu change vraiment). Court : la connexion
     doit rester immediate. */
  body:not(.anim-off) #titlescreen .ts-inner>*{animation:meMonte .46s cubic-bezier(.2,.8,.3,1) both}
  body:not(.anim-off) #titlescreen .ts-inner>:nth-child(2){animation-delay:.04s}
  body:not(.anim-off) #titlescreen .ts-inner>:nth-child(3){animation-delay:.08s}
  body:not(.anim-off) #titlescreen .ts-inner>:nth-child(4){animation-delay:.12s}
  body:not(.anim-off) #titlescreen .ts-inner>:nth-child(5){animation-delay:.16s}
  body:not(.anim-off) #titlescreen .ts-inner>:nth-child(6){animation-delay:.2s}
  body:not(.anim-off) #titlescreen .ts-inner>:nth-child(7){animation-delay:.24s}
  body:not(.anim-off) #titlescreen .ts-inner>:nth-child(n+8){animation-delay:.28s}
  body:not(.anim-off) #titlescreen .ts-inner>.me-sur{animation-delay:0s}
  body:not(.anim-off) #titlescreen .ts-h2::after,
  body:not(.anim-off) #titlescreen .ts-logo::after{animation:meTrait .9s .25s cubic-bezier(.2,.8,.3,1) both}
  body:not(.anim-off) #titlescreen .acs h1::after{animation:meTrait 1s .4s cubic-bezier(.2,.8,.3,1) both}
  body:not(.anim-off) #titlescreen .acs-une>*{animation:meMonte .6s cubic-bezier(.2,.8,.3,1) both}
  body:not(.anim-off) #titlescreen .acs-une>:nth-child(2){animation-delay:.12s}
  body:not(.anim-off) #titlescreen .jv-bulle{animation:meBulle .5s .25s cubic-bezier(.2,.9,.3,1.2) both;transform-origin:0 40%}
  body:not(.anim-off) #titlescreen .jv-grid>.cl-card{animation:meMonte .5s cubic-bezier(.2,.8,.3,1) both}
  body:not(.anim-off) #titlescreen .jv-grid>.cl-card:nth-child(2){animation-delay:.05s}
  body:not(.anim-off) #titlescreen .jv-grid>.cl-card:nth-child(3){animation-delay:.1s}
  body:not(.anim-off) #titlescreen .jv-grid>.cl-card:nth-child(4){animation-delay:.15s}
  body:not(.anim-off) #titlescreen .jv-grid>.cl-card:nth-child(5){animation-delay:.2s}
  body:not(.anim-off) #titlescreen .jv-grid>.cl-card:nth-child(n+6){animation-delay:.25s}
  body:not(.anim-off) .me-attente::after{animation:meCharge 1.3s ease-in-out infinite}
  @media(hover:hover){
    body:not(.anim-off) #titlescreen .ts-btn.primary:hover::after,
    body:not(.anim-off) #titlescreen .acs-cta:hover::after,
    body:not(.anim-off) .maj-ok:hover::after{animation:meReflet .8s ease-out both}
  }

  /* Nouveautes */
  body:not(.anim-off) .modal:has(>.maj-pop){animation:meModal .55s cubic-bezier(.2,.8,.25,1) both}
  body:not(.anim-off) .maj-bulle{animation:meBulle .5s .3s cubic-bezier(.2,.9,.3,1.2) both;transform-origin:0 100%}
  body:not(.anim-off) .maj-titre::after{animation:meTrait .9s .45s cubic-bezier(.2,.8,.3,1) both}
  body:not(.anim-off) .maj-pt{animation:meMonte .45s cubic-bezier(.2,.8,.3,1) both}
  body:not(.anim-off) .maj-pt:nth-child(1){animation-delay:.45s}
  body:not(.anim-off) .maj-pt:nth-child(2){animation-delay:.52s}
  body:not(.anim-off) .maj-pt:nth-child(3){animation-delay:.59s}
  body:not(.anim-off) .maj-pt:nth-child(4){animation-delay:.66s}
  body:not(.anim-off) .maj-pt:nth-child(5){animation-delay:.73s}
  body:not(.anim-off) .maj-pt:nth-child(n+6){animation-delay:.8s}

  /* Cadre : le trait de la marque une fois, les sous-menus a l'ouverture. */
  body:not(.anim-off) .brand::after{animation:meTrait .9s .3s cubic-bezier(.2,.8,.3,1) both}
  body:not(.anim-off) .nav-sub.open>.nav-item{animation:meSub .32s cubic-bezier(.2,.8,.3,1) both}
  body:not(.anim-off) .nav-sub.open>.nav-item:nth-child(2){animation-delay:.02s}
  body:not(.anim-off) .nav-sub.open>.nav-item:nth-child(3){animation-delay:.04s}
  body:not(.anim-off) .nav-sub.open>.nav-item:nth-child(4){animation-delay:.06s}
  body:not(.anim-off) .nav-sub.open>.nav-item:nth-child(5){animation-delay:.08s}
  body:not(.anim-off) .nav-sub.open>.nav-item:nth-child(6){animation-delay:.1s}
  body:not(.anim-off) .nav-sub.open>.nav-item:nth-child(7){animation-delay:.12s}
  body:not(.anim-off) .nav-sub.open>.nav-item:nth-child(8){animation-delay:.14s}
  body:not(.anim-off) .nav-sub.open>.nav-item:nth-child(n+9){animation-delay:.16s}
  @media(max-width:900px){
    body:not(.anim-off) .side-backdrop.show{animation:meFondu .3s ease both}
    body:not(.anim-off) .side.show .nav>.nav-item{animation:meSub .36s cubic-bezier(.2,.8,.3,1) both;animation-delay:.08s}
    body:not(.anim-off) .side.show .nav>.nav-item:nth-child(n+4){animation-delay:.11s}
    body:not(.anim-off) .side.show .nav>.nav-item:nth-child(n+8){animation-delay:.14s}
    body:not(.anim-off) .side.show .nav>.nav-item:nth-child(n+12){animation-delay:.17s}
    body:not(.anim-off) .side.show .nav>.nav-item:nth-child(n+16){animation-delay:.2s}
  }

  /* Telephone : les messages entrent en cascade (--me-i pose par motion-entree.js). */
  body:not(.anim-off) .wp-notif{animation-delay:calc(min(var(--me-i,0),8) * 45ms)}
  body:not(.anim-off) .wp-badge.me-pop{animation:mePop .45s cubic-bezier(.3,1.5,.5,1)}
}

/* Sans animations : les elements prennent directement leur place finale. */
body.anim-off #wp-panel{transition:opacity .01s}
@media(prefers-reduced-motion:reduce){
  #wp-panel{transition:opacity .01s}
  .side{transition:none}
}