/*
Fichier : style.css
Description : Feuille de style principale. Elle importe les modules CSS (components, map, drawer, trip),
définit les variables CSS du thème de design premium UX, et gère les bases globales (reset, body, header, tabs).
*/

/* ================= IMPORT DES FEUILLES DE STYLE MODULAIRES ================= */
@import url('components.css');
@import url('map.css');
@import url('drawer.css');
@import url('trip.css');
@import url('hiking.css');

/* ================= VARIABLES DU THÈME DE DESIGN (PREMIUM UX) ================= */
:root {
    --bg-dark: #090d16;
    --bg-card: #111827;
    --glass-bg: rgba(17, 24, 39, 0.75);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    
    --primary: #3b82f6;
    --primary-glow: rgba(59, 130, 246, 0.35);
    --primary-hover: #1d4ed8;
    
    --accent: #ec4899;
    --accent-glow: rgba(236, 72, 153, 0.35);
    --accent-hover: #be185d;
    
    --text: #f3f4f6;
    --text-muted: #9ca3af;
    --border-color: #1f2937;
    
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    
    --font-title: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* ================= STYLES DE BASE & TYPOGRAPHIE ================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
    padding-bottom: 50px;
    background-image: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.03) 0%, transparent 40%),
                      radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.03) 0%, transparent 40%);
    background-attachment: fixed;
}

/* ================= HEADER PRINCIPAL ================= */
.header-main {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    padding: 24px 40px 10px 40px;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--glass-shadow);
}

.header-content h1 {
    font-family: var(--font-title);
    font-size: 2.3em;
    font-weight: 800;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.header-content p {
    color: var(--text-muted);
    font-size: 0.95em;
    font-weight: 400;
    margin-bottom: 20px;
}

/* ================= ONGLETS (TABS) ================= */
.nav-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.tab-button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 12px 20px;
    font-family: var(--font-title);
    font-size: 0.98em;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    border: 1px solid transparent;
}

.tab-button:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
}

.tab-button.active {
    color: var(--text);
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.05);
}

/* ================= CONTENUS DES ONGLETS ================= */
.main-content {
    max-width: 1400px;
    margin: 30px auto 0 auto;
    padding: 0 24px;
}

.tab-panel {
    display: none;
    animation: fadeIn 0.4s ease-out forwards;
}

.tab-panel.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================= CARTES & BLOCS DE DESIGN ================= */
.card {
    background-color: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    margin-bottom: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.card-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.card-title {
    font-family: var(--font-title);
    font-size: 1.25em;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--text);
    border-left: 4px solid var(--primary);
    padding-left: 12px;
}

/* ================= GRILLES DE LAYOUTS ================= */
.grid-layout-two {
    display: grid;
    grid-template-columns: 5fr 3fr;
    gap: 24px;
}

@media (max-width: 1024px) {
    .grid-layout-two {
        grid-template-columns: 1fr;
    }
}

/* ================= UTILITIES ================= */
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.container-center { margin-left: auto; margin-right: auto; }
.max-w-600 { max-width: 600px; }
.max-w-800 { max-width: 800px; }
.info-text { font-size: 0.9em; color: var(--text-muted); font-style: italic; }
.loading-text { text-align: center; color: var(--text-muted); font-style: italic; padding: 20px 0; }

/* ================= RESPONSIVE MOBILE (STRICT PREMIER DEGRÉ UX) ================= */
@media (max-width: 768px) {
    .header-main {
        padding: 16px 10px 8px 10px;
        text-align: center;
    }
    
    .header-content h1 {
        font-size: 1.6em;
        text-align: center;
        width: 100%;
    }
    
    .header-content p {
        font-size: 0.85em;
        margin-bottom: 12px;
        text-align: center;
    }
    
    .nav-tabs {
        gap: 6px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        justify-content: flex-start;
        padding-bottom: 4px;
    }
    
    .nav-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .tab-button {
        padding: 8px 14px;
        font-size: 0.88em;
    }
    
    .main-content {
        margin-top: 12px;
        padding: 0 10px;
    }
    
    .card {
        padding: 14px;
        margin-bottom: 16px;
    }
    
    .card-title {
        font-size: 1.1em;
        margin-bottom: 12px;
    }
}