/* One visual contract for React and classic segmented controls. */
:root {
  --pill-surface: var(--surface-control);
  --pill-segment: var(--surface-raised);
  --pill-text: var(--text-control);
  --pill-accent-home: var(--accent-neutral);
  --pill-accent-gallery: var(--accent-gallery);
  --pill-accent-painting: var(--accent-gallery);
  --pill-accent-photos: var(--accent-photos);
  --pill-accent-calendar: var(--accent-calendar);
  --pill-accent-noise: var(--accent-noise);
  --pill-accent-game: var(--accent-game);
  --pill-accent-contact: var(--accent-contact);
  --pill-accent-notes: var(--calendar-tasks-accent, var(--accent-notes));
  --pill-accent-tree: var(--calendar-tasks-accent, var(--accent-notes));
  --pill-accent-sorter: var(--accent-sorter);
  --pill-accent-sport: var(--calendar-sport-accent, var(--accent-sport));
  --pill-accent-piano: var(--calendar-piano-accent, var(--accent-piano));
  --calendar-piano-accent: var(--accent-piano);
}
.pill-group { position: relative; }
/* Explicit ownership outranks legacy component rules while pages migrate. */
html body .pill-group[data-pill-kind][data-pill-kind] {
  --pill-height: 2.625rem;
  --pill-font-size: .9rem;
  --pill-icon-size: 1.125rem;
  --pill-icon-width: calc(var(--pill-height) + .5rem);
  --pill-item-padding: 1rem;
  --pill-inner-radius: calc(var(--pill-height) * .2);
  --pill-end-radius: calc(var(--pill-height) / 2);
  --pill-gap: .38rem;
  --pill-padding: .38rem;
  --pill-accent: var(--pill-accent-notes);
  --pill-ink: var(--text-on-accent);
  isolation: isolate;
  display: inline-flex;
  align-items: stretch;
  gap: var(--pill-gap);
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  padding: var(--pill-padding);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--pill-surface, var(--surface-control));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  scrollbar-width: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
html body .pill-group[data-pill-kind][data-pill-kind][data-pill-size="compact"] { --pill-height: 2.5rem; --pill-gap: .25rem; --pill-padding: .25rem; }
html body .pill-group[data-pill-kind][data-pill-kind][data-pill-size="normal"] { --pill-height: 2.875rem; }
html body .pill-group[data-pill-kind][data-pill-kind][data-pill-size="small"] { --pill-height: 2rem; --pill-icon-width: var(--pill-height); --pill-icon-size: 1rem; --pill-font-size: .8rem; --pill-item-padding: .65rem; --pill-gap: .125rem; --pill-padding: .125rem; }
@media (max-width: 700px), (pointer: coarse) {
  html body .pill-group[data-pill-kind][data-pill-kind][data-pill-size="small"] { --pill-height: 2.75rem; --pill-item-padding: .5rem; }
}
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item] {
  display: inline-flex;
  position: relative;
  z-index: auto;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  box-sizing: border-box;
  height: var(--pill-height);
  min-height: var(--pill-height);
  min-width: 0;
  margin: 0;
  padding: 0 var(--pill-item-padding);
  border: 0;
  border-radius: var(--pill-inner-radius);
  background: var(--pill-segment, var(--surface-raised));
  color: var(--pill-text, var(--text-primary));
  font-family: 'SF Pro Text', system-ui, sans-serif;
  font-size: var(--pill-font-size);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  transition: color 120ms linear, background-color 120ms linear;
}
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-edge="first"][data-pill-item] { border-radius: var(--pill-end-radius) var(--pill-inner-radius) var(--pill-inner-radius) var(--pill-end-radius); }
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-edge="last"][data-pill-item] { border-radius: var(--pill-inner-radius) var(--pill-end-radius) var(--pill-end-radius) var(--pill-inner-radius); }
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-edge="only"][data-pill-item] { border-radius: var(--pill-end-radius); }
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item]:is(.active,.is-active,.is-current,[aria-pressed="true"],[aria-selected="true"],[aria-current="page"]) { background: var(--workspace-accent, var(--section-accent, var(--pill-accent))); color: var(--pill-ink); }
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item]:is(:disabled,[aria-disabled="true"]) { opacity: .45; cursor: default; }
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item]:focus-visible { outline: 2px solid var(--accent-neutral); outline-offset: -3px; box-shadow: none; }
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item] > :is(i,svg,span,abbr,strong) { position: relative; z-index: 2; color: inherit; transition: scale 240ms cubic-bezier(.34,1.56,.64,1); }
html body .pill-group[data-pill-kind][data-pill-kind].is-dock-pressed > .is-motion-target > :is(i,svg,span,abbr,strong),
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item]:active > :is(i,svg,span,abbr,strong) { scale: .96; transition-duration: 90ms; }
html body .pill-group[data-pill-kind][data-pill-kind].is-motion-ready { touch-action: pan-y; }
html body .pill-group[data-pill-kind][data-pill-kind][data-pill-gesture="direct"].is-motion-ready { touch-action: none; }
html body .pill-group[data-pill-kind="actions"][data-pill-kind].is-motion-ready { touch-action: manipulation; }
html body .pill-group[data-pill-kind][data-pill-kind].is-motion-ready > .workspace-dock-bubble { position: absolute; z-index: 1; inset: 0 auto auto 0; display: block; fill: var(--dock-accent, var(--pill-accent)); stroke: none; opacity: 0; overflow: visible; pointer-events: none; transition: opacity 120ms linear; }
html body .pill-group[data-pill-kind][data-pill-kind].is-motion-ready.has-motion-target > .workspace-dock-bubble { opacity: 1; }
html body .pill-group[data-pill-kind][data-pill-kind].is-motion-ready > [data-pill-item][data-pill-item]:is(.active,.is-active,.is-current,[aria-pressed="true"],[aria-selected="true"],[aria-current="page"],:hover,:focus-visible,.is-motion-target) { background: var(--pill-segment, var(--surface-raised)); color: var(--pill-text, var(--text-primary)); box-shadow: none; }
html body .pill-group[data-pill-kind][data-pill-kind].is-motion-ready > [data-pill-item][data-pill-item].is-motion-target { background: transparent; }
html body .pill-group[data-pill-kind][data-pill-kind].is-motion-ready > [data-pill-item][data-pill-item].is-motion-covered { background: transparent; color: var(--pill-ink); }
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item][hidden] { display: none; }
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item].pill-grow { flex: 1 1 auto; width: auto; }
html body .pill-group[data-pill-kind][data-pill-kind][data-pill-content="icons"] { --pill-icon-size: 1.25rem; }
html body .pill-group[data-pill-kind][data-pill-kind][data-pill-content="icons"] > [data-pill-item][data-pill-item],
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item].pill-icon { flex-basis: var(--pill-icon-width); width: var(--pill-icon-width); padding: 0; }
html body .pill-group[data-pill-kind][data-pill-kind] > .pill-readout { display: grid; flex: 1; place-items: center; min-width: 0; padding-inline: .5rem; color: var(--text-primary); font-size: var(--pill-font-size); font-weight: 800; }
/* Icon dimensions are independent of the label and of legacy SVG attributes. */
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item] > i { font-size: var(--pill-icon-size); }
html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item] > svg { flex: none; width: var(--pill-icon-size); height: var(--pill-icon-size); }
/* The site header has six destinations and needs a roomier navigation variant. */
html body .pill-group.section-direct-nav[data-pill-kind][data-pill-kind] { --pill-height: 2.75rem; --pill-font-size: .95rem; --pill-icon-size: 1.25rem; --pill-icon-width: 3.25rem; --pill-gap: .5rem; }
@media (max-width: 1650px), (max-aspect-ratio: 6/5) {
 html body .pill-group.section-direct-nav[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item] { flex: 0 0 var(--pill-icon-width) !important; width: var(--pill-icon-width) !important; height: var(--pill-height) !important; padding: 0; }
}
@media (max-width: 700px), (pointer: coarse) {
  html body .pill-group[data-pill-kind][data-pill-kind],
  html body .pill-group[data-pill-kind][data-pill-kind][data-pill-size="compact"] { --pill-height: 2.75rem; --pill-gap: .25rem; --pill-padding: .25rem; }
  html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item] { padding-inline: .7rem; }
}
@media (max-width: 700px) {
 html body .pill-group.section-direct-nav[data-pill-kind][data-pill-kind] { --pill-gap: .25rem; --pill-icon-width: clamp(2.75rem, calc((100vw - 1rem - 5 * var(--pill-gap) - 2 * var(--pill-padding) - 2px) / 6), 3.25rem); max-width: calc(100vw - 1rem) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body .pill-group[data-pill-kind][data-pill-kind] > .workspace-dock-bubble,
  html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item],
  html body .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item] > :is(i,svg,span,abbr,strong) { transition: none; scale: none; }
}

.personal-app .editor-tool-bar > .pill-tool-slot { grid-column: 1; min-width: 0; }
.personal-app .editor-tool-bar > .pill-history-slot { grid-column: 3; justify-self: end; }
@media (max-width: 360px) {
 .personal-app .editor-tool-bar > .pill-tool-slot { grid-area: tools; }
 .personal-app .editor-tool-bar > .pill-history-slot { grid-area: history; }
 html body .pill-group[data-pill-kind][data-pill-kind]:is(.editor-tool-toggles,.editor-history-actions) { --pill-icon-width: var(--pill-height); }
}

html body .pill-group[data-pill-layout="scale"][data-pill-kind][data-pill-kind] { display: flex; width: 100%; --pill-gap: .15rem; --pill-padding: .15rem; }
html body .pill-group[data-pill-layout="scale"][data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item] { flex: 1 1 0; padding: 0; font-size: 1rem; }
html body .sorter-evaluation > .pill-group.sorter-history[data-pill-kind] { pointer-events: auto; margin: 0 auto .4rem; }
/* Rich-text tools can mount a button inside a display:contents host. */
html body .pill-group[data-pill-kind][data-pill-kind] .checklist-add-tool > [data-pill-item] { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--pill-icon-width); height: var(--pill-height); min-height: var(--pill-height); padding: 0; border: 0; border-radius: var(--pill-end-radius) var(--pill-inner-radius) var(--pill-inner-radius) var(--pill-end-radius); background: var(--pill-segment, var(--surface-raised)); color: var(--pill-text, var(--text-primary)); }
html body .pill-group[data-pill-kind][data-pill-kind] .checklist-add-tool > [data-pill-item].is-motion-target { background: transparent; }
html body .pill-group[data-pill-kind][data-pill-kind] .checklist-add-tool > [data-pill-item].is-motion-covered { background: transparent; color: var(--pill-ink); }
html body .pill-group[data-pill-kind][data-pill-kind] .checklist-add-tool > [data-pill-item] > :is(svg,span) { position: relative; z-index: 2; }

/* Dock is a layout variant; segment geometry remains derived from height. */
html body .pill-group[data-pill-kind][data-pill-layout="dock"] { position: fixed; margin-inline: auto; max-width: calc(100% - 1.5rem); }
/* Paramètres reste une destination du dock sur ordinateur et téléphone. */
html body .calendar-workspace-dock.calendar-workspace-dock > .workspace-settings.workspace-settings[data-pill-item][data-pill-item] { display: inline-flex; }
@media (max-width: 700px) {
 html body .pill-group[data-pill-kind][data-pill-kind][data-pill-layout="dock"]:has(> .workspace-settings) {
  --pill-dock-items: 6;
  --pill-height: clamp(2.75rem, calc((100vw - 1rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 5 * var(--pill-gap) - 2 * var(--pill-padding) - 2px) / 6), calc(2.75rem * var(--pill-dock-scale)));
 }
 /* Icon-only workspace destinations and the settings action share one capsule. */
 html body .pill-group[data-pill-kind][data-pill-kind][data-pill-layout="dock"] { --pill-dock-items: 5; --pill-dock-scale: 1.2; --pill-dock-width-scale: 1.2; --pill-height: calc(2.75rem * var(--pill-dock-scale)); --pill-icon-size: calc(1.25rem * var(--pill-dock-scale)); --pill-icon-width: calc(3.25rem * var(--pill-dock-scale)); --pill-gap: calc(.25rem * var(--pill-dock-scale)); --pill-padding: calc(.25rem * var(--pill-dock-scale)); width: calc((var(--pill-dock-items) * var(--pill-icon-width) + (var(--pill-dock-items) - 1) * var(--pill-gap) + 2 * var(--pill-padding) + 2px) * var(--pill-dock-width-scale)); max-width: calc(100% - 1rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); bottom: max(.375rem, calc(env(safe-area-inset-bottom, 0px) - .75rem)); margin-inline: auto; }
 html body .pill-group[data-pill-kind][data-pill-kind][data-pill-layout="dock"] > [data-pill-item][data-pill-item] { flex: 1 1 0; flex-direction: row; min-width: var(--pill-height); width: auto; padding: 0; gap: 0; }
 html body .pill-group[data-pill-kind][data-pill-kind][data-pill-layout="dock"] > [data-pill-item] > span { display: none; }
 html body .pill-group[data-pill-kind][data-pill-kind][data-pill-layout="dock"] > [data-pill-item] > :is(i,svg) { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--pill-icon-size); height: var(--pill-icon-size); }
}

html body .pill-group[data-pill-kind][data-pill-kind] .checklist-add-tool > [data-pill-item] > svg { width: var(--pill-icon-size); height: var(--pill-icon-size); }

/* Densité propre aux commandes du calendrier sur téléphone. */
@media (max-width: 700px) {
  html body :is(.unified-calendar-card, .notes-react-card, .sport-calendar, .unified-date-menu) .pill-group[data-pill-kind][data-pill-kind],
  html body :is(.unified-calendar-card, .notes-react-card, .sport-calendar, .unified-date-menu) .pill-group[data-pill-kind][data-pill-kind][data-pill-size="compact"] {
    --pill-height: 2.2rem; --pill-icon-size: 1rem; --pill-icon-width: 2.6rem; --pill-item-padding: .56rem; --pill-gap: .2rem; --pill-padding: .2rem;
  }
  html body :is(.unified-calendar-card, .notes-react-card, .sport-calendar, .unified-date-menu) .pill-group[data-pill-kind][data-pill-kind] > [data-pill-item][data-pill-item] { padding-inline: var(--pill-item-padding); }
  html body :is(.unified-calendar-card, .notes-react-card, .sport-calendar, .unified-date-menu) .pill-group[data-pill-kind][data-pill-kind][data-pill-content="icons"] > [data-pill-item][data-pill-item] { padding: 0; }
}

@media (max-width: 700px) {
  /* Le SVG mesuré avant un redimensionnement ne doit pas élargir son groupe. */
  html body :is(.unified-calendar-card, .notes-react-card, .sport-calendar, .unified-date-menu) .pill-group[data-pill-kind][data-pill-kind] > .workspace-dock-bubble { max-width: 100%; }
}