/* ÉCRIN — la villa vivante du site (habillage autour de energie-scene.css, copie de l'app).
   Police des étiquettes : Montserrat, servie par le site lui-même (aucune ressource externe).
   Trois dispositions posées par villa-site.js selon la largeur de la figure :
   .pile (la villa en colonne, la légende dessous), .cote (la colonne à gauche, la légende
   à droite), .large (la villa en large, la légende dessous). */
@font-face{
  font-family:Montserrat;font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../polices/montserrat.woff2") format("woff2");
}
.villa-vivante{
  margin:0;border:1px solid var(--bord);border-radius:26px;overflow:hidden;
  background:#0a0908;box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.villa-scene{position:relative;background:#0a0908;min-height:120px}
.villa-scene svg.scene-villa,.villa-scene svg.scene-villa.tv{width:100%;height:auto;display:block}
/* sur le site les textes sont petits : les sous-titres de la villa un cran plus lisibles */
.villa-vivante .scene-villa .sous{fill:rgba(255,255,255,.66)}
.villa-vivante .scene-villa .lab{fill:rgba(255,255,255,.7)}
/* hors du champ de vision : les points s'arrêtent (rien ne tourne pour rien) */
.villa-vivante.hors-champ .scene-villa .pts,
.villa-vivante.hors-champ .scene-villa .aura{animation-play-state:paused}

.villa-legende{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center;
  padding:22px 28px 26px;border-top:1px solid var(--bord);background:linear-gradient(180deg,#0e0c09,#0a0908);
}
.villa-heure{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.villa-heure .h{font-family:var(--serif);font-size:30px;color:var(--or);font-variant-numeric:tabular-nums}
.villa-heure .t{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--texte);font-weight:600}
.villa-phrase{margin-top:6px;font-size:15px;color:var(--texte2);min-height:3.2em;text-wrap:pretty}

.villa-types{display:flex;background:var(--carte);border:1px solid var(--bord);border-radius:999px;padding:4px;gap:4px}
.villa-types button{
  border:none;background:none;color:var(--texte2);font:inherit;font-size:13px;font-weight:600;
  padding:9px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s;
}
.villa-types button[aria-pressed="true"]{background:rgba(216,171,106,.16);color:var(--or-vif)}
.villa-types button:hover{color:var(--texte)}

.villa-moments{grid-column:1 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.villa-moments button{
  position:relative;overflow:hidden;text-align:left;cursor:pointer;
  background:var(--carte);border:1px solid var(--bord);border-radius:14px;padding:12px 14px 14px;
  color:var(--texte2);font:inherit;transition:border-color .2s,color .2s;
}
.villa-moments button:hover{border-color:rgba(216,171,106,.45);color:var(--texte)}
.villa-moments button.actif{border-color:rgba(216,171,106,.6);color:var(--texte)}
.villa-moments .ph{display:block;font-size:12px;letter-spacing:.08em;color:var(--or);font-variant-numeric:tabular-nums}
.villa-moments .pt{display:block;font-size:13.5px;font-weight:600;margin-top:2px}
.villa-moments .progres{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--or)}
.villa-vivante.en-lecture .villa-moments button.actif .progres{animation:villa-progres 7s linear forwards}
.villa-vivante:not(.en-lecture) .villa-moments button.actif .progres{width:100%;opacity:.5}
@keyframes villa-progres{from{width:0}to{width:100%}}

.villa-note{margin-top:14px;text-align:center}
.villa-secours{display:block;width:100%}
.villa-vivante.prete .villa-secours{display:none}
/* sans JavaScript : l'image fixe, sans boutons qui ne feraient rien */
.villa-vivante:not(.prete) .villa-types,.villa-vivante:not(.prete) .villa-moments{display:none}
.villa-vivante:not(.prete) .villa-legende{grid-template-columns:1fr}

/* ---- pile : la villa en colonne (téléphone, tablette debout) ---- */
.villa-vivante.pile .villa-scene svg.scene-villa{max-width:480px;margin:0 auto}
.villa-vivante.pile .villa-legende{grid-template-columns:1fr;padding:18px 18px 20px}
.villa-vivante.pile .villa-types{justify-self:start}
.villa-vivante.pile .villa-moments{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:0 -18px;padding:0 18px 4px;
}
.villa-vivante.pile .villa-moments::-webkit-scrollbar{display:none}
.villa-vivante.pile .villa-moments button{flex:0 0 132px;scroll-snap-align:start}
.villa-vivante.pile .villa-heure .h{font-size:26px}

/* ---- côte à côte : la colonne à gauche, la légende à droite ---- */
.villa-vivante.cote{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);align-items:stretch}
.villa-vivante.cote .villa-scene{display:flex;align-items:center;justify-content:center;padding:12px 8px}
.villa-vivante.cote .villa-scene svg.scene-villa{max-width:520px}
/* 0.139.0 — la villa carrée partout : en « large » aussi, un tableau centré, pas un carré de 1 100 px */
.villa-vivante.large .villa-scene svg.scene-villa{max-width:620px;margin:0 auto}
.villa-vivante.cote .villa-legende{
  grid-template-columns:1fr;align-content:center;gap:20px;padding:30px 24px;
  border-top:none;border-left:1px solid var(--bord);background:linear-gradient(90deg,#0e0c09,#0a0908);
}
.villa-vivante.cote .villa-types{justify-self:start}
.villa-vivante.cote .villa-moments{grid-template-columns:1fr;gap:8px}
.villa-vivante.cote .villa-moments button{display:flex;align-items:baseline;gap:14px;padding:11px 14px 12px}
.villa-vivante.cote .villa-moments .pt{margin-top:0}

/* sur le téléphone, la villa prend toute la largeur de l'écran */
@media(max-width:600px){
  .villa-vivante{margin:0 calc(-1 * var(--marge));border-radius:0;border-left:none;border-right:none}
}
@media(prefers-reduced-motion:reduce){
  .villa-vivante .villa-moments .progres{display:none}
}

/* ---- lot site-v3 : la place de la villa réservée avant qu'elle ne soit dessinée ----
   En tête de la page Énergie, la villa est dans le premier écran : si villa-site.js la
   dessine après le premier affichage (il est « defer »), tout ce qui suit saute (CLS).
   Quand le navigateur sait que JavaScript tourne, la scène occupe d'emblée son carré
   (480 px au plus en pile, 620 en large), l'image fixe s'y ajuste, et les rangées de
   boutons gardent leur hauteur. Sans JavaScript, rien ne change (l'image fixe, en large). */
@media (scripting: enabled){
  .villa-vivante{container-type:inline-size}
  .villa-vivante:not(.prete) .villa-scene{aspect-ratio:1 / 1;width:100%;max-width:480px;margin:0 auto}
  .villa-vivante:not(.prete) .villa-secours{width:100%;height:100%;object-fit:cover}
  .villa-vivante:not(.prete) .villa-types{display:flex;visibility:hidden}
  .villa-vivante:not(.prete) .villa-moments{display:block;visibility:hidden;min-height:64px}
  @container (min-width:820px){
    .villa-vivante:not(.prete) .villa-legende{grid-template-columns:minmax(0,1fr) auto}
  }
  @container (min-width:1100px){
    .villa-vivante:not(.prete) .villa-scene{max-width:620px}
  }
}