:root {
      --bg: #03020d;
      --bg2: #07051a;
      --bg3: #0c0924;
      --card: #0e0b28;
      --card2: #13103a;
      --gold: #d3ae57;
      --gold2: #edd48c;
      --gold3: #faf3d2;
      --gold-dim: #9c7a2c;
      /* ── Or ancien patiné — direction artistique « artefact céleste premium »
         (refonte barre du bas 2026-09-09 ; palette légèrement relevée en luminosité
         2026-09-17 pour une interface plus « éclairée par une énergie cosmique »,
         sans jamais basculer vers un jaune CSS vif). */
      --ak-gold-antique: #c49f48;   /* or antique — traits fins, cadres inactifs */
      --ak-gold-lite:    #e0c06c;   /* or clair — survol / bordures actives */
      --ak-champagne:    #ead9a8;   /* champagne — reflets, halos */
      --ak-ivory:        #f1ebdc;   /* blanc ivoire — texte onglet actif */
      --ak-night:        #05051a;   /* bleu nuit presque noir */
      --ak-violet-deep:  #10082a;   /* violet très sombre */
      --ak-violet-cosmic:#211246;   /* violet cosmique */
      --violet: #5a2d9a;
      --violet2: #7a45c0;
      --violet3: #bd8fe8;
      --violet-glow: #9868d894;
      --indigo: #2d1f6a;
      --text: #f5f0e8;
      --text2: #d9ccf0;
      --text3: #ac9ccb;
      --border: #372b6e;
      --border2: #4a3a9048;
      /* Deux tokens partagés « premium » (2026-09-17) : la fine ligne or→violet→or
         utilisée pour les séparateurs/soulignements d'onglet actif, et un halo
         doré doux réutilisable en box-shadow sur les éléments premium (boutons,
         icônes actives…) — toujours discret, jamais un gros glow néon. */
      --gold-violet-line: linear-gradient(90deg, transparent, rgba(196,159,72,.8), rgba(139,92,199,.55), rgba(196,159,72,.8), transparent);
      --premium-glow: 0 0 14px rgba(196,159,72,.3);
      --red: #c04050;
      --green: #50a870;
      --radius: 14px;
      --shadow: 0 6px 40px #00000099;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: "Cormorant Garamond", serif; }
    html { zoom: 1.15; }

    /* ── CANVAS COSMIQUE ── */
    #cosmosCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

    /* ── RAYONS DE LUMIÈRE ── */
    .light-rays {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 60% 80% at 20% 10%, #4a1a8022 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 80% 5%,  #1a0a6022 0%, transparent 60%),
        radial-gradient(ellipse 80% 40% at 50% 100%,#2a104055 0%, transparent 60%);
      animation: lightShift 12s ease-in-out infinite alternate;
    }
    @keyframes lightShift {
      0%   { opacity: .7; transform: scale(1); }
      50%  { opacity: 1;  transform: scale(1.05); }
      100% { opacity: .8; transform: scale(1) rotate(1deg); }
    }

    /* ── GATE ── */
    #akashaGate {
      position: fixed; inset: 0; z-index: 100;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      background:
        radial-gradient(ellipse 100% 100% at 50% 40%, #160a3a99 0%, #03020dee 70%),
        url('akashique.webp') center center / cover no-repeat;
    }
    .gate-mandala {
      position: absolute; width: 520px; height: 520px; opacity: .06;
      animation: mandalaRotate 60s linear infinite; pointer-events: none;
    }
    @keyframes mandalaRotate { to { transform: rotate(360deg); } }
    .gate-glow-ring {
      position: absolute; width: 320px; height: 320px; border-radius: 50%;
      background: radial-gradient(circle, #6030c030 0%, transparent 70%);
      animation: pulseRing 4s ease-in-out infinite;
    }
    @keyframes pulseRing {
      0%,100% { transform: scale(1); opacity: .5; }
      50%      { transform: scale(1.15); opacity: 1; }
    }
    @keyframes liveBannerPulse {
      0%,100% { box-shadow: inset 0 0 0 rgba(255,60,60,0); background-color: rgba(255,60,60,.12); }
      50%      { box-shadow: inset 0 0 24px rgba(255,60,60,.35); background-color: rgba(255,60,60,.22); }
    }
    @keyframes liveDotBlink {
      0%,100% { opacity: 1; }
      50%      { opacity: .35; }
    }
    .gate-symbol {
      font-size: 68px; line-height: 1; margin-bottom: 14px; position: relative; z-index: 1;
      animation: symbolGlow 4s ease-in-out infinite;
    }
    @keyframes symbolGlow {
      0%,100% { text-shadow: 0 0 30px #c9a84c, 0 0 60px #c9a84c66; }
      50%      { text-shadow: 0 0 50px #e8c97a, 0 0 100px #c9a84c88, 0 0 160px #9060d044; }
    }
    .gate-title {
      font-family: "Cinzel Decorative", "Cinzel", serif; font-size: 44px; font-weight: 700;
      letter-spacing: 10px; margin-bottom: 4px; position: relative; z-index: 1;
      background: linear-gradient(135deg, #a07020 0%, #e8c97a 40%, #f8efc0 60%, #c9a84c 80%, #805010 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      filter: drop-shadow(0 2px 12px #c9a84c44);
    }
    .gate-sub {
      font-style: italic; color: var(--text2); font-size: 14px; letter-spacing: 4px;
      margin-bottom: 40px; position: relative; z-index: 1; text-shadow: 0 0 20px #9060d066;
    }
    .gate-ornament {
      display: flex; align-items: center; gap: 12px; margin-bottom: 26px; position: relative; z-index: 1;
    }
    .gate-ornament-line { height: 1px; width: 60px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); }
    .gate-ornament-symbol { color: var(--gold-dim); font-size: 13px; letter-spacing: 5px; }

    .gate-box {
      background: linear-gradient(160deg, #130e30ee 0%, #0c0924ee 100%);
      border: 1px solid #3a2a6a; border-radius: 18px; padding: 38px 42px; width: 380px;
      box-shadow: var(--shadow), 0 0 80px #3b2a7a22, inset 0 1px 0 #6040a022;
      position: relative; z-index: 1; backdrop-filter: blur(10px);
    }
    .gate-box::before {
      content: ""; position: absolute; inset: -1px; border-radius: 19px; pointer-events: none;
      background: linear-gradient(135deg, #6040a028 0%, transparent 50%, #c9a84c12 100%);
    }
    .gate-tabs { display: flex; margin-bottom: 28px; border-bottom: 1px solid var(--border); }
    .gate-tab {
      flex: 1; text-align: center; padding: 10px; cursor: pointer;
      font-family: "Cinzel", serif; font-size: 11px; letter-spacing: 3px;
      color: var(--text3); border-bottom: 2px solid transparent; transition: all .3s;
    }
    .gate-tab.active { color: var(--gold); border-bottom-color: var(--gold); text-shadow: 0 0 10px var(--gold-dim); }
    .gate-mode { display: none; }
    .gate-mode.active { display: block; }
    .gate-field { margin-bottom: 18px; }
    .gate-field label { display: block; font-size: 10px; letter-spacing: 3px; color: var(--text3); margin-bottom: 7px; text-transform: uppercase; font-family: "Cinzel", serif; }
    .gate-field input {
      width: 100%; background: #08061aaa; border: 1px solid var(--border);
      border-radius: 10px; padding: 11px 16px; color: var(--text); font-family: inherit; font-size: 15px;
      outline: none; transition: all .3s;
    }
    .gate-field input:focus { border-color: var(--violet2); box-shadow: 0 0 0 3px #6040a022, 0 0 20px #6040a033; }
    .gate-btn {
      width: 100%; padding: 13px; margin-top: 6px;
      background: linear-gradient(135deg, #5a2d9a 0%, #2d1f6a 100%);
      border: 1px solid #7a45c0; border-radius: 10px; color: var(--gold2);
      font-family: "Cinzel", serif; font-size: 12px; letter-spacing: 3px; cursor: pointer;
      transition: all .3s; text-transform: uppercase; position: relative; overflow: hidden;
    }
    .gate-btn:hover { background: linear-gradient(135deg, #7a45c0 0%, #4a2d8a 100%); color: var(--gold3); box-shadow: 0 0 30px #6040a044; }
    .gate-error { color: #e06070; font-size: 13px; margin-top: 14px; text-align: center; min-height: 18px; font-style: italic; }
    .gate-link { text-align: center; margin-top: 16px; font-size: 12px; color: var(--text3); }
    .gate-link a { color: var(--gold-dim); cursor: pointer; transition: color .2s; }
    .gate-link a:hover { color: var(--gold2); }
    .gate-pending { text-align: center; padding: 24px 0; color: var(--text2); font-style: italic; line-height: 1.8; }
    .gate-pending .pend-icon { font-size: 44px; margin-bottom: 14px; }

    /* ── APP ── */
    #akashaApp {
      position: fixed; inset: 0; z-index: 1; display: none; flex-direction: column;
      background: #050318; /* fond de secours si l'image met du temps à charger */
    }
    /* Décor de la Bibliothèque Cosmique — porté par un pseudo-élément dédié plutôt
       que par le background direct de #akashaApp, pour pouvoir lui appliquer un
       filter (brightness/contrast/saturate) SANS toucher aux vrais enfants
       (topbar, panneaux, nav basse, textes) : un filter CSS n'affecte que
       l'élément qui le porte, jamais ses frères — header/nav/texte gardent donc
       exactement leur lisibilité actuelle (demande user 2026-09-17 : éclaircir le
       décor sans rien changer à la structure ni à l'UI).
       Couches, de la plus visible (dessus) à la plus enfouie (dessous) :
        1. Halo or subtil sur la zone architecturale haute (portique / colonnes)
        2. Lumière cosmique violette/bleue diffuse au centre (portail + cercle au
           sol, la zone qui donne le plus de profondeur à la scène)
        3. Voile sombre général — opacités réduites d'environ 20% par rapport à
           l'original (#07051aee/bb/aa) pour laisser respirer le décor (livres,
           escaliers, cristaux, globe) sans le rendre gris ni délavé ; les teintes
           restent volontairement bleu nuit / violet, jamais neutres.
        4. Vignettage cinématographique : bords assombris, centre dégagé — c'est
           lui qui recrée la profondeur/l'effet "salle immense" sur les côtés.
        5. L'image de la bibliothèque elle-même.
       `background-blend-mode` : les 2 halos lumineux (1 et 2) sont en "screen"
       (addition photographique, comme une vraie source de lumière) plutôt qu'une
       simple couleur plate posée dessus ; le voile et le vignettage restent en
       fusion normale pour ne pas déraper vers un rendu terne. */
    #akashaApp::before {
      content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 62% 40% at 50% 26%, rgba(232,201,122,.12) 0%, rgba(232,201,122,.05) 45%, transparent 74%),
        radial-gradient(ellipse 46% 62% at 50% 54%, rgba(158,118,235,.26) 0%, rgba(104,70,190,.14) 32%, rgba(46,24,96,.06) 58%, transparent 78%),
        linear-gradient(180deg, rgba(7,5,26,.75) 0%, rgba(3,2,17,.58) 40%, rgba(5,3,24,.53) 100%),
        radial-gradient(ellipse 88% 78% at 50% 50%, transparent 42%, rgba(2,1,10,.5) 100%),
        url('akashique2.webp') center center / cover no-repeat fixed;
      background-blend-mode: screen, screen, normal, normal, normal;
      filter: brightness(1.09) contrast(1.06) saturate(1.06);
    }

    /* ── TOPBAR ── */
    .topbar {
      display: flex; align-items: center; gap: 10px; padding: 12px 20px;
      background: linear-gradient(180deg, #07051acc 0%, transparent 100%);
      position: relative; z-index: 10; overflow: hidden;
    }
    .topbar::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
      background: var(--gold-violet-line);
    }
    /* petite étoile polaire au centre de la séparation dorée sous le header */
    .topbar::before {
      content: "\2726"; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
      font-size: 8px; line-height: 1; color: var(--ak-gold-antique); opacity: .75; z-index: 1;
      text-shadow: 0 0 6px rgba(185,146,59,.45); pointer-events: none;
    }
    /* Onglet « ✦ OR SPIRITUEL » : bouton (style .topbar-tools-btn) + panneau déroulant.
       Le panneau est hors de .topbar (overflow:hidden), positionné en JS sous le bouton. */
    #akOrBtn { order: 3; margin-left: auto; }
    #akOrBtn[hidden] { display: none; }
    #akOrBtn ~ #topbarToolsBtn { margin-left: 6px; }
    #akOrBtn.open { border-color: var(--gold-dim); background: rgba(201,168,76,.14); }
    /* (Ancien repli icône seule de #akOrBtn sur mobile supprimé : le bouton vit
       désormais dans le menu burger en pleine largeur, cf. @media 680.) */
    #akOrDropdown {
      position: fixed; z-index: 9600; min-width: 250px;
      padding: 12px; border: 1px solid var(--border); border-radius: 14px;
      background: #0a0720f5; box-shadow: 0 16px 44px #000000bb;
    }
    .ak-or-head {
      font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 3px;
      color: var(--gold2); text-transform: uppercase; text-align: center; margin-bottom: 10px;
    }
    .topbar-logo {
      font-family: "Cinzel Decorative", "Cinzel", serif; font-size: 28px; font-weight: 700;
      background: linear-gradient(135deg, #a07828, #c9a84c, #f0d878, #e8c97a, #c9a84c, #a07828);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      letter-spacing: 5px; filter: drop-shadow(0 0 18px #c9a84c88) drop-shadow(0 0 40px #c9a84c33);
      flex-shrink: 0; line-height: 1;
    }
    .topbar-logo span {
      -webkit-text-fill-color: transparent;
      background: linear-gradient(90deg, #9d84dd, #d9c2f4, #9d84dd);
      -webkit-background-clip: text; background-clip: text;
      font-size: 9px; letter-spacing: 5px; display: block; font-weight: 600;
      font-family: "Cormorant Garamond", serif; font-style: italic;
      margin-top: 1px; text-transform: uppercase;
      filter: drop-shadow(0 0 8px rgba(160,110,220,.4));
    }
    /* Logo POLARISTAR = bouton retour à l'accueil (index.html) — flottant, bas-gauche */
    #polaristar-home-btn {
      position: fixed; bottom: 28px; left: 28px; z-index: 8888;
      width: 56px; height: 56px; border-radius: 50%;
      background: #000;
      border: 1px solid rgba(201,168,76,.7);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      text-decoration: none; cursor: pointer;
      box-shadow: 0 0 24px rgba(201,168,76,.35), 0 0 60px rgba(201,168,76,.12);
      transition: all .2s; flex-shrink: 0;
    }
    #polaristar-home-btn:hover { box-shadow: 0 0 30px rgba(201,168,76,.55); transform: scale(1.06); }
    /* Bouton flottant Quêtes — bas-droite, même pattern que astrae/constella/corpus.
       Unique accès aux Quêtes depuis 2026-08-31 (le nav "🗺 Quêtes" du header a été retiré). */
    #sub-fab {
      position: fixed; bottom: 28px; right: 28px; z-index: 8888;
      font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 3px;
      padding: 13px 22px; cursor: pointer; border: 1px solid rgba(201,168,76,.7);
      background: linear-gradient(135deg,#1a1004,#3a2808);
      color: #e8c870; text-decoration: none; display: inline-block;
      box-shadow: 0 0 16px rgba(201,168,76,.4);
      animation: fabPulse 3s ease-in-out infinite;
    }
    /* pulse en opacity (composé GPU) au lieu de box-shadow floue 80px → évite le
       clignotement du bouton fixe au scroll sur mobile */
    @keyframes fabPulse { 0%,100% { opacity:.82 } 50% { opacity:1 } }
    @media(prefers-reduced-motion:reduce){ #sub-fab{ animation:none; opacity:1 } }
    @media(max-width:600px){ #sub-fab{ bottom:16px; right:16px; padding:10px 16px; font-size:10px; } }
    /* Roue de raccourcis radiale (demande user 2026-09-05, appliquée depuis
       astrae.html à tous les outils Polaristar mobiles) — remplace #sub-fab au
       même endroit (bas-droite). #sub-fab reste dans le DOM/fonctionnel (juste
       masqué), la roue déclenche un .click() dessus. z-index 8886, sous les
       8888 de l'ancien #sub-fab — le menu burger ouvert (z-index 9000, voir
       .topbar.menu-open plus bas) passe déjà au-dessus de tout ça sans rien
       de plus à faire ici. Breakpoint 767px, indépendant du 680px du burger. */
    /* ══ REFONTE NAV AKASHA (demande user 2026-09-06) ══
       - Toutes les fonctionnalités propres à Akasha → barre d'onglets EN BAS.
       - Header (.topbar) : titre centré + cloche seule, poussée tout à droite.
       - Roue de raccourcis Polaristar : montée EN HAUT dans le header.
       - #sub-fab / #polaristar-home-btn / bouton « Outils » topbar : masqués partout. */
    #sub-fab{ display:none !important; }
    #polaristar-home-btn{ display:none !important; }
    #topbarToolsBtn{ display:none !important; }
    #topbarBurgerBtn{ display:none !important; }
    .topbar-menu-panel{ display:none !important; }

    /* Header agrandi pour que la roue de raccourcis (58–64px) y soit bien intégrée,
       centrée verticalement — pas suspendue sous le bord (demande user 2026-09-06). */
    .topbar{
      justify-content:center !important; align-items:center !important;
      position:relative; overflow:visible !important;
      min-height:78px; box-sizing:border-box;
      padding-top:calc(10px + env(safe-area-inset-top,0px)) !important;
      padding-bottom:10px !important;
      /* padding symétrique = titre réellement centré sur le viewport ; la roue
         (left:16) et la cloche (right:16) sont position fixed/absolute, elles
         chevauchent librement cette zone de padding. */
      padding-left:80px !important;
      padding-right:80px !important;
    }
    /* Titre du header agrandi + « AKASHA » et « Bibliothèque Cosmique » centrés
       ensemble + léger effet de magie qui fait briller le titre (demande user 2026-09-06). */
    .topbar-logo{
      margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center;
      font-size:40px !important; letter-spacing:7px !important; line-height:1;
      position:relative;
      background:linear-gradient(100deg,#a1802f 0%,#d3ae57 30%,#f4dd90 47%,#fffbef 50%,#f4dd90 53%,#d3ae57 70%,#a1802f 100%) !important;
      background-size:280% 100% !important; background-position:0% 50% !important;
      -webkit-background-clip:text !important; background-clip:text !important;
      -webkit-text-fill-color:transparent !important;
      animation:akLogoShine 5.5s linear infinite, akLogoGlow 4.5s ease-in-out infinite;
    }
    .topbar-logo span{
      display:block !important; font-size:10px !important; letter-spacing:5px !important; margin-top:4px !important;
      -webkit-text-fill-color:transparent;
    }
    /* Effet « magie » : la bande claire du dégradé balaie le titre + le halo doré pulse. */
    @keyframes akLogoShine{
      0%   { background-position:120% 50%; }
      100% { background-position:-20% 50%; }
    }
    @keyframes akLogoGlow{
      0%,100%{ filter:drop-shadow(0 0 15px rgba(212,178,90,.48)) drop-shadow(0 0 30px rgba(212,178,90,.24)); }
      50%    { filter:drop-shadow(0 0 24px rgba(246,222,132,.68)) drop-shadow(0 0 50px rgba(212,178,90,.38)); }
    }
    @media(prefers-reduced-motion:reduce){ .topbar-logo{ animation:none !important; background-position:50% 50% !important; } }
    @media(max-width:680px){
      .topbar-logo{ font-size:30px !important; letter-spacing:5px !important; }
      .topbar-logo span{ display:block !important; font-size:8px !important; letter-spacing:4px !important; }
    }
    .ak-bell{ position:absolute !important; right:16px; top:50%; transform:translateY(-50%); margin:0 !important; }

    /* Roue dans le header — coin haut-gauche, centrée verticalement dans la barre,
       se déploie vers le bas-droite. */
    #ps-akasha-rfab, #ps-akasha-rfab-backdrop{ display:block; }
    #ps-akasha-rfab{
      position:fixed !important;
      top:calc(11px + env(safe-area-inset-top,0px)) !important;
      left:16px !important; right:auto !important; bottom:auto !important;
      /* AU-DESSUS de son propre fond (#...-backdrop = 8885) sinon le fond, en
         pointer-events:auto une fois ouvert, capte les clics des items (demande
         user 2026-09-06 : « boutons pas cliquables »). */
      z-index:8887 !important;
    }
    #ps-akasha-rfab-backdrop{
      z-index:8886 !important;
      backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
      background:rgba(4,2,16,.5) !important;
    }
    @media(min-width:768px){
      .topbar{ min-height:84px; }
      #ps-akasha-rfab{ top:calc(12px + env(safe-area-inset-top,0px)) !important; }
    }
    #ps-akasha-rfab .ps-rfab-btn{ background:#05030f; border:none; }
    #ps-akasha-rfab .ps-rfab-btn img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
    /* Items de la roue : plus lumineux / mieux détachés du fond sombre d'Akasha
       (demande user 2026-09-06 : « encore terne »). */
    #ps-akasha-rfab .ps-rfab-item{
      background:linear-gradient(160deg,#2a1a5c,#140a34) !important;
      border:1.5px solid #d4a832 !important;
      color:#fff3d6 !important;
      box-shadow:0 0 16px rgba(212,168,50,.4), 0 6px 18px rgba(0,0,0,.5) !important;
    }
    #ps-akasha-rfab .ps-rfab-item:hover,
    #ps-akasha-rfab .ps-rfab-item:active{
      border-color:#ffe87a !important; background:linear-gradient(160deg,#3a2578,#1c0f44) !important;
      box-shadow:0 0 22px rgba(255,232,122,.6) !important;
    }
    #ps-akasha-rfab .ps-rfab-item-lb{
      color:#f5e6bf !important; text-shadow:0 1px 4px #000, 0 0 8px rgba(212,168,50,.4) !important;
    }
    /* Mobile : la roue est un peu trop grosse dans le header — on la réduit et on la
       recentre verticalement dans la barre (~78px de haut). */
    @media(max-width:767px){
      #ps-akasha-rfab{ width:46px !important; height:46px !important; top:calc(16px + env(safe-area-inset-top,0px)) !important; }
    }
    @media(min-width:768px){
      #ps-akasha-rfab{ --rfab-col-gap:104px; --rfab-row-gap:110px; }
      #ps-akasha-rfab .ps-rfab-item{ width:58px; height:58px; }
      #ps-akasha-rfab .ps-rfab-item-ic{ font-size:21px; }
      #ps-akasha-rfab .ps-rfab-item-ic img{ width:28px; height:28px; }
      #ps-akasha-rfab .ps-rfab-item-lb{ width:84px; font-size:9px; margin-top:7px; }
    }

    /* ══════════════════════════════════════════════════════════════════════
       BARRE D'ONGLETS DU BAS — « observatoire / bibliothèque cosmique »
       (refonte 2026-09-30 : icônes SVG maison en currentColor, plus aucun emoji).
       Principe : la barre flotte devant la bibliothèque (fond nuit translucide,
       filet violet→or→violet), l'onglet actif est signalé par la LUMIÈRE (icône +
       libellé dorés, filet doré + losange au-dessus, halo très discret) — jamais
       par un rectangle plein. Nexus, onglet central, est légèrement plus grand.
       Tous les ornements sont en pseudo-éléments (pointer-events:none) : la zone
       tactile n'est jamais réduite. Toutes les animations sont lentes et coupées
       sous prefers-reduced-motion.
       ══════════════════════════════════════════════════════════════════════ */
    #ak-bottom-nav{
      --akbn-txt:#beb7d6;            /* libellé / icône au repos */
      --akbn-gold:#d5ae55;           /* or chaud actif */
      --akbn-halo:139,92,199;        /* halo violet (rgb) */
      /* 4 angles gravés (repris de l'ancienne barre) : 3 intensités — repos / survol / actif */
      --akbn-dim-tl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23b9923b' stroke-opacity='0.3' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M1 6V1h5'/%3E%3Ccircle cx='6.4' cy='6.4' r='.7' fill='%23b9923b' fill-opacity='0.3' stroke='none'/%3E%3C/svg%3E");
      --akbn-dim-tr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23b9923b' stroke-opacity='0.3' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M10 1h5v5'/%3E%3Ccircle cx='9.6' cy='6.4' r='.7' fill='%23b9923b' fill-opacity='0.3' stroke='none'/%3E%3C/svg%3E");
      --akbn-dim-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23b9923b' stroke-opacity='0.3' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M15 10v5h-5'/%3E%3Ccircle cx='9.6' cy='9.6' r='.7' fill='%23b9923b' fill-opacity='0.3' stroke='none'/%3E%3C/svg%3E");
      --akbn-dim-bl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23b9923b' stroke-opacity='0.3' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M6 15H1v-5'/%3E%3Ccircle cx='6.4' cy='9.6' r='.7' fill='%23b9923b' fill-opacity='0.3' stroke='none'/%3E%3C/svg%3E");
      --akbn-mid-tl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23c49f48' stroke-opacity='0.75' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M1 6V1h5'/%3E%3Ccircle cx='6.4' cy='6.4' r='.7' fill='%23c49f48' fill-opacity='0.75' stroke='none'/%3E%3C/svg%3E");
      --akbn-mid-tr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23c49f48' stroke-opacity='0.75' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M10 1h5v5'/%3E%3Ccircle cx='9.6' cy='6.4' r='.7' fill='%23c49f48' fill-opacity='0.75' stroke='none'/%3E%3C/svg%3E");
      --akbn-mid-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23c49f48' stroke-opacity='0.75' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M15 10v5h-5'/%3E%3Ccircle cx='9.6' cy='9.6' r='.7' fill='%23c49f48' fill-opacity='0.75' stroke='none'/%3E%3C/svg%3E");
      --akbn-mid-bl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23c49f48' stroke-opacity='0.75' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M6 15H1v-5'/%3E%3Ccircle cx='6.4' cy='9.6' r='.7' fill='%23c49f48' fill-opacity='0.75' stroke='none'/%3E%3C/svg%3E");
      --akbn-hi-tl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23e0c06c' stroke-opacity='1' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M1 6V1h5'/%3E%3Ccircle cx='6.4' cy='6.4' r='.7' fill='%23e0c06c' fill-opacity='1' stroke='none'/%3E%3C/svg%3E");
      --akbn-hi-tr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23e0c06c' stroke-opacity='1' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M10 1h5v5'/%3E%3Ccircle cx='9.6' cy='6.4' r='.7' fill='%23e0c06c' fill-opacity='1' stroke='none'/%3E%3C/svg%3E");
      --akbn-hi-br:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23e0c06c' stroke-opacity='1' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M15 10v5h-5'/%3E%3Ccircle cx='9.6' cy='9.6' r='.7' fill='%23e0c06c' fill-opacity='1' stroke='none'/%3E%3C/svg%3E");
      --akbn-hi-bl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23e0c06c' stroke-opacity='1' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M6 15H1v-5'/%3E%3Ccircle cx='6.4' cy='9.6' r='.7' fill='%23e0c06c' fill-opacity='1' stroke='none'/%3E%3C/svg%3E");
      --akbn-sheen:linear-gradient(115deg,transparent 44%,rgba(228,210,155,.34) 50%,transparent 56%);
      flex-shrink:0; display:flex; align-items:stretch; gap:0; position:relative;
      padding:14px 6px calc(8px + env(safe-area-inset-bottom,0px));
      background:linear-gradient(180deg,rgba(11,7,28,.82) 0%,rgba(9,6,25,.9) 100%);
      border-top:1px solid transparent;
      box-shadow:0 -14px 40px rgba(2,1,12,.5);
      backdrop-filter:blur(8px) saturate(1.05);
      -webkit-backdrop-filter:blur(8px) saturate(1.05);
      overflow-x:hidden; overflow-y:visible; scrollbar-width:none; z-index:12;
    }
    #ak-bottom-nav::-webkit-scrollbar{ display:none; }
    /* filet supérieur ultra-fin : violet → or → violet */
    #ak-bottom-nav::before{
      content:""; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
      background:linear-gradient(90deg,transparent 2%,rgba(122,64,160,.45) 22%,rgba(213,174,85,.7) 50%,rgba(122,64,160,.45) 78%,transparent 98%);
    }
    #ak-bottom-nav .akbn-item[hidden]{ display:none !important; }

    /* ── onglet ── */
    #ak-bottom-nav .akbn-item{
      position:relative; overflow:visible;
      flex:1 1 0; min-width:0; min-height:48px; display:flex; flex-direction:column;
      align-items:center; justify-content:center; gap:4px;
      padding:5px 2px; border:none; background-color:transparent; cursor:pointer;
      color:var(--akbn-txt); font-family:'Cinzel',serif;
      background-image:var(--akbn-dim-tl),var(--akbn-dim-tr),var(--akbn-dim-br),var(--akbn-dim-bl),var(--akbn-sheen);
      background-repeat:no-repeat;
      background-position:3px 3px,calc(100% - 3px) 3px,calc(100% - 3px) calc(100% - 3px),3px calc(100% - 3px),-260% 0;
      background-size:12px 12px,12px 12px,12px 12px,12px 12px,55% 100%;
      transition:color .22s ease, transform .22s ease, background-size .3s ease;
      -webkit-tap-highlight-color:transparent;
    }
    #ak-bottom-nav .akbn-ic{ position:relative; display:flex; align-items:center; justify-content:center; opacity:.72;
      transition:opacity .22s ease, filter .22s ease; }
    #ak-bottom-nav .akbn-svg{ width:22px; height:22px; display:block; overflow:visible;
      fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
    #ak-bottom-nav .akbn-svg .f{ fill:currentColor; stroke:none; }
    #ak-bottom-nav .akbn-lb{
      font-size:clamp(7.5px,2.3vw,10px); font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-align:center;
      line-height:1.1; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:clip;
      transition:color .22s ease, letter-spacing .22s ease;
    }
    /* indicateur supérieur : filet d'or qui s'évanouit sur les côtés + losange (caché au repos) */
    #ak-bottom-nav .akbn-item::before{
      content:""; position:absolute; left:50%; top:-12px; width:46px; height:1px; pointer-events:none;
      transform:translateX(-50%) scaleX(.3); opacity:0;
      background:linear-gradient(90deg,transparent,var(--akbn-gold),transparent);
      transition:opacity .3s ease, transform .3s ease;
    }
    #ak-bottom-nav .akbn-item::after{
      content:""; position:absolute; left:50%; top:-14.5px; width:5px; height:5px; pointer-events:none;
      transform:translateX(-50%) rotate(45deg) scale(.4); opacity:0;
      background:var(--akbn-gold); box-shadow:0 0 6px rgba(213,174,85,.7);
      transition:opacity .3s ease, transform .3s ease;
    }
    /* ── survol ── */
    #ak-bottom-nav .akbn-item:hover{ color:#e6e1f5; transform:translateY(-2px); }
    #ak-bottom-nav .akbn-item:hover{
      background-image:var(--akbn-mid-tl),var(--akbn-mid-tr),var(--akbn-mid-br),var(--akbn-mid-bl),var(--akbn-sheen);
      background-size:14px 14px,14px 14px,14px 14px,14px 14px,55% 100%; }
    @media(prefers-reduced-motion:no-preference){
      #ak-bottom-nav .akbn-item:hover{ animation:akbnSheen .9s ease 1; }
    }
    @keyframes akbnSheen{
      from{ background-position:3px 3px,calc(100% - 3px) 3px,calc(100% - 3px) calc(100% - 3px),3px calc(100% - 3px),-260% 0; }
      to  { background-position:3px 3px,calc(100% - 3px) 3px,calc(100% - 3px) calc(100% - 3px),3px calc(100% - 3px),190% 0; }
    }
    #ak-bottom-nav .akbn-item:hover .akbn-ic{ opacity:1; filter:drop-shadow(0 0 5px rgba(var(--akbn-halo),.75)); }
    #ak-bottom-nav .akbn-item:focus-visible{ outline:1px solid rgba(213,174,85,.6); outline-offset:-2px; border-radius:6px; }
    /* ── actif : lumière, pas de fond plein ── */
    #ak-bottom-nav .akbn-item.active{ color:var(--akbn-gold);
      background-image:var(--akbn-hi-tl),var(--akbn-hi-tr),var(--akbn-hi-br),var(--akbn-hi-bl),var(--akbn-sheen);
      background-size:14px 14px,14px 14px,14px 14px,14px 14px,55% 100%; }
    #ak-bottom-nav .akbn-item.active .akbn-lb{ letter-spacing:.16em; font-weight:700; text-shadow:0 0 10px rgba(213,174,85,.28); }
    #ak-bottom-nav .akbn-item.active .akbn-ic{ opacity:1;
      filter:drop-shadow(0 0 6px rgba(213,174,85,.4)) drop-shadow(0 0 12px rgba(var(--akbn-halo),.3)); }
    #ak-bottom-nav .akbn-item.active::before{ opacity:1; transform:translateX(-50%) scaleX(1); }
    #ak-bottom-nav .akbn-item.active::after{ opacity:1; transform:translateX(-50%) rotate(45deg) scale(1); }
    #ak-bottom-nav .akbn-item:active{ transform:translateY(-1px); }

    /* ── hiérarchie : Nexus, onglet central, un peu plus présent ── */
    #ak-bottom-nav .akbn-item[data-aknav="comm"] .akbn-svg{ width:25px; height:25px; }
    #ak-bottom-nav .akbn-item[data-aknav="comm"] .akbn-ic{ opacity:.85; filter:drop-shadow(0 0 5px rgba(var(--akbn-halo),.35)); }
    #ak-bottom-nav .akbn-item[data-aknav="comm"] .akbn-lb{ font-weight:700; }
    #ak-bottom-nav .akbn-item[data-aknav="comm"]:hover .akbn-ic{ opacity:1; filter:drop-shadow(0 0 6px rgba(var(--akbn-halo),.8)); }
    #ak-bottom-nav .akbn-item[data-aknav="comm"].active .akbn-ic{
      filter:drop-shadow(0 0 6px rgba(213,174,85,.45)) drop-shadow(0 0 13px rgba(var(--akbn-halo),.35)); }

    /* ── micro-animations (calmes) ── */
    @media(prefers-reduced-motion:no-preference){
      /* pulsation du halo de l'onglet actif, ~5 s */
      #ak-bottom-nav .akbn-item.active .akbn-ic,
      #ak-bottom-nav .akbn-item[data-aknav="comm"].active .akbn-ic{ animation:akbnBreath 5s ease-in-out infinite; }
      @keyframes akbnBreath{
        0%,100%{ filter:drop-shadow(0 0 5px rgba(213,174,85,.32)) drop-shadow(0 0 10px rgba(var(--akbn-halo),.22)); }
        50%    { filter:drop-shadow(0 0 8px rgba(213,174,85,.55)) drop-shadow(0 0 16px rgba(var(--akbn-halo),.4)); }
      }
      /* Codex : l'étoile centrale scintille de temps en temps */
      #ak-bottom-nav .akbn-codex-star{ transform-box:fill-box; transform-origin:center; animation:akbnStar 7s ease-in-out infinite; }
      @keyframes akbnStar{ 0%,80%,100%{ opacity:1; transform:scale(1); } 88%{ opacity:.35; transform:scale(.7); } 94%{ opacity:1; transform:scale(1.25); } }
      /* Nexus : les nœuds s'allument progressivement autour du centre */
      #ak-bottom-nav .akbn-node{ animation:akbnNode 6s ease-in-out infinite; }
      #ak-bottom-nav .akbn-node.n2{ animation-delay:1.2s; }
      #ak-bottom-nav .akbn-node.n3{ animation-delay:2.4s; }
      #ak-bottom-nav .akbn-node.n4{ animation-delay:3.6s; }
      #ak-bottom-nav .akbn-node.n5{ animation-delay:4.8s; }
      @keyframes akbnNode{ 0%,100%{ opacity:.45; } 20%{ opacity:1; } 45%{ opacity:.45; } }
      /* Lives : les ondes respirent doucement */
      #ak-bottom-nav .akbn-wave-in{ animation:akbnWave 4s ease-in-out infinite; }
      #ak-bottom-nav .akbn-wave-out{ animation:akbnWave 4s ease-in-out infinite .8s; }
      @keyframes akbnWave{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
      /* actif : le losange respire très lentement */
      #ak-bottom-nav .akbn-item.active::after{ animation:akbnDiamond 5s ease-in-out infinite; }
      @keyframes akbnDiamond{ 0%,100%{ box-shadow:0 0 5px rgba(213,174,85,.5); } 50%{ box-shadow:0 0 10px rgba(213,174,85,.9); } }
    }
    @media(prefers-reduced-motion:reduce){
      #ak-bottom-nav .akbn-item,
      #ak-bottom-nav .akbn-item:hover,
      #ak-bottom-nav .akbn-item:active{ transform:none; transition:none; }
    }

    /* « Organiser » : jeton épinglé tout à droite (navigateur web seulement),
       pilule horizontale compacte ; transform verrouillé à translateY(-50%) pour
       toutes les pseudo-classes (sinon .akbn-item:hover l'écrase et il saute). */
    #ak-bottom-nav button.akbn-organize{
      position:absolute; right:6px; top:calc(50% + 3px);
      flex:0 0 auto; min-height:0;
      flex-direction:row; gap:7px; align-items:center; justify-content:center;
      padding:7px 12px; border-radius:11px;
      border:1px solid rgba(190,183,214,.22);
      background:rgba(20,12,46,.35);
    }
    #ak-bottom-nav button.akbn-organize,
    #ak-bottom-nav button.akbn-organize:hover,
    #ak-bottom-nav button.akbn-organize:focus,
    #ak-bottom-nav button.akbn-organize:active,
    #ak-bottom-nav button.akbn-organize.active{ transform:translateY(-50%); }
    #ak-bottom-nav .akbn-organize .akbn-svg{ width:16px; height:16px; }
    #ak-bottom-nav .akbn-organize .akbn-lb{ font-size:8.5px; letter-spacing:.12em; }
    #ak-bottom-nav .akbn-organize::before,
    #ak-bottom-nav .akbn-organize::after{ display:none !important; }
    #ak-bottom-nav button.akbn-organize,
    #ak-bottom-nav button.akbn-organize:hover,
    #ak-bottom-nav button.akbn-organize.active{ background-image:none; animation:none; }
    #ak-bottom-nav button.akbn-organize:hover{ border-color:rgba(var(--akbn-halo),.6); box-shadow:0 0 12px rgba(var(--akbn-halo),.3); }
    #ak-bottom-nav button.akbn-organize.active{ border-color:rgba(213,174,85,.55); box-shadow:0 0 12px rgba(213,174,85,.2); }

    /* tablette / desktop : libellés complets, largeur d'onglet égale (Nexus reste
       au centre géométrique quel que soit le libellé) */
    @media(min-width:768px){
      #ak-bottom-nav{ justify-content:center; gap:6px; padding:15px 8px 10px; }
      /* padding symétrique : réserve la place du jeton « Organiser » des DEUX côtés */
      #ak-bottom-nav.has-organize{ padding-left:130px; padding-right:130px; }
      #ak-bottom-nav .akbn-item{ flex:0 1 122px; padding:5px 8px; gap:4px; }
      #ak-bottom-nav .akbn-lb{ font-size:10.5px; max-width:none; overflow:visible; }
    }
    @media(min-width:768px) and (max-width:1023px){
      #ak-bottom-nav{ gap:2px; }
      #ak-bottom-nav.has-organize{ padding-left:112px; padding-right:112px; }
      #ak-bottom-nav .akbn-item{ flex-basis:104px; padding:5px 4px; }
      #ak-bottom-nav .akbn-lb{ letter-spacing:.1em; }
    }
    /* mobile : 7 onglets, chacun ≥ 44 px de large ; libellés resserrés */
    @media(max-width:767px){
      #ak-bottom-nav{ padding-left:2px; padding-right:2px; }
      #ak-bottom-nav .akbn-lb{ font-size:7.5px; letter-spacing:.02em; overflow:visible; }
      #ak-bottom-nav .akbn-item.active .akbn-lb{ letter-spacing:.03em; }
      #ak-bottom-nav .akbn-mes{ display:none; }   /* « Ouvrages » seul sur mobile : le libellé complet ne tient pas */
      #ak-bottom-nav .akbn-item::before{ width:70%; }
    }
    /* #ak-bottom-nav est un enfant flex de #akashaApp (pas position:fixed) : .panels-wrap
       se resserre seule, plus besoin du gros padding-bas hérité des anciens FAB. */
    @media(max-width:767px){ .panels-wrap{ padding-bottom:14px !important; } }
    /* Le lecteur audio (position:fixed;bottom:0) doit passer AU-DESSUS de la barre
       d'onglets, pas la recouvrir. */
    #musicPlayerBar{ bottom:calc(58px + env(safe-area-inset-bottom,0px)) !important; }
    #toastContainer{ bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important; }
    /* La barre du bas gagne ~16px de marge basse en desktop (voir #ak-bottom-nav,
       @media min-width:768px) : le lecteur audio et les toasts doivent monter
       d'autant pour continuer à passer AU-DESSUS d'elle sans la recouvrir. Placé
       APRÈS les règles de base ci-dessus pour gagner la cascade (même sélecteur,
       même !important → l'ordre de déclaration tranche). */
    @media(min-width:768px){
      #musicPlayerBar{ bottom:calc(96px + env(safe-area-inset-bottom,0px)) !important; }
      #toastContainer{ bottom:calc(110px + env(safe-area-inset-bottom,0px)) !important; }
    }

    /* ── Modale « carte de connexion » Mon Compte (remplace le déroulant
       #accountMenuDropdown, ancré sous un bouton) : carte centrée + fond assombri. ── */
    #accountMenuBackdrop{
      display:none; position:fixed; inset:0; z-index:9599;
      background:rgba(4,2,16,.72); backdrop-filter:blur(6px);
    }
    #accountMenuBackdrop.open{ display:block; }
    #accountMenuDropdown{
      position:fixed !important; z-index:9600;
      top:50% !important; left:50% !important; right:auto !important;
      transform:translate(-50%,-50%) scale(.96);
      /* la page a un zoom:1.15 sur <html> — on garde une largeur prudente pour ne pas déborder */
      width:min(300px,calc(100vw - 56px)); max-height:86vh; overflow-y:auto;
      opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
      border-radius:16px !important;
      background:linear-gradient(180deg,#161238,#0d0a24) !important;
      border:1px solid var(--gold-dim) !important;
      box-shadow:0 24px 70px #000000cc, 0 0 40px #c9a84c1f !important;
    }
    #accountMenuDropdown.open{ opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
    #accountMenuDropdown::before{
      content:"\2726  Mon Compte"; display:block; text-align:center;
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:3px; text-transform:uppercase;
      color:var(--gold2); padding:14px 16px 10px;
    }
    /* Safe-area iPhone sur tout ce qui est collé en bas */
    @supports (padding: max(0px)) {
      #sub-fab, #polaristar-home-btn { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
      #musicPlayerBar { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
      #toastContainer { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
    }
    /* overflow-x:auto ajouté (2026-08-24, débordement signalé par le user) : sur une
       fenêtre desktop trop étroite pour tous les items (Codex/Boutiques/Web3/
       Communauté/Quêtes/Succès/Lives + liens outils + user), .topbar-nav défilait
       silencieusement hors du viewport car .topbar a overflow:hidden — les derniers
       items (ex. le menu Polaristar) étaient coupés plutôt que scrollables. Le
       burger mobile (@media max-width:680px) reste inchangé pour les petits écrans. */
    .topbar-nav { display: flex; gap: 2px; margin-left: 16px; flex-shrink: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    .topbar-nav::-webkit-scrollbar { height: 4px; }
    .topbar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    /* On desktop this wrapper is invisible for layout purposes (display:contents), so
       .topbar-nav/.topbar-toollinks/.topbar-user behave exactly as if they were direct
       .topbar children, unchanged from before. On mobile it becomes the actual burger
       dropdown panel (see the @media block) - same DOM, no duplicated buttons/links. */
    .topbar-menu-panel { display: contents; }
    .topbar-burger {
      display: none; align-items: center; justify-content: center;
      width: 36px; height: 36px; margin-left: 8px; flex-shrink: 0;
      background: transparent; border: 1px solid var(--border); border-radius: 8px;
      color: var(--gold2); font-size: 19px; line-height: 1; cursor: pointer;
    }
    .topbar-burger:hover { border-color: var(--gold-dim); background: #0e0b2888; }
    /* Liens vers les autres outils Polaristar (CONSTELLA → SAPIENTIA) — TOUJOURS repliés
       dans un menu déroulant « ✦ Outils » (#topbarToolsBtn), desktop comme mobile
       (demande user 2026-09-01). Le panneau #topbarToolLinks est sorti de .topbar
       (overflow:hidden) et positionné en JS sous le bouton, comme #accountMenuDropdown. */
    .topbar-tools-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 5px;
      order: 3; margin-left: auto; flex-shrink: 0;
      height: 32px; padding: 0 13px;
      background: transparent; border: 1px solid var(--border); border-radius: 16px;
      color: var(--gold2); font-family: "Cinzel", serif; font-size: 10px; letter-spacing: 1.5px;
      text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: all .2s;
    }
    .topbar-tools-btn:hover { border-color: var(--gold-dim); background: #0e0b2888; }
    .topbar-user { order: 4; }
    .topbar-toollinks {
      display: none; position: fixed; z-index: 9600;
      flex-direction: column; gap: 4px; min-width: 190px; padding: 10px;
      border: 1px solid var(--border); border-radius: 12px;
      background: #0a0720f5; box-shadow: 0 14px 40px #000000aa;
    }
    .topbar-toollinks.open { display: flex; }
    .topbar-tools-label {
      display: block; font-family: "Cinzel", serif; font-size: 8px; letter-spacing: 3px;
      text-transform: uppercase; color: var(--text3); text-align: center; margin-bottom: 2px;
    }
    .topbar-toollinks > a {
      text-align: center; font-size: 11px !important; padding: 10px 12px !important;
      min-height: 40px; display: flex; align-items: center; justify-content: center;
    }
    .topbar-toollinks { min-width: 0 !important; padding: 13px !important; }
    .nav-btn {
      padding: 7px 12px; border-radius: 20px; cursor: pointer; font-family: "Cinzel", serif;
      font-size: 10px; letter-spacing: 1.5px; color: var(--text3); background: transparent;
      border: 1px solid transparent; transition: all .25s; white-space: nowrap; text-transform: uppercase;
    }
    .nav-btn:hover { color: var(--gold2); border-color: var(--border); background: #0e0b2888; }
    .nav-btn.active { color: var(--gold); background: #13103a; border-color: var(--border); box-shadow: 0 0 14px #6040a033; text-shadow: 0 0 8px var(--gold-dim); }
    .nav-btn.admin-btn { color: var(--violet3); }
    .topbar-user { display: flex; align-items: center; gap: 8px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--border); flex-shrink: 0; }
    .user-email { font-size: 11px; color: var(--text2); font-style: italic; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
    .logout-btn {
      padding: 7px 14px; border-radius: 16px; border: 1px solid var(--border);
      background: transparent; color: var(--text3); font-size: 11px; cursor: pointer;
      font-family: "Cinzel", serif; letter-spacing: 1px; transition: all .2s;
      white-space: nowrap; flex-shrink: 0;
    }
    .logout-btn:hover { color: var(--red); border-color: var(--red); }

    /* ── PANELS ── */
    .panels-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 1; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    .panel { display: none; padding: 36px 36px 80px; max-width: 1240px; margin: 0 auto; }
    .panel.active { display: block; }
    .subpanel { display: none; }
    .subpanel.active { display: block; }
    .subtab-bar, .mus-tab-bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
    .subtab-btn, .mus-tab-btn {
      padding: 8px 22px; border-radius: 20px; cursor: pointer; font-family: "Cinzel", serif;
      font-size: 10px; letter-spacing: 2px; color: var(--text3);
      background: rgba(14,11,40,.62); border: 1px solid var(--border); text-transform: uppercase;
      transition: color .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease, transform .28s ease;
    }
    .subtab-btn:hover, .mus-tab-btn:hover {
      color: var(--ak-champagne); border-color: rgba(196,159,72,.5);
      background: rgba(24,18,58,.72); transform: translateY(-1px);
      box-shadow: 0 0 12px rgba(196,159,72,.18);
    }
    .subtab-btn.active, .mus-tab-btn.active { color: var(--gold2); border-color: var(--gold-dim); box-shadow: 0 0 16px rgba(211,174,87,.28); }
    /* « Suggérer une idée » : bouton d'action (pas un onglet) — plus chaud, plus lumineux et écarté des onglets */
    .subtab-bar .subtab-btn.subtab-suggest {
      position: relative; margin-left: 30px; color: var(--gold3, #f0d78a); font-weight: 600;
      background: linear-gradient(135deg, rgba(211,174,87,.30), rgba(160,112,40,.16));
      border: 1px solid rgba(240,215,138,.75);
      box-shadow: 0 0 20px rgba(211,174,87,.38), inset 0 1px 0 rgba(255,255,255,.18);
    }
    .subtab-bar .subtab-btn.subtab-suggest::before {
      content: ''; position: absolute; left: -19px; top: 16%; bottom: 16%; width: 1px;
      background: linear-gradient(180deg, transparent, rgba(211,174,87,.65), transparent);
    }
    .subtab-bar .subtab-btn.subtab-suggest:hover {
      color: #fff2c4; border-color: #f0d78a; box-shadow: 0 0 30px rgba(211,174,87,.6), inset 0 1px 0 rgba(255,255,255,.28);
      background: linear-gradient(135deg, rgba(211,174,87,.42), rgba(160,112,40,.24));
    }
    @media (max-width: 760px) {
      .subtab-bar .subtab-btn.subtab-suggest { margin-left: 0; margin-top: 8px; }
      .subtab-bar .subtab-btn.subtab-suggest::before { display: none; }
    }
    .mus-inner-panel { display: none; }
    .mus-inner-panel.active { display: block; }

    /* ── ACCUEIL AKASHA — hall d'entrée neutre (aucun onglet sélectionné) ── */
    #panelHome { max-width: 900px; padding-top: clamp(28px, 8vh, 92px); text-align: center; }
    .ak-home-inner {
      position: relative; display: flex; flex-direction: column; align-items: center;
      padding: 20px 8px 12px;
    }
    .ak-home-halo {
      position: absolute; top: 42%; left: 50%; width: min(78vw, 460px); aspect-ratio: 1 / 1;
      transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
      background: radial-gradient(circle, #e8c97a1f 0%, #7a45c014 38%, transparent 70%);
      filter: blur(4px);
      animation: akHomeHaloPulse 9s ease-in-out infinite;
    }
    @keyframes akHomeHaloPulse { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
    .ak-home-ring {
      position: absolute; top: 42%; left: 50%; width: min(86vw, 560px); height: min(86vw, 560px);
      transform: translate(-50%, -50%); pointer-events: none; z-index: 0; opacity: .34;
      animation: akHomeRingSpin 300s linear infinite;
    }
    @keyframes akHomeRingSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
    .ak-home-wordmark {
      position: relative; z-index: 1;
      font-family: "Cinzel Decorative", "Cinzel", serif; font-weight: 700;
      font-size: clamp(46px, 10vw, 104px); letter-spacing: .12em; line-height: 1; padding-left: .12em;
      background: linear-gradient(135deg, #9a6a1c 0%, #e8c97a 36%, #faf1c8 52%, #e8c97a 66%, #8a5c16 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      filter: drop-shadow(0 0 26px #e8c97a44) drop-shadow(0 0 60px #c9a84c26);
    }
    .ak-home-subtitle {
      position: relative; z-index: 1; margin-top: 18px;
      font-family: "Cinzel", "Cinzel Decorative", serif;
      font-size: clamp(11px, 2.2vw, 15px); letter-spacing: .4em; padding-left: .4em;
      text-transform: uppercase; color: #dcccab; text-shadow: 0 0 22px rgba(160,110,220,.35);
    }
    .ak-home-slogan {
      position: relative; z-index: 1; margin-top: 22px; max-width: 34ch;
      font-family: "Cormorant Garamond", serif; font-style: italic;
      font-size: clamp(14px, 2.4vw, 19px); line-height: 1.7; color: #b3a5c6; text-wrap: balance;
    }
    .ak-home-sep { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 34px 0 8px; position: relative; z-index: 1; }
    .ak-home-sep .l { height: 1px; width: 70px; background: linear-gradient(90deg, transparent, var(--gold-dim)); }
    .ak-home-sep .l.r { background: linear-gradient(90deg, var(--gold-dim), transparent); }
    .ak-home-sep .g { color: var(--gold-dim); font-size: 13px; letter-spacing: 5px; }
    @media (max-width: 600px) {
      .ak-home-slogan { max-width: 26ch; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ak-home-halo, .ak-home-ring { animation: none; }
    }

    /* ═══ ACCUEIL — panneau « Lives en cours » (P1 dashboard, demande user 2026-09-06) ═══
       Panneau de verre holographique posé devant le décor de la bibliothèque —
       la toile de fond reste visible à travers (backdrop-filter). */
    .ak-home-lives {
      position: relative; z-index: 1; width: 100%; max-width: 760px;
      margin: 30px auto 4px; padding: 16px 16px 14px; text-align: left;
      border-radius: 16px;
      background: linear-gradient(160deg, rgba(20,14,50,.5), rgba(9,6,26,.62));
      border: 1px solid rgba(201,168,76,.24);
      box-shadow: 0 20px 60px -24px #000, inset 0 1px 0 rgba(201,168,76,.06), 0 0 40px rgba(120,80,200,.08);
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
      animation: akHomeFadeIn .5s ease both;
    }
    @keyframes akHomeFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    .ak-home-lives[hidden] { display: none; }
    .ahl-head {
      display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
      font-family: "Cinzel", serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
      color: #f2dca0; text-shadow: 0 0 12px rgba(232,201,122,.4);
    }
    .ahl-head .ahl-dot {
      width: 8px; height: 8px; border-radius: 50%; background: #e0355b; flex-shrink: 0;
      box-shadow: 0 0 10px #e0355b; animation: akLiveDot 1.4s ease-in-out infinite;
    }
    @keyframes akLiveDot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
    .ahl-head .ahl-count { margin-left: auto; color: #b79ae0; letter-spacing: 1.5px; }
    .ahl-track {
      display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -4px; padding: 2px 4px 6px;
    }
    .ahl-track::-webkit-scrollbar { display: none; }
    .ahl-card {
      flex: 0 0 auto; width: min(78vw, 300px); scroll-snap-align: start;
      display: flex; flex-direction: column; gap: 8px; padding: 13px 14px;
      border-radius: 12px; background: rgba(12,9,34,.55);
      border: 1px solid rgba(150,109,224,.28); transition: border-color .2s, box-shadow .2s, transform .2s;
    }
    .ahl-card:hover { border-color: rgba(232,201,122,.5); box-shadow: 0 0 20px rgba(150,109,224,.22); transform: translateY(-2px); }
    .ahl-card-top { display: flex; align-items: center; gap: 10px; }
    .ahl-av {
      width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: "Cinzel", serif; font-size: 15px; overflow: hidden;
    }
    .ahl-av img { width: 100%; height: 100%; object-fit: cover; }
    .ahl-who { min-width: 0; }
    .ahl-creator { font-family: "Cinzel", serif; font-size: 12px; color: #e9dcff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ahl-live-pill {
      display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
      font-family: "Cinzel", serif; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: #ff9db0;
    }
    .ahl-live-pill i { width: 5px; height: 5px; border-radius: 50%; background: #e0355b; box-shadow: 0 0 6px #e0355b; }
    .ahl-title {
      font-family: "Cormorant Garamond", serif; font-size: 15px; font-style: italic; color: var(--text2);
      line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .ahl-meta { font-size: 11px; color: #b79ae0; display: flex; align-items: center; gap: 6px; }
    .ahl-meta .ahl-vdot { color: #70c090; }
    .ahl-join {
      margin-top: 2px; width: 100%; padding: 9px 10px; border-radius: 9px; cursor: pointer;
      font-family: "Cinzel", serif; font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
      color: #0a0720; font-weight: 700; border: none;
      background: linear-gradient(135deg, #f0d878, #c9a84c);
      box-shadow: 0 0 16px rgba(232,201,122,.3); transition: box-shadow .2s, filter .2s;
    }
    .ahl-join:hover { box-shadow: 0 0 24px rgba(232,201,122,.55); filter: brightness(1.06); }
    .ahl-foot { margin-top: 12px; text-align: center; }
    .ahl-allbtn {
      font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
      padding: 8px 20px; border-radius: 20px; color: var(--gold2);
      background: rgba(201,168,76,.06); border: 1px solid var(--gold-dim); transition: all .2s;
    }
    .ahl-allbtn:hover { background: rgba(201,168,76,.15); box-shadow: 0 0 16px #c9a84c33; }
    /* État vide — discret, pas de grande zone morte */
    .ak-home-lives.is-empty { padding: 14px 16px; text-align: center; }
    .ak-home-lives.is-empty .ahl-track, .ak-home-lives.is-empty .ahl-count { display: none; }
    .ak-home-lives.is-empty .ahl-head { justify-content: center; margin-bottom: 10px; color: #9a8ab8; }
    .ak-home-lives.is-empty .ahl-head .ahl-dot { background: #6a5a90; box-shadow: none; animation: none; }
    .ahl-empty-msg { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 14px; color: #a090c0; margin-bottom: 10px; }
    /* Prochains lives programmés (affichés dans l'état vide — ak_live_schedule, public) */
    .ahl-up-list { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 460px; margin: 4px auto 12px; text-align: left; }
    .ahl-up-card {
      display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px;
      background: rgba(12,9,34,.55); border: 1px solid rgba(150,109,224,.24);
    }
    .ahl-up-date { flex-shrink: 0; width: 40px; text-align: center; }
    .ahl-up-day { display: block; font-family: "Cinzel", serif; font-size: 17px; color: var(--gold2); line-height: 1; }
    .ahl-up-mon { display: block; font-size: 8px; letter-spacing: 1.5px; color: var(--text3); margin-top: 3px; }
    .ahl-up-body { flex: 1; min-width: 0; }
    .ahl-up-title {
      font-family: "Cinzel", serif; font-size: 12.5px; color: #e9dcff; line-height: 1.3;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .ahl-up-meta { font-size: 11px; color: #b79ae0; font-style: italic; margin-top: 2px; }
    .ahl-up-remind {
      flex-shrink: 0; padding: 7px 11px; border-radius: 9px; cursor: pointer; white-space: nowrap;
      font-family: "Cinzel", serif; font-size: 8px; letter-spacing: .5px; text-transform: uppercase;
      color: var(--gold2); background: rgba(201,168,76,.08); border: 1px solid var(--gold-dim);
      transition: background .2s;
    }
    .ahl-up-remind:hover { background: rgba(201,168,76,.18); }
    .ahl-up-remind.is-done, .ahl-up-remind:disabled { color: #6bd18a; border-color: rgba(107,209,138,.4); background: rgba(107,209,138,.08); cursor: default; }
    @media (max-width: 600px) {
      .ak-home-lives { margin-top: 22px; padding: 14px 12px 12px; }
      .ahl-card { width: 84vw; }
    }

    /* ═══════════════════════════════════════════════════════════════════
       ACCUEIL — TABLEAU DE BORD MULTIMODAL (P2 : moteur split-view + modules)
       Piloté par window.akDash. Tout est scopé #panelHome.akd-mode / .akd-*.
       Le décor de la bibliothèque (fond de #akashaApp) + .ak-home-halo restent
       visibles derrière les slots (verre : backdrop-filter).
       ═══════════════════════════════════════════════════════════════════ */
    #panelHome.akd-mode {
      max-width: none; padding: 0; height: 100%; text-align: left;
    }
    #panelHome.akd-mode .ak-home-inner { padding: 0; height: 100%; align-items: stretch; }
    .akd-host {
      position: relative; height: 100%; display: flex; flex-direction: column;
      padding: 14px; gap: 12px; min-height: 0;
    }
    #panelHome.akd-mode .ak-home-halo { top: 44%; opacity: .5; }
    /* accueil vide hors édition : on n'affiche RIEN → le décor de la bibliothèque
       reste visible ; on organise via « ⚙ Organiser » de la barre du bas. */
    #panelHome.akd-empty:not(.akd-edit) .akd-host { display: none; }
    /* accueil vide EN édition : la grille est vide → on met en avant « ＋ Ajouter » */
    #panelHome.akd-edit .akd-grid.n0 {
      display: flex; align-items: center; justify-content: center;
      border: 1px dashed rgba(201,168,76,.28); border-radius: 16px;
      color: var(--text3); font-family: "Cormorant Garamond", serif; font-style: italic;
    }
    #panelHome.akd-edit .akd-grid.n0::before {
      content: "Ton accueil est vide — ajoute un premier module ↓";
    }

    .akd-grid {
      flex: 1; min-height: 0; display: grid; gap: 0;
      --akd-gap: 12px; --akd-c1: 50%; --akd-r1: 50%;
    }
    .akd-grid.n1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .akd-grid.n2 {
      grid-template-columns: var(--akd-c1) var(--akd-gap) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
    }
    .akd-grid.n3, .akd-grid.n4 {
      grid-template-columns: var(--akd-c1) var(--akd-gap) minmax(0, 1fr);
      grid-template-rows: var(--akd-r1) var(--akd-gap) minmax(0, 1fr);
    }
    @media (prefers-reduced-motion: no-preference) {
      .akd-grid { transition: grid-template-columns .12s ease, grid-template-rows .12s ease; }
      .akd-grid.akd-dragging { transition: none; }
    }

    .akd-slot {
      position: relative; display: flex; flex-direction: column;
      min-width: 0; min-height: 0; border-radius: 14px; overflow: hidden;
      background: linear-gradient(160deg, rgba(16,11,40,.93), rgba(7,5,20,.95));
      border: 1px solid rgba(201,168,76,.28);
      box-shadow: 0 18px 50px -22px #000, inset 0 1px 0 rgba(201,168,76,.07), 0 0 34px rgba(120,80,200,.07);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      animation: akHomeFadeIn .32s ease both;
    }
    .akd-slot.akd-full {
      position: absolute; inset: 6px; z-index: 45; border-color: rgba(201,168,76,.5);
      box-shadow: 0 30px 80px -20px #000, 0 0 50px rgba(120,80,200,.14);
    }
    /* pastille « ✕ Réduire » quand un module est agrandi (+ touche Échap) */
    .akd-full-close {
      position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
      z-index: 46; cursor: pointer; padding: 9px 20px; border-radius: 22px;
      font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
      color: var(--text2); background: rgba(10,8,26,.92); border: 1px solid rgba(201,168,76,.4);
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      box-shadow: 0 10px 30px rgba(0,0,0,.6); transition: color .15s, border-color .15s;
    }
    .akd-full-close:hover { color: var(--gold2); border-color: var(--gold2); }
    #panelHome.akd-edit .akd-full-close { bottom: 84px; }   /* au-dessus de la barre d'édition */
    .akd-slot-bar {
      flex-shrink: 0; display: flex; align-items: center; gap: 4px;
      padding: 6px 6px 6px 12px; border-bottom: 1px solid rgba(201,168,76,.14);
      background: rgba(8,6,22,.5);
    }
    .akd-slot-title {
      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-family: "Cinzel", serif; font-size: 8.5px; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--gold2);
    }
    .akd-slot-title .akd-ic { margin-right: 7px; opacity: .8; }
    .akd-slot-btn {
      width: 28px; height: 28px; flex-shrink: 0; border: none; background: none; cursor: pointer;
      color: var(--text3); font-size: 13px; line-height: 1; border-radius: 7px;
      display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s;
    }
    .akd-slot-btn:hover { color: var(--gold2); background: rgba(176,125,224,.14); }
    .akd-slot-body { flex: 1; min-height: 0; overflow: auto; padding: 12px; scrollbar-width: thin; }
    .akd-slot-body::-webkit-scrollbar { width: 6px; }
    .akd-slot-body::-webkit-scrollbar-thumb { background: rgba(140,90,220,.4); border-radius: 3px; }
    /* le module lives à l'intérieur d'un slot ne rejoue pas ses marges de widget autonome */
    .akd-slot-body .ak-home-lives {
      margin: 0; max-width: none; backdrop-filter: none; -webkit-backdrop-filter: none;
      background: none; border: none; box-shadow: none; padding: 0; animation: none;
    }
    /* le titre « LIVES EN COURS » est déjà dans la barre du slot → on masque le
       doublon interne, sauf en état vide (là il porte le message) */
    .akd-slot-body .ak-home-lives:not(.is-empty) .ahl-head { display: none; }
    .akd-slot-body .ak-home-lives.is-empty {
      height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .akd-slot-body .ahl-card { width: min(280px, 82%); }

    /* poignées de redimensionnement (occupent la piste --akd-gap de la grille) */
    .akd-handle {
      position: relative; z-index: 6; align-self: stretch; justify-self: stretch;
      display: flex; align-items: center; justify-content: center;
    }
    .akd-handle.col { cursor: col-resize; }
    .akd-handle.row { cursor: row-resize; }
    .akd-handle::after {
      content: ""; border-radius: 3px; background: rgba(201,168,76,.28); transition: background .15s;
    }
    .akd-handle.col::after { width: 4px; height: 46px; }
    .akd-handle.row::after { width: 46px; height: 4px; }
    .akd-handle:hover::after, .akd-handle.akd-grab::after { background: rgba(232,201,122,.7); }

    /* barre « ＋ Ajouter un module » */
    .akd-add {
      flex-shrink: 0; align-self: center; padding: 8px 22px; border-radius: 22px; cursor: pointer;
      font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--gold2); background: rgba(201,168,76,.06); border: 1px solid var(--gold-dim);
      transition: background .2s, box-shadow .2s;
    }
    .akd-add:hover { background: rgba(201,168,76,.15); box-shadow: 0 0 16px #c9a84c33; }
    .akd-grid.n4 ~ .akd-add { display: none; }

    /* sélecteur de module (＋ Ajouter · ⋯ Changer) */
    .akd-picker {
      position: fixed; z-index: 9300; min-width: 200px; max-width: min(280px, calc(100vw - 24px));
      max-height: 60vh; overflow-y: auto; padding: 6px;
      background: #0e0b24; border: 1px solid rgba(201,168,76,.32); border-radius: 12px;
      box-shadow: 0 20px 54px rgba(0,0,0,.7); display: none;
    }
    .akd-picker.open { display: block; }
    .akd-picker-h {
      font-family: "Cinzel", serif; font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--text3); padding: 8px 10px 6px;
    }
    .akd-picker-item {
      display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
      background: none; border: none; cursor: pointer; padding: 10px 10px; border-radius: 8px;
      color: var(--text2); font-family: "Cormorant Garamond", serif; font-size: 14px;
    }
    .akd-picker-item .akd-ic { font-size: 15px; width: 18px; text-align: center; }
    .akd-picker-item:hover:not(:disabled) { background: rgba(176,125,224,.14); color: var(--text); }
    .akd-picker-item:disabled { opacity: .4; cursor: default; }
    .akd-picker-item .akd-soon {
      margin-left: auto; font-family: "Cinzel", serif; font-size: 7px; letter-spacing: 1.5px;
      color: var(--gold-dim); text-transform: uppercase;
    }

    .akd-empty {
      height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 8px; text-align: center; color: var(--text3);
      font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 14px; padding: 20px;
    }

    /* module « notes » */
    .akd-notes {
      width: 100%; height: 100%; min-height: 120px; resize: none; border: none; outline: none;
      background: rgba(255,255,255,.03); border-radius: 10px; padding: 12px;
      color: var(--text); font-family: "Cormorant Garamond", serif; font-size: 15px; line-height: 1.6;
    }
    .akd-notes::placeholder { color: var(--text3); font-style: italic; }

    /* module « raccourci » */
    .akd-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .akd-shortcut {
      display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 8px;
      border-radius: 12px; cursor: pointer; border: 1px solid rgba(150,109,224,.28);
      background: rgba(12,9,34,.5); color: var(--text2);
      font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
      transition: border-color .2s, box-shadow .2s, transform .2s;
    }
    .akd-shortcut:hover { border-color: rgba(232,201,122,.5); box-shadow: 0 0 16px rgba(150,109,224,.2); transform: translateY(-2px); }
    .akd-shortcut .akd-sic { font-size: 22px; }

    /* ── Mode « Organiser mon espace » (P3) ──
       Consultation (défaut) : chrome minimal, aucune poignée.
       Édition : poignée de déplacement, ⋯/✕, poignées de resize, barre flottante. */
    .akd-slot-grip {
      flex-shrink: 0; width: 0; overflow: hidden; cursor: grab;
      color: var(--text3); font-size: 13px; line-height: 1; letter-spacing: -2px;
      transition: width .15s, margin .15s;
    }
    #panelHome.akd-edit .akd-slot-grip { width: 16px; margin-right: 2px; }
    #panelHome.akd-edit .akd-slot-grip:active { cursor: grabbing; }
    #panelHome.akd-edit .akd-slot-bar { cursor: grab; }

    #panelHome:not(.akd-edit) .akd-b-menu,
    #panelHome:not(.akd-edit) .akd-b-close { display: none; }
    #panelHome:not(.akd-edit) .akd-handle { display: none; }
    #panelHome:not(.akd-edit) #akDashAdd { display: none; }
    /* place pour la barre flottante d'édition (position:absolute, bas) */
    #panelHome.akd-edit .akd-host { padding-bottom: 66px; }

    #panelHome.akd-edit .akd-slot {
      border-color: rgba(201,168,76,.45);
      box-shadow: 0 0 0 1px rgba(201,168,76,.12), 0 18px 50px -22px #000;
    }
    .akd-slot.akd-dragging { opacity: .5; transform: scale(.985); }
    .akd-slot.akd-drop { outline: 2px dashed var(--gold2); outline-offset: -4px; }

    .akd-organize-btn[hidden], .akd-edit-bar[hidden] { display: none !important; }
    .akd-organize-btn {
      position: absolute; right: 14px; bottom: 14px; z-index: 20;
      padding: 9px 18px; border-radius: 22px; cursor: pointer;
      font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
      color: var(--gold2); background: rgba(10,8,26,.82); border: 1px solid var(--gold-dim);
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: background .2s, box-shadow .2s;
    }
    .akd-organize-btn:hover { background: rgba(201,168,76,.16); box-shadow: 0 0 18px #c9a84c33; }
    .akd-edit-bar {
      position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 21;
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      padding: 10px 12px; border-radius: 14px;
      background: linear-gradient(180deg, rgba(20,14,50,.94), rgba(9,6,26,.96));
      border: 1px solid rgba(201,168,76,.35); box-shadow: 0 -8px 34px rgba(0,0,0,.5);
    }
    .akd-edit-hint {
      flex: 1; min-width: 140px; font-family: "Cormorant Garamond", serif; font-style: italic;
      font-size: 12.5px; color: var(--text3);
    }
    .akd-edit-bar button {
      flex-shrink: 0; padding: 8px 16px; border-radius: 10px; cursor: pointer;
      font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
    }
    .akd-edit-reset { background: none; border: 1px solid var(--border2); color: var(--text3); }
    .akd-edit-reset:hover { color: #f0899a; border-color: rgba(224,96,112,.4); }
    .akd-edit-done {
      background: linear-gradient(135deg, #f0d878, #c9a84c); border: none; color: #0a0720; font-weight: 700;
    }
    .akd-edit-done:hover { box-shadow: 0 0 16px rgba(232,201,122,.5); }

    /* ── Préréglages de disposition (P4) — rangée de « sceaux » en tête de grille,
       visible seulement en mode édition. Applique un jeu de modules + un ratio. ── */
    .akd-preset-bar[hidden] { display: none !important; }
    .akd-preset-bar {
      flex-shrink: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      padding: 9px 12px; border-radius: 13px;
      background: linear-gradient(180deg, rgba(20,14,50,.7), rgba(9,6,26,.72));
      border: 1px solid rgba(201,168,76,.22);
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .akd-preset-lbl {
      font-family: "Cinzel", serif; font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--text3); margin-right: 2px; flex-shrink: 0;
    }
    .akd-preset {
      display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 20px;
      cursor: pointer; white-space: nowrap;
      font-family: "Cinzel", serif; font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--text2); background: rgba(10,8,26,.55); border: 1px solid rgba(201,168,76,.16);
      transition: color .2s, border-color .2s, box-shadow .2s, background .2s, transform .2s;
    }
    .akd-preset .akd-preset-ic { font-size: 12px; opacity: .85; }
    .akd-preset:hover {
      color: var(--gold2); border-color: rgba(214,182,92,.45);
      box-shadow: 0 0 14px rgba(185,146,59,.16); transform: translateY(-1px);
    }
    .akd-preset.is-active {
      color: var(--ak-ivory, #eae4d5); border-color: rgba(214,182,92,.6);
      background: linear-gradient(180deg, rgba(201,168,76,.16), rgba(33,18,70,.4));
      box-shadow: 0 0 16px rgba(185,146,59,.22);
    }
    .akd-preset-custom { border-style: dashed; }
    .akd-preset-del {
      margin-left: 3px; width: 14px; height: 14px; flex-shrink: 0; border: none; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: none; color: var(--text3); font-size: 11px; line-height: 1; cursor: pointer; border-radius: 50%;
    }
    .akd-preset-del:hover { color: #f0899a; background: rgba(224,96,112,.15); }
    .akd-preset-save {
      margin-left: auto; flex-shrink: 0; padding: 6px 13px; border-radius: 20px; cursor: pointer;
      font-family: "Cinzel", serif; font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--gold2); background: rgba(201,168,76,.06); border: 1px dashed var(--gold-dim);
      transition: background .2s, box-shadow .2s;
    }
    .akd-preset-save:hover { background: rgba(201,168,76,.15); box-shadow: 0 0 14px #c9a84c33; }
    .akd-preset-save:disabled { opacity: .4; cursor: default; box-shadow: none; background: rgba(201,168,76,.04); }

    /* ═══════════ RESPONSIVE — desktop 4 · tablette 2 · mobile 1 (P6) ═══════════
       L'outil « Organiser » (split-view libre + poignées + préréglages) reste
       réservé au navigateur web ≥ 820 px (décision user P3b — `_canOrganize()`).
       Sous 820 px l'accueil est en CONSULTATION : on re-coule la disposition
       construite sur desktop (jusqu'à 4 modules) dans une grille fluide.
       Le moteur pose des `grid-column/row` inline + `--akd-c1/-r1` pensés pour
       le gabarit 3 pistes desktop → on les neutralise ici en `!important`. */

    /* ── Tablette : 820 → 560 px = grille 2 colonnes ── */
    @media (max-width: 819px) {
      .akd-host { padding: 10px; }
      .akd-preset-bar { gap: 6px; padding: 8px 10px; }
      .akd-preset-lbl { width: 100%; margin-bottom: 2px; }
      .akd-preset-save { margin-left: 0; }

      .akd-grid,
      .akd-grid.n1, .akd-grid.n2, .akd-grid.n3, .akd-grid.n4 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: none !important;
        grid-auto-rows: minmax(300px, auto) !important;
        gap: 10px !important;
        overflow-y: auto; min-height: 0;
      }
      .akd-grid.n1 { grid-template-columns: 1fr !important; }
      .akd-grid .akd-slot { grid-column: auto !important; grid-row: auto !important; min-height: 300px; }
      /* 3 modules : le 1er prend la ligne entière, puis 2 en dessous */
      .akd-grid.n3 .akd-slot:first-child { grid-column: 1 / -1 !important; }
      .akd-grid .akd-handle { display: none !important; }
      .akd-slot.akd-full { position: fixed; inset: 8px; z-index: 9200; }

      /* mode édition (uniquement si une fenêtre desktop est rétrécie sous 820 —
         `_syncEditChrome` force la sortie, ceci n'est qu'un filet de sécurité) */
      #panelHome.akd-edit .akd-host { padding-bottom: 10px; }
      .akd-edit-bar {
        position: static; left: auto; right: auto; bottom: auto; margin-top: 10px;
        flex-direction: column; align-items: stretch;
      }
      .akd-edit-bar button { width: 100%; }
      #panelHome.akd-edit #akDashAdd { align-self: stretch; }
    }

    /* ── Mobile : < 560 px = pile 1 colonne (bottom-sheet pour le plein écran) ── */
    @media (max-width: 559px) {
      .akd-grid,
      .akd-grid.n1, .akd-grid.n2, .akd-grid.n3, .akd-grid.n4 {
        grid-template-columns: 1fr !important;
        grid-auto-rows: minmax(320px, auto) !important;
      }
      .akd-grid.n3 .akd-slot:first-child { grid-column: auto !important; }
      .akd-grid .akd-slot { min-height: 320px; }
      /* « Agrandir » sur mobile = grande feuille centrée (pas plein écran total).
         inset:auto EN PREMIER, sinon il réécrase les bottom/left/right qui suivent.
         Marges en % — la page a zoom:1.15 qui fausse les vh ET décale un
         position:fixed ancré en bas ; la marge basse de 13 % absorbe ce décalage. */
      .akd-slot.akd-full {
        inset: auto; position: fixed; left: 3%; right: 3%; top: 9%; bottom: 13%;
        width: auto; height: auto; z-index: 9200;
        border-radius: 16px;
        animation: akSheetUp .26s ease both;
      }
      /* la barre du slot agrandi porte déjà « ⛶ Réduire » (+ touche Échap) —
         la pastille flottante ferait doublon et heurterait le header sur mobile */
      #panelHome.akd-has-full .akd-full-close { display: none; }
      .akd-slot.akd-full .akd-b-full { color: var(--gold2); }
    }
    @keyframes akSheetUp { from { transform: translateY(28px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .akd-slot.akd-full { animation: none; } }

    /* ═══════════════════════════════════════════════════════════════════
       ACCUEIL — ✦ MODE LIVE SOCIAL (P5) : module `live-social` (vidéo 70 /
       chat du live 30) + mini-player vidéo flottant déplaçable + PiP natif.
       Garde LiveKit 1-room via usesLiveVideo. Scopé .akls- / #akLiveMini.
       ═══════════════════════════════════════════════════════════════════ */
    .akls { display: flex; height: 100%; min-height: 0; gap: 10px; }
    .akls-video-col { flex: 1 1 68%; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
    .akls-chat-col { flex: 0 0 30%; min-width: 190px; max-width: 340px; display: flex; min-height: 0; }
    .akls-video-col .lv-player-frame,
    .akls-stage {
      position: relative; flex: 1; min-height: 0; border-radius: 12px; overflow: hidden;
      background: #000; border: 1px solid rgba(201,168,76,.28);
    }
    .akls-stage > div[id^="liveVideo"] { position: absolute; inset: 0; }
    .akls-stage > div[id^="liveVideo"] video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
    .akls-toolbar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .akls-title {
      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold2);
    }
    .akls-btn {
      flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
      padding: 5px 11px; border-radius: 16px;
      font-family: "Cinzel", serif; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--text2); background: rgba(10,8,26,.6); border: 1px solid rgba(201,168,76,.24);
      transition: color .2s, border-color .2s, box-shadow .2s;
    }
    .akls-btn:hover { color: var(--gold2); border-color: rgba(214,182,92,.5); box-shadow: 0 0 12px rgba(185,146,59,.16); }
    .akls-chat-col .lv-chat-panel { width: 100%; display: flex; flex-direction: column; min-height: 0; }
    .akls-empty {
      margin: auto; text-align: center; max-width: 260px; color: var(--text3);
      font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 14px; line-height: 1.6;
    }
    @media (max-width: 820px) {
      .akls { flex-direction: column; }
      .akls-chat-col { flex: 1 1 auto; max-width: none; min-height: 220px; }
      .akls-video-col { flex: 0 0 auto; }
      .akls-stage { min-height: 190px; aspect-ratio: 16 / 9; flex: 0 0 auto; }
    }

    /* ── mini-player flottant ── */
    #akLiveMini {
      position: fixed; z-index: 9400; width: 300px; max-width: calc(100vw - 24px);
      background: linear-gradient(180deg, rgba(20,14,50,.97), rgba(7,5,20,.98));
      border: 1px solid rgba(201,168,76,.4); border-radius: 14px; overflow: hidden;
      box-shadow: 0 24px 70px rgba(0,0,0,.72), 0 0 40px rgba(120,80,200,.14);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      animation: akHomeFadeIn .28s ease both;
    }
    #akLiveMini[hidden] { display: none !important; }
    .aklm-head {
      display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 11px; cursor: grab;
      background: rgba(8,6,22,.6); border-bottom: 1px solid rgba(201,168,76,.16);
      -webkit-user-select: none; user-select: none;
    }
    .aklm-head:active { cursor: grabbing; }
    .aklm-dot { width: 7px; height: 7px; border-radius: 50%; background: #e0555f; box-shadow: 0 0 8px #e0555f; flex-shrink: 0; }
    .aklm-title {
      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-family: "Cinzel", serif; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold2);
    }
    .aklm-btn {
      width: 24px; height: 24px; flex-shrink: 0; border: none; background: none; cursor: pointer;
      color: var(--text3); font-size: 12px; line-height: 1; border-radius: 6px;
      display: inline-flex; align-items: center; justify-content: center; transition: color .15s, background .15s;
    }
    .aklm-btn:hover { color: var(--gold2); background: rgba(176,125,224,.16); }
    .aklm-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
    .aklm-stage > div { position: absolute; inset: 0; }
    .aklm-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
    @media (prefers-reduced-motion: reduce) { #akLiveMini { animation: none; } }
    /* mini-player plus compact sur petit écran (P6) */
    @media (max-width: 559px) { #akLiveMini { width: 232px; } }

    /* ── SECTION HEADER ── */
    .section-header { margin-bottom: 36px; text-align: center; position: relative; padding: 20px 0 0; }
    .section-eyebrow { font-family: "Cinzel", serif; font-size: 12px; font-weight: 600; letter-spacing: 7px; color: var(--violet3); text-transform: uppercase; margin-bottom: 12px; text-shadow: 0 0 14px var(--violet-glow); }
    .section-title {
      font-family: "Cinzel Decorative", "Cinzel", serif; font-size: 42px;
      background: linear-gradient(135deg, #b2892f, #edd48c, #faf3d2, #d3ae57);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      letter-spacing: 4px; margin-bottom: 14px;
      filter: drop-shadow(0 2px 18px rgba(211,174,87,.5)) drop-shadow(0 0 2px rgba(250,243,210,.4));
    }
    .section-desc { color: var(--text2); font-size: 19px; font-style: italic; letter-spacing: 1px; margin-bottom: 24px; }
    .section-sep { display: flex; align-items: center; gap: 16px; justify-content: center; margin: 18px 0 30px; }
    .sep-line { height: 1px; flex: 1; max-width: 140px; background: linear-gradient(90deg, transparent, rgba(139,92,199,.4), var(--gold-dim)); }
    .sep-line.rev { background: linear-gradient(90deg, var(--gold-dim), rgba(139,92,199,.4), transparent); }
    .sep-glyph { color: var(--gold); font-size: 16px; letter-spacing: 4px; text-shadow: 0 0 12px rgba(211,174,87,.6); }

    /* Aura colorée par section */
    #panelVideos   .section-header::before { content:""; position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:360px;height:220px;background:radial-gradient(ellipse,#5a2d9a2a 0%,transparent 70%);pointer-events:none; }
    #panelArticles .section-header::before { content:""; position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:360px;height:220px;background:radial-gradient(ellipse,#206a402a 0%,transparent 70%);pointer-events:none; }
    #panelLivres   .section-header::before { content:""; position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:360px;height:220px;background:radial-gradient(ellipse,#6a40202a 0%,transparent 70%);pointer-events:none; }
    #panelObjets   .section-header::before { content:""; position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:360px;height:220px;background:radial-gradient(ellipse,#6a208a2a 0%,transparent 70%);pointer-events:none; }
    #panelMusique  .section-header::before { content:""; position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:360px;height:220px;background:radial-gradient(ellipse,#3a1a6a2a 0%,transparent 70%);pointer-events:none; }

    /* ── CARDS ── */
    .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
    /* Mes Ouvrages : vignettes plus petites et plafonnées en hauteur (effet étagère de
       livres) — les couvertures portrait ne doivent pas dominer la carte ni repousser
       le bouton « Lire l'ouvrage » trop bas. */
    #myLibraryGrid.card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
    #myLibraryGrid .card-thumb { aspect-ratio: auto; height: 160px; }
    #tcgGrid.card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .ak-card {
      background: linear-gradient(160deg, #0e0b28 0%, #0a0820 100%);
      border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
      transition: all .3s; cursor: pointer;
      box-shadow: var(--shadow), inset 0 1px 0 #6040a018; position: relative;
    }
    .ak-card::before {
      content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none;
      background: linear-gradient(135deg, #6040a010 0%, transparent 50%, #c9a84c08 100%);
      opacity: 0; transition: opacity .3s;
    }
    .ak-card:hover { transform: translateY(-6px); border-color: #6040a066; box-shadow: 0 14px 55px #00000088, 0 0 30px #6040a033, 0 0 60px #c9a84c11; }
    .ak-card:hover::before { opacity: 1; }

    /* Carte article regroupé (recueil) : le livre n'est pas encadré, seul le bloc d'infos l'est */
    .ak-card.book-card { background:transparent; border:none; box-shadow:none; overflow:visible; }
    .ak-card.book-card::before { display:none; }
    .ak-card.book-card:hover { box-shadow:none; border-color:transparent; }
    .ak-card.book-card .card-body {
      background: linear-gradient(160deg, #0e0b28 0%, #0a0820 100%);
      border: 1px solid var(--border); border-radius: var(--radius);
      box-shadow: var(--shadow), inset 0 1px 0 #6040a018; margin-top:14px;
    }

    .card-thumb {
      width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--bg3);
      display: flex; align-items: center; justify-content: center; font-size: 44px; color: var(--text3);
      position: relative;
    }
    .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
    .ak-card:hover .card-thumb img { transform: scale(1.05); }
    .card-thumb.livre-thumb, .card-thumb.contain-thumb { background: var(--bg3); }
    .card-thumb.livre-thumb img, .card-thumb.contain-thumb img { object-fit: contain; }
    .card-thumb-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 50%, #0a082088 100%); }
    .tcg-card-thumb {
      width: 100%; aspect-ratio: 3/4; overflow: hidden; background: #000;
      display: flex; align-items: center; justify-content: center; font-size: 44px; color: var(--text3);
      position: relative;
    }
    .tcg-card-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
    .ak-card:hover .tcg-card-thumb img { transform: scale(1.03); }
    .tcg-toolbar { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
    .tcg-toolbar select {
      background: linear-gradient(160deg, #0c0a22 0%, #08061a 100%); border: 1px solid var(--border); border-radius: 10px;
      padding: 9px 16px; color: var(--text); font-family: "Cinzel", serif; font-size: 11px;
      letter-spacing: 1px; outline: none; cursor: pointer;
      box-shadow: inset 0 2px 8px #00000055, inset 0 1px 0 #6040a014;
    }
    /* Le popup natif du <select> ignore le background du select lui-même — sans ce
       rappel explicite sur <option>, il retombe sur un fond blanc du navigateur avec
       le texte clair hérité, donc quasi invisible (repéré sur le filtre de rareté NFT). */
    .tcg-toolbar select option {
      background: #14102c; color: var(--text);
    }
    .card-play-icon {
      position: absolute; width: 52px; height: 52px; border-radius: 50%;
      background: #c9a84c22; border: 1.5px solid var(--gold-dim);
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; color: var(--gold2); opacity: 0; transition: opacity .3s;
      backdrop-filter: blur(4px); padding-left: 3px;
    }
    .ak-card:hover .card-play-icon { opacity: 1; }
    .card-body { padding: 18px 18px 16px; }
    .card-tag {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 9px; letter-spacing: 3px; padding: 3px 10px; border-radius: 12px;
      margin-bottom: 10px; font-family: "Cinzel", serif; text-transform: uppercase;
    }
    .tag-video   { background: #1e0a4422; color: var(--violet3); border: 1px solid #5a2d9a44; }
    .tag-article { background: #0a2a1822; color: #70c090;        border: 1px solid #30605088; }
    .tag-livre   { background: #2a1a0a22; color: #c09050;        border: 1px solid #6a402088; }
    .tag-objet   { background: #1a0a2a22; color: #c070d0;        border: 1px solid #6a2a8a88; }
    .tag-dieu                  { background: #2a200822; color: var(--gold2); border: 1px solid var(--gold-dim); }
    .tag-demi_dieu             { background: #2a1a2222; color: #d0a0e0; border: 1px solid #7a4a9a88; }
    .tag-peuple                { background: #0a1e2a22; color: #70b0d0; border: 1px solid #305a7088; }
    .tag-creature_mythologique { background: #0a2a1222; color: #60c090; border: 1px solid #30604088; }
    .tag-sort                  { background: #1e0a4422; color: var(--violet3); border: 1px solid #5a2d9a44; }
    .tag-objet                 { background: #1a0a2a22; color: #c070d0; border: 1px solid #6a2a8a88; }
    .tag-sort_objet            { background: #2a0a2a22; color: #d070b0; border: 1px solid #8a2a7a88; }
    .tag-evenement             { background: #2a0a1822; color: #d07090; border: 1px solid #7a305088; }
    .tag-terrain               { background: #1a1a0a22; color: #b0a060; border: 1px solid #6a601a88; }
    .tag-musique          { background: #1a0a3a22; color: #a888e8; border: 1px solid #5a3a9a66; }
    /* Badge "livre numérique" — distingue visuellement un PDF téléchargeable d'un livre physique
       (même type='livre' en base, détecté automatiquement via digital_file_url rempli). */
    .pdf-badge {
      position: absolute; top: 8px; right: 8px; z-index: 2;
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 9px; letter-spacing: 1.5px; font-weight: 700; font-family: "Cinzel", serif;
      padding: 4px 9px; border-radius: 6px; text-transform: uppercase;
      background: linear-gradient(135deg,#3a1080,#6020a0); color: #ffe87a; box-shadow: 0 2px 8px rgba(0,0,0,.4);
    }
    .pdf-badge.inline {
      position: static; box-shadow: none; margin-left: 8px; vertical-align: middle;
    }

    /* Vignette étoile "quête disponible" sur les liens vers les autres outils Polaristar */
    .topbar-toollinks a:not(.qst-no-badge) { position:relative; }
    .topbar-toollinks a:not(.qst-no-badge)::after {
      content:'✦'; position:absolute; top:-2px; right:-2px; font-size:9px; color:#ffe87a;
      text-shadow:0 0 6px rgba(255,232,122,.9), 0 0 12px rgba(212,168,32,.7);
      animation: questBadgePulse 1.8s ease-in-out infinite;
    }
    @keyframes questBadgePulse { 0%,100%{opacity:.55;transform:scale(1);} 50%{opacity:1;transform:scale(1.25);} }
    .tag-rarity-commun     { background: #1a1a2222; color: #9098b0; border: 1px solid #4a5070aa; }
    .tag-rarity-rare       { background: #0a1a3222; color: #6ab0ff; border: 1px solid #2a6ac0aa; }
    .tag-rarity-superrare  { background: #0a2a1622; color: #4ae09a; border: 1px solid #2ac07aaa; box-shadow: 0 0 10px #3ddc8422; }
    .tag-rarity-mythique   { background: #2a0a0822; color: #ff6a3a; border: 1px solid #c0341aaa; box-shadow: 0 0 10px #ff5a1f33; }
    .tag-rarity-legendaire { background: #2a1a0022; color: #ffb84a; border: 1px solid #c07a1aaa; box-shadow: 0 0 10px #ffb84a22; }
    .tag-rarity-primordiale {
      background: #1a0a3222; color: #c8a0ff; border: 1px solid #8a4affaa; box-shadow: 0 0 12px #a878ff33;
    }
    .tag-rarity-polaristar {
      background: linear-gradient(115deg,#ff3b3b,#ff9d3b,#f3ff3b,#3bff57,#3bd4ff,#6a3bff,#ff3bd0,#ff3b3b);
      color: #0b0a10; font-weight: 700; text-shadow: 0 0 6px rgba(255,255,255,.6);
      border: 1px solid #ffffffaa; box-shadow: 0 0 16px #ffffff55; background-size: 400% 400%;
      animation: rarityShift 4s linear infinite;
    }
    @keyframes rarityShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

    /* ── Aperçu de brillance (admin, formulaire carte TCG) ── */
    .rprev-wrap {
      --pr1: #f4f4f4; --pr2: #8a8a8a; --pr3: #f4f4f4;
      --psweep: rgba(255,255,255,0.55); --pedge: rgba(220,220,220,0.6);
      --pglow: 0.3; --psweepop: 0.36; --psparkle: 0;
      position: relative; display: flex; justify-content: center;
      padding: 18px 0 22px; margin-bottom: 4px;
    }
    .rprev-glow {
      position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
      width: 128px; height: 128px; border-radius: 50%;
      background: conic-gradient(from 0deg, var(--pr1), var(--pr2), var(--pr3), var(--pr2), var(--pr1));
      filter: blur(26px); opacity: var(--pglow); animation: rprevSpin 9s linear infinite;
      transition: opacity .4s ease;
    }
    .rprev-wrap[data-rarity="polaristar"] .rprev-glow { background: var(--rprev-rainbow); filter: blur(30px); animation: rprevSpin 5s linear infinite; }
    .rprev-card {
      position: relative; width: 120px; aspect-ratio: 1054/1492; border-radius: 10px;
      overflow: hidden; background: #14102c; border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 14px 30px -12px rgba(0,0,0,0.7);
    }
    .rprev-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .rprev-empty {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      color: var(--text3); font-size: 10px; text-align: center; padding: 10px;
      font-family: "Cinzel", serif; letter-spacing: 1px; text-transform: uppercase;
    }
    .rprev-sweep {
      position: absolute; inset: -60%;
      background: conic-gradient(from 0deg, transparent 0deg, var(--psweep) 8deg, transparent 22deg,
        transparent 170deg, var(--psweep) 182deg, transparent 198deg, transparent 360deg);
      mix-blend-mode: color-dodge; opacity: var(--psweepop); animation: rprevSpin 6.5s linear infinite;
      transition: opacity .4s ease; pointer-events: none;
    }
    .rprev-wrap[data-rarity="polaristar"] .rprev-sweep { background: var(--rprev-rainbow); opacity: .55; animation: rprevSpin 3.2s linear infinite; }
    .rprev-stripes {
      position: absolute; inset: 0;
      background: repeating-linear-gradient(115deg, rgba(255,60,140,.14) 0%, rgba(255,205,60,.14) 8%,
        rgba(90,255,205,.14) 16%, rgba(150,90,255,.14) 24%, rgba(255,60,140,.14) 32%);
      mix-blend-mode: color-dodge; opacity: .3; pointer-events: none;
    }
    .rprev-sparkles {
      position: absolute; inset: 0;
      background-image:
        radial-gradient(1.2px 1.2px at 18% 22%, #fff 60%, transparent 61%),
        radial-gradient(1px 1px at 68% 14%, #fff 60%, transparent 61%),
        radial-gradient(1.3px 1.3px at 42% 58%, #fff 60%, transparent 61%),
        radial-gradient(1px 1px at 82% 68%, #fff 60%, transparent 61%),
        radial-gradient(1.1px 1.1px at 28% 82%, #fff 60%, transparent 61%);
      opacity: var(--psparkle); animation: rprevTwinkle 2.4s ease-in-out infinite;
      mix-blend-mode: screen; pointer-events: none; transition: opacity .4s ease;
    }
    .rprev-edge {
      position: absolute; inset: 0; border-radius: 10px; border: 1px solid var(--pedge);
      box-shadow: inset 0 0 14px rgba(0,0,0,.4); pointer-events: none; transition: border-color .4s ease;
    }
    .rprev-wrap[data-rarity="polaristar"] .rprev-edge { border-color: rgba(255,255,255,.75); }
    @keyframes rprevSpin { to { transform: rotate(360deg); } }
    @keyframes rprevTwinkle { 0%,100% { opacity: var(--psparkle); } 50% { opacity: calc(var(--psparkle) * .35); } }

    /* ── Certificat / vérification NFT (vue joueur, "Ma Collection NFT") ── */
    .nftcert-seal-wrap { text-align: center; padding: 6px 0 22px; }
    .nftcert-seal { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .nftcert-seal::before {
      content: ""; position: absolute; inset: 0; border-radius: 50%;
      background: conic-gradient(from 0deg, var(--gold2), var(--violet3), var(--gold3), var(--violet3), var(--gold2));
      filter: blur(16px); opacity: .55; animation: nftcertSpin 10s linear infinite;
    }
    .nftcert-seal svg { position: relative; width: 74px; height: 74px; }
    @keyframes nftcertSpin { to { transform: rotate(360deg); } }
    .nftcert-status { font-family: "Cinzel", serif; font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold2); margin: 0 0 4px; }
    .nftcert-sub { font-size: 12.5px; color: var(--text3); margin: 0; }
    .nftcert-panel { background: var(--card2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 14px; }
    .nftcert-panel-title { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); margin: 0 0 14px; }
    .nftcert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 14px 18px; }
    .nftcert-grid dt { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text3); margin: 0 0 3px; }
    .nftcert-grid dd { font-family: "JetBrains Mono", monospace; font-size: 13.5px; color: var(--text); margin: 0; }
    .nftcert-grid dd.gold { color: var(--gold2); }
    .nftcert-grid dd.soon { color: var(--text3); font-style: italic; font-family: inherit; font-size: 12.5px; }
    .nftcert-timeline { list-style: none; margin: 0; padding: 0; }
    .nftcert-timeline li { position: relative; padding: 0 0 14px 22px; border-left: 1px solid var(--border); margin-left: 4px; }
    .nftcert-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
    .nftcert-timeline li::before { content: ""; position: absolute; left: -5px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold2); box-shadow: 0 0 8px 1px var(--gold-dim); }
    .nftcert-tl-date { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--text3); margin: 0 0 2px; }
    .nftcert-tl-event { font-size: 13px; color: var(--text); margin: 0; }
    .nftcert-verify-id { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--gold2); word-break: break-all; background: #00000040; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
    .nftcert-cert { position: relative; padding: 26px 22px; background: linear-gradient(180deg, var(--violet-glow) 0%, transparent 40%), var(--card); border: 1px solid var(--gold-dim); border-radius: 4px; text-align: center; overflow: hidden; }
    .nftcert-cert::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--border); pointer-events: none; }
    .nftcert-cert-eyebrow { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text3); margin: 4px 0 8px; }
    .nftcert-cert-title { font-family: "Cinzel", serif; font-weight: 700; font-size: 17px; letter-spacing: .05em; color: var(--gold2); margin: 0 0 3px; }
    .nftcert-cert-sub { font-family: "Cinzel", serif; font-size: 11px; letter-spacing: .12em; color: var(--text3); text-transform: uppercase; margin: 0 0 18px; }
    .nftcert-seal-wax { width: 62px; height: 62px; margin: 4px auto 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8342a, #7a0f0a 70%); box-shadow: 0 6px 14px #00000080, inset 0 2px 4px #ffffff40, inset 0 -6px 10px #00000060; display: flex; align-items: center; justify-content: center; }
    .nftcert-seal-wax svg { width: 32px; height: 32px; opacity: .9; }
    .nftcert-cert-sig { font-family: "Cinzel", serif; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold2); margin: 0; }

    .card-title { font-family: "Cinzel", serif; font-size: 14px; color: var(--text); margin-bottom: 8px; line-height: 1.5; }
    .card-excerpt { font-size: 14px; color: var(--text2); line-height: 1.7; }
    .card-price { font-family: "Cinzel", serif; font-size: 17px; color: var(--gold2); margin-top: 12px; text-shadow: 0 0 10px var(--gold-dim); }
    .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border2); }
    .card-date { font-size: 11px; color: var(--text3); font-style: italic; }
    .card-plays { font-size: 11px; color: var(--text3); font-family: "Cinzel", serif; letter-spacing: 1px; }

    /* ── MUSIC PLAYER BAR (verre sombre, bordure violet→or, 78px) ── */
    #musicPlayerBar {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; min-height: 78px;
      display: none; align-items: center; gap: 15px; padding: 10px 20px;
      background: linear-gradient(180deg, #0a0824ee 0%, #05041ae8 100%);
      border-top: 1px solid transparent;
      border-image: linear-gradient(90deg, #7a45c000, #7a45c088 25%, #c9a84c88 75%, #c9a84c00) 1;
      box-shadow: 0 -14px 46px #000000bb, 0 -1px 0 #c9a84c1f;
      backdrop-filter: blur(14px);
    }
    #musicPlayerBar.open { display: flex; }
    body.mus-player-open .panel { padding-bottom: 124px; }
    .mpb-cover { width:52px; height:52px; border-radius:9px; overflow:hidden; flex-shrink:0; background:var(--bg3); display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:18px; box-shadow:0 4px 16px #00000088; }
    .mpb-cover img { width:100%; height:100%; object-fit:cover; transition:opacity .3s; }
    .mpb-info { min-width:120px; max-width:210px; overflow:hidden; flex-shrink:0; }
    .mpb-title { font-family:"Cinzel",serif; font-size:12px; color:var(--gold2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mpb-artist { font-size:12px; color:var(--text3); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mpb-transport { display:flex; align-items:center; gap:4px; flex-shrink:0; }
    .mpb-playbtn {
      width:40px; height:40px; border-radius:50%; flex-shrink:0; cursor:pointer;
      background: linear-gradient(135deg,#5a2d9a,#2d1f6a); border:1px solid #7a45c0; color:var(--gold2);
      font-size:13px; display:flex; align-items:center; justify-content:center; transition: all .2s;
    }
    .mpb-playbtn:hover { box-shadow: 0 0 16px #6040a088; }
    .mpb-progress { flex:1; display:flex; align-items:center; gap:10px; min-width:120px; position:relative; }
    .mpb-time { font-size:10px; color:var(--text3); font-family:"Cinzel",serif; white-space:nowrap; z-index:1; }
    .mpb-progress input[type=range] { flex:1; accent-color: var(--gold); cursor:pointer; z-index:1; background:transparent; }
    .mpb-plays { font-size:10px; color:var(--text3); letter-spacing:1px; white-space:nowrap; flex-shrink:0; font-family:"Cinzel",serif; }
    .mpb-extra { display:flex; align-items:center; gap:8px; flex-shrink:0; }
    .mpb-close { background:transparent; border:none; color:var(--text3); font-size:14px; cursor:pointer; flex-shrink:0; }
    .mpb-close:hover { color:var(--red); }
    @media (max-width: 860px) {
      #musicPlayerBar { flex-wrap:wrap; gap:9px; padding:8px 14px; }
      .mpb-progress { order:3; flex-basis:100%; }
      .mpb-plays, .mpb-extra .mpb-iconbtn.rep { display:none; }
    }
    @media (max-width: 767px) {
      #musicPlayerBar { min-height:60px; flex-wrap:nowrap; gap:12px; padding:8px 14px; }
      .mpb-progress, .mpb-transport .mpb-ctrl, .mpb-vol, .mpb-plays, .mpb-extra .mpb-iconbtn.rep { display:none; }
      .mpb-info { max-width:none; flex:1; min-width:0; }
      .mpb-playbtn { width:44px; height:44px; }
    }

    /* ── MUSIQUE : recherche, likes, commentaires, soutien ── */
    .musique-search-row { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
    .musique-search-row input {
      flex:1; width:100%; max-width:420px; background:linear-gradient(160deg, #0c0a22 0%, #08061a 100%); border:1px solid var(--border); border-radius:20px;
      padding:10px 18px; color:var(--text); font-family:"Cormorant Garamond",serif; font-size:15px; outline:none; transition:all .2s;
      box-shadow: inset 0 2px 8px #00000055, inset 0 1px 0 #6040a014;
    }
    .musique-search-row select {
      background:linear-gradient(160deg, #0c0a22 0%, #08061a 100%); border:1px solid var(--border); border-radius:20px;
      padding:10px 18px; color:var(--text); font-family:"Cinzel",serif; font-size:11px;
      letter-spacing:1px; outline:none; cursor:pointer;
      box-shadow: inset 0 2px 8px #00000055, inset 0 1px 0 #6040a014;
    }
    .musique-search-row input:focus { border-color:var(--violet2); box-shadow:0 0 0 3px #6040a022; }
    .mtrack-artist-link { cursor:pointer; transition:color .2s; border-bottom:1px dotted transparent; }
    .mtrack-artist-link:hover { color:var(--gold2); border-bottom-color:var(--gold-dim); }
    .mtrack-support-btn {
      margin-left:auto; padding:5px 12px; border-radius:14px; cursor:pointer;
      background: linear-gradient(135deg,#3a2000,#6a3800); border:1px solid rgba(201,168,76,.5);
      color:#e8c870; font-family:"Cinzel",serif; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; transition:all .2s;
    }
    .mtrack-support-btn:hover { box-shadow:0 0 14px #c9a84c33; }
    .mtrack-lyrics { white-space:pre-line; font-style:italic; color:var(--text2); line-height:1.8; margin-top:8px; font-size:15px; }
    .mtrack-comments { margin-top:24px; padding-top:20px; border-top:1px solid var(--border2); }
    .mtrack-comment { padding:12px 0; border-bottom:1px solid var(--border2); }
    .mtrack-comment-author { font-family:"Cinzel",serif; font-size:11px; color:var(--gold2); letter-spacing:1px; }
    .mtrack-comment-date { font-size:10px; color:var(--text3); font-style:italic; margin-left:8px; }
    .mtrack-comment-text { font-size:14px; color:var(--text2); margin-top:4px; line-height:1.6; }
    .mtrack-comment-del { float:right; background:none; border:none; color:var(--text3); cursor:pointer; font-size:11px; }
    .mtrack-comment-del:hover { color:var(--red); }
    .mtrack-comment-form { display:flex; gap:10px; margin-top:16px; }
    .mtrack-comment-form textarea {
      flex:1; min-height:44px; background:#08061aaa; border:1px solid var(--border); border-radius:10px;
      padding:10px 14px; color:var(--text); font-family:inherit; font-size:14px; resize:vertical; outline:none;
    }
    .mtrack-comment-form button {
      align-self:flex-end; padding:10px 18px; border-radius:10px; background:linear-gradient(135deg,#5a2d9a,#2d1f6a);
      border:1px solid #7a45c0; color:var(--gold2); font-family:"Cinzel",serif; font-size:11px; letter-spacing:1px; cursor:pointer;
    }
    .tag-album { background:#0a1e3a22; color:#78a0e0; border:1px solid #305a9a66; }

    /* ── ARTICLE SOUS FORME DE LIVRE 3D ANIMÉ (carte recueil) ── */
    .book-thumb {
      display:flex; align-items:center; justify-content:center;
      background:transparent; overflow:visible; aspect-ratio:3/2;
      perspective:1000px;
    }
    .book3d-halo {
      position:absolute; width:70%; height:70%; border-radius:50%;
      background:radial-gradient(circle,#c9a84c26 0%,#8a6a2a15 45%,transparent 72%);
      animation:book3dHalo 3.6s ease-in-out infinite; pointer-events:none;
    }
    @keyframes book3dHalo {
      0%,100% { opacity:.5; transform:scale(1); }
      50%     { opacity:.9; transform:scale(1.1); }
    }
    .book3d {
      position:relative; height:82%; aspect-ratio:1/1.618; transform-style:preserve-3d;
      transform:rotateX(8deg) rotateY(-20deg);
      transition:transform .5s cubic-bezier(.4,0,.2,1);
      animation:book3dSway 4.5s ease-in-out infinite;
      filter:drop-shadow(0 20px 26px #00000099);
      cursor:pointer;
    }
    .book3d:hover { transform:rotateX(6deg) rotateY(-14deg); }
    .book3d.open { animation:none; transform:rotateX(4deg) rotateY(-6deg); }
    @keyframes book3dSway {
      0%,100% { transform:rotateX(8deg) rotateY(-20deg); }
      50%     { transform:rotateX(8deg) rotateY(-10deg); }
    }
    .book3d-spine {
      position:absolute; left:-2%; top:1%; bottom:1%; width:9%;
      background:linear-gradient(180deg,#8a5a1c,#3a2408);
      border-radius:3px 0 0 3px; box-shadow:inset -3px 0 6px #00000066;
      transform:translateZ(-2px);
    }
    .book3d-pages {
      position:absolute; left:5%; right:0; top:2%; bottom:2%;
      background:repeating-linear-gradient(180deg,#f2e8ce 0px,#f2e8ce 2px,#ddceA0 2px,#ddceA0 3px);
      border-radius:0 4px 4px 0; box-shadow:3px 3px 10px #00000088;
    }
    .book3d-cover {
      position:absolute; inset:0; transform-style:preserve-3d;
      background:
        radial-gradient(ellipse at 30% 20%, #ffffff22 0%, transparent 55%),
        radial-gradient(ellipse at 75% 85%, #00000022 0%, transparent 60%),
        linear-gradient(150deg,#d9c48c 0%,#c3a86a 45%,#a88a4e 100%);
      border-radius:2px 6px 6px 2px; border:1px solid #6b4a22aa;
      transform-origin:left center; transform:rotateY(0deg);
      transition:transform .85s cubic-bezier(.4,0,.2,1);
      box-shadow:5px 6px 18px #00000099, inset 0 0 40px #00000030;
      backface-visibility:hidden; overflow:hidden;
    }
    .book3d-cover-sigil {
      position:absolute; top:10%; left:0; right:0; text-align:center;
      font-size:13px; color:#4a3318cc; text-shadow:0 1px 0 #ffe8b855; letter-spacing:6px;
    }
    .book3d-cover-title {
      position:absolute; inset:20% 10% 22%; display:flex; align-items:center; justify-content:center;
      text-align:center; font-family:"Cinzel",serif; font-size:9px; letter-spacing:1.2px;
      color:#3a2510; text-shadow:0 1px 0 #ffe8b855; line-height:1.55; text-transform:uppercase;
      overflow:hidden; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
    }
    .book3d-cover-corner {
      position:absolute; font-size:9px; color:#4a3318aa; text-shadow:0 1px 0 #ffe8b844;
    }
    .book3d-cover-corner.tl { top:6%; left:8%; }
    .book3d-cover-corner.tr { top:6%; right:8%; }
    .book3d-cover-corner.bl { bottom:6%; left:8%; }
    .book3d-cover-corner.br { bottom:6%; right:8%; }
    .book3d-cover-rings {
      position:absolute; bottom:5%; left:50%; transform:translateX(-50%);
      width:26%; aspect-ratio:1; border-radius:50%;
      border:1px solid #6b4a2255; box-shadow:0 0 0 4px #6b4a2222 inset;
    }
    .book3d-cover-rings::before {
      content:""; position:absolute; inset:18%; border-radius:50%; border:1px solid #6b4a2266;
    }
    .book3d-cover-seal {
      position:absolute; bottom:8%; left:50%; transform:translateX(-50%);
      width:15%; aspect-ratio:1; border-radius:50%;
      background:radial-gradient(circle at 35% 30%,#c8664a,#8a2a1a 55%,#4a1408);
      box-shadow:0 2px 6px #00000099, inset 0 0 4px #00000055;
      display:flex; align-items:center; justify-content:center;
      font-size:11px; color:#f0d8b8; text-shadow:0 1px 0 #00000055;
    }
    .book3d.open .book3d-cover { transform:rotateY(-155deg); }
    .book3d-cover-title, .book3d-cover-seal, .book3d-cover-rings,
    .book3d-cover-sigil, .book3d-cover-corner { transition:opacity .3s; }
    .book3d.open .book3d-cover-title, .book3d.open .book3d-cover-seal,
    .book3d.open .book3d-cover-sigil, .book3d.open .book3d-cover-corner, .book3d.open .book3d-cover-rings { opacity:0; }

    /* ═══════════════════════════════════════════════════════════════════
       PARCHEMIN AKASHIQUE — composant visuel des Codex → onglet Parchemins
       Remplace l'ancienne "couverture livre 3D" par un manuscrit ancien
       déroulé. Uniquement l'aspect : le clic déclenche openArticle() /
       openBookReader() comme avant. Portée : #panelArticles seulement.
       ═══════════════════════════════════════════════════════════════════ */

    /* La carte n'est plus un rectangle encadré : le parchemin respire dans
       les Archives, seul le cartouche d'infos est encadré. */
    #panelArticles .ak-card { background: transparent; border: none; box-shadow: none; overflow: visible; }
    #panelArticles .ak-card::before { display: none; }
    #panelArticles .ak-card:hover { transform: none; border-color: transparent; box-shadow: none; }

    #panelArticles #articlesGrid { position: relative; }
    #panelArticles #articlesGrid::before {   /* lumière ambiante violette du décor */
      content: ""; position: absolute; left: 50%; top: -10px; transform: translateX(-50%);
      width: min(90%, 900px); height: 260px; pointer-events: none; z-index: 0;
      background: radial-gradient(ellipse at 50% 0%, #5a2d9a1f 0%, transparent 70%);
    }

    #panelArticles .card-thumb {
      aspect-ratio: 1 / 1.04; background: transparent; overflow: visible;
      perspective: 1000px; display: flex; align-items: center; justify-content: center;
    }
    #panelArticles .card-thumb.book-thumb { aspect-ratio: 1 / 1.04; }

    .aparch {
      position: relative; width: 64%; max-width: 202px; height: 94%;
      transform-style: preserve-3d;
      transform: rotate(var(--pt, 0deg)) rotateX(var(--prx, 0deg)) rotateY(var(--pry, 0deg));
      transition: transform .55s cubic-bezier(.2,.75,.25,1);
      will-change: transform;
    }
    /* halo doré derrière le manuscrit */
    .aparch-glow {
      position: absolute; inset: -14% -18%; z-index: 0; pointer-events: none; opacity: .32;
      background: radial-gradient(ellipse 60% 58% at 50% 46%, #e8c97a2e 0%, #b98a3a1c 42%, transparent 72%);
      transition: opacity .45s ease; filter: blur(3px);
    }

    /* la feuille : dégradés ivoire→sable→or ancien, plus sombre vers les bords,
       lumière chaude interne. Bords organiques via filtre SVG (desktop). */
    .aparch-paper {
      position: absolute; inset: 0; z-index: 1; border-radius: 6px 10px 7px 9px;
      background:
        radial-gradient(ellipse 135% 92% at var(--plx, 42%) 8%, #fbf3df 0%, #f3e6c9 24%, #e6d4ac 54%, #d3bd8f 84%, #bfa576 100%),
        linear-gradient(180deg, transparent 48%, #3a2a1016 100%);
      box-shadow:
        inset 0 26px 46px -30px #fff2cfd8,
        inset 0 0 36px #9c7c4020,
        inset 0 -26px 44px -22px #45301472,
        inset 18px 0 32px -22px #45301466,
        inset -18px 0 32px -22px #45301466,
        0 22px 46px -14px #000000b8,
        0 7px 18px -6px #00000094;
      transition: box-shadow .45s ease;
    }
    @media (pointer: fine) {
      .aparch-paper { filter: url(#aparchWobble); }
    }
    .aparch[data-edge="1"] .aparch-paper { border-radius: 6px 10px 7px 9px; }
    .aparch[data-edge="2"] .aparch-paper { border-radius: 10px 6px 9px 7px; }
    .aparch[data-edge="3"] .aparch-paper { border-radius: 8px 11px 5px 9px; }
    .aparch[data-edge="4"] .aparch-paper { border-radius: 11px 7px 10px 6px; }

    /* grain de papyrus + très discrètes marques du temps */
    .aparch-paper::after {
      content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
      background-size: 150px 150px; mix-blend-mode: multiply; opacity: var(--pgrain, .07);
    }
    .aparch-fox {
      position: absolute; border-radius: 50%; pointer-events: none;
      background: radial-gradient(circle, #8a662e22 0%, #8a662e0f 45%, transparent 72%);
      mix-blend-mode: multiply;
    }
    .aparch-fox.a { width: 34%; height: 22%; top: var(--pfx, 18%); left: 6%; }
    .aparch-fox.b { width: 24%; height: 30%; bottom: 12%; right: 4%; opacity: .7; }

    /* filigrane de géométrie sacrée — intégré dans les fibres (multiply, très faible) */
    .aparch-fibers {
      position: absolute; top: 50%; left: 50%; width: 92%; height: 82%;
      transform: translate(-50%, -50%) rotate(var(--pfr, 0deg));
      color: #6b4a20; opacity: .05; mix-blend-mode: multiply; pointer-events: none;
    }

    /* extrémités enroulées (léger rouleau, pas une capsule) */
    .aparch-curl {
      position: absolute; left: -3%; right: -3%; height: 8%; z-index: 2; pointer-events: none;
      background: linear-gradient(180deg, #e4d1a8 0%, #f4e9ce 30%, #d7c096 66%, #a9884f 100%);
      box-shadow: inset 0 3px 4px #fff6dedd, inset 0 -6px 8px -3px #5a3f1c99;
      transition: height .4s ease, opacity .4s ease;
    }
    .aparch-curl::after {   /* ombre discrète du rouleau sur la feuille */
      content: ""; position: absolute; left: 8%; right: 8%; height: 6px; filter: blur(3px);
      background: #1a0f0466;
    }
    .aparch-curl.top {
      top: -2.5%; border-radius: 38% 42% 12% 12% / 66% 66% 20% 20%;
      transform: rotate(calc(var(--pt, 0deg) * -.5));
    }
    .aparch-curl.top::after { bottom: -3px; }
    .aparch-curl.bot {
      bottom: -2.5%; border-radius: 12% 12% 42% 38% / 20% 20% 66% 66%;
      background: linear-gradient(0deg, #e4d1a8 0%, #f4e9ce 30%, #d7c096 66%, #a9884f 100%);
      box-shadow: inset 0 -3px 4px #fff6de99, inset 0 6px 8px -3px #5a3f1c99;
      transform: rotate(calc(var(--pt, 0deg) * .5));
    }
    .aparch-curl.bot::after { top: -3px; }

    /* couche de contenu — nette (non filtrée) : titre gravé/calligraphié */
    .aparch-content {
      position: absolute; inset: 0; z-index: 3; padding: 16% 15% 30%;
      display: flex; flex-direction: column; align-items: center; text-align: center;
    }
    .aparch-glyphs {
      font-size: 12px; letter-spacing: .32em; color: #6a4a22; opacity: .82;
      text-shadow: 0 1px 0 #fff4dc; margin-bottom: 8%;
    }
    .aparch-title {
      font-family: "Cinzel Decorative", "Cinzel", serif; font-weight: 700;
      font-size: clamp(10px, 2.6vw, 12.5px); letter-spacing: 1.4px; line-height: 1.5;
      text-transform: uppercase; color: #3a2712;
      text-shadow: 0 1px 0 #fff3d0, 0 0 1px #fff3d0aa;
      display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
      transition: color .35s ease, text-shadow .35s ease;
    }
    /* sceau central — étoile POLARISTAR gravée dans le parchemin */
    .aparch-emblem {
      margin: auto 0; width: 37%; height: auto; flex-shrink: 0;
      color: #6a4a20; opacity: .46; mix-blend-mode: multiply;
      filter: drop-shadow(0 1px 0 #fff4dcb0);
      transition: opacity .35s ease;
    }
    #panelArticles .ak-card:hover .aparch-emblem { opacity: .62; }

    /* sceau de cire */
    .aparch-seal {
      position: absolute; bottom: 6%; left: 50%; z-index: 4;
      transform: translateX(calc(-50% + var(--psx, 0px))) rotate(calc(var(--pt, 0deg) * 2));
      width: 21%; aspect-ratio: 1 / 1;
      border-radius: 54% 46% 52% 48% / 47% 53% 46% 54%;
      background:
        radial-gradient(circle at 37% 30%, #942628 0%, #721820 36%, #4e111b 68%, #340c14 100%);
      box-shadow:
        0 4px 8px -2px #000000b0, 0 2px 3px #00000070,
        inset 0 3px 5px -1px #f0716044, inset 0 -8px 11px -3px #16040add,
        inset 2px 0 6px -3px #d4948820, inset -3px -2px 6px -3px #12030899;
      display: flex; align-items: center; justify-content: center;
      transition: box-shadow .35s ease, transform .35s ease;
    }
    .aparch-seal svg { width: 60%; height: 60%; fill: #380b0f; filter: drop-shadow(0 1px .5px #e88a7a4d) drop-shadow(0 -1px .5px #1c0407aa); }
    .aparch-seal-shine {
      position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      background: radial-gradient(circle at 34% 26%, #f0c2b355 0%, #f0c2b318 24%, transparent 46%);
    }

    /* particules Stardust (au survol seulement) */
    .aparch-spark {
      position: absolute; width: 3px; height: 3px; border-radius: 50%; z-index: 5;
      background: #f8e9b8; box-shadow: 0 0 6px 1px #e8c97aaa; opacity: 0; pointer-events: none;
    }
    .aparch-spark.s1 { top: 22%; left: 12%; }
    .aparch-spark.s2 { top: 54%; right: 9%; }
    .aparch-spark.s3 { bottom: 26%; left: 20%; }

    /* ── éveil au survol (amplitude minimale) ── */
    #panelArticles .ak-card:hover .aparch {
      transform: translateY(-5px) rotate(var(--pt, 0deg)) rotateX(var(--prx, 0deg)) rotateY(var(--pry, 0deg));
    }
    #panelArticles .ak-card:hover .aparch-glow { opacity: 1; }
    #panelArticles .ak-card:hover .aparch-paper {
      box-shadow:
        inset 0 26px 46px -30px #fff6dae0,
        inset 0 0 34px #a6875014,
        inset 0 -20px 42px -22px #4e35145e,
        inset 14px 0 30px -22px #4e351550,
        inset -14px 0 30px -22px #4e351550,
        0 30px 60px -14px #000000c4,
        0 10px 24px -6px #00000099;
    }
    #panelArticles .ak-card:hover .aparch-title { color: #291a0a; text-shadow: 0 1px 0 #fff6da, 0 0 2px #fff2cf; }
    #panelArticles .ak-card:hover .aparch-seal {
      box-shadow:
        0 3px 8px -1px #000000b0, 0 1px 0 #0000005c,
        inset 0 3px 5px -1px #ff6a5a66, inset 0 -6px 9px -2px #17040acc,
        0 0 10px 1px #d83c327a, 0 0 22px #e8c97a45;
    }
    #panelArticles .ak-card:hover .aparch-spark { animation: aparchSpark 1.5s ease-in-out infinite; }
    #panelArticles .ak-card:hover .aparch-spark.s2 { animation-delay: .4s; }
    #panelArticles .ak-card:hover .aparch-spark.s3 { animation-delay: .8s; }
    @keyframes aparchSpark {
      0%   { opacity: 0; transform: translateY(4px) scale(.6); }
      35%  { opacity: 1; transform: translateY(-3px) scale(1); }
      100% { opacity: 0; transform: translateY(-12px) scale(.5); }
    }

    /* ── déroulement au clic (300–600 ms) ── */
    .aparch.unrolling { animation: aparchUnroll 460ms cubic-bezier(.22,.8,.28,1); transform-origin: 50% 2%; }
    .aparch.unrolling .aparch-curl { height: 0; opacity: 0; }
    .aparch.unrolling .aparch-content { animation: aparchUnrollFade 460ms ease; }
    @keyframes aparchUnroll {
      0%   { transform: rotate(var(--pt,0deg)) scaleY(.88); filter: brightness(1.14); }
      55%  { transform: rotate(var(--pt,0deg)) scaleY(1.02); filter: brightness(1.05); }
      100% { transform: rotate(var(--pt,0deg)) scaleY(1); filter: brightness(1); }
    }
    @keyframes aparchUnrollFade {
      0% { opacity: .35; } 40% { opacity: .7; } 100% { opacity: 1; }
    }

    /* ── cartouche d'infos = plaque d'archive (le parchemin reste dominant) ── */
    #panelArticles .ak-card .card-body {
      margin-top: 15px; position: relative; padding: 14px 16px 13px;
      background: linear-gradient(160deg, rgba(13,11,32,.82) 0%, rgba(7,6,20,.84) 100%);
      border: 1px solid rgba(150,120,210,.22); border-radius: 12px;
      box-shadow: 0 12px 30px -14px #000000cc, inset 0 1px 0 rgba(201,168,76,.1);
      backdrop-filter: blur(5px);
      text-align: center;
    }
    #panelArticles .ak-card .card-body::before {
      content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(201,168,76,.5), transparent);
    }
    #panelArticles .ak-card .card-tag.tag-article {
      background: rgba(122,90,180,.12); color: #b598e4; border: 1px solid rgba(150,120,210,.32);
      letter-spacing: 3.5px;
    }
    #panelArticles .ak-card .card-title {
      font-family: "Cinzel", "Cinzel Decorative", serif; font-size: 14px; letter-spacing: .4px;
      color: #efe6d2; margin-bottom: 6px;
    }
    #panelArticles .ak-card .card-excerpt { color: var(--text3); font-size: 13px; line-height: 1.65; text-align: center; }
    #panelArticles .ak-card .card-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(150,120,210,.16); }
    #panelArticles .ak-card .card-date { color: #8a7fae; }
    #panelArticles .ak-card .card-plays { color: var(--gold2); font-weight: 600; }

    @media (max-width: 680px) {
      .aparch { width: 72%; max-width: 190px; }
      #panelArticles .card-thumb, #panelArticles .card-thumb.book-thumb { aspect-ratio: 1 / 1.12; }
    }

    @media (prefers-reduced-motion: reduce) {
      .aparch, #panelArticles .ak-card:hover .aparch { transition: none; transform: rotate(var(--pt,0deg)); }
      .aparch.unrolling { animation: none; }
      .aparch-glow { opacity: .4; transition: none; }
      #panelArticles .ak-card:hover .aparch-spark { animation: none; }
      .aparch-paper, .aparch-seal { transition: none; }
    }

    /* ═══ BIBLIOTHÈQUE DES 7 ÉTAGES (7 CHAKRAS) ═══
       Fond cosmique conservé ; la couleur du chakra n'apparaît QUE via
       --ch / --chg (halos, bordures, symboles, boutons, cristaux). Scopé #panelEtages. */
    #panelEtages .section-header::before {
      content:""; position:absolute; top:-20px; left:50%; transform:translateX(-50%);
      width:420px; height:240px; pointer-events:none;
      background:radial-gradient(ellipse, #6a409a2e 0%, transparent 70%);
    }
    #panelEtages .etages-layout { display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start; }

    /* Rail de progression verticale — Racine ↑ … ↑ Couronne (indicatif, non contraignant) */
    .chakra-rail { flex:0 0 auto; display:flex; flex-direction:column-reverse; gap:6px; padding-top:8px; position:sticky; top:8px; }
    .chakra-rail .rail-node {
      display:flex; align-items:center; gap:9px; cursor:pointer; background:none; border:none;
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
      color:var(--text3); padding:4px 6px; border-radius:8px; transition:all .2s; text-align:left; white-space:nowrap;
    }
    .chakra-rail .rail-node::before {
      content:""; width:9px; height:9px; border-radius:50%; flex:0 0 auto;
      background:var(--ch,#6a5a80); box-shadow:0 0 8px var(--chg,transparent); opacity:.6;
    }
    .chakra-rail .rail-node:hover { color:var(--text); background:#ffffff08; }
    .chakra-rail .rail-node.active { color:var(--text); }
    .chakra-rail .rail-node.active::before { opacity:1; transform:scale(1.35); }
    .chakra-rail .rail-arrow { text-align:center; color:var(--gold-dim); font-size:10px; line-height:.6; opacity:.5; }

    /* Hall — 7 piliers de bibliothèque */
    .chakra-hall { flex:1; display:grid; grid-template-columns:repeat(7, 1fr); gap:12px; }
    .chakra-col {
      --ch:#6a5a80; --chg:#6a5a8055;
      position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
      padding:22px 10px 18px; border-radius:16px;
      background:linear-gradient(180deg, #100c2ecc 0%, #0a0820ee 100%);
      border:1px solid var(--border); box-shadow:var(--shadow), inset 0 1px 0 #6040a018;
      transition:transform .3s, border-color .3s, box-shadow .3s;
    }
    .chakra-col::before {
      content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
      background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--ch) 22%, transparent) 0%, transparent 62%);
      opacity:.5; transition:opacity .3s;
    }
    .chakra-col:hover { transform:translateY(-6px); border-color:color-mix(in srgb, var(--ch) 55%, var(--border)); box-shadow:0 16px 55px #00000088, 0 0 34px var(--chg); }
    .chakra-col:hover::before { opacity:1; }
    .chakra-col > * { position:relative; z-index:1; }
    .chakra-col .col-etage { font-family:"Cinzel",serif; font-size:10px; letter-spacing:3px; color:var(--text3); text-transform:uppercase; margin-bottom:12px; }
    .chakra-col .col-symbol { width:64px; height:64px; color:var(--ch); filter:drop-shadow(0 0 12px var(--chg)); margin-bottom:12px; }
    .chakra-col .col-symbol svg { width:100%; height:100%; }
    .chakra-col .col-name { font-family:"Cinzel Decorative","Cinzel",serif; font-size:15.5px; letter-spacing:1.2px; color:var(--text); line-height:1.2; }
    .chakra-col .col-fr { font-family:"Cinzel",serif; font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ch); margin-top:4px; }
    .chakra-col .col-principle { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:15.5px; color:var(--text2); margin:10px 0 8px; }
    .chakra-col .col-themes { font-size:12.5px; line-height:1.6; color:var(--text3); min-height:70px; }
    .chakra-col .col-count { font-family:"Cinzel",serif; font-size:10.5px; letter-spacing:1px; color:var(--text3); margin:10px 0 12px; opacity:.85; }
    .chakra-col .col-cta {
      margin-top:auto; width:100%; padding:10px 8px; border-radius:10px; cursor:pointer;
      font-family:"Cinzel",serif; font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
      color:var(--text); background:color-mix(in srgb, var(--ch) 16%, #0a0820);
      border:1px solid color-mix(in srgb, var(--ch) 50%, var(--border)); transition:all .2s;
    }
    .chakra-col .col-cta:hover { background:color-mix(in srgb, var(--ch) 32%, #0a0820); box-shadow:0 0 16px var(--chg); }
    .chakra-col .col-crystal { position:absolute; left:50%; bottom:-9px; width:18px; height:18px; transform:translateX(-50%) rotate(45deg); background:linear-gradient(135deg, var(--ch), transparent); opacity:.5; border-radius:3px; filter:blur(.3px); }

    .chakra-hall-foot { flex-basis:100%; text-align:center; margin-top:26px; }
    .chakra-hall-foot .hall-allbtn {
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; cursor:pointer;
      padding:10px 26px; border-radius:22px; color:var(--gold2);
      background:rgba(201,168,76,.07); border:1px solid var(--gold-dim); transition:all .2s;
    }
    .chakra-hall-foot .hall-allbtn:hover { background:rgba(201,168,76,.16); box-shadow:0 0 18px #c9a84c33; }
    .chakra-hall-foot .hall-unclassified { display:block; margin-top:12px; font-size:11px; font-style:italic; color:var(--text3); }

    /* Vue intérieure d'un étage */
    #chakraFloor { --ch:#6a5a80; --chg:#6a5a8055; }
    #chakraFloor .chakra-rail {
      position:static; flex-direction:row; flex-wrap:wrap; justify-content:center;
      gap:4px 2px; margin:0 0 26px; padding:0;
    }
    #chakraFloor .chakra-rail .rail-arrow { transform:rotate(90deg); margin:0 2px; }
    .floor-back {
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:2px; text-transform:uppercase; cursor:pointer;
      background:none; border:none; color:var(--text3); padding:6px 0; margin-bottom:14px; transition:color .2s;
    }
    .floor-back:hover { color:var(--text); }
    .floor-hero { text-align:center; position:relative; padding:14px 0 22px; margin-bottom:8px; }
    .floor-hero::before {
      content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
      width:440px; height:220px; pointer-events:none;
      background:radial-gradient(ellipse, color-mix(in srgb, var(--ch) 26%, transparent) 0%, transparent 70%);
    }
    .floor-hero > * { position:relative; z-index:1; }
    .floor-hero .fh-symbol { width:88px; height:88px; margin:0 auto 12px; color:var(--ch); filter:drop-shadow(0 0 18px var(--chg)); }
    .floor-hero .fh-symbol svg { width:100%; height:100%; }
    .floor-hero .fh-etage { font-family:"Cinzel",serif; font-size:9px; letter-spacing:4px; text-transform:uppercase; color:var(--text3); }
    .floor-hero .fh-name { font-family:"Cinzel Decorative","Cinzel",serif; font-size:34px; letter-spacing:3px; color:var(--text); margin:8px 0 2px; }
    .floor-hero .fh-fr { font-family:"Cinzel",serif; font-size:11px; letter-spacing:5px; text-transform:uppercase; color:var(--ch); }
    .floor-hero .fh-principle { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:19px; color:var(--text2); margin-top:12px; letter-spacing:1px; }
    .floor-hero .fh-themes { max-width:640px; margin:14px auto 0; font-size:12px; line-height:1.8; color:var(--text3); }
    .floor-hero .fh-themes span { white-space:nowrap; }
    .floor-hero .fh-themes span::after { content:" · "; color:var(--gold-dim); }
    .floor-hero .fh-themes span:last-child::after { content:""; }

    .floor-filters { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:20px 0 26px; }
    .floor-filters input, .floor-filters select {
      background:#08061aaa; border:1px solid var(--border); border-radius:10px; padding:8px 12px;
      color:var(--text); font-family:inherit; font-size:12px; outline:none;
    }
    .floor-filters input { min-width:220px; }
    .floor-filters input:focus, .floor-filters select:focus { border-color:color-mix(in srgb, var(--ch) 55%, var(--border)); }

    .floor-group { margin-bottom:34px; }
    .floor-group > h3 {
      font-family:"Cinzel",serif; font-size:11px; letter-spacing:3px; text-transform:uppercase;
      color:var(--ch); margin:0 0 16px; padding-bottom:8px; display:flex; align-items:center; gap:12px;
    }
    .floor-group > h3::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, color-mix(in srgb, var(--ch) 45%, transparent), transparent); }
    .floor-group .group-count { font-size:9px; color:var(--text3); letter-spacing:1px; }

    #chakraFloor .ak-card { overflow:visible; }
    #chakraFloor .ak-card .bridge-ribbon {
      display:inline-block; margin-top:8px; font-family:"Cinzel",serif; font-size:8px; letter-spacing:1.5px;
      text-transform:uppercase; color:var(--text2); padding:3px 9px; border-radius:20px;
      background:color-mix(in srgb, var(--ch) 14%, #0a0820); border:1px solid color-mix(in srgb, var(--ch) 40%, var(--border));
    }

    /* Ruban chakra dans la modale d'un parchemin + pastille sur la carte */
    .article-chakra-ribbon { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 18px; }
    .article-chakra-ribbon .acr-pill {
      font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:1.5px; text-transform:uppercase;
      padding:4px 10px; border-radius:20px; color:var(--text); cursor:pointer;
      background:color-mix(in srgb, var(--acr, #6a5a80) 18%, #0a0820);
      border:1px solid color-mix(in srgb, var(--acr, #6a5a80) 50%, var(--border)); transition:all .2s;
    }
    .article-chakra-ribbon .acr-pill:hover { background:color-mix(in srgb, var(--acr, #6a5a80) 34%, #0a0820); }
    .article-chakra-ribbon .acr-pill.primary { cursor:default; }
    .card-chakra-dot {
      display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
      font-size:10px; line-height:1; color:#0a0820; font-weight:700; vertical-align:middle; margin-left:6px;
      background:var(--cdot, #6a5a80); box-shadow:0 0 8px color-mix(in srgb, var(--cdot, #6a5a80) 60%, transparent);
    }

    @media (max-width: 1100px) {
      #panelEtages .etages-layout { flex-direction:column; }
      .chakra-rail { flex-direction:row; overflow-x:auto; position:static; width:100%; padding-bottom:6px; }
      .chakra-rail .rail-arrow { display:none; }
      .chakra-hall { grid-template-columns:repeat(auto-fit, minmax(175px, 1fr)); }
    }
    @media (max-width: 620px) {
      .chakra-hall { grid-template-columns:1fr 1fr; }
      .floor-hero .fh-name { font-size:26px; }
    }
    /* Mobile serré (Codex > Les 7 Étages) : 1 seul étage par ligne, pleine largeur,
       typo/paddings resserrés — plus rien ne dépasse ni ne se coupe (demande user 2026-09-06). */
    @media (max-width: 520px) {
      #panelEtages .etages-layout { gap:14px; }
      .chakra-hall { grid-template-columns:1fr; gap:14px; }
      .chakra-col {
        flex-direction:row; flex-wrap:wrap; align-items:center; text-align:left;
        padding:16px 16px 16px; gap:4px 14px;
        overflow:hidden;  /* rogne le voile animé .col-elemFX qui débordait */
      }
      .chakra-col .col-etage { width:100%; margin-bottom:2px; font-size:9px; }
      .chakra-col .col-symbol { width:44px; height:44px; margin-bottom:0; flex-shrink:0; }
      .chakra-col .col-name { font-size:15px; letter-spacing:.6px; overflow-wrap:anywhere; hyphens:auto; }
      .chakra-col .col-fr { margin-top:2px; font-size:9.5px; letter-spacing:1.6px; }
      .chakra-col .col-principle { width:100%; margin:8px 0 4px; font-size:14px; }
      .chakra-col .col-themes { width:100%; min-height:0; font-size:12px; }
      .chakra-col .col-count { width:100%; margin:6px 0 10px; }
      .chakra-col .col-cta { width:100%; }
      .chakra-col .col-crystal { display:none; }
      /* le petit nom + le nom FR forment un bloc à côté du symbole */
      .chakra-col .col-name, .chakra-col .col-fr { flex:1 1 auto; min-width:0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .chakra-col, .chakra-col::before { transition:none; }
    }

    /* ═══ ÉTAGE — ESPACE D'ENSEIGNEMENT DU CHAKRA ═══
       Le bleu nuit / violet d'AKASHA reste dominant ; --ch ne sert que
       d'accent lumineux (bordures, halos, mantras, médaillons). */
    .floor-hero { overflow:hidden; }
    .floor-hero .fh-sanskrit { font-family:"Cormorant Garamond",serif; font-size:13px; letter-spacing:3px; text-transform:uppercase; color:var(--text3); }
    .floor-hero .fh-verb {
      display:inline-block; margin-top:14px; padding:5px 18px; border-radius:20px;
      font-family:"Cinzel",serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--text);
      background:color-mix(in srgb, var(--ch) 15%, #0a0820); border:1px solid color-mix(in srgb, var(--ch) 45%, var(--border));
    }
    .floor-hero .fh-meaning { max-width:600px; margin:14px auto 0; font-family:"Cormorant Garamond",serif; font-style:italic; font-size:17px; line-height:1.6; color:var(--text2); }

    /* Voile animé propre à l'élément — extrêmement subtil */
    .fh-elemFX { position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.6; mix-blend-mode:screen; }
    .fh-elemFX::before, .fh-elemFX::after { content:""; position:absolute; inset:-25%; }
    .floor-hero[data-el="terre"] .fh-elemFX::before {
      background-image:radial-gradient(circle, color-mix(in srgb, var(--ch) 70%, #fff) 0 1px, transparent 1.6px);
      background-size:46px 46px; opacity:.10; animation:fxTerre 26s linear infinite;
      -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%); mask-image:radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
    }
    @keyframes fxTerre { to { transform:translateY(-46px); } }
    .floor-hero[data-el="eau"] .fh-elemFX::before {
      background:repeating-linear-gradient(-42deg, transparent 0 15px, color-mix(in srgb, var(--ch) 40%, transparent) 15px 16px);
      opacity:.07; animation:fxEau 16s linear infinite;
    }
    @keyframes fxEau { to { transform:translate(-32px, -12px); } }
    .floor-hero[data-el="feu"] .fh-elemFX {
      background:radial-gradient(ellipse at 50% 62%, color-mix(in srgb, var(--ch) 28%, transparent) 0%, transparent 60%);
      animation:fxFeu 5s ease-in-out infinite;
    }
    @keyframes fxFeu { 0%,100% { opacity:.35; } 50% { opacity:.7; } }
    .floor-hero[data-el="air"] .fh-elemFX::before {
      background:radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--ch) 20%, transparent) 0%, transparent 45%);
      opacity:.5; animation:fxAir 20s ease-in-out infinite alternate;
    }
    @keyframes fxAir { from { transform:translateX(-6%); } to { transform:translateX(6%); } }
    .floor-hero[data-el="ether"] .fh-elemFX::before {
      inset:15%; border-radius:50%; border:1px solid color-mix(in srgb, var(--ch) 45%, transparent);
      opacity:.25; animation:fxEther 6s ease-out infinite;
    }
    @keyframes fxEther { 0% { transform:scale(.7); opacity:.35; } 100% { transform:scale(1.15); opacity:0; } }
    .floor-hero[data-el="lumiere"] .fh-elemFX::before {
      background:conic-gradient(from 0deg, transparent 0 12deg, color-mix(in srgb, var(--ch) 30%, transparent) 13deg 15deg, transparent 16deg 30deg);
      opacity:.06; animation:fxSpin 70s linear infinite;
      -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 60%); mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 60%);
    }
    @keyframes fxSpin { to { transform:rotate(360deg); } }
    .floor-hero[data-el="conscience"] .fh-elemFX::before {
      background-image:radial-gradient(circle, color-mix(in srgb, var(--ch) 75%, #fff) 0 1px, transparent 1.6px);
      background-size:54px 54px; opacity:.10; animation:fxRise 22s linear infinite;
      -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 0%, transparent 75%); mask-image:radial-gradient(ellipse at 50% 50%, #000 0%, transparent 75%);
    }
    @keyframes fxRise { to { transform:translateY(-54px); } }

    /* ═══════════════════════════════════════════════════════════════════════
       CHAKRA HALL — « 7 PORTES DE CONSCIENCE » · refonte lumineuse
       Enrichissement visuel seul : structure, textes, onglets, logique et
       décor de bibliothèque inchangés. --ch = couleur du chakra, --chg = son
       halo (définis inline par renderChakraHall / openChakraFloor).
       ═══════════════════════════════════════════════════════════════════════ */
    @property --chakAngle { syntax:"<angle>"; initial-value:0deg; inherits:false; }

    /* Demande user 2026-09-03 : ne garder que les 7 colonnes dans le hall —
       on masque la consigne, le rail vertical, « La Voie des 7 Étages » et le
       bouton « Voir tous les parchemins ». (Rendu par renderChakraHall, non
       supprimé du DOM → réversible en retirant ce bloc. La vue d'un étage
       #chakraFloor garde son propre rail #floorRail, non concerné.) */
    #chakraHall > .section-desc,
    #chakraRail,
    #chakraVoie,
    #chakraHallFoot { display:none; }
    /* le rail disparu, la rangée de 7 colonnes prend toute la largeur */
    #panelEtages .etages-layout { display:block; gap:0; }

    .chakra-hall { position:relative; }
    /* fil énergétique reliant les 7 étages — presque invisible au repos */
    .chakra-hall::after {
      content:""; position:absolute; left:1.5%; right:1.5%; bottom:-16px; height:2px; border-radius:2px;
      pointer-events:none; opacity:.07; transition:opacity .45s; z-index:0;
      background:linear-gradient(90deg,#c0392b,#d35400,#d4a017,#2e8b57,#2f7fd1,#3f3fa8,#8e5fc0);
    }
    .chakra-hall::before {
      content:""; position:absolute; left:1.5%; bottom:-16px; width:56px; height:2px; border-radius:2px;
      pointer-events:none; opacity:0; z-index:1;
      background:linear-gradient(90deg,transparent,#fff,transparent);
    }
    .chakra-hall:hover::after { opacity:.2; }
    .chakra-hall:hover::before { animation:chakLink 2.6s ease-in-out; }
    @keyframes chakLink { 0%{ opacity:0; left:1.5% } 12%{ opacity:.9 } 82%{ opacity:.45 } 100%{ opacity:0; left:calc(98.5% - 56px) } }

    /* effet de focus : carte survolée à 100 %, voisines à peine estompées */
    .chakra-hall:hover .chakra-col:not(:hover),
    .chakra-hall.has-awake .chakra-col:not(.is-awake) { opacity:.9; filter:saturate(.9) brightness(.93); }

    /* ── LA CARTE ── */
    .chakra-col {
      transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1));
      transform-style:preserve-3d;
      transition:transform .28s cubic-bezier(.2,.8,.3,1), border-color .35s, box-shadow .35s, opacity .35s, filter .35s;
    }
    .chakra-col .col-etage { transition:opacity .3s; }
    .chakra-col::before {
      background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--ch) 26%, transparent) 0%, transparent 60%);
      opacity:.4;
    }
    /* aura diffuse liée au chakra — édges + très légère diffusion à travers la face */
    .chakra-col::after {
      content:""; position:absolute; inset:-16px; border-radius:24px; z-index:-1; pointer-events:none;
      background:radial-gradient(ellipse at 50% 45%, var(--chg) 0%, color-mix(in srgb, var(--ch) 18%, transparent) 42%, transparent 72%);
      opacity:0; transition:opacity .45s;
    }
    .chakra-col:hover, .chakra-col.is-awake { --ty:-5px; --sc:1.012;
      border-color:color-mix(in srgb, var(--ch) 60%, var(--border));
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--ch) 32%, transparent),
        0 18px 48px #00000099,
        0 0 26px var(--chg),
        0 0 62px color-mix(in srgb, var(--ch) 24%, transparent);
    }
    .chakra-col:hover::before, .chakra-col.is-awake::before { opacity:.9; }
    .chakra-col:hover::after,  .chakra-col.is-awake::after  { opacity:.6; }

    /* impulsion lumineuse qui parcourt le cadre (survol / éveil) */
    .chakra-col .col-frame {
      position:absolute; inset:0; border-radius:16px; padding:1px; pointer-events:none; z-index:3; opacity:0; transition:opacity .4s;
      background:conic-gradient(from var(--chakAngle), transparent 0 60%, color-mix(in srgb, var(--ch) 80%, #fff) 73% 80%, transparent 92% 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
    }
    .chakra-col:hover .col-frame, .chakra-col.is-awake .col-frame { opacity:.9; animation:chakFrame 5s linear infinite; }
    @keyframes chakFrame { to { --chakAngle:360deg; } }

    /* voile élémentaire — même esprit que le voile des étages, en plus discret, au survol */
    .chakra-col .col-elemFX {
      position:absolute; inset:1px; border-radius:15px; overflow:hidden; pointer-events:none; z-index:0;
      opacity:0; transition:opacity .5s; mix-blend-mode:screen;
    }
    .chakra-col:hover .col-elemFX, .chakra-col.is-awake .col-elemFX { opacity:.55; }
    .chakra-col .col-elemFX::before, .chakra-col .col-elemFX::after { content:""; position:absolute; inset:-30%; }
    .chakra-col[data-el="terre"] .col-elemFX::before {
      background-image:radial-gradient(circle, color-mix(in srgb, var(--ch) 72%, #fff) 0 1px, transparent 1.7px);
      background-size:34px 34px; opacity:.16; animation:fxTerre 24s linear infinite;
      -webkit-mask-image:radial-gradient(ellipse at 50% 62%, #000, transparent 72%); mask-image:radial-gradient(ellipse at 50% 62%, #000, transparent 72%);
    }
    .chakra-col[data-el="eau"] .col-elemFX::before {
      background:repeating-linear-gradient(-42deg, transparent 0 13px, color-mix(in srgb, var(--ch) 42%, transparent) 13px 14px);
      opacity:.1; animation:fxEau 14s linear infinite;
    }
    .chakra-col[data-el="feu"] .col-elemFX {
      background:radial-gradient(ellipse at 50% 44%, color-mix(in srgb, var(--ch) 30%, transparent) 0%, transparent 58%);
    }
    .chakra-col[data-el="feu"]:hover .col-elemFX, .chakra-col[data-el="feu"].is-awake .col-elemFX { animation:fxFeu 5s ease-in-out infinite; }
    .chakra-col[data-el="air"] .col-elemFX::before {
      background:radial-gradient(ellipse at 30% 45%, color-mix(in srgb, var(--ch) 22%, transparent) 0%, transparent 46%);
      opacity:.5; animation:fxAir 18s ease-in-out infinite alternate;
    }
    .chakra-col[data-el="ether"] .col-elemFX::before {
      inset:20%; border-radius:50%; border:1px solid color-mix(in srgb, var(--ch) 48%, transparent);
      opacity:.28; animation:fxEther 6s ease-out infinite;
    }
    .chakra-col[data-el="lumiere"] .col-elemFX::before {
      background-image:radial-gradient(circle, color-mix(in srgb, var(--ch) 78%, #fff) 0 1px, transparent 1.7px);
      background-size:40px 40px; opacity:.13; animation:fxRise 20s linear infinite;
      -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000, transparent 72%); mask-image:radial-gradient(ellipse at 50% 50%, #000, transparent 72%);
    }
    .chakra-col[data-el="conscience"] .col-elemFX::before {
      background-image:radial-gradient(circle, #fff 0 1px, transparent 1.8px);
      background-size:44px 44px; opacity:.13; animation:fxRise 18s linear infinite;
      -webkit-mask-image:radial-gradient(ellipse at 50% 56%, #000, transparent 70%); mask-image:radial-gradient(ellipse at 50% 56%, #000, transparent 70%);
    }
    .chakra-col[data-el="conscience"] .col-elemFX::after {
      inset:auto; left:44%; right:44%; top:-14%; bottom:24%;
      background:linear-gradient(to top, transparent 20%, color-mix(in srgb, var(--ch) 45%, #fff) 100%);
      -webkit-mask:linear-gradient(to top, transparent, #000); mask:linear-gradient(to top, transparent, #000);
      opacity:.22;
    }

    /* quelques particules propres à l'élément — au survol / éveil seulement */
    .chakra-col .col-particles { position:absolute; inset:0; border-radius:16px; overflow:hidden; pointer-events:none; z-index:2; }
    .chakra-col .col-particles i {
      position:absolute; left:var(--px,50%); top:var(--py,64%); width:3px; height:3px; border-radius:50%;
      background:color-mix(in srgb, var(--ch) 55%, #fff); box-shadow:0 0 6px var(--ch); opacity:0;
    }
    .chakra-col .col-particles i:nth-child(1){ --px:28%; --py:40% }
    .chakra-col .col-particles i:nth-child(2){ --px:74%; --py:34% }
    .chakra-col .col-particles i:nth-child(3){ --px:42%; --py:46% }
    .chakra-col .col-particles i:nth-child(4){ --px:62%; --py:28% }
    .chakra-col:hover .col-particles i, .chakra-col.is-awake .col-particles i { animation:chakRise 4.4s ease-in-out infinite; }
    .chakra-col:hover .col-particles i:nth-child(2), .chakra-col.is-awake .col-particles i:nth-child(2){ animation-delay:1.1s }
    .chakra-col:hover .col-particles i:nth-child(3), .chakra-col.is-awake .col-particles i:nth-child(3){ animation-delay:2.2s }
    .chakra-col:hover .col-particles i:nth-child(4), .chakra-col.is-awake .col-particles i:nth-child(4){ animation-delay:3s }
    @keyframes chakRise { 0%{ opacity:0; transform:translateY(6px) scale(.6) } 22%,58%{ opacity:.8 } 100%{ opacity:0; transform:translateY(-22px) scale(1) } }
    .chakra-col[data-el="terre"] .col-particles i { border-radius:1px; }
    .chakra-col[data-el="eau"]   .col-particles i { width:4px; height:5px; border-radius:60% 60% 50% 50%; }
    .chakra-col[data-el="feu"]   .col-particles i { background:#ffe6a8; box-shadow:0 0 8px #f2c94c; }
    .chakra-col[data-el="feu"]:hover .col-particles i, .chakra-col[data-el="feu"].is-awake .col-particles i { animation-duration:3s; }
    .chakra-col[data-el="ether"] .col-particles i,
    .chakra-col[data-el="lumiere"] .col-particles i { animation-name:chakTwinkle !important; }
    @keyframes chakTwinkle { 0%,100%{ opacity:0; transform:scale(.5) } 50%{ opacity:.9; transform:scale(1) } }
    .chakra-col[data-el="conscience"] .col-particles i { background:#fff; box-shadow:0 0 8px #d9c2ff; }

    /* ── LE MANDALA — cœur énergétique de la carte ── */
    .chakra-col .col-symbol { width:78px; height:78px; margin-bottom:14px; overflow:visible; position:relative; }
    .chak-mandala { overflow:visible; display:block; }
    .chak-mandala .m-ring   { transform-origin:50px 50px; animation:chakSpin 150s linear infinite; }
    .chak-mandala .m-geo    { transform-origin:50px 50px; animation:chakSpin 112s linear infinite reverse; }
    .chak-mandala .m-halo   { transform-origin:50px 50px; animation:chakBreath 7.5s ease-in-out infinite; }
    .chak-mandala .m-halo2  { transform-origin:50px 50px; animation:chakBreath 12s ease-in-out infinite; opacity:.62; }
    .chak-mandala .m-core   { transform-origin:50px 50px; animation:chakCorePulse 4.6s ease-in-out infinite; }
    .chak-mandala .m-rays   { transform-origin:50px 50px; animation:chakSpin 64s linear infinite; opacity:.4; }
    .chak-mandala .m-rays-cel { animation-duration:98s; }
    .chak-mandala .m-spark  { animation:chakSpark 6.5s ease-in-out infinite; }
    .chak-mandala .m-spark-2{ animation-duration:9s; animation-delay:3s; }
    .chak-mandala .m-wave, .chak-mandala .m-eye { transform-box:fill-box; transform-origin:50% 50%; opacity:0; }
    .chak-mandala .m-ascend { transform-box:fill-box; transform-origin:50% 50%; opacity:0; }
    .chak-mandala .m-filaments { transform-origin:50px 50px; }
    @keyframes chakSpin { to { transform:rotate(360deg); } }
    @keyframes chakBreath { 0%,100%{ transform:scale(1); opacity:.46 } 50%{ transform:scale(1.05); opacity:.68 } }
    @keyframes chakCorePulse { 0%,100%{ transform:scale(.95); opacity:.88 } 50%{ transform:scale(1.05); opacity:1 } }
    @keyframes chakSpark { 0%,100%{ opacity:0 } 50%{ opacity:.85 } }

    .chakra-col:hover .col-symbol, .chakra-col.is-awake .col-symbol, .floor-hero .fh-symbol {
      filter:drop-shadow(0 0 18px var(--chg)) drop-shadow(0 0 5px color-mix(in srgb, var(--ch) 70%, transparent));
    }
    .chakra-col:hover .chak-mandala .m-halo,  .chakra-col.is-awake .chak-mandala .m-halo  { animation-duration:4.6s; }
    .chakra-col:hover .chak-mandala .m-halo2, .chakra-col.is-awake .chak-mandala .m-halo2 { opacity:1; }
    .chakra-col:hover .chak-mandala .m-core,  .chakra-col.is-awake .chak-mandala .m-core  { filter:brightness(1.18); }
    .chakra-col:hover .chak-mandala .m-rays,  .chakra-col.is-awake .chak-mandala .m-rays  { opacity:.72; }
    .chakra-col:hover .chak-mandala .m-wave,   .chakra-col.is-awake .chak-mandala .m-wave,   .fh-symbol .chak-mandala .m-wave   { animation:chakWave 3.2s ease-out infinite; }
    .chakra-col:hover .chak-mandala .m-wave-2, .chakra-col.is-awake .chak-mandala .m-wave-2, .fh-symbol .chak-mandala .m-wave-2 { animation-delay:1.6s; }
    .chakra-col:hover .chak-mandala .m-eye,    .chakra-col.is-awake .chak-mandala .m-eye,    .fh-symbol .chak-mandala .m-eye    { animation:chakEye 5.5s ease-in-out infinite; }
    .chakra-col:hover .chak-mandala .m-ascend, .chakra-col.is-awake .chak-mandala .m-ascend, .fh-symbol .chak-mandala .m-ascend { animation:chakAscend 3.6s ease-out infinite; }
    .chakra-col:hover .chak-mandala .m-filaments, .chakra-col.is-awake .chak-mandala .m-filaments, .fh-symbol .chak-mandala .m-filaments { animation:chakSpin 44s linear infinite; }
    @keyframes chakWave { 0%{ transform:scale(.5); opacity:.6 } 100%{ transform:scale(2.5); opacity:0 } }
    @keyframes chakEye { 0%,100%{ transform:scale(.9); opacity:.26 } 50%{ transform:scale(1.05); opacity:.52 } }
    @keyframes chakAscend { 0%{ opacity:0; transform:translateY(8px) } 25%{ opacity:.75 } 100%{ opacity:0; transform:translateY(-34px) } }

    /* petit indicateur d'élément — remplace « ÉTAGE N » au survol (aucune poussée de hauteur) */
    .chakra-col .col-elem {
      position:absolute; top:16px; left:50%; transform:translateX(-50%) translateY(3px);
      display:inline-flex; align-items:center; gap:5px; white-space:nowrap; padding:3px 9px; border-radius:999px;
      font-family:"Cinzel",serif; font-size:8px; letter-spacing:2.4px; text-transform:uppercase;
      color:color-mix(in srgb, var(--ch) 28%, #fff);
      background:color-mix(in srgb, var(--ch) 16%, #0a0820ee); border:1px solid color-mix(in srgb, var(--ch) 45%, var(--border));
      box-shadow:0 0 14px var(--chg); opacity:0; pointer-events:none; transition:opacity .35s, transform .35s; z-index:4;
    }
    .chakra-col:hover .col-etage, .chakra-col.is-awake .col-etage { opacity:.12; }
    .chakra-col:hover .col-elem,  .chakra-col.is-awake .col-elem  { opacity:1; transform:translateX(-50%) translateY(0); }

    /* ── LE LOSANGE = POINT D'ÉNERGIE + remontée vers le chakra ── */
    .chakra-col .col-crystal {
      width:16px; height:16px; bottom:-8px; opacity:.55; filter:none;
      background:linear-gradient(135deg, color-mix(in srgb, var(--ch) 92%, #fff), color-mix(in srgb, var(--ch) 28%, transparent));
      box-shadow:0 0 6px var(--chg); transition:opacity .35s, box-shadow .35s, background .35s;
    }
    .chakra-col:hover .col-crystal, .chakra-col.is-awake .col-crystal {
      opacity:1; background:linear-gradient(135deg, #fff, var(--ch));
      box-shadow:0 0 12px var(--ch), 0 0 30px var(--chg);
    }
    .chakra-col .col-energy {
      position:absolute; left:50%; bottom:-8px; width:2px; height:0; transform:translateX(-50%);
      background:linear-gradient(to top, color-mix(in srgb, var(--ch) 85%, #fff), transparent);
      box-shadow:0 0 6px var(--ch); opacity:0; pointer-events:none; z-index:0;
      transition:height .55s cubic-bezier(.3,.8,.3,1), opacity .3s;
    }
    .chakra-col:hover .col-energy, .chakra-col.is-awake .col-energy { height:72px; opacity:.7; }

    /* ── BOUTON CONSULTER ── */
    .chakra-col .col-cta { position:relative; overflow:hidden; }
    .chakra-col:hover .col-cta, .chakra-col.is-awake .col-cta {
      background:color-mix(in srgb, var(--ch) 28%, #0a0820);
      border-color:color-mix(in srgb, var(--ch) 68%, var(--border));
      box-shadow:0 0 16px var(--chg), inset 0 0 12px color-mix(in srgb, var(--ch) 20%, transparent);
      color:#fff;
    }
    .chakra-col .col-cta::after { content:"\2726"; margin-left:7px; font-size:8px; opacity:.4; vertical-align:middle; }
    .chakra-col .col-cta::before {
      content:""; position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.3) 50%, transparent 58%);
      transform:translateX(-130%);
    }
    .chakra-col .col-cta:hover::before { animation:chakCtaSheen .9s ease; }
    @keyframes chakCtaSheen { to { transform:translateX(130%); } }

    /* couches internes — ordre de superposition */
    .chakra-col .col-frame     { z-index:3; }
    .chakra-col .col-particles { z-index:2; }
    .chakra-col .col-elemFX,
    .chakra-col .col-energy    { z-index:0; }

    /* progression d'éveil (data-awaken 0→3) — plus de lumière, même identité */
    .chakra-col[data-awaken="0"] .chak-mandala { opacity:.9; }
    .chakra-col[data-awaken="1"] .chak-mandala { opacity:.95; }
    .chakra-col[data-awaken="2"]::before { opacity:.55; }
    .chakra-col[data-awaken="3"]::before { opacity:.7; }
    .chakra-col[data-awaken="3"] .chak-mandala .m-halo2 { opacity:.85; }

    /* ═══ LES 7 ÉTAGES — un symbole en cercle par étage ; un clic déroule un parchemin vers le bas ═══
       Remplace la « carte » complète (demande user 2026-09-19). Le mandala animé (.chak-mandala)
       est conservé dans le cercle ; les infos vivent dans le parchemin. */
    .chakra-hall { align-items:start; gap:22px 14px; }
    .chakra-col, .chakra-col:hover, .chakra-col.is-open {
      padding:0; background:none; border:0; border-radius:0; box-shadow:none;
      display:flex; flex-direction:column; align-items:center; text-align:center;
      transform:none; transition:none; overflow:visible; opacity:1; filter:none;
    }
    .chakra-col::before, .chakra-col::after { display:none; }
    .chakra-hall:hover .chakra-col:not(:hover), .chakra-hall.has-awake .chakra-col:not(.is-awake) { opacity:1; filter:none; }

    .col-orb {
      position:relative; width:104px; height:104px; padding:0; border-radius:50%; cursor:pointer; display:grid; place-items:center;
      background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ch) 24%, #0d0a26) 0%, #0a0820 72%);
      border:1.5px solid color-mix(in srgb, var(--ch) 58%, #2a2050);
      box-shadow:0 0 22px var(--chg), inset 0 0 22px color-mix(in srgb, var(--ch) 16%, transparent);
      transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
    }
    .col-orb::after {
      content:""; position:absolute; inset:-8px; border-radius:50%; pointer-events:none;
      border:1px dashed color-mix(in srgb, var(--ch) 40%, transparent); opacity:.65; animation:orbSpin 46s linear infinite;
    }
    @keyframes orbSpin { to { transform:rotate(360deg); } }
    .col-orb:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 0 38px var(--chg), inset 0 0 26px color-mix(in srgb, var(--ch) 24%, transparent); }
    .col-orb:focus-visible { outline:2px solid var(--gold2, #e8c46a); outline-offset:9px; }
    .chakra-col.is-open .col-orb { border-color:var(--ch); box-shadow:0 0 44px var(--chg), inset 0 0 28px color-mix(in srgb, var(--ch) 28%, transparent); }
    .chakra-col[data-awaken="0"] .col-orb { box-shadow:0 0 14px var(--chg), inset 0 0 16px color-mix(in srgb, var(--ch) 10%, transparent); }
    .chakra-col[data-awaken="3"] .col-orb { box-shadow:0 0 34px var(--chg), inset 0 0 26px color-mix(in srgb, var(--ch) 26%, transparent); }
    .col-orb .col-symbol { width:76px; height:76px; margin:0; }

    /* Le parchemin : se déroule vers le bas (0fr → 1fr) ; le rouleau du bas descend avec le bord */
    .col-scroll { display:grid; grid-template-rows:0fr; width:100%; transition:grid-template-rows .75s cubic-bezier(.3,.75,.25,1); }
    .chakra-col.is-open .col-scroll { grid-template-rows:1fr; }
    .col-scroll-clip { overflow:hidden; min-height:0; visibility:hidden; transition:visibility 0s linear .75s; }
    .chakra-col.is-open .col-scroll-clip { visibility:visible; transition-delay:0s; }
    .col-parch-wrap { padding:18px 6px 14px; }
    .col-parch {
      position:relative; padding:30px 12px 32px; text-align:center;
      background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
        linear-gradient(90deg, rgba(0,0,0,.30), transparent 14%, transparent 86%, rgba(0,0,0,.30)),
        linear-gradient(180deg, color-mix(in srgb, var(--ch) 14%, #262048), #1b1440 60%, color-mix(in srgb, var(--ch) 10%, #221a46));
      border-left:1px solid rgba(232,196,106,.32); border-right:1px solid rgba(232,196,106,.32);
      box-shadow:inset 0 0 34px rgba(0,0,0,.4), 0 14px 32px rgba(0,0,0,.5);
    }
    .parch-roll {
      position:absolute; left:-7px; right:-7px; height:16px; border-radius:9px; z-index:3;
      background:linear-gradient(180deg, #7a5a22 0%, #e8c46a 36%, #b58a3a 62%, #4e3814 100%);
      box-shadow:0 3px 9px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
    }
    .parch-roll::before, .parch-roll::after { content:""; position:absolute; top:-2px; width:9px; height:20px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #f0d78a, #4e3814); }
    .parch-roll::before { left:-3px; } .parch-roll::after { right:-3px; }
    .parch-roll-top { top:-8px; } .parch-roll-bot { bottom:-8px; }
    /* Contenu du parchemin : on annule le positionnement « carte » d'origine */
    .col-parch .col-etage { opacity:1; margin:0 0 8px; }
    .col-parch .col-elem { position:static; transform:none; opacity:1; display:inline-flex; margin:0 0 12px; pointer-events:auto; }
    /* Le nom (ex. SVADHISHTHANA) doit tenir dans la largeur du parchemin, sans être coupé */
    /* La taille du nom suit la largeur RÉELLE du parchemin (container query) : une seule ligne, jamais coupé */
    .col-parch { padding-left:8px; padding-right:8px; container-type:inline-size; }
    .col-parch .col-name { font-size:13px; font-size:clamp(9px, 7.2cqw, 17px); letter-spacing:.02em; line-height:1.25; white-space:nowrap; max-width:100%; }
    .col-parch .col-fr { letter-spacing:1.6px; }
    .col-parch .col-themes { min-height:0; }
    .col-parch .col-count { margin:12px 0 14px; }
    .col-parch .col-cta { margin-top:4px; }
    .chakra-col:hover .col-etage, .chakra-col:hover .col-elem { opacity:1; }

    @media (max-width:900px) {
      .chakra-hall { grid-template-columns:repeat(auto-fit, minmax(88px, 1fr)); gap:16px 8px; }
      .chakra-col.is-open { grid-column:1 / -1; }
      .col-orb { width:80px; height:80px; }
      .col-orb .col-symbol { width:58px; height:58px; }
      .col-orb::after { inset:-6px; }
      .col-scroll { max-width:420px; }
    }
    @media (max-width:520px) {
      /* Téléphone : les 7 sphères sur UNE rangée que l'on fait défiler du doigt (horizontalement), avec accroche
         sur chaque sphère. Avant, elles étaient en grille de 4 colonnes rigides : la 4e dépassait et était coupée.
         La sphère suivante dépasse volontairement du bord droit : elle signale qu'on peut faire glisser. */
      .chakra-hall {
        display:flex; flex-wrap:nowrap; align-items:flex-start; gap:18px;
        overflow-x:auto; scroll-snap-type:x proximity; overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch; scrollbar-width:none;
        padding:16px 16px 24px;
      }
      .chakra-hall::-webkit-scrollbar { display:none; }
      .chakra-col { flex:0 0 auto; scroll-snap-align:center; }
      /* Un parchemin ouvert élargit sa colonne (il se déroule sous sa sphère, dans la rangée qui défile). */
      .chakra-col.is-open { flex:0 0 min(320px, 84vw); }
      .col-orb { width:84px; height:84px; }
      .col-orb .col-symbol { width:62px; height:62px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .col-scroll, .col-scroll-clip { transition:none; }
      .col-orb, .col-orb::after { transition:none; animation:none; }
    }

    @media (hover:hover) and (pointer:fine) {
      .chakra-col .col-symbol { transition:transform .3s ease, filter .35s; transform:translate(calc(var(--mx,0) * 3px), calc(var(--my,0) * 3px)); }
      .chakra-col::before { transition:opacity .3s, transform .3s; transform:translate(calc(var(--mx,0) * -5px), calc(var(--my,0) * -4px)); }
    }
    @media (max-width:1100px) {
      .chakra-col { transform:translateY(var(--ty,0px)) scale(var(--sc,1)); }
      .chakra-col .col-elem { font-size:7.5px; letter-spacing:1.8px; }
    }
    @media (prefers-reduced-motion:reduce) {
      .chak-mandala .m-ring, .chak-mandala .m-geo, .chak-mandala .m-halo, .chak-mandala .m-halo2,
      .chak-mandala .m-core, .chak-mandala .m-rays, .chak-mandala .m-spark, .chak-mandala .m-wave,
      .chak-mandala .m-eye, .chak-mandala .m-ascend, .chak-mandala .m-filaments,
      .chakra-col .col-frame, .chakra-col .col-particles i,
      .chakra-col .col-elemFX::before, .chakra-col .col-elemFX::after,
      .chakra-hall::before, .chakra-col .col-cta::before { animation:none !important; }
      .chakra-col { transition:opacity .3s, box-shadow .3s, border-color .3s; transform:none !important; }
      .chakra-col:hover, .chakra-col.is-awake { --ty:0px; --sc:1; }
    }

    .ct-disclaimer {
      max-width:680px; margin:22px auto 0; text-align:center; font-size:11px; line-height:1.6;
      color:var(--text3); font-style:italic; opacity:.9;
    }
    .floor-teaching { max-width:880px; margin:8px auto 44px; }
    .ct-block { margin:34px 0; }
    .ct-block > h4 {
      font-family:"Cinzel",serif; font-size:11px; letter-spacing:3px; text-transform:uppercase;
      color:var(--ch); margin:0 0 14px; display:flex; align-items:center; gap:12px;
    }
    .ct-block > h4::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, color-mix(in srgb, var(--ch) 45%, transparent), transparent); }
    .ct-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
    .ct-cell {
      background:linear-gradient(180deg, #100c2ea8, #0a0820cc); border:1px solid var(--border);
      border-radius:14px; padding:14px 16px;
    }
    .ct-cell .k { font-family:"Cinzel",serif; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ch); }
    .ct-cell .v { margin-top:5px; font-size:13.5px; line-height:1.55; color:var(--text2); }
    .ct-list { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
    .ct-list li {
      font-size:12.5px; color:var(--text2); padding:6px 12px; border-radius:20px;
      background:color-mix(in srgb, var(--ch) 9%, #0a0820); border:1px solid color-mix(in srgb, var(--ch) 26%, var(--border));
    }
    .ct-twocol { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .ct-state { border-radius:14px; padding:16px 18px; font-size:13.5px; line-height:1.7; color:var(--text2); }
    .ct-state .k { display:block; font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
    .ct-state.bal { background:color-mix(in srgb, var(--ch) 12%, #0a0820); border:1px solid color-mix(in srgb, var(--ch) 42%, var(--border)); }
    .ct-state.bal .k { color:var(--ch); }
    .ct-state.imb { background:#120a1acc; border:1px solid var(--border); }
    .ct-state.imb .k { color:var(--text3); }
    .ct-practice { display:grid; gap:12px; }
    .ct-practice .pr-row { display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.65; color:var(--text2); }
    .ct-practice .pr-row .pr-k { flex:0 0 104px; font-family:"Cinzel",serif; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ch); padding-top:3px; }
    .ct-affirm {
      margin:18px 0 0; text-align:center; font-family:"Cormorant Garamond",serif; font-style:italic;
      font-size:18px; line-height:1.6; color:var(--text); padding:16px 20px; border-radius:14px;
      background:color-mix(in srgb, var(--ch) 10%, #0a0820); border:1px solid color-mix(in srgb, var(--ch) 34%, var(--border));
    }
    .ct-question { margin:40px auto 0; max-width:640px; text-align:center; }
    .ct-question .qq-eyebrow { font-family:"Cinzel",serif; font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--text3); }
    .ct-question .qq-text {
      margin-top:12px; font-family:"Cinzel Decorative","Cinzel",serif; font-size:21px; line-height:1.5;
      color:var(--text); letter-spacing:.5px;
    }
    .ct-question .qq-text::before, .ct-question .qq-text::after { content:'\201C'; color:var(--ch); }
    .ct-question .qq-text::after { content:'\201D'; }

    /* Correspondances — médaillons + tooltip au survol */
    .corr-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); gap:12px; }
    .corr-medallion {
      position:relative; text-align:center; padding:16px 12px 14px; border-radius:16px; cursor:default; outline:none;
      background:linear-gradient(180deg, #100c2eb0, #0a0820d8);
      border:1px solid color-mix(in srgb, var(--ch) 28%, var(--border)); transition:transform .2s, border-color .2s, box-shadow .2s;
    }
    .corr-medallion:hover, .corr-medallion:focus-visible { transform:translateY(-4px); border-color:color-mix(in srgb, var(--ch) 65%, var(--border)); box-shadow:0 12px 34px #00000077, 0 0 20px var(--chg); }
    .corr-medallion .cm-icon { font-size:24px; line-height:1; filter:drop-shadow(0 0 10px var(--chg)); }
    .corr-medallion .cm-name { margin-top:8px; font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text); }
    .corr-medallion .cm-tag { margin-top:4px; font-family:"Cormorant Garamond",serif; font-style:italic; font-size:13px; color:var(--ch); }
    .corr-tip {
      position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(6px);
      width:max-content; max-width:min(240px, 72vw); padding:10px 13px; border-radius:12px; z-index:6;
      background:#0a0820f5; border:1px solid color-mix(in srgb, var(--ch) 55%, var(--border));
      box-shadow:0 14px 40px #000000aa; font-size:11.5px; line-height:1.55; color:var(--text2);
      opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
    }
    .corr-tip::after {
      content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
      border:7px solid transparent; border-top-color:color-mix(in srgb, var(--ch) 55%, var(--border));
    }
    .corr-medallion:hover .corr-tip, .corr-medallion:focus-visible .corr-tip { opacity:1; transform:translateX(-50%) translateY(0); }

    .floor-scrolls-title { text-align:center; font-family:"Cinzel",serif; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--ch); margin:14px 0 4px; }

    /* « En savoir plus » — les correspondances/enseignements détaillés du chakra
       passent après les parchemins, repliés par défaut. */
    .floor-lore-toggle-row { text-align:center; margin:38px 0 6px; }
    .floor-lore-toggle {
      background:transparent; border:1px solid var(--gold-dim); color:var(--gold2);
      font-family:"Cinzel",serif; font-size:11px; letter-spacing:2px; text-transform:uppercase;
      padding:10px 22px; border-radius:22px; cursor:pointer; transition:.2s;
    }
    .floor-lore-toggle:hover { background:#c9a84c14; border-color:var(--gold2); }
    .floor-lore-toggle .flt-chev { display:inline-block; margin-left:6px; transition:transform .25s; }
    .floor-lore-toggle.open .flt-chev { transform:rotate(180deg); }
    .floor-lore { margin-top:20px; animation:floorLoreIn .35s ease both; }
    @keyframes floorLoreIn { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:none;} }
    @media (prefers-reduced-motion: reduce) { .floor-lore { animation:none; } }

    /* Voie des 7 Étages — progression verticale (hall) */
    .chakra-voie { flex-basis:100%; margin:38px auto 4px; max-width:560px; }
    .chakra-voie .voie-title {
      text-align:center; font-family:"Cinzel",serif; font-size:10px; letter-spacing:3px; text-transform:uppercase;
      color:var(--text3); margin-bottom:6px;
    }
    .chakra-voie .voie-sub { text-align:center; font-family:"Cormorant Garamond",serif; font-style:italic; font-size:14px; color:var(--text3); margin-bottom:18px; }
    .voie-step {
      --ch:#6a5a80; --chg:#6a5a8055; display:flex; align-items:center; gap:14px; width:100%; text-align:left;
      padding:9px 14px; border-radius:12px; cursor:pointer; background:none; font:inherit;
      border:1px solid transparent; transition:background .2s, border-color .2s;
    }
    .voie-step:hover { background:#ffffff07; border-color:color-mix(in srgb, var(--ch) 45%, var(--border)); }
    .voie-step .vs-num {
      flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
      font-family:"Cinzel",serif; font-size:11px; color:var(--ch);
      border:1px solid var(--ch); box-shadow:0 0 12px var(--chg); background:#0a0820;
    }
    .voie-step .vs-name { font-family:"Cinzel",serif; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--text); }
    .voie-step .vs-verb { margin-left:auto; font-family:"Cormorant Garamond",serif; font-style:italic; font-size:15px; color:var(--text2); }
    .voie-arrow { margin:1px 0 1px 26px; color:var(--gold-dim); opacity:.45; font-size:11px; line-height:1; }

    @media (max-width: 720px) {
      .ct-twocol { grid-template-columns:1fr; }
      .ct-practice .pr-row { flex-direction:column; gap:2px; }
      .ct-practice .pr-row .pr-k { flex:none; padding-top:0; }
      .ct-question .qq-text { font-size:18px; }
      .floor-hero .fh-meaning { font-size:15.5px; }
      .voie-step .vs-verb { display:none; }
      .corr-tip { max-width:78vw; }
    }
    @media (prefers-reduced-motion: reduce) {
      .fh-elemFX, .fh-elemFX::before, .fh-elemFX::after { animation:none !important; }
      .corr-medallion, .voie-step { transition:none; }
    }

    /* ── LECTEUR MULTI-PAGES (article regroupé en recueil) ──
       Vitrine d'un manuscrit encadré : voile cosmique + cadre doré autour de
       l'image, zoom généreux avec pan souris/tactile (pinch), chrome discret
       dans l'esprit du lecteur AkashaBookReader (PDF) sans en réutiliser le
       code — ici une seule image par page, pas de pagination-livre. */
    .book-page-stage {
      position:relative; padding:22px 22px 0; background:
        radial-gradient(120% 90% at 50% 0%, rgba(90,45,154,.16), transparent 60%),
        #07051a;
      border-radius:16px 16px 0 0; overflow:hidden;
    }
    .book-page-stage::before {
      content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
      box-shadow:inset 0 0 0 1px rgba(201,168,76,.16), inset 0 40px 60px -40px rgba(0,0,0,.7);
    }
    .book-page-img-wrap {
      position:relative; width:100%; max-height:66vh; overflow:auto; text-align:center;
      -webkit-user-select:none; user-select:none; touch-action:none;
      scrollbar-width:thin; scrollbar-color:rgba(201,168,76,.35) transparent;
      border-radius:10px; box-shadow:0 18px 40px -18px #000000cc;
    }
    .book-page-img-wrap::-webkit-scrollbar { width:9px; height:9px; }
    .book-page-img-wrap::-webkit-scrollbar-thumb { background:rgba(201,168,76,.3); border-radius:8px; }
    .book-page-img-wrap.zoomed { cursor:grab; }
    .book-page-img-wrap.zoomed.dragging { cursor:grabbing; }
    .book-page-img {
      display:block; width:auto; height:auto; max-width:100%; max-height:66vh; object-fit:contain;
      margin:0 auto; transition:width .25s ease, max-height .25s ease; cursor:zoom-in;
    }
    .book-page-img.zoomed { max-height:none; max-width:none; cursor:zoom-out; transition:none; }
    .book-page-zoom-controls {
      display:flex; align-items:center; justify-content:center; gap:6px; margin:16px auto 2px;
      padding:5px; width:max-content; background:#0c0922aa; border:1px solid rgba(201,168,76,.22); border-radius:20px;
    }
    .book-page-zoom-btn {
      width:28px; height:28px; border-radius:50%; cursor:pointer;
      background:transparent; border:1px solid rgba(201,168,76,.28); color:var(--text2); font-size:14px; transition:all .2s;
    }
    .book-page-zoom-btn:hover:not(:disabled) { border-color:var(--gold2); color:var(--gold2); background:rgba(201,168,76,.08); }
    .book-page-zoom-btn:disabled { opacity:.3; cursor:default; }
    .book-page-zoom-fit {
      border-radius:14px; width:auto; padding:0 10px; font-size:9px; letter-spacing:1.5px;
      font-family:"Cinzel",serif; text-transform:uppercase;
    }
    .book-page-zoom-label { font-family:"Cinzel",serif; font-size:10px; letter-spacing:1.5px; color:var(--text3); min-width:42px; text-align:center; }
    .book-reader-nav { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:22px; }
    .book-reader-nav-btn {
      width:38px; height:38px; border-radius:50%; cursor:pointer;
      background:rgba(201,168,76,.06); border:1px solid rgba(201,168,76,.3); color:var(--gold2); font-size:14px; transition:all .2s;
    }
    .book-reader-nav-btn:hover:not(:disabled) { background:rgba(201,168,76,.14); box-shadow:0 0 16px rgba(201,168,76,.28); }
    .book-reader-nav-btn:disabled { opacity:.3; cursor:default; }
    .book-reader-page-count { font-family:"Cinzel",serif; font-size:11px; letter-spacing:2px; color:var(--text3); min-width:80px; text-align:center; }
    .book-reader-dots { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
    .book-reader-dot { width:8px; height:8px; border-radius:50%; background:var(--border); cursor:pointer; transition:all .2s; }
    .book-reader-dot.active { background:var(--gold2); box-shadow:0 0 8px var(--gold-dim); }
    .book-reader-title { text-align:center; }
    .book-reader-title .modal-title { text-shadow:0 0 26px rgba(201,168,76,.4); }
    .book-reader-title .modal-meta { text-align:center; }

    .mpb-cover, .mpb-info { cursor:pointer; }

    /* ── WEB 3.0 / WALLET POLAR ── */
    .wallet-msg { min-height:18px; margin-top:12px; font-size:12px; font-style:italic; }
    .wallet-msg.err { color:#e06070; }
    .wallet-msg.ok { color:#70c090; }

    /* ── WEB 3.0 / NFT ── */
    .web3-scan-box {
      max-width:460px; margin:0 auto 34px; padding:24px; text-align:center;
      background:var(--card); border:1px solid var(--border); border-radius:14px;
    }
    .web3-scan-box p { color:var(--text2); font-size:14px; font-style:italic; margin-bottom:16px; line-height:1.6; }
    .web3-scan-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
    .web3-scan-row input {
      flex:1; min-width:180px; background:#08061aaa; border:1px solid var(--border); border-radius:10px;
      padding:11px 16px; color:var(--text); font-family:"Cinzel",serif; font-size:13px; letter-spacing:2px;
      text-transform:uppercase; outline:none; text-align:center;
    }
    .web3-scan-row input:focus { border-color:var(--gold-dim); box-shadow:0 0 0 3px #c9a84c1c; }
    .web3-scan-msg { min-height:18px; margin-top:12px; font-size:12px; font-style:italic; }
    .web3-scan-msg.err { color:#e06070; }
    .web3-scan-msg.ok { color:#70c090; }

    /* ══ Boutique de boosters NFT — objets de collection scellés ══
       (achat direct en Stardust ; prix + % purement informatifs, la vérité
        est côté serveur dans akasha-buy-tcg-booster.ts) */

    /* Bandeau d'intro sous le titre */
    .booster-intro {
      max-width:640px; margin:0 auto 22px; text-align:center;
      font-family:"Cormorant Garamond",serif; font-size:15px; line-height:1.6; color:var(--text2);
    }
    /* Booster Commun quotidien offert — avantage POLARIS 33,33 € */
    .polaris-daily-booster {
      max-width:560px; margin:0 auto 22px; padding:18px 20px; text-align:center; border-radius:16px;
      background:linear-gradient(160deg, rgba(90,40,180,.22), rgba(20,8,42,.5));
      border:1px solid rgba(160,110,240,.5); box-shadow:0 0 34px rgba(120,60,220,.16);
    }
    .polaris-daily-booster .pdb-badge {
      display:inline-block; font-family:"Cinzel",serif; font-size:8px; letter-spacing:2px;
      padding:2px 10px; border-radius:8px; background:linear-gradient(135deg,#5020a0,#9030d0); color:#f0e0ff; margin-bottom:8px;
    }
    .polaris-daily-booster .pdb-title { font-family:"Cinzel",serif; font-size:13px; letter-spacing:2px; color:#d8c0ff; margin-bottom:4px; }
    .polaris-daily-booster .pdb-sub { font-family:"Cormorant Garamond",serif; font-size:13px; color:var(--text3); margin-bottom:14px; }
    .polaris-daily-booster .pdb-btn {
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:2px; text-transform:uppercase;
      padding:10px 22px; border-radius:22px; cursor:pointer; color:#f0e0ff;
      background:linear-gradient(135deg,#3a1080,#7020c0); border:1px solid #a060e0;
      box-shadow:0 0 20px rgba(150,80,240,.25); transition:box-shadow .2s;
    }
    .polaris-daily-booster .pdb-btn:hover { box-shadow:0 0 34px rgba(180,120,255,.4); }
    .polaris-daily-booster .pdb-btn:disabled { opacity:.55; cursor:default; box-shadow:none; }

    /* Avantage GALACTIC (11,11 €) : 1 Booster Commun offert par mois — même gabarit
       que .polaris-daily-booster (« pdb- »), palette noir/blanc/argent pour matcher
       l'identité Galactic (cf. .plan-galactik sur index.html) au lieu du violet Polaris. */
    .galactik-monthly-booster {
      max-width:560px; margin:0 auto 22px; padding:18px 20px; text-align:center; border-radius:16px;
      background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(10,10,12,.55));
      border:1px solid rgba(255,255,255,.35); box-shadow:0 0 34px rgba(255,255,255,.08);
    }
    .galactik-monthly-booster .gmb-badge {
      display:inline-block; font-family:"Cinzel",serif; font-size:8px; letter-spacing:2px;
      padding:2px 10px; border-radius:8px; background:linear-gradient(135deg,#3a3a3f,#111); color:#fff; margin-bottom:8px;
    }
    .galactik-monthly-booster .gmb-title { font-family:"Cinzel",serif; font-size:13px; letter-spacing:2px; color:#f0f0f0; margin-bottom:4px; }
    .galactik-monthly-booster .gmb-sub { font-family:"Cormorant Garamond",serif; font-size:13px; color:var(--text3); margin-bottom:14px; }
    .galactik-monthly-booster .gmb-btn {
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:2px; text-transform:uppercase;
      padding:10px 22px; border-radius:22px; cursor:pointer; color:#fff;
      background:#000; border:1px solid rgba(255,255,255,.7);
      box-shadow:0 0 20px rgba(255,255,255,.12); transition:box-shadow .2s;
    }
    .galactik-monthly-booster .gmb-btn:hover { box-shadow:0 0 34px rgba(255,255,255,.28); }
    .galactik-monthly-booster .gmb-btn:disabled { opacity:.55; cursor:default; box-shadow:none; }
    .booster-intro .bi-link {
      display:inline-block; margin-top:8px; font-family:"Cinzel",serif; font-size:10.5px;
      letter-spacing:2px; text-transform:uppercase; color:var(--violet3);
      border-bottom:1px solid #b07de055; cursor:pointer; background:none; border-top:none; border-left:none; border-right:none;
      transition:color .2s, border-color .2s;
    }
    .booster-intro .bi-link:hover { color:var(--gold2); border-color:var(--gold-dim); }

    /* Compteur de solde premium */
    .booster-balance-chip {
      display:flex; flex-direction:column; align-items:center; gap:2px;
      width:max-content; margin:0 auto 30px; padding:10px 26px 12px; border-radius:14px;
      background:linear-gradient(160deg,#140f33 0%,#0a0722 100%);
      border:1px solid #3a2a7a55; box-shadow:0 0 24px #6040a022, inset 0 1px 0 rgba(255,255,255,.04);
    }
    .booster-balance-chip .bbc-label {
      font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:3px; text-transform:uppercase; color:var(--text3);
    }
    .booster-balance-chip .bbc-value {
      display:flex; align-items:baseline; gap:7px;
      font-family:"Cinzel",serif; font-size:24px; color:var(--gold2); text-shadow:0 0 16px var(--gold-dim);
      font-variant-numeric:tabular-nums;
    }
    .booster-balance-chip .bbc-value .bbc-star { font-size:15px; color:var(--gold); }
    .booster-balance-chip .bbc-value .bbc-unit { font-size:10px; letter-spacing:2px; color:var(--text3); text-transform:uppercase; }
    .booster-balance-chip.pulse { animation:bbcPulse .7s ease; }
    @keyframes bbcPulse {
      0%,100% { box-shadow:0 0 24px #6040a022, inset 0 1px 0 rgba(255,255,255,.04); }
      45%     { box-shadow:0 0 34px 4px var(--gold-dim), inset 0 1px 0 rgba(255,255,255,.06); }
    }

    /* Grille des 3 sachets */
    .tcg-booster-shop {
      display:grid; grid-template-columns:1fr; gap:30px;
      max-width:440px; margin:0 auto 10px;
    }
    @media(min-width:860px){
      .tcg-booster-shop { grid-template-columns:repeat(3,1fr); max-width:1140px; gap:30px; align-items:stretch; }
    }

    .booster-tier-card {
      position:relative; display:flex; flex-direction:column; align-items:center;
      padding:34px 24px 26px; border-radius:20px; text-align:center; isolation:isolate;
      background:
        radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--tier-col) 12%, transparent) 0%, transparent 60%),
        linear-gradient(165deg,#14112f 0%,#07051a 62%,#05040f 100%);
      border:1px solid color-mix(in srgb, var(--tier-col) 45%, var(--border));
      box-shadow:
        0 22px 50px -12px #000000cc,
        0 0 40px -6px var(--tier-glow),
        inset 0 1px 0 rgba(255,255,255,0.05);
      transition:transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s;
    }
    .booster-tier-card::before {   /* liseré supérieur de rareté */
      content:""; position:absolute; inset:0 0 auto 0; height:2px; border-radius:20px 20px 0 0;
      background:linear-gradient(90deg,transparent, var(--tier-col), transparent); opacity:.7;
    }
    .booster-tier-card::after {    /* halo diffus derrière la carte */
      content:""; position:absolute; z-index:-1; left:50%; top:38%; width:78%; height:52%;
      transform:translate(-50%,-50%); border-radius:50%;
      background:radial-gradient(circle, var(--tier-glow) 0%, transparent 70%);
      filter:blur(26px); opacity:.55;
    }
    .booster-tier-card:hover { transform:translateY(-8px); box-shadow:0 30px 60px -14px #000000dd, 0 0 60px -4px var(--tier-glow), inset 0 1px 0 rgba(255,255,255,0.06); }
    .booster-tier-card.tier-super_rare { border-color:#d9b24e77; }

    /* Cercle alchimique tournant derrière le sachet */
    .booster-tier-ring {
      position:absolute; z-index:-1; left:50%; top:150px; width:230px; height:230px;
      transform:translate(-50%,-50%); pointer-events:none; opacity:0; transition:opacity .4s;
    }
    .booster-tier-card:hover .booster-tier-ring,
    .booster-tier-card.tier-super_rare .booster-tier-ring,
    .booster-tier-card.tier-rare .booster-tier-ring { opacity:1; }
    .booster-tier-ring svg { width:100%; height:100%; }
    .booster-tier-ring .brg-spin { transform-origin:50% 50%; animation:brgSpin 60s linear infinite; }
    .booster-tier-card.tier-super_rare .booster-tier-ring .brg-spin { animation-duration:90s; }
    @keyframes brgSpin { to { transform:rotate(360deg); } }

    /* Le sachet — véritable objet flottant */
    .booster-tier-pack {
      position:relative; width:min(74%,208px); margin:4px auto 20px; perspective:1100px;
    }
    .booster-tier-thumb {
      display:block; width:100%; aspect-ratio:3/4; object-fit:contain;
      transform:rotateX(8deg) rotateY(-9deg); transform-style:preserve-3d;
      filter:
        drop-shadow(0 18px 26px #000000bb)
        drop-shadow(0 0 26px var(--tier-glow));
      animation:packFloat 6s ease-in-out infinite;
      transition:transform .4s cubic-bezier(.2,.9,.3,1), filter .4s;
    }
    @keyframes packFloat {
      0%,100% { transform:rotateX(8deg) rotateY(-9deg) translateY(0); }
      50%     { transform:rotateX(6deg) rotateY(-4deg) translateY(-10px); }
    }
    .booster-tier-card:hover .booster-tier-thumb {
      transform:rotateX(4deg) rotateY(0deg) translateY(-4px) scale(1.03);
      filter:drop-shadow(0 22px 30px #000000cc) drop-shadow(0 0 40px var(--tier-glow));
    }
    .booster-tier-pack::after {   /* reflet métallique qui glisse */
      content:""; position:absolute; inset:0; pointer-events:none; border-radius:12px;
      background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.16) 48%, transparent 58%);
      background-size:280% 280%; background-position:120% 0;
      transition:background-position 0s;
    }
    .booster-tier-card:hover .booster-tier-pack::after {
      background-position:-60% 0; transition:background-position 1.1s ease;
    }
    .booster-tier-pack::before { /* socle lumineux au sol */
      content:""; position:absolute; left:50%; bottom:-14px; width:66%; height:20px;
      transform:translateX(-50%); border-radius:50%;
      background:radial-gradient(ellipse, var(--tier-glow) 0%, transparent 72%); filter:blur(5px); opacity:.7;
    }

    .booster-tier-name {
      font-family:"Cinzel",serif; font-size:15px; letter-spacing:2.5px; text-transform:uppercase;
      color:var(--tier-col); text-shadow:0 0 16px var(--tier-glow); margin-bottom:3px;
    }
    .booster-tier-role {
      font-family:"Cormorant Garamond",serif; font-style:italic; font-size:13px; color:var(--text3);
      max-width:230px; margin:0 auto 14px; line-height:1.45; min-height:2.8em;
    }

    /* Prix : nombre monumental + unité discrète */
    .booster-tier-price {
      display:flex; align-items:baseline; justify-content:center; gap:8px; margin:0 0 4px;
    }
    .booster-tier-price .btp-num {
      font-family:"Cinzel",serif; font-size:40px; font-weight:700; line-height:1;
      color:var(--text); text-shadow:0 0 20px color-mix(in srgb, var(--tier-col) 40%, transparent);
      font-variant-numeric:tabular-nums;
    }
    .booster-tier-price .btp-unit {
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--text3);
    }
    .booster-tier-price .btp-star { font-size:13px; color:var(--tier-col); align-self:center; }
    .booster-tier-contains {
      font-family:"Cormorant Garamond",serif; font-style:italic; font-size:12.5px; color:var(--text3); margin-bottom:16px;
    }

    /* Bloc probabilités */
    .booster-odds {
      width:100%; margin:0 auto 20px; padding:14px 4px 4px;
      border-top:1px solid #2a2160; border-bottom:1px solid #2a2160;
    }
    .booster-odds-title {
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:3px; text-transform:uppercase;
      color:var(--violet3); margin-bottom:10px;
    }
    .booster-odds-row {
      display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:9px;
      padding:4px 6px; font-size:12.5px;
    }
    .booster-odds-row + .booster-odds-row { border-top:1px solid #ffffff08; }
    .booster-odds-dot {
      width:8px; height:8px; border-radius:50%; background:var(--r-col,#888);
      box-shadow:0 0 8px var(--r-col,#888); justify-self:center;
    }
    .booster-odds-row .bor-name { text-align:left; color:var(--text2); letter-spacing:.3px; }
    .booster-odds-row .bor-pct  { text-align:right; color:var(--text); font-family:"Cinzel",serif; font-size:12px; font-variant-numeric:tabular-nums; }
    .booster-odds-row.is-polaris .bor-name { color:var(--gold2); }
    .booster-odds-row.is-polaris .bor-pct  { color:var(--gold2); }
    .booster-odds-row.is-polaris .booster-odds-dot {
      background:radial-gradient(circle,#fff,#ffe6a8); box-shadow:0 0 10px #ffe6a8, 0 0 4px #fff;
    }

    /* Bouton d'acquisition */
    .booster-tier-buy {
      position:relative; width:100%; margin-top:auto; padding:14px 12px; border-radius:12px; cursor:pointer;
      background:linear-gradient(160deg, color-mix(in srgb, var(--tier-col) 16%, #0c0a22), #0c0a22);
      border:1px solid var(--tier-col); color:var(--text);
      font-family:"Cinzel",serif; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; font-weight:600;
      overflow:hidden; transition:transform .25s, box-shadow .25s, background .25s;
    }
    .booster-tier-buy::before { /* lumière qui parcourt la bordure au survol */
      content:""; position:absolute; inset:-2px; border-radius:12px; padding:1px; pointer-events:none;
      background:linear-gradient(90deg, transparent, var(--tier-col), transparent);
      background-size:220% 100%; background-position:120% 0;
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .25s;
    }
    .booster-tier-buy:hover {
      transform:translateY(-2px); background:linear-gradient(160deg, color-mix(in srgb, var(--tier-col) 26%, #0c0a22), #0c0a22);
      box-shadow:0 10px 24px -8px var(--tier-glow), 0 0 20px -4px var(--tier-glow);
    }
    .booster-tier-buy:hover::before { opacity:1; animation:btbSweep 1.1s linear infinite; }
    @keyframes btbSweep { to { background-position:-120% 0; } }
    .booster-tier-card.tier-super_rare .booster-tier-buy {
      border-color:#e6c260; box-shadow:0 0 0 1px #7a45c033, 0 8px 22px -10px #9060d066;
    }
    .booster-tier-card.tier-super_rare .booster-tier-buy:hover {
      box-shadow:0 12px 28px -8px #e6c26055, 0 0 22px -2px #9060d088;
    }
    .booster-tier-buy:disabled { opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; }
    .booster-tier-buy:disabled::before { display:none; }
    .booster-tier-buy .btb-sub { display:block; margin-top:4px; font-size:9px; letter-spacing:1.5px; color:var(--text3); }

    /* Compat — liste d'odds réutilisée par la fiche booster admin (openBoosterDetail) */
    .booster-tier-odds { margin:16px 0; text-align:left; font-size:13px; color:var(--text3); }
    .booster-tier-odds-row { display:flex; justify-content:space-between; padding:3px 0; }
    .booster-tier-odds-row b { color:var(--text2); font-weight:600; }

    @media (prefers-reduced-motion: reduce) {
      .booster-tier-thumb, .booster-tier-ring .brg-spin, .booster-balance-chip.pulse,
      .booster-tier-buy:hover::before { animation:none !important; }
      .booster-tier-thumb { transform:none; }
    }

    /* ── mobile : carrousel plein écran à défilement magnétique ── */
    .booster-shop-vp { position:relative; }
    .booster-shop-swipe { display:none; }
    @media (max-width:720px) {
      .tcg-booster-shop {
        grid-auto-flow:column; grid-template-columns:none;
        max-width:none; margin-inline:-18px; padding:6px 18px 18px; gap:16px;
        overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
      }
      .tcg-booster-shop::-webkit-scrollbar { display:none; }
      .booster-tier-card { scroll-snap-align:center; min-width:min(84vw,340px); }
      .booster-shop-dots { display:flex; justify-content:center; gap:7px; margin:2px 0 4px; }
      .booster-shop-dots i {
        width:6px; height:6px; border-radius:50%; background:#ffffff2a; transition:background .2s, transform .2s;
      }
      .booster-shop-dots i.on { background:var(--gold2); transform:scale(1.4); }
      /* Flèche « il y a d'autres boosters » sur le bord droit du carrousel. */
      .booster-shop-swipe {
        display:flex; align-items:center; gap:4px;
        position:absolute; right:4px; top:30%; transform:translateY(-50%);
        padding:6px 9px 6px 11px; border-radius:999px; pointer-events:none;
        font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:1px; text-transform:uppercase;
        color:#0a0720; font-weight:700; line-height:1;
        background:linear-gradient(135deg,#f0d878,#c9a84c);
        box-shadow:0 4px 16px rgba(0,0,0,.55), 0 0 18px rgba(232,201,122,.55);
        animation:bswSwipe 1.6s ease-in-out infinite;
        transition:opacity .3s ease;
      }
      .booster-shop-swipe > span { display:inline-block; }
      .booster-shop-vp.scrolled .booster-shop-swipe { opacity:0; }
    }
    @keyframes bswSwipe { 0%,100%{ transform:translateY(-50%) translateX(0); } 50%{ transform:translateY(-50%) translateX(-5px); } }
    @media (min-width:721px){ .booster-shop-dots { display:none; } }
    @media (prefers-reduced-motion:reduce){ .booster-shop-swipe { animation:none !important; } }
    .web3-collection-toolbar { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
    .nft-card-thumb { position:relative; }
    .nft-card-serial {
      position:absolute; bottom:8px; right:8px; font-family:"Cinzel",serif; font-size:10px; letter-spacing:1px;
      background:#00000088; color:var(--gold2); padding:3px 8px; border-radius:8px; border:1px solid var(--gold-dim);
    }

    /* ── Actions sur une carte de la collection (Vendre / Transmuter) ── */
    .nft-actions { display:flex; gap:8px; margin-top:10px; }
    .nft-act-btn {
      flex:1; padding:8px 6px; border-radius:8px; cursor:pointer; white-space:nowrap;
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700;
      background:transparent; border:1px solid var(--gold-dim); color:var(--gold2); transition:filter .15s, background .15s;
    }
    .nft-act-btn:hover { background:#c9a84c18; filter:brightness(1.1); }
    .nft-act-btn.transmute { border-color:#a878ff88; color:#c9a2ff; }
    .nft-act-btn.transmute:hover { background:#a878ff18; }
    .nft-act-btn:disabled { opacity:.45; cursor:not-allowed; filter:none; }
    .nft-status-badge {
      display:inline-block; margin-top:10px; font-size:10px; letter-spacing:1px; text-transform:uppercase;
      color:var(--text3); font-style:italic;
    }

    /* ── Modale de transmutation ── */
    .transmute-modal { text-align:center; padding:26px 22px; }
    .transmute-modal h3 {
      font-family:"Cinzel",serif; font-size:20px; letter-spacing:4px; color:#c9a2ff;
      text-shadow:0 0 18px #a878ff44; margin:0 0 18px;
    }
    .transmute-lines { max-width:340px; margin:0 auto 20px; text-align:left; }
    .transmute-lines .tl-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); font-size:14px; }
    .transmute-lines .tl-row:last-child { border-bottom:none; }
    .transmute-lines .tl-row b { color:var(--gold2); }
    .transmute-lines .tl-row.payout b { color:#8ce0a8; font-size:16px; }
    .transmute-warn { color:#ff9d6a; font-size:12.5px; font-style:italic; margin:0 0 22px; }
    .transmute-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
    .transmute-actions button {
      padding:12px 26px; border-radius:10px; cursor:pointer;
      font-family:"Cinzel",serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:700;
    }
    .transmute-actions .tm-cancel { background:transparent; border:1px solid var(--border); color:var(--text2); }
    .transmute-actions .tm-go { background:linear-gradient(135deg,#7a4fd0,#a878ff); border:none; color:#0a0714; }
    .transmute-actions .tm-go:disabled { opacity:.5; cursor:not-allowed; }
    .transmute-confirm2 { margin:18px auto 0; max-width:320px; }
    .transmute-confirm2 p { font-size:12.5px; color:#ff9d6a; margin:0 0 8px; }
    .transmute-confirm2 input {
      width:100%; background:#08061aaa; border:1px solid var(--border); border-radius:10px;
      padding:10px 14px; color:var(--text); font-family:"Cinzel",serif; font-size:13px; letter-spacing:3px;
      text-transform:uppercase; text-align:center; outline:none;
    }

    /* ═══════════════════════════════════════════════════════════════
       EMPORIUM — Grand marché des Archives Akashiques (refonte 2026-08-31)
       Temple antique × hôtel des ventes × Web 3.0 × alchimie.
       Tout est scopé sous #panelEmporium.
    ═══════════════════════════════════════════════════════════════ */
    #panelEmporium { position:relative; z-index:1; }

    /* ── Navigation Web3 principale (NFT · EMPORIUM · Wallet) — compacte et cohérente ── */
    #panelWeb3 .subtab-bar {
      gap:6px; padding:6px; margin:0 auto 28px; max-width:max-content;
      background:linear-gradient(180deg,#0f0b2c,#0a0820);
      border:1px solid var(--border); border-radius:16px;
      box-shadow:inset 0 2px 10px #00000055, 0 6px 20px #00000040;
    }
    #panelWeb3 .subtab-bar .subtab-btn {
      background:linear-gradient(160deg,#161232,#100c28); border:1px solid #ffffff0d;
      color:var(--text3); padding:9px 20px; border-radius:11px; letter-spacing:2px;
      box-shadow:none; transition:color .24s, background .24s, border-color .24s, box-shadow .24s;
    }
    #panelWeb3 .subtab-bar .subtab-btn:hover {
      color:var(--gold2); border-color:#7a45c066;
      background:linear-gradient(160deg,#1c1642,#141036); box-shadow:0 0 16px #6040a033;
    }
    #panelWeb3 .subtab-bar .subtab-btn.active {
      color:var(--gold3); border-color:#c9a84c66;
      background:linear-gradient(160deg,#241a55,#1a1240);
      box-shadow:0 0 18px #c9a84c33, inset 0 1px 0 #ffffff14;
    }

    /* ── Couche d'ambiance : profondeur, halos, particules, glyphes ── */
    .emp-ambient { position:absolute; inset:-46px -16px -22px; z-index:-1; pointer-events:none; overflow:hidden; }
    .emp-ambient::before {
      content:""; position:absolute; inset:0;
      background:
        radial-gradient(ellipse 58% 42% at 50% 3%, #9060d033 0%, transparent 62%),
        radial-gradient(circle 30% 30% at 12% 22%, #c9a84c16 0%, transparent 60%),
        radial-gradient(circle 34% 34% at 88% 30%, #7a45c01e 0%, transparent 60%),
        radial-gradient(ellipse 120% 70% at 50% 122%, #250c3d55 0%, transparent 72%),
        radial-gradient(ellipse 150% 100% at 50% 40%, transparent 44%, #02010acc 100%);
    }
    .emp-ambient::after {  /* faisceau de lumière volumétrique très discret */
      content:""; position:absolute; top:-40px; left:50%; width:340px; height:60%;
      transform:translateX(-50%) rotate(2deg);
      background:linear-gradient(180deg, #e8c97a10 0%, transparent 72%);
      filter:blur(20px); opacity:.5;
    }
    #empStardust { position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
    .emp-glyphs {
      position:absolute; inset:0;
      background:
        radial-gradient(circle at 8% 60%, transparent 46%, #c9a84c22 47%, transparent 49%) 0 0 / 120px 120px,
        radial-gradient(circle at 92% 12%, transparent 46%, #7a45c022 47%, transparent 49%) 0 0 / 160px 160px;
      opacity:.25; mix-blend-mode:screen;
    }

    /* ── Hero : temple marchand × institution Web3 × cosmos (compact) ── */
    .emp-hero {
      position:relative; text-align:center; padding:20px 30px 16px;
      max-width:1040px; margin:0 auto;
      background:linear-gradient(180deg, #130e34cc 0%, #0a0720cc 100%);
      border:1px solid #c9a84c3d; border-radius:16px 16px 0 0; overflow:hidden;
      backdrop-filter:blur(9px) saturate(1.08);
      box-shadow:0 20px 54px #00000077, 0 0 30px #6040a01c, inset 0 1px 0 #f8efc01e;
    }
    .emp-hero::before {  /* seconde bordure intérieure extrêmement fine */
      content:""; position:absolute; inset:6px; border:1px solid #ffffff0c; border-radius:11px; pointer-events:none;
    }
    /* Composition 2 colonnes sur desktop : identité (temple + wordmark) | institution (stats + solde) */
    .emp-hero-inner {
      position:relative; display:flex; align-items:center; justify-content:center; gap:36px; text-align:center;
    }
    .emp-hero-main { position:relative; flex:0 1 460px; min-width:0; }
    .emp-hero-side {
      flex:0 0 300px; display:flex; flex-direction:column; align-items:center; gap:13px;
      padding-left:36px; border-left:1px solid #c9a84c26;
    }
    .emp-hero-side > * { margin:0; }
    .emp-hero-side .emp-balance-card, .emp-hero-side .emp-balance-panel { width:100%; max-width:280px; }
    @media (max-width:860px) {
      .emp-hero-inner { flex-direction:column; gap:15px; }
      .emp-hero-main { flex:none; width:100%; }
      .emp-hero-side {
        flex:none; width:100%; padding-left:0; border-left:none;
        border-top:1px solid #c9a84c22; padding-top:15px;
      }
    }
    /* ornements d'angle — architecture antique minimaliste (remplace les grandes lignes) */
    .emp-hero-orn { position:absolute; inset:0; pointer-events:none; }
    .emp-hero-orn i { position:absolute; width:15px; height:15px; border:1px solid #c9a84c4d; }
    .emp-hero-orn i:nth-child(1) { top:10px; left:10px; border-right:0; border-bottom:0; }
    .emp-hero-orn i:nth-child(2) { top:10px; right:10px; border-left:0; border-bottom:0; }
    .emp-hero-orn i:nth-child(3) { bottom:10px; left:10px; border-right:0; border-top:0; }
    .emp-hero-orn i:nth-child(4) { bottom:10px; right:10px; border-left:0; border-top:0; }
    /* aura : halo doré + lumière violette + cercles géométriques très fins */
    .emp-hero-aura {
      position:absolute; top:8px; left:50%; transform:translateX(-50%);
      width:320px; height:186px; pointer-events:none;
      background:
        radial-gradient(ellipse 48% 55% at 50% 42%, #c9a84c24 0%, transparent 66%),
        radial-gradient(ellipse 72% 62% at 50% 56%, #7a45c01f 0%, transparent 72%);
    }
    .emp-hero-aura::before {
      content:""; position:absolute; top:50%; left:50%; width:142px; height:142px;
      transform:translate(-50%,-54%); border:1px solid #c9a84c2b; border-radius:50%;
    }
    .emp-hero-aura::after {
      content:""; position:absolute; top:50%; left:50%; width:188px; height:188px;
      transform:translate(-50%,-54%); border:1px solid #ffffff0c; border-radius:50%;
    }
    .emp-hero-temple {
      position:relative; display:block; width:118px; max-width:52%; margin:2px auto 8px;
      color:var(--gold2); filter:drop-shadow(0 0 12px #c9a84c33);
      animation:empTempleGlow 7.5s ease-in-out infinite;
    }
    @keyframes empTempleGlow {
      0%,100% { filter:drop-shadow(0 0 9px #c9a84c2e); }
      50%     { filter:drop-shadow(0 0 20px #c9a84c52); }
    }
    .emp-hero-title {
      position:relative; font-family:"Cinzel Decorative","Cinzel",serif; font-weight:700; font-size:26px;
      letter-spacing:10px; margin-left:10px;
      background:linear-gradient(135deg,#a07020 0%,#e8c97a 42%,#f8efc0 58%,#c9a84c 78%,#7a5410 100%);
      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
      filter:drop-shadow(0 2px 12px #c9a84c3a);
    }
    .emp-hero-sub {
      position:relative; font-size:15px; color:#d9cee8; font-style:italic;
      max-width:430px; margin:7px auto 0; line-height:1.5; letter-spacing:.3px;
    }

    /* ── Solde : petite carte financière premium ── */
    .emp-hero-stats {
      position:relative; display:flex; flex-wrap:wrap; gap:7px 0; justify-content:center;
      margin:12px auto 2px; max-width:500px;
    }
    .emp-hero-stats[hidden] { display:none; }
    .emp-hero-stats .ehs {
      display:inline-flex; align-items:baseline; gap:6px;
      font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:2px; text-transform:uppercase; color:var(--text3);
    }
    .emp-hero-stats .ehs b {
      font-family:"Cormorant Garamond",serif; font-weight:700; font-size:14px; letter-spacing:.3px;
      color:var(--gold2); text-transform:none;
    }
    .emp-hero-stats .ehs + .ehs { margin-left:18px; }
    .emp-hero-stats .ehs + .ehs::before { content:"•"; color:var(--gold-dim); margin-right:18px; align-self:center; }

    .emp-balance-card {
      position:relative; margin:14px auto 0; display:inline-flex; flex-direction:column; align-items:center; gap:1px;
      padding:9px 26px 8px; border-radius:14px; cursor:pointer; min-width:172px;
      background:linear-gradient(160deg,#17123c 0%,#241a55 65%,#191140 100%);
      border:1px solid #c9a84c4a; font-family:"Cinzel",serif;
      box-shadow:0 8px 24px #00000066, inset 0 1px 0 #ffffff14;
      transition:border-color .22s, box-shadow .22s, transform .22s;
    }
    .emp-balance-card::before {
      content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none; opacity:0;
      background:linear-gradient(120deg, transparent 34%, #f8efc030 50%, transparent 66%);
      transition:opacity .3s;
    }
    .emp-balance-card::after {
      content:"▾"; position:absolute; right:11px; top:11px; font-size:8px; color:var(--text3); transition:transform .2s;
    }
    .emp-balance-card:hover { border-color:var(--gold2); box-shadow:0 10px 30px #00000077, 0 0 24px #c9a84c38; transform:translateY(-1px); }
    .emp-balance-card:hover::before { opacity:1; }
    .emp-balance-card.open::after { transform:rotate(180deg); }
    .ebc-label { font-size:8px; letter-spacing:2.5px; text-transform:uppercase; color:var(--text3); }
    .ebc-value {
      font-family:"Cormorant Garamond",serif; font-weight:700; font-size:23px; line-height:1.15;
      color:var(--gold3); letter-spacing:.4px; text-shadow:0 0 16px #c9a84c3d;
    }
    .ebc-unit { font-size:8.5px; letter-spacing:3px; text-transform:uppercase; color:var(--gold-dim); }

    .emp-balance-panel {
      position:relative; max-width:330px; margin:10px auto 0; padding:4px 16px;
      background:#0a0722ee; border:1px solid #c9a84c33; border-radius:12px;
      animation:empFade .22s ease;
    }
    .emp-balance-panel[hidden] { display:none; }
    .ebp-row { display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid #ffffff0e; font-size:12.5px; color:var(--text2); }
    .ebp-row:last-child { border-bottom:none; }
    .ebp-row b { color:var(--gold2); font-family:"Cormorant Garamond",serif; font-weight:700; font-size:14px; }
    @keyframes empFade { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

    /* ── Barre de vues : rattachée visuellement au hero, avec indicateur glissant ── */
    .emp-nav {
      position:relative; display:flex; gap:4px; flex-wrap:nowrap; justify-content:center;
      max-width:1040px; margin:0 auto 24px; padding:9px 10px 12px; overflow-x:auto; scrollbar-width:none;
      background:linear-gradient(180deg,#100c2ccc 0%,#0b0822b0 100%);
      border:1px solid #c9a84c2b; border-top:1px solid #c9a84c17;
      border-radius:0 0 16px 16px; backdrop-filter:blur(7px);
      box-shadow:0 16px 40px #0000004d;
    }
    .emp-nav::-webkit-scrollbar { display:none; }
    .emp-nav-ind {
      position:absolute; bottom:6px; left:0; height:2px; width:0; border-radius:2px; opacity:0;
      background:linear-gradient(90deg, transparent, #e8c97a, transparent);
      transition:transform .32s cubic-bezier(.4,.05,.2,1), width .32s cubic-bezier(.4,.05,.2,1), opacity .3s;
      pointer-events:none;
    }
    .emp-nav-btn {
      padding:9px 15px; border-radius:10px; cursor:pointer; white-space:nowrap;
      background:transparent; border:1px solid #ffffff0d; color:var(--text3);
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:2px; text-transform:uppercase;
      transition:color .2s, background .2s, border-color .2s;
    }
    .emp-nav-btn:hover { color:var(--gold2); border-color:#7a45c055; background:#1a1440; }
    .emp-nav-btn.active {
      color:var(--gold3); border-color:#c9a84c55;
      background:linear-gradient(160deg,#241a55,#1a1240); box-shadow:inset 0 1px 0 #ffffff12;
    }

    .emp-view { display:none; }
    .emp-view.active { display:block; animation:empFade .25s ease; }

    /* ── Toolbar / filtres ── */
    .emp-toolbar-bar { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; }
    .emp-toolbar-bar select {
      background:linear-gradient(160deg,#12102e,#0a0820); border:1px solid #c9a84c33; border-radius:10px;
      padding:9px 34px 9px 14px; color:var(--text); font-family:"Cinzel",serif; font-size:10px;
      letter-spacing:1.5px; text-transform:uppercase; outline:none; cursor:pointer;
      box-shadow:inset 0 2px 8px #00000055, inset 0 1px 0 #6040a014;
      -webkit-appearance:none; appearance:none;
      background-image:linear-gradient(160deg,#12102e,#0a0820), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%23e8c97a' stroke-width='1.6'/></svg>");
      background-repeat:no-repeat, no-repeat;
      background-position:center, right 13px center;
    }
    .emp-toolbar-bar select:focus { border-color:var(--gold-dim); box-shadow:0 0 0 3px #c9a84c1c; }
    .emp-toolbar-bar select option { background:#14102c; color:var(--text); }
    .emp-filters-toggle {
      display:none; align-items:center; gap:8px; padding:9px 16px; border-radius:10px; cursor:pointer;
      background:#12102e; border:1px solid #c9a84c44; color:var(--gold2);
      font-family:"Cinzel",serif; font-size:11px; letter-spacing:1.5px;
    }
    .emp-result-count { font-size:11px; color:var(--text3); font-style:italic; letter-spacing:.5px; }
    .emp-filters {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:22px;
      padding:16px; border:1px solid #c9a84c22; border-radius:14px;
      background:linear-gradient(180deg,#0f0b2caa,#0a0820aa); backdrop-filter:blur(5px);
    }
    .emp-filters input, .emp-filters select {
      width:100%; background:#08061acc; border:1px solid var(--border); border-radius:9px; padding:9px 12px;
      color:var(--text); font-family:"Cormorant Garamond",serif; font-size:14px; outline:none;
    }
    .emp-filters select {
      -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:30px;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%23e8c97a' stroke-width='1.6'/></svg>");
      background-repeat:no-repeat; background-position:right 11px center;
    }
    .emp-filters input:focus, .emp-filters select:focus { border-color:var(--gold-dim); box-shadow:0 0 0 3px #c9a84c1c; }
    .emp-filters select option { background:#14102c; color:var(--text); }
    .emp-filters .emp-f-check { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text3); font-family:"Cinzel",serif; letter-spacing:.5px; }
    .emp-filters .emp-f-check input { width:auto; }
    .emp-filters .emp-f-reset {
      background:transparent; border:1px solid var(--border); color:var(--text3); cursor:pointer;
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; border-radius:9px;
    }
    .emp-filters .emp-f-reset:hover { color:var(--gold2); border-color:#c9a84c55; }
    .emp-filters-close { display:none; }

    /* ── Grille + cartes-reliques ── */
    .emp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:20px; }
    .emp-card {
      --emp-aura:#9098b0;
      position:relative; display:flex; flex-direction:column; border-radius:15px; overflow:hidden;
      background:linear-gradient(165deg,#100c2e 0%,#0a0820 100%);
      border:1px solid #ffffff12; cursor:pointer;
      transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
      box-shadow:0 10px 34px #00000077, inset 0 1px 0 #ffffff0e;
      transform-style:preserve-3d;
    }
    /* Mise en avant POLARIS (33,33 €) — annonce d'un vendeur POLARIS */
    .emp-card-polaris { border-color:rgba(160,110,240,.55); box-shadow:0 10px 34px #00000077, 0 0 30px rgba(140,70,240,.2); }
    .emp-card-polaris-ribbon {
      position:absolute; top:8px; left:8px; z-index:3;
      font-family:"Cinzel",serif; font-size:7.5px; letter-spacing:1.5px;
      padding:2px 8px; border-radius:7px; color:#f0e0ff;
      background:linear-gradient(135deg,#5020a0,#9030d0); box-shadow:0 2px 10px rgba(0,0,0,.5);
    }
    .emp-card::after {  /* liseré d'aura par rareté */
      content:""; position:absolute; inset:0; border-radius:15px; pointer-events:none;
      border:1px solid color-mix(in srgb, var(--emp-aura) 55%, transparent);
      box-shadow:inset 0 0 22px color-mix(in srgb, var(--emp-aura) 16%, transparent);
    }
    .emp-card:hover {
      transform:translateY(-6px); border-color:color-mix(in srgb, var(--emp-aura) 60%, transparent);
      box-shadow:0 20px 60px #000000aa, 0 0 34px color-mix(in srgb, var(--emp-aura) 30%, transparent);
    }
    .emp-card-media { position:relative; aspect-ratio:3/4; background:#050310; overflow:hidden; }
    .emp-card-media img { width:100%; height:100%; object-fit:contain; transition:transform .4s; }
    .emp-card:hover .emp-card-media img { transform:scale(1.04); }
    .emp-card-media .emp-noimg { display:flex; width:100%; height:100%; align-items:center; justify-content:center; font-size:44px; opacity:.25; }
    .emp-card-sheen {  /* reflet holographique / doré au survol */
      position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
      background:linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--emp-aura) 30%, #f8efc0) 47%, transparent 62%);
      mix-blend-mode:screen; transform:translateX(-30%);
    }
    .emp-card:hover .emp-card-sheen { opacity:.5; animation:empSheen 1.1s ease forwards; }
    @keyframes empSheen { to { transform:translateX(30%); } }
    .emp-card-glyph {
      position:absolute; top:8px; left:8px; font-size:11px; color:var(--emp-aura);
      opacity:.7; text-shadow:0 0 8px currentColor;
    }
    .emp-card-serial {
      position:absolute; bottom:8px; right:8px; font-family:"Cinzel",serif; font-size:10px; letter-spacing:1px;
      background:#00000099; color:var(--gold2); padding:3px 8px; border-radius:8px; border:1px solid #c9a84c55;
    }
    .emp-card-body { padding:14px 14px 15px; display:flex; flex-direction:column; flex:1; }
    .emp-card-rarity {
      align-self:flex-start; font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:2.5px; text-transform:uppercase;
      padding:3px 9px; border-radius:11px; margin-bottom:8px;
      color:var(--emp-aura); border:1px solid color-mix(in srgb, var(--emp-aura) 55%, transparent);
      background:color-mix(in srgb, var(--emp-aura) 12%, transparent);
    }
    .emp-card-name { font-family:"Cinzel",serif; font-size:15px; color:var(--text); line-height:1.3; }
    .emp-card-sub { font-size:11px; color:var(--text3); font-style:italic; margin-top:2px; }
    .emp-card-line { font-size:10.5px; color:var(--text3); margin-top:6px; letter-spacing:.3px; }
    .emp-card-price {
      font-family:"Cinzel",serif; font-size:17px; color:var(--gold2); margin:10px 0 3px; letter-spacing:1px;
      text-shadow:0 0 14px #c9a84c33;
    }
    .emp-card-price span { font-size:9px; color:var(--text3); letter-spacing:2px; }
    .emp-card-seller { font-size:10.5px; color:var(--text3); margin-bottom:11px; }
    .emp-card-cta {
      margin-top:auto; width:100%; padding:10px; border-radius:9px; cursor:pointer; white-space:nowrap;
      background:transparent; border:1px solid #c9a84c55; color:var(--gold2);
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; font-weight:700;
      transition:all .16s;
    }
    .emp-card-cta:hover { background:#c9a84c18; border-color:var(--gold2); }
    .emp-card-status { margin-top:auto; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--text3); font-style:italic; padding-top:6px; }

    /* Raretés — aura + intensité (élégant, jamais casino) */
    .emp-card[data-rarity="commun"]      { --emp-aura:#9098b0; }
    .emp-card[data-rarity="rare"]        { --emp-aura:#5aa8ff; }
    .emp-card[data-rarity="superrare"]   { --emp-aura:#3ddc84; }
    .emp-card[data-rarity="mythique"]    { --emp-aura:#ff6a3a; }
    .emp-card[data-rarity="legendaire"]  { --emp-aura:#ffb84a; }
    .emp-card[data-rarity="primordiale"] { --emp-aura:#c99aff; }
    .emp-card[data-rarity="polaristar"]  { --emp-aura:#f8efc0; }
    .emp-card[data-rarity="primordiale"]::after,
    .emp-card[data-rarity="polaristar"]::after { border-width:1.5px; box-shadow:inset 0 0 30px color-mix(in srgb, var(--emp-aura) 24%, transparent); }
    .emp-card[data-rarity="polaristar"] .emp-card-media::before {
      content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
      background:radial-gradient(circle at 50% 35%, #f8efc020 0%, transparent 60%);
    }

    /* ── État vide immersif ── */
    .emp-empty { text-align:center; padding:56px 20px 64px; }
    .emp-empty-altar { width:150px; margin:0 auto 8px; display:block; color:var(--gold-dim); }
    .emp-empty-beam {
      width:2px; height:70px; margin:0 auto 18px;
      background:linear-gradient(180deg, #f8efc077, transparent);
      filter:blur(.4px); box-shadow:0 0 22px 4px #e8c97a44;
    }
    .emp-empty h4 { font-family:"Cinzel",serif; font-size:16px; letter-spacing:2px; color:var(--gold2); margin-bottom:8px; }
    .emp-empty p { font-size:13px; color:var(--text3); font-style:italic; max-width:360px; margin:0 auto 20px; line-height:1.7; }
    .emp-empty-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
    .emp-empty-actions button {
      padding:10px 20px; border-radius:9px; cursor:pointer;
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
      background:transparent; border:1px solid #c9a84c55; color:var(--gold2); transition:all .16s;
    }
    .emp-empty-actions button:hover { background:#c9a84c18; }

    /* ── Activité ── */
    .emp-chips { display:flex; gap:8px; justify-content:center; margin-bottom:18px; flex-wrap:wrap; }
    .emp-chip {
      padding:6px 14px; border-radius:999px; cursor:pointer;
      background:transparent; border:1px solid var(--border); color:var(--text3);
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:2px; text-transform:uppercase; transition:all .15s;
    }
    .emp-chip.active { color:var(--gold2); border-color:#c9a84c66; background:#c9a84c14; }
    .emp-feed { max-width:560px; margin:0 auto; }
    .emp-feed-row {
      display:flex; align-items:center; gap:12px; padding:10px 14px; margin-bottom:7px;
      border:1px solid #ffffff10; border-radius:10px; background:#0d0a26aa; font-size:13px;
    }
    .emp-feed-row .efr-kind { font-size:12px; width:16px; text-align:center; }
    .emp-feed-row .efr-kind.sale { color:#8ce0a8; }
    .emp-feed-row .efr-kind.listing { color:var(--violet3); }
    .emp-feed-row .efr-title { color:var(--text2); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .emp-feed-row .efr-price { color:var(--gold2); font-family:"Cinzel",serif; white-space:nowrap; }
    .emp-feed-row .efr-time { color:var(--text3); font-size:11px; white-space:nowrap; }

    /* ── Collections ── */
    .emp-coll-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
    .emp-coll-card {
      border:1px solid #c9a84c2e; border-radius:14px; overflow:hidden; cursor:pointer;
      background:linear-gradient(165deg,#100c2e,#0a0820); transition:all .2s;
      box-shadow:0 10px 30px #00000066;
    }
    .emp-coll-card:hover { border-color:#c9a84c66; transform:translateY(-4px); box-shadow:0 18px 44px #00000088, 0 0 26px #c9a84c22; }
    .emp-coll-cover { aspect-ratio:16/10; background:#050310; display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .emp-coll-cover img { width:100%; height:100%; object-fit:cover; }
    .emp-coll-cover .emp-noimg { font-size:34px; opacity:.25; }
    .emp-coll-body { padding:14px; }
    .emp-coll-name { font-family:"Cinzel",serif; font-size:14px; color:var(--gold2); letter-spacing:1px; margin-bottom:10px; }
    .emp-coll-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
    .emp-coll-stat { font-size:10px; color:var(--text3); letter-spacing:.3px; }
    .emp-coll-stat b { display:block; font-family:"Cinzel",serif; font-size:13px; color:var(--text); margin-top:2px; }
    .emp-coll-back {
      background:transparent; border:1px solid var(--border); color:var(--text3); cursor:pointer;
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:1.5px; padding:7px 14px; border-radius:8px; margin-bottom:18px;
    }
    .emp-coll-back:hover { color:var(--gold2); border-color:#c9a84c55; }
    .emp-coll-header { text-align:center; margin-bottom:22px; }
    .emp-coll-header h4 { font-family:"Cinzel",serif; font-size:20px; letter-spacing:3px; color:var(--gold2); margin-bottom:12px; }
    .emp-coll-header-stats { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }
    .emp-coll-header-stats div { font-size:10px; color:var(--text3); letter-spacing:1px; text-transform:uppercase; }
    .emp-coll-header-stats b { display:block; font-family:"Cinzel",serif; font-size:16px; color:var(--gold2); margin-top:3px; }

    /* ── Mes ventes ── */
    .emp-sales-section { margin-bottom:26px; }
    .emp-sales-section h4 {
      font-family:"Cinzel",serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--gold2);
      margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid #c9a84c22;
    }
    .emp-sales-total {
      text-align:center; padding:18px; margin-bottom:24px; border-radius:14px;
      background:linear-gradient(135deg,#1a1240,#241a55); border:1px solid #c9a84c40;
    }
    .emp-sales-total span { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--text3); }
    .emp-sales-total b { display:block; font-family:"Cinzel",serif; font-size:26px; color:var(--gold2); margin-top:6px; text-shadow:0 0 18px #c9a84c33; }
    .emp-sales-row {
      display:flex; align-items:center; gap:12px; padding:11px 14px; margin-bottom:8px;
      border:1px solid #ffffff10; border-radius:10px; background:#0d0a26aa; font-size:13px;
    }
    .emp-sales-row img { width:38px; height:50px; object-fit:contain; border-radius:5px; background:#050310; flex-shrink:0; }
    .emp-sales-row .esr-main { flex:1; min-width:0; }
    .emp-sales-row .esr-title { color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .emp-sales-row .esr-meta { font-size:11px; color:var(--text3); }
    .emp-sales-row .esr-price { color:var(--gold2); font-family:"Cinzel",serif; white-space:nowrap; }
    .emp-sales-row .esr-btn {
      background:transparent; border:1px solid var(--border); color:var(--text3); cursor:pointer;
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:1px; text-transform:uppercase; padding:6px 10px; border-radius:7px;
    }
    .emp-sales-row .esr-btn:hover { color:var(--gold2); border-color:#c9a84c55; }

    /* ── Fiche d'actif (dans #contentModal) ── */
    .eas { padding:0 0 28px; }
    .eas-hero {
      position:relative; padding:30px 24px 22px; text-align:center;
      background:radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--emp-aura,#c9a84c) 22%, transparent) 0%, transparent 62%);
    }
    .eas-visual {
      width:min(300px,68vw); aspect-ratio:3/4; margin:0 auto 16px; border-radius:14px; overflow:hidden;
      background:#050310; border:1.5px solid color-mix(in srgb, var(--emp-aura,#c9a84c) 55%, transparent);
      box-shadow:0 0 50px color-mix(in srgb, var(--emp-aura,#c9a84c) 26%, transparent), 0 24px 60px #000000cc;
    }
    .eas-visual img { width:100%; height:100%; object-fit:contain; }
    .eas-name { font-family:"Cinzel",serif; font-size:22px; color:var(--gold2); letter-spacing:1px; text-shadow:0 0 20px #c9a84c33; }
    .eas-sub { font-size:12.5px; color:var(--text3); font-style:italic; margin-top:4px; }
    .eas-rarity {
      display:inline-block; margin-top:10px; font-family:"Cinzel",serif; font-size:9px; letter-spacing:3px; text-transform:uppercase;
      padding:4px 12px; border-radius:12px;
      color:var(--emp-aura,#c9a84c); border:1px solid color-mix(in srgb, var(--emp-aura,#c9a84c) 55%, transparent);
      background:color-mix(in srgb, var(--emp-aura,#c9a84c) 12%, transparent);
    }
    .eas-panel { margin:16px 24px 0; padding:16px 18px; border:1px solid #c9a84c22; border-radius:13px; background:#0b0824aa; }
    .eas-panel-title { font-family:"Cinzel",serif; font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold2); margin-bottom:12px; }
    .eas-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 16px; }
    .eas-grid > div { min-width:0; }
    .eas-grid dt { font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text3); margin-bottom:3px; }
    .eas-grid dd { font-size:13px; color:var(--text2); word-break:break-word; }
    .eas-grid dd.gold { color:var(--gold2); font-family:"Cinzel",serif; }
    .eas-grid dd.soon { color:var(--text3); font-style:italic; }
    .eas-market { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
    .eas-market .emm { padding:10px 12px; border-radius:10px; background:#12102e; border:1px solid #ffffff0e; }
    .eas-market .emm span { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text3); }
    .eas-market .emm b { display:block; font-family:"Cinzel",serif; font-size:15px; color:var(--gold2); margin-top:4px; }
    .eas-disclaimer { font-size:10.5px; color:var(--text3); font-style:italic; margin-top:12px; line-height:1.6; }
    .eas-timeline { list-style:none; margin:0; padding:0; }
    .eas-timeline li { position:relative; padding:0 0 16px 20px; border-left:1px solid #c9a84c33; }
    .eas-timeline li:last-child { border-left-color:transparent; padding-bottom:0; }
    .eas-timeline li::before { content:""; position:absolute; left:-4px; top:3px; width:7px; height:7px; border-radius:50%; background:var(--gold2); box-shadow:0 0 8px #c9a84c88; }
    .eas-tl-date { font-size:10px; color:var(--text3); letter-spacing:.5px; }
    .eas-tl-event { font-size:13px; color:var(--text2); margin-top:2px; }
    .eas-tl-event b { color:var(--gold2); font-family:"Cinzel",serif; }
    .eas-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:22px 24px 0; }
    .eas-actions button {
      padding:12px 24px; border-radius:10px; cursor:pointer;
      font-family:"Cinzel",serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; font-weight:700;
    }
    .eas-actions .eas-buy { background:linear-gradient(135deg,#b9962f,#e9c86a); border:none; color:#0a0714; }
    .eas-actions .eas-buy:disabled { opacity:.5; cursor:not-allowed; }
    .eas-actions .eas-sec { background:transparent; border:1px solid #c9a84c55; color:var(--gold2); }
    .eas-actions .eas-sec.transmute { border-color:#a878ff77; color:#c9a2ff; }
    .eas-fold { margin:16px 24px 0; }
    .eas-fold summary { cursor:pointer; font-family:"Cinzel",serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--text3); padding:10px 0; }
    .eas-fold summary:hover { color:var(--gold2); }

    /* ── Achat : animation + écran « Actif acquis » ── */
    #empAcquireOverlay {
      position:fixed; inset:0; z-index:820; display:none; align-items:center; justify-content:center;
      background:#02010af2; backdrop-filter:blur(12px); text-align:center; padding:20px;
    }
    #empAcquireOverlay.open { display:flex; }
    .empacq-box { max-width:360px; animation:empFade .3s ease; }
    .empacq-visual {
      width:200px; aspect-ratio:3/4; margin:0 auto 20px; border-radius:14px; overflow:hidden; background:#050310;
      border:2px solid var(--emp-aura,#c9a84c);
      box-shadow:0 0 60px 8px color-mix(in srgb, var(--emp-aura,#c9a84c) 45%, transparent), 0 20px 50px #000000cc;
    }
    .empacq-visual img { width:100%; height:100%; object-fit:contain; }
    .empacq-visual.leaving { animation:empAcqLeave 1s cubic-bezier(.5,0,.75,1) forwards; }
    @keyframes empAcqLeave {
      0% { transform:translateY(0) scale(1); opacity:1; filter:brightness(1); }
      45% { transform:translateY(-10px) scale(1.06); opacity:1; filter:brightness(1.8); }
      100% { transform:translateY(-40px) scale(.5); opacity:0; filter:brightness(3); }
    }
    .empacq-title { font-family:"Cinzel",serif; font-size:20px; letter-spacing:4px; color:var(--gold2); text-shadow:0 0 20px #c9a84c44; }
    .empacq-sub { font-size:12.5px; color:var(--text3); font-style:italic; margin-top:8px; }
    .empacq-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
    .empacq-actions button {
      padding:11px 22px; border-radius:9px; cursor:pointer;
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; font-weight:700;
    }
    .empacq-actions .ea-go { background:linear-gradient(135deg,#b9962f,#e9c86a); border:none; color:#0a0714; }
    .empacq-actions .ea-back { background:transparent; border:1px solid var(--border); color:var(--text2); }

    /* ── Bouton VENDRE sur les cartes de la collection (à côté de Transmuter) ── */
    .nft-act-btn.sell { border-color:#c9a84c88; color:var(--gold2); }
    .nft-act-btn.sell:hover { background:#c9a84c18; }

    /* ── Responsive EMPORIUM ── */
    @media (max-width:1024px) {
      #panelWeb3 .subtab-bar { max-width:none; width:100%; overflow-x:auto; scrollbar-width:none; justify-content:flex-start; }
      #panelWeb3 .subtab-bar::-webkit-scrollbar { display:none; }
    }
    @media (max-width:760px) {
      .emp-hero { padding:16px 14px 14px; }
      .emp-hero-temple { width:94px; margin:0 auto 7px; }
      .emp-hero-title { font-size:21px; letter-spacing:7px; margin-left:7px; }
      .emp-hero-sub { font-size:13px; max-width:300px; }
      .emp-hero-aura { width:230px; height:150px; }
      .emp-hero-stats { gap:5px 0; }
      .emp-hero-stats .ehs { font-size:7.5px; }
      .emp-hero-stats .ehs b { font-size:12.5px; }
      .emp-hero-stats .ehs + .ehs { margin-left:12px; }
      .emp-hero-stats .ehs + .ehs::before { margin-right:12px; }
      .emp-balance-card { min-width:0; width:100%; max-width:260px; }
      .emp-nav { justify-content:flex-start; padding:8px 8px 11px; }
      .emp-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
      .emp-card-media { aspect-ratio:4/5; }
      .emp-card-body { padding:11px 11px 12px; }
      .emp-card-price { font-size:14px; margin:8px 0 2px; }
      .emp-card-price span { display:block; margin-top:1px; }
      .emp-card-name { font-size:12.5px; }
      .emp-card-sub, .emp-card-seller { font-size:10px; }
      .emp-card-name { font-size:13px; }
      .emp-card-price { font-size:15px; }
      .emp-filters-toggle { display:inline-flex; }
      #empView-marche .emp-filters { display:none; grid-template-columns:1fr 1fr; }
      #empView-marche .emp-filters.open { display:grid; animation:empFade .2s ease; }
      .emp-filters-close {
        display:block; grid-column:1/-1; background:transparent; border:none; color:var(--text3);
        font-family:"Cinzel",serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; padding:4px 0 8px;
      }
      .emp-coll-grid { grid-template-columns:1fr 1fr; gap:12px; }
      .eas-grid, .eas-market { grid-template-columns:1fr; }
    }
    @keyframes empSheetUp { from { transform:translateY(100%); } to { transform:none; } }
    @media (prefers-reduced-motion:reduce) {
      #empStardust { display:none; }
      .emp-card, .emp-card-media img, .emp-card-sheen, .emp-view, .emp-balance-panel { transition:none; animation:none; }
      .emp-hero-temple, .emp-balance-card, .emp-balance-card::before, .emp-nav-btn { transition:none; animation:none; }
      .emp-nav-ind { transition:opacity .2s; }
      .empacq-visual.leaving { animation:none; opacity:0; }
    }

    /* Bouton VENDRE sur les cartes de la collection (à côté de Transmuter) */
    .nft-act-btn.sell { border-color:#c9a84c88; color:var(--gold2); }
    .nft-act-btn.sell:hover { background:#c9a84c18; }

    /* ════════ CONFIRMATION AVANT DÉPENSE ════════ */
    #boosterConfirmOverlay {
      position:fixed; inset:0; z-index:820; display:none; align-items:center; justify-content:center;
      padding:24px; background:#020108e8; backdrop-filter:blur(9px);
    }
    #boosterConfirmOverlay.open { display:flex; }
    .bconf-box {
      position:relative; width:min(420px,100%); padding:30px 28px 26px; border-radius:20px; text-align:center;
      background:radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--tier-col,#c9a84c) 14%, transparent), transparent 60%), linear-gradient(165deg,#14112f,#07051a);
      border:1px solid color-mix(in srgb, var(--tier-col,#c9a84c) 45%, var(--border));
      box-shadow:0 30px 70px -18px #000, 0 0 50px -10px var(--tier-glow,#c9a84c44);
      animation:bconfIn .35s cubic-bezier(.2,1,.3,1);
    }
    @keyframes bconfIn { from { transform:translateY(14px) scale(.96); opacity:0; } to { transform:none; opacity:1; } }
    .bconf-kicker { font-family:"Cinzel",serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--violet3); margin-bottom:16px; }
    .bconf-pack { width:96px; margin:0 auto 12px; filter:drop-shadow(0 10px 18px #000000aa) drop-shadow(0 0 22px var(--tier-glow,#c9a84c55)); }
    .bconf-name { font-family:"Cinzel",serif; font-size:15px; letter-spacing:2px; text-transform:uppercase; color:var(--tier-col,var(--gold2)); text-shadow:0 0 14px var(--tier-glow,transparent); }
    .bconf-contains { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:13px; color:var(--text3); margin-top:3px; margin-bottom:16px; }
    .bconf-rows { border-top:1px solid #2a2160; border-bottom:1px solid #2a2160; padding:6px 4px; margin-bottom:20px; }
    .bconf-row { display:flex; justify-content:space-between; align-items:center; padding:7px 6px; font-size:13px; }
    .bconf-row + .bconf-row { border-top:1px solid #ffffff08; }
    .bconf-row span { font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:var(--text3); }
    .bconf-row b { font-family:"Cinzel",serif; font-size:15px; color:var(--text); font-variant-numeric:tabular-nums; font-weight:600; }
    .bconf-row.cost b { color:var(--tier-col,var(--gold2)); }
    .bconf-row.after b { color:var(--gold2); }
    .bconf-row.after.short b { color:#e0708a; }
    .bconf-actions { display:flex; gap:12px; }
    .bconf-btn {
      flex:1; padding:13px; border-radius:11px; cursor:pointer; font-family:"Cinzel",serif;
      font-size:10.5px; letter-spacing:2px; text-transform:uppercase; transition:all .2s;
    }
    .bconf-btn.cancel { background:transparent; border:1px solid var(--border); color:var(--text3); }
    .bconf-btn.cancel:hover { border-color:var(--text3); color:var(--text2); }
    .bconf-btn.go {
      border:1px solid var(--tier-col,var(--gold2));
      background:linear-gradient(160deg, color-mix(in srgb, var(--tier-col,#c9a84c) 24%, #0c0a22), #0c0a22);
      color:var(--text); font-weight:600;
    }
    .bconf-btn.go:hover { box-shadow:0 8px 22px -8px var(--tier-glow,#c9a84c66); transform:translateY(-1px); }
    .bconf-btn.go:disabled { opacity:.5; cursor:progress; }

    /* ════════════════ RITUEL D'OUVERTURE D'UN BOOSTER NFT POLARISTAR ════════════════
       Séquence cinématique « artefact céleste » : booster au centre → halo →
       poussière d'étoile → activation (géométrie sacrée) → convergence →
       ouverture physique → flash interne → extraction de la carte (dos) →
       silence → accumulation d'énergie → RETOURNEMENT 3D AUTOMATIQUE (flash à
       90°) → effet de rareté → carte manipulable 360° → ajout à la collection.
       Machine à états JS (_bo*). La rareté (won.rarity) vient du SERVEUR ;
       l'animation ne fait que la représenter. CSS 3D pur, aucune librairie.
       Palette : blanc chaud / or / violet cosmique / bleu profond. Jamais casino. */
    #nftRevealOverlay {
      position:fixed; inset:0; z-index:800; display:none; align-items:center; justify-content:center;
      overflow:hidden; background:#020108e6; backdrop-filter:blur(4px);
      transition:background 1.1s ease, backdrop-filter 1.1s ease;
      --bo-light:#e8c97a; --bo-halo:#c9a84c;
    }
    #nftRevealOverlay.open { display:flex; }
    #nftRevealOverlay.deep   { background:#01000af5; backdrop-filter:blur(11px); }
    #nftRevealOverlay.calm   { background:#000206fe; backdrop-filter:blur(16px); }

    /* champ d'étoiles ambiant (réutilisé) */
    .bopen-sky { position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:0; transition:opacity 1.4s ease; }
    #nftRevealOverlay.open .bopen-sky { opacity:.9; }
    #nftRevealOverlay.deep .bopen-sky { opacity:.5; }
    #nftRevealOverlay.calm .bopen-sky { opacity:.22; }
    .bopen-sky i {
      position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; box-shadow:0 0 4px #fff;
      opacity:0; animation:bopenTwinkle 3.8s ease-in-out infinite;
    }
    @keyframes bopenTwinkle { 0%,100% { opacity:0; transform:scale(.5); } 50% { opacity:.5; transform:scale(1); } }

    /* ── scène persistante ─────────────────────────────────────────── */
    .nft-reveal-box { position:relative; text-align:center; padding:16px; width:min(460px,94vw); }
    .bo-scene { position:relative; z-index:2; animation:bopenPop .6s cubic-bezier(.2,1.2,.35,1); }
    @keyframes bopenPop { 0% { transform:scale(.82); opacity:0; } 100% { transform:scale(1); opacity:1; } }
    .bo-stage { position:relative; z-index:3; }
    /* moment de silence visuel */
    .bo-scene.hush .bo-halo-inner { opacity:.3; }
    .bo-scene.hush .bo-halo-mid   { opacity:.24; }
    .bo-scene.hush .bo-halo-outer { opacity:.16; }

    /* halo : 3 couches concentriques qui respirent */
    .bo-halo {
      position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); pointer-events:none;
      border-radius:50%; opacity:0; transition:opacity 1s ease;
    }
    .bo-scene.lit .bo-halo { opacity:1; }
    .bo-halo-inner {
      width:210px; height:210px;
      background:radial-gradient(circle, #fff8ec 0%, var(--bo-light,#e8c97a) 34%, transparent 70%);
      filter:blur(14px); opacity:0;
    }
    .bo-scene.lit .bo-halo-inner { opacity:.5; }
    .bo-halo-mid {
      width:360px; height:360px;
      background:radial-gradient(circle, var(--bo-halo,#c9a84c) 0%, transparent 62%);
      filter:blur(30px); opacity:0;
    }
    .bo-scene.lit .bo-halo-mid { opacity:.42; }
    .bo-halo-outer {
      width:620px; height:620px; max-width:150vw; max-height:150vw;
      background:radial-gradient(circle, color-mix(in srgb, var(--bo-halo,#c9a84c) 60%, #6a3fd0) 0%, transparent 66%);
      filter:blur(60px); opacity:0;
    }
    .bo-scene.lit .bo-halo-outer { opacity:.3; }
    .bo-scene.lit.breathe .bo-halo { animation:boHaloBreathe 2.7s ease-in-out infinite; }
    .bo-scene.lit.breathe .bo-halo-mid  { animation-delay:.25s; }
    .bo-scene.lit.breathe .bo-halo-outer { animation-delay:.5s; }
    @keyframes boHaloBreathe { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-50%) scale(1.15); } }
    .bo-scene.revealed .bo-halo-inner { opacity:.34; }
    .bo-scene.revealed .bo-halo-mid   { opacity:.3; }
    .bo-scene.revealed .bo-halo-outer { opacity:.2; }

    /* géométrie sacrée — se trace puis tourne très lentement */
    .bo-geo {
      position:absolute; left:50%; top:46%; width:340px; height:340px; transform:translate(-50%,-50%);
      pointer-events:none; opacity:0; color:var(--bo-light,#c9a84c); transition:opacity 1s ease;
    }
    .bo-geo path, .bo-geo circle, .bo-geo polygon, .bo-geo line { stroke:currentColor; fill:none; stroke-width:.5; vector-effect:non-scaling-stroke; }
    .bo-scene.geo-in .bo-geo { opacity:.5; }
    .bo-scene.geo-in .bo-geo [data-draw] { stroke-dasharray:var(--l,600); stroke-dashoffset:var(--l,600); animation:boGeoDraw 1.1s ease forwards; animation-delay:var(--gd,0s); }
    @keyframes boGeoDraw { to { stroke-dashoffset:0; } }
    .bo-scene.geo-hold .bo-geo { opacity:.18; animation:boGeoSpin 120s linear infinite; }
    .bo-scene.calm.geo-hold .bo-geo { opacity:.26; }
    @keyframes boGeoSpin { to { transform:translate(-50%,-50%) rotate(360deg); } }

    /* poussière d'étoile — positionnée par JS (transform) */
    .bo-particles { position:absolute; inset:0; pointer-events:none; }
    .bo-mote {
      position:absolute; left:0; top:0; width:3px; height:3px; border-radius:50%;
      background:#fff6e6; box-shadow:0 0 6px 1px #fff6e6; will-change:transform,opacity; opacity:0;
    }

    /* ── sachet ─────────────────────────────────────────────────────── */
    .bo-packwrap {
      position:relative; width:min(230px,60vw); aspect-ratio:3/4; margin:0 auto 22px;
      perspective:1200px; user-select:none;
    }
    .bo-pack { position:absolute; inset:0; transform-style:preserve-3d; }
    .bo-pack-full, .bo-pack-half {
      position:absolute; inset:0; background:var(--pack) center/contain no-repeat;
      filter:drop-shadow(0 22px 34px #000c) drop-shadow(0 0 26px var(--bo-light,#c9a84c66));
    }
    .bo-pack-full { animation:boPackFloat 5.2s ease-in-out infinite; will-change:transform; }
    @keyframes boPackFloat {
      0%,100% { transform:rotateX(7deg) rotateY(-7deg) translateY(0); }
      50%     { transform:rotateX(3deg) rotateY(-1deg) translateY(-12px); }
    }
    .bo-scene.state-activating .bo-pack-full { animation:boPackCharge 1s ease-in-out; }
    @keyframes boPackCharge {
      0% { transform:translateY(0) scale(1); }
      55% { transform:translateY(-10px) scale(1.03); filter:brightness(1.3) drop-shadow(0 0 50px var(--bo-light,#fff)); }
      100% { transform:translateY(-6px) scale(1.02); }
    }
    /* les 2 moitiés pour l'ouverture physique — même background, découpé par clip-path */
    .bo-pack-top { clip-path:inset(0 0 80% 0); }
    .bo-pack-bot { clip-path:inset(20% 0 0 0); }
    .bo-scene.state-opening .bo-pack-top { animation:boPackTear .55s cubic-bezier(.4,0,.7,1) forwards; }
    @keyframes boPackTear {
      0%   { transform:translateY(0) rotateX(0); opacity:1; }
      100% { transform:translateY(-30px) rotateX(-34deg); opacity:0; }
    }
    .bo-scene.state-opening .bo-pack-bot { animation:boPackOpen .8s ease forwards; }
    @keyframes boPackOpen { 0% { filter:brightness(1); } 45% { filter:brightness(1.5); } 100% { filter:brightness(1); opacity:.15; transform:translateY(14px) scale(.94); } }
    .bo-seam {
      position:absolute; left:6%; right:6%; top:20%; height:3px; border-radius:3px; opacity:0;
      background:linear-gradient(90deg, transparent, #fff, var(--bo-light,#fff), #fff, transparent);
      box-shadow:0 0 20px 3px var(--bo-light,#fff), 0 0 8px #fff;
    }
    .bo-scene.state-opening .bo-seam { animation:boSeam .6s ease forwards; }
    @keyframes boSeam { 0% { opacity:0; transform:scaleX(.2); } 30% { opacity:1; } 100% { opacity:0; transform:scaleX(1.25); } }

    /* bouton OUVRIR */
    .bo-open-cta {
      display:inline-block; margin-top:2px; padding:14px 32px; border-radius:26px; cursor:pointer;
      background:linear-gradient(160deg,#1b1442,#0b0a22); border:1px solid var(--bo-light,var(--gold-dim));
      color:var(--text); font-family:"Cinzel",serif; font-size:11px; letter-spacing:2.6px; text-transform:uppercase;
      box-shadow:0 0 26px -6px var(--bo-light,#c9a84c66); transition:transform .22s, box-shadow .22s, background .22s;
    }
    .bo-open-cta:hover { transform:translateY(-2px); box-shadow:0 0 40px -4px var(--bo-light,#c9a84cbb); background:linear-gradient(160deg,#241a54,#0b0a22); }
    .bo-open-sub { margin-top:12px; font-family:"Cormorant Garamond",serif; font-style:italic; font-size:12.5px; color:var(--text3); }

    /* ── FX transitoires (créés en JS dans #boFx) ─────────────────── */
    .bo-fx { position:absolute; inset:0; pointer-events:none; }
    .bo-flash {
      position:absolute; left:50%; top:46%; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%;
      background:radial-gradient(circle, #fff 0%, var(--bo-light,#fff) 40%, transparent 74%); will-change:transform,opacity;
    }
    .bo-charge-line {
      position:absolute; width:2px; background:linear-gradient(var(--bo-light,#fff), transparent);
      transform-origin:top center; opacity:0; will-change:transform,opacity;
    }
    .bo-pulse {
      position:absolute; left:50%; top:46%; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%;
      border:1.5px solid var(--bo-light,#fff); will-change:transform,opacity;
    }
    .bo-edgeflash {
      position:absolute; left:50%; top:46%; width:3px; height:var(--eh,300px); margin-top:calc(var(--eh,300px) / -2);
      background:linear-gradient(transparent, #fff, var(--bo-light,#fff), #fff, transparent);
      box-shadow:0 0 26px 4px var(--bo-light,#fff); will-change:transform,opacity;
    }
    .bo-ring {
      position:absolute; left:50%; top:46%; border-radius:50%; border:1.5px solid var(--bo-light,#fff);
      transform:translate(-50%,-50%); will-change:transform,opacity;
    }
    .bo-wave {
      position:absolute; left:50%; top:46%; width:80px; height:80px; margin:-40px 0 0 -40px; border-radius:50%;
      border:2px solid var(--bo-light,#fff); will-change:transform,opacity;
    }
    .bo-ray {
      position:absolute; left:50%; top:46%; width:1.5px; background:linear-gradient(var(--bo-light,#fff), transparent);
      transform-origin:top center; will-change:transform,opacity;
    }
    .bo-crown { position:absolute; left:50%; top:46%; width:0; height:0; }

    /* ── carte 3D (structure V2 conservée) ────────────────────────── */
    .bo-cardwrap {
      --cw:236px; --ch:330px; --ct:5px;
      position:relative; width:var(--cw); height:var(--ch); margin:2px auto 12px;
      perspective:1400px; touch-action:none; cursor:grab; user-select:none; z-index:3;
    }
    @media (max-width:560px){ .bo-cardwrap { --cw:210px; --ch:294px; } }
    .bo-cardwrap.dragging { cursor:grabbing; }
    .bo-cardwrap.emerging .bo-card { animation:boCardRise 1s cubic-bezier(.22,.85,.28,1) both; }
    @keyframes boCardRise {
      0%   { transform:translateY(74px) scale(.62) rotateY(180deg); opacity:0; }
      60%  { opacity:1; }
      100% { transform:translateY(0) scale(1) rotateY(180deg); opacity:1; }
    }
    .bo-cardwrap.floating .bo-card { animation:boCardFloat 5s ease-in-out infinite; }
    @keyframes boCardFloat {
      0%,100% { transform:translateY(0) rotateY(180deg) rotateZ(-1deg); }
      50%     { transform:translateY(-9px) rotateY(180deg) rotateZ(1deg); }
    }
    .bo-card { position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; transform:rotateY(180deg); }
    .bo-card.smooth { transition:transform .55s cubic-bezier(.3,.9,.3,1); }
    .bo-face {
      position:absolute; inset:0; border-radius:13px; overflow:hidden; backface-visibility:hidden;
      box-shadow:0 0 0 1px var(--bo-light,#c9a84c55) inset, 0 24px 48px -10px #000d;
    }
    .bo-front { transform:translateZ(calc(var(--ct)/2)); background:#0a0722; }
    .bo-front img { width:100%; height:100%; object-fit:cover; display:block; }
    .bo-back {
      transform:rotateY(180deg) translateZ(calc(var(--ct)/2));
      background:#160f3a url("/ASSETS/arriere-carte.png") center center / cover no-repeat;
    }
    .bo-back::before, .bo-back::after { content:none; display:none; }
    .bo-seedpoint {
      position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
      background:radial-gradient(circle,#fff,var(--bo-light,#fff)); box-shadow:0 0 18px 4px var(--bo-light,#fff);
      opacity:0; transform:scale(0); will-change:transform,opacity;
    }
    .bo-scene.state-charging .bo-seedpoint { animation:boSeed 1.1s ease forwards; }
    @keyframes boSeed { 0% { opacity:0; transform:scale(0); } 30% { opacity:1; } 100% { opacity:.9; transform:scale(2.6); } }

    .bo-edge { position:absolute; background:linear-gradient(var(--bo-light,#5a4a2a), #05040f 62%); opacity:.9; }
    .bo-edge-l { width:var(--ct); height:var(--ch); left:calc(50% - var(--ct)/2); top:0; transform:rotateY(-90deg) translateZ(calc(var(--cw)/2)); }
    .bo-edge-r { width:var(--ct); height:var(--ch); left:calc(50% - var(--ct)/2); top:0; transform:rotateY(90deg) translateZ(calc(var(--cw)/2)); }
    .bo-edge-t { width:var(--cw); height:var(--ct); left:0; top:calc(50% - var(--ct)/2); transform:rotateX(90deg) translateZ(calc(var(--ch)/2)); }
    .bo-edge-b { width:var(--cw); height:var(--ct); left:0; top:calc(50% - var(--ct)/2); transform:rotateX(-90deg) translateZ(calc(var(--ch)/2)); }

    .bo-holo {
      position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:var(--rar-a,0);
      background:
        radial-gradient(130% 90% at var(--hx,50%) var(--hy,50%), rgba(255,255,255,.34), transparent 56%),
        linear-gradient(var(--ha,120deg), transparent 36%, var(--bo-light,#fff) 49%, transparent 62%);
    }
    .bo-holo.prismatic {
      background:
        radial-gradient(130% 90% at var(--hx,50%) var(--hy,50%), rgba(255,255,255,.36), transparent 56%),
        linear-gradient(var(--ha,120deg), transparent 22%, rgba(120,170,255,.7) 35%, rgba(255,120,200,.7) 48%, rgba(150,255,150,.7) 62%, transparent 80%);
    }
    .bo-glare {
      position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:calc(var(--rar-a,0) * .7);
      background:linear-gradient(calc(var(--ha,120deg) + 42deg), transparent 43%, rgba(255,255,255,.6) 50%, transparent 57%);
    }
    .bo-frame {
      position:absolute; inset:6px; border-radius:9px; pointer-events:none;
      border:1px solid rgba(255,255,255,.14); box-shadow:0 0 18px rgba(255,255,255,.08) inset;
      transform:translate(var(--px,0px), var(--py,0px));
    }

    /* ── labels de rareté ────────────────────────────────────────── */
    .bo-label {
      position:relative; z-index:4; margin-top:2px;
      font-family:"Cinzel",serif; font-size:22px; letter-spacing:7px; color:var(--gold3);
      text-shadow:0 0 24px var(--bo-light,#e8c97a), 0 0 56px var(--bo-light,#e8c97a66);
      animation:boLabelIn 1.3s ease both;
    }
    .bo-label small { display:block; margin-top:8px; font-size:10px; letter-spacing:5px; color:var(--text2); text-shadow:none; }
    @keyframes boLabelIn { from { transform:translateY(10px); letter-spacing:18px; opacity:0; } to { opacity:1; } }

    /* ── méta + outils + actions (V2 conservé) ───────────────────── */
    .bo-hint {
      font-family:"Cinzel",serif; font-size:11px; letter-spacing:3px; text-transform:uppercase;
      color:var(--bo-light,var(--gold2)); text-shadow:0 0 14px var(--bo-light,transparent);
      animation:boHintPulse 2s ease-in-out infinite;
    }
    @keyframes boHintPulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
    .bo-meta { margin-top:2px; transition:opacity .4s ease; animation:boFadeUp .5s ease both; }
    @keyframes boFadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
    .bo-name { font-family:"Cinzel",serif; font-size:18px; color:var(--gold2); text-shadow:0 0 16px var(--gold-dim); line-height:1.25; }
    .bo-sub { margin-top:6px; display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap;
      font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:2px; }
    .bo-sub .bo-rar { color:var(--bo-light,var(--gold2)); text-shadow:0 0 12px var(--bo-light,transparent); }
    .bo-sub .bo-nft { color:var(--text3); }

    .bo-tools { display:flex; justify-content:center; gap:8px; margin-top:12px; animation:boFadeUp .5s ease both; }
    .bo-tools[hidden], .breveal-actions[hidden], .bo-meta[hidden], .bo-tools .bo-tool[hidden] { display:none !important; }
    .bo-tool {
      padding:7px 14px; border-radius:16px; background:#ffffff08; border:1px solid var(--border);
      color:var(--text3); font-family:"Cinzel",serif; font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
      cursor:pointer; transition:all .2s;
    }
    .bo-tool:hover { border-color:var(--gold-dim); color:var(--gold2); }
    .bo-scene.inspecting .bo-cardwrap { --cw:308px; --ch:431px; }
    @media (max-width:560px){ .bo-scene.inspecting .bo-cardwrap { --cw:244px; --ch:342px; } }
    .bo-scene.inspecting .bo-meta, .bo-scene.inspecting .breveal-actions { opacity:.2; }

    .breveal-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:14px; transition:opacity .4s ease; animation:boFadeUp .6s ease both; }
    .breveal-btn {
      padding:10px 18px; border-radius:20px; background:transparent; border:1px solid var(--border);
      color:var(--text2); font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase;
      cursor:pointer; transition:all .2s;
    }
    .breveal-btn:hover { border-color:var(--gold-dim); color:var(--gold2); }
    .breveal-btn.primary { border-color:var(--bo-light,var(--gold-dim)); color:var(--gold3); background:color-mix(in srgb, var(--bo-light,#c9a84c) 12%, transparent); }

    /* ── chrome : PASSER + SONS ──────────────────────────────────── */
    .bo-chrome { position:absolute; top:-2px; right:0; display:flex; gap:7px; align-items:center; z-index:6; }
    @media (max-width:560px){ .bo-chrome { top:2px; right:2px; } }
    .bo-skip, .bo-sound {
      background:#0c0a22aa; border:1px solid var(--border); color:var(--text3); cursor:pointer;
      font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:1.5px; text-transform:uppercase;
      padding:6px 11px; border-radius:14px; transition:all .2s; backdrop-filter:blur(4px);
    }
    .bo-skip:hover, .bo-sound:hover { border-color:var(--gold-dim); color:var(--gold2); }
    .bo-sound.on { border-color:var(--gold-dim); color:var(--gold2); background:#c9a84c14; }
    .bo-skip[hidden] { display:none !important; }

    /* ── « ✦ AJOUTÉ À VOTRE COLLECTION ✦ » ───────────────────────── */
    .bo-added {
      position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:7;
      font-family:"Cinzel",serif; font-size:13px; letter-spacing:4px; color:var(--gold3); white-space:nowrap;
      text-shadow:0 0 24px var(--bo-light,#e8c97a), 0 0 60px var(--bo-light,#e8c97a55);
      animation:boAdded 1.2s ease forwards;
    }
    @keyframes boAdded {
      0% { opacity:0; transform:translate(-50%,-50%) scale(.7); }
      20% { opacity:1; transform:translate(-50%,-50%) scale(1); }
      80% { opacity:1; }
      100% { opacity:0; transform:translate(-50%,-54%) scale(1.04); }
    }

    /* ── réglages par rareté (intensité halo + teintes) ──────────── */
    .bo-scene.rar-commun      { --bo-light:#eef1f7; --bo-halo:#b9c2d6; }
    .bo-scene.rar-rare        { --bo-light:#7bb8ff; --bo-halo:#3f7fe0; }
    .bo-scene.rar-superrare   { --bo-light:#b58cff; --bo-halo:#7a45c0; }
    .bo-scene.rar-mythique    { --bo-light:#ff6ec4; --bo-halo:#c23c8c; }
    .bo-scene.rar-legendaire  { --bo-light:#ffd27a; --bo-halo:#e0a63f; }
    .bo-scene.rar-primordiale { --bo-light:#fff2cf; --bo-halo:#d9b26a; }
    .bo-scene.rar-polaristar  { --bo-light:#ffffff; --bo-halo:#e8c97a; }
    .bo-scene.rar-mythique.revealed .bo-halo-mid,
    .bo-scene.rar-primordiale.revealed .bo-halo-mid { opacity:.4; }
    .bo-scene.rar-polaristar.revealed .bo-halo-outer { opacity:.32; }

    /* étoile Polaris derrière la carte */
    .bo-polstar {
      position:absolute; left:50%; top:44%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
      background:radial-gradient(circle,#fff,#ffe6a8); box-shadow:0 0 30px 8px #ffe9b8, 0 0 100px 26px #e8c97a55;
      opacity:0; transition:opacity 1.2s ease; animation:boPolStar 3s ease-in-out infinite;
    }
    .bo-scene.rar-polaristar.calm .bo-polstar { opacity:1; }
    @keyframes boPolStar { 0%,100% { box-shadow:0 0 30px 8px #ffe9b8, 0 0 100px 26px #e8c97a55; } 50% { box-shadow:0 0 48px 14px #fff, 0 0 140px 40px #e8c97a88; } }

    @media (prefers-reduced-motion: reduce) {
      .bo-pack-full, .bopen-sky i, .bo-polstar, .bo-hint,
      .bo-scene.lit.breathe .bo-halo, .bo-scene.geo-hold .bo-geo { animation:none !important; }
      .bo-card.smooth { transition-duration:.2s; }
      .bo-cardwrap.emerging .bo-card, .bo-cardwrap.floating .bo-card { animation:none; transform:rotateY(180deg); }
      .bo-label { animation-duration:.4s; }
    }

    /* ── FULLSCREEN PLAYER (inspiré YouTube Music) ── */
    #musicFullscreenPlayer {
      position: fixed; inset: 0; z-index: 165; display:none; flex-direction:column; align-items:center;
      padding: 24px 24px 30px; overflow-y:auto;
      background: #05041af7; backdrop-filter: blur(20px);
    }
    #musicFullscreenPlayer.open { display:flex; }
    .mfp-bg { position:fixed; inset:0; z-index:-1; opacity:0; transition: opacity .8s ease; pointer-events:none; }
    .mfp-topbar { width:100%; max-width:520px; display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-shrink:0; }
    .mfp-collapse { width:38px; height:38px; border-radius:50%; background:transparent; border:1px solid var(--border); color:var(--text2); font-size:16px; cursor:pointer; transition:all .2s; }
    .mfp-collapse:hover { border-color:var(--gold-dim); color:var(--gold2); }
    .mfp-topbar-label { font-family:"Cinzel",serif; font-size:10px; letter-spacing:3px; color:var(--text3); text-transform:uppercase; }
    .mfp-tabs { display:flex; gap:8px; margin-bottom:20px; flex-shrink:0; }
    .mfp-tab {
      padding:6px 18px; border-radius:16px; background:transparent; border:1px solid var(--border);
      color:var(--text3); font-family:"Cinzel",serif; font-size:10px; letter-spacing:2px; cursor:pointer; text-transform:uppercase; transition:all .2s;
    }
    .mfp-tab.active { color:var(--gold2); border-color:var(--gold-dim); background:#c9a84c14; }
    .mfp-body { width:100%; max-width:520px; flex:1; display:flex; align-items:center; justify-content:center; min-height:260px; }
    .mfp-view { display:none; width:100%; height:100%; }
    .mfp-view.active { display:flex; align-items:center; justify-content:center; }
    .mfp-cover {
      width:min(320px,62vw); height:min(320px,62vw); border-radius:16px; overflow:hidden; background:var(--bg3);
      display:flex; align-items:center; justify-content:center; font-size:70px; color:var(--text3);
      box-shadow: 0 20px 60px #000000aa, 0 0 60px #6040a022;
    }
    .mfp-cover img { width:100%; height:100%; object-fit:cover; }
    .mfp-view-lyrics, .mfp-view-queue { align-items:flex-start !important; overflow-y:auto; max-height:320px; }
    .mfp-lyrics-text { white-space:pre-line; font-size:17px; line-height:2; color:var(--text2); font-style:italic; text-align:center; width:100%; padding:10px 4px; }
    #mfpQueueList { width:100%; display:flex; flex-direction:column; gap:6px; }
    .mfp-queue-item { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:10px; cursor:pointer; transition:background .2s; }
    .mfp-queue-item:hover { background:#ffffff08; }
    .mfp-queue-item.current { background:#c9a84c14; }
    .mfp-queue-cover { width:40px; height:40px; border-radius:6px; overflow:hidden; background:var(--bg3); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:14px; }
    .mfp-queue-cover img { width:100%; height:100%; object-fit:cover; }
    .mfp-queue-meta { flex:1; min-width:0; }
    .mfp-queue-title { font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mfp-queue-artist { font-size:11px; color:var(--text3); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mfp-queue-playing { color:var(--gold2); font-size:14px; }
    .mfp-info { text-align:center; margin-top:18px; flex-shrink:0; }
    .mfp-title { font-family:"Cinzel",serif; font-size:21px; color:var(--gold2); text-shadow:0 0 20px #c9a84c33; }
    .mfp-artist { font-size:15px; color:var(--text3); font-style:italic; margin-top:4px; }
    .mfp-progress-row { width:100%; max-width:420px; display:flex; align-items:center; gap:12px; margin-top:20px; flex-shrink:0; }
    .mfp-progress-row input[type=range] { flex:1; accent-color:var(--gold); cursor:pointer; }
    .mfp-time { font-size:11px; color:var(--text3); font-family:"Cinzel",serif; }
    .mfp-controls { display:flex; align-items:center; gap:26px; margin-top:18px; flex-shrink:0; }
    .mfp-ctrl-btn { width:44px; height:44px; border-radius:50%; background:transparent; border:none; color:var(--text2); font-size:20px; cursor:pointer; transition:color .2s; }
    .mfp-ctrl-btn:hover { color:var(--gold2); }
    .mfp-playbtn-big {
      width:64px; height:64px; border-radius:50%; cursor:pointer;
      background:linear-gradient(135deg,#5a2d9a,#2d1f6a); border:1px solid #7a45c0; color:var(--gold2); font-size:21px; transition:all .2s;
    }
    .mfp-playbtn-big:hover { box-shadow:0 0 24px #6040a066; }
    .mfp-actions { display:flex; align-items:center; gap:20px; margin-top:22px; flex-wrap:wrap; justify-content:center; flex-shrink:0; }
    .mfp-action-btn {
      display:flex; align-items:center; gap:6px; background:transparent; border:none; color:var(--text3);
      font-size:13px; font-family:"Cormorant Garamond",serif; cursor:pointer; transition:color .2s;
    }
    .mfp-action-btn:hover { color:var(--gold2); }
    .mfp-action-btn.liked { color:#e0567a; }
    @media (max-width:600px) {
      .mfp-cover { width:78vw; height:78vw; }
      .mfp-title { font-size:18px; }
    }

    /* ═══════════════════════════════════════════════════════════
       MUSICOTHÈQUE — REFONTE (2026-09-02)
       Bibliothèque sonore cosmique : accueil éditorial, cartes
       compactes, play sur pochette, fréquences, mode liste,
       Ma Bibliothèque. Identité AKASHA conservée, contenu prioritaire.
       ═══════════════════════════════════════════════════════════ */

    /* Vignette qui abaisse le contraste du décor derrière le contenu musical */
    #panelMusique { position: relative; }
    #panelMusique::after {
      content:""; position:absolute; inset:-36px -36px 0; z-index:-1; pointer-events:none;
      background: radial-gradient(ellipse 80% 60% at 50% 30%, #05041acc 0%, #05041a66 45%, transparent 80%);
    }

    /* ── Masthead allégé ── */
    .mus-masthead { text-align:center; margin-bottom:22px; padding:14px 0 0; }
    .mus-masthead .mm-eyebrow { font-family:"Cinzel",serif; font-size:11px; letter-spacing:6px; color:var(--violet3); text-transform:uppercase; text-shadow:0 0 12px var(--violet-glow); }
    .mus-masthead .mm-title { font-family:"Cinzel",serif; font-size:23px; letter-spacing:3px; color:var(--gold2); margin-top:8px; text-shadow:0 0 22px #c9a84c22; }

    /* ── Nav principale Musicothèque ── */
    .mus-nav-row { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
    .mus-tab-bar { margin-bottom:0 !important; }
    .mus-nav-row .mus-tab-btn { padding:8px 20px; font-size:11px; letter-spacing:3px; }
    .mus-lib-btn {
      display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:16px;
      background:transparent; border:1px solid var(--border); color:var(--text3);
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:all .2s;
    }
    .mus-lib-btn:hover, .mus-lib-btn.active { color:var(--violet3); border-color:var(--violet2); box-shadow:0 0 14px #6040a022; }
    .mus-lib-btn .glyph { font-size:13px; }

    /* ── Barre de recherche + suggestions ── */
    .mus-searchbar { position:relative; max-width:620px; margin:0 auto 16px; }
    .mus-searchbar input {
      width:100%; background:linear-gradient(160deg,#0c0a22,#08061a); border:1px solid var(--border); border-radius:22px;
      padding:12px 20px 12px 44px; color:var(--text); font-family:"Cormorant Garamond",serif; font-size:16px; outline:none; transition:all .2s;
      box-shadow: inset 0 2px 10px #00000066, inset 0 1px 0 #6040a014;
    }
    .mus-searchbar input:focus { border-color:var(--violet2); box-shadow:0 0 0 3px #6040a022, inset 0 2px 10px #00000066; }
    .mus-searchbar .ms-icon { position:absolute; left:17px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:15px; pointer-events:none; }
    .mus-search-results {
      position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60; display:none;
      background:linear-gradient(180deg,#0c0a24f8,#07051af8); border:1px solid var(--border); border-radius:16px;
      box-shadow:0 20px 60px #000000cc, 0 0 30px #6040a022; backdrop-filter:blur(12px); overflow:hidden; padding:6px;
      max-height:60vh; overflow-y:auto;
    }
    .mus-search-results.open { display:block; }
    .msr-group-title { font-family:"Cinzel",serif; font-size:9px; letter-spacing:3px; color:var(--text3); text-transform:uppercase; padding:10px 12px 5px; }
    .msr-item { display:flex; align-items:center; gap:11px; padding:8px 12px; border-radius:10px; cursor:pointer; transition:background .15s; }
    .msr-item:hover { background:#ffffff0a; }
    .msr-thumb { width:34px; height:34px; border-radius:7px; overflow:hidden; flex-shrink:0; background:var(--bg3); display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:13px; }
    .msr-thumb img { width:100%; height:100%; object-fit:cover; }
    .msr-thumb.round { border-radius:50%; }
    .msr-label { font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .msr-sub { font-size:11px; color:var(--text3); font-style:italic; }
    .mus-search-results mark { background:#c9a84c33; color:var(--gold2); border-radius:3px; padding:0 1px; }
    .msr-empty { padding:16px 12px; color:var(--text3); font-style:italic; font-size:13px; text-align:center; }

    /* ── Chips de filtres fins ── */
    .mus-chips { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
    .mus-chip {
      padding:5px 13px; border-radius:13px; background:transparent; border:1px solid var(--border);
      color:var(--text3); font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:all .18s; white-space:nowrap;
    }
    .mus-chip:hover { color:var(--text2); border-color:var(--violet2); }
    .mus-chip.active { color:var(--gold2); border-color:var(--gold-dim); background:#c9a84c14; box-shadow:0 0 10px #c9a84c1a; }
    .mus-filters-btn {
      padding:5px 13px; border-radius:13px; background:transparent; border:1px dashed var(--violet2);
      color:var(--violet3); font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:all .18s;
    }
    .mus-filters-btn:hover { background:#6040a012; }
    .mus-filters-btn.active { background:#6040a01f; color:var(--text); }

    /* ── Panneau ⚙ Filtres ── */
    .mus-filters-panel {
      display:none; max-width:720px; margin:6px auto 4px; padding:16px 18px;
      background:linear-gradient(160deg,#0c0a24,#08061a); border:1px solid var(--border); border-radius:16px;
      box-shadow: inset 0 2px 12px #00000055;
    }
    .mus-filters-panel.open { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px 16px; }
    .mfp-field { display:flex; flex-direction:column; gap:5px; }
    .mfp-field label { font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:2.5px; color:var(--text3); text-transform:uppercase; }
    .mfp-field select {
      background:#0c0a22; border:1px solid var(--border); border-radius:9px; padding:7px 10px; color:var(--text);
      font-family:"Cormorant Garamond",serif; font-size:13px; outline:none; cursor:pointer;
    }
    .mfp-field select option { background:#14102c; color:var(--text); }
    .mus-filters-panel .mfp-reset { grid-column:1/-1; justify-self:end; background:none; border:none; color:var(--text3); font-size:11px; cursor:pointer; font-style:italic; }
    .mus-filters-panel .mfp-reset:hover { color:var(--red); }

    /* ── Sections éditoriales ── */
    .mus-section { margin:30px 0 10px; animation: musFadeUp .45s ease both; }
    .mus-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--border2); }
    .mus-section-title { font-family:"Cinzel",serif; font-size:13px; letter-spacing:4px; color:var(--text); text-transform:uppercase; }
    .mus-section-title .glyph { color:var(--gold-dim); margin-right:8px; }
    .mus-section-more { background:none; border:none; color:var(--violet3); font-family:"Cinzel",serif; font-size:9px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; }
    .mus-section-more:hover { color:var(--gold2); }
    .mus-row { display:flex; gap:16px; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
    .mus-row > * { scroll-snap-align:start; flex:0 0 168px; }
    .mus-row.artists > * { flex-basis:120px; }

    @keyframes musFadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

    /* ── Bloc « À LA UNE » ── */
    .mus-hero {
      position:relative; display:flex; gap:26px; padding:24px; border-radius:20px; overflow:hidden;
      background:linear-gradient(160deg,#0e0b28,#0a0820); border:1px solid var(--border);
      box-shadow: var(--shadow), inset 0 1px 0 #6040a018; animation: musFadeUp .5s ease both;
    }
    .mus-hero .mh-tint { position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .8s ease; pointer-events:none; }
    .mus-hero > * { position:relative; z-index:1; }
    .mus-hero-cover {
      flex:0 0 210px; height:210px; border-radius:16px; overflow:hidden; background:var(--bg3);
      display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:60px; cursor:pointer;
      box-shadow:0 16px 50px #000000aa, 0 0 40px #6040a022; position:relative;
    }
    .mus-hero-cover img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
    .mus-hero-cover:hover img { transform:scale(1.04); }
    .mus-hero-cover .mtrack-playbtn { width:60px; height:60px; font-size:20px; }
    .mus-hero-body { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
    .mus-hero-kicker { font-family:"Cinzel",serif; font-size:9px; letter-spacing:4px; color:var(--violet3); text-transform:uppercase; margin-bottom:8px; }
    .mus-hero-title { font-family:"Cinzel",serif; font-size:27px; letter-spacing:1px; color:var(--gold2); line-height:1.2; text-shadow:0 0 24px #c9a84c22; }
    .mus-hero-artist { font-size:16px; color:var(--text2); font-style:italic; margin-top:5px; }
    .mus-hero-tags { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
    .mus-hero-desc { font-size:14.5px; color:var(--text2); line-height:1.7; max-width:52ch; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .mus-hero-actions { display:flex; gap:12px; align-items:center; margin-top:16px; flex-wrap:wrap; }

    /* ── Carte morceau compacte ── */
    #musiqueGrid.mus-grid, .mus-row {  }
    .mus-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:18px; }
    .mtrack-card {
      background:linear-gradient(160deg,#0e0b28,#0a0820); border:1px solid var(--border); border-radius:14px;
      overflow:hidden; transition:transform .28s, border-color .28s, box-shadow .28s; box-shadow: var(--shadow), inset 0 1px 0 #6040a012;
    }
    .mtrack-card:hover { transform:translateY(-5px); border-color:#6040a066; box-shadow:0 14px 48px #000000aa, 0 0 26px #6040a02e; }
    .mtrack-card.is-playing { border-color:var(--gold-dim); box-shadow:0 0 0 1px #c9a84c33, 0 14px 48px #000000aa, 0 0 30px #c9a84c22; }
    .mtrack-cover {
      position:relative; width:100%; aspect-ratio:1/1; background:var(--bg3); overflow:hidden; cursor:pointer;
      display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:38px;
    }
    .mtrack-cover img { width:100%; height:100%; object-fit:cover; transition:transform .4s, filter .3s; }
    .mtrack-cover:hover img { transform:scale(1.02); filter:brightness(.72); }
    .mtrack-card.is-playing .mtrack-cover img { filter:brightness(.78); }
    .mtrack-playbtn {
      position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85);
      width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
      background:#0c0a24cc; border:1.5px solid var(--gold-dim); color:var(--gold2); font-size:16px; padding-left:2px;
      opacity:0; transition:opacity .25s, transform .25s; backdrop-filter:blur(5px); pointer-events:none;
    }
    .mtrack-cover:hover .mtrack-playbtn { opacity:1; transform:translate(-50%,-50%) scale(1); }
    .mtrack-card.is-playing .mtrack-playbtn { opacity:1; transform:translate(-50%,-50%) scale(1); padding-left:0; }
    .mtrack-card.is-playing .mtrack-playbtn::before {
      content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid #c9a84c66; animation: mtrackPulse 1.9s ease-out infinite;
    }
    @keyframes mtrackPulse { 0% { transform:scale(1); opacity:.8; } 100% { transform:scale(1.5); opacity:0; } }
    .mtrack-badge-freq {
      position:absolute; top:8px; left:8px; display:inline-flex; align-items:center; gap:4px;
      font-family:"Cinzel",serif; font-size:8px; letter-spacing:1px; padding:3px 7px; border-radius:9px;
      background:#0c0a24cc; border:1px solid var(--gold-dim); color:var(--gold2); backdrop-filter:blur(4px);
    }
    .mtrack-body { padding:11px 12px 12px; }
    .mtrack-style { font-family:"Cinzel",serif; font-size:8px; letter-spacing:2px; color:var(--violet3); text-transform:uppercase; }
    .mtrack-title { font-family:"Cinzel",serif; font-size:12.5px; color:var(--text); margin:5px 0 2px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mtrack-artist { font-size:12.5px; color:var(--text3); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mtrack-statline { display:flex; align-items:center; gap:11px; margin-top:9px; font-size:10.5px; color:var(--text3); font-family:"Cinzel",serif; letter-spacing:.5px; }
    .mtrack-statline .st { display:inline-flex; align-items:center; gap:3px; }
    .mtrack-iconbtns { display:flex; align-items:center; gap:6px; margin-top:9px; padding-top:9px; border-top:1px solid var(--border2); }
    .mtrack-ibtn {
      display:inline-flex; align-items:center; gap:4px; background:transparent; border:none; color:var(--text3);
      font-family:"Cormorant Garamond",serif; font-size:12px; cursor:pointer; transition:color .18s; padding:2px 4px; border-radius:6px;
    }
    .mtrack-ibtn:hover { color:var(--gold2); }
    .mtrack-ibtn.liked { color:#e0567a; }
    .mtrack-ibtn.liked.pulsing { animation: musLikePulse .4s ease; }
    @keyframes musLikePulse { 0%,100% { transform:scale(1); } 45% { transform:scale(1.32); } }
    .mtrack-ibtn.more { margin-left:auto; font-size:15px; letter-spacing:1px; }

    /* Variante contemplative (méditation / fréquence) */
    .mtrack-card.is-meditation { border-color:#3a5a6a55; }
    .mtrack-card.is-meditation .mtrack-cover::after {
      content:""; position:absolute; inset:0; pointer-events:none;
      background:radial-gradient(ellipse 70% 60% at 50% 40%, #6ab0c022 0%, transparent 70%);
      animation: musMeditGlow 7s ease-in-out infinite;
    }
    @keyframes musMeditGlow { 0%,100% { opacity:.4; } 50% { opacity:.9; } }
    .mtrack-card.is-meditation .mtrack-style { color:#7fb8c8; }

    /* ── Menu contextuel ⋯ ── */
    .mus-menu {
      position:fixed; z-index:210; min-width:190px; padding:6px;
      background:linear-gradient(180deg,#0e0b28f8,#08061af8); border:1px solid var(--border); border-radius:12px;
      box-shadow:0 20px 60px #000000cc, 0 0 24px #6040a022; backdrop-filter:blur(10px);
    }
    .mus-menu button {
      display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 11px; border-radius:8px;
      background:transparent; border:none; color:var(--text2); font-family:"Cormorant Garamond",serif; font-size:13.5px; cursor:pointer; transition:background .15s;
    }
    .mus-menu button:hover { background:#ffffff0a; color:var(--text); }
    .mus-menu button .glyph { width:16px; text-align:center; color:var(--text3); }

    /* ── Toggle Grille / Liste ── */
    .mus-viewtoggle { display:inline-flex; gap:4px; padding:3px; border:1px solid var(--border); border-radius:11px; background:#0c0a2299; }
    .mus-viewtoggle button {
      display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:8px; background:transparent; border:none;
      color:var(--text3); font-family:"Cinzel",serif; font-size:9px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:all .18s;
    }
    .mus-viewtoggle button.active { background:#c9a84c14; color:var(--gold2); }

    /* ── Mode liste ── */
    .mus-list { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#0b0920aa; }
    .mus-list-row {
      display:grid; grid-template-columns:34px 44px minmax(0,2.4fr) minmax(0,1.5fr) minmax(0,1fr) 74px 60px 58px 34px;
      align-items:center; gap:12px; padding:8px 14px; border-bottom:1px solid var(--border2); cursor:pointer; transition:background .15s; font-size:13px;
    }
    .mus-list-row:last-child { border-bottom:none; }
    .mus-list-row:hover { background:#ffffff08; }
    .mus-list-row.is-playing { background:#c9a84c12; }
    .mus-list-row .mlr-num { font-family:"Cinzel",serif; font-size:11px; color:var(--text3); text-align:center; }
    .mus-list-row:hover .mlr-num .n { display:none; }
    .mus-list-row:hover .mlr-num .p { display:inline; }
    .mus-list-row .mlr-num .p { display:none; color:var(--gold2); }
    .mlr-thumb { width:38px; height:38px; border-radius:6px; overflow:hidden; background:var(--bg3); display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:13px; }
    .mlr-thumb img { width:100%; height:100%; object-fit:cover; }
    .mlr-title { font-family:"Cinzel",serif; font-size:12px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mlr-artist, .mlr-style, .mlr-freq, .mlr-plays, .mlr-dur { color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
    .mlr-freq { color:var(--gold-dim); font-family:"Cinzel",serif; font-size:10px; }
    .mlr-plays { font-family:"Cinzel",serif; font-size:11px; text-align:right; }
    .mlr-dur { font-family:"Cinzel",serif; font-size:11px; text-align:right; }
    .mus-list-head {
      display:grid; grid-template-columns:34px 44px minmax(0,2.4fr) minmax(0,1.5fr) minmax(0,1fr) 74px 60px 58px 34px;
      gap:12px; padding:9px 14px; font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:2px; color:var(--text3); text-transform:uppercase; border-bottom:1px solid var(--border);
    }
    .mlr-plays-h, .mlr-dur-h { text-align:right; }

    /* ── Ma Bibliothèque ── */
    .mus-lib-sub { margin:24px 0 6px; }
    .mus-lib-sub-title { font-family:"Cinzel",serif; font-size:12px; letter-spacing:3px; color:var(--gold2); text-transform:uppercase; margin-bottom:12px; }
    .mus-lib-sub-title .glyph { color:var(--gold-dim); margin-right:7px; }

    /* ── Rangée d'artistes (avatars ronds) ── */
    .mus-artist-chip { text-align:center; cursor:pointer; }
    .mus-artist-chip .aac-avatar {
      width:104px; height:104px; border-radius:50%; overflow:hidden; margin:0 auto 8px; background:var(--bg3);
      display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:34px;
      border:1px solid var(--border); box-shadow:0 8px 30px #00000088; transition:transform .3s, border-color .3s, box-shadow .3s;
    }
    .mus-artist-chip:hover .aac-avatar { transform:translateY(-4px); border-color:var(--violet2); box-shadow:0 12px 40px #000000aa, 0 0 24px #6040a033; }
    .mus-artist-chip .aac-avatar img { width:100%; height:100%; object-fit:cover; }
    .mus-artist-chip .aac-name { font-family:"Cinzel",serif; font-size:11px; color:var(--text); letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mus-artist-chip .aac-sub { font-size:11px; color:var(--text3); font-style:italic; }

    /* ── Bouton d'action doré générique (hero / pages détail) ── */
    .mus-btn-primary {
      display:inline-flex; align-items:center; gap:8px; padding:10px 22px; border-radius:14px; cursor:pointer;
      background:linear-gradient(135deg,#5a2d9a,#2d1f6a); border:1px solid #7a45c0; color:var(--gold2);
      font-family:"Cinzel",serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; transition:all .2s;
    }
    .mus-btn-primary:hover { box-shadow:0 0 20px #6040a055; }
    .mus-btn-ghost {
      display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:14px; cursor:pointer;
      background:transparent; border:1px solid var(--border); color:var(--text2);
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:2px; text-transform:uppercase; transition:all .2s;
    }
    .mus-btn-ghost:hover { border-color:var(--gold-dim); color:var(--gold2); }
    .mus-btn-ghost.active { border-color:#e0567a55; color:#e0567a; }

    /* ── Détail son / album : en-tête à teinte pochette ── */
    .mus-detail-head { position:relative; display:flex; gap:24px; padding:26px 56px 26px 26px; overflow:hidden; border-radius:18px 18px 0 0; border-bottom:1px solid var(--border2); }
    .mus-detail-head .mdh-tint { position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .8s ease; pointer-events:none; }
    .mus-detail-head > * { position:relative; z-index:1; }
    .mus-detail-cover { flex:0 0 200px; height:200px; border-radius:16px; overflow:hidden; background:var(--bg3); display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:56px; box-shadow:0 16px 50px #000000aa; }
    .mus-detail-cover img { width:100%; height:100%; object-fit:cover; }
    .mus-detail-meta { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
    .mus-detail-kicker { font-family:"Cinzel",serif; font-size:9px; letter-spacing:4px; color:var(--violet3); text-transform:uppercase; }
    .mus-detail-title { font-family:"Cinzel",serif; font-size:24px; color:var(--gold2); line-height:1.2; margin:6px 0 3px; text-shadow:0 0 22px #c9a84c22; }
    .mus-detail-sub { font-size:15px; color:var(--text2); font-style:italic; }
    .mus-detail-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
    .mus-detail-section-t { font-family:"Cinzel",serif; color:var(--violet3); font-size:12px; letter-spacing:3px; text-transform:uppercase; margin:24px 0 10px; }

    /* ── Player : contrôles additionnels + onde ── */
    .mpb-ctrl { width:32px; height:32px; border-radius:50%; background:transparent; border:none; color:var(--text2); font-size:15px; cursor:pointer; flex-shrink:0; transition:color .2s; }
    .mpb-ctrl:hover { color:var(--gold2); }
    .mpb-progress-wrap { flex:1; position:relative; min-width:120px; display:flex; flex-direction:column; }
    .mpb-wave { position:absolute; left:44px; right:44px; top:50%; transform:translateY(-50%); height:26px; opacity:.5; pointer-events:none; }
    .mpb-iconbtn { background:transparent; border:none; color:var(--text3); font-size:14px; cursor:pointer; flex-shrink:0; transition:color .2s; padding:4px; }
    .mpb-iconbtn:hover { color:var(--gold2); }
    .mpb-iconbtn.liked { color:#e0567a; }
    .mpb-iconbtn.active { color:var(--gold2); }
    .mpb-vol { display:flex; align-items:center; gap:6px; flex-shrink:0; }
    .mpb-vol input[type=range] { width:70px; accent-color:var(--gold); cursor:pointer; }
    .mfp-wave { width:100%; max-width:420px; height:34px; opacity:.55; margin-top:6px; }

    /* ── Panneau File d'attente ── */
    #musicQueuePanel {
      position:fixed; top:0; right:0; bottom:0; width:340px; max-width:88vw; z-index:170; transform:translateX(105%);
      transition:transform .35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
      background:linear-gradient(180deg,#0a0824f7,#05041af2); border-left:1px solid var(--border2);
      box-shadow:-20px 0 60px #000000bb; backdrop-filter:blur(14px);
    }
    #musicQueuePanel.open { transform:none; }
    .mqp-head { display:flex; align-items:center; justify-content:space-between; padding:18px 18px 12px; border-bottom:1px solid var(--border2); }
    .mqp-head .mqp-title { font-family:"Cinzel",serif; font-size:12px; letter-spacing:3px; color:var(--gold2); text-transform:uppercase; }
    .mqp-close { background:none; border:none; color:var(--text3); font-size:16px; cursor:pointer; }
    .mqp-close:hover { color:var(--red); }
    .mqp-body { flex:1; overflow-y:auto; padding:12px 12px 24px; }
    .mqp-group-t { font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:3px; color:var(--text3); text-transform:uppercase; margin:12px 6px 8px; }
    .mqp-item { display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:10px; transition:background .15s; }
    .mqp-item:hover { background:#ffffff08; }
    .mqp-item.current { background:#c9a84c12; }
    .mqp-item .mqp-cover { width:38px; height:38px; border-radius:6px; overflow:hidden; background:var(--bg3); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:13px; cursor:pointer; }
    .mqp-item .mqp-cover img { width:100%; height:100%; object-fit:cover; }
    .mqp-item .mqp-meta { flex:1; min-width:0; cursor:pointer; }
    .mqp-item .mqp-mt { font-size:12.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mqp-item .mqp-ma { font-size:11px; color:var(--text3); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mqp-item .mqp-ctrls { display:flex; align-items:center; gap:2px; flex-shrink:0; opacity:0; transition:opacity .15s; }
    .mqp-item:hover .mqp-ctrls { opacity:1; }
    .mqp-item .mqp-ctrls button { background:none; border:none; color:var(--text3); font-size:12px; cursor:pointer; padding:3px; }
    .mqp-item .mqp-ctrls button:hover { color:var(--gold2); }

    /* ── Responsive Musicothèque ── */
    @media (max-width: 767px) {
      #panelMusique::after { inset:-20px -14px 0; }
      .mus-nav-row { gap:8px; }
      .mus-tab-bar { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; width:100%; scrollbar-width:none; }
      .mus-tab-bar::-webkit-scrollbar { display:none; }
      .mus-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
      .mus-row > * { flex-basis:44vw; }
      .mus-row.artists > * { flex-basis:34vw; }
      .mus-hero { flex-direction:column; gap:16px; padding:16px; }
      .mus-hero-cover { flex-basis:auto; width:100%; height:auto; aspect-ratio:1/1; }
      .mus-hero-title { font-size:21px; }
      .mus-detail-head { flex-direction:column; gap:16px; padding:16px; }
      .mus-detail-cover { flex-basis:auto; width:100%; height:auto; aspect-ratio:1/1; }
      .mus-list-row, .mus-list-head { grid-template-columns:28px 36px minmax(0,2fr) 54px 46px; }
      .mlr-artist, .mlr-style, .mlr-freq-h, .mlr-artist-h, .mlr-style-h { display:none; }
      .mpb-wave { display:none; }
      .mpb-vol { display:none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .mus-section, .mus-hero, .mtrack-card.is-playing .mtrack-playbtn::before,
      .mtrack-card.is-meditation .mtrack-cover::after, .mtrack-ibtn.liked.pulsing { animation:none !important; }
    }

    /* ── MODAL ── */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 200; background: #000000bb; backdrop-filter: blur(6px);
      display: none; align-items: center; justify-content: center; padding: 20px;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
      background: linear-gradient(160deg, #130e30f5 0%, #0a0820f5 100%);
      border: 1px solid var(--border); border-radius: 18px;
      max-width: 900px; width: 100%; max-height: 92vh; overflow-y: auto; scroll-behavior: smooth;
      box-shadow: 0 30px 100px #000000cc, 0 0 60px #3b2a7a44, inset 0 1px 0 #6040a022;
      position: relative;
    }
    .modal-article-full img, .modal-desc img {
      display: block; max-width: 100%; height: auto; margin: 14px auto; border-radius: 8px;
      -webkit-user-drag: none; user-select: none;
    }
    .modal-close {
      position: absolute; top: 14px; right: 18px; font-size: 18px; cursor: pointer;
      color: var(--text3); background: none; border: none; z-index: 1;
      width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
      border-radius: 50%; transition: all .2s;
    }
    .modal-close:hover { color: var(--gold); background: var(--card2); }
    .modal-video-wrap { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 16px 16px 0 0; overflow: hidden; }
    .modal-video-wrap video { width: 100%; height: 100%; }
    .modal-content-body { padding: 28px 30px; }
    .modal-title { font-family: "Cinzel", serif; font-size: 22px; color: var(--gold2); margin: 10px 0 8px; line-height: 1.4; text-shadow: 0 0 20px #c9a84c33; }
    .modal-meta { font-size: 12px; color: var(--text3); margin-bottom: 20px; font-style: italic; }
    .modal-desc { color: var(--text); font-size: 16px; line-height: 1.9; }
    .modal-article-full { color: var(--text); font-size: 16px; line-height: 1.95; }
    .modal-article-full p { margin-bottom: 18px; }
    .modal-article-full h2 { font-family: "Cinzel", serif; color: var(--gold); margin: 28px 0 14px; font-size: 18px; letter-spacing: 2px; }
    .modal-article-full h3 { font-family: "Cinzel", serif; color: var(--violet3); margin: 22px 0 10px; font-size: 15px; letter-spacing: 2px; }
    .modal-article-full strong { color: var(--gold3); font-weight: 600; }
    .modal-article-full ul { margin: 0 0 18px 22px; }
    .modal-article-full li { margin-bottom: 6px; line-height: 1.7; }
    .rules-quote {
      margin: 18px 0; padding: 14px 20px; border-radius: 10px; text-align: center;
      background: linear-gradient(135deg,#1a0c50aa,#3a1880aa); border: 1px solid rgba(201,168,76,.4);
      color: var(--gold2); font-family: "Cinzel", serif; font-size: 13px; letter-spacing: 1px;
      font-style: italic; line-height: 1.9;
    }
    .product-gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
    .product-gallery-thumb {
      width: 56px; height: 56px; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
      background: var(--card2); border: 1px solid var(--border); transition: all .2s; flex-shrink: 0;
    }
    .product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .product-gallery-thumb.active { border-color: var(--gold-dim); box-shadow: 0 0 12px #c9a84c33; }
    .variant-picker { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
    .variant-btn {
      padding: 8px 20px; border-radius: 18px; cursor: pointer; font-family: "Cinzel", serif;
      font-size: 11px; letter-spacing: 2px; color: var(--text3);
      background: var(--card); border: 1px solid var(--border); transition: all .2s;
    }
    .variant-btn.active { color: var(--gold2); border-color: var(--gold-dim); box-shadow: 0 0 14px #c9a84c22; background: #c9a84c14; }
    .modal-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
    .modal-price { font-family: "Cinzel", serif; font-size: 26px; color: var(--gold2); text-shadow: 0 0 14px var(--gold-dim); }
    .buy-btn {
      padding: 13px 30px; border: 1px solid var(--gold-dim);
      background: linear-gradient(135deg, #c9a84c22 0%, #8a6a1022 100%);
      border-radius: 10px; color: var(--gold2); font-family: "Cinzel", serif;
      font-size: 12px; letter-spacing: 3px; cursor: pointer; font-weight: 600;
      transition: all .3s; text-transform: uppercase;
    }
    .buy-btn:hover { background: linear-gradient(135deg, #c9a84c33, #8a6a1033); color: var(--gold3); box-shadow: 0 0 30px #c9a84c22; }

    /* ══════════════════════════════════════════════════════════════════
       LIBRAIRIE ÉSOTÉRIQUE — présentation des ouvrages (refonte 2026-09-02)
       Portée : sous-panneau #panelLivres + fiche d'archive du modal produit
       pour type='livre'. Aucune logique commerciale, aucun prix, aucune
       donnée touchés : UI / hiérarchie / animations / responsive uniquement.
       Préfixes .lib- / .grimoire- / .arch- / .seal pour rester isolé.
       ══════════════════════════════════════════════════════════════════ */
    :root { --lib-circle: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%20fill='none'%20stroke='%23e8c97a'%20stroke-width='0.7'%3E%3Ccircle%20cx='100'%20cy='100'%20r='97'/%3E%3Ccircle%20cx='100'%20cy='100'%20r='80'/%3E%3Ccircle%20cx='100'%20cy='100'%20r='58'/%3E%3Ccircle%20cx='100'%20cy='100'%20r='34'/%3E%3Cpolygon%20points='100,14%20174,143%2026,143'/%3E%3Cpolygon%20points='100,186%2026,57%20174,57'/%3E%3Cg%20stroke-width='0.5'%3E%3Cline%20x1='100'%20y1='3'%20x2='100'%20y2='24'/%3E%3Cline%20x1='100'%20y1='176'%20x2='100'%20y2='197'/%3E%3Cline%20x1='3'%20y1='100'%20x2='24'%20y2='100'/%3E%3Cline%20x1='176'%20y1='100'%20x2='197'%20y2='100'/%3E%3C/g%3E%3C/svg%3E"); }

    /* — Coffrage : léger surcroît de contraste derrière les ouvrages — */
    .lib-shell {
      position: relative; margin-top: 4px; padding: 28px 12px 16px; border-radius: 20px;
      background:
        radial-gradient(120% 60% at 50% 0%, rgba(90,45,154,.10) 0%, transparent 62%),
        linear-gradient(180deg, rgba(3,2,13,.6) 0%, rgba(3,2,13,.12) 100%);
      box-shadow: inset 0 1px 0 rgba(96,64,160,.10), inset 0 44px 90px -64px rgba(0,0,0,.92);
    }
    .lib-shell::before {
      content:""; position:absolute; left:26px; right:26px; top:0; height:1px; pointer-events:none;
      background: linear-gradient(90deg, transparent, rgba(201,168,76,.35), transparent);
    }

    /* — Barre de recherche « archives » — */
    .lib-searchrow { display:flex; justify-content:center; gap:10px; margin-bottom:16px; }
    .lib-search { position:relative; flex:1; max-width:520px; display:flex; align-items:center; }
    .lib-search::before {
      content:"\2727"; position:absolute; left:15px; color:var(--gold-dim); font-size:13px; pointer-events:none;
    }
    .lib-search input {
      width:100%; background:linear-gradient(160deg,#0c0a22 0%,#08061a 100%);
      border:1px solid var(--border); border-radius:14px;
      padding:12px 16px 12px 38px; color:var(--text);
      font-family:"Cormorant Garamond",serif; font-size:15px; letter-spacing:.4px; outline:none;
      box-shadow: inset 0 2px 10px rgba(0,0,0,.45); transition: border-color .25s, box-shadow .25s;
    }
    .lib-search input::placeholder { color:var(--text3); font-style:italic; }
    .lib-search input:focus {
      border-color: rgba(176,125,224,.55);
      box-shadow: inset 0 2px 10px rgba(0,0,0,.45), 0 0 0 3px rgba(96,64,160,.16), 0 0 22px rgba(122,69,192,.18);
    }
    .lib-sort { position:relative; flex-shrink:0; }
    .lib-sort-btn {
      height:100%; min-height:46px; padding:0 15px; display:flex; align-items:center; gap:7px;
      background:linear-gradient(160deg,#0c0a22 0%,#08061a 100%);
      border:1px solid var(--border); border-radius:14px; cursor:pointer;
      color:var(--gold2); font-family:"Cinzel",serif; font-size:10px; letter-spacing:2px; text-transform:uppercase;
      box-shadow: inset 0 2px 10px rgba(0,0,0,.4); transition: border-color .2s;
    }
    .lib-sort-btn:hover { border-color:var(--gold-dim); }
    .lib-sort-btn .lib-sort-glyph { font-size:13px; }
    .lib-sort-menu {
      position:absolute; right:0; top:calc(100% + 8px); z-index:30; min-width:216px;
      background: linear-gradient(160deg, rgba(19,14,48,.97) 0%, rgba(10,8,32,.97) 100%);
      border:1px solid var(--border); border-radius:12px; padding:6px;
      box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(201,168,76,.12), inset 0 1px 0 rgba(96,64,160,.18);
      backdrop-filter: blur(8px); display:none;
    }
    .lib-sort-menu.open { display:block; }
    .lib-sort-menu-title {
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:3px; text-transform:uppercase;
      color:var(--violet3); padding:8px 12px 6px;
    }
    .lib-sort-opt {
      display:flex; align-items:center; width:100%; text-align:left;
      background:none; border:none; cursor:pointer; padding:9px 12px; border-radius:8px;
      color:var(--text2); font-family:"Cormorant Garamond",serif; font-size:14.5px;
      transition:background .15s, color .15s;
    }
    .lib-sort-opt:hover { background: rgba(96,64,160,.14); color:var(--gold2); }
    .lib-sort-opt.active { color:var(--gold2); }
    .lib-sort-opt .tick { margin-left:auto; color:var(--gold); opacity:0; font-size:11px; }
    .lib-sort-opt.active .tick { opacity:1; }

    /* — Filtres de discipline — */
    .lib-cats { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:24px; }
    .lib-cat {
      background: rgba(12,9,36,.6); border:1px solid var(--border); border-radius:20px;
      padding:6px 14px; cursor:pointer; white-space:nowrap;
      color:var(--text3); font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:2px; text-transform:uppercase;
      transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
    }
    .lib-cat:hover { color:var(--gold2); border-color:var(--gold-dim); }
    .lib-cat.active {
      color:var(--gold3); border-color:var(--gold-dim);
      background: linear-gradient(135deg, rgba(201,168,76,.16), rgba(122,69,192,.12));
      box-shadow: 0 0 16px rgba(201,168,76,.14);
    }

    /* Filtre format : ouvrages reliés vs livres numériques (PDF) */
    .lib-format { display:flex; justify-content:center; gap:0; margin:0 auto 18px; max-width:420px;
      border:1px solid var(--border); border-radius:22px; overflow:hidden; background:rgba(12,9,36,.55); }
    .lib-fmt { flex:1; background:transparent; border:none; cursor:pointer; white-space:nowrap;
      padding:8px 12px; color:var(--text3); font-family:"Cinzel",serif; font-size:9px; letter-spacing:1.6px;
      text-transform:uppercase; transition:color .2s, background .2s; }
    .lib-fmt + .lib-fmt { border-left:1px solid var(--border); }
    .lib-fmt:hover { color:var(--gold2); }
    .lib-fmt.active { color:var(--gold3);
      background:linear-gradient(135deg, rgba(201,168,76,.16), rgba(122,69,192,.12)); }
    .lib-fmt.is-empty { opacity:.38; }
    .lib-fmt.is-empty:not(.active):hover { color:var(--text3); }

    /* — Grille des ouvrages — */
    .lib-grid {
      display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 56px 34px; align-items:stretch; justify-content:center; transition: opacity .22s ease;
    }
    .lib-grid.is-fading { opacity:0; }
    .lib-grid.is-sparse { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:58px; }
    .lib-grid.is-sparse .grimoire { width: 288px; }
    .lib-grid.is-sparse .grimoire:only-child { width: 312px; }

    /* — L'ouvrage exposé — */
    .grimoire { --halo:232,201,122; display:flex; flex-direction:column; cursor:pointer; position:relative; height:100%; }
    .grimoire-stage {
      position:relative; display:flex; align-items:flex-end; justify-content:center;
      padding: 28px 18px 0; perspective: 1300px;
    }
    .grimoire-halo {
      position:absolute; left:50%; top:40%; width:155%; aspect-ratio:1; transform:translate(-50%,-50%);
      background: radial-gradient(circle, rgba(var(--halo),.30) 0%, rgba(var(--halo),.10) 32%, transparent 68%);
      filter: blur(6px); opacity:.72; pointer-events:none; transition: opacity .5s, transform .5s;
    }
    .grimoire-circle {
      position:absolute; left:50%; top:38%; width:104%; aspect-ratio:1; transform:translate(-50%,-50%);
      opacity:.045; pointer-events:none;
      background: var(--lib-circle) center/contain no-repeat;
      animation: libSpin 120s linear infinite; transition: opacity .5s;
    }
    .grimoire:hover .grimoire-circle { opacity:.08; }
    .grimoire-cover {
      position:relative; width:100%; max-width:212px; aspect-ratio: 2/3; border-radius: 4px 7px 7px 4px;
      overflow:hidden; z-index:2; transform: rotateY(-11deg) rotateX(3deg); transform-style: preserve-3d;
      background: linear-gradient(120deg, #14102e, #0a0820);
      box-shadow: -14px 18px 34px rgba(0,0,0,.6), -4px 6px 14px rgba(0,0,0,.5), inset 0 0 0 1px rgba(201,168,76,.18);
      transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
    }
    .grimoire-cover img { width:100%; height:100%; object-fit:cover; display:block; }
    .grimoire-cover::before { /* tranche de pages dorée */
      content:""; position:absolute; top:2%; bottom:2%; right:0; width:5px; z-index:3;
      background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(232,201,122,.55) 40%, rgba(248,239,192,.9) 55%, rgba(138,106,32,.6));
    }
    .grimoire-cover::after { /* reflet sur les dorures */
      content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
      background: linear-gradient(115deg, transparent 42%, rgba(255,247,214,.16) 49%, transparent 56%);
      opacity:0; transform: translateX(-30%); transition: opacity .5s, transform .8s;
    }
    /* couverture sans image : on garde le bleu + l'étoile, on grave le titre en doré */
    .grimoire-plate {
      position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
      align-items:center; justify-content:center; gap:9px; padding:16% 13%; text-align:center;
      background:
        radial-gradient(ellipse at 50% 32%, rgba(232,201,122,.10), transparent 62%),
        linear-gradient(160deg, #171236, #0b0922);
    }
    .grimoire-plate .gp-star {
      font-size:24px; line-height:1; color:#e8c97a;
      filter: drop-shadow(0 0 7px rgba(232,201,122,.45)); transition: filter .5s;
    }
    .grimoire-plate .gp-rule {
      width:42%; height:1px; flex:0 0 auto;
      background:linear-gradient(90deg, transparent, rgba(232,201,122,.65), transparent);
    }
    .grimoire-plate .gp-title {
      font-family:"Cinzel","Cinzel Decorative",serif; font-weight:600; text-transform:uppercase;
      font-size:clamp(10px, 2.7vw, 13.5px); line-height:1.3; letter-spacing:.8px;
      background:linear-gradient(160deg, #fbf1c6, #e8c97a 45%, #c9a24c);
      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
      display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
    }
    .grimoire-plate .gp-ed {
      font-family:"Cormorant Garamond",serif; font-style:italic; font-size:9px; letter-spacing:2px;
      color:rgba(232,201,122,.72);
    }
    .grimoire:hover .grimoire-plate .gp-star { filter: drop-shadow(0 0 11px rgba(232,201,122,.65)); }
    .grimoire:hover .grimoire-cover {
      transform: translateY(-6px) scale(1.02) rotateY(-8deg) rotateX(2deg);
      box-shadow: -18px 26px 46px rgba(0,0,0,.62), -5px 8px 18px rgba(0,0,0,.5),
        inset 0 0 0 1px rgba(232,201,122,.55), 0 0 30px rgba(var(--halo),.18);
    }
    .grimoire:hover .grimoire-cover::after { opacity:1; transform: translateX(30%); }
    .grimoire:hover .grimoire-halo { opacity:1; transform: translate(-50%,-50%) scale(1.08); }

    .grimoire-shelf { position:relative; height:26px; margin-top:-2px; z-index:1; }
    .grimoire-shelf::before {
      content:""; position:absolute; left:50%; top:2px; width:74%; height:14px; transform:translateX(-50%);
      background: radial-gradient(ellipse, rgba(0,0,0,.6) 0%, transparent 72%); filter: blur(3px);
    }
    .grimoire-shelf::after {
      content:""; position:absolute; left:50%; top:9px; width:64%; height:1px; transform:translateX(-50%);
      background: linear-gradient(90deg, transparent, rgba(201,168,76,.5) 20%, rgba(248,239,192,.7) 50%, rgba(201,168,76,.5) 80%, transparent);
      box-shadow: 0 0 10px rgba(201,168,76,.25);
    }

    /* — Bloc d'infos épuré : Titre › Catégorie › Accès › Feuilleter — */
    .grimoire-info {
      text-align:center; padding: 15px 8px 4px; display:flex; flex-direction:column;
      align-items:center; gap:9px; flex:1;
    }
    .grimoire-title {
      font-family:"Cinzel",serif; font-size:14.5px; line-height:1.38; color:var(--text);
      text-transform:uppercase; letter-spacing:.5px;
      text-shadow: 0 0 14px rgba(201,168,76,.12);
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
      min-height:2.76em;
    }
    .grimoire-cat {
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:2.4px; text-transform:uppercase;
      color:var(--violet3); display:inline-flex; align-items:center; gap:6px;
      max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .grimoire-cat::before { content:"✦"; color:var(--gold-dim); font-size:8.5px; flex:0 0 auto; }
    .grimoire-format {
      display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:20px;
      font-family:"Cinzel",serif; font-size:7.5px; letter-spacing:2px; text-transform:uppercase;
      border:1px solid var(--border);
    }
    .grimoire-format::before { font-size:8px; }
    .grimoire-format.is-num  { color:var(--gold3); border-color:var(--gold-dim);
      background:linear-gradient(135deg, rgba(201,168,76,.14), rgba(122,69,192,.10)); }
    .grimoire-format.is-num::before  { content:"◈"; }
    .grimoire-format.is-phys { color:var(--violet3); border-color:rgba(176,125,224,.4);
      background:rgba(122,69,192,.10); }
    .grimoire-format.is-phys::before { content:"▤"; }
    .grimoire-access {
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:2px; text-transform:uppercase;
      color:var(--gold2); text-shadow:0 0 10px var(--gold-dim);
    }
    .grimoire-cta {
      margin-top:auto; align-self:center;
      position:relative; display:inline-flex; align-items:center; gap:7px; padding:9px 18px;
      border-radius:9px; cursor:pointer; overflow:hidden;
      background: linear-gradient(135deg, rgba(201,168,76,.13), rgba(122,69,192,.11));
      border:1px solid var(--gold-dim); color:var(--gold2);
      font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:2.5px; text-transform:uppercase;
      transition: color .25s, box-shadow .25s, border-color .25s;
    }
    .grimoire-cta::before {
      content:""; position:absolute; inset:0; pointer-events:none; transform: translateX(-120%);
      background: linear-gradient(115deg, transparent 38%, rgba(248,239,192,.28) 50%, transparent 62%); opacity:0;
    }
    .grimoire:hover .grimoire-cta { color:var(--gold3); border-color:var(--gold2); box-shadow: 0 0 22px rgba(201,168,76,.18); }
    .grimoire:hover .grimoire-cta::before { opacity:1; animation: libBorderLight 1.1s ease forwards; }

    /* voile de survol (desktop uniquement) : une phrase courte sur le bas de la couverture */
    .grimoire-veil {
      position:absolute; left:0; right:0; bottom:0; z-index:4; padding:26px 14px 12px;
      background: linear-gradient(to top, rgba(6,4,18,.93) 14%, rgba(6,4,18,.64) 58%, transparent);
      opacity:0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease;
      pointer-events:none;
    }
    .grimoire-veil p {
      margin:0; font-family:"Cormorant Garamond",serif; font-style:italic;
      font-size:12.5px; line-height:1.45; color:#f3e7c8;
    }
    @media (hover:hover) and (pointer:fine) {
      .grimoire:hover .grimoire-veil { opacity:1; transform: translateY(0); }
    }
    @media (hover:none) { .grimoire-veil { display:none; } }

    /* — Sceau ancien / médaillon — */
    .seal {
      display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 8px; border-radius:20px;
      background: radial-gradient(120% 120% at 30% 20%, rgba(201,168,76,.12), rgba(10,8,26,.4));
      border:1px solid rgba(138,106,32,.55); box-shadow: inset 0 0 8px rgba(201,168,76,.10);
      font-family:"Cinzel",serif; font-size:8px; letter-spacing:2px; text-transform:uppercase;
      color:var(--gold2); white-space:nowrap;
    }
    .seal .seal-glyph { font-size:11px; line-height:1; color:var(--gold3); text-shadow:0 0 8px var(--gold-dim); }
    .seal.is-violet { border-color: rgba(122,69,192,.5); color:var(--violet3); }
    .seal.is-violet .seal-glyph { color:#d9c2ff; text-shadow:0 0 8px var(--violet-glow); }

    @keyframes libSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
    @keyframes libBorderLight { 0%{transform:translateX(-120%);} 100%{transform:translateX(120%);} }
    @keyframes libDust {
      0% { opacity:0; transform: translateY(10px) scale(.5); }
      28% { opacity:.85; }
      100% { opacity:0; transform: translateY(-30px) scale(1); }
    }

    /* ── FICHE D'ARCHIVE (modal, type='livre') ── */
    .arch-body { padding: 0 !important; }
    .arch-dust { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:6; }
    .arch-dust i {
      position:absolute; width:3px; height:3px; border-radius:50%; opacity:0;
      background: radial-gradient(circle, #f8efc0, rgba(201,168,76,0));
      animation: libDust 1.5s ease-out forwards;
    }
    .arch-layout { display:grid; grid-template-columns: 304px 1fr; }
    .arch-left {
      position:relative; padding: 42px 26px; display:flex; align-items:flex-start; justify-content:center;
      background: linear-gradient(180deg, rgba(122,69,192,.10) 0%, transparent 46%), #07051a;
      border-right:1px solid var(--border);
    }
    .arch-cover-stage { position:sticky; top:24px; width:100%; max-width:232px; perspective:1400px; }
    .arch-halo {
      position:absolute; left:50%; top:44%; width:185%; aspect-ratio:1; transform:translate(-50%,-50%);
      background: radial-gradient(circle, rgba(var(--halo),.34) 0%, rgba(var(--halo),.10) 34%, transparent 70%);
      filter: blur(8px); pointer-events:none;
    }
    .arch-circle {
      position:absolute; left:50%; top:42%; width:152%; aspect-ratio:1; transform:translate(-50%,-50%);
      opacity:.07; pointer-events:none; background: var(--lib-circle) center/contain no-repeat;
      animation: libSpin 150s linear infinite;
    }
    .arch-cover {
      position:relative; z-index:2; width:100%; aspect-ratio:2/3; border-radius:4px 8px 8px 4px; overflow:hidden;
      transform: rotateY(-9deg) rotateX(2deg); background:#0a0820;
      box-shadow: -18px 22px 44px rgba(0,0,0,.6), inset 0 0 0 1px rgba(201,168,76,.22);
    }
    .arch-cover img { width:100%; height:100%; object-fit:cover; display:block; }
    .arch-cover::before {
      content:""; position:absolute; top:2%; bottom:2%; right:0; width:6px; z-index:3;
      background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(232,201,122,.55) 40%, rgba(248,239,192,.9) 55%, rgba(138,106,32,.6));
    }
    .arch-thumbs { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-top:18px; }

    .arch-right { padding: 42px 38px 38px; }
    .arch-eyebrow {
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:4px; text-transform:uppercase;
      color:var(--violet3); margin-bottom:10px;
    }
    .arch-title {
      font-family:"Cinzel",serif; font-size:25px; line-height:1.3; color:var(--gold2);
      text-shadow: 0 0 22px rgba(201,168,76,.2); margin-bottom:4px;
    }
    .arch-edition {
      font-family:"Cormorant Garamond",serif; font-style:italic; font-size:16px; color:var(--violet3); margin-bottom:14px;
    }
    .arch-seals { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
    .arch-lead { font-size:16px; line-height:1.8; color:var(--text); }
    .arch-buyrow {
      display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:22px 0 6px; padding:18px 0;
      border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    }
    .arch-price { font-family:"Cinzel",serif; font-size:26px; color:var(--gold2); text-shadow:0 0 14px var(--gold-dim); }
    .arch-section { margin-top:26px; }
    .arch-section > h4 {
      display:flex; align-items:center; gap:12px;
      font-family:"Cinzel",serif; font-size:11px; letter-spacing:3px; text-transform:uppercase;
      color:var(--gold-dim); margin-bottom:12px;
    }
    .arch-section > h4::after {
      content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(138,106,32,.5), transparent);
    }
    .arch-section p { font-size:15px; line-height:1.85; color:var(--text2); margin-bottom:10px; }
    .arch-section p:last-child { margin-bottom:0; }
    .arch-list { list-style:none; display:grid; gap:9px; }
    .arch-list li { position:relative; padding-left:22px; font-size:14.5px; line-height:1.7; color:var(--text2); }
    .arch-list li::before { content:"\2726"; position:absolute; left:0; top:1px; color:var(--gold-dim); font-size:11px; }
    .arch-specs { display:grid; grid-template-columns: repeat(auto-fill,minmax(148px,1fr)); gap:14px 18px; }
    .arch-specs div { border-left:1px solid var(--border); padding-left:12px; }
    .arch-specs dt {
      font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:2px; text-transform:uppercase;
      color:var(--text3); margin-bottom:3px;
    }
    .arch-specs dd { font-size:14px; color:var(--text); }
    .arch-related { display:flex; gap:16px; flex-wrap:wrap; }
    .arch-related .grimoire-mini { width:94px; cursor:pointer; text-align:center; }
    .arch-related .grimoire-mini img, .arch-related .grimoire-mini .gm-ph {
      width:94px; aspect-ratio:2/3; object-fit:cover; border-radius:3px 5px 5px 3px; display:block;
      background: linear-gradient(120deg,#14102e,#0a0820);
      box-shadow: -8px 10px 20px rgba(0,0,0,.5), inset 0 0 0 1px rgba(201,168,76,.18); transition: transform .3s;
    }
    .arch-related .grimoire-mini:hover img, .arch-related .grimoire-mini:hover .gm-ph { transform: translateY(-4px); }
    .arch-related .grimoire-mini span {
      display:block; margin-top:7px; font-family:"Cinzel",serif; font-size:9px; letter-spacing:1px;
      color:var(--text3); line-height:1.4;
    }

    @media (min-width:1120px) {
      .lib-grid { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
    }
    @media (max-width: 760px) {
      .arch-layout { grid-template-columns: 1fr; }
      .arch-left { border-right:none; border-bottom:1px solid var(--border); padding:32px 24px 26px; }
      .arch-cover-stage { position:static; max-width:172px; }
      .arch-right { padding: 28px 20px 30px; }
      .arch-title { font-size:21px; }
      .arch-price { font-size:23px; }
    }
    @media (max-width: 680px) {
      .lib-shell { padding:20px 6px 12px; border-radius:16px; }
      .lib-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 14px; }
      .lib-grid.is-sparse { gap: 30px; }
      .lib-grid.is-sparse .grimoire { width: 45%; min-width:150px; }
      .grimoire-stage { padding: 16px 4px 0; }
      .grimoire-cover { transform:none; max-width:162px; }
      .grimoire:hover .grimoire-cover { transform: translateY(-4px) scale(1.01); }
      .grimoire-info { padding-top:12px; gap:8px; }
      .grimoire-title { font-size:13px; }
      .grimoire-cta { padding:10px 16px; }
      .lib-cats {
        flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
        scrollbar-width:none; -webkit-overflow-scrolling:touch;
        margin:0 -6px; padding:0 6px 4px;
      }
      .lib-cats::-webkit-scrollbar { display:none; }
      .lib-cat { flex-shrink:0; }
      .lib-searchrow { flex-wrap:wrap; }
      .lib-search { flex-basis:100%; max-width:none; }
      .lib-sort { flex-basis:100%; }
      .lib-sort-btn { width:100%; justify-content:center; }
      .lib-sort-menu { left:0; right:0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .grimoire-circle, .arch-circle { animation:none; }
      .grimoire-cover, .grimoire-halo { transition:none; }
      .grimoire:hover .grimoire-cta::before { animation:none; }
      .arch-dust { display:none; }
    }

    /* ══════════════════════════════════════════════════════════════════
       LIVES AKASHA — espace de transmission (refonte 2026-09-01).
       Toute la logique (JS) est inchangée : uniquement présentation/organisation.
       Préfixe .lv- pour rester isolé du reste des styles du site.
       ══════════════════════════════════════════════════════════════════ */
    :root { --lv-ruby: #ff3a5c; --lv-ruby-dim: #ff3a5c55; }
    .lv-hub { font-size: 16px; line-height: 1.7; position: relative; }
    .lv-hub .modal-desc { font-size: 14.5px; line-height: 1.8; color: var(--text2); }

    /* — En-tête premium — */
    .lv-header { position: relative; padding: 4px 4px 18px; overflow: hidden; }
    .lv-header::before {
      content: ""; position: absolute; inset: -20px -10px auto -10px; height: 140px; pointer-events: none;
      background:
        radial-gradient(1.5px 1.5px at 8% 20%, #e8c97a99 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 22% 70%, #b07de099 0%, transparent 60%),
        radial-gradient(1px 1px at 40% 15%, #f5f0e888 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 62% 55%, #e8c97a77 0%, transparent 60%),
        radial-gradient(1px 1px at 78% 25%, #b07de088 0%, transparent 60%),
        radial-gradient(1.5px 1.5px at 92% 60%, #f5f0e866 0%, transparent 60%),
        radial-gradient(1px 1px at 50% 85%, #e8c97a55 0%, transparent 60%);
      opacity: .8;
    }
    .lv-header-kicker {
      display: inline-flex; align-items: center; gap: 10px; font-family: "Cinzel", serif;
      font-size: 12px; letter-spacing: 6px; color: var(--gold2); text-transform: uppercase;
      text-shadow: 0 0 18px #c9a84c55;
    }
    .lv-header-kicker::before, .lv-header-kicker::after { content: "✦"; color: var(--gold-dim); font-size: 9px; }

    /* — Grille principale : 70/30 desktop, 1 colonne mobile — */
    .lv-grid {
      display: grid; gap: 18px; margin-top: 16px;
      grid-template-columns: 1fr;
    }
    .lv-grid .lv-video-col, .lv-grid .lv-side-col { min-width: 0; }
    @media (min-width: 860px) {
      .lv-grid { grid-template-columns: minmax(0,1fr) 320px; }
    }
    .lv-section-title {
      font-family: "Cinzel", serif; color: var(--violet3); font-size: 12px; letter-spacing: 3px;
      margin: 28px 0 12px; text-transform: uppercase; display: flex; align-items: center; gap: 10px;
    }
    .lv-section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border2), transparent); }
    .lv-empty { color: var(--text3); font-style: italic; padding: 6px 2px; }

    /* — Carte de rang créateur (compacte) — */
    .lv-rank-card {
      position: relative; overflow: hidden; border-radius: 14px; padding: 20px 22px;
      display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
      background: linear-gradient(160deg, var(--lv-accent-16, #6040a022) 0%, #0a0820 60%);
      border: 1px solid var(--lv-accent-45, var(--violet2));
      box-shadow: 0 8px 30px #00000066;
    }
    .lv-rank-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--lv-accent,var(--violet3)),transparent); }
    .lv-rank-avatar {
      width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
      display: flex; align-items: center; justify-content: center; font-family: "Cinzel", serif; font-size: 24px;
      box-shadow: 0 0 20px var(--lv-accent-55, var(--violet-glow));
    }
    .lv-rank-id { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
    .lv-rank-name { font-family: "Cinzel", serif; font-size: 18px; color: var(--text); }
    .lv-rank-progress { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
    .lv-rank-bonus-row { display: flex; align-items: baseline; gap: 8px; }
    .lv-rank-bonus { font-family: "Cinzel", serif; font-size: 22px; color: var(--lv-accent, var(--violet3)); font-weight: bold; text-shadow: 0 0 12px var(--lv-accent-60, var(--violet-glow)); }
    .lv-rank-track { height: 7px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
    .lv-rank-track-fill { height: 100%; border-radius: 4px; background: var(--lv-accent, var(--violet3)); box-shadow: 0 0 10px var(--lv-accent-70, var(--violet-glow)); transition: width .6s ease; }
    .lv-rank-next { font-size: 11.5px; color: var(--text3); }

    /* ══ RETOUCHES MODALE LIVES (demande user 2026-09-06) ══
       - Titre « LIVE AKASHA » centré + ✦ agrandis.
       - Carte du compte (lv-rank-card) plus violette / contours plus marqués.
       - Tous les titres de section illuminés or-étoile ; sous-titres en violet plus visible. */
    .lv-hub .lv-header { text-align: center; }
    .lv-hub .lv-header .card-tag { margin: 0 auto 12px; }
    .lv-hub .lv-header-kicker {
      font-size: 17px; letter-spacing: 8px; justify-content: center;
      color: #f2dca0; text-shadow: 0 0 14px rgba(232,201,122,.7), 0 0 34px rgba(201,168,76,.35);
    }
    .lv-hub .lv-header-kicker::before, .lv-hub .lv-header-kicker::after {
      font-size: 15px; color: #e8c97a; text-shadow: 0 0 12px rgba(232,201,122,.75);
    }
    .lv-hub .lv-header .modal-desc { color: #c9a8ee; }
    /* « Afficher à l'accueil » — ajoute le module Lives au tableau de bord de l'accueil */
    .lv-showhome-btn {
      margin: 14px auto 0; display: inline-flex; align-items: center; gap: 7px;
      padding: 9px 20px; border-radius: 22px; cursor: pointer;
      font-family: "Cinzel", serif; font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
      color: var(--gold2); background: rgba(201,168,76,.07); border: 1px solid var(--gold-dim);
      transition: background .2s, box-shadow .2s, color .2s;
    }
    .lv-showhome-btn:hover { background: rgba(201,168,76,.16); box-shadow: 0 0 16px #c9a84c33; }
    .lv-showhome-btn.is-on {
      color: #6bd18a; border-color: rgba(107,209,138,.45); background: rgba(107,209,138,.1);
    }

    /* Carte du compte — plus violette, contours nets + halo */
    .lv-hub .lv-rank-card {
      background: linear-gradient(160deg, var(--lv-accent-16, rgba(122,69,192,.22)) 0%, rgba(52,26,104,.55) 45%, #0a0820 100%);
      border: 1.5px solid var(--lv-accent-45, #9a6de0);
      box-shadow: 0 0 26px rgba(154,109,224,.3), 0 8px 30px #00000066, inset 0 0 0 1px rgba(176,125,224,.16);
    }
    .lv-hub .lv-rank-card::before { height: 4px; background: linear-gradient(90deg,transparent,var(--lv-accent,#b07de0),transparent); box-shadow: 0 0 14px var(--lv-accent,#b07de0); }
    .lv-hub .lv-rank-name { color: #e9dcff; }
    .lv-hub .lv-rank-next { color: #b79ae0; }

    /* Tous les titres de section → or-étoile */
    .lv-hub .lv-section-title,
    .lv-hub .lv-start-title,
    .lv-hub summary.lv-section-title {
      color: #f2dca0 !important;
      text-shadow: 0 0 12px rgba(232,201,122,.55), 0 0 26px rgba(201,168,76,.28);
    }
    .lv-hub .lv-section-title::after { background: linear-gradient(90deg, rgba(232,201,122,.4), transparent); }

    /* Sous-titres / textes sous les titres → violet plus lumineux */
    .lv-hub .lv-empty,
    .lv-hub .lv-start-card .form-row label,
    .lv-hub .lv-other-meta,
    .lv-hub .lv-replay-meta { color: #c4a2ea !important; }

    /* Archives des lives — <details> repliable, fermé par défaut */
    .lv-hub details.lv-archives { margin-top: 8px; }
    .lv-hub details.lv-archives > summary {
      cursor: pointer; list-style: none; user-select: none;
      margin: 28px 0 0; align-items: center;
    }
    .lv-hub details.lv-archives > summary::-webkit-details-marker { display: none; }
    .lv-hub details.lv-archives > summary::before {
      content: "\25B8"; display: inline-block; margin-right: 4px; color: #e8c97a;
      transition: transform .2s ease; font-size: 13px;
    }
    .lv-hub details.lv-archives[open] > summary::before { transform: rotate(90deg); }
    .lv-hub details.lv-archives > *:not(summary) { margin-top: 12px; }

    /* — Lecteur vidéo — */
    .lv-player-frame {
      position: relative; border-radius: 16px; overflow: hidden; background: #020104;
      border: 1px solid #7a5fd066; box-shadow: 0 0 0 1px #00000080, 0 16px 50px #000000aa, 0 0 40px #6a3fc02c;
    }
    .lv-player-surface { width: 100%; aspect-ratio: 16/9; background: #020104; display: flex; align-items: center; justify-content: center; }
    .lv-player-surface video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
    .lv-player-badge-live {
      position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; align-items: center; gap: 7px;
      background: #0000008c; backdrop-filter: blur(4px); border: 1px solid var(--lv-ruby-dim);
      color: #ffd7dd; font-family: "Cinzel", serif; font-size: 10.5px; letter-spacing: 2px;
      padding: 5px 11px 5px 9px; border-radius: 999px;
    }
    .lv-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lv-ruby); box-shadow: 0 0 0 0 var(--lv-ruby-dim); animation: lvRubyPulse 1.6s ease-out infinite; flex-shrink: 0; }
    @keyframes lvRubyPulse {
      0%   { box-shadow: 0 0 0 0 #ff3a5c66; }
      70%  { box-shadow: 0 0 0 8px #ff3a5c00; }
      100% { box-shadow: 0 0 0 0 #ff3a5c00; }
    }
    .lv-player-badge-viewers {
      position: absolute; top: 12px; right: 12px; z-index: 2; background: #0000008c; backdrop-filter: blur(4px);
      border: 1px solid var(--border2); color: var(--text2); font-size: 11.5px; padding: 5px 11px; border-radius: 999px;
    }
    .lv-player-title-bar {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 16px 12px;
      background: linear-gradient(to top, #000000c8, transparent); display: flex; flex-direction: column; gap: 2px;
      pointer-events: none;
    }
    .lv-player-title { font-family: "Cinzel", serif; font-size: 14.5px; color: var(--text); text-shadow: 0 1px 6px #000; }
    .lv-player-sub { font-size: 11.5px; color: var(--text2); font-style: italic; }
    .lv-float-emoji {
      position: absolute; bottom: 54px; font-size: 22px; z-index: 3; pointer-events: none;
      animation: lvFloatUp 1.8s ease-out forwards; filter: drop-shadow(0 2px 6px #000000aa);
    }
    @keyframes lvFloatUp {
      0%   { opacity: 0; transform: translateY(0) scale(.6); }
      15%  { opacity: 1; transform: translateY(-10px) scale(1); }
      100% { opacity: 0; transform: translateY(-90px) scale(1.05); }
    }

    /* — Réactions — */
    .lv-reactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .lv-reaction-btn {
      background: var(--card); border: 1px solid var(--border2); color: var(--text2); border-radius: 999px;
      font-size: 15px; padding: 7px 13px; cursor: pointer; transition: all .18s; line-height: 1;
    }
    .lv-reaction-btn:hover { border-color: #7a5fd0aa; background: #6040a01a; transform: translateY(-1px); }
    .lv-reaction-like { font-size: 13px; display: inline-flex; align-items: center; gap: 5px; color: var(--text2); }
    .lv-reaction-like[data-liked="1"] { color: #ff6a8a; border-color: #ff6a8a55; }

    /* — Chat — */
    .lv-chat-panel {
      display: flex; flex-direction: column; height: 100%; min-height: 360px; max-height: 560px;
      background: linear-gradient(160deg, #100c30 0%, #0a0820 100%); border: 1px solid var(--border2);
      border-radius: 14px; overflow: hidden; box-shadow: 0 4px 20px #00000066, inset 0 1px 0 #6040a018;
    }
    .lv-chat-panel-head {
      font-family: "Cinzel", serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--gold2); padding: 13px 16px; border-bottom: 1px solid var(--border2); flex-shrink: 0;
    }
    .lv-chat-messages { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
    .lv-chat-empty { color: var(--text3); font-style: italic; padding: 10px 2px; font-size: 13px; }
    .lv-chat-blocked { color: #ff8a8a; }
    .lv-chat-msg { display: flex; gap: 9px; align-items: flex-start; }
    .lv-chat-avatar {
      width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      font-family: "Cinzel", serif; font-size: 11.5px; background: linear-gradient(135deg,#1a0a3a,#2a1050);
      border: 1px solid rgba(100,60,200,0.3); color: #8060c0;
    }
    .lv-chat-msg-host .lv-chat-avatar { background: linear-gradient(135deg,#3a2800,#6a4800); border-color: rgba(201,168,76,.5); color: #e8c870; }
    .lv-chat-msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .lv-chat-msg-name { color: var(--violet3); font-weight: 600; margin-right: 5px; }
    .lv-chat-msg-me .lv-chat-msg-name { color: var(--gold2); }
    .lv-chat-msg-text { color: var(--text); word-break: break-word; }
    .lv-role-tag { font-size: 10.5px; margin-right: 5px; opacity: .9; }
    .lv-role-host { color: var(--gold2); }
    .lv-role-mod { color: #f07080; }
    .lv-role-premium { color: var(--gold); }
    .lv-chat-msg-actions { display: flex; gap: 3px; flex-shrink: 0; }
    .lv-chat-emojis { display: flex; gap: 3px; flex-wrap: wrap; padding: 6px 10px; border-top: 1px solid var(--border2); flex-shrink: 0; }
    .lv-chat-emoji-btn { background: none; border: none; cursor: pointer; font-size: 15px; padding: 2px 4px; }
    .lv-chat-input-row { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--border2); flex-shrink: 0; }
    .lv-chat-input {
      flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px;
      color: var(--text); padding: .55rem .8rem; font-family: inherit; font-size: 13px;
    }
    .lv-chat-input:focus { outline: none; border-color: var(--violet2); box-shadow: 0 0 0 3px #6040a018; }
    .lv-chat-send {
      width: 38px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--gold-dim); cursor: pointer;
      background: linear-gradient(135deg, #c9a84c22 0%, #8a6a1022 100%); color: var(--gold2); font-size: 15px;
    }
    .lv-chat-send:hover { background: linear-gradient(135deg, #c9a84c33, #8a6a1033); }

    /* — Bloc "démarrer un live" — */
    .lv-start-card {
      border-radius: 14px; padding: 22px 22px 20px; margin-top: 16px;
      background: linear-gradient(160deg, #6a3fc022 0%, #0a0820 65%); border: 1px solid var(--border2);
    }
    .lv-start-title { font-family: "Cinzel", serif; font-size: 15px; color: var(--text); margin-bottom: 16px; letter-spacing: .5px; }

    /* — Autres lives en cours — */
    .lv-other-card {
      background: linear-gradient(160deg, #0e0b28 0%, #0a0820 100%); border: 1px solid var(--border);
      border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 4px 20px #00000066, inset 0 1px 0 #6040a018;
    }
    .lv-other-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .lv-other-live-pill {
      display: inline-flex; align-items: center; gap: 6px; background: var(--lv-ruby-dim); border: 1px solid var(--lv-ruby-dim);
      color: #ffd7dd; font-family: "Cinzel", serif; font-size: 10px; letter-spacing: 1.5px; padding: 4px 9px; border-radius: 999px; flex-shrink: 0;
    }
    .lv-other-info { flex: 1; min-width: 160px; }
    .lv-other-title { font-family: "Cinzel", serif; font-size: 15px; color: var(--text); }
    .lv-other-meta { font-size: 12px; color: var(--text3); margin-top: 2px; font-style: italic; }
    .lv-other-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
    .lv-join-btn {
      padding: 8px 18px; border-radius: 999px; border: 1px solid var(--gold-dim); cursor: pointer;
      background: linear-gradient(135deg, #c9a84c22 0%, #8a6a1022 100%); color: var(--gold2);
      font-family: "Cinzel", serif; font-size: 11px; letter-spacing: 1.5px;
    }
    .lv-join-btn:hover { background: linear-gradient(135deg, #c9a84c33, #8a6a1033); }
    .lv-grid-joined { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border2); }

    /* — Interactions (question / sondage / quiz) — */
    .lv-interactions-card {
      margin-top: 16px; padding: 18px 20px; border-radius: 12px;
      background: linear-gradient(160deg, #0e0b28 0%, #0a0820 100%); border: 1px solid var(--border2);
    }
    .lv-create-interaction-btn {
      display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; cursor: pointer;
      background: #6040a01f; border: 1px solid var(--violet2); color: var(--violet3);
      font-family: "Cinzel", serif; font-size: 11.5px; letter-spacing: 2px; transition: all .18s;
    }
    .lv-create-interaction-btn:hover, .lv-create-interaction-btn.active { background: #6040a038; box-shadow: 0 0 16px #6040a033; }
    .lv-interaction-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border2); }
    .lv-choice-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
    .lv-choice-row { display: flex; align-items: center; gap: 10px; }
    .lv-choice-num {
      width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      font-size: 11px; color: var(--text3); border: 1px solid var(--border2);
    }
    .lv-choice-row input { flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: .55rem .7rem; font-family: inherit; font-size: 13px; }
    .lv-choice-row input:focus { outline: none; border-color: var(--violet2); }
    .lv-add-choice-btn {
      background: none; border: 1px dashed var(--border2); color: var(--text3); border-radius: 8px;
      padding: 7px 14px; font-size: 12px; cursor: pointer; margin-bottom: 14px;
    }
    .lv-add-choice-btn:hover { color: var(--violet3); border-color: var(--violet2); }
    .lv-questions-recap { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }

    /* — Carte de vote (côté spectateur) — */
    .lv-poll-slot { margin-top: 14px; }
    .lv-poll-card {
      border-radius: 12px; padding: 16px 18px; background: linear-gradient(160deg, #1a0c50aa, #0a0820); border: 1px solid rgba(160,120,255,.35);
    }
    .lv-poll-kicker { font-family: "Cinzel", serif; font-size: 10.5px; letter-spacing: 2.5px; color: var(--violet3); text-transform: uppercase; margin-bottom: 8px; }
    .lv-poll-question { font-size: 15px; color: var(--text); margin-bottom: 12px; line-height: 1.5; }
    .lv-poll-options { display: flex; flex-direction: column; gap: 8px; }
    .lv-poll-option {
      display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 10px 14px;
      background: rgba(255,255,255,.03); border: 1px solid var(--border2); border-radius: 9px; color: var(--text2);
      font-family: inherit; font-size: 13.5px; cursor: pointer; transition: all .16s;
    }
    .lv-poll-option:hover { border-color: #7a5fd0aa; background: #6040a01a; color: var(--text); }
    .lv-poll-bullet { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--violet3); flex-shrink: 0; }
    .lv-poll-result { padding: 12px 16px; border-radius: 9px; font-style: italic; font-size: 13.5px; }
    .lv-poll-ok { background: #5eeb9614; border: 1px solid #5eeb9644; color: #5eeb96; }
    .lv-poll-ko { background: #ff8a8a14; border: 1px solid #ff8a8a44; color: #ff8a8a; }
    .lv-poll-empty { color: var(--text3); font-style: italic; font-size: 13px; }
    .lv-poll-card-compact { padding: 14px 16px; }

    /* — Lives à venir — */
    .lv-upcoming-list { display: flex; flex-direction: column; gap: 10px; }
    .lv-upcoming-card {
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
      background: linear-gradient(160deg, #0e0b28 0%, #0a0820 100%); border: 1px solid var(--border);
      border-radius: 12px; padding: 12px 16px; box-shadow: 0 4px 20px #00000055;
    }
    .lv-upcoming-date {
      display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0;
      border-radius: 10px; background: #6040a01f; border: 1px solid var(--border2);
    }
    .lv-upcoming-day { font-family: "Cinzel", serif; font-size: 18px; color: var(--gold2); line-height: 1; }
    .lv-upcoming-month { font-size: 9.5px; letter-spacing: 1.5px; color: var(--text3); margin-top: 2px; }
    .lv-upcoming-body { flex: 1; min-width: 150px; }
    .lv-upcoming-title { font-family: "Cinzel", serif; font-size: 14px; color: var(--text); }
    .lv-upcoming-meta { font-size: 12px; color: var(--text3); margin-top: 3px; font-style: italic; }
    .lv-remind-btn {
      background: none; border: 1px solid var(--violet2); color: var(--violet3); border-radius: 999px;
      padding: 7px 15px; font-size: 11.5px; cursor: pointer; white-space: nowrap;
    }
    .lv-remind-btn:hover { background: #6040a01f; }
    .lv-remind-btn.lv-remind-done { border-color: #5eeb9666; color: #5eeb96; cursor: default; }

    /* — Mémoire des transmissions (lives passés) — */
    .lv-replays-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
    @media (min-width: 640px) { .lv-replays-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 960px) { .lv-replays-grid { grid-template-columns: repeat(3, 1fr); } }
    .lv-replay-card {
      background: linear-gradient(160deg, #0e0b28 0%, #0a0820 100%); border: 1px solid var(--border);
      border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .2s, transform .2s;
    }
    .lv-replay-card:hover { border-color: #6040a066; transform: translateY(-2px); }
    .lv-replay-thumb {
      aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
      background: radial-gradient(ellipse at 50% 30%, #3a2a7a44 0%, #0a0820 75%);
    }
    .lv-replay-ended { font-size: 11px; letter-spacing: 1.5px; color: var(--text3); font-family: "Cinzel", serif; }
    .lv-replay-title { font-family: "Cinzel", serif; font-size: 13px; color: var(--text); padding: 10px 12px 2px; }
    .lv-replay-meta { font-size: 11.5px; color: var(--text3); padding: 0 12px 12px; font-style: italic; }

    @media (max-width: 640px) {
      .lv-rank-card { padding: 16px; }
      .lv-rank-progress { min-width: 100%; order: 3; }
    }


    /* ══════════════════════════════════════════════════════════════════
       LIVE AKASHA — chambre de diffusion sacrée (refonte DA 2026-09-30).
       Surcouche purement visuelle, scopée .lv-hub : parchemin alchimique,
       or patiné, sceaux, poussière d'étoiles. Logique JS inchangée.
       ══════════════════════════════════════════════════════════════════ */
    .lv-hub {
      --lv-gold: #d9b865; --lv-gold-hi: #f4e2a8; --lv-gold-lo: #8a6a2a; --lv-ivory: #efe6d2; --lv-moon: #f7f3ea;
      --lv-parch: linear-gradient(165deg, rgba(58,36,94,.42) 0%, rgba(24,14,46,.88) 38%, rgba(10,7,26,.96) 100%);
      --lv-grain: radial-gradient(rgba(232,201,122,.05) 1px, transparent 1.4px) 0 0/7px 7px;
      font-size: 16.5px; line-height: 1.75; isolation: isolate; color: var(--lv-ivory);
      animation: lvRise .7s cubic-bezier(.2,.7,.2,1) both;
    }
    @keyframes lvRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

    /* — Fond : halo de temple, brume, poussière d'étoiles — */
    .lv-hub::before {
      content: ""; position: absolute; inset: -30px -24px; z-index: -2; pointer-events: none; border-radius: 22px;
      background:
        radial-gradient(ellipse 60% 38% at 50% 0%, rgba(224,162,74,.17), transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 55%, rgba(122,69,192,.16), transparent 70%),
        radial-gradient(ellipse 50% 40% at 10% 80%, rgba(185,121,74,.10), transparent 70%);
    }
    .lv-hub::after { /* rosace sacrée quasi invisible */
      content: ""; position: absolute; left: 50%; top: 210px; width: 620px; height: 620px; margin-left: -310px; z-index: -1; pointer-events: none;
      opacity: .07; animation: lvSlowSpin 240s linear infinite;
      background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23e8c97a' stroke-width='.5'><circle cx='100' cy='100' r='96'/><circle cx='100' cy='100' r='70'/><circle cx='100' cy='100' r='44'/><g><circle cx='100' cy='60' r='40'/><circle cx='100' cy='140' r='40'/><circle cx='65' cy='80' r='40'/><circle cx='135' cy='80' r='40'/><circle cx='65' cy='120' r='40'/><circle cx='135' cy='120' r='40'/></g><path d='M100 4 L112 88 L196 100 L112 112 L100 196 L88 112 L4 100 L88 88Z'/></svg>") center/contain no-repeat;
    }
    @keyframes lvSlowSpin { to { transform: rotate(360deg); } }
    .lv-mist { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: 18px; }
    .lv-mist::before, .lv-mist::after {
      content: ""; position: absolute; width: 70%; height: 240px; border-radius: 50%; filter: blur(46px); opacity: .5;
      background: radial-gradient(closest-side, rgba(150,100,210,.22), transparent);
      animation: lvMist 26s ease-in-out infinite alternate;
    }
    .lv-mist::before { top: 30%; left: -20%; }
    .lv-mist::after { top: 62%; right: -20%; background: radial-gradient(closest-side, rgba(224,162,74,.14), transparent); animation-duration: 34s; animation-direction: alternate-reverse; }
    @keyframes lvMist { from { transform: translateX(-4%); } to { transform: translateX(14%); } }
    .lv-dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
    .lv-dust::before, .lv-dust::after {
      content: ""; position: absolute; inset: -40px 0; opacity: .75;
      background:
        radial-gradient(1.6px 1.6px at 12% 18%, #f4e2a8, transparent 60%), radial-gradient(1.2px 1.2px at 28% 52%, #c9a8ee, transparent 60%),
        radial-gradient(1.8px 1.8px at 44% 30%, #e8c97a, transparent 60%), radial-gradient(1.2px 1.2px at 63% 70%, #f7f3ea, transparent 60%),
        radial-gradient(1.6px 1.6px at 78% 22%, #c9a8ee, transparent 60%), radial-gradient(1.4px 1.4px at 90% 58%, #e8c97a, transparent 60%),
        radial-gradient(1.2px 1.2px at 6% 82%, #e8c97a, transparent 60%), radial-gradient(1.4px 1.4px at 55% 92%, #f4e2a8, transparent 60%);
      animation: lvTwinkle 6s ease-in-out infinite alternate, lvDrift 40s linear infinite;
    }
    .lv-dust::after { transform: translateY(-50%) scale(1.3); opacity: .45; animation-duration: 9s, 70s; animation-delay: -3s, -20s; }
    @keyframes lvTwinkle { from { opacity: .25; } to { opacity: .85; } }
    @keyframes lvDrift { from { translate: 0 0; } to { translate: 0 60px; } }

    /* — Coins ornementaux (parchemin / manuscrit) — */
    .lv-corners { position: relative; }
    .lv-corners::before, .lv-corners::after {
      content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; opacity: .8; z-index: 1;
      border: 1px solid var(--lv-gold);
    }
    .lv-corners::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
    .lv-corners::after { bottom: 7px; right: 7px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }

    /* — En-tête cérémoniel — */
    .lv-hub .lv-header { padding: 14px 6px 26px; }
    .lv-hub .lv-header::before { height: 190px; }
    .lv-header-seal { position: relative; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 6px; color: var(--lv-gold); filter: drop-shadow(0 0 10px rgba(224,162,74,.55)); animation: lvSealGlow 5s ease-in-out infinite; }
    .lv-header-seal svg { animation: lvSlowSpin 90s linear infinite; }
    .lv-header-seal-live { position: absolute; font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 2.5px; color: var(--lv-gold-hi); padding-left: 2.5px; text-shadow: 0 0 8px rgba(244,226,168,.8); }
    @keyframes lvSealGlow { 50% { filter: drop-shadow(0 0 18px rgba(244,226,168,.75)); } }
    .lv-hub .lv-header-kicker {
      font-size: clamp(22px, 5.2vw, 34px); letter-spacing: clamp(6px, 1.8vw, 13px); font-weight: 600; padding-left: .6em;
      background: linear-gradient(180deg, #fff3c9 0%, #e8c97a 48%, #b98a3a 100%); -webkit-background-clip: text; background-clip: text;
      color: transparent; text-shadow: none; filter: drop-shadow(0 0 16px rgba(224,162,74,.45));
    }
    .lv-hub .lv-header-kicker::before, .lv-hub .lv-header-kicker::after {
      font-size: 14px; color: var(--lv-gold); -webkit-text-fill-color: var(--lv-gold); text-shadow: 0 0 12px rgba(232,201,122,.8); animation: lvTwinkle 3.2s ease-in-out infinite alternate;
    }
    .lv-orn { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px auto 4px; max-width: 420px; color: var(--lv-gold); }
    .lv-orn i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--lv-gold) 60%, transparent); }
    .lv-orn b { font-weight: normal; font-size: 15px; text-shadow: 0 0 12px rgba(232,201,122,.8); }
    .lv-hub .lv-header .modal-desc { color: #d7c6ee; max-width: 640px; margin: 10px auto 0 !important; font-size: 15px; font-style: italic; }

    /* — Titres de section : chapitres de grimoire — */
    .lv-hub .lv-section-title {
      font-size: 14px; letter-spacing: 5px; margin: 40px 0 16px; gap: 12px;
      background: linear-gradient(180deg, #fff3c9, #d9b865); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none;
    }
    .lv-hub .lv-section-title::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--lv-gold)); order: -2; }
    .lv-hub .lv-section-title .lv-glyph { order: -1; color: var(--lv-gold); -webkit-text-fill-color: var(--lv-gold); font-size: 11px; text-shadow: 0 0 10px rgba(232,201,122,.8); }
    .lv-hub .lv-section-title::after { height: 1px; background: linear-gradient(90deg, rgba(217,184,101,.55), rgba(217,184,101,.05)); }
    .lv-hub .lv-empty {
      text-align: center; padding: 26px 18px !important; border-radius: 12px; font-size: 14.5px; color: #cdb8ea !important;
      border: 1px dashed rgba(217,184,101,.32); background: radial-gradient(ellipse at 50% 0%, rgba(224,162,74,.07), transparent 70%), var(--lv-grain);
    }
    .lv-hub .lv-empty::before { content: "\2726"; display: block; color: var(--lv-gold); font-style: normal; margin-bottom: 6px; opacity: .8; }

    /* — Cartes : feuillets sacrés — */
    .lv-hub .lv-rank-card, .lv-hub .lv-start-card, .lv-hub .lv-other-card, .lv-hub .lv-upcoming-card,
    .lv-hub .lv-interactions-card, .lv-hub .lv-replay-card, .lv-hub .lv-poll-card {
      background: var(--lv-grain), var(--lv-parch);
      border: 1px solid rgba(217,184,101,.42);
      box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 26px rgba(224,162,74,.07), inset 0 0 0 4px rgba(7,5,26,.55), inset 0 0 0 5px rgba(217,184,101,.14), inset 0 1px 0 rgba(244,226,168,.14);
      transition: border-color .3s, box-shadow .3s, transform .3s;
    }
    .lv-hub .lv-other-card:hover, .lv-hub .lv-upcoming-card:hover, .lv-hub .lv-replay-card:hover {
      border-color: rgba(244,226,168,.7); transform: translateY(-2px);
      box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 34px rgba(224,162,74,.2), inset 0 0 0 4px rgba(7,5,26,.55), inset 0 0 0 5px rgba(217,184,101,.22);
    }
    .lv-hub .lv-upcoming-card { padding: 14px 18px; border-radius: 12px; }
    .lv-hub .lv-upcoming-date { border-color: rgba(217,184,101,.5) !important; background: radial-gradient(circle at 50% 0%, rgba(224,162,74,.2), rgba(10,7,26,.8)) !important; }
    .lv-hub .lv-upcoming-day { font-size: 22px; color: var(--lv-gold-hi); text-shadow: 0 0 12px rgba(232,201,122,.6); }
    .lv-hub .lv-upcoming-month { color: var(--lv-gold) !important; }
    .lv-hub .lv-upcoming-title, .lv-hub .lv-other-title, .lv-hub .lv-replay-title { color: var(--lv-moon); font-size: 15.5px; }
    .lv-hub .lv-upcoming-meta, .lv-hub .lv-other-meta, .lv-hub .lv-replay-meta { color: #cdb8ea !important; font-size: 13px; }

    /* — Jauge d'aura créateur — */
    .lv-hub .lv-rank-card { padding: 26px 26px 24px; border-radius: 16px; gap: 22px; }
    .lv-hub .lv-rank-card::before { /* liseré d'or en haut (remplace les coins sur cette carte) */
      inset: 0 0 auto 0; width: auto; height: 2px; border: 0; border-radius: 0; opacity: 1;
      background: linear-gradient(90deg, transparent, var(--lv-accent, var(--lv-gold)), var(--lv-gold-hi), var(--lv-accent, var(--lv-gold)), transparent); box-shadow: 0 0 18px var(--lv-accent, var(--lv-gold));
    }
    .lv-hub .lv-rank-avatar { width: 68px; height: 68px; box-shadow: 0 0 0 3px rgba(7,5,26,.9), 0 0 0 4px var(--lv-gold), 0 0 26px var(--lv-accent-55, rgba(224,162,74,.5)); animation: lvSealGlow 5s ease-in-out infinite; }
    .lv-hub .lv-rank-name { color: var(--lv-moon); font-size: 20px; letter-spacing: 1px; }
    .lv-hub .lv-rank-bonus { font-size: 30px; background: linear-gradient(180deg, #fff3c9, var(--lv-accent, #d9b865)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 10px var(--lv-accent-60, rgba(224,162,74,.5))); }
    .lv-hub .lv-rank-next { color: #cdb8ea; font-size: 12.5px; }
    .lv-hub .lv-rank-track { position: relative; height: 10px; border-radius: 6px; background: rgba(7,5,26,.85); border: 1px solid rgba(217,184,101,.4); box-shadow: inset 0 1px 4px rgba(0,0,0,.8); overflow: hidden; }
    .lv-hub .lv-rank-track-fill { position: relative; background: linear-gradient(90deg, var(--lv-gold-lo), var(--lv-accent, var(--lv-gold)) 70%, var(--lv-gold-hi)); box-shadow: 0 0 14px var(--lv-accent-70, rgba(224,162,74,.7)); overflow: hidden; }
    .lv-hub .lv-rank-track-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: lvShine 3.8s ease-in-out infinite; }
    @keyframes lvShine { 60%, 100% { transform: translateX(100%); } }
    .lv-rank-ticks { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(7,5,26,.75) calc(10% - 1px) 10%); }

    /* — Autel de préparation — */
    .lv-hub .lv-start-card { padding: 34px 30px 30px; border-radius: 18px; text-align: center; border-color: rgba(217,184,101,.55); }
    .lv-hub .lv-start-card::before { top: 10px; left: 10px; width: 26px; height: 26px; }
    .lv-hub .lv-start-card::after { bottom: 10px; right: 10px; width: 26px; height: 26px; }
    .lv-hub .lv-start-title { font-size: 22px; letter-spacing: 4px; margin-bottom: 4px; text-transform: uppercase; background: linear-gradient(180deg,#fff3c9,#d9b865); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none; }
    .lv-start-sub { font-style: italic; color: #cdb8ea; font-size: 14px; margin-bottom: 20px; }
    .lv-hub .lv-start-card .form-row { text-align: left; max-width: 520px; margin-left: auto; margin-right: auto; }

    /* Choix cérémoniel Maintenant / Plus tard */
    .lv-toggle { display: flex; max-width: 360px; margin: 0 auto 24px; padding: 4px; gap: 4px; border-radius: 40px; background: rgba(7,5,26,.8); border: 1px solid rgba(217,184,101,.4); box-shadow: inset 0 2px 8px rgba(0,0,0,.7); }
    .lv-hub .lv-toggle .subtab-btn {
      flex: 1; border: 1px solid transparent; border-radius: 36px; background: transparent; color: #b9a6d4; box-shadow: none;
      font-family: "Cinzel", serif; font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase; padding: 10px 14px; transition: all .35s;
    }
    .lv-hub .lv-toggle .subtab-btn:hover { color: var(--lv-gold-hi); }
    .lv-hub .lv-toggle .subtab-btn.active {
      color: #2a1a06; font-weight: 700; border-color: rgba(255,243,201,.6);
      background: linear-gradient(180deg, #f4e2a8, #d9b865 55%, #a9802f); box-shadow: 0 0 18px rgba(224,162,74,.55), inset 0 1px 0 rgba(255,255,255,.6);
    }

    /* Cartouches d'inscription */
    .lv-hub .form-row label { color: var(--lv-gold) !important; letter-spacing: 4px; font-size: 11px; text-shadow: 0 0 10px rgba(224,162,74,.35); }
    .lv-hub .form-row input, .lv-hub .form-row select, .lv-hub .form-row textarea, .lv-hub .lv-choice-row input, .lv-hub .lv-chat-input {
      background: linear-gradient(180deg, rgba(4,3,14,.92), rgba(18,10,38,.85)), var(--lv-grain);
      border: 1px solid rgba(217,184,101,.35); border-bottom: 1px solid rgba(217,184,101,.7); border-radius: 6px;
      color: var(--lv-moon); font-size: 16px; padding: .8rem 1rem; box-shadow: inset 0 2px 10px rgba(0,0,0,.65);
      transition: border-color .3s, box-shadow .3s;
    }
    .lv-hub .form-row input::placeholder, .lv-hub .lv-choice-row input::placeholder, .lv-hub .lv-chat-input::placeholder { color: rgba(205,184,234,.5); font-style: italic; font-family: "Cinzel", serif; font-size: 13.5px; letter-spacing: .5px; }
    .lv-hub .form-row input:focus, .lv-hub .form-row select:focus, .lv-hub .lv-choice-row input:focus, .lv-hub .lv-chat-input:focus {
      outline: none; border-color: var(--lv-gold-hi);
      box-shadow: inset 0 2px 10px rgba(0,0,0,.65), 0 0 0 3px rgba(224,162,74,.16), 0 0 22px rgba(154,109,224,.3);
    }

    /* Bouton talisman / portail */
    .lv-hub .add-btn, .lv-hub .lv-create-interaction-btn {
      position: relative; overflow: hidden; display: block; margin: 8px auto 0; cursor: pointer;
      font-family: "Cinzel", serif; letter-spacing: 3px; text-transform: uppercase; font-size: 13.5px; border-radius: 40px;
      color: #2a1a06; font-weight: 700; padding: 15px 34px; min-width: min(100%, 360px);
      background: linear-gradient(180deg, #f9ebb6 0%, #e0bd6a 45%, #a9802f 100%); border: 1px solid #fff3c9;
      box-shadow: 0 0 0 4px rgba(7,5,26,.85), 0 0 0 5px rgba(217,184,101,.65), 0 10px 26px rgba(0,0,0,.55), 0 0 30px rgba(224,162,74,.4), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 6px rgba(120,80,20,.4);
      transition: transform .3s, box-shadow .3s, filter .3s;
    }
    .lv-hub .add-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s; }
    .lv-hub .add-btn:hover, .lv-hub .lv-create-interaction-btn:hover {
      background: linear-gradient(180deg, #fff3c9 0%, #e8c97a 45%, #b98a3a 100%); transform: translateY(-2px); filter: saturate(1.1);
      box-shadow: 0 0 0 4px rgba(7,5,26,.85), 0 0 0 5px #f4e2a8, 0 14px 30px rgba(0,0,0,.6), 0 0 54px rgba(244,200,110,.65), 0 0 90px rgba(154,109,224,.3), inset 0 1px 0 rgba(255,255,255,.8);
    }
    .lv-hub .add-btn:hover::before { transform: translateX(120%); }
    .lv-hub .add-btn:active { transform: translateY(0) scale(.985); }
    .lv-portal-ring { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid #fff3c9; opacity: 0; pointer-events: none; }
    .lv-portal-btn.lv-burst .lv-portal-ring { animation: lvRing .9s ease-out; }
    @keyframes lvRing { from { opacity: .95; transform: scale(1); } to { opacity: 0; transform: scale(34); } }
    .lv-spark { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #fff3c9; box-shadow: 0 0 8px #e8c97a; pointer-events: none; animation: lvSpark .85s ease-out forwards; }
    @keyframes lvSpark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
    .lv-portal-label { position: relative; z-index: 1; }

    /* Boutons secondaires : or contour */
    .lv-hub .lv-join-btn, .lv-hub .lv-remind-btn, .lv-hub .lv-add-choice-btn, .lv-hub .lv-reaction-btn, .lv-hub .lv-showhome-btn {
      border: 1px solid rgba(217,184,101,.55); color: var(--lv-gold-hi); background: rgba(217,184,101,.06);
      font-family: "Cinzel", serif; letter-spacing: 1.5px; transition: all .3s;
    }
    .lv-hub .lv-join-btn:hover, .lv-hub .lv-remind-btn:hover, .lv-hub .lv-add-choice-btn:hover, .lv-hub .lv-reaction-btn:hover, .lv-hub .lv-showhome-btn:hover {
      background: rgba(217,184,101,.16); border-color: var(--lv-gold-hi); box-shadow: 0 0 20px rgba(224,162,74,.4); color: #fff3c9;
    }
    .lv-hub .lv-showhome-btn.is-on { color: #8fe3a8; border-color: rgba(107,209,138,.5); background: rgba(107,209,138,.1); }
    .lv-hub .lv-join-btn { padding: 9px 18px; border-radius: 24px; }

    /* Live en cours : présence vivante */
    .lv-hub .lv-player-frame {
      border: 1px solid rgba(217,184,101,.6); animation: lvAura 6s ease-in-out infinite;
      box-shadow: 0 0 0 1px #000, 0 16px 50px rgba(0,0,0,.7), 0 0 40px rgba(154,109,224,.22), 0 0 0 5px rgba(7,5,26,.85), 0 0 0 6px rgba(217,184,101,.3);
    }
    @keyframes lvAura { 50% { box-shadow: 0 0 0 1px #000, 0 16px 50px rgba(0,0,0,.7), 0 0 60px rgba(224,162,74,.3), 0 0 0 5px rgba(7,5,26,.85), 0 0 0 6px rgba(217,184,101,.5); } }
    .lv-hub .lv-chat-panel { border: 1px solid rgba(217,184,101,.4); background: var(--lv-grain), var(--lv-parch); box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 4px rgba(7,5,26,.5), inset 0 0 0 5px rgba(217,184,101,.12); }
    .lv-hub .lv-chat-panel-head { font-family: "Cinzel", serif; letter-spacing: 3px; color: var(--lv-gold-hi); border-bottom: 1px solid rgba(217,184,101,.35); }
    .lv-hub .lv-chat-msg-name { color: #d2b6f5; }
    .lv-hub .lv-chat-send { border-color: rgba(217,184,101,.6); color: var(--lv-gold-hi); }

    /* Archives */
    .lv-hub .lv-replay-thumb { background: radial-gradient(ellipse at 50% 30%, rgba(224,162,74,.14), rgba(10,7,26,.95) 75%), var(--lv-grain); border-bottom: 1px solid rgba(217,184,101,.25); }
    .lv-hub .lv-replay-ended { color: var(--lv-gold) !important; letter-spacing: 2.5px; }

    @media (max-width: 640px) {
      .lv-hub { font-size: 16px; }
      .lv-hub .lv-start-card { padding: 26px 16px 22px; }
      .lv-hub .lv-section-title { letter-spacing: 3px; font-size: 13px; }
      .lv-hub::after { width: 380px; height: 380px; margin-left: -190px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .lv-hub, .lv-hub::after, .lv-mist::before, .lv-mist::after, .lv-dust::before, .lv-dust::after, .lv-header-seal, .lv-header-seal svg,
      .lv-hub .lv-player-frame, .lv-hub .lv-rank-avatar, .lv-hub .lv-rank-track-fill::after, .lv-hub .lv-header-kicker::before, .lv-hub .lv-header-kicker::after { animation: none !important; }
    }

    /* ── ADMIN ── */
    .admin-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
    .admin-tab-btn {
      padding: 8px 20px; border-radius: 20px; cursor: pointer; font-family: "Cinzel", serif;
      font-size: 10px; letter-spacing: 2px; color: var(--text3);
      background: var(--card); border: 1px solid var(--border); transition: all .2s; text-transform: uppercase;
    }
    .admin-tab-btn.active { color: var(--violet3); border-color: var(--violet2); box-shadow: 0 0 14px #6040a022; }
    .admin-section { display: none; }
    .admin-section.active { display: block; }
    .admin-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
    .admin-item {
      background: linear-gradient(160deg, #0e0b28 0%, #0a0820 100%);
      border: 1px solid var(--border); border-radius: 10px;
      padding: 14px 18px; display: flex; align-items: center; gap: 14px;
      box-shadow: 0 4px 20px #00000066, inset 0 1px 0 #6040a018;
      transition: border-color .2s, box-shadow .2s;
    }
    .admin-item:hover { border-color: #6040a055; box-shadow: 0 6px 26px #00000077, inset 0 1px 0 #6040a022, 0 0 20px #6040a01a; }
    .admin-item-title { flex: 1; font-family: "Cinzel", serif; font-size: 13px; color: var(--text); }
    .admin-item-hidden { opacity: .55; }
    .admin-hidden-badge {
      display: inline-block; margin-left: 8px; font-size: 9px; letter-spacing: 1px; font-style: normal;
      color: var(--text3); border: 1px solid var(--border); border-radius: 8px; padding: 2px 8px;
    }
    .admin-item-meta { font-size: 11px; color: var(--text3); font-style: italic; }
    .admin-actions { display: flex; gap: 8px; }
    .admin-btn-edit, .admin-btn-del {
      padding: 5px 12px; border-radius: 6px; font-size: 10px; cursor: pointer;
      border: 1px solid; font-family: "Cinzel", serif; letter-spacing: 1px; transition: all .2s;
    }
    .admin-btn-edit { color: var(--gold); border-color: var(--gold-dim); background: transparent; }
    .admin-btn-edit:hover { background: #c9a84c15; }
    .admin-btn-del { color: var(--red); border-color: #c0405055; background: transparent; }
    .admin-btn-del:hover { background: #c0405015; }
    /* Cartes de quêtes — style "jeu" (gros badge de points), distinct de .admin-item
       qui reste utilisé pour les panneaux d'administration classiques. */
    .quest-card {
      position: relative; overflow: hidden;
      background: linear-gradient(160deg, #170d3a 0%, #0a0722 100%);
      border: 1px solid #6040a045; border-radius: 12px;
      padding: 15px 16px; margin-bottom: 10px;
      display: flex; align-items: center; gap: 14px;
      box-shadow: 0 4px 20px #00000066, inset 0 1px 0 #6040a018;
      transition: border-color .25s, box-shadow .25s, transform .25s;
    }
    .quest-card::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(circle at 12% 15%, #b07de01c, transparent 60%);
    }
    .quest-card:hover {
      border-color: #e8c97a70; transform: translateY(-1px);
      box-shadow: 0 8px 28px #00000080, 0 0 22px #b07de026;
    }
    .quest-card-tool {
      display: inline-block; font-size: 9px; letter-spacing: 1.5px; color: var(--violet3);
      font-family: "Cinzel", serif; text-transform: uppercase; margin-bottom: 4px; opacity: .9;
    }
    .quest-card-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
    .quest-card-title { font-family: "Cinzel", serif; font-size: 14px; color: var(--text); letter-spacing: .3px; }
    .quest-card-desc { font-size: 13px; color: var(--text2); font-style: italic; line-height: 1.6; margin-top: 4px; }
    .quest-points-badge {
      flex-shrink: 0; position: relative; z-index: 1;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-width: 76px; padding: 9px 10px; border-radius: 12px; text-align: center;
      background: linear-gradient(160deg, #e8c97a2e, #8a6a2012);
      border: 1px solid #e8c97a55;
      box-shadow: 0 0 18px #e8c97a22, inset 0 1px 0 #ffffff10;
    }
    .quest-points-value {
      font-family: "Cinzel", serif; font-weight: 700; font-size: 21px; line-height: 1;
      color: var(--gold3); text-shadow: 0 0 14px #e8c97a70;
    }
    .quest-points-unit { font-size: 8px; letter-spacing: 2px; color: var(--gold-dim); text-transform: uppercase; margin-top: 3px; }

    /* ── Livre de quêtes — cadre façon "journal de jeu" pour la modale Quêtes ── */
    .quest-book-frame {
      position: relative; margin-top: 22px; padding: 20px 18px 8px;
      border: 1px solid #6040a040; border-radius: 4px;
      background:
        radial-gradient(circle at 15% 0%, #e8c97a10, transparent 55%),
        radial-gradient(circle at 90% 100%, #6040a01c, transparent 55%);
    }
    .quest-book-frame::before, .quest-book-frame::after {
      content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none;
      border: 1px solid #e8c97a55;
    }
    .quest-book-frame::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
    .quest-book-frame::after  { bottom: 6px; right: 6px; border-left: none; border-top: none; }
    .quest-chapter {
      position: relative; margin: 30px 0 14px;
      display: flex; align-items: center; gap: 12px;
    }
    .quest-chapter:first-child { margin-top: 4px; }
    .quest-chapter-seal {
      flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; background: radial-gradient(circle, #170d3a, #0a0722);
      border: 1px solid var(--chapter-color, #e8c97a); color: var(--chapter-color, #e8c97a);
      box-shadow: 0 0 12px color-mix(in srgb, var(--chapter-color, #e8c97a) 55%, transparent);
    }
    .quest-chapter-title {
      font-family: "Cinzel", serif; font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
      color: var(--chapter-color, #e8c97a); margin: 0; white-space: nowrap;
    }
    .quest-chapter-line {
      flex: 1; height: 1px;
      background: linear-gradient(90deg, color-mix(in srgb, var(--chapter-color, #e8c97a) 60%, transparent), transparent);
    }
    .quest-chapter-open {
      flex-shrink: 0; font-family: "Cinzel", serif; font-size: 10px; letter-spacing: 1px;
      color: var(--chapter-color, #e8c97a); text-decoration: none; white-space: nowrap;
      border: 1px solid color-mix(in srgb, var(--chapter-color, #e8c97a) 50%, transparent);
      border-radius: 8px; padding: 5px 12px; transition: background .2s;
    }
    .quest-chapter-open:hover { background: color-mix(in srgb, var(--chapter-color, #e8c97a) 12%, transparent); }
    .quest-status-seal {
      flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; font-size: 13px;
      border: 1px solid #6040a055; background: #08061a88; color: var(--text3);
    }
    .quest-status-seal.done    { border-color: #70c09090; color: #70c090; box-shadow: 0 0 10px #70c09033; }
    .quest-status-seal.pending { border-color: #e8c97a90; color: var(--gold2); box-shadow: 0 0 10px #e8c97a33; }

    /* ── Modale Quêtes sur mobile : cartes empilées, plus rien qui déborde ni ne
       se chevauche (demande user 2026-09-06). ── */
    #contentModal .modal-content-body:has(.quest-book-frame){ padding: 20px 14px; }
    @media (max-width: 620px) {
      .quest-book-frame { padding: 14px 11px 4px; margin-inline: -4px; }
      .quest-chapter { flex-wrap: wrap; gap: 8px 10px; margin: 24px 0 12px; }
      .quest-chapter-line { display: none; }
      .quest-chapter-title { white-space: normal; font-size: 12px; letter-spacing: 2px; flex: 1 1 auto; min-width: 0; }
      .quest-chapter-open { font-size: 9px; letter-spacing: .5px; padding: 4px 10px; }
      .quest-card { flex-wrap: wrap; align-items: flex-start; gap: 9px 12px; padding: 13px 13px; }
      .quest-status-seal { order: 1; }
      .quest-points-badge {
        order: 2; margin-left: auto; min-width: 0; flex-direction: row; gap: 5px;
        padding: 6px 12px; border-radius: 10px;
      }
      .quest-points-value { font-size: 17px; }
      .quest-points-unit { margin-top: 0; }
      .quest-card-body { order: 3; flex: 1 1 100%; }
      .quest-card-title { font-size: 13.5px; }
      .quest-card-desc { font-size: 12.5px; }
    }

    /* La roue de raccourcis (position:fixed, z-index:8887) ne doit pas passer
       devant les modales/overlays (elle recouvrait le titre « Quêtes Polaristar »
       sur mobile — demande user 2026-09-06). */
    body:has(.modal-overlay.open) #ps-akasha-rfab,
    body:has(.modal-overlay.open) #ps-akasha-rfab-backdrop,
    body:has(#akNotifOverlay.open) #ps-akasha-rfab,
    body:has(#akNotifPanel.open) #ps-akasha-rfab,
    body:has(#accountMenuBackdrop.open) #ps-akasha-rfab { display: none !important; }
    .add-btn {
      padding: 12px 24px; background: transparent; border: 1px dashed var(--violet2);
      border-radius: 10px; color: var(--violet3); font-family: "Cinzel", serif;
      font-size: 11px; letter-spacing: 2px; cursor: pointer; transition: all .2s; width: 100%;
      text-transform: uppercase;
    }
    .add-btn:hover { background: #6040a015; }

    /* ── FORM MODAL ── */
    .form-modal-box { max-width: 580px; }
    .form-row { margin-bottom: 16px; }
    .form-row label { display: block; font-size: 10px; letter-spacing: 3px; color: var(--text3); margin-bottom: 7px; text-transform: uppercase; font-family: "Cinzel", serif; }
    .form-row input, .form-row textarea {
      width: 100%; background: linear-gradient(160deg, #0c0a22 0%, #08061a 100%); border: 1px solid var(--border);
      border-radius: 10px; padding: 11px 16px; color: var(--text); font-family: inherit; font-size: 15px;
      outline: none; transition: all .2s; resize: vertical;
      box-shadow: inset 0 2px 8px #00000055, inset 0 1px 0 #6040a014;
    }
    .form-row input:focus, .form-row textarea:focus { border-color: var(--violet2); box-shadow: 0 0 0 3px #6040a018; }
    .form-row textarea { min-height: 110px; }
    .form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 22px; }
    .form-cancel {
      padding: 10px 22px; background: transparent; border: 1px solid var(--border);
      border-radius: 10px; color: var(--text3); font-family: "Cinzel", serif;
      font-size: 11px; letter-spacing: 1px; cursor: pointer; text-transform: uppercase;
    }
    .form-save {
      padding: 10px 26px; background: linear-gradient(135deg, var(--violet) 0%, var(--indigo) 100%);
      border: 1px solid var(--violet2); border-radius: 10px; color: var(--gold2);
      font-family: "Cinzel", serif; font-size: 11px; letter-spacing: 2px; cursor: pointer;
      transition: all .2s; text-transform: uppercase;
    }
    .form-save:hover { background: linear-gradient(135deg, var(--violet2), var(--violet)); box-shadow: 0 0 20px #6040a033; }

    /* ── MEMBRES ── */
    .member-input-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
    .member-input-row input, .member-input-row select {
      flex: 1; min-width: 140px; background: linear-gradient(160deg, #0c0a22 0%, #08061a 100%); border: 1px solid var(--border); border-radius: 10px;
      padding: 11px 16px; color: var(--text); font-family: inherit; font-size: 15px; outline: none;
      box-shadow: inset 0 2px 8px #00000055, inset 0 1px 0 #6040a014;
    }
    .member-input-row input[type="email"] { flex-basis: 100%; }
    .admin-btn-revoke {
      padding: 6px 12px; background: #a8503022; border: 1px solid #d08050; border-radius: 8px;
      color: #e0a070; font-family: "Cinzel", serif; font-size: 10px; letter-spacing: 1px;
      cursor: pointer; white-space: nowrap; text-transform: uppercase;
    }
    .member-grant-btn {
      padding: 11px 22px; background: #50a87022; border: 1px solid var(--green);
      border-radius: 10px; color: var(--green); font-family: "Cinzel", serif;
      font-size: 10px; letter-spacing: 1px; cursor: pointer; white-space: nowrap; text-transform: uppercase;
    }

    /* ── TOAST ── */
    #toastContainer { position: fixed; bottom: 28px; right: 28px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
    .toast {
      padding: 13px 22px; border-radius: 12px; font-size: 13px; font-family: "Cinzel", serif;
      letter-spacing: 1px; max-width: 320px; animation: toastIn .3s ease;
      border: 1px solid; backdrop-filter: blur(8px);
    }
    @keyframes toastIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
    .toast.ok   { background: #0a2a1aaa; border-color: var(--green);   color: var(--green); }
    .toast.err  { background: #2a0a0aaa; border-color: var(--red);     color: var(--red); }
    .toast.info { background: #0a0a2aaa; border-color: var(--violet2); color: var(--violet3); }

    /* ── EMPTY / LOADER ── */
    .empty-state { text-align: center; padding: 70px 20px; color: var(--text3); }
    .empty-state .empty-icon { font-size: 52px; margin-bottom: 18px; opacity: .4; }
    .empty-state p { font-style: italic; font-size: 15px; line-height: 1.7; }
    .loader {
      display: flex; align-items: center; justify-content: center; padding: 70px;
      color: var(--text3); font-family: "Cinzel", serif; font-size: 12px; letter-spacing: 4px; gap: 12px;
    }
    .loader::before { content:"✦"; animation: loaderSpin 2s linear infinite; display:inline-block; }
    @keyframes loaderSpin { to { transform:rotate(360deg); } }

    /* ═══════════════════════════════════════════════════════════════
       CHAT — CERCLE DES INITIÉS  (refonte 2026-09-02)
       Hiérarchie : Messages > Membres > Navigation > Décor.
       Le décor cosmique (#cosmosCanvas + .light-rays) reste l'ENVIRONNEMENT :
       il transparaît sur les bords, un voile le densifie derrière la conversation.
       Backend 100% inchangé (akasha-community-*, ak_messages, présence, DM…).
       ─ base : shell 3 colonnes · nav · header · flux · composer ─
       ═══════════════════════════════════════════════════════════════ */
    :root {
      --cc-gold: #c9a84c; --cc-gold-soft: #e8c97a;
      --cc-violet: #b07de0; --cc-violet-deep: #6a3cb0;
      --cc-online: #6bd18a;
      --cc-line: rgba(201,168,76,0.14);
      --cc-line-soft: rgba(255,255,255,0.055);
      --cc-rail-bg: rgba(7,5,20,0.62);
      --cc-hover: rgba(176,125,224,0.06);
      --cc-sel: rgba(106,60,176,0.16);
      --cc-geo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-width='0.6'%3E%3Ccircle cx='70' cy='70' r='34'/%3E%3Ccircle cx='70' cy='36' r='34'/%3E%3Ccircle cx='70' cy='104' r='34'/%3E%3Ccircle cx='40' cy='53' r='34'/%3E%3Ccircle cx='100' cy='53' r='34'/%3E%3Ccircle cx='40' cy='87' r='34'/%3E%3Ccircle cx='100' cy='87' r='34'/%3E%3C/g%3E%3C/svg%3E");
      /* Gabarit mobile du Nexus (mesuré en JS par _ccSyncFrame ; ces valeurs =
         repli si le JS ne tourne pas). Voir @media (max-width:767px) plus bas. */
      --cc-topbar-h: 52px;   /* hauteur réelle de .topbar quand html.cc-in-comm */
      --cc-nav-h: 62px;      /* hauteur réelle de #ak-bottom-nav */
      --cc-shell-bottom: 62px; /* = --cc-nav-h clavier fermé, = hauteur clavier sinon */
    }
    #panelComm { display:none; padding:0 !important; height:100%; flex-direction:column; max-width:none; }
    #panelComm.active { display:flex; }

    /* Coquille 3 colonnes ------------------------------------------------ */
    .comm-layout, .cc-shell {
      position:relative; display:grid; height:100%; min-height:0; overflow:hidden;
      grid-template-columns:264px minmax(0,1fr) 268px;
      grid-template-rows:minmax(0,1fr);
      grid-template-areas:"nav main members";
    }
    .cc-shell.members-hidden { grid-template-columns:264px minmax(0,1fr) 0; }
    .cc-shell.dm-mode { grid-template-columns:264px minmax(0,1fr) 0; }
    /* Voile : dense au centre (derrière le fil), transparent vers les rails */
    .cc-shell::before {
      content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(120% 120% at 50% 42%, rgba(3,2,12,0.90) 0%, rgba(4,3,16,0.80) 34%, rgba(6,5,22,0.55) 60%, rgba(6,5,22,0.18) 100%),
        radial-gradient(90% 70% at 8% 0%, rgba(90,45,154,0.12), transparent 60%),
        radial-gradient(90% 70% at 100% 100%, rgba(10,18,48,0.34), transparent 55%);
    }
    .cc-shell > * { position:relative; z-index:1; min-height:0; }

    /* Colonne gauche — navigation -------------------------------------- */
    .cc-nav {
      grid-area:nav; display:flex; flex-direction:column; min-height:0;
      background:var(--cc-rail-bg); border-right:1px solid var(--cc-line);
      box-shadow:inset -1px 0 0 rgba(201,168,76,0.04);
      backdrop-filter:blur(3px);
    }
    .cc-nav-brand {
      flex-shrink:0; padding:20px 20px 16px; display:flex; align-items:center; gap:9px;
      font-family:"Cinzel Decorative","Cinzel",serif; font-size:12px; letter-spacing:3px;
      color:var(--cc-gold-soft); text-transform:uppercase;
      border-bottom:1px solid var(--cc-line-soft);
    }
    .cc-nav-brand::before { content:"\2726"; color:var(--cc-gold); filter:drop-shadow(0 0 6px rgba(201,168,76,.4)); }
    .cc-nav-scroll { flex:1; overflow-y:auto; min-height:0; padding:12px 0 8px; }
    .cc-nav-section {
      font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:4px; color:var(--text3);
      text-transform:uppercase; padding:14px 20px 8px;
    }
    .cc-chan {
      display:flex; align-items:center; gap:11px; margin:1px 8px; padding:9px 12px;
      border-radius:8px; cursor:pointer; position:relative;
      font-family:"Cinzel",serif; font-size:13px; letter-spacing:1px; color:var(--text3);
      border:1px solid transparent; transition:color .16s, background .16s;
    }
    .cc-chan:hover { color:var(--text2); background:var(--cc-hover); }
    .cc-chan.active {
      color:var(--text); background:var(--cc-sel);
      border-color:rgba(201,168,76,0.16);
      box-shadow:inset 2px 0 0 var(--cc-violet), 0 0 18px -6px rgba(120,60,220,0.45);
    }
    .cc-chan.active.is-annonces { box-shadow:inset 2px 0 0 var(--cc-gold), 0 0 18px -6px rgba(201,168,76,0.4); color:var(--cc-gold-soft); }
    .cc-chan .cc-chan-ic { width:17px; text-align:center; opacity:.8; flex-shrink:0; font-size:12px; }
    .cc-chan .cc-chan-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cc-chan .cc-chan-lock { font-size:10px; opacity:.5; }
    .cc-online-dot, .comm-online-dot {
      width:8px; height:8px; border-radius:50%; background:var(--cc-online);
      box-shadow:0 0 7px rgba(107,209,138,0.6); flex-shrink:0;
    }
    .cc-badge {
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:.5px; font-weight:600;
      border-radius:9px; padding:1px 7px; flex-shrink:0;
    }
    .cc-badge.dot { background:rgba(140,90,220,0.28); color:#dcc6ff; border:1px solid rgba(176,125,224,0.4); }
    .cc-badge.at  { background:var(--cc-gold); color:#1a0f04; }
    /* MP */
    .cc-dm { display:flex; align-items:center; gap:10px; margin:1px 8px; padding:8px 12px; border-radius:8px; cursor:pointer; color:var(--text3); transition:background .16s, color .16s; }
    .cc-dm:hover { color:var(--text2); background:var(--cc-hover); }
    .cc-dm.active { color:var(--text); background:var(--cc-sel); box-shadow:inset 2px 0 0 var(--cc-violet); }
    .cc-dm-av {
      width:32px; height:32px; border-radius:50%; flex-shrink:0; overflow:hidden;
      display:flex; align-items:center; justify-content:center;
      font-family:"Cinzel",serif; font-size:12px; font-weight:700;
      background:linear-gradient(135deg,#1a0a3a,#2a1050); border:1px solid rgba(100,60,200,0.3); color:var(--cc-violet);
    }
    .cc-dm-main { flex:1; min-width:0; }
    .cc-dm-name { font-family:"Cinzel",serif; font-size:11px; letter-spacing:.8px; color:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cc-dm-last { font-size:11px; color:var(--text3); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
    .cc-dm-unread { width:7px; height:7px; border-radius:50%; background:var(--cc-violet); flex-shrink:0; box-shadow:0 0 6px var(--cc-violet); }
    .cc-empty {
      margin:6px 16px; padding:16px 14px; text-align:center; border-radius:10px;
      border:1px dashed rgba(201,168,76,0.18); background:rgba(201,168,76,0.03);
      color:var(--text3); font-style:italic; font-size:12.5px; line-height:1.6;
    }
    .cc-empty .cc-empty-glyph { display:block; font-size:16px; color:var(--cc-gold); opacity:.6; margin-bottom:5px; font-style:normal; }
    .cc-nav-btn {
      display:block; width:calc(100% - 16px); margin:8px; padding:9px; border-radius:8px;
      background:rgba(140,90,220,0.10); border:1px solid rgba(176,125,224,0.24);
      color:var(--cc-violet); font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:2px;
      text-transform:uppercase; cursor:pointer; transition:background .16s;
    }
    .cc-nav-btn:hover { background:rgba(140,90,220,0.2); color:#dcc6ff; }
    /* Pied nav — mini-carte profil + présence */
    .cc-nav-foot {
      flex-shrink:0; border-top:1px solid var(--cc-line-soft);
      padding:12px 14px 82px;  /* dégage le bouton flottant #polaristar-home-btn (bas gauche) */
      display:flex; align-items:center; gap:10px;
    }
    .cc-nav-foot .cc-avatar { width:34px; height:34px; }
    .cc-nav-foot-main { flex:1; min-width:0; }
    .cc-nav-foot-name { font-family:"Cinzel",serif; font-size:11px; letter-spacing:1px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cc-nav-foot-status { font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:1.5px; color:rgba(107,209,138,0.7); margin-top:2px; }
    .cc-nav-foot-status::before { content:"● "; }

    /* Colonne centrale ------------------------------------------------- */
    .comm-main, .cc-main {
      grid-area:main; display:flex; flex-direction:column; min-width:0; min-height:0; position:relative;
    }
    .cc-head {
      flex-shrink:0; display:flex; align-items:center; gap:12px;
      padding:13px 22px; border-bottom:1px solid var(--cc-line);
      background:rgba(6,5,20,0.55); backdrop-filter:blur(6px); position:relative; overflow:hidden;
    }
    .cc-head::before {
      content:""; position:absolute; inset:0; pointer-events:none; opacity:.04;
      background:var(--cc-geo); background-size:200px;
      -webkit-mask-image:linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
              mask-image:linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
    }
    .cc-head > * { position:relative; z-index:1; }
    .cc-head-back { cursor:pointer; color:var(--text3); font-size:20px; line-height:1; flex-shrink:0; transition:color .16s; }
    .cc-head-back:hover { color:var(--text); }
    .cc-head-hash { font-size:20px; color:var(--text3); flex-shrink:0; }
    .cc-head-av { width:34px; height:34px; flex-shrink:0; }
    .cc-head-titles { min-width:0; display:flex; flex-direction:column; gap:2px; }
    .cc-head-name { font-family:"Cinzel Decorative","Cinzel",serif; font-size:15px; letter-spacing:2px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cc-head-sub { font-size:11.5px; color:var(--text3); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cc-head-online { font-family:"Cinzel",serif; font-size:9px; letter-spacing:1.5px; color:rgba(107,209,138,0.8); white-space:nowrap; }
    .cc-head-online::before { content:"● "; }
    .cc-head-mcount { display:none; }
    .cc-head-spacer { flex:1; }
    .cc-head-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
    .cc-icon-btn {
      width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;
      background:transparent; border:1px solid transparent; color:var(--text3); cursor:pointer;
      font-size:14px; transition:all .15s;
    }
    .cc-icon-btn:hover, .cc-icon-btn.active { color:var(--cc-gold-soft); border-color:rgba(201,168,76,0.3); background:rgba(201,168,76,0.06); }
    .cc-head-link {
      background:none; border:none; cursor:pointer; color:var(--cc-violet);
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap;
    }
    .cc-head-link:hover { color:#dcc6ff; }

    /* Flux de messages ------------------------------------------------- */
    .comm-messages, .cc-stream {
      flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
      padding:14px 22px 10px; display:flex; flex-direction:column; gap:1px;
      position:relative;
      background:linear-gradient(0deg, rgba(3,2,12,0.5) 0%, rgba(3,2,12,0.12) 22%, transparent 55%);
    }
    .cc-stream.is-empty { background:none; justify-content:center; }
    .cc-stream > * { flex-shrink:0; }
    .cc-stream-sentinel { height:1px; flex-shrink:0; }
    .cc-history-note {
      text-align:center; font-family:"Cinzel",serif; font-size:9px; letter-spacing:3px;
      color:var(--text3); padding:10px 0 4px; opacity:.7;
    }
    .cc-history-note::before, .cc-history-note::after { content:"— "; }
    .cc-history-note::after { content:" —"; }

    /* Photo profil étoile (Créateur) — partagé chat / profil / membres */
    .has-star-avatar { background:none !important; overflow:hidden; border-color:rgba(201,168,76,0.55) !important; }
    .has-star-avatar img { width:100%; height:100%; object-fit:cover; display:block; }

    /* Cadre d'avatar équipable — un badge de succès débloqué (FOLLOWER_BADGE_TIERS)
       porté comme anneau lumineux autour de l'avatar existant (jamais une nouvelle
       photo). box-shadow : n'est pas rogné par l'overflow:hidden de l'avatar
       lui-même, donc aucun wrapper DOM supplémentaire n'est nécessaire.
       Voir [[project_akasha_avatar_frames]]. */
    .av-frame-t1 { box-shadow:0 0 0 2px #5eeb96, 0 0 7px 1px rgba(94,235,150,.45); }
    .av-frame-t2 { box-shadow:0 0 0 2px #f0d878, 0 0 8px 1px rgba(240,216,120,.5); }
    .av-frame-t3 { box-shadow:0 0 0 2px #78c8f0, 0 0 9px 2px rgba(120,200,240,.5); }
    .av-frame-t4 { box-shadow:0 0 0 2.5px #f0a860, 0 0 11px 2px rgba(240,168,96,.55); }
    .av-frame-t5 { box-shadow:0 0 0 3px #c890f8, 0 0 0 5px rgba(200,144,248,.28), 0 0 15px 3px rgba(200,144,248,.6); }
    .av-frame-hero.av-frame-t4, .av-frame-hero.av-frame-t5 { animation:avFrameGlow 5s ease-in-out infinite; }
    @keyframes avFrameGlow { 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.22); } }
    @media (prefers-reduced-motion: reduce) { .av-frame-hero { animation:none !important; } }

    /* Onglet « Badges » de l'Inventaire — réutilise .succ-tier/.succ-badge
       (voir openSuccessModal) pour la même relique visuelle, avec 3 colonnes
       (badge · nom+objectif · action) au lieu des 5 de la modale Succès. */
    .inv-tabs { display:flex; gap:8px; margin:14px 0 18px; }
    .inv-tab-btn {
      flex:1; background:rgba(255,255,255,.04); border:1px solid var(--border2); color:var(--text3);
      font-family:"Cinzel",serif; font-size:11px; letter-spacing:1.5px; padding:9px 10px; border-radius:10px;
      cursor:pointer; transition:background .2s, color .2s, border-color .2s;
    }
    .inv-tab-btn.active { background:linear-gradient(135deg,#3a2800,#6a4800); border-color:rgba(201,168,76,.5); color:#ffe8a8; }
    .succ-tier.inv-badge-card { grid-template-columns:82px 1fr auto; gap:14px; padding:13px 18px; }
    .inv-badge-action { text-align:right; }
    .inv-badge-locked-txt { color:var(--text3); font-size:11px; font-style:italic; }
    .inv-badge-equipped-txt { color:#f0d878; font-size:11px; letter-spacing:.5px; display:block; margin-bottom:6px; }

    /* Ligne de message — flux éditorial, PAS de bulle ----------------- */
    .comm-msg {
      display:grid; grid-template-columns:52px minmax(0,1fr); gap:0 14px;
      padding:3px 12px 3px 10px; border-radius:9px; position:relative;
      transition:background .14s;
    }
    .comm-msg.is-head { margin-top:12px; padding-top:5px; }
    .comm-msg:first-child, .comm-msg.is-head:first-child { margin-top:2px; }
    .comm-msg:hover { background:var(--cc-hover); }
    .comm-msg.mentions-me { background:rgba(176,125,224,0.07); box-shadow:inset 2px 0 0 rgba(176,125,224,0.55); }
    .comm-msg.mentions-me:hover { background:rgba(176,125,224,0.11); }
    .cc-msg-gutter { grid-column:1; display:flex; align-items:flex-start; justify-content:center; padding-top:2px; }
    .comm-msg.is-cont .cc-msg-gutter { align-items:center; padding-top:0; }
    .comm-msg-body, .cc-msg-main { grid-column:2; min-width:0; }
    .comm-avatar, .cc-avatar {
      width:40px; height:40px; border-radius:50%; flex-shrink:0; overflow:hidden;
      display:flex; align-items:center; justify-content:center; position:relative;
      font-family:"Cinzel",serif; font-size:15px; font-weight:700; text-transform:uppercase;
      background:linear-gradient(135deg,#1a0a3a,#2a1050);
      border:1px solid rgba(201,168,76,0.14); color:var(--cc-violet);
      box-shadow:0 2px 9px rgba(0,0,0,0.35);
    }
    .cc-avatar[data-status]::after {
      content:""; position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
      border:2px solid #0a0818; background:#5a5570;
    }
    .cc-avatar[data-status="online"]::after { background:var(--cc-online); box-shadow:0 0 6px rgba(107,209,138,0.8); }
    .cc-avatar[data-status="away"]::after { background:#e0a94a; }
    .cc-avatar[data-status="offline"]::after { background:#4b4368; }
    .cc-avatar.is-guardian { border-color:rgba(232,201,122,0.6); box-shadow:0 0 12px rgba(201,168,76,0.3); }
    .cc-msg-hovertime {
      font-family:"Cinzel",serif; font-size:9px; color:var(--text3); opacity:0;
      transition:opacity .12s; letter-spacing:.3px; font-style:normal;
    }
    .comm-msg.is-cont:hover .cc-msg-hovertime { opacity:.75; }

    .comm-msg-meta, .cc-msg-meta { display:flex; align-items:baseline; gap:8px; margin-bottom:2px; flex-wrap:wrap; }
    .comm-msg-name {
      font-family:"Cinzel",serif; font-size:13.5px; letter-spacing:.4px; color:var(--text);
      cursor:pointer; display:inline-flex; align-items:center;
    }
    .comm-msg-name:hover { text-decoration:underline; text-underline-offset:3px; }
    @keyframes commPseudoShift { 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
    @keyframes commPseudoGlow { 0%,100%{ filter:drop-shadow(0 0 4px rgba(212,168,32,0.55)); } 50%{ filter:drop-shadow(0 0 10px rgba(160,80,255,0.8)); } }
    .comm-msg-name.pseudo-glow {
      background:linear-gradient(90deg,#ffe87a,#d4a820,#c080ff,#88ccff,#ffe87a);
      background-size:300% 100%;
      -webkit-background-clip:text; background-clip:text; color:transparent;
      animation:commPseudoShift 6s linear infinite, commPseudoGlow 2.4s ease-in-out infinite;
    }
    .comm-msg-time { font-size:10.5px; color:var(--text3); font-style:normal; letter-spacing:.3px; font-family:"Cinzel",serif; }
    .comm-msg-edited { font-size:10px; color:var(--text3); font-style:italic; letter-spacing:0; }
    .comm-msg-text {
      font-size:15.5px; color:var(--text2); line-height:1.62; word-break:break-word;
      font-family:"Cormorant Garamond",serif;
    }
    .comm-msg-text a { color:var(--cc-violet); text-decoration:underline; text-underline-offset:2px; }

    /* Sceaux de rôle — petits, sobres, jamais de gros badge plein ----- */
    .cc-seal {
      font-family:"Cinzel",serif; font-size:8px; letter-spacing:1.4px; text-transform:uppercase;
      padding:1px 6px; border-radius:5px; border:1px solid currentColor;
      background:rgba(255,255,255,0.02); white-space:nowrap; line-height:1.5;
    }
    .cc-seal::before { content:"\2726\00a0"; opacity:.7; }
    .cc-seal.gardien   { color:var(--cc-gold-soft); }
    .cc-seal.createur  { color:var(--cc-violet); border-color:rgba(176,125,224,0.5); }
    .cc-seal.admin     { color:#ffdd80; }
    .cc-seal.premium   { color:#d8b552; }
    .cc-seal.polaris   { color:#c090ff; }
    /* GALACTIC = l'ancien palier POLARIS renommé — sceau noir & blanc */
    .cc-seal.galactik  { color:#f4f4f8; border-color:rgba(255,255,255,0.55); background:rgba(0,0,0,0.55); }
    /* Rang de succès (commRankTag) conservé, resserré */
    .comm-rank-tag {
      font-family:"Cinzel",serif; font-size:8px; letter-spacing:1.4px; text-transform:uppercase;
      padding:1px 6px; border-radius:5px; border:1px solid currentColor; opacity:.9;
      background:rgba(255,255,255,0.02); white-space:nowrap;
    }
    .comm-mention { color:var(--cc-violet); background:rgba(176,125,224,0.12); border-radius:4px; padding:0 3px; font-weight:600; }
    .comm-mention.gold { color:var(--cc-gold-soft); background:rgba(201,168,76,0.12); }
    .comm-mention.me { color:#0a0512; background:var(--cc-gold-soft); }
    /* Badges */
    .badge {
      display:inline-flex; align-items:center; gap:3px;
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:2px;
      padding:3px 10px; border-radius:10px; text-transform:uppercase; flex-shrink:0;
    }
    .badge-premium { background:rgba(201,168,76,0.15); border:1px solid rgba(201,168,76,0.4); color:#e8c870; }
    .badge-polaris { background:rgba(120,50,220,0.2); border:1px solid rgba(140,70,255,0.45); color:#c090ff; }
    .badge-galactik { background:#000; border:1px solid rgba(255,255,255,0.6); color:#ffffff; }
    /* Carte plan POLARIS 33,33 € — habillage arc-en-ciel (comme l'ancien POLARIS) */
    .ak-plan-rainbow {
      border:3px solid transparent !important;
      border-image:linear-gradient(115deg,#ff3d6d 0%,#ff9f1c 22%,#ffe94d 40%,#2ee6a0 58%,#3a86ff 76%,#c34bff 100%) 1 !important;
      background:linear-gradient(160deg,rgba(26,9,56,.95),rgba(9,4,24,.95)) padding-box !important;
      box-shadow:0 0 34px rgba(255,80,120,.16), 0 0 60px rgba(120,80,255,.18) !important;
    }
    .ak-plan-rainbow::after {
      content:''; position:absolute; left:0; right:0; top:0; height:4px; pointer-events:none;
      background:linear-gradient(90deg,#ff3d6d,#ff9f1c,#ffe94d,#2ee6a0,#3a86ff,#c34bff,#ff3d6d);
    }
    .ak-plan-rainbow .akpr-name {
      background:linear-gradient(90deg,#ff5d7a,#ffb020,#ffe94d,#3ce68f,#39a0ff,#c85bff) !important;
      -webkit-background-clip:text !important; background-clip:text !important;
      -webkit-text-fill-color:transparent !important; color:transparent !important;
      filter:drop-shadow(0 0 8px rgba(255,150,120,.5));
    }
    .ak-plan-rainbow .akpr-badge {
      background:linear-gradient(90deg,#ff8888,#ffcc55,#66ee88,#55ccff,#cc66ff) !important;
      color:#160a04 !important;
    }
    .ak-plan-rainbow .akpr-btn {
      background:linear-gradient(135deg,#8020c0,#c04010,#204090) !important;
      border:1px solid rgba(255,255,255,.28) !important; color:#fff !important;
    }
    .badge-mod     { background:rgba(200,40,60,0.15); border:1px solid rgba(220,50,80,0.4); color:#f07080; }
    .badge-admin   { background:rgba(201,168,76,0.25); border:1px solid rgba(201,168,76,0.6); color:#ffdd80; box-shadow:0 0 8px rgba(201,168,76,0.2); }
    /* Badge "Créateur" exclusif — un seul compte le porte, dégradé arc-en-ciel animé (même esthétique que compte.html / plan POLARIS de index.html) */
    @keyframes badgeCreatorShift { 0%{background-position:0% 50%;} 100%{background-position:200% 50%;} }
    .badge-creator-unique {
      border:1px solid rgba(200,140,255,0.5);
      background-image:linear-gradient(90deg,#ff8888,#ffcc55,#66ee88,#55ccff,#cc66ff);
      background-size:300% 100%;
      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
      animation:badgeCreatorShift 5s linear infinite;
    }
    /* Encadrement arc-en-ciel + étoiles — profil du compte Créateur exclusif uniquement (2026-08-19) */
    .creator-rainbow-frame {
      border-radius:18px; padding:3px; position:relative;
      background-image:linear-gradient(90deg,#ff8888,#ffcc55,#66ee88,#55ccff,#cc66ff);
      background-size:300% 100%;
      animation:badgeCreatorShift 5s linear infinite;
    }
    .creator-rainbow-frame-inner {
      border-radius:16px; padding:22px;
      background:linear-gradient(160deg, #130e30f5 0%, #0a0820f5 100%);
      position:relative; overflow:hidden;
    }
    .creator-rainbow-star {
      position:absolute; color:#fff; opacity:0; pointer-events:none;
      animation:creatorStarTwinkle 3s ease-in-out infinite;
      text-shadow:0 0 6px #fff, 0 0 12px #cc66ff;
    }
    @keyframes creatorStarTwinkle { 0%,100%{opacity:0;transform:scale(.6);} 50%{opacity:1;transform:scale(1);} }
    /* Ligne de chat colorée — même compte Créateur exclusif, pour rester visible dans le flux */
    .comm-msg.creator-msg-highlight {
      background:linear-gradient(90deg, rgba(255,136,136,.10), rgba(255,204,85,.10), rgba(102,238,136,.10), rgba(85,204,255,.10), rgba(204,102,255,.10));
      background-size:300% 100%;
      animation:badgeCreatorShift 6s linear infinite;
      border-radius:10px;
    }
    .comm-msg.creator-msg-highlight:hover {
      background:linear-gradient(90deg, rgba(255,136,136,.16), rgba(255,204,85,.16), rgba(102,238,136,.16), rgba(85,204,255,.16), rgba(204,102,255,.16));
      background-size:300% 100%;
    }
    /* Badges de succès — paliers d'abonnés (voir FOLLOWER_BADGE_TIERS) */
    .badge-follower-1 { background:rgba(61,220,115,0.15); border:1px solid rgba(61,220,115,0.4); color:#5eeb96; }
    .badge-follower-2 { background:rgba(232,201,58,0.15); border:1px solid rgba(232,201,58,0.4); color:#f0d878; }
    .badge-follower-3 { background:rgba(58,176,232,0.15); border:1px solid rgba(58,176,232,0.4); color:#78c8f0; }
    .badge-follower-4 { background:rgba(232,138,42,0.15); border:1px solid rgba(232,138,42,0.4); color:#f0a860; }
    .badge-follower-5 { background:rgba(162,74,232,0.2); border:1px solid rgba(162,74,232,0.5); color:#c890f8; box-shadow:0 0 8px rgba(162,74,232,0.25); }

    /* GARDIEN D'AKASHA — styles regroupés dans la section « CHAT — Cercle
       des Initiés » (plus bas : .comm-guardian-msg / -emblem / -body / -name). */

    /* ═══════════════════════════════════════════════════════════════
       SUCCÈS POLARISTAR — « constellation de progression » (openSuccessModal)
       Refonte UI/UX seule : données & logique de déblocage inchangées
       (FOLLOWER_BADGE_TIERS · ak_follower_counts · ak_follower_badges).
       ═══════════════════════════════════════════════════════════════ */
    #succRoot { position: relative; padding: 22px 26px 26px; overflow: hidden; }
    #succRoot > * { position: relative; z-index: 1; }
    /* Modale Succès resserrée : plus compacte, on voit bien le haut + la croix ✕
       sans devoir scroller loin (demande user 2026-09-06). La page a un zoom:1.15
       sur <html> qui gonfle les vh → on prend des valeurs prudentes. */
    #contentModal .modal-box:has(#succRoot){ max-width: 740px; max-height: 68vh; }
    #contentModal .modal-box:has(#succRoot) .modal-close{
      position: sticky; top: 10px; margin: 8px 12px 0 auto; z-index: 6;
      background: rgba(12,9,34,.92); border: 1px solid rgba(201,168,76,.3);
    }
    /* le contenu remonte sous la croix collante (qui prend sa ligne de 30px) */
    #contentModal .modal-box:has(#succRoot) #contentModalInner{ margin-top: -30px; }
    #succRoot .succ-h1{ font-size: clamp(20px,3.6vw,27px); margin: 8px 0 8px; }
    #succRoot .succ-intro{ font-size: 13.5px; line-height: 1.7; }
    #succRoot .succ-intro-hi{ display:block; margin-top:6px; }
    #succRoot .succ-hero{ margin: 16px 0 4px; }
    #succRoot .succ-panel{ padding: 16px 18px; }
    @media(max-width:680px){
      #contentModal .modal-box:has(#succRoot){ max-height: 80vh; }
    }
    #succRoot .succ-bg {
      position: absolute; left: 50%; top: -140px; transform: translateX(-50%);
      width: 720px; max-width: 150%; z-index: 0; pointer-events: none; opacity: .17; color: #8b6cd8;
      -webkit-mask-image: radial-gradient(ellipse 62% 55% at 50% 34%, #000 0%, transparent 76%);
              mask-image: radial-gradient(ellipse 62% 55% at 50% 34%, #000 0%, transparent 76%);
    }
    #succRoot .succ-bg svg { width: 100%; display: block; animation: succSpin 240s linear infinite; }
    @keyframes succSpin { to { transform: rotate(360deg); } }
    #succRoot .succ-dust { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
    #succRoot .succ-dust i {
      position:absolute; width:2px; height:2px; border-radius:50%; background:#e8c97a;
      box-shadow:0 0 5px 1px rgba(232,201,122,.6); opacity:.5;
      animation: succDust linear infinite;
    }
    @keyframes succDust { from{ transform:translateY(12px); opacity:0 } 15%,85%{ opacity:.55 } to{ transform:translateY(-30px); opacity:0 } }

    .succ-eyebrow {
      display:inline-flex; align-items:center; gap:7px; font-family:"Cinzel",serif;
      font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--gold2);
      padding:5px 14px; border-radius:999px; border:1px solid rgba(201,168,76,.32); background:rgba(201,168,76,.06);
    }
    .succ-h1 {
      font-family:"Cinzel Decorative","Cinzel",serif; font-size:clamp(23px,4.4vw,33px);
      letter-spacing:3px; margin:14px 0 10px; line-height:1.15;
      background:linear-gradient(120deg,#a07828,#e8c97a,#f8efc0,#d8b552,#a07828);
      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
      filter:drop-shadow(0 2px 16px #c9a84c30);
    }
    .succ-intro { color:var(--text2); font-size:15px; line-height:1.8; max-width:62ch; }

    .succ-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:16px; margin:22px 0 4px; }
    .succ-panel {
      position:relative; border-radius:16px; padding:20px 22px;
      background:linear-gradient(160deg, rgba(24,18,54,.7), rgba(12,10,30,.72));
      border:1px solid rgba(122,92,192,.22);
      box-shadow: inset 0 1px 0 rgba(201,168,76,.08), 0 16px 36px -20px #000;
    }
    .succ-count-wrap { display:flex; align-items:center; gap:18px; }
    .succ-count-label { font-family:"Cinzel",serif; font-size:9px; letter-spacing:3px; color:var(--text3); text-transform:uppercase; }
    .succ-count-num {
      font-family:"Cinzel Decorative","Cinzel",serif; font-weight:700; line-height:1; margin-top:4px;
      font-size:clamp(38px,7.5vw,58px);
      background:linear-gradient(160deg,#f8efc0,#e8c97a,#c9a84c);
      -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
      filter:drop-shadow(0 0 18px #c9a84c33);
    }
    .succ-count-sub { font-size:12px; color:var(--text3); font-style:italic; margin-top:5px; }
    .succ-orbit { width:72px; height:72px; flex-shrink:0; }
    .succ-orbit .o-spin  { transform-origin:36px 36px; animation:succSpin 15s linear infinite; }
    .succ-orbit .o-spin2 { transform-origin:36px 36px; animation:succSpin 27s linear infinite reverse; }

    .succ-how-panel { display:flex; align-items:center; gap:18px; }
    .succ-how-main { flex:1; min-width:0; }
    .succ-how-title { font-family:"Cinzel",serif; font-size:10px; letter-spacing:3px; color:var(--gold2); text-transform:uppercase; margin-bottom:12px; }
    .succ-how { padding:0; margin:0; }
    .succ-how li { list-style:none; display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--text2); line-height:1.55; margin-bottom:9px; }
    .succ-how li:last-child { margin-bottom:0; }
    .succ-how li::before { content:"✦"; color:var(--gold-dim); font-size:10px; margin-top:3px; flex-shrink:0; }
    .succ-how-aside {
      flex-shrink:0; width:90px; display:flex; flex-direction:column; align-items:center; gap:9px;
      padding-left:16px; border-left:1px solid rgba(122,92,192,.2);
    }
    .succ-mark { width:46px; height:46px; color:var(--gold2); opacity:.85; animation:succSpin 68s linear infinite; }
    .succ-tagline { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:11px; line-height:1.5; color:var(--text3); text-align:center; }

    .succ-tiers { display:flex; flex-direction:column; gap:14px; margin-top:24px; }
    .succ-tier {
      display:grid; grid-template-columns:90px 136px 1fr minmax(92px,auto) 120px; gap:10px 18px; align-items:center;
      padding:15px 20px; border-radius:16px;
      background:linear-gradient(150deg, rgba(20,16,44,.64), rgba(10,9,26,.7));
      border:1px solid rgba(122,92,192,.18);
      transition:border-color .3s, box-shadow .3s, transform .3s;
    }
    .succ-tier::before {
      content:""; position:absolute; left:18px; right:18px; top:-1px; height:1px; pointer-events:none;
      background:linear-gradient(90deg, transparent, var(--tc-line), transparent);
    }
    .succ-tier { position:relative; }
    .succ-tier.is-unlocked { border-color:var(--tc-line); box-shadow:0 18px 40px -24px #000, 0 0 24px -8px var(--tc-glow); }
    .succ-tier:hover { transform:translateY(-2px); box-shadow:0 24px 48px -24px #000, 0 0 30px -8px var(--tc-glow); border-color:var(--tc-line); }

    /* ── BADGE = RELIQUE À COUCHES : halo · métal · anneau · cœur · symbole · lumière ── */
    .succ-badge {
      width:92px; height:92px; position:relative;
      --tilt-x:0deg; --tilt-y:0deg;
      transform:perspective(640px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
      transition:transform .35s cubic-bezier(.2,.8,.3,1);
    }
    .succ-badge svg { width:100%; height:100%; display:block; overflow:visible; position:relative; z-index:1; }
    /* aura diffuse extérieure (3e niveau de lumière, au-delà des deux halos SVG) */
    .succ-badge::before {
      content:""; position:absolute; inset:-46%; border-radius:50%; pointer-events:none; z-index:0;
      background:radial-gradient(circle, var(--tc-glow) 0%, var(--tc-glow) 18%, transparent 70%);
      opacity:0;
    }
    .succ-tier.is-unlocked .succ-badge::before { opacity:.82; animation:succAura2 15s ease-in-out infinite; }

    /* étincelles précieuses sur le pourtour — scintillement rare */
    .succ-badge .b-twinkle { transform-box:fill-box; transform-origin:center; animation:succTwinkle 9s ease-in-out infinite; }
    @keyframes succTwinkle { 0%,90%,100%{ opacity:0; transform:scale(.35) } 95%{ opacity:.95; transform:scale(1) } }

    /* poussière céleste — grains qui naissent puis s'effacent */
    .succ-badge .b-mote { fill:#fff7e2; transform-box:fill-box; transform-origin:center; opacity:0; animation-name:succMote; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
    @keyframes succMote { 0%,100%{ opacity:0; transform:scale(.3) } 50%{ opacity:.8; transform:scale(1) } }

    /* dôme de cristal — le verre céleste : la lumière y glisse très lentement */
    .succ-badge .b-glass { mix-blend-mode:screen; transform-origin:60px 56px; opacity:var(--mo,.4); animation:succGlass 17s ease-in-out infinite; }
    @keyframes succGlass {
      0%,100% { opacity:calc(var(--mo,.4) * .62); transform:translate(-2.5px,-1.5px) rotate(-1.2deg); }
      50%     { opacity:var(--mo,.4);              transform:translate(2.5px,1px) rotate(1.2deg); }
    }

    /* glint — reflet fin qui parcourt la bordure en continu, très lentement */
    .succ-badge .b-glint { transform-origin:60px 60px; opacity:var(--go,.5); animation:succSpin 26s linear infinite; }
    .succ-badge .b-glint-soft { animation-duration:26s; filter:blur(1.4px); }

    /* rotations très lentes des couches concentriques */
    .succ-badge .b-spin     { transform-origin:60px 60px; animation:succSpin 46s  linear infinite; }
    .succ-badge .b-spin-rev { transform-origin:60px 60px; animation:succSpin 67s  linear infinite reverse; }
    .succ-badge .b-geo      { transform-origin:60px 62px; animation:succSpin 160s linear infinite; }
    .succ-badge .b-arc      { transform-origin:60px 60px; animation:succArc  13s  linear infinite; }
    @keyframes succArc { to { transform:rotate(360deg); } }

    /* double halo divin — respiration lumineuse (la taille physique du badge ne bouge pas) */
    .succ-badge .b-aura  { transform-origin:60px 60px; animation:succAura  9.5s ease-in-out infinite; }
    .succ-badge .b-aura2 { transform-origin:60px 60px; animation:succAura2 15s  ease-in-out infinite; }
    @keyframes succAura  { 0%,100%{ opacity:.54; transform:scale(1) } 50%{ opacity:.76; transform:scale(1.055) } }
    @keyframes succAura2 { 0%,100%{ opacity:.36; transform:scale(1) } 50%{ opacity:.56; transform:scale(1.075) } }

    /* couronne de rayons — discrète au repos, se révèle au survol / focus / tap */
    .succ-badge .b-rays { transform-origin:60px 60px; opacity:.26; transition:opacity .55s ease; animation:succSpin 210s linear infinite; }

    /* cœur énergétique derrière le symbole */
    .succ-badge .b-core-energy { transform-origin:60px 62px; animation:succCore 5.6s ease-in-out infinite; }
    @keyframes succCore { 0%,100%{ opacity:.9 } 50%{ opacity:1 } }

    /* reflet circulaire qui traverse le métal */
    .succ-badge::after {
      content:""; position:absolute; inset:5%; border-radius:50%; pointer-events:none;
      background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 49%, transparent 58%);
      mix-blend-mode:screen; opacity:0;
    }
    .succ-tier.is-unlocked .succ-badge::after { animation:succSheen 15s ease-in-out infinite; animation-delay:var(--sheen,0s); }
    @keyframes succSheen { 0%,86%{ opacity:0; transform:translateX(-24%) } 91%,93%{ opacity:.7 } 100%{ opacity:0; transform:translateX(24%) } }

    /* survol desktop — halo +, rayons, symbole plus vif, très légère élévation */
    @media (hover:hover) and (pointer:fine) {
      .succ-tier:hover .succ-badge                { transform:perspective(640px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.045); filter:brightness(1.14) drop-shadow(0 8px 22px var(--tc-glow)); }
      .succ-tier:hover .succ-badge .b-rays        { opacity:.5; }
      .succ-tier:hover .succ-badge .b-aura        { animation-duration:6s; }
      .succ-tier:hover .succ-badge .b-glass       { opacity:calc(var(--mo,.4) + .22); }
      .succ-tier:hover .succ-badge .b-glint       { opacity:calc(var(--go,.5) + .25); animation-duration:14s; }
      .succ-tier:hover .succ-badge .b-core-energy { opacity:1; filter:brightness(1.2); }
    }
    /* focus clavier + tap mobile — même éveil, piloté par .is-poked */
    .succ-tier:focus-visible { outline:none; border-color:var(--tc-line); box-shadow:0 0 0 1px var(--tc-line), 0 0 26px -8px var(--tc-glow); }
    .succ-tier:focus-visible .succ-badge .b-rays,
    .succ-tier.is-poked .succ-badge .b-rays        { opacity:.46; }
    .succ-tier.is-poked .succ-badge .b-core-energy { opacity:1; }
    .succ-tier.is-poked { border-color:var(--tc-line); box-shadow:0 18px 40px -24px #000, 0 0 24px -8px var(--tc-glow); }

    /* ── ÉTAT DORMANT (verrouillé) — relique précieuse mais son énergie n'est pas activée ── */
    .succ-tier.is-locked .succ-badge { filter:saturate(.82) brightness(.97); }
    .succ-tier.is-locked .succ-badge .b-aura,
    .succ-tier.is-locked .succ-badge .b-aura2       { opacity:.12 !important; animation:none; }
    .succ-tier.is-locked .succ-badge .b-rays        { opacity:0 !important; animation:none; }
    .succ-tier.is-locked .succ-badge .b-arc         { display:none; }
    .succ-tier.is-locked .succ-badge .b-twinkle     { display:none; }
    .succ-tier.is-locked .succ-badge .b-mote        { display:none; }
    .succ-tier.is-locked .succ-badge .b-glint       { opacity:.14 !important; animation-duration:120s; }
    .succ-tier.is-locked .succ-badge .b-glass       { opacity:.16 !important; animation:none; }
    .succ-tier.is-locked .succ-badge .b-core-energy { opacity:.45 !important; animation:none; }
    .succ-tier.is-locked .succ-badge .b-spin,
    .succ-tier.is-locked .succ-badge .b-spin-rev,
    .succ-tier.is-locked .succ-badge .b-geo         { animation-duration:300s; }

    .succ-lock {
      position:absolute; right:-2px; bottom:-2px; width:24px; height:24px; border-radius:50%;
      background:radial-gradient(circle at 34% 30%, #221a3e, #0a0918); border:1px solid rgba(201,168,76,.22);
      display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--text3);
      box-shadow:0 3px 8px #000a, inset 0 0 6px rgba(0,0,0,.55); opacity:.72;
    }

    /* éveil au déverrouillage — l'énergie traverse l'anneau puis le halo s'installe */
    .succ-tier.just-awoken .succ-badge { animation:succAwaken 2.6s cubic-bezier(.3,.7,.3,1) both; }
    @keyframes succAwaken {
      0%   { filter:saturate(.3) brightness(.55); }
      30%  { filter:saturate(.7) brightness(1.5) drop-shadow(0 0 14px #fff); }
      55%  { filter:saturate(1.1) brightness(1.2); }
      100% { filter:none; }
    }

    .succ-headcol { min-width:0; }
    .succ-name { font-family:"Cinzel",serif; font-size:15px; letter-spacing:2px; color:var(--tc); text-transform:uppercase; line-height:1.2; }
    .succ-tier.is-locked .succ-name { color:var(--tc-dim); }
    .succ-target { font-family:"Cinzel",serif; font-size:9px; letter-spacing:2.5px; color:var(--text3); text-transform:uppercase; margin-top:4px; }

    /* ── LIGNE ÉNERGÉTIQUE  ●────────────✦  (accompli lumineux · restant très sombre) ── */
    .succ-line { display:flex; align-items:center; gap:10px; }
    .succ-line .l-node { font-size:11px; line-height:1; color:var(--tc); flex-shrink:0; }
    .succ-line .l-node.l-start { color:var(--tc-soft); filter:drop-shadow(0 0 5px var(--tc-glow)); }
    .succ-line .l-node.l-end { opacity:.32; transition:opacity .6s, transform .6s, filter .6s; }
    .succ-tier.is-unlocked .succ-line .l-node.l-end { opacity:1; transform:scale(1.3); filter:drop-shadow(0 0 8px var(--tc-glow)); }
    .succ-line .l-track {
      position:relative; flex:1; height:3px; border-radius:3px; overflow:hidden;
      background:linear-gradient(90deg, var(--tc-track), rgba(3,2,10,.92));
      box-shadow:inset 0 0 3px rgba(0,0,0,.85);
    }
    .succ-line .l-track i {
      position:absolute; top:50%; width:2px; height:2px; margin:-1px 0 0 -1px; border-radius:50%;
      background:var(--tc-track);
    }
    .succ-line .l-track i:nth-child(1){ left:25% } .succ-line .l-track i:nth-child(2){ left:50% } .succ-line .l-track i:nth-child(3){ left:75% }
    .succ-line .l-fill {
      position:absolute; left:0; top:0; height:100%; width:0; border-radius:3px;
      background:linear-gradient(90deg, var(--tc-soft), var(--tc));
      box-shadow:0 0 10px var(--tc-glow), 0 0 2px var(--tc);
      transition:width 1.2s cubic-bezier(.3,.9,.3,1);
    }
    .succ-line .l-fill::after {
      content:""; position:absolute; right:-4px; top:50%; width:9px; height:9px; margin-top:-4.5px;
      border-radius:50%; background:radial-gradient(circle, #fff 10%, var(--tc) 72%);
      box-shadow:0 0 10px 2px var(--tc-glow);
    }
    .succ-line .l-comet {
      position:absolute; top:0; left:0; height:100%; width:24px; pointer-events:none; opacity:0;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
    }
    .succ-tier.is-unlocked .succ-line .l-comet,
    .succ-line.pulse .l-comet { animation:succComet 1.7s ease-out .5s 1; }
    @keyframes succComet { 0%{ opacity:0; left:-24px } 12%{ opacity:.9 } 88%{ opacity:.25 } 100%{ opacity:0; left:100% } }
    .succ-progtext { font-size:11px; color:var(--text3); font-family:"Cinzel",serif; letter-spacing:.5px; white-space:nowrap; }
    .succ-progtext b { color:var(--text2); font-weight:600; }
    .succ-tier.is-unlocked .succ-progtext { color:var(--tc-soft); }

    /* ── BLOC RÉCOMPENSE — alimenté par la même énergie que le badge ── */
    .succ-reward {
      position:relative; overflow:hidden; text-align:center; padding:12px 10px; border-radius:13px;
      background:linear-gradient(160deg, var(--tc-bg), rgba(8,6,18,.5));
      border:1px solid var(--tc-line);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px -18px #000;
    }
    .succ-reward::before {
      content:""; position:absolute; left:50%; top:-32%; width:118%; height:120%; transform:translateX(-50%);
      background:radial-gradient(ellipse 55% 45% at 50% 32%, var(--tc-glow), transparent 70%);
      opacity:.5; pointer-events:none;
    }
    .succ-reward > * { position:relative; z-index:1; }
    .succ-reward .r-label { font-family:"Cinzel",serif; font-size:8px; letter-spacing:3px; color:var(--text3); text-transform:uppercase; }
    .succ-reward .r-value {
      font-family:"Cinzel Decorative","Cinzel",serif; font-weight:700; font-size:19px; color:#fff;
      margin-top:4px; line-height:1.1;
      text-shadow:0 0 1px var(--tc), 0 0 12px var(--tc-glow);
    }
    .succ-reward .r-value.sm { font-size:11px; letter-spacing:1px; }
    .succ-reward .r-bonus {
      margin-top:8px; padding-top:7px; border-top:1px solid var(--tc-line);
      font-family:"Cinzel Decorative","Cinzel",serif; font-weight:700; font-size:12.5px; color:var(--tc-soft);
      line-height:1.15; text-shadow:0 0 8px var(--tc-glow);
    }
    .succ-reward .r-bonus span { font-family:"Cinzel",serif; font-weight:400; font-size:7.5px; letter-spacing:2px; color:var(--text3); text-transform:uppercase; display:block; margin-top:2px; }
    .succ-tier.is-locked .succ-reward { filter:saturate(.4) brightness(.72); }
    .succ-tier.is-locked .succ-reward::before { opacity:.12; }
    .succ-tier.is-locked .succ-reward .r-value { color:var(--tc-dim); text-shadow:none; }
    .succ-tier.is-locked .succ-reward .r-bonus { color:var(--tc-dim); text-shadow:none; }
    .succ-intro-hi { display:block; margin-top:9px; color:var(--text3); font-size:13.5px; line-height:1.7; }
    .succ-intro-hi::before { content:"✦ "; color:var(--gold-dim); }

    .succ-footer { margin-top:28px; display:flex; align-items:center; justify-content:center; gap:14px; }
    .succ-footer .f-rule { height:1px; width:60px; background:linear-gradient(90deg, transparent, var(--gold-dim)); }
    .succ-footer .f-rule:last-of-type { background:linear-gradient(90deg, var(--gold-dim), transparent); }
    .succ-footer .f-text { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:13px; color:var(--text3); letter-spacing:.4px; text-align:center; }
    .succ-footer .f-star { color:var(--gold-dim); font-size:11px; }

    .succ-celebrate {
      position:fixed; inset:0; z-index:9500; display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:16px; text-align:center; padding:20px;
      background:radial-gradient(ellipse at 50% 46%, rgba(9,7,24,.94), rgba(3,2,10,.985));
      backdrop-filter:blur(5px); animation:succCelebIn .35s ease both;
    }
    .succ-celebrate.out { animation:succCelebOut .5s ease forwards; }
    @keyframes succCelebIn { from{ opacity:0 } to{ opacity:1 } }
    @keyframes succCelebOut { to{ opacity:0; visibility:hidden } }
    .succ-celebrate .c-badge {
      width:172px; height:172px; position:relative;
      filter:drop-shadow(0 0 30px var(--tcg, #c9a84c66));
      animation:succCelebPop .7s cubic-bezier(.2,1.4,.4,1) both;
    }
    @keyframes succCelebPop { 0%{ transform:scale(.35) rotate(-16deg); opacity:0 } 55%{ opacity:1 } 100%{ transform:scale(1) rotate(0); opacity:1 } }
    .succ-celebrate .c-ring { position:absolute; top:calc(50% - 86px); width:172px; height:172px; border-radius:50%; border:2px solid #f8efc0; animation:succCelebRing 1.2s ease-out .1s forwards; }
    @keyframes succCelebRing { 0%{ transform:scale(.5); opacity:.95 } 100%{ transform:scale(3); opacity:0 } }
    .succ-celebrate .c-kicker {
      font-family:"Cinzel",serif; font-size:12px; letter-spacing:6px; color:#e8c97a; text-transform:uppercase;
      text-shadow:0 0 16px #c9a84c66; animation:succCelebIn .5s ease .5s both;
    }
    .succ-celebrate .c-name {
      font-family:"Cinzel Decorative","Cinzel",serif; font-size:clamp(22px,5vw,30px); letter-spacing:3px; color:#faf1c8;
      text-shadow:0 0 28px var(--tcg, #c9a84c88); animation:succCelebIn .5s ease .65s both;
    }
    .succ-celebrate .c-spark {
      position:absolute; width:4px; height:4px; border-radius:50%; background:#f8e9b8;
      box-shadow:0 0 8px 2px #e8c97a; animation:succCelebSpark 1s ease-out forwards;
    }
    @keyframes succCelebSpark { 0%{ transform:translate(0,0) scale(1); opacity:1 } 100%{ transform:translate(var(--dx),var(--dy)) scale(0); opacity:0 } }

    @media (max-width:680px) {
      #succRoot { padding:20px 14px 24px; }
      .succ-hero { grid-template-columns:1fr; }
      .succ-tier { grid-template-columns:1fr; justify-items:center; text-align:center; gap:9px; padding:20px 14px; }
      .succ-badge { width:110px; height:110px; }
      .succ-headcol { width:100%; }
      .succ-line { width:100%; max-width:280px; }
      .succ-progtext { white-space:normal; }
      .succ-reward { width:100%; max-width:220px; }
      .succ-how-panel { flex-direction:column; align-items:stretch; }
      .succ-how-aside {
        width:100%; flex-direction:row; justify-content:center; gap:14px;
        border-left:none; border-top:1px solid rgba(122,92,192,.2); padding-left:0; padding-top:13px;
      }
      .succ-tagline { text-align:left; }
      /* mobile : on garde les animations très légères */
      .succ-badge .b-arc, .succ-badge .b-rays, .succ-badge .b-geo, .succ-badge .b-spin-rev, .succ-badge .b-twinkle,
      .succ-badge .b-mote, .succ-badge .b-glint-soft { animation:none; }
      .succ-badge .b-mote { opacity:.5; }
      .succ-badge .b-glint { animation-duration:40s; }
      .succ-badge, .succ-tier.is-unlocked .succ-badge::before { animation:none; }
      .succ-badge { transition:none; }
    }
    @media (prefers-reduced-motion:reduce) {
      #succRoot .succ-bg svg, .succ-dust i, .succ-orbit .o-spin, .succ-orbit .o-spin2, .succ-mark,
      .succ-badge .b-spin, .succ-badge .b-spin-rev, .succ-badge .b-geo, .succ-badge .b-arc,
      .succ-badge .b-aura, .succ-badge .b-aura2, .succ-badge .b-rays, .succ-badge .b-core-energy,
      .succ-badge .b-twinkle, .succ-badge .b-mote, .succ-badge .b-glass, .succ-badge .b-glint,
      .succ-tier.just-awoken .succ-badge, .succ-line .l-comet,
      .succ-tier.is-unlocked .succ-badge::before,
      .succ-tier.is-unlocked .succ-badge::after { animation:none !important; }
      .succ-badge { transition:none !important; }
      .succ-line .l-fill { transition:none; }
    }

    /* Actions au survol d'un message — barre compacte, fond quasi invisible */
    .cc-msg-actions {
      position:absolute; top:-11px; right:12px; z-index:6;
      display:flex; gap:2px; opacity:0; transform:translateY(3px);
      transition:opacity .12s, transform .12s;
      background:rgba(12,9,28,0.92); border:1px solid rgba(201,168,76,0.18);
      border-radius:9px; padding:2px; box-shadow:0 6px 18px rgba(0,0,0,0.45);
    }
    .comm-msg:hover .cc-msg-actions { opacity:1; transform:none; }
    .cc-msg-actions.menu-open { opacity:1; transform:none; }
    .cc-act-btn {
      width:26px; height:24px; border:none; background:none; cursor:pointer;
      color:var(--text3); font-size:13px; border-radius:6px; line-height:1;
      display:flex; align-items:center; justify-content:center; transition:all .12s;
    }
    .cc-act-btn:hover { color:var(--cc-gold-soft); background:rgba(176,125,224,0.14); }
    .cc-msg-actions .comm-msg-menu-wrap { position:relative; opacity:1; }
    .comm-msg-menu-wrap { display:inline-flex; }
    .comm-msg-menu-btn {
      width:26px; height:24px; border:none; background:none; cursor:pointer;
      color:var(--text3); font-size:15px; border-radius:6px; line-height:1; transition:all .12s;
    }
    .comm-msg-menu-btn:hover { color:var(--cc-gold-soft); background:rgba(176,125,224,0.14); }
    .comm-msg-menu {
      position:absolute; right:0; top:calc(100% + 5px); z-index:30;
      background:linear-gradient(160deg,#12102e,#0b0920); border:1px solid rgba(201,168,76,0.25);
      border-radius:10px; padding:5px; min-width:186px; box-shadow:0 14px 36px rgba(0,0,0,0.55); display:none;
    }
    .comm-msg-menu.open { display:block; }
    .comm-msg-menu button {
      display:flex; align-items:center; gap:9px; width:100%; text-align:left;
      background:none; border:none; color:var(--text2); font-family:"Cormorant Garamond",serif;
      font-size:14px; padding:8px 10px; border-radius:6px; cursor:pointer; transition:background .12s;
    }
    .comm-msg-menu button:hover { background:rgba(176,125,224,0.12); color:var(--text); }
    .comm-msg-menu button.danger { color:#f0899a; }
    .comm-msg-menu button.danger:hover { background:rgba(224,96,112,0.14); }
    .comm-msg-menu .cmm-sep { height:1px; background:rgba(255,255,255,0.06); margin:4px 6px; }

    /* Aperçu de réponse — fine ligne violette vers le message */
    .comm-reply-ref {
      display:flex; align-items:center; gap:6px; margin:2px 0 3px; max-width:100%;
      font-size:12px; color:var(--text3); cursor:pointer;
      padding-left:10px; border-left:2px solid rgba(176,125,224,0.45);
    }
    .comm-reply-ref:hover { color:var(--text2); }
    .comm-reply-ref .rr-arrow { color:var(--cc-violet); flex-shrink:0; }
    .comm-reply-ref .rr-name { color:var(--cc-violet); font-family:"Cinzel",serif; font-size:10.5px; letter-spacing:.8px; flex-shrink:0; }
    .comm-reply-ref .rr-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-style:italic; }
    .comm-msg.flash-target { animation:commFlash 1.6s ease; }
    @keyframes commFlash { 0%,100%{ background:transparent } 18%{ background:rgba(201,168,76,0.16) } }

    /* Message retenu / en file — vue de l'auteur uniquement */
    .comm-msg.is-blocked { opacity:.72; }
    .comm-msg.is-blocked .comm-msg-text { border-left:2px dashed rgba(224,96,112,0.55); padding-left:10px; color:rgba(240,200,205,0.8); }
    .cv2-tag-blocked, .cv2-tag-queued {
      display:inline-block; font-family:"Cinzel",serif; font-size:8px; letter-spacing:1.4px;
      text-transform:uppercase; padding:1px 6px; border-radius:5px;
    }
    .cv2-tag-blocked { color:#f0a0a8; border:1px solid rgba(224,96,112,0.4); }
    .cv2-tag-queued  { color:var(--cc-gold-soft); border:1px solid rgba(201,168,76,0.35); }

    /* Édition inline */
    .comm-edit-box textarea {
      width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(140,80,255,.4);
      border-radius:8px; color:var(--text); padding:8px 10px; font-family:inherit; font-size:15px; resize:vertical;
    }

    /* Réactions — pastilles or/violet sobres */
    .msg-reactions { display:flex; flex-wrap:wrap; gap:5px 6px; align-items:center; }
    .msg-reactions:not(:empty) { margin-top:5px; }
    .msg-reaction-add { opacity:.45; transition:opacity .12s; }
    .comm-msg:hover .msg-reaction-add { opacity:.8; }
    .msg-reaction-pill {
      font-family:"Cormorant Garamond",serif; font-size:12.5px; cursor:pointer;
      display:inline-flex; align-items:center; gap:4px;
      background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09);
      border-radius:11px; padding:1px 8px; color:var(--text2); transition:transform .12s, background .12s, border-color .12s;
    }
    .msg-reaction-pill:hover { border-color:rgba(176,125,224,0.4); }
    .msg-reaction-pill.mine { background:rgba(140,60,255,0.18); border-color:rgba(176,125,224,0.55); color:#e6d6ff; }
    @keyframes ccReactPop { 0%{transform:scale(1)} 45%{transform:scale(1.16)} 100%{transform:scale(1)} }
    .msg-reaction-pill.just-toggled { animation:ccReactPop .18s ease; }
    .msg-reaction-add { position:relative; display:inline-block; }
    .msg-reaction-add > button { background:none; border:none; cursor:pointer; color:var(--text3); font-size:12px; opacity:.6; padding:1px 4px; }
    .msg-reaction-add > button:hover { opacity:1; color:var(--cc-gold-soft); }
    .cc-react-pop {
      position:absolute; bottom:calc(100% + 4px); left:0; z-index:20; display:none;
      background:linear-gradient(160deg,#14112e,#0b0920); border:1px solid rgba(201,168,76,0.25);
      border-radius:10px; padding:5px; gap:2px; white-space:nowrap; box-shadow:0 10px 26px rgba(0,0,0,0.5);
    }
    .cc-react-pop.open { display:flex; }
    .cc-react-pop button { background:none; border:none; cursor:pointer; font-size:15px; padding:3px 5px; border-radius:6px; }
    .cc-react-pop button:hover { background:rgba(176,125,224,0.16); }

    /* Séparateur temporel */
    .comm-date-sep {
      align-self:center; display:flex; align-items:center; gap:12px; margin:16px 0 6px;
      font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:3.5px; color:var(--text3);
      text-transform:uppercase;
    }
    .comm-date-sep::before, .comm-date-sep::after { content:""; height:1px; width:70px; background:linear-gradient(90deg, transparent, rgba(201,168,76,0.3)); }
    .comm-date-sep::after { background:linear-gradient(90deg, rgba(201,168,76,0.3), transparent); }
    .comm-date-sep .cds-star { color:var(--cc-gold); }

    /* Intro de salon (salon vide ou tête d'historique) */
    .cc-intro { align-self:center; max-width:440px; text-align:center; padding:26px 20px 20px; }
    .cc-intro-glyph { font-size:22px; color:var(--cc-gold); filter:drop-shadow(0 0 10px rgba(201,168,76,0.4)); }
    .cc-intro-name { font-family:"Cinzel Decorative","Cinzel",serif; font-size:19px; letter-spacing:3px; color:var(--text); margin:12px 0 10px; }
    .cc-intro-text { color:var(--text2); font-size:14.5px; font-style:italic; line-height:1.8; }
    .cc-intro-first { margin-top:16px; font-family:"Cinzel",serif; font-size:9px; letter-spacing:3px; color:var(--text3); }
    .cc-intro-first::before, .cc-intro-first::after { content:" \2726 "; color:var(--cc-gold); }

    /* Bannière "live en cours" wrapper (contenu inchangé) */
    #commLiveBanner { flex-shrink:0; }

    /* Pastille "nouveaux messages" */
    .comm-newmsg-pill, .cc-newpill {
      position:absolute; left:50%; transform:translateX(-50%); bottom:104px; z-index:15;
      background:linear-gradient(135deg,#2a1060,#6020a0); border:1px solid rgba(176,125,224,0.55);
      color:#e8d8ff; font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:1.5px;
      padding:7px 16px; border-radius:20px; cursor:pointer; display:none;
      box-shadow:0 8px 24px rgba(0,0,0,0.55);
    }
    .comm-newmsg-pill.show, .cc-newpill.show { display:block; }
    .comm-newmsg-pill::before, .cc-newpill::before { content:"\2193 "; }

    /* Indicateur de saisie */
    .cc-typing {
      flex-shrink:0; min-height:18px; padding:2px 24px 4px;
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:1px; color:var(--cc-violet);
      display:flex; align-items:center; gap:7px; opacity:0; transition:opacity .18s;
    }
    .cc-typing.show { opacity:.85; }
    .cc-typing::before { content:"\2726"; color:var(--cc-gold); }
    .cc-typing .cc-dots { display:inline-flex; gap:2px; }
    .cc-typing .cc-dots i { width:3px; height:3px; border-radius:50%; background:currentColor; animation:ccTypingDot 1.2s ease-in-out infinite; }
    .cc-typing .cc-dots i:nth-child(2){ animation-delay:.15s; } .cc-typing .cc-dots i:nth-child(3){ animation-delay:.3s; }
    @keyframes ccTypingDot { 0%,60%,100%{ opacity:.25; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-2px) } }

    /* Bannière avertissement du Gardien */
    .comm-warn-bar {
      display:none; flex-shrink:0; align-items:center; gap:12px;
      padding:9px 24px; font-size:12.5px; color:var(--cc-gold-soft);
      background:rgba(201,168,76,0.06); border-top:1px solid rgba(201,168,76,0.18);
    }
    .comm-warn-bar.show { display:flex; }
    .comm-warn-bar .cwb-i { font-size:14px; }
    .comm-warn-bar .cwb-appeal {
      margin-left:auto; background:none; border:1px solid rgba(201,168,76,0.4); color:var(--cc-gold-soft);
      font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:1.5px; padding:5px 12px;
      border-radius:8px; cursor:pointer; text-transform:uppercase;
    }
    .comm-warn-bar .cwb-appeal:hover { background:rgba(201,168,76,0.14); }

    /* Barre mute + gate banni (classes conservées : commInit / _commApply*UI) */
    .comm-muted-bar {
      flex-shrink:0; padding:12px 24px 14px; text-align:center;
      font-family:"Cinzel",serif; font-size:10.5px; letter-spacing:2.5px;
      color:#f0899a; border-top:1px solid rgba(200,40,60,0.15); background:rgba(200,40,60,0.04);
    }
    .comm-muted-bar::before { content:"\1F507 "; }
    .comm-banned-gate, .comm-gate {
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      height:100%; gap:15px; text-align:center; padding:44px;
    }
    .comm-banned-gate-icon, .comm-gate-icon { font-size:50px; opacity:.7; }
    .comm-banned-gate-title { font-family:"Cinzel",serif; font-size:19px; color:#f0899a; letter-spacing:3px; }
    .comm-gate-title { font-family:"Cinzel",serif; font-size:18px; color:var(--cc-gold-soft); letter-spacing:3px; }
    .comm-banned-gate-text, .comm-gate-text { color:var(--text2); font-size:14.5px; font-style:italic; max-width:400px; line-height:1.75; }

    /* Composer — pleine largeur de la colonne, collé en bas de .cc-main */
    .comm-input-zone, .cc-composer {
      flex-shrink:0; padding:10px 22px 16px;
      border-top:1px solid var(--cc-line);
      background:linear-gradient(0deg, rgba(4,3,14,0.72), rgba(4,3,14,0.25));
    }
    .comm-reply-bar, .cc-reply-bar {
      display:none; align-items:center; gap:10px; margin-bottom:8px; padding:7px 13px;
      background:rgba(176,125,224,0.10); border:1px solid rgba(176,125,224,0.22);
      border-left:3px solid var(--cc-violet); border-radius:9px;
      font-size:13px; color:var(--text2);
    }
    .comm-reply-bar.show, .cc-reply-bar.show { display:flex; }
    .comm-reply-bar .crb-name { color:var(--cc-violet); font-family:"Cinzel",serif; font-size:10.5px; letter-spacing:.8px; }
    .comm-reply-bar .crb-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-style:italic; color:var(--text3); }
    .comm-reply-bar .crb-close { background:none; border:none; color:var(--text3); cursor:pointer; font-size:16px; }
    .comm-reply-bar .crb-close:hover { color:var(--text); }
    .cc-composer-box {
      border:1px solid rgba(140,90,220,0.3); border-radius:16px;
      background:linear-gradient(160deg,#0e0b28,#0a0820);
      box-shadow:inset 0 2px 10px #00000055, 0 6px 22px rgba(0,0,0,0.3);
      transition:border-color .18s, box-shadow .18s;
    }
    .cc-composer-box:focus-within { border-color:rgba(150,90,255,0.6); box-shadow:inset 0 2px 10px #00000055, 0 0 22px rgba(120,50,220,0.18); }
    .cc-composer-top { display:flex; align-items:flex-end; gap:10px; padding:12px 16px 4px; }
    .comm-textarea {
      flex:1; background:transparent; border:none; outline:none; resize:none;
      color:var(--text); font-family:"Cormorant Garamond",serif; font-size:17px;
      line-height:1.55; max-height:200px; min-height:26px; overflow-y:auto;
      scrollbar-width:thin; scrollbar-color:var(--border) transparent;
    }
    .comm-textarea::placeholder { color:var(--text3); font-style:italic; }
    .cc-composer-tools { display:flex; align-items:center; gap:4px; padding:2px 10px 8px; }
    .cc-tool-btn {
      width:30px; height:30px; border-radius:8px; border:none; background:none; cursor:pointer;
      color:var(--text3); font-size:15px; display:flex; align-items:center; justify-content:center; transition:all .14s;
    }
    .cc-tool-btn:hover { color:var(--cc-gold-soft); background:rgba(176,125,224,0.12); }
    .cc-composer-tools .cc-tools-spacer { flex:1; }
    .comm-send-btn, .cc-send-btn {
      background:linear-gradient(135deg,#2a1060,#6020a0);
      border:1px solid rgba(140,60,255,0.5); color:#c090ff;
      border-radius:9px; padding:8px 20px; cursor:pointer;
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:2px;
      transition:all .18s; white-space:nowrap; flex-shrink:0;
    }
    .comm-send-btn:hover, .cc-send-btn:hover { box-shadow:0 0 20px rgba(120,40,255,0.4); color:#e0c0ff; }
    .comm-send-btn:disabled, .cc-send-btn:disabled { opacity:.4; cursor:not-allowed; }
    #commSendBtn.annonces-mode {
      background:linear-gradient(135deg,#3a2600,#6a4800); border-color:rgba(201,168,76,0.5); color:var(--cc-gold-soft);
    }
    #commSendBtn.annonces-mode:hover { box-shadow:0 0 20px rgba(201,168,76,0.3); color:#fff8d0; }
    .comm-input-foot { display:flex; justify-content:space-between; align-items:center; margin-top:6px; padding:0 6px; }
    .comm-input-foot .cc-hint { font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:.8px; color:var(--text3); }
    .comm-charcount { font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:.6px; color:var(--text3); opacity:.7; }
    .comm-charcount.warn { color:var(--cc-gold-soft); opacity:1; }
    .comm-charcount.over { color:#f0899a; opacity:1; }
    /* Émoji picker léger */
    .cc-emoji-pop {
      position:absolute; bottom:calc(100% + 6px); left:0; z-index:40; display:none;
      width:236px; max-height:184px; overflow-y:auto; padding:8px;
      background:linear-gradient(160deg,#14112e,#0b0920); border:1px solid rgba(201,168,76,0.25);
      border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,0.55);
      grid-template-columns:repeat(7,1fr); gap:2px;
    }
    .cc-emoji-pop.open { display:grid; }
    .cc-emoji-pop button { background:none; border:none; cursor:pointer; font-size:16px; padding:4px; border-radius:6px; }
    .cc-emoji-pop button:hover { background:rgba(176,125,224,0.16); }

    /* Barre lecture seule #annonces */
    .comm-locked {
      flex-shrink:0; padding:12px 24px 14px; text-align:center;
      font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:2.5px;
      color:rgba(201,168,76,0.55); border-top:1px solid rgba(201,168,76,0.1);
    }
    .comm-locked::before { content:"\1F512 "; }
    .comm-system { text-align:center; font-family:"Cinzel",serif; font-size:9.5px; letter-spacing:3px; color:var(--text3); padding:8px 0; font-style:italic; }

    /* Autocomplete mentions */
    .comm-mention-pop {
      position:absolute; bottom:100%; left:0; margin-bottom:6px; z-index:40;
      background:linear-gradient(160deg,#12102e,#0b0920); border:1px solid rgba(201,168,76,0.25);
      border-radius:10px; padding:5px; min-width:200px; max-height:220px; overflow-y:auto;
      box-shadow:0 14px 36px rgba(0,0,0,0.55); display:none;
    }
    .comm-mention-pop.open { display:block; }
    .comm-mention-pop button {
      display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:none;
      color:var(--text2); font-family:"Cormorant Garamond",serif; font-size:14px; padding:7px 9px; border-radius:6px; cursor:pointer;
    }
    .comm-mention-pop button:hover, .comm-mention-pop button.sel { background:rgba(176,125,224,0.14); color:var(--text); }
    .comm-mention-pop .cmp-av {
      width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
      font-family:"Cinzel",serif; font-size:11px; background:linear-gradient(135deg,#1a0a3a,#2a1050);
      border:1px solid rgba(100,60,200,0.3); color:var(--cc-violet); flex-shrink:0;
    }

    /* ── Filigrane géométrie sacrée du fil (discret, masqué sur mobile) ── */
    .cc-stream::after {
      content:""; position:absolute; pointer-events:none; z-index:0;
      width:320px; height:320px; right:2%; top:22%;
      background:var(--cc-geo); background-size:320px; opacity:0.03; filter:saturate(0.4);
    }
    .cc-stream > * { position:relative; z-index:1; }

    /* ── GARDIEN D'AKASHA — carte de modération officielle ── */
    .comm-guardian-msg {
      display:flex; gap:13px; align-items:flex-start; position:relative; overflow:hidden;
      margin:12px 6px 4px; padding:12px 15px; border-radius:12px;
      background:linear-gradient(135deg, rgba(90,45,154,0.16), rgba(10,18,48,0.34));
      border:1px solid rgba(201,168,76,0.36);
      box-shadow:inset 0 0 0 1px rgba(201,168,76,0.1), 0 4px 18px rgba(0,0,0,0.35);
    }
    .comm-guardian-msg::before {
      content:""; position:absolute; inset:0; pointer-events:none;
      background:var(--cc-geo); background-size:120px; opacity:0.045;
    }
    .comm-guardian-msg > * { position:relative; z-index:1; }
    .comm-guardian-emblem {
      flex-shrink:0; width:40px; height:40px; border-radius:50%;
      display:flex; align-items:center; justify-content:center; position:relative; overflow:visible;
      background:radial-gradient(circle at 35% 30%, #6b3fb0, #140a30);
      border:1px solid rgba(232,201,122,0.5);
    }
    .comm-guardian-emblem svg { width:24px; height:24px; display:block; }
    .comm-guardian-emblem::after {
      content:""; position:absolute; inset:-4px; border-radius:50%;
      border:1px solid rgba(232,201,122,0.35); animation:ccGuardianHalo 6s ease-in-out infinite;
    }
    @keyframes ccGuardianHalo { 0%,100%{ opacity:.3; transform:scale(1) } 50%{ opacity:.7; transform:scale(1.08) } }
    .comm-guardian-body { flex:1; min-width:0; }
    .comm-guardian-name { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
    .comm-guardian-tag {
      font-family:"Cinzel",serif; font-size:8px; letter-spacing:1.4px; color:#0a0512;
      background:linear-gradient(90deg,#e8c97a,#c9a84c); border-radius:5px; padding:1px 6px;
      text-transform:uppercase; flex-shrink:0;
    }
    .comm-guardian-time { font-family:"Cinzel",serif; letter-spacing:.5px; color:var(--text3); font-size:9.5px; }
    .comm-guardian-text { font-size:14.5px; line-height:1.6; color:rgba(245,240,232,0.92); }

    /* ── Carte annonce — parchemin numérique très subtil ── */
    .comm-msg.is-annonce, .comm-msg.annonce-msg {
      margin:8px 4px; padding:12px 16px; border-radius:0 9px 9px 0;
      background:rgba(201,168,76,0.045); border-left:2px solid rgba(201,168,76,0.4);
      grid-template-columns:0 minmax(0,1fr);
    }
    .comm-msg.is-annonce .cc-msg-gutter { display:none; }
    .comm-msg.is-annonce .comm-msg-text { color:rgba(240,230,200,0.92); }
    .cc-annonce-eyebrow {
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:3px; color:rgba(201,168,76,0.7);
      text-transform:uppercase; margin-bottom:6px;
    }
    .cc-annonce-eyebrow::before, .cc-annonce-eyebrow::after { content:" \2726 "; }

    /* Ligne de chat colorée — compte Créateur exclusif (conservé) */
    .comm-msg.creator-msg-highlight {
      background:linear-gradient(90deg, rgba(255,136,136,.09), rgba(255,204,85,.09), rgba(102,238,136,.09), rgba(85,204,255,.09), rgba(204,102,255,.09));
      background-size:300% 100%; animation:badgeCreatorShift 6s linear infinite; border-radius:9px;
    }

    /* Cartes embarquées — morceau / vidéo AKASHA (salons Musique / Vidéos) */
    .cc-embed {
      display:flex; align-items:center; gap:12px; margin-top:6px; max-width:420px;
      padding:9px; border-radius:11px;
      background:rgba(10,8,26,0.6); border:1px solid rgba(201,168,76,0.18);
    }
    .cc-embed-cover {
      width:48px; height:48px; border-radius:8px; flex-shrink:0; object-fit:cover;
      background:linear-gradient(135deg,#1a0a3a,#2a1050); display:flex; align-items:center; justify-content:center;
      color:var(--cc-violet); font-size:18px;
    }
    .cc-embed-main { flex:1; min-width:0; }
    .cc-embed-title { font-family:"Cinzel",serif; font-size:12px; letter-spacing:.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cc-embed-sub { font-size:11px; color:var(--text3); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cc-embed-play {
      flex-shrink:0; background:rgba(140,90,220,0.16); border:1px solid rgba(176,125,224,0.4);
      color:#dcc6ff; font-family:"Cinzel",serif; font-size:9px; letter-spacing:1.5px;
      padding:6px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; transition:background .14s;
    }
    .cc-embed-play:hover { background:rgba(140,90,220,0.28); }

    /* Panneau des présents (conservé — _commRenderPresenceList) */
    .comm-presence-toggle { background:none; border:none; color:rgba(107,209,138,0.7); cursor:pointer; font-family:"Cinzel",serif; font-size:9px; letter-spacing:2px; }
    .comm-presence-list { display:none; flex-wrap:wrap; gap:5px; padding:6px 16px 4px; }
    .comm-presence-list.show { display:flex; }
    .comm-presence-chip {
      font-size:11px; color:var(--text2); background:rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:2px 9px; display:flex; align-items:center; gap:5px;
    }
    .comm-presence-chip::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cc-online); }

    /* Modale signalement (conservée) */
    .comm-report-modal { max-width:420px; }
    .comm-report-modal .crm-reason {
      display:flex; align-items:center; gap:10px; padding:11px 12px; margin-bottom:6px;
      border:1px solid rgba(255,255,255,0.08); border-radius:10px; cursor:pointer;
      font-family:"Cormorant Garamond",serif; font-size:15px; color:var(--text2); transition:all .15s;
    }
    .comm-report-modal .crm-reason:hover { border-color:rgba(176,125,224,0.5); background:rgba(176,125,224,0.08); }
    .comm-report-modal .crm-reason.sel { border-color:var(--cc-violet); background:rgba(176,125,224,0.14); color:var(--text); }

    /* ── COLONNE DROITE — MEMBRES ─────────────────────────────────────── */
    .cc-members {
      grid-area:members; display:flex; flex-direction:column; min-height:0; overflow:hidden;
      background:var(--cc-rail-bg); border-left:1px solid var(--cc-line);
      backdrop-filter:blur(3px);
    }
    .cc-shell.members-hidden .cc-members, .cc-shell.dm-mode .cc-members { display:none; }
    .cc-members-head {
      flex-shrink:0; padding:16px 18px 12px; border-bottom:1px solid var(--cc-line-soft);
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:3px; color:var(--text3); text-transform:uppercase;
    }
    .cc-members-scroll { flex:1; overflow-y:auto; min-height:0; padding:8px 0 16px; }
    .cc-members-group {
      font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:2.5px; color:var(--text3);
      text-transform:uppercase; padding:14px 18px 6px; display:flex; align-items:center; gap:6px;
    }
    .cc-members-group.honor { color:var(--cc-gold-soft); }
    .cc-members-group.honor::before { content:"\2726"; }
    .cc-member {
      display:flex; align-items:center; gap:10px; margin:0 8px; padding:6px 10px;
      border-radius:8px; cursor:pointer; transition:background .14s;
    }
    .cc-member:hover { background:var(--cc-hover); }
    .cc-member.is-offline { opacity:.45; }
    /* mise en avant POLARIS (33,33 €) — liseré violet + fond léger */
    .cc-member-polaris {
      background:linear-gradient(90deg, rgba(150,70,255,.12), rgba(150,70,255,.03));
      box-shadow:inset 2px 0 0 var(--cc-violet, #b07de0);
    }
    .cc-member-polaris.is-offline { opacity:.7; }
    .cc-member .cc-avatar { width:30px; height:30px; font-size:12px; }
    .cc-dm .cc-avatar { width:32px; height:32px; font-size:12px; }
    .cc-dm .cc-avatar[data-status]::after { width:9px; height:9px; }
    .cc-member-name { flex:1; min-width:0; font-family:"Cinzel",serif; font-size:11.5px; letter-spacing:.5px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cc-member .cc-seal { font-size:7px; padding:0 4px; }

    /* Carte profil rapide flottante */
    #commQuickProfile {
      position:fixed; z-index:760; width:270px; display:none;
      background:linear-gradient(160deg,#151032f8,#0b0920f8);
      border:1px solid rgba(201,168,76,0.28); border-radius:16px; padding:18px;
      box-shadow:0 24px 70px rgba(0,0,0,0.7), 0 0 40px rgba(120,60,220,0.12);
    }
    #commQuickProfile.open { display:block; animation:ccQpIn .14s ease; }
    @keyframes ccQpIn { from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
    .cc-qp-top { display:flex; align-items:center; gap:12px; }
    .cc-qp-av { width:52px; height:52px; }
    .cc-qp-name { font-family:"Cinzel",serif; font-size:15px; letter-spacing:1px; color:var(--text); }
    .cc-qp-status { font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:1.5px; color:var(--text3); margin-top:3px; }
    .cc-qp-seals { display:flex; gap:5px; flex-wrap:wrap; margin:12px 0 8px; }
    .cc-qp-bio { color:var(--text2); font-size:13px; font-style:italic; line-height:1.6; max-height:76px; overflow:hidden; }
    .cc-qp-actions { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
    .cc-qp-btn {
      flex:1; min-width:110px; text-align:center; padding:8px 10px; border-radius:9px; cursor:pointer;
      font-family:"Cinzel",serif; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; transition:all .15s;
      background:rgba(140,90,220,0.14); border:1px solid rgba(176,125,224,0.35); color:#dcc6ff;
    }
    .cc-qp-btn:hover { background:rgba(140,90,220,0.26); }
    .cc-qp-btn.ghost { background:none; border-color:rgba(255,255,255,0.12); color:var(--text3); }
    .cc-qp-btn.ghost:hover { color:var(--text); border-color:rgba(201,168,76,0.4); }

    /* Panneau recherche dans le salon */
    #commSearchPanel {
      grid-area:members; display:none; flex-direction:column; min-height:0; overflow:hidden;
      background:var(--cc-rail-bg); border-left:1px solid var(--cc-line); backdrop-filter:blur(3px);
    }
    #commSearchPanel.open { display:flex; }
    .cc-shell.search-open { grid-template-columns:264px minmax(0,1fr) 300px; }
    .cc-shell.search-open .cc-members { display:none; }
    .cc-search-head { flex-shrink:0; padding:14px 16px; border-bottom:1px solid var(--cc-line-soft); display:flex; align-items:center; gap:8px; }
    .cc-search-head input {
      flex:1; background:rgba(8,6,20,0.7); border:1px solid rgba(201,168,76,0.2); border-radius:9px;
      padding:8px 11px; color:var(--text); font-family:"Cormorant Garamond",serif; font-size:14px; outline:none;
    }
    .cc-search-head input:focus { border-color:rgba(201,168,76,0.5); }
    .cc-search-head .cc-icon-btn { flex-shrink:0; }
    .cc-search-results { flex:1; overflow-y:auto; min-height:0; padding:6px; }
    .cc-search-hit { padding:10px 12px; border-radius:9px; cursor:pointer; transition:background .14s; }
    .cc-search-hit:hover { background:var(--cc-hover); }
    .cc-search-hit-meta { display:flex; gap:8px; align-items:baseline; margin-bottom:3px; }
    .cc-search-hit-name { font-family:"Cinzel",serif; font-size:11px; letter-spacing:.5px; color:var(--cc-violet); }
    .cc-search-hit-date { font-size:9px; color:var(--text3); font-family:"Cinzel",serif; letter-spacing:.5px; }
    .cc-search-hit-text { font-size:13px; color:var(--text2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .cc-search-hit-text mark { background:rgba(201,168,76,0.28); color:var(--cc-gold-soft); border-radius:2px; }
    .cc-search-empty { padding:30px 16px; text-align:center; color:var(--text3); font-style:italic; font-size:13px; }

    /* Panneau vidéo docké (conservé) */
    #commLivePanel { grid-area:members; overflow-y:auto; }
    .cc-shell:not(.live-docked) #commLivePanel { display:none !important; }
    .cc-shell.live-docked #commLivePanel { display:block; }
    .cc-shell.live-docked .cc-members, .cc-shell.live-docked #commSearchPanel { display:none; }

    /* Scrollbars fines violettes (scopées au chat) */
    .cc-nav-scroll, .cc-stream, .cc-members-scroll, .cc-search-results, #commLivePanel {
      scrollbar-width:thin; scrollbar-color:rgba(140,90,220,0.5) transparent;
    }
    .cc-nav-scroll::-webkit-scrollbar, .cc-stream::-webkit-scrollbar,
    .cc-members-scroll::-webkit-scrollbar, .cc-search-results::-webkit-scrollbar,
    #commLivePanel::-webkit-scrollbar, .comm-textarea::-webkit-scrollbar { width:6px; }
    .cc-nav-scroll::-webkit-scrollbar-thumb, .cc-stream::-webkit-scrollbar-thumb,
    .cc-members-scroll::-webkit-scrollbar-thumb, .cc-search-results::-webkit-scrollbar-thumb,
    #commLivePanel::-webkit-scrollbar-thumb, .comm-textarea::-webkit-scrollbar-thumb {
      background:rgba(140,90,220,0.45); border-radius:3px;
    }
    .cc-nav-scroll::-webkit-scrollbar-thumb:hover, .cc-stream::-webkit-scrollbar-thumb:hover {
      background:rgba(160,110,240,0.7);
    }

    /* Micro-interactions */
    @keyframes ccMsgIn { from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
    .comm-msg.cc-fresh { animation:ccMsgIn .16s ease; }
    .cc-stream.cc-switching { opacity:0; }
    .cc-stream { transition:opacity .13s ease; }

    /* Drawers mobile / tablette */
    .cc-drawer-backdrop {
      position:fixed; inset:0; z-index:640; background:rgba(2,1,8,0.6); backdrop-filter:blur(3px);
      opacity:0; pointer-events:none; transition:opacity .18s;
    }
    .cc-shell.drawer-open .cc-drawer-backdrop { opacity:1; pointer-events:auto; }

    /* ── TABLETTE : 2 colonnes, membres en panneau qui glisse ── */
    @media (max-width:1099px) {
      .cc-shell, .comm-layout { grid-template-columns:236px minmax(0,1fr) !important; grid-template-areas:"nav main" !important; }
      .cc-drawer-backdrop { top:58px; }
      .cc-members, #commSearchPanel, #commLivePanel {
        position:fixed; top:58px; right:0; bottom:0; width:300px; z-index:659;
        transform:translateX(105%); transition:transform .2s ease; border-left:1px solid var(--cc-line);
      }
      .cc-shell.members-open .cc-members { transform:none; display:flex; }
      .cc-shell.search-open #commSearchPanel { transform:none; display:flex; }
      .cc-shell.live-docked #commLivePanel { transform:none; display:block; }
      .cc-shell.dm-mode .cc-members { display:flex; }
    }

    .cc-mobile-only { display:none; }

    /* ═══════════════════════════════════════════════════════════════
       CHAT MOBILE — « Cercle des Initiés » recomposé pour smartphone
       (2026-09-02). Vraie composition mobile, PAS une réduction desktop :
       conversation plein écran sous la topbar, header compact, navigation
       en drawer, panneaux (membres / recherche) plein écran, composer fixe
       piloté par visualViewport (clavier virtuel), gestes tactiles, feuilles
       inférieures (profil / actions message), séparateur non-lus, toast MP.
       Backend + version desktop 100 % inchangés. Ne s'applique qu'à ≤767px.
       Hauteur réelle : shell en position:fixed avec top/bottom en px
       (neutre vis-à-vis du zoom:1.15 de <html> ; cf. drawers topbar).
       ═══════════════════════════════════════════════════════════════ */
    @media (max-width:767px) {
      #panelComm.active { padding:0 !important; min-height:0; }

      /* ── HEADER GLOBAL réduit UNIQUEMENT dans le Nexus (html.cc-in-comm) ──
         Niveau 1 : [roue = logo] · AKASHA · [cloche]. ~52-58px. Les autres
         panneaux d'Akasha et le desktop gardent leur header inchangé. */
      html.cc-in-comm .topbar {
        min-height:46px !important;
        padding-top:calc(4px + env(safe-area-inset-top,0px)) !important;
        padding-bottom:4px !important;
        padding-left:58px !important; padding-right:50px !important;
      }
      html.cc-in-comm .topbar-logo { font-size:17px !important; letter-spacing:3px !important; }
      html.cc-in-comm .topbar-logo span { display:none !important; }
      html.cc-in-comm #ps-akasha-rfab {
        width:38px !important; height:38px !important;
        top:calc(4px + env(safe-area-inset-top,0px)) !important;
      }
      html.cc-in-comm .ak-bell { transform:translateY(-50%) scale(.88); }

      /* conversation = calque plein écran entre le header et la barre d'onglets.
         top / bottom pilotés par variables (mesurées en JS : _ccSyncFrame). */
      #panelComm.active .cc-shell,
      #panelComm.active .comm-layout {
        position:fixed; left:0; right:0;
        top:var(--cc-topbar-h,52px); bottom:var(--cc-shell-bottom,62px); z-index:38;
        display:grid !important; height:auto;
        grid-template-columns:minmax(0,1fr) !important;
        grid-template-rows:minmax(0,1fr) !important;
        grid-template-areas:"main" !important;
        transition:bottom .16s ease;
      }
      .cc-shell.members-hidden, .cc-shell.dm-mode { grid-template-columns:minmax(0,1fr) !important; }
      .cc-shell::before {
        background:radial-gradient(140% 100% at 50% 26%,
          rgba(3,2,12,0.95) 0%, rgba(4,3,16,0.88) 42%, rgba(6,5,22,0.68) 100%);
      }
      .cc-stream::after { display:none; }

      /* ── NIVEAU 2 — barre du salon : [☰]  # NOM / • N en ligne  [🔍][👥][⋯] ──
         La cloche du salon passe dans le menu ⋯ pour alléger la rangée d'icônes. */
      /* backdrop-filter retiré sur mobile : il faisait de .cc-head un contexte
         d'empilement + bloc conteneur → le menu ⋯ (#ccHeadMenu, position:fixed)
         y était piégé et le flux de messages le recouvrait. Header rendu opaque. */
      .cc-head {
        padding:6px 6px 6px 4px; gap:4px; min-height:0; overflow:visible;
        backdrop-filter:none; -webkit-backdrop-filter:none;
        background:rgba(8,6,22,0.97);
      }
      .cc-head::before { display:none; }
      /* menu ⋯ en position:fixed (échappe à tous les contextes d'empilement du
         calque chat) — juste sous la barre du salon, aligné à droite. */
      #ccHeadMenu {
        position:fixed !important; right:8px !important; left:auto !important;
        top:calc(var(--cc-topbar-h,52px) + 46px) !important;
        min-width:210px; max-width:min(280px,calc(100vw - 16px));
        max-height:calc(100dvh - var(--cc-topbar-h,52px) - var(--cc-nav-h,62px) - 60px);
        overflow-y:auto; z-index:970;
        background:#0e0b24; border:1px solid rgba(201,168,76,0.32);
        box-shadow:0 18px 46px rgba(0,0,0,0.7);
      }
      #ccHeadMenu button { padding:11px 12px; font-size:15px; }
      .cc-head-hash { display:none; }
      .cc-head-sub { display:none; }
      .cc-shell.dm-mode .cc-head-sub { display:block; font-size:10px; }
      .cc-head-titles { flex:1; min-width:0; gap:0; }
      .cc-head-name { font-size:clamp(14px,4.2vw,16px); letter-spacing:1px; }
      .cc-head-online { display:none; }
      .cc-head-mcount {
        display:block; font-family:"Cinzel",serif; font-size:8px; letter-spacing:1px;
        color:rgba(107,209,138,0.82); white-space:nowrap; margin-top:1px;
      }
      .cc-head-mcount:empty { display:none; }
      .cc-head-mcount::before { content:"• "; }
      .cc-head-spacer { display:none; }
      .cc-head-actions { gap:0; flex-shrink:0; }
      #ccHeadNotifBtn { display:none !important; }        /* cloche → menu ⋯ */
      .cc-head #ccMoreBtn { display:flex !important; position:relative; }
      .cc-head #ccMoreBtn.has-unread::after {
        content:""; position:absolute; top:7px; right:7px; width:7px; height:7px;
        border-radius:50%; background:var(--cc-gold); box-shadow:0 0 6px var(--cc-gold);
      }
      .cc-icon-btn { width:36px; height:36px; font-size:15px; }
      .cc-head-back.cc-mobile-only {
        display:flex !important; width:36px; height:36px;
        align-items:center; justify-content:center; font-size:18px; color:var(--text2);
      }
      .cc-mobile-only { display:flex !important; }

      /* ── NAVIGATION = drawer gauche (≈88 %), entre le header et la barre d'onglets
           (qui reste visible pour naviguer dans Akasha) ── */
      .cc-nav {
        position:fixed; top:var(--cc-topbar-h,52px); left:0; bottom:var(--cc-nav-h,62px); width:min(340px,88vw); z-index:962;
        transform:translateX(-104%); transition:transform .24s cubic-bezier(.4,0,.2,1);
        border-right:1px solid var(--cc-line); background:#080518f6; backdrop-filter:blur(9px);
      }
      .cc-shell.nav-open .cc-nav { transform:none; box-shadow:34px 0 90px rgba(0,0,0,0.72); }
      .cc-nav.cc-nav-dragging { transition:none; }
      .cc-nav-brand { padding:16px 18px 13px; font-size:12px; }
      .cc-nav-foot { padding:12px 14px 14px; }
      .cc-chan, .cc-dm { padding:12px 14px; font-size:14px; margin:1px 8px; }
      .cc-nav-section { padding:14px 20px 7px; }

      /* ── PANNEAUX droite : membres / recherche / live = plein écran sous le header ── */
      .cc-members, #commSearchPanel, #commLivePanel {
        position:fixed; top:var(--cc-topbar-h,52px); left:0; right:0; bottom:var(--cc-nav-h,62px); width:auto; height:auto; z-index:963;
        transform:translateX(104%); transition:transform .24s cubic-bezier(.4,0,.2,1);
        background:#070512f8; backdrop-filter:blur(9px); border:0;
      }
      .cc-shell.members-open .cc-members { transform:none; }
      .cc-shell.search-open #commSearchPanel { transform:none; display:flex; }
      .cc-shell.live-docked #commLivePanel { transform:none; }
      .cc-search-head { padding:14px 14px 12px; }
      .cc-members-head { padding:16px 52px 12px 16px; }
      .cc-mobile-panel-close {
        position:absolute; top:9px; right:10px; z-index:5;
        width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,0.1);
        background:rgba(10,8,24,0.7); color:var(--text2); font-size:16px; cursor:pointer;
      }
      .cc-member { padding:11px 14px; margin:0 6px; }
      .cc-member .cc-avatar { width:36px; height:36px; font-size:13px; }
      .cc-member-name { font-size:13px; }

      /* ── BACKDROP : header + barre d'onglets restent accessibles ── */
      .cc-drawer-backdrop {
        position:fixed; left:0; right:0; top:var(--cc-topbar-h,52px); bottom:var(--cc-nav-h,62px);
        z-index:961; background:rgba(2,1,8,0.68);
      }

      /* ── FLUX — la conversation occupe tout l'espace restant ── */
      .comm-messages, .cc-stream {
        padding:8px 10px 4px; gap:0;
        -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
        background:linear-gradient(0deg, rgba(3,2,12,0.5) 0%, transparent 42%);
      }
      .cc-stream-sentinel + * { margin-top:2px; }
      /* Message = ligne de messagerie compacte, jamais une carte pleine largeur */
      .comm-msg {
        grid-template-columns:38px minmax(0,1fr); gap:0 9px; padding:2px 6px 2px 4px;
        max-width:93%; border-radius:11px;
        touch-action:pan-y;
        -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
      }
      .comm-msg.mentions-me { max-width:96%; }
      /* le texte en cours d'édition redevient sélectionnable */
      .comm-msg .comm-edit-box, .comm-msg .comm-edit-box * { -webkit-user-select:text; user-select:text; }
      .comm-msg.is-head { margin-top:9px; padding-top:3px; }
      .comm-msg.is-cont { padding-top:1px; padding-bottom:1px; }
      .comm-avatar, .cc-avatar { width:38px; height:38px; font-size:13px; }
      .comm-msg-name { font-size:13px; }
      .comm-msg-text { font-size:15px; line-height:1.55; }
      .comm-msg-meta { gap:5px 6px; margin-bottom:1px; }
      .comm-msg-time { font-size:9.5px; }
      .cc-seal, .comm-rank-tag { font-size:7.5px; padding:0 5px; }
      /* actions secondaires : jamais sous chaque message → appui long / feuille */
      .cc-msg-actions { display:none !important; }
      .cc-msg-hovertime { display:none !important; }
      .msg-reaction-add { display:none; }
      .msg-reactions:not(:empty) { margin-top:4px; }
      .msg-reaction-pill { font-size:13px; padding:2px 9px; }
      .comm-msg-menu { min-width:170px; }

      /* swipe-to-reply : glyphe qui apparaît sous le doigt */
      .comm-msg.cc-swipe-return { transition:transform .18s ease; }
      .comm-msg .cc-swipe-hint {
        position:absolute; left:2px; top:50%; margin-top:-11px; width:22px; height:22px;
        display:flex; align-items:center; justify-content:center; border-radius:50%;
        color:var(--cc-violet); font-size:13px; opacity:0; pointer-events:none;
        background:rgba(176,125,224,0.16);
      }
      .comm-msg.cc-swipe-armed .cc-swipe-hint { opacity:1; }

      /* séparateur ✦ NOUVEAUX MESSAGES ✦ */
      .cc-unread-sep {
        align-self:stretch; display:flex; align-items:center; gap:10px; margin:13px 2px 7px;
        font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:3px; color:var(--cc-gold-soft);
        text-transform:uppercase;
      }
      .cc-unread-sep::before, .cc-unread-sep::after {
        content:""; flex:1; height:1px;
        background:linear-gradient(90deg,transparent,rgba(201,168,76,0.55),transparent);
      }

      /* séparateur de date — discret : ──── ✦ 19 août ✦ ──── */
      .comm-date-sep {
        align-self:stretch; margin:12px 4px 6px; gap:9px; font-size:8.5px; letter-spacing:2px;
        color:var(--text3); opacity:.92; text-transform:none;
      }
      .comm-date-sep::before, .comm-date-sep::after {
        width:auto; flex:1; max-width:110px; height:1px;
        background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent);
      }
      .comm-date-sep .cds-star { font-size:8px; opacity:.8; }

      /* pastille ↓ nouveaux messages — juste au-dessus du composer */
      .comm-newmsg-pill, .cc-newpill {
        bottom:calc(var(--cc-composer-h,72px) + 10px); font-size:10px; padding:8px 17px;
      }
      .cc-typing { padding:1px 14px 3px; font-size:9px; }

      /* ── COMPOSER : fixe, au-dessus de la barre d'onglets, une seule rangée
           [ + ]  [ Transmets ton message… ]  [ ➤ ]  (~56-64px) ── */
      .comm-input-zone, .cc-composer {
        padding:6px 8px 7px;
        background:linear-gradient(0deg,#04030e 62%, rgba(4,3,14,0.35));
      }
      .cc-composer-box {
        border-radius:22px; display:flex; align-items:flex-end; gap:3px; padding:3px 4px 3px 3px;
      }
      .cc-composer-top { order:2; flex:1 1 auto; min-width:0; padding:6px 4px 6px 6px; gap:0; }
      .comm-textarea { font-size:16px; line-height:1.4; min-height:24px; max-height:112px; }
      /* .cc-composer-tools éclate ses enfants directement dans la boîte flex */
      .cc-composer-tools { display:contents; }
      .cc-tools-spacer { display:none !important; }
      #ccAttachBtn { order:1; }
      .cc-composer-tools > button:not(#ccAttachBtn):not(.comm-send-btn) { display:none; } /* émoji : clavier natif */
      .cc-tool-btn { width:36px; height:36px; font-size:18px; align-self:center; }
      .comm-send-btn, .cc-send-btn {
        order:3; align-self:center;
        padding:0; width:40px; height:40px; min-width:40px; border-radius:50%;
        font-size:0; letter-spacing:0; display:flex; align-items:center; justify-content:center;
      }
      .comm-send-btn::after, .cc-send-btn::after { content:"➤"; font-size:16px; }
      #commSendBtn.annonces-mode::after { content:"📣"; font-size:15px; }
      .comm-input-foot { display:none; }
      .comm-reply-bar, .cc-reply-bar { margin-bottom:5px; font-size:12.5px; padding:6px 11px; }
      .comm-mention-pop { left:8px; right:8px; min-width:0; max-height:min(44vh,240px); }
      .cc-emoji-pop { left:8px; right:8px; width:auto; grid-template-columns:repeat(8,1fr); }

      .comm-guardian-msg { margin:10px 2px 4px; }
      .comm-locked, .comm-muted-bar { padding:9px 14px 10px; }

      /* ── INTRO DU SALON ──
         Bandeau compact quand il y a des messages (≤90px) ; petite carte centrée
         quand le salon est vide (≤220px). Restructuré par le hook JS _ccChannelIntro. */
      .cc-intro { padding:12px 16px; }

      .cc-stream:not(.is-empty) .cc-intro.cc-intro-strip {
        align-self:stretch; max-width:none; text-align:left;
        display:flex; align-items:center; flex-wrap:wrap; gap:2px 9px;
        padding:9px 12px; margin:0 2px 4px; border-radius:12px;
        background:rgba(201,168,76,0.05); border:1px solid var(--cc-line);
      }
      .cc-intro-strip .cc-intro-glyph { font-size:16px; filter:none; }
      .cc-intro-strip .cc-intro-name {
        font-family:"Cinzel",serif; font-size:12px; letter-spacing:2px; margin:0;
        text-transform:uppercase; color:var(--cc-gold-soft);
      }
      .cc-intro-strip .cc-intro-text {
        flex-basis:100%; font-size:12px; font-style:normal; line-height:1.4;
        color:var(--text3); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
      }
      .cc-intro-strip .cc-intro-first { display:none; }

      .cc-stream.is-empty .cc-intro.cc-intro-empty {
        align-self:center; max-width:min(320px,86vw); padding:20px 20px 18px;
        border:1px solid var(--cc-line); border-radius:16px;
        background:radial-gradient(120% 100% at 50% 0%, rgba(201,168,76,0.08), rgba(6,5,22,0.4));
      }
      .cc-intro-empty .cc-intro-glyph { font-size:19px; }
      .cc-intro-empty .cc-intro-name { font-size:13.5px; letter-spacing:1px; margin:9px 0 7px; }
      .cc-intro-empty .cc-intro-text { font-size:13px; line-height:1.55; }
      .cc-intro-empty .cc-intro-first { display:none; }
      .cc-intro-cta {
        margin-top:16px; display:inline-block; padding:10px 20px; border-radius:22px;
        background:linear-gradient(135deg,#2a1060,#6020a0); border:1px solid rgba(176,125,224,0.5);
        color:#e8d8ff; font-family:"Cinzel",serif; font-size:9px; letter-spacing:2px;
        text-transform:uppercase; cursor:pointer;
      }
      .cc-stream.is-empty { background:linear-gradient(0deg, rgba(3,2,12,0.35), transparent 60%); }
    }

    /* ── Feuilles inférieures (profil · actions message) — mobile, hors media query
         pour rester utilisables si le viewport change, mais ouvertes seulement par JS ── */
    .cc-sheet-backdrop {
      position:fixed; inset:0; z-index:970; background:rgba(2,1,8,0.6);
      opacity:0; pointer-events:none; transition:opacity .18s;
    }
    .cc-sheet-backdrop.open { opacity:1; pointer-events:auto; }
    .cc-sheet {
      position:fixed; left:0; right:0; bottom:0; z-index:971;
      background:linear-gradient(180deg,#141031,#0a0820);
      border-top:1px solid rgba(201,168,76,0.3); border-radius:20px 20px 0 0;
      padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));
      transform:translateY(103%); transition:transform .24s cubic-bezier(.4,0,.2,1);
      max-height:86vh; overflow-y:auto; box-shadow:0 -18px 54px rgba(0,0,0,0.62);
    }
    .cc-sheet.open { transform:none; }
    .cc-sheet.cc-sheet-dragging { transition:none; }
    .cc-sheet-grip { width:38px; height:4px; border-radius:2px; background:rgba(255,255,255,0.22); margin:6px auto 12px; }
    .cc-sheet-react {
      display:flex; justify-content:space-between; gap:2px; padding:2px 0 12px;
      border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:4px;
    }
    .cc-sheet-react button {
      flex:1; background:none; border:none; font-size:23px; padding:8px 0; border-radius:12px; cursor:pointer;
    }
    .cc-sheet-react button:active { background:rgba(176,125,224,0.2); }
    .cc-sheet-act {
      display:flex; align-items:center; gap:14px; width:100%; background:none; border:none;
      color:var(--text2); font-family:"Cormorant Garamond",serif; font-size:16px;
      padding:13px 6px; text-align:left; cursor:pointer; border-radius:10px;
    }
    .cc-sheet-act:active { background:rgba(176,125,224,0.14); }
    .cc-sheet-act .ic { width:22px; text-align:center; font-size:16px; opacity:.85; flex-shrink:0; }
    .cc-sheet-act.danger { color:#f0899a; }
    .cc-sheet-title {
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:3px; text-transform:uppercase;
      color:var(--text3); padding:4px 6px 8px;
    }
    .cc-sheet-prof-top { display:flex; align-items:center; gap:14px; padding:6px 4px 10px; }
    .cc-sheet-prof-top .cc-avatar { width:56px; height:56px; font-size:20px; }
    .cc-sheet-prof-name { font-family:"Cinzel",serif; font-size:17px; letter-spacing:1px; color:var(--text); }
    .cc-sheet-prof-status { font-family:"Cinzel",serif; font-size:8.5px; letter-spacing:1.5px; color:var(--text3); margin-top:3px; }
    .cc-sheet-prof-seals { display:flex; gap:5px; flex-wrap:wrap; padding:0 4px 10px; }
    .cc-sheet-prof-bio { color:var(--text2); font-size:14px; font-style:italic; line-height:1.6; padding:2px 4px 12px; }

    /* toast MP mobile */
    .cc-dm-toast {
      position:fixed; left:10px; right:10px; top:64px; z-index:975;
      display:flex; align-items:center; gap:11px; padding:10px 12px;
      background:linear-gradient(135deg,#1c1140,#241a52);
      border:1px solid rgba(176,125,224,0.5); border-radius:14px;
      box-shadow:0 14px 42px rgba(0,0,0,0.55);
      transform:translateY(-160%); transition:transform .26s cubic-bezier(.4,0,.2,1); cursor:pointer;
    }
    .cc-dm-toast.open { transform:none; }
    .cc-dm-toast .cc-avatar { width:34px; height:34px; font-size:13px; flex-shrink:0; }
    .cc-dm-toast-main { flex:1; min-width:0; }
    .cc-dm-toast-name { font-family:"Cinzel",serif; font-size:11px; letter-spacing:.7px; color:#e8d8ff; }
    .cc-dm-toast-text { font-size:13px; color:var(--text2); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    @media (min-width:768px) { .cc-sheet, .cc-sheet-backdrop, .cc-dm-toast { display:none !important; } }
    /* Chat mobile immersif : les FAB flottants gêneraient le composer plein écran */
    @media (max-width:767px) {
      html.cc-in-comm #sub-fab,
      html.cc-in-comm #polaristar-home-btn { display:none !important; }
    }

    @media (prefers-reduced-motion:reduce) {
      .comm-guardian-emblem::after,
      .comm-msg.flash-target, .comm-msg.cc-fresh,
      .msg-reaction-pill.just-toggled, .comm-msg-name.pseudo-glow,
      .cc-typing .cc-dots i, .comm-msg.creator-msg-highlight { animation:none !important; }
      .cc-stream, #commQuickProfile { transition:none !important; }
      .cc-stream.cc-switching { opacity:1; }
    }

    /* Badge de demandes d'ami (conservé — _loadFriendships) */
    .sidebar-notif-badge {
      background:#c82840; color:#fff; font-size:9px; font-family:sans-serif; font-weight:700;
      border-radius:10px; padding:1px 6px; min-width:16px; text-align:center; flex-shrink:0;
    }

    /* ── OVERLAY MEMBRES ── */
    #membersOverlay {
      position:fixed; inset:0; z-index:700; background:#000000bb; backdrop-filter:blur(8px);
      display:none; align-items:flex-start; justify-content:center; padding-top:80px;
    }
    #membersOverlay.open { display:flex; }
    .members-box {
      background:linear-gradient(160deg,#130e30f8,#0a0820f8);
      border:1px solid rgba(100,60,200,0.3); border-radius:18px;
      width:100%; max-width:560px; max-height:70vh;
      display:flex; flex-direction:column;
      box-shadow:0 30px 100px #000000cc, 0 0 60px rgba(100,60,200,0.1);
    }
    .members-header {
      padding:22px 24px 16px; border-bottom:1px solid rgba(255,255,255,0.05); flex-shrink:0;
    }
    .members-header-title { font-family:"Cinzel",serif; font-size:16px; letter-spacing:3px; color:var(--text); margin-bottom:14px; }
    .members-search-row {
      display:flex; gap:8px; align-items:center;
      background:rgba(8,6,20,0.8); border:1px solid rgba(100,60,200,0.25);
      border-radius:10px; padding:10px 14px;
    }
    .members-search-row:focus-within { border-color:rgba(140,80,255,0.5); }
    .members-search-input {
      flex:1; background:transparent; border:none; outline:none;
      color:var(--text); font-family:"Cormorant Garamond",serif; font-size:16px;
    }
    .members-search-input::placeholder { color:var(--text3); font-style:italic; }
    .members-tabs {
      display:flex; gap:4px; padding:12px 24px 0; flex-shrink:0;
    }
    .members-tab {
      padding:6px 18px; border-radius:20px; cursor:pointer; font-family:"Cinzel",serif;
      font-size:10px; letter-spacing:2px; color:var(--text3); border:1px solid transparent; transition:all .2s;
    }
    .members-tab.active { color:var(--text); background:rgba(100,60,200,0.15); border-color:rgba(140,80,255,0.3); }
    .members-list {
      flex:1; overflow-y:auto; padding:8px 0 16px;
      scrollbar-width:thin; scrollbar-color:var(--border) transparent;
    }
    .member-card {
      display:flex; align-items:center; gap:14px;
      padding:12px 24px; transition:background .15s; cursor:default;
    }
    .member-card:hover { background:rgba(255,255,255,0.03); }
    .member-card-avatar {
      width:40px; height:40px; border-radius:50%; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      font-family:"Cinzel",serif; font-size:15px; font-weight:700;
      background:linear-gradient(135deg,#1a0a3a,#2a1050);
      border:1px solid rgba(100,60,200,0.3); color:var(--violet3);
    }
    .member-card-info { flex:1; min-width:0; }
    .member-card-name { font-family:"Cinzel",serif; font-size:13px; color:var(--text); margin-bottom:4px; }
    .member-card-badges { display:flex; gap:5px; flex-wrap:wrap; }
    .member-card-actions { display:flex; gap:6px; flex-shrink:0; }
    .member-action-btn {
      padding:6px 14px; border-radius:8px; cursor:pointer; font-family:"Cinzel",serif;
      font-size:9px; letter-spacing:2px; transition:all .2s; border:1px solid;
    }
    .mab-friend { background:rgba(100,220,130,0.08); border-color:rgba(60,180,100,0.3); color:#70e090; }
    .mab-friend:hover { background:rgba(60,180,100,0.18); }
    .mab-dm { background:rgba(100,60,200,0.12); border-color:rgba(140,80,255,0.3); color:#c090ff; }
    .mab-dm:hover { background:rgba(100,60,200,0.22); }
    .mab-pending { background:rgba(201,168,76,0.08); border-color:rgba(201,168,76,0.25); color:#e8c870; cursor:default; }
    .mab-friends { background:rgba(100,220,130,0.12); border-color:rgba(60,180,100,0.4); color:#70e090; cursor:default; }
    .mab-follow { background:rgba(100,60,200,0.08); border-color:rgba(140,80,255,0.3); color:#a888f0; }
    .mab-follow:hover { background:rgba(100,60,200,0.18); }
    .mab-following { background:rgba(100,60,200,0.16); border-color:rgba(140,80,255,0.4); color:#c090ff; }
    .member-card-followers { font-family:"Cinzel",serif; font-size:9px; letter-spacing:1px; color:var(--text3); margin-top:2px; }
    .friend-req-card {
      display:flex; align-items:center; gap:12px;
      padding:12px 24px; border-bottom:1px solid rgba(255,255,255,0.04);
    }
    .friend-req-card-name { flex:1; font-family:"Cinzel",serif; font-size:13px; color:var(--text); }
    .frc-accept { background:rgba(60,180,100,0.15); border:1px solid rgba(60,180,100,0.4); color:#70e090; padding:5px 14px; border-radius:8px; cursor:pointer; font-family:"Cinzel",serif; font-size:9px; letter-spacing:2px; transition:all .2s; }
    .frc-accept:hover { background:rgba(60,180,100,0.25); }
    .frc-decline { background:rgba(200,40,60,0.1); border:1px solid rgba(200,40,60,0.3); color:#f07080; padding:5px 14px; border-radius:8px; cursor:pointer; font-family:"Cinzel",serif; font-size:9px; letter-spacing:2px; transition:all .2s; }
    .frc-decline:hover { background:rgba(200,40,60,0.2); }

    /* ── VUE DM — fil privé dans .cc-stream (pas de grosse bulle) ── */
    .dm-header-back { cursor:pointer; color:var(--text3); font-size:18px; transition:color .2s; flex-shrink:0; }
    .dm-header-back:hover { color:var(--text); }
    .comm-msg.dm-msg-me { background:rgba(120,70,220,0.07); border-radius:9px; box-shadow:inset 2px 0 0 rgba(140,90,220,0.35); }
    .comm-msg.dm-msg-me .comm-msg-text { color:rgba(224,214,255,0.95); }

    /* ── UPLOAD & RICH TEXT EDITOR ── */
    .upload-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .upload-pick-btn {
      display:inline-flex; align-items:center; gap:6px; cursor:pointer;
      padding:8px 16px; border-radius:8px; font-size:11px; font-family:"Cinzel",serif; letter-spacing:1.5px;
      background:rgba(60,30,100,0.3); border:1px solid rgba(140,80,255,0.35); color:var(--text2);
      transition:all .2s; white-space:nowrap;
    }
    .upload-pick-btn:hover { background:rgba(80,40,140,0.4); border-color:rgba(160,100,255,0.6); color:var(--text); }
    .upload-filename { font-size:12px; color:var(--text3); font-style:italic; }
    .rte-toolbar {
      display:flex; gap:3px; padding:6px 8px; flex-wrap:wrap;
      background:rgba(8,6,20,0.6); border:1px solid rgba(255,255,255,0.07);
      border-bottom:none; border-radius:10px 10px 0 0;
    }
    .rte-toolbar button {
      background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
      color:var(--text3); border-radius:5px; padding:4px 10px; cursor:pointer;
      font-size:12px; font-family:inherit; transition:all .15s; line-height:1;
    }
    .rte-toolbar button:hover { background:rgba(100,60,200,0.2); color:var(--text); border-color:rgba(140,80,255,0.4); }
    .rte-body {
      min-height:180px; max-height:340px; overflow-y:auto;
      padding:14px 16px; border-radius:0 0 10px 10px;
      background:rgba(8,6,20,0.8); border:1px solid rgba(100,60,200,0.25);
      color:var(--text); font-family:"Cormorant Garamond",serif; font-size:16px; line-height:1.8;
      outline:none; scrollbar-width:thin; scrollbar-color:var(--border) transparent;
    }
    .rte-body:focus { border-color:rgba(140,80,255,0.5); }
    .rte-body h2 { font-family:"Cinzel",serif; color:var(--gold2); font-size:20px; margin:16px 0 8px; letter-spacing:2px; }
    .rte-body h3 { font-family:"Cinzel",serif; color:var(--violet3); font-size:16px; margin:12px 0 6px; letter-spacing:1px; }
    .rte-body p { margin:0 0 10px; }
    .rte-body ul { padding-left:20px; }
    .rte-body strong { color:var(--text); }
    .form-row select {
      width:100%; padding:10px 14px; border-radius:10px;
      background:rgba(8,6,20,0.8); border:1px solid rgba(100,60,200,0.25);
      color:var(--text); font-family:"Cormorant Garamond",serif; font-size:16px; outline:none;
    }
    .form-row small { display:block; margin-top:4px; }

    /* ── MODAL ANNONCE ── */
    #annonceOverlay {
      position:fixed; inset:0; z-index:600; background:#00000099; backdrop-filter:blur(8px);
      display:none; align-items:center; justify-content:center;
    }
    #annonceOverlay.open { display:flex; }
    .annonce-box {
      background:linear-gradient(160deg,#130e30f8 0%,#0a0820f8 100%);
      border:1px solid rgba(201,168,76,0.35); border-radius:18px;
      padding:36px 40px; max-width:560px; width:100%;
      box-shadow:0 30px 100px #000000cc, 0 0 60px rgba(201,168,76,0.1);
      position:relative;
    }
    .annonce-box-close {
      position:absolute; top:14px; right:18px;
      background:transparent; border:none; color:var(--text3);
      font-size:20px; cursor:pointer; transition:color .2s;
    }
    .annonce-box-close:hover { color:var(--text); }
    .annonce-box-eyebrow {
      font-family:"Cinzel",serif; font-size:10px; letter-spacing:5px;
      color:rgba(201,168,76,0.6); text-transform:uppercase; margin-bottom:8px;
    }
    .annonce-box-title {
      font-family:"Cinzel Decorative","Cinzel",serif; font-size:20px; letter-spacing:3px;
      background:linear-gradient(135deg,#c9a84c,#e8c97a,#f8efc0);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      margin-bottom:24px;
    }
    .annonce-textarea {
      width:100%; background:rgba(8,6,20,0.8); border:1px solid rgba(201,168,76,0.2);
      border-radius:12px; padding:16px 18px; color:var(--text);
      font-family:"Cormorant Garamond",serif; font-size:18px; line-height:1.65;
      resize:vertical; min-height:140px; outline:none; transition:border-color .2s;
      box-sizing:border-box;
    }
    .annonce-textarea::placeholder { color:var(--text3); font-style:italic; }
    .annonce-textarea:focus { border-color:rgba(201,168,76,0.5); }
    .annonce-counter { text-align:right; font-size:11px; color:var(--text3); font-family:"Cinzel",serif; letter-spacing:1px; margin-top:6px; margin-bottom:18px; }
    .annonce-send-btn {
      width:100%; padding:15px; cursor:pointer; border-radius:12px;
      background:linear-gradient(135deg,#c9a84c 0%,#8a6a10 100%);
      border:1px solid rgba(201,168,76,0.5); color:#1a0a00;
      font-family:"Cinzel",serif; font-size:13px; letter-spacing:3px;
      font-weight:700; text-transform:uppercase; transition:all .2s;
    }
    .annonce-send-btn:hover { box-shadow:0 0 30px rgba(201,168,76,0.4); transform:translateY(-1px); }
    .annonce-send-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
    .annonce-preview {
      background:rgba(201,168,76,0.05); border:1px solid rgba(201,168,76,0.15);
      border-left:3px solid rgba(201,168,76,0.4); border-radius:0 10px 10px 0;
      padding:12px 16px; margin-bottom:20px; font-size:14px; color:var(--text2);
      font-style:italic; line-height:1.6; display:none;
    }

    /* ═══ COMPOSER « Nouvelle Annonce » — Phase B (2026-09-09) ═══ */
    #annonceOverlay { z-index: 9660; }
    #annonceOverlay .annonce-box { max-width: 620px; max-height: 92vh; overflow-y: auto; }
    .ann-form { display: flex; flex-direction: column; gap: 16px; }
    .ann-field { display: flex; flex-direction: column; gap: 6px; }
    .ann-label {
      font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--gold2);
    }
    .ann-label small { display: block; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 12px; letter-spacing: 0; color: var(--text3); text-transform: none; margin-top: 2px; }
    .ann-input {
      width: 100%; box-sizing: border-box; background: rgba(8,6,20,0.8);
      border: 1px solid rgba(201,168,76,0.2); border-radius: 10px; padding: 11px 14px;
      color: var(--text); font-family: "Cormorant Garamond", serif; font-size: 15px; outline: none;
      transition: border-color .2s;
    }
    .ann-input:focus { border-color: rgba(201,168,76,0.5); }
    textarea.ann-input { min-height: 120px; resize: vertical; line-height: 1.6; }
    .ann-input::placeholder { color: var(--text3); font-style: italic; }
    .ann-radios { display: flex; gap: 8px; flex-wrap: wrap; }
    .ann-radio {
      flex: 1; min-width: 92px; cursor: pointer; text-align: center;
      padding: 9px 6px; border-radius: 9px; border: 1px solid var(--border);
      background: rgba(255,255,255,.02); color: var(--text3);
      font-family: "Cinzel", serif; font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase;
      transition: all .15s;
    }
    .ann-radio:hover { color: var(--text2); }
    .ann-radio input { display: none; }
    .ann-radio.on { color: var(--gold2); background: rgba(201,168,76,.1); border-color: rgba(201,168,76,.4); }
    .ann-radio.on.crit { color: #ffcf7a; background: rgba(224,85,107,.14); border-color: rgba(224,85,107,.45); }
    .ann-checks { display: flex; flex-direction: column; gap: 9px; }
    .ann-check {
      display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
      font-family: "Cormorant Garamond", serif; font-size: 14px; color: var(--text2);
    }
    .ann-check input { margin-top: 3px; accent-color: #c9a84c; width: 15px; height: 15px; flex-shrink: 0; }
    .ann-sub { margin: 4px 0 0 25px; display: none; flex-direction: column; gap: 8px; }
    .ann-sub.show { display: flex; }
    .ann-row2 { display: flex; gap: 10px; }
    .ann-row2 > * { flex: 1; }
    .ann-actions { display: flex; gap: 10px; margin-top: 6px; }
    .ann-actions button { flex: 1; }
    .ann-btn-preview {
      padding: 13px; border-radius: 11px; cursor: pointer;
      background: transparent; border: 1px solid var(--gold-dim); color: var(--gold2);
      font-family: "Cinzel", serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; transition: all .2s;
    }
    .ann-btn-preview:hover { background: rgba(201,168,76,.1); }
    #annPreviewBox { margin: 6px 0 0; }
    #annPreviewBox:empty { display: none; }
    @media (max-width: 600px) {
      #annonceOverlay { align-items: flex-start; }
      #annonceOverlay .annonce-box {
        max-width: none; width: 100%; min-height: 100%; max-height: none;
        border-radius: 0; padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
      }
      .ann-radio { min-width: 0; flex-basis: calc(50% - 4px); }
    }

    /* ═══ CENTRE D'ANNONCES — Phase B ═══ */
    #akAnnCenter { z-index: 9650; }
    #akAnnCenter .modal-box { max-width: 720px; padding: 26px 26px 24px; }
    .akac-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
    .akac-title {
      font-family: "Cinzel Decorative", "Cinzel", serif; font-size: 19px; letter-spacing: 3px;
      background: linear-gradient(135deg,#c9a84c,#e8c97a,#f8efc0);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .akac-close { position: absolute; top: 16px; right: 18px; background: none; border: none; color: var(--text3); font-size: 20px; cursor: pointer; }
    .akac-close:hover { color: var(--text); }
    .akac-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 16px; }
    .akac-filters button {
      padding: 6px 12px; border-radius: 16px; cursor: pointer;
      background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--text3);
      font-family: "Cinzel", serif; font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase; transition: all .15s;
    }
    .akac-filters button.active { color: var(--gold2); background: rgba(201,168,76,.1); border-color: rgba(201,168,76,.4); }
    .akac-list { display: flex; flex-direction: column; gap: 10px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
    .akac-list .ak-ann-card.archived { opacity: .55; }
    .akac-empty { text-align: center; color: var(--text3); font-style: italic; padding: 40px; }
    .ak-ann-modtools { display: flex; gap: 8px; margin-top: 8px; }
    .ak-ann-modtools button {
      background: none; border: 1px solid var(--border); color: var(--text3); cursor: pointer;
      font-family: "Cinzel", serif; font-size: 7.5px; letter-spacing: 1.2px; text-transform: uppercase;
      padding: 5px 9px; border-radius: 7px; transition: all .15s;
    }
    .ak-ann-modtools button:hover { color: var(--gold2); border-color: var(--gold-dim); }

    /* ═══ BANNIÈRE D'ANNONCE SUR L'ACCUEIL — Phase B ═══ */
    #akHomeAnnounce {
      position: relative; z-index: 3; margin: 0 auto 12px; width: 100%; max-width: 760px;
      display: none; align-items: center; gap: 12px; padding: 11px 14px;
      border-radius: 13px; border: 1px solid var(--gold-dim);
      background: linear-gradient(120deg, rgba(20,12,44,.72), rgba(10,8,26,.66));
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      box-shadow: 0 12px 40px -14px #000, 0 0 26px rgba(201,168,76,.1);
      animation: akHomeFadeIn .4s ease both;
    }
    #akHomeAnnounce.show { display: flex; }
    #akHomeAnnounce.sev-critical { border-color: rgba(224,85,107,.5); box-shadow: 0 12px 40px -14px #000, 0 0 26px rgba(224,85,107,.18); }
    .akhb-star { flex-shrink: 0; font-size: 15px; color: var(--gold2); filter: drop-shadow(0 0 6px rgba(201,168,76,.55)); }
    #akHomeAnnounce.sev-critical .akhb-star { color: #ffcf7a; }
    .akhb-body { flex: 1; min-width: 0; }
    .akhb-eyebrow { font-family: "Cinzel", serif; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold2); }
    .akhb-text { font-family: "Cormorant Garamond", serif; font-size: 14px; color: var(--text); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .akhb-act { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .akhb-see {
      background: none; border: 1px solid var(--gold-dim); color: var(--gold2); cursor: pointer;
      font-family: "Cinzel", serif; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;
      padding: 6px 12px; border-radius: 8px; transition: all .15s;
    }
    .akhb-see:hover { background: rgba(201,168,76,.14); }
    .akhb-x { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 15px; padding: 0 4px; line-height: 1; }
    .akhb-x:hover { color: var(--text); }
    #akHomeAnnounce.sev-critical .akhb-x { display: none; }
    @media (max-width: 560px) {
      .akhb-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
      .akhb-see { padding: 6px 9px; }
    }

    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    @media (max-width: 680px) {
      .topbar { padding: 10px 10px; gap: 5px; flex-wrap: nowrap; overflow: visible; position: relative; }
      /* Menu burger ouvert : on hisse toute la .topbar (et donc son panneau) AU-DESSUS
         des boutons flottants (#sub-fab / #polaristar-home-btn, z-index 8888) — sinon ils
         captent le tactile dans le bas du menu et empêchent de le faire défiler. */
      .topbar.menu-open { z-index: 9000; }
      /* Barre mobile = logo + cloche + burger, rien d'autre. « Or Spirituel » et
         « Outils » sont déplacés DANS le menu burger (voir plus bas) — plus rien
         n'est rogné ni coupé. */
      .topbar-logo { font-size: 20px; letter-spacing: 3px; }
      .topbar-logo span { display: none; }
      .topbar-burger { display: flex; }
      /* position:fixed + top/bottom en px : neutre vis-à-vis du zoom:1.15 de <html>
         (contrairement à 100vh/100dvh qui seraient gonflés → pied du menu hors écran). */
      .topbar-menu-panel {
        display: none; flex-direction: column; gap: 10px;
        position: fixed; left: 12px; right: 12px; top: 60px; bottom: 12px;
        background: #08061c; border: 1px solid var(--border); border-radius: 12px;
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 14px 40px #000000aa;
        overflow-y: auto; z-index: 9001;
        -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
      }
      /* Sans ça, .topbar-nav (flex-shrink:1) se comprimait et rognait ses derniers
         boutons au lieu de laisser le panneau défiler → « impossible d'aller en bas ». */
      .topbar-menu-panel > *, .topbar-menu-panel .topbar-nav { flex-shrink: 0; }
      .topbar.menu-open .topbar-menu-panel { display: flex; }
      .topbar-menu-panel .topbar-nav { flex-direction: column; margin-left: 0; gap: 4px; }
      .topbar-menu-panel .nav-btn { width: 100%; text-align: left; padding: 10px 14px; font-size: 12px; }
      /* « Or Spirituel » / « Outils » : maintenant des lignes pleine largeur en haut du menu.
         Sélecteurs par ID pour battre `#akOrBtn { order:3 }` de la feuille de base. */
      .topbar-menu-panel > #akOrBtn,
      .topbar-menu-panel > #topbarToolsBtn {
        order: -1; margin: 0 !important; width: 100%; height: auto; min-height: 46px;
        justify-content: flex-start; gap: 8px; padding: 12px 14px !important;
        border-radius: 10px; font-size: 11px !important; letter-spacing: 1.5px;
      }
      .topbar-menu-panel > #akOrBtn::after,
      .topbar-menu-panel > #topbarToolsBtn::after { content: none !important; }
      .topbar-toollinks { min-width: 0; max-width: calc(100vw - 28px); }
      .topbar-toollinks > a { font-size: 12px !important; padding: 12px !important; min-height: 44px; }
      .topbar-menu-panel .topbar-user {
        display: flex !important; flex-direction: column; align-items: stretch; gap: 8px;
        margin-left: 0; padding-left: 0; border-left: none;
        border-top: 1px solid var(--border); padding-top: 10px;
      }
      .topbar-menu-panel .user-email { max-width: none; }
      .topbar-menu-panel #accountMenuBtn { justify-content: center; }
      .panel { padding: 20px 14px 60px; }
      .section-title { font-size: 22px; }
      .card-grid { grid-template-columns: 1fr; }
      .gate-box { width: calc(100vw - 28px); padding: 26px 20px; }
      .gate-title { font-size: 30px; }
      /* Le chat Communauté gère son propre responsive (drawers ☰ / 👥) dans la
         section « CHAT — Cercle des Initiés ». Rien à surcharger ici. */
    }

    /* ── COUCHE MOBILE (2026-08-28) — cibles tactiles + scroll interne ── */
    @media (max-width: 767px) {
      .topbar-burger { min-width: 44px; min-height: 44px; }
      .topbar-tools-btn { min-height: 44px; }
      .topbar-menu-panel .nav-btn { padding: 13px 14px; min-height: 46px; }
      /* la zone de contenu défile en momentum, réserve la place du lecteur audio + safe-area */
      .panels-wrap {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
      }
      /* champs : 16px = pas de zoom auto iOS */
      input, select, textarea { font-size: 16px !important; }
      /* modales : respirer avec la safe-area basse */
      .modal-inner, .dm-panel, .mfp, .book-reader { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
    }

    /* ═══════════════════════════════════════════════════════════
       INTRO IMMERSIVE — « AKASHA · Bibliothèque Cosmique »
       Écran d'accueil contemplatif : réseau cosmique de connaissances,
       lumière centrale, géométrie sacrée tournante, révélation du titre.
       Vu une fois par session (sessionStorage: akasha_intro_seen).
       ═══════════════════════════════════════════════════════════ */
    #akashaIntro {
      position: fixed; inset: 0; z-index: 99999;
      display: flex; align-items: center; justify-content: center;
      background:
        radial-gradient(ellipse 70% 60% at 50% 44%, #14093280 0%, #05020f 60%, #02010a 100%),
        #02010a;
      overflow: hidden;
      opacity: 1;
      transition: opacity 1.05s ease, transform 1.05s ease;
    }
    #akashaIntro.intro-leaving { opacity: 0; transform: scale(1.09); pointer-events: none; }
    #akashaIntro.intro-hidden  { display: none; }

    #introNet {
      position: absolute; inset: 0; width: 100%; height: 100%;
      opacity: 0; animation: introNetIn 2.6s ease forwards .15s;
    }
    @keyframes introNetIn { to { opacity: 1; } }

    .intro-vignette {
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 62% 52% at 50% 44%, transparent 38%, #02010ad9 100%);
    }

    .intro-core {
      position: relative; z-index: 2;
      display: flex; flex-direction: column; align-items: center;
      padding: 24px; text-align: center;
    }

    /* halo de lumière au centre */
    .intro-lightburst {
      position: absolute; top: 40%; left: 50%;
      width: min(74vw, 540px); aspect-ratio: 1 / 1;
      border-radius: 50%; pointer-events: none;
      background: radial-gradient(circle, #f8efc0b0 0%, #e8c97a55 22%, #7a45c033 46%, transparent 70%);
      filter: blur(6px);
      opacity: 0; transform: translate(-50%, -50%) scale(.15);
      animation: introBurst 2.8s cubic-bezier(.16,.8,.3,1) forwards .95s;
    }
    @keyframes introBurst {
      0%   { opacity: 0; transform: translate(-50%,-50%) scale(.12); }
      42%  { opacity: 1; }
      100% { opacity: .48; transform: translate(-50%,-50%) scale(1); }
    }

    /* géométrie sacrée — cercle de connaissance, principalement décoratif */
    .intro-sacred-wrap {
      position: absolute; top: 40%; left: 50%;
      width: min(88vw, 640px); height: min(88vw, 640px);
      transform: translate(-50%, -50%); pointer-events: none;
      opacity: 0; animation: introSacredIn 3s ease forwards 1.15s;
    }
    @keyframes introSacredIn { to { opacity: .5; } }
    .intro-sacred {
      width: 100%; height: 100%; transform-origin: 50% 50%;
      animation: introSacredSpin 260s linear infinite;
    }
    @keyframes introSacredSpin { to { transform: rotate(360deg); } }
    #akashaIntro.intro-leaving .intro-sacred-wrap { opacity: .85; transition: opacity 1s ease; }
    #akashaIntro.intro-leaving .intro-lightburst {
      animation: introExitBurst 1s ease forwards;
    }
    @keyframes introExitBurst { to { opacity: 1; transform: translate(-50%,-50%) scale(3.6); } }

    .intro-wordmark { position: relative; z-index: 3; filter: drop-shadow(0 0 34px rgba(232,201,122,.26)); }

    .intro-title {
      font-family: "Cinzel Decorative", "Cinzel", serif;
      font-size: clamp(52px, 13vw, 132px); font-weight: 700;
      letter-spacing: .14em; line-height: 1; padding-left: .14em;
      background: linear-gradient(135deg, #9a6a1c 0%, #e8c97a 36%, #faf1c8 52%, #e8c97a 66%, #8a5c16 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      opacity: 0; transform: translateY(20px) scale(.93); filter: blur(16px);
      animation: introTitleIn 1.9s cubic-bezier(.16,.9,.3,1) forwards 1.65s;
    }
    @keyframes introTitleIn {
      0%   { opacity: 0; transform: translateY(20px) scale(.93); filter: blur(16px); }
      55%  { opacity: 1; }
      100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    .intro-subtitle {
      margin-top: 20px;
      font-family: "Cinzel", "Cinzel Decorative", serif;
      font-size: clamp(12px, 2.4vw, 17px); letter-spacing: .42em; padding-left: .42em;
      text-transform: uppercase; color: #dcccab;
      text-shadow: 0 0 22px rgba(160,110,220,.4);
      opacity: 0; transform: translateY(10px);
      animation: introFadeUp 1.5s ease forwards 2.85s;
    }

    .intro-slogan {
      margin-top: 24px; max-width: 36ch;
      font-family: "Cormorant Garamond", serif; font-style: italic;
      font-size: clamp(14px, 2.6vw, 20px); line-height: 1.7; color: #b7a9c9;
      text-wrap: balance;
      opacity: 0; filter: blur(7px);
      animation: introSloganIn 2.1s ease forwards 3.65s;
    }
    @keyframes introSloganIn { to { opacity: .92; filter: blur(0); } }

    .intro-enter {
      margin-top: 42px;
      font-family: "Cinzel", serif; font-size: clamp(11px, 1.5vw, 13px);
      letter-spacing: .32em; text-transform: uppercase; color: #f3e6bf;
      cursor: pointer; padding: 16px 40px; border-radius: 999px;
      background: linear-gradient(135deg, #241546 0%, #3a1f70 50%, #241546 100%);
      border: 1px solid rgba(201,168,76,.5);
      box-shadow: 0 0 24px rgba(122,69,192,.26), inset 0 1px 0 rgba(255,255,255,.08);
      opacity: 0; transform: translateY(12px);
      animation: introFadeUp 1.2s ease forwards 4.25s;
      transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease, background .35s ease;
      position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent;
    }
    .intro-enter::after {
      content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      background: radial-gradient(circle at 50% 50%, rgba(248,239,192,.34), transparent 70%);
      opacity: 0; transition: opacity .4s ease;
    }
    .intro-enter:hover, .intro-enter:focus-visible {
      outline: none; border-color: rgba(232,201,122,.9); transform: translateY(-2px);
      background: linear-gradient(135deg, #2e1a58 0%, #4a2790 50%, #2e1a58 100%);
      box-shadow: 0 0 40px rgba(232,201,122,.4), 0 0 96px rgba(122,69,192,.34), inset 0 1px 0 rgba(255,255,255,.12);
    }
    .intro-enter:hover::after, .intro-enter:focus-visible::after { opacity: 1; }
    @keyframes introEnterFlash {
      0%   { box-shadow: 0 0 40px rgba(232,201,122,.4); }
      100% { box-shadow: 0 0 220px 50px rgba(248,239,192,.7), 0 0 420px 140px rgba(122,69,192,.5); }
    }

    .intro-skip {
      position: absolute; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
      white-space: nowrap;
      font-family: "Cinzel", serif; font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
      color: #6a5c82; background: none; border: none; cursor: pointer; padding: 8px 14px;
      opacity: 0; animation: introFadeUp 1s ease forwards 2s; transition: color .3s ease;
    }
    .intro-skip:hover { color: #b7a9c9; }

    @keyframes introFadeUp { to { opacity: 1; transform: none; } }

    @media (max-width: 600px) {
      .intro-enter { padding: 15px 30px; }
      .intro-slogan { max-width: 26ch; }
      .intro-skip { font-size: 9px; letter-spacing: .16em; }
    }

    @media (prefers-reduced-motion: reduce) {
      #akashaIntro { transition: opacity .3s ease; }
      #introNet { animation: none; opacity: .5; }
      .intro-lightburst { animation: none; opacity: .4; transform: translate(-50%,-50%) scale(1); }
      .intro-sacred-wrap { animation: none; opacity: .4; }
      .intro-sacred { animation: none; }
      .intro-title, .intro-subtitle, .intro-slogan, .intro-enter, .intro-skip {
        animation: none; opacity: 1; transform: none; filter: none;
      }
    }

    /* ══════════════════════════════════════════
       NOTIFICATIONS — cloche, centre, toasts, réglages
       Identité AKASHA : verre sombre, violet profond, or pour l'important.
       Le rouge est réservé aux erreurs critiques (jamais ici).
       ══════════════════════════════════════════ */
    .ak-bell {
      position: relative; flex-shrink: 0; order: 5;
      width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
      background: transparent; border: 1px solid rgba(196,159,72,.38); border-radius: 10px;
      color: var(--gold2); font-size: 17px; line-height: 1; cursor: pointer;
      filter: drop-shadow(0 0 3px rgba(211,174,87,.3));
      transition: border-color .28s ease, background .28s ease, box-shadow .28s ease, filter .28s ease;
    }
    .ak-bell:hover { border-color: rgba(224,192,108,.65); background: #0e0b2888; box-shadow: 0 0 14px rgba(211,174,87,.22); filter: drop-shadow(0 0 5px rgba(224,192,108,.5)); }
    .ak-bell.has-unread { border-color: var(--gold-dim); }
    .ak-bell.ring { animation: akBellRing .6s ease; }
    @keyframes akBellRing {
      0%,100% { transform: rotate(0); } 20% { transform: rotate(-14deg); }
      40% { transform: rotate(11deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); }
    }
    .ak-bell-count[hidden] { display: none !important; }
    .ak-bell-count {
      position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--gold), var(--gold-dim));
      color: #1a1206; font-family: "Cinzel", serif; font-size: 9.5px; font-weight: 700;
      border-radius: 8px; border: 1px solid #0a0716; box-shadow: 0 0 8px rgba(201,168,76,.55);
    }

    /* ══════════════════════════════════════════════════════════════════
       CONFIRMATION D'ACHAT — étoile filante vers « Mes achats » + pastille
       Composant PurchaseStarFX (JS près de openMyPurchasesModal). Palette :
       blanc chaud / or / violet cosmique très discret. Jamais de rouge.
       Réutilisable : livres, objets, boosters, NFT, achats futurs.
       ══════════════════════════════════════════════════════════════════ */
    #akPurchFxLayer { position: fixed; inset: 0; z-index: 100000; pointer-events: none; overflow: visible; }
    .ak-pfx-star {
      position: absolute; top: 0; left: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px;
      will-change: transform, opacity; border-radius: 50%;
      background: radial-gradient(circle at 50% 50%, #ffffff 0%, #fff4d6 26%, #ffe08c 46%, rgba(201,168,76,.62) 62%, rgba(122,69,192,.22) 80%, transparent 100%);
      box-shadow: 0 0 16px 4px rgba(255,244,214,.95), 0 0 38px 12px rgba(232,201,122,.6), 0 0 78px 26px rgba(122,69,192,.24);
    }
    .ak-pfx-star svg { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; }
    .ak-pfx-star svg path { fill: rgba(255,252,244,.96); }
    .ak-pfx-mote { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: transform, opacity; }
    .ak-pfx-flash {
      position: absolute; top: 0; left: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px;
      border-radius: 50%; will-change: transform, opacity;
      background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.98), rgba(255,236,180,.62) 40%, rgba(122,69,192,.2) 64%, transparent 76%);
    }
    .ak-purch-target-lit { animation: akPurchTargetLit .5s ease; }
    @keyframes akPurchTargetLit {
      0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
      45% { box-shadow: 0 0 0 1px rgba(232,201,122,.5), 0 0 15px 3px rgba(201,168,76,.55), 0 0 26px 8px rgba(122,69,192,.2); }
    }
    #akPurchBadge {
      position: fixed; z-index: 99999; pointer-events: none; display: none; align-items: center; gap: 3px;
      min-width: 17px; height: 17px; padding: 0 5px;
      font-family: "Cinzel", serif; font-size: 9.5px; font-weight: 700; letter-spacing: .5px; color: var(--gold3);
      background: radial-gradient(circle at 32% 26%, #241a3a, #0b0818);
      border: 1px solid var(--gold); border-radius: 9px;
      box-shadow: 0 0 0 2px rgba(8,6,16,.72), 0 0 10px 1px rgba(201,168,76,.5), 0 0 20px 5px rgba(122,69,192,.18);
    }
    #akPurchBadge.show { display: inline-flex; }
    #akPurchBadge .ak-pb-star { font-size: 8.5px; color: var(--gold2); text-shadow: 0 0 4px rgba(232,201,122,.7); }
    #akPurchBadge.pop { animation: akPurchBadgePop .55s cubic-bezier(.2,1.5,.35,1); }
    @keyframes akPurchBadgePop { 0% { transform: scale(0); } 55% { transform: scale(1.28); } 100% { transform: scale(1); } }
    #akPurchBadge.fade { opacity: 0; transform: scale(.55); transition: opacity .9s ease, transform .9s ease; }
    .ak-purch-new { animation: akPurchNewGlow 2.6s ease 1; border-radius: 12px; }
    @keyframes akPurchNewGlow {
      0% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
      16% { box-shadow: 0 0 0 1px rgba(232,201,122,.5), 0 0 20px 5px rgba(201,168,76,.4), 0 0 34px 10px rgba(122,69,192,.16); }
      100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
    }
    .ak-purch-new-label {
      display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 8px; vertical-align: middle;
      font-family: "Cinzel", serif; font-size: 8.5px; letter-spacing: 1.5px; font-weight: 700;
      color: var(--gold3); background: rgba(122,69,192,.18); border: 1px solid var(--gold-dim);
    }
    @media (prefers-reduced-motion: reduce) {
      .ak-pfx-star, .ak-pfx-mote, .ak-pfx-flash { display: none !important; }
      #akPurchBadge.pop { animation: none; }
      .ak-purch-new { animation: none; }
    }

    .ak-npanel {
      position: fixed; z-index: 9200; width: 380px; max-width: calc(100vw - 20px);
      max-height: min(560px, calc(100vh - 90px)); display: none; flex-direction: column;
      background: linear-gradient(180deg, #100c30, #0a0820);
      border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
      box-shadow: 0 24px 70px #000000cc, 0 0 0 1px #ffffff08 inset;
      backdrop-filter: blur(14px);
    }
    .ak-npanel.open { display: flex; animation: akPanelIn .18s ease; }
    @keyframes akPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
    /* min-height:0 : sans ça, en colonne flex, la liste pousse le panneau au lieu de défiler */
    .ak-npanel-list { min-height: 0; }
    .ak-npanel-head {
      display: flex; align-items: center; gap: 9px; padding: 14px 16px;
      border-bottom: 1px solid var(--border); flex-shrink: 0; overflow: hidden;
    }
    .ak-npanel-head .t {
      font-family: "Cinzel Decorative", "Cinzel", serif; font-size: 12px; letter-spacing: 2px;
      color: var(--gold2); text-transform: uppercase; flex: 1 1 auto;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    }
    .ak-npanel-head button {
      background: transparent; border: none; color: var(--text3); cursor: pointer;
      font-size: 10px; font-family: "Cinzel", serif; letter-spacing: 1px; transition: color .2s;
      white-space: nowrap; flex-shrink: 0;
    }
    .ak-npanel-head button:hover { color: var(--gold2); }
    .ak-npanel-list { overflow-y: auto; flex: 1; padding: 4px 0 6px; }
    .ak-ngroup-label {
      font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--text3); padding: 12px 16px 6px;
    }
    .ak-nrow {
      display: flex; gap: 11px; padding: 11px 16px; cursor: pointer; position: relative;
      border-left: 2px solid transparent; transition: background .15s;
    }
    .ak-nrow:hover { background: #ffffff08; }
    .ak-nrow.unread { background: #6a45c015; border-left-color: var(--gold); }
    .ak-nrow.prio-high.unread { background: #c9a84c18; }
    .ak-nrow-ic {
      flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; font-size: 14px;
      background: #1c1548; border: 1px solid var(--border); color: var(--violet3);
    }
    .ak-nrow.prio-high .ak-nrow-ic { color: var(--gold2); border-color: var(--gold-dim); }
    .ak-nrow-body { flex: 1; min-width: 0; }
    .ak-nrow-title { font-size: 13px; color: var(--text); line-height: 1.35; }
    .ak-nrow-title b { color: var(--gold2); font-weight: 600; }
    .ak-nrow-title .ctx { color: var(--violet3); }
    .ak-nrow-preview {
      font-size: 12.5px; color: var(--text2); font-style: italic; margin-top: 2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ak-nrow-time { font-size: 10px; letter-spacing: 1px; color: var(--text3); margin-top: 3px; font-family: "Cinzel", serif; }
    .ak-nrow-dot { position: absolute; right: 12px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
    .ak-npanel-empty { text-align: center; color: var(--text3); font-style: italic; padding: 40px 24px; font-size: 13px; }
    .ak-npanel-empty .g { font-size: 22px; color: var(--violet3); display: block; margin-bottom: 8px; }

    /* ═══ ANNONCES OFFICIELLES — onglets + cartes (Phase A, 2026-09-09) ═══
       Hiérarchie : ★ Annonces (Créateur / Modérateurs) TOUJOURS avant l'Activité. */
    .ak-npanel-tabs {
      flex-shrink: 0; display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border);
    }
    .ak-npanel-tabs button {
      flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      padding: 8px 6px; border-radius: 9px; cursor: pointer;
      background: transparent; border: 1px solid transparent;
      color: var(--text3); font-family: "Cinzel", serif; font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase;
      transition: color .18s, background .18s, border-color .18s;
    }
    .ak-npanel-tabs button:hover { color: var(--text2); }
    .ak-npanel-tabs button.active { color: var(--gold2); background: rgba(201,168,76,.09); border-color: rgba(201,168,76,.28); }
    .ak-npanel-tabs button[data-ntab="annonces"].active { color: #f2dca0; }
    .ak-ntab-badge {
      min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      font-family: sans-serif; font-size: 9px; font-weight: 700; line-height: 1;
    }
    .ak-npanel-tabs button[data-ntab="annonces"] .ak-ntab-badge { background: var(--gold); color: #1a0f04; }
    .ak-npanel-tabs button[data-ntab="activite"] .ak-ntab-badge { background: #6a45c0; color: #efe6ff; }
    .ak-ntab-badge:empty, .ak-ntab-badge.zero { display: none; }

    .ak-annlist { padding: 8px 10px 6px; display: flex; flex-direction: column; gap: 8px; }
    .ak-ann-card {
      position: relative; border-radius: 13px; padding: 12px 13px 11px 15px;
      background: linear-gradient(165deg, rgba(20,15,48,.92), rgba(10,8,26,.96));
      border: 1px solid var(--border); overflow: hidden;
    }
    .ak-ann-card::before {   /* liseré de gravité */
      content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--violet3); opacity: .5;
    }
    .ak-ann-card.sev-important::before { background: var(--gold); opacity: .9; }
    .ak-ann-card.sev-critical::before { background: linear-gradient(180deg, #e0556b, var(--gold)); opacity: 1; }
    .ak-ann-card.role-creator {
      border-color: var(--gold-dim);
      box-shadow: 0 0 22px -4px rgba(201,168,76,.22), inset 0 1px 0 rgba(201,168,76,.08);
    }
    .ak-ann-card.role-moderator {
      border-color: rgba(176,125,224,.4);
      box-shadow: 0 0 20px -6px rgba(140,90,220,.28);
    }
    .ak-ann-card.unread { background: linear-gradient(165deg, rgba(28,20,66,.96), rgba(14,10,34,.98)); }
    .ak-ann-card.is-pinned { border-style: solid; }
    .ak-ann-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
    .ak-ann-star { font-size: 13px; color: var(--gold2); filter: drop-shadow(0 0 5px rgba(201,168,76,.5)); }
    .ak-ann-card.role-moderator .ak-ann-star { color: var(--violet3); filter: drop-shadow(0 0 5px rgba(176,125,224,.5)); }
    .ak-ann-author { font-family: "Cinzel", serif; font-size: 11px; letter-spacing: .8px; color: var(--text); }
    .ak-ann-role {
      font-family: "Cinzel", serif; font-size: 7.5px; letter-spacing: 1.4px; text-transform: uppercase;
      padding: 2px 6px; border-radius: 5px; border: 1px solid currentColor;
    }
    .ak-ann-role.creator { color: var(--gold2); }
    .ak-ann-role.moderator, .ak-ann-role.admin { color: var(--violet3); }
    .ak-ann-sev {
      margin-left: auto; font-family: "Cinzel", serif; font-size: 7.5px; letter-spacing: 1.4px; text-transform: uppercase;
      padding: 2px 7px; border-radius: 5px; display: inline-flex; align-items: center; gap: 4px;
    }
    .ak-ann-sev.important { color: var(--gold2); background: rgba(201,168,76,.14); }
    .ak-ann-sev.critical { color: #ffcf7a; background: rgba(224,85,107,.18); border: 1px solid rgba(224,85,107,.4); }
    .ak-ann-pin { font-size: 9px; color: var(--gold2); letter-spacing: 1px; font-family: "Cinzel", serif; }
    .ak-ann-title { font-size: 13.5px; color: var(--text); font-weight: 600; line-height: 1.35; margin-bottom: 3px; }
    .ak-ann-body {
      font-size: 12.5px; color: var(--text2); line-height: 1.55; white-space: pre-wrap; word-break: break-word;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .ak-ann-body.expanded { -webkit-line-clamp: unset; }
    .ak-ann-more { background: none; border: none; color: var(--violet3); cursor: pointer; font-size: 11px; font-style: italic; padding: 2px 0; }
    .ak-ann-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
    .ak-ann-time { font-size: 10px; letter-spacing: .8px; color: var(--text3); font-family: "Cinzel", serif; margin-right: 2px; }
    .ak-ann-btn {
      font-family: "Cinzel", serif; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
      padding: 6px 11px; border-radius: 8px; cursor: pointer; transition: all .18s;
    }
    .ak-ann-btn.read { background: transparent; border: 1px solid var(--border); color: var(--text3); }
    .ak-ann-btn.read:hover { color: var(--gold2); border-color: var(--gold-dim); }
    .ak-ann-btn.read.done { color: var(--green); border-color: rgba(80,168,112,.4); cursor: default; }
    .ak-ann-btn.action {
      background: linear-gradient(135deg, #f0d878, #c9a84c); border: none; color: #0a0720; font-weight: 700;
    }
    .ak-ann-btn.action:hover { box-shadow: 0 0 14px rgba(232,201,122,.45); }
    .ak-ann-card.role-moderator .ak-ann-btn.action { background: linear-gradient(135deg, #b98ce6, #7a45c0); color: #fff; }
    .ak-ann-flash { animation: akAnnFlash 1.6s ease; }
    @keyframes akAnnFlash { 0%,100% { box-shadow: 0 0 0 rgba(201,168,76,0); } 25% { box-shadow: 0 0 26px rgba(201,168,76,.5); } }

    /* Cloche : étoile dorée « annonce officielle non lue » — distincte de la pastille rouge */
    .ak-bell-star {
      position: absolute; bottom: -3px; right: -3px; z-index: 2;
      width: 15px; height: 15px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 9px; color: #1a0f04; background: radial-gradient(circle at 35% 30%, #ffe9a8, #d9a441);
      box-shadow: 0 0 8px rgba(232,201,122,.75), 0 0 0 2px #0e0b28;
    }
    .ak-bell:not(.has-announce) .ak-bell-star { display: none; }
    .ak-bell.has-announce { border-color: var(--gold-dim); }
    .ak-bell.has-announce.just-announced .ak-bell-star { animation: akBellStarIn .5s ease, akBellStarPulse 1.1s ease .5s; }
    @keyframes akBellStarIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
    @keyframes akBellStarPulse { 0%,100% { box-shadow: 0 0 8px rgba(232,201,122,.75), 0 0 0 2px #0e0b28; } 50% { box-shadow: 0 0 16px rgba(232,201,122,1), 0 0 0 2px #0e0b28; } }
    @media (prefers-reduced-motion: reduce) {
      .ak-bell.has-announce.just-announced .ak-bell-star { animation: none; }
      .ak-ann-flash { animation: none; }
      #akAnnDetail .akad-box { animation: none; }
    }

    /* ═══ ACCUSÉ DE LECTURE — Phase C (2026-09-09) ═══ */
    .ak-ann-ackchip {
      display: inline-flex; align-items: center; gap: 4px; margin-top: 7px;
      font-family: "Cinzel", serif; font-size: 7.5px; letter-spacing: 1.2px; text-transform: uppercase;
      color: #ffcf7a; background: rgba(224,85,107,.14); border: 1px solid rgba(224,85,107,.38);
      padding: 3px 8px; border-radius: 6px;
    }
    .ak-ann-ackchip.done { color: var(--green); background: rgba(80,168,112,.14); border-color: rgba(80,168,112,.4); }
    .ak-ann-card.ack-pending { border-color: rgba(224,85,107,.5); }
    .ak-ann-card.ack-pending::before { background: linear-gradient(180deg, #e0556b, var(--gold)); opacity: 1; }
    .ak-ann-btn.acknow {
      background: linear-gradient(135deg, #f0d878, #c9a84c); border: none; color: #0a0720; font-weight: 700;
    }
    .ak-ann-btn.acknow:hover { box-shadow: 0 0 14px rgba(232,201,122,.5); }
    .ak-ann-btn.read.acked { color: var(--green); border-color: rgba(80,168,112,.4); cursor: default; }

    /* Fenêtre de lecture d'annonce (accusé de lecture) */
    #akAnnDetail { z-index: 9655; }
    #akAnnDetail .akad-box {
      background: linear-gradient(160deg, #140e30f8 0%, #0a0820f8 100%);
      border: 1px solid var(--gold-dim); border-radius: 18px; position: relative;
      max-width: 560px; width: 100%; max-height: 88vh; display: flex; flex-direction: column;
      box-shadow: 0 30px 100px #000000cc, 0 0 60px rgba(201,168,76,.12);
      animation: akHomeFadeIn .3s ease both;
    }
    #akAnnDetail.role-moderator .akad-box { border-color: rgba(176,125,224,.45); box-shadow: 0 30px 100px #000000cc, 0 0 60px rgba(140,90,220,.16); }
    .akad-head { padding: 22px 24px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .akad-eyebrow {
      display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
      font-family: "Cinzel", serif; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold2);
    }
    #akAnnDetail.role-moderator .akad-eyebrow { color: var(--violet3); }
    .akad-title {
      font-family: "Cinzel Decorative", "Cinzel", serif; font-size: 17px; letter-spacing: 1px; color: var(--text);
      margin-top: 9px; line-height: 1.3;
    }
    .akad-body {
      padding: 16px 24px 20px; overflow-y: auto; flex: 1; min-height: 0;
      font-family: "Cormorant Garamond", serif; font-size: 16px; line-height: 1.7; color: var(--text2);
      white-space: pre-wrap; word-break: break-word;
    }
    .akad-foot {
      padding: 14px 24px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border);
      flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; align-items: stretch;
    }
    .akad-hint { font-family: "Cinzel", serif; font-size: 8.5px; letter-spacing: 1px; color: var(--text3); text-align: center; }
    .akad-hint.ready { color: var(--gold2); }
    .akad-ack {
      padding: 13px; border-radius: 11px; cursor: pointer; border: none;
      background: linear-gradient(135deg, #c9a84c 0%, #8a6a10 100%); color: #1a0a00;
      font-family: "Cinzel", serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700;
      transition: all .2s;
    }
    .akad-ack:disabled { opacity: .4; cursor: not-allowed; }
    .akad-ack:not(:disabled):hover { box-shadow: 0 0 26px rgba(201,168,76,.42); }
    .akad-close-btn {
      padding: 12px; border-radius: 11px; cursor: pointer;
      background: transparent; border: 1px solid var(--border); color: var(--text3);
      font-family: "Cinzel", serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; transition: all .2s;
    }
    .akad-close-btn:hover { color: var(--gold2); border-color: var(--gold-dim); }
    .akad-x { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--text3); font-size: 19px; cursor: pointer; }
    .akad-x:hover { color: var(--text); }
    #akHomeAnnounce.ack-locked .akhb-x { display: none; }
    @media (max-width: 560px) {
      #akAnnDetail .akad-box { max-width: none; height: 100%; max-height: none; border-radius: 0; }
    }

    .ak-npanel-foot {
      flex-shrink: 0; border-top: 1px solid var(--border); padding: 10px 16px; text-align: center;
    }
    .ak-npanel-foot button {
      background: transparent; border: none; color: var(--text3); cursor: pointer;
      font-family: "Cinzel", serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; transition: color .2s;
    }
    .ak-npanel-foot button:hover { color: var(--gold2); }

    /* Toast notification (temps réel, in-app) */
    .ak-ntoast {
      position: fixed; z-index: 9300; right: 18px; bottom: 88px; width: 320px; max-width: calc(100vw - 24px);
      display: flex; gap: 11px; padding: 13px 15px; cursor: pointer;
      background: linear-gradient(180deg, #14103af5, #0c0a24fa);
      border: 1px solid var(--gold-dim); border-radius: 13px;
      box-shadow: 0 16px 48px #000000cc; backdrop-filter: blur(10px);
      transform: translateX(400px); transition: transform .32s cubic-bezier(.2,.9,.3,1), opacity .3s;
      opacity: 0;
    }
    .ak-ntoast.show { transform: none; opacity: 1; }
    .ak-ntoast-ic {
      flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 14px; background: #1c1548; border: 1px solid var(--gold-dim); color: var(--gold2);
    }
    .ak-ntoast-eyebrow { font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 2.5px; color: var(--gold2); text-transform: uppercase; }
    .ak-ntoast-title { font-size: 12.5px; color: var(--text); margin-top: 2px; }
    .ak-ntoast-title b { color: var(--gold2); }
    .ak-ntoast-preview { font-size: 12px; color: var(--text2); font-style: italic; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Séparateur « nouveaux messages » dans le fil */
    .cc-newmsg-divider {
      display: flex; align-items: center; gap: 12px; margin: 14px 20px 6px;
      font-family: "Cinzel", serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold2);
    }
    .cc-newmsg-divider::before, .cc-newmsg-divider::after {
      content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
    }

    /* Pastilles MP non-lus */
    .cc-dm-unread {
      margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--gold), var(--gold-dim)); color: #1a1206;
      font-family: "Cinzel", serif; font-size: 10px; font-weight: 700; border-radius: 9px;
    }
    #dmConvList .cc-dm.has-unread .cc-dm-name { color: var(--gold2); font-weight: 600; }

    /* Modale réglages notifications */
    #akNotifOverlay {
      position: fixed; inset: 0; z-index: 9700; display: none; align-items: center; justify-content: center;
      background: #03020dcc; backdrop-filter: blur(4px); padding: 20px;
    }
    #akNotifOverlay.open { display: flex; }
    .ak-nover-box {
      width: 460px; max-width: 100%; max-height: calc(100vh - 40px); overflow-y: auto;
      background: linear-gradient(180deg, #100c30, #0a0820); border: 1px solid var(--border);
      border-radius: 18px; padding: 26px 26px 22px; box-shadow: 0 30px 90px #000000dd; position: relative;
    }
    .ak-nover-box .close {
      position: absolute; top: 16px; right: 18px; background: none; border: none; color: var(--text3);
      font-size: 17px; cursor: pointer; transition: color .2s;
    }
    .ak-nover-box .close:hover { color: var(--gold2); }
    .ak-nover-eyebrow { font-family: "Cinzel", serif; font-size: 9px; letter-spacing: 3px; color: var(--text3); text-transform: uppercase; }
    .ak-nover-title {
      font-family: "Cinzel Decorative", "Cinzel", serif; font-size: 19px; color: var(--gold2);
      margin: 4px 0 18px; letter-spacing: 1px;
    }
    .ak-nover-sec {
      font-family: "Cinzel", serif; font-size: 10px; letter-spacing: 2.5px; color: var(--gold);
      text-transform: uppercase; margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
    }
    .ak-nover-sec:first-of-type { margin-top: 0; }
    .ak-nrow-toggle {
      display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ffffff08;
    }
    .ak-nrow-toggle .lbl { flex: 1; font-size: 14px; color: var(--text); }
    .ak-nrow-toggle .lbl small { display: block; font-size: 11.5px; color: var(--text3); font-style: italic; margin-top: 1px; }
    .ak-sw {
      flex-shrink: 0; width: 44px; height: 24px; border-radius: 13px; background: #241a52;
      border: 1px solid var(--border); position: relative; cursor: pointer; transition: background .2s, border-color .2s;
    }
    .ak-sw::after {
      content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
      background: var(--text3); transition: transform .2s, background .2s;
    }
    .ak-sw.on { background: linear-gradient(135deg, var(--violet2), var(--violet)); border-color: var(--violet3); }
    .ak-sw.on::after { transform: translateX(20px); background: var(--gold3); }
    .ak-sw.disabled { opacity: .4; pointer-events: none; }
    .ak-nover-pushbox {
      background: #ffffff06; border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-top: 6px;
    }
    .ak-nover-pushbox p { font-size: 13px; color: var(--text2); line-height: 1.5; margin: 0 0 12px; }
    .ak-nover-pushbtn {
      width: 100%; padding: 10px; background: linear-gradient(135deg, #2e1a58, #4a2790);
      border: 1px solid var(--violet3); border-radius: 10px; color: var(--gold3);
      font-family: "Cinzel", serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all .2s;
    }
    .ak-nover-pushbtn:hover { box-shadow: 0 0 24px #6040a055; }
    .ak-nover-pushbtn.granted { background: #10281a; border-color: #3a7a52; color: #7de0b0; cursor: default; }
    .ak-nover-pushbtn.denied  { background: #1a1330; border-color: var(--gold-dim); color: var(--gold-dim); cursor: default; }
    .ak-nover-pushstate { font-size: 12px; color: var(--text3); text-align: center; margin-top: 8px; font-style: italic; }

    /* Radios « niveau » du menu salon */
    .cc-chan-notif-opt {
      display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text2);
    }
    .cc-chan-notif-opt:hover { background: #ffffff08; color: var(--text); }
    .cc-chan-notif-opt .rd {
      width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--text3); flex-shrink: 0; position: relative;
    }
    .cc-chan-notif-opt.sel .rd { border-color: var(--gold2); }
    .cc-chan-notif-opt.sel .rd::after {
      content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--gold2);
    }

    @media (max-width: 768px) {
      /* Plein écran via inset:0 UNIQUEMENT — pas de width/height en 100vw/100vh :
         <html> a un zoom:1.15 qui gonflerait ces valeurs de 15 % → panneau trop
         large (bouton coupé) et trop haut (pied inaccessible). inset:0 est neutre. */
      .ak-npanel {
        position: fixed; inset: 0; width: auto; max-width: none;
        max-height: none; height: auto; border-radius: 0;
        border: none; background: #08061c; padding-top: env(safe-area-inset-top, 0px);
      }
      .ak-npanel-head { padding: 14px 12px; gap: 6px; }
      .ak-npanel-head .t { font-size: 11px; letter-spacing: 1px; }
      .ak-npanel-head button { font-size: 9px; letter-spacing: .5px; }
      .ak-npanel-foot { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
      .ak-ntoast { left: 12px; right: 12px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
      .ak-nover-box { padding: 22px 18px 18px; }
    }
    /* Cloche compacte sur petit écran — placée APRÈS la règle de base .ak-bell
       (sinon la largeur 38px du bloc de base, plus bas dans la feuille, l'emporte). */
    @media (max-width: 680px) {
      .ak-bell { width: 34px; height: 34px; font-size: 15px; border-radius: 9px; }
      .ak-bell-count { min-width: 14px; height: 14px; font-size: 9px; }
    }

    /* ══════════════════════════════════════════════════════════════════
       PAGE DU LIVE EN COURS — portail de transmission sacré (DA 2026-09-30).
       Surcouche visuelle : Mode Live Social (.akls), chat Akasha (.lv-chat-*),
       mini-player, toasts, socle de navigation. Aucune logique modifiée.
       ══════════════════════════════════════════════════════════════════ */
    :root {
      --ls-gold: #d9b865; --ls-gold-hi: #f4e2a8; --ls-gold-lo: #8a6a2a; --ls-moon: #f7f3ea;
      --ls-parch: linear-gradient(165deg, rgba(58,36,94,.40) 0%, rgba(22,13,44,.9) 40%, rgba(9,6,24,.97) 100%);
      --ls-grain: radial-gradient(rgba(232,201,122,.05) 1px, transparent 1.4px) 0 0/7px 7px;
    }

    /* — Slot « Mode Live Social » : chambre de diffusion — */
    .akd-slot[data-module="live-social"] {
      border: 1px solid rgba(217,184,101,.5);
      background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(224,162,74,.14), transparent 70%),
        radial-gradient(ellipse 50% 45% at 92% 70%, rgba(122,69,192,.16), transparent 70%),
        radial-gradient(ellipse 45% 40% at 6% 88%, rgba(185,121,74,.09), transparent 70%),
        var(--ls-grain), linear-gradient(160deg, rgba(18,11,42,.95), rgba(6,4,18,.97));
      box-shadow: 0 24px 60px -22px #000, 0 0 40px rgba(224,162,74,.08), inset 0 0 0 4px rgba(7,5,26,.6), inset 0 0 0 5px rgba(217,184,101,.14);
    }
    .akd-slot[data-module="live-social"]::before { /* poussière d'étoiles */
      content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .7;
      background:
        radial-gradient(1.5px 1.5px at 14% 22%, #f4e2a8, transparent 60%), radial-gradient(1.2px 1.2px at 32% 78%, #c9a8ee, transparent 60%),
        radial-gradient(1.6px 1.6px at 52% 12%, #e8c97a, transparent 60%), radial-gradient(1.2px 1.2px at 71% 64%, #f7f3ea, transparent 60%),
        radial-gradient(1.4px 1.4px at 88% 30%, #c9a8ee, transparent 60%), radial-gradient(1.2px 1.2px at 94% 90%, #e8c97a, transparent 60%);
      animation: lsTwinkle 7s ease-in-out infinite alternate;
    }
    .akd-slot[data-module="live-social"] > * { position: relative; z-index: 1; }
    @keyframes lsTwinkle { from { opacity: .3; } to { opacity: .85; } }

    /* En-tête « MODE LIVE SOCIAL » */
    .akd-slot[data-module="live-social"] .akd-slot-bar {
      justify-content: center; padding: 11px 10px 9px; border-bottom: 0; position: relative;
      background: linear-gradient(180deg, rgba(224,162,74,.08), transparent);
    }
    .akd-slot[data-module="live-social"] .akd-slot-bar::after {
      content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(217,184,101,.7) 30%, #f4e2a8 50%, rgba(217,184,101,.7) 70%, transparent);
    }
    .akd-slot[data-module="live-social"] .akd-slot-title {
      flex: 1; text-align: center; font-size: 11.5px; letter-spacing: 6px; font-weight: 600;
      background: linear-gradient(180deg, #fff3c9, #d9b865 60%, #b98a3a); -webkit-background-clip: text; background-clip: text; color: transparent;
      filter: drop-shadow(0 0 10px rgba(224,162,74,.4));
    }
    .akd-slot[data-module="live-social"] .akd-slot-title .akd-ic {
      color: var(--ls-gold); -webkit-text-fill-color: var(--ls-gold); opacity: 1; margin: 0 10px 0 0; text-shadow: 0 0 10px rgba(232,201,122,.8);
    }
    .akd-slot[data-module="live-social"] .akd-slot-title::after { content: "\2726"; margin-left: 10px; color: var(--ls-gold); -webkit-text-fill-color: var(--ls-gold); }
    .akd-slot[data-module="live-social"] .akd-slot-btn:hover { color: var(--ls-gold-hi); background: rgba(217,184,101,.14); }

    /* Barre d'outils : nom du live + commandes-talismans */
    .akls-toolbar { padding: 2px 2px 0; gap: 10px; }
    .akls-title {
      display: inline-flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: 4px; color: var(--ls-gold-hi);
      text-shadow: 0 0 12px rgba(224,162,74,.45);
    }
    .akls-title::after { content: ""; flex: 1; min-width: 16px; height: 1px; background: linear-gradient(90deg, rgba(217,184,101,.55), transparent); }
    .akls-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #ffb35a; box-shadow: 0 0 0 0 rgba(255,179,90,.6); animation: lsPulse 2.2s ease-out infinite; }
    @keyframes lsPulse { 0% { box-shadow: 0 0 0 0 rgba(255,179,90,.55); } 100% { box-shadow: 0 0 0 9px rgba(255,179,90,0); } }
    .akls-btn {
      position: relative; overflow: hidden; padding: 7px 15px; border-radius: 4px 14px; font-size: 9.5px; letter-spacing: 2.2px; color: var(--ls-gold-hi);
      background: linear-gradient(180deg, rgba(217,184,101,.12), rgba(10,7,26,.75)); border: 1px solid rgba(217,184,101,.5);
      box-shadow: inset 0 1px 0 rgba(244,226,168,.18); transition: color .3s, border-color .3s, box-shadow .3s, transform .3s;
    }
    .akls-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,243,201,.3) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s; }
    .akls-btn:hover { color: #fff3c9; border-color: var(--ls-gold-hi); transform: translateY(-1px); box-shadow: 0 0 18px rgba(224,162,74,.42), inset 0 1px 0 rgba(244,226,168,.3); }
    .akls-btn:hover::before { transform: translateX(120%); }
    .akls-btn:active { transform: scale(.96); }

    /* Zone vidéo = portail sacré / miroir noir */
    .akls-video-col .lv-player-frame, .akls-stage {
      border-radius: 10px; border: 1px solid rgba(217,184,101,.65);
      background: radial-gradient(ellipse at 50% 45%, rgba(70,40,120,.35) 0%, rgba(8,5,22,.95) 55%, #020104 100%);
      box-shadow: 0 0 0 4px rgba(7,5,26,.9), 0 0 0 5px rgba(217,184,101,.32), 0 18px 50px rgba(0,0,0,.75), 0 0 46px rgba(154,109,224,.2), inset 0 0 60px rgba(0,0,0,.65);
      animation: lsAura 7s ease-in-out infinite;
    }
    .akls-stage::before { /* rosace latente : visible tant que la vidéo n'est pas chargée */
      content: ""; position: absolute; left: 50%; top: 50%; width: min(70%, 380px); aspect-ratio: 1; transform: translate(-50%,-50%); opacity: .16; pointer-events: none;
      background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23e8c97a' stroke-width='.6'><circle cx='100' cy='100' r='96'/><circle cx='100' cy='100' r='70'/><circle cx='100' cy='100' r='44'/><g><circle cx='100' cy='60' r='40'/><circle cx='100' cy='140' r='40'/><circle cx='65' cy='80' r='40'/><circle cx='135' cy='80' r='40'/><circle cx='65' cy='120' r='40'/><circle cx='135' cy='120' r='40'/></g><path d='M100 4 L112 88 L196 100 L112 112 L100 196 L88 112 L4 100 L88 88Z'/></svg>") center/contain no-repeat;
      animation: lsSpin 180s linear infinite;
    }
    @keyframes lsSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
    @keyframes lsAura { 50% { box-shadow: 0 0 0 4px rgba(7,5,26,.9), 0 0 0 5px rgba(217,184,101,.5), 0 18px 50px rgba(0,0,0,.75), 0 0 64px rgba(224,162,74,.26), inset 0 0 60px rgba(0,0,0,.65); } }
    .akls-stage > div[id^="liveVideo"] { z-index: 1; }
    .akls-c { position: absolute; z-index: 3; width: 26px; height: 26px; pointer-events: none; border: 1.5px solid var(--ls-gold); filter: drop-shadow(0 0 5px rgba(224,162,74,.6)); opacity: .9; }
    .akls-c::after { content: ""; position: absolute; width: 4px; height: 4px; background: var(--ls-gold-hi); transform: rotate(45deg); }
    .akls-c.tl { top: 7px; left: 7px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; } .akls-c.tl::after { top: 4px; left: 4px; }
    .akls-c.tr { top: 7px; right: 7px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; } .akls-c.tr::after { top: 4px; right: 4px; }
    .akls-c.bl { bottom: 7px; left: 7px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; } .akls-c.bl::after { bottom: 4px; left: 4px; }
    .akls-c.br { bottom: 7px; right: 7px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; } .akls-c.br::after { bottom: 4px; right: 4px; }
    .akls-empty { color: #cdb8ea; border: 1px dashed rgba(217,184,101,.35); border-radius: 12px; padding: 22px 18px; background: radial-gradient(ellipse at 50% 0%, rgba(224,162,74,.08), transparent 70%); }
    .akls-empty b { color: var(--ls-gold-hi); font-weight: 600; }

    /* — Chat Akasha : colonne de transmission / mini-grimoire — */
    .lv-chat-panel {
      position: relative; border: 1px solid rgba(217,184,101,.5); border-radius: 12px;
      background: var(--ls-grain), var(--ls-parch);
      box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 26px rgba(224,162,74,.07), inset 0 0 0 4px rgba(7,5,26,.55), inset 0 0 0 5px rgba(217,184,101,.14);
    }
    .lv-chat-panel::before, .lv-chat-panel::after {
      content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 2; border: 1px solid var(--ls-gold); opacity: .85;
    }
    .lv-chat-panel::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; border-top-left-radius: 7px; }
    .lv-chat-panel::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; border-bottom-right-radius: 7px; }
    .lv-chat-panel-head {
      display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; padding: 14px 16px 12px; border-bottom: 0;
      font-size: 12px; letter-spacing: 5px; font-weight: 600;
      background: linear-gradient(180deg, rgba(224,162,74,.1), transparent); color: var(--ls-gold-hi); text-shadow: 0 0 12px rgba(224,162,74,.45);
    }
    .lv-chat-panel-head::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,184,101,.75) 50%, transparent); }
    .lv-chat-sigil { font-size: 9px; color: var(--ls-gold); animation: lsTwinkle 3.4s ease-in-out infinite alternate; }
    .lv-chat-messages { scrollbar-width: thin; scrollbar-color: rgba(217,184,101,.35) transparent; padding: 14px 16px; gap: 13px; font-size: 14px; line-height: 1.55; }
    .lv-chat-empty { text-align: center; color: #cdb8ea; font-family: "Cormorant Garamond", serif; font-size: 15px; padding: 26px 10px; }
    .lv-chat-msg { animation: lsMsgIn .4s ease both; padding-bottom: 12px; border-bottom: 1px solid rgba(217,184,101,.08); }
    .lv-chat-msg:last-child { border-bottom: 0; }
    @keyframes lsMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .lv-chat-avatar { width: 30px; height: 30px; border: 1px solid rgba(217,184,101,.5); box-shadow: 0 0 0 2px rgba(7,5,26,.9), 0 0 10px rgba(154,109,224,.28); color: #d2b6f5; }
    .lv-chat-msg-host .lv-chat-avatar { box-shadow: 0 0 0 2px rgba(7,5,26,.9), 0 0 14px rgba(224,162,74,.65); }
    .lv-chat-msg-name { font-family: "Cinzel", serif; font-size: 12.5px; letter-spacing: .8px; color: #d2b6f5; }
    .lv-chat-msg-me .lv-chat-msg-name, .lv-chat-msg-host .lv-chat-msg-name { color: var(--ls-gold-hi); text-shadow: 0 0 10px rgba(224,162,74,.4); }
    .lv-chat-msg-text { color: #efe6d2; }

    /* Réactions : frise intégrée au registre */
    .lv-chat-emojis {
      position: relative; justify-content: center; gap: 4px; padding: 9px 12px; border-top: 0;
      background: linear-gradient(180deg, rgba(7,5,26,.55), rgba(20,12,40,.4));
    }
    .lv-chat-emojis::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,184,101,.6) 50%, transparent); }
    .lv-chat-emoji-btn {
      width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid transparent; transition: transform .25s, background .25s, border-color .25s, box-shadow .25s;
    }
    .lv-chat-emoji-btn:hover { background: radial-gradient(circle, rgba(224,162,74,.25), transparent 75%); border-color: rgba(217,184,101,.45); transform: translateY(-3px) scale(1.15); box-shadow: 0 0 14px rgba(224,162,74,.35); }
    .lv-chat-emoji-btn:active { transform: scale(.92); }

    /* Saisie rituelle + sceau d'envoi */
    .lv-chat-input-row { align-items: center; gap: 9px; padding: 11px 12px 13px; border-top: 0; background: rgba(5,3,16,.45); }
    .lv-chat-input {
      border: 0; border-bottom: 1px solid rgba(217,184,101,.6); border-radius: 4px 4px 0 0;
      background: linear-gradient(180deg, rgba(4,3,14,.5), rgba(32,18,60,.35)); color: var(--ls-moon); font-size: 14px; padding: .65rem .8rem;
      box-shadow: inset 0 2px 8px rgba(0,0,0,.55); transition: border-color .3s, box-shadow .3s, background .3s;
    }
    .lv-chat-input::placeholder { color: rgba(205,184,234,.5); font-style: italic; font-family: "Cormorant Garamond", serif; font-size: 15px; letter-spacing: .4px; }
    .lv-chat-input:focus { border-bottom-color: var(--ls-gold-hi); background: linear-gradient(180deg, rgba(4,3,14,.6), rgba(50,28,90,.4)); box-shadow: inset 0 2px 8px rgba(0,0,0,.55), 0 6px 18px -6px rgba(224,162,74,.5), 0 0 22px rgba(154,109,224,.22); }
    .lv-chat-send {
      position: relative; overflow: hidden; width: 42px; height: 42px; border-radius: 50%; color: #2a1a06; font-size: 15px;
      background: linear-gradient(180deg, #f9ebb6, #e0bd6a 50%, #a9802f); border: 1px solid #fff3c9;
      box-shadow: 0 0 0 3px rgba(7,5,26,.85), 0 0 0 4px rgba(217,184,101,.6), 0 6px 16px rgba(0,0,0,.5), 0 0 18px rgba(224,162,74,.35), inset 0 1px 0 rgba(255,255,255,.7);
      transition: transform .3s, box-shadow .3s;
    }
    .lv-chat-send:hover { background: linear-gradient(180deg, #fff3c9, #e8c97a 50%, #b98a3a); transform: rotate(-12deg) scale(1.06); box-shadow: 0 0 0 3px rgba(7,5,26,.85), 0 0 0 4px #f4e2a8, 0 8px 20px rgba(0,0,0,.55), 0 0 34px rgba(244,200,110,.65); }
    .lv-chat-send:active { transform: scale(.9); box-shadow: 0 0 0 3px rgba(7,5,26,.85), 0 0 0 4px #f4e2a8, 0 0 44px rgba(255,243,201,.9); }

    /* Mini-player détaché */
    #akLiveMini { border: 1px solid rgba(217,184,101,.6); box-shadow: 0 24px 70px rgba(0,0,0,.75), 0 0 34px rgba(224,162,74,.16), 0 0 0 3px rgba(7,5,26,.9), 0 0 0 4px rgba(217,184,101,.28); }
    .aklm-head { background: linear-gradient(180deg, rgba(224,162,74,.1), rgba(8,6,22,.75)); border-bottom-color: rgba(217,184,101,.35); }
    .aklm-dot { background: #ffb35a; box-shadow: 0 0 8px #ffb35a; }
    .aklm-title { color: var(--ls-gold-hi); letter-spacing: 2.5px; }
    .aklm-btn:hover { color: var(--ls-gold-hi); background: rgba(217,184,101,.16); }

    /* — Notifications : annonces rituelles — */
    #toastContainer { gap: 12px; }
    .toast {
      position: relative; overflow: hidden; padding: 15px 24px 15px 50px; border-radius: 4px 16px; border: 1px solid rgba(217,184,101,.65) !important;
      font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; line-height: 1.5; color: var(--ls-gold-hi) !important;
      background: var(--ls-grain), linear-gradient(160deg, rgba(58,36,94,.92), rgba(9,6,24,.96)) !important;
      box-shadow: 0 14px 36px rgba(0,0,0,.65), 0 0 28px rgba(224,162,74,.2), inset 0 0 0 3px rgba(7,5,26,.6), inset 0 0 0 4px rgba(217,184,101,.16);
      animation: lsToastIn .55s cubic-bezier(.2,.8,.2,1) both;
    }
    .toast::before { content: "\2726"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--ls-gold); text-shadow: 0 0 12px rgba(232,201,122,.9); animation: lsTwinkle 2.4s ease-in-out infinite alternate; }
    .toast::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,243,201,.22) 50%, transparent 65%); transform: translateX(-120%); animation: lsToastShine 1.4s .3s ease-out 1 forwards; pointer-events: none; }
    .toast.err { border-color: rgba(240,128,112,.75) !important; color: #ffc2b5 !important; background: var(--ls-grain), linear-gradient(160deg, rgba(90,24,40,.92), rgba(9,6,24,.96)) !important; }
    .toast.err::before { content: "\2736"; color: #ff9d8a; text-shadow: 0 0 12px rgba(255,120,100,.8); }
    .toast.info { border-color: rgba(176,125,224,.7) !important; color: #e3d1fa !important; }
    .toast.info::before { content: "\263E"; color: #c9a8ee; }
    @keyframes lsToastIn { from { opacity: 0; transform: translateX(28px) scale(.96); } to { opacity: 1; transform: none; } }
    @keyframes lsToastShine { to { transform: translateX(120%); } }

    /* — Socle rituel : barre du bas — */
    #ak-bottom-nav {
      background: radial-gradient(ellipse 60% 120% at 50% 0%, rgba(224,162,74,.12), transparent 70%), linear-gradient(180deg, rgba(14,8,34,.88) 0%, rgba(8,5,22,.94) 100%);
      box-shadow: 0 -16px 44px rgba(2,1,12,.55), 0 -1px 28px rgba(224,162,74,.1);
    }
    #ak-bottom-nav::after { content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; transform: rotate(45deg); background: #f4e2a8; box-shadow: 0 0 12px #e8c97a, 0 0 26px rgba(224,162,74,.6); pointer-events: none; animation: lsTwinkle 4s ease-in-out infinite alternate; }

    @media (max-width: 559px) {
      .akd-slot[data-module="live-social"] .akd-slot-title { letter-spacing: 3.5px; font-size: 10px; }
      .akls-title { letter-spacing: 2.5px; }
      .toast { max-width: 260px; padding: 13px 18px 13px 44px; font-size: 11.5px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .akd-slot[data-module="live-social"]::before, .akls-dot, .akls-stage, .akls-stage::before, .lv-chat-sigil, .lv-chat-msg,
      .toast, .toast::before, .toast::after, #ak-bottom-nav::after { animation: none !important; }
    }