/* ========================================
   LAYOUT — sections, animations, isolation de la carte Leaflet
   Navbar : navbar.css ; pied de page : footer.css ; patrons de page : patterns.css.
   ======================================== */

/* Carte Leaflet : ses calques (z-index 400+) restent confinés sous la navbar sticky */
.leaflet-container {
    isolation: isolate;
}

/* ---------- Sections ---------- */
.section {
    padding: clamp(48px, 7vw, 88px) 0;
}

.section--gray {
    background: var(--color-surface);
}

/* Messages flash en tête de page (base.html, bloc « messages ») */
.messages-site {
    padding-top: 24px;
}

.messages-site .alert:last-child {
    margin-bottom: 0;
}

/* ---------- Animations ---------- */
/* Apparition au défilement (.visible posée par main.js). L'état caché n'existe que si
   le JS tourne : base.html remplace la classe no-js de <html> par js dès le <head>, puis
   la retire au DOMContentLoaded si main.js n'a pas signalé qu'il gère les animations
   (window.Kley.animations). Sans JS (bloqueur), main.js absent ou en erreur, et à
   l'impression, le contenu reste visible. */
.js .fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--delay, 0s);
}

.js .fade-in.visible {
    opacity: 1;
    transform: none;
}

/* Entrée au chargement (pas au défilement). Fin sur `transform: none`, jamais translateY(0) :
   un transform resté posé ferait de l'élément le repère des position: fixed qu'il contient */
.hero-anim {
    opacity: 0;
    transform: translateY(20px);
    animation: heroEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes heroEntrance {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Élément principal de la page (photo de couverture, image d'en-tête) : glissement seul.
   Parti d'opacity: 0, il ne compterait comme affiché (LCP) qu'à la première image du fondu. */
.hero-anim--sans-fondu {
    opacity: 1;
    animation-name: heroGlissement;
}

@keyframes heroGlissement {
    to {
        transform: none;
    }
}

/* Icônes de confirmation */
.scale-in {
    opacity: 0;
    transform: scale(0.5);
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--delay, 0.2s);
}

@keyframes scaleIn {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Encart latéral (réservation) */
.js .slide-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--delay, 0.3s);
}

.js .slide-in-right.visible {
    opacity: 1;
    transform: none;
}

/* Mouvement réduit ou impression : pas d'état caché du tout */
@media (prefers-reduced-motion: reduce), print {
    .js .fade-in,
    .js .slide-in-right {
        opacity: 1;
        transform: none;
    }
}

/* Entrée d'une feuille du bas sur mobile (calendrier de séjour, popovers du listing) */
@keyframes feuilleMonte {
    from { transform: translateY(48px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Entrée de menu déroulant ou de popover (keyframe partagée) */
@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}