/* admin_web/static/admin_web/css/simulator_styles.css */

/* Ceci sert de fallback si la vidéo ne charge pas */
body.page-simulator,
body.page-simulator html {
    background-color: #000;
}


html {
    /* L'image de fond a été supprimée d'ici */
}

/* Style pour la vidéo en arrière-plan (Desktop) */
.simulator-background-video {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    
}

/* Style pour la vidéo fixe (utilisée sur mobile) */
.simulator-fixed-video {
    position: fixed;
    top: 50%; /* MODIFIÉ de 0 à 50% */
    left: 50%; /* MODIFIÉ de 0 à 50% */
    /* AJOUTEZ CETTE LIGNE CI-DESSOUS */
    transform: translate(-50%, -50%); 
    /* CORRECTION VIDEO : Utiliser min-height/min-width pour empêcher les barres noires sur mobile (toolbar resizing) */
    min-width: 100vw;
    min-height: 100vh;
    width: auto;
    height: auto;
    object-fit: cover;
    z-index: 0; /* Se place au-dessus du fond de la page */
}

.text-danger {
    --bs-text-opacity: 1;
    color: rgb(255 255 255 / 38%) !important;
}




@media (min-width: 992px) {
    /* Cache le bouton secondaire (Voir le Résultat) en vue desktop */
    .sidebar-cta-buttons .btn-sim-secondary {
        display: none;
    }
}




/* ==========================================================
   1. STYLES DES DIAPOSITIVES (TOUS APPAREILS)
========================================================== */

.simulator-slide {
    height: 100svh; 
    box-sizing: border-box;
    scroll-snap-align: start;
    padding: 100px 5% 30px 5%; 
    overflow-y: auto; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
}

/* Diapo 1: Paramètres */
#simulator-params-slide {

}

/* Diapo 2: Résultats */
#simulator-results-slide {
    
    
    overflow-y: auto; 
    
    -webkit-backdrop-filter: blur(10px); 
}


/* ==========================================================
   2. CONTENU DIAPO 1 (Paramètres)
========================================================== */

.simulator-sidebar {
    width: 100%;
    max-width: 500px; 
    
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    border-radius: 12px;
    padding: 20px;
    overflow-y: visible; 
    background-color: rgba(0, 0, 0, 0.15); /* Fond unifié */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
    
}

/* Contenu Héro Intégré */
.sidebar-hero-content {
    padding-bottom: 15px;
    
    
    
}





.sidebar-hero-title {
    font-size: 17px; 
    font-weight: 800;
    color: var(--white-color);
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 10px;
}
.sidebar-hero-subtitle {
    font-size: 10px; 
    color: rgba(255, 255, 255, 0.8); /* MODIFIÉ */
    margin-bottom: 15px;
    line-height: 1.5;
}
.simulator-sidebar .simulator-toggle {
    display: flex; 
    background: rgba(0,0,0,0.25); 
    padding: 5px; 
    border-radius: 10px;
    width: 100%; 
    border: 1px solid transparent;
    box-shadow: none;
}
.toggle-option {
    flex: 1; text-align: center; padding: 10px; font-size: 12px; font-weight: 600; 
    color: rgb(255, 255, 255); 
    border-radius: 8px; cursor: pointer; transition: all 0.2s ease;
}
.toggle-option.active {
    background: var(--white-color);
    color: var(--dark-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sidebar-title-params {
    font-size: 14px; 
    font-weight: 700;
    color: var(--white-color); /* MODIFIÉ */
    margin-bottom: 15px;
}

.input-panel { display: none; flex-direction: column; }
.input-panel.active { display: flex; }
.input-panel p {
    font-size: 12px; 
    color: rgba(255, 255, 255, 0.8); /* MODIFIÉ */
    margin-bottom: 10px;
}

/* Sliders */
.big-slider-wrapper {
    margin-bottom: 5px; 
    text-align: left;
}

/* ▼▼▼ MODIFICATION POUR ALIGNER LABEL ET VALEUR ▼▼▼ */
.big-slider-wrapper .slider-header {
    display: flex;
    justify-content: space-between; /* Pour pousser la valeur à droite */
    align-items: flex-end; /* Pour aligner la valeur sur la ligne de base du label */
    margin-bottom: 5px; /* Espace au-dessus du slider */
}

.big-slider-wrapper label { 
    /* display: block; SUPPRIMÉ car géré par .slider-header */
    font-size: 12px; 
    font-weight: 600; 
    color: var(--white-color); /* MODIFIÉ */
    margin-bottom: 0; /* Assurer que la marge est à zéro */
} 
/* ▲▲▲ FIN DE LA MODIFICATION ▲▲▲ */


.big-value-display { 
    /* MODIFIÉ: Réduction de la taille de la police pour un meilleur alignement */
    font-size: 16px; 
    font-weight: 800; 
    color: var(--white-color); /* MODIFIÉ */
    
}
.big-slider {
    -webkit-appearance: none; width: 100%; height: 2px; 
    background: #e9ecef; border-radius: 4px; outline: none;
}
.big-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 20px; height: 20px; 
    background: var(--primary-color); cursor: pointer; border-radius: 50%;
    border: 2px solid var(--white-color); box-shadow: 0 2px 8px rgba(0,0,0,0.15); 
}

/* Preview Card */
.input-result-preview {
    padding: 12px; 
    border-radius: 12px; 
    margin-top: 10px; 
    text-align: center;
}
.highlight-yellow-bg { 
    background-color: rgba(0, 0, 0, 0.15); /* MODIFIÉ */
    
}
.preview-label {
    display: block; 
    font-size: 11px; 
    font-weight: 600; 
    color: rgba(255, 255, 255, 0.7); /* MODIFIÉ */
    margin-bottom: 5px;
}
.preview-value { 
    display: block; 
    font-size: clamp(20px, 4vw, 24px); 
    font-weight: 800; 
    color: var(--white-color); /* MODIFIÉ */
    line-height: 1.1; 
}
.preview-sub { 
    display: block; 
    font-size: 12px; 
    color: rgba(255, 255, 255, 0.7); /* MODIFIÉ */
    margin-top: 5px; 
} 

/* BOUTONS D'ACTION DU SIMULATEUR */
.sidebar-cta-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.1); 
    padding-top: 20px;
}
.btn-sim-primary, .btn-sim-secondary {
    flex: 1;
    text-decoration: none;
    padding: 10px 12px; 
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px; 
    text-align: center;
    transition: all 0.2s ease;
}
.btn-sim-primary {
    background-color: var(--primary-color);
    color: var(--dark-color);
    border: 1px solid var(--primary-color);
}
.btn-sim-primary:hover {
    background-color: #ffca2b;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.btn-sim-secondary {
    background-color: rgba(255,255,255,0.5); 
    color: #333; 
    border: 1px solid rgba(0,0,0,0.1); 
}
.btn-sim-secondary:hover {
    background-color: var(--white-color);
    color: var(--dark-color);
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ==========================================================
   3. CONTENU DIAPO 2 (Résultats)
========================================================== */
.simulator-content {
    width: 100%;
    max-width: 1400px; 
    padding: 00px; 
    display: flex; 
    flex-direction: column;
    flex-grow: 1; /* Pour remplir l'espace */
}

/* Cible la rangée principale ET la rangée interne (graphique + tesla) */
.dashboard-panel > .row,
.col-lg-8 > .row.g-4 {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

/* Garde le flex-grow uniquement sur la rangée principale */
.dashboard-panel > .row {
    flex-grow: 1; 
}

.dashboard-panel { display: none; width: 100%; }
.dashboard-panel.active { 
    display: block; 
    display: flex; 
    flex-direction: column;
    flex-grow: 1; /* Pour remplir l'espace */
}

/* ==========================================================
   4. STYLES DES CARTES (Tous supports)
========================================================== */
.dash-card {
    background: rgba(0, 0, 0, 0.15); 
    -webkit-backdrop-filter: blur(10px); 
    border-radius: 12px;
    
    box-shadow: 0 3px 10px rgba(0,0,0,0.05); 
    padding: 10px; 
    display: flex; flex-direction: column; 
    overflow: hidden;
    justify-content: flex-start;
    height: 100%; /* Pour remplir l'espace de la grille */
    backdrop-filter: blur(10px);
}

.card-title { 
    font-size: clamp(10px, 11px, 12px);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7); /* MODIFIÉ */
    margin: 0 0 15px 0;
    flex-shrink: 0;
}
.kpi-label { 
    font-size: clamp(10px, 1.8vw, 11px);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7); /* MODIFIÉ */
    text-transform: uppercase;
    margin-bottom: 5px;
}
.kpi-value { 
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
    color: var(--white-color); /* MODIFIÉ */
    line-height: 1.1;
}
.kpi-value.positive { 
    /* color: #198754; */ /* ANCIENNE VALEUR */
    color: var(--white-color); /* MODIFIÉ */
}
.kpi-delta.positive { 
    /* color: #198754; */ /* ANCIENNE VALEUR */
    color: var(--white-color); /* MODIFIÉ */
}
.kpi-calculation { 
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7); /* MODIFIÉ */
    margin-top: 5px; 
} 
.kpi-delta-wrapper {
    margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.1); 
}
.kpi-delta { display: block; font-size: 20px; font-weight: 700; line-height: 1.1; } 
.kpi-delta-label { 
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7); /* MODIFIÉ */
} 

.chart-container { 
    position: relative; 
    width: 100%; 
    flex-grow: 1; 
    min-height: 200px; 
}
.mini-chart-container { 
    display: none;
    width: 100%; 
    min-height: 80px
}
.merged-card { 
    justify-content: space-between; 
    padding: 10px; 
    
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); 
}
.merged-top { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.merged-card .kpi-value {
    color: var(--primary-color) ; 
    font-size: clamp(35px, 40vw, 70px); 
    font-weight: 800;
    margin-top: 5px;
    margin-bottom: 5px;
}
.merged-card .kpi-label.highlight { 
    color: rgba(255, 255, 255, 0.8); /* MODIFIÉ */
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 11px; 
    text-transform: uppercase;
}
.merged-card .kpi-calculation.highlight {
    color: rgba(255, 255, 255, 0.8); /* MODIFIÉ */
    font-size: 12px; 
    font-weight: 500;
}
.merged-divider { 
    height: 1px; 
    background-color: rgba(0,0,0,0.1); 
    margin: 20px 0; 
    width: 100%; 
}
.merged-bottom { flex-grow: 0; }
.merged-bottom .card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--white-color); /* MODIFIÉ */
}

/* ▼▼▼ NOUVELLE RÈGLE : Assure que le bouton "Devenir Chauffeur" est jaune vif ▼▼▼ */
.merged-bottom .btn-primary {
    background-color: var(--primary-color); 
    color: var(--dark-color);
    border: none;
}
/* ▲▲▲ FIN NOUVELLE RÈGLE ▲▲▲ */

.merged-bottom .btn {
    width: 100%;
    padding-top: 10px; 
    padding-bottom: 10px; 
    font-size: 13px; 
    font-weight: 600;
}

/* ==========================================================
   5. STYLES SPÉCIFIQUES DES CARTES (Fonds + Mini-graphique)
========================================================== */

#margin-card .kpi-value {
    font-size: clamp(20px, 2vw, 24px); 
    margin-bottom: 5px;
}
#margin-chart-container {
    position: relative;
    width: 100%;
    flex-grow: 1;      
    min-height: 80px;  
}

/* Cible la ROW interne de la colonne de gauche (graphique + tesla) */
.col-lg-8 > .row.g-4 {
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

/* Cible la colonne du graphique pour qu'elle s'étire */
.col-lg-8 .row.g-4 > .col-12.d-md-flex {
    flex-grow: 1;
}

/* ==========================================================
   6. SLIDE 3 (CTA FINAL)
========================================================== */
.final-cta {
    position: relative;
    padding: 100px 8%;
    text-align: center;
    background: var(--primary-color);
    height: 100svh; 
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.final-cta h2 { font-size: 34px; font-weight: 800; color: var(--dark-color); margin-bottom: 20px; } 
.final-cta p { font-size: 18px; color: #333; margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; } 
.final-cta .btn-secondary { background-color: var(--dark-color); color: var(--white-color); border-color: var(--dark-color); }
.final-cta .btn-secondary:hover { background-color: var(--white-color); color: var(--dark-color); }


/* ==========================================================
   7. RESPONSIVE MOBILE
========================================================== */

.btn-scroll-down-mobile {
    display: none; 
}


/* ==========================================================
   1. OVERRIDE NAVBAR (Pour l'effet Frosted)
========================================================== */


/* ▼▼▼ SECTION MODIFIÉE : DÉFILEMENT SIMPLE SANS SNAP ET ANTI-DOUBLE SCROLL ▼▼▼ */
/* === VUE TÉLÉPHONE (< 992px) === */
@media (max-width: 991.98px) {

    /* 1. Afficher la vidéo fixe */
    .simulator-fixed-video {
        display: block;
    }
    .simulator-background-video {
        display: none;
    }

    /* 2. Configurer le conteneur principal (PAS DE SCROLL ICI) */
    .simulator-desktop-container {
        position: relative;
        z-index: 1;
        background: transparent;
        
        /* RETIRE TOUT CONTRÔLE DE SCROLL ET SNAP (Solution Anti-double-scroll) */
        overflow-y: visible !important; 
        scroll-snap-type: none !important; 

        display: block;
        padding: 0;
        min-height: 0;
        overflow: hidden;
    }
    
    /* 3. Configuration de la slide de PARAMÈTRES (une hauteur d'écran fixe) */
    .simulator-slide {
        height: 100svh; 
        min-height: 100svh;
        box-sizing: border-box;
        scroll-snap-align: none !important; /* Désactiver tout snap */
        padding: 30px 5% 30px 5%; 
        overflow-y: visible !important; /* Pas de scroll interne */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: transparent;
    }


    /* 4. Configuration de la slide de RÉSULTATS (HAUTEUR AUTO pour contenir toutes les cartes) */
    #simulator-results-slide {
        height: auto !important; /* ⭐ SOLUTION : Laisser la hauteur s'étendre aux cartes ⭐ */
        min-height: 100svh;
        
        overflow-y: visible !important; /* Pas de scroll interne */
        scroll-snap-type: none !important; /* Désactiver tout snap */
        
        padding: 50px 5% 40px 5%; 
        justify-content: flex-start;
        background: transparent;
    }
    
    /* 5. S'assurer que les cartes ont une marge pour le défilement */
    #simulator-results-slide .col-12,
    #simulator-results-slide .col-md-6,
    #simulator-results-slide .col-lg-4, 
    #simulator-results-slide .col-lg-8,
    #simulator-results-slide .col-lg-8 > .row.g-4 > .col-12 {
        height: auto !important;
        
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }

    /* Le reste des styles mobiles (tailles, couleurs, etc.) est conservé */

    /* Styles pour le contenu à l'intérieur du scroll (inchangés mais inclus pour la complétude) */
    .simulator-content { padding: 0; }
    .simulator-sidebar { padding: 15px; }
    .sidebar-hero-title { font-size: clamp(16px, 4.5vw, 17px); }
    .sidebar-hero-subtitle { font-size: 11px; }
    .toggle-option { font-size: 12px; }
    .sidebar-title-params { font-size: 13px; }
    .input-panel p { font-size: 12px; }
    
    /* Correction de la taille de la valeur pour mobile */
    .big-value-display { font-size: clamp(14px, 6vw, 16px); }

    .big-slider-wrapper label { font-size: 12px; }
    .big-slider::-webkit-slider-thumb { width: 15px; height: 15px; }
    .input-result-preview { padding: 10px; }
    .preview-label { font-size: 10px; }
    .preview-value { font-size: clamp(18px, 6vw, 22px); }
    .sidebar-cta-buttons { margin-top: 15px; padding-top: 15px; flex-direction: column; }
    .btn-sim-primary, .btn-sim-secondary { font-size: 13px; }
    .dash-card { padding: 10px; }
    .card-title { font-size: 10px; }
    .kpi-label { font-size: 10px; }
    .kpi-value { font-size: 20px; }
    .kpi-delta { font-size: 18px; }
    .kpi-delta-label { font-size: 10px; }
    .merged-card { padding: 10px; }
    .merged-card .kpi-value { font-size: 24px; }
    .merged-card .kpi-label.highlight { font-size: 11px; }
    .merged-card .kpi-calculation.highlight { font-size: 12px; }
    .merged-divider { margin: 15px 0; }
    .merged-bottom .card-title { font-size: 14px; }
    .merged-bottom .btn { font-size: 14px; }
    .chart-container { height: 180px; min-height: 180px; flex-grow: 0; }
    
    /* Le conteneur de la grille (la row) doit être en colonne */
    #simulator-results-slide .dashboard-panel > .row {
        flex-direction: column; 
    }
}
/* ▲▲▲ FIN DU REMPLACEMENT ▲▲▲ */


/* ==========================================================
   9. CORRECTIONS DE LAYOUT (Taille & Alignement)
============
============================================== */
#main-chart,
#savings-chart-card,
.merged-card {
    height: 100%;
}

/* ==========================================================
   10. STYLES POUR LE PNL COMPARATIF (NOUVEAU)
========================================================== */

.pnl-table {
    /* Style de base */
    color: var(--white-color); /* Texte en blanc */
    font-size: 10px;
    border-collapse: collapse; /* Enlève les espaces entre les cellules */
    
}

.pnl-table thead th,
.pnl-table tbody td,
.pnl-table tfoot td {
    padding: 5px 0; /* Padding horizontal retiré pour alignement, mais on garde de l'air vertical */
    text-align: left;
    border: none; /* Supprime toutes les bordures par défaut */
}

/* En-tête */
.pnl-table thead th {
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Bordure horizontale bas */
}

.pnl-table thead th:first-child {
    padding-left: 0;
}
.pnl-table thead th:not(:first-child) {
    text-align: right;
    min-width: 15%; /* Allouer une largeur égale aux deux colonnes de valeurs */
    min-width: 20%;
    vertical-align: top;
}


/* Corps du tableau */
.pnl-table tbody td:first-child {
    font-weight: 500;
}
.pnl-table tbody td:not(:first-child) {
    text-align: right;
    font-weight: 600;
}

/* Bordure horizontale (séparateur) */
.pnl-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Bordure horizontale très fine et transparente */
}

/* Retirer la bordure de la dernière ligne du corps si elle précède le footer */
.pnl-table tbody tr:last-child {
    border-bottom: none;
}

/* Ligne des Charges (pour la couleur, bien que le JS s'en occupe en partie) */
.pnl-line td {
    color: var(--white-color);
}
.pnl-line.pnl-commission td,
.pnl-line.pnl-charge td,
.pnl-line.pnl-expense-group td {
    color: rgba(255, 255, 255, 0.7); /* Grise les lignes de charges */
}


#pnl-comm-k{
    color: rgb(255, 238, 0, 0.99); /* Grise les lignes de charges */
    font-weight: 500;
}

#pnl-comm-o{
     color: rgb(255, 238, 0, 0.99); /* Grise les lignes de charges */
     font-weight: 500;
}



/* Footer (Ligne Résultat Net Final) */
.pnl-table tfoot td {
    padding-top: 5px;
    font-weight: 700;
    font-size: 12px;
    border-top: 2px solid rgba(255, 255, 255, 0.5); /* Bordure de séparation plus épaisse */
}

.pnl-table tfoot tr td:not(:first-child) {
    text-align: right;
}