/* ═══════════════════════════════════════════════════════════════════════════ PRODUCTIVEAPP — THÈME « MARBRE PREMIUM » (Maha, 12/09/2026) « met le thème marbre premium dans productive app, partout » Règle mère : tout design Giri part du marbre lumineux. La matière et les gestes viennent du skill `bouton` : · LA PIERRE est la texture maison marbre-affiliation.webp — jamais des veines CSS (elles ne se voient pas à l'écran). · body{background:transparent} sinon la pierre est peinte SOUS le body et reste invisible : ::before est un enfant à z-index négatif. · Le lingot (135deg, 4 arrêts, 16px) est le bouton unique de la maison. · Un cercle doré est TOUJOURS golden-ball.png, jamais un radial-gradient. Ce fichier ne peint QUE html[data-theme="marbre"] : les 62 autres thèmes de l'app restent intacts et accessibles dans les Réglages. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 1. LA PALETTE ─────────────────────────────────────────────────────── */ html[data-theme="marbre"]{ /* la pierre */ --m-pierre-1:#fffdf8; --m-pierre-2:#fdfaf2; --m-pierre-3:#f4ecda; --m-texture:url('/css/textures/pierre-jour-2.webp'); /* la pierre de l'Académie, veines d'or */ --m-logo:url('/assets/images/logos/golden-ball.png?v=2603291400'); /* l'or de la maison */ --m-or:#c9971b; --m-or-clair:#e8b93a; --m-or-profond:#8a6512; --m-or-pale:rgba(201,151,27,.14); /* l'encre */ --m-encre:#2e2413; --m-encre-douce:#6b5c42; --m-filet:rgba(160,120,64,.26); --m-filet-fort:rgba(160,120,64,.46); /* ── socle ProductiveApp ── */ --bg-primary:var(--m-pierre-2)!important; --bg-secondary:rgba(255,253,248,.82)!important; --bg-tertiary:rgba(248,242,230,.90)!important; --bg-card:rgba(255,253,248,.74)!important; --surface:rgba(255,253,248,.82)!important; --text:var(--m-encre)!important; --text-primary:var(--m-encre)!important; --text-secondary:#4d4026!important; --text-tertiary:var(--m-encre-douce)!important; --text-quaternary:#8a7a5e!important; --text-muted:var(--m-encre-douce)!important; --muted:var(--m-encre-douce)!important; --color-text-primary:var(--m-encre)!important; --color-text-secondary:#4d4026!important; --accent:var(--m-or)!important; --accent-primary:var(--m-or)!important; --accent-color:var(--m-or)!important; --primary-color:var(--m-or)!important; --accent-light:var(--m-or-clair)!important; --accent-muted:rgba(201,151,27,.55)!important; --accent-glow:rgba(201,151,27,.22)!important; --accent-rgb:201,151,27!important; --success:#4f7d4a!important; --success-glow:rgba(79,125,74,.18)!important; --warning:#b9812a!important; --danger:#a8443a!important; --info:#4a6b8a!important; --border:var(--m-filet)!important; --border-color:var(--m-filet)!important; --border-primary:var(--m-filet)!important; --border-strong:var(--m-filet-fort)!important; --glass-bg:rgba(255,253,248,.62)!important; --glass-border:rgba(160,120,64,.22)!important; --shadow-sm:0 2px 10px rgba(74,48,12,.08)!important; --shadow-md:0 6px 22px rgba(74,48,12,.11)!important; --shadow-lg:0 14px 44px rgba(74,48,12,.14)!important; /* bulles de tâches */ --bubble-bg:linear-gradient(158deg,rgba(255,253,249,.95),rgba(248,243,233,.88))!important; --bubble-border:var(--m-filet)!important; --bubble-glow:none!important; --bubble-text-color:var(--m-encre)!important; --bubble-inprogress-bg:linear-gradient(158deg,#fdf1cf,#f6e4b4)!important; --bubble-inprogress-border:var(--m-filet-fort)!important; --bubble-inprogress-glow:none!important; --bubble-inprogress-text:#3a2708!important; --bubble-done-bg:linear-gradient(158deg,#eaf1e6,#dfe9da)!important; --bubble-done-border:#4f7d4a!important; --bubble-done-glow:none!important; --bubble-done-text:#31462d!important; /* ── la barre latérale : un panneau de pierre plus dense ── */ --sb-bg:rgba(250,244,232,.94)!important; --sb-border:rgba(160,120,64,.24)!important; --sb-text:#4d4026!important; --sb-text-hover:var(--m-encre)!important; --sb-text-active:#3a2708!important; --sb-accent:var(--m-or)!important; --sb-hover:rgba(201,151,27,.10)!important; --sb-active:rgba(201,151,27,.18)!important; /* ── les modules qui portent leur propre palette ── */ --gcrm-bg:var(--m-pierre-2)!important; --gcrm-bg2:rgba(255,253,248,.80)!important; --gcrm-bg3:rgba(248,242,230,.88)!important; --gcrm-border:var(--m-filet)!important; --gcrm-text:var(--m-encre)!important; --gcrm-muted:var(--m-encre-douce)!important; --gcrm-accent:var(--m-or)!important; --gcrm-glass:rgba(255,253,248,.66)!important; --gb-bg:var(--m-pierre-2)!important; --gb-surface:rgba(255,253,248,.82)!important; --gb-border:var(--m-filet)!important; --gb-text:var(--m-encre)!important; --gb-text-muted:var(--m-encre-douce)!important; --gb-accent:var(--m-or)!important; --gb-accent2:var(--m-or-profond)!important; --gb-green:#4f7d4a!important; --gb-red:#a8443a!important; --gb-yellow:#b9812a!important; --gb-shadow:0 6px 22px rgba(74,48,12,.11)!important; --mail-primary:var(--m-or)!important; --mail-gold:var(--m-or-clair)!important; --mail-glass-bg:rgba(255,253,248,.72)!important; --mail-glass-border:var(--m-filet)!important; --mail-glass-hover:rgba(201,151,27,.10)!important; --mail-success:#4f7d4a!important; --mail-error:#a8443a!important; --mail-shadow-sm:0 2px 10px rgba(74,48,12,.08)!important; --mail-shadow-md:0 6px 22px rgba(74,48,12,.11)!important; --mail-shadow-lg:0 14px 44px rgba(74,48,12,.14)!important; --mail-shadow-xl:0 20px 60px rgba(74,48,12,.16)!important; --cal-glass-bg:rgba(255,253,248,.72)!important; --cal-glass-border:var(--m-filet)!important; --cal-glass-hover:rgba(201,151,27,.10)!important; --cal-shadow-sm:0 2px 10px rgba(74,48,12,.08)!important; --cal-shadow-md:0 6px 22px rgba(74,48,12,.11)!important; --cal-shadow-xl:0 20px 60px rgba(74,48,12,.16)!important; --gcal-surface:rgba(255,253,248,.86)!important; --gcal-surface-2:rgba(248,242,230,.90)!important; --gcal-border:var(--m-filet)!important; --gcal-border-h:var(--m-filet-fort)!important; --gcal-text:var(--m-encre)!important; --gcal-text-2:#4d4026!important; --gcal-text-3:var(--m-encre-douce)!important;--gcal-accent:var(--m-or)!important; --gcal-accent-rgb:201,151,27!important; --gcal-today-bg:rgba(201,151,27,.13)!important; --gcal-weekend:rgba(244,236,218,.55)!important; --tt-gold:var(--m-or)!important; --tt-gold-light:var(--m-or-clair)!important; --tt-gold-glow:rgba(201,151,27,.22)!important; --tt-glass:rgba(255,253,248,.72)!important; --tt-glass-border:var(--m-filet)!important; --tt-amber:#b9812a!important; --tt-cosmic:var(--m-or-profond)!important; --tt-cosmic-glow:rgba(138,101,18,.20)!important; --tt-divine-glow:rgba(201,151,27,.24)!important; --camp-gold:var(--m-or)!important; --camp-gold-light:var(--m-or-clair)!important; --camp-glass:rgba(255,253,248,.72)!important;--camp-glass-border:var(--m-filet)!important; --camp-cosmic:var(--m-or-profond)!important; --camp-divine-glow:rgba(201,151,27,.24)!important; --camp-success:#4f7d4a!important; --camp-warning:#b9812a!important; --camp-danger:#a8443a!important; --admin-bg:var(--m-pierre-2)!important; --admin-bg-light:rgba(255,253,248,.82)!important; --admin-bg-lighter:rgba(248,242,230,.90)!important; --admin-border:var(--m-filet)!important; --admin-border-hover:var(--m-filet-fort)!important; --admin-text:var(--m-encre)!important; --admin-text-muted:var(--m-encre-douce)!important; --admin-accent:var(--m-or)!important; --admin-accent-light:var(--m-or-clair)!important; --admin-glass-bg:rgba(255,253,248,.72)!important; --admin-glass-border:var(--m-filet)!important; --admin-success:#4f7d4a!important; --admin-warning:#b9812a!important; --admin-info:#4a6b8a!important; --gs-bg:var(--m-pierre-2)!important; --gs-surface:rgba(255,253,248,.82)!important; --gs-surface2:rgba(248,242,230,.90)!important;--gs-border:var(--m-filet)!important; --gs-text:var(--m-encre)!important; --gs-text-muted:var(--m-encre-douce)!important; --gs-accent:var(--m-or)!important; --gs-accent-h:var(--m-or-clair)!important; --gs-warn:#b9812a!important; --gs-error:#a8443a!important; --pf-bg:var(--m-pierre-2)!important; --pf-surface:rgba(255,253,248,.82)!important; --pf-border:var(--m-filet)!important; --pf-border-sub:rgba(160,120,64,.16)!important; --pf-gold:var(--m-or)!important; --pf-gold-l:var(--m-or-clair)!important; --pf-gold-ll:#f4d58a!important; --pf-gold-10:rgba(201,151,27,.10)!important; --pf-gold-20:rgba(201,151,27,.20)!important; --pf-gold-30:rgba(201,151,27,.30)!important; --pf-gold-glow:rgba(201,151,27,.24)!important; --pf-text:var(--m-encre)!important; --pf-text-muted:var(--m-encre-douce)!important; --pf-text-dim:#8a7a5e!important; --gam-bg:var(--m-pierre-2)!important; --gam-dark:rgba(248,242,230,.92)!important; --gam-dark2:rgba(244,236,218,.94)!important; --gam-card:rgba(255,253,248,.82)!important; --gam-card-hover:rgba(255,253,248,.94)!important; --gam-border:var(--m-filet)!important; --gam-text:var(--m-encre)!important; --gam-text-muted:var(--m-encre-douce)!important;--gam-muted:var(--m-encre-douce)!important; --gam-gold:var(--m-or)!important; --gam-gold2:var(--m-or-clair)!important; --gam-accent:var(--m-or)!important; --gam-accent-glow:rgba(201,151,27,.22)!important; --gam-accent-muted:rgba(201,151,27,.5)!important; --gam-purple:#7a5ea8!important; --gam-purple2:#9b82c4!important; --gam-blue:#4a6b8a!important; --gam-red:#a8443a!important; --gam-glow:rgba(201,151,27,.22)!important; --gam-glow-gold:rgba(201,151,27,.30)!important; --gam-silver:#9a9384!important; --gam-bronze:#a87a4a!important; color-scheme:light; } /* ─── 2. LA PIERRE ──────────────────────────────────────────────────────── */ /* La pierre se pose sur html, jamais sur body : ::before est peint AVANT le fond du body. Un body opaque la recouvre entièrement (piège payé 2×). */ html[data-theme="marbre"]{ background:linear-gradient(155deg,var(--m-pierre-1) 0%,var(--m-pierre-2) 46%,var(--m-pierre-3) 100%)!important; } /* ⛔⛔ LA PIERRE EST CELLE DE L'ACADÉMIE, avec ses veines d'OR. Maha : « j'ai besoin qu'on voit comme dans la giri académie .com avec les lignes du marbre or ». J'avais pris `marbre-affiliation.webp` et je l'avais voilée à .34 « pour qu'elle se sente sans se voir » — résultat : un beige plat, aucune veine. La maison a déjà tranché sa recette, on la reprend au pixel près (mesurée sur giriacademie.com/affilie et /veillee) : background: linear-gradient(rgba(255,253,248,.4),rgba(255,252,245,.54)), url(pierre-jour-2.webp) center/cover; filter: contrast(1.1) saturate(1.06); opacity: 1; Le voile de lait est DANS la même couche : la pierre garde toute sa force, et le texte reste lisible par-dessus. */ html[data-theme="marbre"]::before{ content:'';position:fixed;inset:0;z-index:-2;pointer-events:none; background: linear-gradient(rgba(255,253,248,.40),rgba(255,252,245,.54)), var(--m-texture) center center / cover no-repeat; background-attachment:scroll; /* fixed saccade sur mobile */ filter:contrast(1.1) saturate(1.06); opacity:1; } /* ⛔ Il n'y a PAS de seconde couche. Deux halos blancs posés par-dessus (.34 et .26) suffisaient à effacer les veines d'or : comparé côte à côte avec giriacademie.com/affilie, ma pierre était lavée. L'Académie n'a qu'UNE couche — sa pierre et son voile intégré. On fait pareil. */ html[data-theme="marbre"] body{ background:transparent!important; color:var(--m-encre)!important; } /* Les grandes surfaces qui recouvrent la pierre : on les voile, on ne les rend pas transparentes (on lirait le texte à travers). */ html[data-theme="marbre"] .main-content, html[data-theme="marbre"] #main-content, html[data-theme="marbre"] .app-container, html[data-theme="marbre"] .content-area{ background:transparent!important; } /* ─── 3. LES SURFACES ───────────────────────────────────────────────────── */ html[data-theme="marbre"] .card, html[data-theme="marbre"] .module-card, html[data-theme="marbre"] .stat-card, html[data-theme="marbre"] .kpi-card, html[data-theme="marbre"] .widget-card, html[data-theme="marbre"] .panel, html[data-theme="marbre"] .glass, html[data-theme="marbre"] .modal-content, html[data-theme="marbre"] .dropdown-menu, html[data-theme="marbre"] .popover{ background:linear-gradient(158deg,rgba(255,253,249,.90),rgba(250,245,235,.82))!important; border:1px solid var(--m-filet)!important; box-shadow:0 2px 6px rgba(74,48,12,.07),0 10px 26px rgba(74,48,12,.10)!important; color:var(--m-encre)!important; backdrop-filter:blur(9px) saturate(1.08); } html[data-theme="marbre"] input, html[data-theme="marbre"] textarea, html[data-theme="marbre"] select{ background:rgba(255,253,249,.86)!important; border:1px solid var(--m-filet)!important; color:var(--m-encre)!important; } html[data-theme="marbre"] input::placeholder, html[data-theme="marbre"] textarea::placeholder{color:#9b8a6c!important;} html[data-theme="marbre"] input:focus, html[data-theme="marbre"] textarea:focus, html[data-theme="marbre"] select:focus{ border-color:var(--m-or)!important; box-shadow:0 0 0 3px rgba(201,151,27,.18)!important;outline:none!important; } html[data-theme="marbre"] hr, html[data-theme="marbre"] .divider{border-color:var(--m-filet)!important;} html[data-theme="marbre"] ::-webkit-scrollbar-thumb{ background:rgba(160,120,64,.34)!important;border-radius:8px; } html[data-theme="marbre"] ::-webkit-scrollbar-track{background:rgba(244,236,218,.5)!important;} /* ─── 4. LA BARRE LATÉRALE ──────────────────────────────────────────────── */ html[data-theme="marbre"] #app-sidebar, html[data-theme="marbre"] .sidebar{ background: linear-gradient(180deg,rgba(255,253,248,.93),rgba(250,244,232,.90)), var(--m-texture) center center / cover no-repeat!important; border-right:1px solid var(--m-filet)!important; box-shadow:1px 0 26px rgba(74,48,12,.07)!important; color:#4d4026!important; } html[data-theme="marbre"] .sidebar-item, html[data-theme="marbre"] .sidebar-label, html[data-theme="marbre"] .sidebar-brand-name, html[data-theme="marbre"] .sidebar-profile-name{color:#4d4026!important;} html[data-theme="marbre"] .sidebar-brand-name{color:#3a2708!important;font-weight:700;} html[data-theme="marbre"] .sidebar-item-icon svg{stroke:#8a6512!important;} html[data-theme="marbre"] .sidebar-item:hover{background:rgba(201,151,27,.10)!important;} html[data-theme="marbre"] .sidebar-item:hover .sidebar-label{color:#2e2413!important;} html[data-theme="marbre"] #app-sidebar .sidebar-item.active, html[data-theme="marbre"] [data-theme] .sidebar-item.active{ background:linear-gradient(135deg,rgba(244,213,138,.50),rgba(201,151,27,.24))!important; color:#3a2708!important;border-radius:10px; } html[data-theme="marbre"] .sidebar-item.active .sidebar-label{color:#3a2708!important;font-weight:650;} html[data-theme="marbre"] .sidebar-item.active .sidebar-item-icon svg{stroke:#8a6512!important;} html[data-theme="marbre"] .sidebar-section-label{color:#8a7a5e!important;letter-spacing:.08em;} html[data-theme="marbre"] .sidebar-divider{background:var(--m-filet)!important;} html[data-theme="marbre"] .sidebar-tag{ background:linear-gradient(135deg,#F4D58A,#C9A253)!important;color:#3a2708!important; border:1px solid rgba(160,120,64,.45)!important; } html[data-theme="marbre"] .sidebar-header, html[data-theme="marbre"] .sidebar-profile{border-bottom:1px solid var(--m-filet)!important;} /* ─── 5. LE LINGOT — le geste unique de la maison ───────────────────────── */ html[data-theme="marbre"] .btn-primary, html[data-theme="marbre"] .btn.primary, html[data-theme="marbre"] button.primary, html[data-theme="marbre"] .btn-accent, html[data-theme="marbre"] .btn-gold, html[data-theme="marbre"] .cta-primary{ background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%)!important; border:1px solid rgba(160,120,64,.55)!important; color:#231703!important; font-weight:600;letter-spacing:.2px; border-radius:14px!important; font-variant-numeric:lining-nums; text-shadow:0 1px 1px rgba(60,40,4,.28); 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; } html[data-theme="marbre"] .btn-primary:hover, html[data-theme="marbre"] .btn.primary:hover, html[data-theme="marbre"] button.primary:hover, html[data-theme="marbre"] .btn-accent:hover, html[data-theme="marbre"] .cta-primary:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(74,48,12,.16),0 16px 34px rgba(74,48,12,.22), inset 0 1px 0 rgba(255,255,255,.6)!important; } html[data-theme="marbre"] .btn-secondary, html[data-theme="marbre"] .btn.secondary, html[data-theme="marbre"] .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; } html[data-theme="marbre"] a{color:#8a6512;} html[data-theme="marbre"] a:hover{color:#6d4f0c;} /* ─── 6. LISIBILITÉ — barème de la maison : rien sous 15 px ─────────────── */ html[data-theme="marbre"] body{font-size:15px;} html[data-theme="marbre"] .text-xs, html[data-theme="marbre"] .badge, html[data-theme="marbre"] small{font-size:.85rem!important;} html[data-theme="marbre"] h1, html[data-theme="marbre"] h2, html[data-theme="marbre"] h3{color:#3a2708!important;} @media (prefers-reduced-motion:reduce){ html[data-theme="marbre"] .btn-primary:hover{transform:none;} } /* ─── 7. LES SURFACES QUI RESTAIENT SOMBRES ─────────────────────────────── */ /* Repérées à l'écran, pas supposées : un bloc encre au milieu de la pierre se voit avant tout le reste, et son texte doré dessus devient illisible. */ /* Le bandeau « Mon compte Stripe » — violet #635bff d'origine */ html[data-theme="marbre"] .giri-stripe-card{ background:linear-gradient(158deg,rgba(255,253,249,.94),rgba(248,242,230,.88))!important; border:1px solid var(--m-filet-fort)!important; color:var(--m-encre)!important; box-shadow:0 2px 6px rgba(74,48,12,.08),0 12px 30px rgba(74,48,12,.12)!important; } html[data-theme="marbre"] .giri-stripe-card *{color:var(--m-encre)!important;} html[data-theme="marbre"] .giri-stripe-btn{ background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%)!important; border:1px solid rgba(160,120,64,.55)!important; 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; } html[data-theme="marbre"] .giri-stripe-btn, html[data-theme="marbre"] .giri-stripe-btn *{ color:#231703!important;text-shadow:0 1px 1px rgba(60,40,4,.28)!important; } /* Le bandeau « Giri Réussite » — encre #0d0d1a d'origine */ /* La pierre est plus présente depuis qu'on a repris celle de l'Académie : cette bande la laissait traverser et son titre devenait difficile à lire. Une surface qui porte du texte se peint — elle ne se devine pas. */ html[data-theme="marbre"] .gr-widget{ background:linear-gradient(158deg,rgba(255,253,249,.985),rgba(252,247,238,.965))!important; background-image:none!important; border:1px solid var(--m-filet)!important; box-shadow:0 2px 6px rgba(74,48,12,.07),0 10px 26px rgba(74,48,12,.10)!important; } /* Le widget porte ses couleurs par variables posées EN LIGNE selon le palier : on reprend la main sur les variables, pas seulement sur les règles. */ html[data-theme="marbre"] .gr-widget{ --card:rgba(255,253,249,.94)!important; --gr-color:#8a6512!important; --gr-next:#8a6512!important; --text:#2e2413!important; } html[data-theme="marbre"] .gr-title, html[data-theme="marbre"] .gr-amount, html[data-theme="marbre"] .gr-tier, html[data-theme="marbre"] .gr-next strong{color:#3a2708!important;text-shadow:none!important;} html[data-theme="marbre"] .gr-month, html[data-theme="marbre"] .gr-pct, html[data-theme="marbre"] .gr-next{color:var(--m-encre-douce)!important;text-shadow:none!important;} html[data-theme="marbre"] .gr-max, html[data-theme="marbre"] .gr-bonus{color:#8a6512!important;text-shadow:none!important;} html[data-theme="marbre"] .gr-bar{background:rgba(160,120,64,.16)!important;} html[data-theme="marbre"] .gr-widget::before{ background:linear-gradient(90deg,rgba(160,120,64,.5),rgba(232,185,58,.9),rgba(160,120,64,.5))!important; } /* L'invitation « Installer l'app » */ html[data-theme="marbre"] #giri-install-fab{ background:linear-gradient(158deg,rgba(255,253,249,.96),rgba(248,242,230,.92))!important; border:1px solid var(--m-filet-fort)!important; color:var(--m-encre)!important; box-shadow:0 2px 6px rgba(74,48,12,.10),0 12px 30px rgba(74,48,12,.14)!important; } html[data-theme="marbre"] #giri-install-fab *{color:var(--m-encre)!important;} /* ⛔ Son libellé est peint en `background-clip:text` avec un dégradé CLAIR et `-webkit-text-fill-color:transparent` : sur la pierre, le mot disparaît. Une `color` ne suffit pas — c'est le remplissage qu'il faut reprendre. */ html[data-theme="marbre"] #giri-install-fab .gi-label{ background:none!important; -webkit-background-clip:border-box!important; background-clip:border-box!important; -webkit-text-fill-color:#3a2708!important; color:#3a2708!important; } html[data-theme="marbre"] #giri-install-fab .gi-x{ color:#8a7a5e!important; } /* Les deux bulles du coin sont parties : l'invitation reprend sa place basse au lieu de flotter à 164 px au-dessus du vide. */ @media (min-width:1024px){ html[data-theme="marbre"] #giri-install-fab{ bottom:24px!important; } } /* ⛔ Résidu de la boule d'or retirée : sa vignette d'état restait seule. */ html[data-theme="marbre"] #mos-mini{display:none!important;} /* La barre latérale active : la feuille injectée par sidebar-render.js pose `html [data-theme] #app-sidebar .sidebar-item.active{background:transparent !important}` (1,3,2) et arrive APRÈS nous dans le DOM. On la dépasse. */ html[data-theme="marbre"] body #app-sidebar .sidebar-item.active:not(#aucun){ background:linear-gradient(135deg,rgba(244,213,138,.52),rgba(201,151,27,.26))!important; color:#3a2708!important;border-radius:10px; } /* ⛔ Des filets BLANCS translucides, dessinés pour un fond sombre : sur la pierre claire ils font des ronds blancs qui flottent. Mesurés à l'écran : #sidebar-info-btn et .sidebar-collapse-btn en rgba(255,255,255,.15-.18). */ html[data-theme="marbre"] #sidebar-info-btn, html[data-theme="marbre"] .sidebar-collapse-btn{ border:1px solid rgba(160,120,64,.38)!important; color:#8a6512!important; background:rgba(255,253,249,.7)!important; } html[data-theme="marbre"] #sidebar-info-btn svg, html[data-theme="marbre"] .sidebar-collapse-btn svg{ stroke:#8a6512!important; } html[data-theme="marbre"] #mic-indicator-btn{ background:rgba(255,253,249,.86)!important; border:1px solid rgba(168,68,58,.34)!important; } /* Le titre du bandeau de réussite : encre franche, pas un or pâle sur clair. */ html[data-theme="marbre"] .gr-title, html[data-theme="marbre"] .gr-title-row .gr-title{ color:#3a2708!important; font-weight:700!important; } /* ─── 8. LE VOILE DE LECTURE ────────────────────────────────────────────── */ /* Là où l'on lit longtemps, la pierre se voile — sinon les veines passent sous chaque ligne de texte. Le voile est posé en fond de la zone de travail. */ /* ⛔ Ce voile était à .34 : ajouté au voile de la pierre, il effaçait les veines d'or. La pierre porte déjà son propre voile (.40 → .54) ; ici on n'ajoute qu'un souffle, juste sous la zone de travail. */ /* (plus de voile ici : la pierre porte déjà le sien, .40 → .54) */ /* ═══ LE PLANCHER VU À L'ÉCRAN — complément du plancher généré ════════════ Ces classes ne déclarent AUCUNE taille : elles héritent d'un parent. Un générateur qui lit les feuilles ne peut pas les voir — seule la mesure dans un vrai navigateur les trouve. Relevé sur les 44 vues le 12/09/2026. ═══════════════════════════════════════════════════════════════════════ */ html[data-theme="marbre"] .amp-char-count{font-size:13px!important;} html[data-theme="marbre"] .amp-ht-btn{font-size:13px!important;} html[data-theme="marbre"] .amp-ht-counter{font-size:13px!important;} html[data-theme="marbre"] .amp-recur-label{font-size:13px!important;} html[data-theme="marbre"] .amp-sched-optimal-btn{font-size:13px!important;} html[data-theme="marbre"] .amp-stories-badge{font-size:13px!important;} html[data-theme="marbre"] .an-kpi-label{font-size:13px!important;} html[data-theme="marbre"] .bp-badge{font-size:13px!important;} html[data-theme="marbre"] .bp-highlight{font-size:13px!important;} html[data-theme="marbre"] .es-cta-hint{font-size:13px!important;} html[data-theme="marbre"] .gf-palette-group-title{font-size:13px!important;} html[data-theme="marbre"] .gf-type-label{font-size:13px!important;} html[data-theme="marbre"] .gm-contact-meta{font-size:13px!important;} html[data-theme="marbre"] .gm-filter-tag{font-size:13px!important;} html[data-theme="marbre"] .gm-section-title{font-size:13px!important;} html[data-theme="marbre"] .gm-stat-l{font-size:13px!important;} html[data-theme="marbre"] .gm-subtitle{font-size:13px!important;} html[data-theme="marbre"] .gs-props-header{font-size:13px!important;} html[data-theme="marbre"] .gs-tb{font-size:13px!important;} html[data-theme="marbre"] .gt-mode-tab{font-size:13px!important;} html[data-theme="marbre"] .gt-stat-l{font-size:13px!important;} html[data-theme="marbre"] .gv-cosmos-btn{font-size:13px!important;} html[data-theme="marbre"] .gw-btn{font-size:13px!important;} html[data-theme="marbre"] .gw-level-badge{font-size:13px!important;} html[data-theme="marbre"] .l{font-size:13px!important;} html[data-theme="marbre"] .med-tab{font-size:13px!important;} html[data-theme="marbre"] .rt-notif-mark-all{font-size:13px!important;} html[data-theme="marbre"] .sidebar-tag{font-size:13px!important;} html[data-theme="marbre"] .vision-subtitle{font-size:13px!important;} html[data-theme="marbre"] .xpe-s-coins{font-size:13px!important;} html[data-theme="marbre"] .xpe-s-title{font-size:13px!important;} html[data-theme="marbre"] .xpe-sidebar-level{font-size:13px!important;} html[data-theme="marbre"] .xpe-sidebar-xp{font-size:13px!important;} /* ⛔ Sur téléphone, l'invitation « Installer l'app » naissait à 80 px du bas — la place réservée au bouton d'assistance, qui n'existe plus dans ProductiveApp. Elle recouvrait le montant du bandeau de réussite. Mesuré sur Galaxy S24 le 12/09. */ @media (max-width:600px){ html[data-theme="marbre"] #giri-install-fab{ bottom:calc(14px + env(safe-area-inset-bottom,0px))!important; } } /* ─── 9. LE PANNEAU RGPD ────────────────────────────────────────────────── */ /* C'est le PREMIER écran qu'on voit, et il était resté en nuit : titre brun sur fond noir, boutons violet et vert fluo. Mesuré sur Galaxy S24 le 12/09. */ html[data-theme="marbre"] #pa-cookie-banner, html[data-theme="marbre"] .ccb-inner, html[data-theme="marbre"] .ccb-panel-inner{ background:linear-gradient(158deg,rgba(255,253,249,.98),rgba(250,245,235,.96))!important; border:1px solid var(--m-filet-fort)!important; color:var(--m-encre)!important; box-shadow:0 4px 12px rgba(74,48,12,.12),0 24px 60px rgba(74,48,12,.18)!important; } html[data-theme="marbre"] .ccb-panel-overlay{ background:rgba(58,39,8,.34)!important; } html[data-theme="marbre"] #pa-cookie-banner *, html[data-theme="marbre"] .ccb-panel-inner *{ color:var(--m-encre)!important; } html[data-theme="marbre"] .ccb-header, html[data-theme="marbre"] .ccb-panel-header{ color:#3a2708!important; } html[data-theme="marbre"] .ccb-intro, html[data-theme="marbre"] .ccb-cat-desc, html[data-theme="marbre"] .ccb-subtitle, html[data-theme="marbre"] .ccb-consent-meta{ color:#5b4d36!important; } html[data-theme="marbre"] .ccb-category, html[data-theme="marbre"] .ccb-cat-base, html[data-theme="marbre"] .ccb-legal-block{ background:rgba(255,253,249,.8)!important; border:1px solid var(--m-filet)!important; } html[data-theme="marbre"] .ccb-badge, html[data-theme="marbre"] .ccb-badge-required, html[data-theme="marbre"] .ccb-badge-optional{ background:rgba(201,151,27,.14)!important; color:#8a6512!important; border:1px solid rgba(201,151,27,.3)!important; } /* Un seul lingot : celui qui fait avancer. Les deux autres sont creux. */ html[data-theme="marbre"] .ccb-btn-accept{ background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%)!important; border:1px solid rgba(160,120,64,.55)!important; 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; } html[data-theme="marbre"] .ccb-btn-accept, html[data-theme="marbre"] .ccb-btn-accept *{ color:#231703!important; text-shadow:0 1px 1px rgba(60,40,4,.28)!important; } html[data-theme="marbre"] .ccb-btn-custom, html[data-theme="marbre"] .ccb-btn-refuse, html[data-theme="marbre"] .ccb-link-btn{ background:linear-gradient(158deg,rgba(255,253,249,.96),rgba(248,243,233,.9))!important; border:1px solid rgba(160,120,64,.45)!important; color:#4a3520!important; box-shadow:none!important; } html[data-theme="marbre"] .ccb-btn-custom *, html[data-theme="marbre"] .ccb-btn-refuse *, html[data-theme="marbre"] .ccb-link-btn *{ color:#4a3520!important; } /* Le pied du panneau gardait son fond de nuit derrière les trois boutons. ⛔ Premier essai : `background:transparent`. Faute — ce pied RECOUVRE une liste qui défile dessous : rendu transparent, les boutons se sont superposés au texte des catégories. Une surface qui recouvre se PEINT, elle ne se vide pas (règle du skill `bouton`). On y met donc la pierre, opaque. */ html[data-theme="marbre"] .ccb-footer, html[data-theme="marbre"] .ccb-panel-actions, html[data-theme="marbre"] .ccb-panel-footer{ background:linear-gradient(180deg,rgba(253,250,244,.97),rgba(250,245,235,1))!important; border-top:1px solid var(--m-filet)!important; } /* Le badge « NEW » de la barre latérale tenait à 8 px — le plus petit texte de toute l'application. Il vit hors de la vue active : le plancher vivant ne le voit pas, c'est donc ici qu'on le remonte. */ html[data-theme="marbre"] .sidebar-tag, html[data-theme="marbre"] .sidebar-brand-version{ font-size:11px!important; letter-spacing:.03em; } html[data-theme="marbre"] .sidebar-section-label{ font-size:12px!important; } /* ─── 10. LA PORTE D'ENTRÉE ─────────────────────────────────────────────── */ /* ⛔ Surface oubliée : toutes mes captures étaient prises APRÈS connexion. L'écran de connexion a son fond forcé en dur (#070712) par un