/* ═══════════════════════════════════════════════════════════════
   UNIVERSOUL · MOBILE.CSS v20 · applied only via media="(max-width:768px)"
   DA : Cinzel (display) · Josefin Sans (UI)
   Violet = PRIMAIRE  ·  Or = ACCENT SEULEMENT
   bg #1c1c22 · card #26273a · t1 #e6e2f4 · t2 rgba(230,226,244,.80)
═══════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --mb:    #1c1c22;
  --mc:    #26273a;
  --mp:    #7b6fc4;
  --mpl:   #9b8fd6;
  --mg:    #F2AC29;
  --mcyan: #59C3C3;
  --mmid:  #242331;
  --mt1:   #e6e2f4;
  --mt2:   rgba(230,226,244,.80);
  --mt3:   rgba(230,226,244,.58);
  --mr:    13px;
  --mnh:   58px;   /* bottom-nav height     */
  --mhh:   52px;   /* header height         */
  --msh:   42px;   /* sub-nav height        */
}

/* ── Global reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--mb);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Hide desktop chrome ────────────────────────────────────── */
.burst-menu,
.top-bar > header > nav,
.module-bar,
.hud-wrap,
footer { display: none !important; }

/* ── Floating buttons — masqués sur mobile, accessibles via ✦ overlay ── */
.lex-btn, .calc-btn { display: none !important; }

/* ── Bottom nav existant (#mob-nav) ─────────────────────────── */
#mob-nav {
  position: fixed !important;
  bottom: 0; left: 0; right: 0;
  z-index: 300 !important;
  display: flex !important;
  background: #1c1c22 !important;
  border-top: 2px solid rgba(123,111,196,.45) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.55) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  will-change: transform;
}
.mob-nav-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 2px 8px !important;
  min-height: var(--mnh) !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  gap: 5px !important;
  position: relative !important;
  -webkit-tap-highlight-color: transparent !important;
  /* séparateur vertical entre items */
  border-right: 1px solid rgba(255,255,255,.06) !important;
}
.mob-nav-item:last-child { border-right: none !important; }

/* barre accent en haut de l'item actif */
.mob-nav-item.active::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 20%; right: 20% !important;
  height: 2px !important;
  background: var(--mpl) !important;
  border-radius: 0 0 3px 3px !important;
}
.mob-nav-roman {
  font-family: 'Cinzel', serif !important;
  font-size: .76rem !important;
  color: rgba(230,226,244,.38) !important;
  letter-spacing: .05em !important;
  transition: color .2s !important;
  line-height: 1 !important;
}
.mob-nav-icon {
  font-size: 1.2rem !important;
  color: rgba(230,226,244,.62) !important;
  line-height: 1 !important;
  transition: color .2s !important;
}
.mob-nav-label {
  display: block !important;
  font-family: 'Josefin Sans', sans-serif !important;
  font-size: .6rem !important;
  color: rgba(230,226,244,.62) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  transition: color .2s !important;
  line-height: 1 !important;
}
.mob-nav-item.active .mob-nav-roman,
.mob-nav-item.active .mob-nav-icon {
  color: var(--mpl) !important;
}
.mob-nav-item.active .mob-nav-label {
  color: var(--mpl) !important;
}

/* ── Top bar: keep only logo + module text ──────────────────── */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: #1c1c22;
  border-bottom: 1px solid rgba(123,111,196,.28);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.top-bar > header {
  display: flex;
  align-items: center;
  padding: 0 13px;
  gap: 13px;
  height: var(--mhh);
}

.logo-wrap {
  position: relative;
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-rings {
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 34px;
  display: block;
}
.logo-img {
  width: 22px; height: 22px;
  position: relative;
  z-index: 1;
  display: block;
}

.header-text h1 {
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mt1);
  margin: 0;
}
#header-module {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .62rem;
  letter-spacing: .08em;
  color: var(--mt3);
  margin: 0;
}

/* ── Sub-nav chips (créées par JS, styles inline) ───────────── */
/* Pas de règles .nav-item ici — on ne touche pas au système desktop */

.m-chip {
  flex-shrink: 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--mt3);
  border: 1px solid rgba(155,143,214,.2);
  border-radius: 21px;
  padding: 5px 13px;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  transition: color .2s, background .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.m-chip.active {
  color: var(--mpl);
  background: rgba(123,111,196,.15);
  border-color: rgba(155,143,214,.5);
}

/* ── (JS bottom nav supprimé — on utilise #mob-nav HTML) ────── */

/* ── Content offset — pas de sub-nav fixe, star overlay à la place ── */
main, .content {
  padding-top: calc(var(--mhh) + 30px);
  padding-bottom: calc(var(--mnh) + env(safe-area-inset-bottom, 0px) + 8px);
  min-height: 100vh;
}

/* Mobile : main en pleine largeur (le desktop le met en 90vw + padding,
   ce qui sur-rétrécit le contenu). La marge latérale est gérée par .tab (21px),
   pour s'aligner exactement sur la home. */
main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Tab common ─────────────────────────────────────────────── */
/* Marge latérale alignée sur la home (21px) pour la cohérence */
/* backwards (pas both) : both garde l'animation appliquée à vie et Chrome
   maintient alors l'isolation transform, ce qui tue les mix-blend-mode des
   enfants. backwards : même départ, l'animation se détache une fois finie. */
.tab { padding: 21px 21px 8px; animation: mfadein .28s ease backwards; }

/* Les Origines : on masque la version desktop (constellation + cartes),
   le mobile affiche la lecture empilée générée par mobile.js */
#tab-histoire #origins { display: none !important; }

/* Footer de chapitre ("Marquer comme lu") : pas de trait de séparation,
   espace équilibré au-dessus/en-dessous, cohérent partout. */
/* Bloc de fin de chapitre (mobile) : allégé, sans cadre. Bouton compact + lien sur une ligne */
.chapter-footer {
  margin: 34px 0 0;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 13px 21px;
}
.chapter-end-label { display: none; }
.chapter-next-link {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .92rem;
  letter-spacing: .04em;
  color: #9b8fd6;
  cursor: pointer;
  text-align: center;
  transition: color .3s;
}
.chapter-next-link:active { color: #c4b8e0; }
.chapter-footer.done .chapter-next-link { pointer-events: auto; }

/* Récompense "Marquer comme lu" : gerbe d'étoiles + "+XP" qui monte */
.read-spark {
  position: fixed;
  z-index: 900;
  pointer-events: none;
  line-height: 1;
  text-shadow: 0 0 8px currentColor;
  animation: read-spark-fly .85s ease-out forwards;
}
@keyframes read-spark-fly {
  0%   { transform: translate(-50%, -50%) scale(.3) rotate(0deg);   opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(140deg); opacity: 0; }
}
.read-xp-pop {
  position: fixed;
  z-index: 901;
  pointer-events: none;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #F2AC29;
  text-shadow: 0 0 14px rgba(242,172,41,.55);
  white-space: nowrap;
  animation: read-xp-rise 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes read-xp-rise {
  0%   { transform: translate(-50%, -50%) scale(.6);  opacity: 0; }
  22%  { transform: translate(-50%, -64%) scale(1.12); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(-50%, -185%) scale(1);  opacity: 0; }
}
/* "Marquer comme lu" : bouton compact (largeur auto), aligné avec le lien chapitre suivant */
.chapter-read-btn {
  display: inline-flex;
  width: auto;
  justify-content: center;
  border-radius: 8px;
  background: var(--mc);
  border-color: rgba(123,111,196,.18);
  padding: 13px 21px;
}
.chapter-read-btn.unlocked {
  border-color: rgba(155,143,214,.5);
}
@keyframes mfadein {
  from { opacity:0; transform:translateY(10px); }
  /* none (pas translateY(0)) : un transform retenu par fill:both isole le
     rendu des enfants et tue les mix-blend-mode (fond noir des illustrations) */
  to   { opacity:1; transform:none; }
}
.stitle {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  color: var(--mt1);
  letter-spacing: .06em;
  margin-bottom: 8px;
  line-height: 1.3;
}
.sdesc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .88rem;
  color: var(--mt2);
  line-height: 1.75;
  margin-bottom: 21px;
}

/* ═══════════════════════════════════════════════════════════════
   SWIPE DECK — generic
═══════════════════════════════════════════════════════════════ */
.m-deck-wrap {
  position: relative;
  overflow: visible;
  touch-action: pan-y;
  margin-bottom: 5px;
  height: 55dvh;
}
/* .m-deck plus utilisé — supprimé */
.m-card {
  box-sizing: border-box;
  background: var(--mc);
  border-radius: 21px;
  border: 1px solid rgba(123,111,196,.13);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.m-swipe-hint {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mt3);
  text-align: center;
  padding: 0 0 8px;
}
.m-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 13px 0 5px;
  flex-wrap: wrap;
}
.m-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(155,143,214,.22);
  transition: background .22s, transform .22s;
}
.m-dot.active {
  background: var(--mpl);
  transform: scale(1.45);
}

/* ═══════════════════════════════════════════════════════════════
   I · LES ORIGINES — era cards
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   LES ORIGINES — Mode Lecture
═══════════════════════════════════════════════════════════════ */
.m-era-blocks {
  display: flex;
  flex-direction: column;
  margin-top: 34px;
  margin-bottom: 0;
}
.m-era-block {
  padding: 8px 0;
}
.m-era-block:first-child {
  padding-top: 0;
}
.m-era-date {
  font-family: 'Cinzel', serif;
  font-size: .63rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.m-era-title {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--mt1);
  margin-bottom: 21px;
}
.m-era-phrase {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.5;
  color: #9b8fd6;
  margin-bottom: 21px;
}
.m-era-body {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--mt2);
}
.m-era-body p { margin: 0 0 13px; }
.m-era-body p:last-child { margin-bottom: 0; }
.m-era-hl { color: var(--era-col); font-weight: 500; }
.m-era-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 21px 0;
  color: #F2AC29;
  font-size: 1rem;
  letter-spacing: 0.2em;
}
.m-era-sep::before,
.m-era-sep::after {
  content: '';
  flex: 1;
  max-width: 89px;
  height: 1px;
  background: linear-gradient(to right, transparent, #F2AC2980, transparent);
}
.m-era-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 21px; }
.m-era-tag {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .63rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--mt3);
}

/* ── Mode bar (Lecture / Narratif) ──────────────────────────── */
.m-mode-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 21px;
}
.m-mode-btn {
  flex: 1;
  padding: 8px 6px;
  border-radius: 21px;
  border: 1px solid rgba(123,111,196,0.25);
  background: transparent;
  color: var(--mt3);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.m-mode-btn.active {
  background: rgba(123,111,196,0.15);
  color: var(--mpl);
  border-color: rgba(123,111,196,0.5);
}
/* Barre de modes flottante (test des rendus, par-dessus le contenu) */
.m-mode-bar-float {
  position: fixed;
  left: 50%;
  top: 84px;
  transform: translateX(-50%);
  z-index: 60;
  width: auto;
  margin: 0;
  padding: 5px;
  gap: 5px;
  border-radius: 34px;
  background: rgba(28,28,34,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(123,111,196,0.22);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.m-mode-bar-float .m-mode-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-color: transparent;
  background: transparent;
}
.m-mode-bar-float .m-mode-btn.active {
  background: rgba(123,111,196,0.2);
  border-color: rgba(123,111,196,0.5);
}

/* ── Swipe Cards (Mode Interactif — Le Principe et suivants) ── */
.m-swipe-deck {
  position: relative;
  overflow: hidden;
}
.m-swipe-card {
  display: none;
  position: relative;
  background: #26273a;
  border-radius: 13px;
  padding: 21px;
  overflow: hidden;
}
.m-swipe-card.active {
  display: block;
  animation: m-card-in-next 0.28s ease;
}
.m-swipe-card.active[data-dir="prev"] {
  animation: m-card-in-prev 0.28s ease;
}
@keyframes m-card-in-next {
  from { opacity: 0; transform: translateX(34px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes m-card-in-prev {
  from { opacity: 0; transform: translateX(-34px); }
  to   { opacity: 1; transform: translateX(0); }
}
.m-swipe-num-bg {
  position: absolute;
  top: -13px;
  right: -8px;
  font-family: 'Cinzel', serif;
  font-size: 7rem;
  line-height: 1;
  color: rgba(123,111,196,0.07);
  pointer-events: none;
  user-select: none;
}
.m-swipe-card-inner { position: relative; z-index: 1; }
.m-swipe-label {
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mpl);
  margin-bottom: 13px;
}
.m-swipe-keyphrase {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--mt1);
  margin-bottom: 21px;
}
.m-swipe-body {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .88rem;
  line-height: 1.8;
  color: var(--mt2);
}
.m-swipe-body strong { color: var(--mpl); font-weight: 500; }
.m-swipe-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 21px;
}
.m-swipe-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(155,143,214,0.2);
  transition: background 0.2s, transform 0.2s;
}
.m-swipe-dot.active {
  background: var(--mpl);
  transform: scale(1.4);
}

/* ── Le Principe : Interactif immersif (plein écran) ─────────── */
.m-imm {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  flex-direction: column;
  background: var(--mb);
}
.m-imm.open { display: flex; }
.m-imm-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 18% 26%, rgba(230,226,244,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 74% 12%, rgba(155,143,214,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 41% 79%, rgba(230,226,244,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 87% 58%, rgba(155,143,214,0.4) 0%, transparent 100%);
  background-size: 233px 233px;
}
.m-imm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 21px;
  position: relative;
  z-index: 1;
}
.m-imm-title {
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mpl);
}
.m-imm-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(155,143,214,0.3);
  background: transparent;
  color: var(--mt2);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.m-imm-stage {
  flex: 1;
  position: relative;
  z-index: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.m-imm-scene {
  display: none;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: 8px 21px 21px;
  animation: m-imm-in .4s ease both;
}
.m-imm-scene.on { display: flex; }
@keyframes m-imm-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.m-imm-num {
  font-family: 'Cinzel', serif;
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--mpl);
  margin-bottom: 5px;
}
.m-imm-label {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #59C3C3;
  margin-bottom: 13px;
}
.m-imm-instr {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--mt1);
  margin-bottom: 21px;
}
.m-imm-zone { position: relative; }
/* Révélation : keyphrase + texte court, apparaît quand le geste est accompli */
.m-imm-reveal {
  visibility: hidden;
  margin-top: 21px;
}
.m-imm-reveal.on {
  visibility: visible;
  animation: m-imm-rise .55s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes m-imm-rise {
  from { opacity: 0; transform: translateY(13px); }
  to   { opacity: 1; transform: translateY(0); }
}
.m-imm-key {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  line-height: 1.45;
  font-style: italic;
  color: #F2AC29;
  margin-bottom: 8px;
}
.m-imm-txt {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--mt2);
  margin-bottom: 21px;
}
.m-imm-next {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 13px 34px;
  border-radius: 21px;
  border: 1px solid rgba(155,143,214,0.5);
  background: rgba(123,111,196,0.15);
  color: var(--mpl);
  font-family: 'Josefin Sans', sans-serif;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.m-imm-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 13px 0 21px;
  position: relative;
  z-index: 1;
}
.m-imm-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(155,143,214,0.25);
  transition: background .25s, transform .25s;
}
.m-imm-dot.on {
  background: var(--mpl);
  transform: scale(1.4);
}

/* 01 : le soleil et la terre */
.m-imm-sky {
  width: 100%;
  border-radius: 13px;
  background: #242331;
  touch-action: none;
}
.m-imm-sky .i-sun { cursor: grab; }
.m-imm-sky-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.m-imm-sky-meta .i-season { color: #F2AC29; }
.m-imm-sky-meta .i-tide   { color: #59C3C3; }

/* 02 : le ciel qui tourne */
.m-imm-wheelbox {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 34px auto 34px; /* place pour les points cardinaux N et S */
}
.m-imm-skywheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(155,143,214,0.3);
  background:
    radial-gradient(5px 5px at 50% 8%,  #F2AC29 0%, #F2AC29 55%, transparent 100%),
    radial-gradient(13px 13px at 50% 8%, rgba(242,172,41,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 22%, #e6e2f4 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 55%, #9b8fd6 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 84%, #e6e2f4 0%, transparent 100%),
    radial-gradient(1px 1px at 32% 88%, #9b8fd6 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 62%, #e6e2f4 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 28%, #e6e2f4 0%, transparent 100%),
    #242331;
  /* rotation pilotée en JS (transform inline) : source unique pour visuel + capture */
}
.m-imm-skywheel-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--mpl);
  font-size: 1.1rem;
}
/* Points cardinaux fixes : le référentiel qui rend la rotation lisible */
.m-imm-card {
  position: absolute;
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  letter-spacing: 0;
  color: #59C3C3;
}
.m-imm-card-n { top: -21px;  left: 50%; transform: translateX(-50%); }
.m-imm-card-s { bottom: -21px; left: 50%; transform: translateX(-50%); }
.m-imm-card-e { right: -21px; top: 50%; transform: translateY(-50%); }
.m-imm-card-o { left: -21px;  top: 50%; transform: translateY(-50%); }
.m-imm-act {
  display: block;
  margin: 0 auto;
  padding: 13px 34px;
  border-radius: 21px;
  border: 1px solid rgba(242,172,41,0.5);
  background: rgba(242,172,41,0.15);
  color: #F2AC29;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.m-imm-snaps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 13px;
}
.m-imm-snap {
  padding: 8px 13px;
  border-radius: 21px;
  border: 1px solid rgba(155,143,214,0.3);
  background: var(--mc);
  font-family: 'Josefin Sans', sans-serif;
  font-size: .78rem;
  color: var(--mt1);
  animation: m-imm-rise .4s ease both;
}

/* 03 : la résonance */
.m-imm-reso {
  display: flex;
  justify-content: center;
  gap: 34px;
  padding: 21px 0;
}
.m-imm-fork {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  cursor: pointer;
}
.m-imm-fork-core {
  width: 89px;
  height: 89px;
  border-radius: 50%;
  border: 1px solid rgba(155,143,214,0.4);
  background: var(--mc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--mpl);
}
.m-imm-fork-name {
  font-family: 'Cinzel', serif;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mt2);
}
.m-imm-fork.vibre .m-imm-fork-core {
  animation: m-imm-vibre .9s ease both;
}
@keyframes m-imm-vibre {
  0%   { box-shadow: 0 0 0 0 rgba(155,143,214,0.5); transform: scale(1); }
  18%  { transform: scale(1.07); }
  36%  { transform: scale(0.98); }
  54%  { transform: scale(1.04); }
  72%  { transform: scale(1); }
  100% { box-shadow: 0 0 0 34px rgba(155,143,214,0); transform: scale(1); }
}

/* 04 : changer d'échelle */
.m-imm-views {
  position: relative;
  height: 230px;
  margin-bottom: 13px;
}
.m-imm-views svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .15s linear, transform .15s linear;
  pointer-events: none; /* le svg agrandi (scale 1.6) déborde et recouvrait le slider */
}
.m-imm-views .i-scale-name {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 3px;
  fill: #9b8fd6;
  text-anchor: middle;
}
.m-imm-range {
  width: 100%;
  height: 34px;
  accent-color: #9b8fd6;
  touch-action: none; /* sinon le drag du curseur est volé par le scroll du conteneur */
}

/* Final : l'axiome */
.m-imm-final .m-imm-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.m-imm-axiome {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  line-height: 1.6;
  color: #F2AC29;
  margin-bottom: 13px;
}
.m-imm-axiome-src {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mt3);
  margin-bottom: 34px;
}
.m-imm-axiome-note {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--mt2);
  max-width: 280px;
  margin: 0 0 34px;
}
.m-imm-final .m-imm-next { align-self: center; }
.m-imm-final .m-imm-reveal { display: none; }

/* Validation sur place : coche + XP, avant de fermer */
.m-imm-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 21px;
  animation: m-imm-rise .5s cubic-bezier(0.22,1,0.36,1) both;
}
.m-imm-reward-check {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 2px solid #F2AC29;
  color: #F2AC29;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: m-imm-pop .55s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes m-imm-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.m-imm-reward-xp {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #F2AC29;
  animation: m-imm-rise .6s .15s cubic-bezier(0.22,1,0.36,1) both;
}
.m-imm-reward-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mt2);
}

/* Narratif placeholder */
.m-narratif-soon {
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  background: rgba(123,111,196,0.07);
  border: 1px solid rgba(123,111,196,0.18);
  border-radius: 8px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .78rem;
  color: #9090b0;
  margin-bottom: 21px;
}

/* ── Mode Interactif (Les Origines sections) ─────────────────── */
.m-era-illu {
  width: 100%;
  max-height: 210px;
  object-fit: contain;
  object-position: center;
  margin-bottom: 13px;
  mix-blend-mode: screen;    /* dessin clair sur fond noir : screen retire le noir */
}
.m-era-sections {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--mt2);
}
.m-era-section {
  border-left: 2px solid var(--era-col);
  padding: 5px 0 5px 13px;
  margin-bottom: 13px;
}
.m-era-section:last-child { margin-bottom: 0; }
.m-era-tags-bar {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 21px;
}
.m-era-tag {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--era-col);
  border: 1px solid var(--era-col);
  border-radius: 21px;
  padding: 4px 10px;
}

/* ── FOG OF WAR ─────────────────────────────────────────────── */

/* Niveau cue SRT (précis) : 1 span inline par bloc SRT */
.m-fog {
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.m-fog.fogged,
.m-fog.fogged * {
  color: transparent !important;
  text-shadow: 0 0 14px rgba(155,143,214,0.22);
  user-select: none;
}

/* Niveau phrase (fallback pré-SRT) */
.m-era-p {
  transition: color 0.9s ease, text-shadow 0.9s ease;
}
.m-era-p.m-era-fog,
.m-era-p.m-era-fog * {
  color: transparent !important;
  text-shadow: 0 0 14px rgba(155,143,214,0.22);
  user-select: none;
}

/* ── Lecteur audio ──────────────────────────────────────────── */
.m-era-player {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 13px 0;
  padding: 8px 13px;
  background: rgba(123,111,196,0.06);
  border-radius: 21px;
  border: 1px solid rgba(123,111,196,0.2);
}
.m-era-play-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mp);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-era-speed-btn {
  background: transparent;
  border: 1px solid rgba(123,111,196,0.3);
  border-radius: 5px;
  color: var(--mt3);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.6rem;
  cursor: pointer;
  flex-shrink: 0;
  padding: 3px 5px;
  min-width: 26px;
  text-align: center;
}
.m-era-progress {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: visible;
  position: relative;
  cursor: pointer;
}
.m-era-progress-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  background: var(--mpl);
  border-radius: 50%;
  pointer-events: none;
  transition: left 0.1s linear;
  left: 0%;
}
.m-era-progress-fill {
  height: 100%;
  background: var(--mpl);
  border-radius: 3px;
  width: 0%;
  transition: width 0.1s linear;
}
.m-era-time {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.63rem;
  color: var(--mt3);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   II · LE PRINCIPE — editorial scroll
═══════════════════════════════════════════════════════════════ */
.principe-blocks {
  display: flex;
  flex-direction: column;
  gap: 34px;  /* texte à plat : plus d'air entre les sections (plus de cadre pour les séparer) */
  margin-top: 21px;
  margin-bottom: 0;
}
/* Plus AUCUN texte dans des cadres sur mobile : sections à plat.
   !important pour écraser les styles inline (ex bg/bordure des blocs "à retenir"). */
.principe-block {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.principe-num {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  color: var(--mpl);
  line-height: 1;
  margin-bottom: 8px;
}
.principe-label {
  font-family: 'Cinzel', serif;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt1);
  margin-bottom: 13px;
}
.principe-body {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .9rem;
  line-height: 1.82;
  color: var(--mt2);
}
.axiome {
  margin: 21px 0 21px;
  padding: 21px 21px;
  border: 1px solid rgba(212,160,32,.3);
  border-radius: var(--mr);
  background: rgba(212,160,32,.04);
  text-align: center;
}
.axiome-text {
  font-family: 'Cinzel', serif;
  font-size: .98rem;
  color: var(--mg);
  line-height: 1.7;
  margin-bottom: 8px;
}
.axiome-src {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .7rem;
  color: var(--mt3);
  letter-spacing: .06em;
}
.principe-note {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .86rem;
  line-height: 1.78;
  color: var(--mt2);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   II · LES ÉLÉMENTS — sélecteur mobile + cartes par section
═══════════════════════════════════════════════════════════════ */
.m-elem-sel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 21px 0 5px;
}
.m-elem-sel-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 13px 5px;
  border-radius: 13px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s;
}
.m-esel-glyph { font-size: 1.5rem; line-height: 1; }
.m-esel-lbl {
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .08em;
  color: var(--mt2);
}

/* ── Sélecteur éléments 2×2 ─────────────────────────────────── */
.m-elem-sel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin: 21px 0 5px;
}
.m-elem-sel-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 21px 8px;
  border-radius: 21px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s;
}
.m-esel-glyph { font-size: 2.6rem; line-height: 1; }
.m-esel-lbl {
  font-family: 'Cinzel', serif;
  font-size: .86rem;
  letter-spacing: .1em;
  color: var(--mt1);
}
.m-esel-signs {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .6rem;
  color: var(--mt3);
  letter-spacing: .05em;
  text-align: center;
  line-height: 1.5;
}

/* espace entre sélecteur et deck */
.m-elem-deck-ct { margin-top: 13px; }

/* ── Sélecteur Modalités : empilé (1 colonne) + plus grand ───── */
.m-mod-sel {
  grid-template-columns: 1fr;
  gap: 13px;
  margin: 21px 0 5px;
}
.m-mod-sel .m-elem-sel-btn { padding: 21px; gap: 5px; }
.m-mod-sel .m-esel-lbl { font-size: 1.05rem; }
.m-mod-sel .m-esel-signs { font-size: .72rem; }

/* ── Sélecteur Signes : grille de 12 tuiles carrées ─────────── */
.m-signe-sel {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 21px 0 5px;
}
.m-signe-sel .m-elem-sel-btn {
  aspect-ratio: 1 / 1;
  padding: 8px;
  gap: 5px;
  border-radius: 13px;
  justify-content: center;
  min-width: 0; /* empêche un label long d'élargir la colonne → plus de débordement de grille */
}
.m-signe-sel .m-esel-glyph { font-size: 1.9rem; }
.m-signe-sel .m-esel-lbl { font-size: .72rem; text-align: center; line-height: 1.25; }

/* Cartes Signe : archétype (carte 1) + paires clé/valeur (cartes 3-4) + axe */
.m-signe-arch-c {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt3);
  margin-bottom: 13px;
}
.m-signe-kv { margin-bottom: 13px; }
.m-signe-k {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mt3);
  margin-bottom: 5px;
}
.m-signe-v {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--mt2);
}
.m-signe-axe {
  border-left: 2px solid;
  padding-left: 13px;
  font-family: 'Josefin Sans', sans-serif;
  font-style: italic;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--mt2);
  margin-top: 8px;
}

/* Carte 1 Modalités : la phrase qui fait comprendre l'essentiel */
.m-mod-punch {
  font-family: 'Josefin Sans', sans-serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--mt1);
  margin: 5px 0 21px;
  max-width: 26ch;
}

/* ── Overlay éléments ────────────────────────────────────────── */
.m-elem-ov {
  position: fixed;
  inset: 0;
  z-index: 510;
  background: rgba(28,28,34,.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  padding: 21px;
  padding-top: calc(var(--mhh) + 16px);
  padding-bottom: calc(var(--mnh) + 16px);
}
.m-elem-ov.open {
  opacity: 1;
  pointer-events: auto;
}
.m-elem-ov-close {
  position: absolute;
  top: calc(var(--mhh) + 10px);
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(155,143,214,.35);
  background: rgba(123,111,196,.12);
  color: var(--mt1);
  font-size: .88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.m-elem-ov-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 5px;
}
.m-elem-ov-deck {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Cartes tarot dans l'overlay : ratio 60:113 */
.m-elem-ov-deck .m-deck-wrap {
  height: auto;
  aspect-ratio: 60 / 113;
  width: min(260px, calc(100vw - 80px));
}
.m-elem-ov-deck .m-card {
  position: absolute;
  inset: 0;
}
.m-elem-ov-deck .m-swipe-hint {
  width: 100%;
  text-align: center;
}
.m-elem-ov-deck .m-dots {
  width: 100%;
}

/* cartes par section */
.m-ecard-pad {
  padding: 21px 21px 34px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* titre élément en haut des cartes 2-6 (pas de pillule) */
.m-ecard-elem-hd {
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 21px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  opacity: .9;
}

/* carte 1 — identité centrée V+H via flex chain */
.m-ecard-identity {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.m-ecard-glyph { font-size: 3.4rem; line-height: 1; margin-bottom: 13px; }
.m-ecard-name {
  font-family: 'Cinzel', serif;
  font-size: 1.65rem;
  letter-spacing: .06em;
  margin-bottom: 21px;
}
.m-ecard-badges { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-bottom: 13px; }
.m-ecard-badge {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .72rem;
  letter-spacing: .07em;
  padding: 5px 13px;
  border-radius: 21px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--mt2);
}
.m-ecard-opp {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .72rem;
  color: var(--mt3);
  margin-bottom: 13px;
}
.m-ecard-signs {
  font-family: 'Cinzel', serif;
  font-size: .92rem;
  letter-spacing: .08em;
}

.m-ecard-body {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .92rem;
  line-height: 1.9;
  color: var(--mt2);
}

.m-ecard-slabel {
  font-family: 'Cinzel', serif;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 13px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.m-ecard-stext {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--mt2);
}

.m-ecard-axe {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--mt2);
  font-style: italic;
  padding: 21px 21px;
  border-left: 3px solid;
  border-radius: 0 8px 8px 0;
  background: rgba(255,255,255,.02);
}

.m-ecard-dual { display: flex; flex-direction: column; gap: 13px; }
.m-ecard-dual-item { padding: 21px; border-radius: 13px; }
.m-ecard-excess { background: rgba(224,112,80,.06); border: 1px solid rgba(224,112,80,.2); }
.m-ecard-manque { background: rgba(106,170,191,.06); border: 1px solid rgba(106,170,191,.2); }
.m-ecard-dlabel {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mt3);
  margin-bottom: 8px;
}
.m-ecard-dtext {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .88rem;
  line-height: 1.78;
  color: var(--mt2);
}

/* carte ombre — label + box */
.m-ecard-shadow-wrap { display: flex; flex-direction: column; gap: 13px; }
.m-ecard-shadow {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .9rem;
  font-style: italic;
  color: var(--mt2);
  line-height: 1.88;
  padding: 21px 21px;
  background: rgba(255,255,255,.025);
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.07);
}

/* ═══════════════════════════════════════════════════════════════
   II · LES ÉLÉMENTS — 2×2 tap zones (desktop, masqué sur mobile)
═══════════════════════════════════════════════════════════════ */
.elem-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 21px;
}
.elem-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 13px 8px;
  border-radius: 13px;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  gap: 5px;
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}
.elem-glyph   { font-size: 1.8rem; }
.elem-btn-name {
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  letter-spacing: .1em;
}
.elem-btn-signs {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .6rem;
  text-align: center;
  color: var(--mt3);
  line-height: 1.5;
}
.elem-panel { display: none; }
.elem-panel.active { display: block; }
.elem-split {
  display: flex;
  flex-direction: column;
  gap: 13px;
  border: 1px solid;
  border-radius: var(--mr);
  padding: 21px 13px;
}
.elem-dec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.elem-big-glyph { font-size: 3rem; }
.elem-big-name {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  letter-spacing: .1em;
}
.elem-pol {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.elem-pol-badge {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .63rem;
  letter-spacing: .07em;
  padding: 3px 8px;
  border-radius: 21px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--mt2);
}
.elem-opp {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--mt3);
}
.elem-signs-label {
  font-family: 'Cinzel', serif;
  font-size: .73rem;
  letter-spacing: .1em;
  color: currentColor;
  margin-bottom: 8px;
}
.elem-body {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .9rem;
  line-height: 1.82;
  color: var(--mt2);
  margin-bottom: 13px;
}
.elem-detail { margin-bottom: 13px; }
.elem-detail-label {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mt3);
  margin-bottom: 5px;
}
.elem-detail-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .84rem;
  line-height: 1.75;
  color: var(--mt2);
}
.elem-axe {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .85rem;
  line-height: 1.78;
  color: var(--mt2);
  border-left: 3px solid;
  padding-left: 13px;
  margin-bottom: 13px;
}
.elem-duality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 13px;
}
.elem-dual-item {
  padding: 13px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
}
.elem-dual-label {
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt3);
  margin-bottom: 5px;
}
.elem-dual-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .77rem;
  line-height: 1.65;
  color: var(--mt2);
}
.elem-dual-excess  { background: rgba(224,112,80,.05); }
.elem-dual-deficit { background: rgba(106,170,191,.05); }
.elem-shadow {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem;
  font-style: italic;
  color: var(--mt3);
  line-height: 1.65;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════════════════════════════
   II · LES MODALITÉS — accordion
═══════════════════════════════════════════════════════════════ */
.modalite {
  border-radius: var(--mr);
  margin-bottom: 13px;
  overflow: hidden;
  border: 1px solid rgba(155,143,214,.18);
}
.modalite.cardinal { border-color: rgba(212,160,32,.28); }
.modalite.fixe     { border-color: rgba(200,112,88,.28); }
.modalite.mutable  { border-color: rgba(155,143,214,.28); }

.modalite-name {
  font-family: 'Cinzel', serif;
  font-size: 1.08rem;
  color: var(--mt1);
  letter-spacing: .08em;
  padding: 13px 21px 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.modalite-saison {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--mt3);
  text-transform: uppercase;
  padding: 0 21px 13px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.modalite-body {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .88rem;
  line-height: 1.82;
  color: var(--mt2);
  padding: 13px 21px;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 21px 13px;
}
.pill {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .7rem;
  padding: 5px 13px;
  border-radius: 21px;
  border: 1px solid rgba(123,111,196,.3);
  color: var(--mpl);
  background: rgba(123,111,196,.08);
}

/* ═══════════════════════════════════════════════════════════════
   II · LA RECETTE — table responsive
═══════════════════════════════════════════════════════════════ */
#tab-combinaisons > div[style] {
  font-size: .84rem !important;
}
.combo-table {
  width: 100%;
  border-collapse: collapse;
}
.combo-table th {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mpl);
  padding: 8px 5px;
  border-bottom: 1px solid rgba(123,111,196,.2);
  text-align: center;
}
.combo-table td {
  padding: 8px 5px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-align: center;
}
.elem-label {
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .05em;
  text-align: left !important;
  white-space: nowrap;
}
.signe-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.signe-glyph { font-size: 1.2rem; color: var(--mpl); }
.signe-nom {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .62rem;
  color: var(--mt2);
}

/* ═══════════════════════════════════════════════════════════════
   II · LES 12 SIGNES — hide desktop zodiac, show swipe deck
═══════════════════════════════════════════════════════════════ */
#tab-signes .zodiac-intro-grid,
#tab-signes .zodiac-wrap { display: none !important; }

.m-signe-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 21px 21px 13px;
  border-radius: var(--mr);
  margin-bottom: 13px;
  border: 1px solid;
}
.m-signe-glyph {
  font-size: 3.4rem;
  line-height: 1;
  margin-bottom: 8px;
}
.m-signe-name {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  letter-spacing: .08em;
  color: var(--mt1);
  margin-bottom: 5px;
}
.m-signe-arch {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mt3);
  margin-bottom: 8px;
}
.m-signe-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.m-signe-badge {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .63rem;
  padding: 3px 8px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--mt2);
  background: rgba(255,255,255,.04);
}
.m-signe-phrase {
  font-family: 'Cinzel', serif;
  font-size: .94rem;
  font-style: italic;
  text-align: center;
  padding: 13px 21px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  margin-bottom: 13px;
  line-height: 1.6;
}
.m-signe-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .87rem;
  line-height: 1.85;
  color: var(--mt2);
  margin-bottom: 13px;
}
.m-signe-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.m-signe-tag {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .62rem;
  letter-spacing: .06em;
  padding: 5px 8px;
  border-radius: 13px;
  border: 1px solid rgba(155,143,214,.2);
  color: var(--mt3);
}

/* ═══════════════════════════════════════════════════════════════
   II · DOMINANTES
═══════════════════════════════════════════════════════════════ */
.dominantes-section { margin-bottom: 21px; }
.dominantes-label {
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mpl);
  margin-bottom: 13px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(123,111,196,.15);
}
.dominantes-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dominante-card {
  background: rgba(255,255,255,.03);
  border-radius: 13px;
  padding: 13px;
}
.dominante-glyph { font-size: 1.4rem; margin-bottom: 5px; }
.dominante-name {
  font-family: 'Cinzel', serif;
  font-size: .86rem;
  letter-spacing: .08em;
  margin-bottom: 5px;
}
.dominante-signes {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .68rem;
  color: var(--mt3);
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.dominante-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .85rem;
  line-height: 1.75;
  color: var(--mt2);
}

/* ═══════════════════════════════════════════════════════════════
   III · INTRO PLANÈTES — scroll cards
═══════════════════════════════════════════════════════════════ */
.zodiac-intro-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 13px;
  margin-bottom: 0;
}
.zodiac-intro-card {
  background: rgba(123,111,196,.07);
  border: 1px solid rgba(123,111,196,.16);
  border-radius: var(--mr);
  padding: 21px 13px;
}
.zodiac-intro-label {
  font-family: 'Cinzel', serif;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mpl);
  margin-bottom: 8px;
}
.zodiac-intro-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .87rem;
  line-height: 1.8;
  color: var(--mt2);
}

/* ═══════════════════════════════════════════════════════════════
   III · LES 10 PLANÈTES — swipe deck
═══════════════════════════════════════════════════════════════ */
#tab-planetes-liste .planet-section-header,
#tab-planetes-liste .planetes-grid,
#tab-planetes-liste .planete-inline-panel { display: none !important; }

.m-planete-header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 21px 13px;
  border-radius: var(--mr);
  margin-bottom: 13px;
  border: 1px solid;
}
.m-planete-glyph { font-size: 2.8rem; line-height: 1; flex-shrink: 0; }
.m-planete-info  { flex: 1; min-width: 0; }
.m-planete-name {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  letter-spacing: .06em;
  color: var(--mt1);
  margin-bottom: 3px;
}
.m-planete-cycle {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .68rem;
  color: var(--mt3);
  letter-spacing: .08em;
  margin-bottom: 5px;
}
.m-planete-governe {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .74rem;
  color: var(--mt2);
  line-height: 1.5;
}
.m-planete-type {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--mt3);
  margin-bottom: 13px;
}
.m-planete-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .87rem;
  line-height: 1.85;
  color: var(--mt2);
}
.m-planete-digs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.m-dig-label {
  font-family: 'Cinzel', serif;
  font-size: .54rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mt3);
  margin-bottom: 3px;
}
.m-dig-val {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .8rem;
  color: var(--mt2);
}

/* ═══════════════════════════════════════════════════════════════
   III · DIGNITÉS — hide table, show cards
═══════════════════════════════════════════════════════════════ */
#tab-planetes-dignites .dignites-table { display: none !important; }
.dignites-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 21px;
}
.dignite-card {
  padding: 13px;
  border-radius: 13px;
  border: 1px solid;
}
.dignite-card-name {
  font-family: 'Cinzel', serif;
  font-size: .86rem;
  letter-spacing: .1em;
  margin-bottom: 8px;
}
.dignite-card-body {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .85rem;
  line-height: 1.75;
  color: var(--mt2);
}
#m-dignites-cards { margin-top: 5px; }

/* ═══════════════════════════════════════════════════════════════
   III · POINTS & ASTÉROÏDES
═══════════════════════════════════════════════════════════════ */
#points-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#point-panel {
  margin-top: 13px;
  padding: 21px 13px;
  background: rgba(123,111,196,.07);
  border: 1px solid rgba(123,111,196,.18);
  border-radius: var(--mr);
}
.planete-hint {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .8rem;
  color: var(--mt3);
  text-align: center;
  padding: 5px 0;
}

/* ═══════════════════════════════════════════════════════════════
   III · RÉTROGRADES
═══════════════════════════════════════════════════════════════ */
#retrogrades-grid {
  margin-top: 21px;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   IV · INTRO MAISONS
═══════════════════════════════════════════════════════════════ */
.maison-trinity {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 21px;
}
.trinity-item {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  padding: 13px 8px;
  text-align: center;
}
.trinity-item.trinity-center {
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}
.trinity-icon { font-size: 1.3rem; margin-bottom: 5px; }
.trinity-label {
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .08em;
  color: var(--mpl);
  margin-bottom: 5px;
}
.trinity-q {
  font-family: 'Cinzel', serif;
  font-size: .75rem;
  color: var(--mt1);
  margin-bottom: 5px;
}
.trinity-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .62rem;
  color: var(--mt3);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   IV · LES 12 MAISONS — swipe deck
═══════════════════════════════════════════════════════════════ */
#tab-maisons-liste .maisons-layout { display: none !important; }

.m-maison-num {
  font-family: 'Cinzel', serif;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: .04em;
  padding: 21px;
  text-align: center;
  border-radius: var(--mr);
  margin-bottom: 13px;
}
.m-maison-name {
  font-family: 'Cinzel', serif;
  font-size: 1.18rem;
  letter-spacing: .06em;
  color: var(--mt1);
  text-align: center;
  margin-bottom: 5px;
}
.m-maison-short {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 13px;
  opacity: .85;
}
.m-maison-domain {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .75rem;
  letter-spacing: .07em;
  color: var(--mt3);
  text-align: center;
  margin-bottom: 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.m-maison-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--mt2);
  margin-bottom: 13px;
}
.m-maison-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.m-maison-theme {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .63rem;
  padding: 5px 8px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--mt3);
}
.m-maison-exemple {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem;
  font-style: italic;
  color: var(--mt3);
  line-height: 1.7;
  padding: 13px 13px;
  border-left: 2px solid currentColor;
  border-radius: 0 8px 8px 0;
  background: rgba(255,255,255,.02);
}

/* ═══════════════════════════════════════════════════════════════
   IV · LES 4 ANGLES
═══════════════════════════════════════════════════════════════ */
.angles-cross {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.angle-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--mr);
  padding: 21px 21px;
}
.angle-abbr {
  font-family: 'Cinzel', serif;
  font-size: 2.2rem;
  letter-spacing: .06em;
  line-height: 1;
  margin-bottom: 5px;
}
.angle-name {
  font-family: 'Cinzel', serif;
  font-size: .94rem;
  letter-spacing: .1em;
  color: var(--mt1);
  margin-bottom: 5px;
}
.angle-house {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .68rem;
  color: var(--mt3);
  letter-spacing: .08em;
  margin-bottom: 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.angle-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .88rem;
  line-height: 1.8;
  color: var(--mt2);
  margin-bottom: 8px;
}
.angle-key {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .76rem;
  color: var(--mt3);
}
.angles-note {
  margin-top: 21px;
  padding: 13px;
  background: rgba(123,111,196,.07);
  border: 1px solid rgba(123,111,196,.2);
  border-radius: 13px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.angles-note-icon { font-size: 1.1rem; color: var(--mpl); flex-shrink: 0; margin-top: 2px; }
.angles-note-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .84rem;
  line-height: 1.75;
  color: var(--mt2);
}

/* ═══════════════════════════════════════════════════════════════
   V · INTRO ASPECTS
═══════════════════════════════════════════════════════════════ */
.aspects-nature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 21px;
}
.aspect-nature-card {
  padding: 13px 13px;
  border-radius: 13px;
  border: 1px solid;
}
.aspect-nature-title {
  font-family: 'Cinzel', serif;
  font-size: .76rem;
  letter-spacing: .08em;
  margin-bottom: 5px;
}
.aspect-nature-angles {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .68rem;
  color: var(--mt3);
  margin-bottom: 8px;
  letter-spacing: .06em;
}
.aspect-nature-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--mt2);
}

/* ═══════════════════════════════════════════════════════════════
   V · LES ASPECTS — swipe deck, glyphe géométrique
═══════════════════════════════════════════════════════════════ */
#tab-aspects-liste .aspects-layout { display: none !important; }

.m-aspect-glyph-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 21px 21px 21px;
  border-radius: var(--mr);
  margin-bottom: 13px;
  border: 1px solid;
}
.m-aspect-glyph { font-size: 4rem; line-height: 1; margin-bottom: 8px; }
.m-aspect-name {
  font-family: 'Cinzel', serif;
  font-size: 1.38rem;
  letter-spacing: .06em;
  color: var(--mt1);
  margin-bottom: 5px;
}
.m-aspect-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.m-aspect-angle, .m-aspect-orbe {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .7rem;
  color: var(--mt3);
  letter-spacing: .07em;
}
.m-aspect-nature {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .68rem;
  padding: 5px 13px;
  border-radius: 21px;
  border: 1px solid;
  letter-spacing: .06em;
}
.m-aspect-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .9rem;
  line-height: 1.84;
  color: var(--mt2);
  margin-bottom: 13px;
}
.m-aspect-effets {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .86rem;
  line-height: 1.78;
  color: var(--mt2);
  padding: 13px 13px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  border-left: 3px solid currentColor;
  margin-bottom: 13px;
}
.m-aspect-ex-label {
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mt3);
  margin-bottom: 8px;
}
.m-aspect-ex-item {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--mt2);
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.m-aspect-ex-item:last-child { border-bottom: none; }
.m-aspect-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.m-aspect-tag {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .62rem;
  padding: 5px 8px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--mt3);
}

/* ═══════════════════════════════════════════════════════════════
   V · CONFIGURATIONS
═══════════════════════════════════════════════════════════════ */
#configurations-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 13px;
}
#configuration-panel {
  padding: 21px 13px;
  background: rgba(123,111,196,.07);
  border: 1px solid rgba(123,111,196,.18);
  border-radius: var(--mr);
}

/* ═══════════════════════════════════════════════════════════════
   VI · MÉTHODE DE LECTURE
═══════════════════════════════════════════════════════════════ */
.methode-steps { display: flex; flex-direction: column; gap: 13px; }
.methode-step {
  display: flex;
  gap: 13px;
  padding: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 13px;
  align-items: flex-start;
}
.methode-num {
  font-family: 'Cinzel', serif;
  font-size: 1.45rem;
  border: 2px solid;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.methode-content { flex: 1; }
.methode-title {
  font-family: 'Cinzel', serif;
  font-size: .88rem;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.methode-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .86rem;
  line-height: 1.78;
  color: var(--mt2);
}
.methode-note {
  margin-top: 21px;
  padding: 21px 13px;
  background: rgba(123,111,196,.07);
  border: 1px solid rgba(123,111,196,.2);
  border-radius: var(--mr);
}
.methode-note-label {
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mpl);
  margin-bottom: 8px;
}
.methode-note-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .86rem;
  line-height: 1.78;
  color: var(--mt2);
}

/* ═══════════════════════════════════════════════════════════════
   VI · THÈME DE JP
═══════════════════════════════════════════════════════════════ */
.theme-jp-header { margin-bottom: 21px; }
.theme-jp-data {
  background: rgba(123,111,196,.07);
  border: 1px solid rgba(123,111,196,.18);
  border-radius: var(--mr);
  padding: 13px;
}
.theme-jp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.theme-jp-row:last-child { border-bottom: none; }
.theme-jp-label {
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mt3);
}
.theme-jp-val {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem;
  color: var(--mt2);
}
.theme-jp-section-label {
  font-family: 'Cinzel', serif;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mpl);
  margin-bottom: 13px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(123,111,196,.15);
}
.theme-jp-positions { margin-bottom: 34px; }
.theme-jp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0,..) = colonnes qui tiennent vraiment (pas de débordement → ~118px) */
  gap: 8px;
  margin-bottom: 13px;
  align-items: start; /* laisse aspect-ratio définir la hauteur (carré), pas d'étirement de grille */
}
.theme-jp-planet {
  background: rgba(255,255,255,.03) !important; /* uniforme : bat les teintes inline par carte */
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 13px;
  padding: 8px 5px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
  aspect-ratio: 1 / 1;          /* carré comme les chips (m-elem-sel-btn) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.theme-jp-planet:active { background: rgba(123,111,196,.12); }
.theme-jp-planet-glyph { font-size: 1.35rem; margin-bottom: 3px; }
.theme-jp-planet-name {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .58rem;
  color: var(--mt3);
  margin-bottom: 2px;
}
.theme-jp-planet-pos {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .68rem;
}
.theme-jp-planet-note {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .55rem;
  color: var(--mt3);
}
#jp-planet-panel {
  padding: 13px;
  background: rgba(123,111,196,.07);
  border: 1px solid rgba(123,111,196,.18);
  border-radius: var(--mr);
  margin-bottom: 21px;
  min-height: 56px;
}
.theme-jp-analysis { display: flex; flex-direction: column; gap: 8px; }
.theme-jp-block {
  border-radius: 13px;
  border: 1px solid;
  overflow: hidden;
}
.theme-jp-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-jp-block-planet {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .8rem;
  letter-spacing: .04em;
  line-height: 1.4;
  flex: 1;
}
.theme-jp-block-chevron {
  font-size: .7rem;
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform .24s;
}
.theme-jp-block.open .theme-jp-block-chevron { transform: rotate(180deg); }
.theme-jp-block-body {
  display: none;
  padding: 0 13px 13px;
}
.theme-jp-block.open .theme-jp-block-body { display: block; }
.theme-jp-block-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .86rem;
  line-height: 1.8;
  color: var(--mt2);
  margin-bottom: 13px;
}
.theme-jp-block-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-jp-tag {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .63rem;
  padding: 3px 8px;
  border-radius: 13px;
  border: 1px solid;
}

/* Synthèse barres */
#tab-theme-jp > div[style*="display:grid"] {
  display: flex !important;
  flex-direction: column;
  gap: 13px;
}

/* ── Overlays (lexique / calculateur) ───────────────────────── */
.lex-panel, .calc-panel {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  border-left: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   ✦ STAR NAV BUTTON
═══════════════════════════════════════════════════════════════ */
@keyframes m-star-spin {
  0%   { transform: rotate(0deg)   scale(1);    }
  45%  { transform: rotate(200deg) scale(1.18); }
  100% { transform: rotate(360deg) scale(1);    }
}

#m-star-btn {
  position: fixed;
  right: 18px;
  bottom: calc(var(--mnh) + env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 460;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mp);
  border: 2px solid rgba(155,143,214,.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  color: #fff;
  line-height: 1;
  box-shadow: 0 4px 22px rgba(123,111,196,.55);
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
#m-star-btn.m-star-open {
  background: var(--mpl);
  border-color: rgba(155,143,214,.7);
  box-shadow: 0 4px 32px rgba(155,143,214,.65);
}
#m-star-btn.m-star-spinning {
  animation: m-star-spin .46s cubic-bezier(.4,0,.2,1) both;
}

/* ═══════════════════════════════════════════════════════════════
   ✦ STAR OVERLAY — plein écran
═══════════════════════════════════════════════════════════════ */
#m-star-overlay {
  position: fixed;
  inset: 0;
  z-index: 450;
  background: var(--mb);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .26s ease, transform .26s ease;
  pointer-events: none;
}
#m-star-overlay.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* header de l'overlay */
.m-ov-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 21px 13px;
  border-bottom: 1px solid rgba(123,111,196,.22);
  flex-shrink: 0;
}
.m-ov-mod {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.m-ov-num {
  font-family: 'Cinzel', serif;
  font-size: 1.55rem;
  color: var(--mpl);
  letter-spacing: .05em;
  line-height: 1;
}
.m-ov-lbl {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mt1);
}
.m-ov-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(155,143,214,.3);
  background: rgba(123,111,196,.1);
  color: var(--mt2);
  font-size: .92rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.m-ov-close:active { background: rgba(123,111,196,.22); }

/* liste des sous-pages — style table des matières */
.m-ov-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.m-ov-list { display: flex; flex-direction: column; }

.m-ov-item {
  text-align: left;
  padding: 21px 21px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt2);
  cursor: pointer;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s;
  position: relative;
}
.m-ov-item::after {
  content: '›';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(155,143,214,.28);
  font-size: 1rem;
  font-family: 'Josefin Sans', sans-serif;
  transition: color .18s, right .18s;
}
.m-ov-item:last-child { border-bottom: none; }
.m-ov-item.active {
  color: var(--mpl);
}
.m-ov-item.active::after { color: var(--mpl); right: 20px; }
.m-ov-item:active { color: var(--mpl); }

/* pied de l'overlay — même hauteur que la bottom nav */
.m-ov-footer {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 13px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(var(--mnh) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(123,111,196,.22);
  background: var(--mb);
  flex-shrink: 0;
}
.m-ov-tool {
  flex: 1;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(123,111,196,.28);
  background: rgba(123,111,196,.07);
  font-family: 'Josefin Sans', sans-serif;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mpl);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
  text-align: center;
}
.m-ov-tool:active { background: rgba(123,111,196,.18); }

/* ═══════════════════════════════════════════════════════════════
   III · RÉTROGRADES — swipe cards
═══════════════════════════════════════════════════════════════ */
.m-retro-hd {
  text-align: center;
  padding: 21px 13px 13px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 13px;
}
.m-retro-glyph { font-size: 2.6rem; line-height: 1; margin-bottom: 8px; }
.m-retro-name {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--mt1);
  margin-bottom: 5px;
}
.m-retro-freq {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .64rem;
  color: var(--mt3);
  letter-spacing: .08em;
}
.m-retro-compare { display: flex; flex-direction: column; gap: 8px; margin-bottom: 13px; }
.m-retro-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 13px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
}
.m-retro-rx { border-radius: 8px; }
.m-retro-lbl {
  font-family: 'Cinzel', serif;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt3);
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 36px;
}
.m-retro-val {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .84rem;
  color: var(--mt2);
  line-height: 1.55;
}
.m-retro-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .87rem;
  line-height: 1.82;
  color: var(--mt2);
  margin-bottom: 13px;
}
.m-retro-manifests { margin-bottom: 13px; }
.m-retro-manif {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem;
  color: var(--mt2);
  line-height: 1.7;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.m-retro-manif:last-child { border-bottom: none; }
.m-retro-integration {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .84rem;
  line-height: 1.75;
  color: var(--mt2);
  padding: 8px 13px;
  border-left: 3px solid;
  border-radius: 0 8px 8px 0;
  background: rgba(255,255,255,.02);
  margin-bottom: 13px;
}
.m-retro-exemple {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .76rem;
  font-style: italic;
  color: var(--mt3);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════
   V · CONFIGURATIONS — swipe cards
═══════════════════════════════════════════════════════════════ */
.m-cfg-hd {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 21px 21px 21px;
  border-radius: 13px;
  margin-bottom: 13px;
  border: 1px solid;
}
.m-cfg-glyph { font-size: 3.2rem; line-height: 1; margin-bottom: 8px; }
.m-cfg-name {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  letter-spacing: .06em;
  color: var(--mt1);
  margin-bottom: 5px;
}
.m-cfg-nature {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .7rem;
  letter-spacing: .08em;
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.5;
}
.m-cfg-planetes {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .62rem;
  color: var(--mt3);
  letter-spacing: .06em;
}
.m-cfg-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .87rem;
  line-height: 1.82;
  color: var(--mt2);
  margin-bottom: 13px;
}
.m-cfg-exemple {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem;
  font-style: italic;
  color: var(--mt3);
  line-height: 1.7;
  padding: 8px 13px;
  border-left: 3px solid;
  border-radius: 0 8px 8px 0;
  background: rgba(255,255,255,.02);
  margin-bottom: 13px;
}
.m-cfg-difficulte {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mt3);
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   APP SCREENS — Accueil · Outils · Mon Thème
═══════════════════════════════════════════════════════════════ */
.m-app-screen {
  display: none;
  box-sizing: border-box;        /* les paddings sont inclus dans min-height → pas de scroll inutile */
  padding-top: calc(var(--mhh) + 18px);
  padding-bottom: calc(var(--mnh) + env(safe-area-inset-bottom, 0px) + 20px);
  min-height: 100dvh;            /* dvh : hauteur visible réelle sur mobile (barre d'URL incluse) */
  animation: mfadein .24s ease backwards;   /* backwards : cf. .tab, both fige l'isolation transform */
}

/* ── Page Modules (choix des 6 modules) ─────────────────────── */
.m-mods-title {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  color: var(--mt1);
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.m-mods-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--mt2);
  margin-bottom: 21px;
}

/* ── Espace Profil (takeover plein écran) ───────────────────── */
.m-profil-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  display: flex;
  background: #1c1c22;
  border-top: 2px solid rgba(123,111,196,.45);
  box-shadow: 0 -4px 20px rgba(0,0,0,.55);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.m-pf-navitem {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 8px 2px 8px; min-height: var(--mnh);
  border: none; background: none; cursor: pointer; position: relative;
  border-right: 1px solid rgba(255,255,255,.06);
  -webkit-tap-highlight-color: transparent;
}
.m-pf-navitem:last-child { border-right: none; }
.m-pf-navitem.active::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%;
  height: 2px; background: var(--mpl); border-radius: 0 0 3px 3px;
}
.m-pf-navitem.active .mob-nav-icon,
.m-pf-navitem.active .mob-nav-label { color: var(--mpl) !important; }

/* sections pleine largeur (le .m-profil-wrap centre par défaut) */
.m-pf-sec, .m-pf-head { width: 100%; }
.m-pf-head { display: flex; justify-content: center; align-items: center; margin-bottom: 21px; }
.m-pf-head-title { font-family: 'Cinzel', serif; font-size: 1.2rem; color: var(--mt1); letter-spacing: .06em; }
/* titre de section uniforme */
.m-pf-sectitle { font-family: 'Cinzel', serif; font-size: 1.15rem; color: var(--mt1); letter-spacing: .06em; margin-bottom: 13px; }
.m-pf-count { font-family: 'Josefin Sans', sans-serif; font-size: .8rem; color: var(--mt3); letter-spacing: .04em; }
/* identité en carte : avatar à gauche + infos */
.m-pf-identity { display: flex; align-items: center; gap: 13px; }
.m-pf-identity .m-profil-avatar { width: 56px; height: 56px; font-size: 1.4rem; margin-bottom: 0; flex-shrink: 0; }
.m-pf-identity-info { text-align: left; }
.m-pf-identity .m-profil-username { margin-bottom: 2px; }
.m-pf-identity .m-profil-grade { margin-bottom: 0; }

.m-pf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 21px; }
.m-pf-stat {
  background: var(--mc); border: 1px solid rgba(123,111,196,.18); border-radius: 13px;
  padding: 13px 13px; text-align: center;
}
.m-pf-stat-num { font-family: 'Cinzel', serif; font-size: 1.5rem; color: #9b8fd6; }
.m-pf-stat-lbl { font-family: 'Josefin Sans', sans-serif; font-size: .72rem; color: var(--mt3); margin-top: 5px; letter-spacing: .04em; }

.m-pf-card {
  background: var(--mc); border: 1px solid rgba(123,111,196,.18); border-radius: 13px;
  padding: 13px; margin-bottom: 13px;
}
.m-pf-label { font-family: 'Cinzel', serif; font-size: .82rem; color: var(--mt1); letter-spacing: .08em; margin-bottom: 8px; }
.m-pf-danger-lbl { color: #c45c5c; }
.m-pf-static { font-family: 'Josefin Sans', sans-serif; font-size: .95rem; color: var(--mt2); }
.m-pf-text { font-family: 'Josefin Sans', sans-serif; font-size: .9rem; line-height: 1.6; color: var(--mt2); margin-bottom: 13px; }
.m-pf-input {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  padding: 13px 13px; border-radius: 8px;
  background: #1c1c22; border: 1px solid rgba(255,255,255,.1); color: var(--mt1);
  font-family: 'Josefin Sans', sans-serif; font-size: .95rem;
}
.m-pf-err { font-family: 'Josefin Sans', sans-serif; font-size: .82rem; color: #c45c5c; min-height: 1em; margin-bottom: 8px; }
.m-pf-btn {
  width: 100%; padding: 13px; border-radius: 8px;
  background: var(--mp); border: none; color: #fff;
  font-family: 'Josefin Sans', sans-serif; font-size: .92rem; letter-spacing: .04em; cursor: pointer;
}
.m-pf-btn-danger { background: transparent; border: 1px solid #c45c5c; color: #c45c5c; }

/* Accordéon (section Compte) : bloc replié par défaut */
.m-pf-acc-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-pf-acc-head .m-pf-label { margin: 0; }
.m-pf-acc-chev { color: var(--mt3); font-size: 1.3rem; line-height: 1; transition: transform .2s; }
.m-pf-acc.open .m-pf-acc-chev { transform: rotate(45deg); }
.m-pf-acc-body { display: none; margin-top: 13px; }
.m-pf-acc.open .m-pf-acc-body { display: block; }

.m-pf-quiz-row {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: 'Josefin Sans', sans-serif; font-size: .85rem; color: var(--mt2);
}
.m-pf-quiz-xp { color: #F2AC29; }
.m-pf-empty { font-family: 'Josefin Sans', sans-serif; font-size: .9rem; color: var(--mt3); padding: 8px 0; }

.m-pf-badges-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.m-pf-badge {
  background: transparent; border: none;
  padding: 10px 6px; text-align: center;
}
.m-pf-badge-icon { line-height: 1; filter: drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
/* Badge non gagné = grisé (comme sur desktop) */
.m-pf-badge.locked { opacity: .55; filter: grayscale(.85); }
.m-pf-badge.locked .m-pf-badge-name { color: #5a5475; }
.m-pf-badge-name { font-family: 'Cinzel', serif; font-size: .82rem; color: var(--mt1); margin-top: 5px; }
.m-pf-badge-cond { font-family: 'Josefin Sans', sans-serif; font-size: .68rem; color: var(--mt3); margin-top: 5px; line-height: 1.4; }

/* ── Accueil ──────────────────────────────────────────────────── */
.m-home-wrap { padding: 0 13px; }

.m-home-continue {
  display: flex;
  align-items: center;
  gap: 13px;
  background: linear-gradient(135deg, #2e2d46, #26273a);
  border: 1px solid #7b6fc440;
  border-radius: 21px;
  padding: 13px 13px;
  margin-bottom: 21px;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.m-home-cont-icon {
  width: 40px; height: 40px;
  border-radius: 13px;
  background: rgba(123,111,196,.15);
  border: 1px solid rgba(123,111,196,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: var(--mpl);
  flex-shrink: 0;
}
.m-home-cont-info { flex: 1; min-width: 0; }
.m-home-cont-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mt3);
  margin-bottom: 3px;
}
.m-home-cont-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  color: var(--mt1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-home-cont-btn {
  background: var(--mp);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .62rem;
  letter-spacing: .06em;
  padding: 8px 13px;
  flex-shrink: 0;
  cursor: pointer;
}

.m-home-section-title {
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mt3);
  margin-bottom: 8px;
}
.m-home-xp {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #26273a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 13px;
  padding: 13px 13px;
  margin-bottom: 21px;
}
.m-home-xp-icon { font-size: 1rem; color: var(--mg); flex-shrink: 0; }
.m-home-xp-info { flex: 1; min-width: 0; }
.m-home-xp-grade {
  font-family: 'Cinzel', serif;
  font-size: .75rem;
  color: var(--mt1);
  letter-spacing: .06em;
}
.m-home-xp-val {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .6rem;
  color: var(--mt3);
  margin-top: 2px;
}
.m-home-xp-bar-wrap { width: 80px; flex-shrink: 0; }
.m-home-xp-bar { height: 3px; background: rgba(255,255,255,.1); border-radius: 3px; }
.m-home-xp-fill { height: 100%; background: linear-gradient(90deg, var(--mp), var(--mg)); border-radius: 3px; transition: width .4s; }

.m-home-mod-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: #26273a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 13px;
  padding: 13px 13px;
  margin-bottom: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s;
}
.m-home-mod-card:active { border-color: rgba(123,111,196,.4); }
.m-home-mod-card.locked { opacity: .5; cursor: default; }
.m-home-mod-num {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(123,111,196,.1);
  border: 1px solid rgba(123,111,196,.25);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: .75rem;
  color: var(--mpl);
  flex-shrink: 0;
}
.m-home-mod-card.locked .m-home-mod-num { color: var(--mt3); border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.m-home-mod-info { flex: 1; min-width: 0; }
.m-home-mod-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  color: var(--mt1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-home-mod-card.locked .m-home-mod-title { color: var(--mt3); }
.m-home-mod-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .6rem;
  color: var(--mt3);
  margin-top: 2px;
}
.m-home-mod-prog { width: 48px; height: 3px; background: rgba(255,255,255,.1); border-radius: 3px; flex-shrink: 0; }
.m-home-mod-prog-fill { height: 100%; background: var(--mpl); border-radius: 3px; }
.m-home-mod-lock { font-size: .7rem; color: var(--mt3); flex-shrink: 0; }

/* ── Outils ───────────────────────────────────────────────────── */
.m-outils-wrap { padding: 0 13px; }
.m-outils-title {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  letter-spacing: .06em;
  color: var(--mt1);
  margin-bottom: 5px;
}
.m-outils-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem;
  color: var(--mt3);
  margin-bottom: 21px;
  line-height: 1.6;
}
.m-outil-card {
  background: #26273a;
  border: 1px solid rgba(123,111,196,.2);
  border-radius: 21px;
  padding: 21px 21px;
  margin-bottom: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s, box-shadow .18s;
}
.m-outil-card:active { border-color: var(--mpl); box-shadow: 0 4px 24px rgba(123,111,196,.2); }
.m-outil-header { display: flex; align-items: center; gap: 13px; margin-bottom: 8px; }
.m-outil-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(123,111,196,.12);
  border: 1px solid rgba(123,111,196,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.m-outil-name {
  font-family: 'Cinzel', serif;
  font-size: .95rem;
  letter-spacing: .06em;
  color: var(--mt1);
}
.m-outil-count {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .6rem;
  color: var(--mt3);
  margin-top: 2px;
}
.m-outil-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem;
  color: var(--mt2);
  line-height: 1.65;
}

/* ── Mon Thème ────────────────────────────────────────────────── */
.m-theme-wrap { padding: 0 13px; }
.m-theme-hero {
  background: linear-gradient(160deg, #26273a, #1c1c22);
  border: 1px solid rgba(123,111,196,.2);
  border-radius: 21px;
  padding: 21px 21px;
  text-align: center;
  margin-bottom: 13px;
}
.m-theme-star { font-size: 3rem; color: var(--mpl); margin-bottom: 13px; line-height: 1; }
.m-theme-title {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  letter-spacing: .06em;
  color: var(--mt1);
  margin-bottom: 8px;
}
.m-theme-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .82rem;
  color: var(--mt2);
  line-height: 1.7;
  margin-bottom: 13px;
}
.m-theme-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(212,160,32,.1);
  border: 1px solid rgba(212,160,32,.3);
  border-radius: 8px;
  padding: 5px 13px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mg);
}
.m-theme-info-card {
  background: #26273a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 13px;
  padding: 13px;
  margin-bottom: 8px;
}
.m-theme-info-label {
  font-family: 'Cinzel', serif;
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mt3);
  margin-bottom: 5px;
}
.m-theme-info-val {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .85rem;
  color: var(--mt2);
}

/* Thème du compte affiché (rendu complet) */
.m-theme-head {
  text-align: center;
  margin-bottom: 13px;
}
.m-theme-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--mt3);
  margin-top: 5px;
}
.m-theme-chart { margin-bottom: 21px; }
.m-theme-cta {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mbg, #1c1c22);
  background: var(--mpl);
  border: none;
  border-radius: 13px;
  padding: 13px;
  margin-bottom: 8px;
  cursor: pointer;
}
/* Mon Thème — export PNG / PDF */
.m-theme-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.m-theme-export {
  flex: 1;
  font-family: 'Cinzel', serif;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: #cfc9e6;
  background: transparent;
  border: 1px solid rgba(123,111,196,.4);
  border-radius: 13px;
  padding: 11px;
  cursor: pointer;
}

/* star overlay module selector */
.m-ov-mod-sel {
  display: flex;
  gap: 5px;
  padding: 8px 13px 13px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.m-ov-mod-sel::-webkit-scrollbar { display: none; }
.m-ov-mod-chip {
  flex-shrink: 0;
  font-family: 'Cinzel', serif;
  font-size: .68rem;
  letter-spacing: .06em;
  padding: 5px 13px;
  border-radius: 21px;
  border: 1px solid rgba(155,143,214,.22);
  background: transparent;
  color: var(--mt3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s, background .18s, border-color .18s;
  white-space: nowrap;
}
.m-ov-mod-chip.active {
  color: var(--mpl);
  background: rgba(123,111,196,.15);
  border-color: rgba(155,143,214,.5);
}

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE — responsive mobile
═══════════════════════════════════════════════════════════════ */

/* Hero : les 2 CTA même taille, pleine largeur, empilés */
.lp-cta-row {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 13px !important;
}
.lp-cta-row .lp-btn-primary,
.lp-cta-row .lp-btn-secondary {
  width: 100% !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 13px 21px !important;
  text-align: center;
}

/* Pain points : 3 col → cartes empilées */
.lp-pain-grid {
  grid-template-columns: 1fr !important;
  gap: 13px !important;
}
.lp-pain-item {
  background: #26273a;
  border: 1px solid #ffffff0a;
  border-radius: 13px;
  padding: 21px 21px;
  flex-direction: row;
  align-items: flex-start;
  gap: 13px;
}
.lp-pain-glyph { flex-shrink: 0; font-size: 1.2rem; }

/* Promesses "ce que tu vas savoir faire" : 2 col → 1 col */
.lp-promise-grid {
  grid-template-columns: 1fr !important;
}
.lp-promise-item:nth-child(odd)  { padding-right: 0; border-right: none; }
.lp-promise-item:nth-child(even) { padding-left: 0; }
.lp-promise-item:nth-last-child(-n+2) { border-bottom: 1px solid #ffffff08; }
.lp-promise-item:last-child { border-bottom: none; }

/* Modules programme : 3 col → 1 col */
.lp-modules-grid {
  grid-template-columns: 1fr !important;
}

/* ── Home mobile dégraissée : on garde l'essentiel, on cache le secondaire ── */
/* Pain points + promesses : redondants sur mobile → cachés */
.lp-pain-section,
.lp-promise-section { display: none !important; }

/* Programme : cartes resserrées en liste (on enlève desc + chapitres) */
.lp-module-desc,
.lp-module-chapters { display: none !important; }

/* Gamification : on garde le titre + la frise des grades, on cache les 3 cartes */
.lp-gamif-items { display: none !important; }

/* Grades : liste verticale, les 5 paliers visibles d'un coup */
.lp-grades-track {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 5px 21px !important;
}
.lp-grade {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 13px !important;
  width: 100%;
  min-width: 0 !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid #ffffff0a;
}
.lp-grade:last-of-type { border-bottom: none; }
.lp-grade-dot  { width: 12px !important; height: 12px !important; flex-shrink: 0; }
.lp-grade-name { font-size: .95rem !important; letter-spacing: .04em !important; text-align: left !important; flex: 1; }
.lp-grade-xp   {
  display: block !important; font-size: .8rem !important;
  white-space: nowrap !important; flex-shrink: 0;
  text-align: right !important; min-width: 56px;
}
.lp-grade-line { display: none !important; }

/* Profil stats : 4 col → 2x2 */
.profil-stats-row {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Badges : 6 col → 3 col */
.profil-badges-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* ============================================================
   PROFIL SCREEN — mobile
   ============================================================ */
#m-profil { padding-bottom: 34px; }

.m-profil-wrap {
  padding: 34px 21px 21px;
  display: flex; flex-direction: column; align-items: center;
}

/* Connecté */
.m-profil-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #7b6fc4, #9b8fd6);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 1.8rem; color: #fff;
  margin-bottom: 13px;
  box-shadow: 0 0 30px rgba(155,143,214,.3);
}
.m-profil-username {
  font-family: 'Cinzel', serif; font-size: 1.1rem;
  letter-spacing: .1em; color: #e6e2f4; margin-bottom: 5px;
}
.m-profil-grade {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: #9b8fd6; margin-bottom: 21px;
}
.m-profil-xp-block { width: 100%; margin-bottom: 34px; }
.m-profil-xp-bar-wrap {
  height: 6px; background: rgba(255,255,255,.08);
  border-radius: 8px; overflow: hidden; margin-bottom: 5px;
}
.m-profil-xp-bar {
  height: 100%; background: linear-gradient(90deg, #7b6fc4, #9b8fd6);
  border-radius: 8px; transition: width .6s ease;
}
.m-profil-xp-labels {
  display: flex; justify-content: space-between;
  font-size: .7rem; color: #6b6490;
}
.m-profil-modules-title {
  font-family: 'Cinzel', serif; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: #6b6490; margin-bottom: 13px; align-self: flex-start;
}
.m-profil-modules-list { width: 100%; margin-bottom: 34px; }
.m-profil-mod-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 13px;
  background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px; margin-bottom: 8px;
}
.m-profil-mod-name { font-size: .84rem; color: #a89ecc; }
.m-profil-mod-status { font-size: .8rem; color: #6b6490; }
.m-profil-mod-status.done { color: #5caa7f; }

.m-profil-logout {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin-top: 8px;
  background: rgba(196,92,92,.08);
  border: 1px solid rgba(196,92,92,.2);
  color: #c45c5c; border-radius: 8px;
  padding: 13px 34px; cursor: pointer;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .9rem; font-weight: 600; letter-spacing: .08em;
  transition: .2s;
}
.m-profil-logout:hover { background: #c45c5c; color: #fff; }

/* Non connecté */
.m-profil-logo {
  font-family: 'Cinzel', serif; font-size: 1rem;
  letter-spacing: .22em; color: #e6e2f4;
  margin-bottom: 8px; text-align: center;
}
.m-profil-sub {
  font-size: .8rem; color: #6b6490; text-align: center;
  line-height: 1.6; margin-bottom: 34px; max-width: 280px;
}
.m-auth-tabs {
  display: flex; gap: 5px; width: 100%;
  background: rgba(0,0,0,.2); border-radius: 8px;
  padding: 5px; margin-bottom: 21px;
}
.m-auth-tab {
  flex: 1; padding: 8px;
  background: none; border: none;
  color: #6b6490; cursor: pointer;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  border-radius: 8px; transition: .2s;
}
.m-auth-tab.active { background: #7b6fc4; color: #fff; }
.m-auth-form { width: 100%; }
.m-auth-form input {
  width: 100%; background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  color: #e6e2f4; padding: 13px 13px;
  border-radius: 8px; margin-bottom: 8px;
  font-family: 'Josefin Sans', sans-serif; font-size: .9rem;
  outline: none; transition: .2s; box-sizing: border-box;
}
.m-auth-form input:focus {
  border-color: rgba(155,143,214,.5);
  box-shadow: 0 0 0 3px rgba(155,143,214,.1);
}
.m-auth-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: .76rem; color: #6b6490; margin-bottom: 13px; cursor: pointer;
}
.m-auth-remember input { width: auto; accent-color: #9b8fd6; }
.m-auth-submit {
  width: 100%; padding: 13px;
  background: #7b6fc4; color: #fff; border: none;
  border-radius: 8px; cursor: pointer;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600; font-size: .84rem; letter-spacing: .08em;
  transition: .2s; margin-bottom: 5px;
}
.m-auth-submit:hover { background: #9b8fd6; }
.m-auth-submit:disabled { opacity: .5; cursor: not-allowed; }
.m-auth-err {
  color: #c45c5c; font-size: .78rem; margin-bottom: 8px; min-height: 0;
}

/* ── Quiz (mobile) : CARTE contenue (pas de plein écran) ── */
.quiz-overlay {
  padding: 13px;
  align-items: center;
  justify-content: center;
}
.quiz-inner {
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 21px;
}
/* Carte du QUIZ uniquement : hauteur FIXE (ne saute plus selon le contenu/feedback).
   La carte "Quiz en cours" (#quiz-lock-overlay) garde sa taille auto. */
#quiz-overlay .quiz-inner {
  height: min(640px, calc(100dvh - 32px));
}
.quiz-screen { padding: 21px 21px 34px; }
/* Carte du quiz : header EN HAUT, boutons EN BAS, contenu (question+réponses) CENTRÉ au milieu. */
#quiz-overlay #quiz-screen-q {
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
#quiz-overlay #quiz-screen-q .quiz-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Boutons DÉDIÉS de la page du quiz (élément à part, mêmes marges que les réponses).
   Côte à côte, et empilés si "Recommencer" ne tient pas. */
.quiz-q-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 21px;
}
.quiz-q-actions .quiz-btn-primary,
.quiz-q-actions .quiz-btn-ghost {
  flex: 1 1 140px;
  width: auto;
  padding-left: 13px;
  padding-right: 13px;
}
/* Carte "Quiz en cours" = overlay À PART (#quiz-lock-overlay), jamais dans la carte du quiz.
   Contenu centré (padding fourni par .quiz-screen). */
#quiz-lock-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  text-align: center;
}
.quiz-lock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  width: 100%;
}
.quiz-lock-actions .quiz-btn-primary,
.quiz-lock-actions .quiz-btn-ghost {
  flex: 1 1 140px;
  width: auto;
  padding-left: 13px;
  padding-right: 13px;
}
/* Feedback : pas d'espace réservé tant que c'est caché (sinon ~130px de vide → carte XXL).
   La boîte épouse le contenu ; le feedback pousse le contenu quand il apparaît. */
.quiz-inline-feedback { min-height: 0; }
.quiz-inline-feedback.quiz-hidden { display: none; }
/* Association : le drag tactile était capté par le scroll (pas de touch-action) → nodes inopérants */
.assoc-port { touch-action: none; }
.assoc-port-out { width: 20px; height: 20px; } /* cible tactile plus grande pour démarrer le câble */
.quiz-results-actions {
  flex-direction: column;
}
.quiz-btn-primary,
.quiz-btn-ghost {
  width: 100%;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   ACCUEIL MOBILE — landing page (écran dédié, mobile-first)
═══════════════════════════════════════════════════════════════ */
.m-lp-wrap { padding: 5px 21px 8px; }

/* ── Séparateur étoile (signature + respiration) ──────────────── */
.m-lp-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
  margin: 34px 0;
  color: var(--mg);
  font-size: .85rem;
  letter-spacing: .2em;
}
.m-lp-sep::before,
.m-lp-sep::after {
  content: '';
  width: 34px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(242,172,41,.4), transparent);
}

/* ── Hero ─────────────────────────────────────────────────────── */
.m-lp-hero { text-align: center; padding: 34px 0 0; }
.m-lp-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mg);
  margin-bottom: 13px;
}
.m-lp-title {
  font-family: 'Cinzel', serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mt1);
  margin-bottom: 13px;
}
.m-lp-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--mt2);
  margin-bottom: 21px;
}
.m-lp-cta-primary {
  display: block;
  width: 100%;
  padding: 13px 21px;
  background: linear-gradient(180deg, #7b6fc4, #6a5fb1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter .2s;
}
.m-lp-cta-primary:active { filter: brightness(1.08); }
.m-lp-hint {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .72rem;
  color: var(--mt3);
  letter-spacing: .03em;
  margin-top: 13px;
}

/* ── Section label ────────────────────────────────────────────── */
.m-lp-section { margin-bottom: 0; }
.m-lp-label {
  font-family: 'Cinzel', serif;
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mcyan);
  text-align: center;
  margin-bottom: 21px;
}

/* ── Programme ────────────────────────────────────────────────── */
.m-lp-mod-list { display: flex; flex-direction: column; gap: 13px; }
.m-lp-mod {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--mc);
  border: 1px solid rgba(123,111,196,.18);
  border-radius: 13px;
  padding: 21px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s;
}
.m-lp-mod:active { border-color: rgba(123,111,196,.45); }
.m-lp-mod-roman {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(123,111,196,.12);
  border: 1px solid rgba(123,111,196,.3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: .8rem;
  color: var(--mpl);
  flex-shrink: 0;
}
.m-lp-mod-info { flex: 1; min-width: 0; }
.m-lp-mod-name {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .86rem;
  font-weight: 600;
  color: var(--mt1);
}
.m-lp-mod-meta {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .64rem;
  letter-spacing: .04em;
  color: var(--mt3);
  margin-top: 3px;
}
.m-lp-mod-badge {
  flex-shrink: 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 21px;
  border: 1px solid;
}
.m-lp-mod-badge.open   { color: var(--mpl); border-color: rgba(155,143,214,.45); }
.m-lp-mod-badge.tolock { color: var(--mt3); border-color: rgba(255,255,255,.14); }

/* ── Deux voies de déblocage ──────────────────────────────────── */
.m-lp-steps-note {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .72rem;
  color: var(--mt3);
  text-align: center;
  margin-top: 13px;
}
.m-lp-voie {
  background: rgba(123,111,196,.06);
  border: 1px solid rgba(123,111,196,.16);
  border-radius: 13px;
  padding: 21px;
  margin-bottom: 13px;
}
.m-lp-voie--pack {
  background: rgba(242,172,41,.05);
  border-color: rgba(242,172,41,.28);
}
.m-lp-voie-label {
  font-family: 'Cinzel', serif;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mt3);
  margin-bottom: 8px;
}
.m-lp-voie-title {
  font-family: 'Cinzel', serif;
  font-size: .9rem;
  letter-spacing: .04em;
  color: var(--mt1);
  margin-bottom: 8px;
}
.m-lp-voie--pack .m-lp-voie-title { color: var(--mg); }
.m-lp-voie-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .84rem;
  line-height: 1.65;
  color: var(--mt2);
}

/* ── CTA final ────────────────────────────────────────────────── */
.m-lp-final {
  background: var(--mmid);
  border: 1px solid rgba(123,111,196,.2);
  border-radius: 21px;
  padding: 34px 21px;
  text-align: center;
}
.m-lp-final-title {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  color: var(--mt1);
  margin: 5px 0 13px;
}
.m-lp-final-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .85rem;
  line-height: 1.65;
  color: var(--mt2);
  margin-bottom: 21px;
}
.m-lp-cta-buy {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 21px;
  background: var(--mc);
  border: 1px solid rgba(242,172,41,.5);
  border-radius: 8px;
  color: var(--mg);
  font-family: 'Josefin Sans', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.m-lp-cta-buy--hero { margin-top: 13px; }

/* ═══════════════════════════════════════════════════════════════
   PAGES LECTURE (format Origines) — masquage du contenu desktop.
   En fin de fichier exprès : doit gagner sur les display !important
   posés plus haut (ex .zodiac-intro-grid).
═══════════════════════════════════════════════════════════════ */
.m-lect-hide { display: none !important; }

/* Module VI : contenu desktop riche affiché tel quel sur mobile (pas de flatten).
   Le tableau des durées des transits (grille 140px 1fr 1fr) s'empile sur mobile. */
.t-duree-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 12px 14px !important; }

/* Flip cards des durées de transits — MOBILE UNIQUEMENT (généré par mobileFlipTransits).
   Recto : glyph + nom (centrés). Verso : durée + nature (centrés). Pilule FLIP en bas à droite.
   Typo alignée sur le mode Lecture : nom = Cinzel (cf .m-era-title), corps = Josefin .9rem. */
.m-flip-grid { margin-top: 8px; }
.m-flip { height: 72px; perspective: 900px; cursor: pointer; margin-bottom: 8px; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.m-flip-in {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.5s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d;
}
.m-flip.flipped .m-flip-in { transform: rotateY(180deg); }
.m-flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 10px; border: 1px solid #ffffff0c; background: #ffffff05;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: 12px 16px;
}
.m-flip-id  { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; }
.m-flip-glyph { font-size: 1.5rem; line-height: 1; color: #cfc9e6; }
.m-flip-name { font-family: 'Cinzel', serif; font-size: 1.15rem; color: var(--mt1); letter-spacing: .02em; }
.m-flip-det { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.m-flip-dur { font-family: 'Josefin Sans', sans-serif; font-size: 0.82rem; color: #c9b07a; letter-spacing: .02em; }
.m-flip-nat { font-family: 'Josefin Sans', sans-serif; font-size: 0.9rem; line-height: 1.5; color: var(--mt2); }
.m-flip-pill {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 3px 8px 3px 6px; border-radius: 21px;
  border: 1px solid rgba(155,143,214,.4); background: rgba(155,143,214,.12); color: #b3a6e6;
  font-family: 'Josefin Sans', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .1em;
}
.m-flip-back { transform: rotateY(180deg); }
.m-flip-back .m-flip-pill { color: #F2AC29; border-color: rgba(242,172,41,.5); background: rgba(242,172,41,.12); }

/* Flip cards des Dignités : recto compact (comme les transits), verso 2×2 */
.m-flip-dig { height: 96px; }
.m-flip-dig-back { display: block; padding: 12px 16px 22px; }
.m-flip-dig-back .m-flip-pill { position: absolute; bottom: 8px; right: 11px; }
.m-dig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; height: 100%; align-content: center; }
.m-dig-cell-l { font-family: 'Cinzel', serif; font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mt3); margin-bottom: 1px; }
.m-dig-cell-v { font-family: 'Josefin Sans', sans-serif; font-size: .82rem; line-height: 1.25; color: var(--mt2); }

/* Composants plats du mode Lecture (module VI), injectés dans le flux era.
   AUCUN cadre : pas de bloc dans bloc. Typo calée sur .m-era-* :
   labels Cinzel caps .63rem, corps Josefin .9rem / 1.85. */

/* Fiches : grands cycles, planètes progressées.
   L'entête sert d'ancre de scroll : glyph large, nom Cinzel, trait coloré court. */
.m-lect-fiches { display: flex; flex-direction: column; gap: 55px; margin-top: 8px; }
.m-lf-head { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.m-lf-glyph { font-size: 2rem; line-height: 1; }
.m-lf-name { font-family: 'Cinzel', serif; font-size: 1.15rem; line-height: 1.3; color: var(--mt1); }
.m-lf-bar { width: 34px; height: 2px; border-radius: 3px; margin-bottom: 13px; }
.m-lf-meta { font-family: 'Josefin Sans', sans-serif; font-size: .78rem; letter-spacing: .05em; color: var(--mt3); margin-bottom: 13px; }
.m-lf-body { font-family: 'Josefin Sans', sans-serif; font-size: .9rem; line-height: 1.85; color: var(--mt2); }
.m-lf-label { font-family: 'Cinzel', serif; font-size: .63rem; letter-spacing: .22em; text-transform: uppercase; margin: 13px 0 8px; }
.m-lf-list { margin: 0; padding-left: 21px; display: flex; flex-direction: column; gap: 5px; }
.m-lf-list li { font-family: 'Josefin Sans', sans-serif; font-size: .9rem; line-height: 1.7; color: var(--mt2); }
.m-lf-conseil { border-left: 2px solid; padding-left: 13px; margin-top: 13px; font-family: 'Josefin Sans', sans-serif; font-size: .9rem; line-height: 1.7; color: var(--mt2); }
.m-lf-conseil .m-lf-label { margin: 0 0 5px; }

/* Listes label + texte : connexions synastrie, éléments RS, notes */
.m-lect-items { display: flex; flex-direction: column; gap: 34px; margin-top: 8px; }
.m-li-label { font-family: 'Cinzel', serif; font-size: .63rem; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 8px; }
.m-li-desc { font-family: 'Josefin Sans', sans-serif; font-size: .9rem; line-height: 1.85; color: var(--mt2); }

/* Étapes de méthode : numéro + titre + texte, exemple en liseré */
.m-lect-steps { display: flex; flex-direction: column; gap: 55px; margin-top: 8px; }
.m-ls-head { display: flex; align-items: baseline; gap: 13px; margin-bottom: 8px; }
.m-ls-num { font-family: 'Cinzel', serif; font-size: 1.3rem; line-height: 1; }
.m-ls-title { font-family: 'Cinzel', serif; font-size: 1.05rem; line-height: 1.3; color: var(--mt1); }
.m-ls-desc { font-family: 'Josefin Sans', sans-serif; font-size: .9rem; line-height: 1.85; color: var(--mt2); }
.m-ls-ex { border-left: 2px solid; padding-left: 13px; margin-top: 13px; }
.m-ls-ex-label { font-family: 'Cinzel', serif; font-size: .63rem; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 5px; }
.m-ls-ex-text { font-family: 'Josefin Sans', sans-serif; font-size: .88rem; font-style: italic; line-height: 1.7; color: var(--mt2); }

/* Étapes simples numérotées (progressions, méthode courte) */
.m-lect-rows { display: flex; flex-direction: column; gap: 13px; margin-top: 8px; }
.m-ls-row { display: flex; align-items: baseline; gap: 13px; }

/* ═══════════════════════════════════════════════════════════════
   ÉLÉMENTS · Interactif — le tri des signes (réutilise le shell .m-imm)
═══════════════════════════════════════════════════════════════ */
.m-esort { display: flex; flex-direction: column; }
.m-esort-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 144px;
  margin-bottom: 21px;
}
.m-esort-active {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  animation: m-esort-pop .4s cubic-bezier(0.22,1,0.36,1) both;
}
.m-esort-active.placed { animation: m-esort-out .42s ease forwards; }
@keyframes m-esort-pop { from { opacity: 0; transform: translateY(13px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes m-esort-out { to { opacity: 0; transform: translateY(-21px) scale(.85); } }
.m-esort-active-glyph {
  font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
  font-size: 4rem; line-height: 1;
  text-shadow: 0 0 21px color-mix(in srgb, var(--sc) 45%, transparent);
}
.m-esort-active-name {
  font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--mt1); letter-spacing: .02em;
}
.m-esort-feedback {
  position: absolute; bottom: -5px; left: 0; right: 0; text-align: center;
  font-family: 'Josefin Sans', sans-serif; font-size: .82rem; letter-spacing: .03em;
  opacity: 0;
}
.m-esort-feedback.show { animation: m-esort-fb 1.2s ease forwards; }
@keyframes m-esort-fb { 0% { opacity: 0; transform: translateY(5px); } 25% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

.m-esort-zones {
  display: grid; grid-template-columns: 1fr 1fr; gap: 13px;
}
.m-esort-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 16px 8px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--zc) 35%, transparent);
  background: color-mix(in srgb, var(--zc) 8%, transparent);
  cursor: pointer;
  min-height: 96px;
  transition: transform .12s ease, background .2s ease;
}
.m-esort-zone:active { transform: scale(.97); }
.m-esort-zone.shake { animation: m-esort-shake .4s ease; }
@keyframes m-esort-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.m-esort-zone-glyph { font-size: 1.6rem; line-height: 1; }
.m-esort-zone-name {
  font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--zc);
}
.m-esort-zone-slots {
  font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 3px;
  font-size: .95rem; line-height: 1; min-height: 0; margin-top: 0;
}
.m-esort-zone-slots:not(:empty) { margin-top: 5px; }

.m-esort-prog {
  height: 3px; border-radius: 3px; background: rgba(255,255,255,.1);
  margin-top: 21px; overflow: hidden;
}
.m-esort-prog-fill {
  display: block; height: 100%; width: 0%;
  background: var(--mpl); border-radius: 3px;
  transition: width .35s cubic-bezier(0.22,1,0.36,1);
}
.m-esort-count {
  font-family: 'Josefin Sans', sans-serif; font-size: .7rem; letter-spacing: .12em;
  color: var(--mt3); text-align: center; margin-top: 8px;
}
.m-imm-esort .m-esort-again { margin-bottom: 13px; }

/* Contenu des petites cartes (zones) centré */
.m-esort-zone { text-align: center; }

/* Variante Modalités : 3 zones (Début / Cœur / Fin) + saison du signe actif */
.m-esort-zones.three { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.m-esort-zones.three .m-esort-zone { padding: 13px 5px; }
.m-esort-zone-sub {
  font-family: 'Josefin Sans', sans-serif; font-size: .62rem; line-height: 1.3;
  color: var(--mt3); text-align: center;
}
.m-esort-active-meta {
  font-family: 'Josefin Sans', sans-serif; font-size: .82rem; letter-spacing: .04em;
  color: var(--mt3); margin-top: 3px;
}

/* CTA « Me tester » : jeu de clôture en bas de chapitre */
.m-test-cta {
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  margin: 34px 0 21px; text-align: center;
}
.m-test-cta-label {
  font-family: 'Josefin Sans', sans-serif; font-size: .9rem; color: var(--mt2);
}
.m-test-btn {
  font-family: 'Cinzel', serif; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mpl); background: rgba(123,111,196,.12);
  border: 1px solid rgba(155,143,214,.45); border-radius: 34px;
  padding: 13px 34px; cursor: pointer;
}
.m-test-btn:active { transform: scale(.97); }

/* Introduction · Interactif — les 3 ingrédients qui s'assemblent */
.m-intro-sentence {
  font-family: 'Cinzel', serif; font-size: 1.4rem; line-height: 1.4;
  text-align: center; margin: 21px 0 13px; min-height: 2.2em;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.m-intro-frag {
  color: var(--mt3); opacity: .35;
  transition: color .4s ease, opacity .4s ease, text-shadow .4s ease;
}
.m-intro-frag.on {
  color: var(--fc); opacity: 1;
  text-shadow: 0 0 16px color-mix(in srgb, var(--fc) 40%, transparent);
}
.m-intro-role {
  font-family: 'Josefin Sans', sans-serif; font-size: .9rem; line-height: 1.6;
  color: var(--mt3); text-align: center; min-height: 2.8em; margin-bottom: 21px;
}
.m-intro-ing { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.m-intro-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 16px 5px; cursor: pointer;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--ic) 35%, transparent);
  background: color-mix(in srgb, var(--ic) 8%, transparent);
  transition: transform .12s ease, opacity .3s ease;
}
.m-intro-card:active { transform: scale(.97); }
.m-intro-card.on { opacity: .5; }
.m-intro-card-label {
  font-family: 'Cinzel', serif; font-size: .8rem; letter-spacing: .08em;
}
.m-intro-card-sub {
  font-family: 'Josefin Sans', sans-serif; font-size: .62rem; color: var(--mt3);
}
.m-intro-finish { margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 13px; }

/* Progressions · Interactif — curseur jour = an */
.m-prog-readout {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  margin: 34px 0 21px;
}
.m-prog-side { display: flex; flex-direction: column; align-items: center; flex: 1; }
.m-prog-num {
  font-family: 'Cinzel', serif; font-size: 2.6rem; line-height: 1; color: var(--mpl);
}
.m-prog-unit {
  font-family: 'Josefin Sans', sans-serif; font-size: .68rem; line-height: 1.3;
  color: var(--mt3); text-align: center; margin-top: 5px;
}
.m-prog-eq {
  font-family: 'Cinzel', serif; font-size: 1.6rem; color: #F2AC29; flex-shrink: 0;
}

/* Introduction Planètes · Interactif — orbites à vitesses comparées */
.m-orb-sky { width: 100%; max-width: 280px; margin: 8px auto 0; display: block; touch-action: none; }
/* Pas de transition cx/cy : sinon le déplacement entre 2 angles se fait en ligne
   droite (corde) et le point « traverse le soleil ». Sans transition, il est toujours
   exactement sur son cercle ; la fluidité vient du curseur fin (step 0.1). */
.m-orb-counts { display: flex; justify-content: center; gap: 16px; margin: 13px 0 8px; }
.m-orb-count { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.m-orb-c-glyph { font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif; font-size: 1.1rem; line-height: 1; }
.m-orb-c-n { font-family: 'Cinzel', serif; font-size: 1.2rem; color: var(--mt1); line-height: 1.1; }
.m-orb-c-l { font-family: 'Josefin Sans', sans-serif; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mt3); }
.m-orb-years { font-family: 'Josefin Sans', sans-serif; font-size: .8rem; letter-spacing: .08em; color: var(--mt2); text-align: center; margin-top: 5px; }
.m-orb-years .m-orb-y { font-family: 'Cinzel', serif; font-size: 1.1rem; color: #F2AC29; }

/* Immersif cosmique (canvas vanilla) */
.m-imm-cosmos { background: #0d0c14; }
.m-cos-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
/* Canvas WebGL du nouvel immersif 3D (Three.js) */
.m-imm-3d-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; z-index: 0; }
/* Immersif 3D : le texte se place par zone (haut OU bas), jamais sur le contenu.
   Le dégradé de lisibilité suit toujours le côté du texte. */
.m-imm-3d .m-imm-top { position: relative; z-index: 4; }
.m-imm-3d.txt-bottom .m-cos-text { top: auto; bottom: 0; }
.m-imm-3d.txt-top .m-cos-text { top: 0; bottom: auto; padding: 56px 21px 13px; }
.m-imm-3d::after { content: ''; position: absolute; left: 0; right: 0; height: 46vh; z-index: 1; pointer-events: none; }
.m-imm-3d.txt-bottom::after { bottom: 0; background: linear-gradient(to top, rgba(13,12,20,.92) 0%, rgba(13,12,20,.6) 42%, transparent 100%); }
.m-imm-3d.txt-top::after { top: 0; background: linear-gradient(to bottom, rgba(13,12,20,.92) 0%, rgba(13,12,20,.6) 42%, transparent 100%); }
/* Plus de hauteur de texte en 3D : il y a la place, on ne coupe pas */
.m-imm-3d .m-cos-sub { max-height: 36vh; }
/* === Immersif 3D : bande de contrôle pleine largeur (vitesse · volume · pause | Continuer), zéro espace vide === */
.m-imm-3d .m-cos-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: rgba(13,12,20,.72); border-top: 1px solid rgba(155,143,214,.18); }
.m-imm-3d .m-cos-bar .m-cos-prog { position: relative; left: 0; right: 0; bottom: auto; height: 4px; width: 100%; }
.m-imm-3d .m-cos-bar-row { display: flex; align-items: center; gap: 8px; padding: 9px 16px; position: relative; }
.m-imm-3d .m-cos-bar .m-cos-speed,
.m-imm-3d .m-cos-bar .m-cos-vol,
.m-imm-3d .m-cos-bar .m-cos-pause,
.m-imm-3d .m-cos-bar .m-cos-next { position: static; left: auto; right: auto; bottom: auto; }
.m-imm-3d .m-cos-bar .m-cos-next { margin-left: auto; }
.m-imm-3d .m-cos-pause {
  width: 34px; height: 34px; border-radius: 21px; cursor: pointer; flex: none;
  border: 1px solid rgba(155,143,214,.22); background: rgba(123,111,196,.10); color: var(--mpl);
  font-size: .85rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.m-imm-3d .m-cos-pause:active { transform: scale(.97); }
/* Volume bar : horizontale, apparait à droite du bouton ♪ dans le flex row */
.m-imm-3d .m-cos-bar .m-cos-vol-bar {
  position: static;
  width: 0; height: 22px;
  transform: none; transform-origin: initial;
  accent-color: var(--mpl);
  display: block; flex-shrink: 0; overflow: hidden;
  transition: width 0.2s ease;
}
.m-imm-3d .m-cos-bar .m-cos-vol-bar.show { width: 89px; }
/* Vignettage : bords assombris, concentre le regard sur le contenu */
.m-imm-3d::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 52%, rgba(8,7,13,.6) 100%); }
/* Texte au-dessus de la bande + fondu au changement de zone */
.m-imm-3d.txt-bottom .m-cos-text { bottom: 64px; }
.m-imm-3d .m-cos-text { transition: opacity .4s ease; }
.m-imm-3d .m-cos-text.fade-out { opacity: 0; }
/* Reward : le bouton Fermer doit être cliquable malgré pointer-events:none sur .m-cos-text */
.m-imm-3d .m-cos-reward-close { pointer-events: auto; }

/* === Immersif Origines (.m-imm-ogn) : moteur narratif desktop dans la
   coquille mobile. Grain + vignette du théâtre PC, cartel phrase par
   phrase, frise chrono horizontale 100% fusionnée avec la progression. === */
.m-imm-ogn { background: #0d0c14; }
/* vignette fidèle au théâtre PC : remplace le ::before générique */
.m-imm-ogn::before { display: none; }
.m-ogn-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(13,12,20,.55) 100%);
}
/* grain pellicule : bruit généré en JS, sauts façon film */
.m-ogn-grain {
  position: absolute; inset: -128px; z-index: 2; pointer-events: none;
  mix-blend-mode: overlay; opacity: .05; background-repeat: repeat;
  animation: m-ogn-grain-jump .7s steps(7) infinite;
}
@keyframes m-ogn-grain-jump { to { transform: translate(128px, 128px); } }
/* en-tête d'ère EN HAUT (comme la planche PC : titre / œuvre / cartel) :
   il habille le vide sous la barre de titre, le cartel reste seul en bas */
.m-ogn-head {
  position: relative; z-index: 4; text-align: center;
  /* air FLUIDE sous la barre de titre : suit la hauteur d'écran, borné */
  padding: clamp(21px, 5svh, 55px) 21px 0; pointer-events: none;
  transition: opacity .4s ease;
}
.m-ogn-head.fade-out { opacity: 0; }
.m-ogn-mdate {
  font-family: 'Josefin Sans', sans-serif; font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: 5px;
}
.m-ogn-mtitle {
  font-family: 'Cinzel', serif; font-size: 1.15rem; color: #F2AC29; line-height: 1.4;
}
/* cartel : la phrase dite, entière, en fondu (pas de mot à mot ici) */
.m-imm-ogn .m-ogn-cartel {
  min-height: 4.2em; overflow: visible;
  opacity: 0; transition: opacity .3s ease;
}
.m-imm-ogn .m-ogn-cartel.on { opacity: 1; }
/* frise chrono horizontale EN HAUT : séparateur entre la barre de titre
   et l'en-tête d'ère. Le fil d'or avance avec la voix, les nœuds visités
   sont tapables. Rien dans la barre de navigation du bas. */
.m-ogn-frise { position: relative; z-index: 4; padding: 5px 0; }
/* bord à bord : seul un retrait d'un demi-nœud (4px) évite les pastilles coupées */
.m-ogn-frise-track { position: relative; height: 21px; margin: 0 4px; }
.m-ogn-frise-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  transform: translateY(-50%); background: rgba(155,143,214,.18);
}
.m-ogn-frise-fill {
  position: absolute; left: 0; top: 50%; height: 2px; width: 0;
  transform: translateY(-50%); background: #F2AC29;
  box-shadow: 0 0 8px rgba(242,172,41,.55);
  transition: width .9s ease;
}
/* nœud d'ère : bouton 21px (zone de tap), pastille 8px dessinée au centre */
.m-ogn-node {
  position: absolute; top: 50%; width: 21px; height: 21px;
  margin: -10.5px 0 0 -10.5px; padding: 0;
  background: none; border: none; cursor: pointer;
}
.m-ogn-node::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #1c1c22; border: 1px solid rgba(155,143,214,.35);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.m-ogn-node.visited::before { border-color: #F2AC29; background: rgba(242,172,41,.3); }
.m-ogn-node.current::before {
  border-color: var(--era, #F2AC29); background: var(--era, #F2AC29);
  box-shadow: 0 0 8px var(--era, #F2AC29);
}
.m-imm-cosmos .m-imm-top { position: relative; z-index: 3; }
/* Dégradé sombre en bas : sépare visuellement la scène du texte */
.m-imm-cosmos::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 44vh; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, #0d0c14 0%, rgba(13,12,20,.8) 55%, transparent 100%);
}
/* Zone texte ancrée en bas, jamais au-dessus de la scène */
.m-cos-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 21px 60px; text-align: center; z-index: 2; pointer-events: none; }
/* Titre épinglé : reste visible au-dessus du corps qui défile */
.m-cos-key { display: block; font-family: 'Cinzel', serif; font-size: 1.15rem; color: #F2AC29; line-height: 1.4; margin-bottom: 8px; min-height: 1.4em; }
/* Téléprompteur : hauteur limitée, scroll invisible (scrollTop JS) */
.m-cos-sub {
  position: relative; max-height: 26vh; overflow-y: scroll; scrollbar-width: none;
  font-family: 'Josefin Sans', sans-serif; font-size: .92rem; color: var(--mt2); line-height: 1.6; text-shadow: 0 2px 14px rgba(0,0,0,.7);
}
.m-cos-sub::-webkit-scrollbar { display: none; }
.m-cos-w { opacity: 0; transition: opacity .45s ease; }
.m-cos-w.on { opacity: 1; }
.m-cos-wk { font-family: 'Cinzel', serif; font-size: 1.15rem; color: #F2AC29; line-height: 1.4; }
/* Continuer : petit, en bas à droite, grisé puis déverrouillé en fin de lecture */
.m-cos-next {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(230,226,244,.4); background: rgba(123,111,196,.10); border: 1px solid rgba(155,143,214,.22);
  border-radius: 21px; padding: 8px 16px; cursor: default;
  pointer-events: none; transition: color .4s ease, background .4s ease, border-color .4s ease;
}
.m-cos-next.show { color: var(--mpl); background: rgba(123,111,196,.22); border-color: rgba(155,143,214,.6); cursor: pointer; pointer-events: auto; }
.m-cos-next:active { transform: scale(.97); }
/* Accélérer : petit, en bas à gauche, agit sur l'audio (le texte suit) */
.m-cos-speed {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(230,226,244,.55); background: rgba(123,111,196,.10); border: 1px solid rgba(155,143,214,.22);
  border-radius: 21px; padding: 8px 16px; cursor: pointer; pointer-events: auto;
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.m-cos-speed.active { color: var(--mpl); background: rgba(123,111,196,.22); border-color: rgba(155,143,214,.6); }
.m-cos-speed:active { transform: scale(.97); }
/* Volume : bouton en bas, clic → la barre apparaît */
.m-cos-vol {
  position: absolute; left: 16px; bottom: 54px; z-index: 3;
  width: 34px; height: 34px; border-radius: 21px;
  border: 1px solid rgba(155,143,214,.22); background: rgba(123,111,196,.10); color: var(--mpl);
  font-size: 1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.m-cos-vol:active { transform: scale(.97); }
.m-cos-vol-bar { position: absolute; left: 58px; bottom: 60px; z-index: 3; width: 120px; height: 22px; display: none; accent-color: var(--mpl); }
.m-cos-vol-bar.show { display: block; }
/* Barre de lecture : montre où on en est. Cliquable seulement une fois le beat écouté */
.m-cos-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(155,143,214,.15); z-index: 3; }
.m-cos-prog-fill { height: 100%; width: 0; background: var(--mpl); transition: width .2s linear; }
.m-cos-prog.seekable { height: 5px; cursor: pointer; }
.m-cos-reward-close {
  display: block; margin: 13px auto 0;
  font-family: 'Cinzel', serif; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mpl); background: rgba(123,111,196,.18); border: 1px solid rgba(155,143,214,.5);
  border-radius: 34px; padding: 10px 34px; cursor: pointer;
}

/* Grands Cycles · Interactif — ligne de vie */
.m-life-age { text-align: center; font-family: 'Josefin Sans', sans-serif; font-size: .8rem; letter-spacing: .08em; color: var(--mt2); margin: 21px 0 13px; }
.m-life-age .m-life-y { font-family: 'Cinzel', serif; font-size: 2rem; color: #F2AC29; display: block; line-height: 1; }
.m-life-track { position: relative; height: 4px; border-radius: 3px; background: rgba(255,255,255,.1); margin: 21px 5px 0; }
.m-life-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; border-radius: 3px; background: var(--mpl); transition: width .1s linear; }
.m-life-mark {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  transform: translate(-50%, -50%); background: #26273a; border: 1px solid rgba(155,143,214,.4);
  transition: background .25s, border-color .25s, transform .25s;
}
.m-life-mark.on { background: var(--mc); border-color: var(--mc); transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 10px color-mix(in srgb, var(--mc) 55%, transparent); }
.m-life-event { text-align: center; font-family: 'Josefin Sans', sans-serif; font-size: .92rem; letter-spacing: .02em; color: var(--mt3); margin-top: 21px; min-height: 1.4em; }

/* Maisons & Aspects · Interactif — angle entre deux planètes */
.m-asp-wheel { width: 100%; max-width: 280px; margin: 8px auto 0; display: block; touch-action: none; }
.m-asp-b { cursor: grab; }
.m-asp-readout { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 13px 0 8px; }
.m-asp-deg { font-family: 'Cinzel', serif; font-size: 2rem; line-height: 1; color: var(--mt1); }
.m-asp-name { font-family: 'Cinzel', serif; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; min-height: 1.2em; }
.m-asp-found { font-family: 'Josefin Sans', sans-serif; font-size: .72rem; letter-spacing: .08em; color: var(--mt3); text-align: center; }
.m-asp-found .m-asp-count { color: #F2AC29; font-weight: 600; }

/* Lire un Thème · Interactif — épurer jusqu'aux 3 piliers */
.m-th-wheel { width: 100%; max-width: 270px; margin: 8px auto 13px; display: block; }
.m-th-g {
  font-family: 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
  font-size: 17px; fill: #cfc9e6;
  transition: opacity .5s ease, fill .5s ease, font-size .5s ease;
}
.m-th-g.faded { opacity: .08; }
.m-th-g.glow { fill: #F2AC29; font-size: 22px; }
.m-th-btn { margin: 0 auto; }