/**
 * ═══════════════════════════════════════════════════════════════════════════
 * HEADER - SCROLLBAR PERSONNALISÉE
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * OBJECTIF:
 * Remplacer la scrollbar par défaut du navigateur par une scrollbar personnalisée
 * avec un gradient rose/violet qui correspond à l'identité visuelle du site.
 * 
 * POURQUOI PERSONNALISER LA SCROLLBAR ?
 * - Cohérence visuelle avec le design du site
 * - Meilleure expérience utilisateur (plus visible, plus jolie)
 * - Renforce l'identité de marque
 * 
 * COMPATIBILITÉ:
 * - Firefox: scrollbar-width et scrollbar-color (standard W3C)
 * - Chrome/Edge/Safari: ::-webkit-scrollbar (propriétaire Webkit)
 * 
 * CHARGEMENT: Immédiat (critique)
 * TAILLE: 1.5 KB
 * 
 * COULEURS UTILISÉES:
 * - #FF6FB1 : Rose principal
 * - #A56BFF : Violet
 * - #FF8FC4 : Rose clair
 * - #1a1a1a : Fond sombre
 * - #2a2a2a : Bordure sombre
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR FIREFOX (STANDARD W3C)
   ═══════════════════════════════════════════════════════════════════════════
   Firefox utilise les propriétés standard scrollbar-width et scrollbar-color
   définies par le W3C. C'est la méthode recommandée mais pas encore supportée
   par tous les navigateurs.
   
   scrollbar-width: thin  → Scrollbar fine (8px au lieu de 16px par défaut)
   scrollbar-color: thumb track → Couleur du curseur et de la piste
*/
html, body {
    scrollbar-width: thin !important;
    scrollbar-color: #FF6FB1 #1a1a1a !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR WEBKIT (CHROME, EDGE, SAFARI)
   ═══════════════════════════════════════════════════════════════════════════
   Les navigateurs basés sur Webkit/Blink (Chrome, Edge, Safari, Opera)
   utilisent des pseudo-éléments ::-webkit-scrollbar pour personnaliser
   la scrollbar. C'est une API propriétaire mais très puissante.
   
   STRUCTURE:
   ::-webkit-scrollbar        → La scrollbar entière (largeur/hauteur)
   ::-webkit-scrollbar-track  → La piste (fond) de la scrollbar
   ::-webkit-scrollbar-thumb  → Le curseur (partie mobile)
   ::-webkit-scrollbar-corner → Le coin (quand scrollbar H et V se croisent)
*/

/* ───────────────────────────────────────────────────────────────────────────
   Largeur et hauteur de la scrollbar
   ───────────────────────────────────────────────────────────────────────────
   16px est une bonne taille : assez large pour être facile à attraper,
   mais pas trop large pour ne pas gêner le contenu
*/
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 16px !important;
    height: 16px !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   Piste de la scrollbar (fond)
   ───────────────────────────────────────────────────────────────────────────
   La piste est le fond sur lequel le curseur se déplace.
   On lui donne un fond sombre (#1a1a1a) avec une bordure légèrement plus claire.
*/
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: #1a1a1a !important;
    border-radius: 10px !important;
    border: 2px solid #2a2a2a !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   Curseur de la scrollbar (partie mobile)
   ───────────────────────────────────────────────────────────────────────────
   Le curseur est la partie que l'utilisateur attrape pour faire défiler.
   On utilise un gradient linéaire avec 3 couleurs pour un effet dégradé:
   - Rose (#FF6FB1) à 0%
   - Violet (#A56BFF) à 50%
   - Rose clair (#FF8FC4) à 100%
   
   Le box-shadow crée un effet de lueur autour du curseur.
   La bordure de 3px crée un espace entre le curseur et la piste.
*/
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #FF6FB1 0%, #A56BFF 50%, #FF8FC4 100%) !important;
    border-radius: 10px !important;
    border: 3px solid #1a1a1a !important;
    box-shadow: 
        0 0 10px rgba(255, 111, 177, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   Curseur au survol (hover)
   ───────────────────────────────────────────────────────────────────────────
   Quand l'utilisateur survole le curseur avec la souris, on inverse le gradient
   et on augmente l'intensité de la lueur pour un effet interactif.
   
   Le transform: scale(1.05) agrandit légèrement le curseur (5%) pour donner
   un feedback visuel que l'élément est interactif.
*/
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #FF8FC4 0%, #FF6FB1 50%, #A56BFF 100%) !important;
    box-shadow: 
        0 0 15px rgba(255, 111, 177, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   Coin de la scrollbar
   ───────────────────────────────────────────────────────────────────────────
   Le coin apparaît quand il y a une scrollbar horizontale ET verticale.
   On lui donne la même couleur que la piste pour la cohérence.
*/
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
    background: #1a1a1a !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN DU FICHIER
   ═══════════════════════════════════════════════════════════════════════════
   
   RÉSUMÉ:
   Ce fichier personnalise la scrollbar pour tous les navigateurs avec un
   gradient rose/violet qui correspond à l'identité visuelle du site.
   
   COMPATIBILITÉ:
   ✅ Chrome/Edge/Opera (Webkit)
   ✅ Firefox (Standard W3C)
   ✅ Safari (Webkit)
   ⚠️ Internet Explorer (non supporté, scrollbar par défaut)
   
   MAINTENANCE:
   Pour changer les couleurs, modifiez les valeurs hexadécimales:
   - #FF6FB1 : Rose principal
   - #A56BFF : Violet
   - #FF8FC4 : Rose clair
   
   DERNIÈRE MISE À JOUR: 6 mai 2026
   ═══════════════════════════════════════════════════════════════════════════
*/