/* ============================================ StormWatch — Dark theme Palette inspirée du template : - bg principal : bleu nuit profond - cartes : bleu nuit légèrement plus clair - accent : bleu électrique - niveaux risque : vert / jaune / orange / rouge (PDF section 8.1) ============================================ */ /* ============================================ SYSTÈME DE THÈMES Le data-theme sur contrôle l'apparence. Valeurs : "dark" (défaut), "light", "glass", "aurora". "system" est traduit en JS vers dark/light selon prefers-color-scheme. ============================================ */ :root, [data-theme="dark"] { --bg: #0a0f1d; --bg-elev: #111a2e; --bg-elev-2: #162038; --border: #1f2b47; --text: #e6ebf5; --text-dim: #8a96b4; --text-mute: #5d6a89; --accent: #052c6c; --accent-hover: #2563eb; --vert: #16a34a; --jaune: #facc15; --orange: #ea580c; --rouge: #dc2626; --vert-bg: rgba(22, 163, 74, 0.15); --jaune-bg: rgba(250, 204, 21, 0.15); --orange-bg: rgba(234, 88, 12, 0.18); --rouge-bg: rgba(220, 38, 38, 0.18); --radius: 12px; --radius-sm: 8px; --shadow: 0 4px 16px rgba(0, 0, 0, 0.3); --bg-image: none; --card-bg: var(--bg-elev); --card-blur: none; } /* THÈME LIGHT — fond clair, accents bleus, contrastes lisibles */ [data-theme="light"] { --bg: #f5f7fb; --bg-elev: #ffffff; --bg-elev-2: #eef2f8; --border: #d8dee9; --text: #1a1f2e; --text-dim: #4a5468; --text-mute: #8b94a8; --accent: #072c7e; --accent-hover: #1d4ed8; --vert: #16a34a; --jaune: #ca8a04; --orange: #ea580c; --rouge: #dc2626; --vert-bg: rgba(22, 163, 74, 0.12); --jaune-bg: rgba(202, 138, 4, 0.12); --orange-bg: rgba(234, 88, 12, 0.12); --rouge-bg: rgba(220, 38, 38, 0.12); --shadow: 0 4px 16px rgba(15, 23, 42, 0.08); --bg-image: none; --card-bg: var(--bg-elev); --card-blur: none; } /* THÈME GLASSMORPHISM — ciel orageux + cartes verre dépoli */ [data-theme="glass"] { --bg: #1a3a5c; --bg-elev: rgba(255, 255, 255, 0.10); --bg-elev-2: rgba(255, 255, 255, 0.05); --border: rgba(255, 255, 255, 0.18); --text: #ffffff; --text-dim: rgba(255, 255, 255, 0.85); --text-mute: rgba(255, 255, 255, 0.6); --accent: #014287; --accent-hover: #4a9aff; --vert: #4ade80; --jaune: #fde047; --orange: #fb923c; --rouge: #f87171; --vert-bg: rgba(74, 222, 128, 0.18); --jaune-bg: rgba(253, 224, 71, 0.18); --orange-bg: rgba(251, 146, 60, 0.20); --rouge-bg: rgba(248, 113, 113, 0.22); --shadow: 0 8px 32px rgba(0, 0, 0, 0.25); --bg-image: radial-gradient(ellipse 1000px 600px at 30% 20%, rgba(255,255,255,0.14), transparent 60%), radial-gradient(ellipse 800px 400px at 70% 60%, rgba(180,200,220,0.18), transparent 60%), radial-gradient(ellipse 600px 300px at 80% 30%, rgba(120,150,180,0.22), transparent 60%), linear-gradient(180deg, #1a3a5c 0%, #2d5d85 40%, #4a8aa9 70%, #5fa0c4 100%); --card-bg: rgba(255, 255, 255, 0.10); --card-blur: blur(22px) saturate(140%); } /* THÈME AURORA — fond noir profond + accents or */ [data-theme="aurora"] { --bg: #0a0a0a; --bg-elev: #1a1410; --bg-elev-2: #221a14; --border: #3d2f20; --text: #f5e6d3; --text-dim: #c9a87f; --text-mute: #8a6f50; --accent: #f59e0b; --accent-hover: #d97706; --vert: #84cc16; --jaune: #facc15; --orange: #f97316; --rouge: #ef4444; --vert-bg: rgba(132, 204, 22, 0.14); --jaune-bg: rgba(250, 204, 21, 0.16); --orange-bg: rgba(249, 115, 22, 0.18); --rouge-bg: rgba(239, 68, 68, 0.18); --shadow: 0 4px 24px rgba(245, 158, 11, 0.18); --bg-image: radial-gradient(ellipse 1200px 600px at 50% -150px, rgba(245, 158, 11, 0.14), transparent 70%), radial-gradient(ellipse 800px 400px at 80% 100%, rgba(249, 115, 22, 0.10), transparent 70%); --card-bg: var(--bg-elev); --card-blur: none; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg); background-image: var(--bg-image); background-size: cover; background-position: center; background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.3s, color 0.3s; } /* Effet glassmorphism sur les cartes principales en thème glass */ [data-theme="glass"] .sidebar, [data-theme="glass"] .card, [data-theme="glass"] .stat-card, [data-theme="glass"] .settings-card, [data-theme="glass"] .doc-card-chapter, [data-theme="glass"] .position-card, [data-theme="glass"] .risk-summary, [data-theme="glass"] .alert-banner, [data-theme="glass"] .alert-row, [data-theme="glass"] .index-tile, [data-theme="glass"] .alert-item, [data-theme="glass"] .favorite-card, [data-theme="glass"] .doc-figure, [data-theme="glass"] .doc-term, [data-theme="glass"] .history-stat, [data-theme="glass"] .proba-hero, [data-theme="glass"] .proba-factor { backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } button { font: inherit; cursor: pointer; } /* ============ LAYOUT ============ */ .app { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; } .sidebar { background: var(--bg-elev); border-right: 1px solid var(--border); padding: 20px 16px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; } .main { padding: 20px 28px; display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* ============ SIDEBAR : BRAND ============ */ .brand { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 4px; } .brand-logo { width: 44px; height: 44px; background: linear-gradient(135deg, var(--accent), #1d4ed8); border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; } /* Image PNG : pas de fond bleu, conservation des proportions */ .brand-logo-img { background: transparent; object-fit: contain; padding: 0; border-radius: var(--radius-sm); } .brand-name { font-weight: 700; font-size: 16px; } .brand-tag { font-size: 11px; color: var(--text-mute); margin-top: 2px; } /* ============ SIDEBAR : NAV ============ */ .nav { display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 13px; cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s; } .nav-item:hover { background: var(--bg-elev-2); color: var(--text); } .nav-item.active { background: rgba(59, 130, 246, 0.12); color: var(--accent); } .nav-icon { width: 18px; text-align: center; font-size: 14px; } /* ============ SIDEBAR : POSITION ============ */ .position-card { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 6px; } .position-label { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-mute); } .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; display: inline-block; } .position-city { font-weight: 600; font-size: 14px; } .position-coords { font-size: 11px; color: var(--text-mute); margin-bottom: 6px; } .position-buttons { display: flex; gap: 6px; margin-top: 4px; } .position-buttons .btn { flex: 1; font-size: 11px; padding: 7px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } /* ============ BUTTONS ============ */ .btn { border: none; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; transition: background 0.15s, transform 0.05s; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--accent); color: white; } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg); } .btn-danger { background: var(--rouge); color: white; } .btn-danger:hover { background: #b91c1c; } .btn-premium { background: linear-gradient(135deg, var(--jaune), var(--orange)); color: #1a1208; width: 100%; margin-top: 8px; } /* ============ SIDEBAR : RISK GAUGE ============ */ .risk-summary { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; } .risk-summary-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-mute); margin-bottom: 10px; } .risk-gauge { position: relative; width: 140px; height: 140px; margin: 0 auto; } .gauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); } .gauge-bg { fill: none; stroke: var(--bg-elev); stroke-width: 10; } .gauge-fg { fill: none; stroke: var(--vert); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314.16; /* 2 * π * 50 */ stroke-dashoffset: 314.16; transition: stroke-dashoffset 0.6s, stroke 0.3s; } .gauge-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .gauge-score { font-size: 32px; font-weight: 700; line-height: 1; } .gauge-level { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; margin-top: 4px; color: var(--text-dim); } .risk-summary-sub { font-size: 11px; color: var(--text-mute); margin-top: 8px; } .risk-summary-msg { font-size: 12px; color: var(--text-dim); margin-top: 4px; } /* ============ SIDEBAR : PREMIUM ============ */ .premium-card { background: linear-gradient(135deg, rgba(250, 204, 21, 0.08), rgba(234, 88, 12, 0.08)); border: 1px solid rgba(250, 204, 21, 0.25); border-radius: var(--radius); padding: 12px; margin-top: auto; } .premium-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; } .premium-desc { font-size: 11px; color: var(--text-dim); line-height: 1.4; } /* ============ MAIN : TOPBAR ============ */ .topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .greeting { font-size: 18px; font-weight: 600; } .last-update { font-size: 12px; color: var(--text-mute); margin-top: 2px; } .topbar-right { display: flex; align-items: center; gap: 12px; } .icon-btn { width: 36px; height: 36px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); display: grid; place-items: center; position: relative; transition: background 0.15s, color 0.15s; } .icon-btn:hover { background: var(--bg-elev-2); color: var(--text); } .icon-btn-sm { width: 26px; height: 26px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 50%; color: var(--text); display: grid; place-items: center; font-size: 11px; } .badge { position: absolute; top: -4px; right: -4px; background: var(--rouge); color: white; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; display: grid; place-items: center; } .auto-update { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; } .auto-dot { width: 8px; height: 8px; background: var(--vert); border-radius: 50%; box-shadow: 0 0 8px var(--vert); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .pill { background: var(--bg-elev); border: 1px solid var(--border); padding: 2px 8px; border-radius: 12px; font-size: 11px; } /* ============ WEATHER CURRENT (bandeau condition courante) ============ */ .weather-current[hidden] { display: none !important; } .weather-current { display: flex; gap: 16px; align-items: center; padding: 14px 20px; background: var(--bg-elev); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); } .weather-current.severity-jaune { border-left-color: var(--jaune); } .weather-current.severity-orange { border-left-color: var(--orange); } .weather-current.severity-rouge { border-left-color: var(--rouge); } .weather-current-icon { font-size: 38px; line-height: 1; flex-shrink: 0; } .weather-current-info { flex: 1; min-width: 0; } .weather-current-label { font-size: 18px; font-weight: 700; color: var(--text); } .weather-current-meta { font-size: 12px; color: var(--text-mute); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 12px; } .weather-current-meta span { white-space: nowrap; } .weather-current-cells { display: flex; gap: 6px; flex-shrink: 0; } .weather-cell-pill { display: inline-flex; flex-direction: column; align-items: center; background: var(--bg-elev-2); border: 1px solid var(--border); padding: 6px 10px; border-radius: var(--radius-sm); min-width: 64px; } .weather-cell-pill.severity-orange { border-color: var(--orange); background: var(--orange-bg); } .weather-cell-pill.severity-rouge { border-color: var(--rouge); background: var(--rouge-bg); } .weather-cell-time { font-size: 10px; color: var(--text-mute); } .weather-cell-icon { font-size: 16px; line-height: 1; margin: 2px 0; } .weather-cell-label { font-size: 9px; color: var(--text-dim); text-align: center; line-height: 1.2; } /* ============ ALERT BANNER ============ */ .alert-banner[hidden] { display: none !important; } .alert-banner { display: flex; align-items: center; gap: 14px; background: var(--rouge-bg); border: 1px solid rgba(220, 38, 38, 0.4); border-radius: var(--radius); padding: 14px 18px; } .alert-banner.level-orange { background: var(--orange-bg); border-color: rgba(234, 88, 12, 0.4); } .alert-banner.level-jaune { background: var(--jaune-bg); border-color: rgba(250, 204, 21, 0.4); } .alert-icon { font-size: 22px; color: var(--rouge); } .alert-banner.level-orange .alert-icon { color: var(--orange); } .alert-banner.level-jaune .alert-icon { color: var(--jaune); } .alert-content { flex: 1; } .alert-title { font-weight: 700; font-size: 14px; letter-spacing: 0.5px; } .alert-text { font-size: 13px; color: var(--text-dim); margin-top: 2px; } /* ============ CARDS ============ */ .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; } .card-header h2 { font-size: 14px; font-weight: 600; } .muted { color: var(--text-mute); font-weight: 400; font-size: 12px; } .link { font-size: 12px; } .link-center { display: block; text-align: center; margin-top: 12px; } /* ============ STAT CARDS GRID ============ */ .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .stat-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 6px; } .stat-row { display: flex; justify-content: space-between; align-items: center; } .stat-label { font-size: 12px; color: var(--text-dim); } .stat-icon { font-size: 18px; opacity: 0.7; } .stat-value { font-size: 26px; font-weight: 700; line-height: 1.1; } .stat-unit { font-size: 14px; color: var(--text-mute); font-weight: 400; } .stat-sub { font-size: 11px; color: var(--text-mute); } .stat-badge { display: inline-block; align-self: flex-start; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .stat-badge.level-vert { background: var(--vert-bg); color: var(--vert); } .stat-badge.level-jaune { background: var(--jaune-bg); color: var(--jaune); } .stat-badge.level-orange { background: var(--orange-bg); color: var(--orange); } .stat-badge.level-rouge { background: var(--rouge-bg); color: var(--rouge); } /* ============ MAP ============ */ .tabs { display: flex; gap: 4px; background: var(--bg); padding: 3px; border-radius: var(--radius-sm); border: 1px solid var(--border); } .tab { background: transparent; border: none; color: var(--text-dim); padding: 5px 12px; border-radius: 6px; font-size: 12px; transition: background 0.15s, color 0.15s; } .tab:hover { color: var(--text); } .tab.active { background: var(--accent); color: white; } .map { height: 380px; border-radius: var(--radius-sm); overflow: hidden; background: #0a1128; } /* Leaflet dark tweaks */ .leaflet-container { background: #0a1128 !important; } .leaflet-control-attribution { background: rgba(0, 0, 0, 0.5) !important; color: var(--text-mute) !important; font-size: 10px !important; } .leaflet-control-attribution a { color: var(--accent) !important; } .map-legend { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 11px; color: var(--text-dim); flex-wrap: wrap; } .legend-bar { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(to right, #1e3a8a, #06b6d4, #16a34a, #facc15, #ea580c, #dc2626, #7c2d12); min-width: 200px; } .legend-ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-mute); } .map-time { display: flex; align-items: center; gap: 8px; } /* ============ DASHBOARD MID-ROW : indices à gauche, map à droite ============ */ .dashboard-mid-grid { display: grid; grid-template-columns: 380px 1fr; gap: 16px; } .dashboard-mid-grid .map { height: 420px; } .dashboard-mid-grid .indices-grid { grid-template-columns: repeat(2, 1fr); } /* ============ INDICES GRID ============ */ .indices-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .index-tile { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } .index-name { font-size: 11px; color: var(--text-mute); font-weight: 600; letter-spacing: 0.3px; } .index-value { font-size: 18px; font-weight: 700; } .index-unit { font-size: 11px; color: var(--text-mute); font-weight: 400; margin-left: 2px; } .index-level { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 2px 6px; border-radius: 8px; align-self: flex-start; } .index-level.level-vert { background: var(--vert-bg); color: var(--vert); } .index-level.level-jaune { background: var(--jaune-bg); color: var(--jaune); } .index-level.level-orange { background: var(--orange-bg); color: var(--orange); } .index-level.level-rouge { background: var(--rouge-bg); color: var(--rouge); } .index-spark { height: 14px; background: linear-gradient(to right, transparent, var(--accent) 50%, transparent); opacity: 0.4; border-radius: 2px; margin-top: 2px; } /* ============ BOTTOM GRID ============ */ .bottom-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; } /* ============ FORECAST TABLE ============ */ .forecast-table { width: 100%; border-collapse: collapse; font-size: 12px; } .forecast-table th { text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 600; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); } .forecast-table td { padding: 10px; border-bottom: 1px solid rgba(31, 43, 71, 0.5); } .forecast-table tr:last-child td { border-bottom: none; } .risk-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; } .risk-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .risk-pill.level-vert { background: var(--vert-bg); color: var(--vert); } .risk-pill.level-jaune { background: var(--jaune-bg); color: var(--jaune); } .risk-pill.level-orange { background: var(--orange-bg); color: var(--orange); } .risk-pill.level-rouge { background: var(--rouge-bg); color: var(--rouge); } /* ============ ALERTS LIST ============ */ .alerts-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .alert-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elev-2); } .alert-item-icon { font-size: 16px; margin-top: 2px; } .alert-item-content { flex: 1; } .alert-item-title { font-weight: 600; font-size: 12px; } .alert-item-sub { font-size: 11px; color: var(--text-mute); margin-top: 2px; } .alert-item-time { font-size: 11px; color: var(--text-mute); text-align: right; white-space: nowrap; } .alerts-empty { text-align: center; color: var(--text-mute); font-size: 12px; padding: 20px; font-style: italic; } /* ============ COMPTEUR DE VISITES ============ */ .visit-stats[hidden] { display: none !important; } .visit-stats { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-top: auto; } .visit-stats-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .visit-stats-icon { font-size: 18px; } .visit-stats-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 0; } .visit-stats-sub { font-size: 11px; color: var(--text-mute); margin-left: auto; } .visit-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .visit-stat { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; text-align: center; } .visit-stat-value { font-size: 24px; font-weight: 700; color: var(--accent); line-height: 1; } .visit-stat-label { font-size: 11px; color: var(--text-mute); margin-top: 6px; } @media (max-width: 700px) { .visit-stats-grid { grid-template-columns: repeat(2, 1fr); } } /* ============ FOOTER ============ */ .footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-mute); margin-top: auto; } .footer a { color: var(--text-dim); } .footer a:hover { color: var(--text); } /* ============ DIALOG ============ */ .dialog { border: 1px solid var(--border); border-radius: var(--radius); padding: 0; background: var(--bg-elev); color: var(--text); max-width: 420px; width: 90%; } .dialog::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); } .dialog-form { padding: 20px; display: flex; flex-direction: column; gap: 12px; } .dialog-form h3 { font-size: 16px; font-weight: 600; } .dialog-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); } .dialog-form input { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text); font-size: 13px; font-family: inherit; } .dialog-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .dialog-or { text-align: center; font-size: 11px; color: var(--text-mute); margin: 4px 0; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; } .suggest-list { list-style: none; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); max-height: 180px; overflow-y: auto; margin-top: -8px; } .suggest-list li { padding: 8px 10px; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--border); } .suggest-list li:hover { background: var(--bg-elev-2); } .suggest-list li:last-child { border-bottom: none; } /* ============ TOAST ============ */ .toast { position: fixed; bottom: 20px; right: 20px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 16px; font-size: 13px; box-shadow: var(--shadow); z-index: 1000; animation: slideIn 0.2s ease-out; } @keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============ MULTI-VUES (SPA) ============ */ .views { display: contents; /* les .view filles s'intègrent dans le flux flex de .main */ } .view { display: flex; flex-direction: column; gap: 20px; } .view[hidden] { display: none !important; } /* ============ FULLSCREEN MAP ============ */ .map-fs { height: calc(100vh - 320px); min-height: 480px; } .map-controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px; background: var(--bg-elev-2); border-radius: var(--radius-sm); border: 1px solid var(--border); } .map-controls input[type="range"] { flex: 1; accent-color: var(--accent); } .map-controls span { font-size: 12px; color: var(--text-dim); min-width: 60px; } /* ============ ALERTES DÉTAILLÉES ============ */ .alerts-day-group { margin-top: 16px; } .alerts-day-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-mute); margin-bottom: 8px; font-weight: 600; } .alert-row { display: grid; grid-template-columns: 80px 100px 1fr auto; gap: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--bg-elev-2); border: 1px solid var(--border); border-left-width: 4px; margin-bottom: 6px; align-items: center; } .alert-row.level-jaune { border-left-color: var(--jaune); } .alert-row.level-orange { border-left-color: var(--orange); } .alert-row.level-rouge { border-left-color: var(--rouge); } .alert-row-time { font-weight: 600; font-size: 13px; } .alert-row-level { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; } .alert-row-msg { font-size: 13px; color: var(--text); } .alert-row-meta { font-size: 11px; color: var(--text-mute); } .empty-state { text-align: center; padding: 40px 20px; color: var(--text-mute); font-size: 13px; } /* ============ INDICES DÉTAILLÉS ============ */ .indices-category { margin-top: 18px; } .indices-category-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-mute); margin-bottom: 10px; font-weight: 600; } .indices-table { width: 100%; border-collapse: collapse; font-size: 13px; } .indices-table th, .indices-table td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border); } .indices-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-mute); font-weight: 600; } .indices-table tr:last-child td { border-bottom: none; } .indices-table .col-name { font-weight: 600; } .indices-table .col-value { font-weight: 700; font-size: 14px; } .indices-table .col-desc { color: var(--text-dim); font-size: 12px; } .level-badge-sm { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .level-badge-sm.level-vert { background: var(--vert-bg); color: var(--vert); } .level-badge-sm.level-jaune { background: var(--jaune-bg); color: var(--jaune); } .level-badge-sm.level-orange { background: var(--orange-bg); color: var(--orange); } .level-badge-sm.level-rouge { background: var(--rouge-bg); color: var(--rouge); } /* ============ FORECAST + HISTORY CHARTS ============ */ #forecast-chart-wrap, #history-chart-wrap { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 16px; } #forecast-chart, #history-chart { width: 100%; height: 200px; display: block; } .chart-grid-line { stroke: var(--border); stroke-width: 1; } .chart-axis-label { fill: var(--text-mute); font-size: 10px; } .chart-area-vert { fill: rgba(22, 163, 74, 0.15); } .chart-area-jaune { fill: rgba(250, 204, 21, 0.15); } .chart-area-orange { fill: rgba(234, 88, 12, 0.18); } .chart-area-rouge { fill: rgba(220, 38, 38, 0.18); } .chart-line { fill: none; stroke: var(--accent); stroke-width: 2; } .chart-dot { fill: var(--accent); } .forecast-detail-table { width: 100%; border-collapse: collapse; font-size: 12px; } .forecast-detail-table th, .forecast-detail-table td { padding: 8px; text-align: left; border-bottom: 1px solid rgba(31, 43, 71, 0.5); } .forecast-detail-table th { font-size: 10px; text-transform: uppercase; color: var(--text-mute); font-weight: 600; position: sticky; top: 0; background: var(--bg-elev); } /* ============ HISTORIQUE ============ */ .history-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .history-stat { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; } .history-stat-label { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; } .history-stat-value { font-size: 22px; font-weight: 700; } .history-stat-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; } /* ============ FAVORIS ============ */ .favorites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; } .favorite-card { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: border-color 0.15s, transform 0.05s; } .favorite-card:hover { border-color: var(--accent); } .favorite-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .favorite-name { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; } .favorite-coords { font-size: 11px; color: var(--text-mute); } .favorite-actions { display: flex; gap: 6px; margin-top: 4px; } .favorite-actions .btn { flex: 1; font-size: 11px; padding: 6px 10px; } .btn-icon-danger { background: transparent; border: 1px solid var(--border); color: var(--rouge); width: 28px; height: 28px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 14px; } .btn-icon-danger:hover { background: var(--rouge-bg); } /* ============ PARAMÈTRES — refonte cards ============ */ .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; } .settings-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .settings-card-header { display: flex; gap: 12px; align-items: center; padding: 14px 18px; background: var(--bg-elev-2); border-bottom: 1px solid var(--border); } .settings-card-icon { font-size: 22px; width: 38px; height: 38px; border-radius: 10px; background: rgba(59, 130, 246, 0.12); display: grid; place-items: center; flex-shrink: 0; } .settings-card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .settings-card-sub { font-size: 11px; color: var(--text-mute); } .settings-card-body { padding: 4px 18px; flex: 1; } .setting-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); align-items: center; } .settings-card-body .setting-row:last-child { border-bottom: none; } .setting-row .setting-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 15px; color: var(--accent); border: 1px solid var(--border); } .setting-info { min-width: 0; } .setting-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .setting-desc { font-size: 11px; color: var(--text-mute); line-height: 1.5; } .setting-control { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .setting-control select { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text); font: inherit; font-size: 13px; min-width: 160px; cursor: pointer; } .setting-control select:focus, .setting-control select:hover { outline: none; border-color: var(--accent); } .setting-control .btn { font-size: 12px; padding: 8px 14px; white-space: nowrap; } .setting-stat { font-size: 13px; font-weight: 700; color: var(--text); background: var(--bg); padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); min-width: 80px; text-align: center; } /* Zone dangereuse */ .settings-danger-zone { border-color: rgba(220, 38, 38, 0.35); } .settings-danger-zone .settings-card-header { background: rgba(220, 38, 38, 0.08); border-bottom-color: rgba(220, 38, 38, 0.3); } .settings-danger-zone .settings-card-icon { background: rgba(220, 38, 38, 0.18); color: var(--rouge); } .settings-danger-zone .settings-card-title { color: var(--rouge); } /* Apparence (thèmes) */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 14px 0; } .theme-card { background: var(--bg); border: 2px solid var(--border); border-radius: var(--radius); padding: 12px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.15s, transform 0.05s; font-family: inherit; } .theme-card:hover { border-color: var(--accent); transform: translateY(-1px); } .theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } .theme-card-name { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 4px; } .theme-card-desc { font-size: 11px; color: var(--text-mute); } .theme-preview { height: 80px; border-radius: var(--radius-sm); padding: 8px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; } .theme-preview-bar { height: 6px; border-radius: 3px; background: rgba(59, 130, 246, 0.7); width: 30%; } .theme-preview-block { height: 22px; border-radius: 4px; background: rgba(255,255,255,0.15); } .theme-preview-block-sm { height: 16px; border-radius: 4px; background: rgba(255,255,255,0.10); width: 70%; } .theme-preview-dark { background: #111a2e; border: 1px solid #1f2b47; } .theme-preview-dark .theme-preview-bar { background: #3b82f6; } .theme-preview-dark .theme-preview-block { background: #162038; } .theme-preview-dark .theme-preview-block-sm { background: #162038; } .theme-preview-light { background: #ffffff; border: 1px solid #d8dee9; } .theme-preview-light .theme-preview-bar { background: #2563eb; } .theme-preview-light .theme-preview-block { background: #eef2f8; } .theme-preview-light .theme-preview-block-sm { background: #eef2f8; } .theme-preview-system { background: linear-gradient(120deg, #111a2e 0% 50%, #ffffff 50% 100%); border: 1px solid #1f2b47; } .theme-preview-system .theme-preview-bar { background: #3b82f6; } .theme-preview-system .theme-preview-block { background: rgba(255,255,255,0.2); } .theme-preview-glass { background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.18), transparent 70%), linear-gradient(180deg, #1a3a5c 0%, #4a8aa9 100%); border: 1px solid rgba(255, 255, 255, 0.18); } .theme-preview-glass .theme-preview-bar { background: rgba(255,255,255,0.85); } .theme-preview-glass .theme-preview-block { background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); } .theme-preview-glass .theme-preview-block-sm { background: rgba(255, 255, 255, 0.12); } .theme-preview-aurora { background: radial-gradient(ellipse 200px 100px at 50% 0%, rgba(245, 158, 11, 0.4), transparent 70%), #0a0a0a; border: 1px solid #3d2f20; } .theme-preview-aurora .theme-preview-bar { background: #f59e0b; } .theme-preview-aurora .theme-preview-block { background: #1a1410; } .theme-preview-aurora .theme-preview-block-sm { background: #221a14; } /* ============ PDF PREVIEW DIALOG ============ */ .pdf-preview-dialog { width: 95vw; max-width: 1100px; height: 92vh; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); color: var(--text); overflow: hidden; } .pdf-preview-dialog::backdrop { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(3px); } .pdf-preview-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-elev-2); flex-wrap: wrap; gap: 8px; } .pdf-preview-title { font-size: 14px; font-weight: 600; color: var(--text); } .pdf-preview-actions { display: flex; gap: 8px; } .pdf-preview-iframe { width: 100%; height: calc(92vh - 60px); border: none; background: white; display: block; } /* À propos */ .settings-about { font-size: 13px; color: var(--text-dim); line-height: 1.6; padding: 12px 0; } .settings-about-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; } .card-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } /* ============ DOCUMENTATION ============ */ .doc-toolbar { display: flex; gap: 8px; align-items: center; } .doc-search { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; color: var(--text); font-size: 13px; min-width: 240px; } .doc-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; } /* INDEX : grille de chapitres */ .doc-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 12px; } .doc-index[hidden] { display: none !important; } .doc-chapter[hidden] { display: none !important; } .doc-card-chapter { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color 0.15s, transform 0.05s, background 0.15s; } .doc-card-chapter:hover { border-color: var(--accent); background: var(--bg-elev); } .doc-card-chapter:active { transform: scale(0.99); } .doc-card-icon { font-size: 28px; line-height: 1; } .doc-card-title { font-weight: 700; font-size: 15px; color: var(--text); } .doc-card-summary { font-size: 12px; color: var(--text-dim); line-height: 1.5; flex: 1; } .doc-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-mute); padding-top: 8px; border-top: 1px solid var(--border); } .doc-card-arrow { color: var(--accent); font-weight: 600; } /* CHAPITRE : page détail */ .doc-chapter { max-width: 920px; margin: 0 auto; padding: 8px 0; } .doc-chapter-header { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 24px; } .doc-chapter-icon { font-size: 48px; flex-shrink: 0; line-height: 1; } .doc-chapter-title { font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 6px; line-height: 1.2; } .doc-chapter-subtitle { font-size: 14px; color: var(--text-dim); } .doc-chapter-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .doc-chapter-tag { background: var(--bg-elev-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 12px; font-size: 11px; color: var(--text-dim); } .doc-section { margin-top: 28px; scroll-margin-top: 80px; } .doc-section:first-child { margin-top: 0; } .doc-section h2 { font-size: 20px; margin-bottom: 12px; color: var(--accent); font-weight: 700; } .doc-section h3 { font-size: 15px; margin-top: 18px; margin-bottom: 8px; color: var(--text); font-weight: 600; } .doc-section p { font-size: 14px; color: var(--text-dim); line-height: 1.7; margin: 10px 0; } .doc-section ul, .doc-section ol { margin: 10px 0 10px 24px; font-size: 14px; color: var(--text-dim); line-height: 1.8; } .doc-section li { margin-bottom: 6px; } .doc-section strong { color: var(--text); font-weight: 600; } .doc-callout { background: rgba(59, 130, 246, 0.08); border-left: 3px solid var(--accent); padding: 12px 16px; margin: 16px 0; border-radius: 4px; font-size: 13px; color: var(--text); line-height: 1.6; } .doc-callout-warn { background: rgba(234, 88, 12, 0.1); border-left-color: var(--orange); } .doc-callout-danger { background: rgba(220, 38, 38, 0.1); border-left-color: var(--rouge); } .doc-callout-info { background: rgba(22, 163, 74, 0.08); border-left-color: var(--vert); } .doc-section table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 14px 0; } .doc-section table th, .doc-section table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); } .doc-section table th { font-size: 11px; text-transform: uppercase; color: var(--text-mute); background: var(--bg-elev-2); font-weight: 600; letter-spacing: 0.4px; } .doc-section table tr:hover td { background: var(--bg-elev-2); } .doc-section code { background: var(--bg); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--accent); } .doc-section .formula { display: block; background: var(--bg); border: 1px solid var(--border); padding: 12px 16px; margin: 12px 0; border-radius: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; color: var(--text); text-align: center; } /* SCHEMAS SVG */ .doc-figure { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin: 20px 0; } .doc-figure svg { width: 100%; height: auto; max-height: 400px; display: block; margin: 0 auto; } .doc-figure figcaption { text-align: center; font-size: 12px; color: var(--text-mute); margin-top: 12px; font-style: italic; line-height: 1.5; } .doc-figure-title { font-size: 13px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; text-align: center; } /* GLOSSAIRE */ .doc-glossary { display: grid; gap: 10px; } .doc-term { display: grid; grid-template-columns: 160px 1fr; gap: 14px; padding: 12px 14px; background: var(--bg-elev-2); border-radius: var(--radius-sm); border: 1px solid var(--border); } .doc-term-name { font-weight: 700; color: var(--accent); font-size: 13px; } .doc-term-def { font-size: 13px; color: var(--text-dim); line-height: 1.5; } /* NAVIGATION CHAPITRES */ .doc-chapter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); } .doc-nav-btn { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; text-align: left; transition: border-color 0.15s, background 0.15s; } .doc-nav-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-elev); } .doc-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; } .doc-nav-btn-direction { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.5px; } .doc-nav-btn-title { font-size: 13px; font-weight: 600; color: var(--text); } .doc-nav-btn-next { text-align: right; align-items: flex-end; } .doc-related { margin-top: 24px; padding: 16px; background: var(--bg-elev-2); border-radius: var(--radius); border: 1px solid var(--border); } .doc-related-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-mute); font-weight: 600; margin-bottom: 10px; } .doc-related-list { display: flex; flex-wrap: wrap; gap: 8px; } .doc-related-list a { background: var(--bg-elev); border: 1px solid var(--border); padding: 6px 12px; border-radius: 14px; font-size: 12px; color: var(--accent); cursor: pointer; transition: background 0.15s; } .doc-related-list a:hover { background: var(--accent); color: white; } .doc-hidden { display: none !important; } /* ============ PROBABILITÉS (Orage / Tornade) ============ */ .proba-hero { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 24px; background: var(--bg-elev-2); border-radius: var(--radius); margin-bottom: 18px; } .proba-gauge-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .proba-gauge { position: relative; width: 200px; height: 200px; } .proba-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); } .proba-gauge-bg { fill: none; stroke: var(--bg); stroke-width: 14; } .proba-gauge-fg { fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 0.6s, stroke 0.3s; } .proba-gauge-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .proba-gauge-pct { font-size: 44px; font-weight: 800; line-height: 1; } .proba-gauge-unit { font-size: 18px; color: var(--text-mute); margin-left: 2px; } .proba-gauge-label { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 6px; } .proba-summary { display: flex; flex-direction: column; gap: 12px; } .proba-summary h3 { font-size: 18px; font-weight: 700; } .proba-summary p { font-size: 14px; color: var(--text-dim); line-height: 1.6; } .proba-window { display: flex; gap: 14px; padding: 12px 14px; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border); } .proba-window-item { flex: 1; } .proba-window-label { font-size: 11px; color: var(--text-mute); text-transform: uppercase; } .proba-window-value { font-size: 18px; font-weight: 700; margin-top: 2px; } .proba-factors-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-mute); margin: 18px 0 10px; font-weight: 600; } .proba-factor { display: grid; grid-template-columns: 180px 1fr 60px; gap: 12px; padding: 10px 14px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; align-items: center; } .proba-factor-name { font-size: 13px; font-weight: 600; } .proba-factor-value { font-size: 11px; color: var(--text-mute); margin-top: 2px; } .proba-factor-bar { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; position: relative; } .proba-factor-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s; } .proba-factor-pct { font-size: 13px; font-weight: 700; text-align: right; } .proba-color-vert { background: var(--vert); } .proba-color-jaune { background: var(--jaune); } .proba-color-orange { background: var(--orange); } .proba-color-rouge { background: var(--rouge); } .proba-warn-banner { display: flex; gap: 14px; align-items: center; padding: 14px 18px; background: rgba(220, 38, 38, 0.12); border: 1px solid rgba(220, 38, 38, 0.45); border-radius: var(--radius); margin-bottom: 18px; } .proba-warn-banner.level-orange { background: rgba(234, 88, 12, 0.12); border-color: rgba(234, 88, 12, 0.45); } .proba-warn-icon { font-size: 26px; } .proba-warn-content { flex: 1; } .proba-warn-title { font-weight: 700; font-size: 14px; letter-spacing: 0.5px; } .proba-warn-text { font-size: 13px; color: var(--text-dim); margin-top: 2px; } @media (max-width: 800px) { .proba-hero { grid-template-columns: 1fr; } .proba-factor { grid-template-columns: 1fr 50px; } .proba-factor .proba-factor-bar { grid-column: 1 / 3; } } /* ============ DOC : barre d'onglets sur la page chapitre ============ */ .doc-chapter-tabs { display: flex; gap: 6px; padding: 8px 0 14px; margin-bottom: 18px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .doc-chapter-tabs::-webkit-scrollbar { height: 6px; } .doc-chapter-tabs::-webkit-scrollbar-track { background: transparent; } .doc-chapter-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .doc-chapter-tab { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 16px; padding: 6px 12px; font-size: 12px; color: var(--text-dim); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; transition: background 0.15s, color 0.15s, border-color 0.15s; font-family: inherit; } .doc-chapter-tab:hover { background: var(--bg-elev); color: var(--text); border-color: var(--accent); } .doc-chapter-tab.active { background: var(--accent); color: white; border-color: var(--accent); font-weight: 600; } .doc-chapter-tab-icon { font-size: 14px; } /* ============ INFO BUTTON (tooltip d'aide) ============ */ .info-btn { position: relative; display: inline-flex; width: 15px; height: 15px; border-radius: 50%; background: rgba(59, 130, 246, 0.18); color: var(--accent); font-size: 10px; font-weight: 700; align-items: center; justify-content: center; cursor: help; margin-left: 5px; vertical-align: middle; flex-shrink: 0; user-select: none; transition: background 0.15s, color 0.15s; } .info-btn:hover, .info-btn:focus { background: var(--accent); color: white; outline: none; } .info-tooltip { visibility: hidden; opacity: 0; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); /* Couleur opaque indépendante du thème pour rester lisible (jamais transparent) */ background: #0f1729; color: #f0f4ff; border: 1px solid #2d3a5c; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: normal; width: 260px; text-align: left; line-height: 1.5; z-index: 9999; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); transition: opacity 0.15s; pointer-events: none; white-space: normal; backdrop-filter: none; -webkit-backdrop-filter: none; } .info-tooltip strong { color: #6db4ff; } .info-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #0f1729; } .info-btn:hover .info-tooltip, .info-btn:focus .info-tooltip { visibility: visible; opacity: 1; } /* Sur mobile : positionnement au-dessus du parent direct */ @media (max-width: 600px) { .info-tooltip { width: 220px; font-size: 11px; } } /* ============ HAMBURGER MENU (mobile) ============ */ .hamburger-btn { display: none; /* caché par défaut, visible en mobile uniquement */ width: 40px; height: 40px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; cursor: pointer; flex-shrink: 0; } .hamburger-btn span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 1px; transition: transform 0.25s, opacity 0.25s; } /* Animation hamburger → croix quand sidebar ouverte */ body.sidebar-open .hamburger-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.sidebar-open .hamburger-btn span:nth-child(2) { opacity: 0; } body.sidebar-open .hamburger-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Backdrop transparent (caché par défaut) */ .sidebar-backdrop { display: none; } /* ============ RESPONSIVE — TABLETTES ============ */ @media (max-width: 1400px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .indices-grid { grid-template-columns: repeat(3, 1fr); } .bottom-grid { grid-template-columns: 1fr; } .history-stats { grid-template-columns: repeat(2, 1fr); } .dashboard-mid-grid { grid-template-columns: 1fr; } .dashboard-mid-grid .indices-grid { grid-template-columns: repeat(3, 1fr); } } /* ============ RESPONSIVE — MOBILE / SMARTPHONES ============ */ @media (max-width: 900px) { /* App passe en 1 colonne, sidebar devient un drawer off-canvas */ .app { grid-template-columns: 1fr; } /* Hamburger visible */ .hamburger-btn { display: flex; } /* Sidebar : drawer à gauche, masquée par défaut */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 85vw; z-index: 1000; transform: translateX(-100%); transition: transform 0.28s ease-out; box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45); border-right: 1px solid var(--border); overflow-y: auto; } body.sidebar-open .sidebar { transform: translateX(0); } /* Backdrop visible quand sidebar ouverte */ .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; } body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; } /* Empêche le scroll du body quand le drawer est ouvert */ body.sidebar-open { overflow: hidden; } /* Adaptations layout */ .main { padding: 14px 12px; } .topbar { flex-wrap: wrap; gap: 10px; align-items: center; } .topbar-greeting { flex: 1; min-width: 0; } .greeting { font-size: 16px; } .topbar-right { width: 100%; justify-content: space-between; flex-wrap: wrap; } .auto-update { font-size: 11px; } /* Bandeau "Conditions actuelles" : pile en colonne */ .weather-current { flex-wrap: wrap; padding: 12px 14px; } .weather-current-cells { width: 100%; justify-content: flex-start; } /* Cartes en pleine largeur */ .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .stat-card { padding: 12px; } .stat-value { font-size: 22px; } .indices-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .dashboard-mid-grid .indices-grid { grid-template-columns: repeat(2, 1fr); } /* Carte plus basse en hauteur */ .map { height: 320px; } .dashboard-mid-grid .map { height: 320px; } .map-fs { height: calc(100vh - 280px); min-height: 360px; } /* Alertes : passe en 1 colonne, plus serré */ .alert-row { grid-template-columns: 1fr; gap: 6px; padding: 10px; } /* Indices détaillés : tableau scrollable horizontalement si débordement */ .indices-table { font-size: 12px; } .indices-table th, .indices-table td { padding: 8px; } /* Forecast table : compact */ .forecast-table th, .forecast-table td { padding: 6px 8px; font-size: 11px; } /* Settings : 1 carte par ligne */ .settings-grid { grid-template-columns: 1fr; } /* Theme grid : 2 colonnes */ .theme-grid { grid-template-columns: repeat(2, 1fr); } /* Probas hero : empile */ .proba-hero { grid-template-columns: 1fr; padding: 16px; } .proba-gauge { width: 160px; height: 160px; } .proba-factor { grid-template-columns: 1fr 50px; gap: 8px; } .proba-factor .proba-factor-bar { grid-column: 1 / 3; } /* Doc : cartes plus petites */ .doc-index { grid-template-columns: 1fr; } .doc-chapter-tabs { padding: 6px 0 10px; } .doc-chapter-title { font-size: 22px; } /* Footer : empile les éléments */ .footer { flex-direction: column; gap: 8px; text-align: center; font-size: 10px; } /* Visite stats : 2 colonnes au lieu de 4 */ .visit-stats-grid { grid-template-columns: repeat(2, 1fr); } /* Dialog plus large sur mobile */ .pdf-preview-dialog { width: 100vw; height: 100vh; max-width: 100vw; border-radius: 0; } .pdf-preview-iframe { height: calc(100vh - 60px); } /* PDF preview toolbar : actions sur 2 lignes */ .pdf-preview-toolbar { flex-wrap: wrap; gap: 6px; padding: 10px 12px; } .pdf-preview-actions { width: 100%; justify-content: flex-end; } } @media (max-width: 480px) { /* Très petit écran : encore plus compact */ .stats-grid { grid-template-columns: 1fr; } .indices-grid { grid-template-columns: 1fr; } .dashboard-mid-grid .indices-grid { grid-template-columns: repeat(2, 1fr); } .greeting { font-size: 14px; } .stat-value { font-size: 20px; } .visit-stats-grid { grid-template-columns: 1fr; } }