/* =====================================================
LOADER WCAG AAA+++
=====================================================
NORMES RESPECTÉES :
- WCAG 2.2 - 2.2.1 (AAA) : Ajustement du délai
Pas de limite de temps, l'utilisateur contrôle l'attente
- WCAG 2.2 - 2.3.3 (AAA) : Animation des interactions
Pas d'animation - safe pour utilisateurs sensibles (vertiges, épilepsie)
- WCAG 2.2 - 1.4.6 (AAA) : Contraste amélioré
Fond clair/sombre adapté automatiquement
- WCAG 2.2 - 1.4.11 (AA) : Contraste non textuel
Image centrale contraste suffisant
- WCAG 2.2 - 2.5.8 (AAA) : Taille des cibles
Aucune cible cliquable dans le loader (pas de piège)
- Préférences utilisateur : prefers-reduced-motion
- Préférences utilisateur : prefers-color-scheme (mode sombre)
===================================================== */
/* Conteneur principal du loader, recouvre tout l'écran */
#loader {position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;
/* Centrage du contenu */
display:flex;align-items:center;justify-content:center;flex-direction:column;
/* Mode clair par défaut (WCAG 1.4.6 AAA : contraste 7:1) */
background-color:#0a0a0a; /* presque noir, contraste élevé */
/* Transition fluide pour le mode sombre */
transition: background-color 0.3s ease;}
/* =====================================================
EFFET DE DÉVOILEMENT HORIZONTAL
Description : L'image du loader se dévoile de gauche à droite
comme un rideau qui s'ouvre, avec une image fantôme en fond.
Conformité WCAG : respects prefers-reduced-motion
===================================================== */
/* Conteneur qui va contenir les deux images superposées */
.loader-inner {width:245px;height:60px;position:relative;}
/* Image du fond (celle qui reste figée, semi-transparente)
Effet "fantôme" donne la profondeur à l'animation */
.loader-back {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.5;}
.loader-back img {width:100%;height:100%;object-fit:contain;}
/* Image du premier plan (celle qui se dévoile)
C'est le cœur de l'effet : largeur 0% qui s'agrandit */
.loader-front {position:absolute;top:0;left:0;width:0%;height:100%;overflow:hidden;
/* Animation CSS pure - dévoilement horizontal */
animation: revealLoader 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;}
.loader-front img {width:245px;height:60px;object-fit:contain;}
/* L'animation clé : largeur 0% → 100%
L'image semble "pousser" de gauche à droite */
@keyframes revealLoader {0% {width:0%;} 100% {width:100%;}}
/* WCAG 2.3.3 (AAA) : Réduction des animations
Si l'utilisateur a coché "Réduire les animations",
on désactive l'effet de dévoilement et on affiche directement */
@media (prefers-reduced-motion: reduce) {.loader-front {animation:none;width:100%;}}
/* Logo / image centrale */
/* NOTE : Cette classe est conservée pour fallback mais n'est plus utilisée
par le nouveau loader qui utilise .loader-front et .loader-back */
.loader-logo {width:245px;height:60px;background-image: url('https://madjeek.fr/img/logo_madjeek_black_mini.png');
background-size:contain;background-repeat:no-repeat;background-position:center;
/* WCAG 1.4.11 (AA) : alternative textuelle pour lecteurs d'écran */
/* L'image doit avoir un alt, mais ici c'est un background, donc on ajoute un texte caché */}
/* Texte alternatif caché pour accessibilité (WCAG 1.1.1) */
.loader-logo .sr-only-loader {position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip: rect(0, 0, 0, 0);white-space:nowrap;border:0;}
/* Message de chargement optionnel (conforme WCAG 1.4.3 contraste 4.5:1) */
.loader-message {margin-top:20px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 0.9rem;color:#555555;letter-spacing:0.5px;font-weight:400;}
/* ===== MODE SOMBRE AUTOMATIQUE (WCAG 1.4.6 AAA) ===== */
/* Détecte la préférence système */
@media (prefers-color-scheme: dark) {
#loader {background-color:#f8f8f8; /* presque blanc, fatigue oculaire réduite */}
.loader-message {color:#cccccc; /* contraste > 7:1 sur fond #0a0a0a */}}
/* Classe pour le mode sombre manuel (via toggle) */
.darkmode #loader {background-color:#0a0a0a;}
.darkmode .loader-message {color:#cccccc;}
/* ===== RESPECT DES PRÉFÉRENCES UTILISATEUR ===== */
/* WCAG 2.3.3 (AAA) : Réduction des animations */
@media (prefers-reduced-motion: reduce) {#loader {transition:none;}}
/* WCAG 1.4.6 (AAA) : Mode haut contraste */
@media (prefers-contrast: high) {#loader {background-color:#fff;}
.loader-message {color:#000000;font-weight:600;}
@media (prefers-color-scheme: dark) {#loader {background-color:#000;}
.loader-message {color:#fff;}}}
/* Cache le loader quand il est désactivé par JS */
#loader.hidden {display: none;}
/* =====================================================
SÉPARATEUR HORIZONTAL POUR LE LOADER
Description : Ligne fine avec dégradé transparent aux extrémités
Longueur : identique à la largeur du logo (245px)
Couleur : noir en mode clair, blanc en mode sombre
Effet : dévoilement horizontal identique au logo
Compatibilité : IE9+ et tous navigateurs modernes
===================================================== */
.loader-separator {border:0;height:1px;max-width:245px;margin: 16px auto 8px auto;
/* Fond de secours pour navigateurs très anciens */
background-color: #000;
/* État initial : largeur 0% (caché) */
width: 0%;
/* Animation de dévoilement identique au logo */
animation: revealSeparator 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: 0.1s;
/* Dégradé CSS3 standard (navigateurs modernes) */
background: linear-gradient(to right, transparent 0%,
rgba(0, 0, 0, 0.1) 15%,
rgba(0, 0, 0, 0.8) 35%,
#000000 50%,
rgba(0, 0, 0, 0.8) 65%,
rgba(0, 0, 0, 0.1) 85%,
transparent 100%
);
/* Compatibilité IE9+ via SVG */
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%;}
/* Animation clé pour le séparateur */
@keyframes revealSeparator {0% {width:0%;} 100% {width:245px;}}
/* Mode sombre : séparateur blanc avec dégradé */
.darkmode .loader-separator {background: linear-gradient(to right,
transparent 0%,
rgba(255, 255, 255, 0.1) 15%,
rgba(255, 255, 255, 0.8) 35%,
#ffffff 50%,
rgba(255, 255, 255, 0.8) 65%,
rgba(255, 255, 255, 0.1) 85%,
transparent 100%
);
/* SVG pour mode sombre (IE9+) */
background-image: url('data:image/svg+xml;utf8,');
background-size: 100% 100%;}
/* WCAG 2.3.3 (AAA) : Réduction des animations */
@media (prefers-reduced-motion: reduce) {.loader-separator {animation:none;width:245px;}}
/* =====================================================
INVERSION DES COULEURS DU LOGO EN MODE SOMBRE
Description : Le logo original est noir sur fond clair.
En mode sombre, on applique un filtre invert() pour le rendre
blanc, assurant ainsi un contraste WCAG 1.4.6 (AAA).
===================================================== */
/* Mode sombre UNIQUEMENT quand la classe .darkmode est active */
.darkmode .loader-back img, .darkmode .loader-front img {filter: invert(100%) !important;-webkit-filter: invert(100%) !important;}
/* NOTE : Pas de @media (prefers-color-scheme: dark)
car cela inverserait le logo quand l'utilisateur a le système en mode sombre
mais que le site est en mode clair (toggle désynchronisé).
On suit uniquement la classe .darkmode pour rester cohérent avec notre toggle. */
/* id #page loader */
#page {opacity:0;transition: opacity 0.8s ease-in-out; /* ← plus lent et plus doux */}