/**
 * BASE.CSS - Variables, reset, typographie
 * Fondations du système de design
 * @version 4.0.0
 */

/* ===========================
   VARIABLES CSS
   =========================== */

:root {
    /* Couleurs principales */
    --color-primary: #2c3e50;
    --color-primary-dark: #1a252f;
    --color-primary-light: #34495e;
    
    --color-secondary: #3498db;
    --color-secondary-dark: #2980b9;
    --color-secondary-light: #5dade2;
    
    --color-accent: #e74c3c;
    --color-accent-dark: #c0392b;
    --color-accent-light: #ec7063;
    
    /* Couleurs fonctionnelles */
    --color-success: #27ae60;
    --color-success-dark: #1e8449;
    --color-success-light: #58d68d;
    
    --color-warning: #f39c12;
    --color-warning-dark: #d68910;
    --color-warning-light: #f7dc6f;
    
    --color-danger: #e74c3c;
    --color-danger-dark: #c0392b;
    --color-danger-light: #ec7063;
    
    --color-info: #3498db;
    --color-info-dark: #2980b9;
    --color-info-light: #85c1e9;
    
    /* Couleurs neutres */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #f8f9fa;
    --color-gray-100: #e9ecef;
    --color-gray-200: #dee2e6;
    --color-gray-300: #ced4da;
    --color-gray-400: #adb5bd;
    --color-gray-500: #6c757d;
    --color-gray-600: #495057;
    --color-gray-700: #343a40;
    --color-gray-800: #212529;
    --color-gray-900: #0d1117;
    
    /* Arrières-plans */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-light: #f1f3f4;
    --bg-dark: #343a40;
    --bg-card: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* Textes */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --text-light: #ffffff;
    --text-link: #3498db;
    --text-link-hover: #2980b9;
    
    /* Bordures */
    --border-light: #dee2e6;
    --border-medium: #ced4da;
    --border-dark: #adb5bd;
    --border-color: var(--border-light);
    --border-width: 1px;
    
    /* Espacements */
    --spacing-xs: 0.25rem;     /* 4px */
    --spacing-sm: 0.5rem;      /* 8px */
    --spacing-md: 1rem;        /* 16px */
    --spacing-lg: 1.5rem;      /* 24px */
    --spacing-xl: 2rem;        /* 32px */
    --spacing-xxl: 3rem;       /* 48px */
    
    /* Rayons de bordure */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 50rem;
    
    /* Ombres */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    
    /* Transitions */
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.3s ease-out;
    --transition-slow: 0.5s ease-out;
    
    /* Typographie */
    --font-family-primary: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-secondary: 'Oswald', 'Arial Black', sans-serif;
    --font-family-mono: 'Fira Code', 'Courier New', monospace;
    
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-base: var(--line-height-normal);
    
    /* Layout */
    --container-max-width: 1200px;
    --sidebar-width: 280px;
    --header-height: 80px;
    --footer-height: 60px;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 9999;
    
    /* Breakpoints (pour usage JS) */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* Couleurs de jours harmonisées */
    --day-color-1: #3498db;
    --day-color-2: #10b981;
    --day-color-3: #f59e42;
    --day-color-4: #6366f1;
    --day-color-5: #ef4444;
    --day-color-6: #eab308;
    --day-color-7: #14b8a6;
    --day-color-8: #a855f7;
    --day-color-9: #f43f5e;
    --day-color-10: #ff9800;
    --day-color-11: #00bcd4;
    --day-color-12: #8bc34a;
    --day-color-13: #e91e63;
    --day-color-14: #3f51b5;
    --day-color-15: #cddc39;
    --day-color-16: #ff5722;
    --day-color-17: #009688;
    --day-color-18: #ffc107;
    --day-color-19: #607d8b;
    --day-color-20: #795548;
    --day-color-21: #b71c1c;
    --day-color-22: #1b5e20;
    --day-color-23: #0d47a1;
    --day-color-24: #4a148c;
    --day-color-25: #fbc02d;
    --day-color-26: #388e3c;
    --day-color-27: #1976d2;
    --day-color-28: #d32f2f;
    --day-color-29: #7b1fa2;
    --day-color-30: #0288d1;
    --day-color-31: #c2185b;

    --pastel-vol: #ffe5b4;
    --pastel-logement: #d1fae5;
    --pastel-rando: #e0e7ff;
    --pastel-budget: #fff7ed;
}

/* ===========================
   RESET CSS MODERNE
   =========================== */

/* Box sizing universel */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reset de base */
* {
    margin: 0;
    padding: 0;
}

/* HTML et body */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100%;
}

/* Éléments bloc */
main {
    display: block;
}

h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, dd,
hr, figure {
    margin: 0;
}

/* Liens */
a {
    background-color: transparent;
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Images et médias */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    border-style: none;
}

/* Formulaires */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    vertical-align: baseline;
}

textarea {
    overflow: auto;
    resize: vertical;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Listes */
ul[class],
ol[class] {
    list-style: none;
}

/* Tables */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ===========================
   TYPOGRAPHIE
   =========================== */

/* Titres */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-white);
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-lg);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

/* Paragraphes */
p {
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-normal);
}

p:last-child {
    margin-bottom: 0;
}

/* Texte emphase */
strong, b {
    font-weight: var(--font-weight-bold);
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

mark {
    background-color: #fff3cd;
    padding: 0.2em 0.4em;
    border-radius: var(--radius-xs);
}

/* Code */
code,
kbd,
pre,
samp {
    font-family: var(--font-family-mono);
    font-size: 0.9em;
}

code {
    background-color: var(--bg-light);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-xs);
    color: var(--color-danger);
}

pre {
    background-color: var(--bg-light);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    border: 1px solid var(--border-light);
    margin-bottom: var(--spacing-md);
}

pre code {
    background: none;
    padding: 0;
    color: inherit;
}

kbd {
    background-color: var(--color-gray-800);
    color: white;
    padding: 0.2em 0.4em;
    border-radius: var(--radius-xs);
    font-size: 0.8em;
}

/* Citations */
blockquote {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: 4px solid var(--color-primary);
    background-color: var(--bg-light);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

blockquote p:last-child {
    margin-bottom: 0;
}

blockquote cite {
    display: block;
    margin-top: var(--spacing-sm);
    font-style: normal;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

blockquote cite::before {
    content: "— ";
}

/* Listes */
ul, ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

li {
    margin-bottom: var(--spacing-xs);
}

li:last-child {
    margin-bottom: 0;
}

ul ul,
ol ol,
ul ol,
ol ul {
    margin-bottom: 0;
    margin-top: var(--spacing-xs);
}

dt {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
}

dd {
    margin-bottom: var(--spacing-md);
    margin-left: var(--spacing-lg);
}

/* Séparateurs */
hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: var(--spacing-xl) 0;
}

/* ===========================
   UTILITAIRES DE BASE
   =========================== */

/* Visibilité */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Texte */
.text-muted {
    color: var(--text-muted) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

.text-info {
    color: var(--color-info) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.text-black {
    color: var(--color-black) !important;
}

/* Tailles de police */
.text-xs {
    font-size: var(--font-size-xs) !important;
}

.text-sm {
    font-size: var(--font-size-sm) !important;
}

.text-base {
    font-size: var(--font-size-base) !important;
}

.text-lg {
    font-size: var(--font-size-lg) !important;
}

.text-xl {
    font-size: var(--font-size-xl) !important;
}

.text-2xl {
    font-size: var(--font-size-2xl) !important;
}

/* Poids de police */
.font-light {
    font-weight: var(--font-weight-light) !important;
}

.font-normal {
    font-weight: var(--font-weight-normal) !important;
}

.font-medium {
    font-weight: var(--font-weight-medium) !important;
}

.font-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.font-bold {
    font-weight: var(--font-weight-bold) !important;
}

/* Arrière-plans */
.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.bg-success {
    background-color: var(--color-success) !important;
}

.bg-warning {
    background-color: var(--color-warning) !important;
}

.bg-danger {
    background-color: var(--color-danger) !important;
}

.bg-info {
    background-color: var(--color-info) !important;
}

.bg-light {
    background-color: var(--bg-light) !important;
}

.bg-dark {
    background-color: var(--bg-dark) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* Bordures */
.border {
    border: var(--border-width) solid var(--border-color) !important;
}

.border-0 {
    border: 0 !important;
}

.border-top {
    border-top: var(--border-width) solid var(--border-color) !important;
}

.border-right {
    border-right: var(--border-width) solid var(--border-color) !important;
}

.border-bottom {
    border-bottom: var(--border-width) solid var(--border-color) !important;
}

.border-left {
    border-left: var(--border-width) solid var(--border-color) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.border-secondary {
    border-color: var(--color-secondary) !important;
}

.border-success {
    border-color: var(--color-success) !important;
}

.border-warning {
    border-color: var(--color-warning) !important;
}

.border-danger {
    border-color: var(--color-danger) !important;
}

.border-info {
    border-color: var(--color-info) !important;
}

.border-light {
    border-color: var(--border-light) !important;
}

.border-dark {
    border-color: var(--border-dark) !important;
}

.border-white {
    border-color: var(--color-white) !important;
}

/* Rayons de bordure */
.rounded {
    border-radius: var(--radius-md) !important;
}

.rounded-sm {
    border-radius: var(--radius-sm) !important;
}

.rounded-lg {
    border-radius: var(--radius-lg) !important;
}

.rounded-xl {
    border-radius: var(--radius-xl) !important;
}

.rounded-pill {
    border-radius: var(--radius-pill) !important;
}

.rounded-circle {
    border-radius: 50% !important;
}

.rounded-0 {
    border-radius: 0 !important;
}

/* Ombres */
.shadow-xs {
    box-shadow: var(--shadow-xs) !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

.shadow-xl {
    box-shadow: var(--shadow-xl) !important;
}

.shadow-inner {
    box-shadow: var(--shadow-inner) !important;
}

.shadow-none {
    box-shadow: none !important;
}

/* ===========================
   FOCUS ET ACCESSIBILITÉ
   =========================== */

/* Focus visible pour navigation clavier */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Améliorer le focus sur les éléments interactifs */
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Skip link pour navigation clavier */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--color-primary);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    z-index: 100;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 6px;
}

/* ===========================
   PERFORMANCES
   =========================== */

/* Optimisation GPU pour les animations */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* Optimisation fonts */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Nunito'), url('../fonts/Nunito-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Nunito Bold'), url('../fonts/Nunito-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Oswald'), url('../fonts/Oswald-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Oswald Bold'), url('../fonts/Oswald-Bold.ttf') format('truetype');
}