/* Design system PASTEL (design/tokens.json) + valeurs reprises des maquettes. */
:root {
  --surface-page: #FBF1E7;
  --surface-lavender: #E3DFF3;
  --surface-peach: #F8DED0;
  --surface-sage: #D9ECDC;
  --surface-rose: #F4D7DD;
  --surface-yellow: #F8E8C2;
  --surface-card: #FFFAF4;
  --ink: #2D2438;
  --ink-muted: #6B6289;
  --on-ink: #FFFFFF;
  --on-ink-muted: #B9B2D1;
  --accent-rose: #C2576B;
  --border-hairline: rgba(45, 36, 56, 0.08);
  --border-input: rgba(45, 36, 56, 0.12);
  --border-control: rgba(45, 36, 56, 0.16);

  --font-display: "Quicksand", sans-serif;
  --font-sans: "Nunito Sans", sans-serif;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(45, 36, 56, 0.06);
  --shadow-md: 0 10px 24px rgba(45, 36, 56, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--surface-page); color: var(--ink); font-family: var(--font-sans); }
a { color: var(--accent-rose); }
a:hover { color: var(--ink); }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--accent-rose); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Mise en page ---------- */
.page { min-height: 100vh; padding: 32px 20px 48px; }
.page--equipe { padding: 24px 20px 48px; }
.wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.wrap--large { max-width: 1240px; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack-4 { display: flex; flex-direction: column; gap: 4px; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 44px; height: 44px; flex: none; border-radius: var(--radius-full); background: var(--surface-sage); display: flex; align-items: center; justify-content: center; }
.brand-title { font: 700 16px/20px var(--font-display); }
.brand-title--equipe { font: 700 17px/22px var(--font-display); }
.brand-sub { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }

/* ---------- Typographie ---------- */
.display-xl { margin: 0; font: 700 34px/40px var(--font-display); }
.display-lg { margin: 0; font: 700 26px/32px var(--font-display); }
.heading-md { margin: 0; font: 700 19px/24px var(--font-display); }
.accent { color: var(--accent-rose); }
.body-lg { margin: 0; font: 400 16px/24px var(--font-sans); }
.body { margin: 0; font: 400 15px/22px var(--font-sans); }
.small { font: 400 13px/18px var(--font-sans); }
.muted { color: var(--ink-muted); }
.label { font: 600 12px/16px var(--font-sans); letter-spacing: .04em; color: var(--ink-muted); }
.kicker { font: 600 12px/16px var(--font-sans); letter-spacing: .04em; color: var(--ink-muted); }
.kicker + .display-lg { margin-top: -12px; }
.req { color: var(--accent-rose); }
.q { font: 700 16px/24px var(--font-sans); }
.hint { font: italic 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.hint-13 { font: italic 400 13px/18px var(--font-sans); color: var(--ink-muted); }

/* ---------- Surfaces ---------- */
.bg-lavender { background: var(--surface-lavender); }
.bg-peach { background: var(--surface-peach); }
.bg-sage { background: var(--surface-sage); }
.bg-rose { background: var(--surface-rose); }
.bg-yellow { background: var(--surface-yellow); }
.bg-card { background: var(--surface-card); }

.card { border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sm); }
.card--10 { gap: 10px; }
.card--8 { gap: 8px; }
.card--flat { box-shadow: none; }
.card.invalid { box-shadow: 0 0 0 2px var(--accent-rose); }

.progress { height: 8px; border-radius: var(--radius-full); background: var(--surface-lavender); overflow: hidden; }
.progress > div { height: 100%; border-radius: var(--radius-full); background: var(--ink); transition: width .3s; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tile { border-radius: var(--radius-md); padding: 16px; box-shadow: var(--shadow-sm); }
.tile-title { font: 700 16px/22px var(--font-display); }
.tile-text { font: 400 14px/20px var(--font-sans); }

.callout { border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.callout-title { font: 700 15px/22px var(--font-sans); }

.alert { background: var(--surface-rose); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.alert-title { font: 700 16px/22px var(--font-display); }
.alert-text { font: 400 14px/20px var(--font-sans); }
.alert ul { margin: 0; padding-left: 20px; font: 400 14px/20px var(--font-sans); }

/* ---------- Formulaires ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld--full { grid-column: 1 / -1; }
.lbl { font: 600 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.inp { width: 100%; min-height: 48px; padding: 12px 16px; border: 1.5px solid var(--border-input); border-radius: 14px; background: var(--surface-page); font: 400 15px/22px var(--font-sans); color: var(--ink); }
.inp:focus { outline: none; border-color: var(--ink); }
.inp.invalid { border-color: var(--accent-rose); }
.inp:disabled { opacity: .7; }
textarea.inp { resize: vertical; }
.inp--signature { font-family: var(--font-display); font-weight: 600; }
.inp--lg { min-height: 52px; padding: 14px 16px; border-radius: 16px; background: var(--surface-card); font: 400 16px/22px var(--font-sans); }
.chk { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(251, 241, 231, .7); font: 400 15px/22px var(--font-sans); color: var(--ink); cursor: pointer; }
.chk input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Boutons ---------- */
.yn { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-yn { min-width: 96px; min-height: 48px; padding: 12px 22px; border-radius: var(--radius-full); font: 700 15px/20px var(--font-sans); cursor: pointer; background: var(--surface-page); color: var(--ink); border: 1.5px solid var(--border-control); }
.btn-yn[aria-checked="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

.btn-primary { min-height: 52px; padding: 14px 28px; border-radius: var(--radius-full); border: none; background: var(--ink); color: var(--on-ink); font: 700 16px/20px var(--font-sans); cursor: pointer; box-shadow: var(--shadow-md); }
.btn-primary--15 { padding: 14px 26px; font: 700 15px/20px var(--font-sans); }
.btn-primary--block { min-height: 56px; padding: 16px 24px; font: 700 16px/22px var(--font-sans); }
.btn-secondary { min-height: 48px; padding: 12px 22px; border-radius: var(--radius-full); border: none; background: var(--surface-lavender); color: var(--ink); font: 700 15px/20px var(--font-sans); cursor: pointer; }
.btn-outline { min-height: 48px; padding: 12px 22px; border-radius: var(--radius-full); border: 1.5px solid var(--border-control); background: var(--surface-page); color: var(--ink); font: 700 15px/20px var(--font-sans); cursor: pointer; }
.btn-cream { min-height: 44px; padding: 10px 18px; border-radius: var(--radius-full); border: none; background: var(--surface-page); color: var(--ink); font: 700 14px/20px var(--font-sans); cursor: pointer; }
.btn-link { background: none; border: none; padding: 8px 4px; color: var(--ink-muted); font: 600 14px/20px var(--font-sans); cursor: pointer; text-decoration: underline; }
button:disabled { opacity: .55; cursor: default; }

.nav-steps { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding-top: 8px; }
.spacer { flex: 1; }

/* ---------- Pastilles ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { padding: 8px 14px; border-radius: var(--radius-full); font: 700 14px/20px var(--font-sans); color: var(--ink); }
.pill--ink { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.chip { padding: 4px 10px; border-radius: var(--radius-full); font: 600 12px/16px var(--font-sans); color: var(--ink); white-space: nowrap; }
.chip--status { padding: 6px 14px; font-size: 13px; }

/* ---------- Espace équipe ---------- */
.menu { display: flex; gap: 6px; background: var(--surface-lavender); padding: 4px; border-radius: var(--radius-full); }
.menu a { padding: 10px 18px; border-radius: var(--radius-full); color: var(--ink); text-decoration: none; font: 700 14px/20px var(--font-sans); }
.menu a[aria-current="page"] { background: var(--ink); color: var(--on-ink); }
.badge { background: var(--accent-rose); color: var(--on-ink); border-radius: var(--radius-full); padding: 1px 8px; margin-left: 4px; }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { min-height: 44px; padding: 10px 18px; border-radius: var(--radius-full); cursor: pointer; font: 700 14px/20px var(--font-sans); background: var(--surface-page); color: var(--ink); border: 1.5px solid var(--border-control); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

.split { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.split-list { flex: 1 1 320px; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.split-detail { flex: 999 1 560px; min-width: 0; background: var(--surface-card); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 16px; }

.req-card { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; padding: 16px; border-radius: var(--radius-md); cursor: pointer; color: var(--ink); background: var(--surface-card); border: 2px solid transparent; box-shadow: var(--shadow-sm); }
.req-card[aria-current="true"] { border-color: var(--ink); }
.req-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.req-card-name { font: 700 16px/22px var(--font-display); }
.req-card-date { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.empty { padding: 24px; border-radius: var(--radius-md); background: var(--surface-lavender); font: 400 15px/22px var(--font-sans); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.facts--box { background: var(--surface-lavender); border-radius: var(--radius-md); padding: 16px; }
.fact-value { font: 500 15px/22px var(--font-sans); }
.fact-value--break { word-break: break-all; }
.fact-tile { background: var(--surface-sage); border-radius: var(--radius-md); padding: 14px 16px; }
.fact-tile .fact-value { font-weight: 600; }
.fact-full { grid-column: 1 / -1; }

.sector-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 16px; cursor: pointer; color: var(--ink); background: var(--surface-page); border: 1.5px solid var(--border-input); }
.sector-row[aria-checked="true"] { border-color: transparent; }
.sector-row.faded { opacity: .75; }
.sector-row:disabled { cursor: default; opacity: 1; }
.sector-row.faded:disabled { opacity: .75; }
/* Interrupteur : la pastille glisse à droite et la piste fonce quand le secteur est retenu */
.switch { position: relative; width: 44px; height: 26px; flex: none; border-radius: var(--radius-full); background: rgba(45, 36, 56, .18); transition: background .2s ease; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-card); box-shadow: 0 1px 3px rgba(45, 36, 56, .25); transition: transform .2s ease; }
.sector-row[aria-checked="true"] .switch { background: var(--ink); }
.sector-row[aria-checked="true"] .switch::after { transform: translateX(18px); }
/* Secteur mis en pause par le bénévole : ligne et interrupteur grisés */
.sector-row.paused { background: rgba(45, 36, 56, .07); border-color: transparent; }
.sector-row.paused .sector-name { color: var(--ink-muted); }
.sector-row.paused .switch { background: var(--ink-muted); }
.confirm-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 2px 4px 4px 14px; font: 600 13px/18px var(--font-sans); }
.confirm-line > span { flex: 1 1 220px; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }
.sector-text { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.sector-name { font: 700 15px/20px var(--font-sans); }

.notes { display: flex; flex-direction: column; gap: 6px; background: var(--surface-yellow); border-radius: var(--radius-md); padding: 16px; }
.notes .lbl { text-transform: none; }
.notes .lbl + textarea + .lbl { margin-top: 6px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; align-items: center; }
.actions-summary { flex: 1 1 220px; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.done { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; background: var(--surface-sage); border-radius: var(--radius-md); padding: 14px 16px; }
.done--warn { background: var(--surface-rose); }
.done-text { flex: 1 1 260px; font: 500 15px/22px var(--font-sans); }
.flash { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--surface-sage); border-radius: var(--radius-md); padding: 14px 16px; font: 500 15px/22px var(--font-sans); }
.flash--warn { background: var(--surface-rose); }

/* ---------- Écrans « téléphone » (compte, connexion) ---------- */
.narrow { max-width: 420px; margin: 0 auto; min-height: 100vh; padding: 48px 24px 32px; display: flex; flex-direction: column; gap: 24px; }
.app-icon { width: 64px; height: 64px; border-radius: 22px; background: var(--surface-sage); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.round-icon { width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--surface-sage); display: flex; align-items: center; justify-content: center; }
.info { background: var(--surface-lavender); border-radius: var(--radius-md); padding: 16px; font: 400 14px/20px var(--font-sans); }

/* ---------- Tous les bénévoles (maquette Benevoles.dc.html) ---------- */
.list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.search { flex: 0 1 320px; }
.inp--search { border-radius: var(--radius-full); background: var(--surface-card); }

.btn-sm { min-height: 40px; padding: 8px 14px; border-radius: var(--radius-full); border: none; font: 700 13px/18px var(--font-sans); cursor: pointer; white-space: nowrap; color: var(--ink); }
.btn-sm--ink { background: var(--ink); color: var(--on-ink); }
.btn-sm--ghost { background: transparent; border: 1.5px solid var(--border-control); }
.btn-sm--card { background: var(--surface-card); padding: 8px 16px; }
.btn-sm--lavender { background: var(--surface-lavender); padding: 8px 16px; }

.notifs { background: var(--surface-yellow); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.notifs-title { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 19px/24px var(--font-display); }
.badge--lg { margin-left: 0; padding: 1px 9px; font: 700 13px/20px var(--font-sans); }
.notif { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-card); }
.notif--lue { background: rgba(255, 250, 244, .45); }
.notif-dot { flex: none; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--accent-rose); }
.notif--lue .notif-dot { background: transparent; }
.notif-body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-text { font: 600 15px/22px var(--font-sans); }

.filter { min-height: 44px; padding: 10px 18px; border-radius: var(--radius-full); cursor: pointer; font: 700 14px/20px var(--font-sans); color: var(--ink); background: var(--surface-card); border: 1.5px solid transparent; }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.filter .n { opacity: .75; }

.table-card { background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow-x: auto; }
.table { width: 100%; min-width: 860px; border-collapse: collapse; }
.table th { text-align: left; font: 600 12px/16px var(--font-sans); letter-spacing: .04em; color: var(--ink-muted); padding: 12px 14px; white-space: nowrap; }
.table td { padding: 14px; border-top: 1px solid var(--border-hairline); font: 400 14px/20px var(--font-sans); vertical-align: top; }
.table a { color: var(--ink); }
.table a:hover { color: var(--accent-rose); }
.name-link { padding: 0; border: none; background: none; text-align: left; cursor: pointer; color: var(--ink); font: 700 15px/20px var(--font-display); text-decoration: underline; text-decoration-color: rgba(45, 36, 56, .25); text-underline-offset: 3px; }
.chip--pause { outline: 1.5px dashed var(--ink); outline-offset: -1.5px; }
.chip--stop { background: var(--ink); color: var(--on-ink); }

.btn-back { align-self: flex-start; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 18px 10px 12px; border-radius: var(--radius-full); border: none; background: var(--surface-lavender); color: var(--ink); font: 700 14px/20px var(--font-sans); cursor: pointer; }
.fiche-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-end; }
.btn-call, .btn-write { min-height: 44px; padding: 11px 18px; border-radius: var(--radius-full); text-decoration: none; font: 700 14px/20px var(--font-sans); }
.btn-call { background: var(--ink); color: var(--on-ink); }
.btn-call:hover { color: var(--on-ink); opacity: .9; }
.btn-write { background: var(--surface-card); border: 1.5px solid var(--border-control); color: var(--ink); }
.banner { border-radius: 16px; padding: 12px 16px; font: 600 15px/22px var(--font-sans); }

.cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.col { flex: 1 1 420px; min-width: 0; }
.panel { background: var(--surface-card); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 14px; }
.histo { display: flex; gap: 10px; font: 400 13px/18px var(--font-sans); }
.histo-date { flex: none; width: 64px; color: var(--ink-muted); }

.facts-fiche { background: var(--surface-lavender); border-radius: var(--radius-md); padding: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.v { font: 500 15px/22px var(--font-sans); word-break: break-word; }
.answer-card { background: var(--surface-card); border-radius: var(--radius-md); padding: 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); outline: 3px solid var(--teinte); outline-offset: -3px; }
.eng { display: flex; gap: 8px; font: 400 14px/20px var(--font-sans); }

/* ---------- App bénévole (maquette App.dc.html), mobile d'abord ---------- */
.app-shell { max-width: 480px; margin: 0 auto; min-height: 100vh; padding: 40px 20px calc(112px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 20px; }
.app-toast { background: var(--surface-sage); border-radius: 16px; padding: 12px 14px; font: 600 14px/20px var(--font-sans); }
.app-chip { padding: 6px 12px; border-radius: var(--radius-full); font: 700 13px/18px var(--font-sans); color: var(--ink); }

.tabbar { position: fixed; z-index: 10; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); width: min(456px, calc(100% - 24px)); background: var(--ink); border-radius: var(--radius-lg); padding: 8px; display: flex; gap: 6px; box-shadow: var(--shadow-md); }
.tabbar-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--radius-full); text-decoration: none; font: 700 14px/20px var(--font-sans); color: var(--on-ink-muted); }
.tabbar-item:hover { color: var(--on-ink); }
.tabbar-item[aria-current="page"] { background: var(--surface-page); color: var(--ink); }

.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tool { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 148px; padding: 16px; border-radius: var(--radius-md); text-align: left; cursor: pointer; color: var(--ink); border: none; box-shadow: var(--shadow-sm); }
.tool--locked { background: var(--surface-page); border: 1.5px dashed rgba(45, 36, 56, .25); box-shadow: none; }
.tool-icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 250, 244, .75); display: flex; align-items: center; justify-content: center; }
.tool-title { font: 700 16px/20px var(--font-display); }
.tool-sub { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
.tool-lock { display: flex; align-items: center; gap: 4px; font: 600 12px/16px var(--font-sans); }

.rappel { background: var(--surface-yellow); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.install { background: var(--surface-lavender); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.install > div { width: 100%; }

.me-card { background: var(--surface-lavender); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.btn-edit { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-full); border: none; background: var(--surface-card); color: var(--ink); font: 700 13px/18px var(--font-sans); cursor: pointer; }
.inp--card { background: var(--surface-card); padding: 12px 14px; }
.btn-yn--flex { flex: 1; min-height: 44px; min-width: 0; }

.sector-card { border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sector-card--pause { opacity: .85; }
.statut { padding: 4px 10px; border-radius: var(--radius-full); font: 600 12px/16px var(--font-sans); background: rgba(255, 250, 244, .85); color: var(--ink); }
.statut--pause { background: var(--ink); color: var(--on-ink); }
.confirm-box { display: flex; flex-direction: column; gap: 8px; background: rgba(255, 250, 244, .7); border-radius: 14px; padding: 12px; }
.btn-half { flex: 1 1 140px; min-height: 44px; padding: 10px 14px; border-radius: var(--radius-full); font: 700 13px/18px var(--font-sans); cursor: pointer; color: var(--ink); }
.btn-half--card { background: var(--surface-card); border: none; }
.btn-half--ghost { background: transparent; border: 1.5px solid rgba(45, 36, 56, .2); }
.btn-half--outline { flex: 1; background: var(--surface-card); border: 1.5px solid var(--border-control); }
.btn-half--ink { flex: 1; background: var(--ink); color: var(--on-ink); border: none; }

.stop-zone { margin-top: 8px; border-top: 1px solid var(--border-hairline); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.btn-danger { min-height: 48px; padding: 12px 18px; border-radius: var(--radius-full); border: 1.5px solid var(--accent-rose); background: transparent; color: var(--accent-rose); font: 700 14px/20px var(--font-sans); cursor: pointer; }
.stop-box { background: var(--surface-rose); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Formation rapatrieur (app) ---------- */
.fo-fiche { border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sm); }
.fo-encadre { background: var(--surface-card); border-radius: 14px; padding: 12px 14px; font: 400 15px/22px var(--font-sans); }
.fo-liste { margin: 0; padding-left: 22px; font: 400 15px/22px var(--font-sans); display: flex; flex-direction: column; gap: 4px; }
.fo-etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; display: flex; flex-direction: column; gap: 10px; }
.fo-etapes li { counter-increment: etape; display: flex; gap: 12px; align-items: flex-start; font: 400 15px/22px var(--font-sans); }
.fo-etapes li::before { content: counter(etape); flex: none; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--ink); color: var(--on-ink); font: 700 13px/26px var(--font-sans); text-align: center; }
.fo-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fo-case { background: rgba(255, 250, 244, .75); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.fo-question { margin: 0; min-width: 0; border: none; background: var(--surface-card); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); }
.fo-question legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; }
.fo-question legend + * { clear: both; }
.fo-question.invalid { box-shadow: 0 0 0 2px var(--accent-rose); }
.fo-question .chk { background: var(--surface-page); }
.fo-explication { background: var(--surface-rose); border-radius: 14px; padding: 10px 12px; font: 400 14px/20px var(--font-sans); }

/* ---------- Attestation affichée dans l'app (feuille de papier) ---------- */
.feuille { background: #FFFFFF; color: #000; border-radius: 6px; box-shadow: var(--shadow-md); padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; font: 400 13.5px/20px Helvetica, Arial, sans-serif; }
.feuille p { margin: 0; }
.feuille-justifie { text-align: justify; }
.feuille-gris { color: #8C8C8C; font-size: 10.5px; line-height: 14px; text-align: center; }
.feuille-logo { align-self: center; max-width: 90px; max-height: 88px; }
.feuille-vehicule { padding-left: 12px; }
.feuille-signature { display: flex; flex-direction: column; align-items: flex-end; text-align: right; margin-top: 6px; }
.feuille-signature img { max-width: 150px; max-height: 88px; margin-top: 8px; }

/* ---------- Adaptation ordinateur / téléphone ---------- */

/* En-tête de l'espace équipe : marque, menu, déconnexion */
.entete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.entete .menu { margin-left: auto; }
@media (max-width: 640px) {
  .entete-sortie { order: 2; margin-left: auto; }
  .entete .menu { order: 3; width: 100%; margin-left: 0; }
  .entete .menu a { flex: 1; text-align: center; }
  /* Demandes : l'étiquette passe sous le texte plutôt que de l'écraser */
  .sector-row { flex-wrap: wrap; row-gap: 6px; }
  .sector-text { flex: 1 1 150px; }
}

/* Tous les bénévoles : le tableau devient une liste de cartes sur téléphone */
@media (max-width: 760px) {
  .table { min-width: 0; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 16px; border-top: 1px solid var(--border-hairline); }
  .table tbody tr:first-child { border-top: none; }
  .table td { display: flex; flex-direction: column; gap: 2px; padding: 0; border: none; }
  .table td[data-label]::before { content: attr(data-label); font: 600 11px/14px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
  .table td:first-child, .table td[data-label="Secteurs"], .table td.td-action { grid-column: 1 / -1; }
  .table td.td-action { text-align: left !important; }
  .table td.td-action .btn-sm { width: 100%; }
}

/* App bénévole sur ordinateur : en-tête en haut, contenu plus large */
.tabbar-brand, .tabbar-sortie { display: none; }
.tabbar-items { display: contents; }
.lecture { width: 100%; max-width: 720px; margin: 0 auto; }
.me-grid, .me-col { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 900px) {
  .app-shell { max-width: 1080px; padding: 28px 32px 48px; }
  .tabbar { order: -1; position: static; transform: none; width: 100%; background: none; box-shadow: none; padding: 0; border-radius: 0; align-items: center; gap: 12px; }
  .tabbar-brand { display: flex; align-items: center; gap: 12px; font: 700 17px/22px var(--font-display); color: var(--ink); }
  .tabbar-items { display: flex; gap: 6px; margin-left: auto; background: var(--surface-lavender); padding: 4px; border-radius: var(--radius-full); }
  .tabbar-item { flex: none; min-height: 0; padding: 10px 18px; color: var(--ink); }
  .tabbar-item svg { display: none; }
  .tabbar-item:hover { color: var(--ink); background: rgba(255, 250, 244, .6); }
  .tabbar-item[aria-current="page"], .tabbar-item[aria-current="page"]:hover { background: var(--ink); color: var(--on-ink); }
  .tabbar-sortie { display: inline-block; }
  .deconnexion-mobile { display: none; }
  .tools { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .me-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .lecture .feuille { padding: 36px 40px; font-size: 14.5px; line-height: 22px; }
}

/* ---------- Page d'accueil ---------- */
.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.choix-carte { border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); }
.choix-carte a { text-align: center; }

/* ---------- Espace équipe RH : menu, consultation seule, comptes ---------- */
.menu { flex-wrap: wrap; border-radius: var(--radius-lg); }
a.tab { display: inline-flex; align-items: center; text-decoration: none; }
.tab[aria-current="page"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.consultation { display: flex; gap: 10px; align-items: center; background: var(--surface-yellow); border-radius: 16px; padding: 12px 16px; font: 500 14px/20px var(--font-sans); }

.comptes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.compte { background: var(--surface-card); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); }
.compte--off { opacity: .65; }
.droits { display: flex; flex-direction: column; gap: 8px; }
.droit { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 16px; background: var(--surface-page); }
.droit > .stack-4 { flex: 1 1 220px; }
.seg { display: flex; gap: 4px; background: var(--surface-lavender); padding: 4px; border-radius: var(--radius-full); }
.seg button { min-height: 36px; padding: 6px 12px; border-radius: var(--radius-full); border: none; background: transparent; color: var(--ink); font: 700 13px/18px var(--font-sans); cursor: pointer; white-space: nowrap; }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--on-ink); }
.lien-box { background: var(--surface-sage); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 480px) {
  .seg { width: 100%; }
  .seg button { flex: 1; padding: 6px 4px; font-size: 12px; }
}

/* Sous-onglets texte soulignés (navigation) */
.soustabs { display: flex; gap: 24px; border-bottom: 1.5px solid var(--border-hairline); }
.soustabs a { display: flex; align-items: center; gap: 6px; padding: 10px 2px 12px; margin-bottom: -1.5px; border-bottom: 3px solid transparent; color: var(--ink-muted); text-decoration: none; font: 700 15px/20px var(--font-sans); }
.soustabs a:hover { color: var(--ink); }
.soustabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.soustabs .badge { margin-left: 0; font-size: 12px; line-height: 18px; }

/* Cartes-compteurs servant de filtres (maquette Stagiaires) */
.stat-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 640px; }
.stat-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; color: var(--ink); text-align: left; box-shadow: var(--shadow-sm); }
.stat-tab[aria-selected="true"] { border-color: var(--ink); }
.stat-tab:not([aria-selected="true"]):hover { border-color: rgba(45, 36, 56, .2); }
.stat-n { font: 700 26px/32px var(--font-display); }
@media (max-width: 480px) { .stat-tabs { gap: 8px; } .stat-tab { padding: 12px; } .stat-n { font-size: 22px; line-height: 28px; } }

/* ---------- Stagiaires & écovolontaires ---------- */
.soustabs button { display: flex; align-items: center; gap: 6px; padding: 10px 2px 12px; margin-bottom: -1.5px; border: none; border-bottom: 3px solid transparent; background: none; color: var(--ink-muted); font: 700 15px/20px var(--font-sans); cursor: pointer; }
.soustabs button:hover { color: var(--ink); }
.soustabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.stat-tabs--4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); max-width: none; }
.stat-tab[aria-pressed="true"] { border-color: var(--ink); }
.btn-icone { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn-icone:hover { color: var(--on-ink); }
.avancement { display: flex; align-items: center; gap: 8px; font: 600 12px/16px var(--font-sans); }
.avancement-piste { flex: 1; height: 8px; border-radius: var(--radius-full); background: var(--surface-lavender); overflow: hidden; }
.avancement-piste > div { height: 100%; border-radius: var(--radius-full); }
.avancement-piste--grande { flex: none; height: 10px; }
.btn-rond { width: 44px; height: 44px; border-radius: var(--radius-full); border: none; background: var(--surface-lavender); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font: 500 13px/18px var(--font-sans); }
.legende > span { display: flex; align-items: center; gap: 6px; }
.legende-carre { width: 14px; height: 14px; border-radius: 4px; }
.legende-trait { width: 2px; height: 14px; background: var(--accent-rose); }
.gantt { min-width: 1100px; display: flex; flex-direction: column; gap: 6px; }
.gantt-ligne { display: flex; align-items: center; min-height: 44px; }
.gantt-ligne:first-child { align-items: flex-end; min-height: 0; }
.gantt-nom { flex: none; width: 200px; padding: 0 8px 0 0; border: none; background: none; text-align: left; color: var(--ink); display: flex; flex-direction: column; cursor: pointer; }
div.gantt-nom { cursor: default; }
.gantt-mois { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.gantt-mois span { font: 600 12px/16px var(--font-sans); color: var(--ink-muted); border-left: 1px solid var(--border-hairline); padding-left: 6px; }
.gantt-piste { flex: 1; position: relative; height: 32px; border-radius: 8px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 12 - 1px), rgba(45, 36, 56, .06) calc(100% / 12 - 1px), rgba(45, 36, 56, .06) calc(100% / 12)); }
.gantt-barre { position: absolute; top: 4px; bottom: 4px; border: none; border-radius: 8px; padding: 0; cursor: pointer; }
.gantt-aujourdhui { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--accent-rose); pointer-events: none; }
.table-card:has(.gantt) { overflow-x: auto; }

/* ---------- Documents ---------- */
.doc-cat { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border-hairline); }
.doc-cat-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-ajout { border: 1.5px dashed rgba(45, 36, 56, .3); cursor: pointer; }
.doc-ajout:focus-within { outline: 3px solid var(--accent-rose); outline-offset: 2px; }
.doc-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--surface-page); }
.doc-nom { font: 600 14px/20px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu { position: fixed; inset: 0; z-index: 50; background: rgba(45, 36, 56, .55); display: flex; flex-direction: column; padding: 16px; gap: 10px; }
.apercu-barre { display: flex; align-items: center; gap: 8px; background: var(--surface-card); border-radius: var(--radius-md); padding: 10px 12px; box-shadow: var(--shadow-md); }
.apercu-corps { flex: 1; min-height: 0; background: var(--surface-card); border-radius: var(--radius-md); overflow: auto; display: flex; align-items: flex-start; justify-content: center; }
.apercu-corps iframe { width: 100%; height: 100%; border: none; border-radius: var(--radius-md); }
.apercu-corps img { max-width: 100%; height: auto; display: block; }

/* ---------- Planning mensuel ---------- */
.pl-barre { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
a.btn-rond { text-decoration: none; }
.pl-cadre { overflow: auto; max-height: calc(100vh - 140px); padding: 0; }
.pl { border-collapse: separate; border-spacing: 0 3px; min-width: 100%; }
.pl th, .pl td { padding: 2px 3px; }
.pl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-card); padding: 10px 6px; }
.pl tfoot th, .pl tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--surface-card); border-top: 1px solid var(--border-hairline); padding: 10px 6px; }
.pl-jour { position: sticky; left: 0; z-index: 1; background: var(--surface-card); text-align: left; white-space: nowrap; padding: 4px 8px !important; font: 700 13px/18px var(--font-sans); }
.pl-jour > span:first-child { display: inline-block; min-width: 52px; }
.pl thead .pl-jour, .pl tfoot .pl-jour { z-index: 3; }
.pl-tete { text-align: left; font: 700 13px/16px var(--font-display); color: var(--ink); white-space: nowrap; }
.pl-tete span { display: block; font: 500 11px/14px var(--font-sans); color: var(--ink-muted); }
.pl-weekend .pl-jour, .pl-weekend td { background: rgba(227, 223, 243, .45); }
.pl-ferie .pl-jour { background: #E4F1E6; }
.pl-ferie-nom { margin-left: 6px; padding: 1px 6px; border-radius: var(--radius-full); background: #CFE8D3; font: 600 10px/14px var(--font-sans); }
.pl-ferie-vide { color: #6F9A76; font-weight: 600; }
.pl-case { width: 100%; min-width: 108px; min-height: 36px; padding: 4px 6px; border-radius: 10px; border: 1.5px solid transparent; font: 600 11px/14px var(--font-sans); color: var(--ink); white-space: nowrap; cursor: pointer; }
.pl-case--vide { background: transparent; border: 1.5px dashed rgba(45, 36, 56, .12); }
.pl-case:disabled { cursor: default; opacity: 1; }
.pl-case--sel { outline: 2.5px solid var(--ink); outline-offset: -1px; }
.pl-hors { display: block; min-width: 108px; min-height: 36px; border-radius: 10px; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(45, 36, 56, .04) 6px 12px); }
.pl-compte { text-align: center; font: 700 13px/18px var(--font-sans); min-width: 64px; }
.pl-total { font: 700 13px/18px var(--font-sans); white-space: nowrap; }
.pl-ev { width: 24px; height: 24px; margin-left: 4px; border-radius: var(--radius-full); border: none; padding: 0; vertical-align: middle; cursor: pointer; font: 800 13px/1 var(--font-sans); color: var(--on-ink); background: var(--accent-rose); }
.pl-ev--ajout { background: transparent; border: 1.5px dashed rgba(45, 36, 56, .2); color: #8A82A6; opacity: .5; }
tr:hover .pl-ev--ajout, .pl-ev--ajout:focus-visible { opacity: 1; }

.feuille-bas { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: 16px; width: min(900px, calc(100% - 24px)); max-height: 70vh; overflow: auto; background: var(--surface-card); border-radius: var(--radius-md); box-shadow: 0 10px 40px rgba(45, 36, 56, .25); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.feuille-bas-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.feuille-bas-tete .tile-title { flex: 1 1 auto; }
.pl-choix-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-choix { min-height: 40px; padding: 8px 14px; border-radius: var(--radius-full); border: 1.5px solid var(--border-input); background: var(--surface-page); color: var(--ink); font: 700 13px/18px var(--font-sans); cursor: pointer; }
.pl-choix--vider { background: transparent; border-style: dashed; border-color: rgba(45, 36, 56, .3); }
.pl-libre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pl-libre .inp { flex: 1 1 200px; min-height: 44px; }

/* Planning : colonnes Jour, Salariées et Tous au plus juste, noms centrés, ligne fériée en vert */
.pl { width: 100%; }
.pl .pl-jour, .pl .pl-compte { width: 1%; white-space: nowrap; }
.pl-compte { min-width: 0; padding: 2px 10px !important; }
.pl-tete { text-align: center; }
.pl-ferie .pl-jour, .pl-ferie td { background: #E4F1E6; }

/* ---------- Congés (vue année) ---------- */
.cg-resumes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cg-carte { background: var(--surface-card); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-sm); }
.cg-nom { display: flex; align-items: center; gap: 8px; font: 700 16px/22px var(--font-display); }
.cg-point { width: 14px; height: 14px; border-radius: var(--radius-full); flex: none; }
.cg-chiffre { font: 700 22px/28px var(--font-display); }
.cg-chiffre > span { font: 500 13px/18px var(--font-sans); }
.cg-outils { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; background: var(--surface-card); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.cg-legende { display: inline-block; width: 18px; height: 18px; border-radius: 5px; font: 800 9px/18px var(--font-sans); text-align: center; }
.cg-legende--rond { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--accent-rose); }
.cg-cadre { overflow-x: auto; padding: 12px; }
.cg-annee { display: grid; grid-template-columns: repeat(12, minmax(150px, 1fr)); gap: 8px; min-width: 1900px; }
.cg-mois { display: flex; flex-direction: column; gap: 2px; }
.cg-mois-titre { background: var(--ink); color: var(--on-ink); border-radius: 12px; padding: 6px 8px; text-align: center; font: 700 13px/18px var(--font-display); }
.cg-jour { display: flex; align-items: center; gap: 2px; padding: 1px 4px; border-radius: 6px; }
.cg-jour--tete { padding-top: 4px; padding-bottom: 4px; }
.cg-jour--weekend { background: rgba(227, 223, 243, .8); }
.cg-jour--ferie { background: #CFE8D3; }
.cg-date { width: 48px; flex: none; font: 600 11px/14px var(--font-sans); white-space: nowrap; }
.cg-conflit { width: 8px; flex: none; display: flex; justify-content: center; }
.cg-conflit span { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--accent-rose); }
.cg-initiales { width: 20px; flex: none; text-align: center; font: 700 9px/14px var(--font-sans); border-radius: 4px; }
.cg-case { width: 20px; height: 20px; flex: none; padding: 0; border-radius: 5px; border: 1px solid rgba(45, 36, 56, .1); background: transparent; color: var(--ink); font: 800 9px/14px var(--font-sans); cursor: pointer; }
.cg-case--refuse { background: #ECE4EA; border-color: #ECE4EA; font-size: 11px; }
.cg-case:disabled { cursor: default; opacity: 1; }
.cg-case:not(:disabled):hover { box-shadow: 0 0 0 2px var(--ink); }

/* ---------- Annualisation ---------- */
.an-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.an-carte { border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.an-valeur { font: 700 19px/24px var(--font-display); }
.an-cadre { overflow: auto; max-height: calc(100vh - 140px); padding: 0; }
.an { width: 100%; min-width: 900px; border-collapse: collapse; }
.an th, .an td { padding: 6px; }
.an thead th { position: sticky; z-index: 2; background: var(--surface-card); font: 600 12px/16px var(--font-sans); letter-spacing: .04em; color: var(--ink-muted); text-align: left; white-space: nowrap; }
.an thead tr:first-child th { top: 0; }
.an thead tr:last-child th { top: 32px; }
.an-titre-jours, .an thead .an-jour { text-align: center !important; background: var(--surface-lavender) !important; }
.an-titre-jours { border-radius: 12px 12px 0 0; }
.an tbody tr { border-top: 1px solid var(--border-hairline); }
.an-sem { position: sticky; left: 0; z-index: 1; background: var(--surface-card); text-align: left; white-space: nowrap; font: 700 13px/18px var(--font-sans); }
.an-sem span { display: block; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.an-case { padding: 3px !important; text-align: center; }
.an-case--hors { color: var(--on-ink-muted); background: rgba(227, 223, 243, .3); }
.an-bouton { width: 100%; min-width: 56px; min-height: 40px; border: 1.5px solid transparent; border-radius: 10px; background: rgba(227, 223, 243, .35); color: var(--ink); font: 600 14px/18px var(--font-sans); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.an-bouton:disabled { cursor: default; opacity: 1; }
.an-bouton small { font: 600 10px/12px var(--font-sans); color: var(--ink-muted); }
.an-bouton em { font: 600 10px/12px var(--font-sans); font-style: normal; color: var(--accent-rose); }
.an-num { text-align: right; white-space: nowrap; font: 500 14px/20px var(--font-sans); }
.an-obs { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.an-courante .an-sem, .an-courante td { background: rgba(248, 232, 194, .55); }
.an-bloc-sup { padding-top: 10px; border-top: 1px solid var(--border-hairline); }

/* ---------- Accueil de l'équipe ---------- */
.ac-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ac-stats .stat-tab { color: var(--ink); }
.ac-stats .stat-tab:hover { border-color: var(--ink); color: var(--ink); }
.ac-presences { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-personne { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 14px; border: 1.5px solid var(--border-input); min-width: 120px; font: 400 12px/16px var(--font-sans); }
.ac-personne b { font: 700 14px/20px var(--font-display); }
.ac-personne--vide { border-style: dashed; color: var(--ink-muted); }
.ac-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ac-liste a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-page); color: var(--ink); text-decoration: none; font: 500 14px/20px var(--font-sans); }
.ac-liste a:hover { color: var(--ink); background: var(--surface-lavender); }
.ac-point { width: 12px; height: 12px; border-radius: var(--radius-full); flex: none; }


/* Tous les bénévoles : copie des e-mails */
.filtres-barre { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.btn-copier { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; }
.td-email { max-width: 240px; word-break: break-all; }
.td-email a { color: var(--ink); }



/* Planning et annualisation intégrés à la page : pas de défilement intérieur.
   Sur grand écran, l'en-tête des colonnes et la ligne des totaux restent visibles en faisant défiler la page. */
.pl-cadre, .an-cadre { max-height: none; overflow-x: auto; overflow-y: visible; }
@media (min-width: 1100px) {
  .pl-cadre, .an-cadre { overflow: visible; }
}

/* Planning : la ligne du jour */
.pl-aujourdhui .pl-jour, .pl-aujourdhui td { background: #FBE9C6; }
.pl-aujourdhui .pl-jour { box-shadow: inset 4px 0 0 var(--accent-rose); }
.pl-auj { margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--accent-rose); color: var(--on-ink); font: 700 10px/14px var(--font-sans); }

/* Planning : la ligne du jour */
.pl-aujourdhui .pl-jour, .pl-aujourdhui td { background: #FBE9C6; }
.pl-aujourdhui .pl-jour { box-shadow: inset 4px 0 0 var(--accent-rose); }
.pl-auj { margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--accent-rose); color: var(--on-ink); font: 700 10px/14px var(--font-sans); }

/* Planning : besoins par jour, colonnes matin / après-midi, bulle d'infos */
.pl-besoins { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface-yellow); font: 400 14px/20px var(--font-sans); }
.pl-besoins label { display: flex; align-items: center; gap: 6px; }
.pl-besoins .inp { width: 70px; min-height: 36px; padding: 4px 10px; }
.pl-besoin { background: rgba(248, 232, 194, .5); }
.pl-manque { background: var(--surface-rose) !important; color: #9C3348; }
.pl-nom { border: none; background: none; padding: 2px 4px; border-radius: 8px; cursor: pointer; color: inherit; font: inherit; display: inline-flex; flex-direction: column; align-items: center; }
.pl-nom:hover { background: var(--surface-lavender); }
.pl-nom i { font-style: normal; color: var(--accent-rose); margin-left: 2px; position: absolute; transform: translate(26px, -4px); }
.pl-nom span { display: block; font: 500 11px/14px var(--font-sans); color: var(--ink-muted); }
.pl-bulle { position: fixed; z-index: 45; width: 320px; background: var(--surface-card); border-radius: var(--radius-md); box-shadow: 0 10px 40px rgba(45, 36, 56, .25); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }

/* Annualisation plus compacte, sélection multiple */
.an th, .an td { padding: 3px 5px; }
.an thead tr:last-child th { top: 28px; }
.an-sem { font-size: 12px; line-height: 16px; }
.an-sem span { display: inline; font-size: 11px; }
.an tbody tr { border-top-color: rgba(45, 36, 56, .05); }
.an-case { padding: 2px !important; }
.an-bouton { min-height: 28px; min-width: 50px; border-radius: 8px; flex-direction: row; gap: 3px; font-size: 13px; line-height: 16px; user-select: none; touch-action: none; }
.an-bouton small, .an-bouton em { font-size: 9px; line-height: 11px; }
.an-bouton--sel { outline: 2.5px solid var(--ink); outline-offset: -1px; background-color: #FBE9C6 !important; }
.an-num, .an-obs { font-size: 13px; line-height: 16px; }

.an-bouton em.an-sup { color: #3F7A4E; }

/* Planning : un jour non travaillé = case gris clair pleine (plus de pointillés) */
.pl-case--vide { background: #EEEBEF; border: 1.5px solid transparent; }
.pl-weekend .pl-case--vide { background: #E7E3EC; }
.pl-ferie .pl-case--vide { background: #DCEADF; }
.pl-aujourdhui .pl-case--vide { background: #F3E3BF; }

/* Planning : gris neutre, week-ends en rose (l'arrêt passe en violet) */
.pl-weekend .pl-jour, .pl-weekend td { background: #FBEDF0; }
.pl-case--vide { background: #ECEBE8; }
.pl-weekend .pl-case--vide { background: #E6E3E0; }
.pl-ferie .pl-jour, .pl-ferie td { background: #E4F1E6; }
.pl-ferie .pl-case--vide { background: #DCEADF; }
.pl-aujourdhui .pl-jour, .pl-aujourdhui td { background: #FBE9C6; }
.pl-aujourdhui .pl-case--vide { background: #F3E3BF; }
.cg-jour--weekend { background: #F8E1E6; }



/* ---------- Planning : style « tableur épuré » ----------
   Grille fine, cases rectangulaires ; seuls les codes ont une couleur,
   le reste prend la couleur de sa ligne (blanc, rose le week-end, vert férié, jaune aujourd'hui). */
.pl { border-spacing: 0; border-collapse: collapse; }
.pl th, .pl td { border: 1px solid #E4DFDA; padding: 0 !important; }
.pl .pl-jour { padding: 6px 10px !important; }
.pl thead th { padding: 8px 6px !important; background: #F4EFEA; }
.pl tfoot th, .pl tfoot td { padding: 8px 6px !important; }
.pl .pl-case, .pl .pl-hors { border-radius: 0; min-height: 34px; border: none !important; background: transparent; }
.pl .pl-case--vide, .pl .pl-case--travail { background: transparent !important; }
.pl .pl-case--travail { font-weight: 600; }
.pl td, .pl .pl-jour { background: #FFFFFF; }
.pl .pl-weekend td, .pl .pl-weekend .pl-jour { background: #FBEDF0; }
.pl .pl-ferie td, .pl .pl-ferie .pl-jour { background: #E4F1E6; }
.pl .pl-aujourdhui td, .pl .pl-aujourdhui .pl-jour { background: #FBE9C6; }
.pl .pl-case--sel { outline: 2.5px solid var(--ink); outline-offset: -2.5px; background: rgba(251, 233, 198, .7) !important; }
.pl .pl-case { user-select: none; touch-action: none; }
.pl .pl-compte { padding: 0 10px !important; }
.pl .pl-manque { background: inherit !important; color: #C0392B; font-weight: 800; }
.pl-weekend .pl-manque { background: #FBEDF0 !important; }
/* Pastille d'événement : couleur de la date, plus discrète */
.pl-ev { width: 18px; height: 18px; margin-left: 3px; background: transparent; color: var(--ink); border: 1.5px solid currentColor; font: 800 11px/1 var(--font-sans); }
.pl-ev--ajout { border-style: dashed; color: #B5ADC6; }