:root {
    color-scheme: light; /* fixed light theme, matching the prototype */

    /* — Surfaces (Vigie design system) — */
    --background: #f7f8fa;
    --foreground: #141c2e;
    --card: #ffffff;
    --card-elevated: #f0f3f8;
    --cell: #f4f6fa;
    --popover: #ffffff;
    --muted: #eef0f4;
    --muted-fg: #5f7089;
    --text-secondary: #3a4e6e;
    --border: #d8dce5;
    --border-strong: #c5cbd8;
    --primary: #4a6fa5;
    --primary-strong: #3b5d92; /* primary ink on tinted backgrounds (AA at 11px) */
    --primary-fg: #ffffff;

    /* — "Signal" states → one category, one color (bg + text) — */
    --Culture-bg: #e6eef8;           --Culture-fg: #2c5490;
    --Sport-bg: #e8f3ec;             --Sport-fg: #276b44;
    --Religieux-bg: #f6efe2;         --Religieux-fg: #7a5d20;
    --Ferie-bg: rgba(220,74,74,.10); --Ferie-fg: #991b1b;

    /* — Radius scale — */
    --r-badge: 3px; --r-sm: 5px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px;

    /* — Elevation — */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
    --shadow-md: 0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --shadow-2xl: 0 12px 32px rgba(0,0,0,.12);

    /* — Motion — */
    --motion-micro: 140ms; --motion-standard: 240ms;
    --ease-expo: cubic-bezier(.16,1,.3,1);
    --ease-standard: cubic-bezier(.2,0,0,1);

    /* System stack: no bundled font, zero dependency. */
    --font-sans: system-ui, -apple-system, sans-serif;
  }
  * { box-sizing: border-box; }
  body {
    font: 16px/1.5 var(--font-sans); margin: 0 auto; padding: 2rem 1.25rem; max-width: 64rem;
    min-height: 100vh; display: flex; flex-direction: column; background: var(--background); color: var(--foreground);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  }

  /* section-label (mono role: tabular figures, tight uppercase) */
  .label { font-size: .625rem; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
  header h1 { margin: .15rem 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
  .filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
  select, #today, #retry, #reset {
    font: inherit; font-size: .875rem; padding: .375rem .625rem; border: 1px solid var(--border);
    border-radius: var(--r-md); background: var(--card); color: inherit; cursor: pointer;
    transition: background var(--motion-micro) var(--ease-standard), transform var(--motion-micro) var(--ease-standard);
  }
  #retry, #reset { color: var(--muted-fg); background: none; }
  select:hover, #retry:hover, #reset:hover { background: var(--muted); color: var(--text-secondary); }
  select:active, #today:active, #retry:active, #reset:active { transform: scale(.98); }
  /* Quiet text action: reads as "jump", not as another filter control. */
  #today { border: 0; background: none; color: var(--primary-strong); }
  #today:hover { background: color-mix(in srgb, var(--primary) 8%, var(--card)); }
  /* Active filter: the state is visible without reopening the menu. */
  select.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card)); color: var(--primary-strong); }
  .empty #retry, .empty #reset { margin-top: .6rem; }
  :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

  /* View switcher: segmented control, same "active filter" vocabulary as select.active */
  .views { margin-left: auto; display: flex; padding: 2px; gap: 2px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); }
  .views button {
    display: inline-flex; align-items: center; gap: .35rem;
    font: inherit; font-size: .8rem; padding: .25rem .6rem; border: 0; border-radius: calc(var(--r-md) - 2px);
    background: none; color: var(--muted-fg); cursor: pointer;
    transition: background var(--motion-micro) var(--ease-standard), color var(--motion-micro) var(--ease-standard);
  }
  .views svg { flex-shrink: 0; }
  .views button:hover { background: var(--muted); color: var(--text-secondary); }
  .views button[aria-checked="true"] { background: color-mix(in srgb, var(--primary) 8%, var(--card)); color: var(--primary-strong); font-weight: 600; }

  /* List view: the page is viewport-high like the calendar; the list scrolls in its pane. */
  body:not(.cal-view) { height: 100vh; height: 100dvh; }
  main { margin-top: 1rem; flex: 1; min-height: 0; display: flex; flex-direction: column; }
  /* The calendar lives in one card; the list is one card per month (below). */
  body.cal-view main { border: 1px solid var(--muted); border-radius: var(--r-xl); background: var(--card); padding: .5rem; }

  /* — Agenda (schedule): centered column, one card per month — */
  .schedule { width: 100%; }
  .schedule:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
  .schedule section { border: 1px solid var(--muted); border-radius: var(--r-xl); background: var(--card); }
  .schedule section + section { margin-top: 1rem; }
  .schedule > .empty { border: 1px solid var(--muted); border-radius: var(--r-xl); background: var(--card); }
  .month-head {
    position: sticky; top: 0; z-index: 1; background: var(--card);
    border-bottom: 1px solid var(--muted); border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: .7rem 1rem .55rem; display: flex; align-items: baseline; gap: .5rem;
  }
  .month-head h2 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; text-transform: capitalize; }
  .month-head .count { margin-left: auto; font-size: .6875rem; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
  .rows { list-style: none; margin: 0; padding: .25rem .25rem .35rem; }
  .rows li + li { margin-top: .3rem; }

  /* Past events fold: a divider-with-label at the top of the list, where the hidden
     content actually is — not a header button the reader never connects to it. */
  .past-toggle {
    align-self: stretch; display: flex; align-items: center; gap: .75rem;
    margin-bottom: .75rem; padding: .25rem 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: .78rem; color: var(--muted-fg);
    transition: color var(--motion-micro) var(--ease-standard);
  }
  .past-toggle::before, .past-toggle::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
  .past-toggle:hover { color: var(--primary-strong); }

  .row {
    display: grid; grid-template-columns: 3.75rem 1fr auto; align-items: center; gap: .75rem;
    width: 100%; text-align: left; border: 0; border-radius: var(--r-lg); background: none; color: inherit;
    padding: .6rem .75rem; cursor: pointer;
    scroll-margin-top: 3.25rem; /* keep focused/anchored rows clear of the sticky month header */
    transition: background var(--motion-micro) var(--ease-standard), transform var(--motion-micro) var(--ease-standard);
  }
  .row:hover { background: var(--cell); }
  .row:active { transform: scale(.995); }
  /* Past: dimmed via an AA-safe text color (≥4.5:1), never opacity;
     badges get the calendar's luminance-preserving desaturation. */
  .row.past { color: var(--muted-fg); }
  .row.past .badge { filter: saturate(.35); }
  .row.today { background: color-mix(in srgb, var(--primary) 7%, transparent); }

  /* One column, always aligned: weekday on top, "25" or the compact range "25–26" below. */
  .when { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
  .when .d { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .when .wd { font-size: .625rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-fg); }
  .today .when .d { color: var(--primary); }

  .body { min-width: 0; }
  .row .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 0; font-size: .95rem; font-weight: 600; overflow: hidden; overflow-wrap: break-word; }
  .meta { margin: .15rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; font-size: .78rem; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
  .meta .sep { color: var(--border-strong); }
  /* In-row badge: trailing tag at the right edge, slimmer than the dialog one. */
  .row .badge { font-size: .5625rem; padding: 1px 5px; border-radius: var(--r-badge); }
  .loc-names { display: inline-flex; align-items: center; gap: .25rem; }

  .empty { text-align: center; color: var(--muted-fg); font-size: .9rem; padding: 3rem 1rem; }

  /* — Calendar (month grid) — */
  #calendar:not([hidden]) { flex: 1; display: flex; flex-direction: column; padding: .5rem; }
  .nav { display: flex; align-items: center; justify-content: center; gap: .25rem; margin-bottom: .75rem; }
  .nav button { font: inherit; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--r-md); background: none; color: var(--muted-fg); cursor: pointer; font-size: 1.3rem; transition: background var(--motion-micro) var(--ease-standard), transform var(--motion-micro) var(--ease-standard); }
  .nav button:hover { background: var(--muted); }
  .nav button:active { transform: scale(.98); }
  .nav h2 { margin: 0; min-width: 10rem; text-align: center; font-size: 1.125rem; font-weight: 700; }

  .grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
  #days { flex: 1; }
  .grid .wd { padding: .375rem 0; text-align: center; font: 600 .6875rem/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-fg); }
  .day {
    display: flex; flex-direction: column; padding: .375rem; border: 0; border-radius: var(--r-sm);
    background: var(--cell); text-align: left; cursor: pointer; color: inherit; overflow: hidden;
    transition: transform var(--motion-micro) var(--ease-standard), box-shadow var(--motion-micro) var(--ease-standard);
  }
  .day:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .day.out { visibility: hidden; pointer-events: none; }
  /* Past: luminance-preserving desaturation keeps chip/text contrast AA. */
  .day.past { filter: saturate(.35); }
  .daynum { align-self: flex-start; font-size: .6875rem; font-weight: 500; color: var(--muted-fg); }
  /* Today: filled pill on the day number (Apple Calendar style), cell stays like the others. */
  .day.today .daynum { background: var(--primary); color: var(--primary-fg); font-weight: 600; border-radius: 999px; min-width: 18px; text-align: center; padding: 2px 5px; margin: -2px 0 0 -3px; }
  .chips { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
  .chip {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 1px 4px; border-radius: var(--r-sm); font-size: .625rem; line-height: 1.35;
    background: var(--tint); color: var(--fg);
  }
  .more { padding: 0 4px; font-size: .625rem; color: var(--muted-fg); }

  dialog {
    width: 100%; max-width: 28rem; border: 0; border-radius: var(--r-2xl);
    background: var(--popover); color: var(--foreground); padding: 1.5rem; box-shadow: var(--shadow-2xl);
  }
  dialog::backdrop { background: #00000080; }
  dialog[open] { animation: slide-up var(--motion-standard) var(--ease-expo); }
  @keyframes slide-up { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { dialog[open] { animation: none; } }
  .dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
  .dhead h3 { margin: .15rem 0 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
  .close { border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--muted-fg); padding: .25rem; }
  .close:hover { color: inherit; }
  .devlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
  .devlist li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
  .badge {
    flex-shrink: 0; padding: 2px 7px; border-radius: var(--r-sm); white-space: nowrap;
    font-size: .625rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
    background: var(--tint); color: var(--fg);
  }
  .facts { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
  .facts li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
  .facts svg { flex-shrink: 0; color: var(--muted-fg); }
  .drow a, footer a { color: var(--primary); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; transition: text-decoration-color var(--motion-micro), color var(--motion-micro); }
  .drow a:hover, footer a:hover { text-decoration-color: var(--primary); }

  footer { margin-top: 1.5rem; text-align: center; font-size: .82rem; color: var(--muted-fg); }
  a { color: inherit; }

  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* Narrow screens: tighter row gutters. */
  @media (max-width: 480px) {
    .row { gap: .6rem; padding-inline: .5rem; }
  }
  /* Touch: 44px targets on the primary controls (fine pointers keep the compact density). */
  @media (pointer: coarse) {
    select, #today, #retry, #reset { min-height: 44px; }
    .views button, .past-toggle { min-height: 2.75rem; }
    .close { padding: .6rem; margin: -.35rem -.35rem 0 0; }
  }