/* css/styles.css - Adix Home Styles v3.0 - CLEANED */

/* ===== VARIABLES CSS ===== */
:root {
   --primary-color: #358288;
   --secondary-color: #FCDB03;
   --background-dark: #2a3f42;
   --background-light: #f8f9fa;
   --card-background: #4a6569;
   --text-primary: #ffffff;
   --text-secondary: #b8c5c7;
   --success-color: #28a745;
   --warning-color: #ffc107;
   --danger-color: #dc3545;
}

/* ===== RESET & BASE ===== */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background: linear-gradient(135deg, var(--background-dark) 0%, var(--primary-color) 100%);
   min-height: 100vh;
   color: var(--text-primary);
}

/* ===== PAGE DE CONNEXION ===== */
.login-container {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
}

.login-card {
   background: rgba(74, 101, 105, 0.95);
   backdrop-filter: blur(10px);
   border-radius: 20px;
   padding: 40px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
   width: 100%;
   max-width: 400px;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-container {
   text-align: center;
   margin-bottom: 30px;
}

.logo {
   width: 60px;
   height: 60px;
   background: var(--secondary-color);
   border-radius: 12px;
   margin: 0 auto 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   font-weight: bold;
   color: var(--primary-color);
}

.welcome-text {
   font-size: 28px;
   font-weight: 600;
   color: var(--text-primary);
   margin-bottom: 8px;
   text-align: center;
}

.welcome-subtitle {
   color: var(--text-secondary);
   text-align: center;
   margin-bottom: 30px;
}

/* ===== FORMULAIRES ===== */
.form-group {
   margin-bottom: 20px;
}

.form-label {
   display: block;
   margin-bottom: 8px;
   color: var(--text-secondary);
   font-size: 14px;
}

.form-input {
   width: 100%;
   padding: 15px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 10px;
   color: var(--text-primary);
   font-size: 16px;
   transition: all 0.3s ease;
}

.form-input:focus {
   outline: none;
   border-color: var(--secondary-color);
   box-shadow: 0 0 0 2px rgba(252, 219, 3, 0.2);
}

.form-input::placeholder {
   color: var(--text-secondary);
}

/* ===== BOUTONS ===== */
.btn-primary {
   width: 100%;
   padding: 15px;
   background: var(--secondary-color);
   color: var(--primary-color);
   border: none;
   border-radius: 10px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
}

.btn-primary:hover {
   background: #e6c503;
   transform: translateY(-1px);
}

.btn-primary:disabled {
   background: #666;
   color: #999;
   cursor: not-allowed;
   transform: none;
}

.btn-secondary {
   background: var(--primary-color);
   color: white;
   border: none;
   padding: 12px 24px;
   border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
}

.btn-secondary:hover {
   background: #2c6b71;
}

.btn-refresh {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   color: var(--text-primary);
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   margin-right: 10px;
}

.btn-refresh:hover {
   background: rgba(252, 219, 3, 0.2);
   border-color: var(--secondary-color);
   color: var(--secondary-color);
   transform: translateY(-1px);
}

.btn-refresh:active {
   transform: scale(0.95);
}

.btn-refresh.refreshing {
   pointer-events: none;
}

.btn-refresh.refreshing svg {
   animation: spin 1s linear infinite;
}

/* ===== PAGE DE VÉRIFICATION EMAIL ===== */
.verification-content {
   text-align: center;
}

.verification-icon {
   margin: 20px 0;
}

.verification-message {
   color: var(--text-primary);
   margin-bottom: 20px;
   line-height: 1.6;
}

.verification-note {
   color: var(--text-secondary);
   font-size: 14px;
   line-height: 1.5;
}

.verification-note a {
   color: var(--secondary-color);
   text-decoration: none;
}

.verification-note a:hover {
   text-decoration: underline;
}

.signup-link {
   text-align: center;
   margin-top: 20px;
   color: var(--text-secondary);
}

.signup-link a {
   color: var(--secondary-color);
   text-decoration: none;
}

/* ===== DASHBOARD ===== */
.dashboard-container {
   display: none;
   min-height: 100vh;
}

/* ===== SIDEBAR ===== */
.sidebar {
   width: 250px;
   background: rgba(42, 63, 66, 0.98);
   backdrop-filter: blur(15px);
   height: 100vh;
   position: fixed;
   left: 0;
   top: 0;
   padding: 20px 0;
   border-right: 1px solid rgba(255, 255, 255, 0.1);
   z-index: 999;
   transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.sidebar-logo {
   padding: 20px;
   text-align: center;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   margin-bottom: 20px;
}

.sidebar-logo .logo {
   width: 40px;
   height: 40px;
   font-size: 18px;
   display: inline-flex;
   margin-right: 10px;
}

.sidebar-title {
   display: inline-block;
   font-size: 20px;
   font-weight: 600;
   color: var(--text-primary);
}

/* ===== NAVIGATION ===== */
.nav-menu {
   display: flex;
   flex-direction: column;
   height: calc(100vh - 120px);
   /* Réduire pour laisser de la place */
   list-style: none;
   overflow-y: auto;
   padding: 0 0 36px;
   gap: 2px;
   /* Permettre le scroll si nécessaire */
}

.nav-item {
   margin: 5px 0;
}

.nav-item:last-child {
   margin-bottom: 0px;
}

.nav-spacer {
   flex-grow: 1;
   min-height: 20px;
   /* Hauteur minimum pour éviter l'écrasement */
}

.nav-link {
   display: flex;
   align-items: center;
   padding: 15px 20px;
   color: var(--text-secondary);
   text-decoration: none;
   transition: all 0.3s ease;
   border-left: 3px solid transparent;
   width: 100%;
   background-color: transparent;
   border-top: none;
   border-right: none;
   border-bottom: none;
   cursor: pointer;
   font-family: inherit;
   font-size: inherit;
   text-align: left;
}

.nav-link:hover,
.nav-link.active {
   background: rgba(252, 219, 3, 0.1);
   color: var(--secondary-color);
   border-left-color: var(--secondary-color);
}

.nav-logout:hover {
   background: rgba(220, 53, 69, 0.1);
   color: var(--danger-color);
   border-left-color: var(--danger-color);
}

.nav-logout {
   margin-top: 18px;
}

.nav-icon {
   width: 20px;
   height: 20px;
   margin-right: 12px;
   fill: currentColor;
   flex-shrink: 0;
}

/* ===== CONTENU PRINCIPAL ===== */
.main-content {
   margin-left: 250px;
   padding: 30px;
   min-height: 100vh;
   transition: filter 0.3s ease;
}

/* ===== HEADER ===== */

.header {
   display: flex;
   flex-direction: column;
   gap: 18px;
   width: 100%;
   margin-bottom: 30px;
}

.header-top {
   display: flex;
   width: 100%;
   align-items: center;
   gap: 20px;
}

.page-title {
   font-size: 32px;
   font-weight: 600;
   color: var(--text-primary);
   flex: 1;
   margin: 0;
}

.header-top .btn-refresh {
   margin-left: auto;
}

.header-status {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 14px;
   color: var(--text-secondary);
   flex-wrap: wrap;
   justify-content: flex-end;
   min-width: 0;
}

.connection-status {
   display: flex;
   align-items: center;
   gap: 8px;
}

.status-message {
   color: var(--text-secondary);
}

.status-separator {
   color: var(--text-secondary);
   opacity: 0.7;
   display: none;
   line-height: 1;
}

.last-update-info {
   display: flex;
   align-items: center;
   gap: 4px;
   white-space: nowrap;
   max-width: 220px;
   overflow: hidden;
   text-overflow: ellipsis;
}

.header-status.has-update .status-separator {
   display: inline-block;
}

.status-indicator {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
}

.status-online {
   background-color: var(--success-color);
   box-shadow: 0 0 6px rgba(40, 167, 69, 0.4);
   animation: pulse-soft 2.6s ease-in-out infinite;
}

.status-offline {
   background-color: var(--danger-color);
   box-shadow: 0 0 6px rgba(220, 53, 69, 0.6);
}

.status-checking {
   background-color: var(--warning-color);
   animation: pulse-glow 1.5s infinite;
}

/* ===== CARTES ===== */
.cards-grid {
   display: flex;
   flex-direction: column;
   gap: 20px;
   margin-bottom: 30px;
}

.card {
   background: rgba(74, 101, 105, 0.8);
   backdrop-filter: blur(10px);
   border-radius: 15px;
   padding: 25px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   transition: transform 0.3s ease;
}

.card:hover {
   transform: translateY(-2px);
}

.card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
}

.card-title {
   font-size: 18px;
   font-weight: 600;
   color: var(--text-primary);
}

.card-icon {
   width: 24px;
   height: 24px;
   fill: var(--secondary-color);
}

/* ===== CARTE BATTERIE ===== */
.battery-card {
   min-width: 600px;
   max-width: 100%;
}

.battery-metrics {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-bottom: 20px;
}

.metric-group {
   text-align: center;
}

.metric-value {
   font-size: 32px;
   font-weight: 700;
   color: var(--secondary-color);
   margin-bottom: 5px;
   line-height: 1;
   transition: color 0.3s ease;
}

.metric-unit {
   font-size: 14px;
   color: var(--text-secondary);
   margin-left: 3px;
}

.metric-label {
   color: var(--text-secondary);
   font-size: 14px;
   font-weight: 500;
   margin-top: 5px;
}

/* ===== CARTE CONSOMMATION ===== */
.power-card {
   min-width: 300px;
   text-align: center;
}

.power-display {
   margin-top: 15px;
}

.power-value {
   font-size: 42px;
   font-weight: 700;
   color: var(--text-primary);
   line-height: 1;
   margin-bottom: 8px;
   transition: color 0.3s ease;
}

.power-unit {
   font-size: 18px;
   color: var(--text-secondary);
   margin-left: 5px;
}

.power-description {
   color: var(--text-secondary);
   font-size: 14px;
}

/* ===== CARTE FLUX D'ÉNERGIE ===== */
.energy-flow-card {
   position: relative;
   overflow: hidden;
}

.energy-flow-card .card-header {
   align-items: baseline;
}

.card-subtitle {
   font-size: 13px;
   color: var(--text-secondary);
   opacity: 0.8;
}

.energy-flow-canvas {
   position: relative;
   margin-top: 10px;
   min-height: 380px;
   aspect-ratio: 3 / 2; /* maintient le ratio du SVG 600x400 */
}

.energy-flow-svg {
   width: 100%;
   height: auto;
}

.flow-line {
   fill: none;
   stroke: rgba(255, 255, 255, 0.16);
   stroke-width: 2.4;
   stroke-linecap: round;
   transition: stroke 0.3s ease, opacity 0.3s ease;
}

.flow-line.flow-active {
   stroke: rgba(252, 219, 3, 0.45);
}

.flow-line.flow-muted {
   opacity: 0.35;
}

.flow-dot {
   fill: var(--secondary-color);
   filter: drop-shadow(0 0 8px rgba(252, 219, 3, 0.45));
}

.energy-node {
   position: absolute;
   width: 160px;
   padding: 16px;
   border-radius: 18px;
   background: rgba(16, 37, 39, 0.55);
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
   display: flex;
   flex-direction: column;
   gap: 6px;
   backdrop-filter: blur(8px);
}

.energy-node-icon {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, 0.08);
   color: var(--text-primary);
}

.energy-node-icon svg {
   width: 26px;
   height: 26px;
   stroke: currentColor;
   fill: none;
   stroke-width: 1.8;
}

.energy-node-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--text-primary);
   margin-top: 4px;
}

.energy-node-value {
   font-size: 22px;
   font-weight: 700;
   color: var(--secondary-color);
   line-height: 1.2;
}

.energy-node-meta {
   font-size: 13px;
   color: var(--text-secondary);
   line-height: 1.2;
}

/* Positions par défaut gardées pour fallback, mais le JS layoutEnergyNodes() écrase via style inline */
.energy-node--solar { border-color: rgba(252, 219, 3, 0.35); }

.energy-node--solar .energy-node-icon {
   background: rgba(252, 219, 3, 0.22);
   color: #fdd835;
}

.energy-node--grid { border-color: rgba(40, 167, 69, 0.3); }

.energy-node--grid .energy-node-icon {
   background: rgba(76, 220, 153, 0.18);
   color: #4fd1c5;
}

.energy-node--home { border-color: rgba(162, 102, 255, 0.35); }

.energy-node--home .energy-node-icon {
   background: rgba(162, 102, 255, 0.2);
   color: #a266ff;
}

.energy-node--battery { border-color: rgba(53, 130, 136, 0.35); }

.energy-node--battery .energy-node-value {
   color: #4fd1c5;
}

.energy-node--battery .energy-node-icon {
   background: rgba(79, 209, 197, 0.18);
   color: #4fd1c5;
}

.energy-flow-card::after {
   content: "";
   position: absolute;
   inset: 20px;
   border-radius: 20px;
   pointer-events: none;
   border: 1px solid rgba(255, 255, 255, 0.04);
}

/* ===== SETTINGS ===== */
.settings-section {
   background: rgba(74, 101, 105, 0.8);
   border-radius: 15px;
   padding: 30px;
   margin-bottom: 20px;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-title {
   font-size: 20px;
   font-weight: 600;
   color: var(--text-primary);
   margin-bottom: 10px;
}

.settings-description {
   color: var(--text-secondary);
   margin-bottom: 25px;
}

/* ===== PAGE SETUP ===== */


.tempo-config>*+* {
   margin-top: 20px;
   /* Espacement entre les enfants directs */
}

.tempo-config .charge-config {
   margin-top: 25px;
   /* Déjà défini, donc pas besoin de space-y */
}

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

.option-row:last-child {
   border-bottom: none;
}

.option-row:first-of-type {
   padding-top: 15px;
}

.option-row:last-of-type {
   border-bottom: none;
   padding-bottom: 0;
}

.option-label {
   flex: 1;
   padding-right: 20px;
}

.option-title {
   display: block;
   color: var(--text-primary);
   font-weight: 600;
   font-size: 16px;
   margin-bottom: 5px;
}

.option-range {
   color: var(--text-secondary);
   font-size: 14px;
   font-weight: normal;
   margin-left: 8px;
}

.option-control {
   flex-shrink: 0;
}

/* ===== CONFIGURATION TEMPO ===== */
.charge-config {
   margin-top: 25px;
   transition: all 0.3s ease;
   opacity: 0.4;
   pointer-events: none;
}

.charge-config.active {
   opacity: 1;
   pointer-events: auto;
}

.charge-config.disabled {
   opacity: 0.3;
   pointer-events: none;
   filter: grayscale(100%);
}

.charge-controls {
   display: flex;
   align-items: center;
   gap: 20px;
   margin: 20px 0;
   flex-wrap: wrap;
}

/* ===== TOGGLE SWITCH ===== */
.toggle-switch {
   position: relative;
   display: inline-block;
   width: 56px;
   height: 32px;
}

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

.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, #666, #444);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   border-radius: 32px;
   border: 2px solid rgba(255, 255, 255, 0.1);
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.slider:before {
   position: absolute;
   content: "";
   height: 24px;
   width: 24px;
   left: 2px;
   bottom: 2px;
   background: linear-gradient(145deg, #fff, #e0e0e0);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   border-radius: 50%;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

input:checked+.slider {
   background: linear-gradient(135deg, var(--secondary-color), #e6c503);
   border-color: var(--secondary-color);
   box-shadow: inset 0 2px 4px rgba(252, 219, 3, 0.2), 0 0 12px rgba(252, 219, 3, 0.3);
}

input:checked+.slider:before {
   transform: translateX(24px);
   background: linear-gradient(145deg, #fff, #f5f5f5);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(252, 219, 3, 0.2);
}

.slider:hover {
   transform: scale(1.02);
}

input:focus+.slider {
   outline: 2px solid rgba(252, 219, 3, 0.4);
   outline-offset: 2px;
}

/* ===== SLIDER HORIZONTAL CORRIGÉ ===== */
.slider-container {
   flex: 1;
   min-width: 200px;
   position: relative;
   padding-bottom: 25px;
}

.charge-slider {
   -webkit-appearance: none;
   appearance: none;
   /* Propriété standard */
   width: 100%;
   height: 8px;
   border-radius: 5px;
   --slider-min-stop: 0%;
   --slider-value-stop: 50%;
   background: linear-gradient(
         to right,
         rgba(255, 255, 255, 0.08) 0%,
         rgba(255, 255, 255, 0.08) var(--slider-min-stop),
         rgba(252, 219, 3, 0.28) var(--slider-min-stop),
         rgba(252, 219, 3, 0.28) var(--slider-value-stop),
         rgba(53, 130, 136, 0.65) var(--slider-value-stop),
         rgba(53, 130, 136, 0.35) 100%
   );
   outline: none;
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
   position: relative;
   z-index: 2;
}

.charge-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   /* Propriété standard */
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: linear-gradient(145deg, var(--secondary-color), #e6c503);
   cursor: pointer;
   border: 3px solid var(--text-primary);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(252, 219, 3, 0.3);
   transition: all 0.2s ease;
   position: relative;
   z-index: 3;
}

.charge-slider::-webkit-slider-thumb:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(252, 219, 3, 0.4);
}

.charge-slider::-moz-range-thumb {
   appearance: none;
   /* Propriété standard pour Firefox */
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: linear-gradient(145deg, var(--secondary-color), #e6c503);
   cursor: pointer;
   border: 3px solid var(--text-primary);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ===== MARQUEURS PARFAITEMENT ALIGNÉS ===== */
.slider-marks {
   position: absolute;
   top: 12px;
   left: 12px;
   right: 12px;
   height: 20px;
   pointer-events: none;
   z-index: 1;
}

.slider-mark {
   position: absolute;
   width: 2px;
   height: 8px;
   background: rgba(255, 255, 255, 0.3);
   transform: translateX(-50%);
}

.slider-mark.major {
   height: 12px;
   background: rgba(255, 255, 255, 0.5);
   width: 3px;
}

.slider-mark-label {
   position: absolute;
   top: 15px;
   transform: translateX(-50%);
   font-size: 10px;
   color: var(--text-secondary);
   white-space: nowrap;
}

.slider-value {
   position: absolute;
   top: -35px;
   background: var(--secondary-color);
   color: var(--primary-color);
   padding: 4px 8px;
   border-radius: 6px;
   font-size: 14px;
   font-weight: 600;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   z-index: 4;
   white-space: nowrap;
   pointer-events: none;
   transform: translateX(-50%);
   left: 0;
   /* Position initiale, sera modifiée par JS */
}

/* ===== CHAMP TEXTE ===== */
.text-input-container {
   position: relative;
   min-width: 150px;
}

.charge-input {
   width: 100%;
   padding: 12px 35px 12px 15px;
   background: var(--card-background);
   border: 2px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   color: var(--text-primary);
   font-size: 16px;
   font-weight: 500;
   transition: all 0.3s ease;
}

.charge-input:focus {
   outline: none;
   border-color: var(--secondary-color);
   box-shadow: 0 0 0 3px rgba(252, 219, 3, 0.2);
}

.charge-input.error {
   border-color: var(--danger-color);
   box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
   animation: shake 0.5s ease-in-out;
}

.input-unit {
   position: absolute;
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-secondary);
   font-size: 14px;
   pointer-events: none;
}

/* ===== BOUTON VALIDER ===== */
.validate-container {
   margin-top: 25px;
}

.validate-btn {
   background: linear-gradient(135deg, var(--secondary-color), #e6c503);
   color: var(--primary-color);
   border: none;
   padding: 15px 30px;
   border-radius: 8px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   min-width: 120px;
   box-shadow: 0 4px 12px rgba(252, 219, 3, 0.3);
}

.validate-btn:hover:not(:disabled) {
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(252, 219, 3, 0.4);
}

.validate-btn:disabled {
   background: #666;
   color: #999;
   cursor: not-allowed;
   transform: none;
   box-shadow: none;
}

.validate-btn.loading {
   background: var(--primary-color);
   color: var(--text-primary);
   cursor: wait;
}

/* ===== POPUP D'ERREUR ===== */
.error-popup {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}

.error-popup.show {
   opacity: 1;
   visibility: visible;
}

.error-content {
   background: var(--card-background);
   padding: 25px;
   border-radius: 12px;
   border: 2px solid var(--danger-color);
   max-width: 400px;
   position: relative;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
   color: var(--text-primary);
   text-align: center;
}

.error-close {
   position: absolute;
   top: 10px;
   right: 15px;
   background: none;
   border: none;
   color: var(--text-secondary);
   font-size: 24px;
   cursor: pointer;
   padding: 0;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.error-close:hover {
   color: var(--text-primary);
}

/* ===== BOUTON HAMBURGER ===== */
.hamburger-btn {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   background: transparent;
   border: none;
   cursor: pointer;
   padding: 8px;
   border-radius: 6px;
   transition: all 0.3s ease;
   margin-right: 15px;
}

.hamburger-btn:hover {
   background: rgba(255, 255, 255, 0.1);
}

.hamburger-line {
   display: block;
   width: 22px;
   height: 2px;
   background-color: var(--text-primary);
   margin: 3px 0;
   transition: all 0.3s ease;
   border-radius: 1px;
}

.hamburger-btn.active .hamburger-line:nth-child(1) {
   transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
   opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
   transform: rotate(-45deg) translate(6px, -6px);
}

/* ===== OVERLAY MOBILE ===== */
.mobile-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(2px);
   z-index: 998;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.mobile-overlay.show {
   display: block;
   opacity: 1;
   animation: fadeInOverlay 0.3s ease-out;
}

/* ===== MESSAGES ===== */
.alert {
   padding: 15px;
   border-radius: 10px;
   margin: 15px 0;
   border-left: 4px solid;
}

.alert-error {
   background: rgba(220, 53, 69, 0.1);
   border-left-color: var(--danger-color);
   color: #f8d7da;
}

.alert-success {
   background: rgba(40, 167, 69, 0.1);
   border-left-color: var(--success-color);
   color: #d4edda;
}

.alert-info {
   background: rgba(53, 130, 136, 0.1);
   border-left-color: var(--primary-color);
   color: var(--text-primary);
}

/* ===== UTILITY CLASSES ===== */
.hidden {
   display: none !important;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

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

   to {
      transform: rotate(360deg);
   }
}

@keyframes pulse-glow {

   0%,
   100% {
      opacity: 1;
      box-shadow: 0 0 6px rgba(255, 193, 7, 0.6);
   }

   50% {
      opacity: 0.6;
      box-shadow: 0 0 10px rgba(255, 193, 7, 0.8);
   }
}

@keyframes pulse-soft {

   0%,
   100% {
      box-shadow: 0 0 0 rgba(40, 167, 69, 0.25);
      opacity: 1;
   }

   50% {
      box-shadow: 0 0 10px rgba(40, 167, 69, 0.55);
      opacity: 0.85;
   }
}

@keyframes shake {

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

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

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

@keyframes fadeInOverlay {
   from {
      opacity: 0;
      backdrop-filter: blur(0);
   }

   to {
      opacity: 1;
      backdrop-filter: blur(2px);
   }
}

.fade-in {
   animation: fadeIn 0.5s ease-out;
}

/* ===== LOADING SPINNER ===== */
.spinner {
   display: inline-block;
   width: 20px;
   height: 20px;
   border: 3px solid rgba(255, 255, 255, .3);
   border-radius: 50%;
   border-top-color: var(--secondary-color);
   animation: spin 1s ease-in-out infinite;
}

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

   /* Hamburger & Menu */
   .hamburger-btn {
      display: flex;
      min-height: 44px;
      min-width: 44px;
      -webkit-tap-highlight-color: rgba(252, 219, 3, 0.2);
   }

   .sidebar {
      transform: translate3d(-100%, 0, 0);
      box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
      border-right: 1px solid rgba(255, 255, 255, 0.15);
      will-change: transform;
      width: min(260px, 85vw);
      max-height: 100dvh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: calc(40px + env(safe-area-inset-bottom, 0));
   }

   .sidebar.mobile-open {
      transform: translate3d(0, 0, 0);
   }

   .main-content {
      margin-left: 0;
      padding: calc(20px + env(safe-area-inset-top, 0)) 15px
         calc(20px + env(safe-area-inset-bottom, 0));
   }

   .main-content.menu-open {
      filter: blur(2px);
   }

   .nav-menu {
      height: auto;
      max-height: clamp(200px, calc(100dvh - 190px), 600px);
      overflow-y: auto;
      padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
   }

   .energy-flow-card {
      padding: 20px 15px 24px;
   }

   .energy-flow-canvas {
      min-height: 320px;
      aspect-ratio: 3 / 2.2; /* un peu plus de hauteur visible en mobile */
      padding-top: 4px;
      padding-bottom: 4px;
   }

   .energy-node {
      position: absolute;
      width: 120px;
      padding: 12px;
   }

   .energy-node-value {
      font-size: 18px;
   }

   .energy-node-meta {
      font-size: 12px;
   }

   /* Positions gérées par JS en mobile aussi */

   /* Header mobile */
   .header {
      width: 100%;
      padding: 0;
      gap: 12px;
      margin-bottom: 20px;
   }

   .header-top {
      width: 100%;
      align-items: center;
      gap: 12px;
   }

   .page-title {
      font-size: 20px;
      flex: 1 1 auto;
      margin-left: 0;
      min-width: 0;
   }

   .btn-refresh {
      width: 36px;
      height: 36px;
      min-height: 44px;
      min-width: 44px;
      margin-left: auto;
      -webkit-tap-highlight-color: rgba(252, 219, 3, 0.2);
   }

   .btn-refresh svg {
      width: 16px;
      height: 16px;
   }

   .header-status {
      width: 100%;
      font-size: 11px;
      gap: 8px;
      flex-wrap: nowrap;
      justify-content: flex-start;
      min-width: 0;
   }

   .header-status .connection-status {
      flex: 0 0 auto;
      gap: 6px;
   }

   .status-message {
      font-size: 11px;
      white-space: nowrap;
   }

   .status-separator {
      display: inline-block;
      font-size: 12px;
   }

   .last-update-info {
      font-size: 11px;
      flex: 1 1 auto;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }

   /* Navigation mobile */
   .nav-link {
      min-height: 48px;
      padding: 15px 20px;
      -webkit-tap-highlight-color: rgba(252, 219, 3, 0.1);
      touch-action: manipulation;
   }

   .nav-icon {
      width: 22px;
      height: 22px;
      margin-right: 15px;
   }

   .sidebar-logo {
      padding: 15px 20px;
      margin-bottom: 15px;
   }

   .sidebar-logo .logo {
      width: 35px;
      height: 35px;
      font-size: 16px;
   }

   .sidebar-title {
      font-size: 18px;
   }

   /* Cards mobile */
   .cards-grid {
      gap: 15px;
   }

   .battery-card {
      min-width: unset;
   }

   .battery-metrics {
      grid-template-columns: 1fr;
      gap: 15px;
   }

   .metric-group {
      padding: 15px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
      text-align: center;
   }

   .metric-value {
      font-size: 24px;
   }

   .power-card {
      min-width: unset;
   }

   .power-value {
      font-size: 36px;
   }

   /* Setup mobile */
   .charge-controls {
      flex-direction: row;
      align-items: center;
      gap: 12px;
   }

   .slider-container {
      flex: 1 1 auto;
      min-width: 160px;
      padding-bottom: 18px;
   }

   .slider-mark-label {
      font-size: 9px;
   }

   .text-input-container {
      flex: 0 0 110px;
      min-width: 110px;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
   }

   .text-input-container .charge-input {
      width: 100%;
   }

   .validate-btn {
      width: 100%;
   }

   .login-card {
      margin: 10px;
      padding: 30px 20px;
   }

   /* Optimisations tactiles */
   .hamburger-btn,
   .nav-link,
   .btn-refresh {
      touch-action: manipulation;
   }

   /* Performance hardware acceleration */
   .mobile-overlay,
   .main-content {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      will-change: transform;
   }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 768px) and (orientation: landscape) {
   .sidebar {
      width: min(240px, 80vw);
   }

   .sidebar-logo {
      padding: 10px 15px;
   }

   .nav-link {
      padding: 12px 15px;
      min-height: 44px;
   }

   .nav-icon {
      width: 20px;
      height: 20px;
      margin-right: 12px;
   }

   .hamburger-btn {
      width: 38px;
      height: 38px;
   }
}

/* ===== TRÈS PETITS ÉCRANS ===== */
@media (max-width: 480px) {
   .hamburger-btn {
      width: 35px;
      height: 35px;
      margin-right: 10px;
   }

   .hamburger-line {
      width: 20px;
   }

   .page-title {
      font-size: 18px;
   }
   .btn-refresh {
      width: 34px;
      height: 34px;
   }

   .header-status {
      font-size: 10px;
      gap: 6px;
   }

   .status-message,
   .last-update-info {
      font-size: 10px;
   }

   .last-update-info {
      max-width: 140px;
   }

   .energy-node {
      width: 120px;
      padding: 10px;
   }

   .energy-node-value {
      font-size: 16px;
   }

   .main-content {
      padding: calc(18px + env(safe-area-inset-top, 0)) 12px
         calc(18px + env(safe-area-inset-bottom, 0));
   }
}

@media (max-width: 360px) {
   .sidebar {
      width: min(260px, 90vw);
   }

   .hamburger-btn {
      margin-right: 6px;
   }

   .page-title {
      font-size: 16px;
   }

   .header-status {
      font-size: 9px;
      gap: 4px;
   }

   .status-message {
      font-size: 9px;
   }

   .last-update-info {
      font-size: 8px;
      max-width: 110px;
   }

   .energy-flow-canvas {
      min-height: 300px;
   }

   .energy-node {
      width: 120px;
      padding: 10px;
      gap: 4px;
   }

   .energy-node-icon {
      width: 36px;
      height: 36px;
   }

   .energy-node-icon svg {
      width: 20px;
      height: 20px;
   }

   .energy-node-value {
      font-size: 15px;
   }

   .energy-node-meta {
      font-size: 11px;
   }

   .energy-node--grid {
      left: 6px;
   }

   .energy-node--home {
      right: 6px;
   }

   .main-content {
      padding: calc(16px + env(safe-area-inset-top, 0)) 10px
         calc(16px + env(safe-area-inset-bottom, 0));
   }
}