/* LODGE/Savannah/static/css/base.css */

/* --- 1. VARIABLES & RESET --- */
:root {
    /* Palette "Savannah Light" */
    
    /* LE FONCÉ : Texte principal */
    --earth-dark: #38342c;
    
    /* LE CLAIR : Fond de page -> BLANC PUR (Lumière) */
    --earth-light: #FFFFFF;
    
    /* L'ACTION PRINCIPALE (Boutons dans la page) : BRIQUE */
    /* C'est la couleur qui va égayer le fond blanc */
    --safari-action: #a13607; 
    
    /* L'ACCENT (Bouton du menu & Détails) : DORÉ */
    --safari-gold: #D1B866;  
    
    --white: #FFFFFF;
    --overlay: rgba(0,0,0,0.4);

    /* Design System */
    --radius: 12px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Ombre légère adaptée au fond blanc */
    
    /* Typography */
    --font-heading: 'Georgia', 'Times New Roman', serif;
    --font-body: 'Helvetica Neue', 'Arial', sans-serif;
}

/* LE RESET (INDISPENSABLE) */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background-color: var(--earth-light); /* Fond BLANC */
    color: var(--earth-dark);
    overflow-x: hidden;
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; transition: 0.3s ease; }
ul { list-style: none; }
img { max-width: 100%; display: block; object-fit: cover; }

/* Sections */
.section-padding { padding: 100px 5%; }

.section-title { text-align: center; margin-bottom: 60px; }
.section-title h2 {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--earth-dark);
    margin-bottom: 15px;
}
.section-title span {
    display: block;
    color: #a13607; /* Utilise une couleur foncée */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 0.9rem;
}
.section-title p { color: #6B655D; max-width: 600px; margin: 0 auto; }



/* LODGE/Savannah/static/css/base.css (PARTIE À COPIER À LA FIN) */

/* =========================================
   A. ANIMATIONS AU SCROLL (Ralenties & Visibles)
   ========================================= */

/* 1. État de départ (Invisible + Décalé) */
.js-scroll {
    opacity: 0;
    /* On passe à 1.5s pour que le mouvement soit bien visible à l'œil */
    transition: all 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); 
    will-change: opacity, transform;
}

/* 2. Les directions de départ (Mouvements plus amples) */
.js-scroll-up    { transform: translateY(60px); }   /* Monte de plus bas */
.js-scroll-left  { transform: translateX(-80px); }  /* Vient de plus loin à gauche */
.js-scroll-right { transform: translateX(80px); }   /* Vient de plus loin à droite */

/* 3. L'état d'arrivée (Visible + En place) */
.js-scroll.scrolled {
    opacity: 1;
    transform: translate(0, 0);
}

/* 4. Délais (Pour que ça n'arrive pas tout en même temps) */
/* Important : On retarde un peu tout pour que l'utilisateur ait le temps de voir */
.js-delay-1 { transition-delay: 0.2s; }
.js-delay-2 { transition-delay: 0.4s; }
.js-delay-3 { transition-delay: 0.6s; }


/* =========================================
   B. INTERACTIONS AU SURVOL (HOVER)
   ========================================= */

/* 1. LE LOGO : Se soulève et s'illumine */
.logo a {
    display: inline-block; /* Nécessaire pour le mouvement */
    transition: transform 0.4s ease, color 0.3s ease;
}
.logo a:hover {
    transform: translateY(-3px) scale(1.05); /* Monte et grossit un peu */
    color: var(--safari-gold); /* Devient doré */
    text-shadow: 0 4px 10px rgba(255, 255, 255, 0.4); /* Petit halo */
}

/* 2. LES IMAGES DE CONTENU (Zig-Zag et Grilles) : Zoom élégant */
/* On cible les images dans les colonnes lodge, acco, exp, dining */
.lodge-image-column img, 
.acco-image img, 
.exp-image img, 
.dining-image img,
.card-img img,
.gallery-item img {
    transition: transform 0.8s ease, filter 0.5s ease; /* Transition lente */
    cursor: pointer; /* Montre qu'on peut interagir */
}

.lodge-image-column img:hover, 
.acco-image img:hover, 
.exp-image img:hover, 
.dining-image img:hover,
.card-img img:hover,
.gallery-item img:hover {
    transform: scale(1.06); /* Zoom léger (6%) */
    filter: brightness(1.05); /* S'éclaircit très légèrement */
    box-shadow: 0 15px 40px rgba(0,0,0,0.3); /* L'ombre grandit */
}

/* 3. LA BANNIÈRE HERO : Profondeur sur le texte */
/* Animer l'image de fond (background-size) est souvent saccadé en CSS.
   On va plutôt créer un effet de profondeur en animant le texte quand on survole la bannière. */
.hero-page, .hero {
    overflow: hidden; /* Sécurité */
}

.hero-page:hover .hero-page-content h1,
.hero:hover h1 {
    transform: translateY(-10px); /* Le titre monte */
    text-shadow: 0 10px 20px rgba(0,0,0,0.5); /* L'ombre du texte s'accentue */
}

.hero-page:hover .hero-page-content p,
.hero:hover p {
    transform: translateY(-5px); /* Le sous-titre monte un peu moins (parallaxe) */
    color: var(--safari-gold); /* Le texte passe en doré */
}

/* Transition douce pour ces éléments de texte */
.hero-page h1, .hero-page p,
.hero h1, .hero p {
    transition: transform 0.6s ease, color 0.4s ease, text-shadow 0.4s ease;
}



/* LODGE/Savannah/static/css/base.css (À LA FIN) */

/* --- A. ANIMATION STANDARD (Titres, Textes) --- */
.js-scroll {
    opacity: 0;
    transition: all 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translateY(60px);
    will-change: opacity, transform;
}
.js-scroll.scrolled {
    opacity: 1;
    transform: translateY(0);
}

/* --- B. ANIMATION SPÉCIALE GALERIE (Zoom + Cascade) --- */
.gallery-enter {
    opacity: 0;
    /* Départ : Plus bas et un peu plus petit (effet de profondeur) */
    transform: translateY(80px) scale(0.9); 
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}
.gallery-enter.visible {
    opacity: 1;
    /* Arrivée : En place et taille normale */
    transform: translateY(0) scale(1);
}

/* Directions spécifiques pour le Zig-Zag */
.js-scroll-left  { transform: translateX(-80px); }
.js-scroll-right { transform: translateX(80px); }