/* ============================================================ * app.css — Styles inline extraits de index-optimized.html * * À ce stade, contient uniquement les overrides de la galerie * d'images (compteur d'annotations) dont la priorité visuelle * nécessite des !important pour battre le CSS Leaflet. * * Le reste des styles de l'application reste dans `style.css` * (chargé avant celui-ci dans le ). * ============================================================ */ /* ============================================================ * RBAC — visibilité des contrôles selon le rôle utilisateur * * Les boutons taggés [data-perm="write"] ou [data-perm="delete"] * sont masqués pour les utilisateurs sans la permission correspondante. * Sécurité réelle = serveur (renvoie 403). Ici on évite juste * d'afficher des contrôles qui ne fonctionneront pas. * * Notes : * - body.can-write / body.can-delete sont set par 00-auth.js * - body[data-role="..."] disponible pour styles spécifiques par rôle * - Avant que init() ne tourne, body n'a aucune de ces classes * → les boutons restent visibles tant qu'on ne sait pas (état safe) * - Une fois init() exécuté, le rôle est appliqué : * - producer : tout visible * - admin : [data-perm="delete"] caché * - operator : [data-perm="write"] ET [data-perm="delete"] cachés * ============================================================ */ body[data-role]:not(.can-write) [data-perm="write"] { display: none !important; } body[data-role]:not(.can-delete) [data-perm="delete"] { display: none !important; } /* Pouvoirs superadmin (2026-05-23). data-perm="delete-site" est réservé aux suppressions de site entier ; data-perm="manage-users" cible les contrôles d'administration des comptes. */ body[data-role]:not(.can-delete-site) [data-perm="delete-site"] { display: none !important; } body[data-role]:not(.can-manage-users) [data-perm="manage-users"] { display: none !important; } /* Pour les éléments inline qui se cachent sans display:none, on a aussi besoin d'un sélecteur sur visibility (cas particuliers) */ body[data-role]:not(.can-write) [data-perm="write"][data-perm-keep-layout] { display: inline-block !important; visibility: hidden !important; } body[data-role]:not(.can-delete) [data-perm="delete"][data-perm-keep-layout] { display: inline-block !important; visibility: hidden !important; } /* Bandeau visuel indiquant le rôle (utile en démo + accessibilité) */ body[data-role="operator"]::before { content: "Lecture seule (opérateur)"; position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(59, 130, 246, 0.9); color: white; padding: 4px 14px; border-radius: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; z-index: 99999; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } body[data-role="admin"]::before { content: "Lecture / Écriture (admin client)"; position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(16, 185, 129, 0.9); color: white; padding: 4px 14px; border-radius: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; z-index: 99999; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* ============================================================ * Authentification (00-auth.js) — modale de login + logout * ============================================================ */ .ohm-auth-overlay { position: fixed; inset: 0; background: rgba(14, 17, 34, 0.92); backdrop-filter: blur(6px); z-index: 999999; display: flex; align-items: center; justify-content: center; animation: ohmAuthFadeIn 0.2s ease-out; } @keyframes ohmAuthFadeIn { from { opacity: 0; } to { opacity: 1; } } .ohm-auth-card { background: linear-gradient(135deg, #1B1F3B 0%, #12162A 100%); border: 1px solid rgba(240, 140, 0, 0.25); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); width: min(420px, calc(100vw - 32px)); padding: 32px 28px 24px; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .ohm-auth-brand { text-align: center; margin-bottom: 24px; } .ohm-auth-logo { display: inline-block; font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: 0.1em; color: #F08C00; padding: 4px 14px; border: 2px solid #F08C00; border-radius: 4px; margin-bottom: 12px; } .ohm-auth-title { font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 4px; } .ohm-auth-subtitle { font-size: 12px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.05em; } .ohm-auth-error { background: rgba(220, 53, 69, 0.15); border: 1px solid rgba(220, 53, 69, 0.4); color: #ff8b95; padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; text-align: center; } .ohm-auth-form { display: flex; flex-direction: column; gap: 12px; } .ohm-auth-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.7); margin-bottom: -6px; } .ohm-auth-input { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 10px 12px; color: #fff; font-size: 14px; font-family: 'Consolas', 'Menlo', monospace; outline: none; transition: border-color 0.15s, background 0.15s; } .ohm-auth-input:focus { border-color: rgba(240, 140, 0, 0.6); background: rgba(255, 255, 255, 0.08); } .ohm-auth-input::placeholder { color: rgba(255, 255, 255, 0.3); } .ohm-auth-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.7); cursor: pointer; user-select: none; } .ohm-auth-remember input { cursor: pointer; accent-color: #F08C00; } .ohm-auth-submit { background: linear-gradient(135deg, #F08C00 0%, #c87000 100%); border: none; border-radius: 6px; color: #fff; padding: 12px; font-size: 14px; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; margin-top: 4px; transition: transform 0.1s, box-shadow 0.15s; } .ohm-auth-submit:hover { box-shadow: 0 4px 14px rgba(240, 140, 0, 0.4); } .ohm-auth-submit:active { transform: translateY(1px); } .ohm-auth-hint { font-size: 11px; color: rgba(255, 255, 255, 0.4); text-align: center; margin-top: 8px; line-height: 1.5; } /* Bouton de déconnexion — version inline dans .header-right */ /* Bouton power (déconnexion) — sans contour, hover orange */ .ohm-logout-btn-inline, .ohm-settings-btn-inline { width: 34px; height: 34px; border: none; background: transparent; color: rgba(255, 255, 255, 0.85); cursor: pointer; font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; padding: 0; text-decoration: none; transition: color 0.15s, transform 0.1s; } .ohm-logout-btn-inline:hover, .ohm-settings-btn-inline:hover { color: #F08C00; } .ohm-logout-btn-inline:active, .ohm-settings-btn-inline:active { transform: translateY(1px); } .ohm-settings-btn-inline { font-size: 20px; } /* Mode clair : icônes sombres pour contraster avec le header blanc */ :root.theme-light .ohm-logout-btn-inline, :root.theme-light .ohm-settings-btn-inline { color: rgba(20, 25, 40, 0.7); } :root.theme-light .ohm-logout-btn-inline:hover, :root.theme-light .ohm-settings-btn-inline:hover { color: #F08C00; } /* ── Overlay Paramètres ───────────────────────────────────────────── Iframe settings.html par-dessus la page principale. Backdrop sombre semi-transparent. Croix de fermeture en haut à droite du shell. */ .ohm-settings-overlay { position: fixed; inset: 0; z-index: 999997; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 32px; animation: ohm-settings-fade 0.18s ease-out; } @keyframes ohm-settings-fade { from { opacity: 0; } to { opacity: 1; } } .ohm-settings-shell { position: relative; width: 100%; max-width: 920px; height: 100%; max-height: 720px; background: var(--bg, #0c1329); border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); overflow: hidden; animation: ohm-settings-slide 0.22s cubic-bezier(.2,.65,.3,1); } @keyframes ohm-settings-slide { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ohm-settings-iframe { width: 100%; height: 100%; border: none; background: transparent; display: block; } .ohm-settings-close { position: absolute; top: 12px; right: 12px; z-index: 10; width: 36px; height: 36px; border: none; background: transparent; color: rgba(255, 255, 255, 0.85); cursor: pointer; font-size: 28px; line-height: 1; padding: 0; border-radius: 8px; transition: color 0.15s, background 0.15s; font-family: inherit; } .ohm-settings-close:hover { color: #F08C00; background: rgba(255, 255, 255, 0.05); } /* Mode clair : croix sombre sur fond clair */ :root.theme-light .ohm-settings-close { color: rgba(20, 25, 40, 0.65); } :root.theme-light .ohm-settings-close:hover { color: #F08C00; background: rgba(0, 0, 0, 0.04); } /* Fallback fixed (si .header-right introuvable) — mêmes règles */ .ohm-logout-btn { position: fixed; top: 10px; right: 10px; z-index: 999998; /* au-dessus de à peu près tout sauf la modale (999999) */ width: 32px; height: 32px; border: none; background: transparent; color: rgba(255, 255, 255, 0.85); cursor: pointer; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; transition: color 0.15s; } .ohm-logout-btn:hover { color: #F08C00; } /* Galerie images — compteur annotations (priorité absolue) */ .igp-thumb-wrap { position: relative !important; overflow: hidden !important; } .igp-count { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 10 !important; min-width: 20px; height: 20px; padding: 0 6px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; font-weight: 800 !important; background: rgba(240,140,0,0.95) !important; color: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important; pointer-events: none; }