/* Extrait de communaute.html le 20260823-203619 — bloc <style id="giri-marbre-premium-20260818">.
   Posé ici pour que le navigateur le garde en cache au lieu de le
   retélécharger à chaque visite. L'ordre de cascade est conservé :
   le <link> occupe exactement la place de l'ancien <style>. */

/* ══════════════════════════════════════════════════════════════════════════
   LA GIRI FAMILY — THÈME « MARBRE PREMIUM »            (Maha, 18/08/2026)
   Le thème de base : celui que tout le monde découvre en entrant.

   Règle mère : tout design Giri part du marbre lumineux
   [[feedback_designs_toujours_marbre_lumineux]]. La matière et les gestes
   viennent du skill `bouton` (/root/.claude/skills/bouton/marbre-premium.css) :
     · le lingot est le bouton unique de la maison (135deg, 4 arrêts, 16px)
     · un cercle doré est TOUJOURS le logo Giri (golden-ball), jamais un
       radial-gradient inventé — on n'y touche donc pas.

   Ce bloc ne peint QUE html[data-theme="marbre"] : les autres thèmes
   (Nuit Dorée, Forêt, Océan, Améthyste, Aube, Sable, Glacier, Lotus) sont
   intacts, et restent accessibles dans « Ton profil ».
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. LA PALETTE ─────────────────────────────────────────────────────────
   Elle remplace la palette héritée de « sable » (dont ce thème dérive pour
   récupérer tout le travail de lisibilité déjà fait sur les thèmes clairs). */
html[data-theme="marbre"]{
  --g:#c9971b !important;            /* l'or de la maison */
  --gl:#e8b93a !important;           /* or vif */
  --gd:#8a6512 !important;           /* or profond (la tranche du métal) */
  --accent:#c9971b !important;
  --blue:#8a6512 !important;
  --bg:#fdfaf2 !important;           /* la pierre */
  --bg2:#fffdf8 !important;          /* le lait : les plaques posées dessus */
  --bg3:#f8f3e7 !important;
  --bg4:#efe6d2 !important;
  --t:#221d15 !important;            /* l'encre */
  --tm:#5f574a !important;
  --td:#8a8072 !important;
  --gg:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%) !important;
  --glow:rgba(201,151,27,.10) !important;
  --glow-strong:rgba(201,151,27,.24) !important;
  --border:rgba(160,120,64,.20) !important;
  --border-hover:rgba(160,120,64,.42) !important;
  --surface:rgba(138,101,18,.04) !important;
  --surface-hover:rgba(138,101,18,.08) !important;
  --green:#3f7d55 !important;
  --red:#b4553c !important;          /* terre cuite, jamais un rouge criard */
  /* la matière, réutilisable partout */
  --m-texture:url('/css/textures/marbre-affiliation.webp');
  --m-pierre:linear-gradient(158deg,#ffffff 0%,#fffdf7 42%,#fffaef 72%,#fffdf8 100%);
  --m-veines:url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%270 0 1440 900%27 preserveAspectRatio%3D%27xMidYMid slice%27%3E %3Cdefs%3E %3Cfilter id%3D%27f1%27 x%3D%27-20%25%27 y%3D%27-20%25%27 width%3D%27140%25%27 height%3D%27140%25%27%3E%3CfeGaussianBlur stdDeviation%3D%277%27%2F%3E%3C%2Ffilter%3E %3Cfilter id%3D%27f2%27 x%3D%27-20%25%27 y%3D%27-20%25%27 width%3D%27140%25%27 height%3D%27140%25%27%3E%3CfeGaussianBlur stdDeviation%3D%272.4%27%2F%3E%3C%2Ffilter%3E %3C%2Fdefs%3E %3Cg fill%3D%27none%27 filter%3D%27url%28%23f1%29%27%3E %3Cpath d%3D%27M-60%2C196 C220%2C96 386%2C286 654%2C236 C922%2C186 1086%2C52 1500%2C132%27 stroke%3D%27rgba%28176%2C133%2C44%2C.055%29%27 stroke-width%3D%275%27%2F%3E %3Cpath d%3D%27M-60%2C612 C260%2C700 470%2C486 742%2C566 C1014%2C646 1180%2C760 1500%2C668%27 stroke%3D%27rgba%28176%2C133%2C44%2C.045%29%27 stroke-width%3D%276%27%2F%3E %3Cpath d%3D%27M312%2C-60 C368%2C240 250%2C430 336%2C690 C398%2C876 350%2C940 372%2C980%27 stroke%3D%27rgba%28176%2C133%2C44%2C.035%29%27 stroke-width%3D%274%27%2F%3E %3Cpath d%3D%27M1128%2C-60 C1064%2C220 1196%2C404 1108%2C660 C1046%2C842 1102%2C930 1080%2C980%27 stroke%3D%27rgba%28176%2C133%2C44%2C.032%29%27 stroke-width%3D%274%27%2F%3E %3C%2Fg%3E %3Cg fill%3D%27none%27 filter%3D%27url%28%23f2%29%27%3E %3Cpath d%3D%27M-60%2C190 C222%2C92 384%2C282 652%2C232 C920%2C182 1084%2C48 1500%2C128%27 stroke%3D%27rgba%28154%2C114%2C34%2C.075%29%27 stroke-width%3D%271.1%27%2F%3E %3Cpath d%3D%27M-60%2C606 C262%2C694 472%2C480 744%2C560 C1016%2C640 1182%2C754 1500%2C662%27 stroke%3D%27rgba%28154%2C114%2C34%2C.06%29%27 stroke-width%3D%27.9%27%2F%3E %3Cpath d%3D%27M316%2C-60 C372%2C238 254%2C428 340%2C688 C402%2C874 354%2C938 376%2C980%27 stroke%3D%27rgba%28154%2C114%2C34%2C.05%29%27 stroke-width%3D%27.8%27%2F%3E %3Cpath d%3D%27M-60%2C372 C300%2C332 520%2C432 800%2C392 C1080%2C352 1260%2C300 1500%2C344%27 stroke%3D%27rgba%28154%2C114%2C34%2C.042%29%27 stroke-width%3D%27.7%27%2F%3E %3C%2Fg%3E %3C%2Fsvg%3E");
  --m-grain:url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 width%3D%27240%27 height%3D%27240%27%3E %3Cfilter id%3D%27g%27%3E%3CfeTurbulence type%3D%27fractalNoise%27 baseFrequency%3D%27.82%27 numOctaves%3D%274%27 stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E %3Crect width%3D%27240%27 height%3D%27240%27 filter%3D%27url%28%23g%29%27 opacity%3D%27.5%27%2F%3E %3C%2Fsvg%3E");
  --m-lumiere:radial-gradient(ellipse 70% 50% at 50% 4%,rgba(255,255,255,.92),transparent 70%),
              radial-gradient(ellipse 52% 42% at 92% 96%,rgba(247,227,164,.22),transparent 68%);
  --m-plaque:linear-gradient(165deg,#fffdf9,rgba(253,248,238,.94));
  --m-ombre:0 24px 60px -40px rgba(138,101,18,.5);
  color-scheme:light;
}

/* ── 2. LA MATIÈRE ────────────────────────────────────────────────────────
   ⛔ Ici le marbre SE VOIT — c'est la demande. La texture maison porte de
   vraies veines dorées ; les grandes surfaces (seuil, fil, plaques) la
   laissent traverser au lieu de la repeindre en blanc. */
/* ⛔ `html.giri-mobile-shell-html` est peint en #1a0f1f par la coque mobile :
   à spécificité égale il gagnait, et une bande violette restait sous la barre
   d'état du téléphone. On monte d'un cran en gardant la classe. */
html[data-theme="marbre"],
html[data-theme="marbre"].giri-mobile-shell-html{
  background:var(--m-lumiere), var(--m-pierre) !important;
  background-attachment:scroll !important;   /* ⛔ fixed saccade sur mobile */
  color:var(--t) !important;
}
/* ⛔⛔ LE FOND DU BODY DOIT ÊTRE TRANSPARENT — c'est LA raison pour laquelle la
   texture existait à l'écran sans se voir : un enfant à z-index négatif
   (`body::before`) est peint APRÈS le fond de <html> mais AVANT celui du
   <body>. Un body au fond opaque recouvre donc entièrement le marbre. La
   couleur de repli reste sur <html>. */
html[data-theme="marbre"] body{
  background:transparent !important;background-image:none !important;
  color:var(--t) !important;
}
/* la coque laisse voir la pierre : sans ça, les veines restent cachées */
/* ⛔ `.app-row` (le conteneur des trois colonnes) porte un fond OPAQUE : tant
   qu'il est plein, la texture du marbre existe et ne se voit nulle part. Il
   faut rendre transparente TOUTE la chaîne body → app → app-row → main → fil. */
html[data-theme="marbre"] .app,
html[data-theme="marbre"] #app,
html[data-theme="marbre"] .app-row,
html[data-theme="marbre"] .app-shell,
html[data-theme="marbre"] .main{ background:transparent !important;background-image:none !important; }
/* ⛔ `.app::before` est un voile FIXE plein écran peint en #06060e (nuit) et
   posé à z-index:0 : invisible partout où le contenu le recouvre, il laissait
   une bande noire de 17px sous la barre d'état du téléphone. */
html[data-theme="marbre"] .app::before,
html[data-theme="marbre"] #app::before,
html[data-theme="marbre"] .app::after,
html[data-theme="marbre"] #app::after{ background:transparent !important; }
/* ⛔⛔ ON DOIT VOIR LE MARBRE (Maha, 18/08 : « je veux qu'on voie ce marbre »).
   La matière est celle de `/affilie` et `/tresor-marbre` : la TEXTURE maison
   `marbre-affiliation.webp` (veines dorées et grises, marbre réel), pas des
   veines dessinées — trop discrètes, on ne les lisait pas. Même recette que la
   page de référence : la pierre, puis un voile laiteux qui garde le texte
   lisible par-dessus les veines sombres.
   ⛔ Servie en MÊME ORIGINE (giriacademie.com) : pas de dépendance à une CSP
   `img-src` d'un autre domaine — le piège qui a déjà éteint le thème bois.
   ⛔ Les deux voiles sont en z-index NÉGATIF : à z-index 0, un pseudo-élément
   fixe se peint AU-DESSUS du salon et vole les clics (#messagesWrap
   interceptait le bouton d'entrée). */
/* ⛔⛔ TOUT est en !important et l'URL est ÉCRITE EN DUR ici. Deux raisons
   payées à l'écran : une couche plus ancienne pose
   `body::before,body::after,html::before,html::after{content:none!important;
   background:none!important;display:none!important}` — sans !important le
   marbre n'existe simplement pas ; et une `url()` passée par une variable CSS
   se substituait à VIDE (`background-image: ;`), donc pas d'image du tout. */
html[data-theme="marbre"] body::before{
  content:'' !important;display:block !important;
  position:fixed !important;inset:0 !important;z-index:-1 !important;
  pointer-events:none !important;
  background:url('/css/textures/marbre-affiliation.webp') center center / 100% 100% no-repeat !important;
  background-attachment:scroll !important;   /* ⛔ fixed saccade sur mobile */
  filter:contrast(1.2) saturate(1.14) !important;   /* les veines doivent SE LIRE */
}
html[data-theme="marbre"] body::after{
  content:'' !important;display:block !important;
  position:fixed !important;inset:0 !important;z-index:-1 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,rgba(255,253,248,.1),rgba(255,252,245,.24)) !important;
}

/* ── 3. LES PLAQUES ──────────────────────────────────────────────────────── */
/* Les plaques sont TRANSLUCIDES : la pierre passe au travers, sinon on repeint
   le marbre en blanc et il ne reste qu'un souvenir. */
html[data-theme="marbre"] .sidebar{
  background:linear-gradient(165deg,rgba(255,253,249,.5),rgba(253,248,238,.42)) !important;
  border-right:1px solid var(--border) !important;
  box-shadow:1px 0 0 rgba(255,255,255,.7), 6px 0 34px -28px rgba(138,101,18,.55) !important;
}
html[data-theme="marbre"] .right-panel{
  background:linear-gradient(165deg,rgba(255,253,249,.5),rgba(253,248,238,.42)) !important;
  border-left:1px solid var(--border) !important;
  box-shadow:-1px 0 0 rgba(255,255,255,.7), -6px 0 34px -28px rgba(138,101,18,.55) !important;
}
html[data-theme="marbre"] .ch-header,
html[data-theme="marbre"] .dm-header{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(253,250,242,.7)) !important;
  border-bottom:1px solid var(--border) !important;
  backdrop-filter:saturate(1.05) blur(3px);
}
/* le fil : la pierre nue, pour que le marbre respire */
html[data-theme="marbre"] .messages-wrap,
html[data-theme="marbre"] #messagesWrap,
html[data-theme="marbre"] .main,
html[data-theme="marbre"] #dmMessages{ background:transparent !important; }
/* le composer : une plaque de lait posée sur la pierre */
html[data-theme="marbre"] .msg-input-box{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(253,248,238,.84)) !important;
  border-top:1px solid var(--border) !important;
  box-shadow:0 -10px 30px -26px rgba(138,101,18,.6) !important;
  backdrop-filter:blur(3px);
}
/* les bulles de message : assez opaques pour se lire, assez fines pour que la
   pierre reste présente entre elles */
html[data-theme="marbre"] .msg{
  background:rgba(255,254,250,.88) !important;
  border:1px solid rgba(160,120,64,.14) !important;border-radius:14px !important;
}
html[data-theme="marbre"] .msg-input-box textarea,
html[data-theme="marbre"] .gate-form input,
html[data-theme="marbre"] .modal-box input,
html[data-theme="marbre"] .modal-box textarea,
html[data-theme="marbre"] .profile-field input,
html[data-theme="marbre"] .profile-field textarea{
  background:#fffefb !important;border:1px solid var(--border) !important;
  color:var(--t) !important;
  box-shadow:inset 0 1px 3px rgba(138,101,18,.07) !important;
}
html[data-theme="marbre"] .msg-input-box textarea::placeholder,
html[data-theme="marbre"] .gate-form input::placeholder{ color:#a3998a !important;opacity:1 }
/* modales, feuilles, panneaux flottants */
html[data-theme="marbre"] .modal-box,
html[data-theme="marbre"] .profile-box,
html[data-theme="marbre"] .emoji-picker,
html[data-theme="marbre"] .msg-hover-actions,
html[data-theme="marbre"] .giri-dlg,
html[data-theme="marbre"] .tll-drawer{
  background:var(--m-plaque) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--m-ombre) !important;
  color:var(--t) !important;
}
html[data-theme="marbre"] .toast{
  background:linear-gradient(165deg,#2a2116,#1d160d) !important;color:#f7ecd4 !important;
  border:1px solid rgba(201,151,27,.4) !important;
}

/* la modale VIP se pose sur un voile noir : elle doit être PLEINE, sinon son
   texte d'encre se lit sur du noir. */
html[data-theme="marbre"] .vip-modal{
  background:#fffdf8 !important;color:var(--t) !important;
  border:1px solid var(--border) !important;box-shadow:var(--m-ombre) !important;
}

/* ── 4. L'OR — un seul lingot par écran ─────────────────────────────────── */
html[data-theme="marbre"] .ch-item.active,
html[data-theme="marbre"] .giri-nav-item.active{
  background:var(--gg) !important;
  border:1px solid rgba(160,120,64,.55) !important;
  color:#3a2708 !important;
  box-shadow:0 2px 6px rgba(74,48,12,.12),0 10px 26px -14px rgba(74,48,12,.4),
             inset 0 1px 0 rgba(255,255,255,.55) !important;
}
html[data-theme="marbre"] .ch-item.active .name,
html[data-theme="marbre"] .ch-item.active .icon,
html[data-theme="marbre"] .ch-item.active *{ color:#3a2708 !important; }
html[data-theme="marbre"] .ch-item{
  background:linear-gradient(158deg,rgba(255,253,249,.95),rgba(248,243,233,.88)) !important;
  border:1px solid rgba(160,120,64,.28) !important;color:var(--t) !important;
}
html[data-theme="marbre"] .ch-item:hover{
  border-color:var(--border-hover) !important;
  box-shadow:0 6px 18px -14px rgba(138,101,18,.7) !important;
}
/* le geste qui envoie : un lingot rond */
html[data-theme="marbre"] #sendBtn,
html[data-theme="marbre"] .send-btn{
  background:var(--gg) !important;color:#3a2708 !important;
  border:1px solid rgba(160,120,64,.55) !important;
  box-shadow:0 2px 6px rgba(74,48,12,.14),0 8px 20px -12px rgba(74,48,12,.45),
             inset 0 1px 0 rgba(255,255,255,.55) !important;
}
/* ── LE BOUTON DE LA MAISON (décision Maha, 18/08 : « reprends ce bouton-là,
   pour tout ! ») — recette exacte du skill `bouton`, celle de /affilie :
   rectangle arrondi 16px, Cormorant en casse NORMALE, dégradé oblique à quatre
   arrêts qui finit dans le bronze, aucun reflet qui balaie. Ne pas la
   réinventer, ne pas l'améliorer.
   La règle du geste unique tient : UN seul lingot par écran, le reste en creux.
   ⛔ `lining-nums` reste : sans lui le Cormorant sort « 20h00 » en « 2ohoo ». */
html[data-theme="marbre"] #gateBtn,
html[data-theme="marbre"] .giri-rideau-cta{
  font-size:21px !important;
  padding:18px 34px !important;border-radius:16px !important;min-height:0 !important;
}
/* ⛔ dans une feuille de réglages, le lingot garde sa MATIÈRE mais pas sa
   géométrie : à 21px/18px de padding, « Sauvegarder » (sticky en bas de la
   modale) recouvrait la dernière rangée de pastilles de thème. */
html[data-theme="marbre"] #gateBtn,
html[data-theme="marbre"] .giri-rideau-cta,
html[data-theme="marbre"] #profileSaveBtn,
html[data-theme="marbre"] .gd-ok,
html[data-theme="marbre"] .vip-btn-gold{
  font-family:'Cormorant Garamond',Georgia,serif !important;
  font-weight:500 !important;letter-spacing:.2px !important;
  text-transform:none !important;color:#3a2708 !important;
  border:1px solid rgba(160,120,64,.55) !important;
  background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%) !important;
  font-variant-numeric:lining-nums !important;font-feature-settings:'lnum' 1;
  box-shadow:0 2px 6px rgba(74,48,12,.12),0 10px 26px rgba(74,48,12,.18),
             inset 0 1px 0 rgba(255,255,255,.55) !important;
  text-shadow:0 1px 1px rgba(60,40,4,.28) !important;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease !important;
}
html[data-theme="marbre"] #gateBtn:hover,
html[data-theme="marbre"] .giri-rideau-cta:hover,
html[data-theme="marbre"] #profileSaveBtn:hover,
html[data-theme="marbre"] .gd-ok:hover,
html[data-theme="marbre"] .vip-btn-gold:hover{
  transform:translateY(-2px) !important;filter:none !important;
  box-shadow:0 4px 10px rgba(74,48,12,.14),0 16px 38px rgba(74,48,12,.24),
             inset 0 1px 0 rgba(255,255,255,.7) !important;
}
html[data-theme="marbre"] #gateBtn:active,
html[data-theme="marbre"] .giri-rideau-cta:active{ transform:translateY(0) scale(.99) !important }
html[data-theme="marbre"] .giri-rideau-cta-ico,
html[data-theme="marbre"] .gd-ok-sheen{ display:none !important }   /* aucun reflet qui balaie */
/* le second geste : le creux de marbre, jamais un deuxième lingot */
html[data-theme="marbre"] .grp-cta,
html[data-theme="marbre"] .sb-arbre-cta,
html[data-theme="marbre"] .gd-cancel,
html[data-theme="marbre"] .vip-btn-outline{
  background:linear-gradient(158deg,rgba(255,253,249,.95),rgba(248,243,233,.88)) !important;
  border:1px solid rgba(160,120,64,.45) !important;color:#4a3520 !important;
  border-radius:14px !important;
  box-shadow:0 6px 18px -14px rgba(138,101,18,.7), inset 0 1px 0 #fff !important;
  -webkit-text-fill-color:#4a3520 !important;
}
html[data-theme="marbre"] .grp-cta:hover,
html[data-theme="marbre"] .sb-arbre-cta:hover,
html[data-theme="marbre"] .gd-cancel:hover,
html[data-theme="marbre"] .vip-btn-outline:hover{
  border-color:rgba(160,120,64,.7) !important;
  box-shadow:0 10px 24px -16px rgba(138,101,18,.8), inset 0 1px 0 #fff !important;
}
/* les boutons discrets (icônes du pied de sidebar, actions de header) */
html[data-theme="marbre"] .settings-btn,
html[data-theme="marbre"] .ch-icon-btn,
html[data-theme="marbre"] .ch-act-btn,
html[data-theme="marbre"] .attach-btn,
html[data-theme="marbre"] .mobile-toggle,
html[data-theme="marbre"] .mobile-members-btn{
  color:var(--gd) !important;
  background:rgba(255,255,255,.72) !important;
  border:1px solid var(--border) !important;
}

/* ── 5. LES TEXTES ───────────────────────────────────────────────────────── */
html[data-theme="marbre"] body h1,
html[data-theme="marbre"] body h2,
html[data-theme="marbre"] body h3,
html[data-theme="marbre"] body .sb-header .title,
html[data-theme="marbre"] body .ch-header .ch-name,
html[data-theme="marbre"] body .m-name,
html[data-theme="marbre"] body .msg-author{ color:var(--t) !important; }
html[data-theme="marbre"] body .acad-section-label,
html[data-theme="marbre"] body .sb-section-label,
html[data-theme="marbre"] body .ch-header .ch-desc,
html[data-theme="marbre"] body .msg-time,
html[data-theme="marbre"] body .m-status{ color:var(--tm) !important; }
/* ⛔ LES TITRES « OR LIQUIDE » (background-clip:text + text-fill transparent).
   Leur dégradé #f7e3a4→#e8b93a disparaît sur du marbre clair : le titre existe
   dans le DOM, se lit à 1,7:1 à l'écran. On garde l'effet métal, on descend
   l'or au bronze. `[style*=...]` attrape ceux que le JS pose en style inline
   (noms des fondateurs/professeurs, cartes de gamification) — une déclaration
   !important d'une feuille bat un style inline sans !important. */
html[data-theme="marbre"] .grp-title,
html[data-theme="marbre"] .sb-arbre-title,
html[data-theme="marbre"] .sb-header .title,
html[data-theme="marbre"] .badge-card .bc-name,
html[data-theme="marbre"] .gamif-levelup-card .lu-level,
html[data-theme="marbre"] .gate h1 em,
html[data-theme="marbre"] .member-item .m-name,
html[data-theme="marbre"] .member-item .role-title,
html[data-theme="marbre"] .msg.msg-owner .msg-author,
html[data-theme="marbre"] .vip-modal .vm-title,
html[data-theme="marbre"] .welcome-msg h2,
html[data-theme="marbre"] .ch-header .ch-name,
html[data-theme="marbre"] #chName,
html[data-theme="marbre"] .dm-header-info .name,
html[data-theme="marbre"] [style*="background-clip:text"]{
  background-image:linear-gradient(135deg,#a97f14 0%,#7a5a10 55%,#5f4409 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
/* L'ARBRE À LIENS — ses intitulés de section sont en petites capitales Cinzel
   de 10 à 13px : à cette graisse, un or liquide ne se lit pas. Couleur pleine,
   et on annule tout ce que les couches précédentes leur avaient posé. */
html[data-theme="marbre"] body .tll-head-title,
html[data-theme="marbre"] body #tllHeadTitle,
html[data-theme="marbre"] body .tll-drawer .tll-cat,
html[data-theme="marbre"] body .tll-drawer .tll-section .tll-cat,
html[data-theme="marbre"] body .tll-section-title,
html[data-theme="marbre"] body .tll-cat{
  color:#7a5a10 !important;-webkit-text-fill-color:#7a5a10 !important;
  background:none !important;background-image:none !important;
  text-shadow:none !important;filter:none !important;opacity:1 !important;
}
html[data-theme="marbre"] body .tll-head-sub{
  color:#8a8072 !important;-webkit-text-fill-color:#8a8072 !important;
  background:none !important;background-image:none !important;
  text-shadow:none !important;opacity:1 !important;
}
/* les petites capitales dorées : sur marbre, l'or doit être PROFOND */
html[data-theme="marbre"] body .sb-header .sub,
html[data-theme="marbre"] body .sb-brand .sub,
html[data-theme="marbre"] body .grp-title,
html[data-theme="marbre"] body .vm-title,
html[data-theme="marbre"] body .vt-name,
html[data-theme="marbre"] body .role-title{ color:var(--gd) !important;opacity:1 !important; }
html[data-theme="marbre"] body .msg .msg-content,
html[data-theme="marbre"] body .msg-content{ color:#33291c !important; }
html[data-theme="marbre"] body .msg-content strong{ color:var(--gd) !important; }
html[data-theme="marbre"] body .msg-content a{ color:#9a7214 !important;
  text-decoration-color:rgba(154,114,20,.45) !important; }
html[data-theme="marbre"] .msg:hover{ background:rgba(138,101,18,.035) !important; }
html[data-theme="marbre"] .msg .msg-avatar{
  background:linear-gradient(150deg,#fffdf8,#efe6d2) !important;
  border:1px solid var(--border) !important;color:var(--gd) !important;
}
html[data-theme="marbre"] .date-sep span{ background:#fdfaf2 !important;color:var(--tm) !important }
html[data-theme="marbre"] .date-sep::before{ background:var(--border) !important }

/* ── 6. LE SEUIL (le gate) — la première impression ─────────────────────── */
html[data-theme="marbre"] .gate{ background:transparent !important; }
html[data-theme="marbre"] .gate h1,
html[data-theme="marbre"] .gate .gate-title{ color:var(--t) !important; }
html[data-theme="marbre"] .gate em,
html[data-theme="marbre"] .gate i,
html[data-theme="marbre"] .gate .gate-title em{ color:var(--gd) !important; }
html[data-theme="marbre"] .gate p,
html[data-theme="marbre"] .gate .gate-sub{ color:var(--tm) !important; }
html[data-theme="marbre"] .gate hr,
html[data-theme="marbre"] .gate .gate-rule{ border-color:var(--border) !important;
  background:var(--border) !important; }
html[data-theme="marbre"] .gate-google-btn{
  background:#fff !important;border:1px solid var(--border) !important;color:#3a3128 !important;
  box-shadow:0 6px 18px -14px rgba(138,101,18,.7) !important;
}
html[data-theme="marbre"] .gate-google-sep{ color:var(--td) !important }

/* ── 7. LE RIDEAU — ON N'Y TOUCHE PAS ────────────────────────────────────
   Décision Maha, 18/08 : « garde le rideau qui était là juste avant, ton
   rideau marbre ne va pas ». Le velours bordeaux et son affiche crème restent
   tels quels sur TOUS les thèmes, marbre compris — c'est une scène, pas un
   décor de fond. Toute surcharge du rideau a été retirée d'ici, y compris
   celle des textes : ils sont clairs parce qu'ils se posent sur du velours
   sombre, et ils doivent le rester. */

/* ── 8. LA NAVIGATION MOBILE ─────────────────────────────────────────────── */
html[data-theme="marbre"] .giri-bottomnav{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(252,247,238,.97)) !important;
  border-top:1px solid var(--border) !important;
  box-shadow:0 -10px 30px -26px rgba(138,101,18,.7) !important;
}
html[data-theme="marbre"] .giri-bottomnav-btn{ color:var(--tm) !important }
html[data-theme="marbre"] .giri-bottomnav-btn.active{ color:var(--gd) !important }
html[data-theme="marbre"] .giri-bottomnav-btn.active .giri-bottomnav-label{ color:var(--gd) !important }

/* ── 9. LA PASTILLE DU SÉLECTEUR ─────────────────────────────────────────
   ⛔ NON scopée : un membre resté en Nuit doit voir la pastille Marbre dans
   « Ton profil » pour pouvoir y venir. */
.ts-marbre .ts-top{background:linear-gradient(158deg,#fffdf8,#f4ecda)}
.ts-marbre .ts-bot{background:linear-gradient(135deg,#F4D58A,#C9A253 60%,#A07840)}
.ts-marbre .ts-label{color:#8a6512}

/* ── 10. FINITIONS ───────────────────────────────────────────────────────── */
html[data-theme="marbre"] ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(201,151,27,.42),rgba(138,101,18,.42)) !important;
}
html[data-theme="marbre"] ::selection{ background:rgba(232,185,58,.28);color:#221d15 }
@media (prefers-reduced-motion:reduce){
  html[data-theme="marbre"] #gateBtn:hover{ transform:none }
}