/* ==========================================================================
   GLOBAL.CSS - Configuration globale
   ========================================================================== */

/* ==========================
   Variables CSS
   ========================== */
   :root {
    /* Couleurs */
    --color-primary: #0097B2;   /* Bleu classique */
    --color-secondary: #5CE1E6; /* Bleu clair - évidence */
    --color-dark: #1f2937;      /* Gris foncé */
    --color-light: #f9fafb;     /* Blanc cassé */
    --color-text: #000000;

    /* Typographie */
    --font-base: 'DM Sans', sans-serif;
    --font-title: 'DM Serif Display', serif;

    /* Tailles */
    --font-size-base: 16px;

    --container-width: 1100px;
    --spacing-base: 1rem;
    --border-radius: 8px;
}

/* ==========================
   Reset / Normalisation
   ========================== */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-light);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: var(--font-size-base);
}

h1, h2, h3, h4 {
    font-family: var(--font-title);
}

h5, h6, p, a, button, input, textarea {
    font-family: var(--font-base);
}

h1 {
    font-size: 2.5rem;
}
  
h2 {
    font-size: 2rem;
}
  
h3 {
    font-size: 1.75rem;
}
  
h4 {
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
}

/* ==========================
   Classes de base
   ========================== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1rem;
}

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

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

.bg-primary {
    background-color: var(--color-primary);
}

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

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

/* ==========================
   Helpers / Utilitaires
   ========================== */
.hide {
    display: none !important;
}

.show {
    display: block !important;
}

/* ==========================
   Dark mode (si besoin)
   ========================== */
body.dark {
    background-color: var(--color-dark);
    color: var(--color-light);
}