/* ================================================================================ LOCOTO DESIGN SYSTEM - MODE DÉMONSTRATION ================================================================================ Version : 2.0 Date : 2026-04-28 Description : Floutage CSS léger des données financières confidentielles. Activation via la classe `demo-mode-active` sur , ajoutée par base.html quand `is_demo_mode` est True. Sécurité : - Actif pour : superuser OU admin/direction OU commercial (triple verrou : vue, context_processor, template) - Visibilité strictement personnelle (session par utilisateur) - Aucun impact métier (cosmétique pur) Stratégie de ciblage (3 niveaux additifs) : (a) AUTOMATIQUE — .demo-blur-auto Généré côté client par le moteur regex JS du widget. Détecte tout montant ou pourcentage dans le DOM (€, MAD, DH, Dhs, $, %) sans nécessiter d'énumération de classes ni de modification de templates. (b) OPT-IN classe — .demo-blur Ajout manuel pour cas exotiques non capturés par le moteur regex. (c) OPT-IN attribut — [data-sensitive="true"] Alternative sémantique, pratique pour HTML généré dynamiquement. Floutage léger : blur(5px) — visuel doux, identification de zone possible mais valeur exacte indéchiffrable. ================================================================================ */ /* ───────────────────────────────────────────────────────────────────── 1. Variables centralisées (point d'ajustement unique) ───────────────────────────────────────────────────────────────────── */ :root { --demo-blur-strength: 5px; /* Floutage léger (Q2 = "léger visuel") */ --demo-blur-transition: filter 0.25s ease-in-out; --demo-banner-bg: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%); --demo-banner-height: 28px; --demo-toggle-active-border: #f59e0b; --demo-toggle-active-bg: #fef3c7; --demo-toggle-active-color: #92400e; } /* ───────────────────────────────────────────────────────────────────── 2. Bandeau global "MODE DÉMO ACTIF" ───────────────────────────────────────────────────────────────────── */ .demo-mode-banner { /* Caché par défaut — affiché uniquement quand body.demo-mode-active */ display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; height: var(--demo-banner-height); line-height: var(--demo-banner-height); padding: 0 16px; background: var(--demo-banner-bg); color: white; text-align: center; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.025em; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); pointer-events: none; /* Le bandeau ne capte pas les clics */ user-select: none; } body.demo-mode-active .demo-mode-banner { display: block; } /* Décale le contenu de la page pour éviter que le bandeau ne masque la navbar */ body.demo-mode-active { padding-top: var(--demo-banner-height); } /* ───────────────────────────────────────────────────────────────────── 3. Bouton toggle dans la topbar ───────────────────────────────────────────────────────────────────── */ .demo-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 2px solid #9ca3af; background: #f9fafb; color: #374151; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease-in-out; } .demo-toggle-btn:hover { background: #f3f4f6; border-color: #6b7280; } .demo-toggle-btn.active { border-color: var(--demo-toggle-active-border); background: var(--demo-toggle-active-bg); color: var(--demo-toggle-active-color); } .demo-toggle-btn.active:hover { background: #fde68a; } .demo-toggle-btn i { font-size: 0.85rem; } /* ───────────────────────────────────────────────────────────────────── 4. RÈGLES DE FLOUTAGE — actives uniquement sous body.demo-mode-active ───────────────────────────────────────────────────────────────────── Couverture en 3 niveaux (additifs) : (a) AUTOMATIQUE — .demo-blur-auto Généré côté client par le moteur regex JS (cf. _demo_mode_widget.html). Couvre TOUS les montants/pourcentages affichés dans le DOM : € / MAD / DH / Dhs / $ / %. Aucune énumération de classes nécessaire, fonctionne sur tout le projet. (b) OPT-IN explicite — .demo-blur Permet d'ajouter manuellement le floutage sur un élément spécifique qui n'aurait pas été détecté automatiquement (cas exotique). (c) OPT-IN sémantique — [data-sensitive="true"] Variante par attribut, utile pour cellules de tableau ou contenus générés dynamiquement. ───────────────────────────────────────────────────────────────────── */ /* Transition fluide on/off pour tous les niveaux */ .demo-blur-auto, .demo-blur, [data-sensitive="true"] { transition: var(--demo-blur-transition); display: inline-block; /* Contient l'effet blur dans la boîte d'origine */ } /* (a) Floutage automatique généré par le moteur JS */ body.demo-mode-active .demo-blur-auto { filter: blur(var(--demo-blur-strength)); user-select: none; } /* (b) Opt-in classe — pour cas non capturés par le moteur regex */ body.demo-mode-active .demo-blur { filter: blur(var(--demo-blur-strength)); user-select: none; } /* (c) Opt-in attribut — alternative sémantique pour HTML généré */ body.demo-mode-active [data-sensitive="true"] { filter: blur(var(--demo-blur-strength)); user-select: none; } /* ───────────────────────────────────────────────────────────────────── 5. Exceptions critiques — NE JAMAIS flouter ───────────────────────────────────────────────────────────────────── */ /* (a) Champs de saisie : sinon impossible de remplir un formulaire */ body.demo-mode-active input, body.demo-mode-active textarea, body.demo-mode-active select { filter: none !important; user-select: auto !important; } /* (b) Impression : les exports HTML→PDF (Ctrl+P) doivent rester lisibles sinon la fonction d'impression devient inutilisable. Désactive le filter sur tous les éléments à l'impression. */ @media print { body.demo-mode-active * { filter: none !important; user-select: auto !important; } .demo-mode-banner { display: none !important; } body.demo-mode-active { padding-top: 0 !important; } } /* ───────────────────────────────────────────────────────────────────── 6. Réduction des animations (préférence utilisateur) ───────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body.demo-mode-active *, .demo-toggle-btn { transition: none !important; } }