/* ---------------------------------------------------------
   VARIABLES GLOBALES (thème)
--------------------------------------------------------- */
:root {
    --yellow: #F0C300;
    --yellow-dark: #F5A900;
    --bg-light: #FFF9E3;
    --text-dark: #222;
    --blue-ve: #1E90FF;

    --radius: 18px;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --shadow-soft: 0 2px 10px rgba(0,0,0,0.05);
    --shadow-btn: 0 3px 10px rgba(0,0,0,0.12);

    --max-width: 1000px;
    --font-main: 'Montserrat', Arial, sans-serif;
}

/* ---------------------------------------------------------
   RESET & BASE
--------------------------------------------------------- */
* {
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   Nouveau FOND : Hommage au Drapeau de La Réunion
   Bleu Roi -> Jaune Solaire -> Rouge Magma
--------------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Montserrat', sans-serif;
    color: #1e293b;
    position: relative;
    overflow-x: hidden;
    background-color: #0047AB; 

    /* 1. POSITIONS EXACTES DES LUEURS (On les met en transparent sur le body pour laisser le before animer) */
    background-image: conic-gradient(
        from 180deg at 50% 70%, 

        /* Faisceau 1 - INVERSÉ */
        rgba(255, 215, 0, 0) 100deg, rgba(255, 215, 0, 0) 100deg, 
        
        /* Faisceau 2 - INVERSÉ */
        rgba(255, 215, 0, 0) 130deg, rgba(255, 215, 0, 0) 130deg, 
        
        /* Faisceau 3 - VERTICAL */
        rgba(255, 215, 0, 0) 180deg, rgba(255, 215, 0, 0) 180deg, rgba(255, 215, 0, 0) 220deg, 
        
        /* Faisceau 4 - DROIT */
        rgba(255, 215, 0, 0) 230deg, rgba(255, 215, 0, 0) 230deg, 
        
        /* Faisceau 5 - DROIT */
        rgba(255, 215, 0, 0) 260deg, rgba(255, 215, 0, 0) 260deg
    );
    background-attachment: fixed;
}

/* 2. L'ANIMATION DE SCINTILLEMENT (Du vide vers l'Or) */
body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -2;
    
    /* ON REPREND VOS POSITIONS EXACTES ICI POUR L'ANIMATION */
    background-image: conic-gradient(
        from 180deg at 50% 70%, 

        /* Faisceau 1 (Horizontal Gauche) */
        rgba(255, 215, 0, 0) 100deg, rgba(255, 215, 0, 0.7) 100deg, 
        
        /* Faisceau 2 (Oblique Gauche) */
        rgba(255, 215, 0, 0) 130deg, rgba(255, 215, 0, 0.7) 130deg, 
        
        /* Faisceau 3 (Vertical Centre) */
        rgba(255, 215, 0, 0) 180deg, rgba(255, 215, 0, 0.7) 180deg, rgba(255, 215, 0, 0) 220deg, 
        
        /* Faisceau 4 (Oblique Droit) */
        rgba(255, 215, 0, 0.7) 230deg, rgba(255, 215, 0, 0) 230deg, 
        
        /* Faisceau 5 (Horizontal Droit) */
        rgba(255, 215, 0, 0.7) 260deg, rgba(255, 215, 0, 0) 260deg
    );
    background-attachment: fixed;
    
    /* Animation de 0% (transparent) à 100% (doré) */
    animation: solarPulse 5s ease-in-out infinite;
    filter: blur(1px);
    pointer-events: none;
}

@keyframes solarPulse {
    0%, 100% { opacity: 0; }  /* Totalement invisible */
    50% { opacity: 1; }      /* Éclat maximal */
}

/* 3. LE VOILE DYNAMIQUE (Inchangé) */
body::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 70%,
        #FF0000 60%,                  /* ROUGE MAGMA */
        #F5F5DC 80%,                  /* BEIGE SABLE */
        #FFFFFF 100%                  /* BLANC FINAL */
    );
    background-attachment: scroll; 
}

/* 4. PIED DE PAGE */
.reveal-footer, footer {
    color: #1e293b !important; 
    padding: 60px 0 30px 0;
    text-align: center;
    position: relative;
    z-index: 10;
}
/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */
header {
    /* Un dégradé qui part du Gris Anthracite vers le Bleu Électrique de ton logo */
    background: linear-gradient(90deg, #1a1a1a 70%, #0070ff 100%);
    padding: 10px 20px; /* Un peu plus d'espace pour laisser respirer le logo */
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Ombre plus douce et profonde */
    border-bottom: 2px solid #0070ff; /* Rappel subtil de ta couleur d'accent */
}
.header-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

#logo {
    width: 110px;
    border-radius: 8px;
}

.header-texts h1 {
    color: #FFF;
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
}

.header-texts h2 {
    color: var(--yellow);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

/* Style du header mis à jour */
header {
    /* Dégradé du Noir Carbone vers un Rouge Grenat très sombre */
    background: linear-gradient(90deg, #121212 60%, #450a0a 100%);
    padding: 8px 15px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.5s ease;
    cursor: pointer;
    position: relative;
    z-index: 1000;
    border-bottom: 1px solid #7f1d1d; /* Une fine ligne rouge sombre pour souligner */
}

/* Au survol, on révèle un peu plus la couleur "Magma" */
header:hover {
    background: linear-gradient(90deg, #1a1a1a 50%, #7f1d1d 100%);
    filter: brightness(1.2);
}

/* On s'assure que le contenu ne bloque pas le clic du parent */
.header-container, .header-texts, #logo {
    pointer-events: none; 
}


/* ---------------------------------------------------------
   TITRES
--------------------------------------------------------- */
h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #000;
}

h3 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 10px;
}

/* ---------------------------------------------------------
   FORMULAIRE
--------------------------------------------------------- */
form {
    margin: 20px auto;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 25px;
    padding: 25px 35px;
    box-shadow: var(--shadow);
    width: 70%;
    max-width: var(--max-width);
    border: 1px solid rgba(0, 35, 149, 0.1);
}

label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--blue-energi);
    margin-bottom: 5px;
}

input, select {
    width: 100%;
    padding: 7px; 10px;
    margin: 8px 0 14px 0;
    border: 1px solid var(--yellow);
    border-radius: var(--radius);
    font-size: 1rem;
    background: #f9f9f9;
    transition: 0.3s;
}

input:focus, select:focus {
    border-color: #000;
    background: #fffbe6;
    box-shadow: 0 0 0 2px #f0c30055;
}

.form-info {
    /* Fond bleu électrique très clair et translucide */
    background: rgba(163, 218, 255, 0.15); 
    
    /* Bordure gauche en bleu électrique vif pour l'aspect "énergie" */
    border-left: 4px solid #00d4ff; 
    
    /* On harmonise les arrondis avec ton simulateur (20px ou 12px selon ton choix) */
    border-radius: 12px;
    
    padding: 5px 30px;
    margin-bottom: 18px;
    font-size: 0.7rem;
    
    /* Couleur de texte sombre pour la lisibilité sur fond clair */
    color: #1e293b;
    
    /* Effet de lueur subtile */
    box-shadow: 0 2px 10px rgba(0, 212, 255, 0.1);
    
    /* Animation fluide au survol */
    transition: all 0.3s ease;
}

.form-info:hover {
    background: rgba(163, 218, 255, 0.25);
    border-left: 4px solid #F0C300; /* Rappel du Jaune EnergiX au survol */
    transform: translateX(3px);
}

/* Style spécifique pour l'accordéon Infos Bleu Électrique */
.EnergiX-info-pad summary::-webkit-details-marker {
    display: none;
}

.EnergiX-info-pad[open] summary {
    border-radius: 30px 30px 0 0 !important; /* On "aplatit" le bas de la pilule à l'ouverture */
    background: #00d4ff !important; /* Flash bleu électrique à l'ouverture */
}

.EnergiX-info-pad[open] summary span {
    color: #ffffff !important; /* Texte passe en blanc sur le bleu vif */
}

.EnergiX-info-pad[open] .info-arrow {
    transform: rotate(180deg);
    color: #ffffff !important;
}

.info-content {
    animation: slideIn 0.3s ease-out;
}

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

/* Désactivation */
.form-group.grayed,
.form-group.grayed label {
    opacity: 0.6;
}

input[disabled], select[disabled] {
    background: #f3f3f3;
    color: #777;
    cursor: not-allowed;
}

/* ---------------------------------------------------------
   LAYOUT DES CHAMPS
--------------------------------------------------------- */
.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-group.half {
    flex: 1;
}

.form-row-center {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.form-row-center .form-group {
    flex: 1 1 48%;
    max-width: 520px;
    min-width: 220px;
}

/* ---------------------------------------------------------
   SYSTÈME DE BOUTONS UNIFIÉ (Glassmorphism & Haute Visibilité)
--------------------------------------------------------- */

/* On cible absolument tous les boutons du site */
.btn, 
.button-group a, 
.back-button, 
button[type="submit"], 
.btn-submit {
    background: rgba(240, 170, 0, 0.2) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #000 !important; /* Point-virgule corrigé ici */
    font-weight: 600; 
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    border: 2px solid #000 !important;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    margin: 8px;
}


/* --- ÉTAT SURVOL (HOVER) --- */
.btn:hover, 
.button-group a:hover, 
.back-button:hover, 
button[type="submit"]:hover {
    /* Le bouton devient blanc plein et lumineux */
    background: #FFFFFF !important;
    color: #F0C300 !important; /* Le texte prend la couleur jaune identitaire */
    
    transform: translateY(-4px); /* Petit saut vers le haut */
    box-shadow: 0 8px 25px rgba(240, 195, 0, 0.5);
    
    /* On enlève l'ombre du texte car le contraste est parfait sur fond blanc */
    text-shadow: none;
    border-color: #F0C300 !important;
}

/* --- ÉTAT CLIC (ACTIVE) --- */
.btn:active, 
button[type="submit"]:active {
    transform: scale(0.96); /* Effet d'enfoncement tactile */
}



/* ---------------------------------------------------------
   SWITCH ANDROID (BORNE VE)
--------------------------------------------------------- */
.switch-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrage dans le formulaire */
    gap: 12px;
    margin: 10px 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    flex-shrink: 0;
	
}

.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: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider {
    background-color: #2196F3; /* Bleu Android */
}

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

.switch-label {
    font-size: 0.90rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    user-select: none;
}

/* Animation pour l'apparition des options VE */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

#ve_options {
    animation: fadeIn 0.4s ease-out;
}

/* Animation de la flèche */
details[open] summary .arrow-icon {
    transform: rotate(180deg);
}

/* Animation d'apparition du contenu */
details[open] > div {
    animation: foldDown 0.4s ease-out;
}

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

/* Suppression de la flèche par défaut sur Safari/Chrome */
summary::-webkit-details-marker {
    display: none;
}

/* ---------------------------------------------------------
   BLOCS & CARTES
--------------------------------------------------------- */
/* 1. On réduit le conteneur global et on le centre */
.solar-details {
    background: #fff;
    border-radius: 15px;
    margin: 0 auto 15px auto; /* Ajout de auto pour centrer */
    width: 100%;               /* Réduction de la largeur globale */
    max-width: 1100px;        /* Sécurité pour les grands écrans */
    border: 1px solid rgba(0,0,0,0.1);
    overflow: hidden;
}

/* 2. Le summary prend maintenant toute la largeur de son parent (les 90%) */
.solar-details summary {
    padding: 15px;
    width: 100%;              /* Changé de 90% à 100% */
    box-sizing: border-box;   /* Important pour le calcul du padding */
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    background: #fdfdfd;      /* Ou votre variable --bg-light */
    border-bottom: 2px solid #F0C300;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 3. On s'assure que le contenu du graphique est centré */
.plot-content {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

/* Cache le message d'erreur généré par le fallback */
.solar-details .chart-container p:only-child {
    display: none;
}

/* Flèche d'accordéon */
.solar-details summary::after {
    content: "▼";
    font-size: 0.8rem;
    transition: transform 0.3s;
    margin-right: 10px;
}

.solar-details[open] summary::after {
    transform: rotate(180deg);
}

.card, .result {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin: 20px auto;
    max-width: 750px;
    border-left: 4px solid var(--yellow);
    box-shadow: var(--shadow-soft);
}

/* ---------------------------------------------------------
   TABLEAUX
--------------------------------------------------------- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

table th, table td {
    padding: 10px;
    border: 1px solid #ccc;
}

table thead {
    background: #f2f2f2;
}

table tbody tr:nth-child(even) {
    background: #fafafa;
}

table tbody tr:hover {
    background: #fff3c4;
    transition: 0.2s;
}

/* ---------------------------------------------------------
   GRAPHES
--------------------------------------------------------- */
.knn-plot, .plot-container {
    width: 100%;
    max-width: 650px;
    margin: 20px auto;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--yellow);
}

/* ---------------------------------------------------------
   ALERTES
--------------------------------------------------------- */
.alert {
    padding: 12px;
    border-radius: 10px;
    margin: 10px 0;
    font-weight: 600;
}

.alert-warning {
    background: #ffe8d6;
    border-left: 4px solid #ff8800;
    color: #a33;
}

.alert-success {
    background: #e6ffe6;
    border-left: 4px solid #00aa00;
    color: #060;
}

/* ---------------------------------------------------------
   TÉLÉCOMMANDE DE RAPPORT (Languette Latérale)
--------------------------------------------------------- */

/* --- STRUCTURE HAUTE PRÉCISION --- */
.report-remote-container {
    position: fixed;
    left: 0;
    top: 25%;
    z-index: 99999;
    height: auto;
    width: 288px; /* Menu + Languette */
    /* Empêche la zone invisible de capter le survol/clic */
    pointer-events: none; 
}

.report-remote-tab {
    display: flex;
    align-items: flex-start;
    transform: translateX(-250px); 
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    /* Réactive le survol uniquement sur les éléments visibles */
    pointer-events: auto;
}

/* --- OUVERTURE DU MENU (Uniquement via l'étiquette) --- */
/* On ne déclenche plus sur le container, mais sur l'étiquette elle-même */
.remote-trigger:hover + .remote-content, 
.remote-content:hover {
    transform: translateX(0);
}

/* Pour que le menu reste ouvert quand on est dedans, on ajuste le transform sur le parent */


/* La règle magique : si l'étiquette est survolée, on décale tout le bloc vers la droite */
.report-remote-tab:hover {
    transform: translateX(0);
}


.report-remote-tab {
    display: flex;
    align-items: flex-start;
    /* On utilise la largeur exacte du menu pour cacher */
    transform: translateX(-250px); 
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Languette noire avec accents Bleus (Repos) */
.remote-trigger {
    position: absolute;
    /* On le fixe précisément au bord droit du contenu caché */
    left: 250px; 
    top: 0;
    background: #121212; 
    color: #0070ff; /* Bleu électrique */
    width: 38px;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    box-shadow: 4px 0 15px rgba(0,0,0,0.3);
    border: 1px solid #0070ff;
    border-left: none;
    transition: all 0.3s ease;
}

/* --- OUVERTURE DU MENU --- */


.report-remote-container:hover .report-remote-tab {
    transform: translateX(0);
}

/* --- EFFET MAGMA AU SURVOL --- */
.report-remote-container:hover .remote-trigger {
    color: #ff4d00;      /* Orange lave */
    border-color: #ff0000; /* Rouge magma */
    box-shadow: 8px 0 20px rgba(255, 0, 0, 0.5);
}

.arrow-icon { 
    font-size: 1.2rem; 
    transition: transform 0.4s; 
}

.report-remote-container:hover .arrow-icon {
    transform: rotate(180deg);
}



.trigger-label { 
    /* Force l'écriture verticale de haut en bas */
    writing-mode: vertical-rl; 
    /* Garde les lettres dans le bon sens (pas inclinées) */
    text-orientation: mixed; 
    
    font-size: 0.75rem; 
    font-weight: bold; 
    margin-top: 10px;
    letter-spacing: 2px;
    
    /* Optionnel : assure que le texte ne revient pas à la ligne */
    white-space: nowrap;
    display: block;
}

/* Assure-toi aussi que le bouton est assez large pour le texte */
.remote-trigger {
    width: 35px; /* Largeur actuelle, devrait suffire pour "MENU" */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- CORPS DU MENU (Blanc & Bleu) --- */

.remote-content {
    width: 250px;
    background: #ffffff;
    border: 1px solid #0047AB;
    border-left: none;
    border-radius: 0 15px 15px 0;
    box-shadow: 10px 0 30px rgba(0,0,0,0.1);
    padding: 20px 0;
    
    /* --- ACTIVATION DU SCROLL --- */
    max-height: 75vh;    /* Limite la hauteur à 75% de l'écran */
    overflow-y: auto;    /* Active le scroll vertical si nécessaire */
    overflow-x: hidden;  /* Empêche le scroll horizontal */
}

.remote-header {
    padding: 0 20px 10px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #0070ff; /* Bleu EnergiX */
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 10px;
}

.remote-nav a {
    display: block;
    padding: 8px 20px;
    text-decoration: none;
    color: #333;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Survol des liens : rappel Magma subtil */
.remote-nav a:hover {
    background: #fff5f5; 
    color: #ff0000;
    padding-left: 28px;
}

.remote-nav .sub-link { color: #777; padding-left: 35px; }

.remote-nav .action-link { 
    color: #0070ff;
    font-weight: bold;
    border-top: 1px dashed #eee;
    margin-top: 10px;
}

/* --- LIENS DU MENU (DANS LE CORPS BLANC) --- */
.remote-nav a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 8px; /* Arrondi léger pour les liens */
    margin: 2px 10px;
}

/* --- BOUTON TABLEAU DE BORD (DANS LE MENU) --- */
/* On cible le lien avec le style spécifique Jaune/Noir mais sur fond Blanc */
.remote-nav a.action-link[style*="background: #F0C300"] {
    background: #FFFFFF !important; /* Fond Blanc comme demandé */
    color: #000000 !important;      /* Texte Noir pour le contraste */
    border: 2px solid #F0C300 !important; /* Bordure Jaune pour garder l'identité */
    font-weight: 800;
    text-align: center;
    margin-top: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Effet au survol du bouton Tableau de Bord dans le menu */
.remote-nav a.action-link[style*="background: #F0C300"]:hover {
    background: #F0C300 !important; /* Devient Jaune au survol */
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(240, 195, 0, 0.3);
}

/* Survol des autres liens standards */
.remote-nav a:not(.action-link):hover {
    background: #f0f7ff; 
    color: #ff4d00; /* Rappel Magma */
    padding-left: 25px;
}

.remote-divider {
    padding: 15px 20px 5px;
    font-size: 0.65rem;
    font-weight: bold;
    color: #aaa;
    text-transform: uppercase;
}

/* Barre de défilement Bleue */
.remote-content::-webkit-scrollbar { width: 5px; }
.remote-content::-webkit-scrollbar-thumb {
    background-color: #0070ff;
    border-radius: 10px;
}

/* Animation de pulsation Bleue */ 
@keyframes pulse-tab-blue {
    0% { box-shadow: 4px 0 10px rgba(0, 112, 255, 0.2); }
    50% { box-shadow: 6px 0 20px rgba(0, 112, 255, 0.5); }
    100% { box-shadow: 4px 0 10px rgba(0, 112, 255, 0.2); }
}

/* Languette avec effet de surbrillance (Glow Jaune) */
.remote-trigger {
    position: absolute;
    left: 250px; 
    top: 0;
    background: #121212; /* Fond sombre pour faire ressortir la lumière */
    color: #F0C300;      /* Texte Jaune */
    width: 38px;
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    
    /* --- EFFET DE SURBRILLANCE JAUNE --- */
    border: 2px solid #F0C300;
    border-left: none;
    box-shadow: 0 0 15px rgba(240, 195, 0, 0.6),  /* Halo interne */
                4px 0 25px rgba(240, 195, 0, 0.4); /* Halo large */
    
    transition: all 0.3s ease;
    animation: pulse-glow-yellow 2s infinite; /* Animation de pulsation de la lumière */
}

/* --- ANIMATION DE LA LUMIÈRE (Pulsation) --- */
@keyframes pulse-glow-yellow {
    0% { 
        box-shadow: 0 0 10px rgba(240, 195, 0, 0.5), 4px 0 15px rgba(240, 195, 0, 0.3);
    }
    50% { 
        box-shadow: 0 0 20px rgba(240, 195, 0, 0.9), 6px 0 30px rgba(240, 195, 0, 0.6);
        filter: brightness(1.2);
    }
    100% { 
        box-shadow: 0 0 10px rgba(240, 195, 0, 0.5), 4px 0 15px rgba(240, 195, 0, 0.3);
    }
}

/* --- CHANGEMENT AU SURVOL (MAGMA LUMINEUX) --- */
.report-remote-container:hover .remote-trigger {
    color: #ffffff;
    background: #ff4d00;
    border-color: #ff0000;
    /* La surbrillance devient rouge magma au survol */
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 6px 0 35px rgba(255, 0, 0, 0.5);
    animation: none; /* On stoppe la pulsation jaune au survol */
}

/* --- SIMULATEUR ENERGIX (Dimensions d'origine + Légère Transparence) --- */

.EnergiX-config-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 15px auto 5px auto;
    max-width: 500px; /* Retour aux dimensions exactes d'avant */
    
    /* TRANSPARENCE MINIMUM (0.95 pour laisser passer un soupçon de bleu/doré) */
    background: rgba(255, 249, 227, 0.95); 
    
    border-radius: 40px;
    padding: 14px 20px 12px 20px;
    border: 2px solid #F0C300; /* Bordure dorée EnergiX */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 5;
    position: relative;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    color: #1e293b;
    margin-bottom: 5px;
    font-weight: 600;
    text-align: center;
}

.EnergiX-config-form select {
    width: 100%;
    padding: 7px 12px;
    border-radius: 20px;
    border: 1px solid #ccc;
    font-size: 1rem;
    background: #fff;
    cursor: pointer;
    text-align: center;
}

/* Style pour l'accordéon de résultat */
.result-accordion summary::-webkit-details-marker {
    display: none; /* Cache la flèche par défaut sur Chrome/Safari */
}

.result-accordion[open] summary {
    border-radius: 20px 20px 0 0 !important; /* Arrondi seulement en haut quand ouvert */
    border-bottom: 1px dashed #ff4d00 !important;
}

.result-accordion[open] .acc-arrow {
    display: inline-block;
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.result-accordion .acc-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

/* SECTION VÉHICULE ÉLECTRIQUE */
.ve-section {
    width: 100%;
    background: rgba(255, 255, 255, 0.5); /* Plus transparent à l'intérieur */
    padding: 10px;
    border-radius: 20px;
    border: 1px dashed #F0C300;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ve-dropdown {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

/* BOUTON DE MISE À JOUR */
.btn-update {
    width: 100%;
    background: #FFFFFF !important; 
    color: #000000 !important; 
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 30px; /* Plus arrondi pour matcher le form */
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 5px;
}

.btn-update:hover {
    background: #F0C300 !important;
    color: #000 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(240, 195, 0, 0.3);
}

/* État initial : invisible et légèrement décalé */
    .reveal-footer {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
        cursor: pointer; /* Indique qu'on peut le survoler */
    }

    /* État quand le scroll l'active OU au survol manuel */
    .reveal-footer.active, 
    .reveal-footer:hover {
        opacity: 1 !important;
        transform: translateY(0) !important;
        color: #002395 !important; /* Devient Bleu Roi au survol */
    }
	
/* Style du badge compteur de visites - Version PV */
.visitor-counter {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', sans-serif;
}

#stats-badge-pv {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05); /* Effet translucide */
    border: 1px solid rgba(0, 0, 0, 0.1); /* Bordure légère */
    border-radius: 20px;
    font-size: 0.8rem;
    color: #1e293b; /* Couleur sombre pro */
    font-weight: 500;
}

/* Le point lumineux vert */
.status-dot {
    height: 8px;
    width: 8px;
    background-color: #10b981;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px #10b981;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Responsive */
@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   RESPONSIVE DESIGN
--------------------------------------------------------- */

/* Smartphones */
@media (max-width: 600px) {

    #logo {
        width: 80px;
    }

    .header-texts h1 {
        font-size: 1.3rem;
        margin-left: 0;
        text-align: left;
    }

    .header-texts h2 {
        font-size: 1rem;
        margin-left: 0;
        text-align: left;
    }

    form {
        width: 92%;
        padding: 15px;
    }

    .form-row {
        flex-direction: column;
    }

    .form-row-center {
        flex-direction: column;
    }

    .card, .result {
        padding: 15px;
    }
}

/* Tablettes */
@media (max-width: 900px) {
    form {
        width: 85%;
    }
}

/* Correction des marges Header */
@media (max-width: 768px) {
    .header-texts h1, .header-texts h2 {
        margin-left: 0 !important; /* Annule le décalage de 290px */
        font-size: 1.2rem;
        text-align: center;
    }
    #logo {
        display: block;
        margin: 0 auto;
        max-width: 150px;
    }
    .form-row {
        flex-direction: column; /* Empile les champs au lieu de les mettre côte à côte */
    }
    .half {
        width: 100% !important;
    }
}

/* Rendre les tableaux scrollables sur mobile */
.consumption-table {
    overflow-x: auto;
    display: block;
}

/* --- CORRECTIF MOBILE GLOBAL --- */
@media screen and (max-width: 900px) {
    /* Suppression des marges forcées à gauche */
    .header-texts h1, header h1, 
    .header-texts h2, header h2 {
        margin: 20px auto !important;
        padding: 0 15px;
        font-size: 1.3rem; /* Plus lisible sur petit écran */
    }

    /* Le PAD principal doit prendre toute la largeur */
    .main-pad {
        padding: 15px;
        margin: 10px;
        border-radius: 10px;
    }

    /* Grille d'infos : passage en 2 colonnes au lieu de 3 */
    .info-card-container {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Boutons de navigation : empilage vertical pour éviter le débordement */
    .button-group a {
        display: block;
        margin: 10px 0;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Conteneur principal pour le centrage */
.app-installer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 40px 0;
}

/* --- LE PAD D'INSTALLATION ACCORDÉON (SURVOL) --- */
.app-download-section {
    /* Centrage horizontal du bloc */
    margin: 40px auto;
    width: 95%;
    max-width: 650px;
    
    /* Design Glassmorphism */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    
    /* Préparation de l'accordéon */
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* L'en-tête (Toujours visible) */
.accordion-header {
    padding: 20px 30px;
    display: flex;
    justify-content: center; /* Centre le titre */
    align-items: center;
    cursor: pointer;
    position: relative;
}

.header-content {
    display: flex;
    align-items: center;      /* Aligne les centres verticaux */
    justify-content: center;
    gap: 15px;                /* Un peu plus d'espace pour laisser respirer */
}

.header-icon {
	color: #002395;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    /* La petite touche magique pour l'aligner parfaitement au texte */
    transform: translateY(1.5px); 
    margin-right: 12px;
}

.download-title {
    color: #002395;
    font-weight: 800;
    margin: 0;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}


.download-title i {
    font-size: 1.2rem;
    
    /* AJOUTS POUR L'ALIGNEMENT PARFAIT */
    display: inline-flex;
    align-items: center;
    line-height: 1;
    /* Petit décalage vers le bas pour compenser l'alignement visuel des majuscules */
    transform: translateY(1.5px); 
}

/* Flèche à droite */
.accordion-arrow {
    position: absolute;
    right: 30px;
    font-size: 0.8rem;
    color: #002395;
    transition: transform 0.4s ease;
}

/* --- CONTENU CACHÉ (Boutons) --- */
.accordion-content {
    max-height: 0; /* Fermé par défaut */
    opacity: 0;
    padding: 0 30px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- EFFET AU SURVOL (DÉPLIAGE) --- */
.app-download-section:hover {
    border-color: #00d4ff;
    box-shadow: 0 20px 45px rgba(0, 35, 149, 0.2);
}

.app-download-section:hover .accordion-content {
    max-height: 500px; /* Dépliage */
    opacity: 1;
    padding-bottom: 30px;
}

.app-download-section:hover .accordion-arrow {
    transform: rotate(180deg);
}

/* --- GRILLE DES BOUTONS --- */
.download-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.btn-download {
    display: flex;
    align-items: center;
    background: #1e293b;
    color: white;
    padding: 10px 18px;
    border-radius: 14px;
    text-decoration: none;
    width: 180px;
    height: 60px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
}

.btn-download:hover {
    transform: scale(1.05);
    background: #0f172a;
    border-color: #00d4ff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

.btn-download i {
    font-size: 1.6rem;
    margin-right: 12px;
    min-width: 25px;
    text-align: center;
}

.btn-download span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.btn-download small { font-size: 0.65rem; text-transform: uppercase; opacity: 0.7; }
.btn-download strong { font-size: 1rem; }

.pwa-hint {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 20px;
    font-weight: 500;
    font-style: italic;
}

/* Couleurs des icônes pour plus de réalisme */
#btn-android i { color: #3DDC84; }
#btn-ios i { color: #ffffff; }
#btn-windows i { color: #0078d7; }
#btn-mac i { color: #a2aaad; }
#btn-linux i { color: #fcc624; }

/* Responsive : Boutons plus compacts sur mobile */
@media (max-width: 480px) {
    .btn-download {
        width: 100%; /* Prend toute la largeur sur petit téléphone */
        justify-content: center;
    }
}