/* ═══════════════════════════════════════
   base.css — Suivi Colis
   Fondations : police, reset, variables CSS, html/body
   À inclure EN PREMIER sur toutes les pages
   ═══════════════════════════════════════ */

/* ══ POLICE ══ */
@font-face {
    font-family: 'Montserrat';
    src: url('../Fonts/montserrat/Montserrat-Regular.otf') format('opentype');
    font-display: swap;
}

/* ══ RESET ══ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ══ VARIABLES CSS (mode clair par défaut) ══ */
:root {
    /* Couleurs principales */
    --color-primary: #2b7be5;
    --color-primary-dark: #1a4a8a;
    --color-primary-darker: #0a2540;
    --color-primary-light: #e8f0fc;

    /* Couleurs neutres */
    --color-white: #ffffff;
    --color-bg-soft: #f4f6fb;
    --color-border: #d0dae8;
    --color-text-muted: #5a6a82;

    /* Couleurs de statut */
    --color-success: #2e7d32;
    --color-success-light: #e6f4ea;
    --color-success-border: #81c995;
    --color-error: #c62828;
    --color-error-light: #fdecea;
    --color-error-border: #f5a9a3;
    --color-warning: #f57c00;
    --color-info: #1976d2;

    /* Ombres */
    --shadow-sm: 0 2px 12px rgba(10, 37, 64, 0.08);
    --shadow-md: 0 4px 24px rgba(10, 37, 64, 0.10);
    --shadow-lg: 0 8px 40px rgba(10, 37, 64, 0.18);

    /* Rayons de bordure */
    --radius-sm: 8px;
    --radius-md: 9px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Espacements */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-bounce: 0.28s cubic-bezier(0.22, 0.68, 0, 1.2);

    /* Breakpoints (utilisés en JS ou pour référence) */
    --breakpoint-mobile: 640px;
    --breakpoint-tablet: 900px;
    --breakpoint-desktop: 1200px;
}

/* ══ BASE ══ */
html {
    scroll-behavior: smooth;
}

html,
body {
    min-height: 100%;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-primary-darker);
    background: var(--color-bg-soft);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ══ ACCESSIBILITÉ ══ */
*:focus {
    outline: none;
}

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

/* Amélioration du contraste pour les lecteurs d'écran */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ══ UTILITAIRES ══ */
.no-scroll {
    overflow: hidden;
}