/**
 * UTOGRID — Shared Design System
 * ================================
 * Edit this file to retheme the entire app.
 *
 * Sections:
 *   1. Fonts
 *   2. Design tokens (CSS variables)
 *   3. Reset & base
 *   4. Layout shell (sidebar, main, pages)
 *   5. Navigation
 *   6. Cards & containers
 *   7. Typography helpers
 *   8. Data components (KPIs, charts, tables, bars)
 *   9. Badges & chips
 *  10. Buttons
 *  11. Forms & inputs
 *  12. Toast
 *  13. Modal
 *  14. Prototype toolbar
 *  15. Responsive
 */

/* ── 1. Fonts ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&family=Rubik:wght@400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/bold/style.css');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css');

/* Digit-only tabular face: maps ONLY 0–9 to Rubik (which has tabular figures),
   so numbers never render in Comfortaa. Letters and letter-grades fall through
   to Comfortaa via the font stack. Pair with font-variant-numeric: tabular-nums. */
@font-face {
  font-family: 'UtoNum';
  src: url('https://fonts.gstatic.com/s/rubik/v31/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-4I-1UA.ttf') format('truetype');
  unicode-range: U+0030-0039;
  font-display: swap;
}

/* ── 2. Design tokens ──────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:      #FFFFFF;
  --bg2:     #F1F2F8;
  --card:    #FFFFFF;

  /* Brand */
  --mint:    #20C28E;
  --mint2:   #1AA37B;
  --teal:    #233CB8;
  --teal2:   #1F36A6;

  /* Text */
  --dark:    #1A2332;
  --white:   #FFFFFF;
  --muted:   #6B7280;
  --mutedlt: #94A3B8;
  --muteddk: #4B5563;
  --color-text-primary: var(--dark);
  --color-text-secondary: var(--muted);
  --color-text-secondary-on-subtle: var(--muteddk);

  /* Borders */
  --border:    #E6E7ED;
  --border2:   #D5D6DF;
  --borderint: rgba(0,0,0,0.07);
  --border-panel: rgba(148,163,184,.28);

  /* Semantic colours */
  --amber: #FF8D28;
  --red:   #FF383C;
  --green: #20C28E;
  --blue:  #0088FF;
  --color-text-success: #006F4F;
  --color-text-warning: #8A4B00;
  --color-text-danger: #B42318;
  --color-text-info: #0057A8;
  /* Shared contextual time-band wash: HPHC in charts and current-hour column. */
  --chart-period-highlight: rgba(226,232,240,.55);
  --chart-consumption-bar-top: #2365CA;
  --chart-consumption-bar-bottom: #159FBE;
  --chart-solar-series-top: #F59E0B;
  --chart-solar-series-bottom: #FACC15;
  --chart-self-consumption-top: #20C28E;
  --chart-self-consumption-bottom: #54E6C1;

  /* Accueil hourly comparison — Windy-inspired favourable → unfavourable ramp. */
  --forecast-windy-1: #00C8F0;
  --forecast-windy-2: #00E600;
  --forecast-windy-3: #9BE500;
  --forecast-windy-4: #FFD000;
  --forecast-windy-5: #FF8A00;
  --forecast-windy-6: #FF5A4F;
  --forecast-windy-7: #FF4A9E;
  /* Five restrained vertical segments of the canonical favourable →
     unfavourable ramp. A lightens the Windy cyan without borrowing green.
     B borrows 70% and E 50% of their next hue so their close-colour
     transitions remain visible; the other grades borrow 30%. */
  --energy-score-grade-a: linear-gradient(0deg, var(--forecast-windy-1), color-mix(in srgb, var(--forecast-windy-1) 72%, var(--white)));
  --energy-score-grade-b: linear-gradient(0deg, var(--forecast-windy-2), color-mix(in srgb, var(--forecast-windy-2) 30%, var(--forecast-windy-3)));
  --energy-score-grade-c: linear-gradient(0deg, var(--forecast-windy-4), color-mix(in srgb, var(--forecast-windy-4) 70%, var(--forecast-windy-5)));
  --energy-score-grade-d: linear-gradient(0deg, var(--forecast-windy-5), color-mix(in srgb, var(--forecast-windy-5) 70%, var(--forecast-windy-6)));
  --energy-score-grade-e: linear-gradient(0deg, var(--forecast-windy-6), color-mix(in srgb, var(--forecast-windy-6) 50%, var(--forecast-windy-7)));
  /* Voile noir posé sur la rampe quand elle sert d'encre : la rampe est calibrée
     pour des fonds, ce voile la ramène à un niveau lisible sur blanc. */
  --forecast-price-text-veil: rgba(0,0,0,.1);
  /* Opacity of the card-surface veil laid over an estimated (pre-publication)
     forecast cell. One value to tune how much lighter an estimate reads. */
  --forecast-estimate-veil: .35;

  /* Energy mix colours */
  --nuclear: #AE8DF6;
  --hydro:   #2884F4;
  --wind:    #28BADF;
  --solar:   #FBC141;
  --bio:     #106349;
  --gas:     #A07258;

  /* Typography */
  --font-body:    'Rubik', system-ui, sans-serif;
  --font-display: 'Comfortaa', system-ui, sans-serif;
  --font-size-100: .75rem;
  --font-size-200: .875rem;
  --font-size-300: 1rem;
  --font-size-400: 1.25rem;
  --font-size-500: 1.5rem;
  --font-size-600: 2rem;
  --text-caption: var(--font-size-100);
  --text-secondary: var(--font-size-200);
  --text-body: var(--font-size-300);
  --text-metric: var(--font-size-400);
  --text-page-title: var(--font-size-500);
  --text-display: var(--font-size-600);
  --text-period-title: var(--font-size-600);
  --text-hero-data: 3rem;

  /* Icons have their own scale and do not count as text-size variants. */
  --icon-size-sm: .75rem;
  --icon-size-md: 1rem;
  --icon-size-nav: 1.125rem;
  --icon-size-lg: 1.25rem;

  /* Spacing scale: 4px for compact internals, 8px for layout and controls. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* Shared input/select/button geometry. Size expresses density and context;
     width remains the responsibility of the containing layout. */
  --control-height-sm: var(--space-6);
  --control-height-md: var(--space-7);
  --control-height-lg: var(--space-8);
  --control-padding-inline-sm: var(--space-2);
  --control-padding-inline-md: var(--space-3);
  --control-padding-inline-lg: var(--space-4);
  --control-gap-sm: var(--space-1);
  --control-gap-md: var(--space-2);
  --control-gap-lg: var(--space-2);
  --control-font-size-sm: var(--text-secondary);
  --control-font-size-md: var(--text-secondary);
  --control-font-size-lg: var(--text-body);
  --control-icon-size-sm: var(--icon-size-md);
  --control-icon-size-md: var(--icon-size-md);
  --control-icon-size-lg: var(--icon-size-lg);
  --control-radius-sm: var(--radius-sm);
  --control-radius-md: var(--radius-md);
  --control-radius-lg: var(--radius-lg);

  /* Circular help controls: square geometry, glyph fixed at 50% of control. */
  --help-control-size-sm: var(--space-5);
  --help-control-size-md: var(--space-6);
  --help-control-size-lg: var(--space-7);

  /* PDL controls */
  --pdl-control-height: var(--control-height-lg);
  --pdl-segmented-content-height: calc(var(--pdl-control-height) - var(--space-2));
  --pdl-period-nav-width: var(--space-7);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-panel: 16px;
  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(35,60,184,0.10);
  --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 16px 36px rgba(15,23,42,.06);

  /* PDL redesign palette */
  --pdl-text: var(--dark); /* aliased to the single canonical dark (collapsed) */
  --pdl-text-soft: #536175;
  --pdl-text-muted: #647086;
  /* Segmented tracks share the app's subdued surface with the page shell. */
  --pdl-segmented-track: var(--bg2);
  --pdl-energy: #233CB8;
  --pdl-energy-soft: color-mix(in srgb, var(--mint) 72%, transparent);
  --pdl-positive: var(--green);
  --pdl-trend-positive: var(--green);
  --pdl-trend-negative: var(--red);
  --pdl-cost: var(--amber);
  --pdl-warning: var(--amber);

  /* Energy score / Uto-score grade colors (canonical) + 4 transitional shades (recommended 9-step scale for smooth gradients in segments, bars, fills, etc.) */
  --score-grade-e: #E63E11;
  --score-grade-e-d: #EA6400;
  --score-grade-d: #EE8100;
  --score-grade-d-c: #F8A600;
  --score-grade-c: #FECB02;
  --score-grade-c-b: #C5C400;
  --score-grade-b: #85BB2F;
  --score-grade-b-a: #4D9F3D;
  --score-grade-a: #038141;
  --score-grade-a-top: #239432;
  --score-grade-b-top: #9DCC00;
  --score-grade-c-top: #FFEE50;
  --score-grade-d-top: #FE9600;
  --score-grade-e-top: #F16000;
  --score-grade-e-d-top: #F77D00;
  --score-grade-d-c-top: #FFBE4F;
  --score-grade-c-b-top: #DAD500;
  --score-grade-b-a-top: #63B121;
}

@media (max-width: 900px) {
  :root {
    --text-display: var(--font-size-500);
    --text-period-title: var(--font-size-400);
    --text-page-title: var(--font-size-400);
    --text-metric: var(--font-size-400);
    --text-hero-data: var(--font-size-600);
  }
}

/* ── 3. Reset & base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* E: remove tap flash on iOS/Android for all interactive elements */
* { -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--bg2);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
}

:root::selection {
  background-color: var(--teal);
  color: var(--white);
}

/* ── 4. Layout shell ───────────────────────────────────────────────── */
/* 100dvh (dynamic viewport height) shrinks when the mobile browser's address
   bar is visible, preventing content from being hidden behind browser chrome.
   100vh is kept as a fallback for browsers that don't support dvh yet.      */
.app  { display: flex; height: 100vh; height: 100dvh; overflow: hidden; cursor: default; font-variant-numeric: tabular-nums; }
/* Arrow cursor over text instead of the I-beam (cursor inherits; interactive
   elements keep their own pointer/text cursor). Inputs still get a text caret. */
.app input, .app textarea, .app [contenteditable="true"] { cursor: text; }

/* Single scroll container — all vertical scrolling happens here.
   -webkit-overflow-scrolling enables momentum (inertia) scroll on iOS.      */
.main {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  position: relative;
  padding: 0 var(--space-4) var(--space-4) 0;
  background: var(--bg2);
}

/* Pages must NOT create a second scroll container — removing overflow/max-height
   lets .main be the sole scroller and ensures touch events propagate correctly. */
.page {
  display: none;
  max-width: 1560px;
  margin: 0 auto;
  padding: var(--space-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.page.active { display: block; }

.page-carte-layout { height: calc(100dvh - 96px); }
.page-carte-layout.active { display: flex; flex-direction: column; padding: 0; }

/* ── 5. Navigation ─────────────────────────────────────────────────── */
.sidebar {
  position: relative;
  isolation: isolate;
  width: 224px;
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}

.sidebar-logo { padding: 20px 20px 16px 27px; }

.logo {
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  font-weight: 900;
  font-kerning: normal;
  letter-spacing: -.02em;
  color: var(--dark);
  text-transform: lowercase;
}
/* Plain solid color, no gradient -- restored 2026-07-31 at Antonin's
   request ("logo changed in the redesign without approval"). Matches
   .admin-logo span below, which the redesign never touched: a
   background-clip:text gradient (chart-consumption-bar-top/bottom) had
   replaced what was originally a flat var(--teal) accent, same as the
   admin header's logo still uses. */
.logo__accent {
  display: inline-block;
  margin-inline-end: -.015em;
  color: var(--teal);
}
.logo-sub  { font-size: var(--text-caption); color: var(--muted); margin-top: 2px; }

/* Logo espace admin (GH #579 : retrait du gras, taille un peu plus grande, cf. .logo de l'app) */
.admin-logo { font-size: 1.25rem; font-weight: 700; color: var(--dark); letter-spacing: -.5px; }
.admin-logo span { color: var(--teal); }

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; padding: var(--space-2) var(--space-4); }
.sidebar-account { display: flex; flex-direction: column; gap: 4px; padding: var(--space-2) var(--space-4) var(--space-5); margin-top: auto; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: var(--text-secondary);
  text-align: left;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.nav-item:hover  { background: rgba(255,255,255,.65); color: var(--dark); }
.nav-item.active { background: var(--white); border-color: var(--border); color: var(--dark); }
.nav-item.active span { font-weight: 500; }
.sidebar-active-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 0;
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  pointer-events: none;
  transform-origin: top left;
}
.sidebar-logo,
.sidebar-nav,
.sidebar-account {
  position: relative;
  z-index: 1;
}
.has-sidebar-indicator .nav-item.active {
  background: transparent;
  border-color: transparent;
}
.nav-item:focus-visible { outline: 2px solid rgba(31,54,166,.38); outline-offset: 2px; }
.nav-item i { width: 18px; font-size: var(--icon-size-nav); line-height: 1; flex: 0 0 18px; transform: translateY(-1px); }
/* `.ph` sert aussi de classe d'en-tête historique plus bas dans ce fichier.
   Neutraliser sa marge dans la navigation évite qu'elle décale les icônes
   Phosphor Regular par rapport à leur label. */
.nav-item i.ph { margin-bottom: 0; }
/* Icône de nav dessinée en SVG plutôt qu'en glyphe Phosphor : le solaire du
   produit est l'icône Hugeicons `solar-power`, déjà utilisée par la ligne
   « Source variable » de En ce moment. Mêmes métriques que .nav-item i pour que
   la colonne d'icônes reste alignée. */
.nav-item__svg {
  width: 18px;
  height: var(--icon-size-nav);
  flex: 0 0 18px;
  transform: translateY(-1px);
}
.nav-icon { display: inline-flex; }
/* Les variantes .nav-item-desktop-only / .nav-item-mobile-only ont été
   supprimées le 27/07 avec la page d'accueil mobile dédiée : la navigation est
   désormais la même à toutes les largeurs. */

/* Journey progress (sidebar bottom) */
.progress-section {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  margin-top: auto;
  background: var(--bg);
}
.progress-title   { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.section-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.progress-bar-wrap { background: var(--border); border-radius: 4px; height: 5px; margin-bottom: 6px; }
.progress-bar-fill { height: 5px; border-radius: 4px; background: linear-gradient(90deg, var(--teal), var(--mint)); }
.progress-label   { font-size: .72rem; color: var(--muted); display: flex; justify-content: space-between; }
.progress-steps   { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }

.pstep { display: flex; align-items: center; gap: 7px; font-size: .75rem; cursor: pointer; padding: 4px 0; }
.pstep:hover { color: var(--dark); }
.pstep.done   { color: var(--mint2); }
.pstep.active { color: var(--dark); font-weight: 600; }
.pstep.todo   { color: var(--muted); }
.pstep-dot    { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pstep.done   .pstep-dot { background: var(--mint); }
.pstep.active .pstep-dot { background: var(--teal); }
.pstep.todo   .pstep-dot { background: var(--border2); }

/* Mobile burger */
.burger {
  display: none;
  position: absolute; top: 8px; right: 8px; z-index: 200;
  width: 40px; height: 40px;
  background: var(--white);
  border: 1px solid var(--border);
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.burger span { display: block; width: 20px; height: 2px; background: var(--dark); border-radius: 2px; transition: transform .25s, opacity .25s; }

/* Burger → ✕ when sidebar is open (class toggled by layout.js) */
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.burger:focus-visible { outline: 2px solid rgba(31,54,166,.38); outline-offset: 2px; }
.overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.3);
  z-index: 149;
  opacity: 0;
  transition: opacity .25s;
}
.overlay.visible { opacity: 1; }

/* ── 6. Cards & containers ─────────────────────────────────────────── */
.card {
  /* Legacy card (pre-.card-panel). Prefer .card-panel for new/touched product UI.
     See design.md "App Cards and Containers" + "App Elevation & Depth". */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.csm {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}

/* Grid layouts */
.g2 { display: grid; grid-template-columns: 1fr 1fr;           gap: 12px; margin-bottom: 12px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr);     gap: 10px; margin-bottom: 12px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr);     gap: 10px; margin-bottom: 12px; }

/* Page header */
.ph { margin-bottom: 14px; }
.ph h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 3px; color: var(--dark); }
.ph p  { font-size: .78rem; color: var(--muted); }
.app-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
}
.app-page-header__identity {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.app-page-title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-page-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}
.app-period-title {
  margin: 0;
  min-width: 0;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-period-title);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.app-page-subtitle {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-secondary);
  font-weight: 400;
  line-height: 1.5;
}
.app-page-title:focus,
.app-period-title:focus,
.app-page-subtitle:focus {
  outline: none;
}
:root[data-input-modality="keyboard"] .app-page-title:focus-visible,
:root[data-input-modality="keyboard"] .app-period-title:focus-visible,
:root[data-input-modality="keyboard"] .app-page-subtitle:focus-visible {
  outline: 2px solid rgba(31,54,166,.45);
  outline-offset: var(--space-1);
}
.app-subperiod-title {
  margin: 0;
  color: var(--dark);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.3;
}
.app-page-header--map {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Section title */
.stitle {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dark);
}

/* Tag (inline label in stitle) */
.tag {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: rgba(35,60,184,.10);
  color: var(--teal);
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
}

/* Feature cards */
.fi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.fi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 14px;
  cursor: pointer;
  transition: .2s;
  box-shadow: var(--shadow-sm);
}
.fi-card:hover   { border-color: var(--teal); box-shadow: var(--shadow-md); }
.fi-emoji { font-size: 1.3rem; margin-bottom: 6px; }
.fi-title { font-size: .8rem; font-weight: 600; margin-bottom: 4px; color: var(--dark); }
.fi-val   { font-size: 1.4rem; font-weight: 800; color: var(--teal); margin-bottom: 4px; letter-spacing: -.02em; }
.fi-desc  { font-size: .74rem; color: var(--muted); line-height: 1.5; }

/* PDL info strip */
.pdl-strip {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.linky-badge {
  background: rgba(202,138,4,.1);
  border: 1px solid rgba(202,138,4,.25);
  color: var(--amber);
  font-size: .7rem; font-weight: 700;
  padding: 3px 9px; border-radius: 4px; flex-shrink: 0;
}
.pdl-info { display: flex; gap: 16px; flex-wrap: wrap; }
.pi       { display: flex; flex-direction: column; gap: 2px; }
.pi-l     { font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pi-v     { font-size: .84rem; font-weight: 600; color: var(--dark); }

/* Hidden EV prototype route. Shared page, card and KPI primitives own the
   surfaces; these classes own only its decision and grouping layout. */
.ev-page-header {
  margin-bottom: var(--space-5);
}
.ev-page-copy {
  max-width: 65ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-secondary);
  line-height: 1.5;
}
.ev-main {
  display: grid;
  gap: var(--space-6);
}
.ev-recommendation__copy {
  max-width: 65ch;
  margin: 0;
  color: var(--dark);
  font-size: var(--text-body);
  line-height: 1.55;
  text-wrap: pretty;
}
.ev-recommendation__copy strong,
.ev-table__total {
  font-weight: 600;
}
.ev-recommendation__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: 1.5;
}
.ev-recommendation__status i {
  color: var(--color-text-success);
  font-size: var(--icon-size-md);
}
.ev-plan-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
}
.ev-plan-facts div {
  min-width: 0;
}
.ev-plan-facts dt {
  margin-bottom: var(--space-1);
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: 1.5;
}
.ev-plan-facts dd {
  margin: 0;
  color: var(--dark);
  font-size: var(--text-metric);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ev-plan-facts dd span {
  color: var(--muted);
  font-size: var(--text-secondary);
  font-weight: 400;
}
.ev-month-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.ev-month-header p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 400;
}
.ev-plan-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.ev-plan-footer .app-button--ghost {
  flex: 0 0 auto;
  text-decoration: none;
}
.ev-monthly {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.ev-month-header {
  padding-inline: var(--space-5);
}
.ev-month-header .app-period-title {
  margin: 0;
}
.ev-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.ev-table-wrap {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.ev-table-wrap:focus-visible {
  outline: 2px solid rgba(31,54,166,.45);
  outline-offset: -2px;
}
.ev-table {
  min-width: 640px;
  font-size: var(--text-caption);
  table-layout: fixed;
}
.ev-table th,
.ev-table td {
  padding-block: var(--space-2);
  padding-inline: var(--space-5);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Insight callout */
.insight {
  background: rgba(202,138,4,.05);
  border: 1px solid rgba(202,138,4,.2);
  border-radius: 11px;
  padding: 14px;
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 12px;
}
.insight h4 { font-size: var(--text-secondary); font-weight: 600; color: var(--color-text-warning); margin-bottom: var(--space-1); }
.insight p  { font-size: .77rem; color: var(--muted); line-height: 1.6; }

/* Savings box */
.savings-box {
  background: linear-gradient(135deg,rgba(32,194,142,.07),rgba(35,60,184,.04));
  border: 1px solid rgba(35,60,184,.2);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.sav-num  { font-family: var(--font-body); font-size: 2.2rem; font-weight: 700; color: var(--mint2); line-height: 1; }
.sav-div  { width: 1px; height: 44px; background: var(--border); flex-shrink: 0; }
.sav-text h3 { font-size: .88rem; font-weight: 600; margin-bottom: 4px; color: var(--dark); }
.sav-text p  { font-size: .77rem; color: var(--muted); line-height: 1.5; }
.sav-btn {
  background: var(--teal); color: #fff;
  font-weight: 600; font-size: .77rem;
  padding: 7px 14px; border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.26); cursor: pointer; white-space: nowrap; flex-shrink: 0;
  box-shadow:
    0 0 0 1px var(--teal),
    0 2px 4px rgba(0,0,0,.08),
    0 4px 8px rgba(0,0,0,.16),
    inset 0 2px 42px rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.26);
  transition-property: background, transform, box-shadow;
  transition-duration: .2s, .15s, .2s;
}
.sav-btn:hover { background: var(--teal2); }
.sav-btn:active { transform: scale(.96); }

/* ── 7. Typography helpers ──────────────────────────────────────────── */
.kl  { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.kv  { font-size: 1.45rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--dark); }
.ks  { font-size: .71rem; color: var(--muted); margin-top: 3px; }
.kv.mint  { color: var(--color-text-success); }
.kv.amber { color: var(--color-text-warning); }
.kv.red   { color: var(--color-text-danger); }
.kv.blue  { color: var(--color-text-info); }
.kv.green { color: var(--color-text-success); }

.ms      { color: var(--muted); }
.ms span { color: var(--dark); font-weight: 700; }

/* ── 8. Data components ─────────────────────────────────────────────── */

/* Chart wrappers */
/* Cohérence horizontale : les cartes-graph legacy (.card du simulateur/PV) adoptent
   le même padding latéral (24px) que .card-panel et .pdl-chart-panel, pour que la
   distance canvas→bord soit identique sur toutes les pages. */
.card:has(canvas) { padding-left: var(--space-5); padding-right: var(--space-5); }
/* Hauteurs canoniques. Elles étaient contredites par une surcharge !important
   locale à app/index.html qui appliquait +30% à tout : les valeurs ci-dessous
   reprennent la hauteur réellement rendue jusqu'ici, pour que la suppression de
   cette surcharge ne change rien sur desktop. */
.cw    { position: relative; width: 100%; height: 240px; margin-top: 8px; }
.cw-lg { position: relative; width: 100%; height: 286px; margin-top: 8px; }
.cw-sm { position: relative; height: 140px; margin-top: 6px; }
/* Fenêtre basse (paysage téléphone) : la contrainte n'est pas la largeur mais la
   hauteur. À 812x375 la règle mobile ne s'applique pas — 812px dépasse le point
   de rupture — et un graphique de 286px occupait presque tout l'écran. */
@media (max-height: 520px) {
  .cw-lg { height: clamp(180px, 60vh, 286px); }
  .cw    { height: clamp(160px, 52vh, 240px); }
  .cw-sm { height: clamp(140px, 40vh, 180px); }
}
/* Vertical touch gestures pass through chart canvases so the page can scroll.
   Chart.js is configured with events:['click','mousemove','mouseout'] to avoid
   registering touchstart/touchmove listeners that would call preventDefault(). */
.cw canvas, .cw-lg canvas, .cw-sm canvas { touch-action: pan-y; width: 100%; }

/* Progress rows (horizontal bar rows) */
.prow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.plbl { font-size: .73rem; color: var(--muted); width: 80px; flex-shrink: 0; text-align: right; }
.ptrk { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.pfil { height: 100%; border-radius: 3px; }
.pval { font-size: .71rem; color: var(--dark); font-weight: 600; width: 36px; text-align: right; }

/* Legend */
.leg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.li  { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--muted); }
.ld  { width: var(--space-2); height: var(--space-2); border-radius: 2px; flex-shrink: 0; }
.ld--line { width: 16px; height: 3px; }

/* Réseau mix palette: the first stop is the approved 60% Windy blend and the
   second stop is the restrained 80% Windy endpoint used at each band's base.
   Scope prevents the PV and equipment charts from inheriting this treatment. */
#page-reseau {
  --reseau-mix-nuclear-start: #BE5FF0;
  --reseau-mix-nuclear-end: #C54BE9;
  --reseau-mix-hydro-start: #1786FB;
  --reseau-mix-hydro-end: #0E87FD;
  --reseau-mix-wind-start: #18C2E9;
  --reseau-mix-wind-end: #0FC5ED;
  --reseau-mix-solar-start: #FFE416;
  --reseau-mix-solar-end: #FFF102;
  --reseau-mix-bio-start: #00B24E;
  --reseau-mix-bio-end: #00CC3F;
  --reseau-mix-gas-start: #D9803E;
  --reseau-mix-gas-end: #EC852D;
}

/* Semantic swatches keep the visible legend aligned with the corresponding
   chart gradients even if items are reordered. */
#page-reseau .reseau-mix-swatch--conso { width: 14px; background: none; border-top: 2px dashed var(--dark); height: 0; border-radius: 0; }
#page-reseau .reseau-mix-swatch--nuclear { background: linear-gradient(180deg, var(--reseau-mix-nuclear-start), var(--reseau-mix-nuclear-end)); }
#page-reseau .reseau-mix-swatch--hydro { background: linear-gradient(180deg, var(--reseau-mix-hydro-start), var(--reseau-mix-hydro-end)); }
#page-reseau .reseau-mix-swatch--wind { background: linear-gradient(180deg, var(--reseau-mix-wind-start), var(--reseau-mix-wind-end)); }
#page-reseau .reseau-mix-swatch--solar { background: linear-gradient(180deg, var(--reseau-mix-solar-start), var(--reseau-mix-solar-end)); }
#page-reseau .reseau-mix-swatch--bio { background: linear-gradient(180deg, var(--reseau-mix-bio-start), var(--reseau-mix-bio-end)); }
#page-reseau .reseau-mix-swatch--gas { background: linear-gradient(180deg, var(--reseau-mix-gas-start), var(--reseau-mix-gas-end)); }

#spotReseauEmpty,
#page-reseau .reseau-chart-empty {
  display: none;
  min-height: 220px;
  padding: 24px 8px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: .82rem;
}

#co2Body {
  display: none;
  margin-top: var(--space-3);
}

#co2Toggle {
  margin-left: 8px;
  font-size: .8rem;
  width: 24px;
  height: 24px;
}

#reseauLoading {
  margin: 0 !important;
}
.pdl-note {
  margin: 8px 0 10px;
  font-size: var(--text-caption);
  line-height: 1.45;
  font-weight: 400;
  color: var(--muted);
}
.pdl-note-inline {
  font-size: .78rem;
  line-height: 1.45;
  font-weight: 400;
  color: var(--muted);
}
/* Tables */
.pm-table { width: 100%; border-collapse: collapse; font-size: .77rem; }
.pm-table th { color: var(--muted); font-weight: 500; padding: 5px 9px; text-align: left; border-bottom: 1px solid var(--border); }
.pm-table td { padding: 7px 9px; border-bottom: 1px solid var(--border); color: var(--dark); }
.pm-table tr:last-child td { border-bottom: none; }
.pbar2  { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.pfil2  { height: 100%; border-radius: 2px; }

/* Mode / range toggles */
.mode-toggle {
  display: flex; gap: 4px; margin-bottom: 14px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 3px; width: fit-content;
}
.mode-btn {
  padding: 5px 14px; border-radius: 5px;
  font-size: var(--text-caption); font-weight: 600;
  cursor: pointer; border: none; background: none;
  color: var(--muted); transition: .15s;
}
.mode-btn.active { background: var(--teal); color: #fff; }

.range-btn {
  padding: 4px 12px; border-radius: 5px;
  font-size: var(--text-caption); font-weight: 600;
  cursor: pointer; border: none; background: none;
  color: var(--muted); transition: .15s;
}
.range-btn.active      { background: var(--teal); color: #fff; }
.range-btn:hover:not(.active) { background: rgba(31,54,166,.08); color: var(--teal); }
.range-btn-nodata      { opacity: .38; cursor: not-allowed !important; text-decoration: line-through; }



#page-reseau .pdl-period-controls { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
#page-reseau .pdl-period-tabs { width: auto; }
#page-reseau .pdl-period-tabs .range-btn { min-width: 56px; }
#page-reseau .reseau-loading { font-size: .78rem; color: var(--muted); margin: 0 0 var(--space-3); }
#page-reseau .reseau-loading:empty { display: none; margin: 0; }
#page-reseau .reseau-empty {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  text-align: center;
}
#page-reseau .reseau-empty[hidden] { display: none; }
/* .reseau-main a display:flex, qui l'emporte sur l'attribut [hidden] : on rétablit
   le masquage pour que l'état vide global cache bien KPIs + graphes. */
#page-reseau .reseau-main[hidden] { display: none; }
#page-reseau .reseau-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: 0;
}
/* Simulation PV composes the shared summary-metric cards in a simple KPI row. */
#page-sim-pv .sim-pv-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: 0;
}

/* Consistent section rhythm for Réseau using design tokens, matching PDL main-layout gaps */
#page-reseau .reseau-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
#page-reseau .reseau-kpi-card { min-width: 0; margin: 0; }
#page-reseau .summary-metric__value > span { white-space: nowrap; }
#page-reseau .reseau-chart-card { margin-bottom: 0; }
#page-reseau .reseau-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
/* Écart inter-items (24px) volontairement plus grand que l'écart pastille↔label
   (8px) : la proximité regroupe chaque pastille avec son libellé. */
#page-reseau .reseau-mix-legend { margin-top: var(--space-4); gap: var(--space-3) var(--space-5); }
#page-reseau .reseau-mix-legend .li { gap: var(--space-2); }
/* Hauteur uniforme des cartes graphiques : on réserve la place d'une légende sur les
   cartes qui n'en ont pas, pour égaliser les hauteurs sans réduire la zone de tracé. */
#page-reseau .reseau-chart-card:not(:has(.reseau-mix-legend)) .cw-lg { margin-bottom: calc(var(--space-4) + 19px); }

#page-reseau .dash-icon-btn { display: inline-grid; place-items: center; }
#page-reseau .dash-icon-btn i { font-size: .82rem; }

.cdc-tab { padding:5px 14px; border-radius:6px; font-size:.75rem; font-weight:600; cursor:pointer; border:none; background:none; color:var(--muted); transition:.15s; line-height:1.3; text-align:center; }
.cdc-tab.active { background:var(--teal); color:#fff; }
.cdc-tab:hover:not(.active) { background: rgba(31,54,166,.08); color: var(--teal); }
.cdc-tab span { display: block; font-size: .66rem; opacity: .78; margin-top: 2px; }

/* Radical PDL page direction: explain first, graph second */
#page-pdl {
  font-family: var(--font-body);
  color: var(--pdl-text);
  font-variant-numeric: tabular-nums;
}
.pdl-redesign {
  max-width: 1560px;
  margin: 0 auto;
}
.pdl-redesign .tag {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 6px;
  background: rgba(31,54,166,.08);
  color: var(--pdl-energy);
}
.pdl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin: 0 0 24px;
}
.pdl-hero-copy {
  display: grid;
  gap: var(--space-2);
}
.pdl-period-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.pdl-hero h2 {
  /* Rubik (body font) for the whole title. The tabular-digit face (UtoNum) is
     only on the display stack, so digits here render in plain Rubik and don't
     come out heavier than the letters. */
  font-family: var(--font-body);
  max-width: 820px;
  font-size: 1.9rem;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--pdl-text);
  margin: 0;
  white-space: nowrap;
}
.pdl-period-nav {
  display: inline-grid;
  width: var(--pdl-period-nav-width);
  height: var(--pdl-control-height);
  flex: 0 0 var(--pdl-period-nav-width);
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,.04);
  color: var(--pdl-text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
/* ── Shared action button ──────────────────────────────────────────────
   One anatomy, four labelled roles plus icon-only, and three size tiers.
   The surface and bezel scale independently so the label/icon never flutters. */
.app-button {
  --app-button-base: var(--chart-consumption-bar-top);
  --app-button-accent: var(--chart-consumption-bar-bottom);
  --app-button-deep: color-mix(in srgb, var(--app-button-base) 72%, var(--dark));
  --app-button-shadow: 0 2px 6px color-mix(in srgb, var(--dark) 12%, transparent);
  --app-button-label: var(--white);
  --app-button-shell-top: var(--app-button-base);
  --app-button-shell-bottom: var(--app-button-accent);
  --app-button-surface-top:
    color-mix(in srgb, var(--app-button-base) 78%, var(--white));
  --app-button-surface-middle: var(--app-button-base);
  --app-button-surface-bottom:
    color-mix(in srgb, var(--app-button-accent) 84%, var(--mint));
  --app-button-bezel-top:
    color-mix(in srgb, var(--white) 32%, transparent);
  --app-button-bezel-bottom:
    color-mix(in srgb, var(--app-button-deep) 18%, transparent);
  --app-button-hover-filter: saturate(1.22) brightness(1.08);
  --app-button-surface-opacity: 1;
  --app-button-hover-surface-opacity: 1;
  --app-button-bezel-opacity: .78;
  --app-button-hover-bezel-opacity: 1;
  --app-button-radius-outer: var(--control-radius-lg);
  --app-button-radius-inset: 1px;
  --app-button-radius-inner: max(
    0px,
    calc(var(--app-button-radius-outer) - var(--app-button-radius-inset))
  );
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: var(--control-height-lg);
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0 var(--control-padding-inline-lg);
  border: 0;
  border-radius: var(--app-button-radius-outer);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--white) 8%, transparent),
      transparent 44%,
      color-mix(in srgb, var(--app-button-deep) 6%, transparent)
    ),
    linear-gradient(
      180deg,
      var(--app-button-shell-top),
      var(--app-button-shell-bottom)
    );
  color: var(--app-button-label);
  font-family: var(--font-body);
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--app-button-shadow);
  cursor: pointer;
}

.app-button--secondary,
.app-button--icon {
  --app-button-shadow:
    0 1px 4px color-mix(in srgb, var(--dark) 8%, transparent);
  --app-button-label: var(--dark);
  --app-button-base: var(--dark);
  --app-button-deep: var(--dark);
  --app-button-shell-top: var(--white);
  --app-button-shell-bottom: var(--bg2);
  --app-button-surface-top: var(--white);
  --app-button-surface-middle:
    color-mix(in srgb, var(--bg2) 12%, var(--white));
  --app-button-surface-bottom:
    color-mix(in srgb, var(--bg2) 42%, var(--white));
  --app-button-bezel-top:
    color-mix(in srgb, var(--white) 72%, transparent);
  --app-button-bezel-bottom: transparent;
  --app-button-hover-filter: brightness(.985);
}

.app-button--ghost {
  --app-button-shadow: none;
  --app-button-label: var(--teal);
  --app-button-base: var(--teal);
  --app-button-deep: var(--teal);
  --app-button-surface-top: var(--white);
  --app-button-surface-middle:
    color-mix(in srgb, var(--teal) 1%, var(--white));
  --app-button-surface-bottom:
    color-mix(in srgb, var(--teal) 3%, var(--bg2));
  --app-button-bezel-top: transparent;
  --app-button-bezel-bottom: transparent;
  --app-button-hover-filter: saturate(1.08) brightness(.99);
  --app-button-surface-opacity: 0;
  --app-button-bezel-opacity: 0;
  --app-button-hover-bezel-opacity: 0;
  background: transparent;
}

.app-button--danger {
  --app-button-shadow:
    0 1px 4px color-mix(in srgb, var(--red) 10%, transparent);
  --app-button-label: var(--red);
  --app-button-base: var(--red);
  --app-button-deep: var(--red);
  --app-button-shell-top: var(--white);
  --app-button-shell-bottom:
    color-mix(in srgb, var(--red) 5%, var(--bg2));
  --app-button-surface-top: var(--white);
  --app-button-surface-middle:
    color-mix(in srgb, var(--red) 3%, var(--white));
  --app-button-surface-bottom:
    color-mix(in srgb, var(--red) 8%, var(--white));
  --app-button-bezel-top:
    color-mix(in srgb, var(--white) 72%, transparent);
  --app-button-bezel-bottom: transparent;
  --app-button-hover-filter: saturate(1.08) brightness(.985);
}

.app-button--sm {
  min-height: var(--control-height-sm);
  padding-inline: var(--control-padding-inline-sm);
  --app-button-radius-outer: var(--control-radius-sm);
}

.app-button--md {
  min-height: var(--control-height-md);
  padding-inline: var(--control-padding-inline-md);
  --app-button-radius-outer: var(--control-radius-md);
}

.app-button--lg {
  min-height: var(--control-height-lg);
  padding-inline: var(--control-padding-inline-lg);
  --app-button-radius-outer: var(--control-radius-lg);
}

.app-button--icon {
  width: var(--control-height-lg);
  padding-inline: 0;
}

.app-button--icon.app-button--sm { width: var(--control-height-sm); }
.app-button--icon.app-button--md { width: var(--control-height-md); }
.app-button--icon.app-button--lg { width: var(--control-height-lg); }

.app-button::before {
  position: absolute;
  pointer-events: none;
  content: "";
  z-index: 1;
  inset: var(--app-button-radius-inset);
  border-radius: var(--app-button-radius-inner);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--white) 18%, transparent),
    transparent 42%
  );
  box-shadow:
    inset 0 1px 0 var(--app-button-bezel-top),
    inset 0 -1px 0 var(--app-button-bezel-bottom);
  opacity: var(--app-button-bezel-opacity);
  transform: scale(1);
  transform-origin: center;
  transition:
    opacity .15s cubic-bezier(.2, 0, 0, 1),
    transform .15s cubic-bezier(.2, 0, 0, 1);
}

.app-button__surface {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  inset: 0;
  box-sizing: border-box;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--white) 28%, transparent),
      transparent 38%
    ),
    linear-gradient(
      125deg,
      var(--app-button-surface-top),
      var(--app-button-surface-middle) 42%,
      var(--app-button-surface-bottom)
    );
  filter: saturate(1);
  opacity: var(--app-button-surface-opacity);
  transform: scale(1);
  transform-origin: center;
  transition:
    border-color .15s cubic-bezier(.2, 0, 0, 1),
    filter .15s cubic-bezier(.2, 0, 0, 1),
    opacity .15s cubic-bezier(.2, 0, 0, 1),
    transform .15s cubic-bezier(.2, 0, 0, 1);
}

.app-button--secondary .app-button__surface,
.app-button--icon .app-button__surface {
  border: 1px solid var(--border2);
}

.app-button--danger .app-button__surface {
  border: 1px solid color-mix(in srgb, var(--red) 24%, var(--border));
}

.app-button__content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  min-width: 0;
  align-items: center;
}

.app-button__label {
  color: var(--app-button-label);
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  font-weight: 500;
  line-height: 1.25;
}

.app-button__icon {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 auto;
  line-height: 1;
}

.app-button--sm .app-button__label { font-size: var(--text-caption); }
.app-button--sm .app-button__icon { font-size: var(--control-icon-size-sm); }
.app-button--md .app-button__label { font-size: var(--text-secondary); }
.app-button--md .app-button__icon { font-size: var(--control-icon-size-md); }
.app-button--lg .app-button__label { font-size: var(--text-body); }
.app-button--lg .app-button__icon { font-size: var(--control-icon-size-lg); }

.app-button:hover:not(:disabled)::before,
.app-button:focus-visible::before {
  opacity: var(--app-button-hover-bezel-opacity);
}

.app-button:hover:not(:disabled) .app-button__surface,
.app-button:focus-visible .app-button__surface {
  filter: var(--app-button-hover-filter);
  opacity: var(--app-button-hover-surface-opacity);
}

.app-button--secondary:hover:not(:disabled) .app-button__surface,
.app-button--secondary:focus-visible .app-button__surface,
.app-button--icon:hover:not(:disabled) .app-button__surface,
.app-button--icon:focus-visible .app-button__surface {
  border-color: color-mix(in srgb, var(--dark) 18%, var(--border2));
}

.app-button--danger:hover:not(:disabled) .app-button__surface,
.app-button--danger:focus-visible .app-button__surface {
  border-color: color-mix(in srgb, var(--red) 42%, var(--border));
}

.app-button:active:not(:disabled) .app-button__surface,
.app-button:active:not(:disabled)::before {
  transform: scale(.985);
}

.app-button:active:not(:disabled) .app-button__surface {
  filter: saturate(1.08) brightness(.98);
}

.app-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--app-button-base) 55%, transparent);
  outline-offset: calc(var(--app-button-radius-inset) + 1px);
}

.app-button:disabled {
  --app-button-label: var(--muted);
  --app-button-shadow: none;
  --app-button-shell-top: var(--bg2);
  --app-button-shell-bottom: var(--bg2);
  --app-button-surface-top: var(--bg2);
  --app-button-surface-middle: var(--bg2);
  --app-button-surface-bottom: var(--bg2);
  --app-button-bezel-top: transparent;
  --app-button-bezel-bottom: transparent;
  --app-button-surface-opacity: 1;
  --app-button-hover-surface-opacity: 1;
  --app-button-bezel-opacity: 0;
  --app-button-hover-bezel-opacity: 0;
  background: var(--bg2);
  cursor: not-allowed;
}

.app-button:disabled .app-button__surface {
  border-color: var(--border);
}

.app-button[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}

.app-button[aria-busy="true"] .app-button__content,
.app-button[aria-busy="true"] > .app-button__icon {
  opacity: .72;
}

@media (prefers-reduced-motion: reduce) {
  .app-button::before,
  .app-button__surface {
    transition: none;
  }
}

.pdl-period-nav:hover:not(:disabled), .pdl-period-toggle:hover:not(:disabled),
.rc-nav:hover:not(:disabled) {
  border-color: var(--teal);
  color: var(--teal);
}

.pdl-period-toggle:disabled, .rc-nav:disabled {
  background: var(--pdl-segmented-track);
  border-color: var(--border);
  box-shadow: none;
  color: var(--pdl-text-muted);
  cursor: not-allowed;
  opacity: 1;
}
.pdl-period-nav.is-unavailable {
  opacity: .4;
}
.pdl-period-nav:disabled { cursor: default; }
.pdl-hero p:not(.app-period-title) {
  max-width: 680px;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--pdl-text-soft);
  text-wrap: pretty;
}
#pdlRangeDaily,
#pdlRangeCdc {
  display: none;
}
.pdl-period-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.app-temporal-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: var(--space-2);
  background: var(--bg);
  border: 0;
  box-shadow: none;
}
.app-temporal-mobile-range {
  position: relative;
  display: none;
  /* 96px fixes laissaient « Semaine » au contact du chevron et volaient de la
     largeur au titre de période, seul élément de la ligne qui se tronque. La
     largeur suit le contenu, avec un plancher pour que le contrôle reste une
     cible confortable. */
  width: auto;
  min-width: calc(var(--space-8) + var(--space-6));
  height: var(--control-height-md);
  color: var(--pdl-text);
}
.app-temporal-mobile-range select {
  width: 100%;
  height: 100%;
  appearance: none;
  /* La flèche du select est absolue à --space-2 du bord : le padding droit doit
     réserver son gabarit plus une garde, sinon « Semaine » vient la toucher. */
  padding: 0 calc(var(--space-5) + var(--space-1)) 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--control-radius-md);
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: var(--control-font-size-md);
  font-weight: 600;
  cursor: pointer;
}
.app-temporal-mobile-range i {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  font-size: var(--control-icon-size-md);
  pointer-events: none;
  transform: translateY(-50%);
}
.app-temporal-mobile-range:has(select:focus-visible) {
  outline: 2px solid rgba(31,54,166,.45);
  outline-offset: 2px;
  border-radius: var(--control-radius-md);
}
/* Desktop: show "Période précise" before the Jour/Semaine/Mois/Année tabs. */
@media (min-width: 901px) {
  .pdl-period-controls .pdl-custom-period { order: -1; }
}
.pdl-period-tabs,
.pdl-metric-tabs {
  --concentric-radius-outer: var(--radius-panel);
  --concentric-radius-inset: var(--space-1);
  --concentric-radius-inner: max(
    0px,
    calc(var(--concentric-radius-outer) - var(--concentric-radius-inset))
  );
  display: flex;
  gap: 0;
  height: var(--pdl-control-height);
  background: var(--pdl-segmented-track);
  border: 0;
  border-radius: var(--concentric-radius-outer);
  padding: var(--concentric-radius-inset);
}
.pdl-period-tabs,
.pdl-metric-tabs,
.pdl-unified-tabs {
  position: relative;
  isolation: isolate;
}
.pdl-period-tabs .range-btn,
.pdl-metric-tabs .cdc-tab {
  min-height: var(--pdl-segmented-content-height);
  border: 1px solid transparent;
  border-radius: var(--concentric-radius-inner);
  background: transparent;
  color: var(--pdl-text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  transition-property: background, color, transform, box-shadow, border-color;
  transition-duration: .16s;
  transition-timing-function: cubic-bezier(.2,0,0,1);
}
.pdl-period-tabs .range-btn:hover:not(.active),
.pdl-metric-tabs .cdc-tab:hover:not(.active) {
  background: transparent;
  color: var(--pdl-text);
}
.pdl-period-tabs .range-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.pdl-period-tabs .range-btn:active,
.pdl-metric-tabs .cdc-tab:active {
  transform: scale(.96);
}
#page-pdl .range-btn:focus-visible,
#page-pdl .cdc-tab:focus-visible,
#page-pdl .pdl-period-toggle:focus-visible,
.pdl-help:focus-visible,
#page-pdl .pdl-unified-tab:focus-visible {
  outline: 2px solid #233CB8;
  outline-offset: 2px;
}
.pdl-custom-period {
  position: relative;
}
.pdl-custom-period .pdl-period-toggle {
  min-height: var(--pdl-control-height);
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  color: var(--pdl-text);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,.04);
  user-select: none;
}
.pdl-custom-period .pdl-period-toggle .pdl-toggle-cal {
  margin-right: var(--space-2);
  width: 18px;
  height: 18px;
  color: var(--pdl-text);
  flex: none;
  transform: translateY(-1px); /* alignement optique : remonte l'icône au niveau du label */
}
.pdl-date-fields {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pdl-date-fields input {
  min-height: 40px;
  padding: 4px 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--dark);
  font-size: .78rem;
  outline: none;
  font-family: inherit;
}
.pdl-loading,
.pdl-date-fields span {
  font-size: .78rem;
  color: var(--muted);
}
/* When idle/empty the loading span shouldn't occupy a flex slot, otherwise its
   trailing gap pushes the period controls ~10px in from the container edge. */
.pdl-loading:empty { display: none; }

/* Spinning loader — used inline next to labels and inside empty-state areas */
@keyframes utogrid-spin { to { transform: rotate(360deg); } }
.spin-loader {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: utogrid-spin .7s linear infinite;
  vertical-align: middle;
  flex-shrink: 0;
}
.spin-loader-lg {
  width: 28px;
  height: 28px;
  border-width: 3px;
}

/* Période précise — anchored range-calendar popover (no layout shift) */
.pdl-rangecal {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 336px;
  background: #fff;
  border: 1px solid rgba(148,163,184,.3);
  border-radius: 16px;
  box-shadow: 0 18px 46px rgba(26,35,50,.18);
  padding: 16px;
  text-align: left;
}
.pdl-rangecal[hidden] { display: none; }
.pdl-rangecal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 290; }
.pdl-rangecal-overlay[hidden] { display: none; }
/* Overlay is a mobile-only affordance; desktop keeps the plain dropdown. */
@media (min-width: 901px) { .pdl-rangecal-overlay { display: none !important; } }
.rc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rc-title { font-weight: 700; font-size: .95rem; color: var(--pdl-text, #1A2332); }
.rc-nav { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); background: #fff; border-radius: 8px; cursor: pointer; color: var(--muted); }
.rc-nav i { font-size: 20px; line-height: 1; transform: translateY(-1px); }
.rc-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: end;
  margin-bottom: 12px;
}
.rc-fields label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 600;
}
.rc-fields input {
  min-width: 0;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 8px;
  color: var(--pdl-text);
  font-family: var(--font-body);
  font-size: .78rem;
}
.rc-fields input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
.rc-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.rc-dow span { text-align: center; font-size: .66rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rc-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.rc-day { height: 32px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: .82rem; color: var(--pdl-text, #1A2332); font-family: var(--font-body); }
.rc-day.rc-empty { visibility: hidden; }
.rc-day:hover:not(.rc-disabled):not(.rc-start):not(.rc-end) { background: rgba(35,60,184,.08); }
.rc-day.rc-disabled { color: var(--mutedlt); opacity: .4; cursor: default; }
.rc-inrange { background: rgba(35,60,184,.10); border-radius: 0; }
.rc-start, .rc-end { background: var(--teal); color: #fff; font-weight: 700; }
.rc-start { border-radius: 8px 0 0 8px; }
.rc-end { border-radius: 0 8px 8px 0; }
.rc-single { border-radius: 8px; }
.rc-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.rc-reset { border: none; background: none; color: var(--teal); font-size: .74rem; font-weight: 600; cursor: pointer; font-family: var(--font-body); }
.rc-reset:hover { color: var(--teal2); }
.pdl-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Section-level rhythm: distinct card sections sit 32px apart; related cards
     within a section use 16px (see .pdl-inline-insight). 8pt grid + proximity. */
  gap: var(--space-6);
}
.app-chart-summary-group {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.pdl-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
.pdl-story-card {
  /* 304px gives the longest unavailable state enough room while keeping the
     three equal cards compact and independent from the available row width. */
  --pdl-story-metric-width: calc(var(--space-8) * 6 + var(--space-4));
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  width: 100%;
  padding: 0;
}
.pdl-story-card .summary-metric {
  flex: 0 0 var(--pdl-story-metric-width);
  width: var(--pdl-story-metric-width);
}
/* Shared compact metric card. Use this for a labelled value plus one concise
   optional supporting line. All KPI grids share this geometry; parent layouts
   own only width, wrapping and inter-tile spacing. */
.summary-metric {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0;
  min-width: 0;
  min-height: calc(var(--space-8) * 2);
  padding: var(--space-4) calc(var(--space-4) + var(--space-1)) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
}
.summary-metric.summary-metric--two-line {
  grid-template-rows: auto auto;
  min-height: calc(var(--space-8) + var(--space-6));
}
.summary-metric__value {
  display: flex;
  align-items: baseline;
  gap: calc(var(--space-1) / 2);
  margin-top: var(--space-2);
  min-width: 0;
  white-space: nowrap;
  color: var(--dark);
  font-family: var(--font-body);
  font-size: var(--text-metric);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.summary-metric__value .pdl-help {
  align-self: center;
  margin-left: 8px;
}
.summary-metric__unit {
  color: var(--muted);
  font-size: var(--text-secondary);
  font-weight: 400;
}
.summary-metric__number--bar-gradient {
  color: var(--color-text-info);
  background: linear-gradient(180deg, var(--chart-consumption-bar-top), var(--chart-consumption-bar-bottom));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.summary-metric__number--series-gradient {
  color: var(--dark);
  background: linear-gradient(180deg, var(--summary-metric-series-top), var(--summary-metric-series-bottom));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.summary-metric__number--solar-gradient {
  --summary-metric-series-top: var(--chart-solar-series-top);
  --summary-metric-series-bottom: var(--chart-solar-series-bottom);
}
.summary-metric__number--self-consumption-gradient {
  --summary-metric-series-top: var(--chart-self-consumption-top);
  --summary-metric-series-bottom: var(--chart-self-consumption-bottom);
}
.summary-metric__number--renewable {
  color: var(--color-text-success);
}
.summary-metric__number--gas-gradient {
  --summary-metric-series-top: var(--reseau-mix-gas-start);
  --summary-metric-series-bottom: var(--reseau-mix-gas-end);
  background-image:
    linear-gradient(var(--forecast-price-text-veil), var(--forecast-price-text-veil)),
    linear-gradient(180deg, var(--summary-metric-series-top), var(--summary-metric-series-bottom));
}
/* Valeur KPI graduée : une seule couleur de la rampe « Prochaines heures »,
   choisie par la métrique, puis assombrie par un voile à 10%. */
.summary-metric__number--forecast-grade {
  --summary-metric-forecast-color: var(--dark);
  color: var(--dark);
  background:
    linear-gradient(
      var(--forecast-price-text-veil),
      var(--forecast-price-text-veil)
    ),
    linear-gradient(
      var(--summary-metric-forecast-color),
      var(--summary-metric-forecast-color)
    );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) {
  .summary-metric__number--forecast-grade,
  .summary-metric__number--bar-gradient,
  .summary-metric__number--series-gradient {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}
.summary-metric__eyebrow {
  font-size: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1.2;
  color: var(--dark);
}
.summary-metric__helper {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-secondary);
  font-weight: 400;
  line-height: 1.35;
}
.summary-metric--value-positive .summary-metric__value { color: var(--color-text-success); }
.summary-metric--value-warning .summary-metric__value { color: var(--color-text-warning); }
.summary-metric--value-negative .summary-metric__value { color: var(--color-text-danger); }
.summary-metric--energy .summary-metric__value { color: var(--color-text-success); }
.summary-metric--consumption .summary-metric__value { color: var(--color-text-info); }
.summary-metric--renewable .summary-metric__value { color: var(--color-text-success); }
.summary-metric--fossil .summary-metric__value { color: var(--dark); }
.summary-metric--nuclear .summary-metric__value { color: var(--dark); }
.summary-metric__change {
  display: inline-flex;
  align-items: baseline;
  gap: .62em;
  font-variant-numeric: tabular-nums;
}
.summary-metric__change-value { font-weight: 600; }
.summary-metric__change-value.is-lower { color: var(--pdl-trend-positive); }
.summary-metric__change-value.is-higher { color: var(--pdl-trend-negative); }
.summary-metric__change-value.is-positive { color: var(--pdl-trend-positive); }
.summary-metric__change-value.is-negative { color: var(--pdl-trend-negative); }
.summary-metric__change-value.is-stable { color: var(--muted); }
.summary-metric__change-label { color: var(--muted); }
.pdl-story-card.is-year .summary-metric p {
  max-width: 590px;
}
.pdl-eyebrow {
  font-size: .66rem;
  color: var(--teal);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pdl-chart-panel,
.pdl-detail-card,
.pdl-secondary-card {
  background: #fff;
  border: 1px solid var(--border-panel);
  border-radius: 16px;
  padding: var(--space-5);
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.pdl-secondary-card .cw-lg { flex: none; height: 240px; }
.pdl-pmax-card .cw-lg { height: 300px; }
.pdl-typical-day-card .cw-lg {
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px;
}
.pdl-typical-day-empty,
.pdl-hc-share-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: var(--space-5);
  color: var(--pdl-text-muted);
  font-size: var(--text-secondary);
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}
.pdl-typical-day-empty:not(:empty),
.pdl-hc-share-empty:not(:empty) {
  max-width: 560px;
  margin: 0 auto;
}
.pdl-typical-day-copy {
  display: flex;
  align-items: baseline;
  margin-top: var(--space-3);
}
.pdl-typical-day-observation {
  margin: 0;
  line-height: 1.45;
  max-width: 72ch;
  color: var(--pdl-text);
  font-size: var(--text-secondary);
}
.pdl-typical-day-note {
  margin-top: var(--space-2);
}
.pdl-typical-day-swatch--consumption {
  background: var(--pdl-energy);
}
.pdl-typical-day-swatch--spot {
  width: var(--space-4);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--forecast-windy-1),
    var(--forecast-windy-2),
    var(--forecast-windy-3),
    var(--forecast-windy-4),
    var(--forecast-windy-5),
    var(--forecast-windy-6),
    var(--forecast-windy-7)
  );
}
.pdl-typical-day-swatch--trv {
  width: var(--space-4);
  height: var(--space-2);
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg,var(--teal) 0 4px,transparent 4px 6px) 0 1px / 100% 2px no-repeat,
    repeating-linear-gradient(90deg,var(--pdl-cost) 0 2px,transparent 2px 4px) 0 6px / 100% 2px no-repeat;
}
/* Vue Jour : la Pmax (journalière) n'a pas de profil horaire → message à la place du graphe. */
.pdl-pmax-day-note { display: flex; align-items: center; justify-content: center; min-height: 220px; padding: var(--space-5); }
.pdl-pmax-day-note p { margin: 0; max-width: 460px; text-align: center; color: var(--muted); font-size: var(--text-secondary); line-height: 1.6; text-wrap: pretty; }
.pdl-pmax-day-note strong { color: var(--dark); font-weight: 600; }
.pdl-unified-comparison .pdl-card-head {
  align-items: center;
  margin-bottom: 0;
}
.pdl-unified-comparison .pdl-card-head > .pdl-chart-toolbar {
  flex: 1 1 auto;
  margin-left: auto;
}
.pdl-unified-plot {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 2;
}
.pdl-unified-comparison #pdlUnifiedChartWrap,
.pdl-unified-empty {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  min-height: 100%;
  margin: 0;
  aspect-ratio: auto;
}
.pdl-unified-legend-slot {
  display: flex;
  align-items: flex-start;
  min-height: var(--space-4);
}
.pdl-unified-legend-slot .leg {
  margin-top: 0;
}
.pdl-card-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-4);
}
.pdl-card-head .stitle {
  margin-bottom: var(--space-1);
}
.pdl-redesign .stitle,
#page-reseau .reseau-chart-card .stitle {
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 0;
}
.pdl-redesign .pdl-card-head p {
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--pdl-text-muted);
}
.pdl-main-chart {
  width: 100%;
  margin: 0;
  height: auto !important;
  min-height: 0;
  aspect-ratio: 9 / 2;
}
.pdl-metric-tabs {
  margin: 0;
  width: fit-content;
}
.pdl-unified-tabs {
  /* The metric switcher is secondary to the period selector, so it steps down
     one step on the shared control scale (lg 48px → md 40px). Redefining the
     two dependent tokens locally keeps the shared height contract literal and
     gives the segments their intended 32px inset height. */
  --pdl-control-height: var(--control-height-md);
  --pdl-segmented-content-height: calc(var(--pdl-control-height) - var(--space-2));
  --concentric-radius-outer: var(--radius-xl);
  --concentric-radius-inset: var(--space-1);
  --concentric-radius-inner: max(
    0px,
    calc(var(--concentric-radius-outer) - var(--concentric-radius-inset))
  );
  display: flex;
  gap: 0;
  width: fit-content;
  min-height: var(--pdl-control-height);
  padding: var(--concentric-radius-inset);
  border-radius: var(--concentric-radius-outer);
  background: var(--pdl-segmented-track);
  box-shadow: inset 0 1px 1px rgba(26,35,50,.03);
}
.pdl-unified-tab {
  flex: 1 1 0;
  min-height: var(--pdl-segmented-content-height);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--concentric-radius-inner);
  background: transparent;
  color: var(--pdl-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}
.pdl-unified-tab:hover:not(.active) {
  color: var(--pdl-text);
}
.pdl-period-tabs .range-btn.active,
.pdl-metric-tabs .cdc-tab.active,
.pdl-unified-tab.active {
  background: var(--card);
  color: var(--pdl-text);
  border-color: var(--border);
  box-shadow: none;
}
.pdl-segmented-indicator {
  position: absolute;
  top: var(--concentric-radius-inset);
  bottom: var(--concentric-radius-inset);
  left: 0;
  width: 0;
  z-index: 0;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--concentric-radius-inner);
  pointer-events: none;
  transform-origin: left center;
}
.has-segmented-indicator > .range-btn,
.has-segmented-indicator > .cdc-tab,
.has-segmented-indicator > .pdl-unified-tab {
  position: relative;
  z-index: 1;
}
.has-segmented-indicator > .range-btn.active,
.has-segmented-indicator > .cdc-tab.active,
.has-segmented-indicator > .pdl-unified-tab.active {
  background: transparent;
  border-color: transparent;
}
.pdl-unified-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  color: var(--pdl-text-muted);
  font-size: var(--text-secondary);
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}
.pdl-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4);
  min-width: 0;
}
.pdl-unified-comparison .pdl-card-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  width: auto;
}
.pdl-view-options {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  min-width: 0;
}
.pdl-chart-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.pdl-chart-status {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: var(--space-4);
  min-width: 0;
  margin-top: var(--space-2);
}
.pdl-chart-status:not(:has(.pdl-note:not([style*="display:none"]):not([style*="display: none"]))) {
  display: none;
}
.pdl-chart-status .pdl-note {
  flex: 0 1 auto;
  margin: 0;
  white-space: nowrap;
}
.pdl-secondary-reading {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  flex-direction: row;
  gap: var(--space-2);
  min-width: 0;
}
.pdl-secondary-reading label {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.pdl-secondary-reading__control {
  position: relative;
  /* Narrowed with the control step-down. Tightening the inner padding below
     keeps the same ~156px of text room as the previous 220px box, so long
     option labels are no harder to read in a visibly smaller control. */
  width: 200px;
  max-width: 100%;
  min-width: 0;
}
.pdl-secondary-reading select {
  appearance: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Matches the metric switcher at md (40px) so the toolbar row reads as one
     compact band rather than two different control sizes. */
  height: var(--control-height-md);
  padding: 0 var(--space-6) 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--control-radius-md);
  background: var(--card);
  color: var(--pdl-text);
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
}
.pdl-secondary-reading__caret {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  color: var(--pdl-text);
  font-size: var(--icon-size-md);
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}
.pdl-secondary-reading select:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.pdl-secondary-reading option:disabled { color: var(--pdl-text-muted); }
.pdl-equipment-legend {
  display: contents;
}
/* Toggle partagé : état OFF sur le fond secondaire, état ON en mint. */
.utg-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.utg-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.utg-toggle__track { position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 999px; background: var(--bg2); box-shadow: inset 0 1px 2px rgba(18,18,18,.05); transition: background .2s ease; }
.utg-toggle__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(18,18,18,.10), 0 1px 1px rgba(18,18,18,.04); transition: transform .2s ease; }
.utg-toggle input:checked + .utg-toggle__track { background: var(--mint); }
.utg-toggle input:checked + .utg-toggle__track .utg-toggle__knob { transform: translateX(20px); }
.utg-toggle input:focus-visible + .utg-toggle__track { outline: 2px solid var(--teal); outline-offset: 2px; }
.utg-toggle__label { font-size: .86rem; font-weight: 600; color: var(--pdl-text); white-space: nowrap; }

/* Appliance toggle list — Chez moi page */
.chez-moi-layout {
  display: grid;
  grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr);
  gap: var(--space-5);
  align-items: start;
}
.chez-moi-appliances, .chez-moi-contract { min-width: 0; }
.chez-moi-contract { padding: var(--space-4) 0; }
.chez-moi-power-insight,
.chez-moi-tariff-comparison {
  width: 100%;
  max-width: none;
  margin-top: var(--space-5);
  margin-bottom: 0;
}
.home-tariff-body {
  display: grid;
  gap: var(--space-4);
}
.home-power-body {
  display: grid;
  gap: var(--space-4);
}
.home-power-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.home-power-verdict,
.home-power-period {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.home-power-verdict {
  font-size: var(--text-secondary);
}
.home-power-verdict strong {
  color: var(--dark);
  font-weight: 600;
}
.home-power-period {
  font-size: var(--text-caption);
}
.home-power-details {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-panel);
}
.home-power-details summary {
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--text-caption);
  line-height: 1.4;
}
.home-power-table {
  width: 100%;
  margin-top: var(--space-2);
  border-collapse: collapse;
  font-size: var(--text-caption);
}
.home-power-table th,
.home-power-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-panel);
  text-align: left;
}
.home-power-table th {
  color: var(--color-text-secondary);
  font-weight: 500;
}
.pdl-exceedance-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}
.home-tariff-state {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-secondary);
  line-height: 1.5;
}
.home-tariff-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.home-tariff-plan {
  min-width: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--bg2);
}
.home-tariff-plan.is-best {
  border-color: color-mix(in srgb, var(--mint) 58%, var(--border-panel));
  background: color-mix(in srgb, var(--mint) 6%, var(--card));
}
.home-tariff-plan__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.home-tariff-plan__label {
  color: var(--dark);
  font-size: var(--text-secondary);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.home-tariff-plan__best {
  color: var(--color-text-success);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
}
.home-tariff-plan__best.is-current {
  color: var(--color-text-secondary);
}
.home-tariff-plan__reading {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}
.home-tariff-plan__reading strong {
  font-size: var(--text-metric);
  font-weight: 600;
  line-height: 1;
}
.home-tariff-plan__reading span {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1.3;
}
.home-tariff-verdict {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-success);
  font-size: var(--text-secondary);
  line-height: 1.4;
}
.home-tariff-verdict.is-neutral {
  color: var(--color-text-secondary);
}
.home-tariff-verdict strong {
  font-weight: 600;
}
.home-tariff-current {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}
.home-tariff-split {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-panel);
}
.home-tariff-split__head,
.home-tariff-split__labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1.4;
}
.home-tariff-split__head strong,
.home-tariff-split__labels strong {
  color: var(--dark);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.home-tariff-split__track {
  display: flex;
  width: 100%;
  height: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg2);
}
.home-tariff-split__hp {
  background: var(--teal);
}
.home-tariff-split__hc {
  background: var(--mint);
}
.chez-moi-copy {
  max-width: 62ch;
  margin-bottom: var(--space-4);
  color: var(--muted);
  font-size: var(--text-secondary);
  line-height: 1.5;
  text-wrap: pretty;
}
.chez-moi-pdl { color: var(--dark); font-weight: 600; }
.chez-moi-details { margin-top: var(--space-3); }
.chez-moi-details summary {
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-caption);
  line-height: 1.5;
  user-select: none;
}
.chez-moi-raw, .chez-moi-detail-body { margin-top: var(--space-3); }
.chez-moi-raw summary { font-size: var(--text-caption); }
.chez-moi-json {
  max-height: 400px;
  margin-top: var(--space-2);
  padding: var(--space-3);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg2);
  font-size: var(--text-caption);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.chez-moi-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-8);
  margin-top: var(--space-4);
}
.chez-moi-status { color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }
.chez-moi-status[data-state="success"] { color: var(--color-text-success); }
.chez-moi-status[data-state="error"] { color: var(--color-text-danger); }
.utg-appliance-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
/* La ligne est un <label> : toute sa surface bascule l'interrupteur qu'elle
   contient, d'où le curseur et le focus visible portés par la ligne entière. */
.utg-appliance-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); cursor: pointer; }
.utg-appliance-item:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.utg-appliance-item:has(input:disabled) { cursor: default; }
.utg-appliance-item--appliance { background: var(--card); }
.utg-appliance-item:has(.utg-toggle input:disabled) { background: var(--bg2); }
.utg-appliance-item:hover { border-color: var(--teal); }
.utg-appliance-item__label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-secondary); color: var(--dark); }
.utg-appliance-item__icon { flex: 0 0 auto; color: var(--muted); font-size: var(--control-icon-size-lg); line-height: 1; }
.utg-appliance-item--on .utg-toggle__track { background: var(--mint); }
.utg-appliance-item--on .utg-toggle__knob { transform: translateX(20px); }

@media (max-width: 900px) {
  .chez-moi-layout { grid-template-columns: minmax(0, 1fr); }
  .chez-moi-contract { padding: var(--space-4) var(--space-5); }
}

@media (max-width: 900px) {
  .chez-moi-layout { gap: var(--space-4); }
  .chez-moi-contract { padding: var(--space-4) var(--space-5); }
  .chez-moi-actions { align-items: flex-start; flex-direction: column; }
  .home-power-comparison,
  .home-tariff-plans { grid-template-columns: minmax(0, 1fr); }
}
.pdl-detail-card {
  background: var(--card);
  border-color: rgba(148,163,184,.20);
  padding-top: 20px;
}
.pdl-detail-card .cw-lg {
  height: 285px;
}
.pdl-trend-section {
  /* Pmax owns this section; outer spacing is handled by .pdl-main-layout. */
  margin-top: 0;
}
.pdl-card-meta {
  margin: var(--space-2) 0 0;
  color: var(--pdl-text-muted);
  font-size: var(--text-caption);
  line-height: 1.45;
}
.pdl-soft-insight {
  background: rgba(35,60,184,.055);
  border: 0;
  border-radius: 12px;
  padding: 20px 24px;
}
/* h3 comme h4 : le titre de l'encart a été promu en h3 le 28/07 pour rétablir le
   plan de titres, et la règle ne visait que h4 — il retombait sur le défaut du
   navigateur, 18,7px en gras, plus gros que les h2 de section au-dessus. Même
   taille que les autres titres de la page. */
.pdl-soft-insight h3,
.pdl-soft-insight h4 {
  color: var(--pdl-text, #1A2332);
  font-size: var(--text-body);
  font-weight: 600;
  margin: 0 0 12px;
}
.pdl-soft-insight p {
  color: var(--pdl-text-muted);
  font-size: .95rem;
  line-height: 1.45;
  margin: 0;
  text-wrap: pretty;
}
.pdl-insight-meta {
  margin: 4px 0 12px;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--pdl-text-muted);
}
.pdl-insight-list {
  display: grid;
  gap: 8px;
}
.pdl-insight-row {
  color: var(--pdl-text-soft);
  font-size: var(--text-secondary);
  line-height: 1.5;
}
.pdl-insight-label {
  color: var(--pdl-text-soft);
  font-weight: 400;
}
.pdl-insight-value {
  color: var(--pdl-text);
  font-weight: 600;
  white-space: nowrap;
}
#contractSummaryBody .pdl-insight-row { overflow-wrap: anywhere; }
#contractSummaryBody .pdl-insight-value { white-space: normal; }
.pdl-insight-rec {
  color: var(--teal);
  font-weight: 600;
  white-space: nowrap;
}
/* Calmer emphasis: semibold instead of heavy Comfortaa bold.
   nowrap keeps value phrases ("10,47 kVA", "14:54 à 16:54") from splitting. */
.pdl-soft-insight strong { font-weight: 600; white-space: nowrap; }
.pdl-inline-insight {
  width: min(100%, 680px);
  max-width: 100%;
  margin-bottom: 16px;
}
#page-pdl .pdl-period-tabs .range-btn,
#page-pdl .pdl-metric-tabs .cdc-tab {
  min-height: var(--pdl-segmented-content-height);
  font-size: .86rem;
  font-weight: 600;
}
/* The metric switcher keeps the compact segment height and the semantic caption
   size from .pdl-unified-tab; it does not take the page-level .86rem step. */
#page-pdl .pdl-unified-tab {
  min-height: var(--pdl-segmented-content-height);
  font-weight: 600;
}
#page-pdl .pdl-period-tabs {
  border-radius: var(--concentric-radius-outer);
}
#page-pdl .pdl-period-tabs .range-btn {
  padding: 0 24px;
}
#page-pdl .pdl-period-toggle {
  min-height: var(--pdl-control-height);
  border-radius: 16px;
  padding: 0 24px;
}
#page-reseau .pdl-period-tabs,
#page-sim-tarif .pdl-period-tabs,
#page-sim-pv .pdl-period-tabs {
  height: var(--pdl-control-height);
  background: var(--pdl-segmented-track);
  border: 0;
  border-radius: var(--concentric-radius-outer);
  padding: var(--concentric-radius-inset);
}
#page-reseau .pdl-period-tabs .range-btn,
#page-sim-tarif .pdl-period-tabs .range-btn,
#page-sim-pv .pdl-period-tabs .range-btn {
  min-height: var(--pdl-segmented-content-height);
  padding: 0 24px;
  border-radius: var(--concentric-radius-inner);
  font-size: .86rem;
  font-weight: 600;
}
.pdl-help {
  --pdl-help-size: var(--help-control-size-md);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pdl-help-size);
  height: var(--pdl-help-size);
  flex: 0 0 var(--pdl-help-size);
  border: 1px solid rgba(148,163,184,.36);
  border-radius: 999px;
  background: #fff;
  color: var(--pdl-text-muted);
  font-family: var(--font-body);
  font-size: calc(var(--pdl-help-size) / 2);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.pdl-help--sm { --pdl-help-size: var(--help-control-size-sm); }
.pdl-help--md { --pdl-help-size: var(--help-control-size-md); }
.pdl-help--lg { --pdl-help-size: var(--help-control-size-lg); }
.pdl-help:hover,
.pdl-help.open {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(31,54,166,.08);
}
.pmax-title-help {
  margin-left: 6px;
  vertical-align: middle;
}
.pdl-help-pop {
  position: fixed;
  z-index: 80;
  width: min(280px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(15,23,42,.92);
  box-shadow: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: .78rem;
  line-height: 1.45;
  text-wrap: pretty;
}
.pdl-help-pop::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: rgba(15,23,42,.92);
  transform: translateX(-50%) rotate(45deg);
}
.pdl-help-pop.is-below::after {
  top: -6px;
  bottom: auto;
}
.pdl-help-pop__title {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-secondary);
  font-weight: 600;
}
/* Help copy is injected with textContent; pre-line lets a long explanation keep
   its paragraph break. No other help string contains newlines, so single-
   paragraph copy is unaffected. */
.pdl-help-pop__body { margin: 0; white-space: pre-line; }
.pdl-help-pop__meta {
  display: block;
  margin-top: var(--space-2);
  color: rgba(255,255,255,.78);
  font-size: inherit;
}


@media (max-width: 980px) {
  .pdl-intro-grid { grid-template-columns: 1fr; }
  .pdl-unified-comparison .pdl-card-head {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }
  .pdl-unified-comparison .pdl-card-head > .pdl-chart-toolbar {
    width: 100%;
    margin-left: 0;
  }
  .pdl-unified-comparison .pdl-card-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
  }
  .pdl-view-options {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    width: auto;
  }
  .pdl-chart-status {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }
  .pdl-chart-status .pdl-note {
    white-space: normal;
  }
}

@media (max-width: 900px) {
  .pdl-redesign {
    max-width: none;
  }
  .pdl-hero {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 8px 0 20px;
  }
  .pdl-hero h2 {
    font-size: 1.55rem;
    white-space: normal;
    text-align: center;
  }
  .pdl-hero-copy { text-align: center; }
  .pdl-period-heading { justify-content: center; gap: 12px; }
  .pdl-unified-comparison .pdl-card-actions { transform: none; }
  .pdl-hero p:not(.app-period-title) {
    font-size: .9rem;
  }
  .pdl-period-controls {
    justify-content: center;
    align-items: center;
  }
  .pdl-period-tabs {
    width: 100%;
  }
  #page-pdl .pdl-period-tabs .range-btn {
    flex: 1;
    padding: 0 8px;
  }
  .pdl-custom-period,
  .pdl-custom-period .pdl-period-toggle {
    width: 100%;
  }
  .pdl-custom-period .pdl-period-toggle {
    justify-content: center;
  }
  #page-pdl .pdl-metric-tabs .cdc-tab {
    min-height: var(--pdl-segmented-content-height);
  }
  #page-pdl .pdl-unified-tab {
    min-height: var(--pdl-segmented-content-height);
    flex: 1;
    padding-right: 8px;
    padding-left: 8px;
  }
  .pdl-unified-tabs { width: 100%; }
  .pdl-story-card {
    gap: 8px;
    width: 100%;
  }
  .pdl-story-card .summary-metric {
    flex-basis: 100%;
    width: 100%;
  }
  .pdl-intro-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pdl-inline-insight {
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }
  .summary-metric {
    min-height: calc(var(--space-8) * 2);
    padding: var(--space-4);
  }
  .summary-metric__change { gap: .35em; white-space: nowrap; }
  .pdl-chart-panel,
  .pdl-detail-card,
  .pdl-secondary-card {
    padding: var(--space-4);
    border-radius: 16px;
  }
  .pdl-main-chart,
  .pdl-main-chart.is-day-view {
    height: auto !important;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .pdl-unified-plot {
    aspect-ratio: 4 / 3;
  }
  .pdl-unified-comparison .pdl-unified-plot,
  .pdl-secondary-card .cw-lg {
    width: calc(100% + var(--space-5));
    margin-inline: calc(0px - var(--space-3));
  }
  .pdl-pmax-card .cw-lg {
    height: 270px;
  }
  .pdl-typical-day-copy {
    align-items: flex-start;
    flex-direction: column;
  }
  .pdl-card-head {
    align-items: flex-start;
  }
  .pdl-unified-comparison .pdl-card-head {
    align-items: stretch;
  }
  .pdl-unified-comparison .pdl-unified-tabs {
    width: 100%;
  }
  .pdl-card-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .pdl-unified-comparison .pdl-card-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .pdl-view-options {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    width: 100%;
  }
  .pdl-secondary-reading {
    width: 100%;
  }
  .pdl-secondary-reading {
    flex: 0 0 auto;
    align-items: center;
    flex-direction: row;
    gap: var(--space-2);
  }
  .pdl-secondary-reading__control {
    flex: 1 1 auto;
    width: auto;
  }
  .pdl-secondary-reading select {
    width: 100%;
  }
  /* On phones the calendar stays anchored just under the full-width button,
     above a dim overlay, and scrolls internally if it exceeds the viewport. */
  .pdl-rangecal {
    z-index: 300;
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100dvh - 200px);
    overflow-y: auto;
  }
}

/* Connections list */
.conn-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.conn-row:last-child { border-bottom: none; }
.conn-l  { display: flex; align-items: center; gap: 9px; }
.conn-ic { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.conn-nm { font-size: .82rem; font-weight: 600; margin-bottom: 1px; color: var(--dark); }
.conn-sb { font-size: .7rem; color: var(--muted); }
.cs      { font-size: .67rem; font-weight: 600; padding: 2px 7px; border-radius: 3px; white-space: nowrap; }
.cs-on   { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.cs-pub  { background: color-mix(in srgb, var(--blue) 12%, transparent);  color: var(--color-text-info); }
.cs-warn { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.cs-err  { background: color-mix(in srgb, var(--red) 12%, transparent);   color: var(--red); }

/* Mon compte — primary account tasks first, technical reference second. */
.compte-meter-card { margin-bottom: var(--space-5); }
.compte-meter-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.compte-meter-tools__copy .compte-subtitle { margin: 0 0 var(--space-1); }
.compte-meter-tools .compte-sync-info { margin: 0; }
.compte-meter-tools .compte-sync-result {
  grid-column: 1 / -1;
  margin: 0;
}
.compte-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: var(--space-5);
  align-items: start;
}
.compte-main, .compte-aside {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.compte-main { gap: var(--space-4); }
.compte-aside { gap: var(--space-5); padding: var(--space-4) 0; }
.compte-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.compte-copy {
  max-width: 65ch;
  margin-bottom: var(--space-4);
  color: var(--muted);
  font-size: var(--text-secondary);
  line-height: 1.5;
  text-wrap: pretty;
}
.compte-section-head .compte-copy { margin-bottom: 0; }
.compte-action {
  min-height: var(--control-height-lg);
  padding: 0 var(--control-padding-inline-lg);
  border-radius: var(--control-radius-lg);
  font-size: var(--control-font-size-lg);
  white-space: nowrap;
}
.compte-action i { font-size: var(--icon-size-md); }
.compte-share-form {
  display: grid;
  grid-template-columns: minmax(130px, .55fr) minmax(180px, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}
.compte-field-group { min-width: 0; }
.compte-field-group label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 500;
}
.compte-field {
  width: 100%;
  height: var(--control-height-lg);
  min-height: var(--control-height-lg);
  padding: 0 var(--control-padding-inline-lg);
  border: 1px solid var(--border);
  border-radius: var(--control-radius-lg);
  outline: none;
  background: var(--card);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: var(--text-secondary);
  font-weight: 400;
}
.compte-field-select {
  position: relative;
}
.compte-field-select .compte-field {
  appearance: none;
  padding-right: var(--space-7);
}
.compte-field-select__caret {
  position: absolute;
  top: 50%;
  right: var(--control-padding-inline-lg);
  color: var(--dark);
  font-size: var(--control-icon-size-lg);
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}
.compte-field:disabled,
.compte-field[readonly] { background: var(--bg2); }
.compte-field:focus-visible { outline: 2px solid rgba(31,54,166,.45); outline-offset: 2px; }
.compte-field::placeholder { color: var(--muted); opacity: 1; }
.compte-status {
  min-height: 1.2em;
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: 1.5;
}
.compte-status[data-state="success"] { color: var(--color-text-success); }
.compte-status[data-state="error"] { color: var(--color-text-danger); }
.compte-share-form + .compte-status { margin-top: var(--space-2); }
.compte-subtitle {
  margin: var(--space-3) 0 var(--space-2);
  color: var(--dark);
  font-size: var(--text-secondary);
  font-weight: 600;
}
.compte-invite-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-secondary);
}
.compte-invite-row:last-child { border-bottom: 0; }
.compte-invite-email { min-width: 0; flex: 1; overflow-wrap: anywhere; font-weight: 500; }
.compte-invite-state { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--dark); white-space: nowrap; }
.compte-invite-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--muted); }
.compte-invite-state[data-state="accepted"] .compte-invite-dot { background: var(--green); }
.compte-invite-state[data-state="pending"] .compte-invite-dot { background: var(--amber); }
.compte-invite-state[data-state="expired"] .compte-invite-dot { background: var(--red); }
.compte-inline-action {
  min-height: var(--control-height-md);
  padding: 0 var(--control-padding-inline-md);
  border-radius: var(--control-radius-md);
  font-size: var(--control-font-size-md);
}
.compte-empty { margin: var(--space-2) 0; color: var(--muted); font-size: var(--text-secondary); }
.compte-alert {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--red) 30%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--red) 8%, var(--card));
  color: var(--dark);
  font-size: var(--text-secondary);
  line-height: 1.5;
}
.compte-pdl-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; flex-wrap: wrap; font-size: var(--text-secondary); }
.compte-pdl-number { color: var(--dark); font-weight: 600; }
.compte-pdl-shared { color: var(--muted); font-size: var(--text-caption); font-weight: 400; }
.compte-pdl-badge {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg2);
  color: var(--dark);
  font-size: var(--text-caption);
  white-space: nowrap;
}
.compte-pdl-badge[data-state="active"] { background: color-mix(in srgb, var(--green) 12%, var(--card)); }
.compte-pdl-badge[data-state="pending"] { background: color-mix(in srgb, var(--amber) 14%, var(--card)); }
.compte-pdl-badge[data-state="expired"] { background: color-mix(in srgb, var(--red) 10%, var(--card)); }
.compte-pdl-sync { color: var(--muted); font-size: var(--text-caption); }
.compte-pdl-table td:last-child { white-space: nowrap; }
.compte-sync-info { margin-bottom: var(--space-3); color: var(--muted); font-size: var(--text-caption); }
.compte-sync-info strong { color: var(--dark); font-weight: 600; }
.compte-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.compte-sync-result { margin-top: var(--space-3); }
.compte-disclosure { min-width: 0; border-top: 1px solid var(--border); }
.compte-stored-data { margin-top: var(--space-4); padding-top: var(--space-4); }
.compte-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--dark);
  cursor: pointer;
  font-size: var(--text-body);
  font-weight: 600;
  list-style: none;
}
.compte-disclosure summary::-webkit-details-marker { display: none; }
.compte-disclosure summary::after { content: '+'; color: var(--muted); font-size: var(--icon-size-md); font-weight: 400; }
.compte-disclosure[open] summary::after { content: '−'; }
.compte-disclosure summary:focus-visible { outline: 2px solid rgba(31,54,166,.45); outline-offset: 3px; border-radius: var(--radius-sm); }
.compte-disclosure[open] .compte-table-wrap { margin-top: var(--space-3); }
#page-compte .compte-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#page-compte .compte-table-wrap { --scroll-hint-surface: var(--card); }
.compte-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--text-caption); }
.compte-table th, .compte-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; line-height: 1.45; }
.compte-table th { color: var(--muted); font-weight: 500; }
.compte-table td { color: var(--dark); }
.compte-table th:last-child, .compte-table td:last-child { text-align: right; }
.compte-table tbody tr:last-child td { border-bottom: 0; }
.compte-sync-state { color: var(--dark); font-size: var(--text-caption); white-space: nowrap; }
.compte-secondary-section { min-width: 0; padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.compte-secondary-section .stitle { margin-bottom: var(--space-3); }
.compte-preference-label {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
.compte-preference-label strong {
  color: var(--dark);
  font-size: var(--text-secondary);
  font-weight: 600;
  line-height: 1.35;
}
.compte-preference-label span {
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: 1.45;
  text-wrap: pretty;
}
.compte-reference-card { margin-top: var(--space-5); }
.compte-reference-card .compte-stored-data {
  margin: 0;
  padding: 0;
  border-top: 0;
}
.compte-reference-card .compte-disclosure + .compte-disclosure {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.compte-sources__content { margin-top: var(--space-3); }
#page-compte .utg-appliance-item { padding-inline: var(--control-padding-inline-lg); }
#page-compte .utg-appliance-item__label { font-size: var(--text-secondary); }
#page-compte .conn-row { align-items: flex-start; gap: var(--space-2); }
#page-compte .conn-l { min-width: 0; }
#page-compte .conn-nm { font-size: var(--text-secondary); }
#page-compte .conn-sb { font-size: var(--text-caption); line-height: 1.45; }
#page-compte .cs { color: var(--dark); font-size: var(--text-caption); }
.compte-source-link, .compte-source-detail {
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: 1.5;
}
.compte-source-link { padding: 0 0 var(--space-3); overflow-wrap: anywhere; }
.compte-source-link a { color: var(--teal); }
.compte-source-detail { margin-top: var(--space-3); text-wrap: pretty; }

@media (max-width: 900px) {
  .compte-meter-card { margin-bottom: var(--space-4); }
  .compte-meter-tools { grid-template-columns: minmax(0, 1fr); }
  .compte-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-inline: 0;
  }
  .compte-main { gap: var(--space-4); }
  .compte-aside {
    gap: var(--space-4);
    padding: 0;
  }
  .compte-section-head {
    align-items: stretch;
    flex-direction: column;
  }
  .compte-section-head .compte-action { width: 100%; }
  .compte-secondary-section { padding-bottom: var(--space-4); }
  .compte-secondary-section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .compte-reference-card { margin-top: var(--space-4); }
  .compte-field { font-size: var(--text-body); }
  .compte-share-form { grid-template-columns: minmax(0, 1fr); }
  .compte-share-form .compte-action { width: 100%; }
  .compte-invite-row { align-items: flex-start; flex-wrap: wrap; }
  .compte-invite-email { flex-basis: 100%; }
}

/* Resource grid (RGPD rights) */
.rg  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.rb  { background: var(--bg2); border: 1px solid var(--border); border-radius: 7px; padding: 10px; font-size: .77rem; color: var(--muted); cursor: pointer; transition: .2s; text-align: left; }
.rb:hover       { border-color: var(--teal); color: var(--dark); }
.rb .ri         { font-size: .95rem; margin-bottom: 3px; display: block; }
.rb.danger      { color: var(--red); border-color: rgba(220,38,38,.15); }

/* Score page */
.score-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 14px; }
.score-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 18px 14px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative; overflow: hidden; transition: .2s; box-shadow: var(--shadow-sm);
}
.score-card:hover { border-color: rgba(35,60,184,.3); box-shadow: var(--shadow-md); }
.score-icon      { font-size: 2rem; line-height: 1; margin-bottom: 2px; }
.score-name      { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.score-val       { font-size: 2rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--dark); }
.score-bar-wrap  { width: 100%; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.score-bar       { height: 6px; border-radius: 3px; transition: width 1s ease; }
.score-desc      { font-size: .68rem; color: var(--muted); text-align: center; line-height: 1.4; }

.utoscore-main {
  background: linear-gradient(135deg,rgba(32,194,142,.07),rgba(35,60,184,.04));
  border: 1px solid rgba(35,60,184,.2);
  border-radius: 16px; padding: 24px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 24px;
}
.utoscore-dial   { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.utoscore-dial svg { width: 110px; height: 110px; }
.utoscore-label  { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.utoscore-number { font-family: var(--font-body); font-size: 3.2rem; font-weight: 700; color: var(--teal); line-height: 1; letter-spacing: -.04em; }
.utoscore-sub    { font-size: .77rem; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.score-breakdown { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.breakdown-row   { display: flex; align-items: center; gap: 8px; }
.breakdown-name  { font-size: .75rem; color: var(--muted); width: 110px; flex-shrink: 0; }
.breakdown-bar   { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.breakdown-fill  { height: 5px; border-radius: 3px; }
.breakdown-val   { font-size: .73rem; font-weight: 700; width: 36px; text-align: right; }

/* Journey steps */
.journey { display: flex; flex-direction: column; }
.jstep   { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.jstep:last-child { border-bottom: none; }
.jstep-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; flex-shrink: 0; margin-top: 2px;
}
.jstep.done   .jstep-num { background: var(--mint); color: #fff; }
.jstep.active .jstep-num { background: var(--teal); color: #fff; }
.jstep.todo   .jstep-num { background: var(--bg2); color: var(--muted); border: 1px solid var(--border); }
.jstep-body h4 { font-size: .88rem; font-weight: 600; margin-bottom: 4px; color: var(--dark); }
.jstep-body p  { font-size: .77rem; color: var(--muted); line-height: 1.5; }
.jstep-action  { margin-top: 8px; background: none; border: 1px solid var(--teal); color: var(--teal); font-size: .74rem; padding: 5px 12px; border-radius: 5px; cursor: pointer; }

/* Chips */
.chip { background: var(--bg2); border: 1px solid var(--border); color: var(--muted); font-size: .71rem; padding: 3px 9px; border-radius: 5px; cursor: pointer; transition: .15s; }
.chip:hover        { border-color: var(--teal); color: var(--dark); }
.chip.active       { border-color: var(--teal); color: var(--teal); background: rgba(35,60,184,.07); }

/* Popup rows */
.popup-title { font-size: .83rem; font-weight: 600; margin-bottom: 5px; color: var(--dark); }
.popup-row   { display: flex; justify-content: space-between; gap: 10px; font-size: .73rem; margin-bottom: 2px; }
.popup-lbl   { color: var(--muted); }
.popup-val   { font-weight: 600; color: var(--dark); }
.popup-fil   { font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 3px; margin-bottom: 7px; display: inline-block; }

/* ── 9. Badges ──────────────────────────────────────────────────────── */
.badges { display: flex; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.badge  { display: flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--radius-sm); font-size: .76rem; font-weight: 600; border: 1px solid transparent; }
.bdot   { width: 7px; height: 7px; border-radius: 50%; }

/* ── 10. Buttons ────────────────────────────────────────────────────── */
.btn {
  min-height: 36px;
  padding: 7px 16px;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition-property: background, border-color, color, opacity, transform, box-shadow;
  transition-duration: .15s;
  font-family: var(--font-body);
}
.btn-primary,
.btn-mint {
  border: 1px solid rgba(255,255,255,.26);
  border-radius: var(--radius-md);
  box-shadow:
    0 0 0 1px var(--btn-edge),
    0 2px 4px rgba(0,0,0,.08),
    0 4px 8px rgba(0,0,0,.16),
    inset 0 2px 42px rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.26);
}
.btn-primary { --btn-edge: var(--teal); background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal2); }
.btn-mint    { --btn-edge: var(--mint); background: var(--mint); color: var(--dark); }
.btn-mint:hover { background: var(--mint2); }
.btn-primary:active,
.btn-mint:active { transform: scale(.96); }

/* ── Unified control states — see design.md "Interactive Controls" contract ──
   One focus ring, one press feel, one transition across existing controls.
   Role-class migration (.btn--*) is documented in design.md, pending. */
.btn, .btn-primary, .btn-mint, .btn-ghost, .btn-danger, .sav-btn,
.pdl-period-toggle, .pdl-period-nav, .pdl-help, .rc-nav, .rc-reset, .burger,
.nav-item, .range-btn, .cdc-tab, .pdl-unified-tab {
  transition-property: background, border-color, color, box-shadow, transform;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.btn:focus-visible, .btn-primary:focus-visible, .btn-mint:focus-visible,
.btn-ghost:focus-visible, .btn-danger:focus-visible, .sav-btn:focus-visible,
.pdl-period-toggle:focus-visible, .pdl-period-nav:focus-visible,
.pdl-help:focus-visible, .rc-nav:focus-visible, .rc-reset:focus-visible,
.burger:focus-visible, .nav-item:focus-visible, .range-btn:focus-visible,
.cdc-tab:focus-visible, .pdl-unified-tab:focus-visible {
  outline: 2px solid rgba(31,54,166,.45);
  outline-offset: 2px;
}
.btn:active, .btn-ghost:active, .btn-danger:active, .sav-btn:active,
.pdl-period-toggle:active, .pdl-period-nav:active:not(:disabled),
.pdl-help:active, .rc-nav:active, .rc-reset:active, .burger:active {
  transform: scale(.96);
}
.btn:disabled, .btn-primary:disabled, .btn-mint:disabled, .btn-ghost:disabled,
.btn-danger:disabled, .sav-btn:disabled, .pdl-help:disabled,
.pdl-period-toggle:disabled {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
button[style*="background:var(--teal)"],
button[style*="background: var(--teal)"],
a[style*="background:var(--teal)"],
a[style*="background: var(--teal)"],
button[style*="background:var(--mint)"],
button[style*="background: var(--mint)"] {
  border: 1px solid rgba(255,255,255,.26) !important;
  border-radius: var(--radius-md) !important;
  box-shadow:
    0 0 0 1px var(--teal),
    0 2px 4px rgba(0,0,0,.08),
    0 4px 8px rgba(0,0,0,.16),
    inset 0 2px 42px rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.26);
  transition-property: background, transform, box-shadow;
  transition-duration: .2s, .15s, .2s;
}
button[style*="background:var(--mint)"],
button[style*="background: var(--mint)"] {
  box-shadow:
    0 0 0 1px var(--mint),
    0 2px 4px rgba(0,0,0,.08),
    0 4px 8px rgba(0,0,0,.16),
    inset 0 2px 42px rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.26);
}
button[style*="background:var(--teal)"]:active,
button[style*="background: var(--teal)"]:active,
a[style*="background:var(--teal)"]:active,
a[style*="background: var(--teal)"]:active,
button[style*="background:var(--mint)"]:active,
button[style*="background: var(--mint)"]:active {
  transform: scale(.96);
}
.btn-ghost   { background: none; border: 1px solid var(--border); color: var(--muted); }
.btn-ghost:hover { border-color: var(--teal); color: var(--dark); }
.btn-danger  { background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.2); color: var(--red); }
.btn-danger:hover { background: rgba(220,38,38,.15); }
.btn-sm      { padding: 4px 10px; font-size: .72rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── 11. Forms & inputs ─────────────────────────────────────────────── */
.auth-field { font-size: var(--text-secondary); }
/* Safari iOS zooms focused form fields below 16px. The login overlay is removed
   in-place after authentication, so that zoom would otherwise remain on the app. */
.field       { margin-bottom: 14px; }
.field label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 5px; }
.input {
  width: 100%; padding: 9px 12px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--dark); font-family: var(--font-body); font-size: .84rem; outline: none;
  transition: border-color .15s;
}
.input:focus { border-color: var(--teal); }
.inline-input {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 5px;
  color: var(--dark); font-size: .8rem; padding: 3px 7px; width: 100%;
  font-family: monospace; outline: none; transition: border-color .15s;
}
.inline-input:focus { border-color: var(--teal); }

/* Address autocomplete (IGN Géoplateforme) — shared between signup.html and
   the app's meter-address workflow; see reports/address-autocomplete-
   evaluation-2026-07-03.md */
.addr-field-wrap { position: relative; }
.addr-suggest {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  z-index: 20;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.addr-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  font-size: .8rem;
  color: var(--text);
  font-family: inherit;
}
.addr-suggest button:first-child { border-top: none; }
.addr-suggest button:hover { background: var(--surface2); }

/* ── 12. Toast ──────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--dark); border: 1px solid rgba(32,194,142,.25);
  color: var(--white); padding: 12px 18px; border-radius: 9px;
  font-size: .8rem; z-index: 200; display: none;
  max-width: 360px; line-height: 1.6; white-space: pre-line;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.toast.show { display: block; }

/* ── 13. Modal ──────────────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(26,35,50,.7); z-index: 100;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 32px;
  width: 380px; max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.modal h3 { font-size: .95rem; font-weight: 700; margin-bottom: 16px; color: var(--dark); }
.modal-err { font-size: .78rem; color: var(--red); margin-top: 6px; min-height: 1.2em; }

/* ── 14. Prototype toolbar ─────────────────────────────────────────── */
.edit-bar-global {
  display: flex; align-items: center; gap: 8px;
  max-width: 1560px;
  margin: 0 auto;
  padding: var(--space-3) 0;
  background: var(--bg2);
  flex-shrink: 0;
}
.edit-bar-spacer { flex: 1; }
/* Global top-bar context chips: PDL · Puissance · Heures creuses */
/* Contract metadata: inline label/value separated by hairline dividers — no
   pill capsule, no uppercase micro-labels (those read as generated UI). The
   pill radius (999px) was also off the app's 6–14px radius scale.
   See docs/dataviz "credible, not AI-generated". */
.topbar-chips { display: flex; align-items: center; gap: 0; min-width: 0; flex-wrap: wrap; }
.tb-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: var(--text-caption);
  color: var(--dark);
  white-space: nowrap;
}
.tb-chip + .tb-chip { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--border); }
.tb-chip > span:not(.tb-chip-l) { font-weight: 600; font-variant-numeric: tabular-nums; }
.tb-chip-l { font-size: var(--text-caption); color: var(--muted); font-weight: 400; }
.topbar-meter-details { display: none; }
@media (max-width: 900px) { .topbar-chips { display: none; } }
.data-context-control { display: flex; min-width: 0; }
.toolbar-select {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--control-height-md);
  padding: 0 var(--control-padding-inline-md);
  gap: var(--control-gap-md);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--control-radius-md);
  color: var(--dark);
  transition: background .15s, border-color .15s, color .15s;
}
.toolbar-select:hover { border-color: rgba(35,60,184,.42); }
.toolbar-select:has(.toolbar-select-input:focus-visible) {
  outline: 2px solid rgba(31,54,166,.45);
  outline-offset: 2px;
}
.toolbar-select-context {
  width: 300px;
  container: data-context / inline-size;
}
.toolbar-select-language { width: 136px; }
.toolbar-select-icon { flex: 0 0 16px; font-size: var(--control-icon-size-md); color: var(--muted); }
.toolbar-select-input {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 20px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--dark);
  font: inherit;
  font-size: var(--control-font-size-md);
  font-weight: 500;
  cursor: pointer;
}
.toolbar-select-caret {
  position: absolute;
  right: var(--control-padding-inline-md);
  top: 50%;
  color: var(--muted);
  font-size: var(--control-icon-size-md);
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}
.data-context-compact-label {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: var(--space-5);
  overflow: hidden;
  color: var(--dark);
  font-size: var(--control-font-size-md);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.data-context-compact-label__tiny { display: none; }
@container data-context (max-width: 180px) {
  .toolbar-select-context.has-compact-pdl .data-context-select {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
  }
  .toolbar-select-context.has-compact-pdl .data-context-compact-label {
    display: block;
  }
}
@container data-context (max-width: 150px) {
  .toolbar-select-context.has-compact-pdl .toolbar-select-icon {
    display: none;
  }
  .toolbar-select-context.has-compact-pdl #dataContextCompactLabel {
    display: none;
  }
  .toolbar-select-context.has-compact-pdl .data-context-compact-label__tiny {
    display: inline;
  }
}
.toolbar-select:has(.data-context-select.is-simulated) {
  background: rgba(35,60,184,.06);
  border-color: rgba(35,60,184,.32);
}
.toolbar-select:has(.data-context-select.is-simulated) .toolbar-select-icon,
.toolbar-select:has(.data-context-select.is-simulated) .toolbar-select-input { color: var(--teal); }

/* Pointer users receive no persistent focus ring after a click. Keyboard users
   keep control rings; route anchors handle their modality beside PageHeader. */
:root[data-input-modality="pointer"] button:focus-visible,
:root[data-input-modality="pointer"] select:focus-visible { outline: none !important; }
:root[data-input-modality="pointer"] .toolbar-select:has(.toolbar-select-input:focus-visible) { outline: none !important; }
.app-page-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: 1.4;
}
.app-page-footer a { display: inline-flex; align-items: center; min-height: 32px; color: inherit; text-decoration: none; }
.app-page-footer a:hover { color: var(--teal); text-decoration: underline; }
.app-page-footer a:focus-visible { outline: 2px solid rgba(31,54,166,.38); outline-offset: 2px; }
@media (max-width: 420px) {
  .edit-bar-global { gap: 6px; padding-inline: 0; }
  .topbar-meter-details summary span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
/* ── 15. Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .burger { display: flex; }
  .auth-field { font-size: var(--text-body); }

  /* Fix 3: wider sidebar (280px) so it's usable on modern phones */
  .sidebar {
    width: 280px;
    position: fixed; left: -280px; top: 0; height: 100vh; height: 100dvh;
    z-index: 150; transition: left .25s ease;
    overflow: hidden;
    box-shadow: none;
    will-change: left;       /* D: GPU-composited slide animation */
    touch-action: pan-y;     /* F: allow vertical scroll inside sidebar, no tap delay */
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.open { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,.15); }
  .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .sidebar-account { flex: 0 0 auto; margin-top: 0; border-top: 1px solid var(--border); }
  /* display:block so opacity transition works, but pointer-events:none keeps
     the invisible overlay from swallowing touch events when sidebar is closed */
  .overlay { display: block; pointer-events: none; }
  .overlay.visible { pointer-events: auto; }
  /* Le widget de chat est un carré fixe de 54px ancré en bas à droite, au-dessus
     de tout. Sous le point de rupture il n'y a plus de marge latérale où le
     contenu puisse s'écarter : on réserve sa hauteur plus une garde, sinon il
     recouvre graphiques et contrôles en fin de page. */
  .main { padding: 0 var(--space-2) calc(var(--space-8) + var(--space-5)); }
  /* Tiroir ouvert : le contenu derrière ne doit plus défiler. `inert` bloque le
     pointeur et le clavier, pas le geste de défilement. */
  .main.is-scroll-locked { overflow: hidden; }
  .page { padding: var(--space-4) 0 var(--space-5); border: 0; border-radius: 0; background: transparent; }
  .page--temporal { padding-top: 0; }
  .app-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  .app-page-header--map {
    padding: var(--space-3) var(--space-4);
  }
  .topbar-meter-details {
    position: relative;
    display: block;
    color: var(--dark);
    font-size: var(--text-caption);
  }
  .topbar-meter-details summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--control-height-md);
    min-height: var(--control-height-md);
    padding: 0 var(--control-padding-inline-md);
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
    cursor: pointer;
    font-weight: 500;
    list-style: none;
  }
  .topbar-meter-details summary::-webkit-details-marker { display: none; }
  .topbar-meter-details summary:focus-visible {
    outline: 2px solid rgba(31,54,166,.45);
    outline-offset: 2px;
  }
  .topbar-meter-details__content {
    position: absolute;
    z-index: 20;
    top: calc(100% + var(--space-2));
    left: 0;
    display: grid;
    gap: var(--space-2);
    width: min(320px, calc(100vw - var(--space-4)));
    padding: var(--space-3);
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-md);
    background: var(--card);
    box-shadow: var(--shadow-md);
  }
  .topbar-meter-details__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--muted);
  }
  .topbar-meter-details__row[hidden] { display: none; }
  .topbar-meter-details__row strong {
    color: var(--dark);
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .toolbar-select-icon { display: none; }
  .page-carte-layout { height: calc(100dvh - 80px); padding: 0; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  #page-reseau .dash-page-heading,
  #page-sim-tarif .dash-page-heading {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  #page-reseau .dash-page-heading > div .dash-source {
    display: block;
    width: 100%;
  }
  #page-reseau .pdl-period-controls,
  #page-sim-tarif .pdl-period-controls,
  #page-sim-pv .pdl-period-controls { width: 100%; flex-wrap: wrap; }
  #page-reseau .pdl-period-controls .pdl-period-tabs,
  #page-sim-tarif .pdl-period-controls .pdl-period-tabs,
  #page-sim-pv .pdl-period-controls .pdl-period-tabs { width: 100%; }
  #page-reseau .pdl-period-controls .range-btn,
  #page-sim-tarif .pdl-period-controls .range-btn,
  #page-sim-pv .pdl-period-controls .range-btn { flex: 1; }
  #page-reseau .reseau-kpi-grid,
  #page-sim-pv .sim-pv-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  #page-reseau .reseau-kpi-card { min-height: 96px; padding-inline: var(--space-3); }
  #page-reseau .summary-metric__value { font-size: var(--text-metric); }
  #page-reseau .reseau-chart-card { padding-inline: var(--space-3); }
  #page-reseau .reseau-main { gap: var(--space-5); }
  .fi-grid { grid-template-columns: 1fr 1fr; }
  .score-grid { grid-template-columns: 1fr 1fr; }
  /* Hauteurs liées à la fenêtre plutôt que figées : à 288px un graphique
     dépassait le viewport en paysage (812x375), et sur un écran haut il restait
     tassé — le point d'Antonin du 24/07 sur la compression visuelle. Le plancher
     garde une lecture possible, le plafond évite qu'un seul graphique occupe
     tout l'écran. */
  .cw-lg { height: clamp(220px, 42vh, 320px); }
  .cw    { height: clamp(200px, 36vh, 288px); }
  .cw-sm { height: clamp(160px, 26vh, 200px); }
  .savings-box { flex-direction: column; gap: 12px; }
  .sav-div { display: none; }
  .pdl-strip { flex-direction: column; gap: 10px; }
  .pdl-info  { flex-wrap: wrap; gap: 10px; }
  .ev-page-header,
  .ev-main {
    gap: var(--space-4);
  }
  .ev-page-header {
    margin-bottom: var(--space-4);
  }
  .ev-plan-facts,
  .ev-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ev-plan-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .ev-month-header {
    padding-inline: var(--space-4);
  }
  .ev-table th,
  .ev-table td {
    padding-inline: var(--space-4);
  }
  .pdl-period-tabs,
  .pdl-metric-tabs { width: 100%; overflow-x: auto; }
  .pdl-period-tabs .range-btn,
  .pdl-metric-tabs .cdc-tab { flex: 1; min-width: max-content; }
  .pdl-card-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .pdl-card-head .stitle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-body); }
  .pdl-card-actions { width: 100%; justify-content: flex-start; }

  .pdl-main-chart { height: auto !important; min-height: 0; aspect-ratio: 4 / 3; }
  .utoscore-main { flex-direction: column; align-items: flex-start; gap: 14px; }
  .utoscore-dial { width: 80px; height: 80px; }
  .utoscore-dial svg { width: 80px; height: 80px; }

  /* The global context bar and burger stay in normal flow on mobile and scroll
     away together. Its right padding preserves the burger's initial hit area. */
  .edit-bar-global {
    position: static;
    z-index: auto;
    padding: 8px 48px 8px 0;
  }
  .app-temporal-header {
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: var(--space-3);
    margin-top: 0;
    margin-bottom: var(--space-4);
    /* Le burger reste sur la barre globale au-dessus. La rangée temporelle peut
       donc utiliser toute la largeur disponible, avec des flèches symétriques. */
    padding-right: 0;
    padding-block: var(--space-2);
    background: var(--bg2);
    border: 0;
    box-shadow: none;
  }
  .app-temporal-header .app-page-header__identity,
  .app-temporal-header .pdl-hero-copy {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }
  .app-temporal-header .pdl-period-heading {
    display: grid;
    grid-template-columns: var(--control-height-md) minmax(0, 1fr) var(--control-height-md);
    width: 100%;
    gap: var(--space-2);
  }
  .app-temporal-header .pdl-period-heading > .app-period-title {
    grid-column: 2;
  }
  .app-temporal-header .pdl-period-heading > .pdl-period-nav:first-child {
    grid-column: 1;
  }
  .app-temporal-header .pdl-period-heading > .pdl-period-nav:last-child {
    grid-column: 3;
  }
  .app-temporal-header .app-period-title {
    overflow: hidden;
    font-size: var(--font-size-400);
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .app-temporal-header .pdl-period-nav {
    width: var(--control-height-md);
    height: var(--control-height-md);
    flex-basis: var(--control-height-md);
    border-radius: var(--control-radius-md);
  }
  .app-temporal-header .pdl-period-controls {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: stretch;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
  }
  /* The scale determines the resulting date window, so it leads every mobile
     temporal header. Visible options share the full-width track equally. */
  .app-temporal-header .pdl-period-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .app-temporal-header .pdl-period-tabs .range-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--space-2);
  }
  .app-temporal-header .app-temporal-mobile-range {
    display: none;
  }
  /* Le bouton de plage personnalisée est masqué sous le point de rupture. Les
     périodes courantes restent directement accessibles dans la seconde rangée ;
     la plage libre revient au-dessus de 900px, où la place existe. */
  .app-temporal-header .pdl-custom-period { display: none; }
  .app-temporal-header .pdl-period-toggle__label { display: none; }
  .edit-bar-spacer { display: none; }
  .data-context-control { flex: 2 1 0; min-width: 0; }
  .toolbar-select-language { flex: 1 1 0; min-width: 0; }
  .toolbar-select-context,
  .toolbar-select-language { width: 100%; }
  .app-page-footer { flex-wrap: wrap; gap: 4px 18px; margin-top: var(--space-5); }

  .mode-toggle { flex-wrap: wrap; }
  table { font-size: .7rem; }
  .pm-table th, .pm-table td { padding: 5px 6px; }

  /* Fix 6: tables scroll horizontally rather than overflowing the card */
  .pm-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}
/* Sous 360px, les deux flèches et leurs espaces resserrent encore le libellé de
   période. Un cran en dessous évite sa troncature ; au-delà, la taille pleine tient. */
@media (max-width: 360px) {
  .app-temporal-header .app-period-title { font-size: var(--font-size-300); }
  #page-ev .app-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  #page-ev .app-card__meta {
    width: 100%;
    text-align: start;
  }
}
@media (max-width: 420px) {
  .topbar-meter-details summary {
    width: var(--control-height-md);
    padding-inline: 0;
    justify-content: center;
  }
  .topbar-meter-details summary > i {
    font-size: var(--icon-size-lg);
    line-height: 1;
  }
  .toolbar-select-language {
    width: var(--control-height-md);
    flex: 0 0 var(--control-height-md);
    padding-inline: 0;
    justify-content: center;
  }
  .toolbar-select-language .toolbar-select-icon {
    display: inline-flex;
    flex-basis: auto;
    font-size: var(--icon-size-lg);
    line-height: 1;
  }
  .toolbar-select-language .toolbar-select-input {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    opacity: 0;
  }
  .toolbar-select-language .toolbar-select-caret {
    display: none;
  }
  .fi-grid, .score-grid { grid-template-columns: 1fr; }
  .g2 { grid-template-columns: 1fr; }
  .range-btn { padding: 3px 8px; font-size: .68rem; }
}

/* ── Forecast 3-day tabs ──────────────────────────────────────── */
.ftab {
  font-size: .72rem; font-weight: 600; padding: 5px 12px;
  border-radius: 7px; border: 1px solid rgba(148,163,184,.3);
  background: transparent; color: var(--muted);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  font-family: inherit;
}
.ftab-active {
  background: rgba(32,194,142,.15); color: var(--mint);
  border-color: rgba(32,194,142,.45);
}
.forecast-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
/* Forecast card internals */
.fc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 8px; flex-wrap: wrap; }
.fc-date   { font-weight: 700; font-size: .85rem; text-transform: capitalize; }
.fc-badge  { font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; letter-spacing: .02em; }
.fc-meteo  { font-size: .8rem; color: var(--muted); margin-bottom: 12px; }
.fc-rows   { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.fc-row    { display: flex; align-items: center; gap: 8px; }
.fc-time   { font-size: .7rem; color: var(--muted); min-width: 66px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.fc-pills  { display: flex; gap: 5px; flex-wrap: wrap; }
.fc-pill   { font-size: .7rem; padding: 4px 11px; border-radius: 20px; font-weight: 600; letter-spacing: .01em; }
.fc-pill-bas    { background: #d1fae5; color: #065f46; }
.fc-pill-modere { background: #fef3c7; color: #92400e; }
.fc-pill-eleve  { background: #fee2e2; color: #991b1b; }
.fc-range  { font-size: .72rem; color: var(--muted); margin-bottom: 4px; }
.fc-resume { font-size: .75rem; color: var(--muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); line-height: 1.5; }
/* Card border accent per confiance */
.forecast-card[data-conf="reel"]         { border-color: color-mix(in srgb, var(--green) 50%, transparent); }
.forecast-card[data-conf="estime"]       { border-color: rgba(251,191,36,.6); }
.forecast-card[data-conf="approximatif"] { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
@media (max-width: 380px) {
  .ftab { padding: 4px 8px; font-size: .68rem; }
}

/* Le tableau de bord mobile dédié (#page-mobile) et ses classes .m-* ont été
   supprimés le 27/07 : la page n'était plus dans le DOM ni routée, seul le code
   mort subsistait. La navigation est identique à toutes les largeurs. */
/* ══ En ce moment (#page-accueil) ═══════════════════════════════════════ */
/* Hiérarchie : recommandation courante, prochaines heures, historique.    */

.dash-primary,
.dash-secondary {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.dash-page-heading { margin: 0 0 var(--space-5); }
#page-reseau .dash-page-heading,
#page-sim-tarif .dash-page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: var(--space-5);
}
#page-reseau .dash-page-heading > div,
#page-sim-tarif .dash-page-heading > div {
  min-width: 0;
}
#page-reseau .dash-page-heading > div .dash-source {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}
#page-reseau .reseau-title-row { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
#page-reseau .reseau-stale-badge {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--color-text-warning);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: default;
}
#page-reseau .reseau-stale-badge[hidden] { display: none; }
#page-reseau .pdl-card-head .pdl-help {
  margin-left: 6px;
}
/* Même style que le titre de la page Consommation (.pdl-hero h2). */
.dash-page-heading h1 { margin: 0; font-family: var(--font-body); color: var(--pdl-text); font-size: 1.9rem; line-height: 1.08; font-weight: 500; letter-spacing: 0; }

/* Canonical product card. Content types compose the same shell and optional
   slots; page classes may control data layout, never card geometry or type. */
.app-card,
.card-panel,
.panel {
  --app-card-padding-inline: var(--space-5);
  --app-card-padding: var(--space-4) var(--space-5) var(--space-5);
  --app-card-section-gap: var(--space-4);
  background: var(--card);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-panel);
  padding: var(--app-card-padding);
  box-shadow: none;
  min-width: 0;
}
.app-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--space-6);
  margin-bottom: var(--app-card-section-gap);
}
.app-card__single-toggle {
  flex: 0 0 auto;
  margin-inline-start: auto;
}
.app-card__title {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  margin: 0;
  margin-inline-end: auto;
  color: var(--dark);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: start;
}
.app-card > .app-card__title {
  margin-bottom: var(--app-card-section-gap);
}
.app-card__header .app-card__title {
  align-self: flex-start;
}
.app-card__header > :has(> .app-card__title) {
  align-self: flex-start;
}
.app-card__header .app-card__title,
.app-card--chart > .app-card__title {
  margin-bottom: 0;
}
.app-card__icon {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--icon-size-md);
  line-height: 1;
}
.app-card__meta,
.app-card__footer {
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: 1.5;
}
.app-card__meta {
  margin: 0;
  text-align: right;
}
.app-card__header > .app-card__meta {
  align-self: flex-start;
}
.app-card__header > div > .app-card__title + .app-card__meta {
  text-align: start;
}
.app-card__body {
  min-width: 0;
}
.app-card__body--full-bleed-inline {
  margin-inline: calc(0px - var(--app-card-padding-inline));
}
.app-section-title--control-inset {
  padding-inline-start: var(--control-padding-inline-lg);
}
.app-card__footer {
  margin-top: var(--app-card-section-gap);
}
.panel--compact,
.app-card--compact {
  --app-card-padding-inline: var(--space-4);
  --app-card-padding: var(--space-3) var(--space-4) var(--space-4);
}
.app-card--chart,
.dash-forecast {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.app-card--chart,
.chart-panel {
  display: flex;
  flex-direction: column;
  gap: var(--app-card-section-gap, var(--space-4));
  min-width: 0;
}
/* Contextual, non-blocking product notice. Neutral by default; semantic
   variants change only the surface role, never the component geometry. */
.app-notice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg2);
  color: var(--dark);
}
.app-notice[hidden] { display: none; }
.app-notice--info {
  border-color: color-mix(in srgb, var(--teal) 18%, var(--border));
  background: color-mix(in srgb, var(--teal) 5%, var(--card));
}
.app-notice--global { margin-bottom: var(--space-3); }
.app-notice__icon {
  flex: 0 0 auto;
  color: var(--teal);
  font-size: var(--icon-size-lg);
  line-height: 1;
}
.app-notice__content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex-wrap: wrap;
}
.app-notice__text {
  margin: 0;
  color: var(--dark);
  font-size: var(--text-secondary);
  line-height: 1.5;
}
.app-notice__action {
  margin-left: auto;
  white-space: nowrap;
}
.app-notice__dismiss {
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  flex: 0 0 var(--control-height-sm);
  margin-left: auto;
  color: var(--muted);
  font-size: var(--icon-size-md);
}
.app-notice .spin-loader { flex-shrink: 0; }
.app-card--chart > .app-card__header {
  margin-bottom: 0;
}
.chart-panel .cw,
.chart-panel .cw-lg,
.chart-panel .cw-sm { margin-top: 0; }
.page-empty-state {
  padding: var(--space-7);
  color: var(--color-text-secondary);
  font-size: var(--text-secondary);
  line-height: 1.5;
  text-align: center;
}
.inline-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.inline-link:hover { color: var(--teal2); }
.inline-link:focus-visible { outline: 2px solid rgba(31,54,166,.45); outline-offset: 2px; }
#simTarifContent {
  display: grid;
  gap: var(--space-5);
}
/* Ombres de défilement horizontal, primitive partagée.
   Les deux dégradés « local » sont peints à la couleur de la surface et suivent
   le contenu : ils masquent l'ombre correspondante tant qu'on est en butée. Les
   deux ombres « scroll » restent fixes sur les bords. Résultat : l'indice
   n'apparaît que s'il reste réellement du contenu de ce côté, sans point de
   rupture à deviner ni JavaScript. */
.scroll-hint-x {
  --scroll-hint-surface: var(--card);
  background:
    linear-gradient(to right, var(--scroll-hint-surface), transparent) 0 0 / var(--space-5) 100% no-repeat local,
    linear-gradient(to left, var(--scroll-hint-surface), transparent) 100% 0 / var(--space-5) 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .14), transparent) 0 0 / var(--space-3) 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .14), transparent) 100% 0 / var(--space-3) 100% no-repeat scroll;
}
.sim-primary-recommendation__text {
  margin: 0;
  color: var(--dark);
  font-size: var(--text-metric);
  font-weight: 600;
  line-height: 1.35;
}
.sim-primary-recommendation__info {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-secondary);
  line-height: 1.5;
}
.sim-comparison-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-2);
}
.sim-comparison-mobile { display: none; }

.sim-comparison-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: var(--dark);
  font-size: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.sim-comparison-table th,
.sim-comparison-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: right;
  vertical-align: middle;
}
.sim-comparison-table thead th {
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 500;
}
.sim-comparison-table th:first-child {
  max-width: 280px;
  padding-inline-start: 0;
  text-align: left;
}
.sim-comparison-table tbody th { font-weight: 500; }
.sim-comparison-table tbody tr:last-child > * { border-bottom: 0; }
.sim-comparison-table td,
.sim-comparison-table td strong { font-weight: 600; }
/* Quand la carte devient trop étroite pour le tableau, les trois périodes
   courtes deviennent des tiroirs fermés par défaut et l'année reste visible.
   Le seuil suit la largeur réellement offerte à la carte plutôt que le viewport,
   afin de rester juste si la largeur de la barre latérale change. */
.sim-comparison-panel { container-type: inline-size; container-name: sim-comparison; }
@container sim-comparison (max-width: 660px) {
  .sim-comparison-table-wrap { display: none; }
  .sim-comparison-mobile {
    display: grid;
    margin-top: var(--space-2);
  }
  .sim-comparison-disclosure,
  .sim-comparison-mobile__year {
    border-bottom: 1px solid var(--border);
  }
  .sim-comparison-mobile__year {
    padding-block: var(--space-3);
    border-bottom: 0;
  }
  .sim-comparison-disclosure summary,
  .sim-comparison-mobile__year h3 {
    min-height: var(--control-height-md);
    margin: 0;
    color: var(--dark);
    font-size: var(--text-secondary);
    font-weight: 600;
  }
  .sim-comparison-disclosure summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    cursor: pointer;
    list-style: none;
  }
  .sim-comparison-mobile__year h3 {
    min-height: 0;
    margin-bottom: var(--space-3);
    line-height: 1.3;
  }
  .sim-comparison-mobile__year .sim-comparison-mobile__values {
    padding-bottom: 0;
  }
  .sim-comparison-disclosure summary::-webkit-details-marker { display: none; }
  .sim-comparison-disclosure summary i {
    flex: 0 0 auto;
    font-size: var(--icon-size-md);
  }
  .sim-comparison-disclosure[open] summary i { transform: rotate(180deg); }
  .sim-comparison-mobile__values {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0 0 var(--space-3);
  }
  .sim-comparison-mobile__values > div {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }
  .sim-comparison-mobile__values dt {
    flex: 1 1 auto;
    color: var(--muted);
    font-size: var(--text-caption);
    font-weight: 400;
  }
  .sim-comparison-mobile__values dd {
    margin: 0;
    color: var(--dark);
    font-size: var(--text-secondary);
    font-weight: 600;
  }
  .sim-comparison-mobile__values .sim-comparison-table__delta {
    display: inline;
    margin: 0 0 0 var(--space-3);
  }
}
.sim-comparison-table td strong.is-positive { color: var(--color-text-success); }
.sim-comparison-table td strong.is-negative { color: var(--color-text-danger); }
.sim-comparison-mobile strong.is-positive { color: var(--color-text-success); }
.sim-comparison-mobile strong.is-negative { color: var(--color-text-danger); }
.sim-comparison-table__delta {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 400;
}
.sim-comparison-table__unit {
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 400;
}
.sim-hc-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}
#page-sim-tarif .sim-cost-swatch--dynamic,
#page-sim-tarif .sim-cost-swatch--edf {
  width: 16px;
  height: 0;
  background: none;
  border-radius: 0;
}
#page-sim-tarif .sim-cost-swatch--dynamic {
  height: 2px;
  border-top: 0;
  background: linear-gradient(
    90deg,
    var(--forecast-windy-1) 0%,
    var(--forecast-windy-2) 18%,
    var(--forecast-windy-3) 38%,
    var(--forecast-windy-4) 62%,
    var(--forecast-windy-5) 78%,
    var(--forecast-windy-6) 92%,
    var(--forecast-windy-7) 100%
  );
}
#page-sim-tarif .sim-cost-swatch--edf { border-top: 2px dashed var(--teal); }
#page-sim-tarif .sim-price-swatch {
  align-self: center;
  height: 2px;
  border-radius: 0;
  background: linear-gradient(
    90deg,
    var(--forecast-windy-1) 0%,
    var(--forecast-windy-2) 18%,
    var(--forecast-windy-3) 38%,
    var(--forecast-windy-4) 62%,
    var(--forecast-windy-5) 78%,
    var(--forecast-windy-6) 92%,
    var(--forecast-windy-7) 100%
  );
}
/* Rythme de section de Panneaux solaires, aligné sur #page-reseau .reseau-main
   dont cette page reprend déjà la grille de KPI. Avant, l'écart entre les blocs
   ne venait que du `margin-bottom: 12px` de l'utilitaire .g2 : une valeur
   héritée, hors échelle, et absente entre la rangée de KPI et le premier
   graphique. */
#simPvContent {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
/* La légende descriptive de Journée moyenne suit le graphe. Les lectures
   optionnelles restent des contrôles séparés au-dessus du tracé. */
.pdl-typical-day-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.pdl-typical-day-legend .li {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-text-secondary);
}
/* Rangée des lectures superposées, sous la légende. Les libellés des deux cases
   suffisent visuellement ; le groupe conserve un nom accessible dans le DOM. */
.pdl-typical-day-overlays {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
}
.pdl-typical-day-legend-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  cursor: pointer;
  user-select: none;
}
.pdl-typical-day-legend-toggle.is-disabled { cursor: not-allowed; opacity: .45; }
.pdl-typical-day-legend-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.pdl-typical-day-legend-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-4);
  height: var(--space-4);
  border: 1px solid var(--border2);
  border-radius: calc(var(--radius-sm) / 2);
  background: var(--card);
  color: var(--white);
  transition: background .15s, border-color .15s, transform .1s;
}
.pdl-typical-day-legend-toggle:hover input:not(:disabled) + .pdl-typical-day-legend-check {
  border-color: var(--teal);
}
.pdl-typical-day-legend-toggle:active input:not(:disabled) + .pdl-typical-day-legend-check {
  transform: scale(.96);
}
.pdl-typical-day-legend-toggle input:checked + .pdl-typical-day-legend-check {
  border-color: var(--teal);
  background: var(--teal);
}
.pdl-typical-day-legend-toggle input:checked + .pdl-typical-day-legend-check::after {
  content: '✓';
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1;
}
.pdl-typical-day-legend-toggle input:focus-visible + .pdl-typical-day-legend-check {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
/* État masqué : la pastille s'estompe, mais le libellé reste lisible — à .4 il
   se lisait comme « désactivé » alors que la case reste actionnable. */
.pdl-typical-day-legend-toggle input:not(:checked) ~ .pdl-typical-day-swatch {
  opacity: .45;
}
.pdl-typical-day-legend-toggle input:not(:checked) ~ span:last-child {
  color: var(--muted);
}
/* Période sans prix : rien à superposer, la légende le montre au lieu de
   rester actionnable sans effet. */
.utg-toggle.is-disabled { cursor: not-allowed; opacity: .45; }
.utg-toggle.is-disabled .utg-toggle__label { color: var(--muted); }
.sim-pv-basis {
  margin: 0;
}
/* Note de méthode sous le titre du tableau : alignée à gauche, contrairement au
   `.app-card__meta` de bout de ligne. */
.sim-comparison-method {
  margin: var(--space-1) 0 0;
  text-align: left;
}
/* Le contrôle de période vit dans l'en-tête de la carte qu'il pilote. Il passe
   sous le titre dès que la ligne devient trop étroite, avant même le point de
   rupture mobile, pour ne jamais compresser le titre. */
.sim-chart-head {
  flex-wrap: wrap;
  row-gap: var(--space-3);
}
.sim-chart-head__period {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-left: auto;
}
#simPriceHeading .sim-chart-head__period {
  flex: 1 0 100%;
  justify-content: space-between;
  margin-left: 0;
}
@media (max-width: 900px) {
  .sim-chart-head__period {
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
  }
  .sim-chart-head__period .pdl-period-heading {
    order: -1;
    display: grid;
    grid-template-columns: var(--control-height-md) minmax(0, 1fr) var(--control-height-md);
    align-items: center;
    width: 100%;
    gap: var(--space-2);
  }
  .sim-chart-head__period .app-subperiod-title {
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.dash-card { display: flex; flex-direction: column; }
.dash-recent[hidden] { display: none; }
.dash-score-global[hidden] { display: none; }

/* Legacy dashboard names now consume the canonical AppCard slots. */
.dash-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
}
.dash-eyebrow { min-width: 0; }
.dash-source { text-align: right; }
#page-reseau .dash-page-heading .dash-source { text-align: left; }
.dash-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: var(--space-2); }
.dash-note a { color: var(--teal); text-decoration: none; }
.dash-note a:hover { text-decoration: underline; }
.dash-note-empty { display: inline-flex; align-items: center; gap: 6px; color: var(--amber); }

/* Échange d'icône contextuel (opacité + échelle + flou) au re-render du conseil. */
@keyframes dashIconIn { from { opacity: 0; transform: scale(.7); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

.dash-icon-btn {
  width: 32px; height: 32px; flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card); color: var(--muted);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.dash-icon-btn:hover { border-color: var(--teal); color: var(--teal); background: rgba(31,54,166,.06); }
.dash-icon-btn:active { transform: scale(.96); }
.dash-icon-btn:focus-visible { outline: 2px solid rgba(31,54,166,.45); outline-offset: 2px; }

.dash-grade-scale { display: flex; justify-content: space-between; gap: var(--space-3); }
.dash-grade {
  flex: 1 1 0; max-width: 64px; aspect-ratio: 1 / 1; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px; font-weight: 800; font-size: 1.15rem; color: #fff;
  text-shadow: 0 1px 6px rgba(15,23,42,.18);
  transition: transform .25s cubic-bezier(.2,0,0,1);
}
.dash-grade-a { background: linear-gradient(0deg, var(--score-grade-a-top), var(--score-grade-a)); }
.dash-grade-b { background: linear-gradient(0deg, var(--score-grade-b-top), var(--score-grade-b)); }
.dash-grade-c { background: linear-gradient(0deg, var(--score-grade-c-top), var(--score-grade-c)); }
.dash-grade-d { background: linear-gradient(0deg, var(--score-grade-d-top), var(--score-grade-d)); }
.dash-grade-e { background: linear-gradient(0deg, var(--score-grade-e-top), var(--score-grade-e)); }
.dash-grade.is-active { transform: scale(1.14); }
.dash-grade:not(.is-active) { font-size: 0.95rem; }

/* — Énergie-score : lecture + leviers dans un même bloc — */
.dash-score-content { display: flex; flex: 1; flex-direction: column; gap: var(--space-4); }
.dash-score-reading { display: flex; align-items: center; gap: var(--space-3); }
.dash-score-reading .dash-grade-scale { width: 100%; flex: 1; align-items: center; gap: var(--space-3); }
.dash-score-reading .dash-grade { flex: 1 1 0; max-width: none; height: var(--space-7); aspect-ratio: auto; border-radius: var(--radius-lg); font-size: 1.5rem; transition: flex .25s cubic-bezier(.2,0,0,1), height .25s cubic-bezier(.2,0,0,1); }
.dash-score-reading .dash-grade.is-active { flex: 1.4 1 0; height: calc(var(--space-8) + var(--space-5)); transform: none; }
.dash-score-reading .dash-grade:not(.is-active) { font-size: 1.05rem; }
.dash-score-status { margin: 0; color: var(--dark); font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.dash-score-explainer { margin: 4px 0 0; color: var(--muted); font-size: var(--text-secondary); line-height: 1.5; }
.dash-score-explainer:empty { display: none; }
/* Texte contextuel de l'Énergie-score : le signal qui a pesé sur la note, puis
   la note de la veille. Rôles texte canoniques, pas de taille ad hoc. */
.dash-score-lever,
.dash-score-action,
.dash-score-previous {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-secondary);
  line-height: 1.5;
}
.dash-score-action {
  margin-top: var(--space-1);
  color: var(--dark);
  font-weight: 500;
}
.dash-score-previous { color: var(--muted); }
.dash-score-lever:empty,
.dash-score-action:empty,
.dash-score-previous:empty { display: none; }
.dash-score-global { margin-bottom: 0; }
.dash-score-global .dash-grade {
  color: var(--dark);
  background: var(--energy-score-grade-background);
  text-shadow: 0 1px 1px rgba(255,255,255,.46);
}
.dash-score-global .dash-grade-a { --energy-score-grade-background: var(--energy-score-grade-a); }
.dash-score-global .dash-grade-b { --energy-score-grade-background: var(--energy-score-grade-b); }
.dash-score-global .dash-grade-c { --energy-score-grade-background: var(--energy-score-grade-c); }
.dash-score-global .dash-grade-d { --energy-score-grade-background: var(--energy-score-grade-d); }
.dash-score-global .dash-grade-e { --energy-score-grade-background: var(--energy-score-grade-e); }
.dash-score-content--global {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}
.dash-score-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 68ch;
}

/* — Conseil du jour : timeline de prix (réf. Sobry / Tibber) — */
.dash-forecast-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--space-3);
  min-width: 0;
}
.dash-forecast-status-key {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.dash-forecast-status-key > span + span::before {
  content: "·";
  margin-right: var(--space-2);
  color: var(--border);
}
.dash-forecast-status-key strong { color: var(--dark); font-weight: 600; }
.dash-forecast-help {
  margin-left: 0;
}
/* — En ce moment : décision immédiate, puis Énergie-score global en bas — */
#page-accueil .dash-page-heading h1 { font-size: var(--text-page-title); }
#page-accueil .dash-eyebrow { font-size: var(--text-body); }
#page-accueil .dash-eyebrow i { font-size: var(--icon-size-md); }
#page-accueil .dash-source { font-size: var(--text-caption); }
#page-accueil .price-masked-note { font-size: var(--text-secondary); }
.dash-now,
.dash-appliances,
.dash-forecast { margin-bottom: var(--space-5); }
/* La recommandation reprend la teinte continue du prix courant. Le voile et la
   bordure restent légers ; le titre reçoit la même teinte sous 10% de noir. */
#accueilAdviceCard {
  --dash-now-accent: var(--border-panel);
  --dash-now-ink: var(--dark);
  border-color: transparent;
  background-color: var(--card);
  background-image:
    radial-gradient(
      68% 115% at 0% 0%,
      color-mix(in srgb, var(--dash-now-accent) 10%, transparent) 0%,
      color-mix(in srgb, var(--dash-now-accent) 3%, transparent) 46%,
      transparent 68%
    ),
    linear-gradient(var(--card), var(--card)),
    radial-gradient(
      68% 115% at 0% 0%,
      color-mix(in srgb, var(--dash-now-accent) 46%, var(--border-panel)) 0%,
      color-mix(in srgb, var(--dash-now-accent) 28%, var(--border-panel)) 46%,
      var(--border-panel) 68%
    );
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
}
.dash-now-body {
  display: grid;
  grid-template-areas: "copy metrics";
  grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
  column-gap: var(--space-5);
  align-items: start;
}
.dash-now-copy { grid-area: copy; min-width: 0; }
.dash-now-copy h2 {
  margin: 0;
  color: var(--dash-now-ink, var(--dark));
  font-size: var(--text-page-title);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}
@media (forced-colors: active) {
  #accueilAdviceCard { background-image: none; border-color: CanvasText; }
}
.dash-now-points {
  max-width: 68ch;
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.dash-now-points li {
  display: block;
  color: var(--muteddk);
  font-size: var(--text-secondary);
  line-height: 1.5;
  text-wrap: pretty;
}
/* Item 7 (revue design 2026-07-27) : lien "revenir à aujourd'hui" dans la vue Hier */
.linklike { background: none; border: none; padding: 0; color: var(--teal); text-decoration: underline; cursor: pointer; font: inherit; }
.dash-now-metrics {
  grid-area: metrics;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: stretch;
}
.dash-data-tile {
  --dash-data-tile-value-color: var(--dark);
  --dash-data-tile-secondary-color: var(--color-text-secondary-on-subtle);
  --dash-data-tile-surface: var(--bg2);
  --dash-data-tile-content-gap: var(--space-2);
  --dash-data-tile-unit-gap: calc(var(--space-1) / 2);
  min-width: 0;
  min-height: calc(var(--space-8) + var(--space-5));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--dash-data-tile-content-gap);
  padding: var(--space-3) var(--space-3) var(--space-4) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--dash-data-tile-surface);
}
.dash-data-tile__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-6);
  color: var(--dash-data-tile-secondary-color);
  font-size: var(--text-secondary);
  font-weight: 400;
  line-height: 1;
}
.dash-data-tile__label-text { min-width: 0; }
.dash-data-tile__icon {
  flex: 0 0 auto;
  font-size: var(--icon-size-md);
  line-height: 1;
  /* Alignement optique, même convention que .nav-item i et .rc-nav i : la glyphe
     d'une police d'icônes est centrée dans un cadre em qui réserve la place des
     jambages, alors que le texte voisin se centre sur le sien. Le centre visuel
     de l'icône tombe donc un pixel trop bas à cette taille. On corrige l'icône,
     pas le texte, pour ne pas déplacer la ligne de base du libellé. */
  transform: translateY(-1px);
}
.dash-data-tile__reading {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  column-gap: var(--dash-data-tile-unit-gap);
  min-width: 0;
  white-space: nowrap;
}
.dash-data-tile__value {
  color: var(--dash-data-tile-value-color);
  font-size: var(--text-metric);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-data-tile__unit {
  color: var(--dash-data-tile-secondary-color);
  font-size: var(--text-secondary);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.dash-appliance-strip {
  min-width: 0;
}
.dash-appliances-setup {
  margin-bottom: var(--space-3);
  padding-top: var(--space-4);
}
@media (max-width: 900px) {
  .dash-appliances-setup {
    display: grid;
    grid-template-columns: var(--icon-size-lg) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-3);
  }
  .dash-appliances-setup .app-notice__icon {
    grid-column: 1;
    grid-row: 1;
  }
  .dash-appliances-setup .app-notice__content {
    grid-column: 2;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }
  .dash-appliances-setup .app-notice__action {
    margin-left: calc(0px - var(--control-padding-inline-md));
  }
}
.dash-appliance-list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
}
.dash-appliance-list:focus-visible { outline: 2px solid rgba(31,54,166,.45); outline-offset: 2px; }
.dash-data-tile--planning {
  flex: 0 0 calc(var(--space-8) * 4);
}
.dash-appliance-help {
  margin-left: auto;
}

/* — Bandes horaires : trois heat strips continus, sans chrome de tableau — */
.dash-forecast-body {
  min-width: 0;
  /* Width of the sticky row-label column. Shared by the grid template and the
     sticky offset of the day headers so the two can never drift apart. */
  --dash-forecast-label-width: 128px;
}
@media (min-width: 901px) {
  .dash-forecast-body {
    margin-inline-start: 0;
  }
}
.dash-forecast-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.dash-forecast-scroll::-webkit-scrollbar { display: none; }
.dash-forecast-scroll:focus-visible {
  outline: 2px solid rgba(31,54,166,.45);
  outline-offset: 2px;
}
.dash-forecast-scrollbar {
  width: calc(100% - var(--dash-forecast-label-width));
  height: var(--space-3);
  margin-top: var(--space-2);
  margin-left: var(--dash-forecast-label-width);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.dash-forecast-scrollbar__content {
  height: 1px;
}
.dash-forecast-row {
  display: grid;
  grid-template: auto / var(--dash-forecast-label-width);
  grid-auto-flow: column;
  /* 52px : la valeur la plus large de la bande est « 23 % » ; avec l'inset
     horizontal réduit ci-dessous il reste 44px de texte, assez pour elle comme
     pour « 11,5 ». Colonnes plus étroites = plus d'heures visibles sans
     défilement, ce que la vue continue de 72 h demande. */
  grid-auto-columns: minmax(52px, 1fr);
  min-width: min-content;
}
.dash-forecast-row:not(.dash-forecast-days):not(.dash-forecast-hours):not(.dash-forecast-sources) { margin-top: var(--space-2); }
.dash-forecast-days {
  margin-bottom: var(--space-1);
}
.dash-forecast-day {
  /* Keep the 24-column grid area for placement, but do not stretch the visible
     label across it: an oversized sticky box loses its anchor at the far end. */
  position: sticky;
  left: var(--dash-forecast-label-width);
  justify-self: start;
  inline-size: calc(var(--space-8) * 6);
  z-index: 1;
  min-height: var(--space-6);
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--card);
  color: var(--muted);
  font-size: var(--text-caption);
  white-space: nowrap;
}
.dash-forecast-day strong {
  color: var(--dark);
  font-weight: 600;
}
.dash-forecast-day small {
  color: var(--muted);
  font-size: var(--text-caption);
}
.dash-forecast-label,
.dash-forecast-hour,
.dash-forecast-source,
.dash-forecast-cell {
  min-height: var(--space-7);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Inset horizontal réduit à 4px : la hauteur de rangée ne bouge pas, mais
     chaque colonne gagne 8px de largeur utile. */
  padding: var(--space-2) var(--space-1);
  color: var(--muteddk);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.dash-forecast-label {
  position: sticky;
  left: 0;
  z-index: 2;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  /* Separates the row name from its unit/source line. Only the five data rows
     have both lines; the day and hour spacer labels are empty, so they are
     unaffected. */
  gap: var(--space-1);
  /* Tighter than the shared --space-2 inset: with two 1.2 lines plus the gap,
     an 8px block padding made the label taller than the heat strip, so the
     label — not the strip — set every row's height. At 4px the strip's own
     min-height governs again. Inline padding stays --space-2 for alignment. */
  padding-block: var(--space-1);
  background: var(--card);
  text-align: left;
}
/* Explicit line-height so the 4px gap above is measured against a value we
   control. Without it these two lines fall back to the UA default `normal`,
   which is derived from Rubik's own metrics — the label's height, and how the
   gap reads, would then depend on a font detail rather than the contract. */
.dash-forecast-label strong { color: var(--dark); font-size: var(--text-caption); font-weight: 600; line-height: 1.2; }
.dash-forecast-label small { color: var(--muted); font-size: var(--text-caption); line-height: 1.2; }
.dash-forecast-label__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
/* Le pictogramme ne sert qu'à la réduction mobile : au-dessus du point de
   rupture, le libellé complet reste la seule lecture. */
.dash-forecast-label__icon { display: none; }
.dash-forecast-label:focus-visible { outline: 2px solid rgba(31,54,166,.38); outline-offset: -2px; border-radius: var(--radius-sm); }
/* Réduction mobile de la colonne de gauche (point design du 23/07). Le texte
   n'est pas retiré du DOM : il est masqué visuellement, donc toujours annoncé
   comme en-tête de ligne, et restitué au tap ou au focus par l'infobulle. */
@media (max-width: 900px) {
  .dash-forecast-body { --dash-forecast-label-width: var(--space-7); }
  .dash-forecast-label__icon {
    display: inline-flex;
    color: var(--muteddk);
    font-size: var(--icon-size-md);
    line-height: 1;
  }
  .dash-forecast-label { align-items: center; justify-content: center; padding-inline: 0; }
  .dash-forecast-label__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
.dash-forecast-hours { margin-bottom: var(--space-1); }
.dash-forecast-hours .dash-forecast-label,
.dash-forecast-hour { min-height: var(--space-5); color: var(--muted); }
.dash-forecast-hour.is-current {
  color: var(--dark);
  font-weight: 600;
  white-space: nowrap;
}
.dash-forecast-hour.is-current {
  position: relative;
  isolation: isolate;
}
.dash-forecast-hour.is-current::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: calc(var(--radius-sm) / 2);
  background: var(--chart-period-highlight);
  pointer-events: none;
}
.dash-forecast-sources { margin-bottom: var(--space-1); }
.dash-forecast-sources .dash-forecast-label,
.dash-forecast-source { min-height: var(--space-6); }
.dash-forecast-source {
  color: var(--muteddk);
  font-size: var(--icon-size-lg);
}
.dash-forecast-source-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  inline-size: calc(var(--icon-size-lg) + var(--icon-size-lg) + var(--space-1));
}
.dash-forecast-source-icon {
  display: block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}
.dash-forecast-source.is-missing {
  color: var(--muted);
  font-size: var(--text-caption);
}
.dash-forecast-tooltip {
  position: fixed;
  z-index: 90;
  /* max-content sizes the box to its widest line, so each fact keeps its own
     line instead of being wrapped early by shrink-to-fit. max-width still caps
     it, and only a line wider than that cap wraps. No text-wrap: pretty here —
     line balancing narrows the measure and re-wraps these short facts. */
  width: max-content;
  max-width: min(320px, calc(100vw - var(--space-4)));
  padding: var(--space-2) var(--space-3);
  border-radius: calc(var(--radius-sm) / 2);
  background: var(--dark);
  color: var(--white);
  font-size: var(--text-caption);
  line-height: 1.4;
  text-align: left;
  /* The tooltip copy is newline-separated: one fact per line, no bullets or
     inline separators. pre-line keeps those breaks while still collapsing
     incidental whitespace and wrapping over-long lines. */
  white-space: pre-line;
  pointer-events: none;
}
.dash-forecast-tooltip[hidden] { display: none; }
.dash-forecast-cell:is(.is-scale-1, .is-scale-2, .is-scale-3, .is-scale-4, .is-scale-5) {
  color: var(--dark);
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(255,255,255,.46);
}
.dash-forecast-estimate {
  display: grid;
  justify-items: center;
  /* Separates the sparkle from the value it qualifies; the strip grows by the
     same 4px, which keeps the two stacked rows from reading as one glyph. */
  gap: var(--space-1);
  line-height: 1;
}
/* Phosphor sparkle marking a pre-publication estimate, in the heat-strip cells
   and in the legend key. Icons use the icon scale, not a text size. */
.dash-forecast-estimate-icon {
  font-size: var(--icon-size-sm);
  line-height: 1;
}
/* Estimated cells keep their band hue and position on the scale, but sit under
   a translucent veil of the card surface so an estimate reads as visibly
   lighter than a published value. The veil is a negative-z pseudo-element, so
   it covers the inline gradient without fading the value on top of it. */
.dash-forecast-cell.is-estimated {
  position: relative;
  isolation: isolate;
}
.dash-forecast-cell.is-estimated::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--card);
  opacity: var(--forecast-estimate-veil);
}
.dash-forecast-row:not(.dash-forecast-hours) .dash-forecast-cell:nth-child(2) {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.dash-forecast-row:not(.dash-forecast-hours) .dash-forecast-cell:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.dash-forecast-row:not(.dash-forecast-hours) .dash-forecast-cell:nth-child(2):last-child {
  border-radius: var(--radius-md);
}
.dash-forecast-cell.is-unscaled {
  background: var(--bg2);
  color: var(--muteddk);
  font-weight: 600;
}
.dash-forecast-cell.is-missing {
  background: var(--bg2);
  color: var(--muted);
  font-weight: 500;
}
.dash-forecast-cell.is-current {
  background-color: var(--chart-period-highlight);
}
.dash-forecast-legend {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--text-caption);
}
.dash-forecast-legend[hidden],
.dash-forecast-color-legend[hidden] { display: none; }
.dash-forecast-legend .dash-source { text-align: left; }
.dash-forecast-color-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.dash-forecast-legend-scale {
  display: block;
  width: calc(var(--space-8) * 3);
  height: var(--space-2);
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--forecast-windy-1) 0%,
    var(--forecast-windy-2) 18%,
    var(--forecast-windy-3) 38%,
    var(--forecast-windy-4) 62%,
    var(--forecast-windy-5) 78%,
    var(--forecast-windy-6) 92%,
    var(--forecast-windy-7) 100%
  );
}
/* Verdict (action) : icône colorée par niveau (modéré = gris). */
.dash-adv-verdict { display: flex; align-items: center; gap: var(--space-2); font-size: 1.3rem; font-weight: 600; color: var(--dark); margin-bottom: var(--space-3); }
.dash-adv-verdict i { font-size: 1.3rem; color: var(--muted); animation: dashIconIn .25s cubic-bezier(.2,0,0,1) both; }
.dash-adv-verdict.is-bas i    { color: var(--green); }
.dash-adv-verdict.is-modere i { color: var(--muted); }
.dash-adv-verdict.is-eleve i  { color: var(--red); }
.dash-adv-sub { font-size: .78rem; color: var(--muted); margin: 0 0 var(--space-3); }
/* Résumé quotidien, puis tuiles de prévision pour Demain. */
/* Hauteur réservée (~6 lignes) pour que la carte Conseil ne saute pas entre
   Aujourd'hui (texte court) et Demain (texte plus long). */
.dash-adv-day-summary { margin: 0; max-width: 52ch; color: var(--muteddk); font-size: .9rem; line-height: 1.5; min-height: 8.1rem; }
.dash-adv-stats { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.dash-adv-tile { flex: 1; background: var(--bg2); border-radius: var(--radius-md); padding: var(--space-3) var(--space-3); }
.dash-adv-tile-lbl { font-size: 12px; color: var(--muted); margin-bottom: var(--space-1); }
.dash-adv-tile-val { font-size: 1.2rem; font-weight: 600; color: var(--dark); font-variant-numeric: tabular-nums; }
.dash-adv-tile-val small { font-size: .66rem; font-weight: 500; color: var(--muted); margin-left: 3px; }
.dash-adv-tile.is-bas { background: color-mix(in srgb, var(--green) 8%, transparent); }
.dash-adv-tile.is-eleve { background: color-mix(in srgb, var(--red) 8%, transparent); }
.dash-adv-tile.is-bas .dash-adv-tile-lbl,
.dash-adv-tile.is-bas .dash-adv-tile-val,
.dash-adv-tile.is-bas .dash-adv-tile-val small { color: var(--green); }
.dash-adv-tile.is-eleve .dash-adv-tile-lbl,
.dash-adv-tile.is-eleve .dash-adv-tile-val,
.dash-adv-tile.is-eleve .dash-adv-tile-val small { color: var(--red); }
/* Graphe prix horaire */
.dash-adv-chart { position: relative; }
.dash-adv-bars { display: flex; align-items: flex-end; gap: var(--space-1); height: 92px; }
.dash-adv-bar { flex: 1; min-height: 4px; border-radius: 3px 3px 0 0; }
/* Heure courante : pas de fond, la barre garde sa couleur de prix et pulse via un
   léger fondu d'opacité par-dessus. */
@keyframes dashBarPulse { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }
.dash-adv-bar-now { position: relative; }
.dash-adv-bar-now::after { content: ''; position: absolute; inset: 0; border-radius: 3px 3px 0 0; background: var(--bg2); opacity: 0; animation: dashBarPulse 1.3s ease-in-out infinite; }
.dash-adv-hours { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: var(--space-1); }
/* Variante grossière (Demain : 4 créneaux) */
.dash-adv-blocks { display: flex; align-items: flex-end; gap: var(--space-2); height: 92px; }
.dash-adv-bblock { flex: 1; min-height: 6px; border-radius: 6px 6px 0 0; }
.dash-adv-blabels { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.dash-adv-blabels span { flex: 1; text-align: center; font-size: 11px; color: var(--muted); }
/* Légende sous le graphe (clé des couleurs), puis pied : astuce + CO2 discret. */
.dash-adv-legend-row { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.dash-adv-legend { display: inline-flex; gap: var(--space-2); }
.dash-adv-key { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 11px; color: var(--muted); }
.dash-adv-key i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.dash-adv-foot2 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgba(148,163,184,.22); }

.dash-advice-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.dash-adv-tip-txt { font-size: .8rem; color: var(--muteddk); }
.dash-adv-actions { display: flex; align-items: center; flex: 1 1 auto; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.dash-adv-actions-label { color: var(--muteddk); font-size: 12px; font-weight: 600; margin-right: 2px; }
.dash-adv-action { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: 1px solid rgba(32,194,142,.24); border-radius: var(--radius-sm); background: rgba(32,194,142,.08); color: var(--muteddk); font-size: 12px; line-height: 1.2; white-space: nowrap; }
.dash-adv-action strong { color: var(--green); font-weight: 600; }
.dash-adv-fallback { color: var(--muteddk); font-size: .8rem; }

/* — Consommation récente (cliquable) — */
.dash-clickable { cursor: pointer; text-decoration: none; transition: border-color .15s; }
.dash-clickable:hover { border-color: var(--teal); }
.dash-clickable:focus-visible { outline: 2px solid rgba(31,54,166,.45); outline-offset: 2px; }
.dash-link-cue { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--teal); }
.dash-link-cue i { font-size: .9rem; transition: transform .15s; }
.dash-clickable:hover .dash-link-cue i,
.dash-drivers .dash-link-cue:hover i { transform: translateX(3px); }
.app-link-card-symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.app-link-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s;
}
.app-link-card:hover { border-color: var(--teal); }
.app-link-card:focus-visible {
  outline: 2px solid rgba(31,54,166,.45);
  outline-offset: 2px;
}
.app-link-card--section-end,
.dash-usage-suggestion { margin-top: var(--space-5); }
.app-link-card__visual {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: 56%;
  height: 100%;
  color: var(--chart-consumption-bar-top);
  opacity: .055;
  pointer-events: none;
  shape-rendering: geometricPrecision;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000);
}
.app-link-card__visual--consumption { color: var(--chart-consumption-bar-top); }
.app-link-card__visual--price { color: var(--teal); }
.app-link-card__visual--timing { color: var(--chart-consumption-bar-top); }
.app-link-card__copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.app-link-card__copy p {
  max-width: 70ch;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-secondary);
  line-height: 1.5;
}
.app-link-card__action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--teal);
  font-size: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}
.app-link-card__action i {
  font-size: var(--icon-size-sm);
  transition: transform .15s;
}
.app-link-card:hover .app-link-card__action i {
  transform: translateX(var(--space-1));
}
.dash-recent-chart { position: relative; width: 100%; height: 304px; margin: var(--space-4) 0 0; }
.dash-recent-chart-state { display: flex; align-items: center; justify-content: center; }
.dash-recent-chart-state .dash-note { margin: 0; }
.dash-recent-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); color: var(--muted); font-size: 12px; }
.dash-recent-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dash-recent-key { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.dash-recent-key--context { background: linear-gradient(180deg, #233CB8, #6D82FF); }
.dash-recent-key--latest { background: linear-gradient(180deg, #6D82FF, #233CB8); }
.dash-recent-key--hc { background: rgba(226,232,240,.85); }
.dash-recent-key--spot { width: 14px; height: 2px; border-radius: 0; background: linear-gradient(90deg, var(--score-grade-a), var(--score-grade-b), var(--score-grade-c), var(--score-grade-d), var(--score-grade-e)); }
.dash-recent-key--scale { width: 28px; height: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--score-grade-a), var(--score-grade-b), var(--score-grade-c), var(--score-grade-d), var(--score-grade-e)); }
.dash-recent-key--none { background: linear-gradient(180deg, var(--mutedlt), var(--border2)); }
.dash-spark-row { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-top: var(--space-3); }
.dash-spark { flex: 1; min-height: 3px; background: linear-gradient(180deg, var(--mint), #5EE0C0); border-radius: 3px 3px 0 0; }
@media (max-width: 900px) {
  .dash-spark-row { height: 32px; gap: 3px; }
  .dash-spark { border-radius: 2px 2px 0 0; min-height: 2px; }
}
.dash-spark-days { display: flex; gap: 4px; margin-top: 6px; }
.dash-spark-days span { flex: 1; text-align: center; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Demo-only reference. It intentionally does not share existing .btn styles. */
.components-reference {
  display: grid;
  gap: var(--space-4);
  max-width: 720px;
}
.components-reference-size {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}
.components-reference-size-label { color: var(--muted); font-size: .82rem; line-height: 1.2; }
.components-reference-size-label span { display: block; margin-top: 2px; font-size: .72rem; }
.components-reference-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.components-reference-size--sm { --ref-height: var(--space-6); --ref-gap: var(--space-1); --ref-padding: 10px; --ref-radius: 8px; --ref-font-size: .875rem; --ref-eye-width: 18px; --ref-eye-height: 12px; --ref-check-size: 16px; --ref-eye-stroke: 1.75px; --ref-check-stroke: 2.25px; --ref-label-offset: -.25px; }
.components-reference-size--md { --ref-height: var(--space-7); --ref-gap: var(--space-1); --ref-padding: var(--space-3); --ref-radius: 10px; --ref-font-size: 1rem; --ref-eye-width: 22px; --ref-eye-height: 15px; --ref-check-size: 20px; --ref-eye-stroke: 2px; --ref-check-stroke: 2.5px; --ref-label-offset: -.5px; }
.components-reference-size--lg { --ref-height: var(--space-8); --ref-gap: var(--space-2); --ref-padding: var(--space-4); --ref-radius: 12px; --ref-font-size: 1.25rem; --ref-eye-width: 26px; --ref-eye-height: 18px; --ref-check-size: 24px; --ref-eye-stroke: 2.25px; --ref-check-stroke: 2.75px; --ref-label-offset: -.5px; }
.components-reference-button {
  height: var(--ref-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ref-gap);
  padding: 0 var(--ref-padding);
  border-radius: var(--ref-radius);
  font-family: var(--font-body);
  font-size: var(--ref-font-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}
.components-reference-button--preview {
  background: var(--card);
  border: 1px solid var(--border2);
  box-shadow: var(--shadow-sm);
  color: var(--dark);
}
.components-reference-button--deploy {
  background: var(--teal);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 0 0 1px var(--teal), 0 2px 4px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.16), inset 0 2px 42px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.26);
  color: var(--white);
}
.components-reference-eye {
  width: var(--ref-eye-width);
  height: var(--ref-eye-height);
  flex: 0 0 auto;
  color: var(--muted);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--ref-eye-stroke);
}
.components-reference-check {
  width: var(--ref-check-size);
  height: var(--ref-check-size);
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--ref-check-stroke);
}
.components-reference-button-label { display: inline-block; transform: translateY(var(--ref-label-offset)); }

@media (max-width: 580px) {
  .components-reference-size { grid-template-columns: 1fr; gap: var(--space-2); }
}

.dash-driver-track { height: 6px; background: var(--bg2); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.dash-driver-fill { height: 6px; background: var(--teal); border-radius: 3px; transition: width 1s ease; }

@media (max-width: 900px) {
  .app-chart-summary-group {
    gap: var(--space-3);
  }
  .app-card {
    --app-card-padding-inline: var(--space-4);
    --app-card-padding: var(--space-3) var(--space-4) var(--space-4);
    --app-card-section-gap: var(--space-3);
  }
  .app-card__header { min-height: var(--space-6); }
  .pdl-card-head { align-items: stretch; }
  .pdl-card-head .app-card__meta {
    width: 100%;
    text-align: start;
  }
  #page-reseau .dash-page-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
  .dash-primary, .dash-secondary { grid-template-columns: 1fr; gap: var(--space-4); }
  .dash-page-heading h1 { font-size: 1.55rem; }
  .dash-now-body {
    grid-template-areas:
      "copy"
      "metrics";
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  /* Sur mobile, les appareils deviennent une liste compacte dans la carte
     parente. Les créneaux restent immédiatement comparables, sans répéter une
     surface et un grand rayon autour de chaque ligne. */
  .dash-appliance-list {
    width: 100%;
    flex-direction: column;
    gap: 0;
    overflow-x: visible;
    padding-bottom: 0;
  }
  .dash-appliance-list .dash-data-tile {
    min-height: 0;
    padding: var(--space-4) 0;
    border-radius: 0;
    background: transparent;
  }
  .dash-appliance-list .dash-data-tile + .dash-data-tile {
    border-top: 1px solid var(--border);
  }
  .dash-data-tile--planning {
    flex: 0 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--space-2);
  }
  .dash-data-tile--planning .dash-data-tile__label { display: contents; }
  .dash-data-tile--planning .dash-data-tile__label-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-data-tile--planning .dash-data-tile__label-text,
  .dash-data-tile--planning .dash-data-tile__value {
    font-size: var(--text-body);
    line-height: 1.25;
  }
  .dash-data-tile--planning .dash-data-tile__reading {
    grid-column: 3;
    grid-row: 1;
  }
  .dash-data-tile--planning .dash-appliance-help {
    grid-column: 4;
    grid-row: 1;
    margin-left: var(--space-1);
  }
  /* Sur mobile, les trois KPI deviennent une liste de lecture compacte dans la
     carte « Maintenant ». Les données restent toutes visibles, mais trois
     surfaces imbriquées ne réservent plus chacune une hauteur de carte. */
  .dash-now-metrics--mobile-rows {
    grid-template-columns: 1fr;
    gap: 0;
    align-self: stretch;
    transform: none;
  }
  .dash-now-metrics--mobile-rows > .summary-metric {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: baseline;
    gap: var(--space-3);
    min-height: 0;
    padding: var(--space-3) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .dash-now-metrics--mobile-rows > .summary-metric + .summary-metric {
    border-top: 1px solid var(--border);
  }
  .dash-now-metrics--mobile-rows .summary-metric__value {
    justify-self: end;
    margin-top: 0;
  }
  .dash-forecast .dash-card-head { align-items: flex-start; flex-direction: column; }
  .dash-forecast-color-legend {
    display: grid;
    grid-template-columns: max-content minmax(var(--space-8),1fr) max-content;
  }
  .dash-forecast-legend-scale { width: 100%; }
  .dash-score-content--global { grid-template-columns: 1fr; gap: var(--space-3); }
  .dash-score-reading .dash-grade { height: var(--space-7); font-size: 1.3rem; }
  .dash-score-reading .dash-grade.is-active { height: calc(var(--space-8) + var(--space-4)); }
  .app-link-card {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .app-link-card__visual {
    width: 82%;
    height: 58%;
    opacity: .04;
  }
  .app-link-card__action {
    justify-self: start;
  }
  .dash-recent-chart { height: 208px; }
}
@media (max-width: 420px) {
  .dash-grade-scale { gap: var(--space-1); }
  .dash-score-reading .dash-grade { height: var(--space-6); font-size: 1.15rem; }
  .dash-score-reading .dash-grade.is-active { height: var(--space-8); }
}
@media (max-width: 360px) {
  .dash-data-tile--planning {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: var(--space-1);
  }
  .dash-data-tile--planning .dash-data-tile__icon {
    grid-column: 1;
    grid-row: 1;
  }
  .dash-data-tile--planning .dash-data-tile__label-text {
    grid-column: 2;
    grid-row: 1;
  }
  .dash-data-tile--planning .dash-data-tile__reading {
    grid-column: 2;
    grid-row: 2;
  }
  .dash-data-tile--planning .dash-appliance-help {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dash-adv-verdict i, .dash-adv-bar-now::after { animation: none; }
  .dash-driver-fill, .dash-link-cue i, .dash-grade, .app-link-card__action i { transition: none; }
}

/* Les compléments du tableau de bord mobile dédié ont été supprimés le 27/07
   avec le reste de #page-mobile. */
/* Réseau restait seul à une colonne sous 420px alors que Panneaux solaires,
   documenté comme la même coquille, gardait deux colonnes. Les valeurs sont
   courtes et tiennent à 146px : deux colonnes partout, les quatre indicateurs
   restent lisibles d'un coup sans repousser le premier graphique. */