:root { --red: #ef4444; --red-dark: #b91c1c; --bg: #0b1220; --bg-2: #111a2e; --panel: rgba(22, 34, 60, 0.72); --ink: #e6ecf5; --muted: #8595b4; --line: rgba(88, 110, 150, 0.25); --green: #22c55e; --accent: #3d8bff; --radius: 18px; } /* ---- Thème CLAIR (activé par data-theme="light" sur ) ---- */ :root[data-theme="light"] { --bg: #eef2f8; --bg-2: #ffffff; --panel: rgba(255, 255, 255, 0.9); --ink: #16223c; --muted: #5a6b8c; --line: rgba(30, 50, 90, 0.15); --accent: #2563eb; } :root[data-theme="light"] .app-bg { background: radial-gradient(60% 40% at 80% 0%, rgba(37, 99, 235, 0.10), transparent 60%), radial-gradient(50% 40% at 10% 100%, rgba(239, 68, 68, 0.08), transparent 60%), linear-gradient(180deg, #eef2f8, #e3e9f3); } :root[data-theme="light"] .app-header { background: rgba(255, 255, 255, 0.8); } :root[data-theme="light"] input, :root[data-theme="light"] textarea { background: rgba(255, 255, 255, 0.9); } * { box-sizing: border-box; } /* L'attribut [hidden] doit toujours l'emporter sur nos display: flex/block. */ [hidden] { display: none !important; } body { margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); -webkit-tap-highlight-color: transparent; overflow-x: hidden; } /* Fond animé (dégradés / lueurs) */ .app-bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(60% 40% at 80% 0%, rgba(61, 139, 255, 0.18), transparent 60%), radial-gradient(50% 40% at 10% 100%, rgba(239, 68, 68, 0.16), transparent 60%), linear-gradient(180deg, #0b1220, #0a0f1c); } .glass { background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ---- Header ---- */ .app-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; position: sticky; top: 0; z-index: 10; background: rgba(11, 18, 32, 0.7); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { font-size: 30px; filter: drop-shadow(0 0 8px rgba(61,139,255,0.5)); } .app-header h1 { margin: 0; font-size: 21px; letter-spacing: 0.5px; font-weight: 800; } .tagline { margin: 0; font-size: 12px; color: var(--muted); } .conn-status { font-size: 16px; } .conn-status.online { color: #4ade80; } .conn-status.offline { color: #f87171; } .header-right { display: flex; align-items: center; gap: 12px; } .theme-toggle { background: var(--panel); border: 1px solid var(--line); color: var(--ink); width: 34px; height: 34px; border-radius: 999px; cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: filter 0.2s ease; } .theme-toggle:hover { filter: brightness(1.15); } .user-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); background: rgba(61, 139, 255, 0.12); border: 1px solid rgba(61, 139, 255, 0.35); padding: 5px 8px 5px 12px; border-radius: 999px; max-width: 190px; } .user-chip #user-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; } .user-chip button { background: transparent; border: none; color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; padding: 2px 4px; border-left: 1px solid var(--line); } .user-chip button:hover { color: #f87171; } /* ---- Authentification (connexion / inscription) ---- */ .auth-card { border-radius: var(--radius); padding: 22px 20px; margin-top: 10px; } .auth-tabs { display: flex; gap: 6px; background: rgba(0, 0, 0, 0.25); border-radius: 12px; padding: 5px; margin-bottom: 16px; } .auth-tab { flex: 1; padding: 11px; border: none; border-radius: 9px; cursor: pointer; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; transition: background 0.2s ease, color 0.2s ease; } .auth-tab.active { background: var(--accent); color: #fff; } .auth-intro { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 0 16px; } .otp-intro { color: var(--ink); font-size: 13px; line-height: 1.55; margin: 0 0 8px; } .otp-intro strong { color: var(--accent); } .consent-row { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; font-size: 12.5px; color: var(--muted); line-height: 1.5; cursor: pointer; } .consent-row input { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); } .consent-row a { color: var(--accent); font-weight: 700; text-decoration: none; } .account-links { text-align: center; margin-top: 22px; font-size: 12.5px; color: var(--muted); } .account-links a { color: var(--muted); text-decoration: none; } .account-links a:hover { text-decoration: underline; } .account-links .danger-link { color: #f87171; } /* Modale (confidentialité) */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); } .modal { width: 100%; max-width: 460px; max-height: 84vh; overflow-y: auto; border-radius: var(--radius); padding: 20px 22px; } .modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .modal-head h3 { margin: 0; font-size: 18px; } .modal-close { background: transparent; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; } .modal-body p { font-size: 13px; line-height: 1.6; color: var(--ink); margin: 0 0 12px; } .modal-body strong { color: var(--accent); } .auth-form { display: block; } .auth-form .field-label { margin-top: 12px; } .auth-form .field-label:first-child { margin-top: 0; } .auth-submit { width: 100%; margin-top: 20px; } .auth-switch { text-align: center; font-size: 13px; color: var(--muted); margin: 14px 0 0; } .auth-switch a { color: var(--accent); font-weight: 700; text-decoration: none; } .auth-error { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.45); color: #fca5a5; border-radius: 12px; padding: 11px 14px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; font-weight: 600; } /* ---- Layout ---- */ .app-main { max-width: 500px; margin: 0 auto; padding: 24px 18px 40px; } .screen { display: none; animation: fade 0.35s ease; } .screen.active { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .intro { color: var(--muted); text-align: center; line-height: 1.6; margin: 10px 0 30px; } /* ---- Bouton alerte ---- */ .alert-wrap { display: flex; justify-content: center; margin-bottom: 28px; } .alert-button { position: relative; width: 230px; height: 230px; border: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff5a5a, var(--red-dark)); color: #fff; cursor: pointer; box-shadow: 0 20px 60px rgba(239, 68, 68, 0.5), inset 0 -8px 20px rgba(0,0,0,0.25); transition: transform 0.12s ease; } .alert-button:active { transform: scale(0.95); } .alert-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(239, 68, 68, 0.6); animation: ring 2s infinite; } @keyframes ring { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.35); opacity: 0; } } .alert-button-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; } .alert-icon { font-size: 66px; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); } .alert-label { font-size: 32px; font-weight: 900; letter-spacing: 4px; } .gps-box { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 14px 16px; font-size: 14px; } .gps-icon { font-size: 20px; } /* ---- Détails ---- */ .screen h2 { margin: 0 0 20px; font-size: 24px; font-weight: 800; } .field-label { display: block; font-weight: 700; margin: 18px 0 8px; font-size: 13px; color: var(--muted); } .danger-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .danger-chip { padding: 15px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.18s ease; backdrop-filter: blur(6px); } .danger-chip:hover { border-color: var(--accent); } .danger-chip.selected { border-color: var(--red); background: rgba(239, 68, 68, 0.18); color: #fff; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35); } .two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } input, textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 15px; resize: vertical; background: rgba(11, 18, 32, 0.5); color: var(--ink); } input::placeholder, textarea::placeholder { color: #5f6f8f; } input:focus, textarea:focus { outline: none; border-color: var(--accent); } .attach-row { display: flex; gap: 12px; margin-top: 18px; } .attach-btn { flex: 1; text-align: center; padding: 13px; border-radius: 12px; color: var(--ink); font-weight: 700; cursor: pointer; font-size: 14px; border: 1px dashed var(--line); } .attach-btn.recording { border-color: var(--red); color: #ff8a8a; animation: pulseb 1s infinite; } @keyframes pulseb { 50% { background: rgba(239,68,68,0.15); } } .attach-preview { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; } .attach-preview img { width: 78px; height: 78px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); } .attach-preview audio { width: 100%; } .location-summary { margin-top: 18px; border-radius: 14px; padding: 14px 16px; font-size: 14px; } .location-summary > div { display: flex; justify-content: space-between; padding: 5px 0; } .ls-label { color: var(--muted); } /* Avertissement légal — fausse alerte */ .legal-notice { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.35); } .legal-notice .legal-icon { font-size: 20px; line-height: 1.4; flex-shrink: 0; } .legal-notice p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink); } .legal-notice strong { color: #fca5a5; } .legal-hint { margin: 22px auto 0; max-width: 340px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .actions { display: flex; gap: 12px; margin-top: 26px; } .btn-primary, .btn-secondary { flex: 1; padding: 16px; border: none; border-radius: 14px; font-size: 16px; font-weight: 800; cursor: pointer; transition: transform 0.1s ease, filter 0.2s ease; } .btn-primary { background: linear-gradient(135deg, #ff5a5a, var(--red-dark)); color: #fff; box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4); } .btn-primary:hover { filter: brightness(1.08); } .btn-primary:active { transform: scale(0.98); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { background: rgba(88, 110, 150, 0.18); color: var(--ink); border: 1px solid var(--line); } /* ---- Confirmation ---- */ #screen-confirm { text-align: center; } .confirm-check { font-size: 76px; animation: pop 0.5s ease; filter: drop-shadow(0 0 14px rgba(34,197,94,0.5)); } @keyframes pop { 0% { transform: scale(0); } 65% { transform: scale(1.25); } 100% { transform: scale(1); } } .confirm-sub { color: var(--muted); margin-top: -4px; } .confirm-card { text-align: left; border-radius: 16px; padding: 6px 18px; margin: 22px 0; } .cc-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); } .cc-row:last-child { border-bottom: none; } .cc-row span { color: var(--muted); } .mini-map { height: 210px; border-radius: 16px; overflow: hidden; margin-bottom: 22px; border: 1px solid var(--line); } .app-footer { text-align: center; font-size: 11px; color: var(--muted); padding: 18px; } /* Bandeau file d'attente hors-ligne */ .pending-badge { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #b45309; color: #fff; padding: 10px 18px; border-radius: 30px; font-size: 13px; font-weight: 700; z-index: 100; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.4); animation: fade 0.3s ease; } /* Badges d'urgence */ .urg-critique { color: #f87171; font-weight: 800; } .urg-haute { color: #fb923c; } .urg-moyenne { color: #facc15; } .urg-faible { color: #4ade80; }