:root {
  color-scheme: light;
  --bg: #f5f6fa;
  --surface: #ffffff;
  --surface-2: #eef0f5;
  --text: #1b1f2a;
  --muted: #6b7280;
  --border: #e2e5ec;
  --accent: #4f6bed;
  --accent-text: #ffffff;
  --commun: #9b5de5;
  --danger: #dc2626;
  --now: #ef4444;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .07);
  --radius: 12px;
  --hour: 48px;
  /* Couleurs des types d'événements */
  --cat-pro: #4f6bed;
  --cat-perso: #10b981;
  --cat-commun: var(--commun);
  /* Contrôles épurés : surfaces unies, bordure fine, ombre discrète */
  --ctl-bg: var(--surface);
  --ctl-strong: var(--surface);
  --ctl-border: var(--border);
  --ctl-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  --ctl-shadow-hover: 0 2px 8px rgba(15, 23, 42, .08);
  --track: #eceef3;
  /* Barre de navigation flottante */
  --nav-bg: var(--surface);
  --nav-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 24px rgba(15, 23, 42, .1);
  --nav-bottom: 22px;
  --nav-space: 108px; /* place laissée sous le contenu pour ne pas être caché par la barre */
  --day-min: 0px; /* largeur mini d'un jour en vue semaine (voir mobile) */
  --perm: #d97706;
  --off: #eab308;
  --off-bg: #fef6c7;
  --off-text: #854d0e;
  --hol: #dc2626;
  --school: #0d9488;
  --school-bg: #ccfbf1;
}
/* Thème sombre : automatique (réglage de l'appareil) sauf si « Clair » est forcé,
   et toujours quand « Sombre » est forcé (bloc recopié plus bas). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1115;
    --surface: #181b22;
    --surface-2: #232730;
    --text: #e8eaf0;
    --muted: #9aa1ae;
    --border: #2a2f3a;
    --accent: #7b8ff5;
    --accent-text: #0f1115;
    --commun: #b184f0;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
    --cat-pro: #7b8ff5;
    --cat-perso: #34d399;
    --ctl-bg: var(--surface-2);
    --ctl-strong: #2c313c;
    --ctl-border: var(--border);
    --ctl-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --ctl-shadow-hover: 0 2px 8px rgba(0, 0, 0, .35);
    --track: #1f232b;
    --nav-bg: #1f232b;
    --nav-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 24px rgba(0, 0, 0, .45);
    --perm: #fbbf24;
    --off: #facc15;
    --off-bg: #332d12;
    --off-text: #fde68a;
    --hol: #f87171;
    --school: #2dd4bf;
    --school-bg: #123a37;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115;
  --surface: #181b22;
  --surface-2: #232730;
  --text: #e8eaf0;
  --muted: #9aa1ae;
  --border: #2a2f3a;
  --accent: #7b8ff5;
  --accent-text: #0f1115;
  --commun: #b184f0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
  --cat-pro: #7b8ff5;
  --cat-perso: #34d399;
  --ctl-bg: var(--surface-2);
  --ctl-strong: #2c313c;
  --ctl-border: var(--border);
  --ctl-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --ctl-shadow-hover: 0 2px 8px rgba(0, 0, 0, .35);
  --track: #1f232b;
  --nav-bg: #1f232b;
  --nav-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 24px rgba(0, 0, 0, .45);
  --perm: #fbbf24;
  --off: #facc15;
  --off-bg: #332d12;
  --off-text: #fde68a;
  --hol: #f87171;
  --school: #2dd4bf;
  --school-bg: #123a37;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

/* Comportement d'application (et non de page web) :
   - pas de zoom au double appui (touch-action), ni de surbrillance grise au toucher ;
   - pas de sélection de texte ni de menu (copier, partager…) à l'appui long, sauf dans les
     champs de saisie, les notes et le code d'invitation ;
   - pas de rebond ni de « tirer pour actualiser » sur toute la page. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
body {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
input, textarea, select, [contenteditable], .ev-view-notes, .code-box code {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
img, svg { -webkit-user-drag: none; user-drag: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); margin: 0; }

/* Icônes ------------------------------------------------------------------- */
.i {
  width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Boutons & contrôles (épurés) -------------------------------------------- */
.btn, .icon-btn, .chip {
  border: 1px solid var(--ctl-border);
  background: var(--ctl-bg);
  box-shadow: var(--ctl-shadow);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover, .icon-btn:hover, .chip:hover { box-shadow: var(--ctl-shadow-hover); }
.btn:active, .icon-btn:active, .chip:active { transform: scale(.97); }
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible, .seg button:focus-visible, .fab:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px;
}
.btn {
  height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
/* Action principale : aplat de la couleur d'accent */
.btn.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn.primary:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn.danger { color: var(--danger); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.icon-btn {
  width: 38px; height: 38px; flex: none; border-radius: 50%; padding: 0;
  display: grid; place-items: center; line-height: 1; color: var(--text);
}
.icon-btn .i { width: 19px; height: 19px; }
.link { border: 0; background: none; color: var(--accent); padding: 4px; font-size: 14px; font-weight: 600; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Sélecteurs : rail uni + pastille blanche sur l'option active */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--track); }
.seg button, .seg label {
  border: 1px solid transparent; background: transparent; padding: 6px 14px; border-radius: 999px; font-size: 14px;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.seg button:hover, .seg label:hover { color: var(--text); }
.seg button[aria-pressed="true"], .seg label:has(input:checked) {
  background: var(--ctl-strong); color: var(--text); font-weight: 600;
  border-color: var(--ctl-border); box-shadow: var(--ctl-shadow);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); display: inline-block; flex: none; }

/* Couleur propre à chaque type (filtres, formulaire, étiquettes) */
[data-cat="pro"] { --cc: var(--ev-pro, #475569); --cs: var(--ev-pro, #475569); }
[data-cat="perso"] { --cc: var(--ev-perso, #16a34a); --cs: var(--ev-perso, #16a34a); }
[data-cat="commun"] { --cc: var(--ev-commun, #9333ea); --cs: var(--ev-commun, #9333ea); }

/* Barre du haut ------------------------------------------------------------- */
#app { display: flex; flex-direction: column; height: 100dvh; }
/* sticky : iOS 26 repère ainsi une barre fixée en haut et reprend sa couleur sous
   l'heure au lieu de flouter le contenu qui passe dessous. */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.brand img { width: 28px; height: 28px; }
.brand.big { font-size: 22px; }
.brand.big img { width: 40px; height: 40px; }
.nav { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.nav h1 {
  font-size: 17px; font-weight: 600; margin: 0 0 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px; color: var(--muted);
}
.chip .i { width: 17px; height: 17px; }
/* Filtre de type désactivé : contour neutre */
.chip[data-cat][aria-pressed="false"] { box-shadow: none; }
.chip[data-cat][aria-pressed="false"] .i { color: var(--muted); }
/* Filtre actif : aplat de la couleur du type */
.chip[data-cat][aria-pressed="true"], .cat-seg label:has(input:checked) {
  color: #fff; background: var(--cs); border-color: var(--cs); box-shadow: none;
}
.chip[data-cat] .i, .cat-seg label .i, .tag-cat .i { color: var(--cc); }
.chip[data-cat][aria-pressed="true"] .i, .cat-seg label:has(input:checked) .i { color: #fff; }
.demo-banner {
  font-size: 12px; color: var(--muted); margin-left: auto;
  padding: 3px 10px; border-radius: 999px; background: var(--surface-2);
}

.main { flex: 1; min-height: 0; overflow: auto; position: relative; }
.main.view-week { overflow: hidden; display: flex; flex-direction: column; }

/* Barre de navigation flottante : capsule unie, remontée du bord pour le pouce */
.tabbar {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: max(var(--nav-bottom), calc(env(safe-area-inset-bottom) + 10px));
  width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 10px;
}
.tab-capsule {
  flex: 1; min-width: 0; display: flex; gap: 2px; padding: 5px; border-radius: 999px;
  background: var(--nav-bg); border: 1px solid var(--ctl-border);
  box-shadow: var(--nav-shadow);
}
.tab {
  flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 999px;
  padding: 7px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.1;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab .i { width: 22px; height: 22px; }
.tab:hover { color: var(--text); }
.tab:active { transform: scale(.94); }
.tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -2px; }
/* Onglet actif : couleur d'accent sur fond légèrement teinté */
.tab[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); }

/* Bouton d'ajout : rond plein, à côté de la capsule */
.fab {
  flex: none; position: relative;
  width: 58px; height: 58px; border-radius: 50%; padding: 0; border: 0;
  display: grid; place-items: center; color: #fff; background: var(--accent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .12s ease, box-shadow .2s ease;
}
.fab .i { width: 26px; height: 26px; stroke-width: 2.4; }
.fab:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 45%, transparent); }
.fab:active { transform: scale(.95); }

/* Vue semaine ---------------------------------------------------------------- */
.wk-scroll {
  flex: 1; overflow: auto; overscroll-behavior: contain; padding-bottom: var(--nav-space);
  /* Sur téléphone la semaine défile horizontalement, en s'arrêtant net sur chaque jour */
  scroll-snap-type: x mandatory; scroll-padding-left: 52px; -webkit-overflow-scrolling: touch;
}
.wk-sticky {
  position: sticky; top: 0; z-index: 6; background: var(--surface);
  border-bottom: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}
.wk-row { display: grid; }
.wk-day {
  border: 0; background: none; padding: 6px 0 4px; display: flex; flex-direction: column; align-items: center;
  color: var(--muted); font-size: 12px; text-transform: capitalize; min-width: 0;
}
.wk-day strong {
  font-size: 19px; color: var(--text); font-weight: 600;
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
}
.wk-day:hover strong { background: var(--surface-2); }
.wk-day.is-today strong { background: var(--accent); color: var(--accent-text); }
.lane-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 0 6px 5px; }
.lane-legend span { height: 4px; border-radius: 2px; background: var(--c); }
.wk-allday { border-top: 1px solid var(--border); }
.wk-allday > div { border-left: 1px solid var(--border); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-allday > .wk-label { border-left: 0; }
.wk-label { font-size: 11px; color: var(--muted); justify-content: center; align-items: flex-end; padding-right: 6px !important; }
.chip-ev {
  border: 0; font-size: 11px; padding: 2px 6px; border-radius: 5px; text-align: left;
  background: color-mix(in srgb, var(--c) 22%, var(--surface)); border-left: 3px solid var(--pc, var(--c));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wk-grid { display: grid; position: relative; }
.wk-hours { position: sticky; left: 0; z-index: 4; background: var(--bg); }
.wk-corner { position: sticky; left: 0; z-index: 2; background: var(--surface); }
/* Largeur réelle de la semaine, pour que les fonds couvrent toute la zone défilante */
.wk-sticky, .wk-grid { min-width: calc(52px + 7 * var(--day-min)); }
.wk-hours span {
  position: absolute; right: 8px; transform: translateY(-50%);
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.wk-col {
  position: relative; border-left: 1px solid var(--border); scroll-snap-align: start;
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 100% var(--hour);
}
.wk-col.is-today { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }
.lane-divider { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed var(--border); }

.ev {
  position: absolute; z-index: 1; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px;
  border: 0; border-left: 3px solid var(--pc, var(--c)); border-radius: 6px;
  padding: 3px 5px; text-align: left; font-size: 12px; line-height: 1.25; color: var(--text);
  background: color-mix(in srgb, var(--c) 20%, var(--surface));
}
.ev:hover { z-index: 3; box-shadow: var(--shadow); background: color-mix(in srgb, var(--c) 30%, var(--surface)); }
.ev-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-title .i, .chip-ev .i { width: 12px; height: 12px; vertical-align: -2px; color: var(--c); }
.ev-time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.ev.is-short { flex-direction: row; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.ev.is-masked {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--c) 12%, var(--surface)) 0 6px,
    color-mix(in srgb, var(--c) 24%, var(--surface)) 6px 12px);
}
/* Sport à suivre : à titre d'info, en retrait (contour pointillé, fond léger, italique). */
.ev.is-info {
  background: color-mix(in srgb, var(--c) 8%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--c) 55%, transparent); border-left: 3px solid var(--c);
}
.ev.is-info .ev-title { font-weight: 500; font-style: italic; }
.mo-ev.is-info span { font-style: italic; }
.ag-ev.is-info { border-style: dashed; background: color-mix(in srgb, var(--c) 4%, var(--surface)); }
.ag-ev.is-info strong { font-weight: 500; font-style: italic; }
.now { position: absolute; left: 0; right: 0; height: 2px; background: var(--now); z-index: 4; pointer-events: none; }
.now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--now); }

/* Vue mois ------------------------------------------------------------------- */
.month { display: flex; flex-direction: column; min-height: 100%; padding-bottom: var(--nav-space); }
.mo-head {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: sticky; top: 0; z-index: 2;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.mo-head div { height: 32px; line-height: 16px; padding: 8px 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; text-align: center; }
.mo-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(96px, auto); }
.mo-title {
  position: sticky; top: 32px; z-index: 1; margin: 0; padding: 14px 14px 8px;
  font-size: 18px; font-weight: 700; background: var(--bg); border-bottom: 1px solid var(--border);
}
.mo-cell.is-blank, .mo-cell.is-blank:hover { background: var(--bg); cursor: default; }
.mo-cell {
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface);
  padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer;
}
.mo-cell:hover { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.mo-num { font-size: 12px; font-weight: 600; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.mo-cell.is-today .mo-num { background: var(--accent); color: var(--accent-text); }
.mo-events { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mo-ev {
  border: 0; background: none; display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 12px; padding: 1px 3px; border-radius: 4px; text-align: left; white-space: nowrap;
}
.mo-ev:hover { background: var(--surface-2); }
.mo-ev i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.mo-ev > .i { width: 11px; height: 11px; flex: none; color: var(--c); stroke-width: 2.3; }
.mo-ev span { overflow: hidden; text-overflow: ellipsis; }
.mo-ev b { font-weight: 600; color: var(--muted); }
.mo-more { font-size: 11px; color: var(--muted); padding-left: 4px; }

/* Vue agenda ----------------------------------------------------------------- */
.agenda { max-width: 760px; margin: 0 auto; padding: 8px 16px var(--nav-space); }
.ag-day { margin-bottom: 14px; }
.ag-date {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 2px 6px;
  position: sticky; top: 0; z-index: 1; background: var(--bg);
}
.ag-dow { font-weight: 700; text-transform: capitalize; }
.ag-dnum { color: var(--muted); }
.badge { font-size: 11px; background: var(--accent); color: var(--accent-text); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.ag-list { display: flex; flex-direction: column; gap: 6px; }
.ag-ev {
  display: grid; grid-template-columns: 50px 4px 1fr; gap: 10px; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; text-align: left;
}
.ag-ev:hover { box-shadow: var(--shadow); }
.ag-ev.is-masked { background: repeating-linear-gradient(135deg, var(--surface) 0 8px, var(--surface-2) 8px 16px); }
.ag-time { font-size: 13px; color: var(--muted); line-height: 1.4; font-variant-numeric: tabular-nums; }
.ag-bar { border-radius: 2px; background: var(--c); }
.ag-body { min-width: 0; }
.ag-body strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ag-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; font-size: 12px; color: var(--muted); }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); }
.tag .i { width: 13px; height: 13px; }
.tag-cat { background: color-mix(in srgb, var(--cc) 12%, var(--surface-2)); }
.hint .i, .owner-note .i, .check .i { color: var(--muted); }
.ag-empty { color: var(--muted); font-size: 14px; margin: 2px 2px 0; }

/* Dialogues -------------------------------------------------------------------- */
/* Fenêtres ancrées en haut de l'écran : l'en-tête et les boutons du bas restent visibles,
   seul le contenu (.dlg-body) défile quand il est trop long. */
dialog {
  --dlg-top: max(4vh, 12px);
  border: 0; border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 24px));
  margin: var(--dlg-top) auto auto; max-height: calc(100dvh - 2 * var(--dlg-top));
  overflow: hidden; background: var(--surface); color: var(--text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
dialog[open] { display: flex; flex-direction: column; }
dialog > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
dialog::backdrop { background: rgba(10, 12, 20, .45); backdrop-filter: blur(2px); }
.dlg-head { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 8px; }
.dlg-head h2 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.dlg-head h2 .i { color: var(--accent); }
.dlg-body {
  display: flex; flex-direction: column; gap: 12px; padding: 8px 20px 12px; border: 0; margin: 0;
  min-width: 0; min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
}
.dlg-foot {
  flex: none; display: flex; gap: 8px; align-items: center; padding: 12px 20px 16px;
  border-top: 1px solid var(--border); background: var(--surface);
}
.dlg-foot .spacer { flex: 1; }
/* Fiche d'un événement : les boutons se partagent la largeur, sans jamais déborder. */
/* Fiche d'un événement : les boutons remplissent la largeur et passent à la ligne s'il
   manque de la place (jamais de débordement ni de libellé coupé). */
#evViewDlg .dlg-foot { flex-wrap: wrap; gap: 8px; padding-left: 16px; padding-right: 16px; }
#evViewDlg .dlg-foot .spacer { display: none; }
#evViewDlg .dlg-foot .btn { flex: 1 1 auto; padding: 0 12px; }
.del-q { flex: 1 0 100%; font-weight: 600; }
@media (max-width: 420px) {
  #evViewDlg .dlg-foot .btn { font-size: 14px; }
  #evViewDlg .dlg-foot .btn .i { display: none; }
}
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea, .input {
  width: 100%; min-width: 0; border: 1px solid var(--border); background: var(--bg);
  border-radius: 10px; padding: 9px 11px; font-size: 15px; color: var(--text);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 0; border-color: var(--accent);
}
.title-input { font-size: 18px; font-weight: 600; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.cat-seg { display: flex; }
.cat-seg label { flex: 1; cursor: pointer; }
.cat-seg input { position: absolute; opacity: 0; pointer-events: none; }
.hint, .owner-note { margin: 0; font-size: 13px; color: var(--muted); }
.owner-note { padding: 8px 12px; background: var(--surface-2); border-radius: 10px; }
fieldset:disabled .cat-seg label, fieldset:disabled .check { opacity: .75; }

.set-section { padding: 14px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.set-section:first-child { border-top: 0; padding-top: 4px; }
.set-section:last-child { padding-bottom: 20px; }
.set-section h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.set-section p { margin: 0; }
/* Suggestions du formulaire : rangée défilante de petites capsules */
.presets {
  display: flex; gap: 6px; overflow-x: auto; margin: 0; padding: 2px 0 4px;
  scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.presets::-webkit-scrollbar { display: none; }
.preset {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.preset .i { width: 16px; height: 16px; color: var(--cc); }
.preset:hover { background: var(--surface-2); }
.preset[aria-pressed="true"] { border-color: var(--cs); background: color-mix(in srgb, var(--cs) 12%, var(--surface)); }
/* Fiche du jour */
.day-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.theme-seg { display: flex; }
.theme-seg button { flex: 1; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--c); }
.swatch[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
.code-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.code-box code {
  font-size: 22px; letter-spacing: .15em; font-weight: 700;
  background: var(--surface-2); padding: 6px 14px; border-radius: 10px;
}
.inline-form { display: flex; gap: 8px; }
.inline-form .input { flex: 1; text-transform: uppercase; }

/* Télétravail ----------------------------------------------------------------------- */
.chip-action { color: var(--text); }
.chip-action .i { color: var(--accent); }
.tt { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; line-height: 1; vertical-align: middle; color: var(--accent); }
.tt .i { width: 14px; height: 14px; }
.tt .dot, .tt-tag .dot { width: 6px; height: 6px; }
.tt-tag { font-size: 12px; font-weight: 600; color: var(--accent); }
.mo-top { display: flex; align-items: center; gap: 4px; }
.rm-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rm-nav strong { font-size: 16px; }
.rm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.rm-dow { text-align: center; font-size: 12px; color: var(--muted); text-transform: uppercase; padding: 2px 0; }
.rm-day {
  aspect-ratio: 1; min-height: 38px; border-radius: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1px solid var(--ctl-border); background: var(--ctl-bg); box-shadow: var(--ctl-shadow);
  transition: transform .12s ease, background .2s ease;
}
.rm-day:active { transform: scale(.94); }
.rm-day.is-out { opacity: .45; }
.rm-day.is-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.rm-day[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: none; }
.rm-day .i { width: 13px; height: 13px; }

/* Import du planning ---------------------------------------------------------------- */
.imp-form { display: flex; flex-direction: column; gap: 12px; }
.imp-person { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15px; }
.imp-person .i, .imp-preview li .i { color: var(--accent); }
.imp-person .link { margin-left: auto; }
.field input[type="file"] { padding: 7px; }
.imp-status { margin: 0; font-size: 14px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.imp-hours summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 4px 0; }
.imp-hours[open] { display: flex; flex-direction: column; gap: 10px; }
.imp-preview:empty { display: none; }
.imp-preview {
  font-size: 14px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg);
}
.imp-preview p { margin: 0; }
.imp-preview ul { margin: 8px 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.imp-preview .hint { margin-top: 6px; }

/* Connexion ---------------------------------------------------------------------- */
.auth {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 50%),
              radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--commun) 16%, transparent), transparent 50%),
              var(--bg);
}
.auth-card {
  width: min(400px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 28px 24px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 14px;
}
.auth-tabs { display: flex; }
.auth-tabs button { flex: 1; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-msg { margin: 0; font-size: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }

/* Notification ------------------------------------------------------------------- */
.toast {
  inset: auto; left: 50%; bottom: calc(var(--nav-bottom) + 84px); transform: translateX(-50%); margin: 0;
  border: 0; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px;
  font-size: 14px; max-width: calc(100vw - 32px); box-shadow: var(--shadow);
}

/* Mobile ------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .topbar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .topbar > .brand { display: none; }
  .nav { gap: 4px; }
  .nav .btn { padding: 0 10px; }
  .nav h1 { font-size: 15px; margin-left: 4px; }
  /* Filtres : sélecteur de personne en pastilles (libellé du choix actif seulement) et
     bouton « Filtres » ; tout tient sur une ligne. */
  .filters { padding: 6px 12px 8px; gap: 6px; }
  .filter-row { flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; gap: 8px; }
  #whoSeg { flex: 0 1 auto; min-width: 0; }
  #whoSeg button { padding: 5px 10px; font-size: 13px; }
  #whoSeg button[aria-pressed="false"] .who-label { display: none; }
  .filter-btn { height: 34px; padding: 0 12px; font-size: 13px; }
  .demo-banner { margin: 0; flex-basis: 100%; text-align: center; }
  .mo-grid { grid-auto-rows: minmax(62px, auto); }
  .mo-title { font-size: 16px; padding: 12px 12px 6px; }
  :root { --day-min: calc((100vw - 52px) / 3); }
  .main.view-week.is-both { --day-min: calc((100vw - 52px) / 2); }
  .wk-scroll { scrollbar-width: none; }
  .wk-scroll::-webkit-scrollbar { display: none; }
  .mo-cell { padding: 3px; align-items: center; }
  .mo-events { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .mo-ev { padding: 0; }
  .mo-ev span, .mo-more { display: none; }
  .agenda { padding: 4px 12px var(--nav-space); }
  .tab { font-size: 10px; letter-spacing: -.1px; padding: 7px 2px 6px; }
  /* Sur téléphone, le navigateur floute le haut de l'écran (heure, encoche) : on décale
     tout le contenu sous cette zone. */
  :root { --top-gap: calc(env(safe-area-inset-top, 0px) + 8px); }
  .topbar { padding-top: var(--top-gap); }
  .auth { padding-top: calc(var(--top-gap) + 12px); }
  dialog { --dlg-top: var(--top-gap); width: calc(100vw - 16px); max-width: calc(100vw - 16px); border-radius: 18px; }
}

/* Permanences : cloche ambrée sur la journée et sur le créneau */
.pm { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; line-height: 1; vertical-align: middle; color: var(--perm); }
.pm .i { width: 14px; height: 14px; stroke-width: 2.3; }
.pm .dot { width: 6px; height: 6px; }

/* Anniversaires : gâteau sur la journée (pas d'horaire) */
.bd { display: inline-flex; align-items: center; line-height: 1; vertical-align: middle; color: #e0527a; }
.bd .i { width: 14px; height: 14px; stroke-width: 2.3; }
.ag-time .bd .i { width: 18px; height: 18px; }
.perm-tag { font-size: 12px; font-weight: 600; color: var(--perm); background: color-mix(in srgb, var(--perm) 15%, var(--surface-2)); }
.perm-tag .dot { width: 6px; height: 6px; }
.i.i-perm { color: var(--perm); stroke-width: 2.4; }


@media (max-width: 700px) {
  .off-bar { margin: 1px -4px 2px; height: 16px; font-size: 10px; padding: 0 4px; }
  .off-bar .i { display: none; }
}

/* Jours fériés */
.hol { display: block; font-size: 10px; font-weight: 600; font-style: normal; color: var(--hol); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mo-cell.is-holiday .mo-num, .wk-day.is-holiday span, .wk-day.is-holiday:not(.is-today) strong { color: var(--hol); }
.mo-cell.is-holiday:not(.is-off) { background: color-mix(in srgb, var(--hol) 5%, var(--surface)); }
.hol-tag { font-size: 12px; font-weight: 600; color: var(--hol); background: color-mix(in srgb, var(--hol) 11%, var(--surface-2)); }
.rm-day.is-holiday { color: var(--hol); }

/* Types d'horaires (Réglages) */
.shift-form { display: flex; flex-direction: column; gap: 10px; }
#shiftRows { display: flex; flex-direction: column; gap: 8px; }
.shift-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) 92px 92px 34px; gap: 6px; align-items: center; }
.shift-row .input { padding: 7px 8px; font-size: 14px; min-width: 0; }
.icon-btn.sm { width: 34px; height: 34px; }
.icon-btn.sm .i { width: 16px; height: 16px; }

/* Mes horaires : choix du type puis jours */
.rm-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-mode {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; color: var(--text);
}
.rm-mode small { color: var(--muted); font-size: 11px; }
.rm-mode .i { width: 16px; height: 16px; color: var(--accent); }
.rm-mode[aria-pressed="true"] { border-color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, var(--surface)); }
.rm-day small { font-size: 9px; font-weight: 700; line-height: 1; max-width: 100%; overflow: hidden; }
.rm-day.has-shift { background: color-mix(in srgb, var(--sc) 20%, var(--surface)); border-color: color-mix(in srgb, var(--sc) 45%, transparent); }
.rm-day.has-shift small { color: color-mix(in srgb, var(--sc) 75%, var(--text)); }
.rm-day.has-shift[aria-pressed="true"] { background: var(--sc); border-color: var(--sc); color: #fff; }
.rm-day.has-shift[aria-pressed="true"] small { color: #fff; }

@media (max-width: 700px) {
  .mo-cell .hol { display: none; }
  .shift-row { grid-template-columns: 10px minmax(0, 1fr) 78px 78px 34px; gap: 4px; }
  .shift-row .input { padding: 7px 5px; font-size: 13px; }
}

/* Réglages → Notifications */
.notif-form { display: flex; flex-direction: column; gap: 10px; }
.notif-on { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--cat-perso); }
.notif-delay { flex-direction: row; align-items: center; gap: 10px; margin-left: 26px; }
.notif-delay select { width: auto; }

/* Vacances scolaires : trait coloré en bas des cases (vue mois) et en haut des jours (vue semaine) */
.mo-cell.is-school { box-shadow: inset 0 -3px 0 var(--school); }
.wk-day.is-school { box-shadow: inset 0 3px 0 var(--school); }
.school-tag { font-size: 12px; font-weight: 600; color: var(--school); background: var(--school-bg); }

/* Rappel du planning Excel */
.work-alert {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px;
  background: var(--off-bg); color: var(--off-text); font-size: 14px; border-bottom: 1px solid var(--border);
}
.work-alert > .i { color: var(--off-text); }
.work-alert span { flex: 1 1 200px; }
.work-alert .btn { height: 32px; font-size: 13px; }

/* Modifier une date / toute la série */
.scope-seg { display: flex; }
.scope-seg button { flex: 1; }

/* Recherche */
.search-results { display: flex; flex-direction: column; gap: 6px; }
.search-hit {
  display: grid; grid-template-columns: 4px 1fr; gap: 10px; text-align: left; width: 100%;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.search-hit:hover { background: var(--surface-2); }
.search-hit strong { display: block; }
.search-hit small { color: var(--muted); font-size: 12px; }

/* Listes partagées */
#app[data-view="lists"] .filters, #app[data-view="lists"] .nav .icon-btn, #app[data-view="lists"] #todayBtn { display: none; }
.lists { max-width: 640px; margin: 0 auto; padding: 12px 16px var(--nav-space); display: flex; flex-direction: column; gap: 12px; }
.list-seg { display: flex; align-self: flex-start; }
.list-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.list-add > .input { flex: 1 1 200px; }
.list-opts { flex: 1 1 100%; order: 2; }
.list-add > .btn { order: 1; }
.li-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.li-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.li-check {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--surface); padding: 0; position: relative;
}
.li-check[aria-pressed="true"] { background: var(--cat-perso); border-color: var(--cat-perso); }
.li-check[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.li-body { flex: 1; min-width: 0; }
.li-text { overflow-wrap: anywhere; }
.li-item.is-done .li-text { text-decoration: line-through; color: var(--muted); }
.li-del { opacity: .6; }
.li-del:hover { opacity: 1; }
.li-done-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.link.danger { color: var(--danger); display: inline-flex; align-items: center; gap: 4px; }
.tag.is-late { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface-2)); }
.list-hint { font-size: 13px; }

/* Réglages : zone de vacances, restauration */
.zone-seg { display: flex; }
.zone-seg button { flex: 1; }
.restore-btn { align-self: flex-start; cursor: pointer; }

@media (max-width: 700px) {
  .tab { padding: 7px 1px 6px; }
  .tab .i { width: 21px; height: 21px; }
  .work-alert { padding: 8px 12px; }
}

/* Bouton + : menu de bulles colorées */
.dial-backdrop { position: fixed; inset: 0; z-index: 25; background: rgba(10, 12, 20, .28); }
.speed-dial {
  position: absolute; right: 0; bottom: 72px; z-index: 31;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.dial-item {
  display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; color: inherit;
  opacity: 0; transform: translateY(14px) scale(.9);
  transition: opacity .18s ease, transform .18s ease; transition-delay: calc(var(--i) * 35ms);
}
.speed-dial.is-open .dial-item { opacity: 1; transform: none; }
.dial-label {
  background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); box-shadow: var(--ctl-shadow-hover);
}
.dial-bubble {
  width: 48px; height: 48px; margin-right: 5px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dc); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--dc) 40%, transparent);
}
.dial-bubble .i { width: 22px; height: 22px; }
.dial-item:active .dial-bubble { transform: scale(.94); }
.fab .i { transition: transform .2s ease; }
.fab.is-open .i { transform: rotate(45deg); }

/* Nouvelle version disponible */
.update-banner { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--text); }
.update-banner > .i { color: var(--accent); }

/* Couleurs des événements (formulaire et réglages) */
.ev-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-color {
  width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid var(--surface);
  background: var(--c); box-shadow: 0 0 0 1px var(--border);
}
.ev-color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
.ev-color:disabled { opacity: .3; cursor: not-allowed; background: repeating-linear-gradient(45deg, var(--c) 0 4px, var(--surface) 4px 7px); }
.ev-color.auto { width: auto; padding: 0 12px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700; }
.cat-colors { display: flex; flex-direction: column; gap: 6px; }
.cat-colors-label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.cat-colors-label .i { color: var(--cc); }


/* Congés : couleur de profil de la personne (--off-me : moi, --off-other : l'autre,
   définies par app.js) ; les deux le même jour (ou « commun ») : moitié-moitié. */
:root {
  --offme-bg: color-mix(in srgb, var(--off-me, #3b82f6) 16%, var(--surface));
  --offother-bg: color-mix(in srgb, var(--off-other, #ec4899) 16%, var(--surface));
}
.mo-cell.is-off, .mo-cell.is-off:hover { background: var(--offme-bg); }
.mo-cell.is-off.is-partner, .mo-cell.is-off.is-partner:hover { background: var(--offother-bg); }
.mo-cell.is-off.is-both, .mo-cell.is-off.is-both:hover { background: linear-gradient(180deg, var(--offme-bg) 50%, var(--offother-bg) 50%); }
.off-bar {
  align-self: stretch; margin: 1px -5px 2px; height: 18px; padding: 0 6px;
  display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap;
  background: var(--off-me); color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}
.off-bar.is-partner { background: var(--off-other); }
.off-bar.is-both { background: linear-gradient(180deg, var(--off-me) 50%, var(--off-other) 50%); }
.off-bar.is-first { margin-left: 2px; border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.off-bar.is-last { margin-right: 2px; border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
.off-bar .i { width: 12px; height: 12px; stroke-width: 2.4; flex: none; }
.off-bar span { overflow: hidden; text-overflow: ellipsis; }
.wk-col.is-off { background-color: var(--offme-bg); }
.wk-col.is-off.is-partner { background-color: var(--offother-bg); }
.wk-col.is-off.is-both {
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--offme-bg) 50%, var(--offother-bg) 50%);
  background-size: 100% var(--hour), 100% 100%;
}
.chip-ev.is-off { background: var(--off-me); border-left-color: var(--off-me); color: #fff; font-weight: 700; }
.chip-ev.is-off.is-partner { background: var(--off-other); border-left-color: var(--off-other); }
.chip-ev.is-off.is-both { background: linear-gradient(180deg, var(--off-me) 50%, var(--off-other) 50%); border-left-color: var(--off-me); }
.chip-ev.is-off .i { color: #fff; }
.ag-ev.is-off { background: var(--offme-bg); border-color: color-mix(in srgb, var(--off-me) 40%, transparent); }
.ag-ev.is-off .ag-bar { background: var(--off-me); }
.ag-ev.is-off.is-partner { background: var(--offother-bg); border-color: color-mix(in srgb, var(--off-other) 40%, transparent); }
.ag-ev.is-off.is-partner .ag-bar { background: var(--off-other); }
.ag-ev.is-off.is-both { background: linear-gradient(90deg, var(--offme-bg), var(--offother-bg)); }
.ag-ev.is-off.is-both .ag-bar { background: linear-gradient(180deg, var(--off-me) 50%, var(--off-other) 50%); }

@media (max-width: 700px) {
  .off-bar { margin: 1px -4px 2px; height: 16px; font-size: 10px; padding: 0 4px; }
  .off-bar .i { display: none; }
}

/* Formulaires sur iPhone :
   - texte des champs à 16 px minimum, sinon Safari zoome toute la page au toucher d'un champ ;
   - champs date / heure : apparence native neutralisée, sinon ils s'écrasent quand ils sont vides. */
.field input[type="date"], .field input[type="time"] {
  -webkit-appearance: none; appearance: none; min-height: 42px; display: block; text-align: left;
}
.field input::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
@media (max-width: 700px) {
  .field input, .field select, .field textarea, .input { font-size: 16px; }
  .title-input { font-size: 18px; }
}

/* Fiche de lecture d'un événement */
.ev-view-title { display: flex; align-items: center; gap: 10px; }
.ev-view-title .dot { width: 12px; height: 12px; }
.ev-view-when { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; margin: 0; }
.ev-view-when .i { color: var(--muted); }
.ev-view-line { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.ev-view-line .i { color: var(--muted); }
.ev-view-notes { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px;
  padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }

/* Dans les fenêtres, le contenu défile : aucun élément ne doit être comprimé en hauteur
   (sinon la rangée de suggestions, qui défile en largeur, était écrasée sur petit écran). */
.dlg-body > * { flex-shrink: 0; }

/* === Modernisation : filtres, cartes, résumé du jour, vue mois, réglages ============== */

/* Bouton « Filtres » et son panneau */
.filter-row { position: relative; }
.filter-btn { flex: none; background: var(--ctl-bg); border: 1px solid var(--ctl-border); }
.filter-btn.is-active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.filter-count { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-text); }
.filter-pop {
  position: absolute; z-index: 45; top: calc(100% + 8px); left: 0; width: max-content; max-width: calc(100vw - 24px);
  padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--nav-shadow);
}
.filter-pop-title { flex: 1 0 100%; margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
#whoSeg .dot { width: 10px; height: 10px; }

/* Typographie : heures en chiffres alignés */
.ag-time, .ev-time, .mo-ev b, .today-bits { font-variant-numeric: tabular-nums; }

/* Blocs d'événements : fond pastel, texte foncé ; créneaux de travail habituels plus légers */
.ev { background: color-mix(in srgb, var(--c) 16%, var(--surface)); }
.ev:hover { background: color-mix(in srgb, var(--c) 24%, var(--surface)); }
.ev.is-routine {
  background: color-mix(in srgb, var(--c) 7%, var(--surface));
  border-left-width: 2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 14%, transparent);
}
.ev.is-routine .ev-title { font-weight: 500; color: var(--muted); }
.ev.is-routine:hover { background: color-mix(in srgb, var(--c) 14%, var(--surface)); }

/* Agenda : cartes aérées, une seule ligne de détails */
.ag-ev { padding: 12px 14px; border-radius: 14px; align-items: start; }
.ag-body strong { font-size: 15.5px; display: flex; align-items: center; gap: 6px; }
.ag-body strong .i { width: 15px; height: 15px; color: var(--c); flex: none; }
.ag-line { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; margin-top: 3px; font-size: 13px; color: var(--muted); }
.ag-line > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.ag-line .dot { width: 8px; height: 8px; }
.ag-line .i { width: 13px; height: 13px; }
.ag-line .sep { font-style: normal; opacity: .6; }
.ag-ev.is-routine { background: color-mix(in srgb, var(--c) 4%, var(--surface)); }
.ag-ev.is-routine strong { font-weight: 500; }
.ag-day + .ag-day { margin-top: 6px; }

/* Résumé « Aujourd'hui » en tête de l'Agenda */
.today-card {
  margin: 10px 0 14px; padding: 14px 16px; border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.today-head { display: flex; flex-direction: column; gap: 1px; }
.today-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.today-head strong { font-size: 18px; }
.today-count { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.today-bits { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.today-bits li { display: flex; align-items: center; gap: 8px; }
.today-bits .i { width: 15px; height: 15px; color: var(--accent); }


/* Réglages : rubriques repliables */
.set-group { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin-bottom: 10px; overflow: hidden; }
.set-group > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 14px;
}
.set-group > summary::-webkit-details-marker { display: none; }
.set-group > summary > .i:first-child {
  width: 34px; height: 34px; padding: 8px; border-radius: 10px; flex: none;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}
.set-group-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.set-group-text strong { font-size: 15px; }
.set-group-text small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-chev { color: var(--muted); transition: transform .2s; }
.set-group[open] > summary .set-chev { transform: rotate(90deg); }
.set-group[open] > summary { border-bottom: 1px solid var(--border); }
.set-group-body { padding: 0 14px; }
.set-group-body > .set-section:first-child { border-top: 0; }
/* Rubrique d'une seule section : son titre ferait doublon avec celui de la rubrique */
.set-group-body > .set-section:only-child > h3 { display: none; }
.set-account { border-top: 0; padding-top: 6px; }

/* Réglages : sélecteurs de thème et de zone sur toute la largeur, sans débordement */
.set-group-body { padding: 0 12px; }
.set-group-body .theme-seg, .set-group-body .zone-seg { display: flex; width: 100%; }
.set-group-body .theme-seg button, .set-group-body .zone-seg button { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; justify-content: center; }
#settingsBody { gap: 0; }
@media (max-width: 420px) {
  .set-group-body .theme-seg button { font-size: 13.5px; gap: 4px; }
  .set-group-body .theme-seg button .i { display: none; }
}

/* La bande de couleur prend toute la hauteur de la carte */
.ag-bar { align-self: stretch; min-height: 100%; }
/* Fenêtre du jour : boutons du bas sans débordement */
#dayDlg .dlg-foot { flex-wrap: wrap; gap: 8px; padding-left: 16px; padding-right: 16px; }
#dayDlg .dlg-foot .spacer { display: none; }
#dayDlg .dlg-foot .btn { flex: 1 1 auto; padding: 0 12px; }

/* === Transitions ===================================================================== */
/* Fenêtres : apparition en douceur (glissement vers le haut + léger zoom), fond qui s'assombrit ;
   fermeture : l'inverse, plus rapide (classe is-closing posée par app.js). */
@keyframes dlg-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dlg-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
dialog[open] { animation: dlg-in .26s cubic-bezier(.22, .9, .3, 1); }
dialog[open]::backdrop { animation: fade-in .26s ease; }
dialog.is-closing { animation: dlg-out .17s ease-in forwards; pointer-events: none; }
dialog.is-closing::backdrop { animation: fade-out .17s ease-in forwards; }
/* Panneau des filtres et rubriques des Réglages */
.filter-pop:not([hidden]) { animation: pop-in .18s cubic-bezier(.22, .9, .3, 1); transform-origin: top left; }
.set-group[open] > .set-group-body { animation: reveal .22s ease; }
.set-chev { transition: transform .22s cubic-bezier(.22, .9, .3, 1); }
/* Onglets de la barre du bas : changement d'état en douceur */
.tab { transition: background-color .2s ease, color .2s ease, transform .15s ease; }
.tab:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
  dialog[open], dialog[open]::backdrop, dialog.is-closing, dialog.is-closing::backdrop,
  .filter-pop:not([hidden]), .set-group[open] > .set-group-body { animation: none; }
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast:popover-open { animation: toast-in .22s cubic-bezier(.22, .9, .3, 1); }
@media (prefers-reduced-motion: reduce) { .toast:popover-open { animation: none; } }

/* Vue mois : badges (télétravail, permanence, anniversaire) à côté du numéro sur ordinateur ;
   sur téléphone, numéro centré en haut de la case, badges en petit dessous, puis les points
   des événements. La rangée des badges garde sa hauteur pour que les points restent alignés. */
.mo-badges { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 700px) {
  /* Cases plus hautes (76 px), toutes identiques. Les points (et icônes d'anniversaire et de
     sport) sont au milieu de la case, le ruban des congés (allure d'origine, 16 px, continu
     d'une case à l'autre) en bas : tout reste aligné sur la semaine. */
  .mo-grid { grid-auto-rows: 76px; }
  .mo-cell { position: relative; padding: 5px 2px 0; gap: 0; overflow: hidden; }
  .mo-top { flex-direction: column; align-items: center; gap: 1px; width: 100%; }
  .mo-num { width: 22px; height: 22px; font-size: 12.5px; }
  .mo-badges { justify-content: center; gap: 2px; height: 11px; }
  .mo-badges .i { width: 11px; height: 11px; }
  .mo-badges .dot { width: 4px; height: 4px; }
  .mo-badges .tt, .mo-badges .pm, .mo-badges .bd { gap: 1px; font-size: 10px; }
  .mo-events { position: absolute; left: 2px; right: 2px; top: 41px; margin: 0; flex-wrap: nowrap; overflow: hidden;
    gap: 3px; align-items: center; height: 10px; }
  .mo-ev { line-height: 0; }
  .mo-ev i { width: 6px; height: 6px; }
  .mo-ev > .i { width: 10px; height: 10px; }
  .mo-cell > .off-bar { position: absolute; left: 0; right: 0; top: 56px; margin: 0; height: 16px; font-size: 10px; padding: 0 4px; }
  .mo-cell > .off-bar.is-first { left: 2px; }
  .mo-cell > .off-bar.is-last { right: 2px; }
}

/* Fiche d'un créneau de travail : télétravail et permanence */
.work-tools { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.work-toggle { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 2px 0; font-weight: 600; text-align: left; }
.work-toggle > .i { color: var(--accent); }
.work-toggle > span:nth-of-type(1) { flex: 1; }
.switch { width: 40px; height: 24px; border-radius: 999px; background: var(--border); position: relative; transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s cubic-bezier(.22, .9, .3, 1); }
.work-toggle[aria-pressed="true"] .switch { background: var(--accent); }
.work-toggle[aria-pressed="true"] .switch::after { transform: translateX(16px); }
.work-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.work-actions:empty { display: none; }
.work-actions .btn { flex: 1 1 auto; height: 36px; font-size: 14px; }
.work-move { display: flex; flex-direction: column; gap: 8px; animation: reveal .2s ease; }
.work-move .btn-row { display: flex; gap: 8px; justify-content: flex-end; }

/* === Téléphone : barre de navigation « verre liquide » (reprise de Mon Butin) ==========
   Capsule flottante translucide (flou, saturation, reflet en haut, liseré de verre), onglets
   égaux aux icônes de 23 px, onglet actif à la couleur de l'app sans fond propre, posé sur
   un indicateur unique qui devient une goutte de verre au toucher (voir glassNav dans
   app.js). Le bouton + garde son allure. Ordinateur : barre habituelle. */
:root {
  --glass-bg: rgba(255, 255, 255, .5);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(0, 0, 0, .08), 0 10px 30px -14px rgba(0, 0, 0, .25);
  --glass-tab: rgba(30, 41, 59, .6);
  --glass-ind: color-mix(in srgb, var(--accent) 10%, transparent);
  --glass-ind-edge: none;
  --glass-over: color-mix(in srgb, var(--accent) 80%, #000);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-bg: rgba(28, 30, 38, .38);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .06), inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 10px 30px -12px rgba(0, 0, 0, .5);
    --glass-tab: rgba(235, 240, 250, .62);
    --glass-ind: rgba(255, 255, 255, .11);
    --glass-ind-edge: inset 0 0 0 .5px rgba(255, 255, 255, .14);
    --glass-over: color-mix(in srgb, var(--accent) 70%, #fff);
  }
}
:root[data-theme="dark"] {
  --glass-bg: rgba(28, 30, 38, .38);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .06), inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 10px 30px -12px rgba(0, 0, 0, .5);
  --glass-tab: rgba(235, 240, 250, .62);
  --glass-ind: rgba(255, 255, 255, .11);
  --glass-ind-edge: inset 0 0 0 .5px rgba(255, 255, 255, .14);
  --glass-over: color-mix(in srgb, var(--accent) 70%, #fff);
}
@media (max-width: 700px) {
  .tab-capsule {
    position: relative; height: 62px; padding: 6px; gap: 2px; border: 0; border-radius: 999px; overflow: visible;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(26px) saturate(210%) brightness(1.08); backdrop-filter: blur(26px) saturate(210%) brightness(1.08);
    box-shadow: var(--glass-shadow);
    touch-action: none; -webkit-user-select: none; user-select: none;
  }
  /* reflet en haut de la capsule */
  .tab-capsule::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 45%);
  }
  .tab {
    position: relative; z-index: 1; flex: 1 1 0; align-self: stretch; justify-content: center;
    padding: 0 1px; gap: 1px; border: 0; background: none !important; box-shadow: none;
    color: var(--glass-tab); font-size: 10px; font-weight: 600; transition: color .2s ease;
  }
  .tab .i { width: 23px; height: 23px; }
  .tab:hover { color: var(--glass-tab); }
  .tab:active { transform: none; }
  .tab[aria-pressed="true"] { color: var(--accent); }
  .tab[aria-pressed="true"] .i { stroke-width: 2.2; }
  .tab.ind-over { color: var(--glass-over); }
  /* Indicateur unique sous l'onglet actif */
  .nav-ind {
    position: absolute; top: 6px; bottom: 6px; left: 0; z-index: 0; border-radius: 999px; pointer-events: none; transform-origin: center;
    background: var(--glass-ind); box-shadow: var(--glass-ind-edge);
    transition: transform .42s cubic-bezier(.25, 1.35, .45, 1), width .3s ease, background .25s ease, box-shadow .25s ease, top .25s ease, bottom .25s ease, opacity .2s ease;
    will-change: transform;
  }
  .nav-ind.no-anim { transition: none !important; }
  /* Au toucher : goutte de verre soulevée */
  .nav-ind.lift {
    top: -1px; bottom: -1px; z-index: 2; transition: background .2s ease, box-shadow .2s ease, top .2s ease, bottom .2s ease;
    background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .08));
    -webkit-backdrop-filter: saturate(1.8) brightness(1.15); backdrop-filter: saturate(1.8) brightness(1.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(255, 255, 255, .2), inset 0 0 0 .5px rgba(255, 255, 255, .4), 0 8px 18px -10px rgba(0, 0, 0, .5);
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .nav-ind { transition: none !important; } }

/* Vue mois : case du jour bien visible (fond teinté, contour de la couleur de l'app) ;
   les congés gardent leur couleur, le trait des vacances scolaires reste visible. */
.mo-cell.is-today { box-shadow: inset 0 0 0 2px var(--accent); position: relative; z-index: 1; }
.mo-cell.is-today:not(.is-off), .mo-cell.is-today:not(.is-off):hover { background: color-mix(in srgb, var(--accent) 11%, var(--surface)); }
.mo-cell.is-today.is-school { box-shadow: inset 0 0 0 2px var(--accent), inset 0 -5px 0 var(--school); }
.mo-cell.is-today .mo-num { box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 700; }