/* =========================================================================
   MUSLIMA WORK — La page de maintenance

   Chargée par elle seule, et par rien d'autre. Elle ne dépend d'aucune autre
   feuille : ni style.css, ni header.css. Une page qui annonce que le site est
   fermé ne peut pas avoir besoin du site pour s'afficher.

   LE PARTI PRIS

   Pas une carte centrée sur un fond dégradé. Une scène : le texte à gauche,
   un joyau de verre liquide à droite, et beaucoup de vide entre les deux.
   Le losange de la marque cesse d'être un signe de trois pixels pour devenir
   l'objet de la page — taillé, épais, traversé de lumière.

   Le fond est celui de la barre latérale de l'administration, au mot près :
   le même prune nuancé, la même lueur rose dans l'angle. Les deux faces du
   produit se ressemblent.

   Sommaire
     0. Fond, jetons, remise à zéro
     1. Le décor
     2. La scène
     3. Le texte
     4. Le repère de chargement
     5. Instagram
     6. Le joyau
     7. L'entrée
     8. Petits écrans
     9. Mouvement réduit
   ========================================================================= */

/* =========================================================================
   0. FOND, JETONS, REMISE À ZÉRO
   ========================================================================= */
:root{
  --mnt-clair:#FFF6FA;
  --mnt-doux:rgba(255,246,250,.74);
  --mnt-rose:#C32371;
  --mnt-rose-lum:#E0559A;
  --mnt-nacre:#FFD9EC;
  /* Les deux temps de l'entrée et du cycle ambiant, écrits une fois. */
  --mnt-cycle:11s;
  --mnt-depart:.85s;
}

*,*::before,*::after{box-sizing:border-box}

/* « clip » et non « hidden » : la lueur du joyau et les halos débordent
   volontairement du cadre, et « hidden » en aurait fait une barre de
   défilement horizontale. « clip » écrête sans créer de zone défilable, et
   laisse l'axe vertical libre — ce que « hidden » ne permet pas. Sur les deux
   éléments, car la valeur du corps se propage à la page. */
html{overflow-x:clip}

.mnt{
  margin:0;
  /* « dvh » pour la hauteur réelle du téléphone, « vh » en secours pour les
     navigateurs qui ne la connaissent pas : la seconde déclaration remplace
     la première là où elle est comprise. */
  min-height:100vh;
  min-height:100dvh;
  position:relative;
  display:grid;align-items:center;
  /* Les deux axes. Une page de maintenance tient sur un écran : ce qui
     dépasse ici n'est jamais du contenu, ce sont les halos, la lueur de la
     pierre et le rayon, qui mesurent deux à trois fois leur boîte. Sans cette
     fermeture, le document faisait 1472 px pour une scène de 740 et le
     navigateur montrait une barre de défilement sur une page qui tient. */
  overflow:clip;
  color:var(--mnt-clair);
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  /* Le fond de la barre latérale de l'administration, repris tel quel — voir
     « .adm-menu » dans admin.css. L'attache est fixe : la lueur de l'angle ne
     doit pas glisser si la page défile sur un petit écran. */
  background:
    radial-gradient(120% 46% at 0% 0%,rgba(233,150,190,.22) 0%,rgba(233,150,190,0) 62%),
    linear-gradient(172deg,#6B1640 0%,#571236 46%,#440F2A 100%);
  background-attachment:fixed;
}

/* =========================================================================
   1. LE DÉCOR
   Des halos, trois fils de lumière, le nom de la marque à peine visible, et
   un grain. Rien de plus : c'est l'espace vide qui fait le luxe, pas
   l'accumulation.
   ========================================================================= */
.mnt-decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}

.mnt-decor__halo{position:absolute;border-radius:50%;filter:blur(22px)}
/* Rose poudré, derrière le joyau : c'est lui qui l'éclaire. */
.mnt-decor__halo--rose{
  top:6%;right:-6%;width:56vmax;height:56vmax;
  background:radial-gradient(closest-side,rgba(224,85,154,.24) 0%,rgba(224,85,154,0) 100%);
  animation:mntRespire 9s ease-in-out infinite;
}
/* Violet fumé, en bas à gauche : il refroidit l'angle opposé et empêche la
   page d'être rose d'un bout à l'autre. */
.mnt-decor__halo--violet{
  left:-14%;bottom:-20%;width:52vmax;height:52vmax;
  background:radial-gradient(closest-side,rgba(126,86,158,.24) 0%,rgba(126,86,158,0) 100%);
  animation:mntRespire 13s ease-in-out .8s infinite reverse;
}
@keyframes mntRespire{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.06);opacity:1}
}

/* Trois fils, pas trente : des lignes d'un pixel qui traversent la scène en
   diagonale et s'éteignent avant d'arriver au bord. */
.mnt-decor__fil{
  position:absolute;height:1px;transform-origin:left center;
  background:linear-gradient(90deg,
    rgba(255,214,236,0) 0%,rgba(255,214,236,.26) 38%,
    rgba(255,255,255,.34) 52%,rgba(255,214,236,0) 100%);
  opacity:.5;
}
.mnt-decor__fil--a{top:22%;left:-8%;width:64%;transform:rotate(-7deg)}
.mnt-decor__fil--b{top:63%;left:-4%;width:46%;transform:rotate(-7deg);opacity:.32}
.mnt-decor__fil--c{top:84%;right:-6%;width:38%;transform:rotate(-7deg);opacity:.24}

/* Le nom de la marque, énorme et coupé par le bord : on le devine, on ne le
   lit pas. Il s'éclaire un peu au passage du rayon. */
/* Il pesait au bas de la page et tirait toute la composition vers le coin.
   Réduit de moitié, repoussé hors du cadre et rendu presque invisible, il ne
   fait plus que ce qu'on lui demande : une texture, pas un bloc. */
.mnt-decor__mot{
  position:absolute;right:-7vw;bottom:-5vh;
  font-size:clamp(48px,7vw,116px);
  font-weight:700;line-height:.84;letter-spacing:-.05em;
  text-align:right;
  color:rgba(255,246,250,.016);
  user-select:none;
  animation:mntMotRayon var(--mnt-cycle) ease-in-out var(--mnt-depart) infinite;
}
@keyframes mntMotRayon{
  0%,36%{color:rgba(255,246,250,.016)}
  45%{color:rgba(255,246,250,.046)}
  54%,100%{color:rgba(255,246,250,.016)}
}

/* Le grain : un bruit fractal, à peine. Sans lui, les grands dégradés
   montrent leurs bandes sur un écran ordinaire. */
.mnt-decor__grain{
  position:absolute;inset:0;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   2. LA SCÈNE
   Asymétrique : le texte prend la plus grande part, le joyau la plus
   lumineuse. Ce n'est pas une moitié-moitié.
   ========================================================================= */
.mnt-scene{
  position:relative;z-index:1;
  /* Plus large qu'avant : c'est ce qui donne au titre la place de tenir sur
     deux lignes au lieu de trois, et à la scène d'occuper l'écran. */
  width:min(1440px,100%);
  margin-inline:auto;
  padding:clamp(40px,6vh,72px) clamp(20px,4.5vw,84px);
  display:grid;
  /* Cinquante-cinq pour le texte, quarante-cinq pour la pierre. L'écart est
     assez faible pour que les deux se répondent, assez net pour qu'on sache
     lequel des deux on lit d'abord. */
  grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  align-items:center;
  /* La gouttière s'est resserrée : la pierre était au bout d'un couloir vide,
     elle est maintenant à portée du texte. */
  gap:clamp(24px,3vw,52px);
}

/* =========================================================================
   3. LE TEXTE
   ========================================================================= */
/* Elle prend toute sa colonne : c'est la grille qui borne la ligne, plus
   une largeur fixe qui la bridait à trente-six cadratins. */
.mnt-dire{max-width:none}

.mnt-marque{display:flex;width:fit-content;align-items:center;gap:11px;margin:0 0 clamp(28px,5vh,46px)}
.mnt-marque .marque__mono{display:block;width:40px;height:40px;flex:none}
.mnt-marque .marque__mot{
  font-size:24px;font-weight:600;line-height:1;
  letter-spacing:-.035em;white-space:nowrap;color:var(--mnt-clair);
}

/* Les capitales viennent du style, pas du texte : un mot écrit en majuscules
   dans le balisage est épelé lettre par lettre par certains lecteurs
   d'écran. */
.mnt-sur{
  display:flex;width:fit-content;align-items:center;gap:11px;margin:0;
  font-size:11.5px;font-weight:600;line-height:1.3;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,246,250,.56);
}
.mnt-sur__los{
  flex:none;width:9px;height:9px;
  border-radius:2px;transform:rotate(45deg);
  background:linear-gradient(120deg,var(--mnt-rose),var(--mnt-rose-lum));
  box-shadow:0 0 10px rgba(224,85,154,.6);
}

.mnt-t{
  margin:18px 0 0;
  font-size:clamp(31px,4.1vw,54px);
  font-weight:700;line-height:1.08;letter-spacing:-.036em;
  color:#fff;text-wrap:balance;
}

.mnt-p{
  margin:20px 0 0;max-width:48ch;
  font-size:clamp(14.5px,1.25vw,16.5px);line-height:1.68;
  color:var(--mnt-doux);
}

/* La seule promesse de la page, et elle ne s'engage sur aucune date. */
.mnt-fin{
  display:flex;width:fit-content;align-items:center;gap:12px;
  margin:24px 0 0;
  font-size:clamp(14px,1.15vw,15.5px);font-weight:500;line-height:1.5;
  color:var(--mnt-nacre);
}
.mnt-fin::before{
  content:"";flex:none;width:26px;height:1px;
  background:linear-gradient(90deg,rgba(224,85,154,0),var(--mnt-rose-lum));
}

/* =========================================================================
   4. LE REPÈRE DE CHARGEMENT
   Une ligne d'un pixel et un losange qui la parcourt. Pas de cercle qui
   tourne, pas de pourcentage inventé — il n'y a rien à mesurer.
   ========================================================================= */
.mnt-piste{margin-top:clamp(30px,5vh,44px)}
.mnt-piste__rail{
  --rail:280px;
  position:relative;width:var(--rail);max-width:100%;height:14px;
  /* Assez de perspective pour que la micro-rotation du losange se lise comme
     une épaisseur, et pas comme un écrasement. */
  perspective:220px;
}
.mnt-piste__ligne{
  position:absolute;top:50%;left:0;right:0;height:1px;margin-top:-.5px;
  background:linear-gradient(90deg,
    rgba(255,214,236,.05) 0%,rgba(255,214,236,.26) 22%,
    rgba(255,214,236,.26) 78%,rgba(255,214,236,.05) 100%);
}
/* Le curseur porte le déplacement ; le retournement se fait à l'instant
   précis où il s'arrête, donc il ne se voit pas. */
.mnt-piste__curseur{
  position:absolute;top:50%;left:0;width:10px;height:10px;margin-top:-5px;
  animation:mntPisteVa 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes mntPisteVa{
  0%{transform:translateX(0) scaleX(1)}
  49.99%{transform:translateX(calc(var(--rail) - 10px)) scaleX(1)}
  /* Le retournement se fait à l'instant où la vitesse est nulle : c'est ce
     qui rend le demi-tour invisible. */
  50%{transform:translateX(calc(var(--rail) - 10px)) scaleX(-1)}
  100%{transform:translateX(0) scaleX(-1)}
}
/* La traînée : courte, derrière lui, et elle suit le retournement puisqu'elle
   est dans le même repère. */
.mnt-piste__trainee{
  position:absolute;top:50%;right:6px;width:54px;height:2px;margin-top:-1px;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(195,35,113,0) 0%,rgba(224,85,154,.62) 100%);
  filter:blur(1.5px);
}
/* Le losange du repère. Il aspire la lumière devant lui — c'est le halo porté
   par « ::before », plus vif du côté de la marche — et fait un éclat nacré
   quand il touche une extrémité. Micro-rotation dans l'espace : 14 degrés,
   pas un tour complet. */
.mnt-piste__los{
  position:absolute;inset:0;
  border-radius:2px;
  background:linear-gradient(130deg,#FFFFFF 0%,var(--mnt-nacre) 46%,var(--mnt-rose-lum) 100%);
  transform:rotate(45deg);
  animation:mntPisteEclat 3.6s cubic-bezier(.45,0,.55,1) infinite,
            mntPisteTourne 3.6s ease-in-out infinite;
}
.mnt-piste__los::before{
  content:"";position:absolute;left:-13px;top:50%;
  width:26px;height:26px;margin-top:-13px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,217,236,.5) 0%,rgba(255,217,236,0) 100%);
}
@keyframes mntPisteEclat{
  0%{box-shadow:0 0 14px rgba(255,217,236,.95),0 0 4px rgba(255,255,255,.9)}
  16%,34%{box-shadow:0 0 7px rgba(224,85,154,.5)}
  50%{box-shadow:0 0 14px rgba(255,217,236,.95),0 0 4px rgba(255,255,255,.9)}
  66%,84%{box-shadow:0 0 7px rgba(224,85,154,.5)}
  100%{box-shadow:0 0 14px rgba(255,217,236,.95),0 0 4px rgba(255,255,255,.9)}
}
@keyframes mntPisteTourne{
  0%,100%{rotate:y 0deg}
  50%{rotate:y 14deg}
}
.mnt-piste__t{
  margin:14px 0 0;
  font-size:12.5px;line-height:1.5;letter-spacing:.02em;
  color:rgba(255,246,250,.46);
}

/* =========================================================================
   5. INSTAGRAM
   Il ne paraît que si le compte est dans RESEAUX : aucune adresse n'est
   écrite ici. Un contour, jamais un aplat — le rose est déjà pris.
   ========================================================================= */
.mnt-rs{margin:clamp(26px,4vh,36px) 0 0}
.mnt-rs__a{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:0 18px;
  border:1px solid rgba(255,246,250,.22);border-radius:8px;
  font-size:14px;font-weight:500;color:var(--mnt-clair);text-decoration:none;
  transition:border-color .22s ease,background-color .22s ease,color .22s ease;
}
.mnt-rs__a svg{flex:none}
.mnt-rs__a:hover{border-color:var(--mnt-rose-lum);background:rgba(195,35,113,.16);color:#FFE2EF}
.mnt-rs__a:focus-visible{outline:2px solid var(--mnt-nacre);outline-offset:3px}

/* La signature de l'atelier. Elle ferme la colonne, à voix basse : c'est une
   mention, pas une seconde marque. Le losange de clôture est décoratif. */
.mnt-signe{
  margin:clamp(22px,3.5vh,30px) 0 0;
  font-size:12.5px;line-height:1.5;
  color:rgba(255,246,250,.40);
}
.mnt-signe__a{
  color:rgba(255,246,250,.62);text-decoration:none;
  border-bottom:1px solid rgba(255,246,250,.18);
  transition:color .2s ease,border-color .2s ease;
}
.mnt-signe__a:hover{color:var(--mnt-nacre);border-color:rgba(255,217,236,.5)}
.mnt-signe__a:focus-visible{outline:2px solid var(--mnt-nacre);outline-offset:3px;border-radius:3px}

/* =========================================================================
   6. LE JOYAU
   ========================================================================= */
.mnt-joyau{
  position:relative;
  justify-self:center;
  /* Bien plus grande : elle n'accompagne plus le texte, elle est le sujet de
     la page. Sa lueur et son ombre suivent, puisqu'elles sont exprimées en
     pourcentage de sa taille. */
  width:clamp(240px,30vw,440px);
  aspect-ratio:1;
  /* La parallaxe au pointeur écrit ces deux variables ; sans JavaScript elles
     valent zéro et rien ne bouge. Le flottement est porté par l'enfant, pour
     que les deux transformations ne se disputent pas. */
  --px:0px; --py:0px;
  transform:translate3d(var(--px),var(--py),0);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  /* Sa lueur et son rayon débordent largement : c'est voulu, et c'est le
     corps qui les écrête. */
}
/* La lueur diffuse derrière la pierre : c'est elle qui la décolle du fond. */
.mnt-joyau__lueur{
  position:absolute;left:50%;top:52%;
  width:230%;height:230%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(224,85,154,.34) 0%,rgba(195,35,113,.16) 42%,rgba(195,35,113,0) 100%);
  filter:blur(10px);
  animation:mntRespire 7s ease-in-out infinite;
}
/* L'ombre portée sur le fond : une tache, pas un bloc. */
.mnt-joyau__ombre{
  position:absolute;left:50%;bottom:-11%;
  width:66%;height:14%;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(40,6,24,.44) 0%,rgba(40,6,24,0) 100%);
  filter:blur(5px);
}
/* Le rayon qui passe derrière, une fois par cycle. Large, incliné, flouté :
   un projecteur de studio qu'on balaie, pas un éclair. */
.mnt-joyau__rayon{
  position:absolute;top:-46%;bottom:-46%;left:-40%;width:44%;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,rgba(255,232,244,.30) 44%,
    rgba(255,255,255,.44) 52%,rgba(255,255,255,0) 100%);
  filter:blur(12px);
  transform:rotate(15deg) translateX(-60%);
  opacity:0;
  animation:mntRayon var(--mnt-cycle) cubic-bezier(.5,0,.4,1) var(--mnt-depart) infinite;
}
@keyframes mntRayon{
  0%,36%{transform:rotate(15deg) translateX(-60%);opacity:0}
  39%{opacity:1}
  50%{opacity:1}
  54%{transform:rotate(15deg) translateX(330%);opacity:0}
  100%{transform:rotate(15deg) translateX(330%);opacity:0}
}

.mnt-joyau__svg{
  position:relative;z-index:1;
  display:block;width:100%;height:100%;
  overflow:visible;
  /* Le flottement : cinq pixels, sept secondes. On ne le voit pas bouger, on
     le voit vivant. */
  animation:mntFlotte 7s ease-in-out infinite;
}
@keyframes mntFlotte{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

/* Les couches internes. Toutes prennent le repère du viewBox : sans
   « transform-box », une transformation CSS dans un SVG se calcule sur la
   boîte de l'élément et le décale. */
.mnt-joyau__svg *{transform-box:view-box;transform-origin:100px 100px}

/* La lumière qui traverse la matière : premier geste de l'entrée, puis une
   fois par cycle, synchronisée sur le rayon. */
.mnt-joyau__traverse{
  transform:rotate(16deg) translateX(0);
  animation:mntTraverse var(--mnt-cycle) cubic-bezier(.45,0,.35,1) var(--mnt-depart) infinite;
}
@keyframes mntTraverse{
  0%{transform:rotate(16deg) translateX(0);opacity:0}
  2%{opacity:1}
  11%{transform:rotate(16deg) translateX(340px);opacity:1}
  13%{transform:rotate(16deg) translateX(360px);opacity:0}
  /* Seconde traversée : celle qui accompagne le rayon. */
  38%{transform:rotate(16deg) translateX(0);opacity:0}
  40%{opacity:1}
  52%{transform:rotate(16deg) translateX(340px);opacity:1}
  54%,100%{transform:rotate(16deg) translateX(360px);opacity:0}
}

/* Le cœur s'allume au troisième temps de l'entrée, puis respire très
   lentement — et s'avive quand le rayon passe. */
.mnt-joyau__coeur{
  opacity:0;
  animation:mntCoeur 1s ease-out .62s forwards,
            mntCoeurVie var(--mnt-cycle) ease-in-out var(--mnt-depart) infinite;
}
@keyframes mntCoeur{from{opacity:0}to{opacity:1}}
@keyframes mntCoeurVie{
  0%,36%{filter:url(#mntFlou) brightness(1)}
  46%{filter:url(#mntFlou) brightness(1.5)}
  56%,100%{filter:url(#mntFlou) brightness(1)}
}

/* Les éclats nacrés dérivent, très lentement : la matière n'est pas figée. */
/* L'inclinaison est portée par le groupe qui les enveloppe : une animation
   CSS de « transform » remplace l'attribut du même nom, et les éclats se
   seraient remis d'aplomb à la première image. */
.mnt-joyau__eclat{animation:mntEclat 14s ease-in-out infinite}
.mnt-joyau__eclat--b{animation-duration:18s;animation-delay:-4s;animation-direction:reverse}
@keyframes mntEclat{
  0%,100%{transform:translate(0,0) rotate(0deg);opacity:.9}
  50%{transform:translate(4px,-3px) rotate(-3deg);opacity:1}
}
.mnt-joyau__taille{animation:mntTaille 11s ease-in-out infinite}
@keyframes mntTaille{
  0%,100%{opacity:.8}
  50%{opacity:1}
}
.mnt-joyau__caustique{animation:mntCaustique 9s ease-in-out infinite}
@keyframes mntCaustique{
  0%,100%{opacity:.5}
  50%{opacity:.95}
}

/* L'arête se dessine au deuxième temps de l'entrée, puis reste allumée. Elle
   rougeoie au passage du rayon — c'est la réfraction sur les bords. */
.mnt-joyau__arete{
  stroke-dasharray:540;stroke-dashoffset:540;
  animation:mntArete .72s cubic-bezier(.4,0,.2,1) .2s forwards,
            mntAreteLueur var(--mnt-cycle) ease-in-out var(--mnt-depart) infinite;
}
@keyframes mntArete{to{stroke-dashoffset:0}}
@keyframes mntAreteLueur{
  0%,36%{filter:drop-shadow(0 0 3px rgba(255,217,236,.34))}
  46%{filter:drop-shadow(0 0 9px rgba(224,85,154,.85))}
  56%,100%{filter:drop-shadow(0 0 3px rgba(255,217,236,.34))}
}

/* =========================================================================
   7. L'ENTRÉE
   Le fond d'abord, l'arête ensuite, le cœur, la traversée, puis les textes
   l'un après l'autre — dix pixels, pas davantage. La mention de maintenance
   arrive en dernier. Un peu plus d'une seconde et demie en tout.
   ========================================================================= */
.mnt-decor{animation:mntFond .5s ease-out both}
@keyframes mntFond{from{opacity:0}to{opacity:1}}

.mnt-marque,.mnt-sur,.mnt-t,.mnt-p,.mnt-fin,.mnt-piste,.mnt-rs,.mnt-signe{
  animation:mntMonte .52s cubic-bezier(.22,.61,.36,1) both;
}
.mnt-marque{animation-delay:.30s}
.mnt-sur    {animation-delay:.60s}
.mnt-t      {animation-delay:.72s}
.mnt-p      {animation-delay:.86s}
.mnt-fin    {animation-delay:1.02s}
.mnt-piste  {animation-delay:1.14s}
.mnt-rs     {animation-delay:1.24s}
.mnt-signe  {animation-delay:1.34s}
@keyframes mntMonte{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* =========================================================================
   8. PETITS ÉCRANS
   Une colonne : la marque en haut, le texte centré, le joyau sous le titre,
   le repère sous le joyau. Le joyau rapetisse, il ne se simplifie pas — ses
   sept couches sont vectorielles, elles tiennent à toutes les tailles.
   ========================================================================= */
@media (max-width:920px){
  .mnt{align-items:start}
  .mnt-scene{
    grid-template-columns:minmax(0,1fr);
    justify-items:center;text-align:center;
    gap:0;
    padding:clamp(24px,3.4vh,40px) 20px clamp(28px,4vh,44px);
  }
  /* Le joyau passe entre le titre et le texte de conclusion : c'est l'ordre
     demandé, et il se règle ici sans toucher au balisage. */
  .mnt-dire{display:contents}
  .mnt-marque{order:1;margin-bottom:18px}
  .mnt-sur{order:2}
  .mnt-t{order:3;margin-top:12px}
  .mnt-joyau{order:4;margin:18px 0 0}
  .mnt-p{order:5;margin-top:16px;margin-inline:auto;max-width:40ch}
  .mnt-fin{order:6}
  .mnt-piste{order:7}
  .mnt-rs{order:8}
  .mnt-signe{order:9}

  .mnt-sur{justify-content:center}
  /* Le filet accompagne une ligne, pas deux : sur téléphone la phrase se
     coupe, et il restait suspendu à mi-hauteur du bloc. */
  .mnt-fin{justify-content:center;display:block;text-align:center;max-width:30ch;margin-inline:auto}
  .mnt-fin::before{display:none}
  .mnt-piste__rail{margin-inline:auto}
  .mnt-joyau{width:clamp(118px,33vw,152px)}
  /* Les blancs se resserrent : c'est ce qui fait tenir la scène sur un écran
     de téléphone sans rien retirer ni rapetisser le texte. */
  .mnt-fin{margin-top:18px}
  .mnt-piste{margin-top:20px}
  .mnt-rs{margin-top:20px}
  .mnt-signe{margin-top:16px}
  .mnt-decor__mot{right:-8vw;bottom:-3vh;font-size:clamp(62px,22vw,132px)}
  .mnt-decor__fil--b,.mnt-decor__fil--c{display:none}
}

/* Sous 380 px, les blancs se resserrent encore et le surtitre s'autorise deux
   lignes plutôt que de forcer une ligne trop longue. */
@media (max-width:379px){
  .mnt-scene{padding-inline:16px}
  .mnt-marque .marque__mono{width:34px;height:34px}
  .mnt-marque .marque__mot{font-size:21px}
  .mnt-sur{flex-wrap:wrap;letter-spacing:.14em;font-size:10.5px}
  .mnt-joyau{width:min(150px,58vw);margin-top:24px}
  .mnt-p{margin-top:18px}
  .mnt-piste__rail{--rail:210px}
}

/* Un écran trop bas pour la scène : plutôt que de couper le texte, on lui
   rend le défilement. C'est le seul cas où la page défile, et il vaut mieux
   défiler que perdre une phrase. */
@media (max-height:740px){
  .mnt{overflow-x:clip;overflow-y:auto}
}

/* =========================================================================
   9. MOUVEMENT RÉDUIT
   La composition reste entière, et le joyau reste éclairé : c'est une image,
   pas une animation. Rien ne bouge, rien ne clignote, rien n'apparaît — tout
   est déjà là à l'ouverture.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .mnt-decor,
  .mnt-decor__halo,
  .mnt-decor__mot,
  .mnt-marque,.mnt-sur,.mnt-t,.mnt-p,.mnt-fin,.mnt-piste,.mnt-rs,.mnt-signe,
  .mnt-joyau__lueur,
  .mnt-joyau__rayon,
  .mnt-joyau__svg,
  .mnt-joyau__eclat,
  .mnt-joyau__caustique,
  .mnt-joyau__taille,
  .mnt-piste__curseur,
  .mnt-piste__los{
    animation:none;
  }
  /* Ce que les animations devaient poser, on le pose directement. */
  .mnt-decor,.mnt-marque,.mnt-sur,.mnt-t,.mnt-p,.mnt-fin,.mnt-piste,.mnt-rs,.mnt-signe{
    opacity:1;transform:none;
  }
  .mnt-joyau__rayon{opacity:0}
  .mnt-joyau__traverse{animation:none;opacity:.5;transform:rotate(16deg) translateX(150px)}
  .mnt-joyau__coeur{animation:none;opacity:1}
  .mnt-joyau__arete{animation:none;stroke-dashoffset:0;filter:drop-shadow(0 0 4px rgba(255,217,236,.4))}
  /* Le repère ne peut pas courir : il se pose au milieu de sa ligne. */
  .mnt-piste__curseur{transform:translateX(calc(50% - 5px))}
  .mnt-joyau{transition:none}
  .mnt-rs__a,.mnt-signe__a{transition:none}
}