/* Issue #318 — mobile hero composition override. * * Ordre mobile : * 1. Header / sélecteur Jour-Nuit * 2. Titre * 3. Recherche * 4. Carte mondiale + compteur centré * 5. Événement vedette * 6. Navigation mobile * * La zone world-visual occupe tout l'espace libre entre * le bloc de recherche et la bannière de l'événement. */ @media (max-width: 767px) { .stoppin-home-stage .stoppin-hero--live-showcase { min-height: clamp(47rem, calc(100svh - 0.75rem), 52rem); /* * Repères verticaux de la composition mobile. * * --mobile-world-top : * début de la carte, juste sous le bloc de recherche. * * --mobile-event-reserve : * espace réservé à la carte événement + petit interstice. */ --mobile-world-top: 20rem; --mobile-event-reserve: 12.25rem; } .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__content { min-height: clamp(47rem, calc(100svh - 0.75rem), 52rem); /* * On garde suffisamment d'espace pour empêcher * le contenu éditorial d'empiéter sur la carte. */ padding-bottom: 25.4rem; } /* ========================================================= CARTE MONDIALE ========================================================= */ .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-visual { /* * Plus de hauteur fixe. * * La zone commence sous la recherche et se termine * juste au-dessus de la carte événement. */ top: var(--mobile-world-top) !important; right: 0.65rem !important; bottom: var(--mobile-event-reserve) !important; left: 0.65rem !important; width: auto !important; height: auto !important; z-index: 2; display: block; overflow: hidden; border: 0 !important; border-radius: 1.35rem !important; /* * Pas de gros panneau visible derrière la map. * Seulement de légers halos pour l'intégrer au hero. */ background: radial-gradient( ellipse at 22% 58%, rgb(255 108 0 / 0.08), transparent 46% ), radial-gradient( ellipse at 82% 38%, rgb(60 119 255 / 0.08), transparent 48% ) !important; box-shadow: none !important; pointer-events: none; } .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-visual::before { position: absolute; inset: -10% -8%; border-radius: 50%; background: radial-gradient( ellipse at 28% 56%, rgb(255 103 0 / 0.09), transparent 50% ), radial-gradient( ellipse at 80% 40%, rgb(60 121 255 / 0.08), transparent 48% ); filter: blur(18px); content: ""; } /* ========================================================= CARTE SVG ========================================================= */ .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map-shell { /* * La map utilise désormais toute la zone disponible. */ position: absolute; inset: 0 !important; display: grid; place-items: center; width: 100% !important; height: 100% !important; opacity: 0.9; /* * Fondu doux sur les contours, mais beaucoup moins * agressif que l'ancien masque. */ -webkit-mask-image: radial-gradient( ellipse at center, #000 48%, rgb(0 0 0 / 0.92) 64%, rgb(0 0 0 / 0.45) 82%, transparent 100% ); mask-image: radial-gradient( ellipse at center, #000 48%, rgb(0 0 0 / 0.92) 64%, rgb(0 0 0 / 0.45) 82%, transparent 100% ); } .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map { /* * On agrandit légèrement la carte afin qu'elle occupe * réellement toute la surface entre recherche et événement. */ width: 126% !important; max-width: none !important; height: 112% !important; max-height: none !important; object-fit: contain; object-position: center; filter: drop-shadow(0 0 7px rgb(255 108 0 / 0.26)) drop-shadow(0 0 24px rgb(63 122 255 / 0.1)); } /* ========================================================= COMPTEUR ========================================================= */ .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-live-counter { /* * Centre absolu de la zone carte : * horizontalement ET verticalement. */ position: absolute !important; top: 50% !important; right: auto !important; bottom: auto !important; left: 50% !important; width: min(82%, 19rem) !important; margin: 0 !important; transform: translate(-50%, -50%) !important; z-index: 4; /* * Le compteur reste bien lisible tout en laissant * apparaître la carte derrière lui. */ border-color: rgb(255 145 42 / 0.4); background: radial-gradient( ellipse at 20% 0%, rgb(255 111 0 / 0.12), transparent 45% ), linear-gradient( 135deg, rgb(14 11 11 / 0.76), rgb(5 8 15 / 0.72) ); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.09), 0 18px 42px rgb(0 0 0 / 0.34), 0 0 45px rgb(255 105 0 / 0.07); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); } /* Centre également le contenu interne du compteur. */ .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-live-counter__title { text-align: center; } .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-live-counter__digits { justify-content: center; } .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-live-counter__live { justify-content: center; } /* ========================================================= ÉVÉNEMENT VEDETTE ========================================================= */ .stoppin-home-stage .stoppin-hero__event-banner { right: 0.72rem; bottom: 0.72rem; left: 0.72rem; z-index: 4; } } /* ============================================================ PETITS MOBILES ============================================================ */ @media (max-width: 379px) { .stoppin-home-stage .stoppin-hero--live-showcase { /* * Le titre occupe un peu moins de place sur petit écran : * la carte peut commencer légèrement plus haut. */ --mobile-world-top: 18.9rem; --mobile-event-reserve: 12.65rem; min-height: 47rem; } .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__content { min-height: 47rem; padding-bottom: 25.2rem; } .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-live-counter { width: min(84%, 17.5rem) !important; } .stoppin-home-stage .stoppin-hero--live-showcase .stoppin-hero__world-map { width: 132% !important; height: 112% !important; } .stoppin-home-stage .stoppin-hero__event-banner { bottom: 0.72rem; } }