/* =========================================================================
   TEST — « moyen » : les nappes se déplacent ET changent de couleur
   Cycle 9 s. Trois nappes, chacune portant les trois couleurs de la charte
   empilées ; leurs opacités se relaient, donc le lime devient rose, le rose
   devient sauge, le sauge devient lime.

   Se pose DERRIÈRE tout le contenu (z-index:0 + position:fixed).
   Le fond statique de style.css est neutralisé pendant le test.
   ========================================================================= */


/* Teintes du maillage — un cran plus soutenues que la charte pour qu'on les
   voie bien. La charte (--lime/--pink/--sage) n'est pas modifiée : ces
   variables ne servent QU'au fond animé. */
:root{
  --mz-lime:#E2F24E;
  --mz-pink:#D8A9B2;
  --mz-sage:#5E9A94;
}

html{background:var(--cream)}
body{background:transparent !important; animation:none !important}

/* PAS de « contain:strict » ici — c'est ce qui dessinait les RECTANGLES A BORDS
   NETS dans le fond. La propriete enferme le calque dans sa propre boite ; sur
   une page longue, le navigateur n'en repeignait qu'une partie et laissait le
   reste en creme plat, d'ou ces blocs rectangulaires qui coupaient le degrade
   (visible surtout en bas des pages Equipe et Accueil, derriere le bandeau
   defilant). Teste le 08.10.2026 : sans « contain », le degrade est continu ;
   avec « contain:layout paint style », il reste un angle net en bas a droite.
   Le compositing est deja assure par le « will-change:transform » des nappes. */
.mesh-anim{
  position:fixed; inset:-25%; z-index:-1; pointer-events:none;
}
.mesh-anim .m{position:absolute; inset:0; will-change:transform}
.mesh-anim .m > i{
  position:absolute; inset:0; display:block;
  background-repeat:no-repeat; will-change:opacity;
}

/* --- nappe 1 --- */
.mesh-anim .m1{animation:mzGo1 11s ease-in-out infinite}
.mesh-anim .m1 .c1{background-image:radial-gradient(48% 48% at 50% 50%, var(--mz-lime) 0%, transparent 60%); animation:mzSw1 9s ease-in-out infinite}
.mesh-anim .m1 .c2{background-image:radial-gradient(48% 48% at 50% 50%, var(--mz-pink) 0%, transparent 60%); animation:mzSw2 9s ease-in-out infinite}
.mesh-anim .m1 .c3{background-image:radial-gradient(48% 48% at 50% 50%, var(--mz-sage) 0%, transparent 60%); animation:mzSw3 9s ease-in-out infinite}

/* --- nappe 2 --- */
.mesh-anim .m2{animation:mzGo2 13s ease-in-out infinite}
.mesh-anim .m2 .c1{background-image:radial-gradient(50% 50% at 50% 50%, var(--mz-pink) 0%, transparent 58%); animation:mzSw1 9s ease-in-out -3s infinite}
.mesh-anim .m2 .c2{background-image:radial-gradient(50% 50% at 50% 50%, var(--mz-sage) 0%, transparent 58%); animation:mzSw2 9s ease-in-out -3s infinite}
.mesh-anim .m2 .c3{background-image:radial-gradient(50% 50% at 50% 50%, var(--mz-lime) 0%, transparent 58%); animation:mzSw3 9s ease-in-out -3s infinite}

/* --- nappe 3 --- */
.mesh-anim .m3{animation:mzGo3 12s ease-in-out infinite}
.mesh-anim .m3 .c1{background-image:radial-gradient(52% 52% at 50% 50%, var(--mz-sage) 0%, transparent 56%); animation:mzSw1 9s ease-in-out -6s infinite}
.mesh-anim .m3 .c2{background-image:radial-gradient(52% 52% at 50% 50%, var(--mz-lime) 0%, transparent 56%); animation:mzSw2 9s ease-in-out -6s infinite}
.mesh-anim .m3 .c3{background-image:radial-gradient(52% 52% at 50% 50%, var(--mz-pink) 0%, transparent 56%); animation:mzSw3 9s ease-in-out -6s infinite}

/* déplacements */
@keyframes mzGo1{0%,100%{transform:translate(-18%,-12%)}33%{transform:translate(30%,18%)}66%{transform:translate(8%,34%)}}
@keyframes mzGo2{0%,100%{transform:translate(26%,20%)}33%{transform:translate(-24%,-6%)}66%{transform:translate(-4%,-30%)}}
@keyframes mzGo3{0%,100%{transform:translate(6%,28%)}50%{transform:translate(-28%,-22%)}}

/* relais des couleurs */
@keyframes mzSw1{0%,100%{opacity:1}33%{opacity:0}66%{opacity:0}}
@keyframes mzSw2{0%,100%{opacity:0}33%{opacity:1}66%{opacity:0}}
@keyframes mzSw3{0%,100%{opacity:0}33%{opacity:0}66%{opacity:1}}

/* Le maillage est en z-index:-1, donc DERRIÈRE tout le contenu sans qu'on ait
   à toucher au positionnement des éléments de la page.
   ⚠ Ne jamais réintroduire une règle « body > * { position:relative } » :
   elle écrase le `position:sticky` de .hdr, le script mesure alors une
   mauvaise hauteur d'en-tête, --pt-hdr gonfle, le héros descend hors de
   l'écran et les révélations .rv ne se déclenchent plus. */
body{background-color:var(--cream)}

/* les sections colorées deviennent transparentes pour laisser voir le maillage ;
   on garde les couleurs de texte définies par data-tone */
[data-tone="lime"],[data-tone="pink"],[data-tone="sage"],[data-tone="cream"],[data-tone="gradient"]{
  background:transparent !important;
}

@media (prefers-reduced-motion:reduce){
  .mesh-anim .m,.mesh-anim .m > i{animation:none !important}
  .mesh-anim .m2,.mesh-anim .m3{opacity:.6}
}

/* =========================================================================
   LE MENU — même fond animé que les pages.
   Le maillage du menu est un second exemplaire, posé DANS le panneau :
   celui de la page est en z-index:-1 et le menu (z-index:80) le recouvre.
   ========================================================================= */
.menu{
  /* on garde une base lime tres legere ; le maillage fait le reste */
  background:color-mix(in srgb, var(--cream) 55%, transparent) !important;
}
.menu .mesh-anim{
  /* fixed et non absolute : plus grand que l'ecran, il faisait glisser le menu
     de cote au doigt sur telephone (26.10.2026) */
  position:fixed; inset:-25%; z-index:0; pointer-events:none;
  contain:strict; opacity:.9;
}
/* le contenu du menu repasse au-dessus de son maillage */
.menu__grid{position:relative; z-index:1}

/* fond fige pendant le defilement — la classe est posee par mesh-anime.js */
.mesh-pause .mesh-anim .m,
.mesh-pause .mesh-anim .m > i{animation-play-state:paused}