/* Pilotage CSPK — cartes blanches sur fond gris bleuté, accent violet, pastilles par activité. */

/* Geist (SIL Open Font License, voir fonts/Geist-LICENSE.txt) : police variable 100–900, embarquée, aucun appel réseau. */
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces */
  --bg: #F5F6FA;
  --card: #FFFFFF;
  --border: #E6E8F0;
  --inset: #F7F8FB;
  --track: #F1F2F7;

  /* Texte */
  --text: #0E1222;
  --text-2: #5B6175;
  --text-3: #8A90A2;

  /* Accent */
  --accent: #5B47FB;
  --accent-soft: #EEEBFF;
  --accent-ink: #4A36E8;

  /* États : texte sur fond */
  --ok: #0E7A4D;      --ok-bg: #E3F6EC;
  --warn: #5C3D00;    --warn-bg: #FFF6E0;
  --warn-line: #E2B33B; /* pointillés jaunes « À pourvoir » (décor ; le texte porte le sens) */
  --block: #A3241C;   --block-bg: #FDECEC;

  /* Pastilles d'activité : texte sur fond */
  --act-bl: #1D5BD8;        --act-bl-bg: #E8F1FF;
  --act-of: #B4441A;        --act-of-bg: #FFEEE6;
  --act-continu: #4A36E8;   --act-continu-bg: #EEEBFF;
  --act-sd: #3A4055;        --act-sd-bg: #F1F2F7;
  --act-retours: #0B6B73;   --act-retours-bg: #E6F7F8;
  --act-chargement: #A3245E; --act-chargement-bg: #FDEBF3;

  /* Typographie */
  --font: 'Geist', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-page: 52px;
  --fs-kpi: 56px;

  /* Formes */
  --r-card: 24px;
  --r-inner: 14px;
  --r-pill: 999px;
  --tap: 44px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);

  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-family: var(--font); font-weight: 600; line-height: 1.15; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-size: clamp(34px, 4vw + 18px, var(--fs-page)); line-height: 1.05; letter-spacing: -2px; }
h2 { font-size: 1.3rem; letter-spacing: -.02em; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .6rem; }
a { color: var(--accent-ink); }
small { color: var(--text-2); }
.muted, .muted * { color: var(--text-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.print-only { display: none; }
.loading { padding: 2rem; color: var(--text-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Contrôles ---------- */
/* Bouton secondaire : blanc bordé. .primary : noir. .accent : action forte, violet. */
button, .button, label.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: var(--tap); padding: .5rem 1.1rem;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); color: var(--text);
  font: 500 .92rem var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
button:hover, .button:hover { border-color: #C9CDDB; background: var(--inset); }
button.primary, .button.primary { background: var(--text); border-color: var(--text); color: #fff; }
button.primary:hover, .button.primary:hover { background: #262B3D; border-color: #262B3D; }
button.accent, .button.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
button.accent:hover, .button.accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
button.danger { color: var(--block); border-color: #F3C4C0; }
button.danger:hover { background: var(--block-bg); border-color: var(--block); }
button.link { border: 0; background: none; min-height: 0; padding: 0; color: var(--accent-ink); text-decoration: underline; font-weight: 600; border-radius: 4px; }
button.link:hover { background: none; }
button.icon, .button.icon { min-width: var(--tap); padding: 0 .5rem; font-size: 1.3rem; line-height: 1; }
button:disabled { opacity: .45; cursor: default; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--text-3); border-radius: 12px;
  padding: .5rem .75rem; min-height: var(--tap); max-width: 100%;
}
/* Contour des champs en --text-3 (3,2:1) : un champ doit rester repérable (WCAG 1.4.11). Indications en --text-2 (AA). */
input::placeholder, textarea::placeholder { color: var(--text-2); }
textarea { width: 100%; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.field label { font-weight: 600; font-size: .9rem; }
.field small { font-size: .8rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }
.form-grid .span { grid-column: 1 / -1; }
.form-error { color: var(--block); min-height: 1.2em; font-weight: 600; }
fieldset.checks { border: 1px solid var(--border); border-radius: var(--r-inner); padding: .5rem .8rem; margin: 0 0 .8rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
fieldset.checks legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
.check-item { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tap); }
.check-item input { min-height: 0; width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- Connexion ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; background: var(--bg); }
.login-card { width: min(440px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 2.25rem 2rem 2rem; }
.login-card h1 { font-size: 34px; letter-spacing: -1px; margin-bottom: .6rem; }
.login-card button.primary { width: 100%; margin-top: .4rem; }
.login-card button.link { display: flex; min-height: var(--tap); margin: .6rem auto 0; padding: 0 .5rem; }
.login-mark { margin-bottom: 1.4rem; }
.login-mark .logo { display: block; }

/* ---------- Coquille ---------- */
/* Menu : pilule blanche flottante en haut. Téléphone (< 900 px) : onglets en pilule flottante en bas. */
.app { min-height: 100vh; }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 60; background: var(--text); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + .75rem); }
.icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.topbar {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  width: min(1440px, calc(100% - 48px)); margin: calc(env(safe-area-inset-top, 0px) + 12px) auto 0; padding: 6px 6px 6px 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-pill); box-shadow: var(--shadow-card);
}
.brand { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-width: var(--tap); min-height: var(--tap); padding-right: .5rem; flex: none;
  color: var(--text); text-decoration: none; font-weight: 600; letter-spacing: -.02em; border-radius: var(--r-pill); }
.mainnav { display: flex; gap: 2px; padding: 4px; margin-inline: auto; background: var(--track); border-radius: var(--r-pill); }
.nav-link { display: inline-flex; align-items: center; gap: .45rem; min-height: var(--tap); padding: 0 1rem; border-radius: var(--r-pill);
  color: var(--text-2); text-decoration: none; font-weight: 500; white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s; }
.nav-link:hover { color: var(--text); }
.nav-link[aria-current] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .06); }
.account { display: flex; align-items: center; gap: .5rem; flex: none; margin-left: auto; }

.sync { width: 10px; height: 10px; margin: 0 .5rem; border-radius: 50%; background: var(--text-3); flex: none; }
.sync[data-state='ok'] { background: var(--ok); }
.local-status { display: inline-flex; align-items: center; gap: .45rem; min-height: var(--tap); padding: 0 1rem; border-radius: var(--r-pill);
  font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; background: var(--ok-bg); color: var(--ok); }
.local-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.local-status[data-state='browser'] { background: var(--warn-bg); color: var(--warn); }
.local-status[data-state='error'] { background: var(--block-bg); color: var(--block); }

.account-wrap { position: relative; }
.avatar-btn { gap: .2rem; min-height: var(--tap); padding: 4px 10px 4px 4px; border: 0; background: transparent; color: var(--text-2); }
.avatar-btn:hover, .avatar-btn[aria-expanded='true'] { background: var(--track); }
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; font-size: .85rem; letter-spacing: .02em; }
.avatar.lg { width: 44px; height: 44px; font-size: 1rem; }
.avatar-btn.current .avatar { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
.account-menu { position: absolute; right: 0; top: calc(100% + 12px); z-index: 30; width: min(280px, calc(100vw - 24px)); padding: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .14); }
.account-who { display: flex; align-items: center; gap: .75rem; padding: .6rem .6rem .9rem; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.account-who b, .account-who small { display: block; line-height: 1.3; }
.account-menu ul { list-style: none; margin: 0; padding: 0; }
.menu-item, button.menu-item { display: flex; align-items: center; justify-content: flex-start; gap: .65rem; width: 100%; min-height: var(--tap); padding: 0 .75rem;
  border: 0; border-radius: 12px; background: transparent; color: var(--text); font: 500 .92rem var(--font); text-decoration: none; }
.menu-item:hover, button.menu-item:hover { background: var(--inset); }
.menu-item[aria-current] { background: var(--accent-soft); color: var(--accent-ink); }

.local-card button { width: 100%; margin-top: .5rem; }
.local-card button.link { width: auto; }
.small { font-size: .84rem; margin-top: .3rem; }
.content { width: min(1440px, calc(100% - 48px)); margin: 0 auto; padding: 2.5rem 0 4rem; }
.content:focus { outline: none; }
.tabbar { display: none; }

/* Largeurs intermédiaires : on allège la barre avant de passer aux onglets du bas. */
@media (max-width: 1279px) {
  .local-status { width: var(--tap); padding: 0; justify-content: center; font-size: 0; }
  .local-status::before { width: 10px; height: 10px; }
}
@media (max-width: 1099px) {
  .brand-name, .nav-link .icon { display: none; }
  .nav-link { padding: 0 .85rem; }
}

/* ---------- En-tête de page ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin: 0 0 2rem; }
.page-title { flex: 1 1 26rem; min-width: 0; }
.page-head h1 { margin: 0; }
.page-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .9rem; color: var(--text-2); font-weight: 500; }
.page-sub { margin: .8rem 0 0; max-width: 70ch; color: var(--text-2); font-size: 1rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.stepper { display: inline-flex; gap: .3rem; align-items: center; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
section { margin-bottom: 1.8rem; }

/* ---------- Cartes, badges ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 1.5rem 1.75rem; }
/* État vide d'une page ; .empty sert aussi aux cases « À pourvoir » (.slot) et au tiret des KPI (b.value). */
div.empty:not(.slot) { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 2rem 1.75rem; margin-bottom: 1.25rem; }
div.empty:not(.slot) p:last-child { margin-bottom: 0; }
details > summary { cursor: pointer; font-weight: 600; padding: .3rem 0; border-radius: 6px; }
.badge { display: inline-flex; align-items: center; gap: .4rem; min-height: 28px; padding: 0 .75rem; border-radius: var(--r-pill);
  background: var(--track); color: var(--text-2); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.badge.ok, .badge.warn, .badge.block, .badge.accent { padding-left: .65rem; }
.badge.ok::before, .badge.warn::before, .badge.block::before, .badge.accent::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.block { background: var(--block-bg); color: var(--block); }
.badge.accent { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- Tableaux ---------- */
/* Tableaux de liste (Imports, Équipe, Archives, Administration) : sans cadre, lignes séparées. */
table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.list thead th { padding-top: 0; font-size: .8rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
table.list tbody tr:last-child > * { border-bottom: 0; }
table.list tbody th { font-weight: 600; }
table.list tr.inactive { color: var(--text-2); }
table.list.compact th, table.list.compact td { padding: .45rem .55rem; }
table.list.compact input { width: 5rem; }
table.list td, table.list tbody th { vertical-align: middle; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; white-space: nowrap; }
.badge.inline { margin-left: .5rem; }

/* Liste dans une carte (Absences, Équipe, Archives). */
.list-card { margin-bottom: 1.25rem; }
.list-card > h2 { font-size: 1.1rem; margin-bottom: .9rem; }
.list-card > summary, .versions > summary { padding: .65rem 0; } /* list-item : garde la flèche de dépliage */
details.list-card[open] > summary { margin-bottom: .75rem; }

/* Téléphone : chaque ligne d'un tableau .stack devient une fiche (intitulés repris de data-label). */
@media (max-width: 700px) {
  table.list.stack, table.list.stack tbody, table.list.stack tr, table.list.stack th, table.list.stack td { display: block; }
  table.list.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.list.stack tr { padding: .9rem 0; border-bottom: 1px solid var(--border); }
  table.list.stack tbody tr:last-child { border-bottom: 0; }
  table.list.stack th, table.list.stack td { padding: .2rem 0; border: 0; }
  table.list.stack td[data-label]::before { content: attr(data-label) ' : '; color: var(--text-2); font-size: .82rem; }
  table.list.stack .row-actions { justify-content: flex-start; padding-top: .5rem; }
}
.grid-wrap { overflow-x: auto; }

/* ---------- AIC ---------- */
/* Pastilles d'activité (texte sur fond pastel, AA). */
.act { display: inline-flex; align-items: center; min-height: 28px; padding: 0 .75rem; border-radius: var(--r-pill); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.act-bl { --act: var(--act-bl); --act-bg: var(--act-bl-bg); }
.act-of { --act: var(--act-of); --act-bg: var(--act-of-bg); }
.act-continu { --act: var(--act-continu); --act-bg: var(--act-continu-bg); }
.act-sd { --act: var(--act-sd); --act-bg: var(--act-sd-bg); }
.act-retours { --act: var(--act-retours); --act-bg: var(--act-retours-bg); }
.act-chargement { --act: var(--act-chargement); --act-bg: var(--act-chargement-bg); }
.act[class*='act-'] { background: var(--act-bg); color: var(--act); }

/* Bandeaux dans une carte : alerte (jaune), bloquant (rouge). */
.alert { display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1.1rem; margin: 0 0 1.25rem; border-radius: var(--r-inner); }
.alert > .icon { margin-top: 2px; }
.alert > div, .alert > p { flex: 1; min-width: 0; margin: 0; }
.alert p { margin: 0; }
.alert.warn { background: var(--warn-bg); color: var(--warn); }
.alert.warn a.button { margin-left: auto; }
.alert.block { background: var(--block-bg); color: var(--block); }
.banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem .8rem .7rem 1.25rem; margin-bottom: 1.25rem;
  border-radius: var(--r-inner); background: var(--accent-soft); color: var(--text); }
.banner p { margin: 0; }

/* ---------- AIC ---------- */
/* Frise « Préparation » : 4 étapes, la courante en violet. */
.prep { margin: 0 0 1.25rem; }
.prep-title { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .6rem; font-size: .9rem; font-weight: 600; letter-spacing: 0; color: var(--text); }
.prep-title span { color: var(--text-2); font-weight: 500; }
.prep ol { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.prep li button { display: flex; align-items: center; justify-content: flex-start; gap: .75rem; width: 100%; min-height: 60px; padding: .55rem .9rem;
  border: 0; border-radius: 18px; background: transparent; text-align: left; white-space: normal; }
.prep li button:hover { background: var(--inset); }
.prep li.current button { background: var(--accent-soft); }
.prep-dot { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--track); color: var(--text-2); font-size: .85rem; font-weight: 600; }
.prep li.done .prep-dot { background: var(--ok-bg); color: var(--ok); }
.prep li.done.warn .prep-dot { background: var(--warn-bg); color: var(--warn); }
.prep li.current .prep-dot { background: var(--accent); color: #fff; }
.prep-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.prep-text b { font-weight: 600; color: var(--text); }
.prep-text small { font-size: .8rem; color: var(--text-2); }
.prep li.current .prep-text small { color: var(--accent-ink); }

.aic-block { margin-bottom: 1.25rem; }
.block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem 1.5rem; margin-bottom: 1.1rem; }
.block-head h2 { margin: 0; font-size: 1.35rem; }
.block-head h2:focus { outline: none; }
.source { margin: .35rem 0 0; color: var(--text-2); font-size: .88rem; }
.results-date { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-weight: 600; }
.footnotes { margin-top: 1rem; font-size: .88rem; color: var(--text-2); }
details.check > summary { padding: .7rem 0; color: inherit; }
details.check ul { margin: 0 0 .4rem; padding-left: 1.2rem; color: var(--text); }
.alert details.check > summary { padding: .45rem 0; }

/* Cartes KPI BL, OF, DT CONTINU : valeur, objectif, barre avec repère, détail. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.kpi { display: flex; flex-direction: column; padding: 1.25rem 1.3rem 1.1rem; border-radius: var(--r-inner); background: var(--inset); }
.kpi-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.kpi-head h3 { margin: 0; font-size: .9rem; }
.kpi-figure { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0 .1rem; }
.kpi .value { font-size: var(--fs-kpi); font-weight: 600; line-height: 1; letter-spacing: -2px; color: var(--text); }
.kpi .value.empty { color: var(--text-2); }
.kpi .unit { color: var(--text-2); font-weight: 500; }
.kpi-target { margin: 0; color: var(--text-2); font-size: .9rem; }
.meter { position: relative; height: 10px; margin: 1rem 0 .9rem; border-radius: var(--r-pill); background: var(--border); }
.meter-fill { position: absolute; top: 0; bottom: 0; left: 0; min-width: 10px; border-radius: var(--r-pill); background: var(--act); }
.meter-target { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--inset); }
.kpi-details { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 0; }
.kpi-details div { display: flex; flex-direction: column; }
.kpi-details dt { font-size: .78rem; color: var(--text-2); }
.kpi-details dd { margin: 0; font-weight: 600; }
.pallets { margin: .6rem 0 0; font-size: .88rem; color: var(--text-2); }
.kpi .small { margin: .2rem 0 0; }

/* On Time et charge du jour côte à côte. */
.aic-pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 1.25rem; margin-bottom: 1.25rem; }
.aic-pair > .aic-block { margin-bottom: 0; }
.ontime-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.ontime { padding: 1rem 1.1rem; border-radius: var(--r-inner); background: var(--inset); }
.ontime-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.ontime h3 { margin: 0; font-size: 1rem; }
.ontime p { margin: .5rem 0 0; font-size: .88rem; }
.ontime-value .big { font-size: 2.2rem; font-weight: 600; letter-spacing: -1px; }
.input-pct { display: inline-flex; align-items: center; gap: .45rem; font-size: 1.5rem; font-weight: 600; color: var(--text-2); }
.input-pct input { width: 100%; max-width: 8.5rem; min-height: 56px; padding: .3rem .8rem; font-size: 1.9rem; font-weight: 600; letter-spacing: -1px; }
table.charge { width: 100%; border-collapse: collapse; }
table.charge th, table.charge td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--border); }
table.charge thead th { padding-top: 0; font-size: .8rem; font-weight: 600; color: var(--text-2); }
table.charge tbody tr:last-child > * { border-bottom: 0; }
table.charge tbody th { font-weight: 600; white-space: nowrap; }
table.charge input { width: 7.5rem; }
.block-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-top: 1rem; }
.stamp { margin: 0; font-size: .85rem; color: var(--text-2); }
.private { border-style: dashed; box-shadow: none; }
.moves ul { padding-left: 1.2rem; }

@media (max-width: 1099px) {
  .aic-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .prep ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { padding: 1.25rem; }
}
@media (max-width: 480px) {
  .prep li button { padding: .5rem .6rem; gap: .55rem; }
  .card { padding: 1.1rem 1rem; border-radius: 20px; }
  .kpi { padding: 1.1rem; }
  table.charge th, table.charge td { padding: .4rem .35rem; }
}

/* ---------- Planning ---------- */
.issues { display: grid; gap: .6rem; margin-bottom: 1.25rem; }
.issues .alert { margin: 0; }
.alert.ok { background: var(--ok-bg); color: var(--ok); }
.alert.accent { background: var(--accent-soft); color: var(--accent-ink); }
.alert ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.absent-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.absent-line + .absent-line { margin-top: .5rem; }
.absent-line > span { color: var(--text); }

.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; }
.title-badges { display: flex; flex-wrap: wrap; gap: .4rem; }

.posts-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.25rem; }
.posts-panel h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
.posts-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin: 0 0 .45rem; }
.posts { display: flex; flex-wrap: wrap; gap: .35rem; }
.posts-panel .small { margin: 0; }

.view-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin: 0 0 1rem; }
.segmented { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--track); }
.segmented button { border: 0; background: transparent; color: var(--text-2); }
.segmented button:hover { background: transparent; color: var(--text); }
.segmented button[aria-pressed='true'] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .06); }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .82rem; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: .45rem; }
.swatch { width: 20px; height: 14px; border-radius: 5px; flex: none; }
/* Vide : neutre (effectif habituel, pas une obligation) ; non tenu : gris plein, sans alerte. */
.swatch.block { border: 1.5px solid var(--block); background: var(--block-bg); }
.swatch.proposal { border: 1.5px dashed var(--accent); background: var(--card); }

.shift .block-head h2 .muted { font-size: .95rem; font-weight: 400; letter-spacing: 0; }
table.week-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; }
table.week-grid th, table.week-grid td { padding: .4rem; border-bottom: 1px solid var(--border); vertical-align: middle; text-align: left; }
table.week-grid thead th { padding-top: 0; font-size: .82rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
table.week-grid thead th small { display: block; font-size: .74rem; font-weight: 500; color: var(--warn); }
/* Jour férié ou fermé : colonne grisée, sans case (« Férié — fermé » dans l'en-tête). */
table.week-grid .closed-day { background: repeating-linear-gradient(135deg, var(--track) 0 6px, var(--inset) 6px 12px); }
table.week-grid thead th.closed-day { border-radius: 10px 10px 0 0; padding-top: .3rem; }
table.week-grid thead th.closed-day small { color: var(--text-2); font-weight: 600; }
.day-card.closed-day { background: var(--track); }
.day-card.closed-day p { margin: .25rem 0 0; color: var(--text-2); font-weight: 600; }
.day-card.closed-day p small { font-weight: 500; }
table.week-grid tbody th { width: 11rem; font-weight: 600; white-space: nowrap; }
table.week-grid tbody tr:last-child > * { border-bottom: 0; }
/* Vue par poste : colonnes de jours égales (« Pourquoi ? » ouvert ne déforme pas la grille). */
table.week-grid.by-role { table-layout: fixed; }
table.week-grid.by-role thead th:first-child { width: 11rem; }

/* Personnes : initiale en violet (décor), distincte des couleurs de poste ; le nom reste le texte. */
.person, .slot-name { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; }
.person::before, .slot-name[data-initial]::before {
  content: attr(data-initial); content: attr(data-initial) / ''; /* texte alternatif vide : l'initiale n'est pas lue */
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent-ink); font-size: .78rem; font-weight: 600;
}
.slot-name[data-initial]::before { width: 24px; height: 24px; font-size: .72rem; }
table.by-person tbody th small { display: block; margin-left: calc(28px + .55rem); font-size: .76rem; font-weight: 400; color: var(--text-2); white-space: normal; }

/* Pastilles de poste (couleurs d'activité). */
.chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 .65rem; border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 600; white-space: nowrap; background: var(--act-bg, var(--track)); color: var(--act, var(--text)); }
.act-neutral { --act: var(--text); --act-bg: var(--track); }
/* Répartition du jour : personnes par poste, information seulement. */
.repartition-list { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.repartition-list .chip { min-height: 22px; padding: 0 .5rem; font-size: .76rem; }
.repartition-list li.only-proposed .chip { background: var(--card); border: 1.5px dashed var(--accent); }
.chip.r-absence { background: var(--track); color: var(--text-2); font-weight: 500; }
.chip.r-off { background: transparent; color: var(--text-2); font-weight: 500; border: 1px dashed var(--text-3); }

/* Case de la vue par poste et des cartes du téléphone. */
.slot { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: .4rem .6rem;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--card); }
.slot select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; }
.slot:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.slot small { padding-left: calc(24px + .55rem); font-size: .76rem; color: var(--text-2); }
.slot.empty { border-style: dashed; border-color: var(--text-3); background: var(--card); }
.slot.empty .slot-name { color: var(--text-2); }
.slot.not-held { background: var(--track); border-color: var(--track); }
.slot.not-held .slot-name { color: var(--text-2); font-weight: 500; }
.slot.empty small { padding-left: 0; }
.slot.block { border-color: var(--block); background: var(--block-bg); }
.slot.block small { color: var(--block); font-weight: 600; }
.slot.warn { border-color: var(--warn-line); background: var(--warn-bg); }
.slot.absent { background: var(--inset); }
.slot.absent .slot-name { color: var(--text-2); }

/* Barres : une par affectation, étendue sur les jours consécutifs identiques (colspan).
   Couleur du poste ; gris clair = absent ou indisponible ; pointillés violets = à accepter ;
   pointillés jaunes = à pourvoir ; rouge = compétence manquante (seul bloquant). */
table.week-grid.by-person { table-layout: fixed; }
table.week-grid.by-person thead th:first-child { width: 11rem; }
table.week-grid td.seg { padding: .3rem .25rem; }
.bar { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; padding: .3rem .65rem;
  border: 1.5px solid transparent; border-radius: 12px; background: var(--act-bg, var(--track)); color: var(--act, var(--text)); }
.bar-line { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.bar-main { display: flex; align-items: center; justify-content: flex-start; gap: .4rem; flex: 1 1 auto; min-width: 0; min-height: 28px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: inherit; font: 600 .86rem/1.25 var(--font); text-align: left; white-space: normal; }
button.bar-main { cursor: pointer; }
button.bar-main:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
button.bar-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bar-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .3rem; min-width: 0; }
.bar small { font-size: .74rem; font-weight: 500; line-height: 1.25; color: var(--text-2); }
.bar .slot-name { font-weight: 600; color: var(--text); }
.bar.k-coord { --act: var(--text); --act-bg: var(--track); }
.bar.k-off { background: var(--inset); color: var(--text-2); border-color: var(--border); }
.bar.k-off .bar-main, .bar.k-off .slot-name { color: var(--text-2); font-weight: 500; }
.bar.k-free { background: none; color: var(--text-3); }
.bar.k-free .bar-main { justify-content: center; font-weight: 400; }
.bar.k-empty { background: var(--card); border: 1.5px dashed var(--text-3); color: var(--text-2); }
.bar.k-empty .slot-name, .bar.k-empty .bar-main { color: var(--text-2); }
.bar.k-not-held { background: var(--track); color: var(--text-2); }
.bar.k-not-held .bar-main { font-weight: 500; }
.bar.k-block { background: var(--block-bg); border-color: var(--block); color: var(--block); }
.bar.k-block small { color: var(--block); font-weight: 600; }
.bar.k-proposed { background: var(--card); border: 1.5px dashed var(--accent); }
.accept-tag { color: var(--accent-ink); font-weight: 500; }
.bar .prop-actions { margin-top: 1px; }

/* Ponctuel : un point, détail au survol ou au toucher (focus). Zone de 24 px pour le doigt. */
.role-head { display: inline-flex; align-items: center; gap: .15rem; }
.swatch.off { background: var(--inset); border: 1px solid var(--border); }

/* Ligne Coordination (en tête), ligne « À pourvoir » et couverture (pied). */
table.week-grid tr.coord-row > * { background: var(--inset); }
table.week-grid tr.coord-row th { color: var(--text); }
table.week-grid tfoot th, table.week-grid tfoot td { border-top: 2px solid var(--border); border-bottom: 0; vertical-align: top; }
table.week-grid tfoot tr + tr > * { border-top: 1px solid var(--border); }
.move { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; font-size: .82rem; margin: 0 0 .2rem; text-align: left; }
.move small { flex-basis: 100%; color: var(--text-2); }
.move button.link { min-height: 24px; }

/* Encart « À régler cette semaine » : toutes les décisions, une ligne chacune. */
.decisions { margin-bottom: 1.25rem; }
.decisions-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin-bottom: .6rem; }
.decisions-head h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.decisions-head p { margin: 0; }
.decision-list { display: grid; margin: 0; padding: 0; list-style: none; }
.decision { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; gap: .4rem 1rem; padding: .65rem 0; border-top: 1px solid var(--border); }
.decision > .chip { justify-self: start; }
.decision p { margin: 0; }
.decision-text { min-width: 0; }
.decision-proposal { color: var(--accent-ink); }
.decision-proposal b { padding: 0 .4rem; border: 1.5px dashed var(--accent); border-radius: 8px; }
.decision-reason { font-size: .86rem; color: var(--text-2); }
.decision.block .decision-reason { color: var(--block); font-weight: 500; }
.decision-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .3rem .8rem; }
.decision-actions .prop-actions { font-size: .82rem; }
.decision-actions details.why { position: relative; }
.decision-actions details.why[open] { flex-basis: auto; }
.decision-actions details.why p { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; width: min(22rem, 80vw); box-shadow: 0 8px 24px rgba(16, 24, 40, .14); }
.decision-actions button.link { min-height: 24px; }
.auto-line { display: flex; align-items: flex-start; gap: .5rem; margin: .4rem 0 0; padding: .65rem .85rem; border-radius: 12px; background: var(--ok-bg); font-size: .88rem; }
.auto-line .icon { flex: none; margin-top: 1px; color: var(--ok); }
.auto-line span { color: var(--text); }
.auto-line b { color: var(--ok); }

/* Menu « Plus ⋯ » de l'en-tête. */
.more-actions { position: relative; }
.more-actions summary { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 1.1rem; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--card); color: var(--text); font-weight: 500; cursor: pointer; list-style: none; white-space: nowrap; }
.more-actions summary::-webkit-details-marker { display: none; }
.more-actions summary:hover, .more-actions[open] summary { background: var(--inset); }
.more-actions-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: max-content; min-width: 15rem; padding: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .14); }
.day-cards { display: none; }

.team-note textarea { min-height: 3rem; }
.week-absences h2, .team-note h2 { font-size: 1.1rem; }
.week-absences ul { display: grid; margin: 0; padding: 0; list-style: none; }
.week-absences li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.week-absences li:last-child { border-bottom: 0; }
.versions { margin: 0 0 1.25rem; }
.versions ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* Fenêtre de remplacement : candidats classés, puis affectation par jour. */
.candidates { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.candidate { display: flex; align-items: center; gap: .75rem; min-height: var(--tap); padding: .65rem .9rem; border: 1.5px solid var(--border); border-radius: var(--r-inner); cursor: pointer; }
.candidate:hover { background: var(--inset); }
.candidate:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.candidate input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--accent); flex: none; }
.candidate-rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; background: var(--track); color: var(--text-2); font-size: .78rem; font-weight: 600; }
.candidate-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.candidate-name { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.candidate-body small { color: var(--text-2); }
.per-day-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .3rem 0; }
.proposal-tag { padding: 0 .5rem; border: 1.5px dashed var(--accent); border-radius: 8px; color: var(--accent-ink); font-weight: 600; }

/* Proposition du planning prévisionnel : pointillés violets, « Pourquoi ? » et « Accepter » au-dessus du choix. */
.slot.proposed { border: 1.5px dashed var(--accent); background: var(--card); }
.prop-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; font-size: .76rem; line-height: 1.3; }
.slot .prop-actions { padding-left: calc(24px + .55rem); }
.prop-tag { color: var(--accent-ink); font-weight: 600; }
details.why summary { display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; list-style: none; color: var(--accent-ink); font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px; }
details.why summary::-webkit-details-marker { display: none; }
details.why[open] { flex-basis: 100%; }
details.why p { margin: .15rem 0 .2rem; padding: .35rem .5rem; border-radius: 8px; background: var(--accent-soft); color: var(--text); text-align: left; white-space: normal; }
button.accept { min-height: 24px; padding: 0 .6rem; border-radius: 8px; font-size: .76rem; }
.changes { display: grid; gap: .45rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.changes li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.changes s { color: var(--text-2); }
.modal .changes + p { margin-top: 1rem; }
.toast .link { color: #fff; text-decoration: underline; min-height: 24px; padding: 0; border: 0; background: none; font-size: inherit; }

/* Prochaines semaines : encart Équité, puis une carte par semaine. */
.fc-weeks { display: grid; gap: 1.25rem; min-width: 0; }
.equity { margin-bottom: 1.25rem; }
.fc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin-bottom: .9rem; }
.fc-head h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.fc-head h2 .muted { font-size: .95rem; font-weight: 400; }
.fc-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.fc-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.fc-week .grid-wrap + .grid-wrap { margin-top: .9rem; }
/* Colonnes de jours égales : ouvrir « Pourquoi ? » n'élargit pas la colonne. */
table.fc-grid { min-width: 680px; table-layout: fixed; }
table.fc-grid thead th:first-child, table.fc-grid tbody th { width: 8.5rem; }
table.fc-grid thead th:first-child { color: var(--text); }
.equity .segmented { flex-wrap: wrap; }
.equity-table th, .equity-table td { white-space: nowrap; }
.equity-table { max-width: 860px; }
.rate { display: inline-flex; align-items: center; gap: .5rem; }
.rate-bar { display: inline-block; width: 64px; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.rate-bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.recalc-last { background: var(--inset); color: var(--text); }
/* Téléphone : cibles tactiles pleine taille dans les cartes du jour. */
@media (max-width: 860px) {
  .day-card button.accept, .day-card details.why summary { min-height: var(--tap); }
  .day-card button.accept { padding: 0 1rem; }
  .day-card .slot .prop-actions { padding-left: 0; }
  .forecast .day-row { grid-template-columns: 6.25rem minmax(0, 1fr); }
}
/* Téléphone : une semaine dépliée à la fois ; les autres montrent leur résumé. Sans effet ailleurs. */
.fc-summary, .fc-toggle { display: none; }
@media screen and (max-width: 860px) {
  .fc-week.folded .fc-body, .fc-week.folded .fc-actions, .fc-week.folded .fc-badges { display: none; }
  .fc-week.folded .fc-head { margin-bottom: 0; }
  .fc-week.folded .fc-summary { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: 0; color: var(--text-2); font-size: .92rem; }
  .fc-summary b { color: var(--text); font-weight: 600; }
  .fc-summary .warn { color: var(--warn); font-weight: 600; }
  .fc-toggle { display: inline-flex; width: 100%; min-height: var(--tap); gap: .4rem; }
  .fc-week { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 84px); }
  .fc-week .fc-head > div:first-child { flex: 1 1 100%; }
}

/* ---------- Divers ---------- */
/* Zone de dépôt : le champ fichier est masqué, son focus clavier se voit sur l'étiquette qui suit. */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 2.25rem 1.25rem; margin-bottom: 1.25rem; cursor: pointer; text-align: center;
  border: 1.5px dashed var(--accent); border-radius: var(--r-card); background: var(--card); color: var(--text-2); transition: background-color .15s; }
.dropzone:hover, .dropzone.over { background: var(--accent-soft); }
.dropzone b { font-size: 1.1rem; font-weight: 600; color: var(--accent-ink); }
.dropzone-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: .35rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
input.sr-only:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Résultat d'un import : réussite (vert) ou échec (rouge), « Rien n'a été modifié ». */
.result { display: flex; align-items: flex-start; gap: .9rem; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; border-radius: var(--r-card); }
.result > .icon { margin-top: 3px; }
.result > div { flex: 1; min-width: 0; }
.result h2 { font-size: 1.2rem; margin-bottom: .4rem; }
.result p, .result ul { color: var(--text); }
.result ul { padding-left: 1.2rem; margin: 0 0 .8rem; }
.result.good { background: var(--ok-bg); color: var(--ok); }
.result.bad { background: var(--block-bg); color: var(--block); }
input[type='search'] { width: min(480px, 100%); }

/* ---------- Archives ---------- */
.search-field { position: relative; display: flex; align-items: center; width: min(480px, 100%); margin-bottom: 1.25rem; }
.search-field .icon { position: absolute; left: 1rem; color: var(--text-2); pointer-events: none; }
.search-field input { width: 100%; padding-left: 2.75rem; border-radius: var(--r-pill); }
.archive-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1.25rem; align-items: start; }
.archive-cols > .list-card { margin-bottom: 0; }
.list-card > h2 .count { margin-left: .5rem; padding: .05rem .55rem; border-radius: var(--r-pill); background: var(--track); color: var(--text-2); font-size: .8rem; font-weight: 600; vertical-align: middle; }
ul.archive-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.archive-item, button.archive-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .2rem .6rem; width: 100%; min-height: var(--tap);
  padding: .55rem .8rem; border: 0; border-radius: var(--r-inner); background: transparent; color: var(--text); font: inherit; text-align: left; text-decoration: none; white-space: normal; }
.archive-item:hover, button.archive-item:hover { background: var(--inset); }
.archive-item[aria-current] { background: var(--accent-soft); }
.archive-item .badge { margin-left: auto; }
.archive-detail { margin-top: 1.25rem; scroll-margin-top: 96px; }
.archive-detail .block-head h2:focus { outline: none; }
.version-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.version-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
table.week-grid caption { caption-side: top; padding: .4rem 0 .6rem; text-align: left; font-weight: 600; }
table.readonly td { white-space: nowrap; }
.month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 1rem; margin: .8rem 0; }

/* ---------- Paramètres ---------- */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 1.25rem; align-items: start; }
.settings-card > h2 { font-size: 1.1rem; margin-bottom: 1.1rem; }
.settings-card h3 { margin: 1.1rem 0 .6rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.settings-card > :last-child { margin-bottom: 0; }
.form-grid.hours { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
fieldset.checks.holidays .check-item small { color: var(--text-2); }
fieldset.checks.days .check-item { padding: 0 .9rem 0 .7rem; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--inset); cursor: pointer; }
fieldset.checks.days .check-item:has(input:checked) { border-color: var(--accent-soft); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
fieldset.checks.days .check-item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
fieldset.checks.days .check-item input:focus-visible { outline: none; }
fieldset.checks.days { padding: 0; border: 0; }
fieldset.checks.days legend { padding: 0 0 .4rem; }
table.list.staffing td input { width: 5.5rem; }
@media (max-width: 480px) {
  .settings-card { padding: 1.25rem 1rem; }
  table.list.staffing th, table.list.staffing td { padding-inline: .3rem; }
  table.list.staffing td input { width: 4.25rem; }
}
ol.priority { display: grid; gap: .4rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
ol.priority li { display: flex; align-items: center; gap: .6rem; padding: 4px 4px 4px .75rem; border-radius: var(--r-inner); background: var(--inset); }
ol.priority .chip { margin-right: auto; }
.rank { width: 1.4rem; color: var(--text-2); font-weight: 600; font-size: .85rem; text-align: center; }
ol.priority button.icon { background: var(--card); }
.settings-foot { display: flex; justify-content: flex-end; margin-top: 1.25rem; }

/* ---------- Administration / Données ---------- */
.admin-card { margin-bottom: 1.25rem; }
.admin-card > h2, .admin-card .block-head h2 { font-size: 1.1rem; }
.admin-card > h2 { margin-bottom: .9rem; }
.admin-card .block-head { align-items: center; margin-bottom: .9rem; }
.admin-card > :last-child { margin-bottom: 0; }
.admin-card .alert { margin-bottom: .9rem; }
.admin-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.admin-cols > .admin-card { margin-bottom: 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.inline-form input { flex: 1 1 14rem; }
.backup-list { display: grid; gap: .4rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.backup-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; min-height: 44px; padding: .4rem .9rem; border-radius: var(--r-inner); background: var(--inset); }
.backup-list .icon { color: var(--ok); }
.backup-list li > span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
table.audit td.when { white-space: nowrap; }
@media (max-width: 700px) { table.list.stack.audit td.when { font-weight: 600; } table.list.stack.audit td:empty { display: none; } }

.modal { border: 0; border-radius: var(--r-card); padding: 1.75rem; width: min(620px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 24px 64px rgba(16, 24, 40, .2); }
.modal h2 { font-size: 1.5rem; margin-bottom: .9rem; }
/* AIC : « Détail du calcul » d'une carte de productivité. */
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.kpi .calc-open { align-self: flex-start; margin-top: .4rem; min-height: var(--tap); padding: 0; font-size: .85rem; }
.modal.calc-detail { width: min(760px, calc(100vw - 2rem)); }
.calc-title { margin: 0 0 .2rem; color: var(--text-2); font-size: .9rem; }
.calc-summary { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 600; }
.calc-body .source { margin: 0 0 .8rem; }
table.calc-table { width: 100%; margin: .4rem 0 .6rem; }
table.calc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
table.calc-table thead th:not(:first-child) { text-align: right; }
table.calc-table tbody th { font-weight: 500; }
table.calc-table tfoot th, table.calc-table tfoot td { font-weight: 700; border-top: 1.5px solid var(--text); }
.calc-number { font-variant-numeric: tabular-nums; margin-right: .4rem; }
.badge.small { min-height: 20px; padding: 0 .5rem; font-size: .72rem; font-weight: 600; background: var(--warn-bg); color: var(--warn); }
details.calc-excluded { margin: .6rem 0; }
details.calc-excluded > summary { min-height: var(--tap); display: list-item; padding: .6rem 0; font-weight: 600; cursor: pointer; }
details.calc-excluded ul { margin: .2rem 0 .4rem; padding-left: 1.2rem; }
details.calc-excluded li { margin: .2rem 0; }
.calc-print { display: none; }
@media (max-width: 700px) {
  table.calc-table td.num { text-align: left; }
  table.calc-table tfoot tr { border-top: 1.5px solid var(--text); }
  table.calc-table tfoot th, table.calc-table tfoot td { border-top: 0; }
}
@media print {
  body.print-detail > :not(.calc-print) { display: none !important; }
  body.print-detail .calc-print { display: block; font-size: 10pt; }
  body.print-detail .calc-print .calc-summary { font-size: 12pt; }
}
.modal::backdrop { background: rgba(14, 18, 34, .45); }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.4rem; }
.toasts { position: fixed; right: 1.5rem; bottom: 1.5rem; display: flex; flex-direction: column; gap: .5rem; z-index: 100; max-width: min(420px, calc(100vw - 2rem)); }
.toast { display: flex; align-items: baseline; gap: .6rem; background: var(--text); color: #fff; padding: .8rem 1.1rem; border-radius: var(--r-inner);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .18); }
.toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-soft); flex: none; transform: translateY(-1px); }
.toast.success::before { background: var(--ok-bg); }
.toast.error::before { background: var(--block-bg); }

/* ---------- Téléphone ---------- */
@media print { .chip { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }

@media (max-width: 899px) {
  .mainnav { display: none; }
  .topbar { width: calc(100% - 24px); }
  .brand-name { display: inline; }
  .local-status { width: auto; padding: 0 .9rem; font-size: .8rem; }
  .local-status::before { width: 8px; height: 8px; }
  .content { width: calc(100% - 32px); padding: 1.75rem 0 calc(env(safe-area-inset-bottom, 0px) + 112px); }
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
    position: fixed; z-index: 20; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); max-width: 560px; margin: 0 auto; padding: 6px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--r-pill);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .14);
  }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 52px; padding: 4px 2px;
    border-radius: var(--r-pill); color: var(--text-2); text-decoration: none; font: 500 11px/1.15 var(--font); }
  .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab[aria-current], .tab.current { background: var(--track); color: var(--text); }
  .tab[aria-current] .icon, .tab.current .icon { color: var(--accent); }
  /* Onglet « Plus » : volet au-dessus de la barre, aligné à droite. */
  .more-wrap { position: relative; display: grid; min-width: 0; }
  button.tab { width: 100%; border: 0; background: transparent; }
  button.tab:hover { background: var(--inset); }
  button.tab[aria-expanded='true'] { background: var(--track); color: var(--text); }
  .more-menu { position: absolute; right: -6px; bottom: calc(100% + 14px); z-index: 30; width: min(260px, calc(100vw - 24px)); padding: 8px;
    background: var(--card); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .14); }
  .more-menu ul { list-style: none; margin: 0; padding: 0; }
  .toasts { left: 1rem; right: 1rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); max-width: none; }
}
@media (max-width: 480px) {
  .brand-name { display: none; }
  .brand { padding-right: 0; }
  /* L'état d'enregistrement devient une pastille : texte lu par les lecteurs d'écran et en info-bulle. */
  .local-status { width: var(--tap); padding: 0; justify-content: center; font-size: 0; }
  .local-status::before { width: 10px; height: 10px; }
  .page-head { margin-bottom: 1.5rem; }
  .tabbar { padding: 5px; }
  .tab { padding: 4px 0; letter-spacing: -.02em; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  table.charge input { width: 100%; min-width: 4.5rem; }
  table.week-grid { display: none; }
  .day-cards { display: grid; gap: .8rem; }
  .day-card { padding: 1rem; border: 1px solid var(--border); border-radius: 20px; background: var(--inset); }
  .day-card h3 { margin-bottom: .7rem; }
  .day-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem; align-items: center; margin-bottom: .45rem; }
  .day-row .chip { justify-self: start; }
  .day-row .role-head { justify-self: start; }
  .day-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .6rem; margin-bottom: .7rem; }
  .day-card-head h3 { margin: 0; }
  table.cover-mini { border-collapse: collapse; }
  table.cover-mini td { padding: 0; border: 0; }
  /* Encart : poste, texte, puis les actions sur toute la largeur. */
  .decision { grid-template-columns: auto minmax(0, 1fr); }
  .decision-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .decision-actions .prop-actions button.accept, .decision-actions details.why summary, .decision-actions button.link { min-height: var(--tap); }
  .decision-actions details.why p { position: static; width: auto; box-shadow: none; }
  .decisions-head .accent { width: 100%; }
  .shift .block-head { margin-bottom: .8rem; }
  .page-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------- Impression A4 ---------- */
@page { size: A4 portrait; margin: 11mm 12mm; }
@media print {
  body { background: #fff; font-size: 10pt; }
  .topbar, .tabbar, .no-print, .toasts, .skip, .banner, dialog { display: none !important; }
  .print-only { display: initial; }
  .content { width: auto; margin: 0; padding: 0; max-width: none; }
  .page-head { display: none; }
  .print-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2pt solid var(--text); padding-bottom: 2mm; margin-bottom: 3mm; font-size: 13pt; font-weight: 600; }
  /* AIC : une page A4 (~794 px de large) ; on neutralise la mise en page téléphone. */
  .card { box-shadow: none; }
  .aic-block { border: .6pt solid var(--text-3); border-radius: 3mm; padding: 2.5mm 4mm; margin-bottom: 2.5mm; break-inside: avoid; }
  .aic-block .block-head { margin-bottom: 1.5mm; }
  .block-head h2 { font-size: 12pt; }
  .source, .footnotes { font-size: 8pt; margin-top: .5mm; }
  .alert { padding: 1.2mm 3mm; margin-bottom: 2mm; font-size: 8.5pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .alert > .icon { width: 12px; height: 12px; }
  details.check { display: block; }
  details.check > summary { padding: 0; list-style: none; }
  details.check > summary::-webkit-details-marker { display: none; }
  details.check > ul { display: none; }
  .kpis { grid-template-columns: repeat(3, 1fr); gap: 3mm; }
  .kpi { padding: 2.5mm 3.5mm; border: .5pt solid var(--border); }
  .kpi-figure { margin: 2mm 0 0; }
  .kpi .value { font-size: 24pt; letter-spacing: -1px; }
  .kpi-target, .pallets, .kpi .small, .kpi-details dt { font-size: 8pt; }
  .kpi-details dd { font-size: 9pt; }
  .meter { height: 2mm; margin: 2mm 0; }
  .meter-target { top: -1mm; bottom: -1mm; }
  .badge, .act, .meter, .meter-fill, .meter-target, .kpi { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .badge { min-height: 0; padding: .3mm 2mm; font-size: 7.5pt; }
  .act { min-height: 0; padding: .5mm 2.5mm; font-size: 9pt; }
  .aic-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 2.5mm; margin-bottom: 2.5mm; }
  .aic-pair .block-foot { padding-top: 1mm; }
  .ontime-row { grid-template-columns: 1fr; gap: 2mm; }
  .ontime { padding: 2mm 3mm; border: .5pt solid var(--border); }
  .ontime-head { margin-bottom: 0; }
  .ontime h3 { font-size: 9.5pt; }
  .ontime-value .big { font-size: 18pt; }
  .ontime p { margin: 0; font-size: 8pt; }
  .block-foot { margin-top: 1.5mm; }
  table.charge th, table.charge td { padding: .8mm 1.5mm; font-size: 9.5pt; }
  .stamp { font-size: 8pt; }
  .print-foot { display: block; margin-top: 1mm; font-size: 8pt; color: var(--text-2); }
  /* Planning : grille complète, sans les contrôles. */
  table.week-grid { display: table !important; min-width: 0; font-size: 8.5pt; }
  .day-cards { display: none !important; }
  .slot { min-height: 0; padding: 1mm 1.5mm; }
  .slot select { display: none; }
}

/* Planning imprimé : une page A4 paysage, grille pleine largeur, filets fins, sans cartes ni contrôles.
   Les couleurs des pastilles et des états (À pourvoir, Ponctuel, Compétence manquante) sont gardées. */
@page planning { size: A4 landscape; margin: 8mm 10mm; }
@media print {
  .planning-page { page: planning; font-size: 8.5pt; }
  .planning-page button, .planning-page select, .planning-page .posts-panel, .planning-page .day-cards { display: none !important; }
  .planning-page .card { padding: 0; margin: 0 0 3mm; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .planning-page .page-head { display: block; margin: 0 0 2.5mm; padding-bottom: 2mm; border-bottom: .75pt solid var(--text); }
  .planning-page .page-eyebrow { margin: 0 0 1mm; font-size: 8.5pt; gap: 1mm 3mm; }
  .planning-page .page-head h1 { font-size: 16pt; letter-spacing: -.5pt; }
  .planning-page .title-row { gap: 1mm 3mm; }
  .planning-page .badge { min-height: 0; padding: .4mm 2mm; font-size: 7.5pt; }
  .planning-page .issues { gap: 1mm; margin-bottom: 2.5mm; }
  .planning-page .alert { margin: 0 0 1mm; padding: 1mm 2.5mm; gap: 2mm; border-radius: 1.5mm; font-size: 8pt; }
  .planning-page .alert ul { display: flex; flex-wrap: wrap; gap: 0 4mm; margin: .3mm 0 0; padding: 0; list-style: none; }
  .planning-page .absent-line { margin: 0; }
  .planning-page .shift .block-head { margin-bottom: 1mm; }
  .planning-page .shift h2 { font-size: 10.5pt; }
  .planning-page .grid-wrap { overflow: visible; }
  .planning-page table.week-grid { table-layout: fixed; width: 100%; min-width: 0; font-size: 8.5pt; border-top: .75pt solid var(--text-3); }
  .planning-page table.week-grid th, .planning-page table.week-grid td { padding: .5mm 1.2mm; border-bottom: .4pt solid var(--text-3); }
  .planning-page table.week-grid thead th { padding: 1mm 1.2mm; font-size: 8pt; color: var(--text); }
  .planning-page table.week-grid thead th small { font-size: 7pt; }
  .planning-page table.week-grid thead th:first-child, .planning-page table.week-grid tbody th { width: 34mm; }
  .planning-page table.week-grid tbody th small { font-size: 7pt; }
  .planning-page table.week-grid tr { break-inside: avoid; }
  /* Deux créneaux : le second ne se coupe pas (il passe entier en page 2) ; le premier suit l'en-tête pour ne jamais laisser la page 1 vide. */
  .planning-page .shift + .shift { break-inside: avoid; }
  .planning-page .person, .planning-page .slot-name { gap: 1.2mm; white-space: nowrap; }
  .planning-page .person::before, .planning-page .slot-name[data-initial]::before { width: 4.2mm; height: 4.2mm; font-size: 6.5pt; }
  .planning-page .chip { min-height: 0; padding: .3mm 2mm; font-size: 7.5pt; white-space: nowrap; }
  .planning-page .bar { min-height: 0; gap: .2mm; padding: .5mm 1.5mm; border-radius: 1.5mm; }
  .planning-page .bar-main { display: flex !important; min-height: 0; font-size: 8pt; }
  .planning-page .bar.k-free { padding: 0; }
  .planning-page .bar small, .planning-page .slot small { font-size: 7pt; line-height: 1.2; white-space: nowrap; }
  .planning-page .slot { min-height: 0; gap: .2mm; padding: .6mm 1.5mm; border-radius: 1.5mm; }
  .planning-page .slot small { padding-left: 5.4mm; }
  .planning-page .slot.empty small { padding-left: 0; }
  .planning-page td.cover small { font-size: 7pt; }
  .planning-page .bar, .planning-page tr.coord-row > *, .planning-page .slot, .planning-page .alert, .planning-page td.cover, .planning-page .person::before, .planning-page .slot-name::before { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .planning-page .week-absences, .planning-page .team-note { break-inside: avoid; }
  .planning-page .week-absences h2, .planning-page .team-note h2 { font-size: 9.5pt; margin-bottom: 1mm; break-after: avoid; }
  .planning-page .week-absences ul { display: flex; flex-wrap: wrap; gap: 1mm 6mm; }
  .planning-page .week-absences li { gap: 2mm; padding: 0; border: 0; }
  .planning-page .team-note p { margin: 0; }
  /* Propositions : pointillés et mention « Proposé » gardés, sans les boutons ni l'explication. */
  .planning-page details.why { display: none; }
  .planning-page .slot .prop-actions { padding-left: 5.4mm; font-size: 7pt; }
  .forecast .fc-weeks { gap: 0; }
  .forecast .fc-week { break-inside: avoid; }
  .forecast .fc-head { margin: 0 0 1mm; }
  .forecast .fc-head h2 { font-size: 10.5pt; margin: 0; }
  .forecast .equity { break-inside: avoid; }
  .forecast .equity h2 { font-size: 10.5pt; }
  .forecast .equity h3 { font-size: 9pt; margin: 0 0 1mm; }
  .forecast .equity-table { font-size: 8pt; }
  .forecast .equity-table th, .forecast .equity-table td { padding: .5mm 2mm; }
  .forecast .rate-bar, .forecast .rate-bar span { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .forecast .issues .changes { display: none; }
}

/* ---------- Imports ---------- */
/* Fichiers acceptés : une carte par source, avec ce qu'elle alimente. */
.import-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.import-kind { display: flex; gap: .9rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); }
.import-kind-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; background: var(--track); color: var(--text); }
.import-kind h3 { margin: 0; font-size: 1rem; }
.import-kind p { margin: .25rem 0 .6rem; font-size: .88rem; color: var(--text-2); }
.import-kind p.feeds { margin: .1rem 0 0; color: var(--accent-ink); font-weight: 600; }
.preview { margin-bottom: 1.25rem; }
.preview h2 { font-size: 1.3rem; }
.preview .alert { margin: 1rem 0 0; }
.preview .grid-wrap { margin: 1rem 0 .5rem; }
.preview-kind { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .75rem; font-size: .85rem; color: var(--text-2); }
.preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.inline-date { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.import-history h2 { font-size: 1.1rem; margin-bottom: .9rem; }
.ok-text { color: var(--ok); font-weight: 600; }
.warn-text { color: var(--warn); font-weight: 600; }
table.effectifs td.code { font-weight: 600; white-space: nowrap; }
table.effectifs td.code small { font-weight: 400; color: var(--text-2); }
table.effectifs td.apres-midi { background: var(--inset); }
table.effectifs select { max-width: 16rem; }
.charge-detail { margin-top: .8rem; font-size: .88rem; }
.charge-detail table { width: 100%; border-collapse: collapse; }
.charge-detail th, .charge-detail td { text-align: left; padding: .25rem .4rem; border-bottom: 1px solid var(--border); }
.charge-detail thead th { color: var(--text-2); font-weight: 600; font-size: .8rem; }
@media print {
  .charge-detail { font-size: 8pt; margin-top: 1.5mm; }
  .charge-detail th, .charge-detail td { padding: .6mm 1.5mm; }
}

/* ---------- Rotation ---------- */
.rotation .presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; width: 100%; }
.rotation .presets button { font-size: .82rem; }
.rotation ol.cycle { margin: 0 0 .5rem; padding-left: 1.4rem; width: 100%; }
.rotation ol.cycle li { display: flex; gap: .4rem; align-items: center; margin-bottom: .3rem; }
.rotation .page-actions { width: 100%; }
.rotation .field { width: 100%; margin: .5rem 0 0; }
td.rotation-cell { font-size: .88rem; color: var(--text-2); text-align: left; }

/* ---------- Équipe ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
table.team tbody th { white-space: nowrap; }
.month-card { margin-bottom: 1.25rem; }
.month-card h2 { font-size: 1.1rem; }
.month-card > .field { max-width: 16rem; }
.team-rows th { white-space: nowrap; }