/* Repris tel quel de Soleillon-EnergyPlus (site/tokens.css, lui-même repris de Respire-Solaire web/tokens.css, la V1 en
   ligne sur soleillon.app) le 4 novembre 2026 : Zénith s'habille comme Soleillon. site/zenith.css s'y raccorde. */
/* Repris tel quel de Respire-Solaire (web/tokens.css, la V1 en ligne sur soleillon.app) le 2 novembre 2026. */
/* Soleillon – le système visuel commun (Soleillon, son parcours express, Maison) : les valeurs (couleurs claires et
   sombres, typographie, rayons, ombres, espacements, mouvement) et cinq composants partagés. Les feuilles de chaque écran
   (ui.css, express.css, maison.css) s'y raccordent au lieu de redéfinir leurs propres valeurs.
   Composants : .c-btn (action principale, pilule pleine), .c-link (action secondaire, texte), .c-card (carte), .c-stat
   (chiffre clé : grand nombre + libellé), .c-seg (choix exclusif, segments) ; et .c-fold (section repliable). */
:root {
  /* couleurs */
  --c-bg: #f5f5f7;
  --c-surface: #ffffff;
  --c-glass: rgba(255, 255, 255, 0.72);
  --c-fill: rgba(120, 120, 128, 0.1);
  --c-fill-2: rgba(120, 120, 128, 0.18);
  --c-line: rgba(60, 60, 67, 0.13);
  --c-text: #1d1d1f;
  --c-text-2: rgba(60, 60, 67, 0.8);
  --c-text-3: rgba(60, 60, 67, 0.32);
  --c-accent: #0071e3;
  --c-accent-ink: #ffffff;
  --c-good: #248a3d;
  --c-warn: #c93400;
  --c-bad: #d70015;
  /* les couleurs de sens de l'énergie, partout les mêmes */
  --c-sun: #f5a623;
  --c-sun-text: #a85f00;
  --c-home: #5e8bd6;
  --c-batt: #30b46c;
  --c-grid: #8e8e93;
  --c-gen: #e8590c;
  --c-heat: #ff6b2c;
  --c-cold: #2f7bd8;
  /* typographie : la police du système, une échelle courte */
  --f-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", "Segoe UI", Roboto,
    sans-serif;
  --t-hero: clamp(56px, 9vw, 96px);
  --t-h1: clamp(30px, 4.4vw, 44px);
  --t-h2: clamp(24px, 3.2vw, 32px);
  --t-h3: 19px;
  --t-body: 16px;
  --t-small: 14px;
  --t-label: 12px;
  /* formes */
  --r-1: 8px;
  --r-2: 14px;
  --r-3: 20px;
  --r-4: 28px;
  --r-pill: 999px;
  --sh-1: 0 0 0 1px var(--c-line);
  --sh-2: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
  --sh-3: 0 30px 80px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--c-line);
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 0.3s;
  /* le fond des pages : trois lueurs très douces (soleil, maison, batterie), pour que le verre dépoli se voie */
  --c-backdrop: radial-gradient(
      1000px 640px at 8% -12%,
      color-mix(in srgb, var(--c-sun) 14%, transparent),
      transparent 62%
    ),
    radial-gradient(900px 640px at 104% -4%, color-mix(in srgb, var(--c-home) 13%, transparent), transparent 60%),
    radial-gradient(1000px 760px at 50% 115%, color-mix(in srgb, var(--c-batt) 8%, transparent), transparent 62%);
  --c-glass-edge: rgba(255, 255, 255, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #000;
    --c-surface: #1c1c1e;
    --c-glass: rgba(28, 28, 30, 0.72);
    --c-fill: rgba(118, 118, 128, 0.18);
    --c-fill-2: rgba(118, 118, 128, 0.3);
    --c-line: rgba(84, 84, 88, 0.5);
    --c-sun-text: #f5a623;
    --c-text: #f5f5f7;
    --c-text-2: rgba(235, 235, 245, 0.62);
    --c-text-3: rgba(235, 235, 245, 0.3);
    --c-accent: #0a84ff;
    --c-good: #30d158;
    --c-warn: #ff9f0a;
    --c-bad: #ff453a;
    --c-home: #7aa2ec;
    --c-grid: #98989d;
    --sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
    --c-glass-edge: rgba(255, 255, 255, 0.07);
  }
}
:root[data-theme="dark"] {
  --c-bg: #000;
  --c-surface: #1c1c1e;
  --c-glass: rgba(28, 28, 30, 0.72);
  --c-fill: rgba(118, 118, 128, 0.18);
  --c-fill-2: rgba(118, 118, 128, 0.3);
  --c-line: rgba(84, 84, 88, 0.5);
  --c-sun-text: #f5a623;
  --c-text: #f5f5f7;
  --c-text-2: rgba(235, 235, 245, 0.62);
  --c-text-3: rgba(235, 235, 245, 0.3);
  --c-accent: #0a84ff;
  --c-good: #30d158;
  --c-warn: #ff9f0a;
  --c-bad: #ff453a;
  --c-home: #7aa2ec;
  --c-grid: #98989d;
  --sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
  --c-glass-edge: rgba(255, 255, 255, 0.07);
}

/* ---------------------------------------------------------------- les cinq composants */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font: 600 17px/1 var(--f-text);
  cursor: pointer;
  transition:
    filter 0.15s,
    transform 0.15s,
    opacity 0.15s;
}
.c-btn:hover {
  filter: brightness(1.08);
}
.c-btn:active {
  transform: scale(0.98);
}
.c-btn:disabled {
  opacity: 0.35;
  cursor: default;
  filter: none;
}
.c-btn.small {
  min-height: 36px;
  padding: 0 var(--s-4);
  font-size: 15px;
}
.c-btn.soft {
  background: var(--c-fill);
  color: var(--c-text);
}
.c-link {
  padding: var(--s-2) var(--s-3);
  border: 0;
  background: none;
  color: var(--c-accent);
  font: 500 16px/1.2 var(--f-text);
  cursor: pointer;
  border-radius: var(--r-1);
}
.c-link:hover {
  background: var(--c-fill);
}
.c-card {
  padding: var(--s-5);
  border-radius: var(--r-3);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
  color: var(--c-text);
}
.c-stat {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: var(--s-5) var(--s-4);
  border-radius: var(--r-3);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
}
.c-stat strong {
  font: 700 clamp(24px, 3.2vw, 34px) / 1.05 var(--f-display);
  letter-spacing: -0.02em;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.c-stat span {
  font: 400 var(--t-small) / 1.3 var(--f-text);
  color: var(--c-text-2);
}
.c-stat.big strong {
  font-size: clamp(34px, 5vw, 52px);
}
.c-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-pill);
  background: var(--c-fill);
}
.c-seg button {
  min-height: 32px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-text);
  font: 500 14px/1 var(--f-text);
  cursor: pointer;
}
.c-seg button[aria-pressed="true"] {
  background: var(--c-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  font-weight: 600;
}
.c-btn:focus-visible,
.c-link:focus-visible,
.c-seg button:focus-visible,
.c-fold > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
  outline-offset: 2px;
}

/* une section repliable : un titre, un résumé d'une ligne, un chevron */
.c-fold {
  border-radius: var(--r-3);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
}
.c-fold + .c-fold {
  margin-top: var(--s-3);
}
.c-fold > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px var(--s-3);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-3);
}
.c-fold > summary::-webkit-details-marker {
  display: none;
}
.c-fold > summary::after {
  content: "›";
  grid-row: 1 / span 2;
  grid-column: 2;
  font: 300 28px/1 var(--f-text);
  color: var(--c-text-3);
  transition: transform var(--dur) var(--ease);
}
.c-fold[open] > summary::after {
  transform: rotate(90deg);
}
.c-fold > summary h3 {
  margin: 0;
  font: 650 var(--t-h3) / 1.2 var(--f-display);
  letter-spacing: -0.01em;
}
.c-fold > summary p {
  margin: 0;
  font: 400 var(--t-small) / 1.35 var(--f-text);
  color: var(--c-text-2);
}
.c-fold > summary:hover {
  background: color-mix(in srgb, var(--c-fill) 50%, transparent);
}
@keyframes c-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* le verre dépoli (à la façon d'Apple) : translucide, flou et saturé derrière, un liseré clair en haut */
.c-glass {
  background: var(--c-glass);
  -webkit-backdrop-filter: saturate(1.8) blur(22px);
  backdrop-filter: saturate(1.8) blur(22px);
  box-shadow:
    inset 0 0.5px 0 var(--c-glass-edge),
    0 0 0 0.5px var(--c-line),
    var(--sh-2);
}