/* =====================================================================
   MONDES « La plongée » (templates/universe/atlas.php) : mise en forme.
   Reprise du prototype validé (prototypes/mondes/mondes.css) dans le thème :
   - toutes les règles sont limitées à main.sr-imm--mondes (le thème garde sa nav, son pied de page, son dock) ;
   - la scène tient entre la navigation (collante) et le dock mobile : --mondes-nav et --mondes-dock sont
     mesurés par le script en ligne du gabarit, puis à chaque redimensionnement par mondes.js ;
   - valeurs tirées des jetons de socle.css ; les rares valeurs propres à la page sont déclarées ci-dessous.
   ===================================================================== */

.sr-imm--mondes {
  --mondes-badge: 28px;                                   /* emblème dans la bande */
  --mondes-bande-h: var(--cible-min);
  --mondes-halo-coeur: color-mix(in srgb, var(--or-clair) 58%, transparent);
  --mondes-halo-milieu: color-mix(in srgb, var(--or) 26%, transparent);
  --mondes-voile-haut: linear-gradient(to bottom, var(--voile) 0%, color-mix(in srgb, var(--nuit) 0%, transparent) 26%);
  --mondes-voile-gauche: linear-gradient(to right, var(--voile) 0%, color-mix(in srgb, var(--nuit) 0%, transparent) 46%);
  --mondes-ombre-texte: 0 1px 2px var(--voile-fort), 0 0 24px var(--voile);
  --mondes-derive-1: 70s;   /* une traversée de brume, très lente */
  --mondes-derive-2: 110s;
  --mondes-h: max(30rem, calc(100vh - var(--mondes-nav, 4.75rem) - var(--mondes-dock, 0px)));
  position: relative;
  isolation: isolate;          /* les plans de la page restent sous la navigation, le dock et le bandeau cookies du site */
  overflow: hidden;
  height: var(--mondes-h);
  min-height: 0;
  margin: 0; padding: 0; max-width: none;
  background: var(--nuit);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--taille-texte);
  line-height: var(--interligne-texte);
}
@supports (height: 100svh) {
  .sr-imm--mondes { --mondes-h: max(30rem, calc(100svh - var(--mondes-nav, 4.75rem) - var(--mondes-dock, 0px))); }
}
.sr-imm--mondes .ecran { position: absolute; inset: 0; overflow: hidden; }
/* v17.26 : les titres suivent la charte du thème (Cormorant en petites capitales, or clair) ; seules les tailles sont propres à la page.
   Le projecteur : la carte s'assombrit à peine partout sauf autour du royaume éclairé (centre = cadrage de MondesCadre). */
@property --mondes-spot-x { syntax: '<percentage>'; inherits: true; initial-value: 62%; }
@property --mondes-spot-y { syntax: '<percentage>'; inherits: true; initial-value: 45%; }
.sr-imm--mondes .ecran--carte { --mondes-spot-x: 62%; --mondes-spot-y: 45%; transition: --mondes-spot-x var(--duree-longue) var(--ease-in-out); }
.sr-imm--mondes .ecran--carte:has(.fiches[data-cote="droite"]) { --mondes-spot-x: 38%; }
.sr-imm--mondes :is(h1, h2) { letter-spacing: 0.01em; }
.sr-imm--mondes [role="button"] { cursor: pointer; }
.sr-imm--mondes .ecran[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   Boutons (cahier §0)
   --------------------------------------------------------------------- */
.sr-imm--mondes .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--bouton-hauteur);
  padding: 0 var(--esp-5);
  border-radius: var(--rayon-pilule);
  font-family: var(--police-texte);
  font-size: var(--taille-etiquette);
  font-weight: var(--graisse-moyenne);
  letter-spacing: var(--approche-etiquette);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  user-select: none; -webkit-user-select: none;
  transition: background-color var(--duree-appui) ease, border-color var(--duree-appui) ease, color var(--duree-appui) ease, transform var(--duree-appui) var(--ease-out);
}
.sr-imm--mondes .bouton:active { transform: scale(var(--appui-echelle)); }
.sr-imm--mondes .bouton svg { flex: none; }
.sr-imm--mondes .bouton--principal { background: var(--or); color: var(--encre-sur-or); box-shadow: var(--ombre-contact); border: 0; }
.sr-imm--mondes .bouton--secondaire { background: color-mix(in srgb, var(--nuit) 45%, transparent); border: 1px solid var(--filet-fort); color: var(--encre); }
@media (hover: hover) and (pointer: fine) {
  .sr-imm--mondes .bouton--principal:hover { background: var(--or-clair); color: var(--encre-sur-or); }
  .sr-imm--mondes .bouton--secondaire:hover { border-color: var(--filet-actif); background: color-mix(in srgb, var(--panneau) 80%, transparent); color: var(--encre); }
}
.sr-imm--mondes .mention { font-size: var(--taille-mention); color: var(--encre-attenuee); line-height: var(--interligne-texte); }

/* ---------------------------------------------------------------------
   Bouton son (en haut à droite de la scène, au-dessus du voyage)
   --------------------------------------------------------------------- */
.sr-imm--mondes .son {
  position: absolute;
  z-index: calc(var(--plan-voyage) + 1);
  top: var(--esp-5);
  right: var(--marge-ecran);
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: var(--cible-min);
  padding: 0 var(--esp-4) 0 var(--esp-3);
  border-radius: var(--rayon-pilule);
  border: 1px solid var(--filet-fort);
  background: var(--voile);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--taille-etiquette);
  letter-spacing: var(--approche-etiquette);
  line-height: 1.2;
  transition: border-color var(--duree-appui) ease, background-color var(--duree-appui) ease, transform var(--duree-appui) var(--ease-out);
}
.sr-imm--mondes .son:active { transform: scale(var(--appui-echelle)); }
@media (hover: hover) and (pointer: fine) { .sr-imm--mondes .son:hover { border-color: var(--filet-actif); } }
.sr-imm--mondes .son__ondes { opacity: 0; transition: opacity var(--duree-courte) var(--ease-out); }
.sr-imm--mondes .son__coupe { opacity: 1; transition: opacity var(--duree-courte) var(--ease-out); }
.sr-imm--mondes .son[aria-pressed="true"] { border-color: var(--filet-actif); color: var(--or-clair); }
.sr-imm--mondes .son[aria-pressed="true"] .son__ondes { opacity: 1; }
.sr-imm--mondes .son[aria-pressed="true"] .son__coupe { opacity: 0; }
.sr-imm--mondes .son[data-charge="true"] .son__ondes { animation: mondes-respire 1.2s var(--ease-in-out) infinite alternate; }

/* ---------------------------------------------------------------------
   É1 : la carte
   --------------------------------------------------------------------- */
.sr-imm--mondes .ecran--carte { z-index: var(--plan-fond); }
.sr-imm--mondes .carte { position: absolute; inset: 0; overflow: hidden; background: var(--nuit); touch-action: none; }
.sr-imm--mondes .carte__parallaxe { position: absolute; inset: 0; will-change: transform; }
.sr-imm--mondes .carte__plan {
  position: absolute; left: 0; top: 0;
  width: max(100%, calc(var(--mondes-h) * 1.7769)); aspect-ratio: 1672 / 941;
  transform-origin: 0 0;
  will-change: transform;
  /* La carte se perd dans la nuit en bas (jamais de bord net si elle remonte). */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 91%, transparent 100%);
}
.sr-imm--mondes .carte__plan.glisse { transition: transform var(--duree-longue) var(--ease-in-out); }
.sr-imm--mondes .carte__plan.plonge { transition: transform 3.2s cubic-bezier(0.55, 0, 0.85, 0.4); }
.sr-imm--mondes .carte__plan.recule { transition: transform 1.2s var(--ease-out); }
.sr-imm--mondes .carte__plan picture, .sr-imm--mondes .carte__image { width: 100%; height: 100%; max-width: none; }
.sr-imm--mondes .carte__image { object-fit: cover; user-select: none; -webkit-user-select: none; pointer-events: none; }

/* Les îles : zones invisibles posées sur les noms peints, halo or quand le royaume est éclairé */
.sr-imm--mondes .carte__iles { position: absolute; inset: 0; }
.sr-imm--mondes .ile {
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: 9%; height: 7.5%;
  min-width: var(--cible-min); min-height: var(--cible-min);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.sr-imm--mondes .ile::before {
  content: "";
  position: absolute; inset: -70% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--mondes-halo-coeur), var(--mondes-halo-milieu) 48%, transparent 78%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity var(--duree-moyenne) var(--ease-out);
  pointer-events: none;
}
.sr-imm--mondes .ile[aria-current="true"]::before { opacity: 1; animation: mondes-respire 4.2s var(--ease-in-out) infinite alternate; }
.sr-imm--mondes .ile__etiquette {
  position: absolute; left: 50%; top: calc(100% - var(--esp-1));
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--rayon-pilule);
  background: var(--voile-fort);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--taille-mention);
  letter-spacing: var(--approche-etiquette);
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, var(--esp-1));
  transition: opacity var(--duree-courte) var(--ease-out), transform var(--duree-courte) var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .sr-imm--mondes .ile:hover::before { opacity: 0.6; }
  .sr-imm--mondes .ile[aria-current="true"]:hover::before { opacity: 1; }
  .sr-imm--mondes .ile:not([aria-current="true"]):hover .ile__etiquette { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes mondes-respire { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Brume : deux nappes qui dérivent très lentement (images demandées après le premier affichage, adresses posées par le gabarit) */
.sr-imm--mondes .carte__brume { position: absolute; inset: -3%; pointer-events: none; will-change: transform; z-index: var(--plan-atmo); }
.sr-imm--mondes .brume {
  position: absolute; top: 0; left: 0; height: 100%; width: 200%;
  background-repeat: repeat-x; background-size: 50% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 2.4s var(--ease-out);
}
.vivante .sr-imm--mondes .brume--1 { background-image: var(--brume-1); opacity: 0.16; animation: mondes-derive var(--mondes-derive-1) linear infinite; }
.vivante .sr-imm--mondes .brume--2 { background-image: var(--brume-2); opacity: 0.11; top: 18%; animation: mondes-derive var(--mondes-derive-2) linear infinite reverse; }
@keyframes mondes-derive { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.en-pause .sr-imm--mondes .brume, .en-pause .sr-imm--mondes .ile::before { animation-play-state: paused; }

.sr-imm--mondes .carte__lucioles { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; z-index: var(--plan-atmo); will-change: transform; }
.sr-imm--mondes .carte__voile {
  position: absolute; inset: 0; pointer-events: none; z-index: var(--plan-atmo);
  background:
    radial-gradient(36% 50% at var(--mondes-spot-x) var(--mondes-spot-y), transparent 0%, transparent 50%, var(--voile-leger) 100%),
    var(--mondes-voile-haut), linear-gradient(to top, var(--voile-fort) 0%, var(--voile) 9%, color-mix(in srgb, var(--nuit) 0%, transparent) 22%), var(--vignette);
}
/* le voile de lecture suit la fiche (à gauche ou à droite) au lieu d'assombrir toute la carte */
.sr-imm--mondes .carte__voile::before, .sr-imm--mondes .carte__voile::after {
  content: ""; position: absolute; inset: 0;
  /* v17.26 : voile de lecture plus large et plus dense : les noms peints sous la fiche ne percent plus le texte */
  background: radial-gradient(76% 74% at 0% 100%, var(--voile-fort) 0%, var(--voile) 48%, color-mix(in srgb, var(--nuit) 0%, transparent) 84%);
  transition: opacity var(--duree-longue) var(--ease-in-out);
}
.sr-imm--mondes .carte__voile::after { background: radial-gradient(76% 74% at 100% 100%, var(--voile-fort) 0%, var(--voile) 48%, color-mix(in srgb, var(--nuit) 0%, transparent) 84%); opacity: 0; }
.sr-imm--mondes .ecran--carte:has(.fiches[data-cote="droite"]) .carte__voile::before { opacity: 0; }
.sr-imm--mondes .ecran--carte:has(.fiches[data-cote="droite"]) .carte__voile::after { opacity: 1; }

/* En-tête : titre de page, discret (le royaume éclairé porte le regard) */
.sr-imm--mondes .entete {
  position: absolute; z-index: var(--plan-contenu);
  top: var(--esp-5);
  left: var(--marge-ecran);
  max-width: min(34rem, 52vw);
  pointer-events: none;
  text-shadow: var(--mondes-ombre-texte);
}
.sr-imm--mondes .entete h1 {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-titre-4);
  font-weight: var(--graisse-normale);
  line-height: var(--interligne-titre);
}
.sr-imm--mondes .entete__phrase { margin-top: var(--esp-1); font-size: var(--taille-texte); line-height: var(--interligne-chapo); color: var(--encre-douce); }

/* Fiche du royaume éclairé : en bas à gauche (ou à droite), au-dessus de la bande */
.sr-imm--mondes .fiches {
  position: absolute; z-index: var(--plan-contenu);
  left: var(--marge-ecran);
  bottom: calc(var(--esp-5) + var(--mondes-bande-h) + var(--esp-6));
  width: min(36rem, 46vw);   /* un peu plus large que le prototype : « Entrer » et « Voir les ambiances » tiennent sur une ligne */
  text-shadow: var(--mondes-ombre-texte);
}
.sr-imm--mondes .fiches[data-cote="droite"] { left: auto; right: var(--marge-ecran); }
/* v17.27 : verre dépoli local sous la fiche, aux bords fondus : les noms peints de la carte se dissolvent sous le texte, sans boîte */
.sr-imm--mondes .fiches { isolation: isolate; }
.sr-imm--mondes .fiches::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -40% -26% -28% -34%;
  -webkit-backdrop-filter: blur(14px) brightness(0.82); backdrop-filter: blur(14px) brightness(0.82);
  -webkit-mask-image: radial-gradient(68% 64% at 44% 56%, #000 32%, transparent 76%); mask-image: radial-gradient(68% 64% at 44% 56%, #000 32%, transparent 76%);
}
.sr-imm--mondes .fiche { display: grid; gap: var(--esp-2); }
.sr-imm--mondes .fiche__nom {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-titre-1);
  font-weight: var(--graisse-normale);
  line-height: var(--interligne-serre);
}
/* « Royaume de la transformation » : une ligne éditoriale en italique, sous le nom (jamais de petites capitales) */
.sr-imm--mondes .fiche__emotion {
  margin-top: var(--esp-1);
  font-family: var(--police-titre);
  font-style: italic;
  font-size: var(--taille-chapo);
  line-height: var(--interligne-titre);
  color: var(--or-clair);
}
.sr-imm--mondes .fiche__phrase {
  font-size: var(--taille-chapo);
  line-height: var(--interligne-chapo);
  color: var(--encre-douce);
  max-width: var(--mesure-phrase);
}
.sr-imm--mondes .fiche__feux { font-size: var(--taille-texte); line-height: var(--interligne-chapo); color: var(--encre); max-width: var(--mesure-phrase); }
.sr-imm--mondes .fiche__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--esp-3) var(--esp-4); margin-top: var(--esp-4); text-shadow: none; }
.sr-imm--mondes .fiche__entrer, .sr-imm--mondes .fiche__lien { display: grid; justify-items: start; gap: var(--esp-1); }
.sr-imm--mondes .fiche__actions .mention { max-width: 15rem; text-wrap: balance; text-shadow: var(--mondes-ombre-texte); padding-left: var(--esp-2); }
.sr-imm--mondes .fiche.entre > * { animation: mondes-entree var(--duree-phrase) var(--ease-out) both; }
.sr-imm--mondes .fiche.entre > :nth-child(2) { animation-delay: 40ms; }
.sr-imm--mondes .fiche.entre > :nth-child(3) { animation-delay: 80ms; }
.sr-imm--mondes .fiche.entre > :nth-child(4) { animation-delay: 120ms; }
.sr-imm--mondes .fiche.entre > :nth-child(5) { animation-delay: 160ms; }
@keyframes mondes-entree { from { opacity: 0; transform: translate3d(0, var(--montee), 0); } }

/* Bande des dix royaumes */
.sr-imm--mondes .bande {
  position: absolute; z-index: var(--plan-contenu);
  left: 0; right: 0;
  bottom: var(--esp-5);
  padding: 0 var(--marge-ecran);
  display: flex; align-items: center; gap: var(--esp-5);
}
.sr-imm--mondes .bande__liste {
  position: relative;
  flex: 0 1 auto; min-width: 0;
  display: flex; gap: var(--esp-1);
  margin: 0; padding: 0 0 var(--esp-2);
  list-style: none;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.sr-imm--mondes .bande__liste::-webkit-scrollbar { display: none; }
.sr-imm--mondes .bande__liste li { margin: 0; padding: 0; }
.sr-imm--mondes .bande__royaume {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: var(--mondes-bande-h);
  padding: 0 var(--esp-3) 0 var(--esp-1);
  border-radius: var(--rayon-pilule);
  color: var(--encre-attenuee);
  font-family: var(--police-texte);
  font-size: var(--taille-etiquette);
  letter-spacing: var(--approche-etiquette);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: var(--mondes-ombre-texte);
  transition: color var(--duree-appui) ease, background-color var(--duree-appui) ease;
}
.sr-imm--mondes .bande__royaume img {
  width: var(--mondes-badge); height: var(--mondes-badge);
  border-radius: 50%;
  opacity: 0.55;
  transition: opacity var(--duree-appui) ease;
}
.sr-imm--mondes .bande__royaume[aria-current="true"] { color: var(--or-clair); }
.sr-imm--mondes .bande__royaume[aria-current="true"] img { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .sr-imm--mondes .bande__royaume:hover { color: var(--encre); background: color-mix(in srgb, var(--nuit) 55%, transparent); }
  .sr-imm--mondes .bande__royaume[aria-current="true"]:hover { color: var(--or-clair); }
  .sr-imm--mondes .bande__royaume:hover img { opacity: 0.9; }
}
/* Flèches : seulement si la bande déborde (mobile, petites fenêtres) ; elles disent qu'il y a dix royaumes à parcourir */
.sr-imm--mondes .bande__fleche {
  display: none;
  flex: none;
  align-items: center; justify-content: center;
  width: var(--cible-min); height: var(--cible-min);
  margin-bottom: var(--esp-2);
  border-radius: var(--rayon-pilule);
  border: 1px solid var(--filet-fort);
  background: var(--voile);
  color: var(--encre);
  transition: border-color var(--duree-appui) ease, transform var(--duree-appui) var(--ease-out);
}
.sr-imm--mondes .bande__fleche:active { transform: scale(var(--appui-echelle)); }
@media (hover: hover) and (pointer: fine) { .sr-imm--mondes .bande__fleche:hover { border-color: var(--filet-actif); } }
.sr-imm--mondes .bande.deborde .bande__fleche { display: inline-flex; }
.sr-imm--mondes .bande.deborde { gap: var(--esp-2); }
.sr-imm--mondes .bande.deborde .bande__liste {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--esp-5), #000 calc(100% - var(--esp-5)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--esp-5), #000 calc(100% - var(--esp-5)), transparent 100%);
}
.sr-imm--mondes .bande__trait {
  position: absolute; left: 0; bottom: 0;
  width: 100px; height: 1px;
  background: var(--or);
  transform-origin: 0 50%;
  transform: translate3d(var(--trait-x, 0px), 0, 0) scaleX(var(--trait-l, 0));
  transition: transform var(--duree-moyenne) var(--ease-out);
  pointer-events: none;
}
.sr-imm--mondes .bande__aide { margin-left: auto; padding-bottom: var(--esp-2); font-size: var(--taille-mention); color: var(--encre-attenuee); text-shadow: var(--mondes-ombre-texte); white-space: nowrap; }
@media (max-width: 1320px) { .sr-imm--mondes .bande__aide { display: none; } }

/* Pendant le voyage, l'interface de la carte s'efface vite */
.sr-imm--mondes .entete, .sr-imm--mondes .fiches, .sr-imm--mondes .bande { transition: opacity var(--duree-courte) var(--ease-sortie); }
.en-voyage .sr-imm--mondes :is(.entete, .fiches, .bande, .carte__lucioles, .carte__brume) { opacity: 0; pointer-events: none; }
.en-voyage .sr-imm--mondes .carte__voile { opacity: 0.4; transition: opacity var(--duree-moyenne) var(--ease-out); }

/* ---------------------------------------------------------------------
   É3 : le voyage
   --------------------------------------------------------------------- */
.sr-imm--mondes .ecran--voyage { z-index: var(--plan-voyage); background: transparent; }
.sr-imm--mondes .voyage__scene { position: absolute; inset: 0; }
/* La 1re image 3D est identique à la carte de la page : elle apparaît d'un coup, sans fondu (pas de dédoublement). */
.sr-imm--mondes .voyage__scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; opacity: 0; }
.sr-imm--mondes .voyage__scene.prete canvas { opacity: 1; }
.sr-imm--mondes .voyage__scene.fixe { background: var(--nuit) center / cover no-repeat; }   /* mouvement réduit : l'affiche, immobile */
.sr-imm--mondes .voyage__vignette { position: absolute; inset: 0; pointer-events: none; background: var(--vignette); }

/* Voyage sur téléphone, sans three.js : la carte plonge (CSS), deux nuages traversent l'écran, puis l'affiche du refuge se pose. */
.sr-imm--mondes .voyage__css { position: absolute; inset: 0; overflow: hidden; display: none; pointer-events: none; }
.sr-imm--mondes .ecran--voyage.voyage--css .voyage__css { display: block; }
.sr-imm--mondes .voyage__affiche { position: absolute; inset: 0; background: var(--nuit) var(--affiche, none) 50% 50% / cover no-repeat; opacity: 0; transform: scale(1.18); transform-origin: 50% 60%; }
.sr-imm--mondes .voyage__nuage { position: absolute; left: -35%; width: 170%; top: 12%; height: 70%; background: var(--nuage, none) 50% 50% / contain no-repeat; opacity: 0; mix-blend-mode: screen; will-change: transform, opacity; }
.sr-imm--mondes .voyage__nuage--2 { top: 30%; transform: scaleX(-1); }
.sr-imm--mondes .voyage--css.joue .voyage__nuage--1 { animation: mondes-nuage-1 2.6s var(--ease-voyage) 0.25s both; }
.sr-imm--mondes .voyage--css.joue .voyage__nuage--2 { animation: mondes-nuage-2 2.6s var(--ease-voyage) 0.85s both; }
.sr-imm--mondes .voyage--css.joue .voyage__affiche { animation: mondes-pose 2.3s var(--ease-voyage) 1.75s both; }
.sr-imm--mondes .voyage__nuage { filter: brightness(0.78) sepia(0.12); }   /* nuages de nuit : jamais un écran blanc */
@keyframes mondes-nuage-1 { 0% { opacity: 0; transform: translate3d(4%, 10%, 0) scale(0.8); } 35% { opacity: 0.78; } 70% { opacity: 0.7; } 100% { opacity: 0; transform: translate3d(-14%, -8%, 0) scale(2); } }
@keyframes mondes-nuage-2 { 0% { opacity: 0; transform: translate3d(-4%, 12%, 0) scale(-0.8, 0.8); } 35% { opacity: 0.72; } 70% { opacity: 0.66; } 100% { opacity: 0; transform: translate3d(14%, -6%, 0) scale(-2, 2); } }
@keyframes mondes-pose { 0% { opacity: 0; transform: scale(1.18); } 30% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }

.sr-imm--mondes .voyage__phrases { position: absolute; left: var(--marge-ecran); bottom: var(--esp-8); width: min(36rem, calc(100% - 2 * var(--marge-ecran))); }
.sr-imm--mondes .voyage__phrase {
  position: absolute; left: 0; bottom: 0;
  max-width: var(--mesure-phrase);
  font-family: var(--police-titre);
  font-style: italic;
  font-size: var(--taille-titre-4);
  line-height: var(--interligne-titre);
  color: var(--encre);
  text-shadow: var(--mondes-ombre-texte);
  opacity: 0;
  transition: opacity var(--duree-courte) var(--ease-sortie);
}
.sr-imm--mondes .voyage__phrase.visible { opacity: 1; animation: mondes-entree var(--duree-phrase) var(--ease-out) both; transition: opacity var(--duree-phrase) var(--ease-out); }
.sr-imm--mondes .voyage__passer { position: absolute; right: var(--marge-ecran); bottom: var(--esp-6); }

/* ---------------------------------------------------------------------
   É4 : l'arrivée
   --------------------------------------------------------------------- */
.sr-imm--mondes .ecran--arrivee { z-index: var(--plan-fiche); background: var(--nuit); }
.sr-imm--mondes .arrivee__media { position: absolute; inset: 0; }
.sr-imm--mondes .arrivee__affiche, .sr-imm--mondes .arrivee__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.sr-imm--mondes .arrivee__video { opacity: 0; transition: opacity var(--duree-moyenne) var(--ease-out); }
.sr-imm--mondes .arrivee__video.joue { opacity: 1; }
.sr-imm--mondes .arrivee__voile { position: absolute; inset: 0; pointer-events: none; background: var(--voile-bas), var(--mondes-voile-gauche); opacity: 0.92; }
.sr-imm--mondes .arrivee__texte {
  position: absolute;
  left: var(--marge-ecran);
  bottom: var(--esp-7);
  width: min(38rem, calc(100% - 2 * var(--marge-ecran)));
  display: grid; gap: var(--esp-3);
  text-shadow: var(--mondes-ombre-texte);
}
.sr-imm--mondes .arrivee__titre { margin: 0; font-family: var(--police-titre); font-size: var(--taille-titre-1); font-weight: var(--graisse-normale); line-height: var(--interligne-serre); }
.sr-imm--mondes .arrivee__titre:focus { outline: none; }
.sr-imm--mondes .arrivee__phrase { font-size: var(--taille-chapo); line-height: var(--interligne-chapo); color: var(--encre-douce); max-width: var(--mesure-phrase); }
.sr-imm--mondes .arrivee__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-4); margin-top: var(--esp-4); text-shadow: none; }
.sr-imm--mondes .arrivee__actions .mention { margin-right: var(--esp-3); text-shadow: var(--mondes-ombre-texte); }
.sr-imm--mondes .ecran--arrivee.entre .arrivee__texte > * { animation: mondes-entree var(--duree-phrase) var(--ease-out) both; }
.sr-imm--mondes .ecran--arrivee.entre .arrivee__texte > :nth-child(2) { animation-delay: 80ms; }
.sr-imm--mondes .ecran--arrivee.entre .arrivee__texte > :nth-child(3) { animation-delay: 160ms; }

/* ---------------------------------------------------------------------
   Mobile dédié (390 × 844)
   --------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Valeur d'attente du dock (il est imprimé après la page) ; mondes.js la remplace par la mesure réelle. */
  .sr-imm--mondes { --mondes-dock: calc(var(--sr-dock-height, 4.3rem) + env(safe-area-inset-bottom, 0px)); }
  .sr-imm--mondes .ecran--carte, .sr-imm--mondes .ecran--carte:has(.fiches[data-cote="droite"]) { --mondes-spot-x: 50%; --mondes-spot-y: 36%; }
  .sr-imm--mondes .carte__plan {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  }
  .sr-imm--mondes .son { top: var(--esp-3); padding: 0 var(--esp-3); }
  .sr-imm--mondes .entete { top: calc(var(--esp-3) + var(--cible-min) + var(--esp-2)); max-width: calc(100% - 2 * var(--marge-ecran)); }
  .sr-imm--mondes .entete h1 { font-size: var(--taille-titre-4); }
  .sr-imm--mondes .entete__phrase { font-size: var(--taille-etiquette); }
  .sr-imm--mondes .carte__voile::before, .sr-imm--mondes .carte__voile::after { display: none; }
  .sr-imm--mondes .carte__voile {
    background:
      var(--mondes-voile-haut),
      linear-gradient(to top, var(--voile-fort) 0%, var(--voile) 30%, color-mix(in srgb, var(--nuit) 0%, transparent) 52%),
      var(--vignette);
  }
  .sr-imm--mondes .fiches, .sr-imm--mondes .fiches[data-cote="droite"] { left: var(--marge-ecran); right: var(--marge-ecran); width: auto; bottom: calc(var(--esp-3) + var(--mondes-bande-h) + var(--esp-5)); }
  .sr-imm--mondes .fiche { gap: var(--esp-1); }
  .sr-imm--mondes .fiche__nom { font-size: var(--taille-titre-2); }
  .sr-imm--mondes .fiche__emotion { font-size: var(--taille-texte); }
  .sr-imm--mondes .fiche__phrase { font-size: var(--taille-etiquette); line-height: var(--interligne-chapo); }
  .sr-imm--mondes .fiche--solenys .fiche__phrase { display: none; }   /* place comptée : sur Solenys, la phrase des feux et le bouton du voyage */
  .sr-imm--mondes .fiche__actions { margin-top: var(--esp-3); gap: var(--esp-2) var(--esp-3); }
  .sr-imm--mondes .fiche__actions .bouton { min-height: var(--cible-confort); }
  .sr-imm--mondes .fiche__entrer, .sr-imm--mondes .fiche--solenys .fiche__lien { flex: 1 1 100%; }
  .sr-imm--mondes .fiche--solenys .bouton--principal { width: 100%; }
  .sr-imm--mondes .fiche--solenys .fiche__entrer .mention { display: none; }  /* gardée pour les lecteurs d'écran (aria-describedby) */
  .sr-imm--mondes .fiche__actions .mention { max-width: none; }
  .sr-imm--mondes .bande { bottom: var(--esp-3); padding: 0 var(--esp-3); }
  .sr-imm--mondes .bande__liste { gap: var(--esp-3); padding: 0 var(--esp-4) var(--esp-2); scroll-padding-inline: var(--esp-4); scroll-snap-type: x proximity; }
  .sr-imm--mondes .bande__royaume { scroll-snap-align: center; }
  .sr-imm--mondes .bande__aide { display: none; }
  .sr-imm--mondes .voyage__phrases { bottom: calc(var(--esp-6) + var(--cible-confort) + var(--esp-5)); }
  .sr-imm--mondes .voyage__passer { right: auto; left: var(--marge-ecran); bottom: var(--esp-6); min-height: var(--cible-confort); }
  .sr-imm--mondes .arrivee__texte { bottom: var(--esp-5); }
  .sr-imm--mondes .arrivee__titre { font-size: var(--taille-titre-2); }
  .sr-imm--mondes .arrivee__phrase { font-size: var(--taille-texte); }
  .sr-imm--mondes .arrivee__actions { gap: var(--esp-2) var(--esp-3); }
  .sr-imm--mondes .arrivee__actions .bouton { min-height: var(--cible-confort); }
  .sr-imm--mondes .arrivee__actions .bouton--principal { flex: 1 1 auto; }
  .sr-imm--mondes .arrivee__actions .mention { flex-basis: 100%; order: 3; }
  .sr-imm--mondes .arrivee__voile { background: linear-gradient(to top, var(--voile-fort) 0%, var(--voile) 34%, color-mix(in srgb, var(--nuit) 0%, transparent) 62%); opacity: 1; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .sr-imm--mondes .entete__phrase { display: none; }
}

/* ---------------------------------------------------------------------
   Mouvement réduit (système ou réglage « Réduire les animations » du site) : même contenu, rien ne bouge
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vivante .sr-imm--mondes .brume--1, .vivante .sr-imm--mondes .brume--2 { animation: none; }
  .sr-imm--mondes .ile[aria-current="true"]::before { animation: none; }
  .sr-imm--mondes .carte__plan.glisse, .sr-imm--mondes .carte__plan.plonge, .sr-imm--mondes .carte__plan.recule { transition: none; }
}
html.sr-reduced .sr-imm--mondes .brume, html.sr-reduced .sr-imm--mondes .ile::before { animation: none !important; }
html.sr-reduced .sr-imm--mondes .carte__plan { transition: none !important; }

/* v17.25 : le fond peint du thème (environment-small.webp, 117 Ko, caché derrière la carte) ne se télécharge qu'une fois
   la carte affichée (classe posée par mondes.js) : sur téléphone en 4G lente, il ne ralentit plus l'arrivée de la carte. */
html:not(.mondes-pret) body.sr-reference.sr-page-atlas::before { background-image: linear-gradient(var(--sr-atmosphere-shade, #03131e), var(--sr-glass, #03131e)); }

/* v17.25 : à la première visite, le bandeau cookies du site ne cache plus la fiche ni le bouton « Entrer ».
   Ordinateur : le bandeau (une boîte de 480 px) passe en bas à DROITE, loin de la fiche et du bouton « Entrer dans ce royaume ».
   Téléphone : la fiche et « Entrer dans ce royaume » restent visibles au-dessus du bandeau ; seule la bande attend la réponse. */
@media (min-width: 761px) {
  body.sr-page-atlas #srCookieBanner .sr-cookie-inner { margin: 0 0 0 auto; }
}