/* ══════════════════════════════════════════════════════════════════════════════ GIRI STORE — CHARTE MARBRE (2 thèmes) · v2 · 2026-09-05 ────────────────────────────────────────────────────────────────────────────── ⛔ CE QUI A RATÉ EN v1, ET POURQUOI. Le Store a DÉJÀ son propre système de thème (giri-store.js ~5005) : il écrit ses couleurs EN INLINE sur (`documentElement.style.setProperty('--bg-primary','#f0eff5')`) et pose la classe `.gs-light-theme` sur , qui porte 75 règles dans giri-store.css. Un style inline bat une règle CSS : dès que le JS démarrait, il reprenait la main et le marbre disparaissait — « appliqué en infime partie ». ON NE LUTTE PLUS CONTRE : on s'y branche. 1. nos variables sont en `!important` — seule façon de battre l'inline ; 2. le marbre clair EST `.gs-light-theme` (les 75 règles natives suivent) ; 3. plus aucun `backdrop-filter` : c'était le poids ressenti sur téléphone. Deux thèmes, deux seulement : marbre clair (défaut) · marbre de nuit. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. LES DEUX PALETTES ─────────────────────────────────────────────────── */ :root,html[data-theme="light"]{ --gold:#A07840!important; --gold-light:#E8C078!important; --gold-dark:#8B6914!important; --gold-soft:rgba(160,120,64,.12)!important; --bg:#ece7dd!important; --bg-2:#f6f2ea!important; --text-strong:#2A1200!important; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',-apple-system,system-ui,sans-serif; --voile:linear-gradient(180deg,rgba(255,253,248,.30),rgba(255,252,245,.44)); --carte:linear-gradient(158deg,rgba(255,253,248,.90),rgba(250,244,232,.84)); --ombre:0 12px 30px rgba(120,90,30,.13); --border-strong:rgba(160,120,64,.72)!important; --muted-2:#8a7255!important; /* les variables historiques du Store — en !important, sinon son JS les écrase */ --bg-primary:#ece7dd!important; --bg-secondary:rgba(160,120,64,.08)!important; --bg-tertiary:rgba(160,120,64,.14)!important; --bg-card:rgba(255,253,248,.90)!important; --bg-hover:rgba(255,250,240,.96)!important; --text:#2A1200!important; --text2:#6b5238!important; --text3:#8a7255!important; --text-muted:#6b5238!important; --muted:#6b5238!important; --border:rgba(160,120,64,.38)!important; --accent:#A07840!important; --accent-hover:#8B6914!important; --danger:#a33b3b!important; --err:#a33b3b!important; --success:#2f6b45!important; --warn:#8a6a12!important; --radius:14px!important; --font:'Inter',-apple-system,system-ui,sans-serif!important; } html[data-theme="dark"]{ --gold:#f0d98c!important; --gold-light:#fdf3cf!important; --gold-dark:#e0bd63!important; --gold-soft:rgba(240,217,140,.14)!important; --bg:#070c17!important; --bg-2:rgba(14,24,42,.94)!important; --voile:linear-gradient(180deg,rgba(7,12,23,.34),rgba(4,8,16,.56)); --carte:linear-gradient(158deg,rgba(23,36,60,.92),rgba(13,23,41,.95)); --ombre:0 14px 34px rgba(0,0,0,.46); --border-strong:rgba(212,175,55,.55)!important; --muted-2:#9aa9c0!important; --bg-primary:#070c17!important; --bg-secondary:rgba(255,255,255,.06)!important; --bg-tertiary:rgba(255,255,255,.10)!important; --bg-card:rgba(22,34,57,.92)!important; --bg-hover:rgba(30,45,72,.96)!important; --text:#eef2f9!important; --text2:#b5c2d6!important; --text3:#9aa9c0!important; --text-muted:#b5c2d6!important; --muted:#b5c2d6!important; --border:rgba(212,175,55,.30)!important; --accent:#f0d98c!important; --accent-hover:#e0bd63!important; --danger:#ff9f9f!important; --err:#ff9f9f!important; --success:#7fd6a0!important; --warn:#f4d58a!important; } /* ── 2. LA PIERRE — une seule couche peinte, pas deux ─────────────────────── */ html{background:var(--bg)!important;background-image:none!important} body{background:transparent!important;color:var(--text)!important;font-family:var(--sans)!important;position:relative} body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none; background-image:url(https://www.giri-app.com/css/textures/marbre-affiliation.webp); background-size:cover;background-position:center center;background-repeat:no-repeat} html[data-theme="dark"] body::before{ background-image:none; background:radial-gradient(ellipse 90% 60% at 50% -10%,rgba(240,217,140,.07) 0%,transparent 62%), linear-gradient(180deg,#0a1120 0%,#070c17 55%,#050910 100%)} body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--voile)} ::selection{background:var(--gold);color:var(--text)} /* ⛔ aucun backdrop-filter dans cette feuille : sur telephone il coute une image par frame */ .gs-login-card,.gs-topbar,.gs-card,.gs-wrap,.gstore-modal,.gsm-v2-modal{ backdrop-filter:none!important;-webkit-backdrop-filter:none!important} /* ── 3. LES TITRES ────────────────────────────────────────────────────────── */ .gs-login-logo h1,.gs-topbar-brand,.gs-header__title,.gs-products__title, .gs-section-title,.gsm-v2-title,.gstore-modal__header h2, .gs-stat-card__value,.gs-kpi__value,h1,h2{ font-family:var(--serif)!important;font-weight:500!important;letter-spacing:.2px} .gs-login-logo h1{font-size:34px!important} .gs-header__title{font-size:31px!important} /* chiffres en chasse alignee : sinon « 100 » se lit « IOO » */ .gs-stat-card__value,.gs-kpi__value,.gs-card__price,td,th,.gs-badge{ font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1} /* ── 4. LES SURFACES ──────────────────────────────────────────────────────── */ .gs-login-card,.gs-card,.gs-kpi,.gs-stat-card,.gs-panel,.gs-table-wrap,.gs-empty, .gs-section,.gs-details,.gs-upload-zone,.gs-store-banner,.gstore-modal,.gsm-v2-modal, .gsm-v2-section,.gs-user-badge,#gs-toast,.gs-file-row{ background:var(--carte)!important;background-color:transparent!important; border:1px solid var(--border)!important;box-shadow:var(--ombre)!important; color:var(--text)!important} .gs-login-card{border-radius:22px!important;padding:52px 42px!important; border-color:var(--border-strong)!important} .gs-topbar{background:var(--carte)!important;border:0!important; border-bottom:1px solid var(--border)!important;box-shadow:0 4px 18px rgba(0,0,0,.10)!important} #gs-login-screen,.gs-wrap,#gs-store-mount{background:transparent!important} /* ── 5. L'ENCRE ───────────────────────────────────────────────────────────── */ .gs-card :is(p,span,div,li,small,label,td,th), .gs-stat-card :is(span,div),.gs-kpi :is(span,div), .gstore-modal :is(p,span,div,li,label),.gsm-v2-modal :is(p,span,div,label){color:var(--text)!important} .gs-stat-card__label,.gs-kpi__label,.gs-card__meta,.gs-label,.gs-hint,.gs-section-label, .gs-field label,.gs-login-logo p,.gs-user-badge,.gs-form-group label,#gs-forgot-msg{color:var(--muted)!important} .gs-stat-card__value--accent,.gs-card__price,.gs-badge,.gs-store-banner__url, .gs-type-btn__icon,.gs-kpi__value,.gs-accent{color:var(--gold)!important} /* ── 6. LES CHAMPS ────────────────────────────────────────────────────────── */ .gs-field input,.gs-input,input[type=text],input[type=email],input[type=password], input[type=number],input[type=url],select,textarea{ background:var(--bg-hover)!important;border:1px solid var(--border)!important; color:var(--text)!important;border-radius:11px!important;font-family:var(--sans)!important} input::placeholder,textarea::placeholder{color:var(--muted-2)!important;opacity:1} .gs-field input:focus,.gs-input:focus,input:focus,select:focus,textarea:focus{ border-color:var(--border-strong)!important;box-shadow:0 0 0 3px var(--gold-soft)!important;outline:none!important} /* ── 7. LE LINGOT ─────────────────────────────────────────────────────────── */ .gs-btn-login,.gs-btn--primary,.gs-btn--cta,#gs-forgot-submit,.gs-cta, button.gs-btn-login,.gs-btn.gs-btn--primary{ background:linear-gradient(180deg,#fdf3cf 0%,#f0d78f 18%,#e0bd63 46%,#c9a144 72%,#e8cf8d 100%)!important; color:#3a2708!important;-webkit-text-fill-color:#3a2708!important; border:1px solid rgba(122,90,16,.60)!important;border-radius:100px!important; font-family:var(--sans)!important;font-weight:700!important;text-shadow:none!important; box-shadow:0 6px 16px rgba(120,90,30,.28),inset 0 1px 0 rgba(255,255,255,.55)!important} .gs-btn-login:hover,.gs-btn--primary:hover,.gs-btn--cta:hover{filter:brightness(1.06)} .gs-btn-login:active,.gs-btn--primary:active{transform:scale(.985)} :is(.gs-btn--primary,.gs-btn--cta,.gs-btn-login) *{color:#3a2708!important;-webkit-text-fill-color:#3a2708!important} /* le geste discret : creux dans la pierre, lisere d'or */ .gs-btn-logout,.gs-btn--ghost,.gs-btn--ghost-premium,.gs-btn--secondary,.gs-btn--sm, #gs-quick-settings-btn,.gs-tab,.gs-chip,.gs-type-btn,.gsm-v2-shape-btn,.gsm-v2-pos-btn, .gsm-v2-font-option,.gsm-v2-logo-shape,.gsm-v2-close{ background:var(--bg-secondary)!important;background-image:none!important; border:1px solid var(--border)!important;color:var(--gold)!important; font-family:var(--sans)!important;box-shadow:none!important} :is(.gs-btn-logout,.gs-btn--ghost,#gs-quick-settings-btn,.gs-tab,.gs-type-btn):hover{ background:var(--gold-soft)!important;border-color:var(--border-strong)!important} .gs-tab.active,.gs-type-btn.active,.gsm-v2-shape-btn--active,.gsm-v2-pos-btn--active, .gsm-v2-font-option--active,.gsm-v2-palette--active,.gsm-v2-eye-btn--active{ background:var(--gold-soft)!important;border-color:var(--border-strong)!important; color:var(--gold)!important;font-weight:700!important} /* ── 8. LE BASCULEUR ──────────────────────────────────────────────────────── */ .gs-theme-switch{width:40px;height:40px;flex:0 0 40px;display:inline-flex;align-items:center; justify-content:center;border-radius:50%;cursor:pointer;font-size:17px;line-height:1; background:var(--bg-secondary)!important;border:1px solid var(--border)!important; color:var(--gold)!important;transition:background .18s,border-color .18s} .gs-theme-switch:hover{background:var(--gold-soft)!important;border-color:var(--border-strong)!important} .gs-theme-switch--login{position:fixed;top:18px;right:18px;z-index:120} /* ⛔ un seul basculeur a l'ecran : celui de l'entree s'efface des que l'app s'ouvre, sinon il flottait PAR-DESSUS le bouton Deconnexion (signale par Maha le 05/09). */ body.gs-app-ouverte .gs-theme-switch--login{display:none!important} /* ── 9. LES ÉTATS ─────────────────────────────────────────────────────────── */ #gs-login-error{background:rgba(163,59,59,.10)!important;border:1px solid rgba(163,59,59,.32)!important; color:var(--err)!important;border-radius:11px!important} #gs-toast.success{border-color:var(--success)!important;color:var(--success)!important} #gs-toast.error{border-color:var(--err)!important;color:var(--err)!important} .gs-spinner::after{border-color:var(--border)!important;border-top-color:var(--gold)!important} .gs-footer,.gs-footer *{color:var(--muted-2)!important;letter-spacing:.14em;font-size:11px!important} #gs-forgot-link,#gs-forgot-cancel{color:var(--muted)!important;text-decoration:none} #gs-forgot-link:hover,#gs-forgot-cancel:hover{color:var(--gold)!important} #gs-forgot-form{background:var(--bg-secondary)!important;border:1px solid var(--border)!important; border-radius:14px!important} /* ── 10. LES COULEURS ÉCRITES EN DUR DANS LE JS (inline) ──────────────────── */ [style*="#6366f1"],[style*="#8b5cf6"],[style*="#818cf8"],[style*="#7c5cff"],[style*="#a5b4fc"], [style*="rgba(99,102,241"],[style*="rgba(139,92,246"]{ border-color:var(--border)!important;color:var(--gold)!important} [style*="background:#6366f1"],[style*="background:var(--accent,#6366f1)"]{ background:linear-gradient(180deg,#fdf3cf 0%,#f0d78f 18%,#e0bd63 46%,#c9a144 72%,#e8cf8d 100%)!important; color:#3a2708!important} [style*="#1a1a2e"],[style*="#1a1828"],[style*="#2a2840"],[style*="#0a0a0f"],[style*="#1e1e2e"], [style*="#f0eff5"],[style*="#f8f7fc"]{ background:var(--carte)!important;background-image:none!important; border-color:var(--border)!important;color:var(--text)!important} [style*="color:#e8e8f0"],[style*="color:#888"],[style*="color:#666"],[style*="color:#999"]{color:var(--text)!important} /* ── 11. TÉLÉPHONE ───────────────────────────────────────────────────────── */ @media (max-width:600px){ .gs-login-card{padding:38px 24px!important;border-radius:18px!important} .gs-login-logo h1{font-size:29px!important} .gs-topbar{padding:10px 12px!important;gap:8px} .gs-user-badge{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gs-btn-login,.gs-btn--primary{font-size:16px!important;padding:15px 22px!important} .gs-theme-switch{width:38px;height:38px;flex:0 0 38px} .gs-theme-switch--login{top:12px;right:12px} } /* ══════════════════════════════════════════════════════════════════════════════ 12. LE TÉLÉPHONE — le tiroir, et rien qui déborde · 2026-09-05 ⛔ Signalé par Maha : six boutons d'en-tête à la file, le lien de la boutique à la VERTICALE (un `word-break:break-all` dans un flex qui ne se replie pas), et du scroll horizontal. On range dans un tiroir, on replie, on borne. ══════════════════════════════════════════════════════════════════════════ */ /* ── 12.1 Rien ne dépasse, jamais ─────────────────────────────────────────── */ html,body{max-width:100%;overflow-x:hidden!important} .gs-wrap,.gs-header,.gs-store-link,.gs-kpi-row,.gs-card,.gs-topbar, .gs-header__left,.gs-header__text,.gs-store-link__left,#gs-store-mount{ min-width:0;max-width:100%} .gs-header__title,.gs-header__sub,.gs-card__title,.gs-card__meta, .gs-tiroir__ligne span,.gs-user-badge span{min-width:0;overflow-wrap:anywhere} /* le tableau est la seule chose autorisée à défiler — dans SA boîte, pas la page */ .gs-table-wrap,.gs-sales-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} /* ── 12.2 Le lien de la boutique ──────────────────────────────────────────── */ .gs-store-link__url{ word-break:normal!important;overflow-wrap:anywhere; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; color:var(--gold)!important;min-width:0} .gs-store-link{flex-wrap:wrap} /* ── 12.3 Le bouton du tiroir ─────────────────────────────────────────────── */ .gs-burger{display:none;width:42px;height:42px;flex:0 0 42px;border-radius:12px; align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer; background:var(--bg-secondary)!important;border:1px solid var(--border)!important} .gs-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--gold); transition:transform .2s,opacity .2s} .gs-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .gs-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .gs-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ── 12.4 Le tiroir ───────────────────────────────────────────────────────── */ .gs-tiroir-voile{position:fixed;inset:0;z-index:998;background:rgba(20,12,2,.42); opacity:0;pointer-events:none;transition:opacity .24s} .gs-tiroir-voile.ouvert{opacity:1;pointer-events:auto} html[data-theme="dark"] .gs-tiroir-voile{background:rgba(2,5,12,.62)} .gs-tiroir{position:fixed;top:0;right:0;z-index:999;height:100dvh;width:min(84vw,340px); display:flex;flex-direction:column;padding:18px 16px calc(18px + env(safe-area-inset-bottom)); background:var(--carte)!important;border-left:1px solid var(--border-strong)!important; box-shadow:-18px 0 46px rgba(0,0,0,.28); transform:translateX(102%);transition:transform .26s cubic-bezier(.22,.7,.3,1); overflow-y:auto;-webkit-overflow-scrolling:touch} html[data-theme="dark"] .gs-tiroir{background:linear-gradient(158deg,#101d34,#070d19)!important} html[data-theme="light"] .gs-tiroir,:root .gs-tiroir{background:linear-gradient(158deg,#fffdf8,#f4ecdc)!important} .gs-tiroir.ouvert{transform:translateX(0)} body.gs-tiroir-ouvert{overflow:hidden} .gs-tiroir__tete{display:flex;align-items:center;justify-content:space-between; padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--border)} .gs-tiroir__titre{font-family:var(--serif);font-size:23px;color:var(--text)} .gs-tiroir__fermer{width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:15px; background:var(--bg-secondary)!important;border:1px solid var(--border)!important;color:var(--gold)!important} .gs-tiroir__ligne{display:flex;align-items:center;gap:13px;width:100%;text-align:left; padding:15px 14px;margin:0;border:0;border-radius:13px;cursor:pointer; font-family:var(--sans);font-size:16px;font-weight:500;line-height:1.3; background:transparent;color:var(--text)!important;transition:background .16s} .gs-tiroir__ligne:hover,.gs-tiroir__ligne:active{background:var(--gold-soft)!important} .gs-tiroir__icone{font-size:19px;width:26px;flex:0 0 26px;text-align:center} .gs-tiroir__sep{height:1px;margin:10px 2px;background:var(--border)} .gs-tiroir__ligne--sortie{color:var(--err)!important} .gs-tiroir__ligne--sortie .gs-tiroir__icone{color:var(--err)} /* ── 12.5 Sous 900 px : on range ──────────────────────────────────────────── */ @media (max-width:900px){ .gs-burger{display:flex} /* les gestes partent dans le tiroir — sauf « Nouveau produit », le geste principal */ .gs-header__actions .gs-btn:not(.gs-btn--cta){display:none!important} .gs-topbar .gs-btn-logout,.gs-topbar #gs-quick-settings-btn,.gs-topbar .gs-theme-switch{display:none!important} .gs-header{flex-direction:column;align-items:stretch;gap:14px} .gs-header__actions{width:100%} .gs-header__actions .gs-btn--cta{width:100%;justify-content:center} } /* ── 12.6 Sous 600 px : le téléphone ──────────────────────────────────────── */ @media (max-width:600px){ .gs-wrap{padding-left:14px!important;padding-right:14px!important} .gs-topbar{padding:9px 12px!important} .gs-topbar-brand{font-size:15px!important;gap:8px} .gs-user-badge{display:none!important} .gs-header__title{font-size:26px!important} .gs-header__sub{font-size:13px!important} /* les quatre chiffres : deux par deux, jamais en file qui déborde */ .gs-kpi-row{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important} .gs-kpi{padding:14px 12px!important} .gs-kpi__value{font-size:23px!important} .gs-kpi__label{font-size:11.5px!important} /* le lien de la boutique : trois lignes propres, plus jamais une colonne de lettres */ .gs-store-link{flex-direction:column;align-items:stretch!important;gap:9px;padding:14px!important} .gs-store-link__left{justify-content:flex-start} .gs-store-link__url{font-size:14px!important;padding:9px 12px;border-radius:10px; background:var(--bg-secondary)!important;border:1px solid var(--border)!important;display:block} .gs-store-link .gs-btn--copy{width:100%;justify-content:center} /* les cartes produit : une par ligne, pas de grille qui pousse la page */ .gs-grid,.gs-products__grid{grid-template-columns:1fr!important} /* aucun texte sous 12,5 px : le prix n'est pas une mention légale */ .gs-card__price{font-size:17px!important} .gs-card__meta,.gs-badge{font-size:12.5px!important} /* les fenêtres modales tiennent dans l'écran */ .gstore-modal,.gsm-v2-modal{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important; max-height:88dvh!important;overflow-y:auto} } /* ══════════════════════════════════════════════════════════════════════════════ 13. CE QUE L'ÉCRAN A MONTRÉ (lecture des captures, 05/09) Les pastilles d'icônes et le bouton « Copier » étaient restés violet/rose : les seules taches hors charte de la page. Et le nom « Giri Store » s'affichait DEUX fois sur téléphone (barre du haut + en-tête) — sur 390 px, c'est une ligne volée pour rien. ══════════════════════════════════════════════════════════════════════════ */ .gs-kpi__icon-wrap,.gs-header__icon-wrap,.gs-empty__icon,.gs-store-link__icon, .gs-kpi--products::before,.gs-kpi--published::before,.gs-kpi--sales::before,.gs-kpi--revenue::before{ background:var(--gold-soft)!important;background-image:none!important; border:1px solid var(--border)!important;color:var(--gold)!important; box-shadow:none!important;border-radius:13px!important} .gs-btn--copy{ background:var(--bg-secondary)!important;background-image:none!important; border:1px solid var(--border)!important;color:var(--gold)!important; border-radius:100px!important;font-weight:600!important;box-shadow:none!important} .gs-btn--copy:hover{background:var(--gold-soft)!important;border-color:var(--border-strong)!important} .gs-btn--copy.copied{background:var(--success)!important;color:#fff!important;border-color:var(--success)!important} @media (max-width:600px){ /* le nom est deja dans la barre du haut : l'en-tete garde la phrase, pas le titre */ .gs-header__title{display:none!important} .gs-header__sub{font-size:14px!important;color:var(--muted)!important;margin:0!important} .gs-header__icon-wrap{width:44px!important;height:44px!important;flex:0 0 44px!important; display:flex;align-items:center;justify-content:center;font-size:21px} .gs-kpi__icon-wrap{width:38px!important;height:38px!important;flex:0 0 38px!important; display:flex;align-items:center;justify-content:center;font-size:18px} } /* ══════════════════════════════════════════════════════════════════════════════ 14. LE TABLEAU DE BORD, LA POIGNÉE, ET LA FICHE PRODUIT · 2026-09-05 Demandes de Maha : les chiffres d'abord (c'est un tableau de bord, pas un formulaire) ; une poignée d'ordre qu'on comprend AVANT de l'essayer ; et un « Enregistrer » qui ne sort plus du cadre sur téléphone. ══════════════════════════════════════════════════════════════════════════ */ /* ── 14.1 La barre des produits ───────────────────────────────────────────── */ .gs-products__header{display:flex;align-items:center;justify-content:space-between; gap:14px;flex-wrap:wrap;margin-bottom:14px} .gs-products__titre-bloc{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap} .gs-products__count{color:var(--muted)!important;font-size:13.5px} .gs-products__ajout{flex:0 0 auto;white-space:nowrap} /* ── 14.2 La poignée d'ordre — elle se comprend sans l'essayer ────────────── */ .gs-card__drag-handle{ display:inline-flex!important;align-items:center;gap:8px; padding:6px 12px 6px 9px;border-radius:100px;cursor:grab; background:var(--bg-secondary)!important;border:1px solid var(--border)!important; color:var(--muted)!important;font-family:var(--sans);font-size:12px;font-weight:600; letter-spacing:.02em;user-select:none;transition:background .16s,border-color .16s,color .16s; width:auto!important;height:auto!important;text-indent:0!important} .gs-card__drag-handle:hover{background:var(--gold-soft)!important; border-color:var(--border-strong)!important;color:var(--gold)!important} .gs-card__drag-handle:active{cursor:grabbing;transform:scale(.97)} /* les six points : la marque universelle du « ça se déplace » */ .gs-card__drag-grip{display:block;width:10px;height:14px;flex:0 0 10px; background-image:radial-gradient(currentColor 1.35px,transparent 1.45px); background-size:5px 5px;background-position:0 1px;opacity:.75} .gs-card__drag-mot{white-space:nowrap} .gs-card--drag-over{outline:2px dashed var(--gold)!important;outline-offset:3px; background:var(--gold-soft)!important} /* ── 14.3 La fiche produit — le pied reste DANS le cadre ──────────────────── */ .gstore-modal{display:flex!important;flex-direction:column!important; max-height:min(88dvh,900px)!important;overflow:hidden!important} .gstore-modal__header{flex:0 0 auto} .gstore-modal__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0} .gstore-modal__footer{flex:0 0 auto;position:sticky;bottom:0;z-index:5; display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap; padding:14px 18px calc(14px + env(safe-area-inset-bottom))!important; background:var(--carte)!important;border-top:1px solid var(--border)!important; box-shadow:0 -8px 20px rgba(0,0,0,.10)} @media (max-width:600px){ /* les chiffres ouvrent la page : ils passent devant tout le reste */ .gs-kpi-row{margin-top:0!important} .gs-products__header{gap:10px} .gs-products__ajout{width:100%;justify-content:center} .gs-card__drag-handle{padding:7px 14px 7px 11px;font-size:12.5px} /* la fiche produit tient dans l'écran, et son pied est toujours atteignable */ .gstore-modal{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important; max-height:92dvh!important;border-radius:18px!important;margin:0 auto} .gstore-modal__body{padding-left:15px!important;padding-right:15px!important} .gstore-modal__footer{padding:12px 15px calc(12px + env(safe-area-inset-bottom))!important} .gstore-modal__footer .gs-btn{flex:1 1 46%;justify-content:center;min-height:46px} .gstore-modal__footer .gs-btn--primary{flex:1 1 100%;order:-1} /* aucun champ ne pousse la fenêtre hors de l'écran */ .gstore-modal input,.gstore-modal select,.gstore-modal textarea, .gstore-modal .gs-input{max-width:100%!important;width:100%!important} } /* ══════════════════════════════════════════════════════════════════════════════ 15. LA CAISSE — le moment signature du tableau de bord · 2026-09-05 ────────────────────────────────────────────────────────────────────────────── ⛔ Faute corrigée ici (studio-exception, loi 1 et loi 5) : quatre cases rigoureusement identiques, donc AUCUNE ne dominait. On ouvrait son tableau de bord sans savoir où poser l'œil. L'argent encaissé devient un OBJET : serif, grande échelle, filet d'or, marbre. Les trois autres chiffres redeviennent des repères — plus petits, assumés comme secondaires. ══════════════════════════════════════════════════════════════════════════ */ .gs-caisse{ position:relative;display:flex;flex-direction:column;align-items:center;text-align:center; gap:6px;padding:38px 26px 32px;margin:0 0 16px;border-radius:20px;overflow:hidden; background:var(--carte)!important;border:1px solid var(--border-strong)!important; box-shadow:var(--ombre)!important} /* le filet d'or : un seul trait, en haut — la rareté du geste, pas son accumulation */ .gs-caisse__filet{position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent,var(--gold-light),var(--gold),var(--gold-light),transparent)} .gs-caisse__label{font-family:var(--sans);font-size:12.5px;font-weight:600; letter-spacing:.19em;text-transform:uppercase;color:var(--muted)!important} .gs-caisse__montant{ font-family:var(--serif)!important;font-weight:500;line-height:1; font-size:clamp(44px,11vw,72px); color:var(--text)!important; font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1; overflow-wrap:anywhere} html[data-theme="dark"] .gs-caisse__montant{color:#f3dc9a!important; text-shadow:0 0 26px rgba(240,217,140,.16)} .gs-caisse__sous{font-family:var(--sans);font-size:14.5px;color:var(--muted)!important} /* les satellites : trois repères, plus petits, en retrait — ils ne rivalisent pas */ .gs-kpi-row{display:grid!important;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px} .gs-kpi{display:flex;align-items:center;gap:11px;padding:15px 16px!important;border-radius:15px} .gs-kpi__value{font-family:var(--serif)!important;font-size:26px!important;line-height:1; color:var(--text)!important} .gs-kpi__label{font-size:12.5px!important;letter-spacing:.1em;text-transform:uppercase; color:var(--muted)!important} /* ── 15.1 Plus aucun texte sous 12,5 px (relevé à l'écran) ────────────────── */ .gs-store-link__label,.gs-btn--copy,.gs-uni-btn,.gs-card__meta,.gs-badge, .gs-products__count,.gs-hint,.gs-video-hint,.gs-label,.gs-section-label, a[href],.gs-footer,.gs-footer *{font-size:12.5px!important} .gs-caisse__sous,.gs-header__sub{font-size:14.5px!important} .gs-footer,.gs-footer *{font-size:12.5px!important;letter-spacing:.14em} @media (max-width:600px){ .gs-caisse{padding:30px 18px 26px;border-radius:17px;margin-bottom:12px} .gs-caisse__label{font-size:12.5px!important;letter-spacing:.15em} .gs-caisse__montant{font-size:clamp(40px,13vw,58px)} /* trois satellites sur une ligne tiennent en 390 px : on les compacte, on ne les empile pas */ .gs-kpi-row{grid-template-columns:repeat(3,1fr)!important;gap:8px!important} .gs-kpi{flex-direction:column;gap:5px;text-align:center;padding:13px 7px!important} .gs-kpi__icon-wrap{width:32px!important;height:32px!important;flex:0 0 32px!important;font-size:16px} .gs-kpi__value{font-size:22px!important} .gs-kpi__label{font-size:12.5px!important;letter-spacing:.05em} } /* le mot de la poignee restait a 12 px sur grand ecran : plus aucun texte sous 12,5 */ .gs-card__drag-handle,.gs-card__drag-mot{font-size:12.5px!important} /* ══════════════════════════════════════════════════════════════════════════════ 16. CE QUE L'ŒIL A VU (auto-procès, 05/09) — trois fautes réelles ══════════════════════════════════════════════════════════════════════════ */ /* 16.1 ⛔ LA POIGNÉE ÉTAIT INVISIBLE. D'origine : position:absolute, opacity:0, révélée au SURVOL. Sur un téléphone il n'y a pas de survol : elle n'existait tout simplement pas — d'où « on ne comprend pas à quoi ça sert ». Elle rentre dans le flux, en haut de la carte, visible en permanence, et elle se nomme. */ .gs-card__drag-handle{ position:static!important;opacity:1!important; align-self:flex-start;margin:11px 0 0 11px; backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:auto!important} .gs-card:hover .gs-card__drag-handle{opacity:1!important} /* 16.2 L'en-tête ne portait plus rien sur téléphone (titre masqué, gestes dans le tiroir) : une carte vide qui volait un écran de haut. On la retire là-bas. */ @media (max-width:600px){ .gs-header{display:none!important} } /* 16.3 Le filtre actif restait violet : la seule couleur hors charte qui restait. */ .gs-uni-btn{background:var(--bg-secondary)!important;border:1px solid var(--border)!important; color:var(--muted)!important;border-radius:100px!important;font-family:var(--sans)!important; font-size:12.5px!important;padding:8px 16px!important} .gs-uni-btn:hover{background:var(--gold-soft)!important;color:var(--gold)!important} .gs-uni-btn--active{background:var(--gold-soft)!important;border-color:var(--border-strong)!important; color:var(--gold)!important;font-weight:700!important} .gs-universe-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} /* 16.4 La carte produit prend la matière de la maison, et son texte respire. */ .gs-card{overflow:hidden} .gs-card__body,.gs-card__content{padding:15px 16px 17px!important} .gs-card__title{font-family:var(--serif)!important;font-size:19px!important;color:var(--text)!important} .gs-card:hover{border-color:var(--border-strong)!important; box-shadow:0 16px 40px rgba(120,90,30,.16)!important} html[data-theme="dark"] .gs-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.5)!important} /* ══════════════════════════════════════════════════════════════════════════════ 17. LA FICHE PRODUIT — l'intérieur · 2026-09-05 ══════════════════════════════════════════════════════════════════════════ */ /* 17.1 La poignée : les six points suffisent. Le mot reste pour les lecteurs d'écran. */ .gs-card__drag-mot{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .gs-card__drag-handle{padding:8px 10px!important;gap:0!important;border-radius:11px!important} .gs-card__drag-grip{width:12px;height:16px;flex:0 0 12px;background-size:6px 6px;opacity:.85} /* 17.2 L'intérieur : des sections qui respirent, une seule voix typographique */ .gstore-modal__header{padding:22px 24px 16px!important;border-bottom:1px solid var(--border)!important} .gstore-modal__header h2{font-family:var(--serif)!important;font-size:27px!important; font-weight:500!important;color:var(--text)!important;margin:0!important} .gstore-modal__body{padding:20px 24px 24px!important;display:flex;flex-direction:column;gap:18px} .gstore-modal .gs-form-group{margin:0!important;display:flex;flex-direction:column;gap:7px} .gstore-modal .gs-label,.gstore-modal label:not(.gs-publier__mots):not(.gs-publier__piste){ font-family:var(--sans)!important;font-size:12.5px!important;font-weight:700!important; letter-spacing:.11em;text-transform:uppercase;color:var(--muted)!important} .gstore-modal .gs-input,.gstore-modal input:not([type=checkbox]),.gstore-modal textarea,.gstore-modal select{ padding:13px 15px!important;font-size:15.5px!important;border-radius:12px!important; background:var(--bg-hover)!important;border:1px solid var(--border)!important;color:var(--text)!important} .gstore-modal .gs-hint{font-size:12.5px!important;color:var(--muted-2)!important} /* les zones de dépôt : un pointillé d'or, plus le bleu générique */ .gstore-modal .gs-upload-zone{background:var(--gold-soft)!important; border:1.5px dashed var(--border-strong)!important;border-radius:14px!important; padding:20px!important;text-align:center} .gstore-modal .gs-upload-zone a{color:var(--gold)!important;font-weight:700} /* 17.3 « Publier immédiatement » — une décision, pas un champ au libellé vide */ .gs-publier{display:flex;align-items:center;gap:16px;margin-top:2px; padding:16px 18px;border-radius:16px; background:var(--gold-soft)!important;border:1px solid var(--border)!important} .gs-publier__mots{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;cursor:pointer} .gs-publier__titre{font-family:var(--sans)!important;font-size:15.5px!important;font-weight:700!important; letter-spacing:0!important;text-transform:none!important;color:var(--text)!important} .gs-publier__note{font-size:12.5px!important;font-weight:400!important;letter-spacing:0!important; text-transform:none!important;color:var(--muted)!important} /* la case native est cachée mais reste la source de vérité (le JS lit .checked) */ .gs-publier__bascule{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .gs-publier__piste{position:relative;flex:0 0 56px;width:56px;height:31px;border-radius:100px; cursor:pointer;background:var(--bg-tertiary)!important; border:1px solid var(--border)!important;transition:background .2s,border-color .2s} .gs-publier__piste::after{content:'';position:absolute;top:3px;left:3px;width:23px;height:23px; border-radius:50%;background:linear-gradient(180deg,#fffdf6,#e6dcc6); box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .2s} .gs-publier__bascule:checked + .gs-publier__piste{ background:linear-gradient(180deg,#f0d78f,#c9a144)!important;border-color:rgba(122,90,16,.6)!important} .gs-publier__bascule:checked + .gs-publier__piste::after{transform:translateX(25px)} .gs-publier__bascule:focus-visible + .gs-publier__piste{box-shadow:0 0 0 3px var(--gold-soft)} @media (max-width:600px){ .gstore-modal__header{padding:18px 16px 13px!important} .gstore-modal__header h2{font-size:23px!important} .gstore-modal__body{padding:16px 16px 20px!important;gap:16px} .gs-publier{padding:14px 15px;gap:12px} } /* les boutons de periode d'Analytics : creux dans la pierre, actif en or */ .gs-analytics-period{background:var(--bg-secondary)!important;border:1px solid var(--border)!important; color:var(--muted)!important;border-radius:100px!important;font-family:var(--sans)!important; font-size:12.5px!important;font-weight:600!important;padding:9px 17px!important} .gs-analytics-period:hover{background:var(--gold-soft)!important;color:var(--gold)!important} .gs-analytics-period[data-actif="1"],.gs-analytics-period.actif{ background:var(--gold-soft)!important;border-color:var(--border-strong)!important;color:var(--gold)!important} /* ══════════════════════════════════════════════════════════════════════════════ 18. HARMONISATION GÉNÉRALE — tout le tableau de bord · 2026-09-05 ────────────────────────────────────────────────────────────────────────────── Inventaire fait à la source : 48 × #6366f1, 18 × #8b5cf6, 8 × #818cf8, 8 × #a5b4fc (le violet générique), 15 × #10b981 + 7 × #34d399 + 5 × #4ade80 (trois verts pour la même idée), 19 × #ef4444 + 4 × #f87171, 13 × #f59e0b, 4 × #ec4899 — écrits en dur, souvent en style inline, dans TOUTES les vues (Ventes, Analytics, Codes promo, Ma boutique, Pages légales, assistants). On ne garde qu'une grammaire : l'or pour l'accent, et TROIS couleurs de sens (succès, attente, erreur) reprises des variables de la charte. ══════════════════════════════════════════════════════════════════════════ */ /* ── 18.1 Toutes les familles de boutons parlent la même langue ───────────── */ .gs-btn{font-family:var(--sans)!important;font-weight:600!important;border-radius:100px!important; letter-spacing:.01em;transition:filter .16s,background .16s,border-color .16s,transform .12s} .gs-btn--sm{font-size:12.5px!important;padding:8px 15px!important} .gs-btn:active{transform:scale(.985)} .gs-btn--secondary,.gs-btn--edit{background:var(--bg-secondary)!important;background-image:none!important; border:1px solid var(--border)!important;color:var(--gold)!important;box-shadow:none!important} .gs-btn--secondary:hover,.gs-btn--edit:hover{background:var(--gold-soft)!important; border-color:var(--border-strong)!important} /* le geste grave garde sa gravité, mais dans notre rouge */ .gs-btn--trash,.gs-btn--danger{background:transparent!important;background-image:none!important; border:1px solid var(--err)!important;color:var(--err)!important;box-shadow:none!important} .gs-btn--trash:hover,.gs-btn--danger:hover{background:rgba(163,59,59,.10)!important} html[data-theme="dark"] :is(.gs-btn--trash,.gs-btn--danger):hover{background:rgba(96,32,26,.42)!important} /* ── 18.2 Le violet générique n'existe plus nulle part ────────────────────── */ [style*="#6366f1"],[style*="#8b5cf6"],[style*="#818cf8"],[style*="#7c5cff"],[style*="#a5b4fc"], [style*="#5865f2"],[style*="#ec4899"],[style*="rgba(99,102,241"],[style*="rgba(139,92,246"], [style*="rgba(129,140,248"]{color:var(--gold)!important;border-color:var(--border)!important} [style*="background:#6366f1"],[style*="background:var(--accent,#6366f1)"], [style*="background:linear-gradient(135deg,#6366f1"],[style*="background:linear-gradient(135deg,rgba(99,102,241"]{ background:linear-gradient(180deg,#fdf3cf 0%,#f0d78f 18%,#e0bd63 46%,#c9a144 72%,#e8cf8d 100%)!important; color:#3a2708!important;-webkit-text-fill-color:#3a2708!important;border-color:rgba(122,90,16,.6)!important} /* ── 18.3 Trois couleurs de sens, et trois seulement ──────────────────────── */ [style*="#10b981"],[style*="#34d399"],[style*="#4ade80"],[style*="#22c55e"],[style*="#86efac"]{ color:var(--success)!important} [style*="#ef4444"],[style*="#f87171"],[style*="#e74c3c"],[style*="#e53e3e"],[style*="#fca5a5"]{ color:var(--err)!important} [style*="#f59e0b"],[style*="#fbbf24"]{color:var(--warn)!important} /* ── 18.4 Les fonds sombres écrits en dur ne trouent plus le marbre ───────── */ [style*="#0a0a0f"],[style*="#1a1a2e"],[style*="#1a1828"],[style*="#1e1e2e"],[style*="#2a2840"], [style*="#2a2a3a"],[style*="#f0eff5"],[style*="#f8f7fc"],[style*="#fff8f0"],[style*="#e0e0e0"]{ color:var(--text)!important} /* ── 18.5 Les vues internes : mêmes cartes, mêmes titres, mêmes tableaux ──── */ .gs-stat-card,.gs-sales-card,.gs-analytics-card,.gs-coupon-card,.gsm-v2-section, .gs-legal-card,.gs-funnel,.gs-top-products{ background:var(--carte)!important;border:1px solid var(--border)!important; box-shadow:var(--ombre)!important;border-radius:16px!important;color:var(--text)!important} .gsm-v2-section-title,.gs-section-title,.gs-sales-title,.gs-analytics-title{ font-family:var(--serif)!important;font-size:21px!important;font-weight:500!important; color:var(--text)!important;letter-spacing:.2px} .gsm-v2-section-desc,.gs-section-sub{font-size:12.5px!important;color:var(--muted)!important} .gs-stat-card__value,.gs-analytics-value,.gs-funnel__value{ font-family:var(--serif)!important;font-size:27px!important;color:var(--text)!important; font-variant-numeric:lining-nums tabular-nums} .gs-stat-card__label,.gs-analytics-label{font-size:12.5px!important;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)!important} /* les tableaux (ventes, coupons) : lisibles, alignés, jamais zébrés de bleu */ .gs-table,table{width:100%;border-collapse:collapse} .gs-table th,table th{font-family:var(--sans)!important;font-size:12.5px!important;font-weight:700!important; letter-spacing:.09em;text-transform:uppercase;color:var(--muted)!important; text-align:left;padding:12px 14px!important;border-bottom:1px solid var(--border)!important; background:transparent!important} .gs-table td,table td{font-size:14.5px!important;color:var(--text)!important;padding:13px 14px!important; border-bottom:1px solid var(--border)!important;background:transparent!important} .gs-table tr:hover td,table tr:hover td{background:var(--gold-soft)!important} /* les pastilles d'état */ .gs-badge,.gs-status,.gs-pill{border-radius:100px!important;padding:5px 12px!important; font-size:12.5px!important;font-weight:700!important;letter-spacing:.02em; background:var(--gold-soft)!important;border:1px solid var(--border)!important;color:var(--gold)!important} .gs-badge--success,.gs-status--completed,.gs-status--paid{ background:rgba(47,107,69,.12)!important;border-color:var(--success)!important;color:var(--success)!important} .gs-badge--danger,.gs-status--failed,.gs-status--refunded{ background:rgba(163,59,59,.10)!important;border-color:var(--err)!important;color:var(--err)!important} .gs-badge--warn,.gs-status--pending,.gs-status--abandoned{ background:rgba(138,106,18,.12)!important;border-color:var(--warn)!important;color:var(--warn)!important} /* ── 18.6 Le vide se dit avec élégance ────────────────────────────────────── */ .gs-empty{padding:46px 26px!important;text-align:center;border-radius:18px!important} .gs-empty__icon{font-size:34px!important;display:inline-flex;width:64px;height:64px; align-items:center;justify-content:center;margin-bottom:14px} .gs-empty h3{font-family:var(--serif)!important;font-size:23px!important;font-weight:500!important; color:var(--text)!important;margin-bottom:8px} .gs-empty p{font-size:14.5px!important;color:var(--muted)!important;margin-bottom:18px} /* ── 18.7 Les fenêtres de réglages suivent la fiche produit ───────────────── */ .gsm-v2-modal{border-radius:20px!important} .gsm-v2-title{font-family:var(--serif)!important;font-size:25px!important;font-weight:500!important} .gsm-v2-settings-header{background:transparent!important;border-bottom:1px solid var(--border)!important} .gsm-v2-close{border-radius:50%!important;width:36px;height:36px} /* un bouton d'action principale ne se lit pas en taille de mention legale */ .gs-btn--primary,.gs-btn--cta,.gs-btn-login,#gs-forgot-submit{font-size:15px!important} .gs-btn--primary.gs-btn--sm,.gs-btn--cta.gs-btn--sm{font-size:13.5px!important} /* ══════════════════════════════════════════════════════════════════════════════ 19. PLUS DE TEXTURE — décision de Maha le 05/09 : « soyons plus simple » ────────────────────────────────────────────────────────────────────────────── Le marbre photographié (132 Ko, une image de fond fixe à repeindre à chaque scroll) quitte le dashboard. On garde la LUMIÈRE du marbre — un dégradé calme, ivoire le jour, pierre bleue la nuit — sans la matière. Uniquement ici : les pages de vente et l'espace affilié gardent leur texture. ══════════════════════════════════════════════════════════════════════════ */ html{background:#f2ece0!important;background-image:none!important} body::before{ background-image:none!important; background: radial-gradient(ellipse 70% 50% at 15% 0%,rgba(255,252,244,.95) 0%,transparent 60%), radial-gradient(ellipse 60% 45% at 88% 12%,rgba(232,192,120,.13) 0%,transparent 62%), linear-gradient(168deg,#f7f2e7 0%,#efe8da 46%,#e9e1d1 100%)!important} html[data-theme="dark"] html,html[data-theme="dark"]{background:#070c17!important} html[data-theme="dark"] body::before{ background-image:none!important; background: radial-gradient(ellipse 80% 55% at 50% -8%,rgba(240,217,140,.09) 0%,transparent 62%), linear-gradient(180deg,#0b1322 0%,#070c17 55%,#050910 100%)!important} /* le voile n'a plus de veines à adoucir : il disparaît */ body::after{background:none!important} /* les surfaces deviennent des aplats francs — un faux marbre en dégradé serait pire que pas de marbre du tout */ :root,html[data-theme="light"]{ --carte:linear-gradient(158deg,rgba(255,254,250,.96),rgba(252,248,240,.92)); --ombre:0 10px 26px rgba(120,90,30,.10)} html[data-theme="dark"]{ --carte:linear-gradient(158deg,rgba(24,37,62,.94),rgba(14,24,42,.96)); --ombre:0 12px 30px rgba(0,0,0,.42)} /* ── 20. LES VENTES EN CARTES SUR TÉLÉPHONE ────────────────────────────────── Cinq colonnes dans 390 px : le tableau défilait de côté et l'état de la vente restait hors de l'écran. Sous 700 px, une vente = une carte. */ @media (max-width:700px){ .gs-ventes,.gs-ventes tbody,.gs-ventes tr,.gs-ventes td{display:block!important;width:100%!important} .gs-ventes thead{display:none!important} .gs-ventes tr{margin:0 0 12px!important;padding:6px 4px 8px!important;border-radius:16px!important; background:var(--carte)!important;border:1px solid var(--border)!important;box-shadow:var(--ombre)!important} .gs-ventes td{display:flex!important;align-items:baseline;justify-content:space-between;gap:14px; padding:10px 15px!important;text-align:right!important;border:0!important; border-bottom:1px solid var(--border)!important;font-size:14.5px!important} .gs-ventes tr td:last-child{border-bottom:0!important} .gs-ventes td::before{content:attr(data-l);flex:0 0 auto;text-align:left;white-space:nowrap; font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)!important} .gs-ventes td > div{text-align:right} .gs-ventes__montant{font-family:var(--serif)!important;font-size:21px!important;color:var(--gold)!important} .gs-ventes tr:hover td{background:transparent!important} } /* ── 20.1 Ce que la carte de vente a montré (lecture d'écran) ───────────────── ⛔ `.gs-ventes td` (0,1,1) battait `.gs-ventes__montant` (0,1,0) : le montant restait à 14,5 px malgré son !important. La spécificité, pas l'insistance. */ @media (max-width:700px){ .gs-ventes td.gs-ventes__montant{font-family:var(--serif)!important;font-size:22px!important; color:var(--gold)!important;font-weight:500!important} /* nom et adresse l'un sous l'autre : l'email sortait du cadre */ .gs-ventes td[data-l="Cliente"]{align-items:flex-start!important} .gs-ventes td[data-l="Cliente"] > div{display:block;max-width:100%;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .gs-ventes td[data-l="Cliente"] > div:first-child{font-weight:700} .gs-ventes td[data-l="Cliente"] > div:last-child{font-size:12.5px;color:var(--muted)!important} .gs-ventes td[data-l="Cliente"]{flex-wrap:nowrap} .gs-ventes td[data-l="Cliente"]::before{align-self:flex-start;padding-top:2px} } /* le nom sur la ligne du libellé, l'adresse en dessous sur toute la largeur : côte à côte, les deux se tronquaient (« Nicol… » / « coupdepoucedezee@hotma… ») */ @media (max-width:700px){ .gs-ventes td[data-l="Cliente"]{flex-wrap:wrap!important} .gs-ventes td[data-l="Cliente"] > div:first-child{flex:1 1 auto!important;min-width:0} .gs-ventes td[data-l="Cliente"] > div:last-child{flex:1 1 100%!important;margin-top:3px} } /* ══════════════════════════════════════════════════════════════════════════════ 21. LES FENÊTRES — opaques, et la page dessous ne bouge plus · 2026-09-05 ⛔ Signalé par Maha : « la fenêtre Réglages est transparente, on ne peut pas lire, et on scrolle derrière sans voir ce qui se passe ». Deux fautes : une règle d'harmonisation trop large (corrigée ci-dessus) et l'absence de verrou de défilement. Une fenêtre modale fige la page qu'elle recouvre. ══════════════════════════════════════════════════════════════════════════ */ .gsm-v2-modal,.gstore-modal,.gs-modal{ background:var(--bg-2)!important;background-image:none!important; color:var(--text)!important;box-shadow:0 30px 80px rgba(0,0,0,.34)!important} :root .gsm-v2-modal,html[data-theme="light"] .gsm-v2-modal, :root .gstore-modal,html[data-theme="light"] .gstore-modal{background:#fdfaf3!important} html[data-theme="dark"] .gsm-v2-modal,html[data-theme="dark"] .gstore-modal{background:#0d1626!important} .gsm-v2-overlay,.gstore-modal-overlay,.gs-modal-overlay{ background:rgba(28,18,4,.62)!important;backdrop-filter:none!important} html[data-theme="dark"] :is(.gsm-v2-overlay,.gstore-modal-overlay,.gs-modal-overlay){ background:rgba(2,5,12,.76)!important} /* le verrou : tant qu'une fenêtre est ouverte, la page dessous ne défile plus */ body:has(.gsm-v2-overlay),body:has(.gstore-modal-overlay),body:has(.gs-modal-overlay){ overflow:hidden!important;touch-action:none} .gsm-v2-overlay,.gstore-modal-overlay,.gs-modal-overlay{overscroll-behavior:contain} /* ══════════════════════════════════════════════════════════════════════════════ 22. LES BOUTONS — trois familles, une seule main · 2026-09-05 Le lingot (ce qu'on veut voir faire), le creux d'or (les autres gestes), le grave (ce qui détruit). Rien d'autre. Le lingot n'est pas un aplat jaune : il a une arête claire en haut, un ventre chaud, une base plus dense, et il se soulève quand on le survole. ══════════════════════════════════════════════════════════════════════════ */ .gs-btn,.gs-btn-login,button.gs-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--sans)!important;font-weight:700!important;letter-spacing:.012em; border-radius:100px!important;cursor:pointer; min-height:44px; /* la cible du pouce, jamais moins */ transition:transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .18s,filter .16s,background .16s} /* ── LE LINGOT ────────────────────────────────────────────────────────────── */ .gs-btn--cta,.gs-btn--primary,.gs-btn-login,#gs-forgot-submit,.gs-cta,.gs-products__ajout{ background:linear-gradient(177deg, #fffaea 0%, #fbeec2 9%, #f2dc9c 26%, #e3c473 48%, #cfa74e 70%, #bd9038 86%, #e2c67f 100%)!important; background-image:linear-gradient(177deg, #fffaea 0%, #fbeec2 9%, #f2dc9c 26%, #e3c473 48%, #cfa74e 70%, #bd9038 86%, #e2c67f 100%)!important; color:#3a2708!important;-webkit-text-fill-color:#3a2708!important;text-shadow:none!important; border:1px solid rgba(120,88,14,.62)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.86), inset 0 -1px 0 rgba(120,88,14,.30), 0 1px 2px rgba(90,66,12,.20), 0 8px 20px rgba(150,112,28,.24)!important; padding:15px 30px!important;font-size:15.5px!important} .gs-btn--cta *,.gs-btn--primary *,.gs-btn-login *,.gs-products__ajout *{ color:#3a2708!important;-webkit-text-fill-color:#3a2708!important} :is(.gs-btn--cta,.gs-btn--primary,.gs-btn-login,.gs-products__ajout):hover{ transform:translateY(-1px);filter:brightness(1.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(120,88,14,.32), 0 2px 4px rgba(90,66,12,.20), 0 14px 30px rgba(150,112,28,.30)!important} :is(.gs-btn--cta,.gs-btn--primary,.gs-btn-login,.gs-products__ajout):active{ transform:translateY(1px); box-shadow:inset 0 2px 5px rgba(120,88,14,.34),0 1px 2px rgba(90,66,12,.18)!important} :is(.gs-btn--cta,.gs-btn--primary,.gs-btn-login):disabled{ filter:grayscale(.4);opacity:.65;transform:none;cursor:not-allowed} /* « Nouveau produit » est le geste qui rapporte : il est le plus haut de la page */ .gs-products__ajout{padding:16px 32px!important;font-size:16px!important;letter-spacing:.015em} .gs-btn--cta .gs-btn__icon,.gs-products__ajout .gs-btn__icon{ font-size:18px;font-weight:400;line-height:1;opacity:.9} /* ── LE CREUX D'OR ────────────────────────────────────────────────────────── */ .gs-btn--ghost,.gs-btn--ghost-premium,.gs-btn--secondary,.gs-btn--edit,.gs-btn--copy, .gs-btn-logout,.gs-uni-btn,.gs-tab,.gs-type-btn,.gs-analytics-period,#gs-quick-settings-btn{ background:linear-gradient(178deg,rgba(255,253,246,.72),rgba(246,238,222,.52))!important; background-image:linear-gradient(178deg,rgba(255,253,246,.72),rgba(246,238,222,.52))!important; border:1px solid var(--border)!important;color:var(--gold-dark)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 1px 2px rgba(120,90,30,.07)!important; padding:12px 22px!important;font-size:14px!important} html[data-theme="dark"] :is(.gs-btn--ghost,.gs-btn--ghost-premium,.gs-btn--secondary,.gs-btn--edit, .gs-btn--copy,.gs-btn-logout,.gs-uni-btn,.gs-tab,.gs-type-btn,.gs-analytics-period,#gs-quick-settings-btn){ background:linear-gradient(178deg,rgba(255,255,255,.085),rgba(255,255,255,.035))!important; background-image:linear-gradient(178deg,rgba(255,255,255,.085),rgba(255,255,255,.035))!important; color:var(--gold)!important; box-shadow:inset 0 1px 0 rgba(255,240,200,.10)!important} :is(.gs-btn--ghost,.gs-btn--ghost-premium,.gs-btn--secondary,.gs-btn--edit,.gs-btn--copy, .gs-btn-logout,.gs-uni-btn,.gs-tab,.gs-type-btn,.gs-analytics-period):hover{ border-color:var(--border-strong)!important;color:var(--gold)!important;transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 6px 16px rgba(150,112,28,.14)!important} :is(.gs-uni-btn--active,.gs-tab.active,.gs-type-btn.active,.gs-analytics-period.actif){ background:linear-gradient(178deg,rgba(240,215,143,.34),rgba(201,161,68,.20))!important; border-color:var(--border-strong)!important;color:var(--gold-dark)!important} html[data-theme="dark"] :is(.gs-uni-btn--active,.gs-tab.active,.gs-type-btn.active,.gs-analytics-period.actif){ color:#f3dc9a!important} .gs-btn--sm{padding:9px 17px!important;font-size:13px!important;min-height:38px} /* ── LE GRAVE ─────────────────────────────────────────────────────────────── */ .gs-btn--trash,.gs-btn--danger{ background:transparent!important;background-image:none!important; border:1px solid rgba(163,59,59,.45)!important;color:var(--err)!important; box-shadow:none!important;padding:12px 20px!important;font-size:14px!important} .gs-btn--trash:hover,.gs-btn--danger:hover{ background:rgba(163,59,59,.09)!important;border-color:var(--err)!important;transform:none} /* le rond du pouce (thème, fermer) garde sa forme, pas sa fadeur */ .gs-theme-switch,.gs-tiroir__fermer,.gsm-v2-close{ background:linear-gradient(178deg,rgba(255,253,246,.72),rgba(246,238,222,.52))!important; border:1px solid var(--border)!important;color:var(--gold-dark)!important;min-height:0} html[data-theme="dark"] :is(.gs-theme-switch,.gs-tiroir__fermer,.gsm-v2-close){ background:rgba(255,255,255,.07)!important;color:var(--gold)!important} /* ⛔ Le verrou posé sur `body` seul ne tenait pas : c'est l'élément racine qui défile. Mesuré : la page glissait encore de 900 px sous la fenêtre Réglages. */ html:has(.gsm-v2-overlay),html:has(.gstore-modal-overlay),html:has(.gs-modal-overlay){ overflow:hidden!important;height:100%} body:has(.gsm-v2-overlay),body:has(.gstore-modal-overlay),body:has(.gs-modal-overlay){ overflow:hidden!important;height:100%;position:relative}