/**
 * DESIGN SYSTEM - Langevin Aventure
 * Variables CSS et styles de base inspirés du site RESA
 * Version moderne avec CSS custom properties
 */

/* ========================================
   FONTS - Déclarations des polices
   ======================================== */

/* Poppins Light (300) */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-v23-latin-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Poppins Regular (400) */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-v23-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Poppins SemiBold (600) */
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins-v23-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Asap Condensed Regular */
@font-face {
    font-family: 'Asap Condensed';
    src: url('../fonts/asap-condensed-v17-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Asap Condensed SemiBold (600) */
@font-face {
    font-family: 'Asap Condensed';
    src: url('../fonts/asap-condensed-v17-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

/* ========================================
   VARIABLES CSS (DESIGN TOKENS)
   ======================================== */

:root {
    /* === COULEURS === */
    
    /* Couleurs principales */
    --color-primary: #2d6e78;          /* Bleu-vert principal (top-bar) */
    --color-primary-dark: #1c535e;     /* Bleu-vert foncé (bordures, flèches) */
    --color-primary-medium: #3A6F7E;   /* Bleu-vert moyen (texte menu) */
    --color-primary-light-alpha: #8EB0B9; /* Bleu-vert clair (headers boxes) */
    --color-primary-light-box: #D3E5E9;    /* Bleu-vert très clair (activity boxes) */
    --color-primary-darker: #1f3b42;   /* Bleu-vert très foncé (footer) */
    --color-primary-darkest: #192f35;  /* Bleu-vert noir (bottom-bar) */
    
    /* Bordures */
    --color-border-primary: #A7C3CB;   /* Bordure bleu-vert clair */
    --color-border-light: #E8F4F8;     /* Bordure très claire */
    
    /* Couleurs d'action */
    --color-accent: #ff7f27;           /* Orange principal (boutons CTA) */
    --color-accent-light: #f5a742;     /* Orange clair (contact info) */
    --color-accent-hover: #e06f20;     /* Orange foncé (hover) */
    --color-accent-alt: #ff8000;       /* Orange alternatif */
    
    /* Couleurs neutres */
    --color-white: #ffffff;
    --color-white-alpha-high: rgba(255, 255, 255, 0.89); /* Blanc semi-transparent */
    --color-white-alpha-medium: rgba(255, 255, 255, 0.92); /* Blanc presque opaque */
    --color-background: #f9f9f9;
    --color-background-alt: #EFEFEF;
    --color-background-medium: #edeeeb;
    --color-gray-light: #eee;
    --color-gray: #666;
    --color-text: #333;
    --color-text-dark: #003B59;
    --color-text-light: #1c535e;
    
    /* === COULEURS ADMIN === */
    
    /* Couleurs par type de page admin */
    --color-admin-users: #dc3545;        /* Rouge pour utilisateurs */
    --color-admin-users-dark: #c82333;
    --color-admin-guides: #28a745;       /* Vert pour guides */
    --color-admin-guides-dark: #218838;
    --color-admin-sports: #007bff;       /* Bleu pour sports */
    --color-admin-sports-dark: #0056b3;
    
    /* Couleurs par type de rôle */
    --color-admin-agencies: #ffc107;     /* Jaune pour agences */
    --color-admin-agencies-dark: #e0a800;
    --color-admin-admins: #dc3545;       /* Rouge pour admins */
    --color-admin-admins-dark: #c82333;
    --color-admin-webmasters: #6f42c1;   /* Violet pour webmasters */
    --color-admin-webmasters-dark: #5a32a3;

    /* === ALIASES (compat admin legacy) === */
    /* Utilisés par plusieurs CSS admin (reservations, analytics, etc.) */
    --primary-color: var(--color-blue-900);
    --secondary-color: var(--color-blue-500);
    --success-color: #22c55e;
    --error-color: var(--color-red-500);
    --color-error: var(--error-color);
    --color-error-dark: var(--color-red-600);
    --text-primary: var(--color-slate-800);
    --text-secondary: var(--color-slate-500);
    --bg-primary: var(--color-white);
    --bg-tertiary: var(--color-slate-100);
    --border-color: var(--color-slate-200);
    --border-color-light: var(--color-slate-100);
    
    /* === COULEURS SYSTÈME === */
    
    /* Couleurs pour les messages et états */
    --color-success: #28a745;            /* Vert succès */
    --color-success-dark: #218838;
    --color-danger: #dc3545;             /* Rouge danger */
    --color-danger-dark: #c82333;
    --color-warning: #ffc107;            /* Jaune warning */
    --color-warning-dark: #e0a800;
    --color-info: #17a2b8;               /* Bleu info */
    --color-info-dark: #117a8b;
    
    /* Couleurs de fond pour messages */
    --color-background-success: #d4edda;
    --color-background-error: #f8d7da;
    --color-background-warning: #fff3cd;
    --color-background-info: #d1ecf1;
    
    /* Couleurs de bordure pour alertes */
    --color-border-success: #badbcc;
    --color-border-error: #f5c2c7;
    --color-border-warning: #ffecb5;
    --color-border-info: #b6effb;
    
    /* Couleurs de texte sur fonds colorés */
    --color-text-on-success: #155724;
    --color-text-on-error: #721c24;
    --color-text-on-warning: #856404;
    --color-text-on-info: #0c5460;
    
    /* Couleurs boutons secondaires (gris Bootstrap) */
    --color-secondary: #6c757d;
    --color-secondary-dark: #5a6268;
    --color-secondary-darker: #545b62;
    
    /* Couleurs désactivées */
    --color-disabled: #a0a0a0;
    --color-disabled-dark: #808080;
    
    /* Couleurs spécifiques pour alertes Google OAuth */
    --color-google-error: #ff7f27;           /* Orange principal pour erreur Google */
    --color-google-error-bg: #fff3e0;        /* Fond orange très clair */
    --color-google-error-text: #e65100;      /* Texte orange foncé */
    --color-google-error-border: #ff7f27;    /* Bordure orange */
    
    /* === COULEURS SPÉCIFIQUES === */
    
    /* Nuances de gris supplémentaires */
    --color-gray-50: #f8f9fa;
    --color-gray-100: #f1f1f1;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #888;
    --color-gray-700: #666;
    --color-gray-800: #555;
    --color-gray-900: #333;
    
    /* Gris spécifiques pour formulaires */
    --color-border-gray: #BDBDBD;           /* Bordure input par défaut */
    --color-border: #dee2e6;                /* Bordure générique (cartes, modals) */
    --color-label-gray: #757575;            /* Label et helper text */
    --color-placeholder-gray: #BDBDBD;      /* Placeholder */
    --color-tooltip-gray: #424242;          /* Fond tooltip sombre */
    
    /* Couleur focus (bleu Material Design compatible) */
    --color-focus: #667eea;                 /* Bleu violet au focus */
    
    /* Couleurs secondaires pour UI */
    --color-text-secondary: #666;           /* Texte secondaire (gris moyen) */
    --color-background-secondary: #f5f5f5;  /* Fond secondaire (gris très clair) */
    
    /* === PALETTE SLATE (Admin UI, neutres modernes) === */
    
    --color-slate-50:  #f8fafc;             /* Fond très clair */
    --color-slate-100: #f1f5f9;             /* Fond clair */
    --color-slate-200: #e2e8f0;             /* Bordures claires */
    --color-slate-300: #cbd5e1;             /* Bordures */
    --color-slate-400: #94a3b8;             /* Icônes */
    --color-slate-500: #64748b;             /* Texte secondaire */
    --color-slate-600: #475569;             /* Texte moyen */
    --color-slate-700: #334155;             /* Texte important */
    --color-slate-800: #1e293b;             /* Texte foncé / headers */
    --color-slate-900: #0f172a;             /* Texte quasi-noir */
    
    /* === PALETTE BLEUE (Admin, liens, accents) === */
    
    --color-blue-100: #dbeafe;              /* Fond badge bleu */
    --color-blue-200: #bfdbfe;              /* Bordure badge bleu */
    --color-blue-500: #3b82f6;              /* Bleu lien / accent */
    --color-blue-600: #2563eb;              /* Bleu bouton */
    --color-blue-700: #1d4ed8;              /* Bleu foncé */
    --color-blue-800: #1e40af;              /* Bleu texte sur fond bleu */
    --color-blue-900: #1e3a8a;              /* Bleu profond (headers admin) */
    
    /* === PALETTE ROUGE DOUCE (Erreurs modernes) === */
    
    --color-red-50:  #fef2f2;               /* Fond notification erreur */
    --color-red-100: #fee2e2;               /* Fond alerte rouge */
    --color-red-500: #ef4444;               /* Rouge doux (vs dc3545 Bootstrap) */
    --color-red-600: #dc2626;               /* Rouge bouton */
    --color-red-800: #991b1b;               /* Texte sur fond rouge */
    
    /* === PALETTE VERTE (Succès étendu) === */
    
    --color-green-50:  #f0fdf4;             /* Fond succès clair */
    --color-green-100: #dcfce7;             /* Fond badge vert */
    --color-green-500: #10b981;             /* Vert emerald */
    --color-green-600: #16a34a;             /* Vert bouton */
    --color-green-800: #166534;             /* Texte sur fond vert */
    
    /* === PALETTE AMBRE (Warnings modernes) === */
    
    --color-amber-50:  #fffbeb;             /* Fond warning */
    --color-amber-500: #f59e0b;             /* Ambre badge/warning */
    --color-amber-800: #92400e;             /* Texte sur fond ambre */
    
    /* === COULEURS ACCENT SUPPLÉMENTAIRES === */
    
    --color-orange-500: #ff6b35;            /* Orange secondaire CTA */
    --color-purple-600: #764ba2;            /* Violet (gradient, privatisation) */
    --color-purple-500: #7c3aed;            /* Violet vif */
    
    /* Gris complémentaires */
    --color-gray-150: #e5e7eb;              /* Gris clair bordure (entre 100 et 200) */
    --color-gray-350: #d1d5db;              /* Gris moyen bordure */
    
    /* Debug & développement */
    --color-debug-gradient-start: #e0f7fa;
    --color-debug-gradient-end: #e8f5e9;
    --color-debug-accent: #11998e;
    --color-debug-border: #00bcd4;
    
    /* Environnement warnings */
    --color-env-warning: #ffd700;
    --color-env-warning-light: #ffed4e;
    --color-env-warning-dark: #f0c000;
    
    /* === COULEURS SPÉCIFIQUES EMAILS === */
    
    /* Fonds pour emails */
    --color-email-background-tint: #fef5f0;   /* Orange très léger pour fond email */
    --color-email-background-info: #e7f3ff;   /* Bleu très léger pour info email */
    
    /* Texte pour emails */
    --color-email-text-light: #999999;        /* Gris clair pour texte secondaire email */
    
    /* Bordures pour emails */
    --color-email-border-light: #eeeeee;      /* Bordure légère */
    --color-email-border-medium: #dddddd;     /* Bordure moyenne */
    
    /* === TYPOGRAPHIE === */
    
    /* Familles de polices */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Asap Condensed', 'Arial Narrow', sans-serif;
    
    /* Tailles de police */
    --font-size-small: 12px;
    --font-size-base: 16px;
    --font-size-medium: 18px;
    --font-size-large: 19px;
    --font-size-h1: 20px;
    --font-size-h2: 18px;
    
    /* Poids de police */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* === ESPACEMENTS === */
    
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    
    /* === DIMENSIONS === */
    
    --top-bar-height: 45px;
    --header-height: 80px;
    --max-width-container: 1200px;
    
    /* === BORDURES & OMBRES === */
    
    --border-radius-sm: 10px;
    --border-radius-md: 18px;
    --border-radius-full: 30px;
    
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 4px;
    
    --shadow-light: 0 2px 5px rgba(0,0,0,0.1);
    --shadow-medium: 0 8px 16px rgba(0,0,0,0.1);
    --shadow-heavy: 0 12px 24px rgba(0,0,0,0.15);
    
    /* === TRANSITIONS === */
    
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s ease;
    
    /* === OPACITÉS === */
    
    --opacity-subtle: 0.9;
    --opacity-medium: 0.7;
    --opacity-light: 0.5;
    --opacity-lighter: 0.3;
    
    /* === DIMENSIONS === */
    
    --env-banner-height: 38px;  /* Hauteur de la bannière d'environnement */
    
    /* === Z-INDEX === */
    
    --z-env-banner: 10000;  /* Barre d'environnement (doit être au-dessus de tout) */
    --z-top-bar: 50;
    --z-header: 60;
    --z-dropdown: 80;
    --z-modal: 500;
    
    /* === BREAKPOINTS (pour référence, utilisés dans @media) === */
    /* 
     * Mobile-first approach:
     * --bp-xs: 400px   (très petits écrans)
     * --bp-sm: 576px   (petits mobiles)
     * --bp-md: 768px   (tablettes portrait) ← Principal breakpoint mobile
     * --bp-lg: 992px   (tablettes paysage / petits laptops)
     * --bp-xl: 1200px  (desktops)
     * 
     * Usage recommandé:
     * @media (max-width: 768px)  → Mobile
     * @media (max-width: 480px)  → Très petit mobile
     * @media (min-width: 992px)  → Desktop only
     */
}

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

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

/* ========================================
   STYLES DE BASE
   ======================================== */

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
    
    /* Espacement pour compenser le header fixe */
    padding-top: calc(var(--top-bar-height) + var(--header-height));
    
    /* Sticky footer - footer toujours en bas même si contenu petit */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* === TYPOGRAPHIE === */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary-light);
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-base);
}

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

/* === CONTENEURS === */

.container {
    width: 100%;
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ========================================
   COMPOSANTS RÉUTILISABLES
   ======================================== */

/* === BOUTONS === */

.btn {
    display: inline-block;
    padding: 8px 20px;
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 600;
    line-height: 22px;
    text-transform: uppercase;
    border-radius: var(--border-radius-full);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* === CARTES === */

.card {
    background: var(--color-white);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-light);
    transition: transform var(--transition-base);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

/* ========================================
   ALERTES (TOASTS) - CSP friendly
   Utilisées par form-validation/validator.js (showAlert)
   ======================================== */

.la-alert-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    max-width: 500px;
    width: 90%;
}

.la-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-light);
    border: 1px solid transparent;
    animation: laAlertSlideInDown 0.25s ease-out;
}

.la-alert__message {
    margin: 0;
}

.la-alert__close {
    background: none;
    border: none;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-left: var(--spacing-sm);
    line-height: 1;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.la-alert__close:hover {
    opacity: 1;
}

.la-alert.is-hiding {
    animation: laAlertSlideOutUp 0.25s ease-out;
}

.la-alert--success {
    background: var(--color-background-success);
    border-color: var(--color-border-success);
    color: var(--color-text-on-success);
}

.la-alert--error {
    background: var(--color-background-error);
    border-color: var(--color-border-error);
    color: var(--color-text-on-error);
}

.la-alert--warning {
    background: var(--color-background-warning);
    border-color: var(--color-border-warning);
    color: var(--color-text-on-warning);
}

.la-alert--info {
    background: var(--color-background-info);
    border-color: var(--color-border-info);
    color: var(--color-text-on-info);
}

@keyframes laAlertSlideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes laAlertSlideOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ========================================
   YouTube Embed - CSP friendly
   Utilisé par js/components/youtube-lazy-load.js
   ======================================== */

.la-youtube-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-medium);
    background: var(--color-background);
}

.la-youtube-embed__iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--border-radius-sm);
}

.la-youtube-embed__error {
    padding: 2rem;
    text-align: center;
    background: var(--color-background);
    border-radius: var(--border-radius-sm);
    border: var(--border-thin) solid var(--color-border-primary);
}

.la-youtube-embed__error-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-danger);
}

.la-youtube-embed__error-title {
    margin: 0;
    font-weight: 600;
    color: var(--color-danger);
}

.la-youtube-embed__error-help {
    display: block;
    margin-top: 0.5rem;
    color: var(--color-secondary);
}

/* ============================================
   CSP helpers (pas de styles inline)
   ============================================ */

body.la-scroll-locked {
    overflow: hidden;
}

html.la-scroll-locked-modal,
body.la-scroll-locked-modal {
    overflow: hidden;
    overscroll-behavior: none;
}

body.la-scroll-locked-modal {
    position: fixed;
    top: var(--la-scroll-lock-top, 0px);
    left: 0;
    right: 0;
    width: 100%;
}

.la-z-top {
    z-index: 9999;
}

.la-cursor-pointer {
    cursor: pointer;
}

.la-code-sm {
    font-size: 0.8rem;
}

/* Stacking pour modals Bootstrap (sans style.zIndex inline) */
.modal.la-modal-stack-0 { z-index: 1055; }
.modal.la-modal-stack-1 { z-index: 1065; }
.modal.la-modal-stack-2 { z-index: 1075; }
.modal.la-modal-stack-3 { z-index: 1085; }
.modal.la-modal-stack-4 { z-index: 1095; }
.modal.la-modal-stack-5 { z-index: 1105; }
.modal.la-modal-stack-6 { z-index: 1115; }
.modal.la-modal-stack-7 { z-index: 1125; }

.modal-backdrop.la-modal-backdrop-stack-0 { z-index: 1054; }
.modal-backdrop.la-modal-backdrop-stack-1 { z-index: 1064; }
.modal-backdrop.la-modal-backdrop-stack-2 { z-index: 1074; }
.modal-backdrop.la-modal-backdrop-stack-3 { z-index: 1084; }
.modal-backdrop.la-modal-backdrop-stack-4 { z-index: 1094; }
.modal-backdrop.la-modal-backdrop-stack-5 { z-index: 1104; }
.modal-backdrop.la-modal-backdrop-stack-6 { z-index: 1114; }
.modal-backdrop.la-modal-backdrop-stack-7 { z-index: 1124; }

/* ========================================
   UTILITAIRES
   ======================================== */

.text-center {
    text-align: center;
}

.text-uppercase {
    text-transform: uppercase;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* ========================================
   TOOLTIPS (Bootstrap)
   ======================================== */

/*
 * Support tooltips sans Popper (bootstrap-shim)
 * Le tooltip est inséré DANS l'élément déclencheur (pas de style inline).
 */
.la-tooltip-anchor {
    position: relative;
}

.la-tooltip-anchor .tooltip {
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    pointer-events: none;
}

.la-tooltip-anchor .bs-tooltip-top .tooltip-arrow {
    left: 50%;
    transform: translateX(-50%);
}

.tooltip {
    position: absolute;
    z-index: 1080;
    display: block;
    margin: 0;
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: 13px;
    word-wrap: break-word;
    opacity: 0;
}

.tooltip.show {
    opacity: 1;
}

.tooltip .tooltip-arrow {
    position: absolute;
    display: block;
    width: 8px;
    height: 8px;
}

.tooltip .tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}

/* Tooltip en haut */
.bs-tooltip-top,
.bs-tooltip-auto[data-popper-placement^="top"] {
    padding: 4px 0;
}

.bs-tooltip-top .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
    bottom: 0;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    top: -1px;
    border-width: 5px 5px 0;
    border-top-color: #b2dfdb;
}

/* Tooltip à droite */
.bs-tooltip-end,
.bs-tooltip-auto[data-popper-placement^="right"] {
    padding: 0 4px;
}

.bs-tooltip-end .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
    left: 0;
    width: 4px;
    height: 8px;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    right: -1px;
    border-width: 5px 5px 5px 0;
    border-right-color: #b2dfdb;
}

/* Tooltip en bas */
.bs-tooltip-bottom,
.bs-tooltip-auto[data-popper-placement^="bottom"] {
    padding: 4px 0;
}

.bs-tooltip-bottom .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
    top: 0;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 5px 5px;
    border-bottom-color: #b2dfdb;
}

/* Tooltip à gauche */
.bs-tooltip-start,
.bs-tooltip-auto[data-popper-placement^="left"] {
    padding: 0 4px;
}

.bs-tooltip-start .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
    right: 0;
    width: 4px;
    height: 8px;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    left: -1px;
    border-width: 5px 0 5px 5px;
    border-left-color: #b2dfdb;
}

/* Contenu du tooltip */
.tooltip-inner {
    max-width: 250px;
    padding: 8px 14px;
    color: #1c535e;
    text-align: left;
    background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
    border: 1px solid rgba(45, 110, 120, 0.2);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 992px) {
    :root {
        --top-bar-height: 0px; /* Top-bar cachée sur mobile */
        --header-height: 50px;
        --font-size-base: 14px;
    }
}