/* Scènes Feelings et Routine : données illustratives, aucun contrôle métier. */
.art-daily-screen { display: flex; flex-direction: column; align-items: center; width: 100%; height: 400px; padding: 21px 25px 18px; color: var(--ink); }
.art-daily-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; color: var(--mid); font-size: 11px; font-weight: 600; line-height: 1.4; }
.art-daily-topline > :first-child { color: var(--accent); }
.art-daily-heading { margin-top: 14px; font-size: 23px; line-height: 1.2; letter-spacing: -.04em; text-align: center; }
.art-daily-footnote { margin-top: auto; color: var(--mid); font-size: 11px; line-height: 1.5; text-align: center; }
.art-daily-action { display: flex; align-items: center; justify-content: center; gap: 15px; width: min(100%, 280px); min-height: 44px; margin-top: auto; border: 0; border-radius: 999px; background: var(--accent); color: var(--product-on); font: 600 13px/1.25 Manrope, system-ui, sans-serif; cursor: pointer; }
.art-daily-action:hover { filter: brightness(.94); }
.art-daily-action svg { width: 18px; height: 18px; fill: currentColor; }

.demo-feelings { --accent: var(--feelings); --soft: var(--feelings-soft); }
.demo-feelings .art-daily-screen { background: var(--soft); }
.art-daily-wheel { flex: 0 0 auto; width: 272px; height: 272px; margin-top: 8px; overflow: visible; }
.art-daily-sector { stroke: var(--soft); stroke-width: 1.5; }
.art-daily-sector-0 { fill: var(--petal-two); }
.art-daily-sector-1 { fill: var(--petal-three); }
.art-daily-sector-2 { fill: var(--petal-four); }
.art-daily-sector-3 { fill: var(--petal-five); }
.art-daily-sector-4 { fill: var(--petal-six); }
.art-daily-sector-5 { fill: color-mix(in srgb, var(--petal-six) 70%, var(--petal-five)); }
.art-daily-sector-6 { fill: var(--petal-one); }
.art-daily-sector-7 { fill: color-mix(in srgb, var(--petal-two) 65%, var(--petal-one)); }
.art-daily-sector-selected { stroke: var(--accent); stroke-width: 2.8; }
.art-daily-wheel-label { fill: var(--ink); font: 600 10px Manrope, system-ui, sans-serif; text-anchor: middle; dominant-baseline: middle; }
.art-daily-wheel-center { fill: var(--surface); }
.art-daily-wheel-caption, .art-daily-wheel-value { fill: var(--ink); text-anchor: middle; font-family: Manrope, system-ui, sans-serif; }
.art-daily-wheel-caption { fill: var(--mid); font-size: 11px; }
.art-daily-wheel-value { font-size: 23px; font-weight: 700; letter-spacing: -1px; }
.art-daily-wheel-dot { fill: var(--accent); }
.art-daily-relation { flex: 0 0 auto; width: 190px; height: 90px; margin-top: 7px; overflow: visible; }
.art-daily-relation-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.art-daily-relation-link { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: .38; }
.art-daily-relation-person { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.art-daily-relation-point { fill: var(--accent); }
.art-daily-emotion { display: grid; justify-items: center; gap: 2px; }
.art-daily-emotion > span { color: var(--mid); font-size: 12px; }
.art-daily-emotion > strong { color: var(--accent); font-size: 34px; line-height: 1.15; letter-spacing: -.05em; }
.art-daily-expression { width: 100%; margin-top: 15px; text-align: center; }
.art-daily-expression > div { display: grid; gap: 3px; }
.art-daily-expression span { color: var(--mid); font-size: 11px; }
.art-daily-expression strong { font-size: 15px; font-weight: 600; }
.art-daily-expression p { margin-top: 13px; color: var(--mid); font-size: 13px; line-height: 1.5; }
.art-daily-feelings-share .art-daily-relation { width: 150px; height: 68px; }
.art-daily-publication { display: grid; justify-items: center; gap: 5px; width: 100%; text-align: center; }
.art-daily-publication .art-daily-author { color: var(--mid); font-size: 11px; }
.art-daily-publication > strong { color: var(--accent); font-size: 30px; line-height: 1.15; letter-spacing: -.045em; }
.art-daily-publication > span:not(.art-daily-author) { font-size: 12px; }
.art-daily-publication p { margin-top: 4px; color: var(--mid); font-size: 12px; line-height: 1.5; }
.art-daily-reply { align-self: flex-end; width: min(92%, 295px); margin-top: 20px; padding: 12px 16px; border-radius: 20px 20px 3px 20px; background: var(--surface); }
.art-daily-reply span { color: var(--mid); font-size: 10px; }
.art-daily-reply p { margin-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.5; }

.demo-routine { --accent: var(--routine); --soft: var(--routine-soft); }
.demo-routine .art-daily-screen { background: var(--soft); }
.art-daily-panorama { align-self: stretch; margin: 10px -25px 0; overflow: hidden; }
.art-daily-landscape { width: 100%; height: 145px; }
.art-daily-sun { fill: var(--land-sun); }
.art-daily-hill-back { fill: var(--land-back); }
.art-daily-hill-front { fill: var(--land-front); }
.art-daily-land-trail { fill: none; stroke: var(--land-path); stroke-width: 4; stroke-linecap: round; }
.art-daily-land-marker { fill: var(--land-front); stroke: var(--land-path); stroke-width: 3; }
.art-daily-land-current { fill: var(--land-path); stroke: var(--accent); stroke-width: 3; }
.art-daily-day-milestones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 9px; font-size: 10px; text-align: center; color: var(--mid); }
.art-daily-day-milestones strong { color: var(--accent); font-weight: 700; }
.art-daily-current { display: grid; justify-items: center; gap: 4px; margin-top: 16px; text-align: center; }
.art-daily-current > span { color: var(--mid); font-size: 11px; }
.art-daily-current > strong { color: var(--accent); font-size: 28px; line-height: 1.2; letter-spacing: -.045em; }
.art-daily-current > p { margin-top: 4px; color: var(--mid); font-size: 12px; }
.art-daily-routine-day .art-daily-action { margin-top: 12px; }
.art-daily-open-path { width: 80px; height: 64px; margin-top: 21px; color: var(--accent); }
.art-daily-open-path svg { width: 80px; height: 64px; fill: var(--soft); stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.art-daily-open-path .art-daily-path-current { fill: currentColor; }
.art-daily-small-copy { margin-top: 5px; color: var(--mid); font-size: 12px; }
.art-daily-substeps { display: grid; align-self: stretch; gap: 0; margin: 18px 0 17px; padding: 0; list-style: none; }
.art-daily-substeps li { display: flex; align-items: center; gap: 12px; min-height: 39px; border-bottom: 1px solid var(--line); font-size: 13px; }
.art-daily-substeps li:last-child { border-bottom: 0; }
.art-daily-substeps li > span { width: 14px; height: 14px; flex: 0 0 14px; border: 1.5px solid var(--accent); border-radius: 50%; }
.art-daily-routine-adapt .art-daily-panorama { margin-top: 18px; }
.art-daily-routine-adapt .art-daily-landscape { height: 137px; }
.art-daily-routine-adapt .art-daily-current { margin-top: 13px; }
.art-daily-next { display: flex; align-items: center; align-self: stretch; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.art-daily-next-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; border: 1.5px solid var(--accent); }
.art-daily-next > div { display: grid; gap: 3px; }
.art-daily-next > div > span { color: var(--mid); font-size: 10px; }
.art-daily-next strong { font-size: 13px; font-weight: 600; }
.art-daily-later { margin-left: auto; color: var(--mid); font-size: 11px; white-space: nowrap; }

@media (prefers-color-scheme: dark) {
  .art-daily-wheel-label { fill: var(--product-on); }
}

@media (max-width: 600px) {
  .art-daily-screen { height: 390px; padding: 17px 16px 17px; }
  .art-daily-topline { font-size: 10px; gap: 8px; }
  .art-daily-heading { font-size: 22px; }
  .art-daily-wheel { width: min(272px, calc(100% + 8px)); height: auto; max-height: 272px; margin-top: 11px; }
  .art-daily-panorama { margin-inline: -16px; }
  .art-daily-routine-day .art-daily-landscape { height: 139px; }
  .art-daily-current > strong { font-size: 26px; }
  .art-daily-day-milestones { gap: 4px; font-size: 9px; }
  .art-daily-reply { margin-top: 18px; padding: 11px 13px; }
  .art-daily-next { gap: 8px; }
  .art-daily-next strong { font-size: 12px; }
  .art-daily-next > div > span { font-size: 9px; }
}