@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&family=Montserrat:wght@900&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #fff;
    color: #0d0d0d;
}

/*         #hp-nav {
            position: fixed ; top: 0 ; left: 0 ;
            width: 100% ; padding: 24px 48px ;
            display: flex ; justify-content: space-between ; align-items: center ;
            z-index: 999999 ; background: transparent ;
            box-shadow: none ; border: none ; visibility: visible ;
        }
        #hp-nav .logo-text { font-family: 'Reenie Beanie', cursive ; font-size: 34px ; font-weight: bold ; color: #4755f5 ; line-height: 1 ; cursor: pointer ; text-decoration: none ; display: inline-block ; }
        #hp-nav ul { display: flex ; gap: 48px ; list-style: none ; margin: 0 ; padding: 0 ; }
        #hp-nav ul li { margin: 0 ; padding: 0 ; }
        #hp-nav ul a { font-family: 'Reenie Beanie', cursive ; font-size: 28px ; text-decoration: none ; color: #0d0d0d ; display: inline-block ; transition: transform 0.2s ease, color 0.2s ease ; }
        #hp-nav ul a:hover { transform: scale(1.1) rotate(-3deg) ; color: #ff59c7 ; } */

        #hp { display: block ; width: 100% ; overflow-x: hidden ; }

        /* HERO */
        #hp .hero-section { height: 100vh ; display: flex ; flex-direction: column ; justify-content: center ; align-items: center ; position: relative ; z-index: 10 ; background-color: #ffffff ; margin: 0 ; }
        #hp .hero-title { font-family: 'Montserrat', sans-serif ; text-transform: uppercase ; font-size: 11vw ; line-height: 0.82 ; text-align: center ; display: flex ; flex-direction: column ; align-items: center ; user-select: none ; letter-spacing: -0.03em ; }
        #hp .line { display: flex ; align-items: center ; justify-content: center ; gap: 20px ; }
        #hp .line.color-blue { color: #4755f5 ; }
        #hp .line.color-pink { color: #ff59c7 ; }
        #hp .word { display: inline-block ; }
        #hp .flower-container { width: 1em ; height: 1em ; margin: 0 0.2vw ; display: inline-flex ; align-items: center ; justify-content: center ; position: relative ; transform: translateY(-0.08em) ; }
        #hp .flower-logo { width: 150% ; height: 155% ; object-fit: contain ; animation: hp-spin-logo 10s linear infinite ; }
        @keyframes hp-spin-logo { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        #hp .character-bottom-right { position: absolute ; right: 240px ; bottom: 40px ; width: 25vw ; max-width: 400px ; z-index: 20 ; pointer-events: none ; }
        #hp .character-img { width: 100% ; height: auto ; filter: drop-shadow(5px 5px 0px #ff59c7) ; }
        #hp .scroll-hint { position: absolute ; left: 50% ; bottom: 30px ; transform: translateX(-50%) ; font-family: 'Reenie Beanie', cursive ; font-size: 24px ; display: flex ; flex-direction: column ; align-items: center ; gap: 5px ; color: #4755f5 ; z-index: 20 ; cursor: pointer ; text-decoration: none ; }
        #hp .scroll-hint svg { width: 60px ; }

        /* POLES */
        #hp .poles-section {
            padding: 72px 5vw 44px ;
            background-color: #4755f5 ;
            color: white ;
            display: flex ; flex-direction: column ; align-items: center ;
            margin: 0 ;
            position: relative ;
            z-index: 1 ;
            overflow: visible ;
        }
        #hp .poles-title {
            font-family: 'Montserrat', sans-serif ;
            font-size: clamp(4rem, 13vw, 9rem) ;
            width: 100% ; text-align: center ; line-height: 0.95 ;
            color: #ffee58 ; text-shadow: 6px 6px 0px #ff59c7 ;
            letter-spacing: -0.05em ; display: block ;
            margin: 0 ;
        }
        #hp .poles-grid { display: grid ; grid-template-columns: repeat(3, 1fr) ; gap: 28px 32px ; width: 100% ; max-width: 1400px ; margin-top: 36px ; }
        #hp .poles-grid-bottom { display: grid ; grid-template-columns: repeat(2, 1fr) ; gap: 28px 32px ; width: 66% ; max-width: 920px ; margin-top: 28px ; margin-bottom: 0 ; }
        #hp .pole-card { background: white ; border-radius: 18px ; overflow: hidden ; display: flex ; flex-direction: column ; box-shadow: 10px 10px 0px #ff59c7 ; border: 4px solid #0d0d0d ; }
        #hp .pole-img-container { width: 100% ; height: clamp(170px, 24vh, 240px) ; overflow: hidden ; border-bottom: 4px solid #0d0d0d ; position: relative ; }
        #hp .pole-img-container img { width: 100% ; height: 100% ; object-fit: cover ; transition: transform 0.5s ease ; display: block ; }
        #hp .pole-card:hover .pole-img-container img { transform: scale(1.1) ; }
        #hp .pole-info { padding: 18px 20px 22px ; display: flex ; flex-direction: column ; align-items: center ; gap: 10px ; }
        #hp .detail-btn { font-family: 'Reenie Beanie', cursive ; font-size: 25px ; font-weight: bold ; padding: 8px 22px ; background-color: #ffee58 ; border: 3px solid #0d0d0d ; cursor: pointer ; transition: all 0.2s ease ; text-decoration: none ; color: #0d0d0d ; border-radius: 50px ; display: inline-block ; }
        #hp .detail-btn:hover { background-color: #ff59c7 ; color: white ; transform: scale(1.05) ; }

        /* Card badges */
        #hp .pole-cinema-badge {
            position: absolute ; top: 12px ; right: 12px ;
            background: #ffee58 ; color: #0d0d0d ;
            font-family: 'Montserrat', sans-serif ; font-size: 11px ;
            font-weight: 900 ; text-transform: uppercase ; letter-spacing: 1px ;
            padding: 5px 14px ; border-radius: 50px ;
            border: 2px solid #0d0d0d ; z-index: 5 ;
            animation: badge-pulse 2s ease-in-out infinite ;
        }
        #hp .pole-superboom-badge {
            position: absolute ; top: 12px ; right: 12px ;
            background: #ffee58 ; color: #0d0d0d ;
            font-family: 'Montserrat', sans-serif ; font-size: 11px ;
            font-weight: 900 ; text-transform: uppercase ; letter-spacing: 1px ;
            padding: 5px 14px ; border-radius: 50px ;
            border: 2px solid #0d0d0d ; z-index: 5 ;
            animation: badge-pulse 2s ease-in-out infinite ;
            animation-delay: 0.3s ;
        }
        @keyframes badge-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }

        #arrow-bridge {
            display: block ;
            width: 100% ;
            background: #4755f5 ;
            overflow: visible ;
            line-height: 0 ;
            margin: 0 ;
            padding: 0 ;
        }

        /* CONTEST STRIP */
        #hp .spotlight-section {
            background-color: transparent ;
            border: none ;
            margin: -60px 0 ;
            padding: 0 ;
            position: relative ;
            z-index: 20 ;
            overflow: visible ;
        }
        #hp .spotlight-blob-wrap {
            position: relative ;
            width: 100% ;
        }
        #hp .spotlight-blob-svg {
            display: block ;
            position: absolute ;
            top: -60px ; left: 0 ;
            width: 100% ;
            height: calc(100% + 120px) ;
            z-index: 0 ;
            overflow: visible ;
        }
        #hp .spotlight-strip-inner {
            position: relative ;
            z-index: 1 ;
            max-width: 1200px ;
            margin: 0 auto ;
            padding: 80px 5vw ;
            display: flex ;
            align-items: center ;
            justify-content: space-between ;
            gap: 40px ;
        }
        #hp .spotlight-strip-left {
            display: flex ;
            flex-direction: column ;
            gap: 8px ;
            flex: 1 ;
        }
        #hp .spotlight-strip-eyebrow {
            font-family: 'Reenie Beanie', cursive ;
            font-size: 28px ;
            color: #ff59c7 ;
            line-height: 1 ;
        }
        #hp .spotlight-strip-title {
            font-family: 'Montserrat', sans-serif ;
            font-size: clamp(28px, 3.8vw, 52px) ;
            font-weight: 900 ;
            text-transform: uppercase ;
            letter-spacing: -0.04em ;
            color: white ;
            line-height: 0.9 ;
            margin: 0 ;
        }
        #hp .spotlight-strip-desc {
            font-family: 'Reenie Beanie', cursive ;
            font-size: 22px ;
            color: rgba(255,255,255,0.55) ;
            line-height: 1.3 ;
            margin-top: 8px ;
            max-width: 500px ;
        }
        #hp .spotlight-strip-cta {
            font-family: 'Reenie Beanie', cursive ;
            font-size: 30px ;
            color: #ffee58 ;
            text-decoration: none ;
            border-bottom: 2px solid transparent ;
            transition: color 0.2s ease, border-color 0.2s ease ;
            white-space: nowrap ;
            flex-shrink: 0 ;
            display: inline-block ;
        }
        #hp .spotlight-strip-cta:hover { color: #ff59c7 ; border-color: #ff59c7 ; }

        /* EVENTS */
        #hp .events-section { padding: 72px 5vw 80px ; background-color: #ff59c7 ; color: white ; min-height: 0 ; display: flex ; flex-direction: column ; align-items: center ; margin: 0 ; position: relative ; z-index: 1 ; }
        #hp .events-title {
            font-family: 'Montserrat', sans-serif ;
            font-size: clamp(4rem, 13vw, 9rem) ;
            width: 100% ; text-align: center ; margin: 0 0 36px ;
            line-height: 0.95 ; color: #ffee58 ;
            text-shadow: 6px 6px 0px #4755f5 ; letter-spacing: -0.05em ; font-weight: 900 ; display: block ;
        }
        #hp .calendar-container { background: white ; border: 4px solid #0d0d0d ; border-radius: 26px ; padding: 32px 36px ; box-shadow: 12px 12px 0px #4755f5 ; max-width: 1100px ; width: 100% ; color: #0d0d0d ; position: relative ; }
        #hp .calendar-header { display: flex ; justify-content: space-between ; align-items: center ; margin-bottom: 26px ; font-family: 'Montserrat', sans-serif ; font-size: clamp(26px, 3.5vw, 38px) ; text-transform: uppercase ; font-weight: 900 ; }
        #hp .calendar-nav-btn { display: inline-flex ; align-items: center ; justify-content: center ; width: 50px ; height: 50px ; border: 3px solid #0d0d0d ; background: #ffee58 ; border-radius: 12px ; cursor: pointer ; font-size: 24px ; font-weight: bold ; transition: all 0.2s ease ; color: #0d0d0d ; }
        #hp .calendar-nav-btn:hover { background-color: #4755f5 ; color: white ; transform: scale(1.05) ; }
        #hp .calendar-grid { display: grid ; grid-template-columns: repeat(7, 1fr) ; gap: 12px ; }
        #hp .calendar-weekday { text-align: center ; font-family: 'Montserrat', sans-serif ; font-size: 16px ; font-weight: 900 ; color: #4755f5 ; padding-bottom: 10px ; border-bottom: 2px solid #b1b1b1 ; text-transform: uppercase ; }
        #hp .calendar-day { aspect-ratio: 1/1 ; border: 2px solid #eee ; border-radius: 12px ; padding: 10px ; position: relative ; font-family: 'Montserrat', sans-serif ; font-weight: 900 ; font-size: 19px ; transition: all 0.2s ease ; cursor: default ; display: flex ; align-items: flex-start ; justify-content: flex-end ; background: rgba(255,255,255,0.7) ; }
        #hp .calendar-day.has-event { border-color: #4755f5 ; background-color: #f0f3ff ; cursor: pointer ; box-shadow: 4px 4px 0px #4755f5 ; }
        #hp .calendar-day.has-event:hover { transform: scale(1.05) rotate(2deg) ; background-color: #ffee58 ; z-index: 5 ; }
        #hp .calendar-day.not-current-month { opacity: 0.2 ; cursor: default ; }
        #hp .calendar-day-num { font-size: 19px ; color: #0d0d0d ; }
        #hp .event-icon { position: absolute ; bottom: 8px ; right: 8px ; width: 35px ; height: 35px ; display: flex ; align-items: center ; justify-content: center ; font-size: 24px ; background: white ; border: 2px solid #0d0d0d ; border-radius: 50% ; box-shadow: 2px 2px 0px #ff59c7 ; overflow: hidden ; }
        #hp .event-icon img { width: 80% ; height: 80% ; object-fit: contain ; }
        #hp .event-tooltip { position: absolute ; bottom: 110% ; left: 50% ; transform: translateX(-50%) translateY(10px) ; width: 250px ; background: white ; border: 3px solid #0d0d0d ; border-radius: 15px ; padding: 15px ; box-shadow: 8px 8px 0px #ff59c7 ; z-index: 100 ; opacity: 0 ; visibility: hidden ; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) ; pointer-events: none ; text-align: left ; }
        #hp .calendar-day.has-event:hover .event-tooltip { opacity: 1 ; visibility: visible ; transform: translateX(-50%) translateY(0) ; }
        #hp .tooltip-tag { display: inline-block ; padding: 4px 10px ; background: #4755f5 ; color: white ; font-family: 'Montserrat', sans-serif ; font-size: 10px ; text-transform: uppercase ; border-radius: 50px ; margin-bottom: 8px ; font-weight: 900 ; }
        #hp .tooltip-title { font-family: 'Montserrat', sans-serif ; font-size: 16px ; font-weight: 900 ; margin-bottom: 5px ; color: #0d0d0d ; }
        #hp .tooltip-desc { font-family: 'Reenie Beanie', cursive ; font-size: 18px ; line-height: 1.2 ; color: #555 ; }
        #hp .calendar-day-bg { position: absolute ; inset: 0 ; border-radius: 10px ; overflow: hidden ; z-index: 0 ; pointer-events: none ; }
        #hp .calendar-day-bg img { width: 100% ; height: 100% ; object-fit: cover ; display: block ; filter: blur(3px) brightness(0.75) ; transform: scale(1.15) ; transition: filter 0.3s ease ; }
        #hp .calendar-day.has-event:hover .calendar-day-bg img { filter: blur(1px) brightness(0.85) ; }
        #hp .calendar-day-num { position: relative ; z-index: 2 ; }
        #hp .calendar-day.has-bg .calendar-day-num { color: #fff ; text-shadow: 1px 1px 0 #0d0d0d ; }
        #hp .calendar-day-label { position: absolute ; left: 4px ; right: 4px ; bottom: 8px ; z-index: 2 ; font-family: 'Montserrat', sans-serif ; font-weight: 900 ; font-size: clamp(8px, 1.1vw, 13px) ; letter-spacing: 0.5px ; text-transform: uppercase ; text-align: center ; color: #ffee58 ; text-shadow: 1px 1px 0 #0d0d0d ; line-height: 1 ; white-space: nowrap ; overflow: hidden ; text-overflow: ellipsis ; }
        @media (max-width: 480px) { #hp .calendar-day-label { font-size: 6px ; letter-spacing: 0 ; bottom: 4px ; } }

        /* À PROPOS */
        #hp .apropos-section { display: flex ; min-height: 0 ; width: 100% ; border-top: 4px solid #0d0d0d ; margin: 0 ; }
        #hp .apropos-col { flex: 1 ; padding: 64px 5vw ; display: flex ; flex-direction: column ; justify-content: flex-start ; }
        #hp .apropos-col.left { background-color: #ff59c7 ; color: #0d0d0d ; border-right: 2px solid #0d0d0d ; }
        #hp .apropos-col.right { background-color: #ff7043 ; color: white ; border-left: 2px solid #0d0d0d ; }
        #hp .apropos-label { font-family: 'Montserrat', sans-serif ; font-size: 19px ; font-weight: 900 ; text-transform: uppercase ; margin-bottom: 20px ; letter-spacing: 2px ; display: block ; }
        #hp .apropos-title { font-family: 'Montserrat', sans-serif ; font-size: clamp(2rem, 6vw, 4rem) ; font-weight: 900 ; line-height: 0.95 ; text-transform: uppercase ; margin-bottom: 28px ; letter-spacing: -0.05em ; display: block ; }
        #hp .apropos-text { font-family: 'Reenie Beanie', cursive ; font-size: clamp(1.5rem, 3.6vw, 2.35rem) ; line-height: 1.15 ; max-width: 520px ; color: inherit ; display: block ; }
        #hp .contact-list { list-style: none ; font-family: 'Montserrat', sans-serif ; font-size: 32px ; display: flex ; flex-direction: column ; gap: 20px ; font-weight: 900 ; text-transform: uppercase ; padding: 0 ; margin: 0 ; }
        #hp .contact-list a { color: white ; text-decoration: none ; font-family: 'Montserrat', sans-serif ; font-size: 32px ; font-weight: 900 ; transition: opacity 0.2s ; display: inline-block ; }
        #hp .contact-list a:hover { opacity: 0.7 ; }

        /* HAMBURGER BUTTON — hidden on desktop */
/*         #hp-hamburger {
            display: none ;
            flex-direction: column ;
            justify-content: center ;
            gap: 6px ;
            cursor: pointer ;
            background: none ;
            border: none ;
            padding: 6px ;
            border-radius: 8px ;
            z-index: 1000001 ;
        }
        #hp-hamburger span {
            display: block ;
            width: 26px ;
            height: 3px ;
            background: #0d0d0d ;
            border-radius: 3px ;
            transition: background 0.2s ease ;
        }
        #hp-hamburger:hover span { background: #4755f5 ; }
 */
        /* MOBILE MENU PANEL — hidden by default, shown via JS + media query */
/*         #hp-mobile-menu {
            display: none;
            position: fixed ;
            top: 14px ;
            right: 14px ;
            z-index: 1000000 ;
            background: #ffffff ;
            border-radius: 22px ;
            padding: 20px 30px 28px ;
            box-shadow: 0 4px 32px rgba(0,0,0,0.14), 6px 6px 0px #4755f5 ;
            border: 2.5px solid #0d0d0d ;
            min-width: 216px ;
            transform: scale(0.9) translateY(-14px) ;
            opacity: 0 ;
            transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) ;
            pointer-events: none ;
        }
        #hp-mobile-menu.hp-menu-open {
            opacity: 1 ;
            transform: scale(1) translateY(0) ;
            pointer-events: auto ;
        }
        #hp-mobile-menu-close {
            position: absolute ;
            top: 16px ;
            right: 18px ;
            background: none ;
            border: none ;
            font-size: 22px ;
            cursor: pointer ;
            color: #0d0d0d ;
            line-height: 1 ;
            padding: 0 ;
            font-family: 'Montserrat', sans-serif ;
            font-weight: 900 ;
            transition: color 0.2s ease ;
        }
        #hp-mobile-menu-close:hover { color: #ff59c7 ; }
        #hp-mobile-menu nav ul {
            list-style: none ;
            margin: 36px 0 0 ;
            padding: 0 ;
            display: flex ;
            flex-direction: column ;
            gap: 0 ;
        }
        #hp-mobile-menu nav ul li {
            border-bottom: 1.5px solid rgba(0,0,0,0.08) ;
            margin: 0 ;
            padding: 0 ;
        }
        #hp-mobile-menu nav ul li:last-child { border-bottom: none ; }
        #hp-mobile-menu nav ul li a {
            display: flex ;
            align-items: center ;
            gap: 12px ;
            padding: 12px 0 ;
            text-decoration: none ;
            color: #0d0d0d ;
            font-family: 'Montserrat', sans-serif ;
            font-size: 18px ;
            font-weight: 900 ;
            text-transform: uppercase ;
            letter-spacing: -0.03em ;
            transition: color 0.2s ease, transform 0.2s ease ;
            min-height: 44px ;
        }
        #hp-mobile-menu nav ul li a:hover { color: #4755f5 ; transform: translateX(4px) ; }
        #hp-mobile-menu .menu-num {
            font-family: 'Montserrat', sans-serif ;
            font-size: 10px ;
            font-weight: 900 ;
            color: #4755f5 ;
            letter-spacing: 0.5px ;
            flex-shrink: 0 ;
        }
 */
        /* ── TABLET + MOBILE (≤ 900px) ── */
        @media (max-width: 900px) {
            /* NAV */
/*             #hp-nav { padding: 14px max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left)) ; flex-wrap: nowrap ; }
            #hp-nav ul { display: none ; }
            #hp-hamburger { display: flex ; }
            #hp-mobile-menu { display: block; } */
            #hp .hero-title { width: 100% ; display: flex ; flex-direction: column ; align-items: center ; gap: 1rem ; } #hp .hero-title .line { width: 100% ; display: flex ; justify-content: center ; align-items: center ; line-height: 1 ; } #hp .hero-title .word { font-size: clamp(3.2rem, 15vw, 5rem) ; letter-spacing: -0.03em ; display: inline-block ; } /* Short lines bigger for visual balance */ #hp #line-1 .word, #hp #line-2 .word, #hp #line-4 .word { font-size: 8rem ; } /* Middle line slightly reduced because flower adds width */ #hp #line-3 .word { font-size: 6rem ; } /* Flower spacing */ #hp .flower-container { margin: -0.4em ; display: flex ; align-items: center ; } #hp .flower-logo { width: 2em ; height: auto ; display: block ; } /* Hero mobile layout */ #hp .hero-section { margin-top: 4rem ; min-height: 100svh ; justify-content: center ; padding-top: 40px ; } /* Character */ #hp .character-bottom-right { position: relative ; right: auto ; bottom: auto ; align-self: flex-end ; width: min(34vw, 170px) ; max-width: 170px ; margin-top: 14px ; } /* Character image */ #hp .character-img { width: 100% ; height: auto ; display: block ; } /* Scroll hint */ #hp .scroll-hint { bottom: max(16px, env(safe-area-inset-bottom)) ; font-size: 18px ; } #hp .scroll-hint svg { width: 42px ; }


            /* POLES — single column, extra side padding makes cards narrower and cuter */
            #hp .poles-section { padding: 52px max(24px, 8vw) 40px ; }
            #hp .poles-title { font-size: clamp(2.6rem, 14vw, 4.5rem) ; }
            #hp .poles-grid { grid-template-columns: 1fr ; gap: 18px ; width: 100% ; max-width: 320px ; margin-top: 28px ; margin-left: auto ; margin-right: auto ; }
            #hp .poles-grid-bottom { grid-template-columns: 1fr ; gap: 18px ; width: 100% ; max-width: 320px ; margin-top: 18px ; margin-left: auto ; margin-right: auto ; }
            
            #hp .pole-img-container { height: clamp(150px, 46vw, 220px) ; }
            #hp .pole-info { padding: 14px 16px 18px ; }
            #hp .detail-btn { font-size: 22px ; padding: 8px 20px ; min-height: 42px ; display: inline-flex ; align-items: center ; justify-content: center ; }

            /* ARROW BRIDGE — keep it, JS handles narrow layout */
            #arrow-bridge { display: block ; }

            /* SPOTLIGHT — remove desktop overlap on mobile so events section doesn't cover it */
        #hp .spotlight-section {
    margin-left: 0 ;
    margin-right: 0 ;
    padding: 0 5vw ;
}

#hp .spotlight-strip-inner {
    flex-direction: column ;
    align-items: flex-start ;
    gap: 24px ;
    padding-left: 10vw ;
}

#hp .spotlight-strip-title {
    font-size: clamp(2.4rem, 11vw, 3.2rem) ;
    line-height: 0.92 ;
}

#hp .spotlight-strip-desc {
    font-size: 2.2rem ;
    line-height: 1.45 ;
    max-width: 90% ;
}

#hp .spotlight-strip-cta {
    font-size: 2rem ;
    white-space: nowrap ;
    margin-top: 10px ;
}

            /* EVENTS */
            #hp .events-section { padding: 48px max(14px, 4vw) 56px ; }
            #hp .events-title { font-size: clamp(2.6rem, 14vw, 4.5rem) ; }
            #hp .calendar-container { padding: 16px 12px ; border-radius: 18px ; }
            #hp .calendar-header { font-size: clamp(18px, 5vw, 26px) ; flex-wrap: wrap ; gap: 8px ; }
            #hp .calendar-nav-btn { width: 44px ; height: 44px ; font-size: 20px ; }
            #hp .calendar-grid { gap: 6px ; }
            #hp .calendar-weekday { font-size: 11px ; padding-bottom: 6px ; }
            #hp .calendar-day { font-size: 12px ; padding: 6px ; }
            #hp .calendar-day-num { font-size: 12px ; }
            #hp .event-icon { width: 22px ; height: 22px ; font-size: 12px ; }

            /* À PROPOS */
            
            #hp .apropos-col { padding: 28px max(18px, 5vw) 36px ;
            }
            #hp .apropos-col.left {
                margin-left: 4rem;
                border-right: none ; border-bottom: 4px solid #0d0d0d ;
            }
            #hp .apropos-col.right { border-left: 4px solid #0d0d0d ;
            border-bottom: 4px solid #0d0d0d;
            }
            
            
            #hp .apropos-label { margin-bottom: 12px ; }
            #hp .apropos-title { font-size: clamp(1.7rem, 7vw, 2.4rem) ; }
            #hp .contact-list { font-size: 20px ; gap: 10px ; }
            #hp .contact-list a { font-size: 20px ; }
        }

        /* ── SMALL PHONES (≤ 480px) ── */
        @media (max-width: 480px) {
            #hp .hero-title { font-size: clamp(3.2rem, 21vw, 4.8rem) ; }
            #hp .character-bottom-right { width: min(44vw, 170px) ; max-width: 170px ; bottom: 50px ; }
            #hp .poles-section { padding: 48px max(16px, 6vw) 32px ; }
            #hp .pole-img-container { height: clamp(130px, 44vw, 190px) ; }
            #hp .detail-btn { font-size: 20px ; }
            #hp .apropos-title { font-size: clamp(1.5rem, 7vw, 2rem) ; }
            #hp .contact-list { font-size: 17px ; gap: 8px ; }
            #hp .contact-list a { font-size: 17px ; }
        }

/* Native scroll reveals replace the original GSAP animation dependency. */
.js-enabled #hp .hero-title .line,
/* .js-enabled #hp-nav, */
.js-enabled #hero-character,
.js-enabled #hp .pole-card,
.js-enabled #hp .poles-title,
.js-enabled #hp .calendar-container,
.js-enabled #hp .events-title { opacity: 0; transition: opacity 700ms ease, transform 700ms ease; }
.js-enabled #scroll-hint { opacity: 0; transition: opacity 700ms ease; }
.js-enabled #hp .hero-title .line { transform: translateY(24px); }
.js-enabled #hp .pole-card,
.js-enabled #hp .calendar-container { transform: translateY(32px); }
.js-enabled #hp .poles-title,
.js-enabled #hp .events-title { transform: scale(.96); }
.js-enabled #hp .hero-title .line.is-visible,
.js-enabled #hp-nav.is-visible,
.js-enabled #hero-character.is-visible,
.js-enabled #hp .pole-card.is-visible,
.js-enabled #hp .poles-title.is-visible,
.js-enabled #hp .calendar-container.is-visible,
.js-enabled #hp .events-title.is-visible { opacity: 1; transform: none; }
.js-enabled #scroll-hint.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js-enabled #hp .hero-title .line,
  /* .js-enabled #hp-nav, */
  .js-enabled #hero-character,
  .js-enabled #hp .pole-card,
  .js-enabled #hp .poles-title,
  .js-enabled #hp .calendar-container,
  .js-enabled #hp .events-title { opacity: 1; transform: none; transition: none; }
  .js-enabled #scroll-hint { opacity: 1; transition: none; }
  #hp .flower-logo { animation: none; }
  #hp .pole-cinema-badge,
  #hp .pole-superboom-badge { animation: none; }
}