/* =====================================================================
   Sam'Relaxe : socle des pages immersives (Mondes, À propos, Atelier)
   Repris des prototypes validés (site-immersif/prototypes/commun/tokens.css + base.css).
   Chargé SEULEMENT sur ces trois pages (voir inc/universe-immersif.php).
   Les polices sont celles du thème (déjà chargées) ; --ease-out reste celle du thème.
   Les règles de remise à zéro sont limitées à .sr-imm (classe du <main>) et
   écrites avec :where() pour ne jamais l'emporter sur les styles des composants.
   ===================================================================== */
:root {
  /* ---------- Couleurs de la charte (non négociables) ---------- */
  --nuit: #03131e;            /* fond de page */
  --panneau: #09212d;         /* panneaux, fiches, tiroirs */
  --panneau-haut: #0e2a38;    /* panneau survolé / champ actif (même teinte, un cran plus clair) */
  --or: #d8b571;              /* accent principal : boutons, focus, filets */
  --or-clair: #f5db9e;        /* survol des boutons, lueur des lucioles */
  --or-profond: #a8884d;      /* or pressé, traits secondaires */

  /* ---------- Encre (texte) ---------- */
  --encre: #f3ead8;           /* texte principal, blanc chaud (contraste ~15:1 sur --nuit) */
  --encre-douce: #c9bfa9;     /* texte courant secondaire (~9:1) */
  --encre-attenuee: #9c937f;  /* légendes, dates, mentions (~5,6:1, reste lisible) */
  --encre-sur-or: #03131e;    /* texte posé sur un bouton or */

  /* ---------- Filets et bordures (or translucide, jamais gris) ---------- */
  --filet: rgba(216, 181, 113, 0.18);        /* séparation discrète */
  --filet-fort: rgba(216, 181, 113, 0.38);   /* bordure de bouton secondaire, piste de curseur */
  --filet-actif: rgba(245, 219, 158, 0.72);  /* élément choisi */

  /* ---------- Voiles (pour lire du texte sur image ou vidéo) ---------- */
  --voile-leger: rgba(3, 19, 30, 0.35);
  --voile: rgba(3, 19, 30, 0.62);
  --voile-fort: rgba(3, 19, 30, 0.86);
  --voile-panneau: rgba(9, 33, 45, 0.92);    /* panneau posé sur la vidéo */
  /* Dégradé de lecture en bas d'écran (texte en bas à gauche sur image) */
  --voile-bas: linear-gradient(to top, rgba(3, 19, 30, 0.88) 0%, rgba(3, 19, 30, 0.55) 32%, rgba(3, 19, 30, 0) 62%);
  /* Vignette d'ambiance autour des images plein écran */
  --vignette: radial-gradient(120% 90% at 50% 45%, rgba(3, 19, 30, 0) 55%, rgba(3, 19, 30, 0.7) 100%);
  --selection: rgba(216, 181, 113, 0.32);

  /* ---------- Lueurs et ombres (teintées nuit ou or, jamais grises) ---------- */
  --ombre-contact: 0 1px 2px rgba(1, 8, 13, 0.6);
  --ombre-panneau: 0 2px 6px rgba(1, 8, 13, 0.45), 0 24px 60px -12px rgba(1, 8, 13, 0.7);
  --ombre-calque: 0 30px 80px -20px rgba(1, 8, 13, 0.85);  /* calques flottants de la vue éclatée */
  --halo-or: 0 0 0 1px rgba(216, 181, 113, 0.35), 0 0 24px rgba(216, 181, 113, 0.22);
  --halo-or-fort: 0 0 0 1px rgba(245, 219, 158, 0.6), 0 0 40px rgba(245, 219, 158, 0.32);
  --halo-luciole: 0 0 6px rgba(245, 219, 158, 0.9), 0 0 18px rgba(216, 181, 113, 0.45);

  /* ---------- Typographie : familles (déclarées par @font-face dans le socle) ---------- */
  --police-titre: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --police-texte: "DM", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Graisses */
  --graisse-legere: 300;
  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-forte: 600;

  /* ---------- Échelle fluide (390 px → 1440 px), rapport ~1,25 ---------- */
  --taille-mention: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);   /* 12 → 13 px : dates, noms de fichiers */
  --taille-etiquette: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); /* 13 → 14 px : boutons, étiquettes */
  --taille-texte: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);         /* 16 → 17 px : texte courant */
  --taille-chapo: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);     /* 18 → 21 px : phrase d'écran (DM Sans) */
  --taille-titre-4: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);     /* 22 → 28 px : nom d'un calque, d'un réglage */
  --taille-titre-3: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);         /* 28 → 40 px : nom d'un royaume */
  --taille-titre-2: clamp(2.25rem, 1.8rem + 2vw, 3.75rem);          /* 36 → 60 px : titre de section */
  --taille-titre-1: clamp(2.75rem, 2rem + 3.4vw, 5.5rem);           /* 44 → 88 px : titre de page (plafond < 96 px) */
  --taille-chiffre: clamp(3rem, 2.2rem + 3.6vw, 6rem);              /* chiffres datés de l'À propos */

  /* Interlignage */
  --interligne-serre: 1.04;   /* grands titres Cormorant */
  --interligne-titre: 1.15;
  --interligne-chapo: 1.45;
  --interligne-texte: 1.6;

  /* Approche (espacement des lettres) */
  --approche-titre: -0.015em;   /* grands titres : légèrement resserrés */
  --approche-normale: 0;
  --approche-etiquette: 0.04em; /* boutons */
  --approche-capitales: 0.14em; /* rares petites capitales (une seule par écran, au plus) */

  /* Longueurs de ligne */
  --mesure-phrase: 34ch;  /* la phrase unique d'un écran */
  --mesure-texte: 62ch;   /* paragraphes */

  /* ---------- Espacements (base 4 px) ---------- */
  --esp-1: 0.25rem;  /* 4 */
  --esp-2: 0.5rem;   /* 8 */
  --esp-3: 0.75rem;  /* 12 */
  --esp-4: 1rem;     /* 16 */
  --esp-5: 1.5rem;   /* 24 */
  --esp-6: 2rem;     /* 32 */
  --esp-7: 3rem;     /* 48 */
  --esp-8: 4rem;     /* 64 */
  --esp-9: 6rem;     /* 96 */
  --esp-10: 9rem;    /* 144 */
  /* Marges d'écran fluides */
  --marge-ecran: clamp(1.25rem, 0.6rem + 3vw, 4rem);          /* bord gauche/droit des textes posés sur image */
  --marge-section: clamp(4.5rem, 3rem + 7vw, 10rem);           /* respiration verticale entre sections */
  /* Zones sûres mobiles (encoche, barre de geste) */
  --sur-haut: env(safe-area-inset-top, 0px);
  --sur-bas: env(safe-area-inset-bottom, 0px);

  /* ---------- Rayons (une seule famille, ne pas mélanger) ---------- */
  --rayon-petit: 4px;    /* curseurs, cases */
  --rayon: 10px;         /* panneaux, fiches */
  --rayon-grand: 18px;   /* tiroir mobile (coins hauts) */
  --rayon-pilule: 999px; /* boutons et préréglages */

  /* ---------- Mouvement (façon Emil Kowalski) ---------- */
  /* Courbes */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* déplacements à l'écran (caméra, carte) */
  --ease-tiroir: cubic-bezier(0.32, 0.72, 0, 1);     /* fiche latérale, tiroir mobile */
  --ease-voyage: cubic-bezier(0.65, 0, 0.35, 1);     /* plongée three.js : départ et arrivée doux */
  --ease-sortie: cubic-bezier(0.4, 0, 1, 1);         /* disparitions seulement (jamais pour une entrée) */
  /* Durées */
  --duree-appui: 160ms;     /* pression d'un bouton, survol */
  --duree-courte: 240ms;    /* fondu entre écrans, apparition d'un libellé */
  --duree-moyenne: 420ms;   /* fiche, panneau, Rideau */
  --duree-longue: 900ms;    /* recadrage de la carte, recomposition */
  --duree-phrase: 600ms;    /* entrée d'une phrase d'écran */
  --duree-son: 1200ms;      /* fondu sonore minimal (jamais de coupure sèche) */
  --appui-echelle: 0.97;    /* :active des boutons */
  --montee: 12px;           /* petite montée à l'apparition (jamais plus de 16 px) */

  /* ---------- Plans (z-index sémantiques, pas de 9999) ---------- */
  --plan-fond: 0;        /* image, vidéo, canvas */
  --plan-atmo: 10;       /* brume, lucioles, vignette */
  --plan-contenu: 20;    /* textes, zones des royaumes */
  --plan-barre: 30;      /* en-tête, bouton son */
  --plan-fiche: 40;      /* fiche royaume, panneau Atelier */
  --plan-voyage: 50;     /* scène du voyage plein écran */
  --plan-rideau: 60;     /* bouton « Revenir » du Rideau */
  --plan-curseur: 70;    /* luciole qui suit la souris */

  /* ---------- Cibles et contrôles ---------- */
  --cible-min: 44px;           /* aucune cible tactile plus petite */
  --cible-confort: 48px;       /* boutons principaux sur mobile */
  --bouton-hauteur: 48px;
  --curseur-piste: 4px;        /* épaisseur des pistes de réglage */
  --curseur-pastille: 20px;    /* pastille visible (zone d'appui 44 px autour) */
  --anneau-focus: 0 0 0 2px var(--nuit), 0 0 0 4px var(--or-clair); /* focus clavier, toujours visible */
  --luciole-taille: 10px;      /* curseur luciole (souris seulement) */
}

/* ---------- Remise à zéro légère, limitée aux pages immersives ---------- */
:where(.sr-imm) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; }
:where(.sr-imm) :where(h1, h2, h3) { font-family: var(--police-titre); font-weight: var(--graisse-normale, 400); line-height: var(--interligne-titre, 1.15); letter-spacing: var(--approche-titre, -0.015em); text-wrap: balance; }
:where(.sr-imm) :where(p) { text-wrap: pretty; }
:where(.sr-imm) :where(ul[role='list'], ol[role='list']) { list-style: none; padding: 0; }
:where(.sr-imm) :where(img, picture, video, canvas, svg) { display: block; max-width: 100%; }
:where(.sr-imm) :where(img, video) { height: auto; }
:where(.sr-imm) :where(input, button, textarea, select) { font: inherit; color: inherit; }
:where(.sr-imm) :where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
:where(.sr-imm) :where(a) { color: inherit; text-underline-offset: 0.18em; }
.sr-imm [hidden] { display: none !important; }
.sr-imm ::selection { background: var(--selection); color: var(--encre); }

/* ---------- Accessibilité ---------- */
.sr-imm :focus:not(:focus-visible) { outline: none; }
.sr-imm :focus-visible { outline: 2px solid var(--or-clair, #f5db9e); outline-offset: 2px; }
main.sr-imm:focus { outline: none; }
/* Texte réservé aux lecteurs d'écran (nom du prototype ; le thème a aussi .sr-sr-only). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Curseur luciole (créé par luciole() dans base.js) ----------
   Souris seulement, jamais au tactile ni en mouvement réduit ; seulement au-dessus
   des zones [data-luciole] ; le curseur normal revient sur [data-sans-luciole]. */
/* v17.27 : le vrai curseur reste toujours visible (la luciole suivait la main avec un ressort, d'où une souris « lente ») ;
   la luciole n'est plus qu'un halo doux qui l'accompagne au-dessus des zones immersives. */
.luciole {
  position: fixed; top: 0; left: 0;
  z-index: var(--plan-curseur, 70);
  width: 0; height: 0;
  pointer-events: none;
  will-change: transform;
  contain: layout style;
  transition: opacity var(--duree-courte, 240ms) var(--ease-out, ease);
}
.luciole__point {
  --t: 22px;
  position: absolute;
  left: calc(var(--t) / -2); top: calc(var(--t) / -2);
  width: var(--t); height: var(--t);
  border-radius: 50%;
  background: radial-gradient(circle, var(--or-clair, #f5db9e) 0%, color-mix(in srgb, var(--or, #d8b571) 55%, transparent) 38%, transparent 72%);
  opacity: 0.6;
  mix-blend-mode: screen;
  transform: scale(1);
  transition: transform var(--duree-courte, 240ms) var(--ease-out, ease), opacity var(--duree-courte, 240ms) ease;
}
.luciole--cliquable .luciole__point { transform: scale(1.5); opacity: 0.8; }
.luciole--appui .luciole__point { transform: scale(0.8); transition-duration: var(--duree-appui, 160ms); }
.luciole--cachee { opacity: 0; }

/* ---------- Fondus dans une page (ecran() de base.js) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); }
.fondu-sortie { opacity: 0 !important; transition: opacity 120ms var(--ease-sortie, ease-in) !important; }
.fondu-entree { animation: sr-fondu-entree 220ms var(--ease-out, ease-out) both; }
@keyframes sr-fondu-entree { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Mouvement réduit : tout s'arrête dans les pages immersives ----------
   Exception : .garder-fondu garde un simple fondu d'opacité. */
@media (prefers-reduced-motion: reduce) {
  .sr-imm *:not(.garder-fondu), .sr-imm *::before, .sr-imm *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .sr-imm .garder-fondu { animation: none !important; transition-property: opacity !important; transition-duration: var(--duree-courte, 240ms) !important; transition-delay: 0ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .luciole { display: none !important; }
}