/* ══════════════════════════════════════════════════════════════════════════ GIRI ASSISTANCE — THÈME « MARBRE PREMIUM » (Maha, 19/08/2026) Le thème de base : celui que tout le monde découvre en ouvrant l'assistance. 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 (135deg, 4 arrêts, radius 16px, serif casse normale) est LE bouton de la maison — un seul par écran, le reste est creux ou nu ; · un cercle doré est TOUJOURS le logo Giri (golden-ball), jamais un radial-gradient inventé → les disques dorés décoratifs deviennent ici des disques de MARBRE à filet d'or. Ce bloc ne peint QUE html[data-theme="marbre"]. Les thèmes « dark » (Nuit) et « light » restent intacts et accessibles par le bouton de thème. Chargé APRÈS app.css / ga-caption.css / ga-audio.css → gagnant en cascade. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. LA PALETTE ───────────────────────────────────────────────────────── On remappe les jetons de app.css (--black, --ivory, --gold…) vers la pierre claire : tout le travail de lisibilité déjà fait sur le thème clair est ainsi récupéré, sans réécrire un seul composant. */ html[data-theme="marbre"]{ --black:#fdfaf2; /* la pierre */ --black-2:#fffdf8; /* le lait : les plaques posées dessus */ --black-3:#f8f3e7; --line:rgba(160,120,64,.20); --gold:#a97f14; /* le bronze : l'or lisible SUR du clair */ --gold-soft:#c9971b; --gold-pale:#7a5a10; --gold-deep:#5f4409; --ivory:#221d15; /* l'encre */ --ivory-dim:#5f574a; --ivory-mute:#8a8072; --green:#3f7d55; --green-glow:rgba(63,125,85,.26); --shadow-lux:0 34px 80px -46px rgba(138,101,18,.55), inset 0 1px 0 #fff; --shadow-soft:0 14px 34px -22px rgba(138,101,18,.45); /* les jetons du marbre, réutilisables partout */ --m-or:#c9971b; --m-or-vif:#e8b93a; --m-or-lum:#f7e3a4; --m-or-profond:#8a6512; --m-lingot:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%); --m-lingot-bord:1px solid rgba(160,120,64,.55); --m-lingot-ombre: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); /* ⛔ la pierre n'est PAS blanche : sans un fond légèrement plus chaud que les plaques posées dessus, les cartes disparaissent et l'écran fait « page blanche ». C'est ce contraste-là — pas les veines — qui fait le marbre. */ --m-pierre:linear-gradient(158deg,#fbf6ea 0%,#f8f2e4 40%,#f5eeddff 72%,#fbf7ec 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.060%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.052%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.044%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.040%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.060%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.058%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.050%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.046%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 76% 54% at 50% 2%,rgba(255,255,255,.95),transparent 68%), radial-gradient(ellipse 54% 44% at 92% 96%,rgba(247,227,164,.30),transparent 66%), radial-gradient(ellipse 40% 30% at 6% 84%,rgba(247,227,164,.18),transparent 70%); --m-plaque:linear-gradient(165deg,rgba(255,254,252,.90),rgba(255,253,247,.82)); --m-filet:rgba(201,151,27,.34); --m-filet-fin:rgba(201,151,27,.16); --m-logo:url('/giri-assistance/golden-ball.webp'); color-scheme:light; } /* ── 2. LA MATIÈRE ───────────────────────────────────────────────────────── Quatre couches : la pierre, la lumière, les veines dessinées (Bézier + feGaussianBlur — ⛔ jamais un repeating-linear-gradient, ça fait papier peint), le grain. Aucune ne dépasse 6 % : le marbre se sent, il ne se voit pas. ⛔ background-attachment:scroll — `fixed` saccade sur mobile. */ /* ⛔⛔ LE FOND DU BODY DOIT ÊTRE TRANSPARENT. C'est LA raison pour laquelle la texture existait à l'écran sans se voir : `body::before` est un enfant à z-index négatif — il est peint APRÈS le fond de mais AVANT celui du . Un body au fond opaque recouvre donc entièrement le marbre. (Piège déjà payé sur la Giri Family le 18/08 — et re-payé ici le 19/08.) */ html[data-theme="marbre"]{ background:var(--m-pierre); /* secours tant que l'image charge */ background-attachment:scroll; color:var(--ivory); } html[data-theme="marbre"] body{ background:transparent !important; color:var(--ivory); } /* ⛔⛔ LA PIERRE EST UNE VRAIE TEXTURE, PAS UN DÉGRADÉ. Maha, 19/08 : « ok mais y a pas le marbre ». Des veines CSS à 6 % ne se voient tout simplement pas : à l'écran, ça fait un beige plat. C'est la texture maison — celle de l'affiliation et de la Giri Family — qui porte les vraies veines dorées. `contrast`/`saturate` sont là pour qu'elles SE LISENT. ⛔ background-attachment:scroll — `fixed` saccade sur mobile. */ html[data-theme="marbre"] body::before{ background:url('/giri-assistance/marbre.webp') center center / cover no-repeat !important; background-attachment:scroll !important; filter:contrast(1.16) saturate(1.12) !important; opacity:1; } /* le voile : juste ce qu'il faut pour que le texte pose dessus sans lutter */ html[data-theme="marbre"] body::after{ background:linear-gradient(180deg,rgba(255,253,248,.14),rgba(255,252,245,.28)) !important; opacity:1; mix-blend-mode:normal; } /* les liens : bronze, sans le pointillé qui salit la pierre */ html[data-theme="marbre"] a{color:var(--gold);border-bottom-color:var(--m-filet-fin)} html[data-theme="marbre"] a:hover{color:var(--gold-deep);border-bottom-color:var(--m-filet)} html[data-theme="marbre"] ::selection{background:rgba(201,151,27,.26);color:#221d15} /* ── 3. LE LINGOT — le geste unique de la maison ─────────────────────────── Recette exacte de `giriacademie.com/affilie`, ne pas la réinventer. ⛔ `font-variant-numeric:lining-nums` obligatoire : le Cormorant sort sinon des chiffres elzéviriens (« 100 » devient « IOO »). */ html[data-theme="marbre"] .btn-primary, html[data-theme="marbre"] .gate button, html[data-theme="marbre"] .verif-modal-btn, html[data-theme="marbre"] .av-crop-btn-save, html[data-theme="marbre"] .side-foot .install-app-btn{ font-family:'Cormorant Garamond',Georgia,serif; font-size:21px;font-weight:500;letter-spacing:.2px;line-height:1.2; text-transform:none;color:#3a2708; padding:16px 30px;border-radius:16px; border:var(--m-lingot-bord); background:var(--m-lingot);background-size:auto; box-shadow:var(--m-lingot-ombre); text-shadow:0 1px 1px rgba(255,255,255,.42); font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } html[data-theme="marbre"] .btn-primary:hover, html[data-theme="marbre"] .gate button:hover, html[data-theme="marbre"] .verif-modal-btn:hover, html[data-theme="marbre"] .av-crop-btn-save:hover:not(:disabled), html[data-theme="marbre"] .side-foot .install-app-btn:hover{ background-position:0 0;transform:translateY(-2px);filter:none; 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); } html[data-theme="marbre"] .btn-primary:active, html[data-theme="marbre"] .verif-modal-btn:active{transform:translateY(0)} html[data-theme="marbre"] .btn-primary:disabled{opacity:.45;filter:grayscale(.45);transform:none} html[data-theme="marbre"] .side-foot .install-app-btn{font-size:18px;padding:13px 26px} html[data-theme="marbre"] .av-crop-btn-save{font-size:18px;padding:12px 18px;letter-spacing:.2px} html[data-theme="marbre"] .verif-modal-btn{border-radius:16px} /* le creux de marbre — l'action secondaire */ html[data-theme="marbre"] .side-foot .update-btn, html[data-theme="marbre"] .side-foot .side-theme-btn, html[data-theme="marbre"] .av-crop-btn-cancel, html[data-theme="marbre"] .ext-link-btn, html[data-theme="marbre"] .ga-recover-mini{ background:linear-gradient(158deg,rgba(255,253,249,.95),rgba(248,243,233,.88)); border:1px solid rgba(160,120,64,.45); color:#4a3520; box-shadow:0 8px 22px -16px rgba(138,101,18,.5), inset 0 1px 0 #fff; } html[data-theme="marbre"] .side-foot .update-btn:hover, html[data-theme="marbre"] .side-foot .side-theme-btn:hover, html[data-theme="marbre"] .av-crop-btn-cancel:hover, html[data-theme="marbre"] .ext-link-btn:hover, html[data-theme="marbre"] .ga-recover-mini:hover{ background:linear-gradient(158deg,#fffefb,rgba(250,244,232,.96)); border-color:rgba(160,120,64,.7);color:#3a2708; box-shadow:0 12px 26px -18px rgba(138,101,18,.6), inset 0 1px 0 #fff; } html[data-theme="marbre"] .ext-link-copy{ background:var(--m-lingot);border:var(--m-lingot-bord);color:#3a2708; box-shadow:var(--m-lingot-ombre); } html[data-theme="marbre"] .ext-link-copy:hover{background:var(--m-lingot);filter:brightness(1.03)} html[data-theme="marbre"] .ext-link-cancel{background:transparent;border-color:rgba(160,120,64,.22);color:var(--ivory-dim)} html[data-theme="marbre"] .ext-link-cancel:hover{border-color:rgba(160,120,64,.45);color:var(--ivory)} /* ── 4. L'ENTRÉE — écran de connexion ────────────────────────────────────── C'est la première image de la maison : une plaque de marbre posée sur la pierre, un seul lingot, et le logo Giri en sceau. */ html[data-theme="marbre"] .login{ background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(247,227,164,.16),transparent 62%); } html[data-theme="marbre"] .login-card, html[data-theme="marbre"] .gate .card{ background:var(--m-plaque); border:1px solid rgba(160,120,64,.26); box-shadow:0 40px 90px -50px rgba(120,86,20,.75), 0 10px 26px -18px rgba(120,86,20,.30), 0 0 0 1px rgba(255,255,255,.9) inset, inset 0 1px 0 #fff; backdrop-filter:none;-webkit-backdrop-filter:none; } /* le filet d'or du haut : la plaque a une arête, sinon elle flotte */ html[data-theme="marbre"] .login-card::before, html[data-theme="marbre"] .gate .card::before{ content:"";position:absolute;left:26px;right:26px;top:0;height:1px;z-index:2; background:linear-gradient(90deg,transparent,rgba(201,151,27,.55),transparent); } html[data-theme="marbre"] .login-card::after, html[data-theme="marbre"] .gate .card::after{ background:radial-gradient(circle,rgba(247,227,164,.30),transparent 62%); } html[data-theme="marbre"] .login h1{color:#1e1913;font-weight:500} html[data-theme="marbre"] .login .lead{color:var(--ivory-dim)} html[data-theme="marbre"] .brand-name{color:#1e1913} html[data-theme="marbre"] .brand-name small{color:var(--gold)} html[data-theme="marbre"] .legal{color:var(--ivory-mute)} html[data-theme="marbre"] .field label{color:var(--gold);} html[data-theme="marbre"] .field input, html[data-theme="marbre"] .gate input, html[data-theme="marbre"] .gate select, html[data-theme="marbre"] .ga-recover-input{ background:#fffdf9;border:1px solid rgba(160,120,64,.28);color:var(--ivory); box-shadow:inset 0 1px 2px rgba(138,101,18,.06); } html[data-theme="marbre"] .field input::placeholder, html[data-theme="marbre"] .ga-recover-input::placeholder{color:#9a917f} html[data-theme="marbre"] .field input:focus, html[data-theme="marbre"] .gate input:focus, html[data-theme="marbre"] .gate select:focus, html[data-theme="marbre"] .ga-recover-input:focus{ border-color:var(--m-or);box-shadow:0 0 0 3px rgba(232,192,120,.35); } html[data-theme="marbre"] .agents-strip .av{ background-color:#f6efe0;border-color:rgba(160,120,64,.30); box-shadow:0 8px 18px -12px rgba(138,101,18,.5); } html[data-theme="marbre"] .online-pill{ background:rgba(63,125,85,.09);border-color:rgba(63,125,85,.30);color:#3d5f49; } html[data-theme="marbre"] .online-pill.idle{ background:rgba(201,151,27,.08);border-color:var(--m-filet);color:var(--ivory-mute); } html[data-theme="marbre"] .login-link{color:var(--gold);} html[data-theme="marbre"] .login-link:hover{background:rgba(201,151,27,.09);color:var(--gold-deep)} html[data-theme="marbre"] .login-link-soft{color:var(--ivory-mute)} html[data-theme="marbre"] .login-link-soft:hover{color:var(--gold)} html[data-theme="marbre"] .forgot-success h2{color:var(--gold-pale)} html[data-theme="marbre"] .forgot-success p{color:var(--ivory)} html[data-theme="marbre"] .forgot-success-hint{color:var(--ivory-mute) !important} /* le splash de reconnexion */ html[data-theme="marbre"] .auth-splash{ background:radial-gradient(ellipse at top,rgba(247,227,164,.28),transparent 60%), var(--black); } html[data-theme="marbre"] .auth-splash-card{ background:var(--m-plaque);border-color:var(--m-filet-fin); box-shadow:0 34px 80px -46px rgba(138,101,18,.55), inset 0 1px 0 #fff; } html[data-theme="marbre"] .auth-splash-title{color:#1e1913} html[data-theme="marbre"] .auth-splash-sub{color:var(--ivory-dim)} html[data-theme="marbre"] .auth-splash-orb{filter:drop-shadow(0 10px 26px rgba(138,101,18,.35))} html[data-theme="marbre"] .auth-splash-dots span{background:var(--m-or)} /* ── 5. LE FIL — en-tête, messages, bulles ───────────────────────────────── Les grandes surfaces sont translucides : la pierre et ses veines traversent au lieu d'être repeintes en blanc. */ html[data-theme="marbre"] .chat{ background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(253,250,242,.30)); border-right:1px solid var(--line); } html[data-theme="marbre"] .chat-header{ background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(253,250,242,.72)); border-bottom:1px solid var(--line); box-shadow:0 10px 24px -24px rgba(138,101,18,.6); } html[data-theme="marbre"] .chat-header .who b{color:#1e1913} html[data-theme="marbre"] .chat-header .who small{color:var(--ivory-dim)} html[data-theme="marbre"] .chat-header .av{ background-color:#f6efe0;border-color:rgba(160,120,64,.35); box-shadow:0 6px 16px -10px rgba(138,101,18,.5); } html[data-theme="marbre"] .chat-header .icon-btn, html[data-theme="marbre"] .theme-toggle{ background:rgba(255,255,255,.7);border:1px solid rgba(160,120,64,.22);color:var(--ivory-dim); } html[data-theme="marbre"] .chat-header .icon-btn:hover, html[data-theme="marbre"] .theme-toggle:hover{ background:#fffdf9;border-color:rgba(160,120,64,.5);color:var(--gold); } html[data-theme="marbre"] .theme-toggle-floating{ background:rgba(255,255,255,.86);border-color:rgba(160,120,64,.28); box-shadow:0 10px 26px -18px rgba(138,101,18,.55); } /* ⛔ Le fil est l'endroit où l'on LIT longtemps : la pierre y est voilée de lait. Sans ce voile, les veines passent sous chaque ligne de texte. */ html[data-theme="marbre"] .messages{ background:radial-gradient(circle at 50% 0%,rgba(247,227,164,.16),transparent 55%), linear-gradient(180deg,rgba(255,253,248,.34),rgba(255,253,248,.46)); } html[data-theme="marbre"] .messages::-webkit-scrollbar-thumb{background:rgba(160,120,64,.3)} html[data-theme="marbre"] .messages.drag-over{background:rgba(201,151,27,.08);box-shadow:inset 0 0 0 2px var(--m-or)} /* la bulle reçue : une plaque de lait sur la pierre */ html[data-theme="marbre"] .msg.agent .bubble{ background:linear-gradient(165deg,#fffefb,rgba(253,249,240,.96)); color:var(--ivory); border:1px solid rgba(160,120,64,.3); box-shadow:0 14px 28px -22px rgba(120,86,20,.8), 0 2px 6px -4px rgba(120,86,20,.25), inset 0 1px 0 #fff; backdrop-filter:none; } /* la bulle envoyée : la matière du lingot, encre brune */ html[data-theme="marbre"] .msg.user .bubble{ background:var(--m-lingot); color:#3a2708; border:1px solid rgba(160,120,64,.42); box-shadow:0 10px 24px -18px rgba(74,48,12,.5), inset 0 1px 0 rgba(255,255,255,.5); } html[data-theme="marbre"] .msg.user .bubble .meta{color:rgba(58,39,8,.62)} html[data-theme="marbre"] .msg.system .bubble{ background:linear-gradient(135deg,rgba(255,252,242,.94),rgba(252,244,224,.92)); color:#6b4f0d;border-color:var(--m-filet); box-shadow:0 10px 24px -22px rgba(120,86,20,.7), inset 0 1px 0 #fff; } html[data-theme="marbre"] .bubble .sender-name{color:var(--gold)} html[data-theme="marbre"] .bubble .meta{color:var(--ivory-mute)} html[data-theme="marbre"] .bubble .reaction-badge{ background:#fffdf8;border-color:rgba(160,120,64,.32);color:#6b4f0d; box-shadow:0 4px 12px -8px rgba(138,101,18,.6); } html[data-theme="marbre"] .msg.agent .bubble ::selection{background:rgba(201,151,27,.28);color:#221d15} html[data-theme="marbre"] .msg.user .bubble ::selection{background:rgba(58,39,8,.28);color:#fffdf8} html[data-theme="marbre"] .day-sep span{ color:var(--ivory-dim);background:rgba(255,255,255,.75);border:1px solid rgba(160,120,64,.2); } html[data-theme="marbre"] .seen-line{color:var(--gold)} html[data-theme="marbre"] .typing{color:var(--ivory-dim)} html[data-theme="marbre"] .typing .dots span{background:var(--m-or)} html[data-theme="marbre"] .retry-line{color:#b4553c} html[data-theme="marbre"] .retry-line:hover{color:#8f3f2b} html[data-theme="marbre"] .msg .bubble.send-failed{border-color:rgba(180,85,60,.55)} html[data-theme="marbre"] .att{ background:rgba(255,255,255,.78);border-color:rgba(160,120,64,.22);color:var(--ivory); } html[data-theme="marbre"] .att .ic{background:var(--m-lingot);color:#3a2708} html[data-theme="marbre"] .att .sz{color:var(--ivory-mute)} html[data-theme="marbre"] .empty{color:var(--ivory-mute)} html[data-theme="marbre"] .msg .msg-del{color:var(--ivory-mute)} html[data-theme="marbre"] .msg .msg-del:hover{background:rgba(201,151,27,.14)} /* la transcription des vocaux — ⛔ ga-caption.css est scellé et pose des !important : on repasse au-dessus, sinon ivoire sur marbre = illisible. */ html[data-theme="marbre"] .msg.agent .voice-caption, html[data-theme="marbre"] .voice-caption{ color:#3d3324 !important; background:rgba(201,151,27,.09) !important; border-left:2px solid rgba(201,151,27,.5) !important; } html[data-theme="marbre"] .msg.user .voice-caption{ color:rgba(46,31,6,.88) !important; background:rgba(255,255,255,.42) !important; border-left-color:rgba(255,255,255,.75) !important; } /* ── 6. LE COMPOSER ────────────────────────────────────────────────────────*/ html[data-theme="marbre"] .composer{ background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.86)); border-top:1px solid var(--line); } html[data-theme="marbre"] .composer textarea{ background:#fffdf9;color:var(--ivory);border:1px solid rgba(160,120,64,.26); box-shadow:inset 0 1px 2px rgba(138,101,18,.05); } html[data-theme="marbre"] .composer textarea::placeholder{color:#9a917f} html[data-theme="marbre"] .composer textarea:focus{ border-color:var(--m-or);box-shadow:0 0 0 3px rgba(232,192,120,.3); } html[data-theme="marbre"] .composer .icon-btn{ background:rgba(255,255,255,.8);border:1px solid rgba(160,120,64,.24);color:var(--gold); box-shadow:0 6px 16px -12px rgba(138,101,18,.55); } html[data-theme="marbre"] .composer .icon-btn:hover{ background:#fffdf9;border-color:rgba(160,120,64,.5); } html[data-theme="marbre"] .composer .send{ background:var(--m-lingot);color:#3a2708;border:1px solid rgba(160,120,64,.5); box-shadow:0 8px 20px -12px rgba(74,48,12,.55), inset 0 1px 0 rgba(255,255,255,.5); } html[data-theme="marbre"] .composer .send:hover{ background:var(--m-lingot);transform:translateY(-1px); box-shadow:0 12px 26px -12px rgba(74,48,12,.6), inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="marbre"] .composer .mic{color:var(--gold)} html[data-theme="marbre"] .composer .mic:hover{background:rgba(201,151,27,.12);color:var(--gold-deep)} html[data-theme="marbre"] .icon-btn.attach-btn{color:var(--gold)} html[data-theme="marbre"] .icon-btn.attach-btn:hover{color:var(--gold-deep);background:rgba(201,151,27,.12)} html[data-theme="marbre"] .pending-atts .chip{ background:rgba(255,255,255,.85);color:var(--ivory);border:1px solid rgba(160,120,64,.26); } html[data-theme="marbre"] .pending-atts .chip button{color:var(--ivory-mute)} html[data-theme="marbre"] .pending-atts .chip button:hover{color:var(--gold-deep)} html[data-theme="marbre"] .pending-atts .chip-uploading{ background:linear-gradient(135deg,rgba(201,151,27,.12),rgba(247,227,164,.14)); border-color:rgba(160,120,64,.4); } html[data-theme="marbre"] .pending-atts .chip-uploading .upload-name{color:#5e4a1c} html[data-theme="marbre"] .pending-atts .chip-uploading .upload-pct{color:var(--gold)} html[data-theme="marbre"] .upload-progress{background:rgba(201,151,27,.14)} html[data-theme="marbre"] .upload-progress .bar, html[data-theme="marbre"] .f-pgrs-fill{background:linear-gradient(90deg,#A07840,#C9A253,#F4D58A)} html[data-theme="marbre"] .voice-timer{ background:#fffdf8;color:#8f3f2b;border-color:rgba(180,85,60,.45); box-shadow:0 8px 20px -14px rgba(138,101,18,.6); } /* ── 7. MON ESPACE (panneau de droite) ─────────────────────────────────────*/ html[data-theme="marbre"] .side{ background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(253,250,242,.46)); border-left:1px solid var(--line); } html[data-theme="marbre"] .side::-webkit-scrollbar-thumb{background:rgba(160,120,64,.3)} html[data-theme="marbre"] .side-head{ background:radial-gradient(circle at 50% 0%,rgba(247,227,164,.35),transparent 62%); border-bottom:1px solid var(--line); } /* ⛔ l'avatar n'est PAS une boule d'or dessinée : disque de marbre, filet d'or, initiale en bronze. Un cercle doré dans l'univers Giri, c'est le logo. */ html[data-theme="marbre"] .side-head .avatar-big{ background:linear-gradient(165deg,#fffdf9,#f3ead8); color:#7a5a10; box-shadow:0 0 0 1px rgba(160,120,64,.45), 0 18px 40px -28px rgba(138,101,18,.7); } html[data-theme="marbre"] .side-head .avatar-big.has-img{background:#f6efe0} html[data-theme="marbre"] .side-head .avatar-edit-overlay{ background:var(--m-lingot);color:#3a2708; box-shadow:0 6px 16px -10px rgba(74,48,12,.6), 0 0 0 2px #fffdf8 !important; } html[data-theme="marbre"] .side-head h2{color:#1e1913} html[data-theme="marbre"] .side-head .em{color:var(--ivory-mute)} html[data-theme="marbre"] .side-head .close-side{background:rgba(255,255,255,.8);color:var(--ivory-dim);border:1px solid rgba(160,120,64,.22)} html[data-theme="marbre"] .side-head .close-side:hover{background:#fffdf9;color:var(--gold-deep)} html[data-theme="marbre"] .side-section h3{color:var(--gold)} html[data-theme="marbre"] .side-section h3::after{background:linear-gradient(90deg,rgba(160,120,64,.45),transparent)} html[data-theme="marbre"] .side-synth .synth-row{ background:rgba(255,255,255,.75);border-color:rgba(160,120,64,.22); box-shadow:inset 0 1px 0 #fff; } html[data-theme="marbre"] .side-synth .synth-cell b{color:var(--gold-pale)} html[data-theme="marbre"] .side-synth .synth-cell span{color:var(--ivory-mute)} html[data-theme="marbre"] .card-item{ background:rgba(255,255,255,.72);border:1px solid rgba(160,120,64,.16); border-bottom:1px solid rgba(160,120,64,.16);color:var(--ivory); } html[data-theme="marbre"] .card-item:hover{ background:#fffdf9;border-color:rgba(160,120,64,.42); box-shadow:-2px 0 0 var(--m-or), 0 12px 26px -20px rgba(138,101,18,.6); } html[data-theme="marbre"] .card-item .thumb, html[data-theme="marbre"] .univers-logo, html[data-theme="marbre"] .f-thumb{ background:linear-gradient(165deg,#fffdf9,#f1e7d3);color:var(--gold); border:1px solid rgba(160,120,64,.24); } html[data-theme="marbre"] .card-item .title, html[data-theme="marbre"] .univers-name b, html[data-theme="marbre"] .f-title, html[data-theme="marbre"] .master-name b{color:#1e1913} html[data-theme="marbre"] .card-item .sub, html[data-theme="marbre"] .univers-name span, html[data-theme="marbre"] .f-meta, html[data-theme="marbre"] .f-meta2, html[data-theme="marbre"] .master-name span{color:var(--ivory-mute)} html[data-theme="marbre"] .card-item .price{color:var(--gold-pale)} html[data-theme="marbre"] .card-item .streak{background:rgba(201,151,27,.12);color:var(--gold-pale)} html[data-theme="marbre"] .f-desc{color:var(--ivory-dim)} /* les portes de Mon espace : plaques de marbre, pastilles à filet d'or. ⛔ les anciens halos radiaux colorés (violet, vert, or) faisaient des billes sur la pierre — on les remplace par du marbre et du bronze. */ html[data-theme="marbre"] .side-link, html[data-theme="marbre"] button.side-link{ background:linear-gradient(158deg,rgba(255,253,249,.95),rgba(248,243,233,.86)); border:1px solid rgba(160,120,64,.24); box-shadow:0 10px 24px -20px rgba(138,101,18,.5), inset 0 1px 0 #fff; } html[data-theme="marbre"] .side-link::before{background:linear-gradient(135deg,rgba(247,227,164,.35),transparent 62%)} html[data-theme="marbre"] .side-link:hover{ border-color:rgba(160,120,64,.55); box-shadow:0 14px 30px -20px rgba(138,101,18,.65), inset 0 1px 0 #fff; } html[data-theme="marbre"] .side-link .sl-ico, html[data-theme="marbre"] .side-link-maha .sl-ico, html[data-theme="marbre"] .side-link-community .sl-ico, html[data-theme="marbre"] .side-link-cercle .sl-ico, html[data-theme="marbre"] .side-link-recover .sl-ico{ background:linear-gradient(165deg,#fffdf9,#f2e8d5); color:var(--gold-pale); border:1px solid rgba(160,120,64,.32); text-shadow:none; box-shadow:inset 0 1px 0 #fff; } html[data-theme="marbre"] .side-link:hover .sl-ico{border-color:rgba(160,120,64,.6);color:var(--gold-deep)} html[data-theme="marbre"] .side-link .sl-body b{color:#1e1913} html[data-theme="marbre"] .side-link .sl-body span{color:var(--ivory-mute)} html[data-theme="marbre"] .side-link .sl-chev{color:var(--gold)} html[data-theme="marbre"] .side-link-recover{ border-color:rgba(160,120,64,.45); background:linear-gradient(158deg,#fffefb,rgba(250,242,226,.94)); box-shadow:0 12px 26px -18px rgba(138,101,18,.6), inset 0 1px 0 #fff; } html[data-theme="marbre"] .side-hint{color:var(--ivory-mute);border-top-color:rgba(160,120,64,.18)} html[data-theme="marbre"] .ga-recover-care{border-top-color:rgba(160,120,64,.2)} html[data-theme="marbre"] .ga-recover-care-txt{color:var(--ivory-dim)} html[data-theme="marbre"] .univers-group{ background:rgba(255,255,255,.6);border-color:rgba(160,120,64,.16); } html[data-theme="marbre"] .univers-group.open{background:rgba(255,255,255,.85);border-color:rgba(160,120,64,.4)} html[data-theme="marbre"] .univers-head:hover{background:rgba(201,151,27,.06)} html[data-theme="marbre"] .univers-chev, html[data-theme="marbre"] .f-chev, html[data-theme="marbre"] .master-chev{color:var(--gold)} html[data-theme="marbre"] .f-card{background:rgba(255,255,255,.72);border-color:rgba(160,120,64,.14)} html[data-theme="marbre"] .f-card.open{border-color:rgba(160,120,64,.42)} html[data-theme="marbre"] .f-card-head:hover{background:rgba(201,151,27,.05)} html[data-theme="marbre"] .f-pgrs{background:rgba(201,151,27,.14)} html[data-theme="marbre"] .f-cta{ background:var(--m-lingot);color:#3a2708;border:1px solid rgba(160,120,64,.5); text-transform:none;font-family:'Cormorant Garamond',Georgia,serif;font-size:16px; font-weight:500;letter-spacing:.2px;border-radius:10px;padding:9px 14px; box-shadow:0 6px 16px -12px rgba(74,48,12,.55), inset 0 1px 0 rgba(255,255,255,.5); font-variant-numeric:lining-nums; } html[data-theme="marbre"] .f-cta:hover{background:var(--m-lingot);transform:translateY(-1px)} html[data-theme="marbre"] .f-cta-disabled{ background:rgba(255,255,255,.6);color:var(--ivory-mute);border:1px solid rgba(160,120,64,.18); box-shadow:none; } html[data-theme="marbre"] .master-drawer{ background:linear-gradient(158deg,rgba(255,253,249,.96),rgba(248,243,233,.88)); border-color:rgba(160,120,64,.32); box-shadow:0 14px 34px -26px rgba(138,101,18,.6), inset 0 1px 0 #fff; } html[data-theme="marbre"] .master-drawer.open{border-color:rgba(160,120,64,.55)} html[data-theme="marbre"] .master-head:hover{background:rgba(201,151,27,.07)} html[data-theme="marbre"] .master-icon{ background:linear-gradient(165deg,#fffdf9,#f1e7d3);color:var(--gold-pale); border:1px solid rgba(160,120,64,.35);box-shadow:inset 0 1px 0 #fff; } html[data-theme="marbre"] .master-body .univers-group{background:rgba(255,255,255,.6);border-color:rgba(160,120,64,.14)} html[data-theme="marbre"] .master-body .univers-group.open{background:rgba(255,255,255,.8)} html[data-theme="marbre"] .side-section-muted h3.h3-muted{color:var(--ivory-mute)} html[data-theme="marbre"] .side-section-muted h3.h3-muted:hover{color:var(--gold)} html[data-theme="marbre"] .side-foot{border-top:1px solid var(--line)} /* [LISIBILITE 2026-08-21] --ivory-mute (#8a8072) sur la pierre claire ne donne que 3,4:1 — sous le plancher. Meme encre que les autres gestes du pied. */ html[data-theme="marbre"] .side-foot .logout{color:#4a3520;border-color:rgba(160,120,64,.32)} html[data-theme="marbre"] .side-foot .logout:hover{color:var(--gold-deep);border-color:rgba(160,120,64,.6);background:rgba(201,151,27,.08)} /* Les pages legales vivent dans ga-marbre.css aussi : cette feuille est chargee APRES app.css et gagne a specificite egale. */ html[data-theme="marbre"] .side-legal a{color:#5f574a} html[data-theme="marbre"] .side-legal a:hover{color:#7a5a10} html[data-theme="marbre"] .side-toggle{ background:var(--m-lingot);color:#3a2708;border:1px solid rgba(160,120,64,.5); box-shadow:0 10px 24px -14px rgba(74,48,12,.6), inset 0 1px 0 rgba(255,255,255,.5); } @media (max-width:900px){ html[data-theme="marbre"] .side{box-shadow:-20px 0 60px -30px rgba(138,101,18,.5)} html[data-theme="marbre"] .scrim{background:rgba(74,56,15,.32)} } /* ── 8. LES PANNEAUX FLOTTANTS — emoji, modales, toast ─────────────────────*/ html[data-theme="marbre"] .emoji-panel{ background:rgba(255,253,248,.98);border-top:1px solid var(--line);border-bottom:1px solid var(--line); box-shadow:0 -14px 38px -26px rgba(138,101,18,.6); } html[data-theme="marbre"] .emoji-search-wrap{border-bottom-color:rgba(160,120,64,.12)} html[data-theme="marbre"] .emoji-search{background:#fffdf9;color:var(--ivory);border-color:rgba(160,120,64,.24)} html[data-theme="marbre"] .emoji-search::placeholder{color:#9a917f} html[data-theme="marbre"] .emoji-search:focus{border-color:var(--m-or);background:#fff} html[data-theme="marbre"] .emoji-tabs{border-bottom-color:var(--line)} html[data-theme="marbre"] .emoji-tab:hover{background:rgba(201,151,27,.1)} html[data-theme="marbre"] .emoji-tab.active{background:rgba(201,151,27,.2);box-shadow:0 1px 0 rgba(160,120,64,.5) inset} html[data-theme="marbre"] .emoji-cell:hover{background:rgba(201,151,27,.14)} html[data-theme="marbre"] .emoji-empty, html[data-theme="marbre"] .emoji-hint{color:var(--ivory-mute)} html[data-theme="marbre"] .emoji-hint{border-top-color:rgba(160,120,64,.12)} html[data-theme="marbre"] .emoji-tone-popover{ background:#fffdf8;border-color:rgba(160,120,64,.4); box-shadow:0 14px 34px -22px rgba(138,101,18,.7); } html[data-theme="marbre"] .emoji-tone-swatch{background:rgba(201,151,27,.06)} html[data-theme="marbre"] .emoji-tone-swatch:hover{background:rgba(201,151,27,.18)} html[data-theme="marbre"] .ext-link-back{background:rgba(74,56,15,.42);backdrop-filter:blur(6px)} html[data-theme="marbre"] .ext-link-modal{ background:var(--m-plaque);border-color:var(--m-filet-fin); box-shadow:0 34px 80px -46px rgba(138,101,18,.6), inset 0 1px 0 #fff; } html[data-theme="marbre"] .ext-link-title{color:var(--gold-pale)} html[data-theme="marbre"] .ext-link-url{ color:var(--ivory-dim);background:rgba(201,151,27,.07);border-color:rgba(160,120,64,.18); } html[data-theme="marbre"] .ext-link-hint{color:var(--ivory-dim)} html[data-theme="marbre"] .av-menu{ background:var(--m-plaque);border-color:rgba(160,120,64,.3); box-shadow:0 20px 50px -34px rgba(138,101,18,.7); } html[data-theme="marbre"] .av-menu-btn{color:var(--ivory)} html[data-theme="marbre"] .av-menu-btn:hover{background:rgba(201,151,27,.12);color:var(--gold-deep)} html[data-theme="marbre"] .av-menu-btn-danger{color:#b4553c} html[data-theme="marbre"] .av-menu-btn-danger:hover{background:rgba(180,85,60,.1);color:#8f3f2b} html[data-theme="marbre"] .av-menu-btn-cancel{color:var(--ivory-mute)} html[data-theme="marbre"] .av-menu-btn-cancel:hover{color:var(--ivory)} html[data-theme="marbre"] .av-crop-overlay{background:rgba(74,56,15,.5)} html[data-theme="marbre"] .av-crop-modal{ background:var(--m-plaque);border-color:rgba(160,120,64,.32); box-shadow:0 34px 80px -44px rgba(138,101,18,.6), inset 0 1px 0 #fff; } html[data-theme="marbre"] .av-crop-title{color:var(--gold-pale)} html[data-theme="marbre"] .av-crop-stage{background:#f6efe0;box-shadow:inset 0 0 0 2px rgba(160,120,64,.4),0 14px 34px -24px rgba(138,101,18,.6)} html[data-theme="marbre"] .av-zoom-ico{color:var(--gold)} html[data-theme="marbre"] .av-crop-zoom{background:rgba(201,151,27,.2)} html[data-theme="marbre"] .av-crop-zoom::-webkit-slider-thumb{background:var(--m-lingot);box-shadow:0 2px 6px rgba(74,48,12,.35)} html[data-theme="marbre"] .av-crop-zoom::-moz-range-thumb{background:var(--m-lingot);box-shadow:0 2px 6px rgba(74,48,12,.35)} html[data-theme="marbre"] .av-crop-btn-cancel{color:#4a3520} html[data-theme="marbre"] .toast{ background:rgba(34,29,21,.94);color:#fdfaf2;border-color:rgba(201,151,27,.35); box-shadow:0 18px 40px -26px rgba(34,29,21,.9); } /* ── 9. LA CONFIRMATION D'EMAIL ──────────────────────────────────────────── ⛔ le sceau était un radial-gradient doré : une boule d'or dessinée, donc interdite hors du logo. Il devient un disque de MARBRE à filet d'or. */ html[data-theme="marbre"] .verif-banner{ background:linear-gradient(158deg,#fffdf9,rgba(250,242,226,.94)); border:1px solid rgba(160,120,64,.42); color:var(--ivory); box-shadow:0 10px 24px -20px rgba(138,101,18,.55), inset 0 1px 0 #fff; } html[data-theme="marbre"] .verif-banner .verif-txt{color:#3d3324;font-weight:600} html[data-theme="marbre"] .verif-dot{ background:var(--m-lingot);color:#3a2708; box-shadow:0 4px 10px -6px rgba(74,48,12,.6), inset 0 1px 0 rgba(255,255,255,.5); } html[data-theme="marbre"] .verif-btn{ background:var(--m-lingot);color:#3a2708;border:1px solid rgba(160,120,64,.5); box-shadow:0 6px 16px -10px rgba(74,48,12,.55), inset 0 1px 0 rgba(255,255,255,.5); } html[data-theme="marbre"] .verif-modal-overlay{ background:radial-gradient(ellipse at center,rgba(74,56,15,.42) 0%,rgba(45,34,10,.6) 100%); } html[data-theme="marbre"] .verif-modal-card{ background:var(--m-plaque); border:1px solid var(--m-filet-fin); box-shadow:0 40px 90px -50px rgba(138,101,18,.7), inset 0 1px 0 #fff; color:var(--ivory); } html[data-theme="marbre"] .verif-modal-halo{ background:radial-gradient(ellipse at 50% 30%,rgba(247,227,164,.5) 0%,rgba(201,151,27,.12) 38%,transparent 66%); } html[data-theme="marbre"] .verif-modal-seal{ background:linear-gradient(165deg,#fffefb,#f2e8d5); box-shadow:0 0 0 1px rgba(160,120,64,.45),0 0 0 8px rgba(247,227,164,.28), 0 20px 44px -28px rgba(138,101,18,.7), inset 0 1px 0 #fff; animation:none; } html[data-theme="marbre"] .vm-check{color:#8a6512;text-shadow:0 1px 0 rgba(255,255,255,.8)} html[data-theme="marbre"] .vm-sparkle{background:radial-gradient(circle,#fff 0%,rgba(247,227,164,.9) 60%,transparent 100%);box-shadow:0 0 10px rgba(232,185,58,.55)} html[data-theme="marbre"] .verif-modal-eyebrow{color:var(--gold)} html[data-theme="marbre"] .verif-modal-title{ background:linear-gradient(135deg,#a97f14 0%,#8a6512 55%,#5f4409 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } html[data-theme="marbre"] .verif-modal-lead{color:var(--ivory-dim)} html[data-theme="marbre"] .verif-modal-foot{color:var(--ivory-mute)} /* ── 10. LE LECTEUR AUDIO (ga-audio.css) ───────────────────────────────────*/ html[data-theme="marbre"] .gaa-player{ background:linear-gradient(165deg,#fffefb,rgba(250,244,232,.92)); border:1px solid rgba(160,120,64,.26); box-shadow:0 10px 24px -20px rgba(138,101,18,.55), inset 0 1px 0 #fff; backdrop-filter:none;-webkit-backdrop-filter:none; } /* ⛔ le bouton play était un radial-gradient doré (une bille) : matière plate. */ html[data-theme="marbre"] .gaa-play{ background:var(--m-lingot);color:#3a2708; box-shadow:0 6px 14px -8px rgba(74,48,12,.55), inset 0 1px 0 rgba(255,255,255,.5); } html[data-theme="marbre"] .gaa-player{--gaa-track:rgba(160,120,64,.24);--gaa-accent:#c9971b;--gaa-accent-2:#8a6512} html[data-theme="marbre"] .msg.user .gaa-player{ background:rgba(255,255,255,.42);border-color:rgba(255,255,255,.55); } html[data-theme="marbre"] .msg.user .gaa-play{ background:linear-gradient(165deg,#fffefb,#f2e8d5);color:#7a5a10; box-shadow:0 4px 10px -6px rgba(74,48,12,.4), inset 0 1px 0 #fff; } /* ── 11. LE MOUVEMENT ──────────────────────────────────────────────────────*/ @media (prefers-reduced-motion:reduce){ html[data-theme="marbre"] .verif-modal-seal, html[data-theme="marbre"] .auth-splash-orb{animation:none} } /* ── 12. LE PANNEAU QUI GLISSE (téléphone) ───────────────────────────────── ⛔ Défaut vu à l'écran le 19/08 : « Mon espace » était translucide comme sur grand écran — mais sur téléphone il glisse PAR-DESSUS le fil, et les messages transparaissaient sous les cartes. Une surface qui recouvre doit être opaque ; la matière reste visible partout ailleurs. */ @media (max-width:900px){ /* Le panneau doit être OPAQUE (il glisse par-dessus le fil) — mais opaque ne veut pas dire blanc : on peint la pierre DANS le panneau, sous un voile de lait. Même matière que le reste, zéro transparence. */ html[data-theme="marbre"] .side{ background:linear-gradient(180deg,rgba(255,253,248,.86),rgba(255,252,245,.80)), url('/giri-assistance/marbre.webp') center center / cover no-repeat, #fffdf7; } } /* [LEGAL-ENTREE 2026-08-21] ⛔ Cette feuille est chargée APRÈS app.css : c'est ICI que se décide la couleur, pas dans app.css (piège payé sur `.logout` le 21/08). */ html[data-theme="marbre"] .login-card .login-legal{border-top-color:rgba(160,120,64,.22)} html[data-theme="marbre"] .login-card .login-legal a{color:#5f574a} html[data-theme="marbre"] .login-card .login-legal a:hover{color:#7a5a10}