/* ============================================================ * 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 ). * ============================================================ */ /* ============================================================ * 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 */ .ohm-logout-btn-inline { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(240, 140, 0, 0.35); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.7); cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s; padding: 0; } .ohm-logout-btn-inline:hover { background: rgba(240, 140, 0, 0.18); color: #F08C00; border-color: #F08C00; } .ohm-logout-btn-inline:active { transform: translateY(1px); } /* Bouton de déconnexion — fallback fixed (si .header-right introuvable) */ .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-radius: 50%; border: 1px solid rgba(240, 140, 0, 0.5); background: rgba(27, 31, 59, 0.95); color: rgba(255, 255, 255, 0.85); cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .ohm-logout-btn:hover { background: rgba(240, 140, 0, 0.18); color: #F08C00; border-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; }