/* ============================================
   VARIABLES CSS GLOBALES - Ma France
   ============================================

   Description :
   Toutes les variables CSS réutilisables du projet.
   Ce fichier DOIT être chargé EN PREMIER avant tous les autres CSS.

   Contenu :
   - Couleurs (primaires, secondaires, fonctionnelles)
   - Espacements (xs → 3xl)
   - Typographie (tailles, poids, hauteurs de ligne)
   - Bordures et radius
   - Ombres (xs → 2xl)
   - Transitions et animations
   - Dimensions (largeurs, hauteurs)
   - Z-index
   - Breakpoints responsive

   Version : 2.0
   Date : Harmonisation CSS Phase 1-5
   ============================================ */

:root {
    /* === COULEURS PRIMAIRES === */
    --color-primary: #007bff;
    --color-primary-hover: #0056b3;
    --color-primary-dark: #0055A4;          /* Couleur navbar et recherche */
    --color-primary-darker: #052a52;        /* Hover recherche */

    /* === COULEURS SECONDAIRES === */
    --color-secondary: #039d9e;             /* rgb(3, 153, 158) */
    --color-secondary-dark: #005052;        /* rgb(0, 80, 82) */

    /* === COULEURS FONCTIONNELLES === */
    --color-success: #28a745;               /* Documents, vert */
    --color-warning: #ffc107;               /* Discussions, jaune */
    --color-info: #17a2b8;                  /* Projects, cyan */
    --color-danger: #dc3545;                /* News, rouge */

    /* === COULEURS DE FOND === */
    --bg-body: #f4f7f9;                     /* Fond de la page */
    --bg-body-alt: #f8f9fa;                 /* Fond alternatif */
    --bg-card: #ffffff;                     /* Fond des cartes */
    --bg-muted: #f9f9f9;                    /* Fond atténué */
    --bg-section: #f6fafa;                  /* Fond de section */
    --bg-input: #f0f0f0;                    /* Fond input */
    --bg-form-header: #e9ecef;              /* En-tête formulaire */
    --bg-selection: #f0f0f0;                /* Fond sélection */
    --bg-highlight: #e7f3ff;                /* Fond surbrillance */

    /* === COULEURS DE TEXTE === */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #7f8c8d;
    --text-subtle: #555555;
    --text-heading: #212529;
    --text-heading-alt: #2c3e50;
    --text-subheading: #495057;
    --text-card-label: #1d2129;
    --text-card-desc: #606770;
    --text-light: #6c757d;

    /* === BORDURES === */
    --border-color: #e0e0e0;                /* Bordure par défaut */
    --border-color-form: #ced4da;           /* Bordure formulaires */
    --border-color-dark: #dee2e6;           /* Bordure foncée */
    --border-color-light: #ddd;             /* Bordure claire */
    --border-color-input: #ccc;             /* Bordure input */
    --border-color-card: #adb5bd;           /* Bordure carte */
    --border-width: 1px;
    --border-width-thick: 2px;

    /* === ESPACEMENTS === */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 50px;

    /* === BORDER RADIUS === */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-pill: 16px;                    /* Pour badges/pilules */
    --radius-circle: 20px;                  /* Coins très arrondis */
    --radius-full: 50%;                     /* Pour cercles */
    --radius-button: 0.375rem;              /* Bootstrap-like */
    --radius-card: 0.25rem;                 /* Bootstrap-like */

    /* === OMBRES (BOX-SHADOW) === */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 8px 25px rgba(0, 0, 0, 0.12);
    --shadow-navbar: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 6px 10px rgba(0, 0, 0, 0.15);
    --shadow-research: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

    /* === TRANSITIONS === */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-smooth: 0.5s ease-in-out;

    /* === TYPOGRAPHIE === */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-fallback: Arial, sans-serif;

    --font-size-xs: 0.75em;                 /* 12px */
    --font-size-sm: 0.85em;                 /* ~13-14px */
    --font-size-base: 1em;                  /* 16px */
    --font-size-md: 0.9em;                  /* ~14-15px */
    --font-size-lg: 1.1em;                  /* ~18px */
    --font-size-xl: 1.2em;                  /* ~19px */
    --font-size-2xl: 1.5em;                 /* ~24px */
    --font-size-3xl: 2em;                   /* ~32px */
    --font-size-4xl: 2.5em;                 /* ~40px */

    --font-size-navbar: 24px;
    --font-size-nav-link: 15px;
    --font-size-button: 16px;
    --font-size-h1: 36px;
    --font-size-h2: 1.5rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-base: 1.4;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;

    /* === LARGEURS === */
    --width-container-sm: 400px;
    --width-container-md: 600px;
    --width-container-lg: 800px;
    --width-container-xl: 900px;
    --width-container-2xl: 1100px;
    --width-container-3xl: 1400px;
    --width-card-max: 200px;
    --width-card-review: 320px;
    --width-login-card: 420px;
    --width-carousel: 1110px;

    /* === HAUTEURS === */
    --height-navbar: 40px;
    --height-icon: 45px;
    --height-card-image: 150px;
    --height-photo-item: 300px;
    --height-button: 50px;
    --height-avatar: 60px;
    --height-map: 300px;

    /* === Z-INDEX (superposition) === */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 1000;
    --z-fixed: 1010;
    --z-modal: 1050;
    --z-tooltip: 1070;

    /* === COULEURS DE TAGS (pour POI) === */
    --color-tag-theme-bg: #e7f5ff;
    --color-tag-theme-text: #1971c2;
    --color-tag-amenity-bg: #e6fcf5;
    --color-tag-amenity-text: #087f5b;
    --color-tag-payment-bg: #fff9db;
    --color-tag-payment-text: #b68600;
    --color-tag-language-bg: #f8f0fc;
    --color-tag-language-text: #862e9c;

    /* === COULEURS DE CARTES TYPE/RÉGION === */
    --color-card-type-bg: #e7f3ff;
    --color-card-type-text: #1877f2;
    --color-card-region-bg: #e8f5e9;
    --color-card-region-text: #4caf50;

    /* === COULEURS REVIEWS === */
    --color-star-filled: #ffc107;
    --color-star-empty: #e0e0e0;
    --color-review-link: #3498db;
    --color-review-link-hover: #2980b9;

    /* === COULEURS ALPHABÉTIQUES === */
    --color-alpha-bg: #f0f0f0;
    --color-alpha-hover: #e0e0e0;
    --color-alpha-active-bg: #007bff;
    --color-alpha-active-text: #fff;

    /* === COULEURS ACCORDÉON === */
    --color-accordion-expanded: #0c63e4;
    --color-accordion-bg: #e7f1ff;

    /* === GAPS (Flexbox/Grid) === */
    --gap-xs: 6px;
    --gap-sm: 10px;
    --gap-md: 15px;
    --gap-lg: 20px;
    --gap-xl: 30px;

    /* === BREAKPOINTS RESPONSIVE === */
    /*
    Breakpoints standardisés pour les media queries :
    - SM (Mobile)      : max-width: 576px
    - MD (Tablet)      : max-width: 768px
    - LG (Desktop)     : max-width: 1024px
    - XL (Large Desktop): max-width: 1200px
    - 2XL (XL Desktop) : max-width: 1440px

    Usage dans CSS :
    @media (max-width: 768px) {
        .mon-element { ... }
    }

    Usage avec classes utilitaires (utilities.css) :
    - .d-md-none      : Masquer sur tablette et moins
    - .flex-sm-column : Flexbox colonne sur mobile
    - .text-md-center : Centrer le texte sur tablette
    - .w-sm-100       : Largeur 100% sur mobile
    */
}