/* Typographie de base */
        body {
            font-family: 'Inter', 'sans-serif';
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }
        
        h1, h2, h3, h4, h5, h6, .font-display {
            font-family: 'Poppins', 'sans-serif';
        }
        .text-ups-purple {
            color: #4C1D95;
        }

        /*
        ==============================
        ANIMATIONS (IntersectionObserver)
        ==============================
        */

        /* État initial (caché) */
        .animate-on-scroll {
            opacity: 0;
            transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out;
        }
        .animate-fade-up {
            transform: translateY(40px) scale(0.95);
            filter: blur(5px);
        }
        .animate-slide-left {
            transform: translateX(-40px);
        }
        .animate-slide-right {
            transform: translateX(40px);
        }
        /* État final (visible) */
        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
        
        .delay-100 { transition-delay: 100ms !important; }
        .delay-200 { transition-delay: 200ms !important; }
        .delay-300 { transition-delay: 300ms !important; }
        .delay-500 { transition-delay: 500ms !important; }

        /* Effets de survol */
        .cta-button {
            transition: all 0.3s ease;
        }
        .cta-button:hover {
            transform: translateY(-2px); 
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-10px); 
            box-shadow: 0 20px 30px rgba(0,0,0,0.1);
        }

        /* Header (Blanc fixe) */
        header {
            background-color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            color: #111827;
        }
        .header-top {
            border-bottom: 1px solid #e5e7eb;
        }
        /* Style des liens de navigation */
        .nav-link {
            color: #374151; /* text-gray-700 */
            font-weight: 700; /* Bold */
            font-family: 'Poppins', 'sans-serif';
            transition: color 0.3s ease;
            cursor: pointer;
            text-transform: uppercase; /* MAJUSCULES */
            font-size: 0.875rem; /* text-sm */
        }
        .nav-link:hover, .nav-link.active {
            color: #4C1D95; /* ups-purple */
        }
        /* Sous-texte du menu */
        .nav-link-subtext {
            font-family: 'Inter', 'sans-serif';
            font-size: 0.75rem; /* text-xs */
            color: #6b7280; /* text-gray-500 */
            text-transform: none;
            font-weight: 500;
        }
        
        /* Menu mobile */
        #mobile-menu {
            transition: transform 0.3s ease-in-out;
        }
        .burger-line {
            transition: all 0.3s ease;
        }
        .burger-open .burger-line-1 {
            transform: translateY(8px) rotate(45deg);
        }
        .burger-open .burger-line-2 {
            opacity: 0;
        }
        .burger-open .burger-line-3 {
            transform: translateY(-8px) rotate(-45deg);
        }
        
        /* Formulaires "Label Flottant" */
        .form-group { position: relative; }
        .form-label {
            position: absolute; top: 0.75rem; left: 0.5rem; color: #6b7280;
            transition: all 0.2s ease; pointer-events: none;
        }
        .form-input {
            padding: 0.75rem 0.5rem; background-color: transparent; border: none;
            border-bottom: 2px solid #e5e7eb; transition: border-color 0.3s ease;
        }
        .form-input:focus { outline: none; border-color: #4C1D95; }
        .form-input:focus + .form-label,
        .form-input:not(:placeholder-shown) + .form-label {
            transform: translateY(-1.25rem) scale(0.75); color: #4C1D95;
        }
        
        /* Style pour la page "Enfants" (Galerie) */
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .gallery-overlay {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            padding: 1.5rem;
            color: white;
            transform: translateY(100%);
            transition: transform 0.3s ease-in-out;
        }
        .gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }
        .fgt{
            color: #d1d5db; /* text-gray-300 */
        }
        h1.text-4xl.md\:text-6xl.font-black.uppercase.text-white.animate-on-scroll.animate-fade-up.delay-100.is-visible {
            /* margin-top: 7px; */
        }
        /* Style pour le slogan Hero */
        .hero-slogan-script {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-weight: 700;
            color: #d1d5db; /* text-gray-300 */
        }
        .md\:w-1\/2.animate-on-scroll.animate-slide-left.is-visible {
            height: 340px;
        }
        /* Padding pour le main (à cause du header plus grand) */
        main, .page-content {
            /* padding-top: 100px; Ajustez cette valeur en fonction de la hauteur de votre header */
        }
        .logo {
            height: 8rem;
        }
        .form-toggle-btn.active {
            background: #5aa0fa;
            color: white;
        }
        /* img.rounded-lg.shadow-2xl.object-cover.h-full.w-full {
            height: 380px;
        } */
         .h-48 {
            height: 22rem !important;
        }
        .h-12 {
            height: 10rem !important;
        }
        .mobile-link.active-mobile {
            color: #4C1D95; /* ups-purple */
            font-weight: 900; /* Le rend un peu plus gras */
        }
        @media (max-width: 767px) {
            div#mobile-menu {
                height: 100% !important;
            }
            .h-screen {
                height: 68vh !important;
                background-position: 68% !important;
            }
        }