/* =================================================================== SUNMATES, Système de design (thème clair / corail) Inspiré des maquettes UX/UI : fond clair, couleur corail, cartes blanches arrondies, barre de navigation en bas. =================================================================== */ :root { /* Couleurs */ --bg: #FFF4E6; /* v697 : ALIGNÉ sur le vrai fond (html=#FFF4E6). Avant #fbeee9 ≠ fond → barre native (theme-color=--bg) ≠ app = LA barre de séparation. Hiver/tropique n'avaient pas ce décalage = parfaits. */ --bg-grad: radial-gradient(125% 85% at 50% -12%, #ffe6d2 0%, #fdeee7 40%, #fbe9e4 100%); --card: #ffffff; /* cartes */ --accent: #FF5A4D; /* corail principal */ --accent-2: #FF8A3D; /* corail clair */ --accent-3: #FFC93C; /* ambre (coucher de soleil) */ --accent-grad: linear-gradient(135deg, #FFC93C 0%, #FF8A3D 45%, #FF5A4D 100%); --accent-soft: #fdeceb; /* fond corail très pâle (chips, icônes) */ --ink: #1d2230; /* titres */ --text: #454b59; /* texte */ --muted: #9aa0ac; /* texte secondaire */ --ok: #1E7A5A; /* vert sobre raccord DA (plus de vert criard) */ --danger: #ef4444; --line: #f0e6e4; /* séparateurs */ /* Formes */ --radius: 22px; --radius-sm: 14px; --radius-lg: 28px; --shadow: 0 14px 40px rgba(45,38,52,.10), 0 4px 12px rgba(20,20,40,.05); /* P12 : dé-rougi */ --shadow-sm: 0 6px 18px rgba(20,20,40,.06); --shadow-pop: 0 18px 50px rgba(40,34,46,.20); --ring: 0 0 0 4px rgba(255,90,77,.16); /* Échelle de z-index nommée (valeurs identiques à l'existant ; ordre du plus bas au plus haut). Centralisée ici pour éviter les conflits d'empilement. */ --z-header: 50; /* en-tête collant */ --z-nav: 60; /* barre de navigation du bas */ --z-picker: 6000; /* overlay sélecteur (choisir un Mate) · AU-DESSUS des feuilles/modales (z-modal 4300), sinon il s'ouvre DERRIÈRE (bug « Défier un Mate » invisible) ; sous popinfo 6500 + fakecall 6700 */ --z-notif: 210; /* panneau de notifications */ --z-toast: 300; /* toasts éphémères */ --z-pwa: 400; /* bannière « installer l'app » */ --z-alert: 1000; /* bannière d'alerte d'urgence */ --z-map-fs: 3500; /* carte en plein écran */ --z-onb: 4000; /* onboarding */ --z-tour: 4200; /* visite guidée */ --z-modal: 4300; /* fenêtres modales (création d'activité…) */ --z-demo: 5000; /* barre de la démo auto-pilotée */ --z-consent: 5500; /* bannière de consentement RGPD */ --z-confetti: 6000; /* confettis (au-dessus du contenu) */ --z-signal: 6400; /* écran signal lumineux SOS */ --z-popinfo: 6500; /* tuile explicative centrée */ --z-sheet: 6600; /* bottom-sheet du sélecteur DA */ --z-fakecall: 6700; /* faux appel plein écran (doit couvrir TOUT) */ /* Lot C : valeurs jadis « brutes » nommées (MÊMES valeurs, aucun ré-empilement) */ --z-safetimer:1200; /* barre minuteur sécurité (au-dessus du contenu, sous les modales) */ --z-gchat: 6200; /* overlay chat de groupe */ --z-fx: 8000; /* effets météo/saison décoratifs plein écran */ --z-ribbon: 9999; /* ruban préversion (artefact dev) */ --z-egg: 99998; /* easter eggs cinématiques + écran de bannissement (couvrent tout) */ --z-egg-top: 99999; /* boot CRT / retro fx (au-dessus même des eggs) */ } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Feeling APP (pas web) : on désactive la sélection de texte sur l'UI… */ * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* …mais on la GARDE là où copier a du sens : champs de saisie, messages, posts du fil. */ input, textarea, select, [contenteditable="true"], .bubble, .bubble-txt, .bubble-audio span, .fpost-body, .smeta, .sname, .selectable, .selectable * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } html, body { height: 100%; } /* P10-fix : le fond de suit le MODE via :has() · la v444 round 1 mettait var(--bg) sur html, or les thèmes redéfinissent les variables sur BODY → en mode sombre, le fond crème-rosé du :root transparaissait (le fameux « arrière-plan rose », un BUG, pas une DA). Et le calque body::before (bande unie sur la zone status bar) est SUPPRIMÉ : c'est LUI qui créait la coupure nette au-dessus du fondu du header · le header peint déjà cette zone. */ html { background: #FFF4E6; } /* = le --bg JOUR effectif (dernier :root l.3004) + theme-color → la zone haute/safe-area ne fait plus une bande plus foncée (#fbeee9 mort) avec la barre native */ html:has(body.theme-dusk) { background: #190E2E; } /* Bug haut/overscroll : aligné sur le VRAI --bg nuit (#190E2E), avant #171026 = liseré au rebond */ html:has(body.theme-winter) { background: #EAF3FB; } html:has(body.theme-tropic) { background: #F7F9EC; } html:has(body.theme-winter.theme-dusk) { background: #0F1B2B; } html:has(body.theme-tropic.theme-dusk) { background: #0C1D17; } /* CASSURE haut d'écran (barre native ≠ haut de SunMates) : le topbar est transparent et laisse voir le HALO #bgFx (clair/coloré) sous la status-bar, alors que theme-color = --bg (plus foncé) → séparation nette dans tous les modes (surtout en nuit : barre quasi-noire vs halo violet vif). Fix universel : on COIFFE le haut de #bgFx d'un aplat var(--bg) qui s'efface en descendant → le haut de l'app = var(--bg) = theme-color = barre native (fondu invisible), le halo reste plus bas. */ /* v686 (retour Maxime « le header pas tout à fait la même couleur » + « tache moche en haut au milieu, nuit ») : on étend la COIFFE plate var(--bg) du sommet (64→138px solide) → tout le haut (status-bar + header + un peu en dessous) est STRICTEMENT la même couleur que la barre native ; le halo (chaud le jour / violet la nuit) ne bloome qu'EN DESSOUS et plus doucement → plus de cassure de teinte, plus de « tache ». */ /* v703 : le fond est désormais STRICTEMENT plat var(--bg) partout (halos supprimés v688) → cette coiffe en dégradé est DEVENUE INUTILE et c'était la dernière source possible de « dégradé » en haut. On la NEUTRALISE complètement. */ #bgFx::after { content: none !important; display: none !important; } /* (Écran de chargement #smBoot retiré v722 : doublon avec le splash OS + masquait le chargement.) */ /* Apparition FLUIDE de l'app quand elle se révèle (fondu doux au lieu d'un pop sec). */ #appView:not(.hidden) { animation: smAppIn .32s ease both; } @keyframes smAppIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #appView:not(.hidden) { animation: none; } } /* Barre de défilement thémée DA (fini le blanc système). Firefox + WebKit/Blink. Les conteneurs en scrollbar-width:none (chips, etc.) restent masqués (specificité de classe). */ /* v735 (validé Maxime) : scrollbar CORAIL thémée AUSSI en jour (DESIGN §6 « scrollbar thémée corail, jamais neutre système »). Opacité contenue (.42) pour rester discrète en clair. Nuit déjà corail (l.107). */ * { scrollbar-width: thin; scrollbar-color: rgba(255,90,77,.42) transparent; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,90,77,.42); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,90,77,.62); background-clip: padding-box; } body.theme-dusk * { scrollbar-color: rgba(255,90,77,.5) transparent; } body.theme-dusk ::-webkit-scrollbar-thumb { background: rgba(255,90,77,.45); background-clip: padding-box; } body.theme-dusk ::-webkit-scrollbar-thumb:hover { background: rgba(255,90,77,.65); background-clip: padding-box; } /* Lot B : la barre suit aussi les saisons (avant : brun chaud le jour, corail la nuit · hors palette en bleu/vert) */ body.theme-winter * { scrollbar-color: rgba(95,168,232,.5) transparent; } body.theme-winter ::-webkit-scrollbar-thumb { background: rgba(95,168,232,.42); background-clip: padding-box; } body.theme-winter ::-webkit-scrollbar-thumb:hover { background: rgba(95,168,232,.62); background-clip: padding-box; } body.theme-tropic * { scrollbar-color: rgba(43,196,138,.5) transparent; } body.theme-tropic ::-webkit-scrollbar-thumb { background: rgba(43,196,138,.42); background-clip: padding-box; } body.theme-tropic ::-webkit-scrollbar-thumb:hover { background: rgba(43,196,138,.62); background-clip: padding-box; } body { font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* Conteneur façon téléphone, centré */ .app-shell { max-width: 460px; margin: 0 auto; min-height: 100vh; /* P2.6 : 100dvh = la VRAIE hauteur visible du moment (barres du navigateur comprises) · 100vh laissait une bande vide en bas sur Android/iPhone quand la barre se rétracte. */ min-height: 100dvh; background: var(--bg); position: relative; display: flex; flex-direction: column; } /* ----------------------------- Header --------------------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; /* safe-area-inset-top : laisse la place de l'encoche / status bar (iPhone) sans chevauchement */ padding: calc(1rem + env(safe-area-inset-top, 0px)) max(.45rem, env(safe-area-inset-right)) 1.05rem max(.45rem, env(safe-area-inset-left)); position: sticky; top: 0; z-index: var(--z-header); /* header FLUSH (logo gauche / boutons droite, pleine largeur) — retour Maxime */ box-sizing: border-box; /* P3 (retour Maxime) : la TRANSPARENCE revient, mais propre · opaque sur 62 % (la status bar et le titre restent couverts → icônes natives du téléphone toujours lisibles), puis fondu DOUX vers transparent. Ce qui gênait avant : le dégradé partait de 86 % d'opacité (jamais plein) + une bordure de fin visible (« la barre noire ») → 100 % opaque en haut, AUCUNE bordure. */ background: linear-gradient(var(--bg) 62%, rgba(255,244,230,0)); /* v684 : auto-hide au scroll (cf. setupScrollHeader) — glisse hors champ en douceur */ transition: transform .34s cubic-bezier(.4,0,.2,1), background .25s ease; will-change: transform; } body.sm-hdrhide .topbar { transform: translateY(-101%); } @media (prefers-reduced-motion: reduce) { .topbar { transition: background .25s ease; } body.sm-hdrhide .topbar { transform: none; } } /* v684 · Motion d'entrée façon Emil (blocs qui se posent en glissant, stagger via --sm-rd) */ .sm-reveal { opacity: 0; transform: translateY(14px); transition: opacity .38s cubic-bezier(.23,1,.32,1) var(--sm-rd, 0ms), transform .38s cubic-bezier(.23,1,.32,1) var(--sm-rd, 0ms); } /* v732 : plus snappy (ressenti) */ .sm-reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .sm-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* min-width:0 : le wordmark peut rétrécir au lieu de pousser les actions ; padding-right : espace constant avec le bouton thème */ /* flex:0 1 auto + overflow:hidden : la marque peut rétrécir/clipper au lieu de DÉBORDER par-dessus les boutons d'action (chevauchement « SunMates » sur la cloche/thème vu sur petits Android/iPhone). */ .brand { display: flex; align-items: center; gap: .5rem; flex: 0 1 auto; min-width: 0; overflow: hidden; padding-right: .25rem; font-weight: 800; font-size: 1.15rem; color: var(--ink); letter-spacing: .5px; } .topbar-actions { flex-shrink: 0; } .brand .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-grad); display: grid; place-items: center; font-size: 16px; box-shadow: var(--shadow-sm); } /* Les 3 glyphes de la barre du haut (soleil-logo, cloche, lune/soleil-thème) rendus à la MÊME taille exacte (22px) quelle que soit leur source SVG (évite l'effet « tailles différentes »). */ .brand .mark svg, #notifBell svg, #themeToggle svg { width: 22px !important; height: 22px !important; display: block; } .brand b { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand b .sun { color: var(--accent-ink, var(--accent)); } /* Marque « SunMates Pro » : soleil doré distinct + badge PRO (espace B2B) */ .mark-pro { background: linear-gradient(150deg,#FFC93C,#E89B2B) !important; box-shadow: 0 6px 16px rgba(232,155,43,.4) !important; } .pro-tag { font-size: .62rem; font-weight: 900; letter-spacing: .08em; color: #fff; background: linear-gradient(135deg,#E89B2B,#C98A1E); padding: .12rem .4rem; border-radius: 8px; vertical-align: middle; } /* ----------------------------- Texte ---------------------------- */ h1 { font-size: 1.5rem; margin: 0 0 .25rem; color: var(--ink); font-weight: 800; } h2 { margin: 0 0 .9rem; font-size: 1.2rem; color: var(--ink); font-weight: 700; } h3 { font-size: 1rem; color: var(--ink); font-weight: 700; margin: 1.2rem 0 .5rem; } .muted { color: var(--muted); } .section-head { display: flex; align-items: center; justify-content: space-between; } .section-head a { color: var(--accent-ink, var(--accent)); font-size: .8rem; font-weight: 600; text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none; } /* ----------------------------- Cartes --------------------------- */ main { flex: 1; padding: 0 1.25rem calc(7rem + env(safe-area-inset-bottom, 0px)); } .card { background: var(--card); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow); border: 1px solid #fff; } /* ----------------------------- Champs --------------------------- */ label { display: block; font-size: .82rem; color: var(--muted); margin: .8rem 0 .3rem; font-weight: 500; } input, textarea, select { width: 100%; padding: .8rem .9rem; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: #fff; color: var(--text); font-size: .95rem; font-family: inherit; transition: border-color .15s, box-shadow .15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } /* iOS : un champ < 16px déclenche un ZOOM auto au focus qui reste bloqué (« la Sécurité casse le zoom »). On force 16px sur les écrans TACTILES pour TOUS les champs → plus de zoom intempestif. Le pinch-zoom (a11y) reste possible. */ @media (pointer: coarse) { input, textarea, select, .search input, .ice-fin, #numbersSearch, #advFilters input, #advFilters select { font-size: 16px !important; } } /* ----------------------------- Boutons -------------------------- */ button { border: 0; border-radius: var(--radius-sm); padding: .8rem 1.2rem; font-size: .95rem; cursor: pointer; font-weight: 600; font-family: inherit; transition: transform .08s, filter .15s; } button:active { transform: scale(.97); } /* Arrondi explicite : ces classes servent aussi sur des (ex. bouton 112) qui n'héritent PAS du border-radius du sélecteur button -> on l'impose ici pour une DA cohérente. */ .btn-primary, .btn-accent, .btn-ghost, .btn-danger { border-radius: 999px; } /* v735 (validé Maxime) : pilule 999px, DESIGN §5 Buttons «Shape: pilule» */ /* #5 : halo DÉRIVÉ de l'accent du thème (plus de lueur rouge figée dans tous les modes) + adouci */ .btn-primary { background: var(--accent-grad); color: #fff; text-shadow: 0 1px 2px rgba(120,40,10,.28); box-shadow: 0 4px 10px color-mix(in oklab, var(--accent, #FF5A4D) 16%, transparent); } /* P12 : halo bouton adouci ; a11y : ombre de texte = blanc lisible sur le dégradé pâle (contraste) */ .btn-primary:hover { filter: brightness(1.04); } .btn-accent { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); font-weight: 700; } .btn-ghost { background: #fff; color: var(--text); border: 1.5px solid var(--line); } .btn-danger { background: var(--accent-grad); color: #fff; width: 100%; font-size: 1.05rem; padding: 1rem; box-shadow: 0 6px 18px rgba(45,38,52,.16); } .btn-block { width: 100%; } .row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; } .row > button { flex: 1; } /* Tuiles d'action colorées (fiche profil voyageur) */ .act-tile { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .8rem .9rem; border-radius: 14px; border: 1.5px solid transparent; font-weight: 700; font-size: .95rem; cursor: pointer; transition: transform .08s ease, box-shadow .15s ease; } .act-tile:hover { transform: translateY(-1px); } .act-tile .ic { width: 36px; height: 36px; border-radius: 14px; display: grid; place-items: center; font-size: 1.15rem; flex-shrink: 0; } .act-tile .lbl { flex: 1; } .act-tile .arr { opacity: .45; font-size: 1.2rem; font-weight: 800; } .act-challenge { background: #efeaff; color: #6a4bff; border-color: #ddd3ff; } .act-challenge .ic { background: #ddd3ff; } .act-challenge:hover { box-shadow: 0 8px 18px rgba(45,38,52,.22); } .act-bff { background: #fff6e8; color: #b9740a; border-color: #ffe6c2; } .act-bff .ic { background: #ffe6c2; } .act-bff:hover { box-shadow: 0 8px 18px rgba(255,178,116,.3); } .act-block { background: #fef2f2; color: #dc2626; border-color: #fbd5d5; } .act-block .ic { background: #fbd5d5; } .act-block:hover { box-shadow: 0 8px 18px rgba(45,38,52,.16); } /* Lot C : ombre dé-rougie → gris chaud (doctrine) */ body.theme-dusk .act-challenge { background: rgba(255,138,61,.16); color: #ffce9b; border-color: rgba(255,138,61,.34); } body.theme-dusk .act-challenge .ic { background: rgba(255,138,61,.34); } body.theme-dusk .act-bff { background: rgba(255,178,116,.16); color: #ffce9b; border-color: rgba(255,178,116,.32); } body.theme-dusk .act-bff .ic { background: rgba(255,178,116,.32); } body.theme-dusk .act-block { background: rgba(239,68,68,.15); color: #ff9b9b; border-color: rgba(239,68,68,.32); } body.theme-dusk .act-block .ic { background: rgba(239,68,68,.32); } .act-map { background: #fff3e2; color: #bf6a00; border-color: #ffe2bd; } .act-map .ic { background: #ffe2bd; } .act-map:hover { box-shadow: 0 8px 18px rgba(255,159,28,.25); } .act-teal { background: #fdeceb; color: #d6483a; border-color: #f8d2cd; } .act-teal .ic { background: #f8d2cd; } .act-teal:hover { box-shadow: 0 8px 18px rgba(45,38,52,.22); } body.theme-dusk .act-map { background: rgba(255,159,28,.16); color: #ffce93; border-color: rgba(255,159,28,.32); } body.theme-dusk .act-map .ic { background: rgba(255,159,28,.32); } body.theme-dusk .act-teal { background: rgba(255,90,77,.16); color: #ffb0a6; border-color: rgba(255,90,77,.32); } body.theme-dusk .act-teal .ic { background: rgba(255,90,77,.32); } /* ---- Rangée de tuiles colorées (catégories Lieux / navigation Jeux) ---- */ .cat-row { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; padding: .2rem .05rem .5rem; margin: .2rem 0 .5rem; scrollbar-width: none; } /* Onglet Jeux : nav en grille 3×2 propre (équilibrée), au lieu de 4+2 */ #jeuxNav { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; } #jeuxNav .cat-tile { min-width: 0; width: auto; } .cat-row::-webkit-scrollbar { display: none; } .cat-tile { flex: 0 0 auto; min-width: 84px; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: .65rem .5rem; text-align: center; cursor: pointer; transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease; } .cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .cat-tile:active { transform: scale(.96); } .cat-tile .cic { position: relative; overflow: hidden; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; line-height: 1; margin: 0 auto .35rem; color: #fff; box-shadow: inset 0 -8px 16px rgba(0,0,0,.08); } .cat-tile .cic::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(157deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 26%, rgba(255,255,255,0) 54%); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); pointer-events: none; } /* P8 : le libellé peut REVENIR à la ligne au lieu de déborder (textes EN plus longs, petits écrans) */ .cat-tile .clbl { font-size: .74rem; font-weight: 700; color: var(--ink); white-space: normal; overflow-wrap: anywhere; line-height: 1.15; } .cat-tile.active { border-color: var(--accent); box-shadow: 0 6px 16px rgba(45,38,52,.2); } .cic.c-sun { background: var(--accent-grad); } /* DA : pas de vert vif ni de bleu ciel « hors-DA » → turquoise bijou + indigo nuit (palette émaillée). #16 : les couleurs passent par --c1/--c2 → la couche « palette malléable » (fin de feuille) les MARIE au thème actif (nuit/hiver/tropiques) via color-mix, plus de couleurs figées. */ .cic.c-green { --c1:#4ED8B8; --c2:#179E8C; } .cic.c-blue { --c1:#9D86FF; --c2:#5E3FE0; } .cic.c-purp { --c1:#b9a6ff; --c2:#7c5cff; } .cic.c-gold { --c1:#FFD15C; --c2:#F4A11E; } .cic.c-pink { --c1:#ffa7d1; --c2:#ff5e9f; } .cic.c-green, .cic.c-blue, .cic.c-purp, .cic.c-gold, .cic.c-pink { background: var(--accent-grad); } /* v570 : cohérence RH (suit l'accent du preset, comme .c-sun) */ /* Hiérarchie de l'onglet Jeux : 2 groupes (Jouer / Progresser) + 2 tuiles PRIMAIRES plus grandes. #jeuxNav était une grille 3-col (l.292) → on repasse en bloc pour empiler les groupes. */ #jeuxNav { display: block; } .jnav-cap { font-size: .72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: .55rem .15rem .2rem; } .cat-row.jnav-primary { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; } .cat-row.jnav-secondary { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; } .jnav-primary .cat-tile, .jnav-secondary .cat-tile { min-width: 0; } .jnav-primary .cat-tile { padding: .75rem .5rem; } .jnav-primary .cat-tile .cic { width: 50px; height: 50px; font-size: 1.55rem; border-radius: 14px; } .jnav-primary .cat-tile .clbl { font-size: .82rem; } /* #13/#6 : tuiles de progression au MÊME style joaillerie que la nav (cic + label, carte blanche), + 1 tuile scindée en 2 (quête proche | ville à l'honneur). */ /* Refonte « Ta progression » (retour Maxime : trop de tuiles carrées qui clonaient la nav) : carte-LISTE avec données live → identité distincte, hiérarchie nav(tuiles) ≠ progression(liste). */ /* Carte chaude « lever de soleil » : crème → abricot, filigrane ☀, rangées UNIFORMES (retour Maxime). */ .prog-card { padding: .2rem 0; margin-bottom: .55rem; overflow: hidden; position: relative; background: linear-gradient(168deg, #FFFBF1 0%, #FFF1DE 100%); border: 1.5px solid rgba(232,150,31,.2); } /* Filigrane ☀ retiré (retour Maxime : il tombait pile sur la rangée « Objectifs » et semblait être une icône) */ .prog-row { position: relative; z-index: 1; display: flex; align-items: center; gap: .7rem; width: 100%; padding: .68rem .9rem; background: transparent; border: 0; border-bottom: 1px solid rgba(176,142,116,.18); text-align: left; cursor: pointer; font: inherit; color: var(--ink); } .prog-row:last-child { border-bottom: 0; } .prog-row:active { background: rgba(255,138,61,.1); } .prog-row .cic { position: relative; overflow: hidden; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; font-size: 1.18rem; line-height: 1; color: #fff; box-shadow: inset 0 -8px 16px rgba(0,0,0,.08); } /* Même gloss émaillé que les tuiles de nav → une seule âme SunMates */ .prog-row .cic::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(157deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.1) 28%, rgba(255,255,255,0) 55%); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); pointer-events: none; } .prog-row .pr-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; } .prog-row .pr-tx b { font-size: .86rem; font-weight: 700; color: var(--ink-warm, var(--ink)); } .prog-row .pr-sub { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prog-row .pr-val { flex: 0 0 auto; font-size: .8rem; font-weight: 800; color: var(--accent-ink, var(--accent)); background: rgba(255,90,77,.09); border-radius: 999px; padding: .12rem .5rem; } .prog-row .pr-chev { flex: 0 0 auto; color: var(--accent-ink, var(--accent)); font-weight: 700; } body.theme-dusk .prog-row { border-bottom-color: rgba(255,255,255,.08); } /* (anciennes tuiles carrées de progression · classes gardées pour compat si réutilisées ailleurs) */ .prog-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; margin-bottom: .55rem; } .prog-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: .55rem; } .prog-tile, .prog-half { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center; cursor: pointer; padding: .85rem .5rem; color: var(--ink); font: inherit; min-height: 88px; transition: transform .12s ease; background: var(--card); } .prog-tile { border: 1.5px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); } .prog-half { border: 0; } .prog-half.ps-city { background: linear-gradient(135deg, rgba(255,201,60,.18), rgba(255,138,61,.12)); } /* ville à l'honneur : nuance chaude gardée (dénote un peu, voulu) */ .prog-tile:active, .prog-half:active { transform: scale(.97); } .prog-tile .clbl, .prog-half .clbl { font-size: .76rem; font-weight: 700; color: var(--ink); white-space: normal; } .prog-tile .cic, .prog-half .cic { width: 44px; height: 44px; font-size: 1.4rem; border-radius: 14px; } body.theme-dusk .prog-tile, body.theme-dusk .prog-half { background: var(--dcard,#2a2140); } body.theme-dusk .prog-half.ps-city { background: linear-gradient(135deg, rgba(255,201,60,.14), rgba(255,138,61,.10)); } /* ---- Carte « N éléments au même endroit » (>6 marqueurs co-localisés) ---- */ .coloc-card { min-width: 180px; } .coloc-head { font-weight: 800; color: var(--ink); margin-bottom: .5rem; font-size: .95rem; } .coloc-row { display: flex; align-items: center; gap: .4rem; padding: .25rem 0; color: var(--ink); font-size: .85rem; } .coloc-row b { color: var(--accent-ink, var(--accent)); } .coloc-btn { margin-top: .6rem; width: 100%; background: var(--accent-grad); color: #fff; border: 0; border-radius: 14px; padding: .5rem; font-weight: 800; font-size: .82rem; cursor: pointer; } /* ---- Fil d'actualité (posts) : cartes à bandeau coloré ---- */ /* Composer du fil communautaire */ .feed-composer { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: .85rem .9rem; margin-bottom: .8rem; box-shadow: var(--shadow-sm); overflow: hidden; } .feed-composer .fc-row { display: flex; gap: .6rem; align-items: center; min-width: 0; } .feed-composer .fc-av { font-size: 1.4rem; flex-shrink: 0; line-height: 1; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); } body.theme-dusk .feed-composer .fc-av { background: var(--dcard,#2a2140); } /* P8 : VRAI centrage du placeholder · min-height 44px avec padding symétrique (11,5px ×2 + ligne 21px = 44px pile), face à l'avatar 38px. Avant : 52px avec 8px en haut → le « Écris quelque chose… » flottait en haut. */ .feed-composer textarea { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; border: 0; background: transparent; resize: none; font: inherit; color: var(--ink); padding: .72rem .4rem; min-height: 44px; max-height: 10rem; overflow-y: auto; line-height: 1.4; word-break: break-word; } /* v572 : plus de hauteur → la question de sondage n'est plus rognée */ .feed-composer textarea:focus { outline: none; } .feed-composer .fc-bottom { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .4rem; flex-wrap: wrap; } .feed-composer .fc-kinds { display: flex; gap: .25rem; background: var(--cream); border-radius: 999px; padding: .2rem; } body.theme-dusk .feed-composer .fc-kinds { background: var(--dcard,#2a2140); } .fc-chips { display: flex; gap: .35rem; overflow-x: auto; padding: .5rem 0 .2rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .fc-chips::-webkit-scrollbar { display: none; } .fc-chip { flex: 0 0 auto; font-size: .78rem; font-weight: 600; padding: .35rem .65rem; border-radius: 999px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); cursor: pointer; white-space: nowrap; } .fc-chip:active { transform: scale(.96); } .fc-chip.on { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: 0 2px 7px rgba(45,38,52,.16); } body.theme-dusk .fc-chip { background: var(--dcard,#2a2140); color: #eee; border-color: rgba(255,255,255,.1); } .fc-hint { font-size: .72rem; color: var(--muted); font-weight: 600; margin-top: .35rem; } .fc-kind { font-size: .76rem; font-weight: 700; padding: .35rem .75rem; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; } .fc-kind.active { background: var(--accent-grad); color: #fff; box-shadow: 0 2px 8px rgba(45,38,52,.16); } /* P8 : halo du bouton Publier ADOUCI et remonté (l'ombre descendait sur la note « Visible par toute la communauté » juste en dessous et la voilait). */ .fc-send { padding: .45rem 1rem; font-size: .85rem; box-shadow: 0 2px 6px color-mix(in oklab, var(--accent, #FF5A4D) 22%, transparent) !important; } body.theme-dusk .fc-kind { background: var(--dcard,#2a2140); color: #eee; border-color: rgba(255,255,255,.1); } /* v572 (retour Maxime) : en NUIT, l'état SÉLECTIONNÉ de Humeur/Spot/Sondage + des chips d'humeur était écrasé par les règles body.theme-dusk (spécificité supérieure) → aucune distinction. On ré-affirme l'accent sur l'état actif/sélectionné en nuit. */ body.theme-dusk .fc-kind.active { background: var(--accent-grad) !important; color: #fff !important; border-color: transparent !important; } body.theme-dusk .fc-chip.on { background: var(--accent-grad) !important; color: #fff !important; border-color: transparent !important; } /* Post : barre d'actions (like / supprimer) */ .fpost-body { margin-top: .55rem; font-size: .92rem; color: var(--ink); line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .fpost-actions { display: flex; align-items: center; gap: 1rem; margin-top: .55rem; } .fpost-like { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; cursor: pointer; font-weight: 700; font-size: .82rem; color: var(--muted); } .fpost-like.liked { color: var(--accent-ink, var(--accent)); } .fpost-del { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--muted); font-size: .9rem; } .fpost-kindtag { font-size: .7rem; font-weight: 800; padding: .1rem .45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink, var(--accent)); margin-left: .4rem; } /* Lot A2 : encre foncée sur corail pâle */ /* Séparation NETTE entre les posts (avant : cartes qui se fondaient, surtout en mode nuit) */ .fpost { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: .8rem .9rem; margin-bottom: .9rem; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; } body.theme-dusk .fpost { background: var(--dcard2,#241b35); border-color: rgba(255,255,255,.12); box-shadow: 0 10px 26px rgba(0,0,0,.4); } /* Chip « Dispo ? » : intention de rencontre. État actif = ambre/sunset (jamais vert vif, DA). */ .avail-chip { flex-shrink: 0; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px; padding: .44rem .72rem; font-size: .74rem; font-weight: 800; cursor: pointer; transition: .12s; } /* v570 ergo : zone tactile ~36px */ .avail-chip:active { transform: scale(.95); } .avail-chip.on { background: linear-gradient(135deg, #FFC93C, #FF8A3D); color: #6b3d00; border-color: transparent; box-shadow: 0 2px 8px rgba(255,138,61,.35); } /* Pastille « Dispo maintenant » affichée sur la fiche d'un voyageur */ .avail-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 800; color: #6b3d00; background: linear-gradient(135deg, #FFD15C, #FF9F1C); border-radius: 999px; padding: .15rem .5rem; } /* Barre minuteur « Rentrée en sécurité » : sunset, fixée au-dessus de la nav, visible partout */ #safeTimerBar { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-safetimer); margin: 0 auto; max-width: 460px; width: calc(100% - 1.4rem); display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: 14px; background: linear-gradient(135deg, #FF8A3D, #FF5A4D); color: #fff; box-shadow: 0 8px 22px rgba(45,38,52,.16); font-size: .85rem; font-weight: 700; } #safeTimerBar .stb-ic { font-size: 1.1rem; } #safeTimerBar .stb-txt { flex: 1; } #safeTimerBar #safeArrivedBtn { background: rgba(255,255,255,.95); color: #c2410c; border: 0; border-radius: 999px; padding: .4rem .7rem; font-weight: 800; font-size: .8rem; cursor: pointer; flex-shrink: 0; } #safeTimerBar #safeArrivedBtn:active { transform: scale(.95); } /* 📊 Sondages du fil */ .poll-box { margin-top: .5rem; display: flex; flex-direction: column; gap: .35rem; } .poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: .5rem .7rem; font-size: .86rem; font-weight: 600; color: var(--ink); cursor: pointer; } .poll-opt:active { transform: scale(.99); } .poll-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent-soft); z-index: 0; transition: width .4s ease; } .poll-opt-mine { border-color: var(--accent); } .poll-opt-mine .poll-fill { background: linear-gradient(90deg, rgba(255,138,61,.30), rgba(255,90,77,.20)); } .poll-lbl { position: relative; z-index: 1; flex: 1; min-width: 0; } .poll-pct { position: relative; z-index: 1; font-weight: 800; color: var(--accent-ink, var(--accent)); font-size: .8rem; flex-shrink: 0; } .poll-total { font-size: .74rem; color: var(--muted); margin-top: .1rem; } /* ⭐ Mate du jour (suggestion quotidienne, sunset) */ .mod-card { background: var(--accent-grad); color: #fff; border-radius: 16px; padding: .7rem .85rem; margin-bottom: .7rem; box-shadow: 0 8px 20px rgba(45,38,52,.28); cursor: pointer; } .mod-card:active { transform: scale(.99); } .mod-lbl { font-size: .72rem; font-weight: 800; opacity: .95; margin-bottom: .4rem; letter-spacing: .03em; } .mod-row { display: flex; align-items: center; gap: .6rem; } .mod-info { flex: 1; min-width: 0; } .mod-name { font-weight: 800; font-size: .98rem; } .mod-meta { font-size: .78rem; opacity: .92; } .mod-go { font-weight: 800; font-size: .82rem; flex-shrink: 0; } .mod-card .avatar { border: 2px solid rgba(255,255,255,.6); flex-shrink: 0; } /* ✈️ Mes voyages */ .trip-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: .75rem .85rem; margin-bottom: .6rem; box-shadow: var(--shadow-sm); } .trip-top { display: flex; align-items: center; gap: .6rem; } .trip-city { flex: 1; font-weight: 800; color: var(--ink); font-size: .98rem; min-width: 0; } .trip-dates { flex-shrink: 0; font-size: .74rem; font-weight: 800; color: #6b3d00; background: linear-gradient(135deg, #FFD15C, #FF9F1C); border-radius: 999px; padding: .18rem .55rem; } .trip-del { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .95rem; flex-shrink: 0; } .trip-note { font-size: .82rem; color: var(--muted); margin-top: .35rem; } .trip-matches { margin-top: .7rem; border-top: 0; padding-top: .2rem; } .trip-matches .tm-lbl { font-size: .76rem; font-weight: 800; color: var(--accent-ink, var(--accent)); margin-bottom: .35rem; } .trip-mate { display: flex; align-items: center; gap: .55rem; padding: .35rem .15rem; cursor: pointer; border-radius: 14px; } .trip-mate:active { background: var(--accent-soft); } .trip-mate .tmn { flex: 1; min-width: 0; font-size: .86rem; font-weight: 600; color: var(--ink); } .trip-mate .tmn .meta { font-size: .72rem; color: var(--muted); font-weight: 500; } .trip-mate .tm-compat { flex-shrink: 0; font-size: .74rem; font-weight: 800; color: var(--accent-ink, var(--accent)); } .trip-empty { text-align: center; padding: 1.2rem 1rem; background: var(--card); border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); font-size: .86rem; } #tripMatchBanner .tmb { display: flex; align-items: center; gap: .5rem; background: var(--accent-grad); color: #fff; border-radius: 14px; padding: .7rem .85rem; margin-bottom: .6rem; box-shadow: 0 8px 20px rgba(45,38,52,.28); font-weight: 700; font-size: .88rem; cursor: pointer; } .fpost { cursor: default; position: relative; } /* le corps blanc n'est PAS cliquable (anti mis-clic) */ /* Burst de cœur au double-tap d'un post (façon Insta) */ .fp-heartburst { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0); font-size: 3.4rem; pointer-events: none; z-index: 5; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); animation: fpHeart .75s ease-out forwards; } @keyframes fpHeart { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0; } 20% { transform: translate(-50%,-50%) scale(1.25); opacity: 1; } 70% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 100% { transform: translate(-50%,-60%) scale(.9); opacity: 0; } } .fpost-top { display: flex; align-items: center; gap: .6rem; cursor: pointer; } /* seul l'en-tête ouvre le profil */ .fpost-top:active { opacity: .75; } .fpost-who { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .fpost-who b { font-size: .9rem; color: var(--ink); } .fpost-who span { font-size: .76rem; color: var(--muted); } .fpost-time { font-size: .72rem; color: var(--muted); white-space: nowrap; } .fpost-badge { display: flex; align-items: center; gap: .7rem; margin-top: .6rem; padding: .65rem .8rem; border-radius: 14px; color: #fff; box-shadow: 0 5px 14px rgba(40,34,46,.18); } /* P12 : dé-rougi */ .fpost-emoji { font-size: 1.9rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); } .fpost-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; } .fpost-txt b { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .92; } .fpost-txt span { font-size: .98rem; font-weight: 800; } .fpost-spark { font-size: 1.15rem; opacity: .9; } .grad-0 { background: linear-gradient(120deg,#FF8A3D,#FF5A4D); } .grad-1 { background: linear-gradient(120deg,#FFC93C,#ff8a3d); } .grad-2 { background: linear-gradient(120deg,#b9a6ff,#7c5cff); } .grad-3 { background: linear-gradient(120deg,#ffd15c,#f4a11e); } .fpost-empty { text-align: center; padding: 1.6rem 1rem; background: var(--card); border: 1px dashed var(--line); border-radius: 18px; } .fpost-empty .fe-emoji { font-size: 2.2rem; display: block; margin-bottom: .4rem; } .fpost-empty .fe-title { font-weight: 800; color: var(--ink); } .fpost-empty .fe-sub { font-size: .82rem; color: var(--muted); margin-top: .2rem; } /* ---- Cartes de lieux (onglet Lieux) : visuelles, photo plein cadre ---- */ .pcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-bottom: .85rem; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } .pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .pcard .pcard-photo { height: 176px; position: relative; background-size: cover; background-position: center; background-color: var(--cream); } .pcard .pcard-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 36%, rgba(0,0,0,.66)); } .pcard .pcard-chip { font-size: .72rem; font-weight: 800; padding: .26rem .55rem; border-radius: 999px; box-shadow: 0 3px 8px rgba(0,0,0,.2); white-space: nowrap; } .pcard .pcard-chips-l { position: absolute; top: .6rem; left: .6rem; z-index: 2; display: flex; gap: .3rem; flex-wrap: wrap; } .pcard .pcard-rate, .pcard .pcard-new { position: absolute; top: .6rem; right: .6rem; z-index: 2; } .pcard-eco { background: linear-gradient(135deg,#4ED8B8,#179E8C); color: #06352D; } /* DA : turquoise bijou (pas de vert émeraude vif) · texte teal foncé ≥4.8:1 (loi de contraste, ANNONCÉ) */ /* « Sois le·la 1er·ère à checker ! » = vrai bouton (lance le check-in), plus un texte gris décoratif */ .pcard-firstck { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--accent-ink, var(--accent)); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } .pcard-top { background: linear-gradient(135deg,#FFC93C,#FF8A3D); color: #4A2A08; } /* texte ambre foncé ≥5:1 (avant : blanc ~1.6:1, échec AA) · ANNONCÉ */ .pcard-rate { background: rgba(255,255,255,.96); color: #8A5800; } .pcard-rate b { opacity: .6; font-weight: 700; } .pcard-new { background: rgba(255,255,255,.92); color: var(--muted); } .pcard .pcard-titlewrap { position: absolute; left: .85rem; right: .85rem; bottom: .55rem; z-index: 2; } .pcard .pcard-title { color: #fff; font-weight: 800; font-size: 1.2rem; line-height: 1.15; text-shadow: 0 2px 10px rgba(0,0,0,.5); } .pcard .pcard-sub { color: rgba(255,255,255,.92); font-size: .78rem; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.55); margin-top: .12rem; } .pcard .pcard-body { padding: .7rem .85rem .85rem; } .pcard .pcard-stats { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .82rem; color: var(--muted); font-weight: 600; margin-bottom: .3rem; } .pcard .pcard-note { color: var(--ink); font-size: .79rem; margin-top: .1rem; margin-bottom: .2rem; background: var(--accent-soft); padding: .35rem .55rem; border-radius: 8px; } .pcard .pcard-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; } .pcard .pcard-actions button { flex: 1 1 calc(50% - .25rem); white-space: nowrap; } /* 2 par ligne sur petits écrans */ /* Bannière d'installation PWA (cachée par défaut, glisse depuis le haut) */ /* 21/06 (retour Maxime « cassure en haut à gauche / pavé flou pas pleine largeur ») : le bandeau flottait EN HAUT, par-dessus le header/logo (carte arrondie quasi-couleur-page, pas pleine largeur → son bord lisait comme une couture). Déplacé EN BAS (au-dessus de la nav), il ne chevauche plus le logo → fini la cassure. Pattern standard d'un prompt d'installation. */ .pwa-banner { position: fixed; left: 50%; bottom: calc(.7rem + env(safe-area-inset-bottom, 0px) + 64px); z-index: var(--z-pwa); width: calc(100% - 1.2rem); max-width: 460px; display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.22); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(160%); transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .3s ease; } .pwa-banner.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .pwa-ic { width: 42px; height: 42px; border-radius: 14px; background: var(--accent-grad); display: grid; place-items: center; font-size: 1.35rem; flex-shrink: 0; } .pwa-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .pwa-txt b { font-size: .95rem; } .pwa-txt span { font-size: .76rem; color: var(--muted); } .pwa-cta { background: var(--accent-grad); color: #fff; border: 0; border-radius: 999px; padding: .55rem .95rem; font-weight: 800; font-size: .85rem; cursor: pointer; flex-shrink: 0; box-shadow: 0 6px 14px rgba(45,38,52,.16); } .pwa-x { background: transparent; border: 0; color: var(--muted); font-size: 1rem; cursor: pointer; flex-shrink: 0; min-width: 44px; min-height: 44px; display: grid; place-items: center; } /* Étapes d'installation (carte explicative) */ .install-steps { margin: 0 0 .4rem; padding-left: 1.2rem; } .install-steps li { font-size: .87rem; line-height: 1.6; color: var(--text); margin-bottom: .3rem; } .install-steps li::marker { color: var(--accent-ink, var(--accent)); font-weight: 800; } /* ---- Skeletons de chargement (perception de rapidité) ---- */ .skel { position: relative; overflow: hidden; background: #ece7e3; border-radius: 14px; } .skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: shimmer 1.25s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } .skel-row { display: flex; gap: .75rem; align-items: center; padding: .65rem .5rem; } .skel-av { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; } .skel-lines { flex: 1; display: flex; flex-direction: column; gap: .5rem; min-width: 0; } .skel-line { height: 11px; border-radius: 8px; } .skel-line.s { width: 40%; } .skel-line.m { width: 65%; } .skel-line.l { width: 88%; } .skel-card { height: 116px; border-radius: 16px; } .skel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } body.theme-dusk .skel { background: rgba(255,255,255,.08); } body.theme-dusk .skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); } /* ---- Cloche : petite sonnerie quand il y a des notifs ---- */ @keyframes bellRing { 0%,100% { transform: rotate(0); } 12% { transform: rotate(13deg); } 24% { transform: rotate(-11deg); } 36% { transform: rotate(8deg); } 48% { transform: rotate(-6deg); } 60% { transform: rotate(3deg); } } .iconbtn.ring { animation: bellRing 1.1s ease; } /* ---- États vides plus chaleureux ---- */ .empty { text-align: center; padding: 1.8rem 1rem; color: var(--muted); } .empty .emoji { font-size: 2.2rem; display: block; margin-bottom: .5rem; opacity: .9; } .empty .empty-ill { width: 78px; height: 78px; border-radius: 50%; margin: 0 auto .8rem; display: grid; place-items: center; background: radial-gradient(120% 90% at 30% 24%, #ffe8d0, #ffba90 78%, #ff9e74); box-shadow: 0 8px 18px -4px rgba(255,138,61,.26), inset 0 1px 1px rgba(255,255,255,.75), inset 0 -2px 4px rgba(180,80,45,.25); } .empty .empty-ill svg { filter: drop-shadow(0 1px 1px rgba(45,38,52,.32)); } .empty .empty-ill .ie { font-size: 2.1rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(45,38,52,.25)); } body.theme-dusk .empty .empty-ill { box-shadow: 0 10px 22px -6px rgba(255,138,61,.35), inset 0 1px 1px rgba(255,255,255,.3); } .empty .etitle { font-weight: 700; color: var(--ink); margin-bottom: .2rem; } .empty .esub { font-size: .86rem; margin-bottom: .9rem; } .empty .btn-primary, .empty .btn-accent { display: inline-flex; width: auto; padding: .55rem 1.1rem; } /* ---- Focus clavier visible (accessibilité) ---- */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; box-shadow: 0 0 0 2px var(--card,#fff); } /* a11y : anneau corail + liseré carte → visible sur les 6 modes, même si l'élément focalisé est lui-même corail */ /* a11y (WCAG 2.4.1) : lien d'évitement clavier — hors écran jusqu'au focus Tab, puis visible en haut à gauche. Invisible à la souris → zéro impact visuel. */ .sm-skip { position: fixed; top: -120px; left: 12px; z-index: 4000; padding: .6rem 1rem; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; border-radius: 14px; transition: top .15s ease; } .sm-skip:focus { top: 12px; } @media (prefers-reduced-motion: reduce) { .sm-skip { transition: none; } } /* ---- Bulles de chat : envoi optimiste (en cours / échec) ---- */ .bubble[data-pending="1"] { opacity: .66; } .bubble.msg-failed { background: #fde2e2 !important; color: #b91c1c !important; opacity: 1 !important; } /* ---- Confettis (déblocage de badge) · refonte « grand soir » : chute + FLOTTEMENT (2 animations imbriquées : l'extérieur tombe, l'intérieur se balance) + starburst. ---- */ /* P2.9 PERF : contain:strict isole la pluie du reste de la page, et le drop-shadow PAR confetti (70 filtres animés à chaque frame !) est retiré → célébration fluide sur mobile. */ .confetti-wrap { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-confetti); overflow: hidden; contain: strict; } .confetti-wrap i { position: absolute; top: -24px; opacity: .95; animation: confettiFall linear forwards; will-change: transform; } .confetti-wrap i b { display: block; width: 100%; height: 100%; animation: confettiSway ease-in-out infinite alternate; will-change: transform; } .confetti-wrap i svg { width: 100%; height: 100%; display: block; } @keyframes confettiFall { to { transform: translateY(108vh); opacity: .85; } } @keyframes confettiSway { from { transform: translateX(-13px) rotate(-50deg); } to { transform: translateX(13px) rotate(50deg); } } /* Starburst central : flash doré + anneau qui s'étend (l'instant de gloire) */ .cfx-burst { position: fixed; left: 50%; top: 42%; width: 16px; height: 16px; margin: -8px; pointer-events: none; z-index: var(--z-confetti); } /* P2.9 PERF mobile : le flou d'arrière-plan des overlays les plus fréquents repeint tout l'écran à l'ouverture (très cher sur téléphone, surtout au-dessus de la carte) → retiré sur écrans tactiles, le voile sombre suffit ; gardé sur desktop. */ @media (pointer: coarse) { .popinfo-ov, .sm-selsheet-ov { backdrop-filter: none; } } .cfx-burst::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #FFF3C4 0%, #FFC93C 45%, rgba(255,154,61,0) 72%); animation: cfxFlash .75s ease-out forwards; } .cfx-burst::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid rgba(255,201,60,.85); animation: cfxRing .8s cubic-bezier(.2,.8,.3,1) forwards; } @keyframes cfxFlash { 0% { transform: scale(.4); opacity: 0; } 18% { opacity: 1; transform: scale(5); } 100% { transform: scale(9); opacity: 0; } } @keyframes cfxRing { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(16); opacity: 0; border-width: 1px; } } /* ==================================================================== NOUVEAUTÉS sociales (session 14), présence, vouch, traduction, match, QR, statut éphémère. Tout reste dans la DA corail/sable. ==================================================================== */ /* ---- Présence « actif récemment » : pastille verte sur l'avatar ---- */ .avatar { position: relative; } /* Statut « en ligne » : ton SUNSET (ambre/doré) raccord DA, plus le vert criard. */ .pdot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #F5A623; border: 2px solid #fff; } body.theme-dusk .pdot { border-color: var(--dcard2,#241b35); } .pdot.lg { width: 15px; height: 15px; border-width: 2.5px; } .presence-pill { display: inline-flex; align-items: center; gap: .28rem; font-size: .72rem; font-weight: 700; color: #8A5800; background: rgba(255,193,77,.18); padding: .08rem .45rem; border-radius: 999px; } .presence-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #F5A623; } body.theme-dusk .presence-pill { color: #ffce8a; background: rgba(255,193,77,.16); } /* ---- Vouch « Recommandé par X Mates » : compact, dans la DA ---- */ .vouch-card { padding: .85rem 1rem; } .vouch-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .vouch-title { font-weight: 800; color: var(--ink); font-size: .92rem; display: flex; align-items: center; gap: .35rem; } .vouch-title b { color: var(--accent-ink, var(--accent)); } .vouch-btn { padding: .5rem .8rem; font-size: .82rem; white-space: nowrap; flex-shrink: 0; } .vouch-row { display: flex; align-items: center; margin-top: .5rem; } .vouch-row:empty { display: none; } .vouch-row .avatar { width: 30px; height: 30px; font-size: .76rem; margin-left: -8px; border: 2px solid #fff; box-shadow: var(--shadow-sm); } .vouch-row .avatar:first-child { margin-left: 0; } body.theme-dusk .vouch-row .avatar { border-color: var(--dcard2,#241b35); } .vouch-more { margin-left: -8px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink, var(--accent)); display: grid; place-items: center; font-weight: 800; font-size: .74rem; border: 2px solid #fff; z-index: 1; } body.theme-dusk .vouch-more { border-color: var(--dcard2,#241b35); } .te-row.te-vouch { cursor: default; } /* ---- Traduction d'un message (sous la bulle, style des méta) ---- */ .bubble-translate { display: inline-flex; align-items: center; gap: .25rem; margin-top: .25rem; font-size: .68rem; font-weight: 700; opacity: .7; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; } .bubble.them .bubble-translate { color: var(--accent-ink, var(--accent)); opacity: .85; } .bubble-translate:hover { opacity: 1; } .bubble-tr { margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed rgba(0,0,0,.12); font-size: .86rem; line-height: 1.35; opacity: .92; } .bubble.me .bubble-tr { border-top-color: rgba(255,255,255,.35); } .bubble-tr .tr-flag { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .7; display: block; margin-bottom: .1rem; } /* ---- « C'est un match ! » : carte festive (réutilise .act-overlay/.act-card) ---- */ .match-card { text-align: center; max-width: 340px; overflow: hidden; position: relative; } .match-emoji { font-size: 3.2rem; animation: floaty 2.6s ease-in-out infinite; } .match-card h3 { font-family: "Fraunces", serif; font-size: 1.7rem; margin: .3rem 0 .2rem; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .match-avs { display: flex; align-items: center; justify-content: center; margin: .9rem 0; } .match-avs .avatar { width: 68px; height: 68px; font-size: 1.5rem; border: 3px solid #fff; box-shadow: var(--shadow); } .match-avs .mlink { margin: 0 -10px; z-index: 2; font-size: 1.45rem; width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); } body.theme-dusk .match-avs .avatar { border-color: var(--dcard2,#241b35); } body.theme-dusk .match-avs .mlink { background: var(--dcard2,#241b35); } /* ---- Pull-to-refresh ---- */ /* #16 : spinner DA SunMates (anneau sunset), pas un « ↻ » générique. */ .ptr { position: fixed; top: env(safe-area-inset-top, 0px); left: 50%; transform: translateX(-50%) translateY(-44px); z-index: var(--z-toast); width: 40px; height: 40px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center; transition: transform .12s ease, opacity .2s ease; opacity: 0; pointer-events: none; } .ptr.show { opacity: 1; } /* PWA : on COUPE le pull-to-refresh NATIF du navigateur (sa molette grise faisait doublon avec la nôtre ci-dessous). Le rafraîchissement passe par notre PTR DA. */ html, body { overscroll-behavior-y: none; } .ptr .ptr-ring { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); border-right-color: var(--accent-2, var(--accent)); } .ptr.spin .ptr-ring { animation: ptrSpin .62s linear infinite; } @keyframes ptrSpin { to { transform: rotate(360deg); } } /* ---- QR de profil (overlay réutilise .act-overlay/.act-card) ---- */ .qr-box { display: grid; place-items: center; padding: 1rem; background: #fff; border-radius: 16px; margin: .6rem auto; width: max-content; box-shadow: var(--shadow-sm); } .qr-box img, .qr-box canvas, .qr-box table { display: block; } #qrScanVideo { width: 100%; border-radius: 14px; background: #000; aspect-ratio: 1/1; object-fit: cover; } .qr-scanline { position: absolute; left: 8%; right: 8%; height: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: qrScan 2s ease-in-out infinite; } @keyframes qrScan { 0%,100% { top: 18%; } 50% { top: 82%; } } /* ---- Statut éphémère « mon spot du jour » (story légère) ---- */ .spot-chip { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .4rem .7rem; border-radius: 999px; background: linear-gradient(135deg, rgba(255,201,60,.18), rgba(255,90,77,.16)); border: 1px solid rgba(255,90,77,.25); color: var(--ink); font-size: .8rem; font-weight: 600; } .spot-chip .se { font-size: 1rem; } .spot-chip .stxt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spot-ring { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--accent) !important; } .spot-compose { display: flex; gap: .5rem; align-items: center; } .spot-compose input[type="text"] { flex: 1; } /* #4/#6 : emoji du spot en GRILLE nette (tout visible d'un coup, fini le scroll à droite). */ .spot-emoji-pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin: .4rem 0 .2rem; } .spot-emoji-pick button { background: var(--accent-soft); border: 1.5px solid transparent; border-radius: 14px; padding: .5rem 0; font-size: 1.3rem; line-height: 1; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .spot-emoji-pick button:active { transform: scale(.94); } .spot-emoji-pick button.active { border-color: var(--accent); background: #fff; box-shadow: 0 5px 14px rgba(45,38,52,.22); transform: translateY(-1px); } .spot-step { font-size: .72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: .55rem 0 .1rem; } /* Spot du jour : suggestions rapides */ .spot-quick { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .7rem; } .spot-quick button { font-size: .78rem; font-weight: 700; padding: .4rem .7rem; border-radius: 999px; border: 0; background: linear-gradient(135deg, rgba(255,201,60,.22), rgba(255,138,61,.2)); color: var(--ink); cursor: pointer; transition: transform .12s ease; } .spot-quick button:active { transform: scale(.95); } body.theme-dusk .spot-quick button { background: rgba(255,138,61,.2); color: #ffe; } .spot-quick button:active { transform: scale(.96); } body.theme-dusk .spot-quick button { background: var(--dcard,#2a2140); color: #eee; border-color: rgba(255,255,255,.1); } /* Carte « spot du jour » repliable pour ne pas encombrer le profil */ .spot-card { padding: .8rem 1rem; } .spot-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 800; color: var(--ink); } .spot-card > summary::-webkit-details-marker { display: none; } .spot-card > summary .sp-right { display: flex; align-items: center; gap: .5rem; min-width: 0; } .spot-card > summary .sp-sum { font-weight: 600; font-size: .8rem; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spot-card > summary .sp-chev { color: var(--accent-ink, var(--accent)); font-weight: 800; transition: transform .2s; } .spot-card[open] > summary .sp-chev { transform: rotate(90deg); } /* ---- Sélecteur de langue (réglages) ---- */ .lang-seg { display: flex; gap: .5rem; } .lang-seg button { flex: 1; box-sizing: border-box; overflow: hidden; border: 1.5px solid var(--line); background: #fff; color: var(--text); border-radius: var(--radius-sm); padding: .7rem; font-weight: 700; } /* Sélecteur de langue compact sur la page de connexion (haut-droite) */ .auth-lang { display: flex; gap: .3rem; justify-content: flex-end; margin-bottom: .6rem; } .auth-lang button { background: var(--cream); border: 1.5px solid var(--line); color: var(--muted); border-radius: 999px; padding: .3rem .7rem; font-size: .76rem; font-weight: 700; cursor: pointer; } .auth-lang button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink, var(--accent)); } /* Bloc Pro / B2B sur la page de connexion */ .auth-pro-card { background: var(--cream); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; } .auth-pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } .auth-pro-grid > div { text-align: center; } .auth-pro-grid .ap-ic { font-size: 1.7rem; } .auth-pro-grid .ap-l { font-size: .8rem; font-weight: 700; color: var(--ink-warm); margin-top: .2rem; } .lang-seg button.active { background: var(--accent-grad); color: #fff; border-color: transparent; } body.theme-dusk .lang-seg button:not(.active) { background: #2b2240; color: #ede6f2; } body.theme-dusk .spot-emoji-pick button:not(.active) { background: rgba(255,255,255,.08); } body.theme-dusk .spot-chip { color: #f3e9f3; } /* v807 · DA plate (Maxime « tjrs des barres de séparation ») : filet retiré, l'espacement seul groupe. */ .set-grouptitle { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink, var(--accent)); margin: 1.3rem 0 .5rem; padding-top: 0; border-top: 0; } .set-grouptitle:first-of-type { border-top: 0; padding-top: 0; margin-top: .8rem; } .set-toggle { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem 0; } .set-toggle .st-lbl { font-weight: 600; color: var(--ink); } .set-toggle .st-sub { font-size: .76rem; color: var(--muted); } /* Mode « lissé » (beta OFF) : on masque les fonctionnalités expérimentales (data-beta / .beta-only). Les piliers (Accueil, Lieux, Sécurité, Mates, Profil) ne portent JAMAIS data-beta → toujours visibles. */ body.sm-lite [data-beta], body.sm-lite .beta-only { display: none !important; } .switch { position: relative; width: 46px; height: 27px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch .sl { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .2s; cursor: pointer; } .switch .sl::before { content: ""; position: absolute; left: 3px; top: 3px; width: 21px; height: 21px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 2px 5px rgba(0,0,0,.2); } .switch input:checked + .sl { background: var(--accent); } .switch input:checked + .sl::before { transform: translateX(19px); } /* ---- Bouton « effacer » (✕) dans les champs de recherche ---- */ .search input { padding-right: 2.4rem; } .search-clear { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.09); color: var(--ink); font-size: .76rem; cursor: pointer; display: grid; place-items: center; padding: 0; line-height: 1; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .12s ease, transform .08s ease; } .search-clear:hover { background: rgba(0,0,0,.17); } .search-clear:active { transform: translateY(-50%) scale(.82); background: rgba(0,0,0,.24); } body.theme-dusk .search-clear { background: rgba(255,255,255,.14); color: #fff; } body.theme-dusk .search-clear:hover { background: rgba(255,255,255,.24); } /* ---- Cibles tactiles plus confortables (≥40px) sur les boutons-icônes ---- */ .iconbtn { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; } /* ---- Accusé de lecture (« ✓ Vu » sous mon dernier message) ---- */ .seen-mark { align-self: flex-end; font-size: .68rem; color: var(--accent-ink, var(--accent)); font-weight: 700; margin: -.1rem .25rem .35rem 0; } /* ---- Bannière « compte de démonstration (IA) » ---- */ .demo-banner { background: rgba(255,138,61,.12); color: #B5502E; border: 1px solid rgba(255,138,61,.25); border-radius: 14px; padding: .5rem .7rem; font-size: .78rem; margin-bottom: .7rem; text-align: center; line-height: 1.35; } body.theme-dusk .demo-banner { background: rgba(255,138,61,.2); color: #ffce9b; } /* ---- Séparateur de jour dans le chat ---- */ .chat-daysep { text-align: center; margin: .85rem 0 .5rem; } .chat-daysep span { display: inline-block; background: rgba(0,0,0,.06); color: var(--muted); font-size: .72rem; font-weight: 700; padding: .25rem .75rem; border-radius: 999px; text-transform: capitalize; } body.theme-dusk .chat-daysep span { background: rgba(255,255,255,.1); } /* ---- Détail du score de compatibilité (transparence) ---- */ .cbrk { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; font-size: .82rem; } .cbrk-l { flex: 0 0 44%; color: var(--ink); } .cbrk-bar { flex: 1; height: 8px; background: var(--cream); border-radius: 999px; overflow: hidden; } .cbrk-bar i { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px; transition: width .45s ease; } .cbrk-p { flex: 0 0 auto; font-weight: 800; color: var(--accent-ink, var(--accent)); font-size: .76rem; min-width: 34px; text-align: right; } /* ---- Bandeau d'état réseau (hors-ligne) ---- */ .net-banner { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-confetti); background: #b91c1c; color: #fff; text-align: center; font-size: .82rem; font-weight: 700; padding: calc(.5rem + env(safe-area-inset-top, 0px)) .8rem .5rem; transform: translateY(-100%); transition: transform .3s ease; pointer-events: none; } .net-banner.show { transform: translateY(0); } /* ---- Nav du bas : libellé visible sous CHAQUE onglet (v570 ergo : convention iOS/Android, fini la navigation à l'aveugle où seul l'onglet actif était nommé). ---- */ .bottom-nav .nav-lbl { display: block; font-weight: 700; font-size: .58rem; line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .bottom-nav button.active .nav-lbl { display: block; } .bottom-nav button.active { background: var(--accent-soft); border-radius: 14px; } /* ---- Compteur de caractères (ex. bio) ---- */ .char-count { display: block; text-align: right; font-size: .72rem; color: var(--muted); margin-top: .25rem; } .char-count.over { color: var(--danger); font-weight: 700; } /* ---- Fondu entre les onglets (et les segments du profil), bien visible ---- (la règle .tab-panel:not(.hidden) est définie une seule fois, plus bas) ---- */ @keyframes tabFade { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } } .prof-seg:not(.hidden) { animation: tabFade .3s cubic-bezier(.22,.8,.3,1); } /* ---- Textareas : plus d'étirement infini (auto-grow géré en JS, hauteur plafonnée). overflow-y:auto (pas hidden) : une fois le plafond 45vh atteint, on peut ENCORE relire/scroller son texte. ---- */ textarea { resize: none; min-height: 4.6em; max-height: 45vh; overflow-y: auto; line-height: 1.5; } /* ---- Flash de succès (DA SunMates : coucher de soleil ambre → corail) ---- */ @keyframes flashOk { 0% { box-shadow: 0 0 0 0 rgba(255,140,90,.55); } 60% { box-shadow: 0 0 0 10px rgba(255,90,77,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,77,0); } } .flash-ok { animation: flashOk .9s ease; border-radius: inherit; } /* ----------------------------- Badges --------------------------- */ .badge { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; } .badge.ok { background: rgba(255,177,60,.16); color: #8A5800; } /* validé/vérifié : ton sunset (DA), plus de vert */ .badge.no { background: #f1f2f5; color: var(--muted); } .badge.warn { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); } /* Lot A2 : encre foncée sur corail pâle */ /* --------------------------- Recherche -------------------------- */ .search { position: relative; margin-bottom: .9rem; } .search input { padding-left: 2.6rem; background: #fff; box-shadow: var(--shadow-sm); border-color: #fff; } .search .ico { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--muted); } /* ----------------------------- Chips ---------------------------- */ .chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem; margin-bottom: 1rem; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { white-space: nowrap; padding: .5rem .9rem; border-radius: 999px; background: #fff; color: var(--text); font-size: .82rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); border: 0; } .chip.active { background: var(--accent-grad); color: #fff; box-shadow: 0 6px 14px rgba(45,38,52,.16); } .chip.chip-locked { opacity: .4; } /* plafond atteint : chips non sélectionnés grisés (un tap explique le max) */ .lbl-hint { color: var(--muted); font-weight: 400; font-size: .76rem; } /* règle de sélection affichée dans le label */ /* Bannière de fin d'onboarding (in-page, refermable) */ .onb-done { display: flex; align-items: center; gap: .7rem; background: var(--accent-grad); color: #fff; border-radius: 16px; padding: .8rem 1rem; margin-bottom: 1rem; box-shadow: 0 10px 24px rgba(45,38,52,.16); } .onb-done button { background: rgba(255,255,255,.22); border: 0; color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; flex-shrink: 0; font-weight: 700; display: grid; place-items: center; line-height: 1; padding: 0; font-size: 1rem; } /* ============ LOT E : cibles tactiles ≥ 44px ============ On agrandit la zone CLIQUABLE sans changer le visuel : un ::after transparent de 44×44 centré sur le bouton. Limité aux boutons ISOLÉS (les boutons en grappe · actions de bulle de chat, × de wish-chip · sont exclus : deux zones de 44px se chevaucheraient et se voleraient le clic). Les 3 premiers sont déjà position:absolute (leur ::after se cale dessus tout seul) ; seuls les boutons EN FLUX reçoivent position:relative ci-dessous. */ .hm-inspo-nav button, .onb-done button, .prep-go { position: relative; } .popinfo-x::after, .kb-search .kb-clear::after, .search-clear::after, .hm-inspo-nav button::after, .onb-done button::after, .prep-go::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; /* surface tactile minimale, invisible */ } /* ------------------------- Liste de lieux ----------------------- */ /* Démo guidée automatique (barre de narration) */ .ad-bar { position: fixed; left: 50%; bottom: calc(.45rem + env(safe-area-inset-bottom)); transform: translateX(-50%); width: calc(100% - 1.2rem); max-width: 448px; z-index: var(--z-demo); background: linear-gradient(135deg, #54232C, #2E1118); color: #fff; border-radius: 18px; padding: .85rem 1.05rem; box-shadow: 0 18px 44px rgba(0,0,0,.5); animation: adIn .35s ease; transition: opacity .35s ease; } /* #18 : la barre suit VRAIMENT le thème · JOUR = braise sunset (le violet sombre d'avant était hors DA en plein jour) ; nuit/hiver/tropiques = leurs encres respectives. */ body.theme-dusk .ad-bar { background: linear-gradient(135deg, var(--dcard4,#352a52), var(--dcard2,#241b35)); } body.theme-winter .ad-bar { background: linear-gradient(135deg, #29486B, #1B344F); } body.theme-tropic .ad-bar { background: linear-gradient(135deg, #1F5C49, #123F33); } /* Auto-replié quand on ne touche pas : le texte et les boutons se rétractent en douceur (pas de glissement brusque), il ne reste que l'en-tête + le titre. Touche l'écran pour le rouvrir. */ .ad-bar .ad-text, .ad-bar .ad-ctrl { max-height: 220px; overflow: hidden; transition: max-height .4s ease, opacity .35s ease, margin .4s ease; } .ad-bar.dim .ad-text { max-height: 0; opacity: 0; margin: 0; } .ad-bar.dim .ad-ctrl { max-height: 0; opacity: 0; margin: 0; pointer-events: none; } .ad-bar.dim .ad-title { font-size: .92rem; opacity: .8; } @keyframes adIn { from { transform: translate(-50%, 24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } .ad-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; } .ad-prog { font-size: .72rem; font-weight: 800; background: rgba(255,255,255,.16); padding: .14rem .55rem; border-radius: 999px; } .ad-live { font-size: .68rem; font-weight: 800; color: #ff6b6b; letter-spacing: .05em; } .ad-x { margin-left: auto; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 999px; padding: .3rem .7rem; font-size: .76rem; font-weight: 700; cursor: pointer; } .ad-title { font-size: 1.1rem; font-weight: 800; } .ad-text { font-size: .86rem; color: rgba(255,255,255,.88); line-height: 1.45; margin: .25rem 0 .7rem; } .ad-ctrl { display: flex; gap: .5rem; } .ad-ctrl button { flex: 1; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 14px; padding: .6rem; font-weight: 800; cursor: pointer; font-size: .9rem; } .ad-ctrl #adPause { flex: 2; background: linear-gradient(135deg,#FFC93C,#ff7e5f 60%,#FF5A4D); } .ad-ctrl button:hover { filter: brightness(1.1); } /* Parcours de démo MVP (admin) */ .demo-intro { background: linear-gradient(135deg, rgba(255,201,60,.18), rgba(255,90,77,.14)); } .demo-step { display: flex; gap: .8rem; background: var(--card); border-radius: 16px; padding: .9rem; margin-bottom: .6rem; box-shadow: var(--shadow-sm); } .ds-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-weight: 800; display: grid; place-items: center; } .ds-body { flex: 1; min-width: 0; } .ds-title { font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .ds-wow { font-size: .66rem; font-weight: 800; background: linear-gradient(90deg,#ffd15c,#ff7e5f); color: #5a2a00; padding: .12rem .45rem; border-radius: 999px; } .ds-say { color: var(--ink); font-size: .88rem; margin: .35rem 0; font-style: italic; } .ds-wowtxt { color: var(--muted); font-size: .8rem; line-height: 1.45; } .ds-go { margin-top: .55rem; padding: .4rem .8rem; font-size: .8rem; } /* ===== 🧭 Hub TUTOS PAR ZONE (#7) — cartes premium, feedback au press, stagger doux ===== */ .tz-grid { display: grid; grid-template-columns: 1fr; gap: .55rem; } .tz-card { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; cursor: pointer; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: .8rem .85rem; box-shadow: 0 1px 2px rgba(120,60,20,.05), 0 7px 18px -8px rgba(120,60,20,.14); /* ombre CHAUDE, jamais grise */ transition: transform 160ms cubic-bezier(.23,1,.32,1), box-shadow 160ms ease, border-color 160ms ease; /* stagger d'apparition (délai posé inline par le rendu) */ opacity: 0; transform: translateY(8px); animation: tzIn 320ms cubic-bezier(.23,1,.32,1) forwards; } @keyframes tzIn { to { opacity: 1; transform: none; } } .tz-card:active { transform: scale(.98); } /* feedback au press (Emil) */ .tz-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .tz-card:hover { border-color: rgba(255,90,77,.4); box-shadow: 0 2px 4px rgba(120,60,20,.06), 0 12px 26px -10px rgba(255,90,77,.3); } } .tz-emoji { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.5rem; background: var(--accent-soft); border-radius: 14px; } .tz-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; } .tz-name { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1rem; color: var(--ink); display: flex; align-items: center; gap: .35rem; } .tz-check { color: var(--ok); font-weight: 800; font-size: .85rem; } .tz-meta { font-size: .72rem; font-weight: 700; color: var(--accent-ink, var(--accent)); letter-spacing: .01em; } .tz-desc { font-size: .78rem; line-height: 1.4; color: var(--muted); } .tz-go { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-grad); color: #fff; font-size: .82rem; box-shadow: 0 4px 10px -3px rgba(255,90,77,.5); } .tz-card.tz-done { opacity: .82; } .tz-card.tz-done .tz-emoji { filter: saturate(.85); } @media (prefers-reduced-motion: reduce) { .tz-card { animation: none; opacity: 1; transform: none; } .tz-card:active { transform: none; } } /* Carte « score de confiance » */ /* Profil : photo grande & entière, nom/titre/ville centrés, confiance compacte */ /* Allégée (132→112px) avec la scission de la carte d'arrivée : moins « qui fait peur » */ .prof-photo { width: 112px; height: 112px; margin: .2rem auto .6rem; border-radius: 20px; background-color: var(--cream); background-size: cover; background-position: center; background-repeat: no-repeat; display: grid; place-items: center; font-size: 2.8rem; box-shadow: var(--shadow-sm); overflow: hidden; } body.theme-dusk .prof-photo { background-color: var(--dcard,#2a2140); } .prof-name { font-size: 1.25rem; font-weight: 800; justify-content: center; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .prof-title { font-size: .95rem; color: var(--accent-ink, var(--accent)); font-weight: 700; margin-top: .15rem; } .prof-city { font-size: .9rem; margin-top: .15rem; } .prof-trust { display: inline-flex; align-items: center; gap: .35rem; margin: .8rem auto 0; padding: .35rem .8rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink, var(--accent)); font-weight: 700; font-size: .85rem; cursor: pointer; } /* Lot A2 : encre foncée sur corail pâle */ .prof-trust b { font-size: 1rem; color: var(--accent-ink, var(--accent)); } .prof-trust .pt-info { opacity: .7; font-size: .8rem; } .prof-trust:active { transform: scale(.97); } /* (retour Maxime : la version « photo à gauche » est ABANDONNÉE · carte centrée d'origine) */ /* #13 : « Mon parcours » habillé DA · bandeau doré discret + stats en pilules joyau */ .parcours-card { position: relative; border-radius: 14px; padding: .15rem .1rem 0; } .parcours-card .pc-head b { display: inline-flex; align-items: center; gap: .35rem; } .pc-stat { background: linear-gradient(160deg, rgba(255,209,92,.16), rgba(255,154,61,.06)); border: 1px solid rgba(232,150,31,.26); } body.theme-dusk .pc-stat { background: rgba(255,201,60,.10); border-color: rgba(255,209,92,.18); } .pc-stat .pc-n { color: #8A5800; } body.theme-dusk .pc-stat .pc-n { color: #FFD79A; } /* #12 : « Mes badges » en jolies pilules dorées (au lieu de mini-ronds anonymes) */ .prof-badges .pb-pill { display: inline-flex; align-items: center; gap: .32rem; padding: .26rem .58rem .26rem .3rem; border-radius: 999px; background: linear-gradient(135deg, rgba(255,209,92,.20), rgba(255,154,61,.10)); border: 1px solid rgba(232,150,31,.30); font-size: .74rem; font-weight: 800; color: var(--ink); } body.theme-dusk .prof-badges .pb-pill { background: rgba(255,209,92,.10); border-color: rgba(255,209,92,.22); } /* #13 : stats du parcours cliquables (chacune ouvre sa section) */ .pc-stat[data-pc] { cursor: pointer; transition: transform .1s ease; } .pc-stat[data-pc]:active { transform: scale(.95); } /* #13 : conversation BFF épinglée (case dorée en tête des messages) */ .conv-bff { background: linear-gradient(135deg, rgba(255,209,92,.16), rgba(255,154,61,.08)); border: 1px solid rgba(232,150,31,.32) !important; border-radius: 14px; } .conv-bff .conv-pin { font-size: .64rem; font-weight: 800; color: #8A5800; background: rgba(255,209,92,.32); border-radius: 999px; padding: .08rem .45rem; vertical-align: 1px; } body.theme-dusk .conv-bff { background: linear-gradient(135deg, rgba(255,209,92,.12), rgba(255,154,61,.05)); border-color: rgba(255,209,92,.22) !important; } body.theme-dusk .conv-bff .conv-pin { color: #FFD79A; background: rgba(255,209,92,.16); } /* #11 : badges à l'honneur en tête de la fiche voyageur */ .tp-star-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.2rem 0 .8rem; } .tp-star-badges .tsb-pill { display: inline-flex; align-items: center; gap: .32rem; padding: .3rem .62rem .3rem .32rem; border-radius: 999px; background: linear-gradient(135deg, rgba(255,209,92,.22), rgba(255,154,61,.12)); border: 1px solid rgba(232,150,31,.32); font-size: .76rem; font-weight: 800; color: var(--ink); box-shadow: var(--shadow-sm); } body.theme-dusk .tp-star-badges .tsb-pill { background: rgba(255,209,92,.12); border-color: rgba(255,209,92,.24); } .stat-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; } /* popInfo : tuile explicative qui pop au centre (DA sunset) */ .popinfo-ov { position: fixed; inset: 0; z-index: var(--z-popinfo); display: grid; place-items: center; padding: 1.2rem; background: rgba(20,8,30,.55); backdrop-filter: blur(3px); animation: popinfoFade .18s ease; } .fc-gear { position: absolute; top: calc(1rem + env(safe-area-inset-top)); right: 1rem; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; } .popinfo-ov.hidden { display: none; } .popinfo-card { position: relative; width: 100%; max-width: 340px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 1.5rem 1.3rem 1.3rem; box-shadow: 0 18px 50px rgba(0,0,0,.32); text-align: center; animation: popinfoPop .22s cubic-bezier(.2,1.2,.4,1); /* P4 : AUCUNE tuile-détail ne déborde plus de l'écran (prévisu, Données…) · hauteur bornée à l'écran réel + défilement INTERNE. */ max-height: calc(100dvh - 2.4rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; } .popinfo-x { position: absolute; top: .6rem; right: .6rem; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--cream); color: var(--muted); font-size: .9rem; cursor: pointer; display: grid; place-items: center; line-height: 1; padding: 0; } /* Cibles tactiles 44px SANS grossir le visuel : on étend la zone cliquable des petites croix via un pseudo-élément invisible (le doigt tape large, le rond reste discret). */ .popinfo-x::after, .search-clear::after, .kb-search .kb-clear::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; } .kb-search .kb-clear::after { inset: -11px; } /* Croix SVG centrée (fix systémique) : marche dans n'importe quel bouton de fermeture */ .xbtn { display: inline-grid !important; place-items: center !important; line-height: 1 !important; padding: 0 !important; } .xbtn svg { display: block; } .kb-search { position: relative; } .kb-search .kb-clear { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--cream); color: var(--muted); cursor: pointer; } body.theme-dusk .kb-search .kb-clear { background: var(--dcard,#2a2140); } .admin-only-cat > summary { list-style: none; } .admin-only-cat > summary::-webkit-details-marker { display: none; } body.theme-dusk .popinfo-x { background: var(--dcard,#2a2140); color: var(--ink,#f3e9d8); } .popinfo-ic { width: 58px; height: 58px; margin: 0 auto .7rem; border-radius: 18px; display: grid; place-items: center; font-size: 1.9rem; background: var(--accent-grad); box-shadow: 0 8px 20px rgba(255,138,61,.32); } .popinfo-t { margin: 0 0 .5rem; font-size: 1.08rem; } .popinfo-b { font-size: .9rem; color: var(--muted); line-height: 1.5; } .popinfo-b b { color: var(--ink); } /* Spot actif « story » */ .spot-live { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 14px; color: #fff; background: radial-gradient(120% 130% at 12% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 46%), linear-gradient(135deg,#FF9E4D,#FF6F3D); box-shadow: var(--shadow-pop); } .spot-live-emoji { font-size: 1.7rem; flex-shrink: 0; } .spot-live-body { flex: 1; min-width: 0; } .spot-live-txt { font-weight: 800; line-height: 1.2; } .spot-live-meta { font-size: .74rem; opacity: .96; margin-top: .15rem; } .inspo-chip { font-size: .74rem; font-weight: 700; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .55rem; color: var(--ink); } body.theme-dusk .inspo-chip { background: var(--dcard,#2a2140); } @keyframes popinfoFade { from { opacity: 0; } to { opacity: 1; } } /* Transitions ×100 : ressort doux (la courbe dépasse légèrement puis se pose) · transform/opacity only */ @keyframes popinfoPop { from { opacity: 0; transform: translateY(16px) scale(.93); } to { opacity: 1; transform: none; } } .popinfo-card { animation-duration: .3s !important; animation-timing-function: cubic-bezier(.22,1.36,.32,1) !important; } @keyframes sheetUp { from { opacity: .6; transform: translateY(30px); } to { opacity: 1; transform: none; } } .picker-card { animation: sheetUp .32s cubic-bezier(.22,1.22,.3,1); } #pickerOverlay.info .picker-card { animation: popinfoPop .3s cubic-bezier(.22,1.36,.32,1); } .act-card { animation: popinfoPop .3s cubic-bezier(.22,1.36,.32,1); } /* Tuile « bientôt dispo » (Gold) : grisée, non cliquable */ .tile-soon { opacity: .62; cursor: default; pointer-events: none; filter: grayscale(.35); } .qrow-soon { opacity: .6; pointer-events: none; filter: grayscale(.3); } .tile-soon .thumb.gold-soon { background: linear-gradient(135deg,#c9a24a,#8a7029); box-shadow: none; } .soon-badge { display: inline-block; font-size: .68rem; font-weight: 800; /* Lot D : MAJUSCULES 9px → ~11px (plancher lisibilité) */ letter-spacing: .03em; text-transform: uppercase; background: var(--accent-grad); color: #fff; padding: .08rem .4rem; border-radius: 999px; vertical-align: middle; margin-left: .25rem; } /* Listing « Ma collection » (quêtes par ville) */ .coll-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .7rem; } .coll-stat { background: var(--accent-soft); border-radius: 14px; padding: .6rem; text-align: center; } .coll-stat .cs-v { font-size: 1.5rem; font-weight: 900; color: var(--accent-ink, var(--accent)); } .coll-stat .cs-v span { font-size: .9rem; opacity: .7; } .coll-stat .cs-l { font-size: .72rem; color: var(--muted); font-weight: 700; margin-top: .1rem; } .coll-bar { height: 5px; border-radius: 999px; background: var(--cream); overflow: hidden; margin: 0 .6rem .3rem; } .coll-bar span { display: block; height: 100%; background: var(--accent-grad); } body.theme-dusk .coll-bar { background: var(--dcard,#2a2140); } .coll-city { border: 1px solid var(--line); border-radius: 14px; margin: .4rem 0; overflow: hidden; } .coll-city > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .7rem; font-weight: 700; font-size: .9rem; background: var(--cream); } .coll-city > summary::-webkit-details-marker { display: none; } .coll-city > summary b { color: var(--accent-ink, var(--accent)); font-size: .8rem; font-weight: 800; flex-shrink: 0; } body.theme-dusk .coll-city > summary { background: #271e3a; } .coll-list { padding: .3rem .6rem .5rem; } .coll-row { display: flex; align-items: center; gap: .5rem; padding: .28rem 0; font-size: .86rem; } .coll-row.done .coll-q { color: var(--muted); text-decoration: line-through; } .coll-ck { flex-shrink: 0; } .stat-click { cursor: pointer; transition: transform .15s ease; user-select: none; } .stat-click:hover { transform: translateY(-2px); } .stat-click:active { transform: scale(.97); } .trust-explain .te-head { font-weight: 800; margin-bottom: .3rem; } .trust-explain .te-sub { color: var(--muted); font-size: .84rem; margin: 0 0 .6rem; line-height: 1.45; } .trust-explain .te-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; } .trust-explain .te-row:last-of-type { border-bottom: 0; } .te-ok { color: var(--ok-ink, var(--ok)); font-weight: 700; white-space: nowrap; } .te-todo { color: var(--accent-ink, var(--accent)); font-weight: 700; white-space: nowrap; } .trust-explain .te-note { color: var(--muted); font-size: .78rem; margin: .65rem 0 0; line-height: 1.5; } .place { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 0; border-bottom: 1px solid var(--line); border-radius: 14px; } .place.flash { animation: placeFlash 1.8s ease; } @keyframes placeFlash { 0%, 100% { background: transparent; } 25% { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent) inset; } } .place:last-child { border-bottom: 0; padding-bottom: 0; } .place .name { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: .4rem; } .place .meta { color: var(--muted); font-size: .85rem; } .place .eco { color: var(--ok-ink, var(--ok)); font-size: .78rem; font-weight: 600; } .place button { align-self: flex-start; margin-top: .5rem; padding: .55rem 1rem; font-size: .85rem; } /* Alerte d'urgence dans le cercle : carte qui DÉNOTE (rouge, bord vif, pastille pulsante). */ .place-sos { background: rgba(239,68,68,.08); border: 1.5px solid rgba(239,68,68,.45); padding: .8rem .85rem; margin-bottom: .5rem; } body.theme-dusk .place-sos { background: rgba(239,68,68,.16); } .sos-tag { display: inline-flex; align-items: center; gap: .25rem; margin-left: .4rem; background: #e23b3b; color: #fff; font-size: .68rem; font-weight: 800; padding: .12rem .5rem; border-radius: 999px; box-shadow: 0 0 0 0 rgba(226,59,59,.55); animation: sosPulse 1.6s ease-out infinite; } @keyframes sosPulse { 0% { box-shadow: 0 0 0 0 rgba(226,59,59,.5); } 70% { box-shadow: 0 0 0 8px rgba(226,59,59,0); } 100% { box-shadow: 0 0 0 0 rgba(226,59,59,0); } } /* Logo SOS cliquable + check-in « tout va bien » */ .sos-logo { font-size: 2.8rem; line-height: 1; background: none; border: 0; cursor: pointer; padding: .15rem .45rem; border-radius: 16px; transition: transform .12s; } .sos-logo:hover { transform: scale(1.08); } .safety-check { display: flex; align-items: center; gap: .8rem; } /* Carte « En cas d'urgence » : bord rouge léger, alerte qui dénote */ .secu-urgent { border: 1.5px solid rgba(239,68,68,.28); background: linear-gradient(180deg, rgba(239,68,68,.05), transparent 60%); } .su-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; } .su-head .su-ic { font-size: 2rem; line-height: 1; } .su-head .su-t { font-weight: 800; font-size: 1.1rem; color: var(--ink); font-family: "Fraunces", serif; } .su-head .su-s { font-size: .8rem; color: var(--muted); } .su-actions { display: flex; gap: .6rem; } .su-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 92px; border: 0; border-radius: 16px; cursor: pointer; color: #fff; text-decoration: none; padding: .8rem .5rem; text-align: center; } .su-btn .su-e { font-size: 1.7rem; line-height: 1; } .su-btn .su-l { font-size: .86rem; font-weight: 700; line-height: 1.2; } .su-call { background: linear-gradient(135deg,#FF8A3D,#FF5A4D); box-shadow: 0 8px 20px rgba(45,38,52,.16); } .su-sos { background: linear-gradient(135deg,#FF6A6A,#E11D2E); box-shadow: 0 8px 22px rgba(225,29,46,.4), 0 0 0 0 rgba(225,29,46,.5); animation: sosPulse 2.2s ease-out infinite; } .su-btn:active { transform: scale(.97); } .secu-explain { margin-top: .8rem; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .85rem; font-size: .78rem; line-height: 1.5; color: var(--muted); } /* Pastille sur l'onglet Sécurité (check-in en attente) : petit point ambre pulsant */ #navSecu { background: #F5A623; box-shadow: 0 0 0 0 rgba(245,166,35,.6); animation: sosPulse 1.9s ease-out infinite; min-width: 10px; width: 10px; height: 10px; padding: 0; font-size: 0; right: calc(50% - 16px); } /* Accès Sécurité permanent en haut à droite — LITE UNIQUEMENT (le mode complet garde Sécurité dans la barre du bas, inchangé). */ #topSecuBtn { display: none; } /* caché par défaut = mode complet INTACT */ body.sm-lite #topSecuBtn { display: none; } /* 17/06 : Sécurité redescend dans la barre du bas → plus de bouclier en haut */ /* 17/06 : Sécurité RESTE dans la barre du bas en Lite (5 onglets : Accueil·Lieux·Sécurité·Mates·Profil ; Jeux masqué). Ancienne règle de masquage retirée. */ .secu-top { position: relative; color: var(--ok, #11B5A0); } /* bouclier teal = sécurité, pas rouge (rouge réservé au danger) */ .secu-top svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; } .secu-top.active { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); } .secu-top #navSecuLite { position: absolute; top: 2px; right: 2px; left: auto; } /* Utilitaire inverse de .beta-only : visible UNIQUEMENT en Lite. */ .lite-only { display: none; } body.sm-lite .lite-only { display: revert; } /* --------------------- Carte tout-en-un (accueil) -------------------- */ .homemap-card { padding: .55rem; background: #ffffff !important; } /* blanc pur (pas le blanc chaud #FFFCF6 = le 'bandeau jaune') */ body.theme-dusk .homemap-card { background: #1c1530 !important; } .homemap-filters { margin-bottom: .55rem; gap: .4rem; } .homemap-filters .chip { font-size: .78rem; padding: .35rem .7rem; opacity: .5; } .homemap-filters .chip.active { opacity: 1; } .homemap-filters .chip b { font-weight: 800; opacity: .85; } .homemap-wrap { position: relative; isolation: isolate; } /* contient les outils carte (z-index) -> ne débordent plus sur la nav du bas */ /* P9 : la carte est LA star de l'accueil · rehaussée à 300px (zone du dessus dégraissée). */ .homemap { height: 400px; border-radius: 14px; overflow: hidden; background: var(--cream); position: relative; z-index: 0; isolation: isolate; } /* ===== v734 · État de CHARGEMENT de la carte (UX) : squelette « map-like » pendant l'init lourde ===== */ .homemap-wrap { position: relative; } .homemap-skel { position: absolute; inset: 0; z-index: 2; border-radius: 14px; overflow: hidden; background: var(--cream); display: grid; place-items: center; transition: opacity .55s ease; } .homemap-wrap.homemap-ready .homemap-skel { opacity: 0; pointer-events: none; } .homemap-skel .hms-grid { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px); background-size: 30px 30px; } .homemap-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 32%, color-mix(in srgb, #fff 38%, transparent) 50%, transparent 68%); transform: translateX(-100%); animation: hmsShimmer 1.5s linear infinite; } .homemap-skel .hms-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; } .homemap-skel .hms-pin { font-size: 2.1rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); animation: hmsBob 1.7s ease-in-out infinite; } .homemap-skel .hms-txt { font-size: .84rem; font-weight: 700; color: var(--muted); } @keyframes hmsShimmer { to { transform: translateX(100%); } } @keyframes hmsBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .homemap-skel::after, .homemap-skel .hms-pin { animation: none !important; } } /* v858 · perf : carte prête → on COUPE les anims infinies du skeleton (elles tournaient à opacity:0 = paint continu pour rien) + le shimmer de fond de .homemap. */ .homemap-wrap.homemap-ready .homemap-skel::after, .homemap-wrap.homemap-ready .homemap-skel .hms-pin { animation: none !important; } .homemap-wrap.homemap-ready .homemap { animation: none !important; } /* P7 : pastille « touche la carte » · EN HAUT de la carte (le bas porte déjà Partager/ Autour de moi/Tout voir), aux couleurs DA (carte + encre, déclinée par mode), avec la petite main qui tapote pour l'intuition. */ .hm-coop-hint { position: absolute; left: 50%; top: .6rem; transform: translateX(-50%) translateY(-6px); z-index: 1000; display: inline-flex; align-items: center; gap: .35rem; background: var(--card); color: var(--ink); font: 700 .76rem/1 Manrope, system-ui, sans-serif; padding: .5rem .8rem; border: 1px solid var(--line); box-shadow: var(--shadow-sm); border-radius: 999px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; white-space: nowrap; } .hm-coop-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); } .hm-coop-hint .hh { display: inline-block; animation: hhTap 1.8s ease-in-out infinite; } @keyframes hhTap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px) scale(.9); } } body.theme-dusk .hm-coop-hint { background: var(--dcard, #2a2140); color: #f3e9f3; border-color: rgba(255,255,255,.16); } /* P4 : carte RÉVEILLÉE (tap) = liseré corail discret, pour voir qu'elle est « en main » */ .homemap.hm-live::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--accent); border-radius: 14px; pointer-events: none; opacity: .5; z-index: 899; } /* Bug Maxime « switch Voyage ↔ Maison trop brutal » : le panneau qui APPARAÎT fait un fondu doux. ⚠️ OPACITÉ SEULE, JAMAIS de transform ici : #homeTravelMap CONTIENT la carte, et un transform sur un ancêtre fait que le position:fixed du plein écran se cale sur ce conteneur au lieu de l'écran (→ « la carte ne passe plus en grand écran ») et décale le haut (→ « barre/séparation en haut, tous modes »). Le mouvement réduit est neutralisé par la ceinture prefers-reduced-motion. */ @keyframes hmModeIn { from { opacity: 0; } to { opacity: 1; } } #homeHomeMode, #homeTravelMap { animation: hmModeIn .26s ease both; } /* P2.10 : ruban préversion / version archivée */ #smPreviewRibbon { position: fixed; top: calc(.4rem + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: var(--z-ribbon); background: #6638D6; color: #fff; font: 800 .66rem/1 Manrope, system-ui, sans-serif; letter-spacing: .06em; padding: .38rem .75rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.3); white-space: nowrap; border: 0; cursor: pointer; } #smPreviewRibbon:active { transform: translateX(-50%) scale(.96); } /* Mode paysage (téléphone tourné, peu de hauteur) : on raccourcit les gros visuels pour rester lisible */ @media (orientation: landscape) and (max-height: 560px) { .auth-hero { padding: .8rem 1rem !important; min-height: 0; } .auth-hero::after, .auth-hero::before { display: none !important; } .detail-hero { height: 130px; } .homemap { height: 470px; } /* v773 (retour Maxime « carte à agrandir vers le haut ») : 380→470px */ .player-hero { padding: .55rem .8rem; } .souvenir-card { padding: 1rem 1.1rem; } #photoLightboxImg { max-height: 84vh; } } /* Cropper photo de profil (HORS media query · doit s'appliquer PARTOUT, surtout desktop/portrait) */ .crop-card { max-height: 92vh; overflow-y: auto; } /* Taille du stage FIXÉE EN JS (carré garanti) · pas d'aspect-ratio (buguait en flex → image géante). */ .crop-stage { position: relative; width: 240px; height: 240px; margin: 0 auto; border-radius: 16px; overflow: hidden; background-color: #1a1320; background-repeat: no-repeat; touch-action: none; cursor: grab; } .crop-stage:active { cursor: grabbing; } .crop-stage img { display: none; } /* l'image s'affiche en background du stage (clip garanti) ; l' ne sert qu'à l'export */ .crop-ring { position: absolute; inset: 0; box-shadow: 0 0 0 2000px rgba(0,0,0,.45); border-radius: 50%; pointer-events: none; } .crop-zoom { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; } .crop-zoom input[type=range] { flex: 1; accent-color: var(--accent); } /* Bouton « Plein écran » bien visible (pill accent) */ .fs-btn { flex-shrink: 0; background: var(--accent-grad); color: #fff; border: 0; border-radius: 999px; padding: .4rem .8rem; font-weight: 800; font-size: .8rem; cursor: pointer; box-shadow: 0 4px 12px rgba(45,38,52,.16); white-space: nowrap; } .fs-btn:active { transform: scale(.96); } /* Aussi un bouton flottant ⛶ dans le coin de la carte (toujours visible) */ /* Bouton plein écran : net (liseré blanc + ombre resserrée) plutôt qu'un halo rouge flou/transparent (P1.26). */ .homemap-fsopen { position: absolute; top: .5rem; right: .5rem; z-index: 500; width: 38px; height: 38px; padding: 0; border: 1.5px solid rgba(255,255,255,.9); border-radius: 14px; background: var(--accent-grad); color: #fff; line-height: 0; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.22); display: flex; align-items: center; justify-content: center; } .homemap-fsopen svg { display: block; } /* Filtres de la carte : UNE seule ligne compacte qui défile (au lieu d'un gros paquet sur plusieurs lignes) */ #homeMapFilters { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; gap: .35rem; margin-bottom: .55rem; padding-bottom: .15rem; scrollbar-width: none; background: none !important; } #homeMapFilters::-webkit-scrollbar { display: none; } #homeMapFilters .chip { padding: .34rem .62rem; font-size: .76rem; flex: 0 0 auto; } /* (bouton plein écran : on garde l'accent-grad PLEIN même en sombre → plus de translucide) */ .homemap-card.fs .homemap-fsopen { display: none; } /* Bug Maxime : en plein écran la carte est déjà « en main » (drag actif) → le badge « touche la carte pour l'explorer » n'a plus de sens ET passait SOUS le bouton Fermer (z 1600 > 1000). On le masque en plein écran ; il revient quand la mini-carte se rendort en sortant. */ .homemap-card.fs .hm-coop-hint { display: none !important; } /* Plein écran : TOUTE la carte (filtres + carte + légende) passe en plein écran */ .homemap-fsclose { display: none; } .homemap-card.fs { position: fixed; inset: 0; z-index: var(--z-map-fs); margin: 0; border-radius: 0; padding: .55rem; display: flex; flex-direction: column; background: var(--card); } /* Bug Maxime « la carte passe SOUS les bandeaux haut/bas qui restent visibles + tuiles superposées » en plein écran : quel que soit l'empilement, on EFFACE la topbar et la nav du bas tant que la carte est en plein écran (le bouton « ✕ Fermer » de la carte suffit pour sortir). La carte couvre alors vraiment TOUT l'écran. */ body:has(.homemap-card.fs) .topbar, body:has(.homemap-card.fs) .bottom-nav { display: none !important; } /* ⚠️⚠️ BUG CARTE PLEIN ÉCRAN (retour Maxime, confirmé sonde) : le feed + les tuiles « Accès rapides » passaient PAR-DESSUS la carte plein écran. Cause = #homeTravelMap (ancêtre de la carte) porte une animation d'OPACITÉ (hmModeIn) + .tab-panel une animation fadeOnly → elles créent un CONTEXTE D'EMPILEMENT qui EMPRISONNE le z-index:3500 de la carte (même piège que le transform v453, autre propriété). Le z-index ne peut donc PAS gagner. FIX ROBUSTE indépendant du z-index : en plein écran, on MASQUE tout le panneau Accueil SAUF #homeTravelMap (qui contient la carte). Plus rien ne peut déborder, quel que soit le stacking. LEÇON : opacity (même animée) crée un stacking context, pas que transform/filter. */ body:has(.homemap-card.fs) .tab-panel[data-panel="accueil"] > *:not(#homeTravelMap) { display: none !important; } .homemap-card.fs .homemap-wrap { flex: 1; min-height: 0; margin: .4rem 0; } .homemap-card.fs .homemap { height: 100% !important; border-radius: 14px; } /* P12 : le pane Leaflet (fond + épingles) reste composité GPU pendant le plein écran → drag soyeux */ .homemap-card.fs .leaflet-map-pane { will-change: transform; } .homemap-card.fs .homemap-fsclose { display: inline-flex; position: absolute; top: calc(.7rem + env(safe-area-inset-top, 0px)); right: .7rem; z-index: 1400; background: var(--card); color: var(--ink); border: 0; border-radius: 999px; padding: .5rem .9rem; font-weight: 800; font-size: .82rem; box-shadow: var(--shadow); cursor: pointer; } /* En plein écran : outils EN BAS À GAUCHE (équilibré avec le zoom en bas-droite ; rien en haut-gauche). On les remonte BIEN au-dessus de la safe-area / barre gestuelle mobile pour que les taps passent toujours. La croix reste en haut-droite. */ /* Plein écran : outils à DROITE (retour Maxime), même côté qu'en carte réduite */ .homemap-card.fs .homemap-tools { bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); right: .7rem; left: auto; top: auto; align-items: flex-end; z-index: 1500; max-width: calc(60% - 1rem); } .homemap-card.fs .homemap-fsclose { z-index: 1600; } .homemap-tools { position: absolute; right: .55rem; bottom: .55rem; z-index: 1100; display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; pointer-events: auto; } .homemap-tools button { background: var(--card); color: var(--ink); border: 1px solid rgba(0,0,0,.08); border-radius: 999px; padding: .55rem .85rem; font-size: .76rem; font-weight: 700; box-shadow: var(--shadow-sm); cursor: pointer; } /* v570 ergo : zone tactile ~40px sur carte */ .homemap-tools button:hover { background: var(--accent-grad); color: #fff; } .homemap-tools #hmAdd { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(45,38,52,.16); } .homemap-capture { position: absolute; inset: 0; z-index: 1050; cursor: crosshair; background: rgba(122,92,255,.06); } .homemap-hint { position: absolute; top: .55rem; left: 50%; transform: translateX(-50%); z-index: 1100; background: var(--ink); color: #fff; padding: .42rem .85rem; border-radius: 999px; font-size: .76rem; box-shadow: var(--shadow-sm); white-space: nowrap; } .homemap-hint a { color: #ffd15c; cursor: pointer; font-weight: 800; } .act-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: rgba(12,7,32,.55); padding: 1.2rem; } .act-card { width: 100%; max-width: 380px; background: var(--card); color: var(--ink); border-radius: 20px; padding: 1.2rem; box-shadow: 0 24px 60px rgba(0,0,0,.45); max-height: calc(100dvh - 2.4rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; } /* P4 : jamais plus long que l'écran */ /* Recherche de lieu dans « Partager une activité » (associer le pin à un lieu cherché par nom) */ .act-search { display: flex; gap: .4rem; margin: .15rem 0 .2rem; } .act-search input { flex: 1; min-width: 0; } .act-search button { flex-shrink: 0; padding: .55rem .85rem; border: 0; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink, var(--accent)); font-weight: 800; cursor: pointer; } .act-search-results { list-style: none; margin: 0 0 .5rem; padding: 0; max-height: 168px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); } .act-search-results li { padding: .55rem .65rem; font-size: .8rem; line-height: 1.3; cursor: pointer; border-bottom: 1px solid var(--line); } .act-search-results li:last-child { border-bottom: 0; } .act-search-results li:active { background: var(--accent-soft); } .act-search-results li.act-sr-msg { color: var(--muted); cursor: default; } /* Contrôles Leaflet raccord avec le design (zoom, attribution, popups) */ .leaflet-control-attribution { font-size: 9px !important; line-height: 1.4 !important; background: rgba(255,255,255,.6) !important; color: var(--muted) !important; padding: 1px 6px !important; border-radius: 0 8px 0 0 !important; } .leaflet-control-attribution a { color: var(--muted) !important; } .leaflet-control-zoom { border: 0 !important; box-shadow: var(--shadow-sm) !important; border-radius: 14px !important; overflow: hidden; margin: 12px !important; } .leaflet-control-zoom a { background: var(--card) !important; color: var(--ink) !important; border: 0 !important; width: 32px !important; height: 32px !important; line-height: 32px !important; font-size: 18px !important; font-weight: 700; } .leaflet-control-zoom a:hover { background: var(--cream) !important; color: var(--accent-ink, var(--accent)) !important; } .leaflet-popup-content-wrapper { border-radius: 14px !important; box-shadow: 0 14px 34px rgba(0,0,0,.2) !important; } .leaflet-popup-content { margin: 12px 14px !important; font-size: .82rem; line-height: 1.45; } /* Carte d'accueil COURTE (200-240px) + overflow:hidden : un popup haut (quête : titre + description + récompense + bouton « Jouer ») était ROGNÉ → le bouton devenait inatteignable hors plein écran. On borne la hauteur du contenu (scroll interne) pour qu'il tienne toujours dans la carte. En plein écran (.fs) il y a la place → pas de bornage. */ .homemap-card:not(.fs) .leaflet-popup-content { max-height: 148px; overflow-y: auto; overscroll-behavior: contain; } body.theme-dusk .leaflet-control-attribution { background: rgba(36,27,53,.7) !important; color: #a99fbe !important; } body.theme-dusk .leaflet-control-zoom a { background: var(--dcard2,#241b35) !important; color: #ede6f2 !important; } /* --------------------- Onboarding « du futur » -------------------- */ .onb { position: fixed; inset: 0; z-index: var(--z-onb); display: grid; place-items: center; padding: 1.2rem; background: radial-gradient(120% 120% at 50% 0%, #FFB24D 0%, #FF6B6B 48%, #B25CC9 100%); overflow: hidden; } body.theme-dusk .onb { background: radial-gradient(120% 120% at 50% 0%, #2a1850 0%, #160b2e 55%, #0c0720 100%); } .onb.show { animation: onbFade .4s ease; } @keyframes onbFade { from { opacity: 0; } to { opacity: 1; } } .onb-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* #20 : orbes SANS filter blur (le blur(32px) recalculé au 1er rendu faisait accrocher le tout début) → dégradés radiaux pré-adoucis, même look, coût quasi nul. */ .onb-bg .orb { position: absolute; border-radius: 50%; opacity: .62; animation: orbFloat 9s ease-in-out infinite; will-change: transform; } .onb-bg.orb-paused .orb { animation-play-state: paused; } /* fige les orbes pendant le glissement de slide (anti-saccade) */ .onb-bg .o1 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,126,95,.85) 0%, rgba(255,126,95,0) 62%); top: -70px; left: -60px; } .onb-bg .o2 { width: 260px; height: 260px; background: radial-gradient(circle, rgba(255,194,61,.7) 0%, rgba(255,194,61,0) 62%); bottom: -60px; right: -50px; animation-delay: -3s; opacity: .45; } .onb-bg .o3 { width: 210px; height: 210px; background: radial-gradient(circle, rgba(41,216,194,.7) 0%, rgba(41,216,194,0) 62%); top: 40%; right: 20%; animation-delay: -6s; } /* translate SEUL (pas de scale) : rien n'est recalculé à chaque frame → fluide. */ @keyframes orbFloat { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-22px,0); } } /* #20 : fond de carte FIXE (plus de backdrop-filter du tout → plus de « tuile qui fonce et devient translucide » au moment du switch, et plus de latence GPU). */ .onb-card { position: relative; width: 100%; max-width: 420px; background: linear-gradient(180deg, rgba(24,16,46,.66), rgba(18,12,36,.72)); border: 1px solid rgba(255,255,255,.22); border-radius: 28px; padding: 2.4rem 1.6rem 1.4rem; color: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18); text-align: center; } /* Polish : la carte entre en douceur (scale + fondé) à l'ouverture. */ .onb.show .onb-card { animation: onbCardIn .5s cubic-bezier(.22,1,.36,1) both; } @keyframes onbCardIn { from { opacity: 0; transform: translateY(14px) scale(.965); } to { opacity: 1; transform: none; } } .onb-skip { position: absolute; top: 1rem; right: 1.1rem; background: none; border: 0; color: rgba(255,255,255,.8); font-size: .82rem; cursor: pointer; } .onb-stage { position: relative; min-height: 280px; } /* Glissement plus doux et plus COURT (#20 : la latence entre slides) ; .fast = pressé → instantané */ /* Transition d'étape = FONDU vertical doux (plus de glissement horizontal vers la droite, banni). */ /* Transition d'étape = FONDU PUR (aucun mouvement, demande de Maxime : ni horizontal ni vertical). */ .onb-step { position: absolute; inset: 0; opacity: 0; transition: opacity .34s ease; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; will-change: opacity; backface-visibility: hidden; } .onb-step.active { opacity: 1; pointer-events: auto; } .onb-step.left { opacity: 0; } .onb-stage.fast .onb-step { transition: none; } .onb-skip.hot { color: #ffd15c; font-weight: 800; text-decoration: underline; } .onb-emoji { position: relative; font-size: 76px; margin-bottom: .9rem; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); animation: floaty 3s ease-in-out infinite; } /* Polish : halo lumineux sunset derrière l'emoji (façon icône d'app premium). */ .onb-emoji::before { content: ""; position: absolute; left: 50%; top: 47%; width: 124px; height: 124px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,209,92,.4) 0%, rgba(255,126,95,.18) 46%, transparent 70%); z-index: -1; pointer-events: none; } .onb-step h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.74rem; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .6rem; color: #fff; } /* Dégradé limité au prénom (.grad-name) : la virgule et « Salut »/« ! » restent en couleur normale. */ .onb-step h2 .grad-name { background: linear-gradient(90deg,#ffd15c,#ff7e5f); -webkit-background-clip: text; background-clip: text; color: transparent; } .onb-step p { color: rgba(255,255,255,.85); font-size: .98rem; line-height: 1.5; max-width: 320px; } .onb-step p b { color: #fff; } .onb-dots { display: flex; gap: .5rem; justify-content: center; margin: 1rem 0; } .onb-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); transition: all .3s; } .onb-dots i.on { width: 20px; border-radius: 14px; background: linear-gradient(90deg,#ffd15c,#ff7e5f); } .onb-dots i:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 2px; } .onb-actions { display: flex; gap: .7rem; } .onb-actions button { flex: 1; padding: .9rem; border-radius: 999px; font-weight: 800; cursor: pointer; border: 0; font-size: .95rem; } .onb-next { background: linear-gradient(135deg,#FFC93C,#ff7e5f 60%,#FF5A4D); color: #fff; box-shadow: 0 10px 24px rgba(255,90,77,.28); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .onb-next:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(255,90,77,.36); filter: brightness(1.03); } .onb-next:active { transform: translateY(0); } .onb-prev { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.18); flex: 0 0 32%; } /* --------------------- Visite guidée (spotlights) -------------------- */ .tour { position: fixed; inset: 0; z-index: var(--z-tour); } .tour-catch { position: absolute; inset: 0; } /* avale les clics pendant la visite */ /* Le spotlight GLISSE doucement d'une étape à l'autre (left/top/width/height animés) ; au TOUT premier placement on coupe la transition (sinon glissement disgracieux depuis le coin). */ .tour-spot { position: absolute; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(12,7,32,.72); border: 2px solid rgba(255,255,255,.9); pointer-events: none; opacity: 0; transition: left .32s cubic-bezier(.4,0,.2,1), top .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1), height .32s cubic-bezier(.4,0,.2,1), opacity .22s ease; } .tour-spot.no-anim { transition: opacity .22s ease; } .tour-pop { position: absolute; left: 50%; transform: translateX(-50%); width: calc(100% - 2rem); max-width: 360px; background: var(--card); color: var(--ink); border-radius: 20px; padding: 1.1rem 1.2rem; box-shadow: 0 24px 60px rgba(0,0,0,.5); text-align: center; opacity: 0; transition: opacity .2s ease, top .3s cubic-bezier(.22,.8,.3,1); } /* #30 : la bulle GLISSE */ .tour-emoji { font-size: 40px; margin-bottom: .3rem; } .tour-pop h4 { margin: 0 0 .35rem; font-size: 1.15rem; } .tour-pop p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; } .tour-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; } .tour-prog { font-size: .78rem; color: var(--muted); font-weight: 700; } .tour-btns { display: flex; align-items: center; gap: .5rem; } .tour-prev { background: none; border: 0; color: var(--muted); font-size: .82rem; font-weight: 700; cursor: pointer; padding: .55rem .2rem; } /* « Passer » en haut à droite, comme dans les slides d'onboarding (uniformité) */ .tour-pass { position: absolute; top: .5rem; right: .6rem; background: none; border: 0; color: var(--muted); font-size: .8rem; font-weight: 600; cursor: pointer; padding: .55rem .7rem; min-height: 44px; } .tour-next { background: var(--accent-grad); color: #fff; border: 0; border-radius: 999px; padding: .55rem 1.1rem; font-weight: 800; cursor: pointer; } /* Chips colorés = couleur des marqueurs (l'âme SunMates), actifs = pleine couleur */ .homemap-filters .chip.cl-places.active { background: #FF5A4D; color: #fff; box-shadow: 0 4px 12px rgba(45,38,52,.16); } .homemap-filters .chip.cl-mates.active { background: #7a5cff; color: #fff; box-shadow: 0 4px 12px rgba(122,92,255,.32); } .homemap-filters .chip.cl-acts.active { background: #ff9f1c; color: #fff; box-shadow: 0 4px 12px rgba(255,159,28,.32); } .homemap-filters .chip.cl-checkins.active { background: #17a99b; color: #fff; box-shadow: 0 4px 12px rgba(23,169,155,.32); } /* DA : teal, pas de vert vif */ .homemap-filters .chip.cl-quests.active { background: #E8961F; color: #fff; box-shadow: 0 4px 12px rgba(232,150,31,.34); } .homemap-filters .chip.cl-community.active { background: #3AA0FF; color: #fff; box-shadow: 0 4px 12px rgba(58,160,255,.34); } /* Carte #5 : calque Communauté */ /* Bulle « Communauté » de la carte (#5) : avatars + noms réels des voyageurs de la ville */ .mappop-comm .comm-avs { display: flex; justify-content: center; margin: .35rem 0 .25rem; } .mappop-comm .comm-avs > * { width: 30px; height: 30px; border-radius: 50%; margin-left: -7px; border: 2px solid #fff; object-fit: cover; background: var(--accent-soft); display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: var(--accent-ink, var(--accent)); } .mappop-comm .comm-avs > *:first-child { margin-left: 0; } .mappop-comm .comm-n { font-weight: 700; font-size: .82rem; color: var(--ink); } .mappop-comm .comm-names { font-size: .74rem; margin-bottom: .1rem; } .mappop-comm .comm-q { font-size: .76rem; font-weight: 700; color: var(--accent-ink, var(--accent)); margin-top: .15rem; } /* 🌍 Cartes HISTOIRES de pays (« Découvrir » → popInfo, carte #5 v2) */ .cstory-facts { display: flex; flex-direction: column; gap: .6rem; text-align: left; } .cstory-fact { display: flex; gap: .6rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .65rem .7rem; box-shadow: 0 1px 2px rgba(120,60,20,.04), 0 6px 16px -10px rgba(120,60,20,.12); } .cstory-ic { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; font-size: 1.25rem; background: var(--accent-soft); border-radius: 14px; } .cstory-bd { flex: 1; min-width: 0; } .cstory-bd b { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: .95rem; color: var(--ink); } .cstory-txt { font-size: .82rem; line-height: 1.5; color: var(--muted); margin-top: .12rem; } .cstory-hl { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: .82rem; line-height: 1.5; color: var(--ink); text-align: left; } /* Marqueurs personnalisés (pastilles emoji colorées) */ .epin { width: 36px; height: 36px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,.4); border: 2.5px solid #fff; transition: transform .15s ease; } .epin > span { transform: rotate(45deg); font-size: 17px; line-height: 1; } .epin-wrap:hover .epin { transform: rotate(-45deg) scale(1.14); z-index: 600; } .epin-cluster { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; border: 2.5px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.4); text-shadow: 0 1px 2px rgba(0,0,0,.5); } /* a11y : nombre lisible sur fonds clairs (teal/orange/ambre) */ .epin.me { animation: pinPulse 2s ease-out infinite; } @keyframes pinPulse { 0% { box-shadow: 0 3px 8px rgba(0,0,0,.32), 0 0 0 0 rgba(255,90,77,.5); } 70% { box-shadow: 0 3px 8px rgba(0,0,0,.32), 0 0 0 12px rgba(255,90,77,0); } 100% { box-shadow: 0 3px 8px rgba(0,0,0,.32), 0 0 0 0 rgba(255,90,77,0); } } /* Marqueur de quête : pulsation dorée pour signaler l'objectif de jeu */ .epin.quest { animation: questPulse 2.4s ease-out infinite; } @keyframes questPulse { 0% { box-shadow: 0 3px 8px rgba(0,0,0,.32), 0 0 0 0 rgba(232,150,31,.55); } 70% { box-shadow: 0 3px 8px rgba(0,0,0,.32), 0 0 0 13px rgba(232,150,31,0); } 100% { box-shadow: 0 3px 8px rgba(0,0,0,.32), 0 0 0 0 rgba(232,150,31,0); } } @media (prefers-reduced-motion: reduce){ .epin.quest, .epin.me { animation: none; } } .mappop-mini { text-align: center; } .mappop-mini b { font-size: .9rem; } .mappop-quest .mq-tag { display:inline-block; font-weight:800; font-size:.68rem; color:#fff; background:linear-gradient(135deg,#FFC93C,#FF8A3D); padding:.12rem .5rem; border-radius:999px; margin-bottom:.25rem; } .mappop-quest .mq-rew { margin:.35rem 0 .1rem; font-weight:800; font-size:.78rem; color:#8A5800; } /* Carte #5 : « fait/histoire » du lieu ou du pays dans la bulle (CITY/COUNTRY facts) */ .mappop-fact { margin: 6px 0 2px; padding: .4rem .55rem; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink, var(--ink)); font-size: .76rem; line-height: 1.35; text-align: left; } .mappop-btn { display: block; width: 100%; margin-top: 6px; background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: .4rem .6rem; cursor: pointer; font-weight: 700; font-size: .8rem; } .mappop-btn.alt { background: #7a5cff; } .mappop-btn.ghost { background: transparent; color: var(--accent-ink, var(--accent)); border: 1px solid rgba(255,90,77,.4); } /* --------------------- Grille cartes accueil -------------------- */ .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; min-width: 0; } /* Fix débordement horizontal (→ zoom iOS « tout l'écran buggé ») : les items de grid doivent pouvoir rétrécir sous leur contenu (sinon #secuHelp .grid2 dépassait de +112px et forçait le shrink-to-fit). */ .grid2 > * { min-width: 0; } .tile { background: var(--card); border-radius: var(--radius-sm); padding: .7rem .6rem; box-shadow: var(--shadow-sm); cursor: pointer; /* v684 : transition douce sur transform + ombre (feedback « niveau au-dessus », façon Emil) */ transition: transform .16s cubic-bezier(.23,1,.32,1), box-shadow .16s ease; text-align: center; /* v571 (retour Maxime) : contenu CENTRÉ comme .cat-tile → centrages homogènes */ } .tile:active { transform: scale(.97); } .tile:hover { box-shadow: var(--shadow-md, 0 12px 28px -12px rgba(45,38,52,.30)); } /* ============================================================ v692 (retour Maxime « enlever les arrières-tuiles » = la CARTE rectangle derrière chaque icône+texte) : on RETIRE la boîte des .tile — fond, ombre, bordure — en GARDANT le carré coloré (.thumb) + le titre + le sous-titre. Résultat : des icônes qui respirent, sans rectangle, homogène dans tous les modes. Les VRAIES cartes de contenu (.card, .gcard, .cat-tile…) gardent leur fond. Specificité gonflée (html body[.theme-x]) pour battre les `background … !important` (styles.css:3117/4321/4466) qui peignaient la carte. ============================================================ */ html body .tile, html body.theme-dusk .tile, html body.theme-winter .tile, html body.theme-tropic .tile, html body.theme-winter.theme-dusk .tile, html body.theme-tropic.theme-dusk .tile, html body .cat-tile, html body.theme-dusk .cat-tile, html body.theme-winter .cat-tile, html body.theme-tropic .cat-tile, html body.theme-winter.theme-dusk .cat-tile, html body.theme-tropic.theme-dusk .cat-tile { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: .35rem .2rem !important; } html body .tile:hover, html body .cat-tile:hover { box-shadow: none !important; transform: none; } html body .tile.soon:hover { transform: none; } /* .cat-tile = filtre interactif : sans carte, l'état ACTIF se lit via un anneau accent sur l'icône + libellé accentué */ html body .cat-tile.active { border: 0 !important; box-shadow: none !important; } html body .cat-tile.active .cic { box-shadow: 0 0 0 2.5px var(--accent), 0 4px 12px rgba(45,38,52,.18) !important; } html body .cat-tile.active .clbl { color: var(--accent-ink, var(--accent)); } /* ============================================================ v694 (Maxime « tout aplatir, même le contenu ») : on retire le FOND des cartes de CONTENU (affichage), pour un rendu ultra-plat homogène. On NE touche PAS aux modales (.act-card, .picker-card, .popinfo-card), aux CHAMPS (inputs, .feed-composer, .sscope…), ni aux cellules interactives (.poll-opt, .lb-row…) qui ont besoin de leur surface. Double préfixe (html body + html body[class*=theme-]) pour battre les `background var(--card)/gradient !important` jour ET modes. */ html body :is(.card, .post, .fpost, .pf-section, .gcard, .pcard, .qm-card, .tcard, .trip-card, .souvenir-card, .solo-prog, .solo-ch, .solo-rit, .hm-souv, .hm-hero, .hm-mateday, .reco, .ban-card, .adm-live, .cstory-fact, .gal-city, .prep-item, .hm-inspo, .badge-rail), html.sm-app body :is(.card, .post, .fpost, .pf-section, .gcard, .pcard, .qm-card, .tcard, .trip-card, .souvenir-card, .solo-prog, .solo-ch, .solo-rit, .hm-souv, .hm-hero, .hm-mateday, .reco, .ban-card, .adm-live, .cstory-fact, .gal-city, .prep-item, .hm-inspo, .badge-rail) { background: transparent !important; box-shadow: none !important; border-color: transparent !important; } /* v702 (retour Maxime « barre d'ombre sur toute la largeur au-dessus de SunMates ») : le DÉGRADÉ du topbar (v694) créait justement cette bande visible. Au REPOS le topbar est TRANSPARENT → il montre le fond uni var(--bg) (zéro bande, zéro ombre). Il ne devient un aplat var(--bg) que quand on SCROLLE (pour occulter le contenu qui défile dessous). */ /* v705 (Maxime « ton ombre TOUJOURS là en haut + bandeau opaque ») : topbar TRANSPARENT EN PERMANENCE (même scrollé) → AUCUN bandeau, AUCUNE arête/ombre, dans tous les modes. Le hide-on-scroll le cache quand on descend, donc l'occultation n'est plus nécessaire. */ html body .topbar, html.sm-app body .topbar, html body.sm-scrolled .topbar, html.sm-app body.sm-scrolled .topbar { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ============================================================ v695 (Maxime « encore plein de cartes et de contours dans TOUTES les couleurs de Radiant Horizon, ça n'a pas de sens ») : on UNIFIE les petits contrôles (pills/chips/toggles). Un seul code : INACTIF = surface neutre discrète + fin bord --line (zéro couleur DA) ; ACTIF = accent. Fini l'arc-en-ciel de contours corail/or/violet/teal qui faisait fouillis. ============================================================ */ html body :is(.chip, .sscope, .avail-chip, .streak-chip, .todo-toggle, .hm-layers-btn, .tvt-btn, .fc-kind, .qs-mode-btn, .sp-stat, .pseg, .mseg):not(.active):not(.on):not(.is-on), html.sm-app body :is(.chip, .sscope, .avail-chip, .streak-chip, .todo-toggle, .hm-layers-btn, .tvt-btn, .fc-kind, .qs-mode-btn, .sp-stat, .pseg, .mseg):not(.active):not(.on):not(.is-on) { background: color-mix(in srgb, var(--ink) 5%, transparent) !important; border: 0 !important; box-shadow: none !important; color: var(--muted) !important; } /* v756 : contour gris retiré, fond subtil = l'affordance */ /* la bascule Voyage/Maison : conteneur neutre, bouton actif = accent (déjà géré), inactif transparent */ html body .mode-switch, html.sm-app body .mode-switch { background: color-mix(in srgb, var(--ink) 5%, transparent) !important; border: 0 !important; } /* v756 : contour gris retiré */ html body .mode-switch button:not(.active) { background: transparent !important; color: var(--muted) !important; box-shadow: none !important; } /* DÉLIMITATION (anti-fouillis) : on aère franchement entre les grandes sections de l'accueil, et le titre de section (barre d'accent Fraunces) sert de séparateur visuel — pas de boîte. */ html body .tab-panel[data-panel="accueil"] > section, html body .tab-panel[data-panel="accueil"] > .section-head, html body .tab-panel[data-panel="accueil"] > #homeTravelMap, html body .tab-panel[data-panel="accueil"] > #homeQuickAccess { margin-top: 2.1rem !important; } /* ============================================================ v696 (Maxime « encore BEAUCOUP de cartes derrière beaucoup de choses ») : 2e vague d'aplatissement d'après audit — boutique/boosts/objectifs/astuces/stats/check-in/plans gardaient un fond+bordure+ombre. On les rend plats. (Modales/champs/cellules interactives toujours préservés.) ============================================================ */ html body :is(.feature, .prog-card, .demo-step, .shop-item, .boost-card, .xpl-card, .reward-card, .wg-card, .tip-card, .qcoll, .jeux-open, .ci-card, .sa-tile, .gp-tile, .wg-goal, .dstat, .stat-box, .pc-stat, .sp-stat), html.sm-app body :is(.feature, .prog-card, .demo-step, .shop-item, .boost-card, .xpl-card, .reward-card, .wg-card, .tip-card, .qcoll, .jeux-open, .ci-card, .sa-tile, .gp-tile, .wg-goal, .dstat, .stat-box, .pc-stat, .sp-stat) { background: transparent !important; box-shadow: none !important; border-color: transparent !important; } html body .hm-plan > summary, html.sm-app body .hm-plan > summary { background: transparent !important; box-shadow: none !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; } /* cartes geo inline (style="...") : on retire fond+bordure */ #geoNowCard, #geoPrompt { background: transparent !important; border-color: transparent !important; } /* ===== DÉLIMITATION SANS CARTE (anti-fouillis) : fines lignes de séparation entre les grandes sections de l'accueil + barre d'accent gauche sur les blocs « liste » importants. ===== */ html body .tab-panel[data-panel="accueil"] > section, html body .tab-panel[data-panel="accueil"] > .section-head, html body .tab-panel[data-panel="accueil"] > #homeQuickAccess, html body .tab-panel[data-panel="accueil"] > #homeTravelMap { border-top: 0 !important; padding-top: 1.2rem !important; } /* v810 : filet au-dessus des sections accueil RETIRÉ (Maxime « barre au-dessus de Explore/Accès rapides/le fil/Mes voyages… »), l'espacement seul délimite */ /* le 1er bloc (juste sous la recherche) n'a pas besoin de filet au-dessus */ html body .tab-panel[data-panel="accueil"] > .hcust-open + * { border-top: 0; } /* ============================================================ v698 (Maxime « fonce fait tout ») : REFONTE TYPO + COULEURS + DÉLIMITATION pour la DA PLATE. Pattern haute spécificité (html body / html body[class*=theme-]) pour battre le loader DA. ============================================================ */ /* --- TYPOGRAPHIE : échelle claire, titres Fraunces, sous-titres calmes --- */ html body h1, html.sm-app body h1 { font-family: "Fraunces", Georgia, serif; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--ink); margin: 1.05rem 0 .15rem; } html body h2, html.sm-app body h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.16; color: var(--ink); } /* titres de section : Fraunces + barre d'accent gauche (::before, ne décale pas) */ html body .section-head > h3, html body .qm-head > h3, html body .sp-title, html.sm-app body .section-head > h3, html.sm-app body .qm-head > h3, html.sm-app body .sp-title { font-family: "Fraunces", Georgia, serif !important; font-weight: 700 !important; letter-spacing: -.01em !important; line-height: 1.18 !important; color: var(--ink) !important; position: relative; padding-left: .62rem !important; } /* v730 : font-size retiré (autoritaire = 1.04rem plus bas) */ html body .section-head > h3::before, html body .qm-head > h3::before, html body .sp-title::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 3px; border-radius: 3px; background: var(--accent-grad); } /* sous-titres / descriptions : calmes et homogènes */ html body p.muted, html body .hello-row .muted, html body .sc-sub, html body .qm-head + .muted, html.sm-app body p.muted, html.sm-app body .hello-row .muted { font-size: .86rem !important; font-weight: 500 !important; line-height: 1.45 !important; color: var(--muted) !important; } /* --- COULEURS : on calme les fonds/encadrés dorés-corail résiduels (pins carte gardés) --- */ html body :is(.xpl-card, .reward-card, .reward-card.alt, .shop-item, .tip-card, .wg-card, .qcoll, .reward-box, .ci-card), html.sm-app body :is(.xpl-card, .reward-card, .reward-card.alt, .shop-item, .tip-card, .wg-card, .qcoll, .reward-box, .ci-card) { background: color-mix(in srgb, var(--ink) 5%, transparent) !important; border: 1px solid var(--line) !important; box-shadow: none !important; } /* badges d'action multicolores → accent unifié */ html body :is(.act-challenge, .act-bff, .act-block, .act-map, .act-teal, .act-gold, .act-coral), html.sm-app body :is(.act-challenge, .act-bff, .act-block, .act-map, .act-teal, .act-gold, .act-coral) { background: var(--accent-soft) !important; color: var(--accent-ink, var(--accent)) !important; border-color: transparent !important; } /* --- 2e VAGUE CARTES : .feature (héros) à plat, texte lisible --- */ html body .feature, html.sm-app body .feature { background: transparent !important; box-shadow: none !important; min-height: auto !important; border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent) !important; } html body .feature .body, html.sm-app body .feature .body { background: transparent !important; } html body .feature .body .name, html body .feature .body .sub, html body .feature .tags span, html.sm-app body .feature .body .name, html.sm-app body .feature .body .sub { color: var(--ink) !important; text-shadow: none !important; } /* --- DÉLIMITATION : filets fins au-dessus des grandes sections des autres onglets --- */ html body .tab-panel[data-panel="lieux"] > .section-head, html body .tab-panel[data-panel="lieux"] > details, html body .tab-panel[data-panel="jeux"] > .section-head, html body .tab-panel[data-panel="connexions"] > .section-head, html body .tab-panel[data-panel="profil"] > .section-head, html body .secu-view > .section-head { border-top: 0; padding-top: 1.1rem; margin-top: 1.7rem; } /* v810 : filet au-dessus des sections (Lieux/Jeux/Profil/Sécurité « En cas d'urgence »…) RETIRÉ */ /* ============================================================ v699 (carte blanche · design EMIL + principes UI/UX) : 1) AFFORDANCE — la carte ayant disparu, on signale qu'un bloc est CLIQUABLE par un retour au survol (teinte accent douce) + un press-feedback (scale .97). Touch-safe (@media hover). 2) MOINS d'air (Maxime « parfois trop d'espace aéré ») 3) centrage cohérent des tuiles. ============================================================ */ html body :is(.tile, .cat-tile, .qrow, .lb-row, .person, .gp-tile, .reward-card, .trip-card, .hm-visitor, .rit-row, .sa-tile, .qm-card, .wish-chip, [data-goto], [data-secuquick], [data-protile], [data-adv], .stat-click, [data-spstat]) { cursor: pointer; border-radius: 14px; transition: transform .16s var(--ease-out, cubic-bezier(.22,1,.36,1)), background-color .15s ease; -webkit-tap-highlight-color: transparent; } html body :is(.tile, .cat-tile, .qrow, .lb-row, .person, .gp-tile, .reward-card, .trip-card, .hm-visitor, .rit-row, .sa-tile, [data-goto], [data-secuquick], [data-protile], .stat-click, [data-spstat]):active { transform: scale(.97); } /* v708 : la teinte accent au survol créait un « halo gris » (retour Maxime) → on garde juste le léger soulèvement (translateY) défini plus bas, sans fond. */ /* moins d'air entre les sections de l'accueil (l'aération était excessive) */ html body .tab-panel[data-panel="accueil"] > section, html body .tab-panel[data-panel="accueil"] > .section-head, html body .tab-panel[data-panel="accueil"] > #homeQuickAccess, html body .tab-panel[data-panel="accueil"] > #homeTravelMap { margin-top: 1.5rem !important; padding-top: 1.15rem !important; } /* centrage cohérent du contenu des tuiles (icône + textes alignés pareil partout) */ html body :is(.tile, .cat-tile) { text-align: center !important; } html body :is(.tile, .cat-tile) :is(.t-name, .t-meta, .clbl) { text-align: center !important; width: 100%; } /* ============================================================ v700 (carte blanche, suite) : segments Profil homogénéisés + motion EMIL (stagger). ============================================================ */ /* Segments Profil (Gold/Espace Pro/Admin) : fini le multicolore — neutre inactif + accent actif. Le rôle reste lisible via l'icône + le libellé. */ html body #profSegNav button[data-pseg], html.sm-app body #profSegNav button[data-pseg] { background: color-mix(in srgb, var(--ink) 5%, transparent) !important; border: 1px solid var(--line) !important; color: var(--muted) !important; box-shadow: none !important; } html body #profSegNav button[data-pseg].active, html.sm-app body #profSegNav button[data-pseg].active { background: var(--accent-grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 12px rgba(45,38,52,.16) !important; } /* MOTION (Emil) : entrée en cascade des tuiles d'accès rapides quand la section se révèle. Filet : par défaut (pas de .sm-reveal) les tuiles restent visibles ; reduced-motion neutralise. */ @media (prefers-reduced-motion: no-preference) { html body #homeQuickAccess.sm-reveal .grid2 > .tile { opacity: 0; transform: translateY(9px); } html body #homeQuickAccess.sm-reveal.in .grid2 > .tile { animation: qaIn .44s var(--ease-out, cubic-bezier(.22,1,.36,1)) both; } html body #homeQuickAccess.sm-reveal.in .grid2 > .tile:nth-child(1) { animation-delay: 30ms; } html body #homeQuickAccess.sm-reveal.in .grid2 > .tile:nth-child(2) { animation-delay: 70ms; } html body #homeQuickAccess.sm-reveal.in .grid2 > .tile:nth-child(3) { animation-delay: 110ms; } html body #homeQuickAccess.sm-reveal.in .grid2 > .tile:nth-child(4) { animation-delay: 150ms; } html body #homeQuickAccess.sm-reveal.in .grid2 > .tile:nth-child(5) { animation-delay: 190ms; } html body #homeQuickAccess.sm-reveal.in .grid2 > .tile:nth-child(6) { animation-delay: 230ms; } html body #homeQuickAccess.sm-reveal.in .grid2 > .tile:nth-child(7) { animation-delay: 270ms; } html body #homeQuickAccess.sm-reveal.in .grid2 > .tile:nth-child(8) { animation-delay: 310ms; } @keyframes qaIn { to { opacity: 1; transform: none; } } /* v708 (Maxime « ça rame, depop/repop à chaque clic ») : la cascade GÉNÉRIQUE sur toutes les grilles re-déclenchait à chaque navigation = sensation de lag/depop. RETIRÉE. On garde uniquement la cascade CONTENUE des accès rapides (ci-dessus) + le reveal de section (léger). App plus fluide. */ } /* ============================================================ v701 (carte blanche, suite) : transitions d'onglets (Emil : subtil + rapide, onglets = action fréquente) + chat à plat (bulle reçue neutre, bulle envoyée accent). ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* v712 (Maxime « Jeux & Quêtes impossible à scroller ») : mon tabIn utilisait `both` + un translateY → le panneau RESTAIT avec un transform identité (matrix) = containing block qui CASSE le scroll tactile mobile. On repasse en OPACITÉ SEULE (zéro transform sur le conteneur scrollable) → scroll réparé. */ html body main > .tab-panel:not(.hidden) { animation: fadeOnly .2s var(--ease-out, cubic-bezier(.22,1,.36,1)); } } /* CHAT : la bulle REÇUE devient une surface neutre cohérente (au lieu du rose figé), la bulle ENVOYÉE garde l'accent (signature). Radius asymétrique conservé. */ html body .bubble.them, html.sm-app body .bubble.them { background: color-mix(in srgb, var(--ink) 7%, transparent) !important; color: var(--ink) !important; box-shadow: none !important; } html body .bubble.me, html.sm-app body .bubble.me { box-shadow: none !important; } /* ============================================================ v702 : boutons aplatis (contours retirés) + CONTRASTE corrigé + motion EMIL plus visible. ============================================================ */ /* boutons secondaires/ghost : plus de contour, fond subtil (le primaire garde son fill accent) */ html body :is(.btn-ghost, .iconbtn, .au-fbtn:not(.active), .btn-secondary, .mappop-btn.ghost), html.sm-app body :is(.btn-ghost, .iconbtn, .au-fbtn:not(.active), .btn-secondary, .mappop-btn.ghost) { background: color-mix(in srgb, var(--ink) 6%, transparent) !important; border: 0 !important; box-shadow: none !important; color: var(--text) !important; } /* CONTRASTE : le texte des contrôles inactifs (souvent en muted pâle sur fond clair) → --text lisible */ html body :is(.chip, .sscope, .fc-kind, .qs-mode-btn, .tvt-btn, .pseg, .mseg):not(.active):not(.on):not(.is-on), html.sm-app body :is(.chip, .sscope, .fc-kind, .qs-mode-btn, .tvt-btn, .pseg, .mseg):not(.active):not(.on):not(.is-on) { color: var(--text) !important; } /* MOTION (Emil) plus VISIBLE : reveal un peu plus ample + lift au survol des blocs cliquables */ html body .sm-reveal { transform: translateY(20px); } @media (hover: hover) and (pointer: fine) { html body :is(.tile, .cat-tile, .qrow, .person, .reward-card, .gp-tile, .trip-card, [data-goto], [data-secuquick]):hover { transform: translateY(-2px); } } /* ============================================================ v703 : bugs concrets — carte plein écran + retour tactile MOBILE. ============================================================ */ /* « Explore autour de toi » (+ journée/météo) ne doit PLUS rester superposé à la carte plein écran : le titre est DANS #homeTravelMap (pas un enfant direct du panneau) → la règle d'origine ne le cachait pas. */ body:has(.homemap-card.fs) #homeTravelMap > :not(.homemap-card) { display: none !important; } body:has(.homemap-card.fs) .tab-panel[data-panel="accueil"] > .section-head { display: none !important; } /* v708 (Maxime « la tuile se colore bizarrement au clic ») : au TAP, on garde UNIQUEMENT le press-feedback (scale), SANS teinte de fond (la teinte accent washait toute la tuile = moche). Retour tactile net. */ html body :is(.tile, .cat-tile, .qrow, .lb-row, .person, .gp-tile, .reward-card, .trip-card, .hm-visitor, .rit-row, .sa-tile, .btn-ghost, .iconbtn, .chip, [data-goto], [data-secuquick], [data-protile], .stat-click, [data-spstat]):active { transform: scale(.96); transition: transform .1s ease; } /* CONTRASTE GOLD/QUÊTES en mode SOMBRE (Maxime : « illisible ») : textes codés en dur sombre → adaptatifs. En nuit, un texte brun (#8a5a00, #5a3d00…) sur fond gold pâle ne se lit pas → on force --ink/--text. */ html body.theme-dusk :is(.gold-only-note, .gp-note, .gold-note), html body.theme-winter.theme-dusk :is(.gold-only-note), html body.theme-tropic.theme-dusk :is(.gold-only-note) { color: var(--ink) !important; background: color-mix(in srgb, var(--accent-3, #FFD15C) 12%, transparent) !important; border-color: color-mix(in srgb, var(--accent-3, #FFD15C) 30%, transparent) !important; } html body.theme-dusk :is(.qs-title, .qd-title, .quest-title, .gp-tile .t-name, .gp-tile b) { color: var(--ink) !important; } /* ============================================================ v703 (AUDIT LARGE agent) : contraste nuit + cartes résiduelles + délimitations manquantes. ============================================================ */ /* A1 · pastilles/badges OR FONCÉ (#B5740E) restés illisibles sur fond prune en nuit → or clair lisible */ html.sm-app body.theme-dusk :is(.badge.ok, .mappop-quest .mq-rew, .q-inprog, .ci-count, .rate-chip, .pf-pct.done, .num-badge) { color: #FFD79A !important; } html.sm-app body.theme-dusk :is(.q-inprog, .ci-count, .rate-chip, .pf-pct.done, .num-badge, .badge.ok) { background: color-mix(in srgb, #FFD15C 16%, transparent) !important; } html.sm-app body.theme-dusk .gold-only-note { background: color-mix(in srgb, #FFD15C 16%, transparent) !important; color: #FFD79A !important; border-color: rgba(255,209,92,.4) !important; } /* A2 · cartes de contenu résiduelles → aplaties comme le reste (dont LA « Quête du jour ») */ html body :is(.quest-spotlight, .sc-card, .sugg-card, .starterCard, .rit-row, .coupon, .faq-secu details), html.sm-app body :is(.quest-spotlight, .sc-card, .sugg-card, .starterCard, .rit-row, .coupon, .faq-secu details) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } html body .quest-spotlight, html.sm-app body .quest-spotlight { padding-left: 1.1rem !important; } html body .num-row.num-here, html.sm-app body .num-row.num-here { background: color-mix(in srgb, var(--accent) 6%, transparent) !important; border-color: transparent !important; box-shadow: none !important; } /* A3 · filets de séparation manquants (Sécurité, Profil, détail lieu, connexions) */ html body .secu-view > section, html body .secu-view > div[class*="card"], html body .tab-panel[data-panel="profil"] .pf-section, html body #placeDetail > section, html body .tab-panel[data-panel="connexions"] > section { border-top: 0; padding-top: 1.1rem; margin-top: 1.3rem; } /* v810 : filet retiré (détail lieu / connexions) */ html body .secu-view > section:first-child, html body .tab-panel[data-panel="profil"] .pf-section:first-of-type, html body #placeDetail > section:first-child { border-top: 0 !important; margin-top: 0 !important; } /* ============================================================ v706 (AUDIT bugs concrets agent) : 10 correctifs ciblés. ============================================================ */ /* 1 · popup au clic d'un pin : lisible jour ET nuit */ html body :is(.leaflet-popup-content-wrapper, .leaflet-popup-tip), html.sm-app body :is(.leaflet-popup-content-wrapper, .leaflet-popup-tip) { background: var(--card) !important; color: var(--ink) !important; } html body :is(.leaflet-popup-content, .mappop-mini, .mappop-mini b, .mappop-comm .comm-n, .mappop-comm .comm-names), html.sm-app body :is(.leaflet-popup-content, .mappop-mini, .mappop-mini b, .mappop-comm .comm-n, .mappop-comm .comm-names) { color: var(--ink) !important; } html body .mappop-fact, html.sm-app body .mappop-fact { background: var(--accent-soft) !important; color: var(--ink) !important; } /* 2 · Gold lisible en JOUR (et nuit) */ html body .gold-only-note, html.sm-app body .gold-only-note { background: var(--accent-soft) !important; color: var(--accent-ink, var(--accent)) !important; border-color: rgba(232,150,31,.5) !important; } html body #goldPreviewBanner, html.sm-app body #goldPreviewBanner { color: #3a2500 !important; } /* v709 (Maxime « Gold illisible en JOUR » — ENFIN VU en rendu mode clair) : en jour le hero Gold passait clair → texte crème invisible. On FORCE l'écrin sombre + texte lisible dans TOUS les modes. */ html body .gold-hero, html.sm-app body .gold-hero, html body.sm-da-on .gold-hero { background: linear-gradient(160deg, #2A1E0E 0%, #44310F 45%, #2A1C08 100%) !important; color: #FFE9B0 !important; border: 1px solid rgba(232,150,31,.5) !important; } html body .gold-hero :is(.gh-title, .gh-tag, .msg, .gh-test, h2, h3), html.sm-app body .gold-hero :is(.gh-title, .gh-tag, .msg, .gh-test, h2, h3) { color: #FFF3CE !important; } html body .gold-hero .gh-price, html.sm-app body .gold-hero .gh-price { color: #FFD15C !important; } /* ============================================================ v710 (liste Maxime, lot 3) : feed démarcations, onboarding contenu, Mon parcours, scrim. ============================================================ */ /* 14 · FEED : filet de séparation entre les posts */ html body :is(#homeFeed, #feed) > .fpost + .fpost, html.sm-app body :is(#homeFeed, #feed) > .fpost + .fpost { border-top: 0 !important; margin-top: 1rem; padding-top: .2rem; } /* v810 : filet entre posts du FIL retiré */ /* 11 · ONBOARDING : contention STRICTE des slides (ne peuvent plus fuir dans un coin) */ html body .onb-stage { position: relative !important; overflow: hidden; } html body .onb-step { position: absolute !important; inset: 0 !important; } /* 20 · « Mon parcours » : chiffres prominents (Fraunces) comme le profil refait */ html body .parcours-card .pc-stat .pc-n, html.sm-app body .parcours-card .pc-stat .pc-n { font-family: "Fraunces", Georgia, serif !important; font-size: 1.45rem !important; font-weight: 800 !important; } html body .parcours-card .pc-head b, html.sm-app body .parcours-card .pc-head b { font-size: 1.02rem !important; } /* 19 · « gros encart noir » au clic des tuiles Jeux : le scrim modal était très sombre (.55) → adouci, surtout en mode JOUR (scrim clair) pour ne plus avoir ce gros pavé noir. */ html body .act-overlay, html.sm-app body .act-overlay { background: rgba(12,7,32,.42) !important; } html body:not(.theme-dusk):not([class*="dusk"]) .act-overlay { background: rgba(30,18,46,.28) !important; } /* ============================================================ v713 (Maxime « aplatis aussi celles que tu appelais bouton et qui pouvaient casser ») : les cellules CLIQUABLES encore en carte → à plat. Listes = filet bas (style liste épurée) ; encarts = transparent. Le press-feedback global (scale) reste l'affordance. Les états (fill de sondage, rituel fait, podium) sont préservés (ce sont des classes séparées). ============================================================ */ html body :is(.poll-opt, .lb-row, .ci-card, .jeux-open), html.sm-app body :is(.poll-opt, .lb-row, .ci-card, .jeux-open) { background: transparent !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important; box-shadow: none !important; border-radius: 0 !important; } html body :is(.qcoll, .wg-card, .wg-goal, .prog-card), html.sm-app body :is(.qcoll, .wg-card, .wg-goal, .prog-card) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } html body .cat-tile, html.sm-app body .cat-tile { border-color: transparent !important; box-shadow: none !important; } html body .gp-tile span:last-child, html.sm-app body .gp-tile span:last-child { color: var(--text) !important; } /* ============================================================ v714 · HARMONISATION TYPO (audit agent) : échelle + familles + poids + couleurs UNIFORMES, dans les 2 modes. Dernier bloc → gagne sur les 4 couches concurrentes (.section-head>h3 définie 3×). N'écrase PAS : logo, prix Gold, .match-card h3 (dégradé), retro-8bit, chiffres-héros. ============================================================ */ /* 1 · FAMILLES : titres = Fraunces */ html body :is(h1,h2,h3,h4,.section-head>h3,.qm-head>h3,.sp-title,.qs-title,.su-head .su-t,.tz-name,.cstory-bd b,.pf-head,.ph-name,.sv-name,.detail-hero .dh-name,.parcours-card .pc-head b), html.sm-app body :is(h1,h2,h3,h4,.section-head>h3,.qm-head>h3,.sp-title,.qs-title,.su-head .su-t,.tz-name,.cstory-bd b,.pf-head,.ph-name,.sv-name,.detail-hero .dh-name,.parcours-card .pc-head b){ font-family:"Fraunces",Georgia,serif !important; font-optical-sizing:auto; } /* 2 · ÉCHELLE + POIDS UNIQUE (700 titres). v716 : Maxime « ne modifie PAS les couleurs des titres » → on garde UNIQUEMENT taille/poids/interligne, AUCUN color sur les titres. */ html body h1, html.sm-app body h1{ font-size:1.5rem !important; font-weight:700 !important; line-height:1.14 !important; letter-spacing:-.02em !important; } html body h2, html.sm-app body h2{ font-size:1.25rem !important; font-weight:700 !important; line-height:1.18 !important; letter-spacing:-.015em !important; } /* (v730 : doublon .section-head>h3 1.1rem RETIRÉ — la règle autoritaire unique vit plus bas, 1.04rem.) */ html body h3, html.sm-app body h3{ font-size:1rem !important; font-weight:700 !important; line-height:1.25 !important; letter-spacing:-.01em !important; } html body :is(.qs-title,.tz-name,.su-head .su-t,.cstory-bd b,.pf-head), html.sm-app body :is(.qs-title,.tz-name,.su-head .su-t,.cstory-bd b,.pf-head){ font-weight:700 !important; } html body :is(.ph-name,.sv-name,.sv-stat .sv-n,.ph-xp-val b,.stat,.sp-stat b,.coll-stat .cs-v), html.sm-app body :is(.ph-name,.sv-name,.sv-stat .sv-n,.ph-xp-val b,.stat,.sp-stat b,.coll-stat .cs-v){ font-weight:800 !important; } /* 3 · SOUS-TITRES / META / MUETS homogènes (Manrope .82rem --muted) */ html body :is(.muted,.meta,.st-sub,.sc-sub,.feat-desc,.boost-desc,.gcard .gdesc,.completion-txt,.popinfo-b,.tour-pop p), html.sm-app body :is(.muted,.meta,.st-sub,.sc-sub,.feat-desc,.boost-desc,.gcard .gdesc,.completion-txt){ font-size:.82rem !important; font-weight:500 !important; line-height:1.45 !important; color:var(--muted) !important; } html body :is(label,.lbl,.jnav-cap,.set-grouptitle,.spot-step), html.sm-app body :is(label,.lbl,.jnav-cap,.set-grouptitle,.spot-step){ font-size:.72rem !important; font-weight:700 !important; letter-spacing:.04em !important; } /* 4 · LISIBILITÉ MODE SOMBRE : amber gameplay #B5740E -> ambre clair (les ~23 sans override dusk) */ html body.theme-dusk :is(.xp-banner b,.xpl-lvl,.xpl-xp,.q-inprog,.ci-count,.rate-chip,.qm-xp,.sc-xp,.rit-cnt,.boost-card .boost-meta,.tip-title,.profile-title,.wg-alldone,.tcard-vedette,.mappop-quest .mq-rew,.shop-coins){ color:#FFD79A !important; } /* v717 · boutons cloche/messages du header (Maxime « pareil pour les logos notifs/messages ») : juste l'ICÔNE, plus de petit pavé gris autour. Cible tactile conservée (44px). */ html body .topbar-actions .iconbtn, html.sm-app body .topbar-actions .iconbtn { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ============================================================ v718 · REFONTE onglet JEUX (Maxime « refonds le placement entier ») : 1) HUD niveau PLEINE LARGEUR mis à l'honneur (titre centré au-dessus, jauge d'XP large). 2) Quête du jour REMONTE juste sous le HUD (le hook quotidien). 3) puis Jouer / Progresser, puis les widgets de progression. Réordonné en flex (zéro DOM). ============================================================ */ html body #jeuxHome { display: flex; flex-direction: column; } html body #jeuxHome > * { order: 6; } html body #jeuxHome > .jh-head { order: 1; } html body #jeuxHome > p.muted { order: 2; } html body #jeuxHome > .jh-next { order: 3; } html body #jeuxHome > .quest-spotlight { order: 4; margin-top: .3rem; } html body #jeuxHome > #jeuxNav { order: 5; } /* titre centré + HUD niveau pleine largeur (à plat, jauge bien visible) */ html body .jh-head { flex-direction: column !important; align-items: stretch !important; gap: .5rem !important; } html body .jh-head > h1 { text-align: center; } html body .jh-head .player-badge.player-hud { width: 100% !important; max-width: none !important; justify-content: flex-start !important; gap: .75rem !important; padding: .15rem .1rem !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important; padding-bottom: .7rem !important; border-radius: 0 !important; box-shadow: none !important; } html body .jh-head .player-badge.player-hud .pb-av { width: 48px !important; height: 48px !important; font-size: 1.4rem !important; } html body .jh-head .player-badge.player-hud .hud-info { flex: 1; min-width: 0; } html body .jh-head .player-badge.player-hud .hud-bar { width: 100% !important; height: 9px !important; } html body .jh-head .player-badge.player-hud::after { display: none !important; } /* l'anneau pulsé n'a pas de sens sur une pilule pleine largeur */ /* ============================================================ v719 · MOTION barre de NAVIGATION : un indicateur (pilule sunset) qui GLISSE d'un onglet à l'autre (au lieu d'apparaître sec sur le nouvel onglet). Le pill per-bouton est remplacé par cet indicateur unique animé. + l'icône active garde son petit « pop ». ============================================================ */ html body .nav-ind { position: absolute; top: .45rem; bottom: calc(.45rem + env(safe-area-inset-bottom, 0px)); left: 0; width: 0; border-radius: 16px; background: var(--accent-soft); transform: translateX(0); opacity: 0; pointer-events: none; z-index: 0; transition: transform .36s cubic-bezier(.34,1.25,.4,1), width .36s cubic-bezier(.34,1.25,.4,1), opacity .25s ease; } html body .bottom-nav button { z-index: 1; } /* on retire le fond per-bouton (remplacé par l'indicateur glissant) */ html body .bottom-nav button.active, html.sm-app body .bottom-nav button.active { background: transparent !important; } /* ============================================================ v720 · STREAK (série) plus vivante (Maxime « pas bien implémentée ») : la flamme VIBRE doucement (vivante au lieu d'un emoji figé) ; le nombre « pop » quand la série avance (JS). ============================================================ */ @media (prefers-reduced-motion: no-preference) { html body :is(.sp-fire, .ph-streak-fire) { display: inline-block; transform-origin: 50% 85%; animation: smFlame 1.9s ease-in-out infinite; } @keyframes smFlame { 0%, 100% { transform: scale(1) rotate(-2deg); } 25% { transform: scale(1.09) rotate(2.5deg); } 50% { transform: scale(.96) rotate(-1deg); } 75% { transform: scale(1.06) rotate(1.5deg); } } } /* ============================================================ v714b · AUDIT EXHAUSTIF cartes résiduelles (agent) : dernières surfaces échappant à v692→v713 (Admin, Réglages, Sécurité, Jeux). ENCARTS → transparent ; CELLULES répétées → filet bas. (.detail-hero NON aplati ici = hero à texte blanc, risque d'illisibilité.) ============================================================ */ html body :is(.help-cta, .lb-optin, .secu-explain), html.sm-app body :is(.help-cta, .lb-optin, .secu-explain) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } html body :is(.pgrid .pcell, .ice-call, .au-fbtn:not(.active), .fb-chip:not(.on)), html.sm-app body :is(.pgrid .pcell, .ice-call, .au-fbtn:not(.active), .fb-chip:not(.on)) { background: transparent !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important; box-shadow: none !important; border-radius: 0 !important; } html body #adminDash .pcell.pcell-jump, html.sm-app body #adminDash .pcell.pcell-jump { border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important; } html body .bingo-cell:not(.on), html.sm-app body .bingo-cell:not(.on) { background: transparent !important; border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important; box-shadow: none !important; } /* 3 · barre de recherche : fond neutre cohérent en nuit (fini le prune saturé) */ html body.theme-dusk .search input, html.sm-app body.theme-dusk .search input { background: var(--dcard2, #241b35) !important; color: var(--ink) !important; border-color: var(--line) !important; } /* 4 · sélecteur de ville : pilule lisible (fini le gris terne) */ html body .city-pick .sm-sel-trigger, html.sm-app body .city-pick .sm-sel-trigger { background: var(--accent-soft) !important; border: 0 !important; color: var(--ink) !important; } /* v756 : contour corail retiré, fond accent-soft = l'affordance */ html body.theme-dusk .city-pick .sm-sel-trigger, html.sm-app body.theme-dusk .city-pick .sm-sel-trigger { background: var(--dcard, #2a2140) !important; border-color: rgba(255,209,92,.28) !important; } /* 5 · « À débloquer » : masquer si le rail est vide + médaille de secours */ html body #badgeRailSection:not(:has(.br-item)) { display: none !important; } html body #badgeRail .br-medal:empty::before { content: "🏅"; font-size: 1.4rem; } /* 6 · « Mon spot du jour » : un seul chevron (tuer le marqueur natif tous moteurs) */ html body .spot-card > summary { list-style: none !important; } html body .spot-card > summary::-webkit-details-marker { display: none !important; } html body .spot-card > summary::marker { content: "" !important; } /* 7 · « Ton prochain voyage » : espacement des tuiles */ html body #nextTripCard { display: flex; flex-direction: column; gap: .6rem; } html body :is(#nextTripCard .trip-card, #nextTripCard .ptrip-card) { margin-bottom: 0; } html body .ptrip-section > .ptrip-card + .ptrip-card { margin-top: .6rem; } /* 8 · SOS/cercle : taille raisonnée (régression d'emphase) */ html body .secu-view #secuHome > .card:first-of-type .sos-logo { font-size: 2.6rem !important; } /* 9 · textareas qui montrent tout le texte (auto-grow) */ html body :is(textarea, .feed-composer textarea, #feedInput, #spotInput) { field-sizing: content; min-height: 5.2em; max-height: 50vh; overflow-y: auto; line-height: 1.5; } html body .feed-composer textarea { min-height: 3.2em; } /* 10 · titres de catégories plus affirmés (fini le gris muet) */ html body :is(.tab-panel .jnav-cap, .jeux-view .jnav-cap), html.sm-app body :is(.tab-panel .jnav-cap, .jeux-view .jnav-cap) { font-size: .82rem !important; font-weight: 800 !important; letter-spacing: .02em !important; color: var(--ink) !important; } html body :is(.tab-panel .jnav-cap::before, .jeux-view .jnav-cap::before) { width: 4px !important; height: 1em !important; opacity: 1 !important; } /* ============================================================ v707 · REDESIGN PROFIL (DA plate) : avatar circulaire à anneau accent, nom Fraunces, stats prominentes avec séparateurs fins (au lieu de cartes/gros carré). ============================================================ */ html body .prof-photo, html.sm-app body .prof-photo { width: 104px !important; height: 104px !important; border-radius: 50% !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 0 7px color-mix(in srgb, var(--accent) 14%, transparent) !important; } html body .prof-name, html.sm-app body .prof-name { font-family: "Fraunces", Georgia, serif !important; font-size: 1.55rem !important; font-weight: 800 !important; letter-spacing: -.01em; } html body .prof-title, html.sm-app body .prof-title { color: var(--muted) !important; font-weight: 600 !important; } html body .stat-box .stat, html.sm-app body .stat-box .stat { font-family: "Fraunces", Georgia, serif !important; font-size: 1.7rem !important; font-weight: 800 !important; color: var(--ink) !important; } html body .stat-row-3 .stat-box + .stat-box { border-left: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); } html body .stat-row-3 .stat-box { padding: .3rem .5rem !important; } /* ============================================================ v707 · ONGLET JEUX mis à l'honneur + animé (Maxime « beaucoup plus animé »). ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* plaque de niveau : anneau accent qui respire doucement (épouse la pilule) */ html body .jh-head .player-badge { position: relative; } html body .jh-head .player-badge::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); animation: jxPulse 2.8s ease-in-out infinite; pointer-events: none; } @keyframes jxPulse { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.06); opacity: 0; } } /* barre d'XP (badge + héros) : remplissage animé + lueur dorée */ html body .hud-bar i, html body .ph-xp-fill { transition: width 1s var(--ease-out, cubic-bezier(.22,1,.36,1)) !important; } html body .hud-bar i { box-shadow: 0 0 8px color-mix(in srgb, var(--accent-3, #FFD15C) 75%, transparent); } /* tuiles « Jouer » : petit zoom d'emphase à l'apparition */ html body #jeuxNav .jnav-primary .cat-tile { animation: jxPop .5s var(--ease-out, cubic-bezier(.22,1,.36,1)) both; } html body #jeuxNav .jnav-primary .cat-tile:nth-child(2) { animation-delay: .08s; } @keyframes jxPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } } } /* HUD niveau : texte lisible TOUS modes (était #B5740E or foncé = illisible en nuit) + plus présent */ html body .player-badge.player-hud .hud-lvl, html.sm-app body .player-badge.player-hud .hud-lvl { color: var(--ink) !important; font-weight: 900 !important; } html body .player-badge.player-hud .hud-xp, html.sm-app body .player-badge.player-hud .hud-xp { color: var(--muted) !important; } /* ============================================================ v707 · REDESIGN Mes voyages : globe + année en duo compact côte à côte. ============================================================ */ html body .trip-cta-duo { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .2rem 0 .8rem; } html body .trip-cta-duo > :is(.globe-cta, .wrapped-cta) { margin: 0 !important; width: 100% !important; min-width: 0; font-size: .9rem !important; padding: .8rem .6rem !important; } /* ============================================================ v725 · REFONTE « Mes voyages » : chaque voyage = une entrée de CARNET (drapeau du pays en ancre, ville en Fraunces, méta discrète, filet de séparation). ============================================================ */ html body .tj-card, html.sm-app body .tj-card { display: flex !important; align-items: flex-start; gap: .8rem; padding: .8rem .15rem !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important; } html body .tj-flag { font-size: 2rem; line-height: 1; flex-shrink: 0; margin-top: .05rem; filter: drop-shadow(0 2px 5px rgba(0,0,0,.16)); } html body .tj-body { flex: 1; min-width: 0; } html body .tj-city { font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: 1.12rem; line-height: 1.15; color: var(--ink); letter-spacing: -.01em; } html body .tj-meta { font-size: .8rem; font-weight: 600; color: var(--muted); margin-top: .15rem; } html body .tj-card .trip-note { margin-top: .35rem; font-style: italic; } html body .tj-card .trip-del { flex-shrink: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: .9rem; opacity: .45; cursor: pointer; padding: .2rem; } html body .tj-card .trip-del:active { transform: scale(.9); } /* la rangée « voyageurs sur place » garde son style, juste un peu d'air sous la méta */ html body .tj-card .trip-matches { margin-top: .5rem; } /* en-tête « Mes voyages passés » : filet + libellé affirmé */ html body .ptrip-section { margin-top: 1.3rem; padding-top: .2rem; border-top: 0; } /* v810 : filet « Mes voyages passés » retiré */ html body .ptrip-head h4 { font-family: "Fraunces", Georgia, serif; font-weight: 800; font-size: 1.02rem; } /* ============================================================ v726 · ADMIN : sous-nav (11 onglets) COMPACTE — pills serrées → moins de rangées, conteneur allégé. + cellules du tableau de bord lisibles. ============================================================ */ html body .aseg-nav { gap: .28rem !important; padding: .28rem !important; background: color-mix(in srgb, var(--ink) 4%, transparent) !important; border-color: color-mix(in srgb, var(--ink) 10%, transparent) !important; } html body .aseg-nav button { flex: 0 1 auto !important; padding: .36rem .56rem !important; font-size: .73rem !important; font-weight: 700 !important; border-radius: 8px !important; } html body .aseg-nav button.active { background: var(--accent-grad) !important; color: #fff !important; } /* tableau de bord (admin) + stats Espace Pro : VALEUR en Fraunces prominent + libellé discret (cohérent profil/voyages). #proPanel = stats du partenaire. */ html body :is(#adminDash, #adminData, #adminLiveAct, #proPanel) .pcell .v, html.sm-app body :is(#adminDash, #adminData, #adminLiveAct, #proPanel) .pcell .v { font-family: "Fraunces", Georgia, serif !important; font-weight: 800 !important; font-size: 1.4rem !important; color: var(--ink) !important; line-height: 1.05; } html body :is(#adminDash, #adminData, #adminLiveAct, #proPanel) .pcell .k, html.sm-app body :is(#adminDash, #adminData, #adminLiveAct, #proPanel) .pcell .k { font-size: .68rem !important; color: var(--muted) !important; letter-spacing: .02em; } /* Espace Pro : nom de l'établissement en Fraunces (élégance carnet/passeport) */ html body #proPanel .card > div > div > b, html.sm-app body #proPanel .card > div > div > b { font-family: "Fraunces", Georgia, serif !important; letter-spacing: -.01em; } /* ============================================================ v728 · MESSAGES : liste de conversations en LISTE ÉPURÉE (séparateurs fins entre conversations, façon messagerie native) + nom un peu plus présent. ============================================================ */ html body #convList .person.conv-open, html.sm-app body #convList .person.conv-open { border-radius: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent) !important; padding: .6rem .2rem !important; margin: 0 !important; } html body #convList .person.conv-open:last-child { border-bottom: 0 !important; } html body #convList .conv-open .name, html.sm-app body #convList .conv-open .name { font-weight: 700 !important; font-size: .95rem !important; color: var(--ink) !important; } /* ============================================================ v729 · AUDIT COHÉRENCE FINALE (agent) : derniers détails. ============================================================ */ /* H1 · gros nombres amber INLINE (#B5740E) dans les modales showInfo → illisibles en NUIT (texte amber foncé sur carte prune). Cible l'inline via sélecteur d'attribut. */ html body.theme-dusk :is(.popinfo-card, .act-card) [style*="#B5740E"], html.sm-app body.theme-dusk :is(.popinfo-card, .act-card) [style*="#B5740E"] { color: #FFD79A !important; } /* M1 · .dstat (détail voyageur + récompense quête) : valeurs en Fraunces comme les autres stats */ html body .dstat b, html.sm-app body .dstat b { font-family: "Fraunces", Georgia, serif !important; font-size: 1.4rem !important; font-weight: 800 !important; color: var(--ink) !important; line-height: 1.05; } html body .dstat span, html.sm-app body .dstat span { color: var(--muted) !important; } /* M2 · .coll-stat .cs-v (stats Quêtes) : famille Fraunces (v714 ne l'incluait que pour le poids) */ html body .coll-stat .cs-v, html.sm-app body .coll-stat .cs-v { font-family: "Fraunces", Georgia, serif !important; } /* B1 · vert hors-DA (#2a9d5c, indicateur joker) → ton sunset (règle produit : pas de vert criard) */ html body :is(.popinfo-card, .act-card) [style*="#2a9d5c"], html.sm-app body :is(.popinfo-card, .act-card) [style*="#2a9d5c"] { color: var(--accent-ink, var(--accent)) !important; } /* ============================================================ v807 · CONTRASTE NUIT (mandat Maxime 25/06 « contraste qui dérive selon les mondes »). Or/vert codés en dur INLINE HORS .popinfo-card/.act-card (donc non couverts par v729) : récap hebdo, note resto, XP/niveau profil, modale Gold, tendance classement. Illisibles en dusk (or foncé/vert sombre sur fond prune). On élargit l'override à TOUT le mode sombre. ⚠️ Scopé theme-dusk UNIQUEMENT → le mode JOUR garde l'or foncé (lisible sur fond clair). Pure addition, n'enlève rien. ============================================================ */ html body.theme-dusk [style*="#B5740E"], html.sm-app body.theme-dusk [style*="#B5740E"], html body.theme-dusk [style*="#C98A1E"], html.sm-app body.theme-dusk [style*="#C98A1E"] { color: #FFD79A !important; } html body.theme-dusk [style*="#1E7A5A"], html.sm-app body.theme-dusk [style*="#1E7A5A"] { color: var(--accent-ink, #FFD79A) !important; } /* ============================================================ v708 (liste Maxime, lot 2) : à débloquer retiré, titres moins balèzes, cercle/SOS normé, textareas raisonnables + fond non-prune. ============================================================ */ /* 2 · « À débloquer » retiré complètement */ html body #badgeRailSection, html.sm-app body #badgeRailSection { display: none !important; } /* 9 · titres de section : RÈGLE AUTORITAIRE UNIQUE (taille/poids/interligne/espacement). v730 : complétée (line-height/letter-spacing) pour absorber l'ancien doublon v714 supprimé. */ html body :is(.section-head > h3, .qm-head > h3, .sp-title), html.sm-app body :is(.section-head > h3, .qm-head > h3, .sp-title) { font-size: 1.04rem !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -.01em !important; } html body :is(.tab-panel .jnav-cap, .jeux-view .jnav-cap), html.sm-app body :is(.tab-panel .jnav-cap, .jeux-view .jnav-cap) { font-size: .76rem !important; font-weight: 700 !important; } html body h1, html.sm-app body h1 { font-size: 1.5rem !important; } /* 16 · cercle de confiance / SOS normé (plus petit, comme les contacts) */ html body .secu-view #secuHome > .card:first-of-type .sos-logo { font-size: 2.1rem !important; } /* 7 · textareas : auto-grow raisonnable (pas géant) + fond cohérent (fini le prune) */ html body :is(textarea, .feed-composer textarea, #feedInput, #spotInput), html.sm-app body :is(textarea, .feed-composer textarea, #feedInput, #spotInput) { min-height: 2.6em !important; field-sizing: content; } html body.theme-dusk :is(textarea, .feed-composer textarea, #feedInput, #spotInput, .feed-composer), html.sm-app body.theme-dusk :is(textarea, .feed-composer textarea, #feedInput, #spotInput) { background: var(--dcard2, #241b35) !important; color: var(--ink) !important; } /* v684 (retour Maxime « les tuiles prennent énormément de place ») : vignette nettement plus compacte — l'icône passe de 84px à 50px → la rangée d'accès rapides ne bouffe plus l'écran, on en voit beaucoup plus d'un coup d'œil. */ .tile .thumb { /* v684 : taille COMPACTE imposée (!important) — le loader DA injecte sinon un .tile .thumb{width:74px} (token sizes.tile=74) qui, plus tardif dans la cascade, écrasait notre vignette. Maxime veut des accès rapides nettement moins encombrants → 50px font foi partout (preview + prod). */ height: 50px !important; width: 50px !important; border-radius: 14px; margin: 0 auto .4rem; /* v570 : radial blanc calmé (.4→.12) — il « grisait » le centre-haut au-dessus de l'emoji. */ background-image: radial-gradient(circle at 50% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 52%), var(--accent-grad); display: grid; place-items: center; font-size: 26px !important; box-shadow: 0 6px 16px rgba(45,38,52,.22); transition: transform .15s ease; } .tile:hover .thumb { transform: translateY(-2px) scale(1.02); } /* POLISH VERRE + PEPS : reflet glossy marqué (verre brillant) + liseré clair + ombre interne basse pour le volume (fini le rendu pastel/plat), sans le halo blanc vertical moche. */ .tile .thumb { position: relative; overflow: hidden; filter: saturate(1.04) brightness(1.01); } /* néon coupé : la couleur émaillée DA suffit */ .tile .thumb::before { content: ""; position: absolute; inset: 0; border-radius: inherit; /* v570 (retour Maxime) : gloss fortement calmé (.62→.18) — c'était le principal « voile grisâtre au-dessus de l'emoji ». Fin liseré clair gardé pour le volume, sans wash blanc. */ background: linear-gradient(158deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 18%, rgba(255,255,255,0) 42%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); pointer-events: none; } /* (Anciennes couleurs/ombres figées SUPPRIMÉES · retour Maxime : le « halo » sous les tuiles restait aux vieilles couleurs quel que soit le thème. Désormais l'ombre est DÉRIVÉE de la couleur réelle de la tuile via color-mix → elle suit chaque mode.) */ .tile .t-name { font-weight: 700; color: var(--ink); font-size: .92rem; } .tile .t-meta { color: var(--muted); font-size: .78rem; } /* ----------------------- Carte « featured » --------------------- */ .feature { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 1.2rem; position: relative; min-height: 190px; background: var(--accent-grad); display: flex; align-items: flex-end; } .feature .body { padding: 1.1rem; color: #fff; width: 100%; background: linear-gradient(transparent, rgba(0,0,0,.35)); } .feature .body .name { font-size: 1.3rem; font-weight: 800; } .feature .body .sub { font-size: .85rem; opacity: .95; } .feature .tags { display: flex; gap: .4rem; margin-top: .5rem; } .feature .tags span { background: rgba(255,255,255,.25); backdrop-filter: blur(4px); padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; } .feature .rating { position: absolute; top: .9rem; right: .9rem; background: #fff; color: var(--accent-ink, var(--accent)); padding: .25rem .6rem; border-radius: 999px; font-weight: 800; font-size: .8rem; } /* ----------------------------- Stats ---------------------------- */ .stat { font-size: 2.2rem; font-weight: 800; color: var(--accent-ink, var(--accent)); line-height: 1; } .stat-row { display: flex; gap: .6rem; } .stat-box { flex: 1; min-width: 0; background: var(--accent-soft); border-radius: var(--radius-sm); padding: .9rem .5rem; text-align: center; } .stat-box .stat { font-size: 1.2rem; } /* chiffres plus discrets : l'identité (nom/ville) prime */ .stat-box .lbl { color: var(--muted); font-size: .72rem; margin-top: .2rem; white-space: nowrap; } /* PREMIUM — chiffres tabulaires (UI UX Pro : number-tabular) : les compteurs/XP/streak/prix/niveaux qui CHANGENT cessent de « sauter » en largeur (chaque chiffre prend la même place). Zéro risque layout (au contraire : supprime le micro-jitter). Le faux-appel/feedCount/wg-val l'avaient déjà. */ .stat, .nbadge, .segb, .streak-chip, .qm-xp, .sc-xp, .qs-xp, .rit-cnt, .hud-lvl, .xpl-lvl, .xp-banner b, .gh-price, .shop-coins, .pc-stat .pc-n, .conv-bff .conv-pin { font-variant-numeric: tabular-nums; } /* ----------------------------- Avatars -------------------------- */ /* background-color sunset = filet de sécurité (P1.11) : si une PHOTO d'avatar échoue/manque, l'image inline masque le dégradé → en thème nuit on voyait le fond sombre (« rond noir »). Le fond corail garantit un avatar toujours sunset, jamais noir. */ .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-grad); background-color: var(--accent); background-size: cover; background-position: center; background-repeat: no-repeat; display: grid; place-items: center; color: #fff; font-weight: 700; flex-shrink: 0; overflow: hidden; } .person { display: flex; align-items: center; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--line); } .person:last-child { border-bottom: 0; } .person .info { flex: 1; min-width: 0; } .person .info .name { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: .4rem; min-width: 0; } .person .info .meta { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .person button { padding: .5rem .9rem; font-size: .82rem; } /* Carte profil : un pseudo très long se tronque ("pierreantoi…") au lieu de pousser le ⚙️ (absolu, en haut à droite) et le badge de vérification. */ #profMain .person .info { padding-right: 2.6rem; } /* réserve la place du ⚙️ (40px + offset) */ #profMain .person .info .name { flex-wrap: nowrap; } #profileName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.3rem; font-weight: 800; } #profileCity { font-size: .92rem; } #profileAvatar { cursor: pointer; } /* tap → photo en grand */ #verifBadge { flex-shrink: 0; } /* Logo « vérifié » rond aux couleurs SunMates (sans le mot, partout dans l'app) */ .vchip { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg,#FFC93C,#FF8A3D 60%,#17a99b); color: #fff; font-size: 10px; font-weight: 900; line-height: 1; vertical-align: middle; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .vchip.lg { width: 20px; height: 20px; font-size: 12px; } .msg { margin-top: .7rem; font-size: .88rem; min-height: 1.1rem; font-weight: 500; } .hidden { display: none !important; } hr { border: 0; border-top: 1px solid var(--line); margin: 1.2rem 0; } /* ------------------------- Écran connexion ---------------------- */ .auth-wrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .auth-hero { background: var(--accent-grad); border-radius: 0 0 36px 36px; padding: 3rem 1.5rem 2.5rem; text-align: center; color: #fff; box-shadow: 0 14px 30px rgba(45,38,52,.16); } .auth-hero .logo-badge { width: 96px; height: 96px; margin: 0 auto 1rem; border-radius: 28px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 46px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); } .auth-hero .logo-text { font-size: 1.8rem; font-weight: 800; letter-spacing: 3px; } .auth-hero .logo-tag { font-size: .85rem; opacity: .92; letter-spacing: 1px; } .auth-body { flex: 1; padding: 2rem 1.5rem; max-width: 460px; margin: 0 auto; width: 100%; } .auth-title { text-align: center; } .auth-title h1 { margin-bottom: .2rem; } .seg { display: flex; background: #fff; border-radius: 999px; padding: .25rem; margin: 1.4rem 0; box-shadow: var(--shadow-sm); } .seg button { flex: 1; background: transparent; color: var(--muted); border-radius: 999px; padding: .6rem; margin: 0; } .seg button.active { background: var(--accent-grad); color: #fff; } .auth-play { display: grid; place-items: center; margin-top: 1.6rem; } /* CTA principal : bouton PLEINE LARGEUR libellé (avant : petit rond « ▶ » peu explicite). Garde le dégradé sunset + l'anneau qui pulse (l'âme SunMates), mais devient clair et proéminent. */ .auth-play button { width: 100%; min-height: 54px; border-radius: 999px; background: var(--accent-grad); color: #fff; font-size: 1.06rem; font-weight: 800; letter-spacing: .01em; box-shadow: 0 10px 24px rgba(255,90,77,.28); padding: .9rem 1.4rem; } /* ----------------------- Barre de nav (bas) --------------------- */ .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 460px; background: #fff; display: flex; justify-content: space-around; padding: .6rem .5rem calc(.6rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(20,20,40,.08); border-radius: 24px 24px 0 0; z-index: var(--z-nav); } .bottom-nav button { background: transparent; border: 0; padding: .4rem .6rem; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; color: var(--muted); font-size: .64rem; font-weight: 600; flex: 1; min-height: 48px; /* a11y : cible tactile ≥44px garantie */ } /* Barre du bas SOBRE : icônes calmes/monochromes au repos, onglet actif discret (pas de halo) */ /* Barre du bas : icônes TRAIT (line-art) qui suivent la couleur (gris au repos → accent actif) */ .bottom-nav button .ni { display: grid; place-items: center; line-height: 1; transition: transform .2s ease; } .bottom-nav button .ni svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .9; } .bottom-nav button.active { color: var(--accent-ink, var(--accent)); } .bottom-nav button.active .ni { transform: translateY(-1px); } .bottom-nav button.active .ni svg { opacity: 1; stroke-width: 2.2; } .bottom-nav button.active::before { display: none; } .bottom-nav button { position: relative; } /* --------------------------- JEUX ------------------------------- */ /* Cartes de jeux */ .gcard { background: var(--card); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .1s; } .gcard:active { transform: scale(.98); } .gcard .ghead { height: 84px; background: var(--accent-grad); position: relative; background-size: cover; background-position: center; display: grid; place-items: center; } .gcard .ghead::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)); } /* lisibilité photo */ .gcard .ghead.green { background: linear-gradient(135deg,#4ED8B8,#179E8C); } /* DA : turquoise (pas de vert vif) */ .gcard .ghead.blue { background: linear-gradient(135deg,#9D86FF,#5E3FE0); } /* DA : indigo nuit (pas de bleu ciel) */ .gcard .ghead.purp { background: linear-gradient(135deg,#b9a6ff,#7c5cff); } /* Têtes colorées des mini-jeux intégrés (pas de photo → dégradé plein, emoji centré) */ .gcard .ghead.gh-gold { background: linear-gradient(135deg,#ffd98a,#f0a93a); } .gcard .ghead.gh-teal { background: linear-gradient(135deg,#7fe3d3,#17a99b); } .gcard .ghead.gh-indigo { background: linear-gradient(135deg,#9FA8FF,#5B63E0); } .gcard .ghead.gh-coral { background: linear-gradient(135deg,#FFB37A,#FF6F3D); } .gcard .ghead.gh-purp { background: linear-gradient(135deg,#C77DFF,#8A4FE0); } .gcard .ghead.gh-rose { background: linear-gradient(135deg,#FF9CC2,#F0568F); } /* Cartes jeux/quêtes (pas de photo) : on retire le voile SOMBRE (qui ternissait/floutait l'emoji) → juste un léger reflet clair en haut pour le volume « gemme ». */ .gcard.gcard-play .ghead::after { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 58%); } /* Emoji des jeux jouables : en COIN (bas-gauche) comme les autres, plus « au milieu » qui flottait. */ .gcard.gcard-play .gemoji { font-size: 42px; } /* Libellé de type (Mini-jeu / Quête) pour bien distinguer (item 23). */ .gcard .gtype { position: absolute; top: .5rem; left: .5rem; font-size: .68rem; font-weight: 800; /* Lot D : MAJUSCULES ~10px → ~11px */ letter-spacing: .02em; text-transform: uppercase; padding: .14rem .45rem; border-radius: 999px; z-index: 2; background: rgba(255,255,255,.92); color: #5a3b12; } .gcard .gtype.gt-quest { background: rgba(20,16,30,.55); color: #fff; backdrop-filter: blur(2px); } /* Bingo */ .bingo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem; } .bingo-cell { font-size: .64rem; font-weight: 700; line-height: 1.15; padding: .4rem .25rem; min-height: 64px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); cursor: pointer; display: grid; place-items: center; text-align: center; } .bingo-cell.on { background: var(--accent-grad); color: #fff; border-color: transparent; } body.theme-dusk .bingo-cell { background: var(--dcard2,#241b35); color: #eee; } /* Emoji en BADGE dans le coin (plus au milieu de la photo) */ /* Bandeau XP (onglet Jeux) */ /* Ligne XP DISCRÈTE (plus de gros bandeau) */ .xp-banner { display: flex; align-items: center; gap: .3rem; margin: .3rem 0 .1rem; font-size: .8rem; color: var(--muted); } .xp-banner .xp-ic { font-size: .9rem; } .xp-banner b { color: #8A5800; font-size: .85rem; } .xp-banner .xp-sub { color: var(--muted); font-size: .72rem; } .xp-banner .xp-info { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .9rem; padding: .1rem .3rem; } /* Strip de niveau XP (hub de jeu, compact mais premium) */ .xpl-card { display: block !important; background: linear-gradient(135deg, rgba(255,201,60,.16), rgba(255,138,61,.12)); border: 1px solid rgba(201,138,30,.2); border-radius: 14px; padding: .7rem .85rem; margin: .4rem 0 .2rem; } .xpl-top { display: flex; align-items: center; gap: .5rem; } .xpl-lvl { font-weight: 800; font-size: .92rem; color: #8A5800; } .xpl-xp { font-weight: 800; font-size: .8rem; color: var(--accent-ink, var(--accent)); } .xpl-top .xp-info { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .95rem; padding: .1rem .3rem; } .xpl-bar { height: 7px; background: rgba(0,0,0,.08); border-radius: 999px; margin: .45rem 0 .3rem; overflow: hidden; } .xpl-bar span { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px; transition: width .5s cubic-bezier(.2,.8,.3,1); } .xpl-next { font-size: .72rem; color: var(--muted); } .xpl-next b { color: #8A5800; } body.theme-dusk .xpl-card { background: linear-gradient(135deg, rgba(255,201,60,.14), rgba(255,138,61,.1)); border-color: rgba(255,201,60,.2); } body.theme-dusk .xpl-lvl, body.theme-dusk .xpl-next b { color: #ffce8a; } body.theme-dusk .xpl-bar { background: rgba(255,255,255,.1); } /* Cartes « Mes récompenses » (plus jolies, uniformes) */ .reward-card { display: flex; align-items: center; gap: .6rem; text-align: left; padding: .7rem .8rem; border: 0; border-radius: var(--radius-sm); cursor: pointer; background: linear-gradient(135deg, rgba(255,201,60,.22), rgba(255,138,61,.18)); box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .15s; } .reward-card.alt { background: linear-gradient(135deg, rgba(255,90,77,.16), rgba(255,159,28,.16)); } .reward-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .reward-card .rc-ic { width: 38px; height: 38px; min-width: 38px; border-radius: 14px; background: rgba(255,255,255,.7); display: grid; place-items: center; font-size: 20px; } .reward-card .rc-txt { flex: 1; min-width: 0; } .reward-card .rc-name { font-weight: 800; color: var(--ink-warm); font-size: .9rem; } .reward-card .rc-meta { color: var(--ink-warm); opacity: .75; } .reward-card .rc-arr { color: var(--ink-warm); opacity: .6; font-weight: 800; } body.theme-dusk .reward-card .rc-ic { background: rgba(255,255,255,.12); } body.theme-dusk .reward-card .rc-name, body.theme-dusk .reward-card .rc-meta, body.theme-dusk .reward-card .rc-arr { color: #f3e9d8; } body.theme-dusk .xp-banner { background: linear-gradient(135deg,rgba(255,201,60,.14),rgba(255,138,61,.12)); } body.theme-dusk .xp-banner b { color: #ffce8a; } /* Emoji = grand, centré, intégré dans l'en-tête (plus de carré blanc qui « flotte au milieu »). */ .gcard .gemoji { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 40px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.22)); z-index: 1; pointer-events: none; } .gcard .grate { position: absolute; top: .5rem; right: .5rem; background: #fff; color: var(--accent-ink, var(--accent)); font-size: .7rem; font-weight: 800; padding: .15rem .45rem; border-radius: 999px; z-index: 2; } .gcard .gdone { position: absolute; top: .5rem; left: .5rem; background: rgba(255,177,60,.95); color: #6b4a00; font-size: .68rem; font-weight: 800; padding: .12rem .45rem; border-radius: 999px; z-index: 2; } .gcard .gbody { padding: .7rem .8rem; } .gcard .gname { font-weight: 700; color: var(--ink); font-size: .9rem; line-height: 1.2; } .gcard .gcity { color: var(--muted); font-size: .76rem; margin-top: .15rem; } /* #9 : description complète (plus de coupe à 2 lignes « … »). */ .gcard .gdesc { color: var(--muted); font-size: .75rem; margin-top: .2rem; line-height: 1.3; } /* Refonte cartes Jeux populaires : tag + pastille d'action DANS le corps (fini les chips qui se chevauchaient/débordaient sur le header). Tons DA (corail/doré), pas de flou. */ .gcard .gtag { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase; /* Lot D : MAJUSCULES ~10px → ~11px */ letter-spacing: .02em; padding: .15rem .5rem; border-radius: 999px; } .gcard .gtag-mini { background: rgba(0,0,0,.06); color: var(--muted); } .gcard .gtag-quest { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); } .gcard .gtag-done { background: rgba(255,177,60,.24); color: #6b4a00; } .gcard .gbody .gname { margin-top: .35rem; } .gcard .gplay { display: inline-flex; align-items: center; gap: .25rem; margin-top: .5rem; font-size: .76rem; font-weight: 800; color: #fff; background: var(--accent-grad); padding: .32rem .8rem; border-radius: 999px; box-shadow: 0 3px 9px rgba(45,38,52,.28); } .gcard .gplay-xp { background: linear-gradient(135deg,#FFD15C,#F4A11E); color: #6b4a00; box-shadow: 0 3px 9px rgba(240,169,58,.3); } body.theme-dusk .gcard .gtag-mini { background: rgba(255,255,255,.12); color: #d8cfe8; } /* Lignes de quêtes */ .qrow { display: flex; align-items: center; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--line); cursor: pointer; } /* Défis reçus : carte qui ressort (accent corail + halo) pour ne plus être noyée */ .sugg-card { border: 1.5px solid rgba(45,38,52,.16); box-shadow: 0 8px 22px rgba(45,38,52,.16); } .sugg-count { background: var(--accent); color: #fff; font-size: .7rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .3rem; } .q-inprog { margin-left: .4rem; font-size: .68rem; font-weight: 700; color: #8A5800; background: rgba(255,177,60,.18); padding: .08rem .45rem; border-radius: 999px; } .quest-counter { font-size: .76rem; color: var(--muted); font-weight: 600; } .quest-counter b { color: var(--accent-ink, var(--accent)); } /* Tuiles « ouvrir en feuille » (Quêtes / Jeux), anti-scroll */ .jeux-open { display: flex; align-items: center; gap: .8rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: .85rem 1rem; margin-bottom: .7rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .15s; } .jeux-open:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .jeux-open .jo-ic { width: 44px; height: 44px; min-width: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #fff; } .jeux-open .jo-ic.c-sun { background: var(--accent-grad); } .jeux-open .jo-ic.c-purp { background: linear-gradient(135deg,#b9a6ff,#7c5cff); } .jeux-open .jo-txt { flex: 1; min-width: 0; } .jeux-open .jo-name { font-weight: 800; color: var(--ink); } .jeux-open .jo-arr { color: var(--muted); font-weight: 800; font-size: 1.2rem; } .qrow-done .qico { opacity: .6; } .qrow:last-child { border-bottom: 0; padding-bottom: 0; } .qico { width: 42px; height: 42px; border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; } /* P2.11 : le badge récompense (médaillon 46px) déborde d'un cadre 42 → cadre dédié plus grand, fond transparent (le médaillon a déjà son serti), médaillon parfaitement centré. */ #detailBadgeIco { width: 54px; height: 54px; background: transparent; } #detailBadgeRow { align-items: center; } .qrow .qname { font-weight: 600; color: var(--ink); flex: 1; min-width: 0; overflow-wrap: anywhere; } /* P8 : un nom long REVIENT à la ligne (plus de « s » mangé) */ .qrow .qrow-sub { font-weight: 600; font-size: .73rem; color: var(--accent-ink, var(--accent)); margin-top: .15rem; } .qrow .qarrow { color: var(--accent-ink, var(--accent)); font-weight: 800; } /* Badges hexagonaux */ .bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem .6rem; } /* Cartes de check-in uniformes (icône + nom + ville/date + compteur) */ .ci-list { display: flex; flex-direction: column; gap: .5rem; } .ci-card { display: flex; align-items: center; gap: .7rem; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .8rem; cursor: pointer; transition: transform .1s, box-shadow .15s; } .ci-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .ci-ic { width: 38px; height: 38px; min-width: 38px; border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; font-size: 18px; overflow: hidden; } .ci-info { flex: 1; min-width: 0; } .ci-name { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ci-meta { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ci-count { flex-shrink: 0; font-weight: 800; font-size: .82rem; color: #8A5800; background: rgba(255,177,60,.18); padding: .2rem .55rem; border-radius: 999px; } /* Classement (onglet Lieux) */ .lb-segs { display: flex; flex-wrap: wrap; gap: .4rem; padding-bottom: .2rem; margin-bottom: .6rem; } .lb-segs::-webkit-scrollbar { display: none; } .lb-segs button { flex: 1 1 auto; background: var(--cream); border: 1.5px solid var(--line); color: var(--text); border-radius: 999px; padding: .45rem .7rem; font-weight: 700; font-size: .8rem; cursor: pointer; white-space: nowrap; } .lb-segs button.active { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(45,38,52,.16); } .lb-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 14px; margin-bottom: .4rem; background: var(--card); border: 1px solid var(--line); } .lb-row .avatar { width: 42px; height: 42px; } .lb-rank { width: 26px; text-align: center; font-weight: 800; font-size: 1rem; color: var(--muted); flex-shrink: 0; } .lb-info { flex: 1; min-width: 0; } .lb-name { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-val { flex-shrink: 0; font-weight: 800; color: var(--accent-ink, var(--accent)); } .lb-val span { font-size: .7rem; font-weight: 700; color: var(--muted); } .lb-me { border: 1.5px solid var(--accent); background: var(--accent-soft); } .lb-you { font-size: .62rem; font-weight: 800; background: var(--accent); color: #fff; padding: .04rem .35rem; border-radius: 999px; vertical-align: middle; } .lb-tip { margin-top: .6rem; text-align: center; font-size: .82rem; font-weight: 600; color: var(--accent-ink, var(--accent)); background: var(--accent-soft); border-radius: 14px; padding: .6rem .8rem; } .lb-optin { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: .9rem; margin-bottom: .8rem; text-align: center; } .admin-mhead { display: flex; align-items: center; gap: .8rem; background: var(--accent-grad); border-radius: 14px; padding: .8rem .9rem; margin-bottom: .3rem; } .admin-mhead .avatar.lg { width: 56px; height: 56px; font-size: 22px; border: 2px solid rgba(255,255,255,.6); } /* Avis sur les lieux */ .rate-chip { display: inline-flex; align-items: center; gap: .15rem; font-size: .76rem; font-weight: 800; color: #8A5800; background: rgba(255,177,60,.18); padding: .05rem .4rem; border-radius: 999px; white-space: nowrap; } .rate-chip.empty { color: var(--muted); background: var(--cream); font-weight: 600; } .rate-chip b { font-weight: 700; opacity: .7; } .rate-top { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 800; color: #4A2A08; background: linear-gradient(135deg,#FFC93C,#FF8A3D); padding: .05rem .4rem; border-radius: 999px; white-space: nowrap; } /* texte ambre foncé ≥5:1 (loi de contraste, ANNONCÉ) */ .reviews-avg { text-align: center; padding: .3rem 0 .2rem; } .star-input { display: flex; gap: .25rem; font-size: 1.9rem; line-height: 1; cursor: pointer; } .star-input span { color: #d8d2cc; transition: color .1s, transform .1s; } .star-input span.on { color: #FFB52E; } .star-input span:active { transform: scale(1.2); } body.theme-dusk .star-input span { color: #4a4360; } body.theme-dusk .star-input span.on { color: #FFC93C; } .reviews-form { border-top: 0; padding-top: .2rem; margin-top: .6rem; } .reviews-form textarea { margin-top: .7rem; } /* espace sous les étoiles */ .review-item { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 0; } .review-item:last-child { border-bottom: 0; } .review-item .avatar { width: 42px; height: 42px; } .review-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .review-stars { color: #FFB52E; font-size: .82rem; letter-spacing: 1px; flex-shrink: 0; } .review-txt { font-size: .85rem; color: var(--text); line-height: 1.4; margin-top: .15rem; } /* Faux appel (sortie de secours), plein écran façon appel entrant */ .ban-screen { position: fixed; inset: 0; z-index: var(--z-egg); background: linear-gradient(180deg,#2a1a1a,#160d0d); display: grid; place-items: center; padding: 1.4rem; } .ban-screen.hidden { display: none; } .ban-card { width: 100%; max-width: 360px; background: var(--card); border-radius: 20px; padding: 1.6rem 1.3rem; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.5); } .ban-emoji { font-size: 3rem; } .ban-card h2 { margin: .4rem 0 .3rem; color: var(--danger); } .ban-card textarea { width: 100%; margin-top: .6rem; } .fakecall { position: fixed; inset: 0; z-index: var(--z-fakecall); background: linear-gradient(180deg,#1b1b24,#0b0b11); color: #fff; display: flex; align-items: center; justify-content: center; } .fakecall.hidden { display: none; } .fc-inner { width: 100%; max-width: 420px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(3.5rem + env(safe-area-inset-top)) 2rem calc(3.5rem + env(safe-area-inset-bottom)); } .fc-top { text-align: center; margin-top: 1.5rem; } .fc-avatar { width: 116px; height: 116px; border-radius: 50%; background: linear-gradient(135deg,#5a5a6e,#33333f); display: grid; place-items: center; font-size: 50px; margin: 0 auto 1.3rem; box-shadow: 0 0 0 6px rgba(255,255,255,.08); } .fc-name { font-size: 2rem; font-weight: 700; } .fc-status { color: rgba(255,255,255,.6); margin-top: .5rem; font-size: 1.05rem; font-variant-numeric: tabular-nums; } .fc-actions { display: flex; gap: 3.5rem; } .fc-btn { display: flex; flex-direction: column; align-items: center; gap: .5rem; background: none; border: 0; color: #fff; font-size: .85rem; cursor: pointer; } .fc-btn span { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; box-shadow: 0 8px 20px rgba(0,0,0,.4); } .fc-btn.accept span { background: #34c759; animation: fcShake 1s ease-in-out infinite; } .fc-btn.decline span { background: #ff3b30; } /* #15 : écran d'appel plus CRÉDIBLE · numéro affiché, halo qui pulse pendant la sonnerie, puis en ligne : chrono bien visible, avatar réduit, grille réactive au toucher. */ .fc-num { color: rgba(255,255,255,.45); font-size: .92rem; margin-top: .3rem; letter-spacing: .4px; font-variant-numeric: tabular-nums; } .fakecall.ringing .fc-avatar { animation: fcPulse 1.7s ease-in-out infinite; } @keyframes fcPulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(255,255,255,.08); } 50% { box-shadow: 0 0 0 16px rgba(255,255,255,.04), 0 0 0 6px rgba(255,255,255,.10); } } .fakecall.incall .fc-status { font-size: 1.5rem; color: #fff; font-weight: 600; } .fakecall.incall .fc-name { font-size: 1.35rem; } .fakecall.incall .fc-avatar { width: 84px; height: 84px; font-size: 36px; margin-bottom: .9rem; } .fc-gbtn span { transition: background .15s, transform .1s; } .fc-gbtn:active span { transform: scale(.92); } @keyframes fcShake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } } /* Catalogue des fonctionnalités (knowledge base admin) */ .feat-zone { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .9rem; margin: 1rem 0 .5rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); color: var(--ink); } .feat-go { margin-left: auto; border: 0; background: var(--accent-soft, rgba(255,170,90,.16)); color: var(--accent-ink, var(--accent)); font-weight: 800; font-size: .72rem; border-radius: 999px; padding: .25rem .6rem; cursor: pointer; } .feat-go:active { transform: scale(.96); } .feat-item { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .65rem; margin-bottom: .4rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; } .feat-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: 18px; background: var(--accent-soft, rgba(255,170,90,.16)); } .feat-name { font-weight: 700; font-size: .85rem; } .feat-desc { font-size: .78rem; color: var(--muted); margin-top: .12rem; line-height: 1.35; } /* Objectifs de la semaine (Jeux) */ .wg-card { padding: .8rem .9rem; } /* Objectifs de la semaine : même DA que la tuile de niveau XP, repliable */ .wg-card { background: linear-gradient(135deg, rgba(255,201,60,.13), rgba(255,138,61,.1)); border: 1px solid rgba(201,138,30,.2); } body.theme-dusk .wg-card { background: linear-gradient(135deg, rgba(255,201,60,.11), rgba(255,138,61,.08)); border-color: rgba(255,201,60,.18); } .wg-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 800; font-size: .88rem; margin-bottom: .6rem; cursor: pointer; list-style: none; } .wg-head::-webkit-details-marker { display: none; } .wg-head .wg-count { margin-left: auto; } .wg-chev { color: var(--muted); font-size: .9rem; transition: transform .2s; } details.wg-card[open] .wg-chev { transform: rotate(180deg); } details.wg-card:not([open]) .wg-head { margin-bottom: 0; } .wg-count { font-size: .76rem; color: var(--accent-ink, var(--accent)); background: var(--accent-soft, rgba(255,170,90,.16)); border-radius: 999px; padding: .1rem .5rem; } .wg-goal { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; } .wg-goal:last-of-type { margin-bottom: 0; } .wg-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; background: var(--accent-soft, rgba(255,170,90,.16)); flex-shrink: 0; } .wg-body { flex: 1; min-width: 0; } .wg-label { font-size: .82rem; font-weight: 600; } .wg-goal.done .wg-label { color: var(--muted); text-decoration: line-through; } .wg-bar { height: 6px; background: var(--line); border-radius: 999px; margin-top: .25rem; overflow: hidden; } .wg-bar span { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px; transition: width .4s ease; } .wg-val { font-size: .74rem; font-weight: 800; color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; } .wg-goal.done .wg-val { color: var(--accent-ink, var(--accent)); } .wg-alldone { margin-top: .6rem; text-align: center; font-size: .8rem; font-weight: 700; color: #8A5800; } body.theme-dusk .wg-alldone { color: #ffce8a; } /* Conseil sécurité du jour */ .tip-card { display: flex; gap: .8rem; align-items: flex-start; background: linear-gradient(135deg, rgba(255,201,60,.14), rgba(255,138,61,.10)); border: 1px solid rgba(201,138,30,.22); } body.theme-dusk .tip-card { background: linear-gradient(135deg, rgba(255,201,60,.12), rgba(255,138,61,.08)); border-color: rgba(255,201,60,.2); } .tip-ic { font-size: 1.5rem; flex-shrink: 0; line-height: 1.2; } .tip-title { font-weight: 800; font-size: .82rem; color: #8A5800; } body.theme-dusk .tip-title { color: #ffce8a; } .tip-text { font-size: .84rem; color: var(--ink); line-height: 1.4; margin-top: .1rem; } /* Titre de profil (boutique XP) */ .profile-title { font-size: .78rem; font-weight: 700; color: #8A5800; margin-top: .12rem; } body.theme-dusk .profile-title { color: #ffce8a; } /* Boutique XP */ .shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; } .shop-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: .9rem .55rem; border: 1.5px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, var(--card), var(--cream)); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .15s, border-color .15s; } .shop-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .shop-item:active { transform: scale(.97); } .shop-item.on { border-color: var(--accent); background: linear-gradient(180deg, rgba(255,201,60,.12), rgba(255,126,95,.1)); box-shadow: 0 0 0 2px rgba(255,126,95,.2), var(--shadow-sm); } .shop-item.on::after { content: "✓"; position: absolute; top: .45rem; right: .55rem; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; } .shop-item.locked { opacity: .55; } .shop-ic { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: var(--accent-soft, rgba(255,170,90,.16)); } /* P2.16 : titres = cercle dégradé sunset vibrant (fini le 🏷️ gris répété) + petit reflet glossy. */ .shop-ic-title { background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.45), rgba(255,255,255,0) 55%), var(--accent-grad); box-shadow: 0 4px 12px rgba(45,38,52,.28); } .shop-ic-none { background: var(--cream); box-shadow: none; filter: grayscale(.4); } body.theme-dusk .shop-ic-none { background: var(--dcard,#2a2140); } .shop-name { font-size: .82rem; font-weight: 700; line-height: 1.2; } .shop-meta { font-size: .72rem; color: var(--muted); } .shop-item.on .shop-meta { color: var(--accent-ink, var(--accent)); font-weight: 700; } /* SunCoins (P2.17) : solde dans la bannière + états achetable/verrouillé des items. */ .shop-coins { font-weight: 800; color: #8A5800; } .shop-coins b { font-family: "Fraunces", serif; } body.theme-dusk .shop-coins { color: #ffce8a; } .shop-item.buyable .shop-meta { color: #8A5800; font-weight: 800; } /* prix abordable = mis en avant */ body.theme-dusk .shop-item.buyable .shop-meta { color: #ffd58a; } .shop-item.locked .shop-meta { color: var(--muted); } /* pas assez de coins → prix grisé (item reste teasé) */ /* P2.16+ : en mode NUIT, voile sunset chaud sur les cartes (fini le rendu sombre/terne hors-DA). */ body.theme-dusk .shop-item { background: linear-gradient(180deg, rgba(255,150,80,.13), rgba(120,40,10,.17)); border-color: rgba(255,160,90,.20); } body.theme-dusk .shop-item.on { background: linear-gradient(180deg, rgba(255,201,60,.22), rgba(255,126,95,.16)); border-color: var(--accent); } body.theme-dusk .shop-name { color: #f6ead9; } body.theme-dusk .boost-card { background: linear-gradient(180deg, rgba(255,150,80,.13), rgba(120,40,10,.17)); border-color: rgba(255,160,90,.20); } /* Boosts (P2.17) */ .boost-card { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; padding: .8rem .9rem; margin-bottom: .5rem; border: 1.5px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, var(--card), var(--cream)); cursor: pointer; box-shadow: var(--shadow-sm); } .boost-card.buyable { border-color: rgba(255,126,95,.4); } .boost-card.on { border-color: var(--accent); background: linear-gradient(135deg, rgba(255,201,60,.16), rgba(255,126,95,.12)); cursor: default; } .boost-card .boost-ic { width: 46px; height: 46px; min-width: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.45), rgba(255,255,255,0) 55%), var(--accent-grad); box-shadow: 0 4px 12px rgba(45,38,52,.28); } .boost-card .boost-txt { flex: 1; min-width: 0; } .boost-card .boost-name { font-weight: 800; color: var(--ink); font-size: .92rem; } .boost-card .boost-desc { color: var(--muted); font-size: .76rem; line-height: 1.3; margin-top: .1rem; } .boost-card .boost-meta { flex-shrink: 0; font-weight: 800; color: #8A5800; font-size: .82rem; white-space: nowrap; align-self: flex-start; } body.theme-dusk .boost-card .boost-meta { color: #ffd58a; } /* « En vedette » (profil boosté) dans Découvrir */ .tcard-vedette { display: inline-flex; align-items: center; gap: .2rem; font-size: .68rem; font-weight: 800; color: #8A5800; background: linear-gradient(135deg, rgba(255,201,60,.3), rgba(255,138,61,.22)); padding: .1rem .45rem; border-radius: 999px; margin-left: .35rem; } body.theme-dusk .tcard-vedette { color: #ffd58a; background: rgba(255,201,60,.18); } /* Cadres d'avatar (appliqués à .avatar) */ /* Cadres d'avatar (s'appliquent à l'avatar ET à l'aperçu boutique), distincts + glow */ .avatar.frame-gold, .shop-frame-prev.frame-gold { box-shadow: 0 0 0 3px #f5c451, 0 0 12px rgba(245,196,81,.55); } .avatar.frame-coral, .shop-frame-prev.frame-coral { box-shadow: 0 0 0 3px #ff7e5f, 0 0 12px rgba(255,126,95,.5); } .avatar.frame-sunset, .shop-frame-prev.frame-sunset { box-shadow: 0 0 0 3px #ffce6b, 0 0 0 6px #ff5a4d, 0 0 14px rgba(45,38,52,.16); } .avatar.frame-aurora, .shop-frame-prev.frame-aurora { animation: auroraGlow 3s ease-in-out infinite; } .avatar.frame-emerald, .shop-frame-prev.frame-emerald { box-shadow: 0 0 0 3px #2fd6a6, 0 0 0 6px #0e9e8c, 0 0 14px rgba(47,214,166,.5); } .avatar.frame-royal, .shop-frame-prev.frame-royal { box-shadow: 0 0 0 3px #ffd15c, 0 0 0 6px #7c5cff, 0 0 16px rgba(124,92,255,.55); } @keyframes auroraGlow { 0%,100% { box-shadow: 0 0 0 3px #7ee8c9, 0 0 0 6px #8a7bff, 0 0 14px rgba(138,123,255,.5); } 50% { box-shadow: 0 0 0 3px #ffb0e0, 0 0 0 6px #7ee8c9, 0 0 18px rgba(126,232,201,.6); } } .shop-frame-prev { background: var(--accent-grad); color: #fff; } .bitem { text-align: center; } .hex { width: 62px; height: 62px; margin: 0 auto .4rem; background: var(--accent-grad); border-radius: 50%; /* tous ronds (1er pas) */ display: grid; place-items: center; font-size: 26px; color: #fff; box-shadow: var(--shadow-sm); } /* Formes variées (collection) */ .hex.shape-circle { clip-path: none; border-radius: 50%; } .hex.shape-shield { clip-path: polygon(50% 0, 100% 16%, 100% 60%, 50% 100%, 0 60%, 0 16%); } .hex.shape-star { clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); font-size: 22px; } .hex.grad-violet { --c1:#9b7bff; --c2:#6a4bff; } .hex.grad-gold { --c1:#FFD15C; --c2:#E89B2B; } .hex.grad-teal { --c1:#5fe0c0; --c2:#1f9e8c; } .hex.grad-violet, .hex.grad-gold, .hex.grad-teal { background: linear-gradient(135deg, var(--ic1, var(--c1)), var(--ic2, var(--c2))); } /* #10 : verrouillé = TOUT gris, y compris l'emoji (un emoji couleur ignore `color:` → il fallait un filter). Règle produit : badges non débloqués grisés façon jeu vidéo. */ .bitem.locked .hex { background: #e9e4e4 !important; color: #bdb6b6; box-shadow: none; filter: grayscale(1) opacity(.75); } /* Badge secret (non débloqué, non-admin) : look « mystère » façon jeu vidéo */ .bitem.secret .hex { background: linear-gradient(135deg,#3a3450,#241f33); color: #8b84a3; box-shadow: none; } body.theme-dusk .bitem.secret .hex { background: linear-gradient(135deg,#2a2440,#161226); } .bitem.secret .bname { color: var(--muted); font-style: italic; } .bname { font-size: .72rem; font-weight: 700; color: var(--ink); line-height: 1.15; } .bprog { font-size: .68rem; color: var(--muted); } .bitem.locked .bname { color: var(--muted); } /* Badges sur-mesure (SVG joaillerie) · remplace .hex emoji */ .smbadge-wrap { width: 72px; height: 72px; margin: 0 auto .4rem; display: grid; place-items: center; } .smbadge-wrap .smbadge-svg { width: 72px; height: 72px; transition: transform .2s ease; } .bitem:hover .smbadge-wrap .smbadge-svg { transform: translateY(-3px) rotate(-3deg); } .bitem.locked .smbadge-svg { filter: grayscale(.92) opacity(.5); } /* v858 · badges verrouillés VISIBLES en jour (gris clair sur crème = on ne voyait plus quel badge restait à débloquer ; dusk inchangé). */ body:not(.theme-dusk) .bitem.locked .hex { background: #ded5c9 !important; color: #93887b; } body:not(.theme-dusk) .bitem.locked .smbadge-svg { filter: grayscale(.92) opacity(.62) brightness(.8); } @media (prefers-reduced-motion: reduce) { .smbadge-wrap .smbadge-svg { transition: none; } } /* Retour tactile premium : léger enfoncement à l'appui sur les éléments cliquables */ @media (prefers-reduced-motion: no-preference) { .tile, .cat-tile, .jeux-open, .qrow, .bitem, .coupon, .person, .stat-box.stat-click, .empty .btn-primary { transition: transform .12s ease, box-shadow .12s ease; } .tile:active, .cat-tile:active, .jeux-open:active, .qrow:active, .bitem:active, .coupon:active, .person:active, .stat-box.stat-click:active { transform: scale(.97); } } /* Icônes maison sur tuile : fond crème (l'icône porte la couleur, DA chaude) */ /* Tuile-joyau : dégradé sunset bombé + gloss + rim-light + ombre chaude (zéro crème) */ .cic[data-smicon], .jo-ic[data-smicon] { position: relative; isolation: isolate; overflow: hidden; border: none; /* v570 (retour Maxime) : RÈGLE DOMINANTE des tuiles-joyaux. AVANT : radial blanc 42% (= le voile grisâtre au-dessus de l'emoji) + gradient PAR FAMILLE via --ic1/--c1 (= l'arc-en-ciel froid). MAINTENANT : dégradé-accent du preset (--accent-grad, cohérent RH pour tous/tous presets) + reflet TRÈS discret (16%). Fini le gris ET les couleurs hors-DA. */ background: radial-gradient(120% 90% at 28% 20%, rgba(255,255,255,.16), rgba(255,255,255,0) 46%), var(--accent-grad); box-shadow: 0 3px 8px rgba(60,28,14,.18), inset 0 1px 1px rgba(255,246,236,.7), inset 0 -2px 3px rgba(60,25,12,.22); } /* Reflet TOP plus léger (avant : blanc .5 sur 42% → givrait/floutait le glyphe). */ .cic[data-smicon]::after, .jo-ic[data-smicon]::after { content:""; position:absolute; left:8%; right:8%; top:6%; height:34%; border-radius:50% 50% 60% 60%/70% 70% 100% 100%; background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.02)); pointer-events:none; z-index:0; } /* Les icônes joaillerie ont déjà leur propre reflet (::after + gloss interne au SVG) → on SUPPRIME le voile ::before générique de .cat-tile (l'empilement rendait le glyphe flou). */ .cat-tile .cic[data-smicon]::before, .jo-ic[data-smicon]::before { display:none; } .cic[data-smicon] svg, .jo-ic[data-smicon] svg { display:block; position:relative; z-index:1; } .cat-tile.active .cic[data-smicon] { box-shadow: 0 8px 18px -4px rgba(45,38,52,.16), 0 2px 4px rgba(180,60,40,.32), inset 0 1px 1px rgba(255,246,236,.9), inset 0 -2px 3px rgba(150,45,30,.32); } /* Palette par tuile : un spectre DA distinct par catégorie (anti-uniformité) */ [data-smicon="quest"]{--c1:#FF7A4D;--c2:#FF5238} [data-smicon="games"]{--c1:#8a5cff;--c2:#6638d6} [data-smicon="medal"]{--c1:#E8A33A;--c2:#D07F10} [data-smicon="coupon"]{--c1:#FF6FA5;--c2:#E84D86} [data-smicon="rank"]{--c1:#5E74E8;--c2:#3641B8} [data-smicon="shop"]{--c1:#FF5A8A;--c2:#C43A8A} [data-smicon="coffee"]{--c1:#E89A4E;--c2:#C26A1E} [data-smicon="eco"]{--c1:#34C98F;--c2:#0E9E6B} [data-smicon="near"]{--c1:#FF9A3D;--c2:#FF6A1F} [data-smicon="rating"]{--c1:#FFB23D;--c2:#E07E12} [data-smicon="popular"]{--c1:#FF5A4D;--c2:#E83247} [data-smicon="trip"]{--c1:#FF8A4D;--c2:#FF5A4D} [data-smicon="users"]{--c1:#9b7bff;--c2:#6a4fe0} [data-smicon="shieldsafe"]{--c1:#1FB38C;--c2:#0C7E6E} [data-smicon="usersolo"]{--c1:#FF9A5C;--c2:#E8631F} [data-smicon="crown"]{--c1:#8a5cff;--c2:#5028b0} [data-smicon="phone"]{--c1:#2BC48A;--c2:#15897A} [data-smicon="signal"]{--c1:#FFC04E;--c2:#E8901F} [data-smicon="alert"]{--c1:#FF4D4D;--c2:#D81E2A} [data-smicon="aid"]{--c1:#FF7A4D;--c2:#FF9A3D} [data-smicon="chat"]{--c1:#7a8cff;--c2:#5560f0} /* Pastille-joyau réutilisable (icône ivoire sur dégradé) pour harmoniser les emojis hors tuiles */ .smgem { background: var(--accent-grad) !important; box-shadow: 0 4px 10px rgba(45,38,52,.28), inset 0 1px 1px rgba(255,246,236,.6) !important; color: #fff !important; } /* v570 : cohérence RH */ .smgem svg { filter: drop-shadow(0 1px 1px rgba(45,38,52,.25)); } .sv-stat .sv-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; vertical-align: -5px; margin-right: 4px; } /* ============================================================= */ /* ============ HOME v2 · « Paris, ton terrain de jeu » ========= */ /* ============================================================= */ /* --- 1. Héros joueur --- */ /* P2.20 : plus COMPACT et plus CALME (moins imposant/flashy) · padding réduit, ombre douce, halo statique discret (plus de « respiration »), avatar et titre plus petits. */ /* #12 : en-tête Jeux avec badge rond de niveau (cliquable). */ .jh-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; } /* Badge niveau plus imposant + anneau crème DA (retour « tout petit et bizarre ») */ .player-badge{ position:relative; flex-shrink:0; width:66px; height:66px; border-radius:50%; cursor:pointer; overflow:visible; background:var(--accent-grad); display:grid; place-items:center; box-shadow:0 8px 20px rgba(45,38,52,.16); transition:transform .12s ease; border:3px solid rgba(255,247,238,.9); } body.theme-dusk .player-badge{ border-color:rgba(255,255,255,.25); } .player-badge:active{ transform:scale(.94); } /* #5 + FIX « photo ovale » : en grille auto, width:100% ne se résout pas (le span restait 13×26px → la photo se peignait dans un mini OVALE). Absolu plein cadre = toujours 52×52 rond. */ .player-badge .pb-av{ position:absolute; inset:0; z-index:0; border-radius:50%; display:grid; place-items:center; font-size:1.9rem; line-height:1; overflow:hidden; background-color:rgba(255,255,255,.18); background-size:cover; background-position:center center; background-repeat:no-repeat; } .player-badge .pb-lvl{ z-index:1; } .player-badge .pb-lvl{ position:absolute; bottom:-4px; right:-5px; min-width:24px; height:24px; padding:0 5px; border-radius:999px; background:#fff; color:var(--accent-ink, var(--accent)); font-weight:900; font-size:.8rem; display:grid; place-items:center; border:2px solid var(--accent); box-shadow:0 2px 6px rgba(0,0,0,.22); } .player-hero{ position:relative; overflow:hidden; border-radius:var(--radius); padding:.8rem .95rem .9rem; margin:.2rem 0 .85rem; background: radial-gradient(120% 130% at 18% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 46%), var(--accent-grad); box-shadow:var(--shadow); color:#fff; isolation:isolate; } .player-hero .ph-glow{ position:absolute; z-index:-1; inset:auto auto 0 0; width:170px; height:170px; left:-50px; bottom:-80px; background:radial-gradient(circle, rgba(255,201,60,.32), rgba(255,201,60,0) 70%); filter:blur(8px); } .ph-top{ display:flex; align-items:center; gap:.7rem; } .ph-avatar{ position:relative; flex-shrink:0; width:50px; height:50px; } .ph-av-emoji{ display:grid; place-items:center; width:50px; height:50px; font-size:26px; border-radius:50%; overflow:hidden; background:rgba(255,255,255,.18); background-size:cover; background-position:center; box-shadow: inset 0 2px 6px rgba(255,255,255,.4), inset 0 -8px 16px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.18); border:2px solid rgba(255,255,255,.55); } .ph-lvl-ring{ position:absolute; right:-6px; bottom:-6px; min-width:26px; height:26px; padding:0 5px; display:grid; place-items:center; font-family:"Fraunces",serif; font-weight:900; font-size:.86rem; line-height:1; color:#8a3b00; background:linear-gradient(135deg,#FFF2C2,#FFD15C 55%,#E8961F); border-radius:999px; border:2px solid #fff; box-shadow:0 3px 8px rgba(184,90,18,.4); } .ph-id{ flex:1; min-width:0; } .ph-name{ font-family:"Fraunces",serif; font-weight:900; font-size:1.12rem; line-height:1.08; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px rgba(45,38,52,.22); } .ph-title{ font-size:.8rem; font-weight:700; opacity:.92; margin-top:.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ph-streak{ flex-shrink:0; align-self:flex-start; display:inline-flex; align-items:center; gap:.2rem; min-height:38px; padding:.4rem .65rem; background:rgba(255,255,255,.20); border:1.5px solid rgba(255,255,255,.4); border-radius:999px; color:#fff; font-weight:800; font-size:.9rem; cursor:pointer; backdrop-filter:blur(2px); transition:transform .14s ease, background .18s; } .ph-streak:hover{ background:rgba(255,255,255,.30); } .ph-streak:active{ transform:scale(.94); } .ph-streak-fire{ font-size:1rem; filter:drop-shadow(0 1px 1px rgba(180,60,0,.4)); } .ph-xp{ margin-top:.7rem; } .ph-xp-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; } .ph-xp-lbl{ font-weight:800; font-size:.82rem; opacity:.95; } .ph-xp-val{ font-size:.82rem; opacity:.95; } .ph-xp-val b{ font-family:"Fraunces",serif; font-weight:900; font-size:.95rem; } .ph-xp-track{ height:12px; border-radius:999px; background:rgba(120,40,10,.28); box-shadow:inset 0 1px 3px rgba(0,0,0,.28); overflow:hidden; } .ph-xp-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,#FFF2C2,#FFD15C 60%,#FFE9A8); box-shadow:0 0 10px rgba(255,209,92,.7); position:relative; transition:width .9s cubic-bezier(.2,.8,.2,1); } /* P2.20 : reflet figé (plus de balayage clignotant) → barre XP plus calme/tangible. */ .ph-xp-fill::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%); transform:translateX(-120%); } .ph-xp-next{ display:flex; align-items:center; gap:.4rem; margin-top:.55rem; font-size:.8rem; opacity:.96; } .ph-next-ic{ font-size:1rem; flex-shrink:0; } .ph-next-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ph-next-txt b{ font-weight:800; } @keyframes phBreathe{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.12); opacity:1 } } @keyframes phShine{ 0%{ transform:translateX(-120%) } 55%,100%{ transform:translateX(220%) } } body.theme-dusk .player-hero{ box-shadow:0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); } body.theme-dusk .player-hero .ph-glow{ opacity:.9; } /* Radar « quête la plus proche » (onglet Jeux) */ .nq-card{ display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; margin:.2rem 0 .9rem; } .nq-emblem{ position:relative; font-size:30px; flex-shrink:0; filter:var(--relief); cursor:pointer; animation:nqPulse 2.4s ease-in-out infinite; } /* Indice discret « cliquable pour + d'infos » : petit ⓘ + halo qui respire */ .nq-emblem::after{ content:"ⓘ"; position:absolute; right:-6px; bottom:-4px; font-size:13px; color:#fff; background:var(--accent-grad); border-radius:50%; width:16px; height:16px; line-height:16px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.25); } @keyframes nqPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } } .nq-body{ flex:1; min-width:0; } .nq-lbl{ font-size:.7rem; font-weight:800; color:var(--accent-ink, var(--accent)); letter-spacing:.02em; } .nq-title{ font-weight:800; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nq-meta{ font-size:.8rem; } .nq-go{ flex-shrink:0; padding:.45rem .7rem; font-size:.82rem; white-space:nowrap; } /* Bannière « inviter des amis » (croissance) */ /* #10 : bannière DÉGONFLÉE (elle écrasait la page Mates) · pilule fine, même rôle */ .invite-banner{ display:flex; align-items:center; gap:.55rem; width:100%; text-align:left; margin:.5rem 0 .2rem; padding:.48rem .7rem; border:0; border-radius:14px; cursor:pointer; background:radial-gradient(120% 130% at 15% -10%, rgba(255,255,255,.28), rgba(255,255,255,0) 46%), var(--accent-grad); color:#fff; box-shadow:0 4px 10px color-mix(in oklab, var(--accent, #FF5A4D) 26%, transparent); } .invite-banner .inv-ic{ font-size:18px; flex-shrink:0; filter:var(--relief); } .invite-banner .inv-txt b{ font-size:.84rem; } .invite-banner .inv-txt span{ font-size:.68rem; opacity:.9; } .invite-banner .inv-go{ font-size:.72rem; padding:.24rem .5rem; } .invite-banner .inv-txt{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; } .invite-banner .inv-txt b{ font-weight:800; } .invite-banner .inv-txt span{ font-size:.78rem; opacity:.95; } .invite-banner .inv-go{ flex-shrink:0; font-weight:800; font-size:.82rem; background:rgba(255,255,255,.22); padding:.35rem .6rem; border-radius:999px; } .invite-banner:active{ transform:scale(.99); } /* Sélecteur de ville (menu déroulant carte) */ .city-pick{ display:flex; align-items:center; gap:.45rem; margin-bottom:.55rem; } .city-pick-ic{ font-size:18px; flex-shrink:0; } .city-pick select{ flex:1; padding:.5rem 1.8rem .5rem 1.8rem; text-align:center; text-align-last:center; border-radius:14px; border:1px solid var(--line); background-color:var(--card); color:var(--ink); font-weight:700; font-size:.85rem; cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23E8961F' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .7rem center; } body.theme-dusk .city-pick select{ background-color:var(--dcard,#2a2140); color:#fff; border-color:rgba(255,255,255,.12); } .todo-toggle{ flex-shrink:0; display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .6rem; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--text); font-weight:700; font-size:.8rem; cursor:pointer; white-space:nowrap; } .todo-toggle .tt-ic{ line-height:1; } .todo-toggle .tt-state{ font-size:.62rem; font-weight:900; letter-spacing:.04em; padding:.08rem .35rem; border-radius:999px; background:rgba(0,0,0,.10); color:var(--muted); } .todo-toggle.active{ background:var(--accent-grad); color:#fff; border-color:transparent; } .todo-toggle.active .tt-state{ background:rgba(255,255,255,.28); color:#fff; } body.theme-dusk .todo-toggle:not(.active){ background:var(--dcard,#2a2140); color:#eee; border-color:rgba(255,255,255,.12); } /* HomeMates · souvenirs (mode Maison) */ .hm-recap{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; } .hm-recap .hr-chip{ background:var(--cream); border-radius:14px; padding:.4rem .6rem; font-size:.8rem; font-weight:700; color:var(--ink); } body.theme-dusk .hm-recap .hr-chip{ background:rgba(255,255,255,.06); color:#f3e9f3; } .hm-mates-lbl{ font-size:.78rem; font-weight:800; color:var(--muted); margin:.3rem 0 .4rem; } .hm-mates-row{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.3rem; } .hm-mate{ flex:0 0 auto; width:62px; text-align:center; cursor:pointer; } .hm-mate .avatar{ width:48px; height:48px; margin:0 auto .2rem; background-size:cover; background-position:center; display:grid; place-items:center; font-weight:800; } .hm-mate .hm-mate-n{ font-size:.7rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hm-mate:active{ transform:scale(.96); } .hm-cities{ margin-top:.5rem; display:flex; flex-direction:column; gap:.3rem; } .hm-album > summary{ list-style:none; cursor:pointer; font-size:.82rem; font-weight:800; color:var(--muted); padding:.3rem 0; } .hm-album > summary::-webkit-details-marker{ display:none; } .hm-album > summary::after{ content:" ›"; display:inline-block; transition: transform .2s; color: var(--accent-ink, var(--accent)); font-weight:800; } .hm-album[open] > summary::after{ transform: rotate(90deg); } .hm-city-row{ display:flex; align-items:center; gap:.5rem; font-size:.84rem; } .hm-city-row .hc-name{ flex:1; font-weight:700; color:var(--ink); } .hm-city-row .hc-n{ color:var(--accent-ink, var(--accent)); font-weight:800; } /* Capitale du jour */ .capitale{ display:flex; align-items:center; gap:.7rem; width:100%; text-align:left; margin:.2rem 0 .9rem; padding:.7rem .85rem; border:0; border-radius:var(--radius); cursor:pointer; background:radial-gradient(120% 130% at 15% -10%, rgba(255,255,255,.26), rgba(255,255,255,0) 46%), linear-gradient(135deg,#6C4DE0,#C04AC9 52%,#FF7A4D); color:#fff; box-shadow:var(--shadow-pop); } .capitale .cap-ic{ font-size:26px; flex-shrink:0; filter:var(--relief); } .capitale .cap-txt{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; } .capitale .cap-txt b{ font-weight:800; } .capitale .cap-txt span{ font-size:.78rem; opacity:.95; } .capitale .cap-go{ flex-shrink:0; font-weight:800; font-size:.82rem; background:rgba(255,255,255,.22); padding:.35rem .6rem; border-radius:999px; } .capitale:active{ transform:scale(.99); } /* Collection : MÊME format carte que « Objectifs de la semaine » (uniformisation) */ .qcoll{ background:linear-gradient(135deg, rgba(255,201,60,.13), rgba(255,138,61,.1)); border:1px solid rgba(201,138,30,.2); border-radius:14px; padding:.8rem .9rem; margin:.4rem 0 .9rem; } body.theme-dusk .qcoll{ background:linear-gradient(135deg, rgba(255,201,60,.11), rgba(255,138,61,.08)); border-color:rgba(255,201,60,.18); } .qcoll-head{ display:flex; justify-content:space-between; align-items:center; font-size:.88rem; font-weight:800; color:var(--ink); margin-bottom:.5rem; } .qcoll-head b{ font-size:.76rem; color:var(--accent-ink, var(--accent)); background:var(--accent-soft, rgba(255,170,90,.16)); border-radius:999px; padding:.1rem .5rem; } .qcoll-bar{ height:6px; border-radius:999px; background:var(--line); overflow:hidden; } .qcoll-bar > span{ display:block; height:100%; border-radius:999px; background:var(--accent-grad); transition:width .4s ease; } /* --- 2. Quête du jour --- */ /* Resserrée (retour « trop imposante ») + halo jaune du coin RETIRÉ (tache sous le compteur) */ .quest-spotlight{ position:relative; overflow:hidden; border-radius:var(--radius); padding:.85rem .95rem .95rem; margin:0 0 1rem; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); isolation:isolate; } .quest-spotlight::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--accent-grad); } .qs-aura{ display:none; } body.theme-dusk .quest-spotlight{ background:var(--dcard2,#241b35); border-color:rgba(255,255,255,.09); } .qs-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.7rem; padding-left:.4rem; } .qs-pill{ display:inline-flex; align-items:center; gap:.2rem; font-weight:800; font-size:.74rem; letter-spacing:.3px; color:#fff; padding:.3rem .65rem; border-radius:999px; background:var(--accent-grad); box-shadow:0 4px 12px rgba(45,38,52,.16); } .qs-timer{ font-size:.76rem; font-weight:700; color:var(--muted); white-space:nowrap; } .qs-body{ display:flex; align-items:flex-start; gap:.8rem; padding-left:.4rem; } .qs-emblem{ flex-shrink:0; width:48px; height:48px; display:grid; place-items:center; font-size:25px; border-radius:16px; background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%), var(--accent-grad); box-shadow:0 8px 18px rgba(45,38,52,.16), inset 0 -8px 14px rgba(0,0,0,.12), inset 0 2px 3px rgba(255,255,255,.5); } .qs-txt{ min-width:0; } .qs-title{ margin:.1rem 0 .25rem !important; font-family:"Fraunces",serif; font-weight:900; font-size:1.05rem; line-height:1.15; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .qs-desc{ margin:0; font-size:.83rem; line-height:1.4; color:var(--text); } .qs-reward{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin:.6rem .4rem .65rem; font-size:.82rem; color:var(--text); } .qs-xp{ font-weight:800; color:#8A5800; background:linear-gradient(135deg, rgba(255,209,92,.28), rgba(255,138,61,.18)); padding:.22rem .55rem; border-radius:999px; } /* Mode nuit : l'ocre foncé était illisible sur fond sombre */ body.theme-dusk .qs-xp{ color:#ffce8a; background:linear-gradient(135deg, rgba(255,201,60,.16), rgba(255,138,61,.12)); } body.theme-dusk .qs-timer{ color:#cbbfdc; } .qs-xp b{ font-family:"Fraunces",serif; font-weight:900; } .qs-dot{ color:var(--muted); } .qs-badge-hint b{ color:var(--ink); font-weight:800; } .qs-mode{ display:flex; gap:.2rem; padding:.22rem; background:var(--accent-soft); border-radius:999px; margin:0 .4rem .7rem; } .qs-mode-btn{ flex:1; min-height:40px; border:0; background:none; cursor:pointer; font-weight:800; font-size:.82rem; color:var(--accent-ink, var(--accent)); border-radius:999px; padding:.5rem; transition:background .18s, color .18s, transform .12s; } .qs-mode-btn i{ font-style:normal; font-size:.7rem; opacity:.85; font-weight:700; } .qs-mode-btn.active{ background:var(--accent-grad); color:#fff; box-shadow:0 6px 14px rgba(45,38,52,.16); } .qs-mode-btn:active{ transform:scale(.96); } body.theme-dusk .qs-mode{ background:rgba(255,255,255,.06); } body.theme-dusk .qs-mode-btn{ color:var(--accent-2); } .qs-play{ width:calc(100% - .8rem); margin:0 .4rem; min-height:48px; font-weight:800; font-size:1rem; color:#fff; cursor:pointer; border:0; border-radius:var(--radius-sm); background:var(--accent-grad); box-shadow:0 8px 20px rgba(45,38,52,.16); transition:transform .14s ease, box-shadow .2s; } .qs-play:hover{ box-shadow:var(--shadow-pop); } .qs-play:active{ transform:scale(.98); } /* --- 3. Missions rapides + rail badges --- */ .qm-strip, .badge-rail{ margin:0 0 1rem; } .qm-head{ display:flex; align-items:baseline; justify-content:space-between; margin:.2rem 0 .55rem; } .qm-head h3{ margin:0; } .qm-all{ font-size:.82rem; font-weight:700; color:var(--accent-ink, var(--accent)); cursor:pointer; white-space:nowrap; } .qm-rail{ display:flex; gap:.6rem; overflow-x:auto; padding:.2rem .25rem .5rem; margin:0 -.25rem; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .qm-rail::-webkit-scrollbar{ display:none; } .qm-card{ scroll-snap-align:start; flex:0 0 auto; width:118px; min-height:124px; display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; padding:.7rem .65rem; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-sm); cursor:pointer; text-align:left; transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s; } .qm-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); } .qm-card:active{ transform:scale(.96); } .qm-ic{ width:42px; height:42px; display:grid; place-items:center; font-size:22px; border-radius:14px; color:#fff; box-shadow:inset 0 -6px 12px rgba(0,0,0,.14), inset 0 2px 3px rgba(255,255,255,.45), 0 5px 12px rgba(0,0,0,.12); } .qm-coral .qm-ic{ background:radial-gradient(circle at 36% 28%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%), linear-gradient(135deg,#FF8A3D,#FF5A4D); } .qm-teal{ --c1:#34c98f; --c2:#1f9e8c; } .qm-gold{ --c1:#FFD15C; --c2:#E8961F; } .qm-violet{ --c1:#9b7bff; --c2:#7a5cff; } .qm-teal .qm-ic, .qm-gold .qm-ic, .qm-violet .qm-ic{ background:radial-gradient(circle at 36% 28%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), var(--accent-grad); } /* v570 : cohérence RH */ .qm-coral .qm-ic{ background:radial-gradient(circle at 36% 28%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), var(--accent-grad); } .qm-name{ font-weight:800; font-size:.8rem; line-height:1.15; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .qm-xp{ margin-top:auto; font-weight:800; font-size:.74rem; color:#8A5800; background:rgba(255,209,92,.22); padding:.12rem .45rem; border-radius:999px; } body.theme-dusk .qm-card{ background:var(--dcard,#2a2140); border-color:rgba(255,255,255,.08); } body.theme-dusk .qm-xp{ color:#FFD79A; background:rgba(255,209,92,.14); } .br-item{ flex:0 0 auto; width:92px; display:flex; flex-direction:column; align-items:center; gap:.35rem; scroll-snap-align:start; cursor:pointer; } .br-item:active{ transform:scale(.96); } .br-medal{ width:64px; height:64px; display:grid; place-items:center; font-size:30px; } .br-item.locked .br-medal{ filter:grayscale(.9) opacity(.5); } .br-lbl{ font-size:.74rem; font-weight:800; color:var(--ink); text-align:center; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:92px; } .br-mini{ font-size:.68rem; font-weight:700; color:var(--muted); } @media (prefers-reduced-motion: reduce){ .ph-glow, .ph-xp-fill::after{ animation:none; } .ph-xp-fill{ transition:none; } .qm-card, .qs-mode-btn, .qs-play{ transition:none; } } /* ===================== MAISON v2 · Hub solo ===================== */ .solo-prog{ position:relative; overflow:hidden; padding:1.05rem 1.1rem 1.15rem; margin:.2rem 0 1rem; background:linear-gradient(135deg, rgba(255,201,60,.16), rgba(255,138,61,.12)); border:1px solid rgba(201,138,30,.20); } /* Halo RETIRÉ (retour Maxime : « tache jaune sous la flamme » · atténué en v359, toujours gênant) */ .solo-prog .sp-aura{ display:none; } .solo-prog > *{ position:relative; z-index:1; } .sp-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; } .sp-title{ font-family:"Fraunces",serif; font-weight:800; font-size:1.12rem; margin:0; color:var(--ink); } .sp-streak{ display:inline-flex; align-items:center; gap:.25rem; min-height:34px; padding:.25rem .6rem; border:0; cursor:pointer; font-weight:800; font-size:.84rem; color:#8A5800; border-radius:999px; background:linear-gradient(135deg, rgba(255,201,60,.30), rgba(255,138,61,.20)); } .sp-streak:active{ transform:scale(.96); } .sp-fire{ font-size:.95rem; } .sp-stats{ display:flex; gap:.5rem; margin:.85rem 0 .9rem; } .sp-stat{ flex:1; text-align:center; padding:.55rem .3rem; border-radius:var(--radius-sm); background:rgba(255,255,255,.55); border:1px solid rgba(201,138,30,.14); } .sp-stat b{ display:block; font-family:"Fraunces",serif; font-weight:800; font-size:1.35rem; color:var(--accent-ink, var(--accent)); line-height:1; } .sp-stat span{ display:block; margin-top:.2rem; font-size:.7rem; font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sp-next{ display:flex; align-items:center; gap:.7rem; padding:.6rem .65rem; border-radius:var(--radius-sm); background:rgba(255,138,61,.10); border:1px solid rgba(255,138,61,.20); } .sp-next-bdg{ font-size:1.7rem; line-height:1; flex-shrink:0; filter:drop-shadow(0 3px 6px rgba(255,90,77,.25)); } .sp-next-txt{ flex:1; min-width:0; } .sp-next-lbl{ font-size:.68rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:#8A5800; } .sp-next-name{ font-weight:800; font-size:.92rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sp-bar{ height:9px; margin-top:.4rem; border-radius:999px; background:rgba(120,40,10,.18); overflow:hidden; } .sp-bar span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#FFF2C2,#FFD15C 60%,#FFE9A8); box-shadow:0 0 8px rgba(255,209,92,.6); transition:width .6s cubic-bezier(.22,1,.36,1); } body.theme-dusk .solo-prog{ background:linear-gradient(135deg, rgba(255,138,61,.16), rgba(45,38,52,.10)); border-color:rgba(255,255,255,.08); box-shadow:0 16px 40px rgba(0,0,0,.45); } /* Sombre : tuiles de stats lisibles (plus de blanc translucide délavé) */ body.theme-dusk .sp-stat{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.1); } body.theme-dusk .sp-stat span{ color:#e7dff2; } body.theme-dusk .sp-stat b{ color:#FFCB6E; } body.theme-dusk .sp-next{ background:rgba(255,138,61,.14); border-color:rgba(255,138,61,.24); } body.theme-dusk .sp-next-lbl{ color:#FFB36B; } body.theme-dusk .sp-stat{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); } body.theme-dusk .sp-streak{ color:#ffce8a; background:linear-gradient(135deg, rgba(255,201,60,.18), rgba(255,138,61,.14)); } .solo-ch{ margin:.2rem 0 1.1rem; } .sc-sub{ margin:-.15rem 0 .65rem; font-size:.82rem; } .sc-grid{ display:grid; grid-template-columns:1fr; gap:.6rem; } .sc-card{ position:relative; display:flex; align-items:center; gap:.7rem; text-align:left; width:100%; min-height:64px; padding:.7rem .85rem; cursor:pointer; border-radius:var(--radius); background:var(--card); border:1px solid rgba(201,138,30,.14); box-shadow:var(--shadow-sm); transition:transform .16s ease, box-shadow .16s ease; } .sc-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); } .sc-card:active{ transform:scale(.97); } .sc-ic{ flex-shrink:0; width:46px; height:46px; display:grid; place-items:center; font-size:1.5rem; border-radius:14px; background:var(--accent-grad); box-shadow:0 6px 14px rgba(45,38,52,.28), inset 0 1px 0 rgba(255,255,255,.5); } .sc-card.sc-teal{ --c1:#34c98f; --c2:#1f9e8c; } .sc-card.sc-gold{ --c1:#FFD15C; --c2:#E8961F; } .sc-card.sc-violet{ --c1:#9b7bff; --c2:#7a5cff; } /* v570 : cohérence RH — les scènes suivent l'accent du preset (la base .sc-ic l'utilise déjà). */ .sc-card.sc-teal .sc-ic, .sc-card.sc-gold .sc-ic, .sc-card.sc-violet .sc-ic{ background:var(--accent-grad); box-shadow:0 6px 14px rgba(45,38,52,.26), inset 0 1px 0 rgba(255,255,255,.4); } .sc-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.12rem; } .sc-name{ font-weight:800; font-size:.95rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sc-desc{ font-size:.8rem; color:var(--text); line-height:1.25; } .sc-xp{ flex-shrink:0; align-self:flex-start; font-weight:800; font-size:.82rem; color:#8A5800; padding:.18rem .5rem; border-radius:999px; background:rgba(255,209,92,.22); } .sc-card .sc-xp::after{ content:" XP"; font-size:.64rem; opacity:.8; } .sc-check{ position:absolute; top:.5rem; right:.6rem; width:24px; height:24px; display:none; place-items:center; font-size:.85rem; font-weight:900; color:#fff; border-radius:999px; background:linear-gradient(135deg,#34c98f,#1f9e8c); box-shadow:0 3px 8px rgba(31,158,140,.4); } .sc-card.is-done{ opacity:.62; } .sc-card.is-done .sc-check{ display:grid; } .sc-card.is-done .sc-xp{ display:none; } #scReroll{ cursor:pointer; user-select:none; } body.theme-dusk .sc-card{ background:var(--dcard,#2a2140); border-color:rgba(255,255,255,.08); } body.theme-dusk .sc-xp{ color:#FFD79A; background:rgba(255,209,92,.16); } .solo-rit{ margin:.2rem 0 1.1rem; } .rit-cnt{ flex-shrink:0; font-weight:800; font-size:.82rem; color:#8A5800; padding:.18rem .55rem; border-radius:999px; background:rgba(255,209,92,.22); } .rit-list{ display:flex; flex-direction:column; gap:.5rem; } .rit-row{ display:flex; align-items:center; gap:.7rem; width:100%; min-height:52px; padding:.55rem .8rem; cursor:pointer; text-align:left; border-radius:var(--radius); background:var(--card); border:1px solid rgba(201,138,30,.14); box-shadow:var(--shadow-sm); transition:transform .16s ease; } .rit-row:active{ transform:scale(.98); } .rit-ic{ flex-shrink:0; font-size:1.3rem; width:38px; height:38px; display:grid; place-items:center; border-radius:14px; background:rgba(255,201,60,.18); } .rit-name{ flex:1; min-width:0; font-weight:700; font-size:.9rem; color:var(--ink); line-height:1.3; } /* wrap : on lit le rituel EN ENTIER au moment de cocher (retour testeuse) */ .rit-box{ flex-shrink:0; width:26px; height:26px; border-radius:8px; border:2px solid rgba(201,138,30,.45); display:grid; place-items:center; font-size:.85rem; font-weight:900; color:transparent; transition:all .18s ease; } .rit-row.is-done .rit-box{ color:#fff; border-color:transparent; background:linear-gradient(135deg,#34c98f,#1f9e8c); } .rit-row.is-done .rit-name{ text-decoration:line-through; opacity:.6; } .rit-row.is-done .rit-ic{ background:rgba(52,201,143,.18); } .rit-row.rit-add{ border-style:dashed; background:transparent; box-shadow:none; } .rit-row.rit-add .rit-ic{ background:var(--accent-soft); } .rit-row.rit-custom .rit-ic{ background:rgba(255,138,61,.18); } body.theme-dusk .rit-row{ background:var(--dcard,#2a2140); border-color:rgba(255,255,255,.08); } body.theme-dusk .rit-ic{ background:rgba(255,201,60,.12); } body.theme-dusk .rit-cnt{ color:#FFD79A; background:rgba(255,209,92,.16); } body.theme-dusk .rit-box{ border-color:rgba(255,201,60,.4); } @media (prefers-reduced-motion: reduce){ .sp-bar span, .sc-card, .rit-row, .rit-box{ transition:none; } } /* Modal preuve de défi */ .proof-drop{ margin-top:.4rem; border:2px dashed rgba(201,138,30,.45); border-radius:var(--radius-sm); padding:1.4rem 1rem; text-align:center; cursor:pointer; background:var(--accent-soft); transition:border-color .18s,background .18s; } .proof-drop:active{ transform:scale(.99); } .proof-drop:hover{ border-color:var(--accent); } #proofPlaceholder{ font-weight:800; color:var(--ink); font-size:1rem; line-height:1.5; } #proofPreview{ max-width:100%; max-height:240px; border-radius:14px; display:block; margin:0 auto; } body.theme-dusk .proof-drop{ background:rgba(255,255,255,.05); border-color:rgba(255,201,60,.4); } /* Coupons */ .coupon { display: flex; align-items: center; gap: .85rem; padding: .85rem .9rem; border: 1.5px dashed var(--accent); border-radius: var(--radius-sm); margin-bottom: .7rem; background: var(--accent-soft); } .coupon .cico { width: 42px; height: 42px; border-radius: 14px; background: #fff; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; } .coupon .cname { font-weight: 700; color: var(--ink); } .coupon .cdesc { font-size: .83rem; color: var(--text); } /* Écran détail */ .backbtn { background: #fff; color: var(--ink); border: 1.5px solid var(--line); padding: .45rem .95rem; font-size: .85rem; border-radius: 999px; margin-bottom: 1rem; } .detail-hero { height: 200px; border-radius: var(--radius); background: var(--accent-grad); display: flex; align-items: flex-end; position: relative; overflow: hidden; margin-bottom: 1rem; box-shadow: var(--shadow); } .detail-hero .dh-emoji { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); font-size: 72px; opacity: .85; } .detail-hero .dh-body { padding: 1rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.45)); width: 100%; position: relative; } .detail-hero .dh-name { font-size: 1.45rem; font-weight: 800; } .detail-hero .dh-city { font-size: .85rem; opacity: .95; } /* Étapes d'une quête : Rejoindre → En cours → Accompli */ .quest-steps { display: flex; align-items: center; gap: .3rem; margin: 0 0 1rem; } .qstep { display: flex; flex-direction: column; align-items: center; gap: .2rem; flex: 0 0 auto; font-size: .68rem; font-weight: 700; color: var(--muted); } .qstep .qstep-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); border: 1.5px solid var(--line); color: var(--muted); font-size: .8rem; } .qstep.done .qstep-n { background: var(--accent-grad); color: #fff; border-color: transparent; } .qstep.cur .qstep-n { border-color: var(--accent); color: var(--accent-ink, var(--accent)); } .qstep.done, .qstep.cur { color: var(--ink); } .qstep-line { flex: 1; height: 2px; background: var(--line); border-radius: 2px; } body.theme-dusk .qstep .qstep-n { background: var(--dcard,#2a2140); } .dstats { display: flex; gap: .6rem; margin-bottom: 1rem; } .dstat { flex: 1; background: var(--card); border-radius: var(--radius-sm); padding: .7rem .4rem; text-align: center; box-shadow: var(--shadow-sm); } .dstat b { display: block; color: var(--ink); font-size: 1rem; } .dstat span { color: var(--muted); font-size: .72rem; } /* Hero de la fiche profil (premium) */ .tp-hero { height: 232px; } .tp-hero-badges { position: absolute; top: .7rem; left: .7rem; right: .7rem; display: flex; flex-wrap: wrap; gap: .4rem; z-index: 2; } .tph-chip { font-size: .72rem; font-weight: 800; padding: .28rem .6rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.18); } .tph-match { background: rgba(255,90,77,.94); color: #fff; } /* Badge « Vérifié » = preuve de sécurité clé → doré plein bien VISIBLE (jour + nuit) */ .tph-verif { background: linear-gradient(135deg,#FFD15C,#E8961F); color: #5a3d00; font-weight: 800; box-shadow: 0 2px 8px rgba(232,150,31,.4); } body.theme-dusk .tph-verif { background: linear-gradient(135deg,#FFD15C,#E8961F); color: #4a3000; } .tph-online { background: rgba(255,201,60,.96); color: #6b4a00; } .tp-hero .dh-name { font-size: 1.6rem; } /* Stats de la fiche profil : chiffre en accent */ #matesProfile .dstat b { color: var(--accent-ink, var(--accent)); font-size: 1.15rem; font-weight: 800; } /* Fiche Mate : photo en PORTRAIT (plus haute) + actions en rangée compacte */ .tp-hero { height: 280px; } /* v776 (retour Maxime #19 « les 5 tuiles côte à côte sous un mate ne sont pas lisibles ») : grille qui S'ENROULE (~3 par rangée) au lieu de 5 boutons serrés sur une seule ligne. */ /* v818 : flex CENTRÉ (au lieu de grid auto-fit) → quand le nombre de boutons est impair (5), la dernière rangée est CENTRÉE = symétrie (retour Maxime). */ .tp-actions2 { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .7rem; } .tpa-btn { flex: 1 1 88px; max-width: 116px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem .3rem; border: 0; border-radius: 14px; color: #fff; font-size: .78rem; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-sm); } .tpa-btn .tpa-ic { font-size: 1.35rem; } .tpa-btn:active { transform: scale(.96); } /* Peps : chaque action a sa couleur (dans la DA, sunset + bijou) — fini les tuiles grises */ .tpa-btn.tpa-chal { background: linear-gradient(135deg,#FF9E4D,#FF6F3D); } .tpa-btn.tpa-bff { background: linear-gradient(135deg,#FFCF5C,#FF9F1C); color: #5a3d00; } .tpa-btn.tpa-mid { background: linear-gradient(135deg,#7AA8FF,#4E73E8); } /* Mi-chemin : indigo (lieu) */ .tpa-btn.tpa-verif { background: linear-gradient(135deg,#3DCBB4,#17A99B); } /* On s'est vus : turquoise bijou */ .tpa-btn span { line-height: 1.1; } .tpa-btn.tpa-danger { background: linear-gradient(135deg,#FF7A6B,#E0463B); } /* --------------------------- CHAT ------------------------------- */ .chat-header { display: flex; align-items: center; gap: .5rem; padding: .2rem 0 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; flex-shrink: 0; } .chat-flame { display: inline-flex; align-items: center; gap: .15rem; font-weight: 800; font-size: .82rem; color: #b4480e; flex-shrink: 0; background: linear-gradient(135deg, #fff1e0, #ffe2c4); border: 1px solid #ffcfa0; padding: .12rem .5rem .12rem .42rem; border-radius: 999px; box-shadow: 0 1px 4px rgba(214,108,32,.18); cursor: default; } .chat-flame.flame-done { filter: saturate(.7); opacity: .85; } /* poc déjà envoyé aujourd'hui */ .chat-flame.flame-done::after { content: "✓"; font-size: .7rem; margin-left: .1rem; color: #8A5800; font-weight: 900; } body.theme-dusk .chat-flame { background: linear-gradient(135deg, #3a2417, #4a2c15); border-color: #6b3d1c; color: #ffcaa0; } .chat-menu { position: absolute; top: 110%; right: 0; z-index: 50; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-pop); padding: .3rem; min-width: 210px; display: flex; flex-direction: column; } .chat-menu button { text-align: left; background: none; border: 0; padding: .6rem .7rem; border-radius: 14px; font-size: .85rem; color: var(--ink); cursor: pointer; } .chat-menu button:active { background: var(--accent-soft); } body.theme-dusk .chat-menu { background: var(--dcard2,#241b35); } body.theme-dusk .chat-menu button { color: #f3e9f3; } .chat-mic { font-size: 1.2rem; flex-shrink: 0; } /* Chips de type de feedback bêta */ /* Chips de portée de recherche (Tout / Voyageurs / Lieux / Vérifiés) */ /* Catégories de recherche : visibles seulement PENDANT la recherche (retour Maxime) */ .search-scopes { display: none; gap: .4rem; margin: .5rem 0 .2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .search-scopes.live { display: flex; } .search-scopes::-webkit-scrollbar { display: none; } .sscope { flex: 0 0 auto; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px; padding: .5rem .85rem; font-size: .78rem; font-weight: 700; cursor: pointer; transition: .12s; white-space: nowrap; } /* v570 ergo : zone tactile ~38px */ .sscope.on { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: 0 2px 7px rgba(45,38,52,.18); } .fb-chip { flex: 1; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: .45rem .3rem; font-size: .8rem; font-weight: 700; cursor: pointer; transition: .12s; } .fb-chip.on { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(45,38,52,.18); } /* Bouton poc rafraîchi : pastille chaude vivante (avant : simple 🔥 plat « vieux »). */ .chat-poc { font-size: 1.1rem; flex-shrink: 0; background: linear-gradient(135deg, #ffb347, #ff6f3c); color: #fff; border: 0; box-shadow: 0 2px 8px rgba(45,38,52,.18); transition: transform .12s; } .chat-poc:active { transform: scale(.88); } .chat-poc[disabled] { filter: grayscale(.4); opacity: .55; } .voice-rec { display: flex; align-items: center; gap: .5rem; background: var(--accent-soft); border-radius: 14px; padding: .5rem .7rem; margin-bottom: .4rem; font-size: .82rem; font-weight: 600; color: var(--ink); } .voice-rec .vr-dot { width: 10px; height: 10px; border-radius: 50%; background: #e23b3b; animation: vrPulse 1s infinite; flex-shrink: 0; } @keyframes vrPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } } .bubble-audio { display: inline-flex; align-items: center; gap: .5rem; } .bubble-audio button { background: rgba(255,255,255,.28); border: 0; color: inherit; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: .8rem; line-height: 1; flex-shrink: 0; display: grid; place-items: center; padding: 0 0 0 2px; } .bubble.them .bubble-audio button { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); } .chat-header .backbtn { margin-bottom: 0; padding: .4rem .7rem; } /* Vue chat = vraie messagerie : occupe l'espace entre l'en-tête et la barre du bas, le corps défile tout seul et la zone de saisie reste collée en bas. */ #matesChat { display: flex; flex-direction: column; margin-bottom: -6.5rem; height: calc(100vh - 3.6rem - 5.6rem); /* on retranche AUSSI le safe-area du haut (topbar à encoche) + plus de marge pour la barre de nav -> la zone de saisie ne passe plus sous les logos du bas. */ height: calc(100dvh - 3.6rem - 5.6rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } .chat-body { display: flex; flex-direction: column; gap: .45rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: .5rem; } .bubble { max-width: 80%; padding: .6rem .85rem; border-radius: 16px; font-size: .9rem; line-height: 1.35; word-wrap: break-word; } .bubble.them { background: #ffe7e1; color: var(--text); border-bottom-left-radius: 5px; align-self: flex-start; } .bubble.me { background: var(--accent-grad); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; } /* Brise-glace (chat vide) · chips chaudes DA (suggestions engageantes, pas des boutons ternes) */ .ice-break { display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem .4rem; } .ice-break-t { font-size: .8rem; font-weight: 800; color: var(--muted); text-align: center; margin-bottom: .25rem; letter-spacing: .02em; } .ice-chip { display: flex; align-items: flex-start; gap: .5rem; text-align: left; background: linear-gradient(135deg, #FFF6E9, #FFE7DA); border: 1px solid rgba(255,122,89,.28); border-left: 4px solid var(--accent); border-radius: 16px; padding: .65rem .85rem; font-size: .85rem; font-weight: 600; line-height: 1.4; color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease; } .ice-chip .ice-spark { flex-shrink: 0; font-size: .8rem; margin-top: .1rem; } .ice-chip:active { transform: scale(.98); box-shadow: none; } body.theme-dusk .ice-chip { background: linear-gradient(135deg, var(--dcard3,#2c2140), var(--dcard2,#241b35)); color: #f3e9f3; border-color: rgba(255,170,130,.22); border-left-color: var(--accent); } .chat-input { display: flex; gap: .5rem; align-items: center; background: var(--bg); padding: .7rem 0 .3rem; flex-shrink: 0; } .chat-input input { flex: 1; box-shadow: var(--shadow-sm); border-color: #fff; } .chat-input button { padding: .75rem 1rem; flex-shrink: 0; } /* Flamme + micro : carrés 44px à glyphe parfaitement CENTRÉ (avant : padding .75/1rem les décalait) + vraie cible tactile */ .chat-input .chat-poc, .chat-input .chat-mic { padding: 0; width: 44px; height: 44px; display: grid; place-items: center; line-height: 1; } /* --------------------- PROFIL VOYAGEUR -------------------------- */ .gallery { display: flex; gap: .5rem; margin-bottom: 1rem; } .gallery .g { flex: 1; height: 56px; border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; font-size: 22px; } .hashtags { margin-top: .6rem; } .hashtags span { color: var(--accent-ink, var(--accent)); font-weight: 600; font-size: .85rem; margin-right: .5rem; } /* -------------------- PROFIL : chips / complétion --------------- */ .chips.wrap { flex-wrap: wrap; overflow: visible; margin-bottom: .3rem; } .completion { margin-top: 1rem; } .completion-bar { height: 9px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; } .completion-bar span { display: block; height: 100%; width: 0; background: var(--accent-grad); transition: width .4s ease; } .completion-txt { font-size: .78rem; color: var(--muted); margin-top: .35rem; } /* P2.29 : bloc « Mon parcours » plus attrayant · header + rangée de mini-stats façon résumé d'aventure. */ .parcours-card .pc-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .parcours-card .pc-head b { font-size: .95rem; } .parcours-card .pc-share { padding: .4rem .8rem; font-size: .8rem; white-space: nowrap; flex-shrink: 0; } .pc-stats { display: flex; gap: .4rem; margin-top: .6rem; } .pc-stat { flex: 1; text-align: center; padding: .45rem .2rem; border-radius: 14px; background: linear-gradient(180deg, var(--accent-soft), rgba(255,255,255,0)); border: 1px solid var(--line); } body.theme-dusk .pc-stat { background: rgba(255,201,60,.10); border-color: rgba(255,255,255,.08); } .pc-stat .pc-n { font-weight: 800; font-size: .92rem; color: var(--ink); white-space: nowrap; } .pc-stat .pc-l { font-size: .64rem; color: var(--muted); margin-top: .1rem; } .pc-today { font-size: .8rem; margin-top: .55rem; text-align: center; } /* Rangée de badges sur la carte profil */ .prof-badges { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .8rem; cursor: pointer; } .prof-badges .pb-badge { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-grad); color: #fff; display: grid; place-items: center; font-size: 16px; box-shadow: var(--shadow-sm); } .prof-badges .pb-badge.sm { background: none; box-shadow: none; } .pb-badge.sm svg, .sv-badges svg { display: block; } .sv-badges .smb { display: inline-grid; place-items: center; } /* Badge unifié (helper renderBadge) : même rendu serti + même repli partout */ .sm-badge { display: inline-grid; place-items: center; line-height: 1; vertical-align: middle; flex-shrink: 0; } .sm-badge svg { display: block; width: 100%; height: 100%; } .sm-badge--emoji { border-radius: 50%; background: var(--accent-grad); color: #fff; box-shadow: var(--shadow-sm); } /* ===== V2.1 · anti-débordement (troncatures oubliées sur composants JS) + cibles tactiles ===== */ .post-head .ph-name, .post-body .pb-title, .post-body .pb-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-head .ph-time { flex-shrink: 0; } .feed-card .ftitle, .feed-card .fmeta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sresult { align-items: center; } .sresult .sname, .sresult .smeta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .place .name { min-width: 0; } .place .name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .coupon .cname, .coupon .cdesc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .dh-name { overflow-wrap: anywhere; } .conv-preview { max-width: none; flex: 1; min-width: 0; } .iconbtn { min-width: 44px; min-height: 44px; } .bottom-nav button { min-height: 44px; } /* ============ V2.2 · DA unifiée : RELIEF / PROFONDEUR (ADN onb-emoji) ============ */ /* Une seule signature d'ombre, partagée par icônes maison, emojis natifs ET badges, pour qu'ils sortent enfin du même monde (la profondeur des emojis d'onboarding). */ :root { --relief: drop-shadow(0 8px 14px rgba(45,38,52,.34)) drop-shadow(0 2px 3px rgba(0,0,0,.18)); --relief-strong: drop-shadow(0 12px 22px rgba(0,0,0,.42)) drop-shadow(0 3px 5px rgba(45,38,52,.30)); } @keyframes floatySoft { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* Emojis natifs des tuiles : relief/profondeur (DA onb-emoji) · ils décollent de leur tuile */ .cic, .jo-ic, .qm-ic, .smgem, .thumb, .qico, .sv-ico, .cico { filter: drop-shadow(0 3px 4px rgba(45,38,52,.38)) drop-shadow(0 1px 1px rgba(0,0,0,.22)); } /* Emojis-héros natifs : même signature de relief (DA cohérente partout) */ .qs-emblem, .ph-av-emoji, .sp-next-bdg, .qm-ic, .hm-hero-ic, .hm-host-ic, .rit-ic, .empty-ill, .fe-emoji, .dh-emoji, .tip-ic, .onb-emoji, .sos-logo, .coupon .cico, .su-e, .su-ic { filter: var(--relief); } .sm-emoji3d { filter: var(--relief); } .sm-emoji3d.sm-float { animation: floatySoft 3.2s ease-in-out infinite; } /* Badges RONDS à emoji : peps ÉCLATANT · couleurs pleines + relief dimensionnel */ .br-medal, .smbadge-wrap, .sm-badge { filter: drop-shadow(0 5px 11px rgba(45,38,52,.26)) drop-shadow(0 1px 2px rgba(0,0,0,.14)) saturate(1.06); position: relative; isolation: isolate; } .br-medal::before, .smbadge-wrap::before { content: none; } @media (prefers-reduced-motion: reduce) { .sm-float { animation: none !important; } } /* ============ V2.2 · SOBRIÉTÉ (déclutter) + soleil signature ============ */ /* Plus d'air entre les sections de l'accueil */ .tab-panel[data-panel="accueil"] > section, .tab-panel[data-panel="accueil"] > .section-head { margin-top: 1.3rem; } /* Sobriété accueil : on masque le rail de badges (le jeu vit dans l'onglet Jeux) */ #badgeRailSection { display: none !important; } /* (Soleil filigrane des titres retiré : le vrai clin d'œil soleil reste celui du logo en topbar) */ /* Héros joueur SOBRE & COMPACT (la carte/map reste reine ; plus de halo ni de brillance criarde) */ .player-hero .ph-glow { display: none; } /* halo soleil de la carte coupé → plus basique */ .player-hero { padding: .7rem .9rem .8rem; border-radius: var(--radius); margin: .2rem 0 .9rem; box-shadow: 0 4px 14px rgba(45,38,52,.16); } .player-hero::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.06); pointer-events:none; } /* calme le dégradé */ .ph-avatar, .ph-av-emoji { width: 46px; height: 46px; } .ph-av-emoji { font-size: 23px; } .ph-lvl-ring { min-width: 22px; height: 22px; font-size: .74rem; } .ph-name { font-size: 1.05rem; } .ph-title { font-size: .72rem; opacity: .85; } .ph-xp { margin-top: .55rem; } .ph-xp-track { height: 8px; } .ph-xp-fill { box-shadow: none; } /* on coupe le néon doré */ .ph-xp-fill::after { display: none; } /* on coupe le reflet brillant qui balaie la barre */ /* La vignette vit maintenant dans l'onglet Jeux : on RÉAFFICHE "prochain niveau" (plus d'accueil à alléger) */ .ph-xp-next { display: flex; } .ph-xp-val .xp-info { background: none; border: 0; color: rgba(255,255,255,.85); cursor: pointer; font-size: .85rem; padding: 0 .1rem; vertical-align: middle; } /* Tuiles ÉCLATANTES (accueil + sécurité) : couleurs pop + relief + gloss + emoji vivant (le peps demandé) */ .tab-panel[data-panel="accueil"] .tile .thumb, .tab-panel[data-panel="securite"] .tile .thumb { /* saturation calmée (1.28 → 1.06) : le « pop » vient des couleurs émaillées DA, pas d'un boost néon */ filter: drop-shadow(0 5px 9px rgba(45,38,52,.40)) saturate(1.06) brightness(1.02); position: relative; overflow: hidden; } .tab-panel[data-panel="accueil"] .tile .thumb::after, .tab-panel[data-panel="securite"] .tile .thumb::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; /* v570 (retour Maxime) : fini le voile blanc 42% qui « grisait » le haut de la tuile au-dessus de l'emoji. Reflet TRÈS discret en coin haut-gauche seulement, aucune bande, aucune ombre basse. */ background:linear-gradient(145deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 26%); } .tab-panel[data-panel="accueil"] .tile:active .thumb, .tab-panel[data-panel="securite"] .tile:active .thumb { transform: scale(.96); } /* Quête du jour : aura calmée sur l'accueil (moins « jeu ») */ .tab-panel[data-panel="accueil"] .qs-aura { opacity: .45; } /* Accessibilité : croix de fermeture des panneaux → vraie cible tactile 44px */ .picker-head button.btn-ghost { min-width: 44px; min-height: 44px; padding: 0 !important; display: inline-grid; place-items: center; font-size: 1.05rem; line-height: 1; } /* P2.3 : toutes les croix icône-seule centrées proprement (desktop + iOS), même hors picker-head (le glyphe ✕ se calait trop haut/bas selon la plateforme). */ .ice-del, button[data-suggno], #onbDoneClose, .pwa-x { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1; } /* P2.34 : réponse admin aux feedbacks */ .fb-reply { display: flex; gap: .4rem; width: 100%; padding-left: 2.4rem; } .fb-reply-in { flex: 1; min-width: 0; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 14px; font: inherit; font-size: .82rem; background: var(--card); color: var(--ink); } .fb-replied { width: 100%; padding-left: 2.4rem; font-size: .8rem; color: var(--ok, #2a9d6e); font-weight: 600; } body.theme-dusk .fb-replied { color: #7fe3b0; } /* Mode Maison : préparation voyage repliée (sobriété) */ .hm-plan { margin: .4rem 0 1rem; } .hm-plan > summary { list-style: none; cursor: pointer; padding: .85rem 1rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-family: "Fraunces", serif; font-weight: 800; color: var(--ink); display: flex; align-items: center; justify-content: space-between; } .hm-plan > summary::-webkit-details-marker { display: none; } .hm-plan > summary::after { content: "›"; color: var(--accent-ink, var(--accent)); font-weight: 800; transition: transform .2s; display:inline-block; } .hm-plan[open] > summary::after { transform: rotate(90deg); } .hm-plan[open] > summary { margin-bottom: .5rem; } .hm-plan > summary:active { transform: scale(.99); } /* Toasts : emojis dimensionnels (même relief que l'onboarding) */ #toastWrap .tico, .toast .tico { filter: var(--relief); } .prof-badges .pb-more { font-size: .76rem; font-weight: 800; color: var(--accent-ink, var(--accent)); } .prof-badges .pb-lbl { font-size: .78rem; font-weight: 700; color: var(--muted); } .prof-badges .pb-edit { margin-left: auto; font-size: .76rem; font-weight: 700; color: var(--accent-ink, var(--accent)); } /* Mon parcours */ .parcours-today { font-size: .88rem; margin-bottom: .7rem; } .parcours-stats { display: flex; gap: .5rem; margin-bottom: .7rem; } .parcours-stats .pq { flex: 1; background: var(--cream); border-radius: 14px; padding: .55rem .3rem; text-align: center; } .parcours-stats .pq-n { font-weight: 800; color: var(--ink); font-size: .95rem; white-space: nowrap; } .parcours-stats .pq-l { font-size: .68rem; color: var(--muted); margin-top: .1rem; } .ptl { display: flex; flex-direction: column; } .ptl-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; } .ptl-row:last-child { border-bottom: 0; } .ptl-ic { width: 26px; text-align: center; font-size: 1rem; flex-shrink: 0; } .ptl-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } .ptl-d { font-size: .72rem; flex-shrink: 0; } /* Carte souvenir partageable (story) · DA « joaillerie » : coucher de soleil profond, cadre doré fin (carte précieuse), pastille niveau dorée, stats émaillées lisibles */ .souvenir-card { background: linear-gradient(165deg,#FFB347 0%,#FF8A3D 30%,#FF5A4D 62%,#5E2B52 100%); color: #fff; text-align: center; padding: 1.7rem 1.2rem 1.4rem; position: relative; overflow: hidden; } .souvenir-card::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255,229,170,.45), transparent 68%); top: -100px; right: -70px; } .souvenir-card::before { content: ""; position: absolute; inset: 9px; border: 1.5px solid rgba(255,221,138,.55); border-radius: 16px; pointer-events: none; z-index: 1; } .souvenir-card > * { position: relative; z-index: 2; } .sv-brand { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: #FFE2A6; } .sv-avatar { width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 32px; font-weight: 800; margin: .9rem auto .5rem; border: 3px solid #FFD98A; box-shadow: 0 6px 18px rgba(0,0,0,.25); background-size: cover; background-position: center; } .sv-name { font-size: 1.5rem; font-weight: 900; font-family: "Fraunces", serif; text-shadow: 0 2px 8px rgba(0,0,0,.18); } .sv-level { display: inline-block; margin-top: .4rem; font-size: .78rem; font-weight: 800; background: linear-gradient(135deg,#FFD15C,#F4A11E); color: #5a3d00; padding: .22rem .7rem; border-radius: 999px; box-shadow: 0 3px 8px rgba(0,0,0,.2); } .sv-tag { font-size: .8rem; opacity: .92; margin-top: .4rem; letter-spacing: .02em; } .sv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: 1.1rem 0 .6rem; } .sv-stat { background: rgba(40,12,40,.28); border: 1px solid rgba(255,221,138,.35); border-radius: 14px; padding: .65rem .3rem; } .sv-stat .sv-n { font-size: 1.25rem; font-weight: 900; font-family: "Fraunces", serif; white-space: nowrap; } .sv-stat .sv-l { font-size: .68rem; opacity: .9; font-weight: 700; letter-spacing: .02em; } .sv-badges { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; font-size: 1.35rem; min-height: 1.4rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); } .sv-foot { margin-top: .9rem; font-size: .8rem; font-weight: 800; color: #FFE2A6; } /* ------------------------ Compatibilité ------------------------- */ .compat { display: inline-block; padding: .28rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 800; } .compat.high { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); } .compat.mid { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); } .compat.low { background: #f1f2f5; color: var(--muted); } /* ------------------------ Avatars / photos --------------------- */ /* overflow:visible → la pastille « en ligne » (.pdot, placée à -1px) n'est plus ROGNÉE par le cadre rond (P2.32). La photo reste découpée en rond par border-radius:50% (pas besoin d'overflow:hidden puisque l'avatar est un background-image, pas un enfant). */ .avatar { background-size: cover; background-position: center; overflow: visible; } .avatar.lg { width: 74px; height: 74px; font-size: 28px; border-radius: 50%; } .avatar-edit { display: flex; align-items: center; gap: 1rem; margin-bottom: .4rem; } .detail-hero.has-photo { background-size: cover; background-position: center; } .detail-hero.has-photo .dh-emoji { display: none; } /* ------------------- Matchmaking : pastilles & recos ----------- */ .afn { display: inline-block; background: var(--accent-soft); color: var(--accent-ink, var(--accent)); font-size: .7rem; font-weight: 600; padding: .18rem .5rem; border-radius: 999px; margin: .25rem .25rem 0 0; } #recoList { display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: none; } #recoList::-webkit-scrollbar { display: none; } .reco { flex: 0 0 134px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem .7rem; text-align: center; cursor: pointer; box-shadow: var(--shadow-sm); } .reco:active { transform: scale(.98); } .reco .avatar { margin: 0 auto .5rem; } .reco-name { font-weight: 700; color: var(--ink); font-size: .9rem; line-height: 1.1; } .reco-meta { color: var(--muted); font-size: .75rem; } .reco-pct { color: var(--accent-ink, var(--accent)); font-weight: 800; font-size: .9rem; margin-top: .35rem; } .reco-reason { font-size: .68rem; color: var(--accent-ink, var(--accent)); background: var(--accent-soft); border-radius: 999px; padding: .15rem .45rem; margin-top: .35rem; display: inline-block; } /* Cartes « Découvrir » premium (refonte Mates) */ .tcard { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: .9rem; margin-bottom: .7rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s; } .tcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .tcard:active { transform: scale(.99); } .tcard-top { display: flex; align-items: center; gap: .75rem; } .tcard-av { width: 58px !important; height: 58px !important; font-size: 1.4rem !important; flex-shrink: 0; } .tcard-id { flex: 1; min-width: 0; } .tcard-name { font-weight: 800; font-size: 1rem; display: flex; align-items: center; gap: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tcard-city { color: var(--muted); font-size: .79rem; margin-top: .12rem; } .tcard-online { color: var(--accent-ink, var(--accent)); font-weight: 700; } .tcard-compat { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: .45rem .4rem; border-radius: 14px; background: var(--accent-soft, rgba(255,170,90,.16)); line-height: 1; } .tcard-compat span { font-size: .85rem; } .tcard-compat b { font-size: 1.05rem; font-weight: 800; color: var(--accent-ink, var(--accent)); margin-top: .15rem; } .tcard-compat small { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: .12rem; } /* Lot D : MAJUSCULES 9px → ~11px */ .tcard-compat.high { background: linear-gradient(135deg, rgba(255,90,77,.2), rgba(255,138,61,.16)); } .tcard-compat.low { background: var(--cream); } .tcard-compat.low b { color: var(--muted); } .tcard-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; } .tcard-tags span { font-size: .72rem; font-weight: 600; background: var(--cream); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: .22rem .55rem; } .tcard-reasons { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; } .trav-count { font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: .6rem; } /* ------------------------ Bannière d'alerte --------------------- */ #alertBanner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); max-width: 460px; width: 100%; z-index: var(--z-alert); /* P8 : ne passe plus sous la Dynamic Island / caméra (safe-area dans le padding) */ background: var(--danger); color: #fff; padding: calc(.9rem + env(safe-area-inset-top, 0px)) 1.2rem .9rem; text-align: center; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.3); animation: pulse 1s ease-in-out infinite alternate; } #alertBanner a { color: #fff; text-decoration: underline; } #alertBanner button { background: #fff; color: #b91c1c; padding: .25rem .8rem; margin-left: .8rem; font-size: .85rem; } @keyframes pulse { from { background: #ef4444; } to { background: #dc2626; } } /* =================================================================== POLISH, couche de finition visuelle (chargée en dernier) Dégradés coucher de soleil, effets verre, ombres douces, micro-animations. N'affecte que l'apparence. =================================================================== */ /* Fond : sur MOBILE pas de background-attachment:fixed (repeint à chaque frame = lag, et de toute façon le fond est masqué par l'app-shell qui prend toute la largeur). Sur DESKTOP, on FIXE le fond → les marges gauche/droite restent statiques (plus de scroll bizarre de "longue page web"). Le desktop gère le fixed sans souci de FPS. */ body { background: var(--bg); } /* v808 : fond PLAT (était var(--bg-grad) = dégradé clair->foncé → bande visible, surtout en hiver-nuit). Le fond suit #bgFx, uniforme. */ @media (min-width: 480px) { body { background-attachment: fixed !important; } } /* Taps instantanés (supprime le délai/zoom mobile) sur tout ce qui est interactif. */ button, a, label, input[type=range], .tile, .cat-tile, .chip, .qrow, .fc-chip, .spot-quick button, .stat-box, .stat-click, [role="button"], [data-goto], [data-jeuxnav], [data-jeuxopen] { touch-action: manipulation; } .app-shell { background: transparent; } h1 { letter-spacing: -.02em; } h2, h3 { letter-spacing: -.01em; } ::selection { background: rgba(255,90,77,.18); } /* Header & nav en verre dépoli */ /* Pas de backdrop-filter sur les barres fixes (topbar/nav) : il repeint à CHAQUE frame de scroll = jank mobile. Fonds plus opaques à la place → bien plus fluide. */ .topbar { background: linear-gradient(var(--bg) 62%, transparent); border-bottom: 0; } /* v808 : suit var(--bg) (fini le liseré #fbeee9 != #FFF4E6) */ .bottom-nav { background: rgba(255,255,255,.97); box-shadow: 0 -10px 34px rgba(20,20,40,.10); } .bottom-nav button { transition: color .2s; } .bottom-nav button .ni { transition: transform .22s cubic-bezier(.2,.8,.3,1), filter .2s; } .bottom-nav button.active .ni { transform: translateY(-2px) scale(1.12); } /* Cartes : ombre douce + légère élévation animée */ .card { border: 1px solid rgba(255,255,255,.9); transition: box-shadow .25s ease, transform .25s ease; } /* Boutons : rebond doux + ombre colorée */ button { transition: transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .2s, filter .2s; } .btn-primary { box-shadow: 0 6px 16px rgba(45,38,52,.20); } /* P12 : dé-rougi */ .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(45,38,52,.16); filter: none; } .btn-accent:hover { background: #fde2dd; } .btn-ghost:hover { background: #fff7f5; border-color: var(--accent-2); } .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(45,38,52,.16); } /* Champs : anneau de focus doux */ input:focus, textarea:focus, select:focus { box-shadow: var(--ring); } /* Chips : survol + état actif plus marqué */ .chip { transition: transform .18s, box-shadow .18s, background .18s; } .chip:hover { transform: translateY(-1px); } .chip.active { box-shadow: 0 8px 18px rgba(45,38,52,.16); } /* Tuiles / cartes cliquables : élévation au survol */ .tile, .gcard, .reco { transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s; } .tile:hover, .gcard:hover, .reco:hover { transform: translateY(-4px); box-shadow: var(--shadow); } /* Lignes de personnes cliquables : surbrillance douce */ .person { border-radius: 14px; transition: background .16s; } .person[style*="cursor"]:hover { background: #fff6f3; } .qrow { transition: background .16s; border-radius: 14px; } .qrow:hover { background: #fff6f3; } /* Avatars : petite ombre corail + anneau blanc */ .avatar { box-shadow: 0 5px 14px rgba(45,38,52,.20); } .avatar.lg { box-shadow: 0 8px 22px rgba(45,38,52,.28); border: 3px solid #fff; } /* Héros & bandeaux : ombre généreuse */ .feature, .detail-hero { box-shadow: var(--shadow-pop); } /* Barre de complétion : petite lueur */ .completion-bar span { box-shadow: 0 0 6px rgba(45,38,52,.25); } /* P11 audit : halo .55 trop criard pour la DA */ /* Écran de connexion : soleil flou dans le héros */ .auth-hero { position: relative; overflow: hidden; box-shadow: 0 18px 40px rgba(45,38,52,.16); } .auth-hero::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.45), rgba(255,255,255,0) 70%); top: -70px; right: -50px; } .auth-hero .logo-badge, .auth-hero .logo-text, .auth-hero .logo-tag { position: relative; z-index: 1; } /* Apparition des panneaux au changement d'onglet (keyframes tabFade défini plus haut) */ .tab-panel:not(.hidden) { animation: tabFade .34s cubic-bezier(.22,.8,.3,1) both; } /* ============================================================ v571 — MOTION (retour Maxime « chaud pour du motion ») : touches PREMIUM, rapides, purposeful — additives (ne compoundent pas le slide des panneaux, cascade en OPACITÉ seule) et entièrement neutralisées en mouvement réduit. ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* 1) Ressort de l'icône de nav quand l'onglet devient actif (feedback de navigation) */ @keyframes smNavPop { 0% { transform: translateY(-1px) scale(.82); } 55% { transform: translateY(-1px) scale(1.16); } 100% { transform: translateY(-1px) scale(1); } } .bottom-nav button.active .ni { animation: smNavPop .42s cubic-bezier(.34,1.56,.4,1) both; } /* 2) Cascade d'entrée des tuiles d'accès rapide (opacité seule → pas de double mouvement) */ @keyframes smTileFade { from { opacity: 0; } to { opacity: 1; } } .tab-panel:not(.hidden) .grid2 > .tile, .secu-view:not(.hidden) .grid2 > .tile, #jeuxNav .cat-row > .cat-tile { animation: smTileFade .45s ease both; } .grid2 > .tile:nth-child(1), #jeuxNav .cat-row > .cat-tile:nth-child(1) { animation-delay: .04s; } .grid2 > .tile:nth-child(2), #jeuxNav .cat-row > .cat-tile:nth-child(2) { animation-delay: .09s; } .grid2 > .tile:nth-child(3), #jeuxNav .cat-row > .cat-tile:nth-child(3) { animation-delay: .14s; } .grid2 > .tile:nth-child(4), #jeuxNav .cat-row > .cat-tile:nth-child(4) { animation-delay: .19s; } .grid2 > .tile:nth-child(5) { animation-delay: .24s; } .grid2 > .tile:nth-child(6) { animation-delay: .29s; } .grid2 > .tile:nth-child(7) { animation-delay: .34s; } .grid2 > .tile:nth-child(8) { animation-delay: .39s; } /* 3) Reflet PREMIUM qui balaie le CTA principal au survol/focus (Emil-style, subtil) */ .btn-primary { position: relative; overflow: hidden; } .btn-primary > * { position: relative; z-index: 1; } .btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: 0; background: linear-gradient(110deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-16deg); opacity: 0; pointer-events: none; } @keyframes smShine { 0% { left: -70%; opacity: .85; } 100% { left: 140%; opacity: 0; } } .btn-primary:hover::after, .btn-primary:focus-visible::after { animation: smShine .75s ease; } } /* =================================================================== POLISH v2, finitions écran par écran =================================================================== */ /* --- Écran de connexion : héros vivant --- */ .auth-hero::before { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.32), rgba(255,255,255,0) 70%); bottom: -65px; left: -45px; } .logo-badge { animation: floaty 5s ease-in-out infinite; box-shadow: 0 16px 30px rgba(0,0,0,.12), inset 0 0 0 2px rgba(255,255,255,.3); } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .logo-text { text-shadow: 0 2px 14px rgba(0,0,0,.14); } .seg button.active { box-shadow: 0 8px 18px rgba(45,38,52,.16); } .auth-play button { animation: pulseRing 2.6s ease-out infinite; } @keyframes pulseRing { 0% { box-shadow: 0 10px 24px rgba(255,90,77,.28), 0 0 0 0 rgba(255,90,77,.34); } 70% { box-shadow: 0 10px 24px rgba(255,90,77,.28), 0 0 0 14px rgba(255,90,77,0); } 100% { box-shadow: 0 10px 24px rgba(255,90,77,.28), 0 0 0 0 rgba(255,90,77,0); } } /* --- Accueil : titre dégradé, vignettes en relief --- */ /* « Bonjour {pseudo} » en corail/rouge (l'âme SunMates) · couleur d'accent, qui DIFFÈRE jour/nuit. */ #homeHello { color: var(--accent-ink, var(--accent)); } #homeHello .hello-name { color: var(--accent-ink, var(--accent)); } /* Série de jours (streak), gamification douce près du Bonjour */ .hello-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .1rem; flex-wrap: nowrap; } /* v570 ergo : nowrap → le chip « Dispo ? » reste stable à droite (fini le wrap désordonné) */ .hello-row #homeSubtitle { min-width: 0; flex: 1; } .streak-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: .25rem; font-size: .76rem; font-weight: 800; color: #8A5800; background: linear-gradient(135deg, rgba(255,201,60,.22), rgba(255,138,61,.18)); border: 1px solid rgba(201,138,30,.3); border-radius: 999px; padding: .28rem .6rem; cursor: pointer; white-space: nowrap; } .streak-chip:active { transform: scale(.96); } body.theme-dusk .streak-chip { color: #ffce8a; background: linear-gradient(135deg, rgba(255,201,60,.16), rgba(255,138,61,.12)); border-color: rgba(255,201,60,.28); } /* Bascule Voyage / Maison */ .mode-switch { display: flex; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: .22rem; gap: .2rem; margin: .7rem 0; } /* v773 (retour Maxime « passe du gris au blanc, lent à se sélectionner ») : plus de fondu sur color/background (c'était le flash gris→blanc) → l'état actif s'applique d'un coup ; on ne transitionne qu'un léger ressort (transform) pour le retour tactile. */ .mode-switch button { flex: 1; border: 0; background: none; color: var(--muted); font-weight: 800; font-size: .82rem; padding: .52rem; border-radius: 999px; cursor: pointer; transition: transform .13s var(--ease-out, cubic-bezier(.23,1,.32,1)); /* Retour Maxime « décalé / pas sur la même ligne » : on centre emoji+texte de façon identique sur les 2 boutons (avant : « ✈️ En voyage » avec span vs « 🏠 À la maison » emoji brut → bases différentes). */ display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; line-height: 1; } .mode-switch button.active { background: var(--accent-grad); color: #fff; box-shadow: var(--shadow-sm); } /* Mode Maison */ .hm-hero { display: flex; gap: .9rem; align-items: center; background: linear-gradient(135deg, rgba(255,201,60,.16), rgba(255,138,61,.12)); border: 1px solid rgba(201,138,30,.18); } .hm-hero-ic { font-size: 2.2rem; line-height: 1; flex-shrink: 0; } .hm-hero-title { font-weight: 800; font-size: 1.05rem; } .hm-inspo { background: linear-gradient(135deg, rgba(255,193,90,.14), rgba(255,138,61,.1)); border: 1px solid rgba(201,138,30,.18); } .hm-inspo-top { display: flex; align-items: center; gap: .7rem; } .hm-inspo-flag { font-size: 2rem; } .hm-inspo-ttl { font-size: .72rem; font-weight: 800; color: var(--accent-ink, var(--accent)); text-transform: uppercase; letter-spacing: .04em; } .hm-inspo-city { font-weight: 800; font-size: 1.15rem; } .hm-inspo-desc { font-size: .84rem; color: var(--muted); margin-top: .4rem; line-height: 1.4; } .hm-inspo-tip { font-size: .78rem; color: var(--ink); margin-top: .45rem; padding: .4rem .6rem; border-radius: 14px; background: rgba(255,201,60,.14); font-weight: 600; } body.theme-dusk .hm-inspo-tip { background: rgba(255,201,60,.12); color: #f3e9f3; } .prep-cat { font-size: .72rem; font-weight: 800; color: var(--accent-ink, var(--accent)); text-transform: uppercase; letter-spacing: .04em; margin: .7rem 0 .3rem; } .prep-cat:first-of-type { margin-top: .3rem; } .solo-annex { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: -.4rem 0 1rem; } .sa-tile { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .6rem .3rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font-size: .68rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); text-align: center; } .sa-tile .sa-ic { font-size: 1.4rem; filter: var(--relief); } .sa-tile:active { transform: scale(.95); } .hm-host { display: flex; gap: .8rem; align-items: center; } .host-perks { display: flex; flex-direction: column; gap: .45rem; margin-top: .7rem; } .host-perk { display: flex; align-items: center; gap: .6rem; font-size: .84rem; } .host-perk > span { font-size: 1.3rem; flex-shrink: 0; filter: var(--relief); } .host-perk div { display: flex; flex-direction: column; line-height: 1.2; } .host-perk b { color: var(--ink); } .host-perk div span { color: var(--muted); font-size: .78rem; } .hm-host-ic { font-size: 1.8rem; flex-shrink: 0; } .nt-set { display: flex; align-items: center; gap: .7rem; } .nt-ic { font-size: 1.8rem; flex-shrink: 0; } .nt-count { font-weight: 800; font-size: 1.4rem; color: var(--accent-ink, var(--accent)); line-height: 1; } .nt-form input { margin-top: .4rem; } .wish-wrap { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; } .wish-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--accent-soft, rgba(255,170,90,.16)); color: var(--ink); border-radius: 999px; padding: .3rem .35rem .3rem .65rem; font-size: .82rem; font-weight: 600; } .wish-chip button { border: 0; background: rgba(0,0,0,.06); color: var(--muted); width: 18px; height: 18px; border-radius: 50%; font-size: .9rem; line-height: 1; cursor: pointer; padding: 0; display: grid; place-items: center; } .wish-add { display: flex; gap: .4rem; } .wish-add input { flex: 1; } /* Préparatifs de voyage (checklist) */ .prep-item { display: flex; align-items: center; gap: .6rem; padding: .68rem .7rem; cursor: pointer; border-radius: 14px; border: 1px solid var(--line); background: var(--card); margin: .5rem 0; transition: background .12s, transform .12s; } /* P14 : tuiles mieux espacées */ .prep-item:active { transform: scale(.99); } .prep-item.done { background: var(--cream); border-color: transparent; } body.theme-dusk .prep-item { background: var(--dcard2,#241b35); } body.theme-dusk .prep-item.done { background: var(--dcard,#2a2140); } .prep-box { font-size: 1.1rem; flex-shrink: 0; } /* Barre de progression des préparatifs */ .prep-bar { height: 7px; border-radius: 999px; background: var(--cream); overflow: hidden; margin: -.1rem 0 .6rem; } .prep-bar span { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px; transition: width .45s ease; } body.theme-dusk .prep-bar { background: var(--dcard,#2a2140); } /* Bouton fiche pays (must-know) */ .prep-country { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; padding: .7rem .8rem; margin: 0 0 .7rem; border: 0; border-radius: 14px; cursor: pointer; color: #fff; background: radial-gradient(120% 130% at 12% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 46%), linear-gradient(135deg,#6C4DE0,#FF7A4D); box-shadow: var(--shadow-pop); } .prep-country .pc-flag { font-size: 1.8rem; flex-shrink: 0; } .prep-country .pc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .prep-country .pc-txt span { font-size: .76rem; opacity: .95; } .prep-country .pc-go { font-weight: 900; font-size: 1.1rem; } .prep-country:active { transform: scale(.99); } .prep-label { flex: 1; font-size: .85rem; font-weight: 600; } .prep-item.done .prep-label { color: var(--muted); text-decoration: line-through; } .prep-go { border: 0; background: var(--accent-soft, rgba(255,170,90,.16)); color: var(--accent-ink, var(--accent)); width: 24px; height: 24px; border-radius: 50%; font-size: 1rem; line-height: 1; cursor: pointer; flex-shrink: 0; display: grid; place-items: center; padding: 0; } /* Retour tactile sur les nouveaux éléments cliquables (cohérence premium) */ .wish-chip.ntpick, .hm-visitor, .wg-goal[data-wggo] { transition: transform .1s ease; } .wish-chip.ntpick:active, .hm-visitor:active, .wg-goal[data-wggo]:active, .mode-switch button:active, .streak-chip:active { transform: scale(.97); } .search input { border: 1px solid rgba(255,90,77,.10); } .tile .thumb { box-shadow: none; } /* --- Profil : compteurs dégradés, encarts doux --- */ .stat-box { background: linear-gradient(160deg, #ffffff, #fdeee9); box-shadow: var(--shadow-sm); } .stat { background: linear-gradient(90deg, #FF5A4D, #ff9f6b); -webkit-background-clip: text; background-clip: text; color: transparent; } .dstat { background: linear-gradient(160deg, #ffffff, #fdeee9); } /* --- Recommandations « Pour toi » --- */ .reco { background: linear-gradient(180deg, #ffffff, #fff7f3); } /* --- Jeux : cartes, badges, coupons --- */ .gcard { overflow: hidden; } .gcard .ghead { position: relative; } .gcard .ghead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.12)); } .hex { box-shadow: 0 8px 18px rgba(45,38,52,.16); transition: transform .2s ease; } .bitem.locked .hex { box-shadow: none; } .bitem:hover .hex { transform: translateY(-3px) rotate(-3deg); } .coupon { position: relative; } .coupon::before, .coupon::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); top: 50%; transform: translateY(-50%); } .coupon::before { left: -9px; } .coupon::after { right: -9px; } /* --- Bandeaux de détail : dégradé plus marqué --- */ .detail-hero .dh-body { background: linear-gradient(transparent, rgba(0,0,0,.5)); } /* --- Chat : bulles en relief --- */ .bubble.them { box-shadow: 0 2px 8px rgba(20,20,40,.05); } .bubble.me { box-shadow: 0 6px 16px rgba(45,38,52,.16); } .chat-input input { border: 1px solid rgba(255,90,77,.10); } /* --- Badges --- */ .badge.ok { box-shadow: inset 0 0 0 1px rgba(255,177,60,.22); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* =================================================================== POLISH v3, « VACATION × SUNMATES » : voyage rétro & réaliste Inspiration : l'esthétique solaire rétro de la marque Vacation Inc. (crème solaire, années 80, loisir balnéaire), mais on garde l'âme corail « sécurité d'abord » de SunMates. On ajoute des MATIÈRES crédibles : grain photo, papier chaud, brillance « huile solaire », tampons de passeport, cartes d'embarquement, rayons de soleil. Couche ajoutée en dernier, n'affecte QUE l'apparence. =================================================================== */ :root { --retro-teal: #1f9e92; /* turquoise rétro, la touche « mer/voyage » */ --retro-teal-2: #36c3b4; --butter: #ffd27a; /* jaune beurre (soleil) */ --cream: #fff6e9; /* crème solaire */ --paper: #fffaf3; /* papier chaud des cartes */ --ink-warm: #2b2333; /* encre brune chaude pour les titres */ --sunset-grad: linear-gradient(180deg, #ffe1a8 0%, #ffc28a 30%, #ff9b7c 62%, #FF5A4D 100%); --gloss: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 42%, rgba(255,255,255,0) 60%); } /* --- Typographie éditoriale : titres en serif rétro chaleureux --- */ h1, h2, h3, .brand b, .logo-text, #homeHello, .auth-title h1, .stat, .feature h2, .detail-hero h2 { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-optical-sizing: auto; } h1, h2 { font-weight: 600; letter-spacing: -.015em; color: var(--ink-warm); } h3 { font-weight: 600; letter-spacing: -.01em; color: var(--ink-warm); } .brand b { font-weight: 700; letter-spacing: -.01em; } .logo-text { font-weight: 900; letter-spacing: .03em; } /* Petites étiquettes en capitales espacées, façon signalétique rétro */ .logo-tag, .t-meta, .section-head a, label { text-transform: uppercase; letter-spacing: .13em; font-size: .68rem; font-weight: 600; } .logo-tag { letter-spacing: .22em; opacity: .92; } /* --- Fond : ciel solaire + GRAIN photographique (réalisme analogique) --- */ body { background: var(--bg); } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-nav); opacity: .05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Halo de soleil chaud en haut du « téléphone » */ .app-shell { background: var(--bg) !important; } /* --- Écran de connexion : ciel coucher de soleil + rayons rétro --- */ .auth-hero { background: repeating-conic-gradient(from 0deg at 50% 16%, rgba(255,255,255,.10) 0deg 5deg, rgba(255,255,255,0) 5deg 13deg), var(--sunset-grad) !important; } .logo-text { text-shadow: 0 2px 16px rgba(120,40,20,.22); } /* --- Boutons principaux : brillance « huile solaire » --- */ .btn-primary, .btn-danger { position: relative; overflow: hidden; } .btn-primary::before, .btn-danger::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60%; border-radius: inherit; background: var(--gloss); pointer-events: none; } /* --- Cartes : papier chaud + liseré fin + reflet de soleil en haut --- */ .card { background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%) !important; border: 1px solid rgba(255,90,77,.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 40px rgba(206,120,86,.13), 0 3px 10px rgba(40,30,20,.05) !important; } /* --- Héros & bandeaux : cadre « carte postale » en relief --- */ .feature, .detail-hero { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), var(--shadow-pop) !important; } .feature { background: var(--sunset-grad) !important; } .tile .thumb { background: var(--sunset-grad); } /* --- Badges : façon TAMPON DE PASSEPORT (cerné, en capitales) --- */ .badge { text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; border-radius: 8px; border: 1.5px solid currentColor; } .badge.ok { background: rgba(255,177,60,.16); color: #8A5800; box-shadow: inset 0 0 0 1px rgba(255,177,60,.28) !important; } .badge.warn { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); } /* Lot A2 : encre foncée sur corail pâle */ .badge.no { border-color: #d9d3cc; } /* --- Chips : galets crème, actif corail (touche rétro) --- */ .chip { background: var(--cream); border: 1px solid rgba(255,90,77,.12); font-weight: 600; } .chip.active { background: var(--accent-grad); color: #fff; border-color: transparent; } /* --- Coupons : façon CARTE D'EMBARQUEMENT (papier + pointillés) --- */ .coupon { background: var(--cream) !important; border: 1.5px dashed rgba(255,90,77,.38) !important; } /* --- Médaillons de jeu : petite lueur de soleil (moins « arcade ») --- */ .hex { background-image: radial-gradient(circle at 50% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%), var(--accent-grad); } /* --- Liens d'action : turquoise rétro (équilibre le corail) --- */ .section-head a { color: var(--retro-teal); } /* --- Séparateurs de sections dans le formulaire de profil --- */ .pfield-sep { font-size: .98rem; margin: 1.5rem 0 .3rem; padding-top: 1rem; border-top: 1px dashed rgba(255,90,77,.28); color: var(--accent-ink, var(--accent)); } /* --- Fiche profil détaillée : grille d'infos --- */ .pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .4rem; } .pgrid .pcell { background: var(--cream); border: 1px solid rgba(255,90,77,.12); border-radius: 14px; padding: .55rem .7rem; } .pgrid .pcell .k { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .pgrid .pcell .v { font-size: .9rem; font-weight: 600; color: var(--ink-warm); } .pprompt { background: var(--paper); border: 1px solid rgba(255,90,77,.12); border-radius: 14px; padding: .7rem .9rem; margin-top: .6rem; } .pprompt .pq { font-size: .76rem; color: var(--muted); } .pprompt .pa { font-family: "Fraunces", serif; font-size: 1.05rem; color: var(--ink-warm); margin-top: .15rem; } /* --- Sélecteur de Mate (proposer un défi) --- */ .matepick { display:flex; align-items:center; gap:.7rem; padding:.6rem; border-radius:14px; cursor:pointer; } .matepick:hover { background:#fff6f3; } /* --- Overlay sélecteur générique --- */ #pickerOverlay { position: fixed; inset: 0; z-index: var(--z-picker); background: rgba(40,25,20,.45); display: flex; align-items: flex-end; justify-content: center; } #pickerOverlay.hidden { display: none; } .picker-card { background: var(--paper); width: 100%; max-width: 460px; border-radius: 22px 22px 0 0; padding: 1.2rem 1.1rem 1.6rem; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0,0,0,.25); } .picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; flex-shrink: 0; } #pickerBody { overflow-y: auto; flex: 1; } /* =================================================================== SESSION 3, Notifications, toasts, feed d'accueil, accordéon profil =================================================================== */ .topbar-actions { display: flex; align-items: center; gap: .5rem; } .iconbtn { background: rgba(255,255,255,.75); border: 1px solid rgba(45,38,52,.15); border-radius: 14px; padding: .45rem .6rem; font-size: 1.15rem; line-height: 1; box-shadow: var(--shadow-sm); cursor: pointer; position: relative; } .nbadge { position: absolute; top: -6px; right: -6px; background: color-mix(in srgb, var(--accent) 75%, var(--ink)); color: #fff; /* Lot A : chiffre 3.1→4.0:1 en jour */ font-size: .62rem; font-weight: 800; min-width: 17px; height: 17px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 2px 6px rgba(45,38,52,.16); } .bottom-nav button { position: relative; } .navbadge { position: absolute; top: 3px; right: calc(50% - 22px); background: var(--accent); color: #fff; font-size: .6rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; box-shadow: 0 2px 6px rgba(45,38,52,.16); } /* Toasts (notifications éphémères) */ #toastWrap { position: fixed; top: calc(.7rem + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: .5rem; width: calc(100% - 1.5rem); max-width: 430px; pointer-events: none; } /* Variante BASSE (au-dessus de la nav) : pour les messages liés à un élément qu'on touche en haut */ #toastWrapLow { position: fixed; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: .5rem; width: calc(100% - 1.5rem); max-width: 430px; pointer-events: none; } /* #36 : toast THÉMÉ par mode (liseré accent + encre du thème, plus un gris unique partout) */ .toast { pointer-events: auto; background: rgba(45,35,50,.96); color: #fff; border-left: 3px solid var(--accent); border-radius: 14px; padding: .7rem .9rem; display: flex; align-items: center; gap: .6rem; box-shadow: 0 12px 30px rgba(0,0,0,.3); animation: toastIn .3s cubic-bezier(.2,.8,.3,1) both; cursor: pointer; touch-action: pan-y; } body.theme-winter .toast { background: rgba(20,40,64,.96); } body.theme-tropic .toast { background: rgba(12,46,36,.96); } body.theme-dusk .toast { background: rgba(32,24,48,.97); } .toast .tico { font-size: 1.35rem; flex-shrink: 0; } .toast .ttxt { font-size: .85rem; line-height: 1.25; } .toast .ttxt b { font-weight: 700; } @keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } } /* Panneau de notifications (cloche) */ #notifPanel { position: fixed; inset: 0; z-index: var(--z-notif); background: rgba(40,25,20,.45); display: flex; align-items: flex-start; justify-content: center; } #notifPanel.hidden { display: none; } .notif-card { background: var(--paper); width: 100%; max-width: 460px; margin-top: 3.4rem; border-radius: 22px; padding: 1.1rem; max-height: 74vh; overflow-y: auto; box-shadow: 0 22px 55px rgba(0,0,0,.32); } .notif-item { display: flex; align-items: center; gap: .7rem; padding: .6rem; border-radius: 14px; cursor: pointer; } .notif-item:hover { background: #fff6f3; } .notif-item .nemoji { font-size: 1.35rem; flex-shrink: 0; } /* Fil d'actualité de l'accueil */ .feed-card { background: linear-gradient(180deg, #fff, var(--paper)); border: 1px solid rgba(45,38,52,.1); border-radius: 18px; padding: .85rem 1rem; margin-bottom: .7rem; display: flex; gap: .75rem; align-items: center; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .18s, box-shadow .18s; } .feed-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .feed-card .fic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; background: var(--accent-soft); flex-shrink: 0; } .feed-card .fbody { flex: 1; min-width: 0; } .feed-card .ftitle { font-weight: 700; color: var(--ink-warm); font-size: .92rem; } .feed-card .fmeta { color: var(--muted); font-size: .78rem; } .feed-card .fcta { color: var(--retro-teal); font-weight: 700; font-size: .8rem; white-space: nowrap; } /* Accordéon du formulaire de profil */ .pf-section { border: 1px solid rgba(255,90,77,.14); border-radius: 16px; margin-bottom: .7rem; overflow: hidden; background: #fff; } .pf-head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; cursor: pointer; font-weight: 700; color: var(--ink-warm); font-family: "Fraunces", serif; font-size: 1rem; } /* % de complétion par catégorie (ce qui reste à remplir) */ .pf-pct { margin-left: auto; margin-right: .55rem; font-size: .68rem; font-weight: 800; font-family: "Manrope", sans-serif; color: var(--muted); background: var(--cream); padding: .08rem .45rem; border-radius: 999px; } .pf-pct.done { color: #8A5800; background: rgba(255,177,60,.18); } .pf-head .chev { transition: transform .2s; color: var(--muted); } .pf-section.open .pf-head .chev { transform: rotate(90deg); } .pf-body { max-height: 0; overflow: hidden; padding: 0 1rem; transition: max-height .24s cubic-bezier(.4, 0, .2, 1); } .pf-section.open .pf-body { padding-bottom: 1rem; } /* ===== SESSION 4, sous-onglets Mates, feed "posts", recherche ===== */ /* Sous-onglets (Mates) */ .mseg { display: flex; gap: .35rem; background: var(--cream); border: 1px solid rgba(255,90,77,.12); border-radius: 14px; padding: .3rem; margin: .7rem 0 1rem; } .mseg button { flex: 1; background: transparent; color: var(--text); font-weight: 700; font-size: .8rem; padding: .55rem .2rem; border-radius: 14px; position: relative; display: flex; align-items: center; justify-content: center; gap: .35rem; } /* icône + libellé CENTRÉS (avant : alignés à gauche, l'enveloppe/chat décalés) */ .mseg button [data-smicon] { display: inline-flex; align-items: center; } .mseg button.active { background: var(--accent-grad); color: #fff; } .mseg .segb { position: absolute; top: 2px; right: 5px; background: var(--accent); color: #fff; font-size: .56rem; min-width: 15px; height: 15px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } .mseg button.active .segb { background: #fff; color: var(--accent-ink, var(--accent)); } /* #profSegNav (Premium / Admin) : 2 vrais boutons-cartes DISTINCTS et bien séparés (avant : 2 libellés texte flottant dans un bandeau beige = « pas scindé / moche »). */ #profSegNav { background: transparent !important; border: 0 !important; padding: 0 !important; gap: .55rem; margin: .7rem 0 .2rem; } #profSegNav button { flex: 1; border-radius: 14px; padding: .62rem .5rem; font-size: .82rem; font-weight: 800; border: 0; background: var(--card); box-shadow: none; } /* v756 : contour gris retiré */ /* Premium = doré (spécial) ; Admin = FRAMBOISE SUNSET (retour Maxime : le terracotta faisait « marron morose/terreux » hors DA) → rose-corail profond, vivant, distinct du Premium or ET du corail global de l'app. */ #profSegNav button[data-pseg="premium"] { background: linear-gradient(135deg,#FFDD8A,#F0AD3A); border-color: rgba(200,130,20,.6); color: #5f3e00; } #profSegNav button[data-pseg="admin"] { background: linear-gradient(135deg,#FFC2CC,#F4798F); border-color: rgba(220,60,100,.55); color: #7a1230; } /* P14 : bouton Espace Pro = lagon professionnel */ /* DA coucher de soleil : « pro » passe du TEAL (hors-DA, vert/turquoise) à un TERRACOTTA chaud, distinct de l'or (Gold) et de la framboise (Admin), mais dans la famille sunset. */ #profSegNav button[data-pseg="pro"] { background: linear-gradient(135deg,#FFD9C2,#FFAE86); border-color: rgba(200,80,46,.45); color: #9C4326; } #profSegNav button[data-pseg="pro"].active { background: linear-gradient(135deg,#FF9A56,#E0631C) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(200,80,46,.3); } body.theme-dusk #profSegNav button[data-pseg="pro"] { background: linear-gradient(135deg,#3E2417,#4E3019); border-color: rgba(255,154,86,.4); color: #FFC79B; } body.theme-dusk #profSegNav button[data-pseg="pro"].active { background: linear-gradient(135deg,#E0631C,#B8480F) !important; color: #FFF3E9 !important; } /* État ACTIF : chaque tuile garde SA couleur (avant : tout passait corail → le Premium n'était plus jaune). Premium actif = OR franc, Admin actif = framboise profond. */ #profSegNav button.active { background: var(--accent-grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 16px rgba(45,38,52,.28); } #profSegNav button[data-pseg="premium"].active { background: linear-gradient(135deg,#FFC93C,#E89A12) !important; color: #4a3200 !important; box-shadow: 0 6px 16px rgba(232,154,18,.35); } #profSegNav button[data-pseg="admin"].active { background: linear-gradient(135deg,#F2607E,#C92D55) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(201,45,85,.32); } body.theme-dusk #profSegNav button { background: var(--dcard,#2a2140); border-color: rgba(255,255,255,.1); color: #f3e7d8; } body.theme-dusk #profSegNav button[data-pseg="premium"] { background: linear-gradient(135deg,#4a3a1a,#5a4520); border-color: rgba(240,169,58,.4); color: #ffd98a; } body.theme-dusk #profSegNav button[data-pseg="admin"] { background: linear-gradient(135deg,#451b2a,#5a2438); border-color: rgba(244,121,143,.45); color: #ffb8c8; } body.theme-dusk #profSegNav button[data-pseg="premium"].active { background: linear-gradient(135deg,#D9A21B,#A87708) !important; color: #fff8e6 !important; } body.theme-dusk #profSegNav button[data-pseg="admin"].active { background: linear-gradient(135deg,#B83558,#8E2342) !important; color: #ffe3ea !important; } /* HIVER : or givré + bleu acier (raccord palette glacier) */ body.theme-winter #profSegNav button[data-pseg="premium"] { background: linear-gradient(135deg,#F8EBC4,#EBCB78); border-color: rgba(170,130,40,.45); color: #5a4300; } body.theme-winter #profSegNav button[data-pseg="premium"].active { background: linear-gradient(135deg,#F2CE5E,#D9A21B) !important; color: #4a3200 !important; box-shadow: 0 6px 16px rgba(217,162,27,.3); } body.theme-winter #profSegNav button[data-pseg="admin"] { background: linear-gradient(135deg,#DCE9F6,#BBD2E9); border-color: rgba(70,120,170,.4); color: #2C4A66; } body.theme-winter #profSegNav button[data-pseg="admin"].active { background: linear-gradient(135deg,#6E97BE,#48719A) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(72,113,154,.3); } /* TROPIQUES : or mangue + vert feuille (raccord palette jungle) */ body.theme-tropic #profSegNav button[data-pseg="premium"] { background: linear-gradient(135deg,#FFE9A8,#F1C249); border-color: rgba(170,130,20,.45); color: #5a4200; } body.theme-tropic #profSegNav button[data-pseg="premium"].active { background: linear-gradient(135deg,#F7C948,#DBA413) !important; color: #4a3200 !important; box-shadow: 0 6px 16px rgba(219,164,19,.3); } body.theme-tropic #profSegNav button[data-pseg="admin"] { background: linear-gradient(135deg,#DCEEC6,#B7DA9D); border-color: rgba(70,130,50,.4); color: #2F4A1F; } body.theme-tropic #profSegNav button[data-pseg="admin"].active { background: linear-gradient(135deg,#7FAF5E,#5C8C3E) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(92,140,62,.3); } /* Nav admin : emoji + libellé → chips qui s'adaptent au texte et passent à la ligne proprement */ .aseg-nav button { flex: 0 1 auto; padding: .5rem .7rem; white-space: nowrap; } /* Liste membres admin : en-tête comptes actifs/suspendus + filtre */ .au-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: .6rem; } .au-counts { font-size: .84rem; color: var(--text); } .au-counts b { color: var(--ink); } .au-filters { display: flex; gap: .3rem; } .au-fbtn { font-size: .74rem; font-weight: 700; padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; } .au-fbtn.active { background: var(--accent-grad); color: #fff; border-color: transparent; } body.theme-dusk .au-fbtn { background: var(--dcard,#2a2140); color: #eee; border-color: rgba(255,255,255,.1); } .mates-stat { display: flex; width: fit-content; align-items: center; gap: .5rem; margin: .3rem auto .8rem; background: var(--accent-soft); border: 1px solid rgba(255,90,77,.22); border-radius: 999px; padding: .4rem .95rem; cursor: pointer; transition: transform .1s; } .mates-stat:active { transform: scale(.97); } .mates-stat b { font-size: 1.35rem; color: var(--accent-ink, var(--accent)); line-height: 1; } /* Cartes « Découvrir » plus riches */ .trav-open { border-bottom: 0 !important; border: 1px solid var(--line); border-radius: 14px; margin-bottom: .55rem; padding: .7rem .8rem !important; transition: transform .12s, box-shadow .15s; } .trav-open:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .trav-open .avatar { width: 50px; height: 50px; } .trav-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; } .trav-tags span { font-size: .68rem; font-weight: 700; color: var(--accent-ink, var(--accent)); background: var(--accent-soft); padding: .08rem .45rem; border-radius: 999px; } .mates-stat span { font-size: .85rem; color: var(--ink-warm); font-weight: 700; } .mates-stat b { font-family: "Fraunces", serif; font-size: 1.5rem; color: var(--accent-ink, var(--accent)); } .mates-stat span { color: var(--muted); font-size: .85rem; } /* Feed "posts" de l'accueil */ .post { background: #fff; border: 1px solid rgba(45,38,52,.1); border-radius: 18px; padding: .9rem 1rem; margin-bottom: .7rem; box-shadow: var(--shadow-sm); } .post-head { display: flex; align-items: center; gap: .6rem; } .post-head .ph-name { font-weight: 700; color: var(--ink-warm); font-size: .9rem; } .post-head .ph-time { color: var(--muted); font-size: .74rem; margin-left: auto; } .post-body { margin-top: .55rem; display: flex; align-items: center; gap: .7rem; background: linear-gradient(160deg,#fff,var(--cream)); border: 1px solid rgba(255,90,77,.1); border-radius: 14px; padding: .65rem .8rem; } .post-body .pemoji { font-size: 1.7rem; } .post-body .pb-title { font-weight: 700; color: var(--ink-warm); font-size: .9rem; } .post-body .pb-sub { color: var(--muted); font-size: .78rem; } /* Résultats de recherche (accueil) */ .sresult { display: flex; align-items: center; gap: .7rem; padding: .55rem; border-radius: 14px; cursor: pointer; } .sresult:hover { background: #fff6f3; } .sresult .sicon { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); font-size: 1.15rem; flex-shrink: 0; } .sresult .sname { font-weight: 700; color: var(--ink-warm); font-size: .9rem; } .sresult .smeta { color: var(--muted); font-size: .78rem; } .conv-preview { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; } .conv-unread { background: var(--accent); color: #fff; font-size: .62rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } /* Actions sur ses propres messages (éditer / supprimer) */ .msg-quest { display: inline-block; margin-top: .4rem; background: rgba(255,255,255,.25); color: inherit; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: .2rem .7rem; font-size: .76rem; font-weight: 700; cursor: pointer; } .bubble.them .msg-quest { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); border-color: transparent; } /* Chaque message vit dans une LIGNE pleine largeur. L'heure est posée dans une COLONNE fixe au bord droit (mêmes coordonnées pour tous → alignées, jamais collées à la bulle). Cachée par défaut ; révélée en touchant un message OU en glissant (peek façon Insta). */ .msg-row { position: relative; display: flex; width: 100%; } .msg-row.me { justify-content: flex-end; } .msg-row.them { justify-content: flex-start; } .msg-row .bubble-time { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: .66rem; color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 4; background: var(--bg); padding: 1px 5px; border-radius: 8px; } /* pastille = lisible, jamais superposée à la bulle */ body.theme-dusk .msg-row .bubble-time { background: #160f24; } .msg-row .bubble.show-time ~ .bubble-time, #chatBody.peeking .msg-row .bubble-time { opacity: 1; } /* Cœur de réaction sur un message (double-tap) */ .bubble { position: relative; } .bubble-heart { position: absolute; bottom: -9px; right: 8px; font-size: .82rem; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 .28rem; line-height: 1.5; box-shadow: 0 1px 4px rgba(0,0,0,.15); z-index: 3; display: inline-flex; align-items: center; gap: .1rem; } .bubble.them .bubble-heart { right: auto; left: 8px; } .bubble-heart b { font-size: .68rem; color: var(--muted); font-weight: 700; } @keyframes heartPop { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } } .bubble-heart.pop { animation: heartPop .35s; } /* Peek façon Insta : on glisse la conversation vers la gauche, TOUTES les bulles suivent le doigt (translateX) et découvrent leur heure dans la gouttière droite. */ #chatBody { overflow-x: hidden; } #chatBody .bubble { transform: translateX(calc(var(--peek, 0px) * -1)); transition: transform .18s ease; } #chatBody.peeking .bubble { transition: none; } /* suivi 1:1 du doigt pendant le glissement */ .bubble-act { display: flex; gap: .3rem; margin-top: .3rem; justify-content: flex-end; opacity: .85; } .bubble-act button { background: rgba(255,255,255,.25); border: 0; border-radius: 999px; padding: 0; width: 22px; height: 22px; cursor: pointer; line-height: 1; display: grid; place-items: center; color: #fff; opacity: .8; } .bubble.them .bubble-act button { color: var(--muted); background: rgba(0,0,0,.06); } .bubble.me .bubble-act button:hover { background: rgba(255,255,255,.45); } /* =================================================================== MODE SOMBRE, « crépuscule / plage de nuit » (parallèle de l'aube) Ciel violet-indigo + lueur de coucher de soleil. Activé par body.theme-dusk =================================================================== */ body.theme-dusk { /* #9 : les surfaces nuit passent par --dcard* → les modes « nuit d'hiver » et « nuit tropicale » (fin de feuille) n'ont qu'à redéfinir ces 4 variables. */ --dcard: #2a2140; --dcard2: #241b35; --dcard3: #2c2140; --dcard4: #352a52; --dcard5: #1f1830; --bg: #190E2E; --card: #221a33; --paper: var(--dcard2,#241b35); --cream: #2b2240; --accent: #ff7e72; --accent-2: #ff9a8d; --accent-3: #ffc07a; --accent-soft: rgba(255,126,114,.16); --accent-grad: linear-gradient(135deg, #ffc07a 0%, #ff9a8d 45%, #ff7e72 100%); --ink: #f3ecf6; --ink-warm: #f6eef8; --text: #ded3e6; --muted: #a99fbe; --line: rgba(255,255,255,.09); --retro-teal: #4fd6c4; color: var(--text); background: var(--bg); } body.theme-dusk .app-shell { background: var(--bg) !important; } body.theme-dusk .card { background: linear-gradient(180deg, var(--dcard2,#241b36) 0%, var(--dcard5,#1f1830) 100%) !important; border-color: rgba(255,255,255,.07) !important; box-shadow: 0 14px 34px rgba(0,0,0,.42) !important; } body.theme-dusk input, body.theme-dusk textarea, body.theme-dusk select, body.theme-dusk .search input { background: #2b2240 !important; color: #ede6f2; border-color: rgba(255,255,255,.13) !important; } body.theme-dusk .post, body.theme-dusk .pf-section { background: #221a34 !important; border-color: rgba(255,255,255,.07); } body.theme-dusk .post-body, body.theme-dusk .pcell, body.theme-dusk .pprompt, body.theme-dusk .feed-card, body.theme-dusk .coupon, body.theme-dusk .stat-box, body.theme-dusk .dstat, body.theme-dusk .tile, body.theme-dusk .gcard, body.theme-dusk .mseg, body.theme-dusk .chip { background: var(--dcard,#2a2140) !important; border-color: rgba(255,255,255,.08) !important; } body.theme-dusk .chip.active, body.theme-dusk .mseg button.active { background: var(--accent-grad) !important; color: #fff !important; } body.theme-dusk .notif-card, body.theme-dusk .picker-card { background: #221a34; } body.theme-dusk .topbar { background: linear-gradient(var(--bg) 62%, transparent); border-bottom: 0; } /* v808 : suit var(--bg) (#190E2E), fini le liseré #171026 */ body.theme-dusk .bottom-nav { background: #1c1428 !important; } body.theme-dusk .iconbtn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.13); } body.theme-dusk .bubble.them { background: #2c2342; color: #ede6f2; } body.theme-dusk .sresult:hover, body.theme-dusk .notif-item:hover, body.theme-dusk .matepick:hover, body.theme-dusk .qrow:hover, body.theme-dusk .person[style*="cursor"]:hover { background: rgba(255,255,255,.06); } body.theme-dusk .badge.no { background: var(--dcard,#2a2140); color: var(--muted); } body.theme-dusk .leaflet-popup-content-wrapper, body.theme-dusk .leaflet-popup-tip { background: var(--dcard2,#241b35); color: #ede6f2; } /* Le grain et les ombres restent désactivés pour « mouvement réduit » déjà géré plus haut ; rien d'animé n'est ajouté ici. */ /* =================================================================== SUNMATES, IDENTITÉ DE MARQUE v2 « Maison de voyage » Inspiration : raffinement éditorial (Voyageurs du Monde) + chaleur rétro-premium (Vacation), pour une app de voyage gamifiée haut de gamme. Palette propre : ivoire · espresso · TERRACOTTA · PÉTROLE · OR. Couche finale = redéfinit les jetons + affine les composants. =================================================================== */ :root { --bg: #FFF4E6; /* v697 : aligné sur le vrai fond */ --bg-grad: radial-gradient(120% 80% at 50% -10%, #efe2cc 0%, #f4ede0 55%, #f1e8d8 100%); --card: #FFFCF6; /* blanc chaud */ --paper: #FFFCF6; --cream: #F2E9D8; --accent: #BE5640; /* TERRACOTTA, couleur signature */ --accent-2: #CF7355; --accent-3: #D9A441; /* OR / ambre */ --accent-grad: linear-gradient(135deg, #D9A441 0%, #C76A49 48%, #BE5640 100%); --accent-soft: #F1E4D7; /* terracotta très pâle */ --petrol: #114C49; /* BLEU PÉTROLE, secondaire voyage */ --gold: #C79A43; --retro-teal:#16615C; /* pétrole (liens d'action) */ --ink: #241C12; /* espresso (titres) */ --ink-warm: #2A2016; --text: #4C4236; /* texte */ --muted: #938775; /* secondaire */ --ok: #1E7A5A; /* vert sobre */ --danger: #B23A2E; /* rouge sobre */ --line: #E7DCC8; --radius: 18px; --radius-sm: 12px; --radius-lg: 24px; --shadow: 0 12px 34px rgba(70,45,20,.09), 0 2px 8px rgba(70,45,20,.05); --shadow-sm: 0 6px 16px rgba(70,45,20,.06); --shadow-pop:0 18px 46px rgba(120,60,30,.18); --sunset-grad: linear-gradient(180deg, #E7C489 0%, #D78F62 46%, #BE5640 100%); --ring: 0 0 0 4px rgba(190,86,64,.16); } /* --- Typographie : Manrope (interface) + Fraunces (titres) --- */ body { font-family: "Manrope", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); } /* v808 : fond plat (cf. note --bg-grad) */ h1, h2, h3, h4, .brand b, .logo-text, #homeHello, .auth-title h1, .stat, .feature h2, .detail-hero h2, .dh-name, .reco-name, .pb-title, .ph-name { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; } h1 { font-weight: 600; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1.12; color: var(--ink); } /* Titres de haut de page centrés (rendu parallèle) + un peu d'air en haut */ .tab-panel > h1, .mates-view > h1, .secu-view > h1, .jeux-view > h1 { text-align: center; margin-top: 1.1rem; } .tab-panel > h1 + .muted, .secu-view > h1 + .muted, .jeux-view > h1 + .muted { text-align: center; } h2 { font-weight: 600; letter-spacing: -.015em; color: var(--ink); } h3 { font-weight: 600; font-size: 1.04rem; letter-spacing: -.01em; color: var(--ink); } .muted { color: var(--muted); } label, .logo-tag, .t-meta, .section-head a { text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 700; } .section-head a { color: var(--retro-teal); } /* --- Marque / en-tête --- */ .brand b { font-weight: 600; letter-spacing: .015em; font-size: 1.2rem; } .brand .mark { background: var(--accent-grad); border-radius: 14px; box-shadow: var(--shadow-sm); } .topbar { background: linear-gradient(var(--bg) 62%, rgba(255,244,230,0)); border-bottom: 0; } /* --- Cartes : épurées, bord fin, ombre douce --- */ .card { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: var(--radius); box-shadow: var(--shadow) !important; } .post, .pf-section { background: var(--card) !important; border-color: var(--line) !important; } .feed-card, .post-body, .pcell, .pprompt, .stat-box, .dstat, .tile, .gcard, .reco { background: var(--cream) !important; border: 1px solid var(--line) !important; } /* --- Boutons : terracotta plein, secondaire pétrole, finition nette --- */ button { font-family: "Manrope", sans-serif; font-weight: 700; border-radius: var(--radius-sm); } .btn-primary { background: var(--accent) !important; color: #fff; box-shadow: 0 8px 20px rgba(190,86,64,.26) !important; } .btn-primary::before, .btn-danger::before { display: none !important; } /* on retire la brillance pour un rendu net */ .btn-primary:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(45,38,52,.24) !important; } /* Lot C : halo de survol dé-rougi (la couche v3 ne couvrait pas le :hover) → gris chaud */ .btn-accent { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); } .btn-ghost { background: transparent; border: 1.5px solid var(--line); color: var(--ink); } .btn-danger { background: var(--danger) !important; color: #fff; box-shadow: 0 8px 20px rgba(178,58,46,.3) !important; } /* --- Champs --- */ input, textarea, select, .search input { background: #fff !important; border: 1.5px solid var(--line) !important; color: var(--text); border-radius: var(--radius-sm); } input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; box-shadow: var(--ring); } /* --- Chips / pastilles --- */ .chip { background: var(--cream); border: 1px solid var(--line); color: var(--text); font-weight: 600; } .chip.active { background: var(--accent) !important; color: #fff !important; border-color: transparent; } .badge.ok { background: rgba(255,177,60,.16); color: #8A5800; border-color: rgba(255,177,60,.45); } /* --- Navigation basse : icônes en traits --- */ .bottom-nav { background: rgba(255,252,246,.86); box-shadow: 0 -8px 28px rgba(70,45,20,.08); } .bottom-nav button { color: var(--muted); font-weight: 600; font-size: .7rem; } .bottom-nav button.active { color: var(--accent-ink, var(--accent)); } .bottom-nav svg { width: 22px; height: 22px; display: block; margin: 0 auto 2px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .bottom-nav button.active::before { background: var(--accent); } /* --- Héros (connexion) raffiné --- */ .auth-hero { background: var(--sunset-grad) !important; } .logo-text { letter-spacing: .14em; font-weight: 600; } .feature, .tile .thumb { background: var(--sunset-grad); } /* --- Posts du fil --- */ .post-body { background: linear-gradient(160deg, #fff, var(--cream)) !important; } /* (Couche « nuit pétrole » SUPPRIMÉE : morte-écrasée par la couche « nuit tropicale » plus bas dans la feuille · vérifié par captures avant/après identiques.) */ /* =================================================================== SUNMATES, IDENTITÉ v3 « VIBRANT VACANCES » 🌅🌴 App pour se faire des potes en voyage : ça doit RESPIRER la chaleur, le soleil et la convivialité. Couleurs vives (soleil/corail/turquoise/ rose crépuscule), dégradés généreux, ambiances photo pour les jeux. Couche finale, prime sur toutes les précédentes. =================================================================== */ :root { --bg: #FFF4E6; /* Dégradé de FOND (body) : reste 100% sunset/DA. Avant il finissait en rose #FFB8CE + teal #B7E9EE → au rebond de scroll (overscroll) sur une page longue (ex : Admin), ce teal/rose apparaissait = « tout l'écran change de couleur ». Désormais : que du chaud. */ --bg-grad: linear-gradient(168deg, #FFE9C4 0%, #FFD3A6 45%, #FFC0A0 100%); --card: #FFFFFF; --paper: #FFFDF8; --cream: #FFF1E0; --accent: #FF5A4D; /* corail soleil, signature */ --accent-2: #FF8A3D; /* mangue */ --accent-3: #FFC93C; /* jaune soleil */ --accent-grad: linear-gradient(135deg, #FFC93C 0%, #FF8A3D 45%, #FF5A4D 100%); /* Lot A audit : stop foncé avancé à 52% → zone du label CTA ≥3:1 (avant ~2:1) · mêmes couleurs, ANNONCÉ */ --accent-soft: #FFE6DC; --accent-ink: #C23A2D; /* Lot A2 : corail FONCÉ réservé au TEXTE sur fond pâle (≈4.4:1) · le corail vif #FF5A4D reste pour fonds/icônes/dégradés */ --teal: #14C2B8; --teal-2: #22D3C5; /* turquoise mer */ --retro-teal:#0E9E96; --gold: #FFB52E; --ink: #39203A; /* prune chaud (titres) */ --ink-warm: #44264A; --text: #5B4455; --muted: #7F6878; /* Lot A : muted jour 2.6→4.6:1, même famille prune (avant #AC93A3) · ANNONCÉ */ --ok: #11B5A0; --ok-ink: #1E7A5A; --danger: #F0384E; /* Lot A : --ok-ink = teal sobre pour le TEXTE (4.9:1), --ok reste pour fonds/icônes */ --line: #F6E3D6; --radius: 22px; --radius-sm: 14px; --radius-lg: 28px; /* P12 (DA officielle, demande Maxime) : ombres DÉ-ROUGIES · le corail sous chaque carte donnait un « halo rouge partout » ; brun chaud neutre = la chaleur sans le rouge. */ --shadow: 0 16px 38px rgba(45,38,52,.10), 0 3px 10px rgba(40,25,35,.05); --shadow-sm: 0 8px 18px rgba(45,38,52,.08); --shadow-pop:0 22px 50px rgba(40,34,46,.22); --sunset-grad: linear-gradient(150deg, #FFC93C 0%, #FF7A3D 38%, #FF4F6D 72%, #B25CC9 100%); --ring: 0 0 0 4px rgba(255,90,77,.16); /* Lot C : aligné sur le plafond doctrine .16 */ } /* #8 + bug fond admin : le body (degrade) et l app-shell (#FFF7EE) avaient une base DIFFERENTE -> jointure « scindee en couleurs distinctes » la ou le contenu s arrete (page longue / rebond). On aligne les DEUX sur la meme couleur de base par theme (var(--bg)) ; le halo radial reste en decoration par-dessus. Fond uniforme partout (login Pro, admin, etc.). */ body { background: var(--bg); color: var(--text); } /* #3+#4 : le halo chaud passe sur un CALQUE FIXE (#bgFx) derrière tout, plus sur l'app-shell qui défile → fini le « changement de couleur de fond » au scroll / au clic premium-admin, et fond de login cohérent. App-shell transparent (le calque porte le fond). Garde la chaleur DA (jour) et la richesse (nuit) sans uniformiser ni laguer (calque composité fixe). */ .app-shell { background: transparent !important; } /* v688 (Maxime « la tache est toujours là + header trop foncé vs l'arrière-plan ») : le halo radial ÉCLAIRCISSAIT le milieu du fond → le header (plat) paraissait plus sombre + bord visible = « tache ». Décision : fond STRICTEMENT UNIFORME var(--bg). Status-bar = header = contenu = exactement la même couleur, dans tous les modes. Plus de halo, plus de tache, plus de header « trop foncé ». */ #bgFx { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); } /* v688 : le FOND DU BODY portait AUSSI un dégradé (--bg-grad le jour, un radial corail→magenta→prune la nuit l.~3181) = la VRAIE source de la « tache » (le #bgFx ne le couvrait pas toujours, ancêtre transformé). On force le fond du body STRICTEMENT plat var(--bg) dans tous les thèmes → uniforme. */ body, body.theme-dusk, body.theme-winter, body.theme-tropic, body.theme-winter.theme-dusk, body.theme-tropic.theme-dusk { background: var(--bg) !important; } /* P14 (DA officielle, annoncée) : le halo rosé-orangé du haut du mode nuit est remplacé par une lueur VIOLETTE discrète → mode nuit homogène de haut en bas (plus de « fond rosé »). */ body.theme-dusk #bgFx { background: var(--bg); } /* v688 : fond uniforme (halo violet supprimé = fini la tache nuit) */ h1, h2, h3 { color: var(--ink); } .topbar { background: linear-gradient(var(--bg) 62%, rgba(255,244,230,0)); border-bottom: 0; } /* 21/06 (Maxime : « je n'en veux plus du tout, faut que ce soit propre ») : AUCUNE ombre sur le logo (l'ombre grise rgba(45,38,52,.16) faisait un halo/case gris ; même en corail il en restait un soupçon). → box-shadow none = icône orange nette posée sur la page, zéro halo. */ .brand .mark { background: var(--accent-grad); box-shadow: none !important; } .section-head a { color: var(--retro-teal); } /* Cartes chaleureuses */ .card { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: var(--radius); box-shadow: var(--shadow) !important; } .post, .pf-section { background: var(--card) !important; border-color: var(--line) !important; } .feed-card, .pcell, .pprompt, .stat-box, .dstat, .reco { background: var(--cream) !important; border: 1px solid var(--line) !important; } .post { background: var(--card) !important; } .post-body { background: var(--cream) !important; border-color: var(--line) !important; } .post-head .ph-name { color: var(--ink); } /* Boutons vifs + lueur colorée */ .btn-primary { background: var(--accent-grad) !important; color: #fff; box-shadow: 0 8px 18px rgba(40,34,46,.20) !important; } /* P12 : LE halo rouge des boutons (couche !important) dé-rougi */ .btn-primary::before, .btn-danger::before { display: none !important; } .btn-primary:hover { transform: translateY(-2px); filter: saturate(1.05); } .btn-accent { background: var(--accent-soft); color: var(--accent-ink, var(--accent)); } /* Lot A2 : encre foncée sur fond corail pâle (2.58 → ≈4.2:1) */ .btn-ghost { background: #fff; border: 1.5px solid var(--line); color: var(--ink); } .btn-danger { background: linear-gradient(135deg,#FF6A6A,#F0384E) !important; color: #fff; box-shadow: 0 12px 26px rgba(45,38,52,.24) !important; } /* Lot C : ombre dé-rougie → gris chaud (le bouton reste rouge par son fond) */ input, textarea, select, .search input { background: #fff !important; border: 1.5px solid var(--line) !important; color: var(--text); } input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; box-shadow: var(--ring); } /* Pastilles & vignettes colorées */ .chip { background: var(--cream); border: 1px solid var(--line); color: var(--text); font-weight: 600; } .chip.active { background: var(--accent-grad) !important; color: #fff !important; border-color: transparent; } .badge.ok { background: rgba(255,177,60,.16); color: #8A5800; border-color: rgba(255,177,60,.45); } .tile, .gcard { background: var(--card) !important; border: 1px solid var(--line) !important; } /* Mode nuit : contour NEUTRE (le --line chaud créait un liseré orange bizarre autour des tuiles) */ body.theme-dusk .tile, body.theme-dusk .gcard { border-color: rgba(255,255,255,.09) !important; } .thumb { background: var(--accent-grad); color: #fff; background-repeat: no-repeat; background-size: cover; overflow: hidden; } /* Retour Maxime (bis) : les couleurs de BASE elles-mêmes passent dans la DA « émaillée » SunMates (mêmes familles bijou que les pastilles de Jeux) · fini le néon bonbon bleu-ciel/violet-flashy/rose-barbie, MÊME EN MODE JOUR. La couche « palette malléable » (fin de feuille) les décline ensuite en nuit / hiver / tropiques. */ .thumb.green { --c1:#2BC4A8; --c2:#128F7C; } /* turquoise bijou (zéro vert criard) */ .thumb.blue { --c1:#5E74E8; --c2:#3641B8; } /* bleu-indigo nuit (famille classement) */ .thumb.purp { --c1:#9B7BFF; --c2:#6638D6; } /* violet bijou (famille jeux) */ .thumb.coral { --c1:#FF9A5C; --c2:#E8631F; } /* corail braise (famille solo) */ .thumb.lime { --c1:#FFC93C; --c2:#D98414; } /* ambre doré */ .thumb.indigo{ --c1:#8A5CFF; --c2:#5028B0; } /* indigo crépuscule (famille couronne) */ .thumb.rose { --c1:#FF6FA5; --c2:#D63A78; } /* framboise (famille coupons) */ .thumb.gold { --c1:#FFC93C; --c2:#E8961F; } /* or franc */ .thumb.teal { --c1:#4ED8B8; --c2:#149E8C; } /* lagon émaillé */ .thumb.red { --c1:#FF5A4D; --c2:#C9281F; } /* corail-rouge d'alerte */ /* v570 (retour Maxime) : RADIANT HORIZON COHÉRENT POUR TOUS. Les familles ne portent plus des couleurs froides distinctes (vert/teal/bleu) « qui ne collent pas à la DA » : TOUTES les tuiles suivent le dégradé-accent du preset courant (--accent-grad) → corail/rosé en RH, et se ré-teintent automatiquement en nuit/hiver/tropiques + en admin. Cohésion totale. */ /* v570 (retour Maxime) : RADIANT HORIZON COHÉRENT POUR TOUS. Toutes les tuiles suivent le dégradé-accent. */ .thumb.green, .thumb.blue, .thumb.purp, .thumb.coral, .thumb.lime, .thumb.indigo, .thumb.rose, .thumb.gold, .thumb.teal, .thumb.red { background: var(--accent-grad) !important; box-shadow: 0 4px 12px rgba(40,18,8,.12) !important; } body.theme-dusk .thumb.green, body.theme-dusk .thumb.blue, body.theme-dusk .thumb.purp, body.theme-dusk .thumb.coral, body.theme-dusk .thumb.lime, body.theme-dusk .thumb.indigo, body.theme-dusk .thumb.rose, body.theme-dusk .thumb.gold, body.theme-dusk .thumb.teal, body.theme-dusk .thumb.red { box-shadow: 0 4px 12px rgba(0,0,0,.26) !important; } /* Navigation : icônes vives */ .bottom-nav { background: #fff7f2; box-shadow: 0 -8px 28px rgba(45,38,52,.10); } .bottom-nav button { color: var(--muted); } .bottom-nav button.active { color: var(--accent-ink, var(--accent)); } .bottom-nav button.active::before { background: var(--accent); } /* Héros & ambiances photo (jeux / quêtes) */ .auth-hero, .feature { background: var(--sunset-grad) !important; } .gcard .ghead { position: relative; background-size: cover !important; background-position: center !important; min-height: 92px; } .gcard .ghead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 100%); } .gcard .ghead > * { position: relative; z-index: 1; } .gcard .grate { background: rgba(0,0,0,.35); color: #fff; padding: .1rem .45rem; border-radius: 999px; backdrop-filter: blur(4px); } .detail-hero { background-size: cover !important; background-position: center !important; } .detail-hero .dh-body { background: linear-gradient(transparent, rgba(0,0,0,.62)) !important; } /* Photo cohérente sur chaque lieu sûr (check-in) */ .place-photo { height: 132px; background-size: cover; background-position: center; border-radius: 14px; margin-bottom: .6rem; background-color: var(--cream); } /* Écran de connexion réchauffé : photo de vacances + dégradé soleil */ /* #8 : image Unsplash externe (non cachee, peu fiable) -> Picsum determinste (cache par le SW, comme la nuit) + degrade plus opaque + base solide sunset : le fond ne « deraille » plus meme si l image tarde/echoue (l onglet Pro plus haut rendait le defaut visible). */ .auth-hero { background: linear-gradient(150deg, rgba(255,201,60,.82), rgba(255,79,109,.88) 60%, rgba(178,92,201,.9)), url('https://picsum.photos/seed/sunmates-day/820/740') center/cover, var(--sunset-grad) !important; } /* Disque clair derrière le soleil pour le faire ressortir */ .auth-hero .logo-badge { background: rgba(255,255,255,.94) !important; box-shadow: 0 12px 30px rgba(0,0,0,.18), 0 0 0 6px rgba(255,255,255,.25) !important; display: grid; place-items: center; } /* Peps sur la navigation : icône active dans une pastille dégradée vive */ .bottom-nav button.active svg { background: var(--accent-grad); stroke: #fff; padding: 6px; border-radius: 14px; width: 26px; height: 26px; box-shadow: 0 6px 14px rgba(45,38,52,.16); } .bottom-nav button.active { font-weight: 700; } .bottom-nav button.active::before { display: none; } /* on garde uniquement la pastille */ /* =================== DARK, « NUIT TROPICALE » =================== */ body.theme-dusk { --bg: #190E2E; --card: #271641; --paper: #271641; --cream: #2E1B4C; --accent: #FF6A5D; --accent-2: #FF9248; --accent-3: #FFD15C; --accent-soft: rgba(255,106,93,.18); --accent-ink: var(--accent); /* Lot A2 : nuit = corail clair déjà lisible sur fond sombre (pas d'encre foncée) */ --accent-grad: linear-gradient(135deg, #FFD15C 0%, #FF9248 45%, #FF6A5D 100%); /* Lot A : idem jour */ --teal: #2BE0D0; --retro-teal: #36E0CE; --gold: #FFD15C; --ink: #FCEFE9; --ink-warm: #FFF3EC; --text: #E6D7EC; --muted: #A98FC0; --ok: #2BE0B0; --ok-ink: var(--ok); --danger: #FF6A78; --line: rgba(255,255,255,.10); color: var(--text); background: radial-gradient(120% 70% at 50% -6%, #FF7A3D40 0%, #6A2A6E 24%, #34164F 52%, #190E2E 100%); } body.theme-dusk .app-shell { background: transparent !important; } /* #3+#4 : halo nuit porté par #bgFx (fixe) */ body.theme-dusk .card, body.theme-dusk .post, body.theme-dusk .pf-section { background: linear-gradient(180deg,#2A1846,#22123A) !important; border-color: rgba(255,255,255,.08) !important; } body.theme-dusk input, body.theme-dusk textarea, body.theme-dusk select, body.theme-dusk .search input { background: #2E1B4C !important; color: #f3e9f3; } body.theme-dusk .feed-card, body.theme-dusk .pcell, body.theme-dusk .pprompt, body.theme-dusk .stat-box, body.theme-dusk .dstat, body.theme-dusk .tile, body.theme-dusk .gcard, body.theme-dusk .chip, body.theme-dusk .mseg { background: #2E1B4C !important; } /* v730 : .coupon/.reco retirés (déjà aplatis transparents) */ /* P2.8 : FIL homogène en nuit · les posts rejoignent la MÊME famille violette que les cartes (avant : brun délavé #241b35 posé à côté de cartes #2A1846 = patchwork), un cran plus clair que la tuile principale (le composer, dégradé sombre) pour bien les distinguer. */ body.theme-dusk:not(.theme-winter):not(.theme-tropic) .fpost { background: #2E1B4C; border-color: rgba(255,255,255,.10); } body.theme-dusk:not(.theme-winter):not(.theme-tropic) .fpost-empty { background: #271642; border-color: rgba(255,255,255,.14); } body.theme-dusk .bottom-nav { background: #190e2e; } body.theme-dusk .topbar { background: linear-gradient(#190e2e 62%, rgba(25,14,46,0)); border-bottom: 0; } body.theme-dusk .bubble.them { background: #2E1B4C; color: #f3e9f3; } body.theme-dusk .iconbtn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); } body.theme-dusk .notif-card, body.theme-dusk .picker-card { background: #22123A; } body.theme-dusk .nbadge { background: color-mix(in srgb, var(--accent) 65%, var(--bg)); } /* Lot A : en nuit l'encre est claire → on assombrit vers le fond du mode (3.8-5.4:1 dans les 3 nuits) */ /* Contraste : bouton fantôme (ex. « Déconnexion ») bien lisible en sombre */ body.theme-dusk .btn-ghost { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.2) !important; color: var(--ink) !important; } body.theme-dusk .badge.no { background: rgba(255,255,255,.08); color: var(--muted); border-color: rgba(255,255,255,.16); } body.theme-dusk label, body.theme-dusk .muted { color: var(--muted); } /* Bouton « Retour » : même teinte que les autres actions (corail) */ .backbtn { color: var(--accent-ink, var(--accent)) !important; background: transparent; font-weight: 700; } body.theme-dusk .backbtn { color: var(--accent-ink, var(--accent)) !important; } /* Boutons secondaires uniformes en sombre */ body.theme-dusk .btn-accent { background: rgba(255,106,93,.18) !important; color: var(--accent-2) !important; } body.theme-dusk .section-head a { color: var(--accent-2); } /* Fond des posts du feed en sombre (fini le kaki) */ body.theme-dusk .post-body { background: rgba(255,255,255,.06) !important; } /* Logo : soleil le jour, lune la nuit */ /* Spécificité renforcée (svg.logo-*) : sinon « .brand .mark svg{display:block} » (l.208) gagnait et affichait les DEUX soleils (jour+nuit) superposés → le reflet/horizon nuit débordait du carré. */ .brand .mark svg.logo-night { display: none; } body.theme-dusk .brand .mark svg.logo-day { display: none; } body.theme-dusk .brand .mark svg.logo-night { display: block; } /* Logos SAISON : cristal en hiver, palmier-lagon en tropiques · et leurs VRAIES variantes NUIT (croissant de lune + flocon / palmier sous la lune), retour Maxime. */ .brand .mark svg.logo-winter, .brand .mark svg.logo-tropic, .brand .mark svg.logo-winter-n, .brand .mark svg.logo-tropic-n { display: none; } body.theme-winter .brand .mark svg.logo-day, body.theme-winter .brand .mark svg.logo-night { display: none; } body.theme-winter .brand .mark svg.logo-winter { display: block; } body.theme-tropic .brand .mark svg.logo-day, body.theme-tropic .brand .mark svg.logo-night { display: none; } body.theme-tropic .brand .mark svg.logo-tropic { display: block; } body.theme-winter .brand .mark { background: linear-gradient(135deg, #6FB4E8, #3A8FD9); } body.theme-tropic .brand .mark { background: linear-gradient(135deg, #36C495, #0FA37C); } body.theme-dusk .brand .mark { background: linear-gradient(150deg, #7A2E5E, #C2502E) !important; } /* coucher de soleil sombre */ body.theme-winter.theme-dusk .brand .mark svg.logo-winter { display: none; } body.theme-winter.theme-dusk .brand .mark svg.logo-winter-n { display: block; } body.theme-winter.theme-dusk .brand .mark { background: linear-gradient(150deg, #1B3A5E, #0E2740) !important; } /* nuit polaire */ body.theme-tropic.theme-dusk .brand .mark svg.logo-tropic { display: none; } body.theme-tropic.theme-dusk .brand .mark svg.logo-tropic-n { display: block; } body.theme-tropic.theme-dusk .brand .mark { background: linear-gradient(150deg, #0E4D3C, #07291F) !important; } /* nuit de jungle */ /* Hero de connexion : ambiance NUIT en mode sombre */ body.theme-dusk .auth-hero { background: linear-gradient(160deg, rgba(58,42,110,.74), rgba(40,24,78,.82) 58%, rgba(18,26,86,.86)), url('https://picsum.photos/seed/sunmates-night/820/740') center/cover !important; } body.theme-dusk .auth-hero .logo-badge { background: rgba(20,16,40,.88) !important; box-shadow: 0 12px 30px rgba(0,0,0,.4), 0 0 0 6px rgba(255,255,255,.12) !important; } /* Modale d'info (badge…) centrée à l'écran, pas en bas */ #pickerOverlay.info { align-items: center; } #pickerOverlay.info .picker-card { border-radius: 22px; max-width: 380px; margin: 0 1rem; } /* Œil pour révéler le mot de passe */ .pw-eye { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; padding: .3rem; line-height: 1; color: var(--muted); min-width: 40px; min-height: 40px; display: grid; place-items: center; } .pw-eye svg { display: block; } .pw-eye:hover { color: var(--accent-ink, var(--accent)); } /* Aperçu « vue Gratuit » (admin) : les fonctions Gold se grisent */ body.gold-free .gold-feature { opacity: .5; filter: grayscale(.4); pointer-events: none; } .gold-only-note { display: none; } body.gold-free .gold-only-note { display: block; background: rgba(255,201,60,.18); border: 1px dashed #C98A1E; color: #8a5a00; border-radius: 14px; padding: .5rem .7rem; font-size: .8rem; margin: .5rem 0; text-align: center; font-weight: 600; } /* Sécurité : jamais monnayée. Note rassurante « inclus pour tous », ton DA corail. */ .safe-free-note { background: var(--accent-soft); border: 1px solid rgba(255,90,77,.22); color: var(--accent-ink, var(--accent)); border-radius: 14px; padding: .5rem .7rem; font-size: .8rem; margin: .5rem 0; text-align: center; font-weight: 700; } body.theme-dusk .safe-free-note { background: rgba(255,90,77,.14); color: #ffb0a6; border-color: rgba(255,90,77,.3); } /* FAQ premiers secours / voyage : accordéon sobre dans la DA */ .faq-secu details { border: 1px solid var(--line); border-radius: 14px; padding: .55rem .8rem; margin-bottom: .5rem; background: var(--cream); } .faq-secu summary { cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; font-size: .9rem; } .faq-secu summary::-webkit-details-marker { display: none; } .faq-secu details[open] summary { margin-bottom: .4rem; color: var(--accent-ink, var(--accent)); } .faq-secu p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--text); } /* Numéros d'urgence par pays */ /* Fluidité : fondu doux à chaque changement d'onglet / de vue + défilement à inertie */ @keyframes viewIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } .tab-panel:not(.hidden), .mates-view:not(.hidden), .jeux-view:not(.hidden), .secu-view:not(.hidden), .prof-seg:not(.hidden) { animation: viewIn .26s cubic-bezier(.2,.8,.3,1); } @keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } } .tab-panel[data-panel="accueil"]:not(.hidden) { animation: fadeOnly .26s ease; } /* pas de transform : ne casse pas la carte Leaflet */ main { -webkit-overflow-scrolling: touch; } @media (prefers-reduced-motion: reduce) { .tab-panel, .mates-view, .jeux-view, .secu-view, .prof-seg { animation: none !important; } } /* Filtres avancés : plus compacts (digestibles) sans retirer de catégories */ #advFilters label { font-size: .68rem; font-weight: 700; color: var(--muted); margin: .35rem 0 .1rem; } #advFilters select, #advFilters input { padding: .38rem .45rem; font-size: .8rem; } #advFilters .row { gap: .5rem; margin-top: 0; } .num-row { padding: .55rem 0; border-bottom: 1px solid var(--line); } .num-row.num-here { background: linear-gradient(135deg, rgba(255,201,60,.14), rgba(255,138,61,.1)); border: 1px solid rgba(201,138,30,.22); border-radius: 14px; padding: .55rem .7rem; margin-bottom: .4rem; } .num-badge { margin-left: auto; font-size: .68rem; font-weight: 800; color: #8A5800; background: rgba(255,201,60,.3); border-radius: 999px; padding: .15rem .5rem; } .num-row:last-child { border-bottom: 0; } .num-head { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: var(--ink); margin-bottom: .4rem; } .num-flag { font-size: 1.2rem; } .num-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .num-chip { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: 999px; padding: .25rem .6rem; } .num-chip span { font-size: .72rem; color: var(--muted); font-weight: 600; } .num-chip b { color: #e11d2e; font-size: .92rem; } body.theme-dusk .num-chip { background: rgba(239,68,68,.16); } body.theme-dusk .num-chip b { color: #ff9b9b; } /* Contacts d'urgence (ICE) */ .ice-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; } .ice-call { flex: 1; display: flex; align-items: center; gap: .6rem; text-decoration: none; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: .55rem .7rem; } .ice-ic { width: 36px; height: 36px; border-radius: 14px; background: rgba(23,169,155,.14); display: grid; place-items: center; font-size: 17px; } .ice-info { min-width: 0; } .ice-name { font-weight: 700; color: var(--ink); } .ice-num { font-size: .8rem; } .ice-del { flex-shrink: 0; background: none; border: 0; color: var(--muted); font-size: 1rem; cursor: pointer; padding: .4rem .5rem; } .ice-flbl { display: block; font-size: .72rem; font-weight: 800; color: var(--muted); margin: .55rem 0 .25rem; text-transform: uppercase; letter-spacing: .04em; } .ice-fin { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 14px; padding: .62rem .72rem; font-size: .95rem; color: var(--ink); background: var(--card); font-family: inherit; } .ice-fin:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } body.theme-dusk .ice-fin { background: var(--dcard2,#241b35); color: #f3e9f3; border-color: rgba(255,255,255,.1); } /* Signal lumineux d'aide (pulsation LENTE 1.6s = sans danger photosensible) */ .signal-screen { position: fixed; inset: 0; z-index: var(--z-signal); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: signalPulse 1.6s ease-in-out infinite; } .signal-screen.hidden { display: none; } @keyframes signalPulse { 0%, 100% { background: #fff; } 50% { background: #FFD15C; } } .signal-inner { text-align: center; color: #111; padding: 1rem; } .signal-sos { font-size: 5rem; font-weight: 900; letter-spacing: .18em; color: #e11d2e; line-height: 1; } .signal-txt { font-size: 1.5rem; font-weight: 900; margin-top: .6rem; color: #111; } .signal-sub { font-size: .88rem; color: #333; margin-top: .8rem; max-width: 280px; margin-left: auto; margin-right: auto; } .signal-close { position: absolute; bottom: calc(1.4rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: #111; color: #fff; border: 0; border-radius: 999px; padding: .7rem 1.4rem; font-weight: 800; cursor: pointer; min-height: 44px; min-width: 44px; } #goldPreviewBanner { display: none; } body.gold-free #goldPreviewBanner { display: block; background: linear-gradient(135deg,#FFD15C,#E89B2B); color: #5a3d00; text-align: center; font-weight: 700; font-size: .8rem; padding: .5rem; } /* Exclus Gold (lieu / quête), lisibles en clair ET en sombre */ .gold-place { background: transparent !important; border: 0 !important; } /* Tuile « à venir » (Gold) grisée et non cliquable */ /* « Bientôt dispo » : volontairement grisé + non cliquable (fonction à venir) */ .tile.soon { opacity: .5; cursor: default; position: relative; filter: grayscale(.5); } .tile.soon:hover { transform: none; box-shadow: none; } .tile.soon .thumb { background: linear-gradient(135deg,#d9cdb8,#b3a079) !important; } .tile.soon .t-meta { color: var(--accent-ink, var(--accent)); font-weight: 700; } /* ===================== SÉLECTEUR DA CUSTOM ===================== Chaque