/* ========================================================================== */
/* --- SOUNDPROJECT V2 - FEUILLE DE STYLE PRINCIPALE --- */
/* ========================================================================== */

:root {
    --bg-body: #1b1b1b;
    --bg-card: #2d2d2d;
    --text-main: #ecf0f1;
    --text-muted: #b8c7ce;
    --border-color: #3e3e3e;
    --accent-blue: #00c0ef;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    margin: 0;
    font-size: 14px;
}

/* --- SYSTÈME DE GRILLE (GRID SYSTEM) --- */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

[class*="col-"] {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

.col-12 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.col-md-6 {
    width: 100%;
}

@media (min-width: 768px) {
    .col-md-6 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-3 {
        width: 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* --- HEADER & NAVIGATION --- */
.main-header {
    background-color: #222d32;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1030;
}

.logo {
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    margin-right: 20px;
}

.navbar {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;
}

#last-updated {
    font-size: 24px !important;
    font-weight: 700;
    color: #fff;
    margin-left: 20px;
    line-height: 50px;
}

.btn-switch-view {
    color: #fff;
    background: #444;
    padding: 5px 10px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 12px;
}

.wrapper {
    margin-top: 50px;
    padding: 20px;
}

/* --- CONTROLS BAR (Date & Période) --- */
.controls-bar {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: var(--bg-card);
    padding: 12px 20px;
    border-radius: 4px;
    border-top: 3px solid #605ca8;
    margin-bottom: 20px;
    position: relative;
    z-index: 2000;
}

.btn-group .period-btn {
    background-color: #444;
    border: 1px solid #555;
    color: #fff;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

.btn-group .period-btn.active {
    background-color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
    color: #fff !important;
    box-shadow: 0 0 5px rgba(0, 192, 239, 0.5);
}

.date-input-group {
    display: flex;
    align-items: center;
    background: #444;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 5px 15px;
}

.date-input-group i {
    font-size: 16px;
    margin-right: 10px;
}

#date-picker {
    background: transparent;
    border: none;
    color: #fff;
    outline: none;
    font-size: 16px;
    font-weight: 600;
}

.btn-validate {
    background-color: #00a65a;
    border: none;
    color: white;
    padding: 8px 16px;
    margin-left: 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
}

/* --- BOITES (CARDS) --- */
.box {
    position: relative;
    border-radius: 3px;
    background: var(--bg-card);
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.box.box-primary {
    border-top-color: #3c8dbc;
}

.box.box-info {
    border-top-color: #00c0ef;
}

.box.box-danger {
    border-top-color: #dd4b39;
}

.box.box-warning {
    border-top-color: #f39c12;
}

.box.box-success {
    border-top-color: #00a65a;
}

.box-header {
    color: var(--text-main);
    display: block;
    padding: 10px;
    position: relative;
}

.box-header.with-border {
    border-bottom: 1px solid var(--border-color);
}

.box-title {
    display: inline-block;
    font-size: 22px !important;
    margin: 0;
    font-weight: 600;
}

.box-body {
    padding: 10px;
    color: var(--text-main);
}

.box-body.no-padding {
    padding: 0;
}

/* --- KPIs (Tuiles colorées) --- */
.info-box {
    display: flex;
    min-height: 90px;
    background: var(--bg-card);
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    margin-bottom: 15px;
    align-items: center;
}

.info-box-icon {
    border-radius: 2px 0 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    font-size: 45px;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    flex-shrink: 0;
}

.info-box-content {
    padding: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.info-box-text {
    text-transform: uppercase;
    font-size: 13px;
    color: var(--text-muted);
}

/* Alignement Valeur + Tendances */
.kpi-value-container {
    display: flex;
    align-items: baseline;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.info-box-number,
.kpi-trend,
.kpi-long-term-trend {
    font-weight: bold;
    font-size: 24px;
    white-space: nowrap;
}

.info-box-number {
    color: var(--text-main);
}

.trend-up {
    color: #dd4b39;
}

.trend-down {
    color: #00a65a;
    period-table
}

/* Couleurs de fond */
.bg-aqua {
    background-color: #00c0ef !important;
}

.bg-green {
    background-color: #00a65a !important;
}

.bg-yellow {
    background-color: #f39c12 !important;
}

.bg-red {
    background-color: #dd4b39 !important;
}

.bg-purple {
    background-color: #605ca8 !important;
}

/* --- TABLEAUX --- */
.table-responsive {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #605ca8 #2d2d2d;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead th {
    position: sticky;
    top: 0;
    background-color: #2d2d2d;
    z-index: 10;
    border-bottom: 2px solid #605ca8;
    cursor: pointer;
    user-select: none;
    font-size: 16px !important;
    padding: 12px 10px !important;
}

.table td {
    border-top: 1px solid var(--border-color);
    text-align: left;
}

.table thead th:hover {
    background-color: #3d3d3d;
}

.table thead th::after {
    content: '\f0dc';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    float: right;
    color: #555;
    font-size: 12px;
    margin-left: 5px;
}

.table thead th.asc::after {
    content: '\f0de';
    color: #fff;
}

.table thead th.desc::after {
    content: '\f0dd';
    color: #fff;
}

/* Style Spécifique Tableaux Événements */
/* --- TABLEAUX ÉVÉNEMENTS (Centrage & Style) --- */

/* Cible les en-têtes (th) et les cellules (td) des DEUX tableaux */
/* --- TABLEAUX ÉVÉNEMENTS (Centrage & Style Corrigés) --- */

/* 1. Centrage général des cellules */
#events-period-table th,
#events-period-table td,
#top-events-table th,
#top-events-table td {
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 18px !important;
    padding: 8px 10px !important;
    height: 45px !important;
}

/* 2. Centrage du Spectre (Le graphique est dans une div) */
#events-period-table td div {
    margin: 0 auto !important;
    /* Force le bloc div à se centrer */
    display: block;
}

/* 3. Centrage des Badges */
#events-period-table .badge,
#top-events-table .badge {
    font-size: 14px !important;
    padding: 5px 10px !important;
    display: inline-block;
}

/* 4. Correction du Bouton Audio */
#events-period-table .action-btn,
#top-events-table .action-btn {
    margin: 0 auto !important;
    /* Centre le bouton dans la case */

    /* Utilisation de Flexbox pour centrer l'icône DANS le bouton */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 32px !important;
    /* Taille fixe carrée */
    height: 32px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    padding: 0 !important;
    /* Pas de padding interne qui décale */
}

/* Recherche Tableau */
.table-search-container {
    padding: 10px;
    background: #2d2d2d;
    border-bottom: 1px solid #3e3e3e;
}

.table-search-input {
    width: 100%;
    padding: 8px 12px;
    background-color: #1b1b1b;
    border: 1px solid #3e3e3e;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
}

.table-search-input:focus {
    outline: none;
    border-color: #605ca8;
}

/* --- SCÈNE RUE DE PARIS (SILHOUETTE) --- */
.sky-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #a8dadc 0%, #edf6f9 100%);
    z-index: 0;
    transition: background 2s ease;
}

.sky-background.night {
    background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364) !important;
}

.paris-buildings {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* SVG SILHOUETTE */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='280' viewBox='0 0 1200 280'%3E%3Cpath d='M100 240 L130 100 L160 240' fill='%237f8c8d' opacity='0.4'/%3E%3Cpath d='M130 100 L130 40' stroke='%237f8c8d' stroke-width='2' opacity='0.4'/%3E%3Cpath d='M0 240 V 120 L 30 90 L 80 90 L 90 120 L 150 120 L 150 80 L 170 60 L 220 60 L 240 80 L 240 130 L 280 130 L 280 100 L 300 80 L 380 80 L 400 100 L 400 150 L 450 150 L 450 110 L 470 90 L 550 90 L 570 110 L 570 140 L 620 140 L 620 70 L 640 50 L 720 50 L 740 70 L 740 140 L 800 140 L 800 100 L 820 80 L 900 80 L 920 100 L 920 140 L 980 140 L 980 90 L 1000 70 L 1080 70 L 1100 90 L 1100 150 L 1200 150 V 240 Z' fill='%2334495e'/%3E%3Crect x='40' y='70' width='10' height='20' fill='%2334495e'/%3E%3Crect x='190' y='40' width='8' height='20' fill='%2334495e'/%3E%3Crect x='330' y='60' width='10' height='20' fill='%2334495e'/%3E%3Crect x='500' y='70' width='10' height='20' fill='%2334495e'/%3E%3Crect x='680' y='30' width='8' height='20' fill='%2334495e'/%3E%3Crect x='850' y='60' width='10' height='20' fill='%2334495e'/%3E%3Crect x='1040' y='50' width='10' height='20' fill='%2334495e'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: bottom left;
    background-size: 1200px 100%;
    transition: filter 2s ease;
}

.night-mode .paris-buildings {
    filter: brightness(0.6);
}

.cobblestone-road {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: #2c3e50;
    z-index: 5;
    border-top: 4px solid #95a5a6;
}

.moon {
    position: absolute;
    top: 20px;
    right: 40px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: -15px 10px 0 0 #f1c40f;
    opacity: 0.8;
    z-index: 0;
}

.rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%221%22%20height%3D%225%22%20fill%3D%22rgba(255%2C255%2C255%2C0.3)%22%2F%3E%3C%2Fsvg%3E');
    animation: rain-fall 0.5s linear infinite;
    pointer-events: none;
}

@keyframes rain-fall {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -20px 20px;
    }
}

.christmas-garland {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50' viewBox='0 0 100 50'%3E%3Cpath d='M0,0 Q50,50 100,0' fill='none' stroke='%232ecc71' stroke-width='2'/%3E%3Ccircle cx='20' cy='20' r='3' fill='red'/%3E%3Ccircle cx='50' cy='35' r='3' fill='gold'/%3E%3Ccircle cx='80' cy='20' r='3' fill='blue'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    animation: blink-lights 2s infinite alternate;
}

@keyframes blink-lights {
    from {
        filter: brightness(0.8);
    }

    to {
        filter: brightness(1.5) drop-shadow(0 0 5px gold);
    }
}

/* --- ANIMATION VEHICULES & BULLES --- */
.vehicle-wrapper {
    position: absolute;
    bottom: 5px;
    z-index: 20;
    left: 100%;
    width: 200px;
    height: 150px;
    pointer-events: none;
    animation: drive-smooth 20s linear forwards;
}

@keyframes drive-smooth {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-120vw);
    }
}

.moving-vehicle {
    position: absolute;
    bottom: 0;
    right: 50px;
    font-size: 50px;
}

.moving-vehicle.fa-flip-horizontal {
    transform: scaleX(-1);
    display: inline-block;
}

.emergency-light::after {
    content: '';
    position: absolute;
    top: -5px;
    right: 15px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: red;
    box-shadow: 0 0 10px red;
    animation: siren-flash 0.5s infinite alternate;
}

@keyframes siren-flash {
    from {
        background: red;
        box-shadow: 0 0 10px red;
    }

    to {
        background: blue;
        box-shadow: 0 0 10px blue;
    }
}

.comic-bubble {
    position: absolute;
    top: 20px;
    right: 80px;
    background: #fff;
    border: 3px solid #000;
    color: #000;
    padding: 10px;
    border-radius: 50%;
    font-weight: bold;
    font-family: 'Comic Sans MS', sans-serif;
    white-space: nowrap;
    z-index: 25;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
}

.comic-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 20px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #000 transparent;
    display: block;
    width: 0;
}

.comic-bubble::before {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 22px;
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;
    z-index: 1;
}

.noise-active {
    animation: shake 0.5s infinite;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* --- SWITCH AUTO-PLAY --- */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #00c0ef;
}

input:checked+.slider:before {
    transform: translateX(20px);
}

/* --- NOTIFICATIONS --- */
.notification-banner {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f39c12;
    color: white;
    padding: 15px 30px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: top 0.5s ease-in-out;
}

.notification-banner.visible {
    top: 0;
}

.notification-banner .fa {
    animation: bell-shake 1s cubic-bezier(.36, .07, .19, .97) both infinite;
}

@keyframes bell-shake {
    0% {
        transform: rotate(0);
    }

    15% {
        transform: rotate(5deg);
    }

    30% {
        transform: rotate(-5deg);
    }

    45% {
        transform: rotate(4deg);
    }

    60% {
        transform: rotate(-4deg);
    }

    75% {
        transform: rotate(2deg);
    }

    85% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(0);
    }
}

/* --- OVERLAY DE CHARGEMENT --- */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 27, 27, 0.85);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

body.loading #loading-overlay {
    opacity: 1;
    pointer-events: auto;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #444;
    border-top: 5px solid #00c0ef;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* --- LECTEUR AUDIO --- */
.audio-player-container {
    margin-bottom: 20px;
}

.footer-links {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
}

/* --- DÉCOR NOUVEL AN --- */
.new-year-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    /* Motif Feux d'artifice stylisés (Jaune, Rouge, Bleu) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3C!-- Feu 1 (Jaune) --%3E%3Cpath d='M50 50 L50 20 M50 50 L80 50 M50 50 L50 80 M50 50 L20 50 M50 50 L70 30 M50 50 L70 70 M50 50 L30 70 M50 50 L30 30' stroke='%23f1c40f' stroke-width='2' opacity='0.8'/%3E%3C!-- Feu 2 (Rouge) --%3E%3Cpath d='M200 80 L200 60 M200 80 L220 80 M200 80 L200 100 M200 80 L180 80 M200 80 L215 65 M200 80 L215 95 M200 80 L185 95 M200 80 L185 65' stroke='%23e74c3c' stroke-width='2' opacity='0.7'/%3E%3C!-- Feu 3 (Bleu) --%3E%3Cpath d='M120 30 L120 10 M120 30 L140 30 M120 30 L120 50 M120 30 L100 30' stroke='%233498db' stroke-width='2' opacity='0.6'/%3E%3C/svg%3E");

    background-repeat: repeat-x;
    /* Répète sur la largeur */
    animation: fireworks-blink 1s infinite alternate;
    /* Clignotement */
}

@keyframes fireworks-blink {
    from {
        opacity: 0.5;
        transform: scale(1);
    }

    to {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* --- PHARES DES VÉHICULES (Mode Nuit Uniquement) --- */

/* On cible le pseudo-élément 'after' du véhicule, 
   mais SEULEMENT si le parent (#animation-stage) a la classe .night-mode */
.night-mode .moving-vehicle::after {
    content: '';
    position: absolute;

    /* POSITIONNEMENT */
    /* L'icône étant retournée (miroir), 'left: 100%' correspond à l'avant du véhicule */
    left: 80%;
    top: 50%;

    /* TAILLE DU FAISCEAU */
    width: 250px;
    height: 100px;

    /* LE DESSIN DE LA LUMIÈRE */
    /* Un dégradé qui part du jaune vif vers le transparent */
    background: linear-gradient(to right, rgba(255, 255, 200, 0.9) 0%, rgba(255, 255, 200, 0.1) 40%, transparent 100%);

    /* LA FORME DU CÔNE */
    /* On découpe le rectangle en forme de trapèze/triangle */
    clip-path: polygon(0 45%, 0 55%, 100% 100%, 100% 0);

    /* AJUSTEMENTS */
    transform: translateY(-50%);
    /* Centrage vertical */
    z-index: -1;
    /* La lumière part de derrière le pare-choc pour ne pas cacher la voiture */
    mix-blend-mode: screen;
    /* Mode de fusion pour un effet lumineux réaliste */
    filter: blur(2px);
    /* Léger flou pour adoucir */
}

/* --- TABLEAU DES INDICES (Police XXL) --- */

/* 1. En-têtes et Cellules générales */
#indices-table th,
#indices-table td {
    font-size: 18px !important;
    /* Augmenté (était 16px) */
    padding: 15px 15px !important;
    /* Plus d'aération verticale */
    vertical-align: middle;
}

/* 2. En-têtes spécifiques */
#indices-table th {
    font-size: 16px !important;
    /* Les titres un peu plus petits que les données */
    text-transform: uppercase;
    color: #888;
}

/* 3. La Colonne "Catégorie" (1ère colonne) */
#indices-table td:first-child {
    font-size: 16px !important;
    font-weight: 700;
    color: #aaa;
    border-right: 1px solid #444;
    /* Séparation visuelle */
}

/* 4. La Colonne "Valeur Calculée" (3ème colonne maintenant !) */
#indices-table td:nth-child(3) {
    font-size: 28px !important;
    /* ÉNORME pour la lisibilité */
    font-weight: 900 !important;
    /* Très gras */
    padding: 10px !important;
    font-family: 'Source Sans Pro', sans-serif;
}

/* 5. Les Badges (Interprétation) */
#indices-table .badge {
    font-size: 15px !important;
    padding: 8px 14px !important;
    /* Badge plus large */
    border-radius: 6px;
}

/* 6. Formules (Dernière colonne) */
#indices-table td:last-child {
    font-size: 14px !important;
    color: #666 !important;
}

/* --- SÉPARATEURS DE SECTIONS --- */
.section-header {
    background-color: #222d32;
    /* Fond sombre légèrement différent du body */
    color: #fff;
    padding: 15px 20px;
    margin: 40px 0 20px 0;
    /* Espace au-dessus et en-dessous */
    font-size: 24px;
    font-weight: 300;
    /* Police fine élégante */
    border-left: 5px solid #00c0ef;
    /* Bordure Cyan caractéristique */
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 15px;
    /* Espace entre icône et texte */
}

.section-header i {
    color: #b8c7ce;
    /* Couleur icône */
}

/* Le premier séparateur a moins de marge en haut */
.section-header.first {
    margin-top: 10px;
}

/* ========================================================================== */
/* --- RESPONSIVE DESIGN (SMARTPHONE) --- */
/* ========================================================================== */

@media (max-width: 768px) {

    /* Cache le volume sur mobile pour laisser place au bouton Play */
    .vol-control {
        display: none !important;
    }

    /* Le bouton Play reste bien accessible */
    #pp_btn {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }

    /* 1. HEADER & NAV */
    .main-header {
        height: auto;
        /* Hauteur libre */
        padding: 10px;
        position: relative;
        /* Plus fixe sur mobile pour gagner de la place */
    }

    .navbar {
        flex-direction: column;
        /* Empiler les éléments */
        gap: 10px;
    }

    .navbar-right-menu {
        width: 100%;
        justify-content: space-between;
        margin-right: 0 !important;
    }

    #last-updated {
        margin: 5px 0;
        font-size: 16px !important;
        /* Plus petit */
        line-height: normal;
    }

    .wrapper {
        margin-top: 0;
        /* Comme le header n'est plus fixe */
        padding: 10px;
    }

    /* 2. BARRE DE CONTRÔLE */
    .controls-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
    }

    .btn-group {
        display: flex;
        justify-content: space-between;
    }

    .btn-group .period-btn {
        flex-grow: 1;
        /* Boutons étirés */
        padding: 8px 5px;
        font-size: 14px;
    }

    .date-input-group {
        margin-top: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    #date-picker {
        width: 100%;
    }

    /* 3. SCÈNE RUE DE PARIS */
    /* On réduit la hauteur sur mobile pour voir le reste */
    #animation-stage {
        height: 180px !important;
    }

    .paris-buildings {
        background-size: 600px 100% !important;
        /* On réduit l'échelle */
        height: 180px !important;
    }

    .skyline {
        height: 180px !important;
    }

    .moving-vehicle {
        font-size: 35px !important;
        /* Voitures plus petites */
        bottom: 10px !important;
    }

    /* 4. HAUTEURS DES GRAPHIQUES */
    /* On écrase les hauteurs fixes définies dans le HTML */
    .chart-container-responsive {
        height: 300px !important;
        /* 300px suffisent sur mobile */
    }

    .box-body.table-responsive {
        height: 300px !important;
    }

    /* 5. TABLEAUX */
    /* Police un peu plus petite pour éviter le scroll horizontal excessif */
    #events-period-table th,
    #events-period-table td,
    #top-events-table th,
    #top-events-table td {
        font-size: 14px !important;
        padding: 5px !important;
        height: auto !important;
    }

    /* On cache certaines colonnes moins utiles sur mobile ? Optionnel */
    /* .hide-mobile { display: none; } */

    /* 6. KPIS */
    .info-box {
        min-height: 80px;
    }

    .info-box-icon {
        width: 70px;
        height: 80px;
        font-size: 30px;
    }

    .info-box-number {
        font-size: 20px;
    }

    .kpi-trend,
    .kpi-long-term-trend {
        font-size: 14px;
        /* On réduit les tendances */
    }

    /* 7. INDICES DU BAS */
    #indices-table td:nth-child(3) {
        /* Valeur */
        font-size: 20px !important;
    }

}

/* --- MINIATURE & LIGHTBOX PHOTO --- */

/* La miniature dans le header */
.setup-thumbnail {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    /* Rond parfait */
    object-fit: cover;
    /* Recadre l'image sans la déformer */
    border: 2px solid #00c0ef;
    /* Bordure bleue Cyan */
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    /* --- AJOUT ICI : Espace à droite pour la décaler vers la gauche --- */
    margin-right: 30px;
    /* ------------------------------------------------------------------ */
}

.setup-thumbnail:hover {
    transform: scale(1.1);
    /* Grossit au survol */
    box-shadow: 0 0 10px rgba(0, 192, 239, 0.8);
}

/* Le fond noir (Modal) */
.lightbox-modal {
    display: none;
    /* Caché par défaut */
    position: fixed;
    z-index: 9999;
    /* Au-dessus de tout */
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    /* Fond noir très opaque */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* L'image en grand */
.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    animation: zoomIn 0.3s;
}

@keyframes zoomIn {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* La croix de fermeture */
.close-lightbox {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.close-lightbox:hover {
    color: #bbb;
}

/* Légende sous la photo */
.lightbox-caption {
    margin: auto;
    display: block;
    width: 80%;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    font-size: 18px;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {

    /* Sur mobile, on garde la miniature visible dans le header */
    .setup-thumbnail {
        width: 40px;
        height: 40px;
        margin-top: 5px;
        /* Petit ajustement si ça s'empile */
    }

    .lightbox-content {
        width: 100%;
        /* Pleine largeur sur mobile */
    }
}