/* ============================================================ GRENIO · Liquid Glass (hybride kraft) Tokens prêts à coller. Map-first uniquement. Règle d'or : le verre = chrome flottant au-dessus de la carte. Jamais de texte de lecture sur surface translucide. ============================================================ */ :root{ /* --- Identité kraft (inchangée) --- */ --gr-kraft: #E8D9B0; --gr-kraft-deep: #C9B583; --gr-ink: #2B241A; --gr-cream: #F6EFDD; /* --- Couleurs catégories (les 8) --- */ --gr-vide-grenier: #E8743B; --gr-brocante: #6B8E7B; --gr-vide-maison: #9B5DE5; --gr-puces: #3A86C8; --gr-marche-noel: #c0392b; --gr-vide-dressing:#e85d8a; --gr-braderie: #4d9cf0; --gr-bourse: #f0a020; /* --- Variables verre : MODE GLOSS (par défaut visuel) --- */ --gr-glass-tint: rgba(255,255,255,.14); --gr-glass-edge: rgba(255,255,255,.55); --gr-glass-blur: 22px; --gr-glass-sat: 175%; } /* MODE GIVRÉ — recommandé par défaut au-dessus de la carte. Ajoute la classe .gr-frosted sur ou . */ .gr-frosted{ --gr-glass-tint: rgba(245,239,221,.62); --gr-glass-edge: rgba(255,255,255,.70); --gr-glass-blur: 30px; --gr-glass-sat: 130%; } /* Accessibilité : si l'OS demande moins de transparence, on force un fond quasi opaque (équivalent du "Tinted" d'Apple). */ @media (prefers-reduced-transparency: reduce){ :root{ --gr-glass-tint: rgba(246,239,221,.92); --gr-glass-blur: 0px; } } /* ============================================================ CLASSE DE BASE : .gr-glass À poser sur tout élément de chrome flottant. ============================================================ */ .gr-glass{ background: var(--gr-glass-tint); -webkit-backdrop-filter: blur(var(--gr-glass-blur)) saturate(var(--gr-glass-sat)); backdrop-filter: blur(var(--gr-glass-blur)) saturate(var(--gr-glass-sat)); border: 1px solid var(--gr-glass-edge); color: var(--gr-ink); position: relative; box-shadow: 0 8px 30px -6px rgba(40,30,10,.35), /* ombre portée douce */ inset 0 1px 1px rgba(255,255,255,.65), /* highlight haut */ inset 0 -10px 24px -16px rgba(255,255,255,.5); /* glow bas */ } /* Reflet spéculaire diagonal — la "signature" liquid glass. */ .gr-glass::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(125deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.18) 100%); } .gr-frosted .gr-glass::after{ opacity:.35; } /* reflet atténué en givré */ /* Fallback navigateurs sans backdrop-filter (vieux Android WebView) */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .gr-glass{ background: rgba(246,239,221,.94); } } /* ============================================================ COMPOSANTS (mappe ces classes sur ton markup existant) ============================================================ */ /* Barre de recherche flottante */ .gr-search{ height:52px; border-radius:26px; display:flex; align-items:center; gap:12px; padding:0 18px; } .gr-search input{ border:none; background:none; outline:none; flex:1; font:inherit; font-size:15px; color:var(--gr-ink); } .gr-search input::placeholder{ color:var(--gr-ink); opacity:.5; } /* Pills de filtre catégories */ .gr-pill{ height:38px; border-radius:19px; padding:0 15px; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer; } .gr-pill .dot{ width:9px; height:9px; border-radius:50%; } .gr-pill.is-active{ background:var(--gr-ink); color:var(--gr-cream); border-color:rgba(255,255,255,.2); } /* FAB (recentrer / géoloc) */ .gr-fab{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; } /* ============================================================ POPUP DÉTAIL ANCRÉE AU MARQUEUR Bulle qui s'ouvre au niveau du pin et porte TOUTES les infos de l'événement (vignette, titre, date, lieu, tags, CTA). Positionne .gr-popup aux coords écran du marqueur : ancrage bas-centre, ouverture vers le haut, la pointe vise le pin. ⚠ IMPORTANT : cette popup porte du TEXTE DE LECTURE. Son fond est donc volontairement KRAFT QUASI-OPAQUE — pas le verre translucide global. On garde l'aspect verre (bord lumineux, reflet, pointe floutée) mais le texte reste lisible sur la carte. NE PAS baisser cette opacité. ============================================================ */ .gr-popup{ position:absolute; transform:translate(-50%,-100%); /* bas-centre = pointe du marqueur */ margin-top:-14px; /* écart au-dessus du pin */ width:288px; max-width:82vw; max-height:60vh; overflow-y:auto; /* cap + scroll interne si contenu long */ border-radius:22px; padding:14px; z-index:6; /* fond renforcé : surcharge volontaire du tint verre global */ background:rgba(246,239,221,.92); } .gr-popup::-webkit-scrollbar{ display:none; } /* La pointe : carré tourné qui prolonge la bulle vers le pin. */ .gr-popup .tail{ position:absolute; left:50%; bottom:-9px; width:18px; height:18px; transform:translateX(-50%) rotate(45deg); background:rgba(246,239,221,.92); border-right:1px solid var(--gr-glass-edge); border-bottom:1px solid var(--gr-glass-edge); } .gr-popup .close{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; background:rgba(43,36,26,.10); color:var(--gr-ink); z-index:2; } /* --- Contenu interne de la popup (carte événement, style v1) --- */ .gr-popup .row{ display:flex; gap:14px; } .gr-popup .thumb{ width:74px; height:74px; border-radius:16px; flex:none; overflow:hidden; background:linear-gradient(135deg,var(--gr-vide-grenier),#f0a878); box-shadow:inset 0 2px 4px rgba(255,255,255,.5); } .gr-popup .thumb img{ width:100%; height:100%; object-fit:cover; } .gr-popup .title{ font-family:'Fraunces',serif; font-weight:600; font-size:18px; line-height:1.15; color:var(--gr-ink); } .gr-popup .meta{ font-size:12.5px; color:var(--gr-ink); opacity:.7; margin-top:4px; line-height:1.5; } .gr-popup .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; } .gr-popup .tag{ font-size:11px; font-weight:700; padding:4px 9px; border-radius:8px; background:rgba(232,116,59,.16); color:var(--gr-vide-grenier); } .gr-popup .tag--green{ background:rgba(107,142,123,.18); color:var(--gr-brocante); } /* CTA primaire : plein encre, JAMAIS en verre */ .gr-popup .cta{ margin-top:14px; height:46px; border-radius:23px; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:14px; color:var(--gr-cream); cursor:pointer; background:linear-gradient(135deg,var(--gr-ink),#473c2a); box-shadow:0 6px 16px -4px rgba(43,36,26,.5),inset 0 1px 1px rgba(255,255,255,.25); } .gr-popup .cta svg{ width:16px; height:16px; } /* Barre de navigation basse */ .gr-nav{ height:62px; border-radius:31px; display:flex; align-items:center; justify-content:space-around; padding:0 6px; } .gr-nav a{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9.5px; font-weight:600; color:var(--gr-ink); text-decoration:none; opacity:.5; } .gr-nav a.is-active{ opacity:1; } .gr-nav a.is-active svg{ color:var(--gr-vide-grenier); } /* ============================================================ MARQUEURS GOUTTE — identité Grenio conservée. Le verre ne s'applique PAS au pin (il doit rester franc et coloré), seulement un reflet interne pour l'accorder au reste. ============================================================ */ .gr-marker{ position:absolute; transform:translate(-50%,-100%); cursor:pointer; filter:drop-shadow(0 6px 8px rgba(40,30,10,.35)); } .gr-marker .pin{ pointer-events:none; width:38px; height:38px; transform:rotate(45deg); border-radius:50% 50% 50% 6px; display:flex; align-items:center; justify-content:center; box-shadow: inset 0 2px 3px rgba(255,255,255,.55), /* reflet liquid */ inset 0 -4px 8px rgba(0,0,0,.12); } .gr-marker .pin > *{ pointer-events:none; transform:rotate(-45deg); } /* redresse l'icône */ /* Couleur du pin par catégorie : .gr-marker--brocante etc. */ .gr-marker--vide-grenier .pin{ background:linear-gradient(135deg,var(--gr-vide-grenier),#f0995f); } .gr-marker--brocante .pin{ background:linear-gradient(135deg,var(--gr-brocante),#8aab98); } .gr-marker--vide-maison .pin{ background:linear-gradient(135deg,var(--gr-vide-maison),#c79bf0); } .gr-marker--puces .pin{ background:linear-gradient(135deg,var(--gr-puces),#67aae0); } .gr-marker--marche-noel .pin{ background:linear-gradient(135deg,var(--gr-marche-noel),#e06050); } .gr-marker--vide-dressing.pin{ background:linear-gradient(135deg,var(--gr-vide-dressing),#f5a0b8); } .gr-marker--braderie .pin{ background:linear-gradient(135deg,var(--gr-braderie),#7bb8f8); } .gr-marker--bourse .pin{ background:linear-gradient(135deg,var(--gr-bourse),#f5c860); } /* Désactive l'absolute + transform hérité dans un DivIcon Leaflet */ .leaflet-div-icon > .gr-marker, .leaflet-div-icon > .gr-cluster, .gr-marker.leaflet-marker, .gr-cluster.leaflet-marker{ position:static; transform:none; } /* Cluster (verre teinté foncé pour contraster sur la carte claire) */ .gr-cluster{ position:absolute; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; color:var(--gr-cream); background:rgba(67,56,42,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:2px solid rgba(255,255,255,.55); box-shadow:0 8px 20px -4px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.2); } /* Fallback for containers where backdrop-filter is broken (Leaflet panes) */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .gr-cluster{ background:rgba(43,36,26,.78); } } .leaflet-marker-pane .gr-cluster{ background:rgba(67,56,42,.88); } /* ============================================================ PERF — à surveiller : backdrop-filter coûte cher. Limite le nombre d'éléments .gr-glass visibles simultanément (idéalement < 6). Évite-le sur des éléments qui s'animent en boucle. ============================================================ */