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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    background-color: var(--site-bg);
    color: var(--primary);
    line-height: 1.5;
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body.burger_visible {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

a {
    color: var(--secondary);
    text-decoration: none;
    transition: color 0.25s;
    -webkit-tap-highlight-color: transparent;
}

a:hover { 
    color: var(--primary); 
}

h1, h2, h3, h4 {
    font-family: var(--font-headings);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--primary);
    word-wrap: break-word;
}

h1 { font-size: clamp(1.8rem, 5vw, 2.375rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.625rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.25rem); }

ul { list-style: none; }
img { 
    max-width: 100%; 
    height: auto; 
    vertical-align: middle;
    display: block;
}

/* Conteneur responsive */
.container {
    width: 100%;
    max-width: var(--container-width);
    padding-left: clamp(16px, 4vw, 24px);
    padding-right: clamp(16px, 4vw, 24px);
    margin-left: auto;
    margin-right: auto;
}

/* Overlay Link */
.overlay_link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ===== VARIABLES CSS ===== */
:root {
    /* Couleurs Light Mode (par défaut) */
    --light-primary: #0a2540;
    --light-secondary: #435366;
    --light-accent: #ff6600;
    --light-site-bg: #f1f5f9;
    --light-layout-bg: #ffffff;
    --light-border: #e2e8f0;
    --light-tag-bg: #f1f5f9;
    --light-overlay-rgb: 10, 37, 64;
    --light-header-bg: #ffffff;

    /* Couleurs Dark Mode */
    --dark-primary: #ffffff;
    --dark-secondary: #cdcdcd;
    --dark-accent: #ff6600;
    --dark-site-bg: #161616;
    --dark-layout-bg: #232323;
    --dark-border: #343434;
    --dark-tag-bg: #2d2d2d;
    --dark-overlay-rgb: 0, 0, 0;
    --dark-header-bg: #232323;

    /* Polices */
    --font-base: 'Inter', sans-serif;
    --font-headings: 'Manrope', sans-serif;
    
    /* Tailles et espacements */
    --header-height: 70px;
    --header-height-mobile: 60px;
    --layout-radius: 12px;
    --thumb-radius: 12px;
    --button-radius: 200px;
    --container-width: 1248px;
    
    /* Breakpoints */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-laptop: 1024px;
    --breakpoint-desktop: 1248px;
}

/* Thème dynamique via data-scheme */
[data-scheme="light"] {
    --primary: var(--light-primary);
    --secondary: var(--light-secondary);
    --accent: var(--light-accent);
    --site-bg: var(--light-site-bg);
    --layout-bg: var(--light-layout-bg);
    --border: var(--light-border);
    --tag-bg: var(--light-tag-bg);
    --overlay-rgb: var(--light-overlay-rgb);
    --header-bg: var(--light-header-bg);
}

[data-scheme="dark"] {
    --primary: var(--dark-primary);
    --secondary: var(--dark-secondary);
    --accent: var(--dark-accent);
    --site-bg: var(--dark-site-bg);
    --layout-bg: var(--dark-layout-bg);
    --border: var(--dark-border);
    --tag-bg: var(--dark-tag-bg);
    --overlay-rgb: var(--dark-overlay-rgb);
    --header-bg: var(--dark-header-bg);
}