Mode Nocturne

📖 Documentation du Widget Mode Nocturne Intelligent - Metal Rouge SAMR

Vue d'ensemble

Le widget Mode Nocturne Intelligent est un composant Elementor avancé qui permet aux visiteurs de basculer entre les modes clair et sombre du site. Il dispose d'une technologie intelligente de conversion automatique des couleurs, ombres et logos pour offrir une expérience utilisateur optimale sur tous les appareils.

---

🚀 Fonctionnalités principales

✨ Interface adaptive intelligente

• Mode responsive automatique : Bascule entre slider (desktop) et bouton compact (mobile)

• Conversion intelligente des couleurs : Transforme automatiquement les couleurs claires en équivalents sombres

• Gestion avancée des ombres : Convertit les ombres pour une meilleure visibilité en mode sombre

• Changement automatique de logos : Bascule entre logos clair et sombre selon le mode

🎨 Modes d'affichage flexibles

• Mode Slider : Interface élégante avec texte et curseur animé (recommandé desktop)

• Mode Bouton : Bouton compact avec icônes et info-bulle (optimal mobile)

• Mode Automatique : Adaptation intelligente selon la taille d'écran

🧠 Technologie intelligente

• Préservation des couleurs de marque : Maintient les couleurs rouge Metal Rouge intactes

• Protection des textes blancs : Évite la conversion des textes blancs en gris

• Conversion d'intensité réglable : Contrôle précis de la force de conversion

• Mémoire utilisateur : Se souvient de la préférence du visiteur

---

📋 Installation et ajout du widget

Prérequis

• WordPress 5.0+

• Elementor Pro 3.0+

• Plugin Metal Rouge SAMR Extension activé

Ajout sur une page

1. Ouvrir l'éditeur Elementor sur votre page

2. Rechercher "Mode Nocturne Intelligent" dans le panneau widgets

3. Glisser-déposer le widget dans votre section (généralement en header)

4. Le widget se trouve dans "Metal Rouge SAMR"

---

⚙️ Configuration du contenu

🎯 Onglet Contenu > Contenu

Textes personnalisés

Texte Mode Clair : "LIGHT MODE" (par défaut)
Texte Mode Sombre : "DARK MODE" (par défaut)

Conseils :
• Garder les textes courts (8-12 caractères max)
• Utiliser des termes simples : "CLAIR/SOMBRE", "JOUR/NUIT"
• Éviter les accents pour l'uniformité

Options d'affichage

Afficher le texte : Oui (recommandé)
- Désactiver uniquement si manque d'espace
- Le texte aide à comprendre la fonction

Afficher les icônes : Oui (obligatoire pour mode bouton)
- Icônes soleil/lune universellement comprises
- Essentielles pour l'accessibilité

Alignement

Alignement : Centre (par défaut)
- Gauche : Pour header aligné à gauche
- Centre : Position standard (recommandé)
- Droite : Pour header aligné à droite

🎨 Onglet Contenu > Configuration des Logos

Activation du changement de logos

Activer le changement de logo : Non (par défaut)
- Activer uniquement si vous avez deux versions de votre logo
- Nécessite un logo spécifique pour le mode sombre

Configuration des sélecteurs (si activé)

Sélecteur du Logo : ".site-logo img, .custom-logo, .logo img" (par défaut)
- Sélecteurs CSS des éléments de logo à modifier
- Un sélecteur par ligne ou séparés par des virgules
- Exemples courants :
  • .site-logo img (thème standard)
  • .custom-logo (WordPress par défaut)
  • .elementor-widget-image img (images Elementor)
  • #logo img (ID personnalisé)

Images des logos

Logo Mode Clair : Optionnel
- Si non défini, utilise le logo original
- Recommandé : version colorée ou sombre du logo

Logo Mode Sombre : Obligatoire (si fonction activée)
- Version claire/blanche du logo
- Doit contraster avec les arrière-plans sombres
- Format recommandé : PNG avec transparence

Options d'animation

Durée de transition logo : 600ms (par défaut)
- 200-400ms : Transition rapide
- 500-800ms : Transition normale (recommandé)
- 900-1500ms : Transition lente

Effet de transition :
• Fondu : Transition douce et classique (recommandé)
• Glissement : Mouvement horizontal
• Échelle : Zoom in/out
• Retournement : Effet 3D spectaculaire

📱 Onglet Contenu > Mode d'Affichage Responsive

Mode responsive intelligent

Mode Responsive : Automatique (recommandé)

Automatique :
• Desktop (≥768px) : Mode slider avec texte
• Mobile (<768px) : Mode bouton compact
• Transition fluide entre les modes

Slider uniquement :
• Interface slider sur tous les appareils
• Peut être trop large sur mobile

Bouton uniquement :
• Interface bouton compact partout
• Moins informatif mais plus discret

Configuration des breakpoints

Breakpoint pour Mode Bouton : Mobile (par défaut)

Mobile (< 768px) :
• Transition sur smartphones uniquement
• Conserve le slider sur tablettes

Tablette et Mobile (< 1025px) :
• Transition dès les tablettes
• Interface bouton plus tôt

Personnalisé :
• Définir un seuil précis en pixels
• Utile pour des layouts spécifiques

Paramètres du mode bouton

Taille du Bouton : 50px (par défaut)
- 40-50px : Compact pour headers fins
- 50-60px : Taille standard (recommandé)
- 60-80px : Plus visible, nécessite plus d'espace

Afficher l'info-bulle : Oui (recommandé)
- Explique la fonction au survol
- Améliore l'accessibilité
- Personnalisable selon le mode

🧠 Onglet Contenu > Configuration Intelligente

Conversion automatique des couleurs

Conversion Intelligente des Couleurs : Oui (recommandé)
- Transforme automatiquement les couleurs claires en sombres
- Essentiel pour une expérience cohérente
- Désactiver uniquement si problèmes spécifiques

Préservation intelligente

Préserver les Textes Blancs : Oui (recommandé)
- Empêche la conversion des textes blancs en gris
- Maintient la lisibilité optimale
- Luminosité réglable : 96% (optimal)

Préserver les Couleurs de Marque : Oui (obligatoire)
- Conserve le rouge Metal Rouge intact
- Maintient l'identité visuelle
- Préserve aussi les couleurs d'accent

Conversion des ombres

Conversion Intelligente des Ombres : Oui (recommandé)
- Transforme les ombres sombres en ombres claires
- Améliore la visibilité en mode sombre
- Opacité des ombres claires : 20% (optimal)

Intensité de conversion

Intensité de Conversion : 85% (par défaut)
- 70-80% : Conversion douce, moins de contraste
- 85-90% : Conversion normale (recommandé)
- 90-100% : Conversion forte, maximum de contraste

Overlay Images : 30% (par défaut)
- Ajoute un filtre sombre sur les images
- 0% : Pas d'overlay (images inchangées)
- 30-50% : Overlay subtil (recommandé)
- 50%+ : Overlay marqué, peut assombrir trop

---

🎨 Personnalisation visuelle

🎭 Onglet Style > Taille et Proportions

Échelle générale

Échelle du widget : 1 (par défaut)
- Desktop : 1 (taille normale)
- Tablette : 0.9 (légèrement réduit)
- Mobile : 0.8 (compact pour petit écran)

Ajustement selon l'espace :
• 0.7-0.8 : Headers très fins
• 0.9-1 : Headers normaux (recommandé)
• 1.1-1.3 : Headers larges, widget en vedette

Forme et ombres

Rayon des bordures : 30px (par défaut)
- 0px : Coins droits, style moderne
- 15-25px : Légèrement arrondi
- 30-40px : Arrondi standard (recommandé)
- 50px : Complètement rond (pilule)

Ombre : Personnalisable
- Par défaut : Ombre subtile pour le relief
- Ajuster selon l'arrière-plan du header

🎨 Onglet Style > Couleurs

Arrière-plans

Arrière-plan Mode Clair : #e5e7eb (gris clair)
- Doit contraster avec le header clair
- Éviter le blanc pur (manque de contraste)

Arrière-plan Mode Sombre : #374151 (gris foncé)
- Doit contraster avec le header sombre
- Plus foncé que l'arrière-plan du site

Couleurs de texte

Couleur Texte Mode Clair : #6b7280 (gris moyen)
- Lisible sur l'arrière-plan clair
- Contraste minimum 4.5:1

Couleur Texte Mode Sombre : #9ca3af (gris clair)
- Lisible sur l'arrière-plan sombre
- Éviter le blanc pur (éblouissant)

Éléments interactifs

Couleur du Slider/Icônes : Personnalisable
- Slider : #ffffff (blanc) par défaut
- Icônes : #6b7280 (gris) par défaut
- Harmoniser avec la charte graphique

📝 Onglet Style > Animation

Fluidité des transitions

Durée de transition : 600ms (par défaut)
- 200-400ms : Très rapide, efficace
- 500-700ms : Normal, agréable (recommandé)
- 800-1000ms : Lent, dramatique

Effets de survol : Oui (recommandé)
- Feedback visuel au survol
- Améliore l'interactivité
- Désactiver si conflits avec le thème

---

📱 Comportement intelligent selon l'appareil

🎯 Adaptation automatique

Desktop (≥768px)

Interface : Mode Slider
• Affichage du texte "LIGHT MODE" / "DARK MODE"
• Curseur animé avec icônes soleil/lune
• Largeur adaptée au contenu
• Interaction par clic ou clavier

Navigation :
• Clic sur le widget pour basculer
• Tabulation + Entrée accessible
• Feedback visuel au survol

Mobile (<768px)

Interface : Mode Bouton (automatique)
• Bouton compact circulaire
• Icônes soleil/lune uniquement
• Info-bulle au tap/hover
• Optimisé pour le tactile

Spécificités mobiles :
• Taille tactile respectée (44px minimum)
• Pas de texte pour économiser l'espace
• Animation adaptée aux gestes tactiles

🧠 Intelligence de conversion

Détection automatique

Le système détecte et convertit automatiquement :
• Arrière-plans clairs → arrière-plans sombres
• Textes sombres → textes clairs
• Ombres sombres → ombres claires avec opacité adaptée
• Bordures claires → bordures sombres

Éléments préservés automatiquement :
• Couleurs rouge Metal Rouge (#dc2626, #ef4444, etc.)
• Textes blancs (maintenus blancs avec luminosité ajustée)
• Images (avec overlay optionnel)
• Couleurs d'accent définies

Mémorisation utilisateur

Préférence sauvegardée :
• localStorage du navigateur
• Persistante entre les sessions
• Respecte le choix utilisateur
• Détection de préférence système (prefers-color-scheme)

---

💡 Bonnes pratiques d'utilisation

🎯 Placement optimal

Position recommandée

• Header principal : Position idéale, toujours visible

• Menu de navigation : Intégration naturelle avec les liens

• Sidebar : Alternative si header encombré

• Footer : Moins optimal, peu visible

Intégration harmonieuse

• Alignement : Cohérent avec les autres éléments du header

• Espacement : Marges suffisantes pour éviter le chevauchement

• Hiérarchie : Pas trop proéminent par rapport au logo/navigation

🎨 Configuration optimale

Paramètres recommandés pour la plupart des sites

Mode Responsive : Automatique
Conversion Intelligente : Activée
Préserver Textes Blancs : Oui (96%)
Préserver Couleurs Marque : Oui
Intensité Conversion : 85%
Afficher Texte : Oui
Afficher Icônes : Oui
Durée Transition : 600ms

Configuration logos (si applicable)

Logos obligatoires :
• Logo mode sombre (version claire/blanche)
• Effet de transition : Fondu
• Durée : 600ms
• Préserver attributs : Oui

Sélecteurs typiques à tester :
• .site-logo img
• .custom-logo
• .elementor-widget-image img

⚡ Performance et accessibilité

Optimisation technique

• Un seul widget par page : Éviter les doublons

• Placement header : Chargement prioritaire

• Mode automatique : Laisse le système optimiser

Accessibilité garantie

• Navigation clavier : Tab + Entrée fonctionnels

• Labels ARIA : Descriptions automatiques

• Contrastes respectés : Conformité WCAG 2.1

• Info-bulles : Explicatives sur mobile

---

📝 Guide de configuration rapide

➕ Installation basique (5 minutes)

1. Glisser le widget dans le header de votre site

2. Conserver les paramètres par défaut (déjà optimaux)

3. Ajuster les couleurs selon votre charte graphique

4. Tester sur desktop et mobile

5. Publier et vérifier le fonctionnement

🎨 Configuration avec logos (10 minutes)

1. Activer "Changement de logo" dans l'onglet Configuration des Logos

2. Uploader votre logo mode sombre (version claire/blanche)

3. Configurer le sélecteur : commencer par .site-logo img

4. Tester le changement : activer/désactiver le mode sombre

5. Ajuster les sélecteurs si le logo ne change pas

6. Finaliser avec durée/effet de transition souhaités

🔧 Personnalisation avancée (15 minutes)

1. Ajuster l'intensité de conversion selon vos couleurs

2. Configurer les breakpoints selon votre design responsive

3. Personnaliser les textes et info-bulles

4. Optimiser la taille selon l'espace disponible

5. Harmoniser les couleurs avec votre thème

6. Tester l'accessibilité (navigation clavier, contrastes)

✅ Vérification finale

• Widget visible et bien positionné sur desktop et mobile

• Basculement fonctionnel entre modes clair et sombre

• Logos changent correctement (si configuré)

• Couleurs harmonieuses avec la charte graphique

• Navigation clavier opérationnelle (Tab + Entrée)

• Conversion intelligente préserve les couleurs importantes

• Performance satisfaisante sur tous les appareils