/* ========================================================= BASE (évite bandes bizarres et scroll horizontal) ========================================================= */ body.home{ margin:0; padding:0; background:#000; overflow-x:hidden; } /* ========================================================= HERO (plein écran, pas de scroll) ========================================================= */ .hero{ position: relative; /* Mobile/tablette: 100vh ment parfois, on sécurise */ height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; color: white; /* ✅ IMPORTANT: évite que le bg parte "sous le body" */ isolation: isolate; } /* ========================================================= BG saisons + jour/nuit (piloté par ) - JS pose: html.is-day / html.is-night - JS pose: html[data-season="spring|summer|autumn|winter"] - CSS choisit les URLs via variables ========================================================= */ /* Fallback (si JS absent): printemps jour */ :root{ --bg-landscape-day: url("/assets/images/bg-spring-day-land.webp"); --bg-landscape-night: url("/assets/images/bg-spring-night-land.webp"); --bg-portrait-day: url("/assets/images/bg-spring-day-port.webp"); --bg-portrait-night: url("/assets/images/bg-spring-night-port.webp"); } /* SPRING */ html[data-season="spring"]{ --bg-landscape-day: url("/assets/images/bg-spring-day-land.webp"); --bg-landscape-night: url("/assets/images/bg-spring-night-land.webp"); --bg-portrait-day: url("/assets/images/bg-spring-day-port.webp"); --bg-portrait-night: url("/assets/images/bg-spring-night-port.webp"); } /* SUMMER */ html[data-season="summer"]{ --bg-landscape-day: url("/assets/images/bg-summer-day-land.webp"); --bg-landscape-night: url("/assets/images/bg-summer-night-land.webp"); --bg-portrait-day: url("/assets/images/bg-summer-day-port.webp"); --bg-portrait-night: url("/assets/images/bg-summer-night-port.webp"); } /* AUTUMN */ html[data-season="autumn"]{ --bg-landscape-day: url("/assets/images/bg-autumn-day-land.webp"); --bg-landscape-night: url("/assets/images/bg-autumn-night-land.webp"); --bg-portrait-day: url("/assets/images/bg-autumn-day-port.webp"); --bg-portrait-night: url("/assets/images/bg-autumn-night-port.webp"); } /* WINTER */ html[data-season="winter"]{ --bg-landscape-day: url("/assets/images/bg-winter-day-land.webp"); --bg-landscape-night: url("/assets/images/bg-winter-night-land.webp"); --bg-portrait-day: url("/assets/images/bg-winter-day-port.webp"); --bg-portrait-night: url("/assets/images/bg-winter-night-port.webp"); } /* Switch jour/nuit -> variables finales utilisées par .hero-bg */ html.is-day{ --bg-landscape: var(--bg-landscape-day); --bg-portrait: var(--bg-portrait-day); } html.is-night{ --bg-landscape: var(--bg-landscape-night); --bg-portrait: var(--bg-portrait-night); } /* ========================================================= BACKGROUND (image entière visible) ========================================================= */ .hero-bg{ position: absolute; inset: 0; /* ✅ ON N’UTILISE PAS -1 */ z-index: 0; /* ⚠️ PAS de "background: none;" */ background-image: var(--bg-landscape); background-repeat: no-repeat; background-position: center center; background-size: cover; background-color: #000; } /* Portrait/tablette/mobile: image portrait */ @media (max-width: 1024px){ .hero-bg{ background-image: var(--bg-portrait); background-size: cover; background-position: center top; background-color: #000; } } @media (max-width: 600px){ .hero-bg{ background-image: var(--bg-portrait); background-size: cover; background-position: center top; background-color: #000; } } @media (max-width: 900px) and (orientation: landscape){ .hero-bg{ background-image: var(--bg-landscape); background-size: cover; background-position: center center; background-color: #000; } } /* ========================================================= MASCOTTES — centrage horizontal STRICT ========================================================= */ .hero-mascots{ position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; gap: 34px; width: max-content; max-width: calc(100vw - 40px); padding: 0; /* ✅ au-dessus du bg */ z-index: 5; } /* Desktop / tablette */ @media (max-width: 900px){ .hero-mascots{ gap: 18px; } .mascot{ width: 220px; } } /* Mobile “standard” (421-600px) : on garde lisible sans exploser */ @media (min-width: 421px) and (max-width: 600px){ .hero-mascots{ gap: 12px; bottom: 28px; /* un poil remonté, mais pas de taille absurde */ } .mascot{ width: 220px; /* au lieu de 300px */ } .mascot .avatar{ max-width: 200px; /* au lieu de 280px */ } } /* ========================================================= MASCOTTE ========================================================= */ .mascot{ position: relative; width: 260px; text-align: center; opacity: 0; transform: translateY(30px) scale(0.98); transition: opacity .8s ease, transform .8s ease; cursor: pointer; pointer-events: auto; --bubble-max: 260px; --bubble-offset-y: -18px; } .hero.scene-ready .mascot{ opacity: 1; transform: translateY(0) scale(1); } .hero.scene-ready .mascot-lunelle{ transition-delay: .05s; } .hero.scene-ready .mascot-archibald{ transition-delay: .15s; } .hero.scene-ready .mascot-gaspard{ transition-delay: .25s; } /* Image mascotte */ .mascot .avatar{ width: 100%; max-width: 240px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 25px 35px rgba(0,0,0,.35)); transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(var(--rot, 0deg)); transition: transform .12s linear; } /* Animations */ .mascot-lunelle{ animation: lunelle-float 6s ease-in-out infinite; } @keyframes lunelle-float{ 0%,100%{ transform: translateY(0) rotate(-1deg); } 50%{ transform: translateY(-12px) rotate(1deg); } } .mascot-archibald{ animation: archibald-breathe 6.5s ease-in-out infinite; } @keyframes archibald-breathe{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } } .mascot-gaspard{ animation: gaspard-bounce 3.8s ease-in-out infinite; } @keyframes gaspard-bounce{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-18px); } } /* Mascotte qui parle */ .mascot.speaking{ z-index: 6; filter: drop-shadow(0 18px 24px rgba(0,0,0,.28)); } .mascot.speaking .avatar{ transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(var(--rot, 0deg)) scale(1.03); } /* ========================================================= BULLES BD ========================================================= */ .mascot-bubble{ position: absolute; left: 50%; bottom: calc(100% + var(--bubble-offset-y)); transform: translateX(-50%); z-index: 7; pointer-events: none; opacity: 0; transform-origin: 50% 100%; transition: opacity .20s ease, transform .20s ease; } .mascot.speaking .mascot-bubble{ opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1); } .mascot-bubble__inner{ position: relative; display: inline-block; width: fit-content; max-width: var(--bubble-max); padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.96); color: #2f241b; box-shadow: 0 16px 30px rgba(0,0,0,.22); border: 2px solid rgba(40,30,20,.25); } .mascot-bubble__text{ font-size: 15px; line-height: 1.3; white-space: normal; word-break: break-word; text-align: left; } .mascot-bubble__inner::after{ content:""; position:absolute; left:50%; bottom:-16px; transform: translateX(-50%); border: 10px solid transparent; border-top-color: rgba(255,255,255,.96); } .mascot-bubble__inner::before{ content:""; position:absolute; left:50%; bottom:-18px; transform: translateX(-50%); border: 11px solid transparent; border-top-color: rgba(40,30,20,.25); } /* petits offsets */ .mascot-lunelle{ --bubble-offset-y: -12px; } .mascot-archibald{ --bubble-offset-y: -14px; } .mascot-gaspard{ --bubble-offset-y: -12px; } /* ========================================================= MOBILE — désactivation des bulles (illisibles) ========================================================= */ @media (max-width: 600px){ .mascot-bubble{ display: none !important; } } /* ========================================================= Accessibilité ========================================================= */ @media (prefers-reduced-motion: reduce){ .mascot, .mascot-lunelle, .mascot-archibald, .mascot-gaspard{ animation: none !important; transition: none !important; } .mascot .avatar, .mascot-bubble{ transition: none !important; } } /* ========================================================= ULTRA-MOBILE (<= 420px) : carrousel swipe pour mascottes ========================================================= */ @media (max-width: 420px){ .hero-mascots{ left: 0; transform: none; width: 100%; max-width: 100%; padding: 0 16px; gap: 14px; justify-content: flex-start; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; /* Firefox */ } .hero-mascots::-webkit-scrollbar{ display:none; } /* WebKit */ .mascot{ flex: 0 0 auto; width: 220px; /* au lieu de 300px */ scroll-snap-align: center; } .mascot .avatar{ max-width: 200px; } } /* Encore plus étroit (<= 360px) */ @media (max-width: 360px){ .hero-mascots{ padding: 0 12px; gap: 12px; } .mascot{ width: 200px; } .mascot .avatar{ max-width: 180px; } .mascot-name{ font-size: 14px; } }