/* Accueil — v2 : logo visible dès l'arrivée, cercles photo, bouton « Préparez votre venue ».
   (Fichier séparé : app.css est mis en cache 30 jours par Nginx.) */

/* ---- Téléphone : logo un peu plus gros au départ ---- */
.hero-logo { left: 22%; top: 20%; width: 56%; }

/* ---- Tablette ---- */
@media (min-width: 600px) {
    .hero-logo { left: 31%; top: 20%; width: 38%; }
}

/* ---- Ordinateur : le logo ("La Plage — Club privé spa") tient toujours dans le premier écran ---- */
@media (min-width: 900px) {
    .hero { --hero-h: min(67.3vw, max(100vh, 560px)); height: var(--hero-h); padding: 0; }
    .hero .px-layer { background-position: center 60%; }
    /* La grande feuille ne déborde plus que d'un liseré sur la section suivante : le texte « Club privé SPA » reste lisible */
    .hero-leaf { top: calc(var(--hero-h) * .5977); clip-path: inset(0 0 calc(100% - (var(--hero-h) * .4023 + 2vw)) 0); }
    .hero-logo { left: 50%; transform: translateX(-50%); width: auto; height: calc(var(--hero-h) * .62); top: calc(var(--hero-h) * .25); }
}

/* ---- Cercles « espaces » avec photo de fond ---- */
.spa-circle { overflow: hidden; text-decoration: none; }
.spa-circle.has-photo {
    background-color: #32392B; background-size: cover; background-position: center;
    box-shadow: inset 0 0 0 2px rgba(196,152,73,.55);
    text-shadow: 0 1px 8px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
    color: #f4efe0;
}
a.spa-circle { transition: filter .2s ease, transform .2s ease; }
a.spa-circle:hover, a.spa-circle:focus-visible { filter: brightness(1.15); transform: scale(1.03); }

/* ---- Dress Code : bouton « Préparez votre venue » ---- */
.dresscode-cta-wrap { margin: 1.6rem 0 0; text-align: center; }
.dresscode-cta {
    display: inline-block; padding: 1rem 2.2rem; background: #1E2017; color: #E9D7A6;
    border: 1px solid #C49849; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
    letter-spacing: .12em; text-transform: uppercase; text-decoration: none; min-height: 48px;
    transition: background .2s ease, color .2s ease;
}
.dresscode-cta:hover, .dresscode-cta:focus-visible { background: #C49849; color: #1E2017; }
@media (min-width: 900px) {
    .dresscode-cta-wrap { position: absolute; left: 22.4%; width: 62.6%; top: 76%; margin: 0; }
    .dresscode-cta { font-size: calc(var(--u) * 22); padding: calc(var(--u) * 20) calc(var(--u) * 52); }
}

/* ---- Menu à droite (même règles que nav-dropdown.css : filet de sécurité pour l'accueil) ---- */
@media (min-width: 900px) {
    .site-header--overlay .site-nav { grid-template-columns: auto 1fr; }
    .site-header--overlay .nav-links { grid-column: 2; justify-self: end; justify-content: flex-end; }
}

/* ---- Flèche dorée « faire défiler » (mobile uniquement) : disparaît dès que l'on descend ---- */
.scroll-hint {
    display: none; position: fixed; left: 50%; z-index: 20; width: 64px; height: 64px; margin-left: -32px;
    bottom: calc(1.3rem + env(safe-area-inset-bottom, 0px));
    color: #C49849; opacity: 1; transition: opacity .35s ease, visibility .35s;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.7));
    animation: scroll-hint-bounce 1.6s ease-in-out infinite;
}
.scroll-hint svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.scroll-hint.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 899px) { .scroll-hint { display: block; } }
@keyframes scroll-hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint { animation: none; } }