/* ==========================================================================
   home-premium.css — Accueil v2 « premium » (01/11/2026)

   Chargé APRÈS home.css. home.css garde toute la mécanique (grille
   éditable, paliers fit-*, requêtes de conteneur, mode affichage, pages) ;
   ce fichier n'en change que l'habillage, d'où le préfixe `.home-body` qui
   lui donne la priorité sans `!important`.

   Direction validée par Steve (maquette v3) : fond noir profond (gris iOS
   en clair), grandes tuiles très arrondies façon widgets, icônes d'app en
   carrés dégradés, grands chiffres fins (Outfit), quelques widgets en
   couleur pleine (Maintenant, Départs, Trophées, Météo). Plus aucun halo
   flou en fond de page.

   Performances tablette (cf. passe du 26/10) : aucun `backdrop-filter` ni
   `filter: blur()` animé sur les tuiles ; les seules animations portent sur
   `transform` et `opacity`.
   ========================================================================== */

:root {
  --tile-bg: #ffffff;
  --tile-bg-2: #f2f2f7;
  --tile-line: rgba(0, 0, 0, .06);
  --tile-border: rgba(0, 0, 0, .04);
  --tile-hi: inset 0 0 0 0 transparent;
  --tile-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 36px -24px rgba(0, 0, 0, .3);
  --tile-shadow-hover: 0 2px 4px rgba(0, 0, 0, .05), 0 26px 50px -26px rgba(0, 0, 0, .38);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tile-bg: #1c1c1e;
    --tile-bg-2: #2c2c2e;
    --tile-line: rgba(255, 255, 255, .08);
    --tile-border: rgba(255, 255, 255, .06);
    --tile-hi: inset 0 1px 0 rgba(255, 255, 255, .05);
    --tile-shadow: 0 28px 56px -34px rgba(0, 0, 0, .95);
    --tile-shadow-hover: 0 34px 70px -30px rgba(0, 0, 0, 1);
  }
}
:root[data-theme="dark"] {
  --tile-bg: #1c1c1e;
  --tile-bg-2: #2c2c2e;
  --tile-line: rgba(255, 255, 255, .08);
  --tile-border: rgba(255, 255, 255, .06);
  --tile-hi: inset 0 1px 0 rgba(255, 255, 255, .05);
  --tile-shadow: 0 28px 56px -34px rgba(0, 0, 0, .95);
  --tile-shadow-hover: 0 34px 70px -30px rgba(0, 0, 0, 1);
}

/* --------------------------------------------------------------
   Page et en-tête
   -------------------------------------------------------------- */
.home-body { background: var(--bg); }
.home-body .home { max-width: 1160px; padding-top: 40px; }

.home-body .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: end;
  margin-bottom: 30px;
}
.home-body .hero > * { grid-column: 1; }
.home-body .hero-dot { display: none; }
.home-body .hero-line { margin-bottom: 6px; }
.home-body .hero-date {
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .06em;
  color: var(--text-3);
}
.home-body .hero-title {
  margin: 0 0 6px;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
/* Le prénom ne prend plus de dégradé : le blanc (ou le noir) suffit. */
.home-body .hero-accent {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}
.home-body .hero-sub { font-size: 1rem; color: var(--text-2); }

.hero-clock {
  grid-column: 2 !important;
  grid-row: 1 / span 3;
  align-self: end;
  font-family: var(--font-num);
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 200;
  line-height: .9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
@media (max-width: 560px) {
  .home-body .home { padding-top: 26px; }
  .hero-clock { font-size: 2.4rem; }
}

/* --------------------------------------------------------------
   Tuiles : la base commune
   -------------------------------------------------------------- */
.home-body .tile {
  border-radius: var(--r-widget);
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  box-shadow: var(--tile-hi), var(--tile-shadow);
}
/* Le voile coloré propre à chaque app (un halo flou dans le coin) disparaît :
   la couleur passe désormais par l'icône et par les données. */
.home-body .tile::after { display: none; }
.home-body .tile:hover {
  transform: translateY(-3px);
  border-color: var(--tile-border);
  box-shadow: var(--tile-hi), var(--tile-shadow-hover);
}
.home-body .tile.is-tiny { border-radius: 22px; }

/* Chargement : un simple balayage clair, sans flou sur le contenu. */
.home-body .tile.is-loading > *:not(.tile-bg) { filter: none; opacity: .35; }
.home-body .tile.is-loading::before {
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--text) 7%, transparent) 50%, transparent 70%);
  background-size: 220% 100%;
}

.home-body .tile-head { gap: 10px; }
.home-body .tile-name {
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Icône d'app : carré arrondi en dégradé de la couleur de la tuile. */
.home-body .tile-icon {
  border-radius: 28%;
  color: #fff;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 62%, #fff) 0%,
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 78%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 6px color-mix(in srgb, var(--accent) 30%, transparent);
}
.home-body .tile-icon svg { width: 58%; height: 58%; }
.home-body .tile:hover .tile-icon { transform: none; }

/* Grands chiffres : fins et ronds (Outfit). */
.home-body .tile-value,
.home-body .weather-temp,
.home-body .sport-hud__level-num,
.home-body .cd-days,
.home-body .next-due-price,
.home-body .streak-count,
.home-body .agenda-row-day,
.home-body .display-time,
.home-body .slideshow-clock {
  font-family: var(--font-num);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.home-body .tile-value { font-weight: 250; }

.home-body .tile-foot { color: var(--text-3); }
.home-body .tile-unit { color: var(--text-3); font-weight: 650; }

/* Pastilles (compteurs, profil, ville) : des capsules neutres. */
.home-body .hub-chip,
.home-body .profile-chip {
  background: var(--tile-bg-2);
  color: var(--text-2);
  font-weight: 750;
}
.home-body .carousel-dot { background: color-mix(in srgb, var(--text) 22%, transparent); }
.home-body .carousel-dot.is-active { background: var(--text); }

.home-body .hub-cta {
  background: var(--tile-bg-2);
  border: 0;
  border-radius: 16px;
  color: var(--text-2);
}

/* --------------------------------------------------------------
   Maintenant — pile de cartes en couleur pleine
   -------------------------------------------------------------- */
.home-body .tile-now {
  padding: 0;
  overflow: hidden;
  border: 0;
  color: var(--now-ink, #fff);
  background: var(--now-bg, linear-gradient(325deg, #5aa9ff 0%, #1a5cf0 40%, #0b2f9e 100%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 30px 60px -32px var(--now-glow, rgba(10, 132, 255, .6));
  transition: transform .28s var(--ease), box-shadow .5s var(--ease);
}
.home-body .tile-now:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 36px 70px -30px var(--now-glow, rgba(10, 132, 255, .7)); }

.now-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 2cqh, 10px);
  padding: clamp(16px, 7cqh, 28px) clamp(46px, 13cqw, 60px) clamp(16px, 7cqh, 26px) clamp(16px, 7cqw, 28px);
  min-width: 0;
}
.now-card.is-swapping { animation: now-in .5s var(--ease); }
@keyframes now-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.now-head { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.now-ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: clamp(28px, min(15cqh, 14cqw), 38px);
  height: clamp(28px, min(15cqh, 14cqw), 38px);
  border-radius: 30%;
  background: color-mix(in srgb, currentColor 20%, transparent);
}
.now-ico svg { width: 56%; height: 56%; }
.now-kicker {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(.68rem, min(5cqh, 4.5cqw), .82rem);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.now-big {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-family: var(--font-num);
  font-size: clamp(2rem, min(26cqh, 22cqw), 4.6rem);
  font-weight: 200;
  line-height: .9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.now-title {
  position: relative;
  z-index: 1;
  margin: auto 0 0;
  font-size: clamp(1.2rem, min(14cqh, 9.5cqw), 2.7rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: inherit;
  text-wrap: balance;
}
.now-big:not([hidden]) + .now-title { margin-top: 0; }
.now-text {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 34ch;
  font-size: clamp(.82rem, min(6cqh, 4.6cqw), 1.08rem);
  font-weight: 550;
  line-height: 1.4;
  opacity: .92;
}
.now-action {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: clamp(2px, 1.5cqh, 8px);
  padding: 9px 18px;
  border-radius: var(--r-full);
  background: var(--now-pill-bg, #fff);
  color: var(--now-pill-ink, #0b2f9e);
  font-size: .86rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.now-action:hover { filter: brightness(.95); }
.now-watermark {
  position: absolute;
  right: -9%;
  bottom: -16%;
  width: min(58cqh, 42cqw);
  height: min(58cqh, 42cqw);
  opacity: .14;
  pointer-events: none;
}
.now-watermark svg { width: 100%; height: 100%; }

.now-dots {
  position: absolute;
  right: 8px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.now-dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.now-dot::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 45%, transparent);
  transition: height .3s var(--ease), background .3s var(--ease);
}
.now-dot[aria-current="true"]::before { height: 20px; background: currentColor; }

@container tile (max-height: 200px) {
  .now-text { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .now-watermark { display: none; }
}
@container tile (max-height: 150px) {
  .now-text, .now-action { display: none; }
  .now-big { font-size: clamp(1.6rem, 26cqh, 2.4rem); }
}

/* --------------------------------------------------------------
   Abonnements
   -------------------------------------------------------------- */
.home-body .tile[data-widget="calendar"] .tile-metric { gap: 10px; }
/* La tuile prend la couleur du profil affiché (posée par home.js sur
   --accent), comme avant la v2 — mais en fond franc plutôt qu'en voile. */
.home-body .tile[data-widget="calendar"] {
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--accent) 42%, var(--tile-bg)) 0%,
      color-mix(in srgb, var(--accent) 16%, var(--tile-bg)) 52%,
      color-mix(in srgb, var(--accent) 6%, var(--tile-bg)) 100%);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .6s var(--ease), border-color .6s var(--ease);
}
.home-body .tile[data-widget="calendar"]:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.home-body .tile[data-widget="calendar"] .profile-chip {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
}
.home-body .tile[data-widget="calendar"] .next-due,
.home-body .tile[data-widget="calendar"] .all-clear {
  background: color-mix(in srgb, var(--tile-bg) 62%, transparent);
}
.home-body .tile[data-widget="calendar"] .spark-bar {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
.home-body .next-due,
.home-body .all-clear {
  background: var(--tile-bg-2);
  border: 0;
  border-radius: 18px;
}
.home-body .next-due-label { color: var(--text-3); font-weight: 750; }
.home-body .next-due-price { color: var(--text); font-weight: 400; }
.home-body .next-due-img { border-radius: 9px; }
.home-body .spark-bar {
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 22%, var(--tile-bg-2));
}
.home-body .spark-bar.now {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent));
}

/* --------------------------------------------------------------
   Agenda — liste façon calendrier du téléphone : barre de couleur,
   titre en gras, heure en gris. Le ciel décoratif ne revient que pour
   les anniversaires (avec les feux d'artifice).
   -------------------------------------------------------------- */
.home-body .tile[data-widget="agenda"] .agenda-sky { opacity: 0; }
.home-body .tile[data-widget="agenda"].is-party .agenda-sky { opacity: .55; }
.home-body .agenda-day-ghost,
.home-body .agenda-glyph { display: none; }
.home-body .agenda-row {
  position: relative;
  padding: 2px 0 2px 14px;
  background: none;
  border: 0;
  border-radius: 0;
}
.home-body .agenda-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 2px;
  background: var(--ev-color, var(--accent));
}
.home-body .agenda-row-badge {
  background: none;
  padding: 0;
  min-width: clamp(26px, min(14cqh, 14cqw), 40px);
}
.home-body .agenda-row-day { color: var(--text); font-weight: 400; }
.home-body .agenda-row.is-today .agenda-row-badge { background: none; }
.home-body .agenda-row.is-today .agenda-row-day { color: #ff453a; }
.home-body .agenda-row.is-today .agenda-row-month { color: #ff453a; }
.home-body .agenda-row-title { font-weight: 750; }
.home-body .agenda-bday,
.home-body .agenda-plan {
  background: var(--tile-bg-2);
  border: 0;
  border-radius: 16px;
}

/* --------------------------------------------------------------
   Photos et Divertissements : l'image fait la tuile
   -------------------------------------------------------------- */
.home-body .tile.has-photo,
.home-body .tile[data-widget="entertain"] { border: 0; }
.home-body .tile.has-bg::before {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--tile-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--tile-bg) 50%, transparent) 40%,
    transparent 72%);
}

/* --------------------------------------------------------------
   Notes — chaque note garde SA couleur (choisie à l'écriture, cf.
   NOTE_COLORS dans hub.js) : la tuile entière est le papier, avec le
   texte net de la v2. En sombre, le papier est un peu assombri par
   mélange (pas de `filter`, plus coûteux sur la tablette).
   -------------------------------------------------------------- */
.home-body .tile[data-widget="notes"] { padding: 0; border: 0; background: none; }
.home-body .note-stack { padding: 0; }
.home-body .note-card {
  border-radius: var(--r-widget);
  border: 0;
  transform: none;
  filter: none;
  padding: clamp(14px, 7cqh, 24px) clamp(16px, 7cqw, 24px);
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--note-color, #fde68a) 86%, #fff) 0%,
    var(--note-color, #fde68a) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 18px 34px -24px color-mix(in srgb, var(--note-color, #fde68a) 70%, #000);
}
:root[data-theme="dark"] .home-body .note-card {
  background: linear-gradient(158deg,
    color-mix(in srgb, var(--note-color, #fde68a) 92%, #000) 0%,
    color-mix(in srgb, var(--note-color, #fde68a) 80%, #000) 100%);
  filter: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home-body .note-card {
    background: linear-gradient(158deg,
      color-mix(in srgb, var(--note-color, #fde68a) 92%, #000) 0%,
      color-mix(in srgb, var(--note-color, #fde68a) 80%, #000) 100%);
    filter: none;
  }
}
.home-body .note-card::after { display: none; }
.home-body .note-card::before {
  content: 'Notes';
  display: block;
  margin-bottom: clamp(4px, 3cqh, 12px);
  font-size: clamp(.72rem, min(5.5cqh, 5.5cqw), .9rem);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(43, 36, 24, .55);
}
.home-body .note-body { align-items: flex-start; }
.home-body .note-text {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.28;
  color: #2b2418;
}
.home-body .note-by {
  font-style: normal;
  font-weight: 700;
  color: rgba(43, 36, 24, .6);
}
.home-body .note-by::before { content: '— '; }
/* Aucune note : un papier fantôme neutre, aux couleurs du thème. */
.home-body .note-card.is-ghost,
:root[data-theme="dark"] .home-body .note-card.is-ghost {
  background: var(--tile-bg);
  border: 1px dashed color-mix(in srgb, var(--text) 18%, transparent);
  box-shadow: var(--tile-hi), var(--tile-shadow);
  text-align: left;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home-body .note-card.is-ghost { background: var(--tile-bg); }
}
.home-body .note-card.is-ghost::before { color: #ff9f0a; }
.home-body .note-card.is-ghost .note-text { color: var(--text-3); font-weight: 600; }

/* --------------------------------------------------------------
   Courses — façon Rappels : ronds à cocher, rayons en petites capitales
   -------------------------------------------------------------- */
.home-body .courses-cat { color: var(--text-3); }
.home-body .courses-item::before {
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
  background: none;
}
.home-body .tile[data-widget="courses"] .hub-chip {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

/* --------------------------------------------------------------
   Entretien
   -------------------------------------------------------------- */
.home-body .upkeep-row {
  background: var(--tile-bg-2);
  border: 0;
  border-radius: 14px;
}
.home-body .upk-gauge { background: color-mix(in srgb, var(--text) 10%, transparent); }

/* --------------------------------------------------------------
   Départs — tuile en couleur pleine, anneau blanc, grand nombre fin
   -------------------------------------------------------------- */
.home-body .tile[data-widget="countdown"] {
  border: 0;
  color: #fff;
  background: linear-gradient(325deg,
    color-mix(in srgb, var(--accent) 40%, #5ac8fa) 0%,
    var(--accent) 45%,
    color-mix(in srgb, var(--accent) 60%, #001a55) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 30px 60px -34px color-mix(in srgb, var(--accent) 70%, transparent);
}
.home-body .tile[data-widget="countdown"] .tile-name { color: #fff; }
.home-body .tile[data-widget="countdown"] .tile-icon {
  background: rgba(255, 255, 255, .2);
  box-shadow: none;
}
.home-body .tile[data-widget="countdown"] .cd-item { --accent: #fff !important; }
.home-body .tile[data-widget="countdown"] .ring-bg { stroke: rgba(255, 255, 255, .25); }
.home-body .tile[data-widget="countdown"] .ring-fill { stroke: #fff; }
.home-body .tile[data-widget="countdown"] .cd-days,
.home-body .tile[data-widget="countdown"] .cd-label { color: #fff; }
.home-body .tile[data-widget="countdown"] .cd-unit,
.home-body .tile[data-widget="countdown"] .cd-empty { color: rgba(255, 255, 255, .8); }
.home-body .tile[data-widget="countdown"] .cd-days { font-weight: 200; }
.home-body .tile[data-widget="countdown"] .hub-cta { background: rgba(255, 255, 255, .16); color: #fff; }

/* --------------------------------------------------------------
   Électricité — sobre : plus d'éclair ni de circuit en fond
   -------------------------------------------------------------- */
.home-body .energy-fx { display: none; }
.home-body .energy-chart-bg { opacity: .55; }
.home-body .energy-period { color: #ff9f0a; }
.home-body .energy-bar { border-radius: 5px; }
.home-body .tempo-chip {
  border: 0;
  background: var(--tile-bg-2);
  border-radius: var(--r-full);
}

/* Couleur Tempo du jour (data-tempo posé par paintEnergyTempo, home.js) :
   mêmes dégradés que la carte Tempo du widget Maintenant et que la maquette.
   Tout le contenu de la tuile suit --accent et --text : on les retourne en
   blanc (en noir un jour blanc), la courbe de conso reste visible par-dessus. */
.home-body .tile[data-widget="energy"][data-tempo] {
  --accent: #ffffff !important;
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, .84);
  --text-3: rgba(255, 255, 255, .66);
  --tile-bg-2: rgba(255, 255, 255, .17);
  --surface-2: rgba(255, 255, 255, .17);
  color: #fff;
  border-color: transparent;
}
.home-body .tile[data-widget="energy"][data-tempo="rouge"] {
  background: linear-gradient(325deg, #ff5a4f 0%, #d4201a 38%, #9a0f17 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 30px 60px -34px rgba(255, 59, 48, .6);
}
.home-body .tile[data-widget="energy"][data-tempo="bleu"] {
  background: linear-gradient(325deg, #5aa9ff 0%, #1a5cf0 38%, #0b2f9e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 30px 60px -34px rgba(10, 132, 255, .6);
}
.home-body .tile[data-widget="energy"][data-tempo="blanc"] {
  --accent: #1c1c1e !important;
  --text: #1c1c1e;
  --text-2: rgba(28, 28, 30, .78);
  --text-3: rgba(28, 28, 30, .58);
  --tile-bg-2: rgba(0, 0, 0, .07);
  --surface-2: rgba(0, 0, 0, .07);
  color: #1c1c1e;
  background: linear-gradient(325deg, #ffffff 0%, #e4e7ee 42%, #b8bfcc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 30px 60px -34px rgba(255, 255, 255, .28);
}
.home-body .tile[data-widget="energy"][data-tempo] .tile-icon {
  background: rgba(255, 255, 255, .22);
  color: #fff;
  box-shadow: none;
}
.home-body .tile[data-widget="energy"][data-tempo="blanc"] .tile-icon { background: rgba(0, 0, 0, .08); color: #1c1c1e; }
.home-body .tile[data-widget="energy"][data-tempo] .energy-period { color: var(--text-2); }
/* La courbe, plus franche sur la couleur. */
.home-body .tile[data-widget="energy"][data-tempo] .energy-chart-bg { opacity: .72; }
.home-body .tile[data-widget="energy"][data-tempo] .energy-chart-bg.is-empty { opacity: 0; }
/* Tendance : vert / rouge illisibles sur le rouge Tempo → pastille neutre, le signe suffit. */
.home-body .tile[data-widget="energy"][data-tempo] .energy-trend.up,
.home-body .tile[data-widget="energy"][data-tempo] .energy-trend.down,
.home-body .tile[data-widget="energy"][data-tempo] .energy-trend.flat {
  background: var(--tile-bg-2);
  color: var(--text);
}
/* Pastille du jour rouge sur fond rouge : un liseré la détache. */
.home-body .tile[data-widget="energy"][data-tempo] .tempo-dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }
.home-body .tile[data-widget="energy"][data-tempo="blanc"] .tempo-dot { box-shadow: 0 0 0 1.5px rgba(28, 28, 30, .5); }

/* --------------------------------------------------------------
   Météo — garde ses ciels animés, avec les arrondis des widgets
   -------------------------------------------------------------- */
.home-body .tile.has-wx { border: 0; }
.home-body .weather-temp { font-weight: 200; }
.home-body .weather-part {
  border-radius: 14px;
  border: 0;
  background: rgba(255, 255, 255, .14);
}

/* --------------------------------------------------------------
   Trophées — laque sombre et or, avec l'image du dernier trophée en
   fond (rétablie à la demande de Steve, 01/11/2026).
   -------------------------------------------------------------- */
.home-body .trophy-bg.is-visible { opacity: .55; }
.home-body .tile[data-widget="trophies"] {
  border: 1px solid rgba(255, 214, 10, .14);
  background: radial-gradient(120% 90% at 100% 0%, rgba(255, 190, 40, .32), rgba(255, 190, 40, 0) 62%), #17120a;
  color: #fff3d1;
}
.home-body .tile[data-widget="trophies"]::before {
  background: linear-gradient(to top, rgba(23, 18, 10, .94) 0%, rgba(23, 18, 10, .5) 40%, transparent 72%);
}
.home-body .tile[data-widget="trophies"] .tile-name,
.home-body .tile[data-widget="trophies"] .trophy-name { color: #ffe08a; }
.home-body .tile[data-widget="trophies"] .tile-foot,
.home-body .tile[data-widget="trophies"] .trophy-game,
.home-body .tile[data-widget="trophies"] .trophy-detail,
.home-body .tile[data-widget="trophies"] .trophy-date,
.home-body .tile[data-widget="trophies"] .trophy-label { color: rgba(255, 243, 209, .72); }
.home-body .tile[data-widget="trophies"] .trophy-last {
  background: rgba(255, 255, 255, .06);
  border: 0;
  border-radius: 18px;
}
.home-body .tile[data-widget="trophies"] .tile-icon {
  background: linear-gradient(160deg, #ffd36b, #d48800);
}

/* --------------------------------------------------------------
   Sport — fond noir, trois anneaux concentriques façon montre
   -------------------------------------------------------------- */
.home-body .tile.sport-hud { background: #0b0b10; border-color: rgba(255, 255, 255, .08); color: #f5f5f7; }
:root[data-theme="light"] .home-body .tile.sport-hud { background: #0b0b10; }
.home-body .sport-hud__particles { display: none; }
.home-body .sport-hud .tile-name,
.home-body .sport-hud .sport-hud__level-num { color: #fff; }
.home-body .sport-hud .sport-hud__level-pseudo,
.home-body .sport-hud .sport-hud__xptext,
.home-body .sport-hud .tile-foot,
.home-body .sport-hud .pedo-row__label,
.home-body .sport-hud .pedo-row__goal,
.home-body .sport-hud .pedo-row__fresh { color: rgba(235, 235, 245, .62); }
.home-body .sport-hud .pedo-row__count { color: #fff; }
.home-body .sport-hud__xpbar { background: rgba(255, 255, 255, .1); }
.home-body .sport-hud__xpbar-fill { background: linear-gradient(90deg, #40c8ff, #6e2bff); box-shadow: 0 0 10px rgba(64, 200, 255, .5); }

/* Les trois anneaux du jour, emboîtés au lieu d'être alignés : extérieur =
   calories brûlées, milieu = activité, intérieur = eau. Même SVG qu'avant
   (cercle r=18 dans 44×44), seule la mise en page change : les trois SVG
   partagent la même case de la grille, à 100 %, 68 % et 36 % de la taille.
   Le trait est épaissi à mesure que l'anneau rétrécit (4,8 → 7,1 → 13,3)
   pour garder la même épaisseur à l'écran, avec un petit jour entre deux
   anneaux. Libellés et valeurs passent dans une légende à droite. */
.home-body .sport-hud__rings {
  --ring: clamp(64px, min(46cqh, 40cqw), 132px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: repeat(6, auto);
  align-content: center;
  align-items: center;
  column-gap: clamp(10px, 4cqw, 18px);
  row-gap: 0;
}
.home-body .sport-hud__ring { display: contents; }
.home-body .sport-hud__ring-svgwrap {
  grid-column: 1;
  grid-row: 1 / -1;
  justify-self: center;
  align-self: center;
  width: var(--ring);
  height: var(--ring);
}
.home-body .sport-hud__ring--activite .sport-hud__ring-svgwrap { width: calc(var(--ring) * .682); height: calc(var(--ring) * .682); }
.home-body .sport-hud__ring--hydro .sport-hud__ring-svgwrap    { width: calc(var(--ring) * .364); height: calc(var(--ring) * .364); }
.home-body .sport-hud__ring-svgwrap .tile-ring { overflow: visible; }
.home-body .sport-hud__ring--cal .ring-bg,
.home-body .sport-hud__ring--cal .ring-fill { stroke-width: 4.8; }
.home-body .sport-hud__ring--activite .ring-bg,
.home-body .sport-hud__ring--activite .ring-fill { stroke-width: 7.1; }
.home-body .sport-hud__ring--hydro .ring-bg,
.home-body .sport-hud__ring--hydro .ring-fill { stroke-width: 13.3; }
.home-body .sport-hud__ring--cal .ring-fill      { stroke: #ff6b1a; }
.home-body .sport-hud__ring--cal .ring-bg        { stroke: rgba(255, 107, 26, .22); }
.home-body .sport-hud__ring--activite .ring-fill { stroke: #32d74b; }
.home-body .sport-hud__ring--activite .ring-bg   { stroke: rgba(50, 215, 75, .22); }
.home-body .sport-hud__ring--hydro .ring-fill    { stroke: #40c8ff; }
.home-body .sport-hud__ring--hydro .ring-bg      { stroke: rgba(64, 200, 255, .22); }
.home-body .sport-hud__ring-icon { display: none; }
.home-body .sport-hud__ring-label,
.home-body .sport-hud__ring-value { grid-column: 2; justify-self: start; text-align: left; min-width: 0; }
.home-body .sport-hud__ring-label {
  margin-top: 4px;
  font-size: clamp(.62rem, min(5cqh, 5cqw), .8rem);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
}
.home-body .sport-hud__ring-value {
  font-family: var(--font-num);
  font-size: clamp(.8rem, min(7cqh, 6.5cqw), 1.15rem);
  font-weight: 400;
  color: #fff;
}
.home-body .sport-hud__ring--cal .sport-hud__ring-label      { grid-row: 1; color: #ff8a4c; }
.home-body .sport-hud__ring--cal .sport-hud__ring-value      { grid-row: 2; }
.home-body .sport-hud__ring--activite .sport-hud__ring-label { grid-row: 3; color: #5fe07a; }
.home-body .sport-hud__ring--activite .sport-hud__ring-value { grid-row: 4; }
.home-body .sport-hud__ring--hydro .sport-hud__ring-label    { grid-row: 5; color: #6fd6ff; }
.home-body .sport-hud__ring--hydro .sport-hud__ring-value    { grid-row: 6; }
@container tile (max-width: 210px) {
  .home-body .sport-hud__rings { grid-template-columns: auto; justify-content: center; }
  .home-body .sport-hud__ring-label,
  .home-body .sport-hud__ring-value { display: none !important; }
}

/* --------------------------------------------------------------
   Sport — séances et semaine : sobres
   -------------------------------------------------------------- */
.home-body .sport-seances__col,
.home-body .sport-hud__duo-col {
  border-radius: 18px;
  border-color: transparent;
  background: var(--tile-bg-2);
}
.home-body .sport-hud .sport-hud__duo-col { background: rgba(255, 255, 255, .06); }
.home-body .sport-semaine__bar { border-radius: 6px; }
.home-body .sport-semaine__col.is-today .sport-semaine__bar { background: linear-gradient(180deg, #40c8ff, #6e2bff); }

/* --------------------------------------------------------------
   Quizzomany — en bandeau d'une rangée, le nom et la phrase restent
   affichés (sinon il ne restait qu'une icône seule dans un grand cadre).
   -------------------------------------------------------------- */
@container tile (max-height: 95px) and (min-width: 380px) {
  .home-body [data-widget="quizzomany"] .tile-name { display: inline; }
  .home-body [data-widget="quizzomany"] .tile-icon { width: 26px; height: 26px; }
  .home-body #quizzDetail { display: block !important; }
}
.home-body .tile[data-widget="quizzomany"] .tile-tag {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

/* ==========================================================================
   MODE AFFICHAGE
   ========================================================================== */

/* En-tête du mur : heure fine en blanc, plus de texte en dégradé. */
.home-body .display-time {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
  font-weight: 200;
}
.home-body .display-space {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
  font-weight: 800;
}
.home-body .display-date { color: var(--text-2); font-weight: 700; text-transform: none; }
body.is-display .hero-clock,
body.is-display-preview .hero-clock { display: none; }

/* Taille de l'horloge (réglage « Horloge ») et horloge masquée. */
body.is-display.clock-xl .display-time { font-size: clamp(3.4rem, 11vw, 8.5rem); }
body.is-display.clock-sm .display-time { font-size: clamp(2rem, 5vw, 3.6rem); }
body.is-display.clock-off .display-clock { display: none !important; }
body.is-display.clock-off .hero { display: none; }

/* Fond « photo du hub » : la photo couvre l'écran, assombrie pour que les
   tuiles restent lisibles. Statique (pas de flou) : rien à recalculer. */
.display-wallpaper {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: none;
  background: #000 center / cover no-repeat;
}
.display-wallpaper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
body.is-display.wall-photo .display-wallpaper { display: block; }
body.is-display.wall-photo .tile:not(.tile-now):not([data-widget="countdown"]):not(.has-wx):not(.sport-hud):not([data-widget="trophies"]) {
  background: rgba(28, 28, 30, .82);
}
body.is-display.wall-noir { background: #000; }
/* Fond « noir » ou « photo » du mode affichage : le ciel/la trame du thème
   sombre (body::before, theme.css) s'efface. */
body.is-display.wall-noir::before,
body.is-display.wall-photo::before { display: none !important; }

/* Liseré Tempo de demain (réglage), lisible de l'autre bout de la pièce. */
.display-tempo-band {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 905;
  display: none;
  align-items: center;
  justify-content: flex-end;
  height: 26px;
  padding: 0 22px;
  background: var(--band, #ef4444);
  color: var(--band-ink, #fff);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.is-display.has-tempo-band .display-tempo-band { display: flex; }
body.is-display.has-tempo-band .home { padding-bottom: calc(clamp(14px, 2.2vw, 30px) + 26px); }

/* --- Style « StandBy » : horloge géante, ce qui vient, photo --- */
.display-standby {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(24px, 4vw, 56px);
  background: #000;
  color: #f5f5f7;
}
body.is-display.display-standby-on .display-standby { display: grid; }
body.is-display.display-standby-on .home { visibility: hidden; }
body.is-display.display-standby-on.has-tempo-band .display-standby { padding-bottom: calc(clamp(24px, 4vw, 56px) + 26px); }

.sb-left { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sb-date {
  font-size: clamp(1.1rem, 2.2vw, 1.9rem);
  font-weight: 750;
  color: rgba(235, 235, 245, .7);
}
.sb-clock {
  margin-top: .1em;
  font-family: var(--font-num);
  font-size: clamp(5rem, 19vw, 17rem);
  font-weight: 200;
  line-height: .9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.sb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(12px, 2.4vh, 26px); }
.sb-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .6em 1.1em .6em .9em;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .1);
  font-size: clamp(.95rem, 1.6vw, 1.35rem);
  font-weight: 750;
}
.sb-chip i {
  width: .7em;
  height: .7em;
  border-radius: 50%;
  background: var(--c, #8e8e93);
  box-shadow: 0 0 .8em var(--c, transparent);
}
.sb-next {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 16px);
  padding: clamp(16px, 2.4vw, 28px);
  border-radius: 30px;
  background: #1c1c1e;
}
.sb-next:empty { display: none; }
.sb-next-title {
  font-size: clamp(.75rem, 1.1vw, .95rem);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #ff453a;
}
.sb-ev { display: flex; gap: 14px; min-width: 0; }
.sb-ev i { width: 5px; border-radius: 3px; background: var(--c, #0a84ff); flex-shrink: 0; }
.sb-ev b {
  display: block;
  color: #fff;
  font-size: clamp(1.05rem, 1.9vw, 1.7rem);
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-ev span { font-size: clamp(.85rem, 1.3vw, 1.15rem); color: rgba(235, 235, 245, .65); }
.sb-photo {
  position: relative;
  min-height: 0;
  border-radius: 38px;
  overflow: hidden;
  background: #1c1c1e center / cover no-repeat;
}
.sb-photo .xf-layer { background-position: center; }
.sb-photo:not(.has-photo) { display: none; }
body.is-display.display-standby-on .display-standby:has(.sb-photo:not(.has-photo)) { grid-template-columns: minmax(0, 1fr); }
.sb-caption {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 80px 28px 24px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
}
.sb-caption strong { font-size: clamp(1.1rem, 2vw, 1.7rem); font-weight: 800; }
.sb-caption span { font-size: clamp(.85rem, 1.3vw, 1.1rem); color: rgba(255, 255, 255, .85); }
.sb-caption strong:empty + span:empty { display: none; }

/* --- Veilleuse : la nuit, seule une horloge sombre reste à l'écran --- */
.display-night {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #000;
  color: var(--night-ink, #b8281f);
}
body.is-display.is-night .display-night { display: flex; }
body.is-display.is-night .display-tempo-band { opacity: .3; }
.dn-clock {
  font-family: var(--font-num);
  font-size: clamp(5rem, 27vw, 24rem);
  font-weight: 100;
  line-height: .9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.dn-line {
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .02em;
}
.dn-hint {
  position: absolute;
  bottom: clamp(18px, 4vh, 40px);
  font-size: clamp(.8rem, 1.2vw, 1.05rem);
  font-weight: 700;
  opacity: .8;
}

/* --- Diaporama : horloge fine, même langage --- */
.home-body .slideshow-clock { font-weight: 200; }

/* ==========================================================================
   RÉGLAGES DU MODE AFFICHAGE (panneau ⚙️)
   ========================================================================== */
.dsp-styles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.dsp-style {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text-2);
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}
.dsp-style[aria-pressed="true"] { border-color: var(--primary); color: var(--text); box-shadow: inset 0 0 0 1px var(--primary); }
.dsp-mini {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 7px;
  background: #000;
  overflow: hidden;
}
.dsp-mini i { position: absolute; border-radius: 3px; background: #2c2c2e; }
.dsp-mini b { position: absolute; font-family: var(--font-num); font-weight: 300; color: #fff; line-height: 1; }
.dsp-label {
  display: block;
  margin-top: 4px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-3);
}
.dsp-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 3px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.dsp-seg button {
  padding: 7px 4px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--text-2);
  font-family: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}
.dsp-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.dsp-times { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-3); }
.dsp-times input[type="time"] { flex: 1; min-width: 0; }
.dsp-colors { display: flex; gap: 8px; }
.dsp-color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  background: var(--c);
  cursor: pointer;
}
.dsp-color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--primary); }
.settings-panel:has(.dsp-styles) { width: 280px; }

/* Pages qui défilent (style Widgets) : widgets + pages Photos / StandBy glissées entre elles */
.dsp-seq { display: flex; flex-direction: column; gap: 6px; }
.dsp-seq-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.dsp-seq-row.is-extra { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.dsp-seq-row .dsp-mini { width: 46px; border-radius: 5px; }
.dsp-seq-row .dsp-mini b { transform: scale(.6); transform-origin: left top; }
.dsp-seq-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dsp-seq-txt b { font-size: .8rem; font-weight: 700; color: var(--text); }
.dsp-seq-txt small { font-size: .7rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsp-seq-tools { display: flex; gap: 2px; }
.dsp-seq-tools button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.dsp-seq-tools button:hover:not(:disabled) { color: var(--text); background: var(--surface-3); }
.dsp-seq-tools button:disabled { opacity: .3; cursor: default; }
.dsp-seq-tools [data-seq-del]:hover { color: var(--danger) !important; }
.dsp-seq-add { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dsp-seq-add button {
  padding: 8px 6px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: none;
  color: var(--primary);
  font-family: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}
.dsp-seq-add button:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }

/* Arrivée d'une page Photos / StandBy dans la rotation : fondu (opacité seule,
   rien de coûteux pour la tablette). */
body.is-display.display-photos .display-slideshow,
body.is-display.display-standby-on .display-standby { animation: dsp-page-in .7s var(--ease) both; }
@keyframes dsp-page-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.is-display.display-photos .display-slideshow,
  body.is-display.display-standby-on .display-standby { animation: none; }
}

/* ==========================================================================
   Cardio en direct sur la tablette (13/11/2026) — cf. cardio-mural.js.
   À droite de l'heure en mode affichage (Widgets), sous l'heure en StandBy. Une seule animation
   (transform du cœur), pas de flou ni de backdrop-filter : la tablette reste fluide.
   ========================================================================== */
.cardio-mural { display: none; gap: 12px; flex-wrap: wrap; align-self: center; margin-left: auto; }
body.is-display .cardio-mural:not([hidden]) { display: flex; }
.cm-capsule {
  display: grid; grid-template-columns: auto auto clamp(190px, 22vw, 320px); align-items: center; gap: 14px;
  padding: 10px 18px 10px 14px; border-radius: 22px;
  background: color-mix(in srgb, var(--cm-couleur) 16%, var(--surface, #111827));
  border: 2px solid color-mix(in srgb, var(--cm-couleur) 70%, transparent);
  box-shadow: 0 10px 30px -14px var(--cm-couleur);
  transition: background-color .6s ease, border-color .6s ease;
  animation: cm-arrivee .5s ease-out;
}
@keyframes cm-arrivee { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.cm-coeur { width: clamp(34px, 4vw, 52px); height: auto; fill: var(--cm-couleur); transform-origin: 50% 55%;
  filter: drop-shadow(0 0 10px var(--cm-couleur)); }
/* Sans tracé (navigateur sans canvas) : battement régulier au rythme du bpm. */
.cm-capsule:not(:has(.cm-ecg)) .cm-coeur { animation: cm-battement var(--cm-battement, .8s) ease-out infinite; }
@keyframes cm-battement { 0% { transform: scale(1); } 14% { transform: scale(1.22); } 28% { transform: scale(1); } 42% { transform: scale(1.12); } 70%, 100% { transform: scale(1); } }
.cm-chiffres { display: flex; flex-direction: column; min-width: 0; }
.cm-bpm { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.cm-bpm strong { font-family: var(--font-num, inherit); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--text, #fff); }
.cm-bpm small { font-size: clamp(.8rem, 1.2vw, 1rem); font-weight: 700; color: var(--text-2, rgba(235, 235, 245, .7)); }
.cm-zone { margin-top: 4px; font-size: clamp(.78rem, 1.2vw, 1rem); font-weight: 750; color: var(--cm-couleur); white-space: nowrap; }
.cm-courbe { width: 100%; height: clamp(40px, 6vw, 64px); overflow: visible; }
.cm-courbe .cm-bande { fill: color-mix(in srgb, #22c55e 18%, transparent); }
.cm-courbe polyline { fill: none; stroke: var(--cm-couleur); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Tracé ECG (passe 77) : écran de moniteur — fond sombre, grille fine (1 carreau = 0,2 s), une
   grosse case toutes les 5. Le trait est dessiné par cardio-mural.js, en balayage. */
.cm-ecg {
  display: block; width: 100%; height: clamp(58px, 8vw, 92px); border-radius: 12px;
  --cm-grille: color-mix(in srgb, var(--cm-couleur) 22%, transparent);
  --cm-grille-fine: color-mix(in srgb, var(--cm-couleur) 9%, transparent);
  background-color: color-mix(in srgb, var(--cm-couleur) 6%, #05080d);
  background-image:
    linear-gradient(var(--cm-grille) 1px, transparent 1px),
    linear-gradient(90deg, var(--cm-grille) 1px, transparent 1px),
    linear-gradient(var(--cm-grille-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--cm-grille-fine) 1px, transparent 1px);
  background-size: 25% 50%, 25% 50%, 5% 10%, 5% 10%;
  background-position: -1px -1px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cm-couleur) 25%, transparent), inset 0 0 18px rgba(0, 0, 0, .55);
}

/* StandBy : fond noir, la capsule se place sous l'heure géante. */
.cardio-mural--sb { margin: clamp(10px, 2vh, 22px) 0 0; align-self: flex-start; }
.cardio-mural--sb .cm-capsule { background: color-mix(in srgb, var(--cm-couleur) 18%, #000); }
.cardio-mural--sb .cm-bpm strong { color: #fff; }
.cardio-mural--sb .cm-bpm small { color: rgba(235, 235, 245, .7); }

@media (prefers-reduced-motion: reduce) { .cm-coeur, .cm-capsule { animation: none; } }
/* À plusieurs en séance : capsules plus compactes, pour rester sur la ligne de l'heure. */
.cardio-mural:has(.cm-capsule + .cm-capsule) .cm-capsule { grid-template-columns: auto auto clamp(120px, 13vw, 190px); gap: 10px; padding: 8px 14px 8px 10px; }
.cardio-mural:has(.cm-capsule + .cm-capsule) .cm-bpm strong { font-size: clamp(1.9rem, 3.8vw, 3rem); }
.cardio-mural:has(.cm-capsule + .cm-capsule) .cm-coeur { width: clamp(28px, 3vw, 40px); }