/* =========================================================================
   LES COUCHES — l'échelle d'empilement, écrite UNE fois

   Elle existe parce qu'une fenêtre modale s'est retrouvée sous les cartes
   du studio : son voile portait « z-index:80 », mais il était rendu DANS
   « .stu-hero », qui porte « isolation:isolate ». Un contexte d'empilement
   enferme les z-index de ses enfants : quatre-vingts n'y valait plus rien
   en dehors du hero, et tout ce qui venait après dans la page passait
   devant.

   Deux règles, et elles suffisent :

     1. une fenêtre modale n'est jamais rendue dans la page. Elle est
        rendue dans « #portail-modales », dernier enfant de « body » ;
     2. aucun nombre d'empilement n'est écrit à la main ailleurs. On prend
        un jeton de cette liste, ou on en ajoute un ICI.

   L'ordre, du fond vers la surface :

     contenu           le flux normal de la page
     sticky            une barre qui colle en haut d'une zone
     tiroir            le menu latéral d'un téléphone, et son voile
     menus             un menu flottant, une infobulle
     voile / dialogue  une fenêtre modale
     notifications     ce qui doit rester lisible même au-dessus d'elle
   ========================================================================= */
:root{
  --mw-z-contenu:1;
  --mw-z-sticky:100;
  --mw-z-tiroir-voile:200;
  --mw-z-tiroir:210;
  --mw-z-menus:300;
  --mw-z-voile:1000;
  --mw-z-dialogue:1010;
  --mw-z-notifs:2000;
}

/* --- Le portail des fenêtres ---------------------------------------------
   Dernier enfant de « body », donc hors de tout contexte d'empilement de la
   page : ni le hero, ni une carte, ni une zone animée ne peut l'enfermer.

   Il ne prend aucune place tant qu'il est vide — pas de boîte, donc pas de
   surface morte par-dessus la page. Ce qu'on y rend est en « position:
   fixed », et se dimensionne donc sur la fenêtre du navigateur. */
#portail-modales:empty{display:none}
#portail-modales{position:static;isolation:auto}

/* --- La page, pendant qu'une fenêtre est ouverte -------------------------
   Rien derrière le voile ne se clique, ne se survole, ne s'anime. Une carte
   qui continue de « respirer » sous une fenêtre demande au navigateur de
   composer une couche par carte : c'est exactement ce qui la faisait
   remonter au-dessus du voile. */
body[data-modale-ouverte="true"] > *:not(#portail-modales){
  pointer-events:none;
}
body[data-modale-ouverte="true"] *:not(#portail-modales *){
  animation-play-state:paused;
}
body[data-modale-ouverte="true"] :not(#portail-modales *){
  will-change:auto;
}