/* ---- FONTS ---- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---- VARIABLES ----
   Tous les tokens vivent dans design-tokens.css (chargé avant cette feuille). */

/* ---- RESET & BASE ---- */
*, *:before, *:after { box-sizing: border-box; }
html { scroll-behavior: smooth; height: 100%; background-color: var(--bg-end, #070d1a); }
/* Fixed Background Optimization - SIMPLIFIED */
body {
    font-family: var(--font-body);
    /* Fond "aurore" : halos subtils + dégradé radial, statique = performant */
    background:
        radial-gradient(900px 520px at 12% -8%, rgba(8, 145, 178, 0.10), transparent 60%),
        radial-gradient(820px 560px at 92% 0%, rgba(99, 102, 241, 0.12), transparent 62%),
        radial-gradient(700px 700px at 50% 115%, rgba(14, 116, 144, 0.10), transparent 65%),
        radial-gradient(circle at 50% 30%, var(--bg-start) 0%, var(--bg-end) 100%);
    background-attachment: fixed; /* Keep it fixed but native */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--text-primary);
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* html::before REMOVED for performance */

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; padding: 0; margin: 0; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }

/* ---- NAVBAR & MENU (définition unique) ---- */
#banner-container { width: 100%; }
body:has(#geo-modal.active) .navbar { display: none !important; }

.navbar {
    /* Chrome (navbar) : couleurs dédiées par thème — voir design-tokens.css */
    --text-primary: var(--chrome-text-1);
    --text-secondary: var(--chrome-text-2);
    --text-muted: var(--chrome-text-3);
    --surface-1: var(--chrome-soft);
    --surface-border: var(--chrome-border);
    --surface-border-hover: rgba(8, 145, 178, 0.4);
    position: sticky; top: 0; left: 0; width: 100%; height: var(--navbar-height);
    background: var(--chrome-bg);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--surface-border); z-index: 10000;
}
.navbar-container { max-width: 1400px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 25px; }
.navbar-brand { display: flex; align-items: center; gap: 12px; min-width: fit-content; }
.navbar-logo { height: 58px; width: 58px; border-radius: 50%; box-shadow: 0 0 15px var(--accent-glow); transition: transform var(--transition); flex-shrink: 0; }
.navbar-brand:hover .navbar-logo { transform: rotate(5deg) scale(1.05); }
.brand-name { font-weight: 700; font-size: 1.4rem; font-family: var(--font-display); letter-spacing: -0.015em; color: var(--text-primary); }

.navbar-menu { display: flex; gap: 6px; height: 100%; align-items: center; }
.nav-item {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    color: var(--text-secondary); font-weight: 500; font-size: 0.9rem;
    border-radius: var(--radius-sm); transition: all var(--transition);
    white-space: nowrap; cursor: pointer; border: 1px solid transparent;
    text-decoration: none;
    position: relative;
}
.nav-item:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
.nav-item.active { color: var(--accent); background: var(--accent-soft); border-color: rgba(8, 145, 178, 0.2); }
.nav-item i { color: var(--accent-color); font-size: 1rem; }
/* Soulignement animé au survol */
.nav-item::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: 5px;
    height: 2px;
    background: var(--accent-grad);
    border-radius: var(--radius-full);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition);
    pointer-events: none;
}
.nav-item:hover::after { transform: scaleX(1); }

/* Dropdown System */
.nav-dropdown { position: relative; height: 100%; display: flex; align-items: center; }
.dropdown-content {
    position: absolute; top: 100%; left: 0; min-width: 250px; margin-top: 0;
    background: var(--chrome-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: 12px;
    box-shadow: var(--shadow-3);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all var(--transition);
    z-index: 11000;
}
.nav-dropdown:hover .dropdown-content { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 18px;
    color: var(--text-secondary); font-size: 0.95rem; border-radius: var(--radius-xs);
    transition: all 0.2s ease; margin-bottom: 2px;
    text-decoration: none;
}
.dropdown-item:hover { background: rgba(8, 145, 178, 0.1); color: var(--text-primary); transform: translateX(5px); }
.dropdown-item.active { color: var(--accent-color); font-weight: 600; background: rgba(8, 145, 178, 0.05); }
.dropdown-item i { color: var(--accent-color); width: 20px; text-align: center; font-size: 1rem; }

.navbar-status { display: flex; align-items: center; gap: 15px; }
.mobile-menu-toggle { display: none; font-size: 1.5rem; color: #fff; cursor: pointer; padding: 10px; border-radius: 50%; transition: background 0.3s; }
.mobile-menu-toggle:hover { background: rgba(255,255,255,0.05); }

/* Early Mobile Menu activation for complex menus */
@media (max-width: 1150px) {
    .navbar-menu { display: none; }
    .mobile-menu-toggle { display: block; }
}

/* ---- MOBILE MENU & SUB-NAV ---- */
.mobile-menu-overlay {
    /* Même chrome que la navbar */
    --text-primary: var(--chrome-text-1);
    --text-secondary: var(--chrome-text-2);
    --text-muted: var(--chrome-text-3);
    --surface-border: var(--chrome-border);
    position: fixed; inset: 0; background: rgba(10, 15, 26, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 10000; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); display: flex; justify-content: flex-end;
}
.mobile-menu-overlay.active { transform: translateX(0); }
.mobile-menu-content { width: 100%; max-width: 320px; background: var(--chrome-bg); color: var(--text-secondary); height: 100%; border-left: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; overflow-y: auto; box-shadow: -10px 0 40px rgba(0,0,0,0.5); }
.mobile-menu-header { padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.mobile-menu-title { font-weight: 800; font-size: 1.3rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 1px; }
.close-menu-btn { font-size: 1.4rem; color: var(--text-primary); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; }

.mobile-nav-links { padding: 25px 20px; display: flex; flex-direction: column; gap: 8px; }     
.mobile-nav-item { display: flex; align-items: center; gap: 15px; padding: 14px 18px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; font-size: 1rem; transition: all var(--transition); text-decoration: none; border: 1px solid transparent; }
.mobile-nav-item i { color: var(--accent-color); width: 24px; font-size: 1.1rem; text-align: center; }
.mobile-nav-item.active { background: rgba(8, 145, 178, 0.1); color: var(--accent-color); border-color: rgba(8, 145, 178, 0.2); font-weight: 600; }
.mobile-nav-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
/* Badge NEW du menu mobile : calé à droite sans décaler le libellé
   (!important pour battre le style inline du badge) */
.mobile-nav-item > .nav-badge-new { margin-left: auto !important; flex-shrink: 0; }

.mobile-menu-separator { padding: 20px 20px 10px 25px; color: var(--accent-color); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; opacity: 0.8; margin-top: 10px; }     
.mobile-sub-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px 30px 20px; }
.mobile-sub-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.03);
    color: var(--text-secondary); font-weight: 600; font-size: 0.8rem; text-align: center;
    border: 1px solid rgba(255,255,255,0.05); cursor: pointer; transition: all var(--transition);
}
.mobile-sub-nav-item i { font-size: 1.2rem; color: var(--accent-color); }
.mobile-sub-nav-item:hover { background: rgba(8, 145, 178, 0.1); color: var(--accent-color); border-color: rgba(8, 145, 178, 0.2); }
.mobile-actions { padding: 0 20px 20px 20px; }
.mobile-action-item { display: flex; align-items: center; gap: 15px; padding: 15px; width: 100%; background: transparent; color: var(--text-secondary); border-radius: var(--radius-sm); }
.mobile-action-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.action-text { text-align: left; }
.action-label { font-weight: 600; display: block; font-size: 1rem; }

/* ---- LAYOUT ---- */
.app-container { flex: 1 0 auto; padding: 30px 0 60px 0; max-width: 1280px; margin: 0 auto; width: 100%; }

/* ---- SITE STATUS BAR ---- */
.site-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 0 auto 30px auto;
    width: 100%;
    max-width: 800px; /* Limit width for aesthetics */
    background: var(--surface-1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg); /* Slightly less rounded than pill */
    padding: 10px 25px;
    box-shadow: var(--shadow-2);
    animation: fadeEffect 0.8s ease-out;
}

.site-update-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.pulsing-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 6px var(--accent-color);
    flex-shrink: 0;
    display: inline-block;
}

.pulsing-dot::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color);
    border-radius: 50%;
    opacity: 0.6;
    animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
    transform-origin: center;
}

.site-update-badge strong {
    color: var(--accent-color);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Specific styling for the button part to make it look interactive */
.status-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    transition: all var(--transition);
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    padding: 8px 16px;
    background: rgba(148, 163, 184, 0.08);
    border-radius: var(--radius-sm);
    border: 1px solid var(--surface-border);
}

.status-action-btn:hover {
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-primary);
    transform: translateY(-2px);
    border-color: var(--surface-border-hover);
    box-shadow: var(--shadow-2);
}

.status-action-btn:active {
    transform: scale(0.98);
}

.status-action-btn i {
    color: var(--accent-color);
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(3.5); opacity: 0; }
}

@media (max-width: 768px) {
    .site-status-bar {
        flex-direction: column; /* Stack vertically on mobile */
        gap: 15px;
        padding: 15px;
        border-radius: var(--radius-md);
        margin-bottom: 20px;
        width: auto;
        margin-left: 10px;
        margin-right: 10px;
    }

    .site-update-badge {
        width: 100%;
        justify-content: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 15px;
    }

    .status-action-btn {
        width: 100%;
        justify-content: center;
        padding: 12px;
        background: rgba(255, 255, 255, 0.08); /* Slightly more visible on mobile */
    }
}

.sub-nav-container { margin-bottom: 40px; padding: 0 20px; }
.tab-navigation { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.tab-button {
    padding: 12px 24px; font-size: 0.95rem; font-weight: 600; color: var(--text-secondary);
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--surface-border);
    /* backdrop-filter: var(--backdrop-blur); REMOVED for performance */
    border-radius: var(--radius-sm); transition: var(--transition); display: flex; align-items: center; gap: 10px;
    animation: nav-enter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

@keyframes nav-enter {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-button:nth-child(1) { animation-delay: 0.1s; }
.tab-button:nth-child(2) { animation-delay: 0.2s; }
.tab-button:nth-child(3) { animation-delay: 0.3s; }
.tab-button:nth-child(4) { animation-delay: 0.4s; }

.tab-button:hover { background: rgba(148, 163, 184, 0.14); color: var(--text-primary); transform: translateY(-2px); }
.tab-button.active { background: var(--accent-soft); border-color: rgba(8, 145, 178, 0.45); color: var(--accent-color); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.15), 0 0 18px -6px var(--accent-glow); }

/* Tab Content Visibility - STRICT */
.tab-content, .main-tab-group, .sub-tab-content {
    display: none;
    width: 100%;
}

.tab-content.active, .main-tab-group.active {
    display: block;
    animation: tabFadeIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.sub-tab-content.active {
    display: block;
}

@keyframes fadeEffect { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ---- TOAST NOTIFICATIONS ---- */
#toast-container {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 9999999;
    pointer-events: none;
}
#lvm-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    z-index: 9999999;
    pointer-events: none;
    max-width: min(380px, calc(100vw - 40px));
}
.lvm-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
    white-space: normal;
    max-width: 100%;
    text-align: left;
    word-break: break-word;
}
.lvm-toast.visible { opacity: 1; transform: translateY(0) scale(1); }
.lvm-toast-success { background: rgba(16, 185, 129, 0.92); border: 1px solid rgba(16,185,129,0.4); }
.lvm-toast-error   { background: rgba(239, 68, 68, 0.92);  border: 1px solid rgba(239,68,68,0.4); }
.lvm-toast-info    { background: rgba(8, 145, 178, 0.92); border: 1px solid rgba(8, 145, 178,0.4); }
.lvm-toast-warning { background: rgba(245, 158, 11, 0.92); border: 1px solid rgba(245,158,11,0.4); }
@keyframes lvmSlideOut {
    to { opacity: 0; transform: translateY(10px) scale(0.9); }
}

/* ---- QUICK ACCESS & TAB GROUPS ---- */
.quick-access-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

/* Boutons J/J+1/J+2 — même recette que .nav-item de la navbar */
.quick-btn {
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--surface-border);
    background: var(--surface-1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 500;
    transition: all var(--transition);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.quick-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-med, rgba(148,163,184,0.25));
    color: var(--text-primary);
}

.quick-btn::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: 5px;
    height: 2px;
    background: var(--accent-grad);
    border-radius: var(--radius-full);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition);
    pointer-events: none;
}
.quick-btn:hover::after { transform: scaleX(1); }

.quick-btn.active {
    background: var(--accent-soft);
    border-color: rgba(8, 145, 178, 0.4);
    color: var(--accent);
    font-weight: 600;
    box-shadow: 0 0 14px -4px var(--accent-glow);
}


/* ---- CARDS & FORMS (PERFORMANCE OPTIMIZATION) ---- */
.column-card, .dashboard-card, .phenomenon-block, .glass-card {
    background: var(--surface-grad);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-2);
    margin: 0 20px 20px 20px;
    position: relative; /* Essential for containing absolute loaders */
    overflow: hidden;   /* Clip the loading blur correctly */
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.glass-card:hover {
    border-color: var(--surface-border-hover);
    box-shadow: var(--shadow-3);
    transform: translateY(-2px);
}
/* Liseré supérieur accentué */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent-grad);
    opacity: 0.55;
    pointer-events: none;
}
.column-card h2, .dashboard-card h2 {
    font-size: 1.1rem; font-weight: 700;
    margin: -30px -30px 24px -30px;
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,0.04);
    padding: 14px 30px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: var(--text-primary);
    position: relative; overflow: hidden;
}
.column-card h2 i, .dashboard-card h2 i { color: var(--accent-color); font-size: 1rem; }
@keyframes cardHeaderShimmer {
    0%   { transform: translateX(-150%); }
    100% { transform: translateX(280%); }
}
.column-card h2::after, .dashboard-card h2::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent 0%, rgba(8, 145, 178,0.06) 50%, transparent 100%);
    animation: cardHeaderShimmer 5s cubic-bezier(0.4, 0, 0.6, 1) 1.5s infinite;
    pointer-events: none;
}
.auth-card { max-width: 450px; text-align: center; margin-left: auto; margin-right: auto; backdrop-filter: var(--backdrop-blur); /* Keep blur on auth cards */ }
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; margin-bottom: 5px; font-size: 0.9rem; color: var(--text-secondary); }
.custom-input, .auth-card input { width: 100%; padding: 12px; background: var(--surface-input); border: 1px solid var(--surface-border); border-radius: var(--radius-xs); color: var(--text-primary); transition: border-color var(--transition), box-shadow var(--transition); }
.custom-input:focus, .auth-card input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.custom-input::placeholder, .auth-card input::placeholder { color: var(--text-muted); }
.btn-primary { padding: 12px 25px; background: var(--accent-grad); color: var(--on-accent); border-radius: var(--radius-sm); font-weight: 700; box-shadow: 0 4px 16px -4px var(--accent-glow); transition: transform var(--transition), box-shadow var(--transition), filter var(--transition); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -6px var(--accent-glow), 0 0 0 1px rgba(8, 145, 178, 0.4); filter: brightness(1.06); }
.btn-primary:active { transform: translateY(0); filter: brightness(0.97); }
.btn-secondary { padding: 12px 25px; background: rgba(148,163,184,.08); color: var(--text-secondary); border: 1px solid var(--surface-border); border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-secondary:hover { background: rgba(148,163,184,.14); color: var(--text-primary); border-color: rgba(255,255,255,0.2); }
body:has(#archive-date) .dashboard-card, .date-selector-container { border-radius: var(--radius-card-archives); }

/* ---- ORAGES GRID (2 cartes côte à côte) ---- */
.orages-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0 0 0 0;
}
@media (max-width: 1150px) {
    .orages-grid { grid-template-columns: 1fr; }
}
.orage-card {
    display: flex;
    flex-direction: column;
}
.orage-card .lien-carte {
    display: block;
    flex: 1;
}
.orage-card .lien-carte img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    display: block;
}
.level-strip,
.pct-strip {
    display: flex;
    gap: 4px;
    margin-top: 12px;
}
.level-tile,
.pct-tile {
    flex: 1;
    text-align: center;
    padding: 5px 2px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #0f172a;
}
.pct-tile { color: #ffffff; font-size: 0.65rem; }

/* ---- MAP & TOOLTIP ---- */
.vig-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
}
.vig-map-legend span {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px 4px 6px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.04);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.vig-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 6px 0 currentColor;
}
.map-container { position: relative; width: 100%; background: var(--surface-inset); border: var(--glass-border); border-radius: var(--radius-card); height: calc(100vh - 170px); min-height: 480px; max-height: 960px; display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; contain: layout paint; }
.map-container svg { width: 100%; height: 100%; display: block; }
.dep-path { stroke: var(--bg-end); stroke-width: 0.5px; cursor: pointer; fill-opacity: 1; transition: filter 0.15s; }
.dep-path:hover, .dep-path.hovered { filter: brightness(1.22) saturate(1.1); }
.dep-highlight { fill: none; stroke: rgba(255,255,255,0.9); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.dep-path.level-none { fill: var(--vigilance-none); } .dep-path.level-etude { fill: var(--vigilance-etude); } .dep-path.level-moderee { fill: var(--vigilance-moderee); } .dep-path.level-renforcee { fill: var(--vigilance-renforcee); } .dep-path.level-absolue { fill: var(--vigilance-absolue); }
.map-pc-inset {
    position: absolute; top: 10px; left: 12px; z-index: 15;
    background: var(--surface-1);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2);
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 4px;
    pointer-events: auto;
}
.map-pc-inset-title { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.map-pc-inset .map-pc-svg { width: 92px; height: 92px; display: block; }
@media (max-width: 768px) {
    .map-pc-inset .map-pc-svg { width: 74px; height: 74px; }
}
@media (max-width: 480px) {
    .map-pc-inset { padding: 6px 8px; }
    .map-pc-inset .map-pc-svg { width: 60px; height: 60px; }
}
.map-back-btn { position: absolute; top: 10px; left: 12px; background: var(--surface-2); border: 1px solid rgba(255,255,255,0.18); color: var(--text-primary); padding: 6px 14px; border-radius: var(--radius-full); cursor: pointer; font-size: 0.82em; font-family: inherit; font-weight: 600; backdrop-filter: blur(8px); z-index: 20; display: flex; align-items: center; gap: 7px; transition: background 0.15s; }
.map-back-btn:hover { background: var(--surface-2); }
.map-zoom-controls { position: absolute; bottom: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 20; }
.map-zoom-btn { background: var(--surface-2); border: 1px solid rgba(255,255,255,0.16); color: var(--text-primary); width: 36px; height: 36px; border-radius: var(--radius-xs); cursor: pointer; font-size: 1em; font-family: inherit; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); transition: background 0.15s; }
.map-zoom-btn:hover { background: rgba(8, 145, 178,0.2); color: var(--accent); border-color: rgba(8, 145, 178,0.4); }
.city-label { font-size: 8px; fill: rgba(255,255,255,0.75); font-family: var(--font-body); font-weight: 600; text-anchor: middle; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,0.8); paint-order: stroke fill; stroke: rgba(0,0,0,0.6); stroke-width: 3px; stroke-linejoin: round; }
.map-popup-zoom-btn { width: 100%; margin: 8px 0 12px; padding: 9px; background: rgba(8, 145, 178,0.12); border: 1px solid rgba(8, 145, 178,0.3); border-radius: var(--radius-xs); color: var(--accent); font-family: inherit; font-size: 0.88em; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.15s; }
.map-popup-zoom-btn:hover, .map-popup-zoom-btn:active { background: rgba(8, 145, 178,0.22); border-color: rgba(8, 145, 178,0.5); }

/* ---- VIGILANCE SPLIT LAYOUT ---- */
.vig-split-layout { display: grid; grid-template-columns: 54fr 46fr; gap: 18px; align-items: start; padding: 0 16px 32px; max-width: 1200px; margin: 0 auto; isolation: isolate; }
.vig-split-left { position: sticky; top: 80px; }
.vig-split-right { min-width: 0; }
.vig-right-inner { display: flex; flex-direction: column; gap: 12px; }
.vig-right-header { padding: 4px 2px 0; }
.vig-right-header h2 { font-size: 1.1rem; margin: 0 0 4px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vig-day-badge { font-size: 0.72em; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); background: var(--accent-soft); border: 1px solid rgba(8, 145, 178,0.3); color: var(--accent); letter-spacing: 0.02em; white-space: nowrap; }
.vig-right-header .explication { margin: 0; font-size: 0.8em; color: var(--text-muted); line-height: 1.4; }
.vig-export-btn { position: absolute; top: 10px; right: 10px; z-index: 10; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; font-size: 0.74em; font-weight: 600; color: var(--text-muted); background: var(--surface-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--surface-border); border-radius: var(--radius-full); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.vig-export-btn:hover { color: var(--accent); border-color: var(--accent); }
.vig-block { background: var(--surface-grad); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 16px 18px; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.vig-block:empty { display: none; }
.vig-block:hover { border-color: var(--surface-border-hover); box-shadow: var(--shadow-3); transform: translateY(-2px); }
.vig-section-title { margin: 0 0 10px 0; font-size: 0.78em; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 7px; }
.vig-section-title i { color: var(--accent-color); font-size: 0.9em; }
.vig-prevention-block { display: flex; flex-direction: column; }
.vig-prevention-block:empty { display: none; }
.vig-commentary-block { font-size: 0.88em; }
.vig-commentary-block:empty { display: none; }

/* Empty state — aucune vigilance */
.vig-no-vigilance-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 24px 16px; }
.vig-no-vig-icon { font-size: 2.6rem; color: var(--vigilance-none); opacity: 0.85; line-height: 1; }
.vig-no-vig-title { font-size: 1rem; font-weight: 700; color: var(--vigilance-none); letter-spacing: 0.01em; }
.vig-no-vigilance-state.level-moderee .vig-no-vig-icon, .vig-no-vigilance-state.level-moderee .vig-no-vig-title { color: var(--vigilance-moderee); }
.vig-no-vigilance-state.level-renforcee .vig-no-vig-icon, .vig-no-vigilance-state.level-renforcee .vig-no-vig-title { color: var(--vigilance-renforcee); }
.vig-no-vigilance-state.level-absolue .vig-no-vig-icon, .vig-no-vigilance-state.level-absolue .vig-no-vig-title { color: var(--vigilance-absolue); }
.vig-no-vig-text { margin: 0; font-size: 0.84em; color: var(--text-muted); line-height: 1.55; max-width: 300px; }
.vig-no-vig-link { font-size: 0.78em; color: var(--accent-color); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; opacity: 0.7; transition: opacity 0.2s; margin-top: 4px; }
.vig-no-vig-link:hover { opacity: 1; }

/* Conseil du jour */
.vig-conseil-card {
    margin-top: 14px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--radius-card);
    padding: 16px 18px;
    width: 100%;
}
.vig-conseil-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.vig-conseil-bulb { color: #facc15; font-size: 0.9em; }
.vig-conseil-label { font-size: 0.75em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); flex: 1; }
.vig-conseil-cat { font-size: 0.72em; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-full); background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3); color: var(--vigilance-none); }
.vig-conseil-body { display: flex; align-items: flex-start; gap: 14px; }
.vig-conseil-icon { font-size: 1.5rem; color: var(--vigilance-none); opacity: 0.75; flex-shrink: 0; margin-top: 2px; }
.vig-conseil-texte { margin: 0; font-size: 0.86em; color: var(--text-secondary-color, var(--text-muted)); line-height: 1.6; }

/* IMH — compact single row */
.vig-block.imh-gauge-block-j, .vig-block.imh-gauge-block-j1, .vig-block.imh-gauge-block-j2 { padding: 12px 18px; }
.vig-block .imh-gauge-block { margin: 0; display: flex; align-items: center; gap: 12px; }
.vig-block .imh-gauge-block h3 { margin: 0; font-size: 0.8em; font-weight: 600; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.vig-block .imh-gauge-container-public { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0; border: none; background: none; margin-bottom: 0; min-width: 0; }
.vig-block .imh-gauge-track-public { flex: 1; height: 7px; border-radius: 4px; }
.vig-block .imh-gauge-label-public { font-size: 0.95em; font-weight: 700; min-width: 36px; margin-top: 0; text-align: right; }
.vig-block .imh-gauge-labels { display: none; }

/* Frises — compact, no date sidebar */
.vig-frises-block .summary-phenom-row { grid-template-columns: 130px 1fr; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; }
.vig-frises-block .summary-phenom-label { font-size: 0.85rem; gap: 7px; }
.vig-frises-block .phenomenon-timeline.with-sides { grid-template-columns: 1fr; display: block; }
.vig-frises-block .timeline-side { display: none; }
.vig-frises-block .timeline-track { height: 22px; }
.vig-frises-block .timeline-hours { font-size: 0.72rem; }

/* Phénomènes — un seul bloc unifié comme les autres vig-block */
.vig-prevention-block { gap: 0; }
/* Specificity (0,2,0) beats legacy [id*="-prevention-info"] rules at line ~2725 */
.vig-block.vig-prevention-block { margin: 0 !important; padding: 16px 18px; }
.vig-block.vig-prevention-block > h2 { font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 10px 0; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 7px; }
.vig-prevention-block .phenomenon-block { background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 12px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.vig-prevention-block .phenomenon-block:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.vig-prevention-block .phenomenon-block:first-child { padding-top: 4px !important; }
.vig-prevention-block .phenomenon-block .vigilance-header { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.vig-prevention-block .phenomenon-block .details-container { padding-top: 0; }
.vig-prevention-block .phenomenon-block .vigilance-level-details { background: rgba(0,0,0,0.12); margin-bottom: 6px; font-size: 0.88em; }
.vig-prevention-block .phenomenon-block .vigilance-banner { padding: 8px 12px; font-size: 0.85em; }
.vig-prevention-block .phenomenon-block .recommendation-list { padding-left: 4px; }
.vig-prevention-block .phenomenon-block .recommendation-list li { font-size: 0.82rem; gap: 7px; }
.vig-prevention-block .phenomenon-block .recommendations-section { margin-top: 10px !important; padding-top: 10px !important; }

/* phenom-card (details/summary) dans vig-prevention-block : style liste plate */
.vig-prevention-block .phenom-card { background: none !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; margin-bottom: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; overflow: visible !important; }
.vig-prevention-block .phenom-card:last-child { border-bottom: none !important; }
.vig-prevention-block .phenom-header { border-radius: var(--radius-sm) !important; }
.vig-prevention-block .phenom-body { background: rgba(0,0,0,0.12) !important; border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important; }
.vig-prevention-block .phenom-section { padding: 12px 16px !important; }
.vig-prevention-block .phenom-reco-list li { font-size: 0.85rem !important; }

/* Résumé départements en vigilance (bloc IMH) */
.vds-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 6px; }
.vds-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.vds-title i { color: var(--accent-color); }
.vds-count { margin-left: auto; font-size: 1.3rem; line-height: 1; font-weight: 800; text-transform: none; letter-spacing: normal; color: var(--text-primary); }
.vds-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8rem; }
.vds-label { color: var(--text-secondary); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vds-tags { display: flex; gap: 5px; flex-shrink: 0; }
.vds-tag { font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-full); white-space: nowrap; }
.vds-tag.tag-absolue { background: rgba(204,0,2,0.25); color: #fca5a5; border: 1px solid rgba(204,0,2,0.4); }
.vds-tag.tag-renforcee { background: rgba(234,88,12,0.2); color: #fdba74; border: 1px solid rgba(234,88,12,0.35); }
.vds-tag.tag-moderee { background: rgba(202,138,4,0.2); color: #fde68a; border: 1px solid rgba(202,138,4,0.35); }
.vds-tag.tag-etude { background: rgba(71,85,105,0.2); color: #94a3b8; border: 1px solid rgba(71,85,105,0.35); }

@media (max-width: 1150px) {
    .vig-split-layout { grid-template-columns: 1fr; padding: 0 8px 24px; gap: 14px; }
    .vig-split-left { position: static; }
    .vig-frises-block .summary-phenom-row { grid-template-columns: 110px 1fr; }
    /* Désactiver backdrop-filter sur mobile : trop de couches GPU → artefacts de rendu Android */
    .column-card, .dashboard-card, .phenomenon-block, .glass-card {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.map-tooltip {
    background: var(--surface-2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-xs); /* More square with rounded corners */
    color: var(--text-primary);
    padding: 18px;
    font-size: 0.95rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 2000;
    display: none;
    position: absolute;
    min-width: 300px;
    max-width: 300px;
}
.tooltip-header { font-weight: 700; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 8px; font-size: 1.15rem; color: var(--accent-color); }
.tooltip-click-hint { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.75rem; opacity: 0.65; text-align: center; letter-spacing: 0.02em; }
.map-tooltip.mobile-active {
    position: fixed !important;
    top: auto !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92% !important;
    max-width: 480px !important;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 10000;
    display: block !important;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    animation: slideUpMobile 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpMobile {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.mobile-popup-close-btn {
    position: sticky;
    top: 0;
    float: right;
    margin: -4px -4px 6px 8px;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    transition: background 0.2s, color 0.2s;
}
.mobile-popup-close-btn:hover { background: rgba(255,255,255,0.18); color: var(--text-primary); }

/* Ensure timeline is visible in tooltip */
.map-tooltip .tooltip-timeline-frise {
    display: block !important;
    margin-top: 10px;
}
.timeline-track.mini { height: 16px !important; }

/* ---- TIMELINE & PHENOMENON DETAILS ---- */
.imh-gauge-container-public { background: var(--surface-inset); border: 1px solid var(--surface-border); padding: 15px; border-radius: var(--radius-md); margin-bottom: 20px; }
.imh-gauge-track-public { height: 14px; background: var(--surface-inset); border-radius: 7px; overflow: hidden; } /* Restored original background */
.imh-gauge-bar-public {
    height: 100%;
    transition: width 1s ease-out;
    box-shadow: 0 0 10px currentColor;
    background: var(--vigilance-none); /* Default background, will be overridden by JS */
    position: relative;
    overflow: hidden;
}
.imh-gauge-bar-public::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
    animation: imhGaugeSheen 3.2s ease-in-out infinite;
}
@keyframes imhGaugeSheen {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(350%); }
}
.imh-gauge-labels { display: flex; justify-content: space-between; font-size: 0.8em; color: var(--text-muted); margin-top: 5px; } /* Restored original font-size */
.imh-gauge-label-public { font-size: 1.5em; font-weight: 700; color: var(--text-primary); text-align: right; min-width: 60px; margin-top: 5px; } /* Restored original font-size and min-width */

.timeline-track { height: 30px; background: var(--surface-inset); border: var(--glass-border); border-radius: var(--radius-full); position: relative; overflow: hidden; margin-bottom: 8px; }
.timeline-bar { position: absolute; height: 100%; top: 0; opacity: 0.85; }     
.timeline-bar.level-moderee { background: var(--vigilance-moderee); } .timeline-bar.level-renforcee { background: var(--vigilance-renforcee); } .timeline-bar.level-absolue { background: var(--vigilance-absolue); } .timeline-bar.level-none { background: var(--vigilance-none); } .timeline-bar.level-etude { background: var(--vigilance-etude); }

.timeline-bar.level-faible { background: var(--vigilance-orage-faible); }
.timeline-bar.level-modere { background: var(--vigilance-orage-modere); }
.timeline-bar.level-fort { background: var(--vigilance-orage-fort); }
.timeline-bar.level-violent { background: var(--vigilance-orage-violent); }
.timeline-bar.level-extreme { background: var(--vigilance-orage-extreme); }

.timeline-hours { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); padding: 0 5px; }

.summary-phenom-row { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 20px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--surface-border); }
.summary-phenom-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.summary-phenom-label { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1.1rem; padding-left: 0; }

/* Color icon and text in Timeline Summary */
.summary-phenom-label .phenomenon-icon-svg, .summary-phenom-label i { color: var(--accent-color); }       
.summary-phenom-label .phenomenon-icon-svg.level-none, .summary-phenom-label i.level-none { color: var(--vigilance-none); }
.summary-phenom-label .phenomenon-icon-svg.level-etude, .summary-phenom-label i.level-etude { color: var(--vigilance-etude); }
.summary-phenom-label .phenomenon-icon-svg.level-moderee, .summary-phenom-label i.level-moderee { color: var(--vigilance-moderee); }
.summary-phenom-label .phenomenon-icon-svg.level-renforcee, .summary-phenom-label i.level-renforcee { color: var(--vigilance-renforcee); }
.summary-phenom-label .phenomenon-icon-svg.level-absolue, .summary-phenom-label i.level-absolue { color: var(--vigilance-absolue); }

.summary-phenom-label span { color: var(--text-primary); }
.summary-phenom-label .phenomenon-icon-svg + span, .summary-phenom-label i + span {
    padding: 1px 9px; border-radius: var(--radius-full); font-weight: 700;
}
.summary-phenom-label .phenomenon-icon-svg.level-none + span, .summary-phenom-label i.level-none + span { background: var(--vigilance-none); color: #fff; }
.summary-phenom-label .phenomenon-icon-svg.level-etude + span, .summary-phenom-label i.level-etude + span { background: var(--vigilance-etude); color: #1c1410; }
.summary-phenom-label .phenomenon-icon-svg.level-moderee + span, .summary-phenom-label i.level-moderee + span { background: var(--vigilance-moderee); color: #1c1410; }
.summary-phenom-label .phenomenon-icon-svg.level-renforcee + span, .summary-phenom-label i.level-renforcee + span { background: var(--vigilance-renforcee); color: #fff; }
.summary-phenom-label .phenomenon-icon-svg.level-absolue + span, .summary-phenom-label i.level-absolue + span { background: var(--vigilance-absolue); color: #fff; }

.summary-phenom-timeline { flex-grow: 1; }

/* ---- SUMMARY PHENOM ROW - HOVER & ANIMATION ---- */
.summary-phenom-row {
    transition: background 0.2s ease;
    border-radius: var(--radius-sm);
    animation: phenomRowIn 0.45s ease both;
}
.summary-phenom-row:hover { background: rgba(255, 255, 255, 0.03); }
.summary-phenom-row:nth-child(1) { animation-delay: 0.00s; }
.summary-phenom-row:nth-child(2) { animation-delay: 0.07s; }
.summary-phenom-row:nth-child(3) { animation-delay: 0.14s; }
.summary-phenom-row:nth-child(4) { animation-delay: 0.21s; }
.summary-phenom-row:nth-child(5) { animation-delay: 0.28s; }
.summary-phenom-row:nth-child(n+6) { animation-delay: 0.35s; }

@keyframes phenomRowIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---- TIMELINE SUMMARY HEADER ---- */
#timeline-summary-header {
    margin: 28px 0 16px;
    padding: 16px 22px;
    background: rgba(8, 145, 178, 0.04);
    border: 1px solid rgba(8, 145, 178, 0.11);
    border-left: 3px solid var(--accent-color);
    border-radius: 0 14px 14px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: fadeEffect 0.6s ease both;
}

.summary-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    letter-spacing: -0.01em;
}

.summary-title::before {
    content: '\f017';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--accent-color);
    font-size: 0.85em;
    flex-shrink: 0;
}

.summary-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
    padding-left: 24px;
}

/* ---- PHENOMENON TIMELINE LAYOUT ---- */
.phenomenon-timeline {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.phenomenon-timeline.with-sides {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
}

.timeline-side {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 700;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-xs);
    padding: 4px 9px;
    letter-spacing: 0.2px;
}

.timeline-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* ---- PER-DEPARTMENT TIMELINE PANEL (map-click driven) ---- */
.vig-dept-frises-block { margin-top: 4px; }

.dept-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.dept-panel-code {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.dept-panel-name {
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    flex: 1;
}
.dept-panel-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid currentColor;
    flex-shrink: 0;
}
.dept-panel-close {
    background: none;
    border: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 4px;
    margin-left: auto;
    line-height: 1;
    transition: color 0.12s;
}
.dept-panel-close:hover { color: var(--text-color, #f1f5f9); }

.dept-panel-hours {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
    margin-bottom: 5px;
    padding: 0 2px;
}

.dept-panel-track { height: 24px !important; }

.dept-panel-phenom-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.15));
}
.dept-panel-phenom-row { display: flex; flex-direction: column; gap: 4px; }
.dept-panel-phenom-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary, #94a3b8);
}
.dept-panel-phenom-icon { width: 16px; height: 16px; flex-shrink: 0; }
.dept-panel-phenom-label span:not(.dept-panel-badge) { flex: 1; }
/* Icône SVG teintée via masque : la couleur vient de la classe level-chip-* */
.dept-panel-phenom-label .dept-panel-phenom-icon.icon-mask {
    flex: 0 0 16px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: var(--icon) no-repeat center / contain;
    mask: var(--icon) no-repeat center / contain;
}
.dept-panel-phenom-track { height: 16px !important; }

/* Level color helpers used by dept panel (code + badge) */
.level-chip-etude     { color: var(--vigilance-etude,    #60a5fa); border-color: var(--vigilance-etude,    #60a5fa); }
.level-chip-moderee   { color: var(--vigilance-moderee,  #facc15); border-color: var(--vigilance-moderee,  #facc15); }
.level-chip-renforcee { color: var(--vigilance-renforcee,#f97316); border-color: var(--vigilance-renforcee,#f97316); }
.level-chip-absolue   { color: var(--vigilance-absolue,  #ef4444); border-color: var(--vigilance-absolue,  #ef4444); }

/* ---- TIMELINE CURSOR & PAST OVERLAY ---- */
.timeline-cursor {
    position: absolute;
    top: -4px;
    bottom: -4px;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    transition: left 1s linear;
}

.timeline-cursor-line {
    width: 2px;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
    margin: 0 auto;
}

.timeline-cursor-bubble {
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-2);
    border: 1px solid var(--surface-border);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px);
}

.timeline-past-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 5;
    border-radius: var(--radius-full) 0 0 var(--radius-full);
    transition: width 1s linear;
}

/* ---- TIMELINE TRACK ENTRANCE ANIMATION ---- */
@keyframes timelineTrackReveal {
    from { opacity: 0; transform: scaleX(0.92); }
    to   { opacity: 1; transform: scaleX(1); }
}

.timeline-track:not(.mini) {
    transform-origin: left center;
    animation: timelineTrackReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}
.timeline-track:not(.mini) .timeline-bar { opacity: 0.88; }

.timeline-track .timeline-bar.level-absolue,
.timeline-track .timeline-bar.level-violent,
.timeline-track .timeline-bar.level-extreme {
    box-shadow: none;
    opacity: 0.88;
}

/* ---- RISK CARD ENTRANCE ANIMATION ---- */
@keyframes riskCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.risk-card {
    animation: riskCardIn 0.4s ease both;
}
.risk-card:nth-child(1) { animation-delay: 0.04s; }
.risk-card:nth-child(2) { animation-delay: 0.11s; }
.risk-card:nth-child(3) { animation-delay: 0.18s; }
.risk-card:nth-child(4) { animation-delay: 0.25s; }
.risk-card:nth-child(5) { animation-delay: 0.32s; }
.risk-card:nth-child(n+6) { animation-delay: 0.38s; }

@media (max-width: 768px) {
    .summary-phenom-row {
        grid-template-columns: 1fr; /* Stack into a single column */
        gap: 15px; /* Adjust gap for vertical layout */
        text-align: center; /* Center the label */
    }
    .summary-phenom-label {
        justify-content: center; /* Center the label content (icon + text) */
    }
    .phenomenon-timeline.with-sides {
        grid-template-columns: 1fr;
    }
    .timeline-side { display: none; }
    #timeline-summary-header { border-radius: var(--radius-sm); border-left-width: 3px; }
}

/* ---- PHENOMENON DETAILS (FIXED: Color Title + No Border Left) ----
   (la définition de .phenomenon-block vit dans le bloc unifié plus bas) */
.phenomenon-block .vigilance-header {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 10px 0; /* No left padding/border */
    border-left: none !important; /* Ensure no line */
}

/* Color Title and Icon in Details */
.phenomenon-block .vigilance-header i,
.phenomenon-block .vigilance-header .phenomenon-icon-svg { color: var(--accent-color); } /* Default for icons */

.phenomenon-block .vigilance-header.level-none i,
.phenomenon-block .vigilance-header.level-none .phenomenon-icon-svg,
.phenomenon-block .vigilance-header.level-none .header-title { color: var(--vigilance-none); }

.phenomenon-block .vigilance-header.level-etude i,
.phenomenon-block .vigilance-header.level-etude .phenomenon-icon-svg,
.phenomenon-block .vigilance-header.level-etude .header-title { color: var(--vigilance-etude); }

.phenomenon-block .vigilance-header.level-moderee i,
.phenomenon-block .vigilance-header.level-moderee .phenomenon-icon-svg,
.phenomenon-block .vigilance-header.level-moderee .header-title { color: var(--vigilance-moderee); }      

.phenomenon-block .vigilance-header.level-renforcee i,
.phenomenon-block .vigilance-header.level-renforcee .phenomenon-icon-svg,
.phenomenon-block .vigilance-header.level-renforcee .header-title { color: var(--vigilance-renforcee); }  

.phenomenon-block .vigilance-header.level-absolue i,
.phenomenon-block .vigilance-header.level-absolue .phenomenon-icon-svg,
.phenomenon-block .vigilance-header.level-absolue .header-title { color: var(--vigilance-absolue); }      

.phenomenon-block .vigilance-header.level-faible i,
.phenomenon-block .vigilance-header.level-faible .phenomenon-icon-svg,
.phenomenon-block .vigilance-header.level-faible .header-title { color: var(--vigilance-orage-faible); }

.phenomenon-block .vigilance-header.level-modere i,
.phenomenon-block .vigilance-header.level-modere .phenomenon-icon-svg,
.phenomenon-block .vigilance-header.level-modere .header-title { color: var(--vigilance-orage-modere); }

.phenomenon-block .vigilance-header.level-fort i,
.phenomenon-block .vigilance-header.level-fort .phenomenon-icon-svg,
.phenomenon-block .vigilance-header.level-fort .header-title { color: var(--vigilance-orage-fort); }

.phenomenon-block .vigilance-header.level-violent i,
.phenomenon-block .vigilance-header.level-violent .phenomenon-icon-svg,
.phenomenon-block .vigilance-header.level-violent .header-title { color: var(--vigilance-orage-violent); }

.phenomenon-block .vigilance-header.level-extreme i,
.phenomenon-block .vigilance-header.level-extreme .phenomenon-icon-svg,
.phenomenon-block .vigilance-header.level-extreme .header-title { color: var(--vigilance-orage-extreme); }

.phenomenon-block .details-container { padding-top: 10px; }
.phenomenon-block .vigilance-level-details { background: var(--surface-inset); border-radius: var(--radius-btn); margin-bottom: 10px; border: 1px solid var(--surface-border); overflow: hidden; }
.vigilance-level-details > summary { list-style: none; }
.vigilance-level-details > summary::-webkit-details-marker { display: none; }
.vigilance-banner { padding: 12px 15px; font-size: 1.1rem; color: var(--text-primary); display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.vigilance-banner .details-icon { transition: transform 0.3s ease; }

/* Badges de niveau : fond plein + texte contrasté, homogène pour tous les niveaux */
.vigilance-banner .banner-title {
    padding: 2px 12px; border-radius: var(--radius-full); font-weight: 700; font-size: 0.95em;
}
.vigilance-banner.level-etude .banner-title { background: var(--vigilance-etude); color: #1c1410; }
.vigilance-banner.level-moderee .banner-title { background: var(--vigilance-moderee); color: #1c1410; }
.vigilance-banner.level-renforcee .banner-title { background: var(--vigilance-renforcee); color: #fff; }
.vigilance-banner.level-absolue .banner-title { background: var(--vigilance-absolue); color: #fff; }

.vigilance-banner.level-faible .banner-title { background: var(--vigilance-orage-faible); color: #1c1410; }
.vigilance-banner.level-modere .banner-title { background: var(--vigilance-orage-modere); color: #1c1410; }
.vigilance-banner.level-fort .banner-title { background: var(--vigilance-orage-fort); color: #1c1410; }
.vigilance-banner.level-violent .banner-title { background: var(--vigilance-orage-violent); color: #fff; }
.vigilance-banner.level-extreme .banner-title { background: var(--vigilance-orage-extreme); color: #fff; }
.vigilance-level-details[open] > summary .details-icon { transform: rotate(180deg); }
.phenomenon-block .phenomenon-comment {
    font-size: 1.05rem; /* Slightly larger */
    line-height: 1.7;
    color: var(--text-primary); /* More prominent */
    margin: 15px 0; /* More vertical spacing */
    padding: 0 15px; /* Adjust padding */
    border-left: 3px solid var(--accent-color); /* Add a subtle left border for emphasis */
    padding-left: 12px;
}
.recommendations-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--surface-border);
}
.reco-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 8px 0;
    padding: 0;
    border-bottom: none;
}
.reco-title i { font-size: 0.9em; color: var(--accent-color); opacity: 1; }
.phenomenon-block .recommendation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.phenomenon-block .recommendation-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--surface-inset);
    border-left: 2px solid var(--accent-color);
    border-radius: 0 6px 6px 0;
    padding: 7px 10px;
}
.phenomenon-block .recommendation-list .reco-check {
    color: var(--accent-color);
    font-size: 0.78rem;
    flex-shrink: 0;
    margin-top: 3px;
    opacity: 0.9;
}
.phenomenon-block .phenomenon-details { padding: 15px; font-size: 1rem; color: var(--text-secondary); line-height: 1.7; }


/* ---- ARCHIVE CONTROL PANEL ---- */
.archive-controls-pro { background: var(--surface-grad); backdrop-filter: blur(14px); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); max-width: 600px; margin: 30px auto; overflow: hidden; animation: fadeEffect 0.6s; }
.control-panel-header { background: var(--surface-inset); padding: 10px 20px; font-weight: 600; font-size: 0.9rem; color: var(--accent-color); display: flex; align-items: center; gap: 10px; letter-spacing: 1px; text-transform: uppercase; border-bottom: var(--glass-border); }
.control-panel-body { padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.control-panel-body label { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.date-input-container { position: relative; display: inline-block; }
.pro-date-input { background: var(--surface-input); border: 1px solid var(--surface-border); color: var(--text-primary); font-family: var(--font-body); font-weight: 600; font-size: 1.5rem; padding: 15px 50px 15px 20px; border-radius: var(--radius-sm); outline: none; text-align: center; transition: all var(--transition); }
.pro-date-input:focus { border-color: var(--accent); box-shadow: var(--ring); }     
.pro-date-input::-webkit-calendar-picker-indicator { position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: transparent; border: none; cursor: pointer; color: transparent; }
.date-input-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; transition: color 0.3s ease; }
.date-input-container:hover .date-input-icon { color: var(--accent-color); }

/* ---- WINDY & MODELS ---- */
.windy-controls-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 15px; background: var(--surface-inset); border-bottom: var(--glass-border); }
.windy-btn { padding: 8px 16px; border: 1px solid var(--surface-border); border-radius: var(--radius-full); color: var(--text-secondary); font-size: 0.9rem; transition: all var(--transition); background: rgba(148, 163, 184, 0.08); backdrop-filter: var(--backdrop-blur); }
.windy-btn.active { background: var(--accent-soft); border-color: rgba(8, 145, 178, 0.45); color: var(--accent-color); font-weight: 700; box-shadow: 0 0 10px rgba(8, 145, 178, 0.2); }
.iframe-container { width: 100%; height: auto; aspect-ratio: 16 / 10; position: relative; overflow: hidden; border-radius: var(--radius-md); margin-top: 15px; border: var(--glass-border); }
.iframe-container iframe { width: 100%; height: 100%; border: none; }
.lien-carte {
    display: none;
    width: 100%;
    background: var(--surface-inset);
    border-radius: var(--radius-card);
    position: relative;
    overflow: hidden;
}

.lien-carte.has-map {
    display: block;
    min-height: 600px;
}

.lien-carte img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-card);
    border: var(--glass-border);
}

.no-map-message {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 18px 20px;
    color: var(--text-secondary-color);
    font-style: italic;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: var(--radius-card);
    margin-top: 10px;
}

/* --- Map Loading Overlay --- */
.map-loading-overlay {
    position: absolute;
    inset: 0;
    background: #020617; /* Totalement opaque comme demandé */
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    min-height: 100%;
}
.map-loading-overlay.active {
    opacity: 1;
}
.map-loading-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.simple-spinner {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(8, 145, 178, 0.05);
    border: 2px solid rgba(8, 145, 178, 0.2);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 20px rgba(8, 145, 178, 0.1);
    overflow: hidden;
}

/* Radar Sweep Line */
.simple-spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-color), transparent);
    transform-origin: left center;
    animation: radar-sweep 2s linear infinite;
    box-shadow: 0 0 10px var(--accent-color);
}

/* Radar Pulse / Echo */
.simple-spinner::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
    opacity: 0;
    animation: radar-pulse 2s ease-out infinite;
}

/* Grid lines for the radar look */
.map-loading-core::after {
    content: 'SCANNING...';
    font-family: monospace;
    font-size: 0.7em;
    color: var(--accent-color);
    letter-spacing: 2px;
    margin-top: 10px;
    opacity: 0.8;
    animation: blink 1s step-end infinite;
}

@keyframes radar-sweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes radar-pulse {
    0% { transform: scale(0.1); opacity: 0.8; }
    70% { transform: scale(1.2); opacity: 0; }
    100% { opacity: 0; }
}

@keyframes blink {
    50% { opacity: 0.2; }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.2; }
    50% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(0.8); opacity: 0.2; }
}
.map-loading-text {
    font-weight: 500;
    color: var(--accent-color);
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.models-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }   
.model-card { background: var(--surface-grad); border: 1px solid var(--surface-border); backdrop-filter: blur(14px); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: 20px; display: flex; align-items: center; gap: 15px; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.model-card:hover { transform: translateY(-2px); border-color: var(--surface-border-hover); box-shadow: var(--shadow-3); }
.model-icon { width: 50px; height: 50px; background: var(--accent-soft); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--accent-color); }
.model-name { font-weight: 700; font-size: 1.1rem; } .model-desc { font-size: 0.85rem; color: var(--text-muted); }

/* ---- FOOTER ---- */
footer {
    /* Chrome (footer) : couleurs dédiées par thème — voir design-tokens.css */
    --text-primary: var(--chrome-text-1);
    --text-secondary: var(--chrome-text-2);
    --text-muted: var(--chrome-text-3);
    --surface-border: var(--chrome-border);
    --surface-1: var(--chrome-soft);
    --surface-2: var(--chrome-soft);
    --surface-grad: linear-gradient(180deg, var(--chrome-soft) 0%, var(--chrome-soft) 100%);
    --card-bg: var(--chrome-soft);
    --glass-bg: var(--chrome-soft);
    background: var(--chrome-bg);
    color: var(--text-secondary);
    border-top: 1px solid var(--surface-border); padding: 50px 20px 20px 20px; margin-top: auto;
}
.footer-content { max-width: 1280px; margin: 0 auto 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; }
.footer-sources { max-width: 1280px; margin: 24px auto 0; padding: 18px 0 0; border-top: 1px solid var(--surface-border); text-align: center; }
.footer-sources h4 { color: var(--text-primary); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.footer-sources h4 i { color: var(--accent-color); }
.footer-sources-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.footer-src { display: inline-flex; align-items: center; gap: 9px; color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: color var(--transition); }
.footer-src:hover { color: var(--text-primary); }
.footer-src img { height: 24px; max-width: 90px; object-fit: contain; }
.footer-sources-grid { gap: 26px; }
footer h3 { color: var(--text-primary); font-size: 1.2rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--accent-color); display: inline-block; }

.footer-legend-block { display: none; }
.footer-legend-block.active { display: block; }
.legend-list li { margin-bottom: 10px; font-weight: 500; display: flex; align-items: center; gap: 10px; } 
.legend-list li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; flex-shrink: 0; }
.legend-chips li::before { content: none; }
.legend-list .legend-none { color: var(--vigilance-none); }
.legend-list .legend-etude { color: var(--vigilance-etude); }
.legend-list .legend-moderee { color: var(--vigilance-moderee); }
.legend-list .legend-renforcee { color: var(--vigilance-renforcee); }
.legend-list .legend-absolue { color: var(--vigilance-absolue); }
.legend-list .level-faible { color: var(--vigilance-orage-faible); }
.legend-list .level-modere { color: var(--vigilance-orage-modere); }
.legend-list .level-fort { color: var(--vigilance-orage-fort); }
.legend-list .level-violent { color: var(--vigilance-orage-violent); }
.legend-list .level-extreme { color: var(--vigilance-orage-extreme); }
.legend-list .legend-j1-15 { color: var(--vigilance-orage-j1-15); }
.legend-list .legend-j1-25 { color: var(--vigilance-orage-j1-25); }
.legend-list .legend-j1-45 { color: var(--vigilance-orage-j1-45); }
.legend-list .legend-j1-65 { color: var(--vigilance-orage-j1-65); }
.legend-list .legend-j1-85 { color: var(--vigilance-orage-j1-85); }

.news-legend li { list-style: none !important; padding-left: 0 !important; }
.news-legend li::before { display: none !important; }
.news-legend i { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); font-size: 0.9em; }
.cat-item-previsions i { background: rgba(8, 145, 178, 0.1); color: #22D3EE; }
.cat-item-suivi i { background: rgba(239, 68, 68, 0.1); color: #F87171; }
.cat-item-bilan i { background: rgba(167, 139, 250, 0.1); color: #C4B5FD; }
.cat-item-infos i { background: rgba(52, 211, 153, 0.1); color: #34D399; }
.news-legend strong { color: var(--text-primary); }

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Ajoute un espace entre les liens */
}

.footer-links ul li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-btn);
    color: var(--text-secondary);
    transition: var(--transition);
    border: 1px solid transparent;
}

.footer-links ul li a:hover {
    background: rgba(8, 145, 178, 0.1);
    color: var(--text-primary);
    border-color: rgba(8, 145, 178, 0.3);
    transform: translateX(5px);
}

.footer-links ul li a i {
    color: var(--accent-color);
    font-size: 1.1em;
}

.footer-stats-bar { max-width: 1280px; margin: 40px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 0 20px; }
.stat-bubble { background: var(--surface-grad); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 20px; display: flex; align-items: center; gap: 15px; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.stat-bubble:hover { border-color: var(--surface-border-hover); box-shadow: var(--shadow-3); transform: translateY(-2px); }
.stat-bubble i { font-size: 1.8em; color: var(--accent-color); background: var(--accent-soft); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); flex-shrink: 0; }
.stat-bubble .stat-value { font-size: 2.2em; font-weight: 700; line-height: 1; }
.stat-bubble .stat-label { font-size: 0.9em; color: var(--text-secondary); }
.footer-credits { max-width: 1280px; margin: 20px auto 0; text-align: center; font-size: 0.85rem; color: var(--text-muted); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.footer-logo { height: 22px; vertical-align: middle; margin-right: 10px; }
.footer-copyright { max-width: 1280px; margin: 10px auto 0; text-align: center; font-size: 0.78rem; color: var(--text-muted); opacity: 0.78; }
.footer-copyright a { color: var(--text-muted); text-decoration: none; } .footer-copyright a:hover { color: var(--accent-color); }

.footer-bottom-bar {
    margin: 30px -20px 0;
    padding: 25px 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footer-visitor-counter {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-visitor-counter .v-item span {
    color: #fff;
    font-weight: 700;
}

.footer-visitor-counter .v-item.total span {
    color: var(--accent-color);
}

.footer-visitor-counter .v-sep {
    opacity: 0.3;
}

.footer-legal-links {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-legal-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal-links a:hover {
    color: var(--accent-color);
}

.footer-legal-links .sep {
    opacity: 0.3;
}

.footer-observations { background: rgba(8, 145, 178, 0.05); border: 1px solid rgba(8, 145, 178, 0.15); border-radius: var(--radius-card); padding: 30px; text-align: center; margin: 40px auto 0 auto; max-width: 800px; }
.footer-observations h4 { font-size: 1.4rem; color: var(--accent-color); margin: 0 0 15px 0; font-weight: 700; }
.footer-observations p { color: var(--text-secondary); line-height: 1.7; margin: 0; }

.content-aligned-with-cards {
    margin: 0 20px;
}

.full-width-container {
    padding: 0 20px; /* Add horizontal padding to align with cards */
}

.full-width-container#vigilance-j-prevention-info,
.full-width-container#vigilance-j1-prevention-info,
.full-width-container#vigilance-j2-prevention-info,
.full-width-container#orages-prevention-info,
.full-width-container#orages-j1-prevention-info,
.full-width-container#vigilance-j-global-commentary,
.full-width-container#vigilance-j1-global-commentary,
.full-width-container#vigilance-j2-global-commentary,
.full-width-container#orages-global-commentary,
.full-width-container#orages-j1-global-commentary {
    margin-bottom: 20px;
}
.footer-observations a { color: var(--accent-color); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(8, 145, 178, 0.3); transition: all var(--transition); }
.footer-observations a:hover { color: var(--text-primary); border-bottom-color: var(--text-primary); background: rgba(8, 145, 178, 0.1); }

/* ---- RESPONSIVE ---- */
@media (max-width: 1150px) {
    .navbar-menu { display: none !important; }
    .mobile-menu-toggle { display: flex !important; align-items: center; justify-content: center; }
    
    .navbar-container { padding: 0 15px; }
    .brand-name { font-size: 1.1rem; }
    .navbar-logo { height: 48px; width: 48px; }

    .app-container { padding-top: 15px; padding-bottom: 40px; }
    .desktop-only { display: none !important; }
    .sub-nav-container.desktop-only { display: none; }

    /* Sélecteur de jour (J/J+1/J+2) plus compact : jamais coupé, tient sur une ligne */
    .quick-access-bar { gap: 8px; margin-bottom: 12px; flex-wrap: nowrap; justify-content: center; padding: 0 4px; }
    .quick-btn { padding: 9px 14px; font-size: 0.88rem; flex: 1 1 0; justify-content: center; }
    .quick-btn-sub { display: none; }

    .vigilance-filter-bar { padding: 0 4px; gap: 8px; }

    /* Tab navigation always scrollable on small screens */
    .tab-navigation {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 10px;
        background: var(--surface-2);
        position: sticky;
        top: var(--navbar-height);
        z-index: 900;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        gap: 8px;
    }
    .tab-navigation::-webkit-scrollbar { display: none; }
    .tab-button { padding: 8px 15px; font-size: 0.85rem; white-space: nowrap; }

    /* Main Content Adjustments */
    .column-card, .dashboard-card, .phenomenon-block, 
    [id*="-prevention-info"], [id*="-global-commentary"], 
    .content-aligned-with-cards, .full-width-container {
        margin-left: 10px !important;
        margin-right: 10px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: auto !important;
    }

    .phenom-section, .phenomenon-block { padding: 15px 12px !important; }
    .map-container { height: min(65vh, 560px); min-height: 380px; border-radius: var(--radius-md); }

    /* Désactiver backdrop-filter sur mobile — cause des artefacts de rendu GPU (tiling iOS/Android) */
    .phenomenon-block,
    [id*="-prevention-info"],
    .al-card,
    .column-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

    /* Footer Responsive */
    .footer-content { grid-template-columns: 1fr !important; gap: 30px; padding: 0 20px; }
    .footer-legend { display: grid; grid-template-columns: 1fr; gap: 15px; }
    
    .footer-stats-bar {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px;
        padding: 0 10px;
    }
    .stat-bubble { padding: 15px 10px; gap: 10px; border-radius: var(--radius-md); }
    .stat-bubble i { width: 40px; height: 40px; font-size: 1.4em; border-radius: var(--radius-sm); }
    .stat-bubble .stat-value { font-size: 1.6em; }
    .stat-bubble .stat-label { font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .footer-stats-bar { grid-template-columns: 1fr !important; }
    .mystery-title { font-size: 1.8rem !important; }
    .brand-name { font-size: 1rem; } /* Nom du site visible à côté du logo même sur petits écrans */
    .navbar-container { padding: 0 10px; }
}

/* ---- UTILITIES ---- */
.hidden { display: none !important; }
.animate-lucty-hosting { background: linear-gradient(to right, var(--accent-color), #818cf8, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; }

/* ---- SCROLL ANIMATIONS ---- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- LAST UPDATE TIME ---- */
#global-last-update-time {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    background: rgba(8, 145, 178, 0.08);
    border: 1px solid rgba(8, 145, 178, 0.2);
    border-radius: var(--radius-xs);
    padding: 1px 8px;
    font-size: 0.9em;
    letter-spacing: 0.4px;
    display: inline-block;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

@keyframes timeUpdateFlash {
    0%   { background: rgba(8, 145, 178, 0.3); box-shadow: 0 0 10px rgba(8, 145, 178, 0.4); }
    100% { background: rgba(8, 145, 178, 0.08); box-shadow: none; }
}
#global-last-update-time.just-updated {
    animation: timeUpdateFlash 0.8s ease forwards;
}

/* ---- STAT INFO LAYOUT ---- */
.stat-bubble .stat-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

/* ---- STAT BUBBLE ENTRANCE ---- */
.footer-stats-bar .stat-bubble {
    animation: statBubbleIn 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.footer-stats-bar .stat-bubble:nth-child(1) { animation-delay: 0.05s; }
.footer-stats-bar .stat-bubble:nth-child(2) { animation-delay: 0.15s; }
.footer-stats-bar .stat-bubble:nth-child(3) { animation-delay: 0.25s; }
.footer-stats-bar .stat-bubble:nth-child(4) { animation-delay: 0.35s; }

@keyframes statBubbleIn {
    from { opacity: 0; transform: translateY(16px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
/* ---- TOP BANNER (v2026 : barre de verre fine, accent coloré, typo nette) ---- */
.site-banner {
    width: 100%;
    height: 44px;
    padding: 0 20px;
    font-weight: 600;
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 24px rgba(0,0,0,0.4);
}
/* Pas de shimmer : bandeau statique et net (le filet bas porte la couleur) */
.site-banner::before { content: none; }
/* Bottom color line */
.site-banner::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    opacity: 0.8;
}
.site-banner-text-container {
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 14px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 14px, black calc(100% - 14px), transparent);
}
.site-banner-scroll-wrapper { display: inline-block; white-space: nowrap; }
.site-banner-scroll-wrapper.should-animate { animation: marquee 20s linear infinite; }
@media (min-resolution: 1.25dppx) and (max-resolution: 1.99dppx) { .site-banner { display: none !important; } }
.site-banner-text-unit { display: inline-block; font-weight: 600; }
@media (min-width: 769px) {
    .site-banner-text-container { justify-content: center; }
}
/* Icon badge wrapper */
.site-banner-icon-wrap {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.site-banner-icon-wrap i { font-size: 1em; line-height: 1; display: block; }
/* Type-colored icon */
.banner-info .site-banner-icon-wrap    { color: #7dd3fc; }
.banner-warning .site-banner-icon-wrap { color: #fcd34d; }
.banner-danger .site-banner-icon-wrap  { color: #fca5a5; }
.banner-success .site-banner-icon-wrap { color: #6ee7b7; }
.banner-purple .site-banner-icon-wrap  { color: #c084fc; }
.banner-pink .site-banner-icon-wrap    { color: #f472b6; }
/* Type variants */
.banner-info {
    background: linear-gradient(110deg, #0c2a5e 0%, #1d4ed8 50%, #0c2a5e 100%);
}
.banner-info::after { background: linear-gradient(to right, transparent 5%, rgba(14, 116, 144,0.0) 15%, rgba(99,210,255,0.75) 50%, rgba(14, 116, 144,0.0) 85%, transparent 95%); height: 2px; box-shadow: 0 0 10px rgba(14, 116, 144,0.4); }
.banner-warning {
    background: linear-gradient(110deg, #7c3a08 0%, #d97706 50%, #7c3a08 100%);
}
.banner-warning::after { background: linear-gradient(to right, transparent 5%, rgba(251,191,36,0.0) 15%, rgba(255,210,60,0.75) 50%, rgba(251,191,36,0.0) 85%, transparent 95%); height: 2px; box-shadow: 0 0 10px rgba(251,191,36,0.4); }
.banner-danger {
    background: linear-gradient(110deg, #7a1016 0%, #dc2626 50%, #7a1016 100%);
}
.banner-danger::after { background: linear-gradient(to right, transparent 5%, rgba(248,113,113,0.0) 15%, rgba(255,120,120,0.75) 50%, rgba(248,113,113,0.0) 85%, transparent 95%); height: 2px; box-shadow: 0 0 10px rgba(239,68,68,0.4); }
.banner-success {
    background: linear-gradient(110deg, #065f46 0%, #059669 50%, #065f46 100%);
}
.banner-success::after { background: linear-gradient(to right, transparent 5%, rgba(52,211,153,0.0) 15%, rgba(80,230,170,0.75) 50%, rgba(52,211,153,0.0) 85%, transparent 95%); height: 2px; box-shadow: 0 0 10px rgba(16,185,129,0.4); }
.banner-purple {
    background: linear-gradient(110deg, #4c1d95 0%, #7c3aed 50%, #4c1d95 100%);
}
.banner-purple::after { background: linear-gradient(to right, transparent 5%, rgba(196,132,252,0.0) 15%, rgba(206,142,255,0.75) 50%, rgba(196,132,252,0.0) 85%, transparent 95%); height: 2px; box-shadow: 0 0 10px rgba(168,85,247,0.4); }
.banner-pink {
    background: linear-gradient(110deg, rgba(18,4,20,0.98) 0%, rgba(100,8,58,0.95) 35%, rgba(190,28,100,0.93) 50%, rgba(100,8,58,0.95) 65%, rgba(18,4,20,0.98) 100%);
    background-size: 300% 100%;
    animation: banner-drift 8s ease-in-out infinite, banner-glow-pink 4s ease-in-out infinite;
}
.banner-pink::after { background: linear-gradient(to right, transparent 5%, rgba(244,114,182,0.0) 15%, rgba(255,124,192,0.75) 50%, rgba(244,114,182,0.0) 85%, transparent 95%); height: 2px; box-shadow: 0 0 10px rgba(236,72,153,0.4); }
.floating-banner { display: none; text-shadow: none !important; }

/* Styles for Geolocation Modal Badge */
.geo-level-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-weight: 700;
    margin: 15px 0;
    font-size: 1.1rem;
    text-align: center;
}
.geo-level-badge.bg-none { background-color: var(--vigilance-none); color: #0f172a; }
.geo-level-badge.bg-etude { background-color: var(--vigilance-etude); color: #0f172a; }
.geo-level-badge.bg-moderee { background-color: var(--vigilance-moderee); color: #0f172a; }
.geo-level-badge.bg-renforcee { background-color: var(--vigilance-renforcee); color: #fff; }
.geo-level-badge.bg-absolue { background-color: var(--vigilance-absolue); color: #fff; }

.geo-risks-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.geo-risk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.05);
    padding: 10px;
    border-radius: var(--radius-xs);
}
.geo-risk-item i {
    font-size: 1.4em;
}

body.mobile-menu-active {
    overflow: hidden;
}

/* Ensure icons in buttons are clean */
.tab-button i, .quick-btn i, .mobile-sub-nav-item i {
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important; /* Ensure no text shadow makes it look fuzzy */
}

/* ---- CUSTOM MODAL (Geolocation) ---- */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--surface-2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3000;
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.custom-modal-content {
    background: var(--surface-grad);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: 30px;
    width: 100%;
    max-width: 500px;
    box-shadow: var(--shadow-3);
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    text-align: center;
}

.custom-modal-overlay.active .custom-modal-content {
    transform: translateY(0);
}

.custom-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
}

.custom-modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.geo-dept-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.geo-dept-code {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 600;
    display: block;
    margin-bottom: 15px;
}

.geo-confirm-footer {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.geo-confirm-footer > i { opacity: 0.6; flex-shrink: 0; }
.geo-confirm-footer > span { flex: 1; min-width: 0; }
.geo-btn-wrong {
    flex-shrink: 0;
    padding: 5px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.geo-btn-wrong:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
    color: #f87171;
}
.geo-picker-wrap { width: 100%; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.geo-picker-label { font-size: 0.82rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.geo-picker-label i { color: var(--accent-color); }
.geo-picker-search {
    width: 100%; padding: 8px 12px; background: var(--surface-inset);
    border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-xs);
    color: #fff; font-size: 0.88rem; font-family: inherit;
    box-sizing: border-box; outline: none;
    transition: border-color 0.2s;
}
.geo-picker-search:focus { border-color: var(--accent-color); }
.geo-picker-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 200px; overflow-y: auto;
    background: var(--surface-inset);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-xs);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.geo-picker-list li {
    padding: 9px 14px; font-size: 0.88rem; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    color: var(--text-secondary); transition: background 0.12s, color 0.12s;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.geo-picker-list li:last-child { border-bottom: none; }
.geo-picker-list li:hover { background: rgba(148, 163, 184, 0.15); color: var(--text-primary); }
.geo-picker-code { font-size: 0.75rem; font-weight: 700; color: var(--accent-color); min-width: 28px; }

/* ---- FLOATING BANNER (SCROLLING TEXT) ---- */
.floating-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(120px) scale(0.95);
    width: max-content;
    max-width: min(92vw, 640px);
    background: rgba(8, 15, 35, 0.94);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 9999;
    color: white;
    padding: 0 24px;
    display: flex;
    align-items: center;
    box-shadow: 0 16px 56px rgba(0,0,0,0.65), 0 2px 16px rgba(0,0,0,0.4);
    overflow: hidden;
    height: 52px;
    border-radius: var(--radius-xl);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.55s cubic-bezier(0.19,1,0.22,1), opacity 0.55s ease;
    background-size: 300% 100%;
}
/* Shimmer sweep */
.floating-banner::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 38%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 60%, transparent 100%);
    animation: banner-shimmer 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
.floating-banner.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
}
/* Icon as mini badge */
.floating-banner > i {
    font-size: 0.9rem;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.15);
    margin-right: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    position: relative;
    z-index: 2;
}
.floating-banner-text {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, black, black calc(100% - 12px), transparent);
    -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 12px), transparent);
}
.banner-text-unit {
    display: inline-block;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 2;
}

/* ---- MOBILE POPUP (GLASSMORPHISM) ---- */
.mobile-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    display: none; /* Force hidden sur iOS pour éviter le rendu backdrop-filter résiduel */
    transition: all var(--transition);
}

.mobile-popup-overlay.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

.mobile-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 85vh;
    background: var(--surface-2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    display: none; /* Force hidden sur iOS pour éviter le voile sombre résiduel en bas */
    flex-direction: column;
}

.mobile-popup.active {
    display: flex;
    transform: translateY(0);
}

.mobile-popup-header {
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-popup-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
}

.mobile-popup-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-top: 4px;
}

.mobile-popup-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

#mobile-popup-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Mobile Popup Phenomenon Item */
.mp-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    padding: 15px;
    position: relative;
    overflow: hidden;
}

.mp-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--vigilance-none); /* Default */
}

.mp-item.level-etude::before { background: var(--vigilance-etude); }
.mp-item.level-moderee::before { background: var(--vigilance-moderee); }
.mp-item.level-renforcee::before { background: var(--vigilance-renforcee); }
.mp-item.level-absolue::before { background: var(--vigilance-absolue); }

.mp-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.mp-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.mp-icon.level-moderee { color: var(--vigilance-moderee); background: rgba(250, 204, 21, 0.1); }
.mp-icon.level-renforcee { color: var(--vigilance-renforcee); background: rgba(8, 145, 178, 0.1); }
.mp-icon.level-absolue { color: var(--vigilance-absolue); background: rgba(239, 68, 68, 0.1); }

.mp-titles {
    display: flex;
    flex-direction: column;
}

.mp-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mp-level {
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.8;
}

.mp-timeline {
    margin-top: 15px;
    width: 100%;
    display: block;
    min-height: 40px;
}

.mp-timeline .tooltip-timeline-frise {
    margin-top: 0;
    width: 100%;
}

.mp-timeline .timeline-track {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.mp-timeline .timeline-hours {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.mp-comment {
    margin-top: 15px;
    padding: 12px;
    background: var(--surface-inset);
    border-radius: var(--radius-xs);
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.mp-comment i {
    color: var(--accent-color);
    margin-right: 8px;
}

.mp-no-vigilance {
    text-align: center;
    padding: 40px 20px;
    color: var(--vigilance-none);
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.mp-no-vigilance i {
    font-size: 3rem;
    opacity: 0.8;
}

.banner-text-unit::after {
    content: ' • ';
    margin: 0 20px;
    opacity: 0.7;
    display: none; /* Hidden by default */
}

.scroll-wrapper.should-animate .banner-text-unit::after {
    display: inline-block;
}

.banner-text-unit:not(:first-child) {
    display: none;
}

.scroll-wrapper.should-animate .banner-text-unit {
    display: inline-block;
}

/* (.risk-intensity : définition unique dans la section RISK CARDS) */

/* Type icon tints for floating banner */
.floating-banner.type-info > i    { color: #7dd3fc; border-color: rgba(14, 116, 144,0.4);  background: rgba(14, 116, 144,0.2);  box-shadow: 0 2px 14px rgba(14, 116, 144,0.3); }
.floating-banner.type-warning > i { color: #fcd34d; border-color: rgba(251,191,36,0.4);  background: rgba(251,191,36,0.2);  box-shadow: 0 2px 14px rgba(251,191,36,0.3); }
.floating-banner.type-danger > i  { color: #fca5a5; border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.2); box-shadow: 0 2px 14px rgba(248,113,113,0.3); }
.floating-banner.type-success > i { color: #6ee7b7; border-color: rgba(52,211,153,0.4);  background: rgba(52,211,153,0.2);  box-shadow: 0 2px 14px rgba(52,211,153,0.3); }
.floating-banner.type-purple > i  { color: #c084fc; border-color: rgba(192,132,252,0.4);  background: rgba(192,132,252,0.2);  box-shadow: 0 2px 14px rgba(192,132,252,0.3); }
.floating-banner.type-pink > i    { color: #f472b6; border-color: rgba(244,114,182,0.4);  background: rgba(244,114,182,0.2);  box-shadow: 0 2px 14px rgba(244,114,182,0.3); }

/* Type backgrounds + glows for floating banner */
.floating-banner.type-info {
    background: linear-gradient(120deg, rgba(4,8,30,0.97) 0%, rgba(15,40,120,0.93) 35%, rgba(37,99,235,0.91) 50%, rgba(15,40,120,0.93) 65%, rgba(4,8,30,0.97) 100%);
    background-size: 300% 100%;
    border-color: rgba(14, 116, 144,0.25);
    animation: banner-drift 8s ease-in-out infinite, banner-pulse-info 3.5s ease-in-out infinite;
}
.floating-banner.type-warning {
    background: linear-gradient(120deg, rgba(4,8,20,0.97) 0%, rgba(90,36,4,0.95) 35%, rgba(194,88,12,0.92) 50%, rgba(90,36,4,0.95) 65%, rgba(4,8,20,0.97) 100%);
    background-size: 300% 100%;
    border-color: rgba(251,191,36,0.25);
    animation: banner-drift 8s ease-in-out infinite, banner-pulse-warning 3.5s ease-in-out infinite;
}
.floating-banner.type-danger {
    background: linear-gradient(120deg, rgba(4,4,18,0.97) 0%, rgba(110,15,15,0.96) 35%, rgba(210,38,38,0.93) 50%, rgba(110,15,15,0.96) 65%, rgba(4,4,18,0.97) 100%);
    background-size: 300% 100%;
    border-color: rgba(248,113,113,0.28);
    animation: banner-drift 8s ease-in-out infinite, banner-pulse-danger 3.5s ease-in-out infinite;
}
.floating-banner.type-success {
    background: linear-gradient(120deg, rgba(2,10,18,0.97) 0%, rgba(4,50,38,0.95) 35%, rgba(12,170,115,0.91) 50%, rgba(4,50,38,0.95) 65%, rgba(2,10,18,0.97) 100%);
    background-size: 300% 100%;
    border-color: rgba(52,211,153,0.25);
    animation: banner-drift 8s ease-in-out infinite, banner-pulse-success 3.5s ease-in-out infinite;
}
.floating-banner.type-purple {
    background: linear-gradient(120deg, rgba(10,4,30,0.97) 0%, rgba(58,15,110,0.93) 35%, rgba(124,58,237,0.91) 50%, rgba(58,15,110,0.93) 65%, rgba(10,4,30,0.97) 100%);
    background-size: 300% 100%;
    border-color: rgba(196,132,252,0.25);
    animation: banner-drift 8s ease-in-out infinite, banner-pulse-purple 3.5s ease-in-out infinite;
}
.floating-banner.type-pink {
    background: linear-gradient(120deg, rgba(18,4,20,0.97) 0%, rgba(100,8,58,0.95) 35%, rgba(190,28,100,0.91) 50%, rgba(100,8,58,0.95) 65%, rgba(18,4,20,0.97) 100%);
    background-size: 300% 100%;
    border-color: rgba(244,114,182,0.25);
    animation: banner-drift 8s ease-in-out infinite, banner-pulse-pink 3.5s ease-in-out infinite;
}

/* ---- BANNER KEYFRAMES ---- */

/* Inner glow breathe — used on TOP banner */
@keyframes banner-glow-info {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 40px rgba(0,0,0,0.55); }
    50%       { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 40px rgba(0,0,0,0.55), inset 0 0 70px rgba(14, 116, 144,0.22), 0 0 24px rgba(14, 116, 144,0.14); }
}
@keyframes banner-glow-warning {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 40px rgba(0,0,0,0.55); }
    50%       { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 40px rgba(0,0,0,0.55), inset 0 0 70px rgba(251,191,36,0.2), 0 0 24px rgba(251,191,36,0.12); }
}
@keyframes banner-glow-danger {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 40px rgba(0,0,0,0.55); }
    50%       { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 40px rgba(0,0,0,0.55), inset 0 0 70px rgba(239,68,68,0.24), 0 0 24px rgba(239,68,68,0.16); }
}
@keyframes banner-glow-success {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 40px rgba(0,0,0,0.55); }
    50%       { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 40px rgba(0,0,0,0.55), inset 0 0 70px rgba(16,185,129,0.2), 0 0 24px rgba(16,185,129,0.12); }
}
@keyframes banner-glow-purple {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 40px rgba(0,0,0,0.55); }
    50%       { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 40px rgba(0,0,0,0.55), inset 0 0 70px rgba(168,85,247,0.22), 0 0 24px rgba(168,85,247,0.14); }
}
@keyframes banner-glow-pink {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 40px rgba(0,0,0,0.55); }
    50%       { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 40px rgba(0,0,0,0.55), inset 0 0 70px rgba(236,72,153,0.2), 0 0 24px rgba(236,72,153,0.12); }
}

/* Outer glow pulse — used on FLOATING pill */
@keyframes banner-pulse-info {
    0%, 100% { box-shadow: 0 16px 56px rgba(0,0,0,0.65), 0 0 20px rgba(14, 116, 144,0.12); }
    50%       { box-shadow: 0 20px 64px rgba(0,0,0,0.7), 0 0 56px rgba(14, 116, 144,0.42), 0 0 0 1.5px rgba(14, 116, 144,0.22); }
}
@keyframes banner-pulse-warning {
    0%, 100% { box-shadow: 0 16px 56px rgba(0,0,0,0.65), 0 0 20px rgba(251,191,36,0.12); }
    50%       { box-shadow: 0 20px 64px rgba(0,0,0,0.7), 0 0 56px rgba(251,191,36,0.4), 0 0 0 1.5px rgba(251,191,36,0.2); }
}
@keyframes banner-pulse-danger {
    0%, 100% { box-shadow: 0 16px 56px rgba(0,0,0,0.65), 0 0 20px rgba(239,68,68,0.14); }
    50%       { box-shadow: 0 20px 64px rgba(0,0,0,0.7), 0 0 56px rgba(239,68,68,0.45), 0 0 0 1.5px rgba(239,68,68,0.24); }
}
@keyframes banner-pulse-success {
    0%, 100% { box-shadow: 0 16px 56px rgba(0,0,0,0.65), 0 0 20px rgba(16,185,129,0.12); }
    50%       { box-shadow: 0 20px 64px rgba(0,0,0,0.7), 0 0 56px rgba(16,185,129,0.4), 0 0 0 1.5px rgba(16,185,129,0.2); }
}
@keyframes banner-pulse-purple {
    0%, 100% { box-shadow: 0 16px 56px rgba(0,0,0,0.65), 0 0 20px rgba(168,85,247,0.12); }
    50%       { box-shadow: 0 20px 64px rgba(0,0,0,0.7), 0 0 56px rgba(168,85,247,0.42), 0 0 0 1.5px rgba(168,85,247,0.22); }
}
@keyframes banner-pulse-pink {
    0%, 100% { box-shadow: 0 16px 56px rgba(0,0,0,0.65), 0 0 20px rgba(236,72,153,0.12); }
    50%       { box-shadow: 0 20px 64px rgba(0,0,0,0.7), 0 0 56px rgba(236,72,153,0.42), 0 0 0 1.5px rgba(236,72,153,0.22); }
}

/* Gradient drift (shared) */
@keyframes banner-drift {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}

/* Shimmer light sweep (shared) */
@keyframes banner-shimmer {
    0%      { left: -80%; }
    55%, 100% { left: 180%; }
}

/* Scrolling Animation Wrapper */
.scroll-wrapper {
    display: inline-block;
    white-space: nowrap;
}

.scroll-wrapper.should-animate {
    animation: marquee 20s linear infinite;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Assumes text is duplicated */
}

/* Adjustments for buttons overlapping */
#chat-toggle-btn.shifted {
    bottom: 70px !important;
}

/* ---- GLOBAL COMMENTARY ---- */
.global-commentary {
    background: var(--surface-grad);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: 25px;
    margin-top: 20px;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.6;
    box-shadow: var(--shadow-2);
}

/* Quand le commentaire est déjà dans une carte .vig-block, on retire sa propre box
   pour éviter l'effet « carte dans une carte » */
.vig-commentary-block .global-commentary {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.global-commentary strong {
    color: var(--accent-color);
    font-size: 1.1rem;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.popup-phenom-comment {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-style: italic;
    line-height: 1.3;
}

.popup-phenom-comment i {
    color: var(--accent-color);
    margin-right: 5px;
}

/* ---- VIGILANCE FILTERS ---- */
.vigilance-filter-bar {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    padding: 0 20px;
}

/* Filtres — même recette que .nav-item de la navbar */
.filter-btn {
    padding: 7px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--surface-border);
    background: var(--surface-1);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition);
}

.filter-btn:hover {
    background: var(--surface-2);
    border-color: var(--border-med, rgba(148,163,184,0.25));
    color: var(--text-primary);
}

.filter-btn.active {
    background: var(--accent-soft);
    border-color: rgba(8, 145, 178, 0.4);
    color: var(--accent-color);
    font-weight: 600;
}

.filter-btn i, .filter-btn .phenomenon-icon-svg {
    width: 1.1em;
    height: 1.1em;
}

.dep-path.filtered-out {
    fill: var(--vigilance-none); /* Vert */
    opacity: 0.5; /* Plus discret (grisé/dimmed) tout en restant vert */
    stroke: rgba(255,255,255,0.05);
}

/* Risk Bars Styles */
.risk-frieze-container {
    padding: 25px;
    background: rgba(0,0,0,0.1);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.05);
}

/* ===== RISK CARDS (Orages) ===== */
.risk-bars-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.risk-card {
    display: grid;
    grid-template-columns: 72px 1fr minmax(130px, auto);
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.risk-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Left : big probability number */
.risk-card-prob {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    gap: 2px;
}
.risk-prob-number {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1;
}
.risk-prob-unit {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Center : icon + name + bar */
.risk-card-center {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.risk-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}
.risk-card-header i {
    font-size: 1.05em;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.risk-card-details {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
    padding-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 2px;
}

/* Bar */
.risk-bar-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.risk-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.risk-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(45deg,
        rgba(255,255,255,0.15) 25%, transparent 25%,
        transparent 50%, rgba(255,255,255,0.15) 50%,
        rgba(255,255,255,0.15) 75%, transparent 75%);
    background-size: 16px 16px;
    opacity: 0.3;
}

/* Right : level badge + custom content */
.risk-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.risk-level-badge {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    border: 1.5px solid currentColor;
    white-space: nowrap;
    opacity: 0.9;
}
.risk-intensity-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.risk-intensity {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
    background: rgba(148, 163, 184, 0.15);
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    border: 1px solid rgba(255,255,255,0.1);
    white-space: normal;
    text-align: right;
    max-width: 160px;
}

/* Fill Colors */
.risk-bar-fill.level-faible { background: var(--vigilance-orage-faible); box-shadow: 0 0 10px var(--vigilance-orage-faible); }
.risk-bar-fill.level-modere { background: var(--vigilance-orage-modere); box-shadow: 0 0 10px var(--vigilance-orage-modere); }
.risk-bar-fill.level-fort { background: var(--vigilance-orage-fort); box-shadow: 0 0 10px var(--vigilance-orage-fort); }
.risk-bar-fill.level-violent { background: var(--vigilance-orage-violent); box-shadow: 0 0 10px var(--vigilance-orage-violent); }
.risk-bar-fill.level-extreme { background: var(--vigilance-orage-extreme); box-shadow: 0 0 10px var(--vigilance-orage-extreme); }

/* Text Colors */
.level-faible { color: var(--vigilance-orage-faible); }
.level-modere { color: var(--vigilance-orage-modere); }
.level-fort { color: var(--vigilance-orage-fort); }
.level-violent { color: var(--vigilance-orage-violent); }
.level-extreme { color: var(--vigilance-orage-extreme); }

@media (max-width: 768px) {
    .risk-card {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
    }
    .risk-card-right {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255,255,255,0.06);
        margin-top: 4px;
    }
    .risk-prob-number { font-size: 1.6rem; }
}


.risk-commentary {
    padding: 15px;
    font-size: 0.95em;
    color: var(--text-secondary);
    background-color: rgba(255,255,255,0.05);
    border-radius: var(--radius-xs);
    margin: 0 10px 10px 10px;
}

/* ---- RED VIGILANCE ALERT (Pro Notification Style) ---- */
.mf-alert-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    display: none; /* Hidden on desktop by default unless needed, but JS adds it */
}

@media (max-width: 768px) {
    .mf-alert-backdrop {
        display: block; /* Only active on mobile for this specific design */
    }
}

.mf-alert-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

.mf-alert-wrapper {
    position: fixed;
    bottom: 25px;
    right: 25px;
    left: auto;
    top: auto;
    transform: translateX(120%); /* Slide from right */
    width: 400px;
    max-width: 95vw;
    z-index: 10000;
    transition: transform 0.6s cubic-bezier(0.05, 0.9, 0.1, 1);
    filter: drop-shadow(0 15px 35px rgba(0,0,0,0.6));
}

@media (max-width: 768px) {
    .mf-alert-wrapper {
        bottom: 0;
        right: 0;
        left: 0;
        top: auto;
        width: 100%;
        max-width: 100%;
        transform: translateY(100%); /* Slide from bottom */
        border-radius: 24px 24px 0 0;
        filter: none; /* Remove drop shadow as we have backdrop */
        box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
    }
    
    .mf-alert-wrapper.visible {
        transform: translateY(0);
    }

    .mf-alert-card {
        border-radius: 24px 24px 0 0;
        border: none;
        border-top: 1px solid rgba(255,255,255,0.2);
    }

    .mf-alert-body {
        padding-bottom: 40px; /* Safe area for bottom */
    }
}

.mf-alert-wrapper.visible {
    transform: translateX(0);
}

/* Fix mobile visible transform override */
@media (max-width: 768px) {
    .mf-alert-wrapper.visible {
        transform: translateY(0);
    }
}

.mf-alert-card {
    background: linear-gradient(135deg, #7f1d1d 0%, #450a0a 100%); /* Deep Dark Red Gradient */
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: stretch;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(14, 116, 144, 0.4);
}

/* Red Side Accent Bar - Brighter for contrast */
.mf-alert-accent {
    width: 8px;
    background: #ef4444;
    flex-shrink: 0;
    box-shadow: 2px 0 10px rgba(0,0,0,0.3);
}

.mf-alert-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.mf-alert-header {
    padding: 16px 16px 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mf-header-title {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    color: #fca5a5; /* Light Red/Pink for better readability on dark red */
    display: flex;
    align-items: center;
    gap: 10px;
}

.mf-header-title i {
    color: #fff;
    font-size: 1.1rem;
    animation: mf-pulse-text 1.5s infinite;
}

.mf-alert-close {
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.6);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.mf-alert-close:hover {
    background: rgba(255,255,255,0.2);
    color: white;
}

.mf-alert-body {
    padding: 0 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mf-summary-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mf-dept-count {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 700;
}

.mf-dept-count strong {
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.mf-phenomena-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mf-phenomenon-tag {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Department List Styling */
.mf-dept-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.mf-dept-list::-webkit-scrollbar { width: 3px; }
.mf-dept-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: var(--radius-sm); }

.mf-dept-item {
    font-size: 0.8rem;
    background: var(--surface-inset);
    padding: 4px 10px;
    border-radius: 4px;
    color: #fca5a5;
    border: 1px solid rgba(255,255,255,0.05);
}

.mf-dept-item strong {
    color: #fff;
    margin-right: 4px;
}

@keyframes mf-pulse-text {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* ---- RED VIGILANCE PULSE ANIMATION (DISABLED PER REQUEST) ---- */
/* Timeline Bars: STATIC */
.timeline-bar.level-absolue,
.timeline-bar.level-violent,
.timeline-bar.level-extreme {
    animation: none !important;
    box-shadow: none; /* Flat style */
    z-index: 2;
}

/* Map Paths: STATIC (Reset stroke) */
.dep-path.level-absolue {
    animation: none !important;
    fill: var(--vigilance-absolue);
    stroke: var(--bg-end);
    stroke-width: 0.5px;
    z-index: 10;
}

/* Risk Bars: STATIC */
.risk-bar-fill.level-violent,
.risk-bar-fill.level-extreme {
    animation: none !important;
    box-shadow: none;
}

/* ---- PHENOMENON DETAILS (REDESIGNED V2 - PRO CARDS) ---- */
/* Container Style - Matches the rest of the site (Glassmorphism) */
.phenomenon-block, [id*="-prevention-info"] {
    background: var(--surface-grad);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow-2);
    margin: 0 20px 25px 20px;
}

.phenomenon-block h2, [id*="-prevention-info"] h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--text-primary);
}

/* New Card Style - Translucent Slate to sit inside the glass container */
.phenom-card {
    background: var(--surface-2); 
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
}

.phenom-card:last-child {
    margin-bottom: 0;
}

/* Header: Full width, solid color, very readable */
.phenom-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: filter 0.2s;
}

.phenom-header:hover {
    filter: brightness(1.1);
}

/* Subtle Glow for Red Header */
@keyframes red-header-glow {
    0% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0.1); }
    50% { box-shadow: inset 0 0 30px 0 rgba(255,255,255,0.2); }
    100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0.1); }
}

.phenom-title-group {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.phenom-icon-box {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.phenom-toggle-icon {
    transition: transform 0.3s ease;
    font-size: 1rem;
    opacity: 0.8;
}

/* Level Coloring for Headers */
.phenom-header.level-absolue { 
    background: #CC0002;
    color: white;
    border-bottom: 1px solid #8a0001; 
    animation: red-header-glow 3s infinite; /* Subtle animation */
} /* Red 700 */
.phenom-header.level-renforcee { background: #ea580c; color: white; border-bottom: 1px solid #c2410c; } /* Orange 600 */
.phenom-header.level-moderee { background: #ca8a04; color: #fff; border-bottom: 1px solid #a16207; } /* Yellow 600 - White text for contrast */
.phenom-header.level-etude { background: #475569; color: #e2e8f0; border-bottom: 1px solid #334155; } /* Slate 600 */
.phenom-header.level-none { background: #166534; color: white; } /* Green 700 */

/* Orages */
.phenom-header.level-extreme { background: #7e22ce; color: white; } /* Purple */
.phenom-header.level-violent { background: #b91c1c; color: white; }
.phenom-header.level-fort { background: #ea580c; color: white; }
.phenom-header.level-modere { background: #ca8a04; color: white; }
.phenom-header.level-faible { background: #475569; color: white; }

/* Content Body */
.phenom-body {
    background: var(--surface-2);
    padding: 0;
    display: none; /* Hidden by default if JS doesn't toggle */
}

/* Open state handled by <details> logic or class */
details[open] .phenom-body {
    display: block;
    animation: slideDown 0.3s ease-out;
}

details[open] .phenom-toggle-icon {
    transform: rotate(180deg);
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Sections inside body */
.phenom-section {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.phenom-section:last-child {
    border-bottom: none;
}

.phenom-subtitle {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
    letter-spacing: 1px;
}

/* Commentaire */
.phenom-comment-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    font-style: italic;
    border-left: 3px solid rgba(255,255,255,0.2);
    padding-left: 15px;
    margin: 0;
}

/* Recommendations List */
.phenom-reco-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.phenom-reco-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.phenom-reco-list li::before {
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--accent-color);
}

.level-absolue + .phenom-body .phenom-reco-list li::before { color: #fca5a5; }
.level-renforcee + .phenom-body .phenom-reco-list li::before { color: #fdba74; }

/* Custom Text override */
.phenom-custom-text {
    padding: 15px;
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-xs);
    margin: 10px 20px;
    font-size: 0.95rem;
}

/* =========================================
   BADGES MÉTÉO (CARTE LIVE)
   ========================================= */

/* Style de base du badge (le rond) */
.weather-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    border-radius: 50%; /* Rond parfait */
    border: 2px solid rgba(255, 255, 255, 0.25); /* Bordure légère */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Ombre pour le relief */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animation fluide */
    cursor: pointer;
}

/* Effet au survol de la souris */
.weather-badge:hover {
    transform: scale(1.4); /* Grossit de 40% */
    z-index: 1000 !important; /* Passe devant tout le monde */
    border-color: #ffffff; /* Bordure devient blanche */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* --- COULEURS DYNAMIQUES (Gradients) --- */

/* Vert (Calme < 40 km/h) */
.wb-calm {
    background: linear-gradient(135deg, #10b981, #047857);
}

/* Jaune/Orange (Modéré 40-60 km/h) */
.wb-mod {
    background: linear-gradient(135deg, #facc15, #ca8a04);
    color: #000; /* Texte noir pour lisibilité sur jaune */
    text-shadow: none;
}

/* Orange Foncé (Fort 60-80 km/h) */
.wb-high {
    background: linear-gradient(135deg, #fb923c, #ea580c);
}

/* Rouge (Tempête 80-100 km/h) */
.wb-storm {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); /* Lueur rouge */
}

/* Violet/Noir (Extrême > 100 km/h) */
.wb-extreme {
    background: linear-gradient(135deg, #4c1d95, #1e1b4b);
    border: 2px solid #ef4444; /* Bordure rouge danger */
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.6); /* Lueur violette */
}

/* --- ANIMATIONS --- */

/* Animation de pulsation (Onde de choc) — renommée pour ne pas entrer
   en conflit avec @keyframes pulse-ring (.pulsing-dot) plus haut */
@keyframes pulse-ring-anim {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(14, 116, 144, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 12px rgba(14, 116, 144, 0); /* L'onde s'éloigne et disparait */
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(14, 116, 144, 0);
    }
}

/* Classe à ajouter pour activer l'animation */
.pulse-anim {
    animation: pulse-ring-anim 2s infinite;
}

/* --- STYLE DE LA POPUP (INFO-BULLE) --- */
.leaflet-popup-content-wrapper {
    background: rgba(20, 20, 20, 0.95) !important; /* Fond très sombre */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.1);
    color: white !important;
    border-radius: var(--radius-sm) !important;
}

.leaflet-popup-tip {
    background: rgba(20, 20, 20, 0.95) !important;
}

/* --- GALAXY POPUP SYSTEM --- */
#info-global-popup {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 10000000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
    overflow: hidden;
}

#info-global-popup.active {
    opacity: 1;
    pointer-events: auto;
}


/* ============================================================
   LANGAGE VISUEL GLOBAL (design system — tokens design-tokens.css)
   ============================================================ */

/* ---- TYPOGRAPHIE ---- */
h1, h2, h3,
.section-title, .vig-section-title, .chart-title,
.page-title, .ch-page-title, .lvm-title,
.mobile-menu-title, .auth-header h1, .auth-header h2 {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
}
h1 { font-weight: 600; line-height: 1.15; }
h2 { font-weight: 600; line-height: 1.2; }
h3 { font-weight: 600; line-height: 1.3; }

/* Gros titres de page : dégradé blanc → cyan léger */
.page-title, .ch-page-title, .lvm-title, .auth-header h1 {
    background: linear-gradient(120deg, var(--text-primary) 35%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Petits titres de section : style "étiquette" homogène */
.vig-section-title, .section-title, .chart-title {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}
.vig-section-title i, .section-title i, .chart-title i { color: var(--accent-color); }

::selection { background: rgba(8, 145, 178, 0.3); color: #fff; }

/* ---- TABLEAUX ---- */
thead th {
    font-family: var(--font-display);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: rgba(148, 163, 184, 0.06); }

/* ---- SCROLLBARS ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.35) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(8, 145, 178, 0.5); }

/* ---- ACCESSIBILITÉ ---- */
:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* Pas d'effet "lift" au survol sur tactile */
@media (max-width: 768px) {
    .glass-card:hover, .stat-bubble:hover, .model-card:hover,
    .tab-button:hover, .quick-btn:hover, .status-action-btn:hover, .vig-block:hover { transform: none; }

    /* Disable GPU-intensive backdrop-filter on mobile — primary cause of navigation/scroll lag */
    .navbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: var(--surface-1) !important;
    }
    .dropdown-content,
    .mobile-menu-overlay,
    .mobile-menu-content {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ---- UTILITAIRES MENU ---- */
.menu-section-label { padding: 10px 20px; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-family: var(--font-display); }
.menu-sep { border: 0; border-top: 1px solid var(--surface-border); margin: 10px 0; }
.nav-chevron { font-size: 0.7em; margin-left: 5px; opacity: 0.5; }

/* ---- SPA PAGE TRANSITION ---- */
@media (prefers-reduced-motion: no-preference) {
    .lvm-page-enter {
        animation: lvm-page-fade 0.18s ease-out both;
    }
    @keyframes lvm-page-fade {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ── Disclaimer "Non-officiel" — bandeau pro pleine largeur (v7.2) ── */
.lvm-disclaimer-bubble {
    display: flex; align-items: center; gap: 16px;
    width: 100%;
    background: linear-gradient(90deg, rgba(251,191,36,0.09), rgba(251,191,36,0.03) 55%, transparent);
    border: 1px solid rgba(251,191,36,0.22);
    border-left: 4px solid #fbbf24;
    border-radius: var(--radius-sm);
    padding: 14px 20px;
    margin: 16px 0 10px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    box-shadow: 0 4px 18px -10px rgba(251,191,36,0.25);
}
.lvm-disclaimer-bubble .disc-icon {
    color: #fbbf24; font-size: 1.15rem; flex-shrink: 0; margin-top: 0;
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(251,191,36,0.12);
}
.lvm-disclaimer-bubble strong {
    color: #fbbf24; text-transform: uppercase; letter-spacing: 0.05em;
    font-size: 0.78rem; display: block; margin-bottom: 2px;
}
.lvm-disclaimer-bubble a { color: var(--accent-color); font-weight: 700; text-decoration: none; }
.lvm-disclaimer-bubble a:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .lvm-disclaimer-bubble { padding: 16px 18px; gap: 14px; font-size: 0.82rem; width: auto; margin-left: 15px; margin-right: 15px; }
    .page-title, .ch-page-title, .lvm-title { margin-left: 15px; margin-right: 15px; }
    .lvm-disclaimer-bubble .disc-icon { width: 32px; height: 32px; font-size: 1rem; }
}

/* ── Footer : réseaux sociaux (gérés depuis le panel) ── */
.footer-socials {
    display: flex; justify-content: center; align-items: center;
    gap: 12px; flex-wrap: wrap;
    margin: 18px 0 6px;
}
.footer-socials:empty { display: none; }
.footer-social-btn {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--surface-border);
    color: var(--text-secondary); font-size: 1.1rem;
    text-decoration: none;
    transition: all var(--transition);
}
.footer-social-btn:hover {
    color: var(--accent-color);
    border-color: rgba(8, 145, 178,0.4);
    background: var(--accent-soft);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px -6px var(--accent-glow);
}

/* ── Modernisation 2026 : polish global ── */
/* Sélection de texte accent */
::selection { background: rgba(8, 145, 178,0.3); color: #fff; }
/* Focus visible cohérent au clavier */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
    outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs);
}
/* Scrollbar fine et discrète */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.25); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(148,163,184,0.45); }
html { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,0.35) transparent; }
/* Défilement doux pour les ancres */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Bandeau : masque latéral plus doux + accent bas renforcé */
.site-banner-text-container {
    mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent);
}
.site-banner::after { height: 2px; opacity: 1; }
@keyframes banner-pulse-icon { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.banner-warning .site-banner-icon-wrap i, .banner-danger .site-banner-icon-wrap i { animation: banner-pulse-icon 2.2s ease-in-out infinite; }

/* ── Rebrand 2026 : ambiance et mise en page ── */
/* Aurora ambiante : deux halos très diffus derrière le contenu */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 480px at 12% -8%, rgba(8, 145, 178,0.07), transparent 60%),
        radial-gradient(760px 520px at 92% 12%, rgba(96,165,250,0.055), transparent 58%),
        radial-gradient(700px 600px at 50% 115%, rgba(14, 116, 144,0.04), transparent 60%);
}
/* Titres de page : un peu plus présents avec le nouveau display */
.page-title, .ch-page-title, .lvm-title, .auth-header h1 {
    letter-spacing: -0.02em;
    font-weight: 700;
}
/* Filet dégradé sous les titres de page, aligné à gauche */
.page-title { position: relative; padding-bottom: 12px; }
.page-title::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 64px; height: 3px; border-radius: 3px;
    background: var(--accent-grad);
    box-shadow: 0 0 12px var(--accent-glow);
}
/* Nom de marque navbar : display font + espacement serré */
.brand-name { font-family: var(--font-display); letter-spacing: -0.02em; }
/* Cartes : lift doux homogène au survol */
.column-card:hover, .dashboard-card:hover, .glass-card:hover {
    border-color: rgba(148,163,184,0.28);
    box-shadow: var(--shadow-3);
}