/* =============================================================================
   STYLE PREMIUM — Dashboard Jacuzzi & Solaire
   =============================================================================
   Ce fichier CSS définit l'apparence visuelle de tout le dashboard.

   Concepts utilisés :
     - Variables CSS (--nom) : permettent de changer les couleurs à un seul endroit
     - Flexbox et Grid : systèmes de mise en page modernes
     - Glassmorphism : effet de verre dépoli (backdrop-filter: blur)
     - Animations CSS : effet de pulsation pour le chauffage
     - Media queries : adaptation mobile (responsive design)
   ============================================================================= */

/* =============================================================================
   VARIABLES CSS — Palette de couleurs du thème sombre
   Modifie ces valeurs pour changer tout le thème d'un coup !
   ============================================================================= */
:root {
    --bg: #0f172a;                              /* Fond principal (bleu très foncé) */
    --bg-alt: #111827;                          /* Fond alternatif (légèrement plus clair) */
    --card: #1f2937;                            /* Fond des cartes (gris-bleu foncé) */
    --accent: #38bdf8;                          /* Couleur d'accent principale (cyan) */
    --accent-soft: rgba(56, 189, 248, 0.15);    /* Accent transparent (pour les survols) */
    --danger: #f97373;                          /* Couleur danger/erreur (rouge clair) */
    --success: #4ade80;                         /* Couleur succès/actif (vert) */
    --text: #e5e7eb;                            /* Texte principal (gris très clair) */
    --text-soft: #9ca3af;                       /* Texte secondaire (gris moyen) */
    --border: #374151;                          /* Couleur des bordures (gris foncé) */
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);  /* Ombre portée des cartes */
    --radius: 16px;                             /* Arrondi des coins des cartes */
    /* Aliases utilisés dans certaines pages */
    --card-bg:   var(--card);
    --card-border: var(--border);
    --text-main: var(--text);
    --text-muted: var(--text-soft);
}

/* =============================================================================
   THÈME CLAIR — surcharge les variables du thème sombre
   Activé via data-theme="light" sur <html> (géré par theme.js + localStorage)
   ============================================================================= */
[data-theme="light"] {
    --bg:          #f0f4f8;
    --bg-alt:      #e4ecf4;
    --card:        #ffffff;
    --accent:      #0284c7;
    --accent-soft: rgba(2, 132, 199, 0.12);
    --danger:      #dc2626;
    --success:     #16a34a;
    --text:        #0f172a;
    --text-soft:   #64748b;
    --border:      #cbd5e1;
    --shadow:      0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] body {
    background: linear-gradient(160deg, #bfdbfe 0%, #dde8f4 100%);
}

[data-theme="light"] header {
    background: rgba(221, 232, 244, 0.92);
    border-bottom-color: rgba(100, 116, 139, 0.2);
}

[data-theme="light"] footer {
    background: rgba(221, 232, 244, 0.85);
    border-top: 1px solid rgba(100, 116, 139, 0.15);
}

/* --- Cartes : bordure plus visible sur fond clair --- */
[data-theme="light"] .card {
    border-color: rgba(100, 116, 139, 0.22);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

/* --- Fonds codés en dur : remplacés par var(--bg-alt) --- */
[data-theme="light"] .consigne-stepper   { background: var(--bg-alt); border-color: var(--border); }
[data-theme="light"] .relais-card        { background: var(--bg-alt); }
[data-theme="light"] .bypass-card        { background: var(--bg-alt); }
[data-theme="light"] .chart-container    { background: var(--bg-alt); border-color: var(--border); }
[data-theme="light"] .meteo-day          { background: var(--bg-alt); border-color: var(--border); }
[data-theme="light"] .sonde-select       { background: var(--bg-alt); border-color: var(--border); color: var(--text); }
[data-theme="light"] .plan-map-wrap      { background: var(--bg-alt); }

/* --- Superpositions blanches transparentes → grises transparentes --- */
[data-theme="light"] .btn-mode           { background: rgba(0,0,0,0.04); }
[data-theme="light"] .btn-mode:hover     { background: rgba(0,0,0,0.09); }
[data-theme="light"] .relais-icon:hover  { background: rgba(0,0,0,0.07); }
[data-theme="light"] .bulb-btn:hover     { background: rgba(0,0,0,0.06); }
[data-theme="light"] .plug-btn:hover     { background: rgba(0,0,0,0.06); }
[data-theme="light"] .maint-sensor-card  { background: var(--bg-alt); }
[data-theme="light"] .maint-engine-block { background: var(--bg-alt); }
[data-theme="light"] .maint-engine-row   { border-bottom-color: var(--border); }
[data-theme="light"] .pi-metric          { background: rgba(0,0,0,0.04); border-color: var(--border); }

/* --- Icône relais éteinte : gris moyen lisible sur fond clair --- */
[data-theme="light"] .relais-icon.icon-off { color: #94a3b8; }

/* --- Ampoule éteinte sur fond clair --- */
[data-theme="light"] .bulb-off .bulb-globe      { background: radial-gradient(circle at 38% 30%, #cbd5e1, #94a3b8); }
[data-theme="light"] .bulb-off .bulb-filament   { background: #94a3b8; }
[data-theme="light"] .bulb-off .bulb-ring:nth-child(1) { background: #94a3b8; }
[data-theme="light"] .bulb-off .bulb-ring:nth-child(2) { background: #b0bec8; }
[data-theme="light"] .bulb-off .bulb-ring:nth-child(3) { background: #cbd5e1; }

/* --- Prise éteinte sur fond clair --- */
[data-theme="light"] .plug-off .plug-pin  { background: #94a3b8; }
[data-theme="light"] .plug-off .plug-body { background: radial-gradient(circle at 38% 30%, #cbd5e1, #94a3b8); }

/* Cartes de choix de thème (page Paramètres) */
.theme-choice-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    background: var(--bg-alt);
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text-soft);
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.theme-choice-card:hover { border-color: var(--accent); color: var(--text); }
.theme-choice-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* =============================================================================
   PAGE — Structure globale
   ============================================================================= */
/* Empêche tout débordement horizontal sur toutes les pages — fix global mobile */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    margin: 0;                                                  /* Supprime les marges par défaut du navigateur */
    font-family: system-ui, sans-serif;                         /* Police système (rapide à charger) */
    background: radial-gradient(circle at top, #1e293b 0, #020617 55%);  /* Dégradé radial du centre vers les bords */
    color: var(--text);                                         /* Couleur du texte par défaut */
}

/* Conteneur de la page en colonne (header → contenu → footer) */
.page {
    display: flex;              /* Active le mode flexbox */
    flex-direction: column;     /* Empile les éléments verticalement */
    min-height: 100vh;          /* Au minimum la hauteur de l'écran (vh = viewport height) */
    min-width: 0;               /* Empêche le flex item de déborder de son parent */
}

/* =============================================================================
   HEADER — Barre supérieure avec titre et date
   ============================================================================= */
header {
    padding: 16px 24px;                             /* Espacement intérieur (haut/bas gauche/droite) */
    border-bottom: 1px solid rgba(148,163,184,0.25); /* Ligne séparatrice en bas (gris semi-transparent) */
    background: rgba(15,23,42,0.85);                /* Fond semi-transparent */
    backdrop-filter: blur(10px);                    /* Effet de flou derrière (glassmorphism) */
    display: flex;                                  /* Flexbox pour aligner les éléments */
    justify-content: space-between;                 /* Espace entre les éléments (gauche ↔ droite) */
    align-items: center;                            /* Centre verticalement */
    flex-wrap: wrap;                                /* Autorise le retour à la ligne sur mobile */
    gap: 4px 16px;                                  /* Espace entre items quand ils wrappent */
}
/* Header compact sur mobile : colonne unique */
@media (max-width: 600px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
        gap: 3px;
    }
    header .subtitle { font-size: 0.72rem; }
    header .datetime { font-size: 0.8rem; }
    header .title-block h1 { font-size: 1.2rem; }
}

/* Bloc titre dans le header — aligne le logo et le h1 côte à côte */
.title-block {
    display: flex;              /* Logo et titre sur la même ligne */
    align-items: center;        /* Centre verticalement logo et texte */
    gap: 12px;                  /* Espace entre le logo et le titre */
}
.title-block h1 {
    margin: 0;                  /* Supprime la marge par défaut du h1 */
    font-size: 1.4rem;          /* Taille du titre (rem = relatif à la taille de base) */
    align-items: center;        /* Centre verticalement */
    gap: 10px;                  /* Espace entre le point et le texte */
}

/* Logo icône à côté du titre (remplace l'ancien point LED) */
.logo-img {
    width: 36px;                        /* Largeur de l'icône */
    height: 36px;                       /* Hauteur de l'icône */
    border-radius: 8px;                 /* Coins légèrement arrondis */
    object-fit: contain;                /* Garde les proportions du logo */
    flex-shrink: 0;                     /* Ne rétrécit pas si l'espace manque */
}

/* Sous-titre du header */
.subtitle {
    font-size: 0.8rem;         /* Petite taille */
    color: var(--text-soft);   /* Couleur grise atténuée */
}

/* Date et heure dans le header */
.datetime {
    font-size: 0.9rem;         /* Taille moyenne */
    color: var(--text-soft);   /* Couleur grise atténuée */
}

/* =============================================================================
   GRILLE PRINCIPALE — Mise en page du contenu
   ============================================================================= */
main {
    padding: 16px 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Conteneur scrollable pour les tableaux larges sur mobile */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Mobile < 900px : 1 colonne
   minmax(0,1fr) au lieu de 1fr : le minimum 0 empêche les items
   de forcer le track plus large que l'espace disponible */
.grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
/* Tous les items directs du grid ne peuvent pas gonfler le track */
.grid > * { min-width: 0; }

/* ≥ 900px : colonne unique, padding plus généreux */
@media (min-width: 900px) {
    main { padding: 20px 28px; }
    .grid { gap: 20px; }
}

/* .right-column supprimé — Météo et Solaire sont des items directs de .grid */

/* =============================================================================
   CARTES — Conteneurs principaux du dashboard
   ============================================================================= */
.card {
    background: var(--card);                        /* Fond de la carte */
    border-radius: var(--radius);                   /* Coins arrondis */
    padding: 16px 18px;                             /* Espacement intérieur */
    box-shadow: var(--shadow);                      /* Ombre portée */
    border: 1px solid rgba(148,163,184,0.25);       /* Bordure subtile */
    min-width: 0;                                   /* Empêche la carte de gonfler le grid */
}

/* En-tête d'une section dans une carte */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 12px;
}

/* Titre d'une section (ex: "JACUZZI & CHAUFFAGE") */
.card-title {
    font-size: 1rem;             /* Taille standard */
    text-transform: uppercase;   /* TOUT EN MAJUSCULES */
    letter-spacing: 0.12em;      /* Espacement entre les lettres */
    color: var(--text-soft);     /* Couleur grise */
    display: flex;               /* Flexbox */
    align-items: center;         /* Centre verticalement */
    gap: 10px;                   /* Espace entre le titre et la pastille */
}

/* Petite pastille à côté du titre (ex: "Eau & Sécurité") */
.pill {
    background: rgba(148,163,184,0.2);  /* Fond gris semi-transparent */
    padding: 2px 8px;                   /* Petit espacement */
    border-radius: 999px;               /* Forme de pilule */
    font-size: 0.7rem;                  /* Petite taille */
}

/* =============================================================================
   INDICATEURS DE STATUS — Points verts/rouges
   ============================================================================= */

/* Ligne contenant les pastilles de status */
.status-row {
    display: flex;   /* Côte à côte */
    gap: 10px;       /* Espace entre les pastilles */
    margin-top: 6px; /* Petit espace au-dessus */
}

/* Pastille de status (contient un point + un texte) */
.status-pill {
    display: flex;                          /* Flexbox */
    align-items: center;                    /* Centre verticalement */
    gap: 6px;                               /* Espace entre le point et le texte */
    background: rgba(148,163,184,0.15);     /* Fond léger */
    padding: 3px 8px;                       /* Espacement */
    border-radius: 999px;                   /* Forme de pilule */
    font-size: 0.75rem;                     /* Petite taille */
}

/* Point coloré dans la pastille (par défaut : gris) */
.status-dot {
    width: 10px;            /* Largeur du point */
    height: 10px;           /* Hauteur du point */
    border-radius: 999px;   /* Rond parfait */
    background: #666;       /* Gris par défaut */
}

/* Point vert = tout va bien */
.status-dot.ok {
    background: var(--success);  /* Vert */
}

/* Point rouge = problème */
.status-dot.err {
    background: var(--danger);  /* Rouge */
}

/* Point orange = état normal hors cycle (ex: pressostat ouvert sans pompe active) */
.status-dot.warn {
    background: #f59e0b;  /* Orange/ambre */
}

/* =============================================================================
   TEMPÉRATURES — Affichage grands chiffres
   ============================================================================= */

/* Bloc unifié température + consigne */
.tc-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

/* Ligne 1 : Température eau (gauche) + Consigne (droite) */
.tc-top-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.tc-temp  { flex: 1; }

.tc-consigne {
    text-align: right;
}

/* Ligne 3 : Boutons raccourcis + Réchauffeur */
.tc-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Bloc réchauffeur : compact et discret */
.temp-block-secondary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

/* Valeur réchauffeur : petite */
.temp-secondary-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-soft);
}

.temp-secondary-unit {
    font-size: 0.8rem;
    color: var(--text-soft);
}

/* Réchauffeur en alerte (> 50°C) : rouge, plus grand, pulsation */
.rech-alerte {
    border-left-color: rgba(239,68,68,0.6) !important;
}
.rech-alerte .temp-label {
    color: #ef4444;
    font-weight: 600;
}
.rech-alerte .temp-secondary-row {
    font-size: 2rem;
    color: #ef4444;
    animation: pulse-red 1s ease-in-out infinite;
}
.rech-alerte .temp-secondary-unit {
    color: #ef4444;
}

@keyframes pulse-red {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

/* Label au-dessus de la température (ex: "Température eau") */
.temp-label {
    font-size: 0.85rem;      /* Taille moyenne */
    color: var(--text-soft);  /* Gris atténué */
}

/* Ligne valeur + unité (ex: "32.5" + "°C") */
.temp-value-row {
    display: flex;          /* Côte à côte */
    align-items: baseline;  /* Aligne sur la ligne de base du texte */
    gap: 4px;               /* Petit espace */
    flex-wrap: wrap;        /* Autorise le retour à la ligne sur petit écran */
}

/* Sur mobile portrait : le label ETA passe sur une ligne dédiée */
@media (max-width: 500px) {
    #temp_eau_label {
        flex-basis: 100%;          /* Prend toute la largeur → nouvelle ligne */
        margin-left: 2px !important;
        font-size: .72rem !important;
        margin-top: 1px;
    }
}

/* Le gros chiffre de température */
.temp-value {
    font-size: 2.4rem;   /* Grande taille */
    font-weight: 600;    /* Semi-gras */
}

/* L'unité "°C" à côté du chiffre */
.temp-unit {
    font-size: 1rem;          /* Taille normale */
    color: var(--text-soft);  /* Gris atténué */
}

/* Ligne de petites pastilles sous la température */
.temp-chip-row {
    margin-top: 4px;  /* Petit espace au-dessus */
}

/* Petite pastille d'info (ex: "Mesure OK") */
.chip {
    background: rgba(148,163,184,0.15);  /* Fond léger */
    padding: 3px 8px;                    /* Espacement */
    border-radius: 999px;               /* Forme de pilule */
    font-size: 0.75rem;                 /* Petite taille */
}

/* =============================================================================
   CONSIGNE — Slider et presets de température
   ============================================================================= */

/* Bloc contenant tout le contrôle de consigne */
.consigne-block {
    flex: 1;         /* Prend toute la largeur disponible */
    margin-top: 12px; /* Espace au-dessus */
}

/* Ligne label + valeur actuelle */
.consigne-header-row {
    display: flex;                  /* Côte à côte */
    justify-content: space-between; /* Label à gauche, valeur à droite */
    align-items: center;            /* Centre verticalement */
}

/* Label "Consigne eau" */
.consigne-label {
    font-size: 0.85rem;      /* Taille moyenne */
    color: var(--text-soft);  /* Gris */
}

/* Valeur actuelle de la consigne — même taille que la temp eau */
.consigne-value {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--accent);   /* Couleur accentuée pour distinguer de la temp eau */
}

/* Unité "°C" de la consigne */
.consigne-unit {
    font-size: 1rem;          /* Taille normale */
    color: var(--text-soft);  /* Gris */
}

/* Stepper consigne : [−]  35.0°C  [+]  — pleine largeur, tactile */
.consigne-stepper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(15,23,42,0.9);
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 16px;
    padding: 10px 14px;
    margin-top: 4px;
}

.stepper-btn {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.25);
    background: rgba(148,163,184,0.07);
    color: var(--text-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    touch-action: manipulation;
    user-select: none;
}
.stepper-btn .material-symbols-rounded { font-size: 2.2rem; }
.stepper-btn:hover  { background: rgba(148,163,184,0.18); color: var(--text-main); }
.stepper-btn:active { background: rgba(148,163,184,0.32); }
.stepper-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

.stepper-val {
    flex: 1;
    font-size: 2rem;
    font-weight: 600;
    color: var(--accent);
    text-align: center;
    letter-spacing: -0.5px;
}

/* =============================================================================
   BOUTONS DE MODE (OFF / Hiver / Éco / Standard)
   ============================================================================= */

/* Rangée des 4 boutons */
.mode-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

/* Bouton de base */
.btn-mode {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 6px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-soft);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
    user-select: none;
}
.btn-mode .material-symbols-rounded {
    font-size: 2.4rem;
    transition: color 0.18s;
}
.btn-mode:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text);
}

/* Mode actif — OFF : rouge */
.btn-mode-off.mode-actif {
    background: rgba(239,68,68,0.15);
    border-color: #ef4444;
    color: #f87171;
    box-shadow: 0 0 14px rgba(239,68,68,0.25);
}
.btn-mode-off.mode-actif .material-symbols-rounded { color: #f87171; }

/* Mode actif — Hiver : bleu */
.btn-mode-hiver.mode-actif {
    background: rgba(96,165,250,0.15);
    border-color: #60a5fa;
    color: #93c5fd;
    box-shadow: 0 0 14px rgba(96,165,250,0.25);
}
.btn-mode-hiver.mode-actif .material-symbols-rounded { color: #93c5fd; }

/* Mode actif — Éco : vert-jaune */
.btn-mode-eco.mode-actif {
    background: rgba(163,230,53,0.15);
    border-color: #a3e635;
    color: #bef264;
    box-shadow: 0 0 14px rgba(163,230,53,0.25);
}
.btn-mode-eco.mode-actif .material-symbols-rounded { color: #bef264; }

/* Mode actif — Standard : cyan (accent) */
.btn-mode-standard.mode-actif {
    background: rgba(56,189,248,0.15);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 14px rgba(56,189,248,0.25);
}
.btn-mode-standard.mode-actif .material-symbols-rounded { color: var(--accent); }

/* Libellé du mode */
.mode-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Statut du moteur — petite ligne sous le titre Mode */
.auto-statut {
    font-size: 0.72rem;
    color: var(--text-soft);
    margin-left: auto;
    font-style: italic;
    max-width: 360px;           /* Élargi pour afficher le message complet */
    text-align: right;
    white-space: normal;        /* Autorise le retour à la ligne */
    line-height: 1.45;
    overflow: visible;
}

/* Avertissement mode OFF */
.mode-off-warning {
    display: none;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.40);
    border-radius: 10px;
    color: #f87171;
    font-size: 0.78rem;
    padding: 9px 12px;
    margin-bottom: 14px;
    line-height: 1.4;
}

/* =============================================================================
   RELAIS — Grille de boutons pour chaque relais
   ============================================================================= */

/* Grille responsive : s'adapte au nombre de relais */
.relais-grid {
    display: grid;                                          /* CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));  /* Colonnes automatiques, min 130px */
    gap: 8px;                                               /* Espace entre les cartes */
    margin-top: 6px;                                        /* Espace au-dessus */
}

/* Carte individuelle d'un relais */
.relais-card {
    border-radius: 14px;
    padding: 12px 8px 10px;
    border: 1px solid rgba(148,163,184,0.2);
    background: rgba(15,23,42,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Carte allumée : bordure verte + légère lueur */
.relais-card.relais-on {
    border-color: rgba(74,222,128,0.45);
    box-shadow: 0 0 10px rgba(74,222,128,0.12);
}

/* Carte éteinte : bordure discrète */
.relais-card.relais-off {
    border-color: rgba(148,163,184,0.15);
}

/* Icône Material Symbol — cliquable, grande */
.relais-icon {
    font-size: 5.6rem;
    cursor: pointer;
    border-radius: 50%;
    padding: 6px;
    transition: color 0.3s, text-shadow 0.3s, background 0.2s;
    user-select: none;
}
.relais-icon:hover {
    background: rgba(255,255,255,0.07);
}

/* Icône allumée : vert avec halo */
.relais-icon.icon-on {
    color: #4ade80;
    text-shadow: 0 0 16px rgba(74,222,128,0.7);
}

/* Icône éteinte : gris sombre */
.relais-icon.icon-off {
    color: #475569;
}

/* Nom du relais */
.relais-name {
    font-size: 0.75rem;
    color: var(--text-soft);
    text-align: center;
    line-height: 1.2;
}

/* Bouton toggle ON */
.btn-toggle.btn-on {
    font-size: 0.72rem;
    padding: 3px 12px;
    border-radius: 999px;
    border: 1px solid rgba(74,222,128,0.6);
    background: rgba(74,222,128,0.15);
    color: #4ade80;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-toggle.btn-on:hover { background: rgba(74,222,128,0.28); }

/* Bouton toggle OFF */
.btn-toggle.btn-off {
    font-size: 0.72rem;
    padding: 3px 12px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.3);
    background: rgba(148,163,184,0.08);
    color: var(--text-soft);
    cursor: pointer;
    transition: background 0.2s;
}
.btn-toggle.btn-off:hover { background: rgba(148,163,184,0.2); }

/* Rangée boutons spot (toggle + palette) */
.relais-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Bouton palette (couleur suivante spot) */
.btn-color {
    background: none;
    border: 1px solid rgba(168,85,247,0.4);
    border-radius: 999px;
    padding: 2px 7px;
    cursor: pointer;
    color: #a855f7;
    display: flex;
    align-items: center;
    transition: background 0.2s;
}
.btn-color:hover { background: rgba(168,85,247,0.15); }
.btn-color .material-symbols-rounded { font-size: 16px; }

/* =============================================================================
   SPOT STARBURST — Ampoule CSS interactive
   ============================================================================= */

/* Carte Spot : 2 colonnes, lueur dorée quand allumée */
.relais-spot {
    grid-column: span 2;
    transition: border-color 0.4s, box-shadow 0.4s;
}
.spot-active {
    border-color: rgba(253,224,71,0.45) !important;
    box-shadow: 0 0 22px rgba(253,224,71,0.1);
}

/* Zone des 2 ampoules côte à côte */
.spot-controls {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 8px;
    gap: 8px;
}

/* Bouton transparent autour de la grande ampoule */
.bulb-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: background 0.2s;
}
.bulb-btn:hover { background: rgba(255,255,255,0.04); }

/* Structure commune à toutes les ampoules */
.bulb { display: flex; flex-direction: column; align-items: center; }

/* Globe (partie ronde) */
.bulb-globe {
    width: 52px;
    height: 58px;
    border-radius: 50% 50% 28% 28%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* Filament intérieur */
.bulb-filament {
    width: 2px;
    height: 22px;
    border-radius: 1px;
    transition: background 0.4s, box-shadow 0.4s;
}

/* Socle (3 anneaux rétrécissants) */
.bulb-base { margin-top: 3px; }
.bulb-ring {
    border-radius: 3px;
    margin: 2px auto;
    height: 5px;
    transition: background 0.4s, width 0.4s;
}
.bulb-ring:nth-child(3) { height: 4px; }

/* --- Ampoule éteinte (gris sombre) --- */
.bulb-off .bulb-globe {
    background: radial-gradient(circle at 38% 30%, #4b5563, #1f2937);
}
.bulb-off .bulb-filament { background: #4b5563; }
.bulb-off .bulb-ring:nth-child(1) { width: 36px; background: #374151; }
.bulb-off .bulb-ring:nth-child(2) { width: 30px; background: #2d3748; }
.bulb-off .bulb-ring:nth-child(3) { width: 24px; background: #1f2937; }

/* --- Ampoule allumée (jaune lumineux + halo) --- */
.bulb-on .bulb-globe {
    background: radial-gradient(circle at 38% 30%, #fef9c3, #fde047, #f59e0b);
    box-shadow: 0 0 18px 6px rgba(253,224,71,0.6),
                0 0 42px 18px rgba(253,224,71,0.22);
}
.bulb-on .bulb-filament {
    background: #f59e0b;
    box-shadow: 0 0 7px #fde047;
}
.bulb-on .bulb-ring:nth-child(1) { width: 36px; background: #d97706; }
.bulb-on .bulb-ring:nth-child(2) { width: 30px; background: #b45309; }
.bulb-on .bulb-ring:nth-child(3) { width: 24px; background: #92400e; }

/* --- Ampoule arc-en-ciel (animation hue-rotate infinie) --- */
.bulb-rainbow .bulb-globe {
    background: conic-gradient(from 0deg, #f97316, #eab308, #22c55e, #3b82f6, #a855f7, #f97316);
    box-shadow: 0 0 14px 4px rgba(168,85,247,0.35);
    animation: rainbow-hue 2.5s linear infinite;
}
.bulb-rainbow .bulb-filament {
    background: rgba(255,255,255,0.75);
    box-shadow: 0 0 4px white;
}
.bulb-rainbow .bulb-ring:nth-child(1) { width: 36px; background: linear-gradient(90deg,#f97316,#a855f7); }
.bulb-rainbow .bulb-ring:nth-child(2) { width: 30px; background: linear-gradient(90deg,#eab308,#3b82f6); }
.bulb-rainbow .bulb-ring:nth-child(3) { width: 24px; background: linear-gradient(90deg,#22c55e,#a855f7); }

@keyframes rainbow-hue {
    to { filter: hue-rotate(360deg); }
}

/* =============================================================================
   PRISE 220V — Icône prise électrique CSS interactive
   ============================================================================= */

/* Carte prise : lueur verte quand branchée */
.relais-prise { transition: border-color 0.4s, box-shadow 0.4s; }
.prise-active {
    border-color: rgba(74,222,128,0.45) !important;
    box-shadow: 0 0 18px rgba(74,222,128,0.1);
}

/* Bouton transparent autour de la prise */
.plug-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    transition: background 0.2s;
}
.plug-btn:hover { background: rgba(255,255,255,0.04); }

/* Structure de la prise */
.plug { display: flex; flex-direction: column; align-items: center; }

/* Broches (2 fiches en haut) */
.plug-pins {
    display: flex;
    gap: 12px;
    margin-bottom: -2px;
    position: relative;
    z-index: 1;
}
.plug-pin {
    width: 8px;
    height: 18px;
    border-radius: 4px 4px 0 0;
    transition: background 0.3s, box-shadow 0.3s;
}

/* Corps arrondi de la prise */
.plug-body {
    width: 50px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, box-shadow 0.3s;
}

/* Alvéoles intérieures */
.plug-socket { display: flex; gap: 9px; }
.plug-hole {
    width: 7px;
    height: 12px;
    border-radius: 3px;
    background: rgba(0,0,0,0.35);
    transition: background 0.3s;
}

/* Prise éteinte — gris sombre */
.plug-off .plug-pin  { background: #4b5563; }
.plug-off .plug-body { background: radial-gradient(circle at 38% 30%, #4b5563, #1f2937); }

/* Prise allumée — vert avec halo */
.plug-on .plug-pin {
    background: #4ade80;
    box-shadow: 0 -3px 7px rgba(74,222,128,0.55);
}
.plug-on .plug-body {
    background: radial-gradient(circle at 38% 30%, #bbf7d0, #4ade80, #16a34a);
    box-shadow: 0 0 16px 5px rgba(74,222,128,0.5),
                0 0 32px 12px rgba(74,222,128,0.2);
}
.plug-on .plug-hole { background: rgba(0,0,0,0.22); }

/* Texte état sous la prise */
.prise-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-soft);
    transition: color 0.3s;
}
.prise-label-on { color: #4ade80; }

/* Texte état sous la grande ampoule */
.spot-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-soft);
    transition: color 0.4s;
}
.spot-label-on { color: #fde047; }

/* Bouton couleur suivante */
.btn-color-next {
    background: none;
    border: 1px solid rgba(148,163,184,0.25);
    border-radius: 16px;
    padding: 8px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: background 0.2s, border-color 0.2s;
}
.btn-color-next:hover {
    background: rgba(148,163,184,0.07);
    border-color: rgba(168,85,247,0.4);
}

/* Texte arc-en-ciel animé sous la petite ampoule */
.color-next-label {
    font-size: 0.68rem;
    font-weight: 700;
    background: linear-gradient(90deg, #f97316, #eab308, #22c55e, #3b82f6, #a855f7, #f97316);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbow-text 2s linear infinite;
}
@keyframes rainbow-text {
    to { background-position: 200% center; }
}

/* =============================================================================
   ANIMATION CHAUFFAGE — Point qui pulse quand le chauffage est actif
   ============================================================================= */

/* Indicateur de chauffage (cercle animé) */
.heating-indicator {
    width: 14px;                                    /* Largeur */
    height: 14px;                                   /* Hauteur */
    border-radius: 999px;                           /* Rond parfait */
    border: 2px solid rgba(248,113,113,0.7);        /* Bordure rouge */
    animation: pulse 1.4s infinite;                 /* Animation en boucle */
}

/* Quand le chauffage est éteint : pas d'animation, bordure grise */
.heating-indicator.off {
    animation: none;                                /* Stoppe l'animation */
    border-color: rgba(148,163,184,0.6);           /* Bordure grise */
}

/* Définition de l'animation "pulse" */
@keyframes pulse {
    0% {
        transform: scale(1);                                    /* Taille normale */
        box-shadow: 0 0 0 0 rgba(248,113,113,0.6);             /* Pas de halo */
    }
    70% {
        transform: scale(1.12);                                 /* Légèrement plus grand */
        box-shadow: 0 0 0 10px rgba(248,113,113,0);            /* Halo rouge qui s'estompe */
    }
    100% {
        transform: scale(1);                                    /* Retour à la taille normale */
        box-shadow: 0 0 0 0 rgba(248,113,113,0);               /* Pas de halo */
    }
}

/* =============================================================================
   GRAPHIQUE 24H — Conteneur du graphique Chart.js
   ============================================================================= */

/* Conteneur qui entoure le canvas du graphique */
.chart-container {
    height: 300px;
    max-height: 300px;
    overflow: hidden;
    background: rgba(15,23,42,0.9);
    border-radius: 12px;
    padding: 8px;
    border: 1px solid rgba(148,163,184,0.4);
}

@media (min-width: 1200px) {
    .chart-container { height: 360px; max-height: 360px; }
    #graph24h         { height: 360px !important; max-height: 360px !important; }
}

/* Le canvas lui-même (zone de dessin du graphique) */
#graph24h {
    width: 100% !important;     /* Prend toute la largeur (force par-dessus Chart.js) */
    height: 300px !important;   /* Hauteur fixe */
    max-height: 300px !important;
    min-height: 260px !important;
    display: block !important;  /* Bloc (supprime l'espace en dessous) */
}

/* =============================================================================
   MÉTÉO — Affichage de la météo actuelle et des prévisions
   ============================================================================= */

/* Conteneur principal de la section météo */
.meteo-main {
    margin-top: 10px;  /* Espace au-dessus */
}

/* Bulle englobant les 4 zones du jour — visuellement séparée des prévisions */
.meteo-today-card {
    border: 1px solid rgba(56,189,248,0.25);   /* Bordure cyan subtile */
    border-radius: 14px;
    padding: 10px;
    margin-bottom: 8px;                        /* Espace avant les prévisions */
    background: rgba(56,189,248,0.04);         /* Légère teinte bleue pour différencier */
}

/* Titre "Aujourd'hui" en haut de la bulle */
.meteo-today-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);                      /* Cyan — cohérent avec le thème */
    text-align: center;
    margin-bottom: 8px;
}

/* Grille 5 zones : Météo / Vitesse / Direction / Pluie / UV */
.meteo-zones {
    display: grid;
    grid-template-columns: repeat(5, 1fr);     /* 5 colonnes de même largeur */
    gap: 6px;
}
/* Sur mobile : 2 colonnes, la zone Météo prend toute la largeur en haut */
@media (max-width: 600px) {
    .meteo-zones {
        grid-template-columns: repeat(2, 1fr);  /* 2 colonnes sur petit écran */
    }
    .meteo-zone:first-child {
        grid-column: 1 / -1;                    /* Zone Météo pleine largeur */
        border-left: none;                      /* Pas de séparateur sur la ligne du haut */
        border-bottom: 1px solid rgba(148,163,184,0.15); /* Ligne sous la zone Météo */
        padding-bottom: 12px;
        margin-bottom: 4px;
    }
}


/* Une zone météo — pas de boîte individuelle, la bulle fait le conteneur */
.meteo-zone {
    padding: 8px 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* Séparateur vertical entre les zones (sauf la première) */
    border-left: 1px solid rgba(148,163,184,0.15);
}
.meteo-zone:first-child { border-left: none; }  /* Pas de séparateur avant la première zone */

/* Label de la zone (ex: "VENT", "CUMUL PLUIE") — même style que les noms de jours */
.meteo-zone-name {
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Emoji en haut de la zone (ex: ☁️, 💨, 🌧️, 🔆) */
.meteo-zone-icon { font-size: 1.6rem; }


/* Grande valeur centrale — même taille que l'ancienne température */
.meteo-zone-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

/* Libellé en bas de la zone (unité, description) */
.meteo-zone-label {
    font-size: 0.7rem;
    color: var(--text-soft);
    line-height: 1.3;
}

/* Niveaux d'UV — code couleur standard */
.uv-faible     { color: #4ade80; }   /* Vert  — UV 0-2 */
.uv-modere     { color: #facc15; }   /* Jaune — UV 3-5 */
.uv-eleve      { color: #fb923c; }   /* Orange — UV 6-7 */
.uv-tres-eleve { color: #f87171; }   /* Rouge  — UV 8+ */

/* Grille des prévisions sur 4 jours */
.meteo-forecast {
    display: grid;                              /* CSS Grid */
    grid-template-columns: repeat(4, 1fr);      /* 4 colonnes égales */
    gap: 6px;                                   /* Espace entre les jours */
    margin-top: 10px;                           /* Espace au-dessus */
}

/* Carte d'un jour de prévision */
.meteo-day {
    padding: 8px 4px;                           /* Espacement intérieur */
    border-radius: 10px;                        /* Coins arrondis */
    background: rgba(15,23,42,0.9);             /* Fond sombre */
    border: 1px solid rgba(148,163,184,0.4);    /* Bordure subtile */
    font-size: 0.75rem;                         /* Petite taille */
    text-align: center;                         /* Texte centré */
    display: flex;                              /* Flexbox vertical */
    flex-direction: column;                     /* Empile les éléments */
    align-items: center;                        /* Centre horizontalement */
    gap: 2px;                                   /* Espace entre les éléments */
}

/* Nom du jour (ex: "Aujourd'hui", "Lundi") */
.meteo-day-name {
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--accent);           /* Cyan — met en valeur le nom */
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Icône météo (emoji) */
.meteo-icon {
    font-size: 1.8rem;   /* Taille de l'emoji */
    line-height: 1;      /* Pas d'espacement vertical supplémentaire */
    margin: 2px 0;
}

/* Température max du jour */
.meteo-day-temp {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

/* Description du temps (ex: "Ensoleillé") */
.meteo-day-desc {
    font-size: 0.62rem;
    color: var(--text-soft);
    line-height: 1.3;
}

/* =============================================================================
   SOLAIRE — Affichage de la production solaire
   ============================================================================= */

/* Ligne des 3 chips solaires (puissance, jour, total) */
.solaire-row {
    display: flex;     /* Côte à côte */
    gap: 10px;         /* Espace entre les chips */
    margin-top: 10px;  /* Espace au-dessus */
}

/* Chip individuel (ex: "Puissance instantanée : 350W") */
.solaire-chip {
    flex: 1;                                    /* Parts égales */
    background: rgba(148,163,184,0.15);         /* Fond gris léger */
    padding: 8px;                               /* Espacement */
    border-radius: 12px;                        /* Coins arrondis */
}

/* Label du chip solaire */
.solaire-label {
    font-size: 0.75rem;       /* Petite taille */
    color: var(--text-soft);  /* Gris */
}

/* Valeur du chip solaire (le gros chiffre) */
.solaire-value {
    font-size: 1.4rem;   /* Grande taille */
    font-weight: 600;    /* Semi-gras */
}

/* Lien "Détails complets →" */
.solaire-link {
    display: inline-block;      /* En ligne mais avec marges */
    margin-top: 10px;           /* Espace au-dessus */
    color: var(--accent);       /* Couleur cyan */
    text-decoration: none;      /* Pas de soulignement */
    transition: opacity 0.2s;   /* Animation douce */
}

/* Effet au survol du lien */
.solaire-link:hover {
    opacity: 0.8;  /* Légèrement transparent */
}

/* =============================================================================
   FOOTER — Pied de page
   ============================================================================= */
footer {
    text-align: center;
    padding: 16px 12px 20px;
    font-size: 0.8rem;
    color: var(--text-soft);
    margin-top: auto;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: var(--text-soft);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    transition: background .15s, color .15s, border-color .15s;
    min-height: 44px; /* zone de tap confortable mobile */
}
.footer-btn:hover {
    background: rgba(255,255,255,.12);
    color: var(--text-main);
    border-color: rgba(255,255,255,.2);
}
[data-theme="light"] .footer-btn {
    background: rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.12);
}
[data-theme="light"] .footer-btn:hover {
    background: rgba(0,0,0,.11);
    border-color: rgba(0,0,0,.2);
}
/* Bouton thème dans le footer — icône adapte au thème actif via CSS */
.footer-theme-btn { padding: 10px 13px; gap: 2px; }
/* Mode sombre (défaut) : seulement la lune */
.theme-icon-dark  { display: none; }
.theme-icon-light { display: inline-flex; }
/* Mode clair : soleil ET lune (les deux icônes visibles) */
[data-theme="light"] .theme-icon-dark  { display: inline-flex; }

/* Toast de confirmation de changement de thème */
.theme-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 7px 18px;
    font-size: 0.83rem;
    font-weight: 500;
    box-shadow: var(--shadow);
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
}
.theme-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.footer-btn .material-symbols-rounded { font-size: 1.1rem; }
/* Page en cours dans le pied de page commun : surlignée */
.footer-btn.footer-actif,
[data-theme="light"] .footer-btn.footer-actif { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* =============================================================================
   BANNIÈRE D'ALERTES
   ============================================================================= */
.alert-banner {
    background: rgba(239,68,68,0.13);
    border: 1.5px solid rgba(239,68,68,0.5);
    border-radius: 14px;
    padding: 12px 16px;
    margin: 0 0 18px 0;
    animation: pulse-alert-border 2s ease-in-out infinite;
}
@keyframes pulse-alert-border {
    0%, 100% { border-color: rgba(239,68,68,0.5); }
    50%       { border-color: rgba(239,68,68,0.9); }
}
.alert-banner-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f87171;
    margin-bottom: 8px;
}
.alert-banner-title .material-symbols-rounded { font-size: 1.1rem; }
.alert-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid rgba(239,68,68,0.15);
    font-size: 0.82rem;
}
.alert-ts  { color: #f87171; font-weight: 600; flex-shrink: 0; }
.alert-msg { color: #fca5a5; flex: 1; }
.alert-dismiss {
    background: none;
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 6px;
    color: #f87171;
    cursor: pointer;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: background 0.18s;
}
.alert-dismiss:hover { background: rgba(239,68,68,0.15); }
.alert-dismiss .material-symbols-rounded { font-size: 0.9rem; }

/* Variante urgence pressostat — fond rouge plus intense + texte agrandi */
.alert-banner-urgence {
    background: rgba(239,68,68,0.22) !important;
    border-color: rgba(239,68,68,1)  !important;
    animation: pulse-urgence-border 1s ease-in-out infinite !important;
}
@keyframes pulse-urgence-border {
    0%, 100% { border-color: rgba(239,68,68,0.6); box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    50%       { border-color: rgba(239,68,68,1);   box-shadow: 0 0 10px 3px rgba(239,68,68,0.35); }
}
.alert-item-urgence {
    gap: 12px;
    padding: 8px 0;
    border-top: none;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* =============================================================================
   BADGE AUTO (relais pilotés automatiquement)
   ============================================================================= */
.relais-auto { cursor: default; }
.relais-timer-badge {
    font-size: 0.65rem;
    font-weight: 700;
    color: #f59e0b;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 6px;
    padding: 2px 6px;
    margin-top: 2px;
}
.relais-auto-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
    background: rgba(148,163,184,0.12);
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 6px;
    padding: 2px 6px;
    margin-top: 2px;
}

/* =============================================================================
   PAGE MAINTENANCE — Styles spécifiques
   ============================================================================= */

/* Lien retour dans le header */
.maint-back-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--text-soft);
    text-decoration: none;
    transition: color 0.18s;
}
.maint-back-link:hover { color: var(--accent); }
.maint-back-link .material-symbols-rounded { font-size: 1.1rem; }

/* --- Capteurs en direct --- */
.maint-sensor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.maint-sensor-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.maint-sensor-icon  { font-size: 1.6rem; }
.maint-sensor-label { font-size: 0.7rem; color: var(--text-soft); text-align: center; }
.maint-sensor-value { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1; }
.maint-sensor-unit  { font-size: 0.7rem; color: var(--text-soft); }

/* --- Bloc moteur --- */
.maint-engine-block {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.maint-engine-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.82rem;
}
.maint-engine-row:last-child { border-bottom: none; }
.maint-engine-label { color: var(--text-soft); }
.maint-engine-value { color: var(--text); font-weight: 500; text-align: right; max-width: 60%; }

/* --- Boutons d'actions --- */
.maint-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.maint-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    border-radius: 10px;
    border: 1px solid;
    font-size: 0.78rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.18s, box-shadow 0.18s;
}
.maint-btn:hover       { opacity: 0.85; }
.maint-btn:disabled    { opacity: 0.4; cursor: not-allowed; }
.maint-btn .material-symbols-rounded { font-size: 1rem; }

.maint-btn-primary   { background: rgba(56,189,248,0.15);  border-color: var(--accent);    color: var(--accent); }
.maint-btn-secondary { background: rgba(148,163,184,0.1);  border-color: var(--border);    color: var(--text-soft); }
.maint-btn-warning   { background: rgba(251,191,36,0.12);  border-color: #fbbf24;          color: #fcd34d; }
.maint-btn-danger    { background: rgba(239,68,68,0.12);   border-color: #ef4444;          color: #f87171; }

/* --- Toggle switch préférences de notification --- */
.notif-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
}
.notif-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.notif-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 22px;
    transition: background .2s, border-color .2s;
}
[data-theme="light"] .notif-toggle-slider {
    background: rgba(0,0,0,.12);
    border-color: var(--border);
}
[data-theme="light"] .notif-toggle-slider::before { background: #64748b; }
.notif-toggle-slider::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: #94a3b8;
    border-radius: 50%;
    transition: transform .2s, background .2s;
}
.notif-toggle input:checked + .notif-toggle-slider {
    background: rgba(56,189,248,0.25);
    border-color: #38bdf8;
}
.notif-toggle input:checked + .notif-toggle-slider::before {
    transform: translateX(18px);
    background: #38bdf8;
}

/* --- Résultat test pressostat --- */
.maint-test-result {
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 14px;
    border: 1px solid;
}
.maint-test-pending { background: rgba(148,163,184,0.1); border-color: var(--border); color: var(--text-soft); }
.maint-test-ok      { background: rgba(74,222,128,0.12); border-color: #4ade80;       color: #86efac; }
.maint-test-fail    { background: rgba(239,68,68,0.12);  border-color: #ef4444;       color: #f87171; }

/* --- Bandeau info --- */
.maint-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(56,189,248,0.07);
    border: 1px solid rgba(56,189,248,0.2);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.75rem;
    color: var(--text-soft);
    margin-bottom: 12px;
    line-height: 1.5;
}

/* =============================================================================
   CONSOMMATION ÉLECTRIQUE
   ============================================================================= */
.conso-summary-pill {
    font-size: .78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(250,204,21,.12);
    color: #facc15;
    border: 1px solid rgba(250,204,21,.25);
    white-space: nowrap;
}
.conso-live-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: .82rem;
}
.conso-live-icon  { font-size: 1rem; color: #facc15; }
.conso-live-label { color: var(--text-soft); }
.conso-live-value { font-weight: 700; color: var(--text-main); }
.conso-live-cost  { color: var(--text-soft); font-size: .78rem; }

/* =============================================================================
   CHAUFFE PROGRAMMÉE
   ============================================================================= */
.chauffe-prog-wrap {
    background: rgba(56,189,248,.05);
    border: 1px solid rgba(56,189,248,.18);
    border-radius: 12px;
    padding: 11px 14px;
    margin-bottom: 10px;
}

.chauffe-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.chauffe-icon { font-size: 1.6rem; color: #38bdf8; flex-shrink: 0; }
.chauffe-label { font-size: .85rem; color: var(--text-soft); white-space: nowrap; }
.chauffe-time-input {
    flex: 1;
    min-width: 90px;
    max-width: 120px;
    padding: 7px 10px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    outline: none;
    color-scheme: dark;
}
.chauffe-time-input:focus { border-color: #38bdf8; }
.chauffe-btn-prog {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(56,189,248,.15);
    border: 1px solid rgba(56,189,248,.3);
    border-radius: 8px;
    color: #38bdf8;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.chauffe-btn-prog:hover { background: rgba(56,189,248,.25); }
.chauffe-btn-prog .material-symbols-rounded { font-size: 1.4rem; }
.chauffe-estim {
    font-size: .78rem;
    color: var(--text-soft);
    margin-top: 7px;
    min-height: 1.1em;
}
/* Statut actif */
.chauffe-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.chauffe-status-icon { font-size: 1.4rem; color: #38bdf8; flex-shrink: 0; }
.chauffe-status-texts { flex: 1; }
.chauffe-status-main { font-size: .88rem; font-weight: 600; color: var(--text-main); }
.chauffe-status-sub  { font-size: .76rem; color: var(--text-soft); margin-top: 2px; }
.chauffe-btn-cancel {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.25);
    color: #f87171;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.chauffe-btn-cancel:hover { background: rgba(239,68,68,.22); }
.chauffe-btn-cancel .material-symbols-rounded { font-size: 1rem; }
/* Wrapper formulaire + carte bypass */
.chauffe-avec-bypass {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Carte bypass — même gabarit que .relais-card */
.bypass-card {
    border-radius: 14px;
    padding: 12px 8px 10px;
    border: 1px solid rgba(56,189,248,.2);
    background: rgba(15,23,42,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    width: 90px;
    flex-shrink: 0;
    transition: border-color .3s, box-shadow .3s, background .15s;
    color: #475569;
    user-select: none;
}
.bypass-card:hover { background: rgba(56,189,248,.07); }
.bypass-card-icon {
    font-size: 5.6rem;
    border-radius: 50%;
    padding: 6px;
    transition: color .3s, text-shadow .3s, background .2s;
}
.bypass-card:hover .bypass-card-icon { background: rgba(255,255,255,.07); }
.bypass-card-label {
    font-size: 0.75rem;
    color: var(--text-soft);
    text-align: center;
}
.bypass-card.bypass-on {
    border-color: rgba(56,189,248,.5);
    box-shadow: 0 0 14px rgba(56,189,248,.2);
}
.bypass-card.bypass-on .bypass-card-icon {
    color: #38bdf8;
    text-shadow: 0 0 16px rgba(56,189,248,.7);
}

/* Toast léger dashboard */
.dash-notif {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 600;
    z-index: 9999;
    transition: opacity .4s;
    pointer-events: none;
}
.dash-notif-ok    { background: rgba(74,222,128,.15); border: 1px solid #4ade80; color: #4ade80; }
.dash-notif-error { background: rgba(248,113,113,.15); border: 1px solid #f87171; color: #f87171; }
.dash-notif-info  { background: rgba(56,189,248,.15);  border: 1px solid #38bdf8; color: #38bdf8; }

/* --- Historique des alertes --- */
.maint-alerte-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
}
.maint-alerte-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid;
}
.alerte-row-danger { background: rgba(248,113,113,.07); border-color: rgba(248,113,113,.2); }
.alerte-row-ok     { background: rgba(74,222,128,.06);  border-color: rgba(74,222,128,.15); }
.maint-alerte-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.alerte-icon-danger { color: #f87171; }
.alerte-icon-ok     { color: #4ade80; }
.maint-alerte-body  { flex: 1; min-width: 0; }
.maint-alerte-msg   { font-size: .8rem; color: var(--text-main); line-height: 1.4; }
.maint-alerte-meta  { display: flex; justify-content: space-between; margin-top: 3px; gap: 8px; }
.maint-alerte-label { font-size: .7rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; }
.maint-alerte-ts    { font-size: .7rem; color: var(--text-soft); font-family: monospace; }

/* --- Configuration des cycles --- */
.maint-config-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 4px;
}
@media (max-width: 900px) {
    .maint-config-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .maint-config-grid { grid-template-columns: 1fr; }
}
.maint-config-group {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.maint-config-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #38bdf8;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(56,189,248,.15);
}
.maint-config-group-title .material-symbols-rounded { font-size: 1rem; flex-shrink: 0; }
.maint-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.maint-config-label {
    font-size: .82rem;
    color: var(--text-soft);
    flex: 1;
}
.maint-config-input-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
}
.maint-config-input {
    width: 62px;
    padding: 5px 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px;
    color: var(--text-main);
    font-size: .88rem;
    text-align: center;
    outline: none;
    transition: border-color .15s;
}
.maint-config-input:focus { border-color: var(--accent); }
[data-theme="light"] .maint-config-input {
    background: var(--card);
    border-color: var(--border);
}
.maint-config-unit {
    font-size: .75rem;
    color: var(--text-soft);
    min-width: 22px;
}

/* --- Liste de test des relais --- */
.maint-relay-list { display: flex; flex-direction: column; gap: 8px; }
.maint-relay-test-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
}
.maint-relay-test-icon  { font-size: 1.4rem; width: 28px; text-align: center; flex-shrink: 0; }
.maint-relay-test-info  { flex: 1; min-width: 0; }
.maint-relay-test-name  { font-size: 0.82rem; font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 6px; }
.maint-relay-test-note  { font-size: 0.68rem; color: var(--text-soft); }
.maint-relay-test-state { font-size: 0.75rem; font-weight: 600; min-width: 28px; text-align: center; }
.maint-btn-test {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 10px;
    background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.3);
    border-radius: 8px; color: var(--accent);
    font-size: 0.75rem; font-family: inherit; font-weight: 600;
    cursor: pointer; transition: background 0.18s; flex-shrink: 0;
}
.maint-btn-test:hover    { background: rgba(56,189,248,0.18); }
.maint-btn-test:disabled { opacity: 0.4; cursor: not-allowed; }
.maint-btn-test .material-symbols-rounded { font-size: 0.9rem; }
.maint-badge-auto {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
    background: rgba(249,115,22,0.15); border: 1px solid rgba(249,115,22,0.3);
    color: #fb923c; border-radius: 5px; padding: 1px 5px;
}

/* --- État des relais (colonne droite) --- */
.maint-relay-states     { display: flex; flex-direction: column; gap: 6px; }
.maint-state-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 0.82rem;
}
.maint-state-icon { font-size: 1.2rem; width: 22px; text-align: center; }
.maint-state-name { flex: 1; color: var(--text); }
.maint-icon-on    { color: var(--success); }
.maint-icon-off   { color: var(--text-soft); }
.maint-state-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-on           { background: var(--success); box-shadow: 0 0 6px var(--success); }
.dot-off          { background: var(--text-soft); }
.maint-state-label { font-weight: 700; font-size: 0.75rem; min-width: 26px; text-align: right; }
.text-on          { color: var(--success); }
.text-off         { color: var(--text-soft); }

/* --- Logs --- */
.maint-log-container {
    background: #060d1a;
    border: 1px solid var(--border);
    border-radius: 10px;
    height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
    font-size: 0.72rem;
    line-height: 1.6;
    scroll-behavior: smooth;
}
.maint-log-empty { color: var(--text-soft); padding: 12px; text-align: center; font-style: italic; }
.log-line        { display: flex; gap: 8px; padding: 1px 0; }
.log-ts          { color: #4b5563; flex-shrink: 0; }
.log-level       { font-weight: 700; flex-shrink: 0; min-width: 52px; }
.log-level-info     { color: #38bdf8; }
.log-level-warning  { color: #fbbf24; }
.log-level-error    { color: #f87171; }
.log-level-critical { color: #ff0000; }
.log-msg         { color: #9ca3af; word-break: break-all; }
.log-info        .log-msg { color: #9ca3af; }
.log-warning     .log-msg { color: #fcd34d; }
.log-error       .log-msg { color: #fca5a5; }
.log-maint       { color: #fb923c; font-weight: 700; }

/* Logs — thème clair */
[data-theme="light"] .maint-log-container { background: #f8fafc; }
[data-theme="light"] .log-ts             { color: #94a3b8; }
[data-theme="light"] .log-msg            { color: #374151; }
[data-theme="light"] .log-info  .log-msg { color: #374151; }
[data-theme="light"] .log-warning .log-msg { color: #92400e; }
[data-theme="light"] .log-error .log-msg { color: #991b1b; }
[data-theme="light"] .log-level-info    { color: #0284c7; }
[data-theme="light"] .log-level-warning { color: #d97706; }
[data-theme="light"] .log-level-error   { color: #dc2626; }
[data-theme="light"] .log-maint         { color: #c2410c; }

/* Contrôles logs */
.maint-log-toggle { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--text-soft); cursor: pointer; }
.maint-log-toggle input { accent-color: var(--accent); cursor: pointer; }
.maint-btn-icon {
    background: none; border: 1px solid var(--border);
    border-radius: 7px; color: var(--text-soft);
    padding: 4px 6px; cursor: pointer; display: flex; align-items: center;
    transition: color 0.18s;
}
.maint-btn-icon:hover { color: var(--danger); }
.maint-btn-icon .material-symbols-rounded { font-size: 1rem; }

/* =============================================================================
   TOASTS — Notifications flottantes
   ============================================================================= */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    border: 1px solid;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    max-width: 320px;
}
.toast-visible   { opacity: 1; transform: translateY(0); }
.toast-ok        { background: rgba(74,222,128,0.15);  border-color: #4ade80; color: #86efac; }
.toast-error     { background: rgba(239,68,68,0.15);   border-color: #ef4444; color: #f87171; }
.toast-warning   { background: rgba(251,191,36,0.15);  border-color: #fbbf24; color: #fcd34d; }

/* =============================================================================
   CONSOMMATION CUMULÉE
   ============================================================================= */
.conso-cumul-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}
.conso-cumul-card {
    background: rgba(250,204,21,.06);
    border: 1px solid rgba(250,204,21,.18);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.conso-cumul-label { font-size: .72rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .06em; }
.conso-cumul-kwh   { font-size: 1.05rem; font-weight: 700; color: #facc15; }
.conso-cumul-eur   { font-size: .8rem; color: var(--text-soft); }

/* =============================================================================
   SAUVEGARDE NAS
   ============================================================================= */
.backup-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =============================================================================
   SONDES DS18B20 — AFFECTATION
   ============================================================================= */
.sonde-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(56,189,248,.05);
    border: 1px solid rgba(56,189,248,.15);
    border-radius: 10px;
    padding: 10px 12px;
}
.sonde-id   { font-family: monospace; font-size: .8rem; color: #38bdf8; flex: 1; }
.sonde-temp { font-size: .85rem; font-weight: 700; color: var(--text-main); min-width: 52px; text-align: right; }
.sonde-select {
    background: rgba(15,23,42,.8);
    border: 1px solid rgba(148,163,184,.25);
    border-radius: 8px;
    color: var(--text-main);
    font-size: .78rem;
    padding: 4px 8px;
    cursor: pointer;
}
@media (max-width: 600px) {
    .sonde-row { flex-wrap: wrap; }
    .sonde-select { flex-basis: 100%; width: 100%; }
}

/* =============================================================================
   RASPBERRY PI — CARTE SANTÉ SYSTÈME (page Maintenance)
   ============================================================================= */

/* Grille des 4 métriques principales */
.pi-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
@media (max-width: 600px) {
    .pi-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pi-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(148,163,184,.1);
    border-radius: 10px;
    padding: 10px 6px 8px;
    gap: 2px;
}
.pi-metric-icon    { font-size: 1.3rem; }
.pi-metric-label   { font-size: .62rem; color: var(--text-soft); text-align: center; margin-top: 2px; }
.pi-metric-value   { font-size: 1.25rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.pi-metric-value-sm{ font-size: .9rem;  font-weight: 700; line-height: 1.2; color: var(--text); text-align: center; }
.pi-metric-unit    { font-size: .62rem; color: var(--text-soft); }

/* Barres de progression RAM / Disque */
.pi-bar-section {
    margin-bottom: 10px;
}
.pi-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .75rem;
    color: var(--text-soft);
    margin-bottom: 4px;
}
.pi-bar-track {
    height: 7px;
    background: rgba(255,255,255,.06);
    border-radius: 4px;
    overflow: hidden;
}
.pi-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .6s ease;
}
.pi-bar-ram  { background: linear-gradient(90deg, #38bdf8, #818cf8); }
.pi-bar-disk { background: linear-gradient(90deg, #4ade80, #a3e635); }
/* Orange > 80%, rouge > 90% (appliqués via JS) */
.pi-bar-warn { background: linear-gradient(90deg, #f59e0b, #fb923c) !important; }
.pi-bar-crit { background: linear-gradient(90deg, #ef4444, #f97316) !important; }

/* Section throttle */
.pi-throttle-section {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(148,163,184,.1);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 4px;
}
.pi-throttle-title {
    font-size: .72rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
    font-weight: 600;
}
.pi-throttle-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Chips d'état */
.pi-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid;
}
.pi-flag-ok   { background: rgba(74,222,128,.1);   border-color: rgba(74,222,128,.35);  color: #4ade80; }
.pi-flag-warn { background: rgba(251,191,36,.12);  border-color: rgba(251,191,36,.4);   color: #fcd34d; }
.pi-flag-err  { background: rgba(239,68,68,.14);   border-color: rgba(239,68,68,.45);   color: #f87171; }
.pi-flag-soft { background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.2);  color: var(--text-soft); }

/* =============================================================================
   PAGE VOLETS SOMFY
   ============================================================================= */
.volets-error-banner {
    display: flex; align-items: center; gap: 10px;
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 12px; padding: 12px 16px;
    color: #f87171; font-size: .9rem; margin-bottom: 16px;
}
.volets-loading {
    grid-column: 1/-1;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    color: var(--text-muted); font-size: .95rem; padding: 40px;
}
.volets-spin { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.volets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.volets-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px; padding: 16px;
    transition: opacity .2s;
}
.volets-card.volets-busy { opacity: .5; pointer-events: none; }

.volets-card-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.volets-icon {
    font-size: 2rem; color: #6366f1;
    background: rgba(99,102,241,.12);
    border-radius: 10px; padding: 6px;
}
.volets-card-info { flex: 1; min-width: 0; }
.volets-label {
    font-size: .95rem; font-weight: 700;
    color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.volets-last-cmd     { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.volets-last-cmd-none{ font-style: italic; }

.volets-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.volets-dot-open    { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.5); }
.volets-dot-closed  { background: #64748b; }
.volets-dot-unknown { background: #334155; }

.volets-btns {
    display: flex; gap: 8px; justify-content: stretch;
}
.volets-btn {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 4px; padding: 10px 0; border: none; border-radius: 10px;
    font-size: .8rem; font-weight: 600; cursor: pointer;
    transition: filter .15s, transform .1s;
}
.volets-btn:active { transform: scale(.96); }
.volets-btn.volets-open  { background: rgba(34,197,94,.15);  color: #22c55e; }
.volets-btn.volets-stop  { background: rgba(148,163,184,.12); color: #94a3b8; }
.volets-btn.volets-close { background: rgba(99,102,241,.15);  color: #818cf8; }
.volets-btn:hover { filter: brightness(1.2); }

.volets-global-btns {
    display: flex; gap: 12px; padding: 8px 0;
}
.volets-global-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 0; border: none; border-radius: 12px;
    font-size: .9rem; font-weight: 700; cursor: pointer;
    transition: filter .15s, transform .1s;
}
.volets-global-btn:active { transform: scale(.97); }
.volets-global-btn.volets-open  { background: rgba(34,197,94,.18);  color: #22c55e; }
.volets-global-btn.volets-stop  { background: rgba(148,163,184,.15); color: #94a3b8; }
.volets-global-btn.volets-close { background: rgba(99,102,241,.18);  color: #818cf8; }
.volets-global-btn:hover { filter: brightness(1.2); }

/* =============================================================================
   PAGE TUYA DOMOTIQUE
   ============================================================================= */
.tuya-section { margin-bottom: 24px; }
.tuya-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: .85rem; font-weight: 700; letter-spacing: .08em;
    color: var(--text-muted); text-transform: uppercase;
    margin-bottom: 12px;
}
.tuya-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.tuya-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px; padding: 16px;
    transition: opacity .2s;
}
.tuya-card.tuya-offline { opacity: .55; }
.tuya-card.tuya-busy    { opacity: .4; pointer-events: none; }

.tuya-card-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.tuya-icon {
    font-size: 1.8rem;
    background: rgba(255,255,255,.06);
    border-radius: 10px; padding: 6px; flex-shrink: 0;
}
.tuya-card-info { flex: 1; min-width: 0; }
.tuya-label {
    font-size: .9rem; font-weight: 700; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tuya-sub { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }

.tuya-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tuya-dot-on  { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.5); }
.tuya-dot-off { background: #334155; }

/* Capteurs */
.tuya-sensor-values { display: flex; gap: 16px; }
.tuya-sensor-val    { display: flex; align-items: center; gap: 4px; }
.tuya-sensor-num    { font-size: 1.4rem; font-weight: 800; color: var(--text-main); }
.tuya-sensor-unit   { font-size: .8rem; color: var(--text-muted); }

/* Toggle ON/OFF */
.tuya-toggle-row { display: flex; }
.tuya-toggle-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px; border: none; border-radius: 10px;
    font-size: .85rem; font-weight: 700; cursor: pointer;
    transition: filter .15s, transform .1s;
}
.tuya-toggle-btn:active { transform: scale(.97); }
.tuya-on  { background: rgba(34,197,94,.15);  color: #22c55e; }
.tuya-off { background: rgba(100,116,139,.12); color: #64748b; }
.tuya-toggle-btn:hover { filter: brightness(1.2); }

/* Puissance */
.tuya-power {
    font-size: .8rem; font-weight: 700; color: #f59e0b;
    background: rgba(245,158,11,.1); border-radius: 6px;
    padding: 2px 8px; margin-bottom: 8px; display: inline-block;
}

/* Arrosage */
.tuya-zones { display: flex; flex-direction: column; gap: 6px; }
.tuya-zone-row {
    display: flex; align-items: center; gap: 8px;
}
.tuya-zone-label { flex: 1; font-size: .82rem; color: var(--text-muted); }
.tuya-zone-timer { font-size: .72rem; color: #38bdf8; }
.tuya-zone-btn {
    padding: 4px 14px; border: none; border-radius: 8px;
    font-size: .78rem; font-weight: 700; cursor: pointer;
    transition: filter .15s;
}
.tuya-zone-btn:hover { filter: brightness(1.2); }
.tuya-zone-on  { background: rgba(34,197,94,.18);  color: #22c55e; }
.tuya-zone-off { background: rgba(100,116,139,.12); color: #64748b; }

/* Bouton Planning */
.tuya-planning-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: 8px; border: none; cursor: pointer;
    background: rgba(148,163,184,.1); color: var(--text-soft);
    font-size: .78rem; font-weight: 500; transition: filter .15s;
    margin-left: 8px;
}
.tuya-planning-btn:hover { filter: brightness(1.3); }

/* Zone planning dépliable */
.tuya-planning-zone {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

/* Ligne d'une règle de planning */
.tuya-planning-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 4px; border-radius: 8px;
    font-size: .82rem;
}
.tuya-planning-row + .tuya-planning-row { border-top: 1px solid rgba(148,163,184,.08); }
.tuya-planning-inactive { opacity: .45; }           /* Règle inactive = grisée */

/* Heure en gros */
.tuya-planning-heure {
    font-family: monospace; font-size: 1rem; font-weight: 700;
    color: var(--text-main); min-width: 44px;
}

/* Détail jours + action */
.tuya-planning-detail {
    flex: 1; display: flex; flex-direction: column; gap: 1px;
}
.tuya-planning-jours  { color: var(--text-soft); font-size: .75rem; }
.tuya-planning-action { color: var(--text-main); font-weight: 600; }
.tuya-planning-nom    { color: var(--text-soft); font-size: .72rem; font-style: italic; }

/* Badge actif / inactif */
.tuya-planning-badge {
    font-size: .7rem; font-weight: 600; padding: 2px 8px;
    border-radius: 20px; white-space: nowrap;
}
.tuya-planning-on  { background: rgba(34,197,94,.15);  color: #22c55e; }
.tuya-planning-off { background: rgba(100,116,139,.12); color: #64748b; }

/* Radiateurs : consigne, mode, programme semaine, réglages avancés */
.tuya-card-large { grid-column: 1 / -1; }            /* Programme ouvert : la carte prend toute la largeur */
.rad-consigne { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.rad-consigne span { min-width: 58px; text-align: center; font-weight: 800; font-size: 1rem; color: var(--text-main); }
.rad-consigne button {
    width: 34px; height: 38px; border: none; border-radius: 10px; cursor: pointer;
    background: rgba(148,163,184,.1); color: var(--text-main); font-size: 1.1rem; font-weight: 700;
}
.rad-consigne button:hover { filter: brightness(1.3); }
.rad-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.rad-ligne .tuya-planning-btn { margin-left: 0; }
.rad-mode { flex: 1 1 100%; display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-soft); }  /* Mode sur sa propre ligne */
.rad-mode select, .rad-copie select, .rad-reglage select {
    background: var(--card-bg); color: var(--text-main); border: 1px solid var(--card-border);
    border-radius: 8px; padding: 4px 6px; font-size: .8rem;
}
.rad-mode select { flex: 1; min-width: 0; }
.tuya-planning-btn.rad-actif { background: rgba(249,115,22,.18); color: #fb923c; }
.rad-erreur { margin-top: 8px; font-size: .75rem; color: #f87171; }
.rad-note { font-size: .74rem; color: var(--text-soft); margin: 6px 0; line-height: 1.4; }
.rad-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: .78rem; color: var(--text-soft); }
.rad-pinceaux { display: inline-flex; gap: 6px; }
.rad-pinceau { border: 2px solid transparent; border-radius: 8px; padding: 4px 12px; font-size: .78rem; font-weight: 700; cursor: pointer; color: #fff; opacity: .55; }
.rad-pinceau.actif { opacity: 1; border-color: var(--text-main); }
.rad-copie { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rad-copie .tuya-planning-btn { margin-left: 0; }
.rad-grille {
    display: grid; grid-template-columns: 30px repeat(24, 1fr); gap: 2px;
    touch-action: none; user-select: none;           /* Le doigt colorie au lieu de faire défiler la page */
}
.rad-jour  { font-size: .7rem; color: var(--text-soft); align-self: center; }
.rad-heure { font-size: .62rem; color: var(--text-muted); text-align: left; }
.rad-case  { height: 22px; border-radius: 3px; cursor: pointer; }
.rad-v3 { background: #f97316; }                     /* Confort : orange */
.rad-v1 { background: #3b82f6; }                     /* Éco : bleu */
.rad-v0, .rad-v2 { background: #64748b; }            /* Valeur jamais vue (conservée telle quelle) : gris */
.rad-case.rad-maintenant { outline: 2px solid var(--text-main); outline-offset: -1px; }
.rad-actions { display: flex; gap: 8px; margin-top: 8px; }
.rad-actions .tuya-toggle-btn:disabled { opacity: .4; cursor: default; filter: none; }
.rad-reglage { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 2px; font-size: .8rem; color: var(--text-main); }
.rad-reglage + .rad-reglage { border-top: 1px solid rgba(148,163,184,.08); }
.rad-reglage small { display: block; font-size: .7rem; color: var(--text-soft); font-weight: 400; }
.rad-reglage input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; }

/* Prises : programmations, minuteur, réglages */
.capteur-stats { margin-top: 10px; font-size: .74rem; color: var(--text-soft); }   /* Min / moy / max de la période du graphique */
.capteur-stats strong { color: var(--text-main); }
.prise-minuteur { font-size: .76rem; font-weight: 700; color: #38bdf8; margin-bottom: 8px; }
.tuya-toggle-row .tuya-toggle-btn { min-width: 0; }   /* Le bouton Allumée/Éteinte rétrécit pour laisser la place aux autres */
.tuya-toggle-row .tuya-planning-btn { flex-shrink: 0; margin-left: 6px; padding: 6px 9px; }
.rad-reglage select { max-width: 48%; flex-shrink: 0; }
.rad-reglage > span { min-width: 0; }
.prise-actif input { width: 18px; height: 18px; cursor: pointer; }
.prise-icone { background: none; border: none; padding: 2px; cursor: pointer; color: var(--text-soft); display: inline-flex; }
.prise-icone .material-symbols-rounded { font-size: 1.1rem; }
.prise-icone:hover { color: var(--text-main); }
.tuya-planning-btn.prise-ajouter { margin: 8px 0 0; }
.prise-form { margin-top: 8px; padding: 10px; border-radius: 10px; background: rgba(148,163,184,.06); }
.prise-form-ligne { display: flex; gap: 8px; }
.prise-form-ligne input, .prise-form-ligne select {
    flex: 1; min-width: 0; background: var(--card-bg); color: var(--text-main); border: 1px solid var(--card-border);
    border-radius: 8px; padding: 6px 8px; font-size: .85rem;
}
.prise-jours { display: flex; gap: 4px; margin-top: 8px; }
.prise-jour {
    flex: 1; text-align: center; padding: 6px 0; border-radius: 8px; cursor: pointer; font-size: .75rem; font-weight: 700;
    background: rgba(100,116,139,.12); color: var(--text-soft); user-select: none;
}
.prise-jour.actif { background: rgba(167,139,250,.25); color: #c4b5fd; }
.prise-jour input { display: none; }                  /* La case est cachée : on clique sur l'étiquette du jour */

/* =============================================================================
   PLAN — Page plan interactif Roborock
   ============================================================================= */
.plan-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .plan-grid { grid-template-columns: 1fr; }
}
.plan-map-card, .plan-status-card { }
.plan-map-wrap {
    position: relative;
    background: #0f172a;
    border-radius: 12px;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.plan-map-wrap img {
    width: 100%;
    height: auto;
    display: block;
    image-rendering: pixelated;
    border-radius: 12px;
}
.plan-map-none {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: .9rem;
    padding: 40px;
}
.plan-map-none .material-symbols-rounded { font-size: 40px; color: #374151; }

/* Chips statut robot */
.plan-status-chips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0;
}
.plan-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
}
.plan-chip-icon {
    font-size: 22px;
    color: #10b981;
    flex-shrink: 0;
}
.plan-chip-label { font-size: .72rem; color: var(--text-muted); margin-bottom: 2px; }
.plan-chip-value { font-size: 1rem; font-weight: 700; color: var(--text); }

/* Boutons robot */
.plan-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0;
}
.plan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s, transform .1s;
}
.plan-btn:hover { filter: brightness(1.2); transform: translateY(-1px); }
.plan-btn:active { transform: translateY(0); }
.plan-btn-start  { background: rgba(16,185,129,.18); color: #10b981; }
.plan-btn-pause  { background: rgba(245,158,11,.15); color: #f59e0b; }
.plan-btn-charge { background: rgba(99,102,241,.18); color: #818cf8; }
.plan-btn-stop   { background: rgba(239,68,68,.15);  color: #f87171; }

/* Pièces */
.plan-rooms { margin-top: 6px; }
.plan-room-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    color: var(--text-muted);
    padding: 8px 0;
}
.plan-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: .85rem;
    padding: 10px 0;
}

/* =============================================================================
   THÈME MODE INVITÉ — fond sombre teal (#58E8C4) vs bleu nuit admin
   Uniquement en mode sombre : le mode clair annule ces surcharges ci-dessous.
   ============================================================================= */
body.role-user {
    background: radial-gradient(circle at top, #0b2a24 0, #020c09 55%);
}
body.role-user header {
    background: rgba(8, 38, 30, 0.88);
    border-bottom-color: rgba(88,232,196,0.25);
}
body.role-user .card {
    background: rgba(8, 34, 28, 0.95);
    border-color: rgba(88,232,196,0.15);
}
body.role-user .relais-card {
    background: rgba(8, 34, 28, 0.9);
}

/* =============================================================================
   CORRECTIF : mode clair + rôle invité — annule les surcharges role-user
   Sans ce bloc, le fond vert sombre et le thème clair entrent en conflit.
   ============================================================================= */
[data-theme="light"] body.role-user {
    background: none;                               /* Laisse le fond clair standard s'appliquer */
}
[data-theme="light"] body.role-user header {
    background: var(--card);                        /* Même en-tête que le thème clair normal */
    border-bottom-color: var(--border);
}
[data-theme="light"] body.role-user .card {
    background: var(--card);                        /* Fond blanc des cartes */
    border-color: var(--border);
}
[data-theme="light"] body.role-user .relais-card {
    background: var(--bg-alt);                      /* Fond alternatif clair */
}

/* =============================================================================
   CONSIGNE — lueur nocturne et mode bypass
   ============================================================================= */
@keyframes nuit-pulse {
    0%, 100% { text-shadow: 0 0 12px rgba(147,197,253,0.5), 0 0 28px rgba(147,197,253,0.25); }
    50%       { text-shadow: 0 0 20px rgba(147,197,253,0.8), 0 0 45px rgba(147,197,253,0.4); }
}
.consigne-stepper.en-nuit .stepper-val {
    color: #93c5fd;
    animation: nuit-pulse 3s ease-in-out infinite;
}
@keyframes bypass-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(56,189,248,0.3); }
    50%       { box-shadow: 0 0 22px rgba(56,189,248,0.65); }
}
.bypass-card.bypass-on {
    animation: bypass-pulse 2s ease-in-out infinite;
}

/* =============================================================================
   PAGE POÊLE PIAZZETTA
   ============================================================================= */
/* Carte d'état : réutilise .card, avec une grille état / réglages */
.poele-etat-card { margin-bottom: 8px; transition: opacity .2s; }
.poele-etat-card.volets-busy { opacity: .5; pointer-events: none; }  /* Grisée pendant l'envoi d'une commande */
.poele-etat-grid {
    display: grid; grid-template-columns: 1fr 1fr;   /* Deux colonnes : état à gauche, réglages à droite */
    gap: 20px; margin-bottom: 16px;
}
@media (max-width: 600px) { .poele-etat-grid { grid-template-columns: 1fr; } }  /* Une colonne sur téléphone */

/* Pastille d'état (couleur selon chauffe / repos / alarme) */
.poele-statut {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600;
}
.poele-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.poele-chauffe { background: rgba(249,115,22,.15); color: #fb923c; }            /* Orange : en marche */
.poele-chauffe .poele-dot { box-shadow: 0 0 8px rgba(249,115,22,.7); }
.poele-repos   { background: rgba(148,163,184,.15); color: var(--text-soft); }  /* Gris : éteint ou veille */
.poele-alarme  { background: rgba(239,68,68,.15); color: #f87171; }             /* Rouge : alarme */

.poele-temp-big { font-size: 3rem; font-weight: 700; color: var(--text); margin-top: 10px; line-height: 1; }
.poele-temp-big small { font-size: 1.2rem; color: var(--text-soft); margin-left: 4px; }
.poele-sous-info { font-size: .8rem; color: var(--text-soft); margin-top: 6px; }
#poele-alarme { color: #f87171; font-weight: 600; }

/* Réglages consigne / puissance */
.poele-reglages { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.poele-reglage-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); margin-bottom: 6px; }
.poele-stepper { display: flex; align-items: center; gap: 12px; }
.poele-step-btn, .poele-p-btn {
    border: 1px solid var(--border); background: var(--bg-alt); color: var(--text);
    border-radius: 10px; cursor: pointer; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    transition: filter .15s, transform .1s;
}
.poele-step-btn { width: 40px; height: 40px; }
.poele-step-btn:active, .poele-p-btn:active { transform: scale(.95); }
.poele-step-val { font-size: 1.4rem; font-weight: 700; min-width: 70px; text-align: center; }
.poele-puissances { display: flex; gap: 6px; flex-wrap: wrap; }
.poele-p-btn { width: 44px; height: 36px; font-size: .85rem; }
.poele-p-btn.actif { background: rgba(249,115,22,.18); border-color: #fb923c; color: #fb923c; }  /* Puissance choisie */

.poele-btn-on  { background: rgba(249,115,22,.18) !important; color: #fb923c !important; }  /* Bouton Allumer orange */
.poele-btn-off { background: rgba(148,163,184,.15) !important; color: #94a3b8 !important; } /* Bouton Éteindre gris */
.poele-note { font-size: .78rem; color: var(--text-soft); margin-top: 8px; line-height: 1.4; }

/* Cartes des programmes horaires */
.poele-prog { display: flex; flex-direction: column; gap: 12px; }
.poele-prog-off { opacity: .6; }                                     /* Programme désactivé : atténué */
.poele-prog-head { display: flex; align-items: center; justify-content: space-between; }
.poele-prog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.poele-prog-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; color: var(--text-soft); }
.poele-prog-grid input, .poele-prog-grid select {
    background: var(--bg-alt); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 7px 8px; font-size: .9rem; font-family: inherit;
}
.poele-prog-actions { gap: 8px; }
.poele-btn-save { background: rgba(249,115,22,.18) !important; color: #fb923c !important; }

/* Jours de la semaine (P3/P4) : pastilles cliquables */
.poele-jours { display: flex; gap: 5px; }
.poele-jour { flex: 1; cursor: pointer; }
.poele-jour input { display: none; }                                 /* Case à cocher cachée, on affiche la pastille */
.poele-jour span {
    display: flex; align-items: center; justify-content: center; height: 30px;
    border-radius: 8px; border: 1px solid var(--border); font-size: .8rem; font-weight: 600; color: var(--text-soft);
}
.poele-jour input:checked + span { background: rgba(249,115,22,.18); border-color: #fb923c; color: #fb923c; }
.poele-jours-tous { font-size: .8rem; color: var(--text-soft); font-style: italic; height: 30px; display: flex; align-items: center; }

/* Interrupteur activer / désactiver */
.poele-switch { position: relative; width: 42px; height: 24px; cursor: pointer; }
.poele-switch input { display: none; }
.poele-switch span {
    position: absolute; inset: 0; border-radius: 999px; background: rgba(148,163,184,.3); transition: background .2s;
}
.poele-switch span::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; transition: transform .2s;
}
.poele-switch input:checked + span { background: #fb923c; }
.poele-switch input:checked + span::after { transform: translateX(18px); }
.poele-discret { font-size: .72rem; color: var(--text-soft); text-transform: none; letter-spacing: 0; font-weight: 400; }  /* Petite mention grise */
.poele-ventilos { display: flex; flex-direction: column; gap: 6px; }
.poele-ventilo-ligne { display: flex; gap: 6px; align-items: center; }
.poele-ventilo-ligne .poele-discret { width: 56px; }                /* Étiquette "Couloir" / "Salon" alignée */
/* Boutons Allumer / Éteindre : taille ajustée au texte, sous la température */
.poele-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.poele-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border: none; border-radius: 10px;              /* Bouton compact */
    font-size: .85rem; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: filter .15s, transform .1s;
}
.poele-action-btn .material-symbols-rounded { font-size: 18px; }
.poele-action-btn:hover { filter: brightness(1.2); }
.poele-action-btn:active { transform: scale(.96); }

/* =============================================================================
   PAGE POÊLE — PROGRAMMATION DE LA SEMAINE (grille 30 min)
   ============================================================================= */
.pp-titre .poele-switch { margin-left: 8px; }                         /* Interrupteur à côté du titre */
.pp-card { transition: opacity .2s; }
.pp-card.volets-busy { opacity: .5; pointer-events: none; }          /* Grisée pendant l'enregistrement */
.pp-card.pp-inactif .pp-grille { opacity: .55; }                      /* Programmation désactivée : grille atténuée */
.pp-statut { font-size: .88rem; color: var(--text); margin-bottom: 12px; }

/* Palette d'ambiances */
.pp-palette { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pp-amb {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 6px 8px 6px 10px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg-alt);
}
.pp-amb.choisie { border-color: #fb923c; box-shadow: 0 0 0 1px #fb923c; }  /* Ambiance sélectionnée pour peindre */
.pp-pastille { width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; }
.pp-pastille-vide { border: 1px dashed var(--text-soft); }            /* Gomme "Arrêt" */
.pp-amb-nom { font-weight: 700; font-size: .85rem; }
.pp-amb-det { font-size: .72rem; color: var(--text-soft); }
.pp-amb-edit, .pp-copier {
    border: none; background: none; color: var(--text-soft); cursor: pointer;
    display: flex; align-items: center; padding: 2px; border-radius: 6px;
}
.pp-amb-edit .material-symbols-rounded, .pp-copier .material-symbols-rounded { font-size: 17px; }
.pp-amb-edit:hover, .pp-copier:hover { color: var(--text); background: rgba(148,163,184,.15); }
.pp-amb-ajout {
    display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 10px; cursor: pointer;
    border: 1px dashed var(--border); background: none; color: var(--text-soft); font-size: .82rem; font-family: inherit;
}

/* Éditeur d'ambiance */
.pp-editeur { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 12px; background: var(--bg-alt); }
.pp-editeur-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.pp-editeur input[type=color] { padding: 2px; height: 34px; }
.pp-btn-suppr { background: rgba(239,68,68,.12) !important; color: #f87171 !important; margin-right: auto; }

/* Outils et actions */
.pp-outils { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.pp-mode-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-soft); font-size: .78rem; font-family: inherit;
}
.pp-mode-btn .material-symbols-rounded { font-size: 16px; }
.pp-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.pp-actions .volets-btn { flex: 0 1 auto; padding: 9px 16px; }

/* La grille : colonne des jours + 48 créneaux + bouton copier ; défile horizontalement sur petit écran */
.pp-grille-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
.pp-grille {
    display: grid;
    grid-template-columns: 74px repeat(48, minmax(13px, 1fr)) 28px;  /* Jour | 48 créneaux | copier */
    min-width: 740px;                                                /* En dessous : défilement horizontal de la grille seule */
    user-select: none;
    touch-action: none;                                              /* Mode peindre : le doigt peint au lieu de faire défiler */
}
.pp-grille.pp-defiler { touch-action: pan-x pan-y; }                  /* Mode défiler : le doigt fait défiler */
.pp-heure { grid-column: span 2; font-size: .65rem; color: var(--text-soft); padding: 0 0 4px 2px; border-left: 1px solid var(--border); }
.pp-jour { font-size: .78rem; font-weight: 600; color: var(--text-soft); display: flex; align-items: center; }
.pp-jour.aujourdhui { color: #fb923c; }                               /* Jour actuel en orange */
.pp-case {
    height: 28px; background: rgba(148,163,184,.07);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    cursor: crosshair;
}
.pp-case.pp-pair { border-left: 1px solid var(--border); }            /* Trait à chaque heure pleine */
.pp-case.maintenant { box-shadow: inset 0 0 0 2px var(--text); }      /* Créneau actuel encadré */
.pp-grille.pp-defiler .pp-case { cursor: grab; }
.pp-copier { justify-content: center; }

/* Cartes P1–P4 verrouillées quand la grille est active */
.pp-verrou .poele-prog { opacity: .7; }
.pp-verrou .poele-switch, .pp-verrou .poele-jour { pointer-events: none; }

/* Page poêle — interrupteur du bip et zone alarmes */
.poele-bip { display: flex; align-items: center; gap: 10px; }
.poele-alarme-ok { display: flex; align-items: center; gap: 8px; color: var(--success); font-size: .88rem; margin-bottom: 8px; }
.poele-alarme-active {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
    background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35);
    border-radius: 12px; padding: 12px 14px; color: #f87171; font-size: .88rem;
}
.poele-alarme-active small { color: var(--text-soft); }
.poele-alarme-active .poele-action-btn { margin-left: auto; }
.poele-alarme-liste { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.poele-alarme-ligne { display: flex; align-items: center; gap: 10px; font-size: .82rem; flex-wrap: wrap; }
.poele-alarme-code {
    font-weight: 700; color: #f87171; background: rgba(239,68,68,.12);
    border-radius: 6px; padding: 1px 7px; min-width: 34px; text-align: center;
}
.poele-alarme-txt { flex: 1; min-width: 180px; }
/* Pastilles de couleurs distinctes dans l'éditeur d'ambiance */
.pp-teintes { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pp-teinte { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.pp-teinte:hover { transform: scale(1.1); }
.pp-teintes input[type=color] { width: 30px; height: 26px; padding: 1px; }
.pp-editeur-grid label:nth-child(2) { grid-column: span 2; }             /* Le champ couleur prend plus de place */
/* Page poêle — réglages Energy Saving */
.poele-es { display: flex; gap: 10px; flex-wrap: wrap; }
.poele-es label { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; color: var(--text-soft); }
.poele-es select {
    background: var(--bg-alt); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 8px; font-size: .85rem; font-family: inherit;
}
#poele-es-txt { margin-top: 4px; }

/* Page poêle — historique (graphique + statistiques) */
.ph-periodes { display: inline-flex; gap: 4px; margin-left: 8px; }
.ph-periode {
    border: 1px solid var(--border); background: var(--bg-alt); color: var(--text-soft);
    border-radius: 8px; padding: 2px 9px; font-size: .72rem; cursor: pointer; font-family: inherit;
    text-transform: none; letter-spacing: 0;
}
.ph-periode.actif { border-color: #fb923c; color: #fb923c; }          /* Période affichée */
.ph-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ph-stat { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; min-width: 110px; }
.ph-stat-titre { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.ph-stat-val { font-size: 1.05rem; font-weight: 700; margin-top: 2px; }
.ph-chart { height: 320px; position: relative; }
.ph-tooltip { min-height: 20px; padding: 4px 2px 0; font-size: .78rem; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ph-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

/* =============================================================================
   PAGE POÊLE — carte d'état réorganisée (en-tête + 4 tuiles + ligne d'options)
   ============================================================================= */
.pe-entete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pe-entete .poele-actions { margin: 0 0 0 auto; }                      /* Allumer / Éteindre poussés à droite */
.pe-tuiles {
    display: grid; gap: 12px;
    grid-template-columns: repeat(4, 1fr);                               /* Grand écran : 4 tuiles côte à côte */
}
@media (max-width: 1000px) { .pe-tuiles { grid-template-columns: repeat(2, 1fr); } }  /* Tablette : 2 × 2 */
@media (max-width: 520px)  { .pe-tuiles { grid-template-columns: 1fr; } }             /* Téléphone : une colonne */
.pe-tuile {
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-start;
}
.pe-tuile .poele-temp-big { margin-top: 0; font-size: 2.4rem; }
.pe-tuile .poele-sous-info { margin-top: 0; }
.pe-tuile .poele-stepper { justify-content: space-between; }
/* Boutons accolés (puissance) */
.pe-segment { display: flex; }
.pe-segment .poele-p-btn { flex: 1; width: auto; border-radius: 0; margin-left: -1px; }
.pe-segment .poele-p-btn:first-child { border-radius: 10px 0 0 10px; margin-left: 0; }
.pe-segment .poele-p-btn:last-child { border-radius: 0 10px 10px 0; }
.pe-segment .poele-p-btn.actif { position: relative; z-index: 1; }
.pe-tuile .poele-ventilo-ligne .poele-p-btn { flex: 1; width: auto; height: 32px; }
.pe-tuile .poele-ventilo-ligne .poele-discret { width: 50px; }
/* Ligne d'options discrète */
.pe-options {
    display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.pe-opt-titre { margin: 0; }
.pe-opt { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-soft); }
.pe-opt select {
    background: var(--bg-alt); color: var(--text); border: 1px solid var(--border);
    border-radius: 7px; padding: 3px 6px; font-size: .8rem; font-family: inherit;
}
.pe-bip { margin-left: auto; cursor: pointer; }                        /* Bip à droite de la ligne */
#poele-alarme:empty { display: none; }

/* Bloc repliable (programmes internes du poêle) */
.pe-repli > summary { list-style: none; cursor: pointer; }
.pe-repli > summary::-webkit-details-marker { display: none; }
.pe-repli > summary .pe-chevron { transition: transform .2s; margin-left: 4px; }
.pe-repli[open] > summary .pe-chevron { transform: rotate(180deg); }
.pe-repli > summary .poele-discret { text-transform: none; letter-spacing: 0; font-weight: 400; }
/* Choix Peindre / Défiler : deux boutons accolés, le mode actif surligné (PC et téléphone) */
.pp-mode { display: inline-flex; }
.pp-mode .pp-mode-btn { border-radius: 0; margin-left: -1px; }
.pp-mode .pp-mode-btn:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.pp-mode .pp-mode-btn:last-child { border-radius: 0 8px 8px 0; }
.pp-mode .pp-mode-btn.actif { border-color: #fb923c; color: #fb923c; background: rgba(249,115,22,.12); position: relative; z-index: 1; }
.pp-grille.pp-defiler .pp-case { cursor: grab; }                     /* Mode défiler : main pour saisir la grille */

/* Page poêle — granulés & entretien */
.pg-grille { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pg-grille { grid-template-columns: 1fr; } }
.pg-grand { font-size: 1.9rem; font-weight: 700; line-height: 1.1; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pg-grand small { font-size: 1rem; color: var(--text-soft); }
.pg-barre { height: 8px; border-radius: 999px; background: rgba(148,163,184,.18); overflow: hidden; }
.pg-barre > div { height: 100%; border-radius: 999px; transition: width .4s; }
.pg-remplir { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.pg-ligne { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; padding: 3px 0; border-bottom: 1px dashed var(--border); }
.pg-ligne:last-of-type { border-bottom: none; }
.pg-reglages { margin-top: 12px; }
.pg-reglages summary { cursor: pointer; margin-bottom: 8px; }
.pg-reserve { display: flex; align-items: center; gap: 6px; color: #f87171; font-weight: 600; font-size: .82rem; }  /* Réserve signalée par le poêle */
.pg-reserve .material-symbols-rounded { font-size: 18px; }
/* Tuile Pièce — comparaison des sondes */
.pe-sondes { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; color: var(--text-soft); }
.pe-sondes strong { color: var(--text); font-weight: 600; }
.pe-delta { font-size: .72rem; padding: 0 5px; border-radius: 5px; background: rgba(148,163,184,.15); color: var(--text-soft); }
.pe-delta.fort { background: rgba(234,179,8,.18); color: #eab308; }      /* Écart d'au moins 1 °C */
/* Entretien annuel */
.pg-annuel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: .82rem; display: flex; flex-direction: column; gap: 3px; }
.pg-annuel .material-symbols-rounded { font-size: 16px; vertical-align: -3px; margin-right: 3px; }
.pg-annuel.retard > div:first-child { color: #f87171; }                /* Échéance dépassée en rouge */
.pg-notes summary { cursor: pointer; }                                 /* Notes d'entretien repliables */
.pg-notes > div { margin-top: 4px; line-height: 1.45; }
.pe-notes { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; color: var(--text-soft); margin-top: 8px; }
.pe-notes textarea {
    background: var(--bg-alt); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 8px; font-size: .85rem; font-family: inherit; resize: vertical;
}
/* Allumer / Éteindre : deux boutons de même largeur (la plus grande des deux) */
.pe-entete .poele-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pe-entete .poele-action-btn { justify-content: center; }
/* Ligne d'options en deux colonnes : libellés à gauche, réglages alignés à droite (PC et téléphone) */
.pe-options { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 14px; max-width: 520px; }  /* Largeur limitée : libellé et réglage restent proches sur grand écran */
.pe-options select {
    background: var(--bg-alt); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 5px 8px; font-size: .82rem; font-family: inherit; min-width: 150px;
}
.pe-options .poele-switch { justify-self: end; }                         /* Interrupteur aligné à droite comme les listes */
.pe-opt-lib { font-size: .8rem; color: var(--text-soft); }
.pe-opt-aide { grid-column: 1 / -1; text-align: right; margin-top: -4px; }  /* Exemple de températures sous les deux listes */
/* Grille de la semaine : colonne des jours fixe pendant le défilement horizontal (noms jamais coupés) */
.pp-jour, .pp-coin {
    position: sticky; left: 0; z-index: 2;
    background: var(--card); padding-right: 6px;                        /* Fond opaque : les cases passent dessous */
}
.pp-heure { position: relative; z-index: 1; }

/* =============================================================================
   PAGE CUMULUS (Thermor Aéromax 6)
   ============================================================================= */
.cu-select {
    background: var(--bg-alt); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 6px 8px; font-size: .85rem; font-family: inherit; width: 100%;
}
.cu-precision { display: block; font-size: 0.68em; font-weight: 400; opacity: 0.7; }   /* Origine d'un chiffre (mesuré / estimé) */
.tc-option { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .82rem; color: var(--text-soft); cursor: pointer; }  /* Case « Afficher l'humidité » */
.cu-attente { color: #f59e0b; }                                           /* Consigne pas encore confirmée par le cumulus */
.cu-absence { max-width: none; }                                       /* La ligne absence peut prendre toute la largeur */
.cu-absence-dates { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cu-absence-dates input {
    background: var(--bg-alt); color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; padding: 4px 6px; font-family: inherit;
}
/* Plages horaires : une ligne par jour, 3 plages possibles */
.cu-jour { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.cu-jour:last-child { border-bottom: none; }
.cu-jour-nom { width: 80px; font-size: .82rem; font-weight: 600; color: var(--text-soft); }
.cu-plage { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--text-soft); }
.cu-plage input {
    background: var(--bg-alt); color: var(--text); border: 1px solid var(--border);
    border-radius: 7px; padding: 3px 5px; font-family: inherit; font-size: .82rem;
}
.cu-jour-ok { margin-left: auto; padding: 5px 12px; }

/* =============================================================================
   MAISON — Page de garde : la maison au centre, les équipements autour
   ============================================================================= */
.mz-entete { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; }  /* Toujours sur une ligne, même sur téléphone */
/* Bouton du thème clair / sombre, de la même hauteur que le bloc d'accès */
.mz-theme {
    display: flex; align-items: center; gap: 2px; padding: 5px 9px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--border); background: none; color: var(--text-soft);
}
.mz-theme:hover { color: var(--accent); border-color: var(--accent); }
.mz-theme .material-symbols-rounded { font-size: 1.15rem; }
#push_btn { padding: 8px 10px; }                                          /* Cloche de l'accueil : une seule icône */
#push_btn.mz-cloche-active { color: var(--accent); border-color: var(--accent); }   /* Appareil abonné : cloche en couleur d'accent */
/* Accès : rôle actuel + connexion admin / déconnexion */
.mz-acces {
    display: flex; align-items: center; border-radius: 12px; overflow: hidden; font-size: .78rem; font-weight: 600;
    border: 1px solid var(--border); color: var(--text-soft);
}
.mz-acces > * { display: flex; align-items: center; gap: 5px; padding: 6px 10px; }
.mz-acces a { color: inherit; text-decoration: none; border-left: 1px solid var(--border); }
.mz-acces a:hover { background: var(--accent-soft); color: var(--accent); }
.mz-acces .material-symbols-rounded { font-size: 1.05rem; }
.mz-acces-admin { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }

/* Bandeau d'alertes */
.mz-alerte {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px;
    background: rgba(249,115,115,.12); border: 1px solid rgba(249,115,115,.4); color: var(--danger);
    font-size: .85rem; font-weight: 600; text-decoration: none;
}

/* La scène : même proportions que le dessin (1000 × 640) pour que les bulles tombent au bout des liaisons */
.mz-scene {
    position: relative; width: 100%; max-width: 1100px; margin: 0 auto; aspect-ratio: 1000 / 640;
    container-type: inline-size;                     /* Tailles des bulles proportionnelles à la largeur de la scène */
    background: radial-gradient(ellipse at 50% 55%, rgba(56,189,248,.10), transparent 60%);
}
.mz-dessin { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mz-liens path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.mz-liens path.mz-flux { opacity: .95; stroke-dasharray: 7 9; animation: mz-flux 1.2s linear infinite; }  /* Équipement en marche : flux animé */
@keyframes mz-flux { to { stroke-dashoffset: -16; } }
/* Le noyau central : disque, anneaux, réseau qui relie les équipements */
.mz-reseau { fill: none; stroke: var(--border); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.mz-disque { fill: var(--card-bg); stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1.5; }
.mz-anneau { fill: none; stroke: color-mix(in srgb, var(--accent) 22%, transparent); stroke-width: 10; }
.mz-anneau-tournant {
    fill: none; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 2; stroke-dasharray: 3 14; stroke-linecap: round;
    transform-origin: 500px 325px; animation: mz-tourne 60s linear infinite;      /* Rotation lente : la maison « vit » */
}
@keyframes mz-tourne { to { transform: rotate(360deg); } }
@keyframes mz-tirets { to { stroke-dashoffset: -170; } }                        /* Tirets qui défilent le long de l'ovale (téléphone) */
.mz-separateur { stroke: var(--border); stroke-width: 1.5; }
/* Rond central : date, heure, météo (la météo est un lien vers la page Météo) */
.mz-c-lien-meteo { cursor: pointer; }
.mz-c-zone-meteo { fill: transparent; transition: fill .15s; }                     /* Zone cliquable, visible au survol */
.mz-c-lien-meteo:hover .mz-c-zone-meteo { fill: var(--accent-soft); }
.mz-centre text { text-anchor: middle; }
.mz-c-date  { fill: var(--text-soft); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.mz-c-heure { fill: var(--text-main); font-size: 64px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mz-c-meteo { fill: var(--text-main); font-size: 24px; font-weight: 700; }
.mz-c-meteo-detail { fill: var(--text-soft); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .mz-anneau-tournant, .mz-liens path.mz-flux { animation: none; } }

/* Bulles des équipements */
.mz-bulle {
    --c: var(--accent);
    position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
    width: 19cqw; display: flex; align-items: center; gap: 1cqw; padding: 1cqw 1.2cqw;
    border-radius: 2cqw; text-decoration: none; color: var(--text-main);
    background: var(--card-bg); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
    box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.mz-bulle:hover { transform: translate(-50%, -50%) scale(1.05); border-color: var(--c); }
.mz-bulle.mz-actif { box-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent); border-color: var(--c); }
.mz-bulle.mz-en-alerte { border-color: var(--danger); box-shadow: 0 0 22px rgba(249,115,115,.45); }
.mz-rond {
    flex-shrink: 0; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c);
}
.mz-rond .material-symbols-rounded { font-size: 2.6cqw; }
.mz-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mz-nom    { font-size: 1.9cqw; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* Nom de l'équipement en gros et gras */
.mz-valeur { font-size: 1.15cqw; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* Valeur en petites capitales, jamais hors de la bulle */
.mz-detail { font-size: 1.05cqw; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Raccourcis vers les autres pages : une ligne de 6 boutons sous le schéma */
.mz-raccourcis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 1000px; margin: 16px auto 0; }
.mz-raccourci {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 10px 8px;
    border-radius: 14px; background: var(--card-bg); border: 1px solid var(--card-border);
    color: var(--text-main); font-size: .85rem; text-decoration: none; transition: border-color .15s, color .15s;
}
.mz-raccourci > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-raccourci .material-symbols-rounded { font-size: 1.3rem; color: var(--accent); }
.mz-raccourci:hover { border-color: var(--accent); color: var(--accent); }

/* Petit écran : maison recadrée en haut, bulles en grille de 2 colonnes, liaisons masquées */
@media (max-width: 759px) {
    /* Téléphone : tout l'accueil tient sur un écran sans défiler */
    .mz-entete { padding-bottom: 6px; }
    .mz-scene { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: none; }  /* 2 bulles par ligne */
    .mz-dessin { position: static; grid-column: 1 / -1; height: min(calc((100vw - 40px) / 2), 32vh); }   /* Ovale horizontal (2 × plus large que haut), plus bas sur les petits écrans */
    .mz-anneau-tournant { animation: mz-tirets 40s linear infinite; }   /* Ovale : les tirets défilent (une ellipse qui tourne se déformerait) */
    .mz-liens, .mz-reseau { display: none; }   /* Téléphone : ni liaisons ni réseau, seulement le noyau */
    /* Le noyau est réduit : ses textes sont agrandis pour rester lisibles */
    .mz-c-date  { font-size: 18px; }
    .mz-c-heure { font-size: 72px; }
    .mz-c-meteo { font-size: 28px; }
    .mz-c-meteo-detail { font-size: 18px; }
    .mz-bulle { position: static; transform: none; width: auto; min-width: 0; gap: 8px; padding: 8px 10px; border-radius: 14px; }
    .mz-bulle:hover { transform: none; }
    .mz-rond { width: 34px; height: 34px; }
    .mz-rond .material-symbols-rounded { font-size: 1.2rem; }
    .mz-nom { font-size: .98rem; }
    .mz-valeur { font-size: .64rem; }
    .mz-detail { font-size: .7rem; line-height: 1.25; white-space: normal;      /* Détail sur 2 lignes au lieu d'être coupé */
                 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; min-height: 2.5em; }
    /* Téléphone : les 5 raccourcis sur une seule ligne, icône seule (le nom s'affiche au survol / appui long) */
    .mz-raccourcis { gap: 8px; margin-top: 8px; }
    .mz-raccourci { padding: 9px 2px; border-radius: 12px; }
    .mz-raccourci > span:last-child { display: none; }                  /* Nom masqué : les icônes suffisent */
    .mz-raccourci .material-symbols-rounded { font-size: 1.45rem; }
}

/* =============================================================================
   PAGE ÉNERGIE (en-*) : direct, 24 h, solaire, bilan, détail
   ============================================================================= */
:root {
    --en-solaire: #fbbf24;   /* Jaune : production solaire */
    --en-jacuzzi: #38bdf8;   /* Bleu : jacuzzi */
    --en-cumulus: #f43f5e;   /* Rose : cumulus */
    --en-reseau:  #a78bfa;   /* Violet : électricité achetée */
    --en-kva:     #4ade80;   /* Vert : pic de puissance */
    --en-bilan:   #fbbf24;   /* Couleur de la tuile « bilan » (changée par energie.js) */
}
.en-page { display: flex; flex-direction: column; gap: 14px; }                      /* Sections empilées */
.en-page > .card { margin: 0; }
.en-titre-icone { font-size: 1.1rem; vertical-align: middle; margin-right: 4px; }
.en-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.en-tuile {
    --c: var(--accent);
    min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--bg-alt);
    border: 1px solid var(--border); border-left: 3px solid var(--c);                 /* Liseré de la couleur du sujet */
}
.en-tuile-simple { border-left-color: var(--en-solaire); }
.en-tuile-nom { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }
.en-tuile-nom .material-symbols-rounded { font-size: 1.05rem; color: var(--c); }
.en-tuile-val { font-size: 1.35rem; font-weight: 800; color: var(--text-main); margin-top: 4px; font-variant-numeric: tabular-nums; }
.en-tuile-sub { font-size: .72rem; color: var(--text-soft); margin-top: 2px; }
/* Barre de répartition de la production solaire */
.en-barre { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--bg-alt); gap: 2px; }
.en-barre span { min-width: 3px; }
/* Graphiques */
.en-graph { position: relative; height: 230px; }
.en-graph-bas { height: 180px; }
.en-sous-titre { margin: 18px 0 6px; font-size: .85rem; font-weight: 700; color: var(--text-main); }
/* Bilan : choix de la période, boutons, alerte, note */
.en-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.en-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; border: none; cursor: pointer;
    background: var(--accent-soft); color: var(--accent); font-size: .8rem; font-weight: 600;
}
.en-btn .material-symbols-rounded { font-size: 1rem; }
.en-tourne { animation: mz-tourne 1s linear infinite; }                              /* Icône qui tourne pendant l'import */
.en-periodes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.en-periodes button {
    padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-alt);
    color: var(--text-soft); font-size: .8rem; cursor: pointer;
}
.en-periodes button.actif { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.en-alerte {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; font-size: .82rem;
    background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.4); color: var(--danger);
}
.en-alerte[hidden] { display: none; }
.en-note { margin: 14px 0 0; font-size: .75rem; color: var(--text-soft); line-height: 1.5; }
/* Détail jour par jour (repliable) */
.en-detail > summary { cursor: pointer; list-style: none; display: flex; align-items: center; }
.en-detail > summary::-webkit-details-marker { display: none; }
.en-detail > summary::after { content: "expand_more"; font-family: "Material Symbols Rounded"; margin-left: auto; color: var(--text-soft); }
.en-detail[open] > summary::after { content: "expand_less"; }
.en-tableau-zone { overflow-x: auto; margin-top: 12px; }
.en-tableau { width: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.en-tableau th { padding: 7px 10px; text-align: right; color: var(--text-soft); font-weight: 500; background: var(--bg-alt); white-space: nowrap; }
.en-tableau td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--border); color: var(--text-main); white-space: nowrap; }
.en-tableau th:first-child, .en-tableau td:first-child { text-align: left; }
.en-tableau .en-depasse { color: var(--danger); font-weight: 700; }                 /* Pic au-dessus du contrat */
@media (max-width: 600px) {
    .en-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }                   /* Téléphone : 2 tuiles par ligne */
    .en-tuile-val { font-size: 1.1rem; }
    .en-graph { height: 200px; }
}
/* Maintenance : carte-lien vers la page Énergie (remplace l'ancienne section solaire) */
.mnt-lien-energie { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text-main); }
.mnt-lien-energie > .material-symbols-rounded:first-child { font-size: 1.8rem; color: var(--en-solaire); }
.mnt-lien-energie > .material-symbols-rounded:last-child { margin-left: auto; color: var(--text-soft); }
.mnt-lien-energie:hover { border-color: var(--accent); }

/* =============================================================================
   PAGE MÉTÉO (me-*) : en ce moment, prochaines heures, 7 jours (tuiles et graphiques : classes en-* de la page Énergie)
   ============================================================================= */
.me-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.me-hero-icone { font-size: 3.4rem; line-height: 1; }
.me-hero-temp { font-size: 2.6rem; font-weight: 800; color: var(--text-main); line-height: 1.1; font-variant-numeric: tabular-nums; }
.me-hero-desc { font-size: .9rem; color: var(--text-soft); }
.me-hero-jour { margin-left: auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: .9rem; color: var(--text-main); }
.me-hero-jour > div { display: flex; align-items: center; gap: 6px; }
.me-hero-jour .material-symbols-rounded { font-size: 1.1rem; color: var(--en-solaire); }
.me-fleche { font-size: 1rem; vertical-align: -2px; color: var(--c); display: inline-block; }    /* Flèche du sens du vent */
/* Bandeau des 24 prochaines heures (défile sur le côté) */
.me-heures { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; }
.me-heure {
    flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px;
    border-radius: 12px; background: var(--bg-alt); border: 1px solid var(--border); font-size: .85rem; color: var(--text-main);
}
.me-heure-icone { font-size: 1.4rem; line-height: 1.2; }
.me-heure-pluie { font-size: .68rem; color: var(--en-jacuzzi); min-height: 1em; }
/* 7 jours : une ligne par jour */
.me-jours { display: flex; flex-direction: column; }
.me-jour {
    display: grid; grid-template-columns: 110px 36px minmax(0, 1fr) 200px; align-items: center; gap: 4px 12px;
    padding: 10px 2px; border-bottom: 1px solid var(--border); color: var(--text-main);
}
.me-jour:last-child { border-bottom: none; }
.me-jour-nom { font-weight: 700; text-transform: capitalize; }
.me-jour-icone { font-size: 1.6rem; text-align: center; }
.me-jour-desc { font-size: .85rem; color: var(--text-soft); min-width: 0; }
.me-jour-temp { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.me-barre { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--bg-alt); }
.me-barre > span { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #38bdf8, #f97316); }
.me-jour-infos { grid-column: 3 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .75rem; color: var(--text-soft); }
.me-jour-infos > span { display: inline-flex; align-items: center; gap: 3px; }
.me-jour-infos .material-symbols-rounded { font-size: .95rem; }
@media (max-width: 600px) {
    .me-hero-jour { margin-left: 0; align-items: flex-start; }
    .me-jour { grid-template-columns: minmax(0, 1fr) 32px 150px; }     /* Jour, icône, températures */
    .me-jour-desc { display: none; }                                   /* Téléphone : l'icône suffit (description au survol) */
    .me-jour-infos { grid-column: 1 / -1; }
}

/* =============================================================================
   BOUTONS DE NAVIGATION — même apparence partout que les raccourcis de l'accueil
   (« Accueil » en haut et en bas de chaque page, thème clair / sombre, accès de l'accueil)
   Placé en fin de fichier : remplace les anciens styles de ces boutons.
   ============================================================================= */
.maint-back-link, .footer-btn, .mz-theme,
[data-theme="light"] .footer-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box; min-height: 40px; padding: 8px 14px; border-radius: 14px; cursor: pointer;   /* 40 px de haut, bordure comprise */
    background: var(--card-bg); border: 1px solid var(--card-border);
    color: var(--text-main); font-size: .85rem; font-weight: 500; text-decoration: none;
    transition: border-color .15s, color .15s;
}
.maint-back-link .material-symbols-rounded, .footer-btn .material-symbols-rounded, .mz-theme .material-symbols-rounded {
    font-size: 1.3rem; color: var(--accent);                     /* Icône de la couleur d'accent, comme sur l'accueil */
}
.maint-back-link:hover, .footer-btn:hover, .mz-theme:hover,
[data-theme="light"] .footer-btn:hover {
    background: var(--card-bg); border-color: var(--accent); color: var(--accent);   /* Survol : bordure et texte d'accent */
}
.footer-theme-btn, .mz-theme { padding: 8px 12px; gap: 2px; }   /* Bouton thème : deux icônes serrées */
/* Accès de l'accueil (rôle + connexion / déconnexion) : même hauteur, même fond, mêmes arrondis */
.mz-acces { box-sizing: border-box; min-height: 40px; border-radius: 14px; background: var(--card-bg); border-color: var(--card-border); color: var(--text-main); }
.mz-acces .material-symbols-rounded { font-size: 1.2rem; color: var(--accent); }
.mz-acces-admin { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
/* Invité (non connecté) : accès restreint mis en évidence en ambre, pour qu'on voie tout de suite qu'on n'est pas connecté en Admin */
.mz-acces-invite { border-color: #f59e0b; }                                                   /* Contour ambre autour du badge */
.mz-acces-invite .mz-acces-role { background: rgba(245,158,11,0.15); color: #f59e0b; }        /* Segment « Invité » sur fond ambre */
.mz-acces-invite .mz-acces-role .material-symbols-rounded { color: #f59e0b; }                 /* Icône du rôle en ambre aussi */

/* =============================================================================
   EN-TÊTE DES PAGES — une seule ligne : nom de la page à gauche, Accueil (et Admin si besoin) à droite
   Placé en fin de fichier : remplace la mise en colonne sur téléphone. La date et l'heure ne sont plus affichées.
   ============================================================================= */
header { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; }
header .title-block { min-width: 0; }                              /* Le titre peut rétrécir… */
header .title-block h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* …et finir par « … » */
header > div:last-child { flex-wrap: nowrap; flex-shrink: 0; gap: 8px; }   /* Boutons toujours sur la même ligne */
header .datetime { display: none !important; }                     /* Plus de date ni d'heure en haut des pages */
/* Icône de la page devant son nom : la même que sur l'accueil (couleur de la bulle, ou couleur d'accent pour les raccourcis) */
header .page-icone { font-size: 1.7rem; color: var(--accent); flex-shrink: 0; margin-right: -4px; }   /* Ne rétrécit jamais, collée au titre */
@media (max-width: 600px) {
    header { padding: 10px 16px; }
    header .logo-img { display: none; }                            /* Téléphone : place gagnée pour le titre */
    header .title-block h1 { font-size: 1.15rem; }
    header .page-icone { font-size: 1.45rem; }                    /* Téléphone : icône un peu plus petite */
    /* Téléphone : boutons de l'en-tête en icône seule (le nom reste au survol / appui long) */
    header .maint-back-link { font-size: 0; gap: 0; padding: 8px 10px; }
}