/* Écrin — module Énergie « Villa Écrin » (0.120.0). Écrit par Grok le 15/09/2026 sur le cahier
   des charges d'Écrin, relu et corrigé à l'intégration (découpes d'origine, format portrait,
   axes des courbes, collisions de noms). ES2017, fonctions globales, sans dépendance. */
/* energie-scene.css — scène Villa Écrin. Toutes les règles sous .scene-villa. */

.scene-villa {
  width: 100%;
  height: auto;
  display: block;
  background: #0a0908;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

.scene-villa.tv {
  height: 100%;
}

.scene-villa .rail {
  fill: none;
  stroke: var(--or, #d8ab6a);
  stroke-width: 2.6;
  stroke-dasharray: 1 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}

.scene-villa .halo {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.22;
}

.scene-villa .coeur {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

.scene-villa .pts {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 0.01 22;
  animation: sv-points var(--dur, 2s) linear infinite var(--sens, normal);
}

/* format portrait (téléphone) : le viewBox fait 1000 de large pour 390 px d'écran,
   les traits et les points sont grossis d'autant */
.scene-villa[data-format="portrait"] .rail { stroke-width: 4; stroke-dasharray: 1.5 13; }
.scene-villa[data-format="portrait"] .halo { stroke-width: 22; }
.scene-villa[data-format="portrait"] .coeur { stroke-width: 2.8; }
.scene-villa[data-format="portrait"] .pts { stroke-width: 9.5; stroke-dasharray: 0.01 27.5; animation-name: sv-points-p; }
.scene-villa[data-format="portrait"] .leader { stroke-width: 1.6; }

.scene-villa .flux.off .halo,
.scene-villa .flux.off .coeur,
.scene-villa .flux.off .pts {
  opacity: 0;
  animation: none;
}

/* 0.136.0 — format CARRÉ (téléphone) : le rendu Grok entier ; les flux courent sur SES
   lignes (teinte + lueur + points), une ligne sans courant est voilée de noir.
   Viewbox 1408 pour ~360 px d'écran : 84 u. entre deux points, 130 u/s pour tous. */
.scene-villa[data-format="carre"] .voile {
  fill: none;
  stroke: #050404;
  stroke-width: 52;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .7s;
}
.scene-villa[data-format="carre"] .flux.off .voile,
.scene-villa[data-format="carre"] .voile.fixe { opacity: .82; }
/* la ligne d'un objet que le site n'a pas : effacée, pas seulement éteinte */
.scene-villa[data-format="carre"] .voile.efface { opacity: 1; stroke-width: 84; }
.scene-villa[data-format="carre"] .voile.fixe.fin { stroke-width: 22; }
.scene-villa[data-format="carre"] .halo { stroke-width: 16; opacity: .3; transition: stroke .7s, opacity .5s; }
.scene-villa[data-format="carre"] .coeur { stroke-width: 4.5; opacity: .75; transition: stroke .7s, opacity .5s; }
.scene-villa[data-format="carre"] .pts {
  stroke-dasharray: 0.1 84;
  animation-name: sv-points-c;
  transition: stroke .7s;
}
.scene-villa[data-format="carre"] .nuit { transition: opacity 1.2s; }
.scene-villa[data-format="carre"] .virtuel .estompe { fill: #050404; opacity: .45; }
.scene-villa[data-format="carre"] .virtuel .cadre { stroke-width: 3; stroke-dasharray: 12 10; }
.scene-villa[data-format="carre"] .lab { letter-spacing: 5px; }

.scene-villa .noeud .fond-noeud {
  fill: rgba(10, 9, 8, 0.86);
  stroke: var(--or, #d8ab6a);
  stroke-width: 1.6;
}

.scene-villa .noeud .icone {
  fill: none;
  stroke: var(--or, #d8ab6a);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene-villa .noeud .aura {
  fill: none;
  stroke: var(--or, #d8ab6a);
  stroke-width: 1.1;
  stroke-dasharray: 2 7;
  opacity: 0.55;
  transform-box: fill-box;
  transform-origin: center;
}

.scene-villa .noeud.actif .aura {
  animation: sv-aura 14s linear infinite;
}

.scene-villa .noeud.eteint {
  opacity: 0.35;
}

.scene-villa .lab {
  fill: rgba(255, 255, 255, 0.55);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 500;
}

.scene-villa .val {
  fill: #ffffff;
  font-weight: 600;
}

.scene-villa .sous {
  fill: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}

.scene-villa .leader {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
  fill: none;
}

.scene-villa .virtuel .cadre {
  fill: none;
  stroke: #3ee6a6;
  stroke-width: 1.6;
  stroke-dasharray: 6 5;
  opacity: 0.7;
}

.scene-villa .jauge-fond {
  fill: rgba(255, 255, 255, 0.12);
}

.scene-villa .jauge {
  fill: #3ee6a6;
}

@keyframes sv-points-p {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -27.51; }
}
@keyframes sv-points {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -22.01; }
}
@keyframes sv-points-c {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -84.1; }
}

@keyframes sv-aura {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-villa .pts,
  .scene-villa .noeud .aura,
  .scene-villa .noeud.actif .aura {
    animation: none !important;
  }
}

/* 0.136.0 — étiquettes du carré : lisibles sur le rendu, à la taille d'un téléphone.
   0.140.0 — plus fines (Ludovic, 19/09 : « les écritures plus fines ») : Montserrat
   servie par la box, un cran plus légère partout ; en plein écran, les chiffres en
   Montserrat légère, les libellés espacés */
.scene-villa[data-format="carre"] .lab { fill: rgba(255, 255, 255, 0.62); font-weight: 500; }
.scene-villa[data-format="carre"] .val { font-weight: 500; }
.scene-villa[data-format="carre"] .sous { fill: rgba(255, 255, 255, 0.66); font-weight: 400; }
.scene-villa[data-format="carre"][data-plein="1"] .lab { fill: rgba(255, 255, 255, 0.58); letter-spacing: 6px; }
.scene-villa[data-format="carre"][data-plein="1"] .val { font-weight: 300; }
.scene-villa[data-format="carre"][data-plein="1"] .sous { fill: rgba(255, 255, 255, 0.62); }