/* ============================================================ SunMates — calque « Lite » (version épurée / grand public) — body.sm-lite Virage 17/06 (Maxime) : la Lite est voulue LÉGÈRE, NEUTRE & BASIQUE — l'inverse du look « joaillerie sunset » riche. Donc : zéro dégradé, zéro glass/blur, zéro halo/glow, zéro tuile « joyau ». UN seul accent = le CORAIL. Tout le reste en neutre (surface/encre/ligne via tokens) → s'adapte au thème (jour clair / nuit prune) tout seul. Inerte tant que n'a pas la classe sm-lite. Lié dans index.html / preview.html. ⚠️ TROIS responsabilités, volontairement séparées (cf. AUDIT_APP_v529.md) : A) FEATURES masquées en Lite (ce que le public ne voit pas) B) DA CALME (moins de mouvement / d'effets) C) GARDE-FOUS sémantiques (le danger/SOS n'est JAMAIS neutralisé) ============================================================ */ /* ============================================================ A) FEATURES MASQUÉES EN LITE ============================================================ */ /* Tout ce qui est expérimental (double-sécurité du gating CSS, en plus du JS betaOn). */ body.sm-lite [data-beta], body.sm-lite .beta-only { display: none !important; } /* Surfaces « jeu vidéo » non marquées data-beta mais hors périmètre public : badges secrets, easter eggs, effets rétro. (À recenser comme « caché en Lite ».) */ body.sm-lite .badge.secret, body.sm-lite .easter, body.sm-lite .retro-fx { display: none !important; } /* ============================================================ B) DA CALME (on calme le mouvement et les effets) ============================================================ */ /* 1) Couper le mouvement décoratif et raccourcir les transitions (sobre & accessible). */ body.sm-lite .float, body.sm-lite .pulse, body.sm-lite .shine, body.sm-lite [class*="anim-"], body.sm-lite .confetti { animation: none !important; } body.sm-lite * { transition-duration: .16s !important; } /* 1bis) Boucles décoratives nommées encore actives au repos (cf. audit perf) : flottement du logo-badge, pulsation de l'emblème de quête. ON LES CALME. ⚠️ On ne touche PAS : les skeletons de chargement (feedback légitime), ni #navSecu / .su-sos (pulsation SÉCURITÉ, voir section C). */ body.sm-lite .logo-badge, body.sm-lite .nq-emblem { animation: none !important; } /* 2) Alléger les effets « émaillés » trop chargés (on GARDE les couleurs). */ body.sm-lite .smgem::after, body.sm-lite .cic::after, body.sm-lite [class*="sheen"] { opacity: .5 !important; } /* 3) Lisibilité : arrondis HOMOGÈNES (v534) — cartes = --r-jewel (18px), tuiles = 14px (exception assumée). */ body.sm-lite .card, body.sm-lite .pcard, body.sm-lite .gcard { border-radius: var(--r-jewel) !important; } body.sm-lite .tile { border-radius: 14px !important; } body.sm-lite .section, body.sm-lite .stack > * + * { margin-top: 14px; } /* 4) Navigation simplifiée : libellés toujours visibles sous les icônes. */ body.sm-lite .tabbar .lbl, body.sm-lite .bottomnav .lbl { display: block !important; font-weight: 700; } /* ============================================================ C) GARDE-FOUS SÉMANTIQUES — ne JAMAIS neutraliser le danger ============================================================ */ /* Le rouge danger/SOS et la pulsation d'alerte restent intacts, même en Lite. */ body.sm-lite .su-call, body.sm-lite .su-sos, body.sm-lite .act-block, body.sm-lite .danger, body.sm-lite #navSecu, body.sm-lite #navSecuLite { filter: none !important; animation-play-state: running !important; } /* ============================================================ FONDATIONS — design-system Lite PLAT / NEUTRE, scopé body.sm-lite Virage esthétique 17/06 : zéro dégradé / glass / halo / glow / tuile-joyau. UN seul accent = le CORAIL (var(--accent), qui reste corail ET lisible en jour comme en nuit prune). Tout le reste en neutre (surface/encre/ligne via tokens) → s'adapte au thème sans jamais toucher le mode complet. Classes préfixées .sml-* = briques Lite à composer dans les écrans. Réf : LITE_DESIGN_INSIGHTS.md · project-sunmates-mission-tout (virage esthétique) ============================================================ */ /* F1/F2 — Échelles nommées + tokens APLATIS (le dégradé devient l'accent plat) */ body.sm-lite { --fs-display: 2.375rem; /* 38 */ --fs-h1: 1.75rem; /* 28 */ --fs-h2: 1.25rem; /* 20 */ --fs-title: 1rem; /* 16 */ --fs-body: .9375rem; /* 15 */ --fs-label: .8125rem; /* 13 */ --stack-sm: 8px; --stack-md: 16px; --stack-lg: 32px; --r-jewel: 18px; /* arrondi BASIQUE (était 26px « joyau ») */ --accent: #FF5A4D !important; /* CORAIL VIF FIXE = SEUL accent de la Lite (décision Maxime 17/06). !important pour battre l'inline du loader DA (sm-da-on) qui dérive l'accent. Fixé en Lite quel que soit le preset. --accent-ink (texte accent accessible) reste géré par le thème → lisibilité préservée. */ --grad-sunset: var(--accent); /* APLATI : corail #FF5A4D solide (boutons, actifs, liens) */ --grad-hero: var(--card); /* APLATI : plus de hero coloré → simple surface neutre */ } /* F3a — Kicker : libellé de section en petites capitales (neutre) */ .sml-kicker { display:inline-flex; align-items:center; gap:.4rem; font-family:Manrope,system-ui,sans-serif; font-size:var(--fs-label); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 .55rem; } /* F3b — Grand titre serif en ENCRE PLEINE (plus de texte en dégradé — banni + neutralisé) */ .sml-title-grad { font-family:Fraunces,Georgia,serif; font-weight:900; line-height:1.1; font-size:var(--fs-display); color:var(--ink); margin:0; } /* F3c — Panneau : surface plate + filet (plus de verre / blur / ombre portée) */ .sml-glass { background:var(--card); border:1px solid var(--line); border-radius:var(--r-jewel); box-shadow:none; } /* F3d — En-tête d'écran : surface NEUTRE plate (plus de bandeau corail, halo doré ni glow) */ .sml-hero { position:relative; border-radius:var(--r-jewel); padding:1.4rem 1.25rem; background:var(--card); border:1px solid var(--line); color:var(--ink); box-shadow:none; } .sml-hero::before { content:none; } /* halo doré retiré */ .sml-hero > * { position:relative; z-index:1; } .sml-hero .sml-eyebrow { font-size:var(--fs-label); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .sml-hero .sml-hero-title { font-family:Fraunces,Georgia,serif; font-weight:900; font-size:var(--fs-h1); margin:.15rem 0 .3rem; color:var(--ink); } .sml-hstats { display:flex; gap:.5rem; margin-top:.75rem; } .sml-hstat { flex:1; background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:.5rem .6rem; text-align:center; } .sml-hstat b { display:block; font-family:Fraunces,serif; font-size:1.1rem; font-variant-numeric:tabular-nums; color:var(--ink); } .sml-hstat span { font-size:.7rem; color:var(--muted); font-weight:700; } /* F3e — Carte liste compacte (déjà neutre) */ .sml-minicard { display:flex; align-items:center; gap:.8rem; background:var(--card); border:1px solid var(--line); border-radius:var(--r-jewel); padding:.7rem .8rem; transition:transform .12s ease; } .sml-minicard:active { transform:scale(.985); } .sml-mc-media { width:56px; height:56px; border-radius:14px; flex:0 0 auto; object-fit:cover; background:var(--cream); } .sml-mc-body { flex:1; min-width:0; } .sml-mc-title { font-weight:800; font-size:var(--fs-title); color:var(--ink); } .sml-mc-meta { color:var(--muted); font-size:.78rem; } .sml-mc-arrow { color:var(--muted); font-size:1.1rem; flex:0 0 auto; } /* F3f — Bouton primaire : CORAIL PLEIN (plus d'inset-highlight ni de glow) */ .sml-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%; border:0; cursor:pointer; font-family:Manrope,system-ui,sans-serif; font-weight:800; font-size:var(--fs-title); color:#fff; padding:.9rem 1.1rem; border-radius:999px; background:var(--accent); box-shadow:none; transition:transform .12s ease; } .sml-btn:active { transform:scale(.96); } .sml-btn.sml-btn-ghost { background:transparent; color:var(--accent); box-shadow:none; border:1.5px solid var(--line); } /* F3g — Pastille icône : NEUTRE monochrome (plus de dégradé ni de sheen) */ .sml-icobox { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:1.3rem; background:var(--cream); border:1px solid var(--line); color:var(--ink); } .sml-icobox::after { content:none; } /* F3h — Chip uniforme (actif = corail plein) */ .sml-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .8rem; border-radius:999px; font-weight:700; font-size:.8rem; border:1px solid var(--line); background:var(--card); color:var(--text); cursor:pointer; } .sml-chip.on { background:var(--accent); color:#fff; border-color:transparent; } /* F3i — État vide éditorial (neutre) */ .sml-empty { text-align:center; padding:2rem 1rem; color:var(--muted); } .sml-empty-ic { font-size:2rem; } .sml-empty-t { font-weight:800; color:var(--ink); margin:.4rem 0 .2rem; } /* F5 — Statut « en ligne / dispo » : point CORAIL plat (plus d'or ni de halo) */ .sml-dot-on { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); } /* Section Lite : pile verticale aérée (rythme éditorial) */ .sml-section + .sml-section { margin-top:var(--stack-lg); } /* ============================================================ ÉCRAN SÉCURITÉ — habillage Lite PLAT (body.sm-lite) Markup + IDs + handlers INCHANGÉS (SOS/partage/ICE fonctionnent à l'identique → contrat anti-régression). On ne fait que ré-habiller via CSS scopé. Complet jamais touché. ============================================================ */ /* Titre d'écran en grand serif, encre pleine */ body.sm-lite #secuHome > h1 { font-family:Fraunces,Georgia,serif; font-size:var(--fs-display); font-weight:900; color:var(--ink); margin:0 0 .15rem; } /* Carte principale « Besoin d'aide ? » → surface NEUTRE plate (rassure sans bandeau coloré ni halo) */ body.sm-lite #secuHome > .card:first-of-type { background:var(--card) !important; color:var(--ink); border:1px solid var(--line) !important; position:relative; border-radius:var(--r-jewel) !important; box-shadow:none !important; } body.sm-lite #secuHome > .card:first-of-type::before { content:none !important; } /* halo doré retiré */ body.sm-lite #secuHome > .card:first-of-type h2 { color:var(--ink) !important; font-family:Fraunces,Georgia,serif; } body.sm-lite #secuHome > .card:first-of-type .muted { color:var(--muted) !important; } /* CTA d'entrée : bouton CORAIL plein (le VRAI SOS rouge reste dans « Besoin d'aide ») */ body.sm-lite #secuHome #needHelpBtn { background:var(--accent) !important; color:#fff !important; font-weight:800; box-shadow:none !important; } /* Cartes secondaires : arrondi homogène */ body.sm-lite #secuHome #safetyTip, body.sm-lite #secuHome #safetyCheckCard { border-radius:var(--r-jewel) !important; } /* En-tête « Accès rapides » → kicker petites capitales */ body.sm-lite #secuHome .section-head h3 { font-size:var(--fs-label); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } /* Tuiles d'accès rapide → finition nette + retour tactile */ body.sm-lite #secuHome .grid2 .tile { border-radius:14px; transition:transform .12s ease; } body.sm-lite #secuHome .grid2 .tile:active { transform:scale(.97); } /* ----- Sous-vue « Besoin d'aide » (#secuHelp) : même habillage plat ----- */ body.sm-lite #secuHelp > h1 { font-family:Fraunces,Georgia,serif; font-size:var(--fs-h1); font-weight:900; color:var(--ink); margin:.2rem 0 .6rem; } /* Cartes en arrondi homogène */ body.sm-lite #secuHelp .card { border-radius:var(--r-jewel) !important; } /* Carte d'urgence : « 112 » en gros chiffres tabulaires. ⚠️ DANGER CONSERVÉ : le halo ROUGE d'alerte du SOS reste (garde-fou sémantique, jamais neutralisé). */ body.sm-lite #secuHelp .su-call b { font-size:1.18em; font-variant-numeric:tabular-nums; letter-spacing:.02em; } body.sm-lite #secuHelp .su-sos { box-shadow:0 0 0 5px rgba(240,56,78,.14), 0 10px 24px rgba(240,56,78,.26); } body.sm-lite #secuHelp .su-btn { transition:transform .12s ease; } body.sm-lite #secuHelp .su-btn:active { transform:scale(.97); } /* En-têtes de SECTION → kickers petites capitales (clarté éditoriale) */ body.sm-lite #secuHelp .section-head h3 { font-size:var(--fs-label); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } /* Tuiles « aide autour de moi » → retour tactile + arrondi */ body.sm-lite #secuHelp .grid2 .tile { border-radius:14px; transition:transform .12s ease; } body.sm-lite #secuHelp .grid2 .tile:active { transform:scale(.97); } /* Lignes d'accès (qrow) → retour tactile + arrondi */ body.sm-lite #secuHelp .qrow { transition:transform .12s ease; border-radius:14px; } body.sm-lite #secuHelp .qrow:active { transform:scale(.99); } /* ============================================================ ÉCRAN ACCUEIL — habillage Lite PLAT (body.sm-lite). Markup/handlers inchangés. ============================================================ */ /* Titre « Bonjour » en grand serif, encre pleine */ body.sm-lite #homeHello { font-family:Fraunces,Georgia,serif; font-size:var(--fs-display); font-weight:900; line-height:1.04; color:var(--ink); } /* Segmented control Voyage / Maison → pilule, actif corail plein (masqué en MVP, gardé au cas où) */ body.sm-lite #homeModeSwitch { background:var(--cream); border-radius:999px; padding:4px; } body.sm-lite #homeModeSwitch button { border-radius:999px; font-weight:800; transition:transform .12s ease; } body.sm-lite #homeModeSwitch button:active { transform:scale(.97); } body.sm-lite #homeModeSwitch button.active { background:var(--accent); color:#fff; box-shadow:none; } /* Recherche : champ arrondi + chips de portée uniformes (actif corail plein) */ body.sm-lite .tab-panel[data-panel="accueil"] .search { border-radius:14px; } body.sm-lite #searchScopes .sscope { border-radius:999px; font-weight:700; border:1px solid var(--line); } body.sm-lite #searchScopes .sscope.on { background:var(--accent); color:#fff; border-color:transparent; } /* Hero Maison « De retour chez toi » (masqué en MVP) → surface neutre plate si jamais affiché */ body.sm-lite #homeHomeMode .hm-hero { background:var(--card) !important; color:var(--ink); border:1px solid var(--line) !important; border-radius:var(--r-jewel) !important; box-shadow:none !important; } body.sm-lite #homeHomeMode .hm-hero .hm-hero-title { color:var(--ink); } body.sm-lite #homeHomeMode .hm-hero .muted { color:var(--muted) !important; } /* Cartes accueil : arrondi homogène + en-têtes de section en kickers petites capitales */ body.sm-lite .tab-panel[data-panel="accueil"] .card { border-radius:var(--r-jewel) !important; } body.sm-lite .tab-panel[data-panel="accueil"] .qm-head h3, body.sm-lite .tab-panel[data-panel="accueil"] .section-head h3 { font-size:var(--fs-label); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } /* « Ta progression solo » : libellé « XP gagné » → « Progression » (ton grand public, décision Maxime). Swap 100% CSS, scopé Lite : le mode complet garde « XP gagné ». */ body.sm-lite #soloProgress { border-radius:var(--r-jewel) !important; } body.sm-lite #soloProgress .sp-stat[data-spstat="xp"] span { font-size:0; } body.sm-lite #soloProgress .sp-stat[data-spstat="xp"] span::after { content:"Progression"; font-size:.7rem; font-weight:700; } /* ============================================================ ÉCRAN LIEUX — habillage Lite PLAT (body.sm-lite). Markup/handlers inchangés. ============================================================ */ /* Titre « Lieux sûrs » en grand serif, encre pleine */ body.sm-lite .tab-panel[data-panel="lieux"] > h1 { font-family:Fraunces,Georgia,serif; font-size:var(--fs-display); font-weight:900; line-height:1.04; color:var(--ink); } /* Légendes de catégorie (« Ton ambiance » / « Le top du coin ») → kickers petites capitales */ body.sm-lite .tab-panel[data-panel="lieux"] .jnav-cap { font-size:var(--fs-label); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } /* Recherche arrondie */ body.sm-lite .tab-panel[data-panel="lieux"] .search { border-radius:14px; } /* Tuiles de filtre d'ambiance : retour tactile + libellé de l'actif en accent corail */ body.sm-lite .tab-panel[data-panel="lieux"] .cat-tile { transition:transform .12s ease; } body.sm-lite .tab-panel[data-panel="lieux"] .cat-tile:active { transform:scale(.96); } body.sm-lite .tab-panel[data-panel="lieux"] .cat-tile.active .clbl { color:var(--accent); font-weight:800; } /* Cartes lieu : arrondi homogène, retour tactile, pastilles NETTES (plus de blur) */ body.sm-lite #cafesList .pcard { border-radius:var(--r-jewel) !important; overflow:hidden; transition:transform .12s ease; } body.sm-lite #cafesList .pcard:active { transform:scale(.99); } body.sm-lite #cafesList .pcard-chip { -webkit-backdrop-filter:none; backdrop-filter:none; } /* Carte « Mon spot du jour » : arrondi homogène */ body.sm-lite #spotCard { border-radius:var(--r-jewel) !important; } /* ============================================================ BASE COMMUNE — tous les écrans Lite (cohésion Jeux/Mates/Profil/…). Plat & neutre. Markup/handlers inchangés ; couvre les panneaux pas encore traités spécifiquement. ============================================================ */ body.sm-lite .tab-panel > h1 { font-family:Fraunces,Georgia,serif; font-size:var(--fs-display); font-weight:900; line-height:1.04; color:var(--ink); } body.sm-lite .tab-panel .card { border-radius:var(--r-jewel) !important; } body.sm-lite .tab-panel .qm-head h3, body.sm-lite .tab-panel .section-head h3 { font-size:var(--fs-label); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } body.sm-lite .tab-panel .tile { transition:transform .12s ease; } body.sm-lite .tab-panel .tile:active { transform:scale(.97); } /* ============================================================ CONNEXION (#authView) — habillage Lite PLAT (pré-login : visible en Lite via ?lite=1 / futur défaut MVP) ============================================================ */ body.sm-lite #authCore .auth-title h1 { font-family:Fraunces,Georgia,serif; font-weight:900; color:var(--ink); } body.sm-lite #authCore .seg button.active { background:var(--accent) !important; color:#fff !important; box-shadow:none !important; } body.sm-lite #authCore #authPlay { background:var(--accent) !important; box-shadow:none !important; } /* ============================================================ ONBOARDING (#onboarding) — habillage Lite PLAT ============================================================ */ body.sm-lite #onboarding .onb-card { border-radius:var(--r-jewel); } body.sm-lite #onboarding .onb-next { background:var(--accent) !important; box-shadow:none !important; } /* ============================================================ MATES (#connexions) + CHAT — habillage Lite PLAT (body.sm-lite). Markup/handlers inchangés. ============================================================ */ /* Segmented Messages / Découvrir / Demandes → actif corail plein */ body.sm-lite .tab-panel[data-panel="connexions"] .mseg button.active { background:var(--accent) !important; color:#fff !important; box-shadow:none; } /* Chips de filtre & tri uniformes (actif corail plein) + recherche arrondie */ body.sm-lite .tab-panel[data-panel="connexions"] .chip.active { background:var(--accent) !important; color:#fff !important; border-color:transparent !important; } body.sm-lite .tab-panel[data-panel="connexions"] .search { border-radius:14px; } /* Cartes mate (liste Découvrir) : retour tactile */ body.sm-lite .tab-panel[data-panel="connexions"] .trav-open { transition:transform .12s ease; } body.sm-lite .tab-panel[data-panel="connexions"] .trav-open:active { transform:scale(.99); } /* Hero du profil mate détaillé → arrondi homogène */ body.sm-lite #matesProfile .detail-hero { border-radius:var(--r-jewel) !important; } /* Bannière d'invitation → arrondi homogène */ body.sm-lite #matesHome .invite-banner { border-radius:var(--r-jewel) !important; } /* CHAT : bulles à coin coupé, « moi » en corail plein, « eux » en surface nette */ body.sm-lite #matesChat .bubble { border-radius:16px; } body.sm-lite #matesChat .bubble.me { background:var(--accent) !important; color:#fff; border-bottom-right-radius:5px; } body.sm-lite #matesChat .bubble.them { border-bottom-left-radius:5px; } /* ============================================================ FLATTEN APP-NATIVE — neutralise les composants natifs encore « riches » en Lite (révélés à la capture connectée). Scopé body.sm-lite → le mode complet garde ses dégradés / joyaux colorés à l'identique. Spécificité (0,2,1) + !important pour battre les variantes colorées (.thumb.green, etc.) et l'inline JS. ============================================================ */ /* Pastilles d'icônes (.thumb + variantes .green/.red/.purp/…) → surface NEUTRE, icône en encre (plus de dégradé « joyau » ni de sheen). Le SOS rouge réel reste géré ailleurs (su-sos, section C) — ces .thumb sont de la navigation. */ body.sm-lite .thumb { background: var(--cream) !important; color: var(--ink) !important; border: 1px solid var(--line); box-shadow: none !important; filter: none !important; } body.sm-lite .thumb::before, body.sm-lite .thumb::after { content: none !important; display: none !important; } /* Prénom en dégradé clippé (onboarding « Salut … ! ») → encre pleine (texte en dégradé = banni) */ body.sm-lite .onb-step h2 .grad-name { background: none !important; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink) !important; } /* Bannière de consentement : bouton « D'accord » (dégradé inline) → corail plat */ body.sm-lite #consentYes { background: var(--accent) !important; } /* ============================================================ MVP LITE — DÉGRAISSAGE (body.sm-lite). Focalise sur SÉCURITÉ + RENCONTRES + LIEUX. On MASQUE le hors-MVP (le complet n'est jamais touché). Markup/handlers intacts ; tout reste réversible et réapparaît en mode complet. (`:has()` déjà utilisé l.1290.) ============================================================ */ /* v710 (retour Maxime « il faut un onglet léger Jeux en bas ») : l'onglet Jeux est REMIS dans la nav Lite. (avant il était masqué → Maxime le veut accessible.) */ body.sm-lite .bottom-nav button[data-tab="jeux"] { display: inline-flex !important; } /* v710 (Maxime « pas assez d'aération sur la Lite ») : un peu plus de respiration entre les sections. */ body.sm-lite .section-head { margin-top: 1.35rem; } body.sm-lite .tab-panel > section + section { margin-top: 1.15rem; } body.sm-lite .qm-rail, body.sm-lite .grid2 { gap: .8rem; } /* Accueil SIMPLE : carte + qui est autour. On masque le mode Maison, le fil, « Mes voyages », les accès jeu. */ body.sm-lite #homeModeSwitch { display:none !important; } /* plus de bascule Voyage/Maison */ body.sm-lite #homeHomeMode { display:none !important; } /* hub Maison entier (progression solo, inspiration, préparatifs, wishlist, hôte…) */ body.sm-lite .tab-panel[data-panel="accueil"] .section-head:has(#feedToggle), body.sm-lite #feedComposer, body.sm-lite #homeFeed { display:none !important; } /* le fil communautaire */ body.sm-lite .tab-panel[data-panel="accueil"] .section-head:has(#tripAddLink), body.sm-lite #tripMatchBanner, body.sm-lite #myTrips { display:none !important; } /* « Mes voyages » */ body.sm-lite .tab-panel[data-panel="accueil"] .tile[data-goto="jeux"], body.sm-lite #goldTile { display:none !important; } /* accès rapides liés au jeu / Gold */ /* Mates : on retire les 18 filtres avancés (on garde recherche + chips rapides + tri). */ body.sm-lite #advFilters { display:none !important; } /* ============================================================ AUDIT NEUTRE — VAGUES A/B/C (17/06, audit multi-agents → AUDIT_LITE_NEUTRE.md) Objectif : Lite vraiment plate/neutre/quasi-monochrome. Tout scopé body.sm-lite, mode complet jamais touché. Danger/SOS jamais neutralisé. ============================================================ */ /* ---- VAGUE A : gros levier (cause racine) ---- --accent-grad = le VRAI dégradé sunset des composants natifs (boutons/chips/avatars/ héros/logo/badges…). L'aplatir = corail plein partout d'un coup. + fonds neutres. */ body.sm-lite { --accent-grad: var(--accent) !important; /* tout l'accent natif → corail #FF5A4D plein */ --bg-grad: var(--bg) !important; /* fond de page → surface unie neutre (plus de radial sunset) */ --relief: drop-shadow(0 2px 4px rgba(20,18,40,.14)) !important; /* relief icônes/badges ALLÉGÉ : l'ombre forte (.34) tapait trop sur le fond crème Lite */ } /* Garde-fou : le bouton DANGER reste rouge (ne pas le laisser virer corail via accent-grad) */ body.sm-lite .btn-danger { background: var(--danger) !important; } /* Coquille : retirer le halo soleil radial + la texture de grain globale */ body.sm-lite .app-shell { background: var(--bg) !important; } /* Saisons en mode SOMBRE (Lite) : la surface unie de l'app-shell masquait le fond saisonnier (bleu hiver / vert tropiques) du body → on la rend transparente comme en mode complet pour que l'ambiance transparaisse. */ body.sm-lite.theme-winter.theme-dusk .app-shell, body.sm-lite.theme-tropic.theme-dusk .app-shell { background: transparent !important; } body.sm-lite::after { content: none !important; } /* Halos/glow des CTA génériques (corail diffus) → off */ body.sm-lite .btn-primary, body.sm-lite .auth-play button, body.sm-lite #authView .lp-cta { box-shadow: none !important; } /* Pastille d'icône de l'onglet actif (nav basse) : corail plein, sans ombre */ body.sm-lite .bottom-nav button.active svg { box-shadow: none !important; } /* ---- VAGUE B : dégradés codés en dur + blur + textes-dégradés + glow résiduels ---- */ /* Tuiles de catégorie « joyau » multicolores (Lieux) → neutre comme .thumb */ body.sm-lite .cic { background: var(--cream) !important; color: var(--ink) !important; box-shadow: none !important; } body.sm-lite .cic::before, body.sm-lite .cic::after { content: none !important; } /* Badges de cartes lieu (éco turquoise / top ambre) → chip neutre. L'overlay photo .pcard-grad (voile noir de lisibilité) est fonctionnel → conservé. */ body.sm-lite .pcard-eco, body.sm-lite .pcard-top { background: var(--card) !important; color: var(--ink) !important; box-shadow: none !important; } /* Chips/pilules ambrées → corail plein ou surface neutre */ body.sm-lite .avail-chip.on { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; } body.sm-lite .spot-quick button { background: var(--cream) !important; box-shadow: none !important; } body.sm-lite .spot-emoji-pick button.active { box-shadow: none !important; transform: none !important; } body.sm-lite .streak-chip { background: var(--cream) !important; color: var(--accent) !important; border-color: var(--line) !important; } body.sm-lite .tip-card { background: var(--card) !important; } /* Statuts « en ligne » dorés → point corail / neutre (un seul accent = corail) */ body.sm-lite .presence-pill { background: var(--cream) !important; color: var(--muted) !important; } body.sm-lite .presence-pill::before { background: var(--accent) !important; } body.sm-lite .tph-online { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; } body.sm-lite .tcard-vedette { background: var(--cream) !important; color: var(--muted) !important; } /* Chat : bulle « eux » (rose en dur) → surface neutre */ body.sm-lite #matesChat .bubble.them { background: var(--cream) !important; color: var(--text) !important; border: 1px solid var(--line); } /* Flammes (gaming) dans le chat → retirées en Lite */ body.sm-lite .chat-flame, body.sm-lite .chat-poc { display: none !important; } /* Actions sur le profil d'un mate (Défi / BFF / Bloquer) : dégradés en dur → plats. tpa-danger (Bloquer) = garde le ROUGE mais À PLAT (garde-fou sémantique, jamais neutralisé). */ body.sm-lite .tpa-btn.tpa-chal { background: var(--accent) !important; color: #fff !important; } body.sm-lite .tpa-btn.tpa-bff { background: var(--cream) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; } body.sm-lite .tpa-btn.tpa-danger { background: var(--danger) !important; color: #fff !important; } /* Textes en dégradé (bannis) → encre pleine */ body.sm-lite .match-card h3, body.sm-lite .stat, body.sm-lite #authView .lp-grad { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; } /* Logo SUNMATES : soleil tricolore → corail plein (monochrome) + ombre du titre retirée */ body.sm-lite .logo-badge [fill^="url(#sun"] { fill: var(--accent) !important; } body.sm-lite .logo-text { text-shadow: none !important; } /* Bandeau d'installation PWA : icône + CTA → corail plat */ body.sm-lite .pwa-ic, body.sm-lite .pwa-cta { background: var(--accent) !important; box-shadow: none !important; } /* Onboarding : orbes radiaux animés retirés + emoji sans ombre/animation */ body.sm-lite .onb-bg .orb { display: none !important; } body.sm-lite .onb-emoji { filter: none !important; animation: none !important; } /* Blur / glass résiduels (modales, feuilles, topbar, nav landing) → off */ body.sm-lite .popinfo-ov, body.sm-lite .sm-selsheet-ov, body.sm-lite .topbar, body.sm-lite #authView .lp-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Glow / ombres colorées résiduels → off */ body.sm-lite .search input { box-shadow: none !important; border-color: var(--line) !important; } body.sm-lite .completion-bar span { box-shadow: none !important; } /* Sheen émaillé : on aplatit vraiment (au lieu d'opacity .5) */ body.sm-lite .smgem::after, body.sm-lite .cic::after, body.sm-lite [class*="sheen"] { content: none !important; opacity: 0 !important; } /* Filtre « relief » sur les emojis décoratifs (hors danger) → off */ body.sm-lite .tip-ic, body.sm-lite .su-ic, body.sm-lite .su-e, body.sm-lite .dh-emoji, body.sm-lite .onb-emoji { filter: none !important; } /* ---- v776 (retour Maxime « travailler l'onglet Jeux dans la version Lite ») : le panneau Jeux n'est PLUS masqué en Lite. Le bouton de nav est déjà réactivé (v711). On garde une version SOBRE : les éléments [data-beta]/.beta-only (gaming pur) restent cachés par les règles Lite générales, et on montre ce qui a du sens en MVP (classement, coupons, badges, série). ⚠️ AVANT : display:none → l'onglet était cliquable mais VIDE (cassé). */ body.sm-lite .tab-panel[data-panel="jeux"] { display: block; } /* gaming pur masqué en Lite (le hub garde classement/coupons/badges/série) */ body.sm-lite #jeuxHome [data-beta], body.sm-lite #jeuxHome .beta-only { display: none !important; } /* v807 (Maxime « refonte Jeux sur la Lite ») : Boutique (data-beta) masquée en Lite → la rangée secondaire 4 colonnes laissait une COLONNE VIDE et les 3 tuiles flottaient déséquilibrées. On passe à 3 colonnes : Badges / Coupons / Classement remplissent la ligne proprement. */ body.sm-lite #jeuxNav .jnav-secondary { grid-template-columns: repeat(3, 1fr) !important; } /* rythme vertical resserré : la nav ne flotte plus loin sous la quête du jour */ body.sm-lite #jeuxHome > .quest-spotlight { margin-top: .2rem !important; } body.sm-lite #jeuxHome > #jeuxNav { margin-top: .5rem !important; } /* ============================================================ PEAUFINAGE v534 — homogénéisation + parcours (audit multi-agents). Décisions Maxime : emoji retirés des CTA/titres · Premium masqué · CTA arrondi 14px · Accès rapides recomposés. Tout scopé body.sm-lite, complet jamais touché. ============================================================ */ /* — Cartes : neutralisation GLOBALE (au lieu d'écran par écran) : surface plate + filet, zéro ombre. */ body.sm-lite .card { box-shadow: none !important; border: 1px solid var(--line) !important; } /* — En-têtes de section : retirer le TRAIT corail décoratif à gauche (kicker = texte seul). */ body.sm-lite .section-head > h3::before, body.sm-lite .jnav-cap::before { content: none !important; display: none !important; } body.sm-lite .section-head > h3 { padding-left: 0 !important; } /* — États ACTIFS de TOUS les segments : corail plein, sans ombre (uniformisation complète). */ body.sm-lite .lb-segs button.active, body.sm-lite .mode-switch button.active, body.sm-lite .auth-lang button.active, body.sm-lite .lang-seg button.active, body.sm-lite .fc-kind.active, body.sm-lite .todo-toggle.active, body.sm-lite .au-fbtn.active { background: var(--accent) !important; color: #fff !important; border-color: transparent !important; box-shadow: none !important; } /* — Boutons : CTA arrondi 14px (décision Maxime) + neutralisation des ombres/halos résiduels. */ body.sm-lite .btn-primary, body.sm-lite .btn-danger, body.sm-lite .btn-ghost, body.sm-lite .btn-accent, body.sm-lite .sml-btn { border-radius: 14px !important; } body.sm-lite .btn-danger { box-shadow: none !important; } /* danger = fond rouge gardé, sans glow */ body.sm-lite .btn-accent { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; } /* un seul accent : corail plein */ /* — Profil : masquer Premium / Pro / Admin en Lite (MVP gratuit, sécurité-first — décision Maxime). */ body.sm-lite #profSegNav button[data-pseg="premium"], body.sm-lite #profSegNav button[data-pseg="pro"], body.sm-lite #profSegNav button[data-pseg="admin"] { display: none !important; } /* — Auth : masquer l'onglet « Pro » sur l'écran de connexion grand public. */ body.sm-lite #tabPro { display: none !important; } /* — État vide : illustration neutralisée (plus de pastille sunset/halo). */ body.sm-lite .empty .empty-ill { background: var(--cream) !important; box-shadow: none !important; } body.sm-lite .empty .empty-ill svg, body.sm-lite .empty .empty-ill .ie { filter: none !important; } /* — Classement : bouton de leaderboard actif (Lieux) → corail plat (ombre retirée). */ body.sm-lite .lb-segs button.active { box-shadow: none !important; } /* — Titre de sous-vue Sécurité : aligné (sous-vue = --fs-h1, déjà le cas pour #secuHelp). */ body.sm-lite #matesProfile > h1 { font-size: var(--fs-h1) !important; } /* — v535 : Accès rapides recomposés en actions MVP → la tuile Profil (doublon de la nav) est masquée. */ body.sm-lite .tab-panel[data-panel="accueil"] .tile[data-goto="profil"] { display: none !important; } /* ============================================================ PEAUFINAGE v536 — audit de fond (3 agents) : purge gaming résiduel + DA propre + UX. Le loader DA (sunmates-da-loader.js) est désormais INERTE en Lite → 2 DA natives propres. Ici : on masque tout le gaming « périphérique » + on règle Bonjour/tuiles/onboarding/PWA. Tout scopé body.sm-lite, complet jamais touché. Danger/SOS intact. ============================================================ */ /* --- Purge GAMING visible (chrome non tagué data-beta) --- */ body.sm-lite #questTodoToggle, /* bouton « À faire » (filtre quêtes) au-dessus de la carte */ body.sm-lite #hmLayersBtn, /* bouton « Filtres » de la carte (calques Quêtes/Check-ins) */ body.sm-lite .homemap-filters .chip.cl-quests, body.sm-lite #daySessionCard, /* carte « Ma journée » (quêtes/XP/confettis) */ body.sm-lite #badgeRailSection, /* rail « À débloquer 🏅 » → lien mort vers le hub Jeux */ /* (#homeStreak n'est PLUS masqué en Lite : gamification LÉGÈRE voulue par Maxime — la série 🔥 de jours d'affilée est locale, douce, sans transformer la Lite en hub de jeu.) */ body.sm-lite #parcoursCard, /* « Mon parcours » (quêtes/badges/XP cliquables vers Jeux) */ body.sm-lite #profileBadges, /* médaillons de badges du profil */ body.sm-lite .stat-box[data-stat="xp"], /* stat « XP ⭐ » du profil */ body.sm-lite #smdaBtn { display: none !important; } /* FAB « +DA » (console admin) — pas en grand public */ /* --- « Bonjour » contenu (ne prend plus tout l'écran) --- */ body.sm-lite #homeHello { font-size: 1.6rem !important; line-height: 1.2 !important; white-space: normal; overflow-wrap: anywhere; } /* fix : « Bonjour [prénom] » ne se coupe plus sur petits écrans (<360px) */ /* --- Tuiles AVEC PROFONDEUR (remplace le box-shadow:none v534 → ombre douce neutre) --- */ body.sm-lite .card, body.sm-lite .tile, body.sm-lite .pcard, body.sm-lite .sml-minicard { box-shadow: 0 1px 2px rgba(20,18,40,.05), 0 6px 16px rgba(20,18,40,.05) !important; } /* --- Bannière d'installation PWA : ne chevauche plus les titres → masquée en Lite (épure) --- */ body.sm-lite #pwaBanner { display: none !important; } /* --- ONBOARDING restylé Lite : clair / corail / plat (était la DA beta prune sombre) --- */ body.sm-lite #onboarding { background: var(--bg) !important; } body.sm-lite #onboarding .onb-card { background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--line); box-shadow: 0 12px 36px rgba(20,18,40,.14) !important; } body.sm-lite #onboarding .onb-step h2 { color: var(--ink) !important; } body.sm-lite #onboarding .onb-step p { color: var(--text) !important; } body.sm-lite #onboarding .onb-step p b { color: var(--accent) !important; } body.sm-lite #onboarding .grad-name { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; } body.sm-lite #onboarding .onb-emoji { filter: none !important; font-size: 2.6rem !important; } body.sm-lite #onboarding .onb-skip { color: var(--muted) !important; } body.sm-lite #onboarding .onb-dots i { background: var(--line) !important; } body.sm-lite #onboarding .onb-dots i.on { background: var(--accent) !important; } /* ============================================================ PEAUFINAGE v537 — profondeur cartes (ombre prioritaire) + respiration + Gold masqué. ============================================================ */ /* Profondeur : .tab-panel .card (0,3,1) bat le box-shadow:none global ; le hero Sécurité (#id) reste plat. */ body.sm-lite .tab-panel .card, body.sm-lite #cafesList .pcard { box-shadow: 0 1px 2px rgba(20,18,40,.05), 0 6px 16px rgba(20,18,40,.06) !important; } /* Respiration entre sections de Lieux (étaient empilées sans air). */ body.sm-lite .tab-panel[data-panel="lieux"] > section, body.sm-lite .tab-panel[data-panel="lieux"] > .card, body.sm-lite .tab-panel[data-panel="lieux"] > details { margin-top: 1.3rem; } /* Lieu Gold (premium/gaming) : masqué en Lite (le bloc est aussi coupé en JS, double sécurité). */ body.sm-lite .gold-place { display: none !important; } /* ============================================================ PEAUFINAGE v538 — derniers P3 : lisibilité sous-textes + avatar. ============================================================ */ /* Sous-textes de tuiles : casse NORMALE (étaient en CAPS tracking large = peu lisibles). */ body.sm-lite .t-meta { text-transform: none !important; letter-spacing: normal !important; font-size: .8rem !important; font-weight: 500 !important; } /* Avatar de profil (placeholder) : surface nette + filet + petite ombre (plus de carré crème plat). */ body.sm-lite .prof-photo { border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(20,18,40,.07) !important; } /* ============================================================ PEAUFINAGE v539 — épuration (retour Maxime) : double texte, carte, profil, tuiles. ============================================================ */ /* Accueil : UN seul sous-titre (fini le double « Regarde qui traîne 👀 » + « Prends ton temps »). */ body.sm-lite #homeSubtitle { display: none !important; } body.sm-lite .tab-panel[data-panel="accueil"] > .lite-only { font-size: .92rem !important; line-height: 1.4 !important; margin: .25rem 0 .2rem !important; } /* Carte d'accueil PLUS GRANDE (la star ; moins de scroll au-dessus). */ body.sm-lite .homemap { height: 400px !important; } /* Tuiles d'icônes catégorie : neutralisation PROPRE (le color:#fff + sheen + inset créaient une superposition floue sur fond clair). Override explicite (0,3,1) pour battre .cat-tile .cic. */ body.sm-lite .cat-tile .cic, body.sm-lite .prog-row .cic { background: var(--cream) !important; color: var(--ink) !important; box-shadow: none !important; } body.sm-lite .cat-tile .cic::before, body.sm-lite .cat-tile .cic::after, body.sm-lite .prog-row .cic::before { content: none !important; } /* Profil — retirer les tuiles FANTÔMES laissées par le masquage gaming. */ body.sm-lite .tab-panel[data-panel="profil"] .card:has(#parcoursCard) { display: none !important; } /* carte blanche vide (parcours masqué) */ body.sm-lite #profSegNav { display: none !important; } /* segment Premium/Pro/Admin entièrement masqué = vide */ /* Boutons primaires : CORAIL PLAT garanti (bave résiduelle = .btn-primary l.3201 en var(--accent-grad) !important rendait encore un dégradé). On force background-image:none. */ /* CORAIL PLAT : seulement les boutons PRIMAIRES (PAS .btn-block générique → sinon tous les boutons ghost des Réglages deviennent corail illisibles · régression v539 corrigée). */ body.sm-lite .btn-primary, body.sm-lite .auth-play button, body.sm-lite #authPlay { background-color: var(--accent) !important; background-image: none !important; box-shadow: none !important; } /* Profil : FUSIONNER visuellement les 2 cartes en UN bloc centré propre (décision Maxime v539). La carte tête (avatar/nom/confiance) se colle à la carte stats (stats/complétion/Modifier). */ body.sm-lite .tab-panel[data-panel="profil"] .prof-head { margin-bottom: 0 !important; border-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding-bottom: .5rem !important; box-shadow: none !important; } body.sm-lite .tab-panel[data-panel="profil"] .prof-head + .card { margin-top: 0 !important; border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; padding-top: .2rem !important; } /* Sécurité CONDENSÉE (Lite, décision Maxime) : moins de scroll + urgences EN PREMIER. ⚠️ Le flux SOS (secuHelp : 112/Alerte/ICE/cercle) reste INTACT (danger) — on ne fait que déclutter la page d'accueil Sécurité et remonter les actions critiques. */ body.sm-lite #secuHome #safetyTip { display: none !important; } /* « Conseil du jour » retiré (déclutter) */ body.sm-lite #secuHome > .card:first-of-type { padding: 1.3rem 1.2rem !important; } /* hero plus compact */ body.sm-lite #secuHome .grid2 { display: grid !important; grid-template-columns: 1fr 1fr; gap: .6rem; } body.sm-lite #secuHome .grid2 .tile[data-secuquick="emergency"] { order: -3; } /* Alerte d'urgence en 1er */ body.sm-lite #secuHome .grid2 .tile[data-secuquick="numbers"] { order: -2; } /* Numéros (112) ensuite */ body.sm-lite #secuHome .grid2 .tile[data-secuquick="position"] { order: -1; } /* Partager position */ /* ============================================================ PEAUFINAGE v541 — superposition tuiles + layout (retour Maxime). ============================================================ */ /* SUPERPOSITION « carré sur carré » : les .thumb d'accueil/sécurité ont un drop-shadow (= 2e carré en arrière-plan, l.2376) + un ::after gloss (l.2378, spécificité 0,3,1). On les TUE en Lite. */ body.sm-lite .tab-panel[data-panel="accueil"] .tile .thumb, body.sm-lite .tab-panel[data-panel="securite"] .tile .thumb, body.sm-lite .tile .thumb { filter: none !important; } body.sm-lite .tab-panel[data-panel="accueil"] .tile .thumb::after, body.sm-lite .tab-panel[data-panel="securite"] .tile .thumb::after, body.sm-lite .tile .thumb::before, body.sm-lite .tile .thumb::after { content: none !important; display: none !important; background: none !important; } /* Profondeur des tuiles (dont rouges sécurité) : ombre douce nette sur la TUILE elle-même. */ body.sm-lite .tile { box-shadow: 0 1px 2px rgba(20,18,40,.05), 0 5px 14px rgba(20,18,40,.06) !important; } /* Accès rapides Accueil (les 3 actions « Que faire maintenant ») : rangée de 3 propre. */ body.sm-lite .tab-panel[data-panel="accueil"] .grid2 { grid-template-columns: repeat(3, 1fr) !important; gap: .55rem; } /* PROFIL — refonte « moins vide » (décision Maxime) : on joue les tailles pour remplir l'écran, carte fusionnée plus généreuse, avatar/nom/stats plus présents. */ body.sm-lite .tab-panel[data-panel="profil"] .prof-head { padding-top: 1.6rem !important; } body.sm-lite .tab-panel[data-panel="profil"] .prof-photo { width: 128px !important; height: 128px !important; font-size: 3.2rem !important; border-radius: 26px !important; } body.sm-lite .tab-panel[data-panel="profil"] .prof-name { font-size: 1.5rem !important; margin-top: .2rem; } body.sm-lite .tab-panel[data-panel="profil"] .prof-trust { font-size: 1rem !important; padding: .5rem 1rem !important; margin-top: .4rem !important; } body.sm-lite .tab-panel[data-panel="profil"] .stat-row { gap: .7rem !important; margin-top: 1rem !important; } body.sm-lite .tab-panel[data-panel="profil"] .stat-row .stat-box { padding: 1rem .6rem !important; } body.sm-lite .tab-panel[data-panel="profil"] .stat-row .stat { font-size: 2rem !important; } body.sm-lite .tab-panel[data-panel="profil"] .completion { margin-top: 1.1rem !important; } body.sm-lite .tab-panel[data-panel="profil"] .prof-head + .card { padding-bottom: 1.4rem !important; } body.sm-lite .tab-panel[data-panel="profil"] #editProfileBtn { margin-top: 1.1rem !important; padding: 1rem !important; font-size: 1.02rem !important; } /* Profil : carte de raccourcis utiles (.lite-only, ajoutée en markup) → remplit l'écran avec du contenu réel non-gaming (cercle de confiance, lieux, mates). */ body.sm-lite .tab-panel[data-panel="profil"] .prof-shortcuts { margin-top: var(--stack-md); } body.sm-lite .tab-panel[data-panel="profil"] .prof-shortcuts .qrow { transition: transform .12s ease; border-radius: 14px; } body.sm-lite .tab-panel[data-panel="profil"] .prof-shortcuts .qrow:active { transform: scale(.99); } /* Météo : pilule propre et CENTRÉE (ne s'étale plus sur toute la largeur). */ body.sm-lite #weatherChip.weather-chip { display: inline-flex !important; margin: 0 auto .6rem !important; width: auto !important; max-width: max-content; } body.sm-lite .tab-panel[data-panel="accueil"] #weatherChip { align-self: center; } /* ============================================================ PEAUFINAGE v543 — bave (logo/avatar), double-carré, lisibilité, typo, sécurité 1 page. ============================================================ */ /* BAVE : logo soleil + avatars rendaient encore un dégradé (brouillon DA en localStorage) malgré l'aplatissement du token → on FORCE le corail plat (background-image:none), comme les boutons. */ /* (20/06 : l'aplatissement corail + suppression d'ombre du logo Lite est RETIRÉ → le logo Lite doit être IDENTIQUE au mode complet : même taille, dégradé sunset (l.891) et ombre de base.) */ /* Avatar SANS photo : fond corail plat sans toucher au background-image (donc photos préservées). */ body.sm-lite .avatar { background-color: var(--accent) !important; } /* DOUBLE-CARRÉ : la boîte d'icône (.thumb) crée un 2e carré derrière l'emoji → on la rend TRANSPARENTE (l'emoji posé directement dans la tuile = un seul carré). */ body.sm-lite .tile .thumb { background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; } body.sm-lite .tile .thumb::before, body.sm-lite .tile .thumb::after { content: none !important; display: none !important; } /* ACCÈS RAPIDES accueil : LISTE lisible (la grille de 3 tassait le texte → illisible). */ body.sm-lite .tab-panel[data-panel="accueil"] .grid2 { grid-template-columns: 1fr !important; gap: .5rem; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile { display: flex !important; align-items: center; gap: .75rem; text-align: left; padding: .85rem .9rem; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .thumb { margin: 0 !important; width: 40px; height: 40px; flex: 0 0 auto; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .t-name { font-size: .98rem !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .t-meta { font-size: .78rem !important; } /* TYPO HOMOGÈNE profil (retour Maxime : tantôt énorme tantôt petit). Échelle nette et cohérente. */ body.sm-lite .tab-panel[data-panel="profil"] .prof-photo { width: 112px !important; height: 112px !important; font-size: 2.6rem !important; border-radius: 24px !important; } body.sm-lite .tab-panel[data-panel="profil"] .prof-name { font-size: 1.35rem !important; } body.sm-lite .tab-panel[data-panel="profil"] .prof-trust { font-size: .92rem !important; padding: .45rem .9rem !important; } body.sm-lite .tab-panel[data-panel="profil"] .stat-row .stat { font-size: 1.6rem !important; } body.sm-lite .tab-panel[data-panel="profil"] .stat-row .lbl { font-size: .78rem !important; } body.sm-lite .tab-panel[data-panel="profil"] .prof-shortcuts .qname { font-size: .95rem !important; } /* SÉCURITÉ — TOUT SUR UNE PAGE (décision Maxime : ne rien retirer, tout afficher). On affiche secuHelp (112/Alerte/ICE/cercle/aide/conseils) SOUS secuHome, et on retire la navigation entre les 2 (plus de bouton « J'ai besoin d'aide » ni de Retour). SOS intact. */ body.sm-lite #secuHelp { display: block !important; margin-top: var(--stack-md); } body.sm-lite #secuHelp > .backbtn, body.sm-lite #secuHelp > h1, body.sm-lite #secuHome #needHelpBtn { display: none !important; } /* ============================================================ PEAUFINAGE v547 — régressions + retours Maxime (double-carré Lieux, météo, SOS). ============================================================ */ /* DOUBLE-CARRÉ Lieux : la boîte d'icône .cic (Ton ambiance / Le top du coin) → TRANSPARENTE (l'icône posée direct dans la tuile = un seul carré). */ body.sm-lite .cat-tile .cic { background: transparent !important; box-shadow: none !important; filter: none !important; color: var(--ink) !important; } body.sm-lite .cat-tile .cic::before, body.sm-lite .cat-tile .cic::after { content: none !important; display: none !important; background: none !important; } /* MÉTÉO : PLEINE LARGEUR (Maxime la veut sur la largeur, pas une pilule centrée). */ body.sm-lite #weatherChip.weather-chip { display: flex !important; width: 100% !important; max-width: none !important; margin: 0 0 .6rem !important; justify-content: flex-start; } /* SOS visuel (#sosLogo) : non-cliquable en Lite (la bascule de vue est inerte, un clic ne faisait plus rien → on retire l'affordance de clic. Les vraies actions 112/Alerte sont juste en dessous). */ body.sm-lite #sosLogo { pointer-events: none !important; cursor: default !important; } /* ============================================================ PEAUFINAGE v548 — régression tuiles JEUX revenues + icônes + sécurité réorganisée. ============================================================ */ /* RÉGRESSION CRITIQUE : `.grid2 .tile { display:flex }` (v543) écrasait le `display:none` des tuiles JEUX/Gold/Profil (même spécificité, règle plus tardive) → elles revenaient (→ panneau Jeux vide). On RÉ-ASSERTE les masquages ICI (après le flex) pour qu'ils gagnent. */ body.sm-lite .tab-panel[data-panel="accueil"] .tile[data-goto="jeux"], body.sm-lite .tab-panel[data-panel="accueil"] .tile[data-goto="profil"], body.sm-lite #goldTile { display: none !important; } /* ICÔNES de tuiles VISIBLES : les SVG `data-smicon` sont blancs (#fff) → invisibles sur thumb transparent (d'où « pas d'emojis » / tuiles vides). On les passe en ENCRE. */ body.sm-lite .tile .thumb, body.sm-lite .tile .thumb svg { color: var(--ink) !important; } /* SÉCURITÉ réorganisée (Maxime) : le hero « Besoin d'aide ? » ne sert plus à rien (SOS non-cliquable, bouton retiré) → SUPPRIMÉ ; les tuiles secuHome qui DOUBLONNENT secuHelp (Alerte/Position/Cercle/ Numéros/Aide-proximité) retirées → secuHelp porte les versions détaillées. Restent : Faux appel, Signal d'aide, Rentrée en sécurité (uniques) + tout secuHelp. */ body.sm-lite #secuHome > .card:first-of-type { display: none !important; } body.sm-lite #secuHome .grid2 .tile[data-secuquick="emergency"], body.sm-lite #secuHome .grid2 .tile[data-secuquick="position"], body.sm-lite #secuHome .grid2 .tile[data-secuquick="circle"], body.sm-lite #secuHome .grid2 .tile[data-secuquick="numbers"], body.sm-lite #secuHome .grid2 .tile[data-secuquick="lieux"] { display: none !important; } /* ============================================================ PEAUFINAGE v550 — retours Maxime : header épuré, tuiles sobres, Mates, sécurité, jour/nuit smooth. ============================================================ */ /* Header : toggle jour/nuit UNIQUEMENT dans Réglages (retiré du header) ; « Dispo ? » retiré (fait tache). */ body.sm-lite #themeToggle { display: none !important; } body.sm-lite #availChip { display: none !important; } /* Sous-titre d'accueil « Prends ton temps » retiré (pas beau). */ body.sm-lite .tab-panel[data-panel="accueil"] > .lite-only { display: none !important; } /* Icônes du header un peu plus grandes. */ body.sm-lite .topbar-actions .iconbtn { width: 42px !important; height: 42px !important; } body.sm-lite .topbar-actions .iconbtn svg { width: 24px !important; height: 24px !important; } /* Tuiles « Que faire maintenant » : SOBRES (moins balèze, raccord DA épurée). */ body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile { padding: .65rem .8rem !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .thumb { width: 34px !important; height: 34px !important; font-size: 1.15rem !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .t-name { font-size: .92rem !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .t-meta { font-size: .74rem !important; } /* Mates : retirer la petite phrase du haut (redondante avec le titre). Elle est DANS #matesHome. */ body.sm-lite #matesHome > .muted { display: none !important; } /* Sécurité : « En cas d'urgence » TOUT EN HAUT (secuHelp avant secuHome), titre/sous-titre redondants retirés. */ body.sm-lite .tab-panel[data-panel="securite"] { display: flex; flex-direction: column; } body.sm-lite #secuHelp { order: 1; margin-top: 0 !important; } body.sm-lite #secuHome { order: 2; } body.sm-lite #secuHome > h1, body.sm-lite #secuHome > .muted { display: none !important; } /* Jour ↔ Nuit : transition DOUCE sur les surfaces (plus de bascule brutale). */ body.sm-lite .app-shell, body.sm-lite .card, body.sm-lite .tile, body.sm-lite .topbar, body.sm-lite .bottom-nav, body.sm-lite .search input { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; } /* ============================================================ PEAUFINAGE v551 — Mates invite compacte, SOS en texte, démo filtrée, réglages. ============================================================ */ /* MATES : bandeau « Invite tes amis » compact, SUR LA MÊME LIGNE que « Mates de confiance ». */ body.sm-lite #matesHome .mates-stat { display: inline-flex !important; width: auto !important; vertical-align: middle; } body.sm-lite #matesHome .invite-banner { display: inline-flex !important; width: auto !important; padding: .42rem .75rem !important; margin: .35rem 0 0 .5rem !important; vertical-align: middle; } body.sm-lite #matesHome .invite-banner .inv-txt { display: none !important; } body.sm-lite #matesHome .invite-banner .inv-go { background: rgba(255,255,255,.22); } /* ============================================================ PEAUFINAGE v552 — tuiles accueil (CONTENU normal, conteneur moins énorme), aération, header. ============================================================ */ /* Tuiles « Que faire maintenant » : EMOJIS + TEXTES normaux (j'avais réduit le mauvais truc), mais conteneur HORIZONTAL et compact (l'« arrière-tuile énorme » corrigée). */ body.sm-lite .tab-panel[data-panel="accueil"] .grid2 { grid-template-columns: 1fr !important; gap: .5rem !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile { padding: .7rem .9rem !important; min-height: 0 !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .thumb { width: 44px !important; height: 44px !important; font-size: 1.5rem !important; margin: 0 auto .35rem !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .t-name { font-size: 1rem !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .t-meta { font-size: .78rem !important; } /* RE-MASQUAGE HAUTE SPÉCIFICITÉ (0,6,1) : bat TOUJOURS le layout `.grid2 .tile` (0,5,1) quel que soit l'ordre → les tuiles Jeux/Gold/Profil ne reviendront PLUS jamais (fini ce yo-yo). */ body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile[data-goto="jeux"], body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile[data-goto="profil"], body.sm-lite .tab-panel[data-panel="accueil"] .grid2 #goldTile { display: none !important; } /* ============================================================ PEAUFINAGE v553 — #3 Cercle de confiance REPLIABLE + #4 tuiles → sous-choix. ============================================================ */ /* Cercle de confiance : repli géré par le système NATIF data-coll (chevron ▸/▾ comme iceCard/ conseils), démarré replié en Lite via collapsibleCards. Plus de collapse maison « .lite-collapsed » (le chevron « › » custom doublonnait le natif et le format différait). */ /* MÊME FORMAT que « Mes contacts d'urgence » : titre en casse NORMALE (pas les capitales façon section-head), le ↻ Rafraîchir reste dans l'entête. */ body.sm-lite #circleCard .section-head h3 { text-transform: none !important; letter-spacing: normal !important; font-weight: 800 !important; color: var(--ink) !important; } /* « Bonjour » : un peu d'air en dessous (était trop collé à la suite). */ body.sm-lite #homeHello { margin-bottom: .55rem !important; } /* Aération entre les sections de l'accueil. */ body.sm-lite .tab-panel[data-panel="accueil"] > section, body.sm-lite .tab-panel[data-panel="accueil"] > .section-head { margin-top: 1.4rem !important; } /* (20/06 : bloc « Header PLUS GRAND » Lite RETIRÉ → header + logo IDENTIQUES au mode complet, sur demande de Maxime (logos pas à la même taille). Réajuster seulement si besoin, en gardant la parité.) */ /* SÉCURITÉ : SOS en TEXTE stylisé (badge rouge « SOS ») au lieu de l'emoji 🆘. */ body.sm-lite .secu-urgent .su-ic { font-size: 0 !important; width: auto !important; height: auto !important; background: none !important; } body.sm-lite .secu-urgent .su-ic::after { content: "SOS"; font-size: .9rem; font-weight: 900; letter-spacing: .06em; color: #fff; background: var(--danger); padding: .25rem .55rem; border-radius: 8px; } /* RÉGLAGES : segment langue + QR/Scanner centrés (alignement propre). */ body.sm-lite #settingsCard .lang-seg, body.sm-lite #settingsCard .row { justify-content: center; } /* (Intro Lieux : reformulation « sans classement » reportée à une passe JS propre — le swap CSS ::after cassait la mise en page. Le texte original reste pour l'instant.) */ /* ============================================================ PEAUFINAGE v554 — logo couleur, tuiles accueil (pavés→lignes), sécurité allégée+centrée, profil (édition ouverte), Mates (Partager collé, segment Messages → raccourci header). ============================================================ */ /* LOGO header (20/06) : la Lite réutilise le MÊME logo que le mode complet (SVG soleil inline) — l'ancien override `icon.svg` est retiré. En Lite jour, `--accent-grad` est aplati en corail plein (l.393) → on RESTAURE le dégradé sunset UNIQUEMENT pour le mark du logo (dusk/saisons gardent leurs propres dégradés via styles.css, donc on exclut .theme-dusk pour ne pas les écraser). */ body.sm-lite:not(.theme-dusk) .brand .mark { background: linear-gradient(135deg, #FFC93C 0%, #FF7A3D 20%, #FF4F6D 52%) !important; } /* ACCUEIL « Que faire maintenant » : LIGNES compactes horizontales (fini les énormes pavés verticaux que la v552 avait recréés en centrant la vignette). Décisif (dernier en source). */ body.sm-lite .tab-panel[data-panel="accueil"] .grid2 { grid-template-columns: 1fr !important; gap: .45rem !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile { display: flex !important; flex-direction: row !important; align-items: center !important; gap: .7rem !important; text-align: left !important; padding: .6rem .8rem !important; min-height: 0 !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .thumb { width: 34px !important; height: 34px !important; margin: 0 !important; flex: 0 0 auto !important; font-size: 1.2rem !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .t-name { font-size: .93rem !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .t-meta { font-size: .73rem !important; } /* re-masquage gaming (toujours gagnant, 0,6,1). */ body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile[data-goto="jeux"], body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile[data-goto="profil"], body.sm-lite .tab-panel[data-panel="accueil"] .grid2 #goldTile { display: none !important; } /* SÉCURITÉ : retirer « Lieux publics sûrs » (→ onglet Lieux) + « Trouver un Mate sûr·e » (redondant avec le Cercle de confiance). Tuiles en LIGNES horizontales alignées à gauche, cohérentes avec l'accueil (fini le centrage « petits carreaux » jugé moche). */ body.sm-lite #secuHelp .tile[data-help="lieux"], body.sm-lite #secuHelp .tile[data-help="mate"] { display: none !important; } body.sm-lite #secuHelp .grid2 .tile, body.sm-lite #secuHome .grid2 .tile { flex-direction: row !important; align-items: center !important; text-align: left !important; gap: .7rem !important; padding: .6rem .8rem !important; min-height: 0 !important; } body.sm-lite #secuHelp .grid2 .tile .thumb, body.sm-lite #secuHome .grid2 .tile .thumb { width: 34px !important; height: 34px !important; margin: 0 !important; flex: 0 0 auto !important; font-size: 1.2rem !important; } body.sm-lite #secuHelp .grid2 .tile .t-name, body.sm-lite #secuHome .grid2 .tile .t-name, body.sm-lite #secuHelp .grid2 .tile .t-meta, body.sm-lite #secuHome .grid2 .tile .t-meta { width: auto; } /* PROFIL : retirer la carte de raccourcis (jugée « nulle ») — l'édition ouverte la remplace. */ body.sm-lite .tab-panel[data-panel="profil"] .prof-shortcuts { display: none !important; } /* MATES : « Partager » COLLÉ à côté du compteur de Mates (wrapper .lite-materow ajouté en JS). */ body.sm-lite #matesHome .lite-materow { display: flex !important; align-items: center; gap: .5rem; flex-wrap: nowrap; margin: .35rem 0 .85rem !important; } /* marge basse aérée : ne plus coller à la barre de recherche */ /* Carte « Tes groupes » masquée en Lite (feature sociale/beta, hors MVP) */ body.sm-lite #groupCard { display: none !important; } body.sm-lite #matesHome .lite-materow .mates-stat { flex: 0 1 auto; min-width: 0; margin: 0 !important; font-size: .9rem !important; } body.sm-lite #matesHome .lite-materow .invite-banner { flex: 0 0 auto; margin: 0 !important; white-space: nowrap; } body.sm-lite #matesHome .lite-materow .invite-banner .inv-go { white-space: nowrap; } /* Segment « Messages » retiré de Mates (déplacé en raccourci dans le header). */ body.sm-lite #matesHome .mseg [data-mseg="messages"] { display: none !important; } /* HEADER : bouton raccourci « Messages » à côté de la cloche (injecté en JS, Lite only). */ body.sm-lite #liteMsgBtn { display: inline-flex !important; } /* ============================================================ PEAUFINAGE v555 — bande de fond (#bgFx) retirée, tuile sécu combinée, carte fluide. ============================================================ */ /* FOND : la lueur ambrée radiale décorative (#bgFx) crée une « bande nette de coupure » en s'estompant → on la retire en Lite (fond plat uniforme = cohérent avec la DA aplatie). */ body.sm-lite #bgFx { display: none !important; } /* SÉCURITÉ : les 3 outils (Faux appel / Signal / Rentrée) fusionnés en UNE tuile « Outils de sécurité » (sous-menu) → on masque les 3 tuiles individuelles (la combinée est injectée en JS). */ body.sm-lite #secuHome .grid2 .tile[data-secuquick="fakecall"], body.sm-lite #secuHome .grid2 .tile[data-secuquick="signal"], body.sm-lite #secuHome .grid2 .tile[data-secuquick="safearrival"] { display: none !important; } /* ============================================================ PEAUFINAGE v556 — logo original, ordre header, tuiles accueil + Mates qualitatives, cercle compact, déconnexion visible, page messages propre. ============================================================ */ /* ACCUEIL « Que faire maintenant » : BANDES façon .qrow (le format EXISTANT de « Conseils & secours » que Maxime veut réutiliser) — une carte unique, rangées icône + (nom+sous-titre) + chevron, filet. */ body.sm-lite .tab-panel[data-panel="accueil"] .grid2 { display: block !important; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 0 1rem !important; box-shadow: 0 1px 4px rgba(45,38,52,.05) !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile { display: flex !important; flex-direction: row !important; align-items: center !important; gap: .8rem !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; padding: .85rem 0 !important; text-align: left !important; min-height: 0 !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile:last-child { border-bottom: 0 !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .thumb { width: 42px !important; height: 42px !important; border-radius: 14px !important; font-size: 1.25rem !important; display: flex !important; align-items: center; justify-content: center; flex: 0 0 auto; margin: 0 !important; background: var(--accent-soft) !important; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .lite-tilebody { flex: 1; min-width: 0; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .t-name { font-size: .98rem !important; font-weight: 600; color: var(--ink); } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .t-meta { font-size: .75rem !important; color: var(--muted); margin-top: .1rem; } body.sm-lite .tab-panel[data-panel="accueil"] .grid2 .tile .lite-chev { color: var(--accent); font-weight: 800; font-size: 1.15rem; flex: 0 0 auto; } /* MATES : la ligne « compteur + Partager » plus QUALITATIVE (deux blocs équilibrés, même hauteur). */ body.sm-lite #matesHome .lite-materow { gap: .6rem !important; align-items: stretch; } body.sm-lite #matesHome .lite-materow .mates-stat { flex: 1 1 auto; justify-content: center; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; padding: .7rem .9rem !important; font-weight: 700; } body.sm-lite #matesHome .lite-materow .invite-banner { border-radius: 14px !important; padding: .7rem 1rem !important; align-items: center; } /* CERCLE de confiance : carte repliée VRAIMENT compacte (une ligne, même gabarit que les autres cartes sécurité) — Maxime : « énorme, doit être au format de Mes contacts d'urgence ». */ body.sm-lite #circleCard .section-head h3 { font-size: 1.02rem !important; } /* MESSAGES (raccourci 💬) : quand on est sur la vue messages, la barre de segments (Découvrir/ Demandes) est masquée → page messages DÉDIÉE et propre (plus de segments fantômes). */ body.sm-lite #matesHome:has([data-msegpanel="messages"]:not(.hidden)) .mseg { display: none !important; } /* ============================================================ PEAUFINAGE v557 — bandes (.qrow), Outils sécu déplacés, toggles smooth. ============================================================ */ /* SÉCURITÉ : la section « Outils de sécurité » du bas est RETIRÉE (déplacée en bande dans « Conseils & secours »). On masque la grille + son titre ; le conseil du jour (safetyTip) reste. */ body.sm-lite #secuHome > .section-head, body.sm-lite #secuHome > .grid2 { display: none !important; } /* TOGGLES (interrupteurs réglages) : bascule la PLUS douce possible (pastille + fond animés). */ body.sm-lite .switch .sl, body.sm-lite .switch .sl::before { transition: background-color .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1) !important; } /* ============================================================ PEAUFINAGE v558 — profil (fusion carte, jeux/défi retirés, dispo) + profils voyageurs. ============================================================ */ /* PROFIL : la carte « séparée en deux » (prof-head + carte stats) → FUSIONNÉES en UN bloc continu (plus de bande crème ni de filet entre les deux). box-shadow retiré sur LES DEUX → aucune couture, y compris en mode SOMBRE (l'ombre du 2e bloc créait un liseré au joint en theme-dusk). */ body.sm-lite #profMain .prof-head { margin-bottom: 0 !important; border-radius: 18px 18px 0 0 !important; border-bottom: 0 !important; box-shadow: none !important; padding-bottom: .5rem !important; } body.sm-lite #profMain .prof-head + .card { margin-top: 0 !important; border-radius: 0 0 18px 18px !important; border-top: 0 !important; box-shadow: none !important; } /* PROFIL : notions de JEU retirées en Lite — XP, segments Premium/Pro/Admin, badges. */ body.sm-lite #profMain .stat-box[data-stat="xp"] { display: none !important; } body.sm-lite #profMain .stat-row-3 { grid-template-columns: 1fr 1fr !important; } body.sm-lite #profMain #profSegNav { display: none !important; } body.sm-lite #profMain #profileBadges { display: none !important; } /* PROFIL : « Dispo ? » réactivable ICI (chip déplacé du header vers la prof-head en JS). */ body.sm-lite #profMain #availChip { display: inline-flex !important; margin: .7rem auto 0 !important; } /* PROFILS VOYAGEURS / APERÇU : bouton « 🎯 Défi » + stat « Défis relevés » + BADGES retirés en Lite (l'aperçu « Modifier mon profil » ouvre cette fiche → plus aucune notion de jeu/badge). */ body.sm-lite #tpChallengeBtn, body.sm-lite .sp-stat[data-spstat="done"], body.sm-lite #tpStarBadges, body.sm-lite #tpBadgesCard { display: none !important; } /* MODE MAISON : le hub « Ta progression solo » (défis/rituels/XP/niveau) = 100 % gaming → retiré en Lite. */ body.sm-lite #soloProgress { display: none !important; } /* TITRES d'onglet : TAILLE NORMALISÉE sur TOUS les onglets (accueil « Bonjour », Profil, Mates, Sécurité, Lieux avaient des tailles incohérentes). Une seule échelle = rendu propre et constant. */ body.sm-lite .tab-panel > h1, body.sm-lite .mates-view > h1, body.sm-lite .secu-view > h1, body.sm-lite #homeHello { font-size: 1.55rem !important; font-weight: 800 !important; line-height: 1.18 !important; } /* ============================================================ PEAUFINAGE v560 — overlay messages plein écran (raccourci 💬). ============================================================ */ /* Le 💬 affiche les messages EN OVERLAY plein écran par-dessus l'accueil (sans changer d'onglet), avec un bouton « ‹ Retour » (+ retour natif Android géré en JS via popstate). */ #liteMsgBack { display: none; } body.sm-lite.lite-msg-on .tab-panel[data-panel="connexions"] { display: block !important; position: fixed !important; inset: 0 !important; z-index: 3000 !important; background: var(--bg, #fff4e6) !important; overflow-y: auto !important; margin: 0 !important; padding: calc(.9rem + env(safe-area-inset-top)) 1rem calc(1.5rem + env(safe-area-inset-bottom)) !important; } body.sm-lite.lite-msg-on #matesHome > h1, body.sm-lite.lite-msg-on #matesHome > .muted, body.sm-lite.lite-msg-on #matesHome .lite-materow, body.sm-lite.lite-msg-on #matesHome .mseg { display: none !important; } body.sm-lite.lite-msg-on #liteMsgBack { display: inline-flex; align-items: center; gap: .25rem; background: none; border: 0; color: var(--accent); font-weight: 800; font-size: 1.05rem; padding: .1rem 0 .9rem; cursor: pointer; } /* ============================================================ PEAUFINAGE v565 — logo icon.svg, titre Sécurité, cercle == contacts, recherche messages. ============================================================ */ /* CERCLE replié : bouton ↻ COMPACT (icône seule) → entête épurée, alignée sur « Mes contacts d'urgence » (emoji + titre + chevron, et le rafraîchir discret dedans). */ body.sm-lite #refreshCircleBtn { padding: .3rem .55rem !important; font-size: 0 !important; line-height: 1 !important; } body.sm-lite #refreshCircleBtn::before { content: "↻"; font-size: 1.05rem; font-weight: 800; } /* Titre Sécurité injecté : même rendu que les autres titres d'onglet (déjà couvert par la règle .tab-panel > h1, mais on le garde net et centré). */ body.sm-lite #liteSecuTitle { margin-top: 1.1rem; } /* MESSAGES : barre de recherche en haut du panneau messages. */ body.sm-lite .lite-msgsearch { margin: 0 0 .7rem; } body.sm-lite #liteMsgSearch { width: 100%; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font-size: .95rem; outline: none; } body.sm-lite #liteMsgSearch:focus { border-color: var(--accent); } /* PROFIL fusionné — MODE SOMBRE : les .card ont un dégradé (clair en haut → foncé en bas) → au JOINT des 2 cartes fusionnées, le bas foncé de la 1re rencontre le haut clair de la 2e = BANDE de séparation. On force un fond PLAT identique sur les deux → couture invisible en nuit. */ body.sm-lite.theme-dusk #profMain .prof-head, body.sm-lite.theme-dusk #profMain .prof-head + .card { background: #241640 !important; } /* v785 · #4 (retour Maxime « le mode Jeux est un copier-coller du complet en Lite → version épurée »). En Lite, le hub Jeux garde l'ESSENTIEL (quête du jour + nav + classement/coupons) et masque les couches « jeu vidéo » profondes : collection de quêtes, ville à l'honneur, quête la plus proche, rail de badges. Plus léger, lisible, MVP. */ body.sm-lite #jeuxHome #questCollection, body.sm-lite #jeuxHome #capitaleDuJour, body.sm-lite #jeuxHome #nearestQuest, body.sm-lite #jeuxHome #badgeRailSection, body.sm-lite #jeuxHome .jnav-cap { display: none !important; } /* v785b · Lite Jeux épuré (suite) : on masque aussi la liste « Ta progression » (Objectifs de la semaine / Collection / Ville à l'honneur) → reste l'essentiel (niveau + quête du jour + nav). */ body.sm-lite #jeuxHome .prog-card, body.sm-lite #jeuxHome .prog-row { display: none !important; }