@charset "UTF-8";
/* ==========================================================================
   SAFARONE | MASTER STYLESHEET
   Architecture: Base -> Layout -> Components -> Utilities
   ========================================================================== */

/* 1. BASE (Design Tokens, Reset, Typography)
   -------------------------------------------------------------------------- */
@import url('./base/variables.css');
@import url('./base/reset.css');
@import url('./base/typography.css');

/* 2. LAYOUT (Grid System, Global Sections)
   -------------------------------------------------------------------------- */
@import url('./layout/grid.css');
@import url('./layout/sections.css');

/* 3. COMPONENTS (Isolated UI Elements)
   -------------------------------------------------------------------------- */
@import url('./components/buttons.css');
@import url('./components/navbar.css');
@import url('./components/hero.css');
@import url('./components/cards.css');
@import url('./components/carousel.css');
@import url('./components/footer.css');
@import url('./components/skeleton.css');
/* @import url('./components/error-boundary.css'); */
@import url('./components/explore.css');
@import url('./components/app-preview.css');
/* @import url('./components/smart-maps.css'); */
@import url('./components/reviews-cta.css');

/* 4. UTILITIES (Animations, RTL, Theme Overrides)
   -------------------------------------------------------------------------- */
@import url('./utilities/animations.css');
@import url('./utilities/themes.css');
@import url('./utilities/rtl.css');
@import url('./utilities/responsive.css');

/* ==========================================================================
   GLOBAL LOADER OVERRIDES (Injected before components mount)
   ========================================================================== */
.loader-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--bg-primary);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.loader-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-brand {
    font-family: var(--font-display);
    font-size: var(--sp-6);
    color: var(--clr-saffron);
    animation: pulse 2s infinite ease-in-out;
}


/* ==========================================================================
   MASTER VERTICAL RHYTHM (Correction des grands espaces)
   ========================================================================== */

/* 1. La règle magique : si une section suit une autre section, on tue la marge du haut ! */
.section-padding + .section-padding {
    padding-top: 2rem !important; 
}

/* 2. Ajustements millimétrés pour chaque transition (Apple Level) */

#explore {
    /* Remonte légèrement la section Explore sous le Hero */
    padding-top: 3rem !important; 
}

#smart-maps {
    /* Colle la carte juste sous les carousels d'Explore */
    padding-top: 0rem !important; 
    padding-bottom: 2rem !important;
}

#app-experience {
    /* Remonte la section des téléphones 3D pour qu'ils soient proches de la carte */
    padding-top: 1rem !important; 
}

/* Optionnel : Rapprocher le titre "Tastes & Experiences" du premier carousel */
#explore .section-header[style*="margin-top"] {
    margin-top: 2rem !important;
}
#reviews-cta {
    /* Rapproche la section des avis du reste du contenu */
    padding-top: 2rem !important; 
    /* padding-bottom: -5rem !important; */
}
#footer {
    /* Colle le footer au contenu pour éviter les grands espaces en bas */
    padding-top: 2rem !important; 
    padding-bottom: 6px !important;
}