/* Autonomie Solaire – interface « feuille » (style Apple) : barre du haut réduite, feuille à trois hauteurs, saisie façon
   Réglages, mode Aménager. Chargée après style.css (body.ui2). */
:root {
  --u-surface: rgba(255,255,255,.8); --u-solid: #fff; --u-bg: #f2f2f7; --u-fill: rgba(120,120,128,.12); --u-fill-2: rgba(120,120,128,.2);
  --u-label: #000; --u-label-2: rgba(60,60,67,.6); --u-label-3: rgba(60,60,67,.3); --u-sep: rgba(60,60,67,.18);
  --u-accent: #007aff; --u-good: #34c759; --u-warn: #ff9500; --u-bad: #ff3b30;
  /* l'échelle commune : huit tailles de texte, quatre rayons (et la pilule) ; rien d'autre dans les styles */
  --fs-xs: 11px; --fs-s: 12px; --fs-m: 13px; --fs-body: 14px; --fs-l: 15px; --fs-xl: 17px; --fs-h: 20px; --fs-hh: 24px;
  --r-xs: 4px; --r-s: 8px; --r-m: 12px; --r-l: 18px; --r-pill: 999px;
  --u-r-l: var(--r-l); --u-r-m: var(--r-m); --u-r-s: var(--r-s);
  --u-shadow: 0 10px 40px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.08);
  --u-spring: cubic-bezier(.32,.72,0,1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --u-surface: rgba(30,30,32,.8); --u-solid: #1c1c1e; --u-bg: #000; --u-fill: rgba(118,118,128,.24); --u-fill-2: rgba(118,118,128,.32);
  --u-label: #fff; --u-label-2: rgba(235,235,245,.6); --u-label-3: rgba(235,235,245,.3); --u-sep: rgba(84,84,88,.6);
  --u-accent: #0a84ff; --u-good: #30d158; --u-warn: #ff9f0a; --u-bad: #ff453a; } }
:root[data-theme="dark"] {
  --u-surface: rgba(30,30,32,.8); --u-solid: #1c1c1e; --u-bg: #000; --u-fill: rgba(118,118,128,.24); --u-fill-2: rgba(118,118,128,.32);
  --u-label: #fff; --u-label-2: rgba(235,235,245,.6); --u-label-3: rgba(235,235,245,.3); --u-sep: rgba(84,84,88,.6);
  --u-accent: #0a84ff; --u-good: #30d158; --u-warn: #ff9f0a; --u-bad: #ff453a; }

.u-glass { background: var(--u-surface); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: var(--u-shadow); color: var(--u-label); }

/* ---------- barre du haut : recherche au centre, deux boutons ronds ---------- */
body.ui2 #top { left: 72px; right: 72px; top: max(14px, env(safe-area-inset-top)); justify-content: center; }
body.ui2 #search { max-width: 520px; flex: 1; }
body.ui2 #q { height: 44px; border-radius: var(--r-l); background: var(--u-surface); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: var(--u-shadow); color: var(--u-label); }
.u-round { position: absolute; z-index: 9; top: max(14px, env(safe-area-inset-top)); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer; padding: 0; }
.u-round svg { width: 20px; height: 20px; }
#u-home { left: 16px; } #u-menu { right: 16px; }
.u-pop { position: absolute; z-index: 30; top: 66px; right: 16px; width: 250px; border-radius: var(--r-m); padding: 6px 0; transform-origin: top right; transition: transform .35s var(--u-spring), opacity .2s; }
.u-pop[hidden] { display: block; opacity: 0; transform: scale(.92); pointer-events: none; }
.u-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 16px; border: 0; background: none; font: inherit; font-size: var(--fs-l); color: var(--u-label); text-align: left; cursor: pointer; }
.u-pop button:hover { background: var(--u-fill); }
.u-pop button .r { margin-left: auto; color: var(--u-label-2); }
.u-pop hr { border: 0; height: .5px; background: var(--u-sep); margin: 4px 0; }
.u-pop .danger { color: var(--u-bad); }

/* ---------- feuille ---------- */
.u-sheet { position: absolute; z-index: 8; left: 16px; bottom: 16px; width: 390px; height: var(--u-h, 150px); border-radius: var(--u-r-l); overflow: hidden;
  display: flex; flex-direction: column; transition: height .5s var(--u-spring); font: var(--fs-l)/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; }
.u-sheet.dragging { transition: none; }
.u-grab { flex: none; height: 22px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.u-grab i { width: 36px; height: 5px; border-radius: var(--r-xs); background: var(--u-label-3); }
.u-head { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; flex: none; }
.u-head .sp { flex: 1; min-width: 0; }
.u-head h1 { font-size: var(--fs-hh); font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-head p { margin: 2px 0 0; font-size: var(--fs-m); color: var(--u-label-2); line-height: 1.25; }   /* sur deux lignes s'il le faut (boutons Autre maison et Modifier à côté) */
.u-pill { height: 32px; padding: 0 14px; border-radius: var(--r-l); background: var(--u-fill); font: inherit; font-size: var(--fs-body); font-weight: 600; color: var(--u-accent); border: 0; cursor: pointer; flex: none; }
.u-pill.icon { width: 32px; padding: 0; display: grid; place-items: center; }
.u-pill.icon svg { width: 17px; height: 17px; }
.u-pill.solid { background: var(--u-accent); color: #fff; }
.u-body { flex: 1; overflow-y: auto; padding: 0 16px 16px; overscroll-behavior: contain; }

.u-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--u-fill); border-radius: var(--r-s); padding: 2px; margin: 12px 0 14px; }
.u-seg button { height: 30px; border-radius: var(--r-s); font: inherit; font-size: var(--fs-m); font-weight: 500; border: 0; background: none; color: var(--u-label); cursor: pointer; transition: background .25s var(--u-spring); }
.u-seg button[aria-pressed="true"] { background: var(--u-solid); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); font-weight: 600; }

.u-hero { display: grid; gap: 4px; margin-bottom: 12px; }
.u-hero .n { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.u-hero .n small { font-size: var(--fs-h); font-weight: 600; letter-spacing: 0; color: var(--u-label-2); margin-left: 5px; }
.u-hero p { margin: 4px 0 0; color: var(--u-label-2); font-size: var(--fs-l); }
.u-cap { font-size: var(--fs-s); color: var(--u-label-2); margin: 0 0 14px; }
.u-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.u-spin { display: flex; align-items: center; gap: 10px; font-size: var(--fs-m); color: var(--u-label-2); margin: 12px 2px 2px; }
.u-spin::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--u-label-3); border-top-color: var(--u-accent); animation: u-spin .8s linear infinite; flex: none; }
@keyframes u-spin { to { transform: rotate(360deg); } }
.u-empty { display: grid; gap: 10px; margin-top: 2px; }
.u-empty p { margin: 0; color: var(--u-label-2); }
.u-empty .u-pill { height: 44px; border-radius: var(--r-m); font-size: var(--fs-l); }

/* listes groupées */
.u-gt { font-size: var(--fs-m); color: var(--u-label-2); text-transform: uppercase; letter-spacing: .02em; margin: 0 16px 6px; }
.u-group { background: var(--u-fill); border-radius: var(--u-r-s); overflow: hidden; margin-bottom: 22px; }
.u-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 16px; width: 100%; text-align: left; position: relative; border: 0; background: none; font: inherit; color: var(--u-label); cursor: pointer; box-sizing: border-box; }
button.u-row:active { background: var(--u-fill-2); }
.u-row + .u-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--u-sep); }
.u-row .l { flex: 1; min-width: 0; }
.u-row .l small { display: block; font-size: var(--fs-s); color: var(--u-label-2); }
.u-row .r { color: var(--u-label-2); font-variant-numeric: tabular-nums; text-align: right; }
.u-row .chev { width: 8px; height: 13px; color: var(--u-label-3); flex: none; }
.u-row .ic { width: 29px; height: 29px; border-radius: var(--r-s); display: grid; place-items: center; color: #fff; font-size: var(--fs-l); flex: none; }
.u-row.check .r { color: var(--u-accent); font-weight: 600; }
.u-step { display: inline-grid; grid-template-columns: 36px 46px 36px; align-items: center; height: 32px; background: var(--u-fill); border-radius: var(--r-s); overflow: hidden; }
.u-step button { border: 0; background: none; font-size: var(--fs-h); color: var(--u-accent); height: 100%; cursor: pointer; }
.u-step output { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* avertissements dans la feuille */
.u-detail { display: grid; gap: 10px; }
.u-detail > .hint { font-size: var(--fs-s); }
.u-detail .sp-warn { border-radius: var(--u-r-m); }

/* ---------- Réglages ---------- */
.u-modal { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; background: rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .3s; }
.u-modal.open { opacity: 1; pointer-events: auto; }
.u-win { width: min(560px, 100%); height: min(780px, calc(100% - 40px)); border-radius: var(--u-r-l); background: var(--u-bg); color: var(--u-label); box-shadow: var(--u-shadow); overflow: hidden; display: flex; flex-direction: column;
  transform: translateY(30px) scale(.98); transition: transform .5s var(--u-spring); font: var(--fs-l)/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; }
.u-modal.open .u-win { transform: none; }
.u-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 52px; padding: 0 12px; flex: none; }
.u-nav h2 { margin: 0; font-size: var(--fs-xl); font-weight: 600; }
.u-nav button { color: var(--u-accent); font: inherit; font-size: var(--fs-xl); border: 0; background: none; cursor: pointer; justify-self: start; display: flex; align-items: center; gap: 2px; padding: 6px 4px; }
.u-nav button.r { justify-self: end; font-weight: 600; }
.u-pages { position: relative; flex: 1; overflow: hidden; }
.u-page { position: absolute; inset: 0; overflow-y: auto; padding: 8px 16px 30px; transition: transform .45s var(--u-spring), opacity .45s var(--u-spring); }
.u-page.out-left { transform: translateX(-30%); opacity: 0; pointer-events: none; }
.u-page.out-right { transform: translateX(100%); pointer-events: none; }
.u-page .lead { color: var(--u-label-2); font-size: var(--fs-m); margin: 0 16px 18px; }
.u-win .u-group { background: var(--u-solid); }
.u-range { width: 100%; accent-color: var(--u-accent); }

/* ---------- mode Aménager ---------- */
.u-banner { position: absolute; z-index: 10; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translate(-50%, -90px); height: 44px; border-radius: var(--r-l); display: flex; align-items: center; gap: 14px; padding: 0 6px 0 18px; transition: transform .5s var(--u-spring); font-weight: 600; font-size: var(--fs-l); }
.u-banner .ok { height: 32px; padding: 0 16px; border-radius: var(--r-l); background: var(--u-accent); color: #fff; font: inherit; font-weight: 600; border: 0; cursor: pointer; }

/* ---------- ordinateur : feuille ancrée à droite ---------- */
#u-fold { display: none; }
@media (min-width: 761px) {
  .u-sheet { left: auto; right: 16px; top: 16px; bottom: auto; width: 400px; }
  .u-grab { height: 12px; visibility: hidden; }
  #u-fold { display: grid; }
  #u-fold svg { transition: transform .3s var(--u-spring); transform: rotate(180deg); }
  #u-fold.open svg { transform: none; }
  body.ui2 #top { right: 492px; }
  /* le menu « ••• » (thème, fond de carte) : à gauche de la feuille, plus sur son coin (il cachait le bouton qui la replie) */
  #u-menu { right: 432px; }
  .u-pop { right: 432px; }
    }

/* ---------- téléphone ---------- */
@media (max-width: 760px) {
  .u-sheet { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--u-r-l) var(--u-r-l) 0 0; padding-bottom: env(safe-area-inset-bottom); }
    .u-win { height: 100%; border-radius: 0; }
  body.ui2 #top { left: 68px; right: 68px; top: max(14px, env(safe-area-inset-top)); }
  body.ui2 #search { order: 0; flex-basis: auto; }
    }
@media (prefers-reduced-motion: reduce) { .u-sheet, .u-page, .u-win, .u-banner, .u-pop { transition-duration: .01ms !important; } }

/* ---------- page d'accueil (wizard.js landing) : le langage de la feuille, sur la carte floutée ---------- */
#wiz.landing { background: color-mix(in srgb, var(--u-bg) 84%, transparent); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); }
#wiz.landing { place-items: stretch; }
#wiz.landing .wz-frame { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; background: none; }
#wiz.landing .wz-body { padding: 0; }
.lp { --lp-max: 1120px; min-height: 100%; display: flex; flex-direction: column; color: var(--u-label);
  font: var(--fs-l)/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; }
.lp-nav { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 56px;
  padding: 0 max(20px, calc((100% - var(--lp-max)) / 2)); background: var(--u-surface); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--u-sep); }
.lp-nav > div { display: flex; align-items: center; gap: 8px; }
.lp-nav .wz-brand { color: var(--u-label); }
.lp-nav .wz-brand .logo { width: 28px; height: 28px; border-radius: var(--r-s); display: grid; place-items: center; background: linear-gradient(135deg, #34c759, #007aff); color: #fff; }
.lp-nav .wz-brand .logo svg { width: 18px; height: 18px; }
.lp-theme { font-size: var(--fs-l); color: var(--u-label); }
/* l'accueil de Soleillon : lui, sa question, l'adresse ; rien d'autre */
.lp-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; width: 100%; max-width: 640px; margin: 0 auto;
  padding: clamp(24px, 6vh, 64px) 20px; box-sizing: border-box; }
.lp-main > .sunny { margin-bottom: 10px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.12)); }
.lp-main h1 { margin: 0 0 10px; font-size: clamp(32px, 5vw, 48px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; }
.lp-lead { margin: 0 0 24px; max-width: 34ch; font-size: var(--fs-h); line-height: 1.4; color: var(--u-label-2); text-wrap: balance; }
.lp-start { width: 100%; max-width: 520px; text-align: left; }
#wiz .lp-start .wz-search { max-width: none; margin-bottom: 0; }
#wiz .lp-start .wz-search input { height: 56px; border-radius: var(--r-l); border: 0; background: var(--u-solid); color: var(--u-label); font-size: var(--fs-xl); padding: 0 16px 0 46px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.06); }
#wiz .lp-start .wz-search input:focus { outline: 3px solid color-mix(in srgb, var(--u-accent) 40%, transparent); }
#wiz .lp-start .wz-search .wz-search-ic { position: absolute; left: 16px; top: 18px; width: 20px; height: 20px; color: var(--u-label-2); }
#wiz .lp-start .wz-sugg { top: 62px; background: var(--u-solid); color: var(--u-label); box-shadow: var(--u-shadow); }
.lp-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 18px 0 6px; }
.lp-alt .u-link { border: 0; background: none; padding: 6px 2px; font: inherit; font-size: var(--fs-l); color: var(--u-accent); cursor: pointer; }
.lp-alt .u-link:hover { text-decoration: underline; }
.lp-alt .lp-resume { font-weight: 600; }
.lp-small { margin: 0; font-size: var(--fs-m); color: var(--u-label-2); }
.lp-foot { padding: 18px 20px 24px; text-align: center; font-size: var(--fs-s); color: var(--u-label-2); }
.lp-links { display: flex; justify-content: center; gap: 18px; margin-bottom: 8px; }
.lp-links a { color: var(--u-label-2); text-decoration: none; font-weight: 600; }
.lp-links a:hover { color: var(--u-label); text-decoration: underline; }
@media (max-width: 520px) {
  .lp-main > .sunny { width: 116px; height: 116px; }
  .lp-lead { font-size: var(--fs-xl); }
  .lp-nav .u-pill:not(.icon) { padding: 0 12px; }
}

/* ---------- assistant (wizard.js) : même langage que la feuille ----------
   Trois tailles de texte (22 titre, 15 texte, 13 notes), listes groupées façon Réglages, pastilles, contrôles segmentés,
   en-tête fixe avec barre de progression fine. La page d'accueil (.landing) garde son style « page produit ». */
:root { --u-seg-on: #fff; --u-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6l3-3 3 3M2 10l3 3 3-3'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --u-seg-on: #636366; } }
:root[data-theme="dark"] { --u-seg-on: #636366; }
.u-sec { margin-bottom: 26px; }
.u-sec > .u-group { margin-bottom: 0; }
.u-sec > .u-gt { font-size: var(--fs-m); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: var(--u-label-2); margin: 0 16px 7px; }
.u-sec > .u-seg { margin: 0 0 12px; }
.u-sec .u-row .l { line-height: 1.3; }
.u-sec .u-row .l small { font-size: var(--fs-m); margin-top: 1px; }
.u-sec .u-row > .r { display: inline-flex; align-items: center; gap: 7px; }
.u-foot { margin: 7px 16px 0; font-size: var(--fs-m); line-height: 1.4; color: var(--u-label-2); }
.u-row.danger { color: var(--u-bad); }
.u-row[hidden] { display: none; }
.u-sel { -webkit-appearance: none; appearance: none; border: 0; margin: 0; max-width: 60%; padding: 6px 18px 6px 0; cursor: pointer; text-align: right; text-align-last: right; text-overflow: ellipsis;
  font: inherit; font-size: var(--fs-l); color: var(--u-label-2);
  background: transparent var(--u-chev) no-repeat right center / 9px 15px; }
.u-sel:hover { color: var(--u-label); }
.u-num { width: 66px; height: 32px; box-sizing: border-box; border: 0; border-radius: var(--r-s); padding: 0 8px; background: var(--u-fill); color: var(--u-label); font: inherit; font-size: var(--fs-l); text-align: right; font-variant-numeric: tabular-nums; }
.u-num::-webkit-inner-spin-button, .u-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.u-num { -moz-appearance: textfield; }
.u-numu { display: inline-flex; align-items: center; gap: 6px; color: var(--u-label-2); }
.u-chip { height: 30px; padding: 0 12px; border-radius: var(--r-l); border: 0; background: var(--u-fill); color: var(--u-label); font: inherit; font-size: var(--fs-m); font-weight: 500; cursor: pointer; transition: transform .2s var(--u-spring), background .2s; }
.u-chip:hover { background: var(--u-fill-2); }
.u-chip:active, .u-pill:active, .u-cta:active { transform: scale(.96); }
.u-pill { transition: transform .2s var(--u-spring), background .2s; }
.u-pill.danger { color: var(--u-bad); }
.u-cta { display: block; width: 100%; height: 50px; border: 0; border-radius: var(--r-l); background: var(--u-accent); color: #fff; font: inherit; font-size: var(--fs-l); font-weight: 600; cursor: pointer; transition: transform .2s var(--u-spring), filter .2s; }
.u-cta:hover { filter: brightness(1.08); }
.u-seg button { min-width: 0; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--u-label); }
.u-seg.sm { margin: 0; flex: 0 1 220px; }
.u-step output { padding: 0 4px; white-space: nowrap; font-size: var(--fs-l); }
.u-row > .u-step, .u-row > .u-seg.sm { flex: none; }

/* cadre de l'assistant */
#wiz:not(.landing) { font: var(--fs-l)/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; color: var(--u-label);
  background: rgba(0,0,0,.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#wiz [hidden] { display: none !important; }
#wiz:not(.landing) .wz-frame { width: min(760px, 100% - 32px); height: min(880px, 100% - 32px); border: 0; border-radius: var(--u-r-l); background: var(--u-bg); box-shadow: var(--u-shadow);
  animation: u-rise .5s var(--u-spring); }
@keyframes u-rise { from { transform: translateY(30px) scale(.98); opacity: 0; } }
#wiz .wz-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 10px 12px 12px; border: 0; flex: none; z-index: 2;
  background: color-mix(in srgb, var(--u-bg) 85%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
#wiz.landing .wz-head { display: none; }                       /* page d'accueil : pas d'en-tête d'étape */
.wz-back { justify-self: start; display: flex; align-items: center; gap: 1px; padding: 6px 4px; border: 0; background: none; color: var(--u-accent); font: inherit; font-size: var(--fs-l); cursor: pointer; }
.wz-back > span, .wz-back svg { width: 20px; height: 20px; display: block; }
.wz-title { text-align: center; min-width: 0; }
.wz-title strong { display: block; font-size: var(--fs-l); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-title small { display: block; font-size: var(--fs-m); color: var(--u-label-2); }
#wiz #wiz-close { position: static; justify-self: end; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: var(--u-fill); color: var(--u-label-2); font-size: var(--fs-h); line-height: 1; cursor: pointer; }
.wz-prog { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 6px; }
.wz-prog button { flex: 1; height: 12px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.wz-prog i { display: block; height: 4px; border-radius: var(--r-xs); background: var(--u-fill-2); transition: background .4s var(--u-spring); }
.wz-prog .done i, .wz-prog .now i { background: var(--u-accent); }
.wz-prog button:hover i { filter: brightness(1.15); }
#wiz:not(.landing) .wz-body { padding: 6px max(20px, calc((100% - 680px) / 2)) 32px; overscroll-behavior: contain; }
#wiz:not(.landing) .wz-body h2 { font-size: var(--fs-hh); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 6px 0 8px; }
#wiz .wz-page > h2 + :not(.wz-lead) { margin-top: 18px; }
#wiz .wz-lead { font-size: var(--fs-l); line-height: 1.45; color: var(--u-label-2); margin: 0 0 24px; max-width: none; }
#wiz .wz-page > .u-sec:last-child, #wiz .wz-page > div:last-child > .u-sec:last-child { margin-bottom: 8px; }
.wz-in { animation: u-in .45s var(--u-spring); }
@keyframes u-in { from { transform: translateY(14px); opacity: 0; } }
#wiz .u-group { background: var(--u-solid); }
#wiz:not(.landing) .wz-nav { justify-content: flex-end; gap: 10px; padding: 12px max(20px, calc((100% - 680px) / 2)) calc(12px + env(safe-area-inset-bottom)); border: 0; flex: none;
  background: color-mix(in srgb, var(--u-bg) 85%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
#wiz .wz-nav:not(:has(.wz-next:not([hidden]))) { display: none; }
#wiz .wz-prev { display: none; }
#wiz .wz-next { min-width: 0; height: 44px; padding: 0 28px; border-radius: var(--r-l); background: var(--u-accent); color: #fff; font: inherit; font-size: var(--fs-l); font-weight: 600; box-shadow: none; transition: transform .2s var(--u-spring), filter .2s; }
#wiz .wz-next:hover { filter: brightness(1.08); }
#wiz .sp-warn { margin: 12px 0 0; padding: 12px 16px; border-radius: var(--u-r-s); background: color-mix(in srgb, var(--u-warn) 16%, transparent); font-size: var(--fs-m); }
#wiz .wz-launch { margin-top: 4px; }
.wz-pick { margin: 4px 0 0; }
.wz-pin { margin: 0 16px 22px; }

/* adresse */
.wz-search { position: relative; margin-bottom: 8px; }
#wiz .wz-search input { width: 100%; height: 44px; box-sizing: border-box; border: 0; border-radius: var(--r-m); padding: 0 14px 0 38px; background: var(--u-fill); color: var(--u-label); font: inherit; font-size: var(--fs-l); outline: none; }
#wiz .wz-search input:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--u-accent) 40%, transparent); }
.wz-search-ic { position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; color: var(--u-label-2); pointer-events: none; }
.wz-search-ic svg { width: 100%; height: 100%; display: block; }
#wiz .wz-sugg { top: 50px; padding: 6px 0; border-radius: var(--u-r-m); background: var(--u-solid); box-shadow: var(--u-shadow); animation: u-in .3s var(--u-spring); }
#wiz .wz-sugg li { padding: 9px 16px; border-radius: 0; font-size: var(--fs-l); }
#wiz .wz-sugg li + li { box-shadow: inset 0 .5px 0 var(--u-sep); }
#wiz .wz-sugg li:hover { background: var(--u-fill); }
#wiz .wz-sugg small { font-size: var(--fs-m); color: var(--u-label-2); }

/* orientation de la maison neuve */
.wz-rot { gap: 10px; }
.wz-rot .u-range { flex: 1; min-width: 0; }
.wz-rot output { min-width: 44px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* éditeur de plan */
#wiz .pe-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
#wiz .pe-tpl { display: flex; align-items: center; gap: 6px; font-size: var(--fs-m); color: var(--u-label-2); }
#wiz .pe-zoom { display: flex; gap: 6px; margin-left: auto; }
#wiz .pe-zoom .u-pill.icon { font-size: var(--fs-xl); font-weight: 500; }
.pe-card { background: var(--u-solid); border-radius: var(--u-r-m); overflow: hidden; }
#wiz .pe-cv { display: block; height: 380px; border: 0; border-radius: 0; background: none; }
#wiz .pe-hint { margin: 8px 16px 0; }
#wiz .pe-sum { margin: 4px 16px 22px; font-size: var(--fs-m); font-weight: 600; color: var(--u-label); }
#wiz .pe-side { display: block; max-width: none; margin: 0; }
#wiz .pe-side > .u-pill { margin: -8px 0 22px; }

/* implantation et bâtiment existant : l'assistant devient une feuille sur la carte */
#wiz.side { left: 16px; bottom: 16px; top: 72px; width: 390px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#wiz.side .wz-frame { width: 100%; height: 100%; background: var(--u-surface); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
#wiz.side .wz-head, #wiz.side .wz-nav { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#wiz.side .wz-body { padding: 4px 16px 20px; }
#wiz.side .u-group { background: var(--u-fill); }

/* contrôles segmentés */
#wiz .u-seg button[aria-pressed="true"] { background: var(--u-seg-on); color: var(--u-label); font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }

@media (max-width: 760px) {
  #wiz:not(.landing) .wz-frame { width: 100%; height: 100%; border-radius: 0; }
  #wiz:not(.side):not(.landing) .wz-head { padding-top: max(10px, env(safe-area-inset-top)); }
  #wiz:not(.landing) .wz-body { padding: 4px 16px 28px; }
  #wiz:not(.landing) .wz-nav { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  #wiz .wz-next { flex: 1; }
  .wz-back { font-size: 0; }                              /* la flèche seule : le titre de l'étape garde la place */
  #wiz .pe-cv { height: 300px; }
  #wiz .pe-zoom { margin-left: 0; }
  #wiz.side { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 50vh; }
  #wiz.side .wz-frame { border-radius: var(--u-r-l) var(--u-r-l) 0 0; }
  .u-sel { max-width: 55%; }
}
@media (prefers-reduced-motion: reduce) {
  #wiz .wz-frame, .wz-in, .wz-sugg { animation: none !important; }
  .wz-prog i { transition: none; }
}

/* contrôles segmentés compacts (toiture du plan) */
.u-seg.sm button { padding: 0 6px; }

@media (max-width: 480px) {
  .u-row:has(> .u-seg.sm) { flex-wrap: wrap; row-gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .u-row > .u-seg.sm { flex: 1 0 100%; }
}

/* notes fines */
.u-cap.u-fine { color: var(--u-label-3); margin-bottom: 14px; }

/* ligne de résumé de la feuille réduite */
.u-recaplink .chev { color: var(--u-label-3); font-size: var(--fs-h); line-height: 1; align-self: center; }
.u-recaplink { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 10px 12px; border: 0; border-radius: var(--u-r-m); background: var(--u-fill); color: var(--u-label); font: inherit; font-size: var(--fs-l); text-align: left; cursor: pointer; }
.u-recaplink .l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }

/* valeurs et blocs repliables */
.u-row .r .pos { color: var(--u-good); font-weight: 600; } .u-fold > summary { color: var(--u-label); }

.u-cap.u-warn-t { color: var(--u-bad); }

/* Calcul en cours : voile sombre et soleil animé (resilience:busy). Apparition retardée d'un quart de seconde ; les
   animations (opacité, rotation) tournent sur le compositeur, même quand le calcul occupe le navigateur. */
.u-busy { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; will-change: opacity; }
.u-busy.on { opacity: 1; visibility: visible; transition: opacity .35s ease .25s, visibility 0s linear 0s; cursor: progress; }
.u-busy-card { width: min(300px, calc(100vw - 48px)); padding: 26px 22px 20px; border-radius: var(--u-r-l, 20px); text-align: center;
  background: var(--u-solid); color: var(--u-label); box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  font: var(--fs-l)/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  transform: scale(.94); transition: transform .45s var(--u-spring, ease) .25s; }
.u-busy.on .u-busy-card { transform: none; }
.u-busy-ic { position: relative; width: 72px; height: 72px; margin: 0 auto 14px; color: #ffb300; }
.u-busy-ic .rays, .u-busy-ic .core { position: absolute; inset: 0; width: 72px; height: 72px; }
.u-busy-ic .rays svg { width: 100%; height: 100%; display: block; }
.u-busy-ic .rays { animation: u-spin 3.2s linear infinite; will-change: transform; }
.u-busy-ic .core { animation: u-pulse 1.6s ease-in-out infinite; will-change: transform; }
.u-busy .t { margin: 0; font-size: var(--fs-xl); font-weight: 600; }
.u-busy .s { margin: 6px 0 0; font-size: var(--fs-m); color: var(--u-label-2, #666); }
.u-busy .dots i { font-style: normal; animation: u-blink 1.2s infinite; opacity: .2; }
.u-busy .dots i:nth-child(2) { animation-delay: .2s; }
.u-busy .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes u-spin { to { transform: rotate(360deg); } }
@keyframes u-pulse { 50% { transform: scale(.86); } }
@keyframes u-blink { 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .u-busy-ic .rays, .u-busy-ic .core, .u-busy .dots i { animation: none; opacity: 1; } }
a.u-pill { display: inline-grid; place-items: center; text-decoration: none; }
.u-pdf { margin: 4px 0 6px; }
.u-pdfview { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(0, 0, 0, .45); }
.u-pdfview-w { width: min(900px, calc(100vw - 24px)); height: calc(100vh - 48px); display: flex; flex-direction: column; border-radius: var(--u-r-l); overflow: hidden; background: var(--u-solid); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.u-pdfview-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex: none; }
.u-pdfview-h strong { flex: 1; font-size: var(--fs-l); }
.u-pdfview iframe { flex: 1; border: 0; width: 100%; background: #fff; }

/* ---------------------------------------------------------------- dimensionnement photovoltaïque (ui-pv.js) */
.pv-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.pv-fact { background: var(--u-fill); border-radius: var(--r-m); padding: 10px 12px; display: grid; gap: 2px; }
.pv-fact .l { font-size: var(--fs-s); color: var(--u-label-2); }
.pv-fact strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.pv-fact small { font-size: var(--fs-xs); color: var(--u-label-2); }
.pv-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 96px; align-items: end; margin: 6px 0 10px; }
.pv-months .c { display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; text-align: center; }
.pv-months i { display: block; background: #f5a623; border-radius: var(--r-xs) var(--r-xs) 0 0; }
.pv-months span { font-size: var(--fs-xs); color: var(--u-label-2); padding-top: 3px; }
.pv-offer { border: 1px solid var(--u-fill); border-radius: var(--r-m); padding: 12px 14px; margin: 10px 0; }
.pv-offer.on { border-color: var(--u-accent); }
.pv-offer h3 { margin: 0 0 2px; font-size: var(--fs-xl); }
.pv-offer dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0; font-size: var(--fs-body); }
.pv-offer dt { color: var(--u-label-2); }
.pv-offer dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pv-note { color: #c27c00; }
.pv-bom { width: 100%; border-collapse: collapse; font-size: var(--fs-m); margin: 6px 0 10px; }
.pv-bom td { padding: 6px 4px; border-bottom: .5px solid var(--u-fill); vertical-align: top; }
.pv-bom td:first-child { white-space: nowrap; color: var(--u-label-2); }
.pv-bom .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-bom .sub td { color: var(--u-label-2); }
.pv-bom .tot td { font-weight: 700; border-bottom: 0; }
.pv-auto { display: flex; gap: 8px; align-items: center; font-size: var(--fs-body); margin: 8px 0; }
.pv-app { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; border-bottom: .5px solid var(--u-fill); font-size: var(--fs-body); }
.pv-app.off { opacity: .55; }
.pv-app .nm { display: flex; gap: 6px; align-items: center; }
.pv-app .pw { font-size: var(--fs-s); color: var(--u-label-2); display: flex; align-items: center; gap: 3px; }
.pv-app .fl { font-size: var(--fs-s); display: flex; gap: 4px; align-items: center; color: var(--u-label-2); }
.pv-num { font: inherit; font-size: var(--fs-s); padding: 2px 4px; border-radius: var(--r-s); border: .5px solid var(--u-fill); background: var(--u-solid, transparent); color: inherit; }
.pv-report { margin-top: 14px; }
.pv-tune { display: grid; gap: 6px; margin: 8px 0 4px; padding: 8px 10px; background: var(--u-fill); border-radius: var(--r-m); }
.pv-step { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; font-size: var(--fs-body); }
.pv-step .l { display: grid; }
.pv-step .l small { font-size: var(--fs-xs); color: var(--u-label-2); }
.pv-step strong { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.pv-step .u-pill:disabled { opacity: .35; cursor: default; }
.pv-heat { display: grid; gap: 6px; margin: 4px 0 10px; }
.pv-heat select, .pv-auto select { font: inherit; font-size: var(--fs-body); padding: 4px 6px; border-radius: var(--r-s); border: .5px solid var(--u-sep); background: var(--u-solid); color: inherit; }
.pv-app { grid-template-columns: 1fr auto; }
.pv-app .yr { font-size: var(--fs-s); color: var(--u-label-2); text-align: right; }
.pv-cal { margin: 10px 0; }
.pv-cal img { width: 100%; border-radius: var(--r-s); border: .5px solid var(--u-sep); background: #fff; }
.pv-bigarea { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-m); background: color-mix(in srgb, var(--u-warn) 13%, transparent); font-size: var(--fs-m); }
.pv-bigarea p { margin: 0 0 6px; } .pv-bigarea .pv-auto { margin: 0; }
.pv-alert { margin: 4px 0 8px; padding: 8px 10px; border-radius: var(--r-m); background: rgba(242,157,10,.14); color: #a86400; font-size: var(--fs-m); font-weight: 600; }
.pv-cal-img { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pv-cal-img span { position: absolute; right: 8px; bottom: 8px; font-size: var(--fs-s); font-weight: 600; color: #fff; background: rgba(0,0,0,.55); border-radius: var(--r-s); padding: 3px 8px; }
.pv-zoom { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.82); display: grid; place-items: center; cursor: zoom-out; }
.pv-zoom img { max-width: 96vw; max-height: 92vh; border-radius: var(--r-m); background: #fff; }
.pv-zoom-x { position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; border-radius: var(--r-l); border: 0; background: rgba(255,255,255,.9); font-size: var(--fs-xl); cursor: pointer; }
.pv-gen { display: grid; gap: 6px; padding-top: 4px; border-top: .5px solid var(--u-sep); font-size: var(--fs-body); }
.pv-gen .nm { display: flex; gap: 6px; align-items: center; }
.pv-gen select { font: inherit; font-size: var(--fs-m); padding: 4px 6px; border-radius: var(--r-s); border: .5px solid var(--u-sep); background: var(--u-solid); color: inherit; }

/* l'année jour par jour en grand, à gauche de la feuille (grand écran, onglet Installation) */
.pv-year { position: fixed; z-index: 7; left: 16px; right: 432px; top: 76px; bottom: 16px; border-radius: var(--u-r-l); padding: 16px 18px; overflow: auto;
  display: flex; flex-direction: column; gap: 10px; font: var(--fs-body)/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; }
.pv-year header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pv-year h2 { margin: 0; font-size: var(--fs-h); }
.pv-year header p { margin: 2px 0 0; color: var(--u-label-2); }
.pv-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.pv-chip { background: var(--u-fill); border-radius: var(--r-m); padding: 6px 10px; display: grid; }
.pv-chip span { font-size: var(--fs-s); color: var(--u-label-2); }
.pv-chip strong { font-size: var(--fs-l); font-variant-numeric: tabular-nums; }
.pv-chip.chg { animation: pv-chg 1.6s ease-out; }
@keyframes pv-chg { from { background: color-mix(in srgb, var(--u-accent) 35%, var(--u-fill)); } to { background: var(--u-fill); } }
.pv-year-img { flex: 1 1 auto; min-height: 0; padding: 0; border: 0; background: none; cursor: zoom-in; display: grid; place-items: center; }
.pv-year-img img { max-width: 100%; max-height: 100%; border-radius: var(--r-m); background: #fff; border: .5px solid var(--u-sep); }
.pv-year .u-cap { margin: 0; }
.pv-cal .u-pill { margin: 0 0 8px; }
.pv-cal-side { padding: 8px 10px; border-radius: var(--r-m); background: var(--u-fill); }
@media (max-width: 999px) { .pv-year { display: none; } }
@media (prefers-reduced-motion: reduce) { .pv-chip.chg { animation: none; } }
.pv-eve { flex-wrap: wrap; }
.pv-eve select { font: inherit; font-size: var(--fs-m); padding: 2px 4px; border-radius: var(--r-s); border: .5px solid var(--u-sep); background: var(--u-solid); color: inherit; }
.pv-eve-note { color: var(--u-label-2); font-size: var(--fs-s); }
.pv-advice { margin: 10px 0; padding: 10px 12px; border-radius: var(--r-m); background: var(--u-fill); font-size: var(--fs-m); }
.pv-advice p { margin: 0 0 8px; }
.pv-advice.ok p { margin: 0; }
.pv-advice:not(.ok) { background: color-mix(in srgb, #f29d0a 14%, var(--u-fill)); }
/* onglets de la feuille : largeur selon le nom (« Performances solaires » en entier) */
.u-sheet .u-seg { grid-auto-columns: auto; }
.u-sheet .u-seg button { padding: 0 6px; }
@media (max-width: 420px) { .u-sheet .u-seg button { font-size: var(--fs-s); padding: 0 4px; } }
/* vos appareils sous l'année jour par jour (grand panneau et feuille) */
.pv-cons { margin-top: 14px; border-top: .5px solid var(--u-sep); }
/* grand panneau : en haut, fixes et en grand, l'en-tête, les chiffres et l'année ; dessous, le volet de vos appareils */
.pv-year { overflow: hidden; }
.pv-year .pv-year-img { flex: 1 1 0; min-height: 140px; position: relative; overflow: hidden; display: block; }
.pv-year .pv-year-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; border: 0; background: none; }
.pv-cons-head { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 10px 0 8px; font: inherit; font-size: var(--fs-body); color: var(--u-label-2); }
.pv-cons-head strong { color: var(--u-label); font-size: var(--fs-l); }
.pv-cons-head .chev { display: inline-block; width: 1.2em; color: var(--u-accent); font-weight: 700; transition: transform .2s; }
.pv-cons.open .pv-cons-head .chev { transform: rotate(90deg); }
.pv-year .pv-cons { flex: none; margin: 0 -18px -16px; padding: 0 18px; border-top: .5px solid var(--u-sep); display: flex; flex-direction: column; }
.pv-year .pv-cons.open { flex: 0 0 42%; min-height: 0; }
.pv-year .pv-cons-body { flex: 1 1 auto; min-height: 0; overflow: auto; overflow-anchor: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0 24px; align-items: start; padding-bottom: 16px; }
/* créneau de marche d'un appareil */
.pv-when { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--fs-s); color: var(--u-label-2); }
.pv-when select { font: inherit; font-size: var(--fs-s); padding: 2px 4px; border-radius: var(--r-s); border: .5px solid var(--u-sep); background: var(--u-solid); color: var(--u-label); max-width: 100%; }
.pv-app.off .pv-when { display: none; }
/* grand panneau : les chiffres sur une ligne */
.pv-year .pv-chips { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 6px; }
.pv-year .pv-chip { padding: 5px 8px; }
.pv-year .pv-chip strong { font-size: var(--fs-m); }
.pv-year .pv-chip span { font-size: var(--fs-xs); }
.pv-deg { font: inherit; font-size: var(--fs-s); padding: 2px 4px; border-radius: var(--r-s); border: .5px solid var(--u-sep); background: var(--u-solid); color: var(--u-label); }
.pv-linkbtn { border: 0; background: none; padding: 0 0 0 8px; font: inherit; font-size: var(--fs-m); color: var(--u-accent); cursor: pointer; }

/* ---------- onglet Toit : ombres sur votre maison (ui-shade.js) ---------- */
.sh { margin: 18px 0 6px; }
.sh .u-seg { margin: 0 0 10px; }
.sh-days button { font-size: var(--fs-s); }
.sh-time { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
.sh-time .u-pill { flex: none; font-size: var(--fs-s); color: var(--u-accent); }
.sh-range { flex: 1; min-width: 0; accent-color: var(--u-warn); }
.sh-info { margin: 0 0 8px; font-size: var(--fs-m); color: var(--u-label-2); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.sh-info strong { color: var(--u-label); }
.sh-n { color: var(--u-good); } .sh-n.off { color: var(--u-label); font-weight: 600; }
.sh-all { color: var(--u-label-2); }
.sh-diag { background: var(--u-fill); border-radius: var(--r-m); padding: 6px 4px 2px; margin: 0 0 8px; }
.sh-diag svg { width: 100%; height: auto; display: block; }
.sh-diag .g { stroke: var(--u-sep); stroke-width: .6; }
.sh-diag .t { fill: var(--u-label-2); font-size: var(--fs-xs); font-family: inherit; }
.sh-diag .t.h { fill: var(--u-warn); font-weight: 600; }
.sh-diag .hz { fill: color-mix(in srgb, #5856d6 34%, transparent); stroke: #5856d6; stroke-width: 1.2; stroke-linejoin: round; }
.sh-diag .hzw { fill: none; stroke: #5856d6; stroke-width: 1; stroke-dasharray: 3 2.5; opacity: .8; }
.sh-diag .sp { fill: none; stroke: var(--u-warn); stroke-width: 1; opacity: .55; }
.sh-diag .sp.on { stroke-width: 2.4; opacity: 1; }
.sh-diag .hd { fill: var(--u-warn); opacity: .55; } .sh-diag .hd.on { opacity: 1; }
.sh-diag .sun { fill: #ffcc00; stroke: #ff9500; stroke-width: 2; }
.sh-diag .sun.off { fill: var(--u-label-3); stroke: var(--u-label-2); }
.pv-shade { margin: 10px 0 4px; padding: 12px 14px; border-radius: var(--r-m); background: color-mix(in srgb, #5856d6 14%, transparent); }
.pv-shade p { margin: 0 0 8px; font-size: var(--fs-m); line-height: 1.45; }
.pv-place { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 10px; }
.pv-place .nm { font-size: var(--fs-body); font-weight: 600; }
.pv-place .u-seg { flex: 0 1 240px; margin: 0; }

/* ---------- le parcours en cinq étapes (ui-pv.js) ---------- */
.st-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 4px 0 16px; padding: 0; }
.st-steps button { width: 100%; display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border: 0; border-radius: var(--r-m); background: none; color: var(--u-label-2); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.st-steps button b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-s); background: var(--u-fill); color: var(--u-label-2); }
.st-steps button.now { color: var(--u-label); font-weight: 600; background: var(--u-fill); }
.st-steps button.now b { background: var(--u-accent); color: #fff; }
.st-steps button.done b { background: var(--u-good); color: #fff; }
.st-steps button:disabled { opacity: .4; cursor: default; }
.st-steps button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-q { margin: 2px 0 6px; font-size: var(--fs-h); font-weight: 700; letter-spacing: -.02em; }
.st-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.st-fold { margin: 0 0 14px; }
.st-fold > summary { cursor: pointer; font-size: var(--fs-body); color: var(--u-accent); padding: 4px 0 8px; }
.st-goals { display: grid; gap: 8px; margin: 6px 0 18px; }
.st-goals button { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border-radius: var(--r-m); border: 2px solid transparent; background: var(--u-fill); color: var(--u-label); font: inherit; cursor: pointer; transition: border-color .2s, background .2s; }
.st-goals button strong { font-size: var(--fs-l); }
.st-goals button span { font-size: var(--fs-m); color: var(--u-label-2); line-height: 1.35; }
.st-goals button.on { border-color: var(--u-accent); background: color-mix(in srgb, var(--u-accent) 10%, var(--u-solid)); }
.st-next { width: 100%; margin: 18px 0 8px; height: 46px; border-radius: var(--r-l); border: 0; background: var(--u-accent); color: #fff; font: inherit; font-size: var(--fs-l); font-weight: 600; cursor: pointer; }
.st-next:disabled { opacity: .45; cursor: default; }

/* ---------- grande fenêtre (équipements, plan de pose) ---------- */
.u-big { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.u-big-win { width: min(1100px, 100%); height: min(900px, 100%); display: flex; flex-direction: column; background: var(--u-bg); color: var(--u-label); border-radius: var(--u-r-l); box-shadow: var(--u-shadow); overflow: hidden;
  font: var(--fs-l)/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; animation: pp-in .35s var(--u-spring); }
.u-big-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 22px 12px; border-bottom: .5px solid var(--u-sep); }
.u-big-head h2 { margin: 0; font-size: var(--fs-hh); letter-spacing: -.02em; }
.u-big-head p { margin: 4px 0 0; font-size: var(--fs-m); color: var(--u-label-2); }
.u-big-body { flex: 1; overflow: auto; padding: 16px 22px 28px; }
.u-big-img { width: 100%; height: auto; max-height: calc(100vh - 220px); object-fit: contain; display: block; background: #fff; border-radius: var(--r-m); }
@media (max-width: 760px) { .u-big { padding: 0; } .u-big-win { height: 100%; border-radius: 0; } }
.pv-thumb { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: var(--r-m); background: var(--u-fill); color: var(--u-label); font: inherit; text-align: left; cursor: pointer; margin: 0 0 8px; }
.pv-thumb img { width: 96px; height: 66px; object-fit: cover; border-radius: var(--r-s); background: #fff; flex: none; }
.pv-thumb .l { display: grid; gap: 2px; } .pv-thumb small { color: var(--u-label-2); font-size: var(--fs-s); }
/* câblage (ui-pv.js, wiring.js) : verdict, critères en pastilles vert, orange, rouge, schéma unifilaire */
.wr-verdict { display: flex; gap: 8px; align-items: baseline; margin: 0 0 8px; padding: 10px 12px; border-radius: var(--r-m); font-size: var(--fs-body); font-weight: 600; background: color-mix(in srgb, var(--u-good) 12%, transparent); }
.wr-verdict.warn { background: color-mix(in srgb, var(--u-warn) 14%, transparent); }
.wr-verdict.bad { background: color-mix(in srgb, var(--u-bad) 13%, transparent); }
.wr-verdict .dot, .wr-checks .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--u-good); transform: translateY(-1px); }
.wr-verdict.warn .dot, .wr-checks .warn .dot { background: var(--u-warn); }
.wr-verdict.bad .dot, .wr-checks .bad .dot { background: var(--u-bad); }
.wr-checks { list-style: none; margin: 0 0 10px; padding: 0; font-size: var(--fs-m); }
.wr-checks li { display: grid; grid-template-columns: 9px 1fr auto; column-gap: 9px; align-items: baseline; padding: 7px 2px; border-bottom: .5px solid var(--u-fill); }
.wr-checks .l small { display: block; color: var(--u-label-2); font-size: var(--fs-s); }
.wr-checks strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wr-checks em { grid-column: 2 / 4; font-style: normal; font-size: var(--fs-s); color: var(--u-label-2); margin-top: 2px; }
.wr-checks .warn em { color: #a86400; } .wr-checks .bad em { color: var(--u-bad); }
.pv-thumb .wr-mini { width: 96px; height: 66px; flex: none; border-radius: var(--r-s); background: var(--u-solid); overflow: hidden; display: grid; place-items: center; }
.wr-mini svg { width: 100%; height: 100%; }
.wr-svg { overflow-x: auto; margin: 0 0 14px; padding: 10px; border-radius: var(--r-m); background: var(--u-solid); }
.wr-svg svg { display: block; width: 100%; min-width: 560px; max-width: 760px; height: auto; margin: 0 auto; }
.wr-len { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 0 0 14px; }
.wr-len label { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-m); background: var(--u-fill); font-size: var(--fs-m); }
.wr-cab td small { display: block; color: var(--u-label-2); font-size: var(--fs-s); }
/* choix du matériel (ui-pv.js choiceBig) : catégories, modèles à dérouler, et à côté le câblage vérifié */
.mc-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .mc-grid { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; } .mc-side { position: sticky; top: 0; } }
.mc-side { display: grid; gap: 10px; align-content: start; }
.mc-side .wr-svg { margin: 0; } .mc-side .wr-svg svg { min-width: 0; }
@media (max-width: 899px) { .mc-side { order: -1; } .mc-side .wr-svg svg { min-width: 520px; } }
.mc-tot { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 10px 12px; border-radius: var(--r-m); background: var(--u-solid); font-size: var(--fs-body); }
.mc-tot strong { text-align: right; font-variant-numeric: tabular-nums; }
.mc-sch > summary { cursor: pointer; font-size: var(--fs-body); font-weight: 600; padding: 6px 2px; }
.mc-cat { margin: 0 0 18px; }
.mc-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 6px; }
.mc-h h3 { margin: 0; font-size: var(--fs-xl); }
.mc-item { border-radius: var(--r-m); background: var(--u-solid); margin: 0 0 6px; border: 2px solid transparent; }
.mc-item.on { border-color: var(--u-accent); }
.mc-item.off { opacity: .6; }
.mc-item > summary { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.mc-item > summary::-webkit-details-marker { display: none; }
.mc-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--u-label-3); box-sizing: border-box; }
.mc-item.on .mc-dot { border: 4px solid var(--u-accent); }
.mc-n { display: grid; gap: 1px; min-width: 0; } .mc-n strong { font-size: var(--fs-body); } .mc-n small { font-size: var(--fs-s); color: var(--u-label-2); }
.mc-n em { font-style: normal; font-size: var(--fs-s); font-weight: 600; color: #a86400; } .mc-n em.bad { color: var(--u-bad); }
.mc-p { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .mc-p small { display: block; font-weight: 400; font-size: var(--fs-s); color: var(--u-label-2); }
.mc-body { padding: 0 12px 12px 36px; font-size: var(--fs-m); }
.mc-body dl { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 4px 12px; margin: 6px 0 8px; }
.mc-body dt { color: var(--u-label-2); } .mc-body dd { margin: 0; }
.mc-ver { margin: 0 0 8px; padding: 6px 8px; border-radius: var(--r-s); background: color-mix(in srgb, var(--u-warn) 14%, transparent); font-size: var(--fs-s); }
.mc-cur { margin: 4px 0 0; font-weight: 600; color: var(--u-accent); }
.pv-bom .mc-note { display: block; color: var(--u-label-2); font-size: var(--fs-s); }
.pv-cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 8px; }
.pv-cmp-card { padding: 10px 12px; border-radius: var(--r-m); background: var(--u-fill); border: 2px solid transparent; font-size: var(--fs-m); }
.pv-cmp-card.on { border-color: var(--u-accent); background: color-mix(in srgb, var(--u-accent) 7%, var(--u-solid)); }
.pv-cmp-card p { margin: 4px 0 0; } .pv-cmp-card .big { font-size: var(--fs-h); font-weight: 700; letter-spacing: -.02em; } .pv-cmp-card .big small { font-size: var(--fs-s); font-weight: 400; color: var(--u-label-2); }
.pv-cmp-card .s { color: var(--u-label-2); font-size: var(--fs-s); } .pv-cmp-card .mc-cur { margin-left: 6px; font-size: var(--fs-s); }
.pv-cmp-sec { margin: 6px 0 14px; }
.mc-no > summary { cursor: pointer; font-size: var(--fs-m); color: var(--u-label-2); padding: 6px 2px; }
.st-done { margin: -8px 0 18px; padding: 12px 14px; border-radius: var(--r-m); background: color-mix(in srgb, var(--u-accent) 8%, transparent); font-size: var(--fs-body); }
.st-done p { margin: 0 0 6px; } .st-done .u-cap { margin: 0; }
.st-big { margin: 4px 0 8px; }

/* mode simple (ui-pv.js) : trois écrans, des questions d'un geste, la carte réponse */
.st-mode { display: block; margin: 4px auto 10px; border: 0; background: none; color: var(--u-accent); font: inherit; font-size: var(--fs-m); cursor: pointer; }

/* ================================================================= sur la carte (ui-map.js) */
/* « Est-ce votre maison ? » : sous la maison, au centre de la carte visible (à gauche de la feuille ancrée) */
.um-house { position: absolute; z-index: 12; left: 50%; top: calc(50% + 64px); transform: translateX(-50%); width: min(340px, calc(100% - 32px)); box-sizing: border-box;
  border-radius: var(--u-r-l); padding: 20px 20px 14px; text-align: center; font: var(--fs-l)/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  animation: um-in .45s var(--u-spring); }
body.u-open .um-house { left: calc((100% - 432px) / 2); }
@keyframes um-in { from { opacity: 0; transform: translate(-50%, 14px) scale(.97); } }
.um-house h2 { margin: 0 0 4px; font-size: var(--fs-h); letter-spacing: -.01em; }
.um-house .um-addr { margin: 0 26px 6px; font-size: var(--fs-s); color: var(--u-label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-house .um-sub { margin: 0 0 14px; font-size: var(--fs-m); color: var(--u-label-2); }
.um-house .um-yes { margin: 0 0 12px; }
.um-house .um-else { margin: 0 0 4px; font-size: var(--fs-body); }
.um-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--u-fill); color: var(--u-label-2); font-size: var(--fs-s); cursor: pointer; }
.um-draw, .um-pot { display: inline-block; border: 0; background: none; padding: 6px 4px; font: inherit; font-size: var(--fs-m); color: var(--u-accent); cursor: pointer; }
.um-pot { padding: 6px 0 0; font-weight: 600; }
@media (max-width: 760px) { .um-house { top: auto; bottom: 162px; } }
/* le toit relevé au laser : la liste de ses pans, chacun avec sa couleur sur la carte */
.um-lidar .um-pans, .r3 .um-pans { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; display: grid; gap: 5px; font-size: var(--fs-body); }
.um-lidar .um-pans li, .r3 .um-pans li { display: flex; align-items: center; gap: 8px; }
.um-lidar .um-pans i, .r3 .um-pans i { flex: none; width: 12px; height: 12px; border-radius: var(--r-xs); }

/* la légende de l'installation : en haut à gauche, sous le logo ; réduite d'un toucher */
.um-legend { position: absolute; z-index: 6; left: 16px; top: calc(max(14px, env(safe-area-inset-top)) + 58px); width: 300px; box-sizing: border-box; border-radius: var(--r-l); padding: 10px 14px 12px;
  font: var(--fs-m)/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; }
.um-legend:not(.open) { padding-bottom: 10px; }
.um-leg-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.um-leg-head .l { flex: 1; display: grid; }
.um-leg-head small { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--u-accent); }
.um-leg-head strong { font-size: var(--fs-xl); letter-spacing: -.01em; }
.um-leg-head .chev { color: var(--u-label-3); font-size: var(--fs-h); transform: rotate(90deg); transition: transform .3s var(--u-spring); }
.um-legend.open .um-leg-head .chev { transform: rotate(-90deg); }
.um-legend p { margin: 6px 0 0; }
.um-legend .um-why { color: var(--u-label-2); font-size: var(--fs-s); }
.um-legend .um-why strong { color: var(--u-label); }
.um-compass { flex: none; width: 34px; height: 34px; color: var(--u-label); }
.um-compass svg { width: 100%; height: 100%; display: block; }
@media (max-width: 760px) { .um-legend { left: 10px; right: 64px; width: auto; top: calc(max(14px, env(safe-area-inset-top)) + 54px); } }

/* cheminées : le bouton rond, et sur chaque cercle son diamètre (ses réglages au toucher) */
.um-chim { top: auto; bottom: 44px; left: 16px; }
.um-chim.on { background: var(--u-accent); color: #fff; }
@media (max-width: 760px) { .um-chim { z-index: 7; top: calc(max(14px, env(safe-area-inset-top)) + 54px); bottom: auto; left: auto; right: 10px; } }   /* sous la feuille quand elle monte */
.um-cms { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.um-cm { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 6px; pointer-events: auto; }
.um-cm-tag { height: 22px; padding: 0 8px; border-radius: var(--r-m); border: 0; background: #b3261e; color: #fff; font: 600 var(--fs-s) -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer; white-space: nowrap; }
.um-cm-pop { width: 230px; border-radius: var(--r-m); padding: 10px 12px; display: grid; gap: 8px; font: var(--fs-body)/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; cursor: default; }
.um-cm-pop .t { margin: 0; font-weight: 600; }
.um-cm-pop label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.um-cm-pop label small { display: block; font-size: var(--fs-xs); color: var(--u-label-2); }
.um-cm-pop .u-step { grid-template-columns: 30px 58px 30px; }
.um-cm-del { color: var(--u-bad); text-align: left; padding: 2px 0; }
.um-cm-del { border: 0; background: none; font: inherit; font-size: var(--fs-m); cursor: pointer; }
.um-cm.open { z-index: 2; }
/* mode simple : le planning de production (colonnes) et la consommation (trait) */
.sh-diag .t.dn { fill: var(--u-warn); font-weight: 600; }
/* votre météo annuelle synthétique (étape Maison) */
.mt-card { margin: 18px 0 8px; }
.mt-card .u-gt { margin: 0 0 6px; }
.mt-cal { display: grid; grid-template-columns: auto 1fr; gap: 6px; }
.mt-hours { position: relative; width: 26px; font-size: var(--fs-xs); color: var(--u-label-2); }
.mt-hours span { position: absolute; right: 0; transform: translateY(-50%); }
/* image : 24 lignes d'heures (480 px), 6 px d'écart, la bande des températures (40 px) ; 526 px en tout */
.mt-hours span:nth-child(1) { top: 0; transform: none; } .mt-hours span:nth-child(2) { top: 22.8%; } .mt-hours span:nth-child(3) { top: 45.6%; }
.mt-hours span:nth-child(4) { top: 68.4%; } .mt-hours span.t { top: 96.2%; }
.mt-img img { display: block; width: 100%; height: auto; border-radius: var(--r-s); }
.mt-months { display: grid; grid-template-columns: repeat(12, 1fr); font-size: var(--fs-xs); color: var(--u-label-2); text-align: center; margin: 3px 0 0 32px; }
.mt-facts { margin-top: 10px; }
/* votre foyer (équipements et chauffage) : présence en journée, usage de l'eau chaude */
.pv-auto.pv-col { flex-direction: column; align-items: stretch; gap: 6px; }
.u-seg.pv-seg { margin: 0; flex: none; }   /* .u-seg.sm a une base de 220 px, prévue pour une rangée */

/* la maquette 3D du toit relevé (ui-map.js open3D, roof3d.js) : la vue à gauche, la légende à droite (dessous sur téléphone) */
.r3 { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.r3-view { position: relative; height: min(62vh, 560px); border-radius: var(--u-r-m, 12px); overflow: hidden; background: linear-gradient(#dfe9f5, #f4f6f8); cursor: grab; }
.r3-view:active { cursor: grabbing; }
.r3-view canvas { display: block; }
.r3-compass { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; pointer-events: none; }
.r3-compass svg { width: 100%; height: 100%; }
.r3-side { font-size: var(--fs-body); }
.r3-fit { margin: 0 0 10px; }
.r3-tog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; cursor: pointer; }
.r3-key { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-s); color: var(--u-label-2); }
.r3-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.r3-views { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.r3-list { margin-bottom: 12px; }
.r3-act { display: grid; gap: 6px; margin-top: 8px; }
.st-two { display: inline-flex; gap: 10px; }
@media (max-width: 760px) { .r3 { grid-template-columns: 1fr; } .r3-view { height: 48vh; } }
.pv-3d { display: flex; align-items: center; gap: 12px; margin: 10px 0 12px; padding: 12px 14px; border-radius: var(--u-r-m, 12px); background: var(--u-fill); }
.pv-3d .t { flex: 1; display: grid; gap: 2px; font-size: var(--fs-body); }
.pv-3d .t span { font-size: var(--fs-m); color: var(--u-label-2); }
.pv-3d .u-pill { flex: none; }
.r3-steps { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 4px; font-size: var(--fs-body); }
.r3 .um-pans li .t { flex: 1; }
.r3-redo { flex: none; border: 0; background: none; padding: 2px 4px; font: inherit; font-size: var(--fs-m); color: var(--u-accent); cursor: pointer; }
.r3-seg { margin: 0 0 12px; }
.s3-info { margin: 10px 0 6px; font-size: var(--fs-body); line-height: 1.45; }
.s3-bad { color: #c93400; font-weight: 600; }
.s3-p { color: var(--u-label-2); }
.s3-key { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; font-size: var(--fs-s); color: var(--u-label-2); }
.s3-key i { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-xs); margin-right: 4px; vertical-align: -1px; }
.s3-cands { margin: 6px 0; padding-left: 18px; font-size: var(--fs-body); display: grid; gap: 3px; }
.s3-best { margin-top: 8px; font-size: var(--fs-body); }
.s3-best .u-cta { width: 100%; margin-top: 6px; }

/* ================================================================= la mise en scène (stage.js), styles isolés sous .stg */
.stg {
  --bg: #eef1f5; --sky1: #dfe9f5; --sky2: #f7f8fa; --ground: #d9dccf;
  --surface: rgba(255,255,255,.86); --solid: #fff; --fill: rgba(120,120,128,.12); --fill2: rgba(120,120,128,.2);
  --label: #111316; --label2: rgba(60,60,67,.62); --label3: rgba(60,60,67,.32); --sep: rgba(60,60,67,.16);
  --accent: #007aff; --good: #248a3d; --warn: #c93400; --sun: #ffb800; --panel: #1c3d6e; --shade: #8e8e93;
  --shadow: 0 10px 40px rgba(20,30,50,.14), 0 1px 3px rgba(0,0,0,.06);
  --r-ex: #1f8a4c; --r-good: #2f7d32; --r-mid: #b26a00; --r-bad: #c0352b;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .stg {
  --bg: #0b0d10; --sky1: #16202e; --sky2: #0e1116; --ground: #2a2d27;
  --surface: rgba(28,30,34,.86); --solid: #1c1c1e; --fill: rgba(118,118,128,.24); --fill2: rgba(118,118,128,.34);
  --label: #f2f3f5; --label2: rgba(235,235,245,.62); --label3: rgba(235,235,245,.3); --sep: rgba(84,84,88,.6);
  --accent: #0a84ff; --good: #30d158; --warn: #ff9f0a; --sun: #ffc83d; --panel: #2f5a9e; --shade: #636366;
  --shadow: 0 10px 40px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3); --r-ex: #30d158; --r-good: #6fd36f; --r-mid: #ffb340; --r-bad: #ff6961; color-scheme: dark }
}
:root[data-theme="dark"] .stg {
  --bg: #0b0d10; --sky1: #16202e; --sky2: #0e1116; --ground: #2a2d27;
  --surface: rgba(28,30,34,.86); --solid: #1c1c1e; --fill: rgba(118,118,128,.24); --fill2: rgba(118,118,128,.34);
  --label: #f2f3f5; --label2: rgba(235,235,245,.62); --label3: rgba(235,235,245,.3); --sep: rgba(84,84,88,.6);
  --accent: #0a84ff; --good: #30d158; --warn: #ff9f0a; --sun: #ffc83d; --panel: #2f5a9e; --shade: #636366;
  --shadow: 0 10px 40px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3); --r-ex: #30d158; --r-good: #6fd36f; --r-mid: #ffb340; --r-bad: #ff6961; color-scheme: dark }
.stg, .stg * { box-sizing: border-box; }
.stg [hidden] { display: none !important; }
.stg { background: var(--bg); color: var(--label); font: var(--fs-l)/1.45 var(--font); }
.stg .wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 18px 40px; display: grid; gap: 16px; }
.stg header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.stg .search { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 16px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.stg .search svg { flex: none; width: 18px; height: 18px; color: var(--label2); }
.stg .search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--fs-l); color: var(--label); outline: none; }
.stg .btn { border: 0; border-radius: var(--r-pill); padding: 9px 16px; font: 600 var(--fs-body)/1 var(--font); cursor: pointer; background: var(--fill); color: var(--accent); }
.stg .btn.solid { background: var(--accent); color: #fff; }
.stg .btn:focus-visible,.stg .chip:focus-visible,.stg .why:focus-visible,.stg .pill:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.stg .ex { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-m); color: var(--label2); }
.stg .ex a { padding: 5px 10px; border-radius: var(--r-pill); background: var(--fill); color: var(--accent); text-decoration: none; font-weight: 600; }
.stg .ex a[aria-current="true"] { background: var(--accent); color: #fff; }
.stg .hood { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-m); color: var(--label2); cursor: pointer; user-select: none; }
.stg .hood input { appearance: none; width: 38px; height: 22px; border-radius: var(--r-m); background: var(--fill2); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.stg .hood input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.32,.72,0,1); }
.stg .hood input:checked { background: var(--good); }
.stg .hood input:checked::after { transform: translateX(16px); }
.stg .stage { position: relative; border-radius: var(--r-l); overflow: hidden; background: linear-gradient(var(--sky1), var(--sky2)); box-shadow: var(--shadow); aspect-ratio: 16 / 9; max-height: 64vh; width: 100%; }
.stg .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stg .caption { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font: 600 var(--fs-l)/1.2 var(--display); white-space: nowrap; max-width: calc(100% - 32px); }
.stg .caption .res { font-weight: 500; color: var(--label2); overflow: hidden; text-overflow: ellipsis; }
.stg .caption .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; animation: stg-pulse 1.1s ease-in-out infinite; }
.stg .caption.done .dot { animation: none; background: var(--good); }
@keyframes stg-pulse { 50% { transform: scale(1.6); opacity: .5; } }
.stg .steps { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 120px); }
.stg .chip { border: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); font: 600 var(--fs-s)/1 var(--font); background: var(--surface); color: var(--label2); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.stg .chip .k { width: 6px; height: 6px; border-radius: 50%; background: var(--label3); }
.stg .chip.on { color: var(--label); }
.stg .chip.on .k { background: var(--accent); }
.stg .chip.ok .k { background: var(--good); }
.stg .skip { position: absolute; top: 14px; right: 14px; }
.stg .calbox { position: absolute; inset: 7% 8% 19%; display: grid; place-items: center; pointer-events: none; padding: 12px; border-radius: var(--r-l); background: var(--surface); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.stg .calbox svg { width: 100%; height: 100%; }
.stg .legend { position: absolute; right: 14px; bottom: 74px; display: grid; gap: 4px; padding: 8px 10px; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow); font-size: var(--fs-xs); color: var(--label2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.stg .legend .g { width: 150px; height: 8px; border-radius: var(--r-xs); background: linear-gradient(90deg, #2b1a4a, #5b2a86, #b03a7a, #f0644a, #f9a33a, #ffe066); }
.stg .legend .r { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.stg .legend .n { font-size: var(--fs-xs); max-width: 170px; }
@media (max-width: 560px) {
.stg .legend { bottom: 64px; right: 10px; }
.stg .legend .g { width: 110px; }
}
.stg .answer { display: grid; gap: 14px; }
.stg .lead { font: 600 clamp(22px, 3.2vw, 32px)/1.2 var(--display); letter-spacing: -.01em; text-wrap: balance; margin: 6px 0 0; }
.stg .lead em { font-style: normal; color: var(--accent); }
.stg .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.stg .pill { position: relative; border: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-pill); background: var(--solid); box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 .5px var(--sep); font: 500 var(--fs-body)/1.1 var(--font); color: var(--label); cursor: pointer; }
.stg .pill small { color: var(--label2); font-weight: 500; }
.stg .pill .conf { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.stg .pill .conf.mid { background: var(--warn); }
.stg .pop { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 220px; padding: 6px; border-radius: var(--r-m); background: var(--solid); box-shadow: var(--shadow); display: grid; gap: 2px; text-align: left; }
.stg .pop button { border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: var(--r-s); font: var(--fs-body)/1.2 var(--font); color: var(--label); cursor: pointer; }
.stg .pop button:hover,.stg .pop button[aria-pressed="true"] { background: var(--fill); }
.stg .pop p { margin: 4px 10px 6px; font-size: var(--fs-s); color: var(--label2); }
.stg .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.stg .card { min-width: 0; padding: 16px 18px 14px; border-radius: var(--r-l); background: var(--solid); box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 .5px var(--sep); display: grid; gap: 4px; align-content: start; }
.stg .card .t { font-size: var(--fs-m); color: var(--label2); font-weight: 600; }
.stg .card .n { font: 700 34px/1.05 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stg .card .n small { font-size: var(--fs-l); font-weight: 600; color: var(--label2); margin-left: 2px; }
.stg .card .s { color: var(--label2); font-size: var(--fs-body); }
.stg .why { justify-self: start; margin-top: 6px; border: 0; background: none; padding: 4px 0; font: 600 var(--fs-m)/1 var(--font); color: var(--accent); cursor: pointer; }
.stg .whybox { margin-top: 6px; padding-top: 10px; border-top: .5px solid var(--sep); font-size: var(--fs-body); color: var(--label2); display: grid; gap: 8px; }
.stg .whybox canvas { width: 100%; height: 140px; border-radius: var(--r-m); background: linear-gradient(var(--sky1), var(--sky2)); }
.stg .next { display: flex; flex-wrap: wrap; gap: 10px; }
.stg .pot { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px 22px; align-items: center; padding: 16px 18px; border-radius: var(--r-l); background: var(--solid); box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 .5px var(--sep); }
.stg .pot .badge { display: grid; gap: 4px; }
.stg .pot .badge b { font: 700 var(--fs-hh)/1.1 var(--display); letter-spacing: -.01em; color: var(--rate); }
.stg .pot .badge span { font-size: var(--fs-m); color: var(--label2); }
.stg .pot .bars { display: grid; gap: 8px; min-width: 0; }
.stg .bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 54px; gap: 10px; align-items: center; font-size: var(--fs-m); }
.stg .bar .tr { position: relative; height: 10px; border-radius: var(--r-xs); background: var(--fill); }
.stg .bar .tr::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1.5px; background: var(--label3); }
.stg .bar .f { position: absolute; top: 0; bottom: 0; border-radius: var(--r-xs); }
.stg .bar .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.stg .pot .say { grid-column: 1 / -1; margin: 0; font-size: var(--fs-body); color: var(--label); }
@media (max-width: 560px) {
.stg .pot { grid-template-columns: 1fr; }
.stg .bar { grid-template-columns: 110px minmax(0, 1fr) 48px; }
}
.stg .under { display: grid; gap: 14px; padding: 16px 18px; border-radius: var(--r-l); background: var(--solid); box-shadow: 0 0 0 .5px var(--sep); }
.stg .under h2 { margin: 0; font: 700 var(--fs-xl)/1.2 var(--display); }
.stg .under h3, .stg .detail-b h3 { margin: 4px 0 0; font: 600 var(--fs-s)/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--label2); }
.stg .tbl { overflow-x: auto; }
.stg table { border-collapse: collapse; width: 100%; font-size: var(--fs-m); font-variant-numeric: tabular-nums; }
.stg th,.stg td { text-align: left; padding: 7px 10px 7px 0; border-bottom: .5px solid var(--sep); vertical-align: top; }
.stg th { font-weight: 600; color: var(--label2); font-size: var(--fs-s); }
.stg td.r,.stg th.r { text-align: right; }
.stg .src { font-family: var(--mono); font-size: var(--fs-s); color: var(--label2); }
.stg .lvl { display: inline-block; padding: 2px 7px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.stg .lvl.mid { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.stg .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.stg .cols > div { min-width: 0; }
.stg .note { font-size: var(--fs-s); color: var(--label2); margin: 0; }
@media (max-width: 560px) {
.stg .stage { aspect-ratio: 4 / 5; max-height: none; }
.stg .caption { font-size: var(--fs-m); bottom: 12px; }
.stg .steps { max-width: calc(100% - 90px); }
}
@media (prefers-reduced-motion: reduce) {
.stg .caption .dot { animation: none; }
}

/* la fenêtre plein écran de la mise en scène, et la liste de ce que le moteur fait pendant le calcul */
.stg { position: fixed; inset: 0; z-index: 70; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.stg .stg-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.stg .who { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; }
.stg .who b { font: 700 var(--fs-h)/1.2 var(--display); letter-spacing: -.01em; }
.stg .who span { font-size: var(--fs-m); color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg .prep .stage { display: grid; place-items: center; }
.stg .prep-list { display: grid; gap: 12px; padding: 24px; max-width: 520px; }
.stg .pl { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 var(--fs-l)/1.35 var(--display); color: var(--label3); }
.stg .pl .k { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--fill2); }
.stg .pl[data-s="on"] { color: var(--label); }
.stg .pl[data-s="on"] .k { background: var(--accent); animation: stg-pulse 1.1s ease-in-out infinite; }
.stg .pl[data-s="ok"] { color: var(--label2); }
.stg .pl[data-s="ok"] .k { background: var(--good); }
.stg .pl[data-s="skip"] .k { background: var(--label3); }
.stg .pl.err { color: var(--warn); font-weight: 500; }
.stg .hood-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .stg .pl[data-s="on"] .k { animation: none; } }


/* ================================================================= Soleillon (sunny.js), dans la charte du site
   Ses couleurs chaudes ne sont qu'à lui (son portrait) ; le reste suit la feuille : surfaces blanches (ou sombres), gris
   des boutons secondaires, bleu des actions, mêmes rayons et ombres. Les variables de la mise en scène (.stg) l'emportent
   quand Soleillon y parle, sinon celles de la feuille (--u-…).
   - une bulle (say) : un échange, dans la réponse ;
   - une fenêtre (card) : une question à laquelle répondre (la maison en 3D, les questions sur le foyer, et sur la carte
     « Est-ce votre maison ? ») : en-tête Soleillon, titre, texte, contenu, bouton principal en bleu sur toute la largeur. */
.sy-say, .sy-card, .um-house, .st-sunny {
  --sy-acc: var(--accent, var(--u-accent)); --sy-label: var(--label, var(--u-label)); --sy-label2: var(--label2, var(--u-label-2));
  --sy-fill: var(--fill, var(--u-fill)); --sy-solid: var(--solid, var(--u-solid)); --sy-sep: var(--sep, var(--u-sep));
  --sy-display: var(--display, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif); }
.sy-say { display: flex; align-items: flex-start; gap: 10px; }
.sy-bubble { flex: 1; min-width: 0; display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--r-l) var(--r-l) var(--r-l) var(--r-s); background: var(--sy-solid); color: var(--sy-label);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 .5px var(--sy-sep); }
.sy-text { margin: 0; font-size: var(--fs-l); line-height: 1.4; }
.sy-text b { font-weight: 700; }
.sy-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sy-actions button, .sy-alt { border: 0; border-radius: var(--r-pill); padding: 10px 16px; font: 600 var(--fs-l)/1.15 inherit; font-family: inherit; cursor: pointer; background: var(--sy-fill); color: var(--sy-label); }
.sy-actions button.main { background: var(--sy-acc); color: #fff; }
.sy-actions button:focus-visible, .sy-alt:focus-visible, .sy-cta:focus-visible, .sy-opts button:focus-visible { outline: 3px solid color-mix(in srgb, var(--sy-acc) 45%, transparent); outline-offset: 2px; }
/* la fenêtre */
.sy-card { display: grid; gap: 12px; padding: 18px 20px 20px; border-radius: var(--r-l); background: var(--sy-solid); color: var(--sy-label);
  box-shadow: 0 10px 40px rgba(0,0,0,.12), 0 0 0 .5px var(--sy-sep); text-align: left; }
.sy-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sy-head strong { font-size: var(--fs-body); }
.sy-head .sy-note, .sy-head .um-addr { margin: 0 0 0 auto; font-size: var(--fs-m); color: var(--sy-label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-title { margin: 0; font: 700 clamp(21px, 2.6vw, 26px)/1.15 var(--sy-display); letter-spacing: -.015em; }
.sy-sub { margin: -4px 0 0; font-size: var(--fs-l); line-height: 1.4; color: var(--sy-label2); }
.sy-acts { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sy-cta { height: 50px; border: 0; border-radius: var(--r-l); padding: 0 22px; background: var(--sy-acc); color: #fff; font: 600 var(--fs-l)/1 inherit; font-family: inherit; cursor: pointer; }
.sy-cta:hover { filter: brightness(1.08); }
.sy-acts .sy-alt { height: 50px; padding: 0 20px; }
.sy-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sy-opts button { min-height: 52px; border: 0; border-radius: var(--r-m); padding: 10px 14px; background: var(--sy-fill); color: var(--sy-label); font: 600 var(--fs-l)/1.2 inherit; font-family: inherit; text-align: left; cursor: pointer; }
.sy-opts button:hover { background: color-mix(in srgb, var(--sy-fill) 100%, var(--sy-label) 6%); }
.sy-opts button.on { background: color-mix(in srgb, var(--sy-acc) 14%, transparent); color: var(--sy-acc); box-shadow: inset 0 0 0 2px var(--sy-acc); }
.sy-foot { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.sy-back { border: 0; background: none; padding: 4px 0; font: 600 var(--fs-body)/1 inherit; font-family: inherit; color: var(--sy-acc); cursor: pointer; }
.sy-dots { display: flex; gap: 5px; }
.sy-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--sy-fill); }
.sy-dots i.done { background: color-mix(in srgb, var(--sy-acc) 45%, transparent); }
.sy-dots i.now { background: var(--sy-acc); }
@media (max-width: 520px) { .sy-acts { grid-template-columns: 1fr; } .sy-opts { grid-template-columns: 1fr 1fr; } .sy-say > .sunny { width: 34px; height: 34px; } .sy-say { gap: 6px; } }

/* la mise en scène : avant la scène, la fenêtre de Soleillon seule au milieu (le cadre de la scène s'efface) */
.stg .prep .stage { aspect-ratio: auto; max-height: none; min-height: min(70vh, 640px); overflow: visible; background: none; box-shadow: none; display: grid; place-items: center; align-content: center; gap: 16px; padding: 12px 0 24px; }
.stg .stg-3d { width: min(1080px, 100%); }
.stg .stg-q { width: min(640px, 100%); }
.stg .stg-3d .host { position: relative; height: min(64vh, 620px); min-height: 280px; border-radius: var(--r-l); overflow: hidden; background: var(--fill); }
.stg .stg-3d .host canvas { position: static; display: block; width: 100% !important; height: 100% !important; cursor: grab; }
.stg .stg-3d .wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-body); color: var(--label2); }
.stg .prep-list { width: min(640px, 100%); padding: 0; }
.stg .prep-list .sy-say { text-align: left; }
/* la légende de la scène : le portrait de Soleillon à la place du point ; les étapes faites, cochées */
.stg .caption .sy { display: contents; }
.stg .caption .sy .sunny { margin: -10px -2px -10px -6px; }
.stg .caption .sy:not(:empty) + .dot { display: none; }
.stg .chip.ok .k { width: auto; height: auto; background: none; }
.stg .chip.ok .k::before { content: "✓"; color: var(--good); font-weight: 800; }
/* la réponse : les bulles de Soleillon, ce qu'il a deviné, et tout à régler sur place */
.stg .answer .sy-say .pills { margin: 0; }
.stg .pv-live { display: grid; gap: 12px; color: var(--label); }
.stg .pv-live .pv-tune { margin: 0; padding: 10px 12px; background: var(--fill); }
.stg .pv-live .pv-step { font-size: var(--fs-l); }
.stg .pv-live .pv-step .u-pill.icon { width: 38px; height: 38px; font-size: var(--fs-h); }
.stg .pv-live .pv-step strong { font-size: var(--fs-h); min-width: 2.5ch; }
.stg .pv-live-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.stg .pv-live-facts .pv-fact { background: var(--fill); }
.stg .pv-live-fig { margin: 0; display: grid; gap: 6px; }
.stg .pv-live-fig button { border: 0; padding: 0; background: #fff; border-radius: var(--r-m); overflow: hidden; cursor: zoom-in; box-shadow: 0 0 0 .5px var(--sep); }
.stg .pv-live-fig img { display: block; width: 100%; height: auto; }
.stg .pv-live-fig figcaption { font-size: var(--fs-s); color: var(--label2); }
.stg .pv-live-cons { background: var(--fill); border-radius: var(--r-m); padding: 4px 12px; max-height: 60vh; overflow: auto; }
.stg .pv-live-cons summary { cursor: pointer; padding: 10px 0; font-size: var(--fs-l); }
.stg .pv-live-cons summary span { color: var(--label2); }

/* sur la carte, parcours simple : « Est-ce votre maison ? », la fenêtre seule (la feuille de droite attend la réponse) */
.um-house .um-sunny { margin: 0 30px 8px 0; }
.um-house .um-sunny .um-addr { margin: 0 0 0 auto; }
.um-house .um-alt { display: flex; flex-wrap: wrap; gap: 8px; }
.um-house .um-alt .u-pill { flex: 1; justify-content: center; height: 42px; font-size: var(--fs-body); font-weight: 600; white-space: nowrap; color: var(--u-label); background: var(--u-fill); }
body.um-solo .u-sheet { display: none; }
body.um-solo .um-house { width: min(420px, calc(100% - 32px)); padding: 18px 20px 20px; border-radius: var(--r-l); }
body.um-solo .um-house h2 { font: 700 var(--fs-hh)/1.15 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; letter-spacing: -.015em; }
body.um-solo .um-house .um-sub { font-size: var(--fs-l); }

/* le mode avancé : revenir à Soleillon d'un geste, tout gardé */
.st-sunny { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 6px 6px 8px; border-radius: var(--r-m); background: var(--u-fill); font-size: var(--fs-m); color: var(--u-label-2); }
.st-sunny span { flex: 1; }
.st-home { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.st-home strong { font-size: var(--fs-xl); }
.st-home .u-cap { margin: 2px 0 0; }
/* la scène finie : le curseur de période, vos panneaux colorés selon leur productivité */
.stg .period { position: absolute; left: 14px; bottom: 64px; display: grid; gap: 6px; max-width: calc(100% - 28px); }
.stg .period .seg { display: inline-flex; width: max-content; padding: 3px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.stg .period .seg button { border: 0; background: none; padding: 7px 13px; border-radius: var(--r-pill); font: 600 var(--fs-m)/1 var(--font); color: var(--label2); cursor: pointer; }
.stg .period .seg button[aria-pressed="true"] { background: var(--solid); color: var(--label); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.stg .period .pl { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 10px; border-radius: var(--r-m); background: var(--surface); font-size: var(--fs-s); color: var(--label); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.stg .period .pl b { font-weight: 600; }
.stg .period .ramp { width: 56px; height: 8px; border-radius: var(--r-xs); background: linear-gradient(90deg, hsl(240,85%,50%), hsl(120,85%,55%), hsl(0,85%,50%)); }
@media (max-width: 760px) { .stg .period { bottom: 54px; left: 8px; } .stg .period .seg button { padding: 6px 10px; } }
/* l'année à l'écran (ui-pv.js yearChart), dans la charte de la feuille, clair ou sombre */
.yc { margin: 0; display: grid; gap: 6px; color: var(--u-label); font: var(--fs-m)/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; }
.yc-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 4px; }
.yc-h strong { font-size: var(--fs-body); }
.yc-k { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-s); color: var(--u-label-2); }
.yc-k span { display: inline-flex; align-items: center; gap: 5px; }
.yc-k i { width: 11px; height: 11px; border-radius: var(--r-xs); display: inline-block; }
.yc-k i.c { height: 3px; border-radius: var(--r-xs); background: var(--u-label); }
.yc-svg { width: 100%; height: auto; display: block; overflow: visible; }
.yc-svg .g { stroke: var(--u-sep); stroke-width: 1; }
.yc-svg .ax { fill: var(--u-label-2); font-size: var(--fs-xs); }
.yc-svg .c { fill: none; stroke: var(--u-label); stroke-width: 2.5; stroke-linejoin: round; }
.yc .p { fill: #f5a623; background: #f5a623; }
.yc .n { fill: #5856d6; background: #5856d6; }
.yc .f { fill: #b4a7f5; background: #b4a7f5; }
.yc .h { fill: var(--u-bad); background: var(--u-bad); }
.yc-svg .hit { fill: transparent; }
.yc-svg .wk:hover rect:not(.hit) { filter: brightness(1.12); }
.yc .d.ok { fill: color-mix(in srgb, var(--u-good) 38%, transparent); background: color-mix(in srgb, var(--u-good) 38%, transparent); }
.yc .d.low { fill: color-mix(in srgb, var(--u-warn) 60%, transparent); background: color-mix(in srgb, var(--u-warn) 60%, transparent); }
.yc .d.gen.g1 { fill: color-mix(in srgb, var(--u-accent) 45%, transparent); }
.yc .d.gen.g2 { fill: color-mix(in srgb, var(--u-accent) 72%, transparent); background: color-mix(in srgb, var(--u-accent) 72%, transparent); }
.yc .d.gen.g3 { fill: var(--u-accent); }
.yc .d.s0 { fill: var(--u-fill-2); background: var(--u-fill-2); }
.yc .d.s1 { fill: color-mix(in srgb, var(--u-good) 25%, var(--u-fill-2)); }
.yc .d.s2 { fill: color-mix(in srgb, var(--u-good) 50%, var(--u-fill-2)); background: color-mix(in srgb, var(--u-good) 50%, var(--u-fill-2)); }
.yc .d.s3 { fill: color-mix(in srgb, var(--u-good) 75%, var(--u-fill-2)); }
.yc .d.s4 { fill: var(--u-good); background: var(--u-good); }
.yc-svg .d.miss { stroke: var(--u-bad); stroke-width: 2; }
.yc-k i.d.miss { background: transparent; box-shadow: inset 0 0 0 2px var(--u-bad); }
.yc-svg .d:hover { stroke: var(--u-label); stroke-width: 1.5; }
.yc figcaption { font-size: var(--fs-s); color: var(--u-label-2); }
/* recommencer avec une autre maison */
.um-house .um-other { flex: none; border: 0; background: none; padding: 2px 0; font: 600 var(--fs-m)/1 inherit; font-family: inherit; color: var(--u-accent); cursor: pointer; }
.um-house .um-sunny .um-addr { flex: 0 1 auto; }
.um-house .um-sunny .um-addr + .um-other::before { content: "· "; color: var(--u-label-2); }
.stg .prep .stg-top { width: 100%; }
/* la bulle d'aide de Soleillon (sunny.js help), au survol d'un bouton */
.sy-tip { position: fixed; z-index: 10000; display: flex; align-items: center; gap: 8px; max-width: 300px; padding: 7px 12px 7px 7px; border-radius: var(--r-m); background: var(--u-solid); color: var(--u-label);
  box-shadow: 0 8px 28px rgba(0,0,0,.18), 0 0 0 .5px var(--u-sep); font: var(--fs-m)/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; pointer-events: none; animation: sy-tip .18s ease-out; }
.sy-tip.up { transform-origin: bottom center; }
.sy-tip.down { transform-origin: top center; }
@keyframes sy-tip { from { opacity: 0; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .sy-tip { animation: none; } }
/* les fonctions avancées dans la réponse de Soleillon : grisées et inertes tant que le mode avancé est fermé */
.stg .adv { display: grid; gap: 12px; }
.stg .adv-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; transition: opacity .25s, filter .25s; }
.stg .adv-sec { min-width: 0; display: grid; gap: 8px; align-content: start; padding: 14px 16px; border-radius: var(--r-l); background: var(--solid); color: var(--u-label); box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 .5px var(--sep); }
.stg .adv-h { display: grid; gap: 2px; }
.stg .adv-h strong { font: 700 var(--fs-l)/1.2 var(--display); }
.stg .adv-h span { font-size: var(--fs-m); color: var(--label2); }
.stg .adv-body { display: grid; gap: 8px; min-width: 0; overflow-x: auto; }
.stg .adv-body .pv-bom { width: 100%; }
.stg .adv-mat, .stg .adv-cab { grid-column: 1 / -1; }
.stg .adv.locked .adv-list { opacity: .45; filter: grayscale(1); pointer-events: none; user-select: none; }
.stg .adv.locked .adv-h strong::before { content: "🔒 "; }
/* les grandes fenêtres (choisir le matériel, le schéma) et le rapport, par-dessus la mise en scène */
.u-big { z-index: 80; }
.u-pdfview { z-index: 85; }
.stg .adv.locked .adv-body { max-height: 96px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent); }
.stg .adv.locked .adv-mat, .stg .adv.locked .adv-cab { grid-column: auto; }

/* ================================================================= l'écran fixe de la réponse (stage.js answer)
   Trois colonnes, sans défilement de la page : à gauche ce qui se règle, au centre la maquette et la phrase de la
   réponse, à droite les résultats ; chaque colonne défile seule si elle déborde. Un détail (l'année en grand, une
   fonction avancée, « sous le capot ») s'ouvre au centre, par-dessus la maquette. Pendant la scène, la maquette seule. */
.stg:has(> .wrap.fix) { overflow: hidden; }
.stg .wrap.fix { max-width: none; height: 100dvh; padding-block: 14px; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
.stg .stg-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; min-height: 0; }
.stg .stg-body.done { grid-template-columns: clamp(340px, 26vw, 400px) minmax(0, 1fr) 340px; }   /* à gauche : les réglages (fins compris) sans ascenseur de côté */
.stg .stg-body:not(.done) .side { display: none; }
.stg .side { min-width: 0; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 12px; padding: 2px 4px 12px 2px; scrollbar-width: thin; }
.stg .mid { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.stg .wrap.fix .stage { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; max-height: none; }
.stg .mid .lead { margin: 0; font-size: clamp(18px, 1.9vw, 24px); }
.stg .side-sec { min-width: 0; display: grid; gap: 10px; padding: 14px; border-radius: var(--r-l); background: var(--solid); box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 .5px var(--sep); }
.stg .side-t { margin: 0; font: 600 var(--fs-m)/1.2 var(--font); color: var(--label2); }
/* le mode avancé à sa place (stage.js gate) : vos besoins, la synthèse de l'année, le soleil et l'horizon, grisés tant
   qu'il est fermé ; un toucher le débloque. Les saisons de la maquette de même (.period .lk) */
.stg .gate { position: relative; cursor: pointer; }
.stg .gate > :not(.gate-h) { opacity: .45; filter: grayscale(1); pointer-events: none; user-select: none; }
.stg .gate-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stg .gate-h .side-t { color: var(--label3); }
.stg .gate-n { flex: none; padding: 4px 9px; border-radius: var(--r-pill); background: var(--fill); color: var(--accent); font: 600 var(--fs-xs)/1 var(--font); }
.stg .gate:hover .gate-n, .stg .gate:focus-visible .gate-n { background: var(--accent); color: #fff; }
.stg .gate:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.stg .period .seg button.lk { opacity: .5; }
.stg .period .seg button.lk::before { content: "🔒 "; font-size: .85em; }
/* l'avis de Soleillon : son portrait en haut, l'avis dessous */
.stg .sy-avis-btn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; }
.stg .sy-avis-btn .ic { display: grid; place-items: center; width: 28px; height: 28px; }
.stg .sy-avis-btn .ic > * { width: 28px; height: 28px; }
.stg .avis { position: fixed; z-index: 30; width: min(400px, calc(100vw - 24px)); max-height: calc(100vh - 90px); overflow: auto; padding: 14px 18px 16px; border-radius: var(--r-l); background: var(--solid); color: var(--label); box-shadow: var(--shadow), 0 0 0 .5px var(--sep); display: grid; gap: 10px; }
.stg .avis header { display: flex; align-items: center; gap: 10px; }
.stg .avis header h2 { flex: 1; margin: 0; font: 700 var(--fs-xl)/1.2 var(--display); }
.stg .avis .x { border: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--fill); color: var(--label2); font-size: 20px; line-height: 1; cursor: pointer; }
.stg .avis p { margin: 0; font-size: var(--fs-body); line-height: 1.45; }
.stg .avis .v { font: 700 var(--fs-l)/1.3 var(--font); color: var(--rate); }
.stg .avis .rep { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r-m); background: var(--fill); }
.stg .avis .rep .btn { justify-self: start; }
.stg .avis .note { font-size: var(--fs-s); color: var(--label2); }
@media (max-width: 760px) { .stg .sy-avis-btn .t { display: none; } .stg .sy-avis-btn { padding: 3px; } }
/* vos besoins (ui-pv.js needsCard, needsPanel) : à gauche la carte, au centre l'écran complet. Les six postes gardent leur
   couleur (palette vérifiée pour les daltonismes en clair et en sombre ; la légende nomme chaque poste) */
.stg { --nd-0: #e34948; --nd-1: #1baf7a; --nd-2: #6250d6; --nd-3: #eda100; --nd-4: #2a78d6; --nd-5: #e87ba4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stg { --nd-0: #e66767; --nd-1: #199e70; --nd-2: #9085e9; --nd-3: #c98500; --nd-4: #3987e5; --nd-5: #d55181; } }
:root[data-theme="dark"] .stg { --nd-0: #e66767; --nd-1: #199e70; --nd-2: #9085e9; --nd-3: #c98500; --nd-4: #3987e5; --nd-5: #d55181; }
.stg .nd-c0 { background: var(--nd-0); } .stg .nd-c1 { background: var(--nd-1); } .stg .nd-c2 { background: var(--nd-2); }
.stg .nd-c3 { background: var(--nd-3); } .stg .nd-c4 { background: var(--nd-4); } .stg .nd-c5 { background: var(--nd-5); }
.stg .nd-card { display: grid; gap: 12px; }
.stg .nd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stg .nd-top .t { font: 600 var(--fs-m)/1.2 var(--font); color: var(--label2); }
.stg .nd-top strong { font: 700 var(--fs-hh)/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stg .nd-top small { font-size: var(--fs-m); font-weight: 600; color: var(--label2); }
.stg .nd-bar { display: flex; gap: 2px; height: 10px; }
.stg .nd-mix.big .nd-bar { height: 16px; }
.stg .nd-bar span { min-width: 3px; flex-basis: 0; }
.stg .nd-bar span:first-child { border-radius: 4px 0 0 4px; }
.stg .nd-bar span:last-child { border-radius: 0 4px 4px 0; }
.stg .nd-bar span:only-child { border-radius: 4px; }
.stg .nd-key { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; font-size: var(--fs-m); }
.stg .nd-mix.big .nd-key { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; font-size: var(--fs-body); }
.stg .nd-key li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.stg .nd-key i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.stg .nd-key span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stg .nd-key b { font-weight: 600; color: var(--label2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stg .nd-open { justify-self: stretch; }
.stg .nd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stg .nd-fact { padding: 12px 14px; border-radius: var(--r-m); background: var(--fill); display: grid; gap: 2px; align-content: start; }
.stg .nd-fact .t { font-size: var(--fs-m); font-weight: 600; color: var(--label2); }
.stg .nd-fact .n { font: 700 26px/1.1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stg .nd-fact .n small { font-size: var(--fs-m); font-weight: 600; color: var(--label2); margin-left: 3px; letter-spacing: 0; }
.stg .nd-fact .s { font-size: var(--fs-s); color: var(--label2); line-height: 1.35; }
.stg .nd-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.stg .nd-box { min-width: 0; display: grid; gap: 12px; padding: 14px 16px 16px; border-radius: var(--r-l); background: var(--fill); }
.stg .nd-box h3 + .nd-step { margin-top: -2px; }
.stg .nd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.stg .nd-row > .l { flex-basis: 100%; font-size: var(--fs-body); color: var(--label); }
.stg .nd-row .u { font-size: var(--fs-m); color: var(--label2); }
.stg .nd-row .pv-num { width: 6.5em; }
.stg .nd-step { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; }
.stg .nd-step .l { font-size: var(--fs-body); }
.stg .nd-step strong { min-width: 5.5ch; text-align: center; font: 600 var(--fs-xl)/1 var(--font); font-variant-numeric: tabular-nums; }
.stg .nd-step .u-pill.icon { width: 32px; height: 32px; }
.stg .nd-step .u-pill:disabled { opacity: .35; cursor: default; }
.stg .nd-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--r-s); background: var(--fill2); }
.stg .nd-seg button { flex: 1 1 auto; border: 0; padding: 7px 10px; border-radius: 6px; background: none; font: 500 var(--fs-m)/1.1 var(--font); color: var(--label); cursor: pointer; }
.stg .nd-seg button[aria-pressed="true"] { background: var(--solid); box-shadow: 0 1px 3px rgba(0,0,0,.14); font-weight: 600; }
.stg .nd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stg .nd-chips button { border: 0; padding: 7px 12px; border-radius: var(--r-pill); background: var(--solid); box-shadow: 0 0 0 .5px var(--sep); font: 500 var(--fs-m)/1 var(--font); color: var(--label); cursor: pointer; }
.stg .nd-chips button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: none; font-weight: 600; }
.stg .nd-cap { margin: 0; font-size: var(--fs-s); color: var(--label2); line-height: 1.4; }
.stg .nd-h { margin: 10px 0 -4px; font: 700 var(--fs-xl)/1.2 var(--display); }
.stg .nd-grp { display: grid; gap: 8px; }
.stg .nd-grp h3 small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.stg .nd-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.stg .nd-app { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-content: start; padding: 12px; border-radius: var(--r-m); background: var(--fill); }
.stg .nd-app.open { grid-column: 1 / -1; }
.stg .nd-app.off { background: none; box-shadow: inset 0 0 0 1px var(--sep); }
.stg .nd-app.off .nm span { color: var(--label2); font-weight: 500; }
.stg .nd-app .nm { display: flex; gap: 10px; align-items: center; min-width: 0; font: 600 var(--fs-body)/1.25 var(--font); cursor: pointer; }
.stg .nd-app .yr { font: 700 var(--fs-l)/1.25 var(--font); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.stg .nd-app .yr small { font-size: var(--fs-xs); font-weight: 600; color: var(--label2); }
.stg .nd-app .sum { grid-column: 1 / -1; margin: 0 0 0 44px; font-size: var(--fs-s); color: var(--label2); line-height: 1.35; }
.stg .nd-app .acts { grid-column: 1 / -1; display: flex; gap: 6px; margin: 4px 0 0 44px; }
.stg .nd-sec, .stg .nd-more { border: 0; padding: 6px 11px; border-radius: var(--r-pill); font: 600 var(--fs-s)/1 var(--font); cursor: pointer; background: var(--solid); color: var(--label2); box-shadow: 0 0 0 .5px var(--sep); }
.stg .nd-sec[aria-pressed="true"] { background: color-mix(in srgb, var(--good) 14%, var(--solid)); color: var(--good); box-shadow: 0 0 0 1px color-mix(in srgb, var(--good) 45%, transparent); }
.stg .nd-sec[aria-pressed="true"]::before { content: "✓ "; }
.stg .nd-more { margin-left: auto; color: var(--accent); }
.stg .nd-app .ed { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: end; margin-top: 8px; padding-top: 12px; border-top: .5px solid var(--sep); }
.stg .nd-app .ed > label { display: grid; gap: 4px; font-size: var(--fs-s); color: var(--label2); }
.stg .nd-app .ed .pv-num { width: 6em; }
.stg .nd-app .ed .pv-when { flex-basis: 100%; }
.stg .nd-sw { appearance: none; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 10px; background: var(--fill2); position: relative; cursor: pointer; transition: background .2s; }
.stg .nd-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s; }
.stg .nd-sw:checked { background: var(--good); }
.stg .nd-sw:checked::after { transform: translateX(14px); }
.stg .nd-sw:focus-visible, .stg .nd-seg button:focus-visible, .stg .nd-chips button:focus-visible, .stg .nd-sec:focus-visible, .stg .nd-more:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .stg .nd-sw, .stg .nd-sw::after { transition: none; } }
.stg .side .sy-say { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
.stg .side .sy-say > .sunny { width: 34px; height: 34px; }
.stg .side .sy-say .sy-bubble { min-width: 0; }
.stg .side .pills { display: grid; gap: 6px; }
.stg .side .pill { width: 100%; justify-content: flex-start; padding: 8px 10px; border-radius: var(--r-m); font-size: var(--fs-m); text-align: left; }
.stg .side .pill small { min-width: 58px; }
.stg .side .pv-live { gap: 10px; }
.stg .side .pv-live .pv-tune { padding: 8px 10px; }
.stg .side .pv-live-cons { max-height: none; }
.stg .side .pot { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
.stg .side .bar { grid-template-columns: 112px minmax(0, 1fr) 44px; gap: 8px; }
.stg .side .cards { grid-template-columns: 1fr 1fr; gap: 8px; }
.stg .side .card { padding: 12px; border-radius: var(--r-m); }
.stg .side .card .n { font-size: var(--fs-hh); }
.stg .side .card .n small { font-size: var(--fs-s); }
.stg .side .card .s { font-size: var(--fs-s); }
.stg .side .next { gap: 8px; }
.stg .yc-mini { border: 0; padding: 0; background: none; text-align: left; cursor: zoom-in; color: inherit; font: inherit; }
.stg .yc-mini .yc { margin: 0; }
.stg .yc-mini .yc-h, .stg .yc-mini figcaption { display: none; }
.stg .adv-tiles { display: grid; gap: 6px; }
.stg .adv-tile { border: 0; text-align: left; padding: 10px 12px; border-radius: var(--r-m); background: var(--fill); color: var(--label); cursor: pointer; font: inherit; }
.stg .adv-tile .adv-h span { font-size: var(--fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg .adv.locked .adv-tile { opacity: .55; }
.stg .side .adv.locked .adv-sec { opacity: .45; filter: grayscale(1); pointer-events: none; user-select: none; }
.stg .side .adv-sec { padding: 0; box-shadow: none; background: none; }
.stg .side .stg-adv { justify-self: start; }
.stg .detail { position: absolute; inset: 0; z-index: 4; overflow: auto; display: grid; align-content: start; gap: 12px; padding: 16px 18px; background: var(--solid); }
.stg .detail-h { position: sticky; top: -16px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 6px; background: var(--solid); }
.stg .detail-h h2 { margin: 0; font: 700 var(--fs-xl)/1.2 var(--display); }
.stg .detail-b { display: grid; gap: 12px; min-width: 0; }
.stg .detail-b .adv-sec { box-shadow: none; padding: 0; }
.stg .detail-b .adv-h strong { display: none; }
.stg .stg-tabs { display: none; }
@media (max-width: 1180px) { .stg .stg-body.done { grid-template-columns: 300px minmax(0, 1fr) 290px; } }
/* téléphone et petite tablette : la maquette en haut, dessous les réglages ou les résultats (deux onglets) */
@media (max-width: 860px) {
.stg .wrap.fix { padding-block: 10px 8px; gap: 8px; }
.stg .stg-body.done { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(220px, 44%) minmax(0, 1fr); gap: 10px; }
.stg .stg-body.done .mid { grid-row: 1; }
.stg .stg-body.done .side { grid-row: 2; }
.stg .stg-body.done[data-side="r"] .side-l, .stg .stg-body.done[data-side="l"] .side-r { display: none; }
.stg .stg-body.done ~ .stg-tabs { display: flex; gap: 4px; padding: 3px; border-radius: var(--r-pill); background: var(--fill); }
.stg .stg-tabs button { flex: 1; border: 0; padding: 9px 0; border-radius: var(--r-pill); background: none; font: 600 var(--fs-m)/1 var(--font); color: var(--label2); cursor: pointer; }
.stg .stg-tabs button[aria-pressed="true"] { background: var(--solid); color: var(--label); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.stg .mid .lead { font-size: var(--fs-l); }
.stg .wrap.fix .stg-top .who span { display: none; }
.stg .wrap.fix .stg-top { flex-wrap: nowrap; gap: 6px; }
.stg .wrap.fix .stg-top .who { flex: 1 1 auto; }
.stg .wrap.fix .stg-top .who b { font-size: var(--fs-xl); }
.stg .wrap.fix .stg-top .hood { font-size: 0; gap: 0; }
.stg .wrap.fix .stg-top .btn { padding: 8px 12px; font-size: var(--fs-m); white-space: nowrap; }
.stg .stg-body.done .steps { display: none; }
.stg .detail { position: fixed; inset: 0; z-index: 75; padding: max(14px, env(safe-area-inset-top, 0px)) 16px max(14px, env(safe-area-inset-bottom, 0px)); }
.stg .detail-h { top: -14px; }
}

/* ================================================================= l'étude complète sur un écran fixe (ui-pv.js syncFrame)
   Ordinateur : la feuille à gauche (les étapes et leurs réglages), sur toute la hauteur et pleine (plus de carte
   colorée au travers) ; la carte au centre, la recherche et les boutons au-dessus d'elle ; à droite, vos résultats. */
.pv-res { display: none; }
@media (min-width: 1000px) {
body.u-atelier .u-sheet { left: 16px; right: auto; top: 16px; bottom: 16px; width: 364px; height: auto !important; background: var(--u-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.u-atelier #u-fold, body.u-atelier .u-grab { display: none; }
body.u-atelier .u-head { flex-wrap: wrap; padding-top: 14px; }
body.u-atelier .u-head .sp { flex: 1 1 100%; }
body.u-atelier #u-home { left: 396px; }
body.u-atelier #u-menu, body.u-atelier .u-pop { right: 372px; }
body.u-atelier.ui2 #top { left: 456px; right: 432px; }
body.u-atelier .um-legend { left: 396px; }
body.u-atelier .um-chim { left: 396px; }
body.u-atelier .um-house { left: calc(50% + 20px); }
body.u-atelier .pv-res { position: fixed; z-index: 8; right: 16px; top: 16px; bottom: 16px; width: 324px; box-sizing: border-box; overflow-y: auto; display: grid; align-content: start; gap: 10px;
  padding: 16px; border-radius: var(--u-r-l); background: var(--u-solid); color: var(--u-label); box-shadow: var(--u-shadow);
  font: var(--fs-body)/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; }
.pv-res header h2 { margin: 0; font-size: var(--fs-xl); }
.pv-res header p { margin: 2px 0 0; color: var(--u-label-2); font-size: var(--fs-m); }
.pv-res .pv-chips { grid-template-columns: 1fr 1fr; gap: 6px; }
.pv-res .u-gt { margin: 4px 0 0; }
.pv-res .u-cap { margin: 0; }
.pv-res-img { padding: 0; border: 0; background: none; cursor: zoom-in; }
.pv-res-img img { display: block; width: 100%; height: auto; border-radius: var(--r-m); background: #fff; border: .5px solid var(--u-sep); }
.st-sunny strong { color: var(--u-label); }
body.u-atelier .st-steps span { font-size: var(--fs-xs); }
}
/* la maquette se tourne à la souris ou au doigt (stage.js), la scène finie ; le diagramme des masques, à droite et au centre */
.stg .stage canvas.turn { cursor: grab; touch-action: none; }
.stg .stage canvas.grabbing { cursor: grabbing; }
.stg .sh-mini { cursor: zoom-in; }
.stg .sh-masks { margin: 0; }
.stg .sh-masks .sh-diag svg { width: 100%; height: auto; }
.stg .detail-b .sh-masks .sh-diag { max-width: 760px; }

/* ================================================================= dessiner une maison à construire (draw.js) */
body.dr-on .u-sheet { display: none; }
.dr-box { position: fixed; z-index: 30; left: 16px; top: 72px; bottom: 16px; width: min(380px, calc(100% - 32px)); box-sizing: border-box; overflow-y: auto; border-radius: var(--u-r-l);
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; font: var(--fs-body)/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  color: var(--u-label); animation: dr-in .45s var(--u-spring); }
@keyframes dr-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
body.dr-on .um-legend, body.dr-on .um-house { display: none; }
.dr-box .um-sunny { margin: 0 30px 0 0; display: flex; align-items: center; gap: 8px; }
.dr-box .um-addr { margin: 0 0 0 auto; font-size: var(--fs-s); color: var(--u-label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dr-box h2 { margin: 0; font: 700 var(--fs-hh)/1.15 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; letter-spacing: -.015em; }
.dr-help, .dr-sum { margin: 0; font-size: var(--fs-m); color: var(--u-label-2); }
.dr-sum { color: var(--u-label); }
.dr-shapes { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-3d { position: relative; flex: none; height: 200px; border-radius: var(--u-r-m); overflow: hidden; background: var(--u-fill); }
.dr-3d canvas { display: block; }
.dr-row { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 8px; }
.dr-step { display: grid; grid-template-columns: 7.5em auto 4em auto; align-items: center; gap: 8px; }
.dr-step strong { text-align: center; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.dr-step .u-pill:disabled { opacity: .35; cursor: default; }
.dr-seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--u-r-s); background: var(--u-fill); }
.dr-seg button { flex: 1; border: 0; padding: 7px 8px; border-radius: 6px; background: none; font: inherit; font-size: var(--fs-m); color: var(--u-label); cursor: pointer; }
.dr-seg button[aria-pressed="true"] { background: var(--u-solid); box-shadow: 0 1px 3px rgba(0,0,0,.14); font-weight: 600; }
.dr-yes { margin-top: 4px; }
.dr-err { margin: 0; color: var(--warn, #c93400); font-size: var(--fs-m); }
/* les poignées sur la carte */
.dr-mk { cursor: grab; user-select: none; }
.dr-corner { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #0a84ff; box-shadow: 0 1px 4px rgba(0,0,0,.35); box-sizing: border-box; }
.dr-len { padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.92); color: #0a3d78; font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: copy; white-space: nowrap; }
.dr-move, .dr-rot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #0a84ff; color: #fff; font: 700 16px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.dr-mk:focus-visible { outline: 3px solid rgba(10,132,255,.5); outline-offset: 2px; }
@media (max-width: 760px) {
  .dr-box { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 52vh; }
  .dr-3d { height: 150px; }
}
.dr-chims { display: grid; gap: 6px; }
.dr-chim-row { display: grid; grid-template-columns: 1fr auto 4.6em auto auto; align-items: center; gap: 6px; font-size: var(--fs-m); }
.dr-chim-row strong { text-align: center; font-variant-numeric: tabular-nums; }
.dr-chim-row .u-pill:disabled { opacity: .35; cursor: default; }
.dr-chim { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #8e3b22; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.dr-chim span { position: absolute; top: 28px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.92); color: #5a2414; font: 600 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; white-space: nowrap; }
.pv-place-all { display: grid; gap: 2px; }
.stg .pv-place { flex-wrap: wrap; }
.stg .pv-place .u-seg { flex: 1 1 100%; }
.stg #stg-cv.edit { cursor: pointer; }
.stg .pv-place .u-seg button { white-space: normal; height: auto; min-height: 30px; padding: 4px 4px; line-height: 1.15; font-size: var(--fs-s); }
.dr-h { align-items: center; }
.dr-h { grid-template-columns: 7.5em 1fr 1fr; }
.dr-h label { display: flex; align-items: center; gap: 4px; font-size: var(--fs-m); color: var(--u-label-2); }
.dr-hin { width: 4.6em; }
.dr-auto { justify-self: start; font-size: var(--fs-s); }
.dr-h { grid-template-columns: 7.5em 1fr 1fr auto; }
.dr-lock { color: var(--u-green, #34c759); font-weight: 700; }
.stg .card .kwc { justify-self: start; white-space: nowrap; padding: 3px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: 700 var(--fs-m)/1.2 var(--font); font-variant-numeric: tabular-nums; }
.pv-masks { display: grid; gap: 4px; margin-top: 6px; }
.pv-masks .u-link { justify-self: start; }
.stg .pv-masks .u-pill { white-space: normal; height: auto; min-height: 30px; padding: 4px 10px; font-size: var(--fs-s); }
.pv-gain { margin: 0; padding: 8px 10px; border-radius: var(--u-r-s, 8px); background: color-mix(in srgb, #34c759 14%, transparent); font-size: var(--fs-m); }
.pv-gain strong { color: #248a3d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pv-gain strong { color: #30d158; } }
:root[data-theme="dark"] .pv-gain strong { color: #30d158; }
.stg .modb { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); font: 600 var(--fs-xs)/1.3 var(--font); white-space: nowrap; vertical-align: middle; letter-spacing: 0; text-transform: none; }
.stg .avis .modp { padding: 8px 10px; border-radius: var(--r-m); background: color-mix(in srgb, var(--warn) 12%, transparent); font-size: var(--fs-m); }
/* la colonne de gauche : rien ne la déborde (listes au libellé long, champs) ; pas d'ascenseur de côté */
.stg .side { overflow-x: hidden; }
.stg .side .adv-body { overflow-x: visible; }
.stg .side select, .stg .side input:not([type="checkbox"]):not([type="radio"]) { max-width: 100%; min-width: 0; }
.stg .side .pv-gen, .stg .side .pv-gen > *, .stg .side .pv-place, .stg .side .pv-masks { min-width: 0; }
.stg .side .pv-gen select { width: 100%; text-overflow: ellipsis; }
.stg .side .pv-gen label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
/* l'accueil, épuré : en haut la seule mention « Free Beta », puis Soleillon */
.lp-beta { display: flex; justify-content: center; padding: 18px 20px 0; }
.lp-beta span { padding: 4px 12px; border-radius: 999px; border: .5px solid var(--u-sep); color: var(--u-label-2); font: 600 var(--fs-xs)/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
/* la version d'essai, rappelée en haut de l'écran de Soleillon (comme sur l'accueil) */
.stg .stg-top .who .beta, .stg .wrap.fix .stg-top .who .beta { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px; border: .5px solid var(--sep); color: var(--label2); font: 600 var(--fs-xs)/1.4 var(--font); letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
/* le détail d'un jour du calendrier (ui-pv.js dayDetail) */
.yc-svg rect.d[data-day] { cursor: pointer; }
.yc-svg rect.d.sel { stroke: var(--u-label); stroke-width: 2.5; }
.yc-day { margin-top: 10px; padding: 12px 14px 10px; border-radius: var(--r-m, 12px); background: var(--u-fill-2); display: grid; gap: 8px; }
.yc-day-h { display: flex; align-items: center; gap: 8px; }
.yc-day-h strong { font-size: var(--fs-l, 17px); min-width: 9em; text-align: center; }
.yc-day-h .yc-x { margin-left: auto; }
.yc-day-h .u-pill { min-width: 34px; justify-content: center; }
.yc-day-f { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.yc-day-f div { display: grid; }
.yc-day-f span { font-size: var(--fs-xs); color: var(--u-label-2); }
.yc-day-f strong { font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.yc-day-gen { margin: 0; font-size: var(--fs-s); }
.yc .b { fill: var(--u-good); background: var(--u-good); }
.yc .gn { fill: var(--u-accent); background: var(--u-accent); }
.yc .gr { fill: var(--u-label-2); background: var(--u-label-2); }
.yc .um { fill: color-mix(in srgb, var(--u-bad) 30%, transparent); stroke: var(--u-bad); stroke-width: 1.5; background: color-mix(in srgb, var(--u-bad) 30%, transparent); box-shadow: inset 0 0 0 1.5px var(--u-bad); }
.yc-svg .run { fill: color-mix(in srgb, var(--u-accent) 12%, transparent); }
.yc-k i.run { background: color-mix(in srgb, var(--u-accent) 18%, transparent); }
.yc-svg .pvl { fill: none; stroke: #f5a623; stroke-width: 2; stroke-dasharray: 5 3; }
.yc-k i.pvl { height: 0; border-top: 2px dashed #f5a623; border-radius: 0; }
.yc-svg .socL { fill: none; stroke: var(--u-good); stroke-width: 2.5; stroke-linejoin: round; }
.yc-svg .socA { fill: color-mix(in srgb, var(--u-good) 16%, transparent); }
.yc-k i.socL { height: 3px; background: var(--u-good); }
.yc-svg .lim { stroke: var(--u-warn); stroke-width: 1; stroke-dasharray: 4 3; }
.yc-k i.lim { height: 0; border-top: 1.5px dashed var(--u-warn); border-radius: 0; }
.yc-svg .hr:hover rect:not(.hit) { filter: brightness(1.12); }
.yc-day-t summary { cursor: pointer; font-weight: 600; font-size: var(--fs-s); }
.yc-day-tw { overflow-x: auto; margin-top: 6px; }
.yc-day-t table { border-collapse: collapse; width: 100%; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.yc-day-t th, .yc-day-t td { padding: 3px 8px; text-align: right; white-space: nowrap; border-bottom: .5px solid var(--u-sep); }
.yc-day-t th { color: var(--u-label-2); font-weight: 600; }
.yc-day-t th:first-child, .yc-day-t td:first-child { text-align: left; }
.yc-day-t tr.on td { background: color-mix(in srgb, var(--u-accent) 10%, transparent); }