/* Team-Manager — DA « Liquid Glass » (dark)
   Même socle que OH Platform / central-web : tokens, cartes glass, boutons,
   inputs, toasts (par le haut), signature « Powered by KPY-INFRA ». */

/* ==========================================================
   1. Tokens
   ========================================================== */
:root {
  --bg: #05060c;
  --ink: #f4f6fb;
  --sec: #9aa3b5;
  --mut: #6b7488;
  --accent: #0a84ff;
  --accent-2: #3aa0ff;
  --ok: #34d27b;
  --err: #ff5a6a;
  --warn: #ffc857;
  --card-grad: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.06));
  --card-border: rgba(255,255,255,.12);
  --card-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 12px 40px rgba(0,0,0,.45);
  --r-lg: 22px;
  --r-sm: 14px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* motion (socle commun Liquid Glass) */
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.4, 1.3, 0.5, 1);
  --lift: -2px;
  --rise: 8px;
  --stagger: 30ms;

  /* alias historiques de Team-Manager (styles inline / anciens noms) */
  --surface: rgba(255,255,255,.06);
  --surface-soft: rgba(0,0,0,.28);
  --border: var(--card-border);
  --text: var(--ink);
  --muted: var(--sec);
  --text-muted: var(--sec);
  --primary: var(--accent);
  --primary-soft: rgba(10,132,255,.16);
  --shadow: var(--card-shadow);
  --radius-md: var(--r-sm);
  --radius-lg: var(--r-lg);
}

/* ==========================================================
   2. Base
   ========================================================== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100vh; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, select, input, textarea { font: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 18px; font-weight: 700; margin: 0; }
h3 { font-size: 15px; font-weight: 700; margin: 0; }
small { color: var(--sec); }
a { color: var(--accent-2); }
::selection { background: rgba(10,132,255,.35); }

/* barres de défilement fines et sombres */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- fond : 4 blobs radiaux flous, volontairement plus sobres ---- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(900px 620px at 82% -8%, rgba(22, 28, 52, .34) 0%, transparent 58%),
    radial-gradient(820px 580px at 0% 112%, rgba(20, 18, 38, .26) 0%, transparent 54%),
    linear-gradient(160deg, #06070d 0%, #0a0c14 52%, #070911 100%);
}
.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,6,12,.14), rgba(5,6,12,.22));
  pointer-events: none;
}
.blob {
  position: absolute;
  width: 40vw;
  height: 40vw;
  min-width: 360px;
  min-height: 360px;
  border-radius: 50%;
  filter: blur(92px);
  mix-blend-mode: screen;
  opacity: .18;
  animation: float 28s ease-in-out infinite;
  will-change: transform;
}
.b1 { background: radial-gradient(circle at 30% 30%, rgba(58,160,255,.72), transparent 62%); top: -18%; left: -12%; }
.b2 { background: radial-gradient(circle at 60% 40%, rgba(125,92,255,.58), transparent 62%); top: 2%; right: -18%; animation-delay: -7s; }
.b3 { background: radial-gradient(circle at 50% 60%, rgba(0,212,200,.48), transparent 64%); bottom: -24%; left: 16%; animation-delay: -13s; }
.b4 { background: radial-gradient(circle at 40% 50%, rgba(255,59,107,.34), transparent 62%); bottom: -12%; right: 6%; animation-delay: -18s; }
@keyframes float {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(2vw,-1.5vh) scale(1.03); }
  66% { transform: translate(-1.5vw,2vh) scale(.985); }
}

/* ==========================================================
   3. Surfaces glass
   ========================================================== */
.glass,
.panel,
.sidebar,
.modal__panel,
.login-card {
  background: var(--card-grad);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}
/* sous-surface (bloc dans une carte glass) */
.sub,
.logs-filter-card,
.planner-approval-panel,
.activity-table-toolbar,
.planner-grid-cell,
.account-meta-item,
.column-filter-input,
.planner-approval-item,
.competency-cell {
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-sm);
}

/* ==========================================================
   4. Shell : sidebar + main
   ========================================================== */
.app-shell {
  --shell-gap: 18px;
  --shell-pad-x: 20px;
  --shell-pad-y: 12px;
  --main-top-offset: 0px;
  min-height: 100vh;
  height: 100vh;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: var(--shell-gap);
  padding: var(--shell-pad-y) var(--shell-pad-x);
  overflow: hidden;
  transition: grid-template-columns var(--dur) var(--ease-out);
}

/* Le bandeau historique n'entre plus dans la composition verticale du contenu. */
.topbar {
  margin: 0;
}

.sidebar {
  position: sticky; top: var(--shell-pad-y);
  align-self: start;
  height: calc(100vh - (var(--shell-pad-y) * 2));
  padding: 12px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
}
.sidebar__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sidebar__toggle {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--card-border); background: rgba(255,255,255,.06);
  color: var(--sec); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.sidebar__toggle:hover { background: rgba(255,255,255,.12); color: var(--ink); }
.sidebar__toggle:active { transform: scale(.96); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand__mark {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 800; font-size: 13px; color: #fff;
  background: linear-gradient(145deg, var(--accent-2), #9b5cff);
  box-shadow: 0 6px 18px rgba(10,132,255,.35), 0 1px 0 rgba(255,255,255,.3) inset;
}
.brand__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.brand__text strong {
  font-size: 15px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap;
  background: linear-gradient(92deg, var(--accent-2), #9b5cff, #00d4c8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand__text span { color: var(--mut); font-size: 11px; font-family: var(--mono); white-space: nowrap; }

.nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.nav__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: 14px; font-weight: 550; text-align: left;
  color: var(--sec); background: transparent; border: none; cursor: pointer;
  padding: 9px 12px; border-radius: 11px; min-width: 0;
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.nav__item:hover { background: rgba(255,255,255,.06); color: var(--ink); }
.nav__item.is-active { background: rgba(10,132,255,.16); color: var(--ink); box-shadow: 0 0 0 1px rgba(58,160,255,.3) inset; }
.nav__item:active { transform: scale(.97); }
.nav__icon { width: 16px; flex: 0 0 16px; text-align: center; color: var(--accent-2); }
.nav__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 901px) {
  .nav__item::after { display: none !important; }
}

.app-shell.is-collapsed .nav__item::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: rgba(7, 9, 17, .92);
  color: var(--ink);
  box-shadow: var(--card-shadow);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: 20;
}

.app-shell.is-collapsed .nav__item:hover::after,
.app-shell.is-collapsed .nav__item:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.app-shell.is-collapsed .nav__item[data-view="dashboard"]::after { content: "Dashboard"; }
.app-shell.is-collapsed .nav__item[data-view="loads"]::after { content: "Charge ETP"; }
.app-shell.is-collapsed .nav__item[data-view="planner"]::after { content: "Planificateur"; }
.app-shell.is-collapsed .nav__item[data-view="competencies"]::after { content: "Cartographie des compétences"; }
.app-shell.is-collapsed .nav__item[data-view="members"]::after { content: "Membres"; }
.app-shell.is-collapsed .nav__item[data-view="accounts"]::after { content: "Comptes utilisateurs"; }
.app-shell.is-collapsed .nav__item[data-view="categories"]::after { content: "Catégories"; }
.app-shell.is-collapsed .nav__item[data-view="activities"]::after { content: "Activités & heures"; }
.app-shell.is-collapsed .nav__item[data-view="account"]::after { content: "Mon compte"; }
.app-shell.is-collapsed .nav__item[data-view="logs"]::after { content: "Log"; }

.sidebar-icon-btn::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: rgba(7, 9, 17, .92);
  color: var(--ink);
  box-shadow: var(--card-shadow);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: 20;
}

.app-shell.is-collapsed .sidebar-icon-btn:hover::after,
.app-shell.is-collapsed .sidebar-icon-btn:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.app-shell:not(.is-collapsed) .sidebar-icon-btn::after {
  display: none !important;
}

@media (hover: none) {
  .nav__item::after, .sidebar-icon-btn::after { display: none; }
}
.sidebar__account-area .sidebar__page-title { display: block; }
.app-shell.is-collapsed .sidebar__account-area {
  justify-items: center;
  padding-top: 10px;
}
.app-shell.is-collapsed .sidebar__page-title {
  max-width: 42px;
  text-align: center;
  font-size: 11px;
}
.app-shell.is-collapsed .sidebar__account-area .topbar__action-row {
  display: grid;
  gap: 4px;
  width: 100%;
}
.app-shell.is-collapsed .sidebar__account-area .topbar__action-row .btn {
  padding-inline: 0;
  min-height: 30px;
}
.app-shell.is-collapsed .sidebar__account-area .user-badge {
  justify-items: center;
  text-align: center;
}

.app-shell.is-collapsed {
  grid-template-columns: 82px minmax(0, 1fr);
}
.app-shell.is-collapsed .brand__text,
.app-shell.is-collapsed .nav__label {
  display: none;
}
.app-shell.is-collapsed .brand {
  justify-content: center;
}

.app-shell.is-collapsed .sidebar {
  align-items: center;
}

.app-shell.is-collapsed .sidebar__top { flex-direction: column; }
.app-shell.is-collapsed .nav__item { justify-content: center; padding: 10px 0; overflow: visible; }
.app-shell.is-collapsed .nav__item::after { display: none; }
.app-shell.is-collapsed .nav__icon { width: 18px; flex-basis: 18px; }

.main {
  min-width: 0;
  min-height: 0;
  height: calc(100vh - (var(--shell-pad-y) * 2));
  padding: var(--main-top-offset) 0 20px;
  overflow-y: auto;
  overflow-x: hidden;
}

.main > .view:first-of-type,
.main > section.view:first-of-type {
  margin-top: 0;
}

.view {
  min-width: 0;
  width: 100%;
  margin-top: 0;
  padding-top: 0;
  overflow: visible;
}

.sidebar__account-area {
  margin-top: auto;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--card-border);
}
.sidebar__page-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.sidebar__account-area .topbar__action-row {
  justify-content: stretch;
}
.sidebar__account-area .topbar__action-row .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 8px;
}
.sidebar__account-area .user-badge {
  display: grid;
  gap: 2px;
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.topbar--compact {
  display: none;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1200px) {
  .app-shell {
    --main-top-offset: 0;
  }
}

@media (max-width: 900px) {
  .app-shell {
    --shell-gap: 14px;
    --shell-pad-x: 14px;
    --shell-pad-y: 14px;
    --main-top-offset: 0;
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100dvh;
  }

  .sidebar {
    position: static;
    top: auto;
    height: auto;
    max-height: none;
  }

  .nav {
    overflow: visible;
  }

  .main {
    height: auto;
    min-height: 0;
    padding-top: 0;
    overflow: visible;
  }

  .sidebar__account-area { margin-top: 10px; }
  .topbar--compact { display: none; }
}

.topbar__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.topbar__action-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.user-badge { display: flex; align-items: baseline; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--mut); }
.user-badge strong { color: var(--sec); font-weight: 600; }
.eyebrow { margin: 0 0 5px; font-size: 11px; color: var(--mut); letter-spacing: .1em; text-transform: uppercase; font-family: var(--mono); }

/* ==========================================================
   5. Panels
   ========================================================== */
.panel { padding: 18px 20px; margin: 0 0 14px; min-width: 0; }
.panel--wide { overflow: hidden; }
.panel--narrow { max-width: 760px; }
.panel--soft { background: rgba(0,0,0,.22); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-color: rgba(255,255,255,.08); border-radius: var(--r-sm); }
.panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.panel__header > div:first-child { flex: 1; min-width: 0; }
.panel__header h2 { font-size: 18px; }
.panel__header h3 { font-size: 15px; }
.panel__header:empty, .panel__header > div:empty { display: none; }
.panel__subtitle { margin: 6px 0 0; color: var(--sec); font-size: 13.5px; line-height: 1.5; max-width: 64ch; }
.panel__actions, .panel__actions--stacked { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-left: auto; flex-shrink: 0; }
.panel__content { min-width: 0; }
.content-grid { display: grid; gap: 14px; margin-bottom: 0; }
.two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-grid .panel { margin: 0; }
.content-grid { margin-bottom: 14px; }
.empty-state { color: var(--mut); text-align: center; padding: 22px 0; font-size: 13.5px; }
.empty-state p { margin: 0; }

/* ==========================================================
   6. Boutons
   ========================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; font-size: 13.5px; line-height: 1.2;
  color: var(--ink); cursor: pointer; white-space: nowrap;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  padding: 9px 15px;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn:disabled:active { transform: none; background: rgba(255,255,255,.08); }
.btn-secondary { background: rgba(255,255,255,.08); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 20px rgba(10,132,255,.35), 0 1px 0 rgba(255,255,255,.3) inset;
}
.btn-primary:hover { background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 8px 26px rgba(10,132,255,.5), 0 1px 0 rgba(255,255,255,.3) inset; }
.btn-primary:disabled:hover { box-shadow: 0 6px 20px rgba(10,132,255,.35), 0 1px 0 rgba(255,255,255,.3) inset; background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
.btn-success {
  background: linear-gradient(180deg, #4de08f, var(--ok));
  border-color: transparent; color: #04170c;
  box-shadow: 0 6px 20px rgba(52,210,123,.3), 0 1px 0 rgba(255,255,255,.35) inset;
}
.btn-success:hover { background: linear-gradient(180deg, #4de08f, var(--ok)); box-shadow: 0 8px 26px rgba(52,210,123,.45), 0 1px 0 rgba(255,255,255,.35) inset; }
.btn-danger, .btn-danger--ghost { color: #ff8a95; border-color: rgba(255,90,106,.35); background: rgba(255,255,255,.04); }
.btn-danger:hover, .btn-danger--ghost:hover { background: rgba(255,90,106,.14); border-color: rgba(255,90,106,.6); box-shadow: 0 6px 20px rgba(255,90,106,.25); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.07); }
.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 10px; }
.btn.is-active { background: rgba(10,132,255,.2); border-color: rgba(58,160,255,.45); color: #cfe3ff; }
/* bouton occupé */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* déconnexion : action destructive discrète */
#logoutBtn { color: #ff8a95; border-color: rgba(255,90,106,.3); }
#logoutBtn:hover { background: rgba(255,90,106,.14); border-color: rgba(255,90,106,.6); }

/* ==========================================================
   7. Formulaires
   ========================================================== */
input, select, textarea {
  font: inherit; color: var(--ink);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  outline: none; min-width: 0;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.25); }
input::placeholder, textarea::placeholder { color: var(--mut); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
input[type="date"], input[type="time"], input[type="datetime-local"] { color-scheme: dark; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; padding: 0; min-height: 0; }
input[type="search"]::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%239aa3b5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
}
select option { background: #0f1220; color: var(--ink); }
select:invalid { color: var(--mut); }

/* Menus déroulants dédiés (point 20) — le select/input natif est caché juste avant ce bloc dans
   le DOM (display:none, posé en JS) ; .app-select reprend son gabarit visuel avec les jetons
   existants, sans nouvelle palette. */
.app-select { position: relative; display: inline-block; width: 100%; }
.app-select__trigger {
  width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: var(--ink);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-sm);
  padding: 10px 34px 10px 13px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%239aa3b5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
}
button.app-select__trigger { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-select__trigger::placeholder { color: var(--mut); }
.app-select__trigger:focus,
.app-select.is-open .app-select__trigger { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.25); }
.app-select.is-verrouille .app-select__trigger { opacity: .55; cursor: not-allowed; }
/* Le panneau est promu dans la « top layer » (attribut popover, posé en JS quand le navigateur
   le supporte) : sans cela il est rogné par le premier ancêtre qui découpe — et il y en a deux
   sortes ici, les conteneurs de tableau en « overflow: auto » (matrice des compétences, coquilles
   de tableaux) et les .panel, dont le « backdrop-filter » redéfinit le référentiel de
   « position: fixed ». Mesuré : sans la top layer, le bas du panneau ouvert dans la dernière
   ligne de la matrice était recouvert par ce qu'il y a derrière. La position est donc calculée en
   JS (positionnerPanneau) à partir du rectangle du déclencheur ; les valeurs ci-dessous ne servent
   que de repli quand popover n'est pas disponible. */
.app-select__panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto;
  background: var(--card-grad), #12162a;
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  box-shadow: var(--card-shadow);
  padding: 6px;
}
.app-select__option {
  padding: 8px 11px; border-radius: 9px; font-size: 13.5px; color: var(--ink); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.app-select__option.is-survole, .app-select__option:hover { background: rgba(255,255,255,.09); }
.app-select__option.is-selected { color: #cfe3ff; background: rgba(10,132,255,.18); }

/* --- Point 20, étape 5 : composant calendrier (envelopperChampDate) ---------------------------
   Le champ natif <input type="date"> reste dans le DOM en display:none ; ce qui suit habille le
   couple déclencheur + panneau qui le remplace. Mêmes jetons que le reste, aucune palette
   nouvelle. Le panneau vit dans la top layer : sa position est posée en JS, les valeurs de
   position ci-dessous ne servent que de repli si popover n'existe pas. */
/* align-self:start : l'icône est posée à la moitié de la hauteur de son enveloppe. Dans une grille
   en align-items:stretch — le formulaire du planificateur — cette enveloppe prenait la hauteur de
   toute la rangée et l'icône descendait se poser une cinquantaine de pixels sous son champ. */
.app-date { position: relative; display: inline-block; width: 100%; align-self: start; }
.app-date__trigger {
  width: 100%; font: inherit; color: var(--ink);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-sm);
  padding: 10px 34px 10px 13px;
  outline: none;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.app-date__trigger::placeholder { color: var(--mut); }
.app-date__trigger:focus,
.app-date.is-open .app-date__trigger { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,.25); }
.app-date.is-verrouille .app-date__trigger { opacity: .55; cursor: not-allowed; }
/* L'icône est décorative et non tabulable : elle double le clic sur le champ, elle ne le remplace
   pas. Positionnée par-dessus le rembourrage droit prévu pour elle dans .app-date__trigger. */
.app-date__icone {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  color: var(--mut); background: none; border: 0; border-radius: 8px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.app-date__icone:hover { color: var(--ink); background: rgba(255,255,255,.07); }
/* L'icone est un <button>, et « .planner-form button { width: 100% } » est un selecteur
   DESCENDANT : dans la barre du planificateur, elle s'etirait sur toute la largeur du champ — 160 px
   mesures pour 26 attendus — et son dessin, centre dans ce bouton geant, venait se poser au milieu
   du texte. Defaut present depuis la creation du composant a l'etape 5 du point 20, revele par le
   resserrement des champs le 02/09/2026. Deux classes ici, contre une classe et un element la-bas :
   la specificite suffit a reprendre la main, sans !important. */
.app-date .app-date__icone { width: 26px; height: 26px; min-height: 0; }
.app-date.is-verrouille .app-date__icone { opacity: .4; cursor: not-allowed; }
.app-date__panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: 268px; padding: 10px;
  background: var(--card-grad), #12162a;
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  box-shadow: var(--card-shadow);
}
.app-date__entete { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.app-date__mois { font-size: 13px; font-weight: 600; color: var(--ink); text-transform: capitalize; }
.app-date__nav {
  width: 26px; height: 26px; padding: 0; font-size: 16px; line-height: 1;
  color: var(--sec); background: rgba(255,255,255,.05); border: 0; border-radius: 8px; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.app-date__nav:hover { color: var(--ink); background: rgba(255,255,255,.12); }
.app-date__jours-entete, .app-date__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.app-date__jours-entete { margin-bottom: 4px; }
.app-date__jours-entete span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--mut); text-align: center; padding: 3px 0;
}
.app-date__jour {
  display: flex; align-items: center; justify-content: center;
  height: 31px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.app-date__jour:hover { background: rgba(255,255,255,.09); }
/* Les jours de débordement restent lisibles et cliquables — les griser à l'excès obligerait à
   changer de mois pour attraper un 1er ou un 31 qui est déjà sous les yeux. */
.app-date__jour.est-hors-mois { color: var(--mut); }
.app-date__jour.est-survole { box-shadow: inset 0 0 0 1px var(--accent); }
.app-date__jour.est-aujourdhui { font-weight: 700; color: #cfe3ff; }
.app-date__jour.est-choisi { color: #fff; background: var(--accent); }
.app-date__jour.est-choisi:hover { background: var(--accent); }
.app-date__pied { display: flex; justify-content: space-between; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--card-border); }
.app-date__action {
  font: inherit; font-size: 12px; color: var(--sec); cursor: pointer;
  background: none; border: 0; padding: 4px 8px; border-radius: 8px;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.app-date__action:hover { color: var(--ink); background: rgba(255,255,255,.08); }
/* Étape 4 du point 20 : les menus vivant dans une cellule de tableau (rôle par compte, niveau
   par cellule de la matrice, référent par pôle) reprennent le gabarit compact qu'avaient les
   <select> natifs qu'ils remplacent — sans quoi les lignes gagnent une dizaine de pixels chacune. */
td .app-select__trigger { padding: 7px 28px 7px 10px; font-size: 12.5px; background-position: right 10px center; }

/* Case « journée entière ». Même gabarit que .activity-planner-option, et surtout même parade au
   piège qui l'avait défigurée : « .member-form input { width: 100% } » et « .planner-form input
   { width: 100% } » sont des sélecteurs DESCENDANTS, ils atteindraient aussi ces cases à cocher et
   les étireraient sur toute la ligne. */
.activity-journee-option, .member-form--modal label.activity-journee-option {
  grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; gap: 8px;
  color: var(--sec); font-size: 13px; cursor: pointer;
}
.activity-journee-option span { display: inline; }
.activity-journee-option input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.planner-journee-option {
  display: flex; flex-direction: row; align-items: center; gap: 6px; flex: 0 0 auto;
  color: var(--sec); font-size: 12px; white-space: nowrap; cursor: pointer;
}
.planner-journee-option span { display: inline; }
/* Point 36 A : le champ « h / jour » d'une plage, à côté de la case Journée. */
/* Point 38 : modale « Planifier une activité ». */
.modal__panel--planifier { width: min(96vw, 640px); }
.modal__panel--planifier .app-select::after, .modal__panel--planifier .app-date::after { content: none !important; }
.modal__panel--planifier .app-select, .modal__panel--planifier .app-date { width: 100%; max-width: none; }
/* UNE colonne explicite. Sans elle, « grid-column: 1 / -1 » (Commentaire, Motif) est lu par Safari
   iOS comme une demande de DEUX colonnes : le formulaire se dédoublait sur iPhone — Activité et
   Membre à gauche, les dates à droite, la Durée coincée à gauche. Chrome, lui, restait sur une
   colonne. Constaté sur l'iPhone de Kévin le 8 septembre 2026. */
.planifier-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.planifier-form input[type="text"], .planifier-form input[type="number"] { width: 100%; }
.planifier-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.planifier-champ { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--sec); min-width: 0; }
.planifier-champ > span { display: flex; align-items: center; gap: 6px; }
.planifier-champ em { color: var(--mut); font-style: normal; }
.planifier-champ--large { grid-column: 1 / -1; }
.planifier-champ--court { max-width: 200px; }
.planifier-bloc { border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 12px; display: grid; gap: 10px; background: rgba(255,255,255,.02); }
.planifier-bloc__label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--sec); }
.planifier-resume { margin: 0; font-size: 12.5px; color: var(--sec); display: flex; gap: 8px; align-items: baseline; }
.planifier-resume .planner-duration { color: var(--ink); font-weight: 700; }
.planifier-duree .seg { justify-self: center; }
.seg { display: inline-flex; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 3px; gap: 3px; background: rgba(255,255,255,.04); width: max-content; max-width: 100%; flex-wrap: wrap; }
.seg__btn { border: 0; background: transparent; color: var(--sec); font: inherit; font-size: 12.5px; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-on { background: var(--accent, #3aa0ff); color: #0b1020; font-weight: 700; }
.seg__btn:focus-visible { outline: 2px solid rgba(58,160,255,.7); outline-offset: 1px; }
.planifier-lien { border: 0; background: transparent; color: var(--accent, #3aa0ff); font: inherit; font-size: 12px; padding: 0; cursor: pointer; text-decoration: underline dotted; }
.planifier-lien:hover { color: var(--ink); }
.planifier-membres { border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 12px; display: grid; gap: 10px; background: rgba(255,255,255,.02); }
.planifier-membres__tete { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--sec); flex-wrap: wrap; }
.planifier-membres__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 12px; }
.planifier-membres__grille label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.planifier-membres__grille input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.planifier-champ textarea { width: 100%; resize: vertical; min-height: 64px; }
/* Le motif d'un refus tient sur sa propre ligne dans la notification. */
.notif__corps { white-space: pre-line; }
.planifier-pied { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }
.planifier-pied__resume { margin: 0; font-size: 12.5px; color: var(--sec); line-height: 1.4; }
.planifier-pied__resume strong { color: var(--ink); }
.planifier-pied__btns { display: flex; gap: 8px; flex: 0 0 auto; }
/* Bulles d'aide : un « ? » discret, une bulle courte au clic, fermée au clic ailleurs ou à Échap. */
.aide-btn { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--mut); font: 700 10px/1 var(--mono); cursor: help; padding: 0; flex: 0 0 auto; }
.aide-btn:hover, .aide-btn.is-on { color: var(--ink); border-color: rgba(58,160,255,.6); }
.aide-bulle { position: absolute; z-index: 60; width: min(280px, 80vw); padding: 9px 11px; border-radius: 10px; background: #1e2236; border: 1px solid rgba(58,160,255,.45); color: var(--ink); font-size: 12px; line-height: 1.45; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
@media (max-width: 640px) { .planifier-ligne { grid-template-columns: 1fr; } .planifier-pied { flex-direction: column; align-items: stretch; } }
.planner-journee-option input[type="checkbox"] { width: auto; flex: 0 0 auto; }
/* Le créneau grisé quand la journée entière est cochée : les champs restent lisibles mais
   annoncent qu'ils ne comptent plus. */
.planner-creneau.est-journee .app-select, .activity-slot.est-journee .app-select { opacity: .45; }
.competency-cell .app-select__trigger { padding: 6px 26px 6px 9px; font-size: 12.5px; background-position: right 9px center; }
label { color: var(--sec); font-size: 13px; font-weight: 500; }
label > span { display: block; font-size: 12.5px; color: var(--sec); font-weight: 500; }
.field, .filter-field, .form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span, .filter-field > span, .form-group > label { font-size: 12.5px; color: var(--sec); font-weight: 500; }
.field input, .field select, .form-group input, .form-group select, .form-group textarea { width: 100%; }
.form-stack { display: grid; gap: 16px; }
.form-message { font-size: 13px; color: var(--sec); padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.form-message.is-error, .form-message.error, .form-error { color: #ffb3ba; background: rgba(255,90,106,.09); border: 1px solid rgba(255,90,106,.4); }
.form-message.is-success, .form-message.success { color: #8fe8bb; background: rgba(52,210,123,.08); border: 1px solid rgba(52,210,123,.4); }
.filter-hint { margin: 0; color: var(--mut); font-size: 11.5px; line-height: 1.35; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form input, .inline-form select { min-height: 40px; }
.mono, .mono-box { font-family: var(--mono); }
.mono-box {
  font-size: 13px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 10px 13px; word-break: break-all; user-select: all;
}

/* ==========================================================
   8. Tableaux
   ========================================================== */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  color: var(--mut); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--card-border); vertical-align: bottom;
  position: relative; overflow: visible;
}
td { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--sec); vertical-align: middle; transition: background-color var(--dur-fast) var(--ease-out); }
td b, td strong { color: var(--ink); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255,255,255,.04); }
td:first-child { color: var(--ink); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
.table-scroll, .table-wrap, .activity-table-wrap, .logs-table-wrap, .member-table-shell, .competency-matrix-wrap {
  overflow: auto; border: 1px solid var(--card-border); border-radius: var(--r-sm); background: rgba(0,0,0,.2);
}
.table-scroll table, .logs-table-wrap table, .activity-table-wrap table, .member-table-shell table { min-width: 720px; }
.empty-table, .empty-cell { text-align: center !important; color: var(--mut) !important; padding: 22px 12px !important; }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.table-actions .btn { padding: 5px 10px; font-size: 12px; border-radius: 10px; }
.table-scroll .table-actions { flex-wrap: nowrap; }
.table-actions--wrap { flex-wrap: wrap; }
.table-scroll td { white-space: nowrap; }
.logs-table-wrap td { white-space: normal; }
.activity-table-wrap, .member-table-shell.activity-table-shell {
  overflow: auto;
  max-width: 100%;
  max-height: min(78vh, 860px);
}
.activity-table-wrap table, .member-table-shell.activity-table-shell table {
  min-width: 1280px;
}
.activity-table-wrap thead th, .member-table-shell.activity-table-shell thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #0d101c;
}
.activity-table-shell .table-actions {
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.activity-table-shell td:last-child {
  white-space: normal;
}
.activity-table-shell .table-actions .btn {
  flex: 1 1 calc(50% - 6px);
  min-width: 0;
}
.activity-table-shell .table-actions .btn-danger {
  flex-basis: 100%;
}
/* tableaux nus dans un panneau (dashboard) : pas de cadre supplémentaire */
.panel > table th:first-child, .panel > table td:first-child { padding-left: 4px; }
.panel > table th:last-child, .panel > table td:last-child { padding-right: 4px; }

/* filtres de colonne (Membres / Activités) */
.column-filter-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; }
.column-filter-trigger span { flex: 1 1 auto; min-width: 0; }
.column-filter-trigger--compact { gap: 4px; }
.filter-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 999px; padding: 0;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: var(--sec);
  font-size: 12px; line-height: 1; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.filter-toggle:hover { background: rgba(255,255,255,.12); color: var(--ink); }
.filter-toggle.is-open { background: rgba(10,132,255,.2); border-color: rgba(58,160,255,.45); color: #cfe3ff; }
/* survol flottant : le panneau se pose par-dessus le tableau au lieu de pousser la ligne
   d'en-tête (choix de Kévin, validé sur maquette le 1er septembre 2026 — généralisé depuis le
   tableau Activités, qui l'avait déjà). Un fond opaque est nécessaire ici (contrairement au
   fond translucide partagé par les autres sous-surfaces, ligne 141) : le panneau flotte
   au-dessus des lignes du tableau, un fond transparent laisserait le texte des lignes
   transparaître dessous. */
.column-filter-input {
  position: absolute; top: calc(100% - 6px); left: 0; min-width: 230px; z-index: 6; padding: 8px;
  background: #0f1220; box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
/* dernières colonnes : le panneau s'ouvrirait hors du tableau à droite — on l'ancre à droite */
.member-table-shell:not(.activity-table-shell) th:nth-child(n+6) .column-filter-input,
.activity-table-shell th:nth-child(n+6) .column-filter-input { left: auto; right: 0; }
.column-filter-input input, .column-filter-input select { width: 100%; min-width: 130px; padding: 7px 10px; font-size: 12.5px; text-transform: none; letter-spacing: 0; font-family: "Inter", system-ui, sans-serif; }
.column-filter-input select { padding-right: 30px; }
.activity-date-filter-stack { display: grid; gap: 8px; text-transform: none; letter-spacing: 0; font-family: "Inter", system-ui, sans-serif; }
.activity-date-filter-stack .filter-field > span { text-transform: none; }
.activity-table-shell [data-activity-filter-panel="status"] { max-width: 150px; }

/* ==========================================================
   9. Pastilles / badges
   ========================================================== */
.pill, .activity-status, .activity-badge, .saturation-badge, .level-chip, .log-action-label,
.planner-pill, .planner-card-status-badge, .planner-jour-mode, .categorie-nature {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 1.3;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  color: var(--sec); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
}
.pill-ok, .activity-status.is-active, .saturation-badge--available, .level-chip--confirmed, .log-action-label--success,
.planner-pill.is-approved, .planner-card.is-active .planner-card-status-badge, .planner-card.is-approved .planner-card-status-badge {
  color: #8fe8bb; background: rgba(52,210,123,.12); border-color: rgba(52,210,123,.35);
}
.pill-err, .activity-status.is-inactive, .saturation-badge--over, .log-action-label--danger, .log-action-label--neutral,
.planner-pill.is-rejected, .planner-card.is-rejected .planner-card-status-badge {
  color: #ff9aa5; background: rgba(255,90,106,.12); border-color: rgba(255,90,106,.4);
}
.pill-warn, .saturation-badge--watch, .level-chip--expert, .log-action-label--warning,
.planner-pill.is-pending, .planner-card.is-pending .planner-card-status-badge {
  color: #ffd479; background: rgba(255,200,87,.12); border-color: rgba(255,200,87,.35);
}
.saturation-badge--full { color: #ffb08a; background: rgba(255,138,61,.12); border-color: rgba(255,138,61,.4); }
.pill-info, .level-chip--intermediate, .log-action-label--info, .activity-badge,
.planner-card.is-done .planner-card-status-badge {
  color: #7fb8ff; background: rgba(10,132,255,.14); border-color: rgba(58,160,255,.4);
}
.level-chip--notions { color: #cfd6e4; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
/* Rotation Support / Projet : pastille indicative en tête de case du planificateur (point 30).
   Plus basse que les autres pastilles — elle ne doit pas concurrencer les cartes. Support en bleu
   (la couleur d'information), Projet en gris neutre : c'est le support qu'on cherche du regard. */
.planner-jour-mode { min-height: 18px; padding: 1px 8px; font-size: 10px; justify-self: start; letter-spacing: .04em; text-transform: uppercase; }
.planner-jour-mode.is-support { color: #7fb8ff; background: rgba(10,132,255,.14); border-color: rgba(58,160,255,.4); }
.planner-jour-mode.is-projet { color: #cfd6e4; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.planner-legend__sep { color: var(--mut); margin: 0 2px; }
/* Congés payés / RTT (point 31) : ORANGE pour les congés ; VIOLET pour
   les RTT — une couleur que rien d'autre n'emploie dans l'application, donc lisible d'un coup d'œil. */
.activity-badge.is-conge { color: #ffb08a; background: rgba(255,138,61,.14); border-color: rgba(255,138,61,.45); }
.activity-badge.is-rtt, .pill-rtt { color: #d2b8ff; background: rgba(150,100,255,.16); border-color: rgba(170,120,255,.45); }
.categorie-nature { margin-left: 8px; color: #cfd6e4; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); font-size: 10px; }
.categorie-nature.is-rtt { color: #d2b8ff; background: rgba(150,100,255,.16); border-color: rgba(170,120,255,.45); }
.categorie-nature-note { margin: 0 0 12px; padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.04); color: var(--sec); font-size: 12px; line-height: 1.45; }
.level-chip--empty { color: var(--mut); background: rgba(255,255,255,.03); }
.log-action-label { min-width: 8rem; }
.activity-status { white-space: normal; text-align: center; }
/* status dots */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot.err { background: var(--err); box-shadow: 0 0 8px var(--err); }
.dot.warn { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.dot.off { background: var(--mut); }

/* ==========================================================
   10. Cartes KPI (Dashboard, Charge ETP, Activités)
   ========================================================== */
#kpiGrid, .kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.loads-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.stats-row, .activity-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi, .dashboard-kpi, .loads-kpi, .activity-kpi, .summary-card {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px;
  min-height: 104px; padding: 18px 18px 16px; margin: 0;
  background: rgba(0,0,0,.22); border: 1px solid var(--card-border); border-radius: var(--r-sm);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kpi::before, .dashboard-kpi::before, .loads-kpi::before, .activity-kpi::before {
  content: ''; position: absolute; left: 18px; top: 13px; width: 34px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), #9b5cff); box-shadow: 0 0 12px rgba(10,132,255,.45);
}
.dashboard-kpi__label, .loads-kpi__label, .kpi span, .activity-kpi span {
  display: block; margin: 8px 0 4px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--mut);
}
.dashboard-kpi__value, .loads-kpi__value, .kpi strong, .activity-kpi strong {
  display: block; margin: 0; font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--ink);
}
.kpi small, .dashboard-kpi small, .loads-kpi small, .activity-kpi small { display: block; margin-top: 8px; color: var(--mut); font-size: 11.5px; }
@media (hover: hover) {
  .kpi:hover, .dashboard-kpi:hover, .loads-kpi:hover, .activity-kpi:hover { transform: translateY(var(--lift)); border-color: rgba(255,255,255,.18); }
}

/* ==========================================================
   11. Dashboard
   ========================================================== */
.dashboard-visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.dashboard-visual-grid .panel { margin: 0; overflow: hidden; }

/* Quand un panneau voisin est masque (dashboard utilisateur, point 19), celui qui reste occupe
   toute la largeur de sa ligne plutot que de laisser un vide a cote. Pilote en JS au meme moment
   que le « hidden » du voisin, pas via un selecteur CSS exotique de type :has(). */
.panel--pleine-largeur { grid-column: 1 / -1; }
.chart-box { position: relative; min-height: 260px; padding: 4px 2px 0; }
.chart-box--wide { min-height: 340px; }
.chart-box canvas { max-width: 100%; }
.dashboard-bar { margin-bottom: 9px; }
.dashboard-bar__head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: 13px; }
.progress { height: 7px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width var(--dur-slow) var(--ease-out); }
.schedule-list { display: flex; flex-direction: column; gap: 8px; }
.schedule-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); font-size: 13px;
}
.schedule-item strong { color: var(--sec); font-weight: 500; }
.schedule-item span { font-family: var(--mono); color: var(--ink); font-weight: 600; }
.legend-inline, .chart-legend { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 10px; color: var(--sec); }
.legend-inline span, .chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-inline i, .chart-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 6px currentColor; }
.legend-box, .referent-card { background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-sm); padding: 13px; }
.legend-list { margin: 0; padding-left: 18px; line-height: 1.5; font-size: 13px; color: var(--sec); }

/* ==========================================================
   12. Charge ETP
   ========================================================== */
.loads-header { align-items: flex-start; }
.loads-export-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-left: auto; flex-shrink: 0; }
.loads-toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.loads-toolbar .field select { width: 100%; }
.loads-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.loads-grid .panel { margin: 0; overflow: auto; }
.loads-grid table th, .loads-grid table td { padding-left: 8px; padding-right: 8px; }
.loads-grid table td:first-child, #latestActivitiesBody td:first-child, #loadsDetailsTableBody td:nth-child(3) { white-space: nowrap; }
.saturation { min-width: 110px; display: inline-block; }
.saturation__value { display: block; font-variant-numeric: tabular-nums; margin-bottom: 5px; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.saturation__track { display: block; width: 100%; height: 6px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.saturation__fill { display: block; height: 100%; border-radius: inherit; }
.saturation__fill--available { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.saturation__fill--watch { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.saturation__fill--full { background: #ff8a3d; box-shadow: 0 0 8px #ff8a3d; }
.saturation__fill--over { background: var(--err); box-shadow: 0 0 8px var(--err); }

/* ==========================================================
   13. Planificateur
   ========================================================== */
.planner-shell { display: grid; gap: 16px; }
.planner-shell > *, .planner-toolbar > * { min-width: 0; }
.planner-header { align-items: flex-start; margin-bottom: 0; }
.planner-header__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.planner-week-label {
  min-width: 190px; padding: 8px 14px; text-align: center; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink);
  border: 1px solid var(--card-border); border-radius: var(--r-sm); background: rgba(0,0,0,.28);
}
.planner-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.planner-toolbar__gauche { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#ouvrirPlanifier { width: auto; }
/* Les colonnes ne peuvent pas etre toutes de meme largeur. « repeat(auto-fit, minmax(150px, 1fr)) »
   donnait autant de place a un champ « --:-- » qu'a un selecteur devant afficher
   « Projet Harmonisation NAC » : le libelle etait tronque des que le nom depassait. Reduire la
   police n'aurait fait que deplacer le probleme — il y aura toujours une categorie plus longue.
   Les champs horaires sont etroits par nature, ils tiennent en « auto » ; les selecteurs prennent
   la place restante. Signale par Kevin le 01/09/2026. */
/* DEUX lignes, trois colonnes. Une seule ligne ne pouvait pas marcher : mesure faite, les noms les
   plus longs demandent 165 a 175 px et il ne restait que 97 a 153 px par selecteur. Aucun reglage de
   police ni de fraction ne rattrape cet ecart — c'est la disposition qui etait en cause.

   L'ordre du DOM suffit a composer les deux lignes, sans grid-template-areas :
     administration : [membre] [activite] [date] / [creneau] [commentaire] [Planifier]
     utilisateur    : [activite] [date] [creneau] / [commentaire] [Planifier]
   Signale par Kevin le 01/09/2026. */
/* Trois colonnes égales et sans limite de largeur : sur un écran large, chaque champ atteignait
   650 px — « Membre… » occupait un tiers de la barre pour un nom de dix caractères. On plafonne la
   barre, et on donne à la première colonne un peu plus que les autres : c'est elle qui porte le
   créneau (deux champs plus la durée sur une seule ligne), donc la seule qui ait vraiment besoin
   de place. Signalé par Kévin le 02/09/2026, capture à l'appui. */
/* Quatre colonnes depuis l'ajout de la date de fin (02/09/2026). Le créneau occupe deux colonnes :
   il porte deux champs, la durée et la case « Journée », là où les autres cellules n'ont qu'un
   contrôle. Trois colonnes ne suffisaient plus — la quatrième serait passée à la ligne. */
.planner-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; max-width: 1180px; }
.planner-form .planner-creneau { grid-column: span 2; }
/* La plage de dates occupe elle aussi deux colonnes : elle porte deux champs et leur fleche, comme
   le creneau en porte deux et sa duree. La premiere ligne reste donc a quatre colonnes
   (membre, activite, plage) et la seconde aussi (creneau, commentaire, bouton). */
.planner-form .planner-plage { grid-column: span 2; }

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   Mise en forme « E », retenue par Kevin le 02/09/2026 apres comparaison de cinq maquettes
   rendues avec cette meme feuille de style. Deux idees, additives, sans toucher au balisage ni
   au comportement — c'est du CSS seul, donc rien de fonctionnel ne peut casser.

   1. La periode et le creneau deviennent chacun UN controle encadre. Auparavant six boites de
      meme poids se suivaient sans hierarchie ; on en compte quatre, et les deux dates se lisent
      comme les bornes d'une meme plage plutot que comme deux champs voisins.
   2. Une etiquette nomme chaque groupe. La barre n'a aucun libelle en clair — chaque champ ne
      porte qu'un texte de substitution qui disparait des la saisie ; passe ce moment, plus rien
      ne dit ce que contient la case.
   Cout : 20 px de hauteur (101 -> 121), mesures.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

/* 1 — les deux groupes deviennent chacun un controle */
.planner-plage, .planner-creneau {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  padding: 0 8px;
  gap: 0;
  flex-wrap: nowrap;   /* le cadre ne doit pas se scinder en deux lignes */
}
/* background-COLOR et non background : le chevron des menus est une image de fond, et un
   « background: transparent » l'emporterait avec lui. Defaut vu sur la premiere maquette. */
.planner-plage .app-date__trigger,
.planner-creneau .app-select__trigger {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
/* ...MAIS pas au focus. Neutraliser la bordure et l'ombre a la meme specificite que
   « .app-select__trigger:focus » les emportait aussi : le champ ne montrait plus RIEN quand on
   l'atteignait au clavier, ni au repos ni au focus. Defaut introduit par le cadre ci-dessus et
   trouve en le testant. On redonne ici l'indication d'origine, avec assez de specificite pour
   passer devant, et pour l'etat « ouvert » comme pour le focus. */
.planner-plage .app-date__trigger:focus,
.planner-plage .app-date.is-open .app-date__trigger,
.planner-creneau .app-select__trigger:focus,
.planner-creneau .app-select.is-open .app-select__trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .25);
}
.planner-plage .planner-plage__fleche { color: rgba(255, 255, 255, .30); }
.planner-creneau .planner-duration {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .42);
  min-width: 42px;
  text-align: center;
}
.planner-creneau .planner-journee-option {
  padding-left: 9px;
  border-left: 1px solid rgba(255, 255, 255, .09);
  margin-left: 2px;
  white-space: nowrap;
}

/* 2 — etiquettes de groupe */
.planner-form { row-gap: 24px; }
/* Frere ADJACENT du natif, et non :nth-of-type : l'enveloppe generee suit toujours son <select>
   d'origine, alors qu'un rang parmi les <div> se decalerait au moindre ajout de bloc. */
#plannerMemberSelect + .app-select,
#plannerCategorySelect + .app-select,
.planner-form .planner-plage,
.planner-form .planner-creneau { position: relative; }
#plannerMemberSelect + .app-select::after,
#plannerCategorySelect + .app-select::after,
.planner-form .planner-plage::before,
.planner-form .planner-creneau::before {
  position: absolute;
  top: -17px;
  left: 3px;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
  font-weight: 700;
  pointer-events: none;
}
#plannerMemberSelect + .app-select::after { content: 'Qui'; }
#plannerCategorySelect + .app-select::after { content: 'Quoi'; }
.planner-form .planner-plage::before { content: 'P\00e9riode'; }
.planner-form .planner-creneau::before { content: 'Horaires'; }
/* L'enveloppe du membre est masquee par [hidden] pour un utilisateur simple : son etiquette
   disparait avec elle, sans regle supplementaire. */

/* Meme forme que .planner-creneau : un bloc, pas deux champs voisins. */
.planner-plage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* se replie plutot que de deborder quand la colonne se resserre */
  gap: 6px;
  min-width: 0;
}
/* Les deux dates se partagent la place a egalite. Le plafond « .planner-form > .app-date » ne les
   atteint plus — elles ne sont plus enfants DIRECTS du formulaire depuis leur regroupement — ce qui
   est voulu : dans un bloc de deux colonnes, 160 px les laisseraient flotter loin de leur fleche. */
.planner-plage .app-date { flex: 1 1 0; min-width: 0; width: auto; max-width: 260px; }
.planner-plage__fleche {
  flex: 0 0 auto;
  color: var(--text-muted, #8b93a7);
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  user-select: none;
}

/* En administration, un selecteur de membre s'ajoute en tete. */
/* Les deux modes partagent la meme grille : c'est l'ordre du DOM qui les distingue. */

/* Le creneau forme desormais UN bloc : « De [debut] a [fin] [duree] ». Les trois champs voyageaient
   auparavant comme trois colonnes independantes, sans rien indiquer de leur role — rien ne disait
   lequel etait le debut. Signale par Kevin le 01/09/2026. */
.planner-creneau {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* se replie plutot que de deborder quand la colonne se resserre */
  gap: 6px;
  min-width: 0;
}


/* « .planner-form input { width: 100% } » est un selecteur DESCENDANT : il atteint aussi les champs
   du creneau, qui s'etireraient. Ici ils doivent garder leur largeur naturelle — un champ horaire
   n'a pas besoin de plus. */
.planner-creneau input[type="time"] {
  width: auto;
  min-width: 96px;   /* juste assez pour « 12:30 » et le chevron natif */
  flex: 0 1 auto;
}
/* Point 20, étape 6 : la version « composant » de la contrainte ci-dessus. Les enveloppes sont en
   width:100% par défaut ; sans cette règle chacune prenait toute la ligne et le créneau « De … à … »
   se dépliait sur quatre lignes — 194 px mesurés au lieu de 45. */
/* Les trois champs de la premiere ligne s'etiraient a toute la largeur de leur colonne — 369, 295
   et 251 px — pour des contenus qui n'en reclament que 212, 220 et 135, mesures sur le texte le
   plus long de chaque liste (« MENARD Marc-Antoine », « projet integration reseau »,
   « jj/mm/aaaa »). Le selecteur d'enfant DIRECT est essentiel : sans lui, ce plafond atteindrait
   aussi les deux bornes du creneau, imbriquees dans .planner-creneau, qu'on vient au contraire de
   serrer au plus juste. */
.planner-form > .app-select { max-width: 230px; }
.planner-form > .app-date { max-width: 160px; }

.planner-creneau .app-select { flex: 1 1 0; min-width: 0; width: auto; }
.planner-creneau .app-select__trigger { min-width: 0; padding-right: 26px; background-position: right 9px center; }
.planner-form #plannerComment { grid-column: auto; }
/* L'ordre est explicite pour un utilisateur simple, dont le champ « membre » est masqué.
   Mis à jour le 28/08/2026 : #plannerHours a laissé place au créneau. Sans cela, les nouveaux
   champs prenaient l'ordre 0 par défaut et passaient devant la catégorie et la date. */
/* La durée est un affichage, pas une saisie : elle n'a pas besoin d'une colonne entière. */
.planner-form #plannerDuration { min-height: 42px; }
.planner-form input, .planner-form select, .planner-form button { width: 100%; min-width: 0; min-height: 42px; }
.planner-legend { display: flex; gap: 8px; flex-wrap: wrap; }
.planner-pill { padding: 5px 11px; }
.planner-grid-wrap {
  overflow: auto;
  max-width: 100%;
  max-height: min(96vh, 1140px);
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.2);
}
.planner-grid { display: grid; gap: 14px; min-width: 1040px; padding: 12px; }
.planner-grid-header { position: sticky; top: 10px; z-index: 5; display: grid; grid-template-columns: repeat(7, minmax(170px, 1fr)); gap: 10px; padding-block: 8px 10px; background: transparent; border: 0; box-shadow: none; }
.planner-grid-row { display: grid; gap: 10px; }
.planner-grid-row--member { grid-template-columns: repeat(7, minmax(170px, 1fr)); }
.planner-member-section { display: grid; gap: 10px; }
.planner-member-heading {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px;
  font-weight: 700; color: var(--ink); text-align: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-sm);
}
.planner-grid-cell { min-height: 150px; padding: 12px; }
.planner-grid-header-cell {
  min-height: auto; padding: 8px 10px; text-align: center; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--mut);
  background: rgba(24,27,42,.98); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-sm); box-shadow: none;
}
.planner-grid-member { display: flex; align-items: center; font-weight: 700; color: var(--ink); background: rgba(255,255,255,.04); }
.planner-grid-day { display: grid; align-content: start; gap: 8px; }
.planner-day-empty {
  display: flex; align-items: center; justify-content: center; min-height: 118px; padding: 12px;
  border: 1px dashed rgba(255,255,255,.12); border-radius: 12px; color: var(--mut); font-size: 12px; text-align: center;
}
.planner-card {
  position: relative; display: grid; gap: 9px; grid-template-columns: minmax(0, 1fr);
  padding: 12px 12px 12px 16px; border-radius: 12px; min-width: 0; overflow: hidden;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .planner-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.2); box-shadow: 0 8px 22px rgba(0,0,0,.35); } }
.planner-card-accent { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--mut); }
.planner-card.is-pending { border-color: rgba(255,200,87,.3); }
.planner-card.is-pending .planner-card-accent { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.planner-card.is-active, .planner-card.is-approved { border-color: rgba(52,210,123,.3); }
.planner-card.is-active .planner-card-accent, .planner-card.is-approved .planner-card-accent { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.planner-card.is-done { border-color: rgba(58,160,255,.35); }
.planner-card.is-done .planner-card-accent { background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.planner-card.is-rejected { border-color: rgba(255,90,106,.35); }
.planner-card.is-rejected .planner-card-accent { background: var(--err); box-shadow: 0 0 10px var(--err); }
/* Carte de congé : ORANGE (demande de Kévin du 4 septembre, apres un premier gris trop discret).
   Carte de RTT : VIOLETTE. Dans les deux cas l'ACCENT garde la
   couleur du statut : une demande en attente doit se repérer comme toute demande. */
.planner-card.is-conge { background: rgba(255,138,61,.14); border-color: rgba(255,138,61,.45); border-style: dashed; }
.planner-card.is-conge .planner-card-title { color: #ffb08a; }
.planner-card.is-conge .planner-card-detail-value { color: var(--sec); }
.planner-card.is-rtt { background: rgba(150,100,255,.12); border-color: rgba(170,120,255,.45); border-style: solid; }
.planner-card.is-rtt .planner-card-title { color: #d2b8ff; }
/* Tableau Congés & RTT : les deux groupes de compteurs se distinguent par un filet vertical et une
   teinte — grise pour les congés, violette pour les RTT, les mêmes que sur les cartes. */
.conges-table .sep { border-left: 2px solid rgba(255,255,255,.22); }
.conges-table .col-cp { background: rgba(255,138,61,.06); }
.conges-table .col-rtt { background: rgba(150,100,255,.07); }
/* Vue Congés & RTT */
.conges-annee { display: flex; align-items: center; gap: 8px; color: var(--sec); font-size: 13px; }
.conges-table th.num, .conges-table td.num, table td.num, table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.conges-na { color: var(--mut); }
/* Planning équipe (point 34) : une ligne par membre, sept colonnes, rien que la rotation et les
   absences. Les en-têtes et la colonne des noms restent en vue au défilement. */
.equipe-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.equipe-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.equipe-semaine { font-family: var(--mono); font-size: 12px; color: var(--sec); }
.equipe-wrap { overflow: auto; max-height: min(80vh, 900px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-sm); }
.equipe-grid { display: grid; grid-template-columns: 230px repeat(7, minmax(128px, 1fr)); min-width: 1120px; }
.equipe-cell { min-height: 48px; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; border-bottom: 1px solid rgba(255,255,255,.06); border-left: 1px solid rgba(255,255,255,.05); }
.equipe-head { position: sticky; top: 0; z-index: 2; background: rgba(24,27,42,.98); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); }
.equipe-head strong { display: block; color: var(--ink); font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.equipe-head__support { font-size: 10px; color: #7fb8ff; text-transform: none; letter-spacing: 0; }
.equipe-coin { z-index: 3; left: 0; }
/* Un nom sur UNE ligne, quoi qu'il arrive : « MENARD Marc-Antoine » se repliait sur deux lignes et
   sa ligne était plus haute que les autres. La colonne est élargie, et si un nom déborde encore il
   est coupé par des points de suspension — le nom complet est dans l'infobulle. */
.equipe-membre { position: sticky; left: 0; z-index: 1; font-weight: 700; color: var(--ink); background: rgba(24,27,42,.98); border-left: 0; display: block; line-height: 48px; padding-top: 0; padding-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equipe-cell:not(.equipe-head):not(.equipe-membre) { min-height: 48px; }
.equipe-cell.is-weekend { background: rgba(255,255,255,.015); }
.equipe-cell.is-aujourdhui { box-shadow: inset 0 0 0 1px rgba(58,160,255,.4); }
.equipe-cell .activity-badge { white-space: normal; text-align: left; line-height: 1.25; }
.activity-badge.is-conge.is-pending { border-style: dashed; opacity: .85; }
.planner-card-header { display: grid; grid-template-columns: 1fr; align-items: start; gap: 6px; min-width: 0; }
.planner-card-title { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: break-word; }
.planner-card-status-badge { align-self: start; justify-self: start; }
.planner-card-details { display: grid; gap: 6px; }
.planner-card-detail { display: grid; gap: 1px; }
.planner-card-detail-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--mut); }
.planner-card-detail-value, .planner-card-status { font-size: 12px; color: var(--sec); line-height: 1.4; }
.planner-card-comment { font-size: 12px; line-height: 1.45; padding: 8px 10px; border-radius: 9px; background: rgba(0,0,0,.25); color: var(--sec); }
/* Point 28 : l'ecart demande, sous « Modification demandee ». Le corps de la carte montre ce qui
   est valide ; ce bloc montre ce que la demande y changerait. */
.planner-card-ecarts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0 2px;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(255, 196, 82, .07);
  border: 1px solid rgba(255, 196, 82, .18);
}
/* En colonne et non cote a cote : la colonne d'un jour du planificateur ne fait qu'une centaine de
   pixels de contenu, et « CHARGE  4 h -> 6 h » sur une seule ligne s'y repliait en quatre, portant
   le bloc a 325 px. Mesure faite avant correction. */
.planner-card-ecart { display: flex; flex-direction: column; gap: 0; font-size: 11.5px; }
.planner-card-ecart-label {
  flex: 0 0 auto;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .40);
}
.planner-card-ecart-valeur { min-width: 0; line-height: 1.4; }
.planner-card-ecart-valeur s { color: rgba(255, 255, 255, .38); text-decoration-thickness: 1px; }
.planner-card-ecart-valeur strong { font-weight: 650; }

.planner-card-request-type { font-family: var(--mono); font-size: 10.5px; color: #ffd479; }
.planner-card-actions, .planner-approval-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.planner-approval-panel { display: grid; gap: 12px; padding: 16px; }
.planner-approval-panel__header { margin-bottom: 0; }
.planner-approval-bulk-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.planner-approval-list { display: grid; gap: 8px; }
.planner-approval-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.04); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.planner-approval-item.is-selected { border-color: rgba(58,160,255,.5); box-shadow: 0 0 0 3px rgba(10,132,255,.18); }
.planner-approval-item-selection { display: flex; align-items: center; justify-content: center; }
.planner-approval-checkbox { width: 17px; height: 17px; cursor: pointer; }
.planner-approval-item-main { display: grid; gap: 3px; min-width: 0; font-size: 13px; color: var(--sec); }
.planner-approval-item-main strong { color: var(--ink); }
.planner-approval-item-meta { color: var(--mut); font-size: 12px; }
.planner-approval-item-meta strong { color: var(--sec); font-weight: 600; }
.activity-planner-option, .member-form--modal label.activity-planner-option { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--sec); font-size: 13px; cursor: pointer; }
.activity-planner-option span { display: inline; }
/* « .member-form input { width: 100% } » (plus bas) est un selecteur DESCENDANT : il atteignait
   aussi cette case a cocher, qui s'etirait sur toute la ligne — 509 px mesures — et repoussait donc
   son libelle a l'oppose, a l'autre bout du formulaire. Meme cause et meme remede que
   « .planner-creneau input[type="time"] ». Regle volontairement etroite : une regle generale sur
   input[type="checkbox"] (specificite 0,1,1) l'emporterait sur .planner-approval-checkbox
   (0,1,0) et ecraserait ses 17 px. Signale par Kevin le 01/09/2026, mesure sur le banc. */
.activity-planner-option input[type="checkbox"] { width: auto; flex: 0 0 auto; }

/* ==========================================================
   14. Cartographie des compétences
   ========================================================== */
#competenciesView .panel--wide { position: relative; }
.competency-toolbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "form export" "legend legend";
  align-items: start; column-gap: 12px; row-gap: 10px; margin-bottom: 14px;
}
.competency-inline-form { grid-area: form; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.competency-inline-form input { flex: 0 1 260px; min-width: 200px; }
.competency-export-bar { grid-area: export; display: flex; justify-content: flex-end; }
.competency-export-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.competency-toolbar .legend-inline { grid-area: legend; margin: 0; }
.competency-matrix-wrap { overflow: auto; max-width: 100%; }
.competency-matrix-table { table-layout: fixed; width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.competency-matrix-table th, .competency-matrix-table td { width: 176px; min-width: 176px; vertical-align: top; }
.competency-matrix-table thead th { position: sticky; top: 0; z-index: 3; background: #0d101c; }
.competency-matrix-table .sticky-col { position: sticky; left: 0; z-index: 2; background: #0d101c; min-width: 150px !important; max-width: 150px !important; }
.competency-matrix-table thead .sticky-col { z-index: 4; }
.competency-domain-cell { font-family: "Inter", system-ui, sans-serif; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--ink); }
.competency-matrix-table thead th:not(.sticky-col) { font-family: "Inter", system-ui, sans-serif; font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--sec); }
.competency-cell { display: grid; gap: 6px; padding: 8px; border-radius: 11px; }
.competency-select, .competency-comment { width: 100%; font-size: 12.5px; padding: 6px 9px; }
.competency-select { padding-right: 28px; background-position: right 9px center; }
.competency-comment { resize: vertical; min-height: 56px; }
.competency-cell.level-chip--notions { border-color: rgba(255,255,255,.18); }
.competency-cell.level-chip--intermediate { border-color: rgba(58,160,255,.45); background: rgba(10,132,255,.08); }
.competency-cell.level-chip--confirmed { border-color: rgba(52,210,123,.4); background: rgba(52,210,123,.07); }
.competency-cell.level-chip--expert { border-color: rgba(255,200,87,.4); background: rgba(255,200,87,.07); }
.competency-bottom-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-top: 16px; }
.competency-bottom-grid .competency-panel { margin: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 280px; }
.competency-bottom-grid .competency-panel .panel__header { flex: 0 0 auto; }
#competencyChart { width: 100% !important; min-height: 300px; max-height: 320px; }
.pole-admin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.pole-admin .btn { white-space: nowrap; }
.competency-panel table th:first-child, .competency-panel table td:first-child { width: 34%; }

/* ==========================================================
   15. Membres / Comptes / Catégories / Activités
   ========================================================== */
.member-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr auto; gap: 10px; }
.member-form input, .member-form select, .member-form textarea { width: 100%; }
.member-form--modal { grid-template-columns: 1fr 1fr; min-width: min(92vw, 560px); }
.member-form--modal label { display: flex; flex-direction: column; gap: 6px; }
.member-form--modal textarea { grid-column: 1 / -1; }
.member-form__actions, .account-form__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; margin-top: 6px; }
.account-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: min(92vw, 640px); }
.account-form label { display: flex; flex-direction: column; gap: 6px; }
.account-form input, .account-form select { width: 100%; }
.account-form > label:first-child { grid-column: 1 / -1; }
.members-toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.member-searchbar--compact { max-width: 22rem; margin-bottom: 1rem; }
#accountSearchInput { min-width: 240px; }
.activity-toolbar { display: grid; gap: 10px; margin-bottom: 14px; }
.activity-searchbar input { width: 100%; }
.activity-filters-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.categories-filters-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.categories-filters-grid .btn { justify-self: start; }
.categories-shell { display: grid; gap: 0; }
.activity-stats-panel { margin: 0 0 14px; }
.activity-stats-panel__header { margin-bottom: 10px; }
.activity-table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; }
.activity-table-toolbar h3 { margin: 0; }
.activity-table-shell table { table-layout: fixed; min-width: 1180px; }
.activity-table-shell th, .activity-table-shell td { overflow: hidden; vertical-align: middle; }
.activity-table-shell th:nth-child(1), .activity-table-shell td:nth-child(1) { width: 9%; }
.activity-table-shell th:nth-child(2), .activity-table-shell td:nth-child(2) { width: 13%; }
.activity-table-shell th:nth-child(3), .activity-table-shell td:nth-child(3) { width: 13%; }
.activity-table-shell th:nth-child(4), .activity-table-shell td:nth-child(4) { width: 6%; }
.activity-table-shell th:nth-child(5), .activity-table-shell td:nth-child(5) { width: 6%; }
.activity-table-shell th:nth-child(6), .activity-table-shell td:nth-child(6) { width: 17%; }
.activity-table-shell th:nth-child(7), .activity-table-shell td:nth-child(7) { width: 9%; }
.activity-table-shell th:nth-child(8), .activity-table-shell td:nth-child(8) { width: 10%; }
.activity-table-shell th:nth-child(9), .activity-table-shell td:nth-child(9) { width: 17%; }
.activity-table-shell .activity-badge { white-space: normal; text-align: left; }
/* filtres de colonne en popover : th ci-dessus passe l'en-tête en overflow:hidden pour la
   troncature du texte (largeur fixe) — on le rouvre ici pour que le panneau flottant (règle
   générique, ligne 141 et l'encart « survol flottant » plus haut) ne soit pas rogné. */
.activity-table-shell th { overflow: visible; }
.activity-comment { max-width: 18rem; color: var(--sec); white-space: normal; overflow-wrap: anywhere; }
.activity-subtle { margin-top: 2px; color: var(--mut); font-size: 11.5px; line-height: 1.3; }
.activity-modal__panel { min-width: min(92vw, 640px); }
.activity-form { display: grid; gap: 14px; }
.activity-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.activity-form label { display: flex; flex-direction: column; gap: 6px; }
.activity-form input, .activity-form select, .activity-form textarea { width: 100%; }
.activity-form__comment { grid-column: 1 / -1; }

/* ==========================================================
   16. Mon compte
   ========================================================== */
.account-layout { display: grid; grid-template-columns: 1fr; gap: 10px; }
.account-panel { margin: 0; }
.account-panel:nth-child(1),
.account-panel:nth-child(2),
.account-panel--meta,
#otpPanel { grid-column: auto; grid-row: auto; }
.account-panel__header { margin-bottom: 16px; }
.account-panel__intro { margin: 6px 0 0; color: var(--sec); font-size: 13.5px; line-height: 1.5; max-width: 60ch; }
.account-form-stack { max-width: none; width: 100%; }
.account-panel__actions { display: flex; justify-content: center; width: 100%; }
.account-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.account-meta-item { display: grid; gap: 4px; padding: 14px 16px; }
.account-meta-item--wide { grid-column: 1 / -1; }
.account-meta-item__label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--mut); }
.account-meta-item strong { font-size: 15px; line-height: 1.4; color: var(--ink); }
/* OTP : QR sur fond blanc (contraste de scan), secret en mono-box */
#otpSetupQr, .mfa-qr { display: block; width: 190px; max-width: 100%; margin: 4px auto 6px; padding: 10px; background: #fff; border-radius: var(--r-sm); border: 0; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
#otpSetupSecret {
  font-family: var(--mono); font-size: 13px; background: rgba(0,0,0,.4); color: var(--ink);
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px 13px; word-break: break-all; user-select: all; font-weight: 500;
}
#otpSetupCode, #otpVerifyCode { font-family: var(--mono); font-size: 18px; letter-spacing: .35em; text-align: center; }
#otpSetupBlock,
#otpEnabledBlock { width: 100%; }
#otpSetupBlock .btn,
#otpEnabledBlock .btn { display: table; margin-inline: auto; }

/* ==========================================================
   17. Journal des actions
   ========================================================== */
.logs-shell { overflow: hidden; }
.logs-filter-form { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.6fr); gap: 12px; align-items: stretch; margin-bottom: 14px; }
.logs-filter-card { display: grid; gap: 12px; padding: 16px; min-width: 0; align-content: start; }
.logs-filter-card__header { display: grid; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
.logs-filter-card__eyebrow { margin: 0; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--mut); }
.logs-filter-card__header h3 { margin: 0; font-size: 15px; }
.logs-filter-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.logs-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.logs-filter-date-group { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.logs-filter-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.logs-table-wrap {
  overflow: auto;
  max-width: 100%;
  max-height: min(78vh, 860px);
}
.logs-table-wrap table { min-width: 1320px; }
.logs-table-wrap thead th { position: sticky; top: 0; z-index: 1; background: #0d101c; }
td.logs-date-cell, td.logs-reference-cell { white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.logs-subject-cell { min-width: 12rem; font-weight: 600; color: var(--ink); }
.logs-table-wrap td:nth-child(2), .logs-table-wrap td:nth-child(4) { white-space: nowrap; }

/* ==========================================================
   18. Modales
   ========================================================== */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(3,4,10,.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade-in var(--dur) var(--ease-out); }
.modal__panel { position: relative; padding: 24px; max-width: min(96vw, 900px); max-height: 92vh; overflow: auto; animation: dlg-in var(--dur) var(--ease-out); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal__head h2 { font-size: 17px; }
.modal__close {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--card-border); background: rgba(255,255,255,.06);
  color: var(--sec); cursor: pointer; font-size: 18px; line-height: 1; display: grid; place-items: center;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.modal__close:hover { background: rgba(255,255,255,.12); color: var(--ink); }
.modal__panel .panel__content { max-height: 60vh; overflow: auto; }
/* Activity completion modal — isolated action alignment */
.activity-complete-modal__panel { width: min(92vw, 480px); }
.activity-complete-modal__panel > p { margin: 0 0 20px; color: var(--sec); }
.activity-complete-modal__panel .member-form__actions { justify-content: center; }

/* Category toggle modal — isolated action alignment */
.category-toggle-modal__panel { width: min(92vw, 480px); }
.category-toggle-modal__panel > p { margin: 0 0 20px; color: var(--sec); }
.category-toggle-modal__panel .member-form__actions { justify-content: center; }

/* Category delete modal — isolated action alignment */
.member-delete-modal__panel { width: min(92vw, 480px); }
.member-delete-modal__panel > p { margin: 0 0 20px; color: var(--sec); }
.member-delete-modal__panel .member-form__actions { justify-content: center; }


@keyframes dlg-in { from { opacity: 0; transform: translateY(var(--rise)) scale(.98); } }

/* ==========================================================
   19. Toast (arrive par le haut)
   ========================================================== */
.toast {
  position: fixed; top: 22px; left: 50%;
  transform: translate(-50%, -70px);
  z-index: 100;
  background: var(--card-grad);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  padding: 10px 22px; font-size: 13.5px; font-weight: 550; color: var(--ink);
  max-width: min(92vw, 640px); text-align: center;
  opacity: 0; transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.ok { border-color: rgba(52,210,123,.5); box-shadow: 0 0 24px rgba(52,210,123,.25), var(--card-shadow); }
.toast.err { border-color: rgba(255,90,106,.5); box-shadow: 0 0 24px rgba(255,90,106,.25), var(--card-shadow); }
.toast-msg { display: inline-block; animation: toast-msg-in var(--dur-fast) var(--ease-out); }
@keyframes toast-msg-in { from { opacity: 0; } }
.fatal-error {
  position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 100;
  background: rgba(255,90,106,.14); color: #ffb3ba; border: 1px solid rgba(255,90,106,.5);
  padding: 10px 18px; border-radius: 999px; font-size: 13.5px; backdrop-filter: blur(20px);
}

/* ==========================================================
   20. Signature « Powered by KPY-INFRA »
   ========================================================== */
.kpy-sign { text-align: center; padding: 30px 0 24px; }
.kpy-badge {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; color: var(--mut);
  border: 1px solid transparent; border-radius: 999px; padding: 7px 16px;
  overflow: hidden; transition: all .25s;
}
.kpy-badge:hover {
  border-color: var(--card-border); background: var(--card-grad);
  box-shadow: 0 6px 24px rgba(10,132,255,.25); transform: translateY(-2px);
}
.kpy-letters { display: inline-flex; font-weight: 800; }
.kpy-letters .l {
  background: linear-gradient(92deg, var(--accent-2), #9b5cff, #00d4c8);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.kpy-badge:hover .l { animation: shimmer 3s linear infinite, bounce .7s ease; display: inline-block; }
.kpy-badge:hover .l:nth-child(2) { animation-delay: 0s, .09s; }
.kpy-badge:hover .l:nth-child(3) { animation-delay: 0s, .18s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
.kpy-spark {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-120%);
}
.kpy-badge:hover .kpy-spark { animation: sweep .9s ease .1s; }
@keyframes sweep { to { transform: translateX(120%); } }

/* ==========================================================
   21. Page de connexion
   ========================================================== */
.login-view, .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(420px, 92vw); padding: 30px 28px; display: flex; flex-direction: column; gap: 16px; }
.login-card .brand { justify-content: center; }
.login-card .brand__mark { width: 52px; height: 52px; border-radius: 16px; font-size: 16px; }
.login-card .brand__logo { width: 28px; height: 28px; }
.login-card .brand__text strong { font-size: 22px; }
.login-header { text-align: center; display: grid; gap: 4px; }
.login-header h1 { font-size: 20px; }
.login-header p { margin: 0; color: var(--sec); font-size: 13.5px; }
.login-form { display: grid; gap: 14px; }
.login-form #loginFields, .login-form #otpSetup, .login-form #otpVerify { display: grid; gap: 12px; }
.login-form .form-group input { min-height: 44px; }
.login-form .btn { min-height: 42px; }
.login-form > .btn-primary, .login-actions .btn { width: 100%; }
.login-actions { display: grid; gap: 10px; }
.form-error { min-height: 20px; font-size: 13px; padding: 10px 12px; border-radius: 10px; }
.login-footer { padding-top: 4px; }
.login-footer .kpy-sign { padding: 8px 0 0; }

/* ==========================================================
   22. Motion : entrées, focus, reduced motion
   ========================================================== */
@keyframes intro-up { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: translateY(0); } }
.view-enter, .view:not([hidden]) { animation: intro-up var(--dur) var(--ease-out) backwards; }
.view { min-width: 0; width: 100%; margin-top: 0; padding-top: 0; }
#logsView,
#membersView,
#activitiesView { min-width: 0; }
#logsView > .panel,
#membersView > .panel,
#activitiesView > .panel { min-width: 0; width: 100%; max-width: 100%; }
.logs-shell,
.activities-shell,
#membersView .panel--wide { min-width: 0; width: 100%; max-width: 100%; }
.logs-table-wrap,
.activity-table-wrap,
.member-table-shell { width: 100%; min-width: 0; max-width: 100%; }

/* Vues denses : le panel occupe la hauteur utile et le tableau reste la seule zone scrollable. */
#logsView,
#membersView,
#activitiesView {
  min-height: 0;
  padding-top: 0;
}

#logsView > .panel,
#membersView > .panel,
#activitiesView > .panel {
  margin-top: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.logs-shell,
.activities-shell,
#membersView .panel--wide { min-width: 0; width: 100%; max-width: 100%; }
.logs-table-wrap,
.activity-table-wrap,
.member-table-shell { width: 100%; min-width: 0; max-width: 100%; }

@media (max-height: 900px) {
  .topbar { margin-bottom: 12px; }
  #logsView > .panel,
  #membersView > .panel,
  #activitiesView > .panel {
    max-height: calc(100dvh - 76px);
  }
  #activitiesView .activity-stats-panel { margin-bottom: 10px; padding: 12px 14px; }
  #activitiesView .activity-stats-panel__header { margin-bottom: 6px; }
  #activitiesView .activity-table-toolbar { margin-bottom: 8px; padding: 8px 10px; }
}

@media (max-height: 820px) {
  .topbar { margin-bottom: 8px; }
  #logsView > .panel,
  #membersView > .panel,
  #activitiesView > .panel {
    max-height: calc(100dvh - 56px);
  }
  #activitiesView .activities-shell { padding: 14px 16px; }
  #activitiesView .activity-stats-panel { margin-bottom: 6px; padding: 8px 10px; }
  #activitiesView .activity-stats-panel__header { margin-bottom: 4px; }
  #activitiesView .activity-table-toolbar { margin-bottom: 6px; padding: 6px 8px; }
  #activitiesView .activity-table-toolbar .btn { padding-block: 6px; }
}

@media (max-height: 740px) {
  #activitiesView > .panel { max-height: calc(100dvh - 4px); }
  #activitiesView .activities-shell { padding: 0 2px; }
  #activitiesView .panel__header { margin-bottom: 0; }
  #activitiesView .activity-stats-panel { margin: 0; padding: 0; border-radius: 4px; }
  #activitiesView .activity-stats-panel__header { margin: 0; padding: 0 4px; }
  #activitiesView .activity-stats-grid { gap: 0; }
  #activitiesView .activity-table-toolbar { margin: 0; padding: 0 2px; min-height: 0; }
  #activitiesView .activity-table-toolbar .btn { padding-block: 2px; }
}

@media (max-height: 680px) {
  #activitiesView > .panel { max-height: 100dvh; }
  #activitiesView .activities-shell { padding: 0; }
  #activitiesView .activity-stats-panel { border-radius: 0; }
  #activitiesView .activity-stats-panel__header { padding-inline: 2px; }
  #activitiesView .activity-table-toolbar { padding: 0; }
  .kpy-sign { padding-block: 3px; }
}
.reveal { animation: intro-up var(--dur) var(--ease-out) backwards; animation-delay: calc(min(var(--i, 0), 12) * var(--stagger)); }
.btn:focus-visible, .nav__item:focus-visible, .filter-toggle:focus-visible, .modal__close:focus-visible, .sidebar__toggle:focus-visible, .kpy-badge:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(10,132,255,.3);
}
@media (hover: none) { .btn:hover, .kpy-badge:hover, .kpi:hover, .planner-card:hover { transform: none; } }
.skel { border-radius: 10px; background: rgba(255,255,255,.05); overflow: hidden; position: relative; color: transparent !important; }
.skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%); animation: skel-sweep 1.4s ease-in-out infinite; }
@keyframes skel-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ==========================================================
   23. Responsive
   ========================================================== */
@media (max-width: 1400px) {
  .panel.panel--wide {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .table-scroll,
  .table-wrap,
  .activity-table-wrap,
  .logs-table-wrap,
  .member-table-shell,
  .competency-matrix-wrap {
    max-width: 100%;
  }

  .table-scroll table,
  .logs-table-wrap table,
  .activity-table-wrap table,
  .member-table-shell table,
  .competency-matrix-wrap table {
    width: max-content;
    min-width: 100%;
  }
}

/* ⚠ Une accolade fermante surnumeraire suivait cette regle. Le parseur CSS abandonnait la suite du
   fichier, si bien que « @media (max-width: 1180px) » et tout ce qui venait apres n'etaient jamais
   appliques. Defaut preexistant, mis au jour le 01/09/2026 en constatant qu'une regle presente
   dans le fichier servi etait absente de la feuille chargee par le navigateur.
   La regle reste au niveau global : c'est la ou elle s'appliquait de fait, on repare la syntaxe
   sans changer le rendu. */
  #kpiGrid, .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .two-cols, .dashboard-visual-grid, .loads-grid, .account-layout { grid-template-columns: 1fr; }
  .activity-filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* DEUX colonnes et non trois : a 1100 px de fenetre, trois colonnes ne laissaient que 174 px de
     texte pour 173 px requis — ca passait d'un pixel, et la premiere categorie un peu plus longue
     aurait tronque de nouveau. Deux colonnes donnent environ 315 px, avec de la marge. */
  .planner-form, .planner-form--admin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner-form #plannerComment { grid-column: span 1; }
  .planner-form button[type="submit"] { grid-column: 1 / -1; justify-self: start; min-width: 160px; }
  .planner-header { flex-direction: column; }
  .planner-header__actions { justify-content: flex-start; }
}
@media (max-width: 1100px) {
  .loads-kpis, .stats-row, .activity-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .competency-bottom-grid, .logs-filter-form { grid-template-columns: 1fr; }
  .logs-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app-shell, .app-shell.is-collapsed { grid-template-columns: 1fr; padding: 14px 14px 0; gap: 14px; }
  .sidebar { position: static; height: auto; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav__item { width: auto; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .topbar__actions { align-items: flex-start; }
  #kpiGrid, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .competency-toolbar { grid-template-columns: 1fr; grid-template-areas: "form" "export" "legend"; }
  .competency-export-bar { justify-content: stretch; }
  .competency-export-actions { width: 100%; }
}
@media (max-width: 720px) {
  .panel { padding: 16px; }
  .panel__header { flex-direction: column; }
  .panel__actions, .panel__actions--stacked { margin-left: 0; width: 100%; justify-content: flex-start; }
  .account-form, .member-form, .member-form--modal, .activity-form__grid, .activity-filters-grid, .categories-filters-grid,
  .planner-form, .logs-filter-grid, .logs-filter-date-group, .account-meta-grid { grid-template-columns: 1fr; }
  .account-form, .member-form--modal, .activity-modal__panel { min-width: 0; width: 100%; }
  .modal__panel { width: 100%; padding: 18px; }
  .planner-week-label { min-width: 0; width: 100%; }
  .planner-approval-panel__header { flex-direction: column; }
  .planner-approval-bulk-actions { justify-content: flex-start; }
  .planner-approval-item { grid-template-columns: 1fr; align-items: flex-start; }
  .loads-export-actions, .competency-inline-form input { width: 100%; margin-left: 0; max-width: none; flex: 1 1 100%; }
  .loads-export-actions .btn { flex: 1; }
  .logs-filter-actions { justify-content: stretch; }
  .logs-filter-actions .btn { flex: 1; }
}
@media (max-width: 640px) {
  #kpiGrid, .kpi-grid, .loads-kpis, .stats-row, .activity-stats-grid { grid-template-columns: 1fr; }
  .toast { top: 14px; }
}

@media (max-height: 980px) {
  .logs-table-wrap,
  .activity-table-wrap,
  .member-table-shell.activity-table-shell {
    max-height: min(68vh, 720px);
  }
}

@media (max-height: 860px) {
  .logs-table-wrap,
  .activity-table-wrap,
  .member-table-shell.activity-table-shell {
    max-height: min(60vh, 620px);
  }
}

@media (max-height: 760px) {
  .logs-table-wrap,
  .activity-table-wrap,
  .member-table-shell.activity-table-shell {
    max-height: min(52vh, 520px);
  }
}

/* ---------- reduced motion global (TOUJOURS en dernier) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .btn.is-busy::before, .skel::after { animation-duration: .8s !important; animation-iteration-count: infinite !important; }
}


/* ---- correction responsive du tableau Activités ---- */
.activities-table,
.table-shell table {
  width: 100%;
  table-layout: fixed;
}

.activities-table th,
.activities-table td,
.table-shell th,
.table-shell td {
  min-width: 0;
}

.activities-table td:last-child,
.activities-table th:last-child,
.table-shell td:last-child,
.table-shell th:last-child {
  width: 220px;
}

.activities-table td:last-child,
.table-shell td:last-child {
  overflow: visible;
}

.activities-table td:last-child > *,
.table-shell td:last-child > * {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.activities-table td:last-child .btn,
.table-shell td:last-child .btn {
  flex: 0 1 auto;
  max-width: 100%;
}

@media (max-width: 900px) {
  .activities-table td:last-child,
  .activities-table th:last-child,
  .table-shell td:last-child,
  .table-shell th:last-child {
    width: 190px;
  }
}

@media (max-width: 720px) {
  .activities-table td:last-child,
  .activities-table th:last-child,
  .table-shell td:last-child,
  .table-shell th:last-child {
    width: 170px;
  }

  .activities-table td:last-child > *,
  .table-shell td:last-child > * {
    justify-content: flex-start;
  }

  .activity-table-shell .table-actions {
    justify-content: stretch;
  }

  .activity-table-shell .table-actions .btn {
    flex: 1 1 100%;
    width: 100%;
  }
}


/* Alignement du premier bloc utile des vues non tabulaires */
#dashboardView > :first-child,
#loadsView > :first-child,
#plannerView > :first-child,
#competenciesView > :first-child,
#activitiesView > :first-child,
#logsView > :first-child,
#accountView > :first-child {
  margin-top: 0 !important;
}

#dashboardView .kpi-grid,
#dashboardView .dashboard-visual-grid,
#loadsView .loads-grid,
#plannerView .planner-shell,
#competenciesView .competency-bottom-grid,
#activitiesView .activity-stats-panel,
#logsView .logs-filter-form,
#accountView .account-shell {
  margin-top: 0;
}

#dashboardView .kpi-grid {
  margin-bottom: 14px;
}

#dashboardView .dashboard-visual-grid,
#loadsView .loads-grid,
#competenciesView .competency-bottom-grid {
  margin-bottom: 14px;
}


.sidebar__account-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sidebar-icon-btn {
  min-width: 0;
  padding-inline: 10px;
  justify-content: flex-start;
}

.sidebar-icon-btn__icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex: 0 0 16px;
  line-height: 1;
}

.sidebar-icon-btn__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline;
}

.sidebar-icon-btn--account .sidebar-icon-btn__icon {
  color: var(--accent-2);
}

.sidebar-icon-btn--logout {
  color: #ff8a95;
  border-color: rgba(255,90,106,.35);
  background: rgba(255,255,255,.04);
}

.sidebar-icon-btn--logout:hover {
  background: rgba(255,90,106,.14);
  border-color: rgba(255,90,106,.6);
}

.app-shell.is-collapsed .sidebar__account-actions {
  grid-template-columns: 1fr;
  width: 100%;
  justify-items: center;
}

.app-shell.is-collapsed .sidebar__account-actions .sidebar-icon-btn {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  justify-content: center;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.app-shell:not(.is-collapsed) .sidebar__account-actions .sidebar-icon-btn__label {
  display: inline;
}

.app-shell.is-collapsed .sidebar__account-actions .sidebar-icon-btn__label {
  display: none;
}

.sidebar-icon-btn {
  position: relative;
  overflow: visible;
}

.sidebar-icon-btn::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: rgba(7, 9, 17, .92);
  color: var(--ink);
  box-shadow: var(--card-shadow);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: 20;
}

.sidebar-icon-btn:hover::after,
.sidebar-icon-btn:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (hover: none) {
  .sidebar-icon-btn::after { display: none; }
}

.app-shell.is-collapsed .sidebar__account-actions .sidebar-icon-btn__icon {
  display: inline-flex;
  width: 18px;
  flex-basis: 18px;
  font-size: 17px;
}

.app-shell.is-collapsed #currentUserBadge {
  display: none !important;
}

/* ==========================================================
   Sauvegardes et restauration (vue « Comptes utilisateurs »)
   ========================================================== */
.btn-small {
  padding: 6px 12px;
  font-size: .82rem;
  border-radius: var(--r-sm);
}

.backups__path {
  margin: 0 0 14px;
  color: var(--mut);
  font-family: var(--mono);
  font-size: .78rem;
  word-break: break-all;
}

/* L'origine de la copie sous son nom : « chaque nuit », « avant un déploiement »… c'est ce
   qu'on cherche en premier quand il faut choisir laquelle remonter. */
.backups__origin {
  display: block;
  margin-top: 3px;
  color: var(--mut);
  font-size: .76rem;
}

.backups__ok { color: var(--ok); }
.backups__ko { color: var(--err); }

.backups__target {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: .84rem;
  color: var(--ink);
}

/* L'avertissement est encadré et non noyé dans le texte : une restauration remonte aussi les
   mots de passe et les clés OTP, et personne ne doit pouvoir dire qu'il ne l'avait pas lu. */
.backups__warning {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 200, 87, .38);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
  background: rgba(255, 200, 87, .09);
  color: var(--ink);
  font-size: .86rem;
  line-height: 1.5;
}
.backups__warning strong { display: block; margin-bottom: 4px; color: var(--warn); }

.backups__net {
  margin: 0 0 16px;
  color: var(--sec);
  font-size: .84rem;
}

.backups__field { display: block; margin-bottom: 14px; }
.backups__field span {
  display: block;
  margin-bottom: 6px;
  color: var(--sec);
  font-size: .84rem;
}
.backups__field input { width: 100%; }

.backups__message {
  margin: 0 0 12px;
  font-size: .84rem;
  color: var(--err);
}
.backups__message--info { color: var(--sec); }
.backups__message--success { color: var(--ok); }

/* ==========================================================
   Aide utilisateur — panneau à deux colonnes
   ========================================================== */
.modal__panel--aide {
  width: min(920px, 94vw);
  max-width: none;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
}

.aide__kicker {
  margin: 0 0 2px;
  color: var(--mut);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Sommaire à gauche, chapitre à droite. Sous 720 px la colonne passe en bandeau de pastilles
   qui défile : sur un téléphone, une colonne de 200 px mangerait la moitié de l'écran. */
.aide__corps {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
}

.aide__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding-right: 4px;
  border-right: 1px solid var(--border-subtle, rgba(255,255,255,.08));
}

.aide__nav-item {
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--sec);
  font: inherit;
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.aide__nav-item:hover { background: rgba(255,255,255,.06); color: var(--ink); }
.aide__nav-item.is-active {
  background: var(--primary-soft);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--accent);
}

.aide__contenu {
  overflow-y: auto;
  padding-right: 6px;
  min-height: 0;
}

.aide__chapitre h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: var(--ink);
}
/* Les sous-titres de chapitre. Sans cette regle ils prenaient le style par defaut du navigateur —
   trop gros, mal espaces, et sans la couleur du theme. */
.aide__chapitre h4 {
  margin: 20px 0 8px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}
.aide__chapitre h4:first-child { margin-top: 0; }

.aide__chapitre p {
  margin: 0 0 12px;
  color: var(--sec);
  font-size: .89rem;
  line-height: 1.62;
}
/* Souligne natif plutot qu'une bordure : « color-mix » n'apparait nulle part ailleurs dans cette
   feuille, autant ne pas y introduire une construction isolee pour un seul lien. */
.aide__chapitre a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  opacity: .92;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.aide__chapitre a:hover { opacity: 1; }
.aide__chapitre a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Le renvoi vers la note de version ferme l'introduction : un filet le detache du texte courant. */
.aide__lien-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--card-border);
}

.aide__chapitre strong { color: var(--ink); font-weight: 600; }
.aide__chapitre em { color: var(--ink); font-style: normal; opacity: .85; }
.aide__chapitre ul {
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--sec);
  font-size: .89rem;
  line-height: 1.62;
}
.aide__chapitre li { margin-bottom: 6px; }
.aide__chapitre code {
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--surface-soft);
  font-family: var(--mono);
  font-size: .82em;
  color: var(--ink);
}

@media (max-width: 720px) {
  .aide__corps { grid-template-columns: minmax(0, 1fr); }
  .aide__nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 0 8px;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  }
  .aide__nav-item { white-space: nowrap; }
  .aide__nav-item.is-active { box-shadow: inset 0 -2px 0 var(--accent); }
}

/* ==========================================================
   Retour en haut de page
   ========================================================== */
.back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  color: var(--sec);
  cursor: pointer;
  box-shadow: var(--card-shadow);
  /* Masqué ET non focalisable au clavier tant qu'il est invisible : visibility:hidden le sort
     de l'ordre de tabulation, ce qu'une simple opacité:0 ne ferait pas. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              visibility var(--dur) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: var(--card-shadow), 0 0 18px rgba(10,132,255,.35);
}

.back-to-top:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(10,132,255,.30);
}

/* Sur mobile la barre d'action du navigateur mord le bas de l'écran : on remonte le bouton. */
@media (max-width: 720px) {
  .back-to-top { right: 16px; bottom: 76px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity var(--dur-fast) linear, visibility var(--dur-fast) linear; transform: none; }
  .back-to-top.is-visible { transform: none; }
}

/* Barre latérale déployée : centrer le libellé des boutons de compte.
   « justify-content: flex-start » venait de l'époque où l'icône precedait le texte ; elle est
   aujourd'hui masquee dans cet etat (.sidebar-icon-btn__icon { display: none }), si bien qu'un
   libelle court comme « Aide » se retrouvait colle a gauche dans un bouton large.
   L'etat replie garde son propre centrage, il n'est pas concerne. */
.app-shell:not(.is-collapsed) .sidebar__account-actions .sidebar-icon-btn {
  justify-content: center;
}

/* Créneau horaire du planificateur : la durée calculée, affichée à côté des deux heures. */
.planner-duration {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  min-width: 58px;
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--sec);
  font-family: var(--mono);
  font-size: .82rem;
  white-space: nowrap;
}
.planner-duration[data-invalide="1"] { color: var(--err); }

.activity-slot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Les heures ne sont plus saisissables : le champ doit le dire à l'œil. */
#activityHours[readonly] {
  color: var(--sec);
  background: var(--surface-soft);
  cursor: default;
}

/* Export iCalendar du planificateur. */
.planner-export { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.planner-export__hint { color: var(--mut); font-size: .8rem; }

/* Un champ deduit se lit, ne se saisit pas : il doit s'en distinguer sans crier. Sans cette nuance,
   rien ne dit pourquoi « heures » accepte la frappe sur une activite et pas sur une autre. */
input.is-deduit {
  background: var(--surface-soft);
  color: var(--sec);
  cursor: default;
}

/* ==========================================================
   Notifications — cloche, pastille et panneau
   ========================================================== */

/* La rangee est une grille a deux colonnes : avec ce quatrieme bouton elle forme un 2x2 regulier
   (Notifications | Mon compte / Aide | Deconnexion) au lieu du 2+1 depareille d'avant. */
.sidebar-icon-btn--notifications {
  position: relative;
}

.sidebar-icon-btn--notifications .sidebar-icon-btn__icon {
  color: var(--accent);
}

/* Volet deploye, le bouton porte un libelle et occupe toute une demi-largeur : la pastille se range
   au bout, verticalement centree. Piquee dans l'angle superieur, elle semblait flotter dans la
   gouttiere entre deux boutons plutot qu'appartenir a celui-ci. */
.notif-pastille {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--err);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  /* Le liseré reprend le fond du volet : sans lui, la pastille se confond avec la bordure du
     bouton lorsqu'elle chevauche l'angle. */
  box-shadow: 0 0 0 2px var(--bg);
  pointer-events: none;
}

.modal__panel--notifications {
  width: min(560px, 94vw);
  max-width: none;
  display: flex;
  flex-direction: column;
  max-height: 82vh;
}

.notif__barre {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--card-border);
}

.notif__etat {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--mut);
  font-size: 12px;
}

.notif__liste {
  overflow-y: auto;
  padding: 12px 2px 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notif__ligne {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "titre quand" "corps corps";
  gap: 2px 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.notif__ligne:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}

/* La barre d'accent porte seule l'etat « non lue ». Le gras du titre ne suffirait pas : dans une
   liste ou tout est en gras, plus rien ne ressort. */
.notif__ligne--non-lue {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}

.notif__titre { grid-area: titre; font-weight: 600; font-size: 13px; }
.notif__ligne--non-lue .notif__titre { color: var(--accent); }
.notif__corps { grid-area: corps; color: var(--sec); font-size: 12.5px; line-height: 1.45; }
.notif__quand { grid-area: quand; color: var(--mut); font-family: var(--mono); font-size: 11px; white-space: nowrap; }

.notif__vide {
  margin: 18px 0;
  text-align: center;
  color: var(--mut);
  font-size: 13px;
}

/* Volet replie : le libelle disparait, le bouton se reduit a son icone — l'angle redevient la
   bonne place, comme sur n'importe quelle cloche.
   La pastille reste A L'INTERIEUR du bouton : « .btn » porte « overflow: hidden » (necessaire aux
   effets de survol), donc tout debordement se fait rogner. Un decalage negatif la coupait de 4 px
   en haut et a droite — constate a la mesure, pas a l'oeil. */
.app-shell.is-collapsed .notif-pastille {
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  font-size: 9px;
  line-height: 15px;
  transform: none;
}


/* ================================================================================================
   Le verrou cede — l'instant entre le sixieme chiffre juste et le tableau de bord
   ------------------------------------------------------------------------------------------------
   Reprise a l'identique d'Asset Network (3 septembre 2026) : memes durees, meme trace SVG, meme
   teinte d'arrivee — « --ok » vaut ici le meme #34d27b que le « --success » de la-bas.
   La redirection etait immediate et muette. L'anse pivote, se souleve, le corps passe au vert, puis
   la page s'efface : 1 s au total, puis 180 ms de fondu pendant lesquels la page suivante charge
   deja. Le geste a le temps de se lire sans que l'attente se remarque.
   ============================================================================================== */
.login-sortie {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  color: var(--muted, #9aa3b5);
  background: rgba(5, 6, 12, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  animation: loginSortieParait 240ms var(--ease-out, cubic-bezier(0.22,1,0.36,1)) forwards;
}

.login-verrou { overflow: visible; }

/* L'anse pivote autour de son point d'ancrage droit, pas autour du centre du dessin. */
.login-verrou__anse {
  transform-origin: 21px 15px;
  animation: loginAnseSOuvre 560ms var(--ease-out, cubic-bezier(0.22,1,0.36,1)) 240ms forwards;
}
.login-verrou__corps {
  animation: loginCorpsVireAuVert 340ms var(--ease-out, cubic-bezier(0.22,1,0.36,1)) 460ms forwards;
}

/* Posee par login.js une fois l'animation jouee, juste avant la redirection. */
.login-sortie.is-partie { animation: loginSortieSEfface 200ms ease-in forwards; }

@keyframes loginSortieParait { to { opacity: 1; } }
@keyframes loginSortieSEfface { to { opacity: 0; } }

@keyframes loginAnseSOuvre {
  0%   { transform: rotate(0) translateY(0); }
  55%  { transform: rotate(-26deg) translateY(-3px); }
  100% { transform: rotate(-30deg) translateY(-4px); }
}
@keyframes loginCorpsVireAuVert {
  to { stroke: var(--ok, #34d27b); fill: rgba(52, 210, 123, .14); }
}

/* Qui a demande moins de mouvement ne voit pas le voile du tout : login.js redirige directement.
   Ces regles restent la ceinture de securite si le voile s'affichait malgre tout. */
@media (prefers-reduced-motion: reduce) {
  .login-sortie { animation: none; opacity: 1; }
  .login-verrou__anse { animation: none; transform: rotate(-30deg) translateY(-4px); }
  .login-verrou__corps { animation: none; stroke: var(--ok, #34d27b); fill: rgba(52, 210, 123, .14); }
  .login-sortie.is-partie { animation: none; opacity: 0; }
}


/* ── Abonnement calendrier, dans « Mon compte » ────────────────────────────────────────────── */
.calendrier-lien {
  margin: 4px 0 12px;
  padding: 11px 12px;
  border-radius: 11px;
  background: rgba(255, 196, 82, .06);
  border: 1px solid rgba(255, 196, 82, .20);
}
.calendrier-lien__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
  margin-bottom: 6px;
}
/* Le lien est long : le champ prend toute la place restante, le bouton garde la sienne. */
.calendrier-lien__ligne { display: flex; gap: 8px; align-items: center; }
.calendrier-lien__ligne input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
}
.calendrier-lien__ligne .btn { flex: 0 0 auto; white-space: nowrap; }
.calendrier-lien__aide { margin: 7px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, .46); }
.account-panel__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }


/* =====================================================================================
   Téléphone (point 42) — iPhone et consorts, largeur ≤ 640 px.
   La barre latérale devient une barre du haut (marque + boutons de compte en icônes) et la
   navigation une barre d'onglets fixée en bas, défilable. Les grilles à sept colonnes
   (planificateur, planning équipe) se lisent en liste, un jour après l'autre.
   ===================================================================================== */
@media (max-width: 640px) {
  :root { --barre-haut: 56px; --barre-bas: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .app-shell, .app-shell.is-collapsed { display: block; padding: 0; height: auto; min-height: 100dvh; }
  .main { padding: calc(var(--barre-haut) + 10px) 10px calc(var(--barre-bas) + 14px); }

  /* Barre du haut */
  .sidebar {
    position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--barre-haut);
    display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px;
    padding: 0 10px 0 12px; border-radius: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(12,14,24,.96); transform: none; filter: none;
    /* backdrop-filter cree un bloc conteneur pour les descendants fixes : la barre d'onglets, fixee
       en bas, se retrouvait collee sous la barre du haut. */
    backdrop-filter: none; -webkit-backdrop-filter: none; will-change: auto;
  }
  .sidebar__toggle, .brand__text span, .user-badge { display: none !important; }
  .brand__mark { width: 30px; height: 30px; font-size: 12px; }
  .brand__text strong { font-size: 15px; }
  .sidebar__account-area { margin: 0; padding: 0; border: 0; }
  .sidebar__account-area .topbar__action-row { display: flex; gap: 6px; flex-wrap: nowrap; }
  .sidebar__account-area .topbar__action-row .btn { width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 12px; justify-content: center; }
  .sidebar-icon-btn { position: relative; }
  .sidebar-icon-btn__icon { display: inline-flex !important; }
  .sidebar-icon-btn__label { display: none !important; }
  .notif-pastille { position: absolute; top: -4px; right: -4px; }

  /* Barre d'onglets en bas */
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    flex-direction: row; flex-wrap: nowrap; gap: 0; overflow-x: auto; overflow-y: hidden;
    height: var(--barre-bas); padding: 4px 4px env(safe-area-inset-bottom, 0px);
    background: rgba(12,14,24,.97); border-top: 1px solid rgba(255,255,255,.08);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav__item {
    flex: 1 0 72px; width: auto; min-width: 72px; height: 52px; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 4px 6px; border-radius: 10px; font-size: 10px; line-height: 1.1;
  }
  .nav__icon { width: 20px; flex: 0 0 20px; }
  .nav__icon svg { width: 20px; height: 20px; }
  .nav__label { white-space: nowrap; max-width: 100%; }

  /* Tableau de bord : deux tuiles par ligne, compactes */
  #kpiGrid, .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  #kpiGrid > * { padding: 12px 12px 10px; }
  #kpiGrid > * strong, #kpiGrid > * .kpi__value, #kpiGrid > * .kpi-value, .dashboard-kpi__value { font-size: 24px; }
  .dashboard-kpi__label { font-size: 10px; }
  .panel { padding: 12px; border-radius: 14px; }
  .panel__header h2, .page-title { font-size: 17px; }

  /* Planificateur : la semaine se lit jour après jour */
  #plannerView .panel__actions { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  #plannerView .planner-week-label { order: -1; width: 100%; text-align: center; }
  #plannerView .panel__actions .btn { flex: 1 1 0; }
  .planner-toolbar { gap: 8px; }
  .planner-toolbar__gauche { width: 100%; }
  #ouvrirPlanifier { width: 100%; }
  .planner-grid-wrap { max-height: none; overflow: visible; border: 0; }
  .planner-grid { min-width: 0; padding: 0; gap: 10px; }
  .planner-grid-header { display: none; }
  .planner-member-heading { min-height: 0; padding: 8px 12px; }
  .planner-grid-row--member { grid-template-columns: 1fr; gap: 6px; }
  .planner-grid-cell { min-height: 0; padding: 8px 10px; }
  .planner-grid-day::before {
    content: attr(data-jour); display: block; font-family: var(--mono); font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .06em; color: var(--mut); margin-bottom: 2px;
  }
  .planner-grid-day.is-vide { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
  .planner-grid-day.is-vide::before { margin: 0; }
  .planner-grid-day.is-vide .planner-day-empty { min-height: 0; padding: 0; border: 0; font-size: 11px; color: var(--mut); }
  .planner-grid-day.is-weekend.is-vide { opacity: .55; }
  .planner-card { padding: 10px 10px 10px 14px; }

  /* Planning équipe : une carte par membre, ses jours en ligne */
  .equipe-wrap { max-height: none; overflow: visible; border: 0; }
  .equipe-grid { display: block; min-width: 0; }
  .equipe-head { display: none; }
  .equipe-membre { position: static; display: block; min-height: 0; padding: 12px 10px 4px; border: 0; background: transparent; font-size: 14px; }
  .equipe-cell:not(.equipe-head):not(.equipe-membre) {
    display: inline-flex; flex-direction: row; align-items: center; gap: 6px; min-height: 0;
    padding: 4px 8px 4px 0; border: 0; margin: 0 4px 4px 0;
  }
  .equipe-cell:not(.equipe-head):not(.equipe-membre)::before {
    content: attr(data-jour); font-family: var(--mono); font-size: 10px; color: var(--mut); text-transform: uppercase;
  }
  .equipe-cell.is-vide { display: none; }
  .equipe-cell.is-aujourdhui { box-shadow: none; }
  .equipe-cell.is-aujourdhui::before { color: #7fb8ff; }

  /* Fenêtres : pleine largeur */
  .modal { padding: 8px; align-items: end; }
  .modal__panel, .modal__panel--planifier { width: 100%; max-width: none; padding: 16px; max-height: 94dvh; }
  .seg__btn { padding: 8px 12px; }
  .planifier-pied__btns .btn { flex: 1 1 0; }

  /* Tableaux : défilement horizontal contenu, jamais la page */
  .table-shell, .conges-table-wrap, .logs-table-wrap, .activity-table-wrap { overflow-x: auto; }
}

/* ============================================================
   Point 32 — Projets GLPI (vue Projets + champ Projet de Planifier)
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.projets-sync { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.projets-sync__etat { font-size: 12px; color: var(--mut); display: inline-flex; align-items: center; gap: 7px; }
.projets-sync__puce { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); flex: 0 0 8px; }
.projets-sync__puce.is-ok { background: #4cd27a; box-shadow: 0 0 0 3px rgba(76,210,122,.18); }
.projets-sync__puce.is-ko { background: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,.18); }
.projets-outils { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 12px; }
.projets-recherche { flex: 1 1 260px; min-width: 200px; }
.projets-recherche input { width: 100%; }
.projets-outils select, .projets-outils .app-select { flex: 0 1 220px; width: auto; min-width: 160px; }
.projets-portee .seg__btn { padding: 5px 12px; }
.projets-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.projets-chiffre { padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 2px; }
.projets-chiffre strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.projets-chiffre span { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; }
.projets-liste { display: flex; flex-direction: column; gap: 8px; }
.projets-ligne { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.025); overflow: hidden; }
.projets-ligne.is-ouvert { border-color: rgba(58,160,255,.35); }
.projets-ligne.is-disparu { opacity: .6; }
.projets-ligne__tete { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, auto) 190px 110px 18px; align-items: center; gap: 14px; padding: 12px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.projets-ligne__tete:hover { background: rgba(255,255,255,.03); }
.projets-ligne__tete:focus-visible { outline: 2px solid rgba(58,160,255,.7); outline-offset: -2px; }
.projets-ligne__titre { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.projets-ligne__nom { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projets-ligne__sous { font-size: 11.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projets-ligne__resp.is-membre { color: #7fb8ff; }
.projets-ligne__resp.is-vide { font-style: italic; }
.projets-ligne__heures { font-size: 12px; color: var(--sec); font-variant-numeric: tabular-nums; white-space: nowrap; }
.projets-ligne__avancement { display: flex; align-items: center; gap: 8px; }
.projets-barre { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.projets-barre__fill { height: 100%; border-radius: 999px; background: #3aa0ff; }
.projets-barre__fill.is-termine { background: #4cd27a; }
.projets-barre__fill.is-attente { background: #ffb347; }
.projets-barre__fill.is-annule { background: rgba(255,255,255,.3); }
.projets-pct { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.projets-etat { display: inline-flex; align-items: center; justify-content: center; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; color: #cfd6e4; background: rgba(255,255,255,.06); }
.projets-etat.is-en-cours { color: #7fb8ff; background: rgba(10,132,255,.14); border-color: rgba(58,160,255,.4); }
.projets-etat.is-termine { color: #8ee6a8; background: rgba(76,210,122,.14); border-color: rgba(76,210,122,.4); }
.projets-etat.is-attente { color: #ffcf8a; background: rgba(255,179,71,.14); border-color: rgba(255,179,71,.4); }
.projets-etat.is-annule { color: var(--mut); border-style: dashed; }
.projets-ligne__chevron { color: var(--mut); font-size: 18px; transition: transform .15s ease; }
.projets-ligne.is-ouvert .projets-ligne__chevron { transform: rotate(90deg); }
.projets-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 4px 16px 16px; border-top: 1px solid rgba(255,255,255,.06); }
.projets-detail h4 { margin: 12px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
.projets-detail h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.projets-taches, .projets-heures { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.projets-taches li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 44px; gap: 10px; align-items: center; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.03); font-size: 12.5px; }
.projets-taches li.is-termine .projets-tache__nom { color: var(--mut); text-decoration: line-through; }
.projets-tache__etat { font-size: 11px; color: var(--mut); white-space: nowrap; }
.projets-tache__pct { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.projets-heures li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 8px; font-size: 12.5px; border-radius: 8px; background: rgba(255,255,255,.03); }
.projets-heures li small { color: var(--mut); }
.projets-meta { margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 14px; font-size: 12px; }
.projets-meta div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.projets-meta dt { color: var(--mut); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.projets-meta dd { margin: 0; overflow-wrap: anywhere; }
.projets-lien { display: inline-block; margin-top: 12px; font-size: 12.5px; color: #7fb8ff; text-decoration: none; }
.projets-lien:hover { text-decoration: underline; }
.planner-card-projet { color: #7fb8ff; font-weight: 600; }
/* Champ Projet de la fenêtre Planifier */
.planifier-projet__saisie { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.planifier-projet__saisie input[type="text"] { flex: 1 1 100%; }
.planifier-projet__saisie input[type="text"] { width: 100%; padding-right: 34px; }
.planifier-projet__saisie input.is-choisi { color: #7fb8ff; font-weight: 600; }
.planifier-projet__effacer { position: absolute; right: 8px; top: 12px; border: 0; background: rgba(255,255,255,.08); color: var(--sec); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; }
.planifier-projet__effacer:hover { background: rgba(255,255,255,.16); color: var(--ink); }
/* Dans le flux, pas en surimpression : la fenêtre grandit et défile, la liste aussi (retour de Kévin, 8/09). */
.planifier-projet__suggestions { position: static; width: 100%; margin-top: 6px; max-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: #141a2a; box-shadow: 0 12px 30px rgba(0,0,0,.45); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.planifier-projet__suggestions button { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.planifier-projet__suggestions button:hover, .planifier-projet__suggestions button:focus-visible { background: rgba(58,160,255,.16); outline: none; }
.planifier-projet__nom { font-size: 13px; font-weight: 600; }
.planifier-projet__sous { font-size: 11.5px; color: var(--mut); }
.planifier-projet__sous b { color: #7fb8ff; font-weight: 600; }
.planifier-projet__vide { padding: 10px 12px; font-size: 12.5px; color: var(--mut); }
@media (max-width: 900px) {
  .projets-ligne__tete { grid-template-columns: minmax(0, 1fr) 110px 18px; grid-template-areas: "titre etat chevron" "heures heures heures" "avancement avancement avancement"; row-gap: 8px; }
  .projets-ligne__titre { grid-area: titre; }
  .projets-etat { grid-area: etat; justify-self: end; }
  .projets-ligne__chevron { grid-area: chevron; }
  .projets-ligne__heures { grid-area: heures; white-space: normal; }
  .projets-ligne__avancement { grid-area: avancement; }
  .projets-detail { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .projets-outils { flex-direction: column; align-items: stretch; }
  .projets-outils select, .projets-outils .app-select, .projets-portee { width: 100%; min-width: 0; }
  .projets-chiffres { grid-template-columns: repeat(2, 1fr); }
  .projets-ligne__nom { white-space: normal; }
  .projets-sync { justify-content: flex-start; }
}

.projets-tache__heures { font-size: 11.5px; color: #7fb8ff; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 34px; text-align: right; }
.projets-tache__heures.is-vide { color: rgba(255,255,255,.25); }
.projets-liens { display: flex; gap: 16px; flex-wrap: wrap; }

/* Point 32 — clore la tâche GLPI depuis « Terminer », et mode embarqué (fenêtre surgissante) */
.activity-complete__tache { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px; background: rgba(58,160,255,.08); border: 1px solid rgba(58,160,255,.25); font-size: 13px; line-height: 1.35; cursor: pointer; }
.activity-complete__tache input { margin-top: 2px; }
body.is-embarque .sidebar, body.is-embarque .main > *:not(.modal) { display: none !important; }
body.is-embarque .main { padding: 0; margin: 0; max-width: none; }
body.is-embarque .modal { padding: 0; place-items: start center; }
body.is-embarque .modal__panel--planifier { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
body.is-embarque .modal__backdrop { display: none; }

/* Filtre au clavier des menus déroulants */
.app-select__filtre { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 12px; font-size: 12px; color: var(--sec); border-bottom: 1px solid rgba(255,255,255,.08); position: sticky; top: 0; background: inherit; }
.app-select__filtre strong { color: #7fb8ff; }
.app-select__filtre-aide { font-size: 10.5px; color: var(--mut); white-space: nowrap; }
.app-select__vide { padding: 10px 12px; font-size: 12.5px; color: var(--mut); }