/* components.css — shared component/partial styles (included by several
   pages without their own <head>): taken from their inline <style>. Design layer,
   loaded globally via partials/head.ejs. Variables from liquid-glass.css / app.css. */

/* ── Menu outils admin (partials/admin-nav) ── */
.admin-tools-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 280px; max-width: 90vw;
  background: color-mix(in srgb, var(--paper, var(--bg-elevated, #fff)) 97%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--lg-border, var(--separator)); border-radius: 14px;
  box-shadow: var(--lg-shadow-lg, 0 24px 60px rgba(0,0,0,0.18)); z-index: 1200;
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; max-height: min(78vh, 640px);
  padding: 0.4rem; animation: adminToolsIn .24s cubic-bezier(0.22,0.61,0.36,1);
}
@keyframes adminToolsIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.admin-tools-item {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.7rem;
  text-decoration: none; color: var(--label-primary); border-radius: 9px; font-size: 0.88rem; white-space: nowrap;
}
.admin-tools-item:hover { background: var(--fill-tertiary, rgba(0,0,0,0.04)); }
.admin-tools-item.is-active { background: var(--fill-primary, rgba(0,0,0,0.06)); font-weight: 600; }
.admin-tools-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--label-secondary); }
.admin-tools-sep { height: 1px; background: var(--separator); margin: 0.35rem 0.2rem; }
/* Tools menu section header (ergonomic grouping). */
.admin-tools-head {
  font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--label-tertiary, var(--label-secondary, #9aa6b2));
  padding: 0.5rem 0.7rem 0.2rem;
}
.admin-tools-head:first-child { padding-top: 0.2rem; }
/* WORLD header in the “My apps” menu: My management · My activity · My application.
   Level 1 (above the .admin-tools-head subsections that remain under “My application”). */
.admin-tools-world {
  font-size: 0.82rem; font-weight: 800; letter-spacing: -0.01em;
  color: var(--label-primary);
  padding: 0.65rem 0.7rem 0.35rem; margin-top: 0.3rem;
  border-top: 1px solid var(--separator);
}
.admin-tools-world:first-child { margin-top: 0; border-top: 0; padding-top: 0.25rem; }

/* ── Bandeau « points d'attention » (partials/attention) ── */
.attention-banner { margin:0 0 1.1rem; border:1px solid rgba(255,159,10,0.45); background:rgba(255,159,10,0.09);
  border-radius:14px; padding:0.9rem 1.1rem; }
.attention-banner h3 { margin:0 0 0.6rem; font-size:0.92rem; font-weight:700; display:flex; align-items:center; gap:0.5rem; color:#a85900; }
.attention-chips { display:flex; flex-wrap:wrap; gap:0.55rem; }
.attention-chip { display:inline-flex; align-items:center; gap:0.5rem; padding:0.42rem 0.75rem; border-radius:999px;
  background:var(--bg-elevated,#fff); border:1px solid var(--separator); text-decoration:none; color:inherit;
  font-size:0.84rem; transition:border-color 0.12s ease, transform 0.12s ease; }
.attention-chip:hover { border-color:#ff9f0a; transform:translateY(-1px); }
.attention-chip .ac-dot { width:9px; height:9px; border-radius:50%; background:#ff9f0a; flex:none; }
.attention-chip.urgent .ac-dot { background:#ff3b30; }
.attention-chip .ac-reason { color:var(--label-secondary); font-size:0.77rem; }
.attention-row > td:first-child { box-shadow: inset 3px 0 0 #ff9f0a; }
.attention-row.urgent > td:first-child { box-shadow: inset 3px 0 0 #ff3b30; }
.attention-block { box-shadow: inset 3px 0 0 #ff9f0a; }
.attention-block.urgent { box-shadow: inset 3px 0 0 #ff3b30; }
.attention-tag { display:inline-flex; align-items:center; gap:0.25rem; margin-left:0.5rem; padding:0.1rem 0.5rem;
  border-radius:999px; background:rgba(255,159,10,0.16); color:#a85900; font-size:0.68rem; font-weight:700; vertical-align:middle; white-space:nowrap; }
.attention-tag.urgent { background:rgba(255,59,48,0.14); color:#c01a10; }
@keyframes attn-flash { 0%{ background:rgba(255,159,10,0.22);} 100%{ background:transparent;} }
.attention-flash { animation: attn-flash 1.5s ease-out; }

/* ── Home / splash screen (partials/welcome-splash) ── */
.app-welcome {
  position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  opacity: 0; transition: opacity .42s ease; cursor: pointer;
}
:root[data-theme="dark"] .app-welcome { background: rgba(18, 18, 20, 0.82); }
/* Local safeguard (this style loads after liquid-glass.css, which therefore cannot
   make it opaque from its own accessibility block). */
@media (prefers-reduced-transparency: reduce) {
  .app-welcome { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.97); }
  :root[data-theme="dark"] .app-welcome { background: rgba(18, 18, 20, 0.97); }
}
.app-welcome.is-in  { opacity: 1; }
.app-welcome.is-out { opacity: 0; }
.app-welcome-card {
  display: flex; flex-direction: column; align-items: center; gap: 1.15rem;
  transform: scale(0.92) translateY(8px);
  transition: transform .55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.app-welcome.is-in .app-welcome-card { transform: none; }
.app-welcome-logo { filter: drop-shadow(0 8px 24px rgba(15, 37, 68, 0.18)); }
.app-welcome-greet {
  font-size: clamp(1.7rem, 4.5vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em;
  color: var(--label-primary, #1a1a1a);
}
@media (prefers-reduced-motion: reduce) {
  .app-welcome, .app-welcome-card { transition: opacity .2s ease; }
  .app-welcome-card { transform: none; }
}

/* ── Command palette ⌘K (`partials/cmdk`) ── */
/* Overlay: palette positioned near the top (not vertically centered). */
.cmdk-modal { align-items: flex-start; padding-top: 11vh; }
/* Map: inherits the liquid glass surface from .app-modal-card. */
.cmdk-card { max-width: 680px; padding: 0; }
.cmdk-search {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--separator);
}
.cmdk-search svg { width: 18px !important; height: 18px !important; }
.cmdk-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 1.05rem; color: var(--label-primary); font-family: inherit;
  letter-spacing: -0.005em;
}
.cmdk-search input::placeholder { color: var(--label-secondary); }
.cmdk-kbd {
  font-size: 0.72rem; padding: 0.2rem 0.55rem;
  background: var(--fill-tertiary); color: var(--label-secondary);
  border-radius: 6px; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  border: 1px solid var(--separator);
  box-shadow: inset 0 -1px 0 var(--separator);
  line-height: 1;
}
.cmdk-results { max-height: 60vh; overflow-y: auto; padding: 0.4rem 0 0.6rem; }
.cmdk-empty { padding: 2.2rem 1.5rem; color: var(--label-secondary); font-size: 0.9rem; margin: 0; text-align: center; }
.cmdk-section-title {
  padding: 0.7rem 1.3rem 0.3rem;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--label-secondary);
}
.cmdk-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 1.3rem;
  cursor: pointer; color: var(--label-primary); text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cmdk-item:hover, .cmdk-item.active {
  background: var(--fill-primary);
  color: var(--label-primary);
  border-left-color: var(--tint);
}
.cmdk-item-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--fill-tertiary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 0.78rem; font-weight: 700;
  color: var(--label-primary);
  border: 1px solid var(--separator);
}
.cmdk-item-body { min-width: 0; flex: 1; }
.cmdk-item-title { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; }
.cmdk-item-sub  { font-size: 0.78rem; color: var(--label-secondary); margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-footer {
  display: flex; gap: 1.2rem; padding: 0.75rem 1.3rem;
  border-top: 1px solid var(--separator);
  background: var(--bg-tertiary);
  font-size: 0.76rem; color: var(--label-secondary);
  flex-wrap: wrap;
}
.cmdk-kbd-sm {
  font-size: 0.7rem; padding: 0.1rem 0.4rem;
  background: var(--bg-elevated); color: var(--label-primary);
  border: 1px solid var(--separator); border-radius: 5px;
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  box-shadow: inset 0 -1px 0 var(--separator);
  line-height: 1.2;
}
@media (max-width: 560px) {
  .cmdk-footer { display: none; }
  .cmdk-search input { font-size: 1rem; }
}

/* ── School selector (partials/ecole-switcher) ── */
/* "userarea" mode: app-nav-switcher pill style, on the right near the user info. */
.school-switcher-userarea {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 0.5rem;
}
.school-switcher-userarea-pill {
  cursor: pointer;
}
.school-switcher-userarea-pill > span {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.school-switcher-userarea select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
}
/* "brand" mode: clickable pill next to the nav logo. */
.school-switcher-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
}
.school-switcher-brand-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.55rem;
  background: var(--fill-quaternary);
  border: 0.5px solid var(--separator);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--label-primary);
  cursor: pointer;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.school-switcher-brand:hover .school-switcher-brand-pill {
  background: var(--fill-tertiary);
}
.school-switcher-brand select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
}
/* "breadcrumb" mode: inline pill in a page breadcrumb. */
.school-switcher-breadcrumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.school-switcher-breadcrumb-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  background: var(--fill-tertiary);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--label-primary);
  cursor: pointer;
  white-space: nowrap;
}
.school-switcher-breadcrumb:hover .school-switcher-breadcrumb-pill {
  background: var(--fill-secondary);
}
.school-switcher-breadcrumb select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
}
.school-switcher-bar {
  background: transparent;
  border-bottom: 0.5px solid var(--separator);
  padding: 0.3rem 1.5rem;
  font-size: 0.78rem;
}
.school-switcher-bar-inner {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.4rem;
  color: var(--label-secondary);
}
.school-switcher-bar-text strong {
  color: var(--label-primary);
  font-weight: 600;
}
.school-switcher-bar-form {
  position: relative;
  display: inline-flex;
}
.school-switcher-bar-link {
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.78rem;
}
.school-switcher-bar-link:hover { text-decoration: none; }
.school-switcher-bar-form select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
}
.school-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  background: var(--fill-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  font-size: 0.86rem;
}
.school-switcher label { color: var(--label-secondary); font-weight: 500; }
.school-switcher select {
  background-color: var(--bg-elevated);
  border: 0.5px solid var(--separator);
  border-radius: 6px;
  padding: 0.25rem 1.9rem 0.25rem 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--label-primary);
  cursor: pointer;
}

/* ── On-screen help (partials/help-overlay) ── */
.help-overlay {
  /* Veil aligned with the pop-up standard: slight darkening; the card carries the glass effect. */
  position: fixed; inset: 0;
  background: rgba(10,18,32,0.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 2000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 1rem;
}
.help-overlay.show { display: flex; }
.help-card {
  background: var(--lg-surface-strong, var(--paper));
  -webkit-backdrop-filter: blur(var(--lg-blur-card, 30px)) saturate(180%);
  backdrop-filter: blur(var(--lg-blur-card, 30px)) saturate(180%);
  border: 1px solid var(--lg-border, var(--separator));
  border-radius: 16px;
  box-shadow: var(--lg-highlight, inset 0 1px 0 rgba(255,255,255,0.5)), var(--lg-shadow-lg, 0 20px 60px rgba(0,0,0,0.3));
  width: 100%;
  max-width: 680px;
  max-height: calc(100vh - 6rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.help-header h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--navy);
}
.help-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--slate);
  cursor: pointer;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
}
.help-close:hover { background: var(--cream-1); color: var(--navy); }
#help-search {
  width: calc(100% - 2.5rem);
  margin: 0.85rem 1.25rem 0.4rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
}
#help-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.15);
}
.help-content {
  padding: 0.5rem 1.25rem 1rem;
  overflow-y: auto;
  flex: 1;
}
.help-section {
  margin-bottom: 1.25rem;
}
.help-section h3 {
  margin: 0.85rem 0 0.5rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  font-weight: 700;
}
.help-item {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--navy);
  transition: background 0.1s ease;
  border: 1px solid transparent;
}
.help-item:hover {
  background: var(--cream-1);
  border-color: var(--border);
}
.help-item-title {
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.help-item-desc {
  font-size: 0.78rem;
  color: var(--slate);
  margin-top: 0.2rem;
}
.help-item.hidden { display: none; }
.help-footer {
  padding: 0.7rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--off);
  font-size: 0.78rem;
  color: var(--slate);
}
.help-shortcut kbd {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--navy);
}

/* ── Management navigation bar: notifications, utility icons, presence
      (partials/gestion-nav — static block; the dynamic `:root{--brand-primary}`
      remains inline in the view). ── */
.app-notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 999px; background: var(--system-red, #ff3b30);
  color: #fff; font-size: 0.6rem; font-weight: 700; line-height: 15px;
  text-align: center; box-shadow: 0 0 0 2px var(--bg-secondary, #fff);
}
.app-notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 340px; max-width: 90vw;
  /* Notifications panel: much more opaque than standard glass
     (for content readability), while keeping a slight blur for consistency. */
  background: color-mix(in srgb, var(--paper, var(--bg-elevated, #fff)) 97%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--lg-border, var(--separator)); border-radius: 16px;
  box-shadow: var(--lg-shadow-lg, 0 24px 60px rgba(0,0,0,0.18)); z-index: 1200;
  overflow: hidden; animation: notifIn .3s cubic-bezier(0.34,1.56,0.64,1);
  transform-origin: top right;   /* springs out of the bell */
}
@keyframes notifIn { from { opacity: 0; transform: translateY(-10px) scale(0.86); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .app-notif-panel { animation: none; } }
.app-notif-head { padding: 0.8rem 1rem 0.5rem; font-weight: 700; font-size: 0.9rem; color: var(--label-primary); }
.app-notif-list { max-height: 60vh; overflow-y: auto; padding-bottom: 0.4rem; }
.app-notif-item {
  display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem 1rem;
  text-decoration: none; color: var(--label-primary); border-top: 1px solid var(--separator);
  transition: background .12s;
}
.app-notif-item:hover { background: var(--fill-tertiary, rgba(0,0,0,0.03)); }
.app-notif-item .ni-ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.app-notif-item .ni-ico.action { background: rgba(255,149,0,0.16); color: #a85e00; }
.app-notif-item .ni-ico.info { background: rgba(0,122,255,0.14); color: #0050b3; }
.app-notif-item .ni-label { font-size: 0.84rem; line-height: 1.3; }
.app-notif-empty { padding: 1.4rem 1rem; text-align: center; color: var(--label-secondary); font-size: 0.85rem; margin: 0; }
/* Nav utility icons (search, notifications, sign-out): SAME dimensions
   than the section icons (36×36, 22px glyph) for a uniform bar. */
.app-nav-user .app-btn-ghost {
  width: 36px; height: 36px; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 9px;
  color: var(--label-primary);
}
.app-nav-user .app-btn-ghost:hover { background: var(--fill-secondary, rgba(0,0,0,0.06)); color: var(--tint, #5e7fa8); }
.app-nav-user .app-btn-ghost svg { width: 22px; height: 22px; }
/* « nom » tooltip when hovering over bar icons (below the icon). */
.app-nav [data-tip] { position: relative; }
.app-nav-inner.nav-compact .app-nav-links { overflow: visible; }
.app-nav:not(.is-collapsed) .app-nav-user .app-btn-ghost[data-tip]:hover::after,
.app-nav:not(.is-collapsed) .app-nav-inner.nav-compact .app-nav-links a[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: var(--label-primary, #1a1a1a); color: var(--bg-elevated, #fff);
  padding: 0.32rem 0.55rem; border-radius: 7px; font-size: 0.72rem; font-weight: 600;
  line-height: 1; white-space: nowrap; pointer-events: none; z-index: 1200;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
/* Live presence: discreet “N online” badge with a pulsing green dot. */
/* [hidden] must take precedence: without this rule, the HTML placeholder value “1” remained
   permanently displayed, while the indicator only matters when 2 people are connected. */
.app-presence[hidden] { display:none; }
.app-presence { display:inline-flex; align-items:center; gap:0.34rem; padding:0.24rem 0.55rem; border-radius:999px;
  background:var(--fill-tertiary, rgba(0,0,0,0.045)); font-size:0.76rem; font-weight:600;
  color:var(--label-secondary, #6b7280); cursor:default; user-select:none; white-space:nowrap; }
.app-presence-dot { width:7px; height:7px; border-radius:50%; background:#2563eb; flex:none;
  animation:app-presence-pulse 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .app-presence-dot { animation:none; } }
@keyframes app-presence-pulse {
  0% { box-shadow:0 0 0 0 rgba(37,99,235,0.45); }
  70% { box-shadow:0 0 0 5px rgba(37,99,235,0); }
  100% { box-shadow:0 0 0 0 rgba(37,99,235,0); } }
@media (max-width: 720px) { .app-presence-label { display:none; } }

/* ─── Header icon buttons (search, administration, log out) ─────────────────────────
   They were bare icons, hard to distinguish from decoration and too small to
   hit with a thumb. Solid disc: clear 36px target, sufficient contrast. */
.app-nav-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--fill-tertiary, rgba(120,120,128,0.12));
  color: var(--label-primary, #1c1c1e);
  cursor: pointer;
  flex: none;
  transition: background 0.16s ease, color 0.16s ease;
}
.app-nav-iconbtn:hover { background: var(--fill-secondary, rgba(120,120,128,0.18)); }
.app-nav-iconbtn:active { transform: scale(0.94); }
.app-nav-iconbtn:focus-visible { outline: 2px solid var(--brand-azur, #2563eb); outline-offset: 2px; }

/* ─── Presence: drop-down list of colleagues online ─────────────────────────────────
   The information existed only in the tooltip, so it was inaccessible on a phone
   (no hover). It can now be opened with a tap. */
.app-presence-wrap { position: relative; display: inline-flex; flex: none; }
.app-presence { border: none; cursor: pointer; font: inherit; }
.app-presence[hidden] { display: none; }
.app-presence-list {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 60;
  min-width: 11rem;
  max-height: 14rem;
  overflow-y: auto;
  padding: 0.35rem;
  border-radius: 12px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--separator, rgba(60,60,67,0.14));
  box-shadow: 0 10px 28px rgba(20,40,75,0.16);
}
.app-presence-list[hidden] { display: none; }
.app-presence-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.55rem;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--label-primary, #1c1c1e);
  white-space: nowrap;
}
.app-presence-item .app-presence-dot { animation: none; }

/* ── Context menu (right-click on planning tile; present in several views;
      extracted from the static gestion/planning block). ── */
.ev-context-menu { position: fixed; z-index: 1000; display: none; }
.ev-context-menu.show { display: block; }

/* ── Bandeau « Se connecter en tant que » (impersonation support, head.ejs) ──
   Bottom of the screen, amber. Distinct from the dev banner (red, top): no collision.
   Clickable (contains the Quitter button), above everything except modals. */
.app-imp-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem 1.1rem;
  flex-wrap: wrap; min-height: 2.7rem; padding: 0.45rem 1rem;
  background: #b45309; color: #fff;
  font: 600 0.82rem/1.3 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  box-shadow: 0 -2px 14px rgba(0,0,0,0.24);
}
.app-imp-banner__txt { display: inline-flex; align-items: center; gap: 0.5rem; text-align: center; }
.app-imp-banner__txt strong { font-weight: 800; }
.app-imp-banner__exit {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #fff; color: #92400e; text-decoration: none;
  font-weight: 700; font-size: 0.8rem; padding: 0.34rem 0.85rem; border-radius: 999px;
  transition: background 0.12s ease, transform 0.12s ease;
}
.app-imp-banner__exit:hover { background: #fde68a; transform: translateY(-1px); }
.app-imp-banner__exit:active { transform: translateY(0); }
/* The content moves up by the banner height so it does not hide the bottom of the page. */
body.has-imp-banner { padding-bottom: 3rem; }
@media print {
  .app-imp-banner { display: none !important; }
  body.has-imp-banner { padding-bottom: 0 !important; }
}

/* ── In-app announcements (admin distribution, head.ejs): dismissible banners at the top
   of the page, stacked, colored by level. Desaturated blue for “info.” ── */
.app-announcements { display: flex; flex-direction: column; }
.app-annonce {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 500; color: #fff;
}
.app-announcement-info    { background: #5e7fa8; }
.app-annonce-success { background: #2f9e6f; }
.app-annonce-warning { background: #b45309; }
.app-annonce__msg { flex: 1; }
.app-annonce__link { color: #fff; text-decoration: underline; font-weight: 700; }
.app-annonce__close {
  flex: none; width: 1.5rem; height: 1.5rem; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 1.1rem; line-height: 1;
}
.app-annonce__close:hover { background: rgba(255, 255, 255, 0.32); }
@media print { .app-announcements { display: none !important; } }

/* ── super-nav: dedicated publisher account nav (super-admin). AT THE TOP: area
   selector (Administration / Management / Teaching) + admin options. ── */
.super-nav .super-area { font-weight: 600; }
.super-nav .super-area.active { background: rgba(255, 255, 255, 0.18) !important; color: #fff !important; }

/* Top-left logo: magnify on hover, in the spirit of the dock tiles. */
.super-nav .app-nav-brand .app-logo-svg { transition: transform 0.28s cubic-bezier(.34, 1.56, .64, 1); will-change: transform; }
.super-nav .app-nav-brand:hover .app-logo-svg { transform: translateY(-2px) scale(1.13); }

/* ── Top bar: central search + « Créer » button (fills the middle). ── */
/* overflow: visible → the « Créer » menu can extend below the bar (otherwise the
   overflow-x:auto inherited from .app-nav-links clips it, as it does for the dock). */
.super-nav .super-nav-center { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; justify-content: center; overflow: visible; }
.super-nav .super-search {
  display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer;
  width: 100%; max-width: 430px; min-width: 0; padding: 0.5rem 0.8rem; border-radius: 11px;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78); font: inherit; text-align: left;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.super-nav .super-search:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.26); color: #fff; }
.super-nav .super-search > svg { flex: none; opacity: 0.85; }
.super-nav .super-search-ph { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; }
.super-nav .super-search-kbd {
  flex: none; font: 600 0.7rem/1 'Roboto', -apple-system, system-ui, sans-serif; color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 5px; padding: 0.14rem 0.36rem;
}
.super-nav .super-create { position: relative; flex: none; }
.super-nav .super-create-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; white-space: nowrap;
  padding: 0.5rem 0.9rem; border-radius: 11px; border: none;
  background: var(--sys-blue, #0a84ff); color: #fff; font: 600 0.86rem/1 inherit;
  box-shadow: 0 2px 9px rgba(10, 132, 255, 0.35); transition: filter 0.15s, transform 0.1s;
}
.super-nav .super-create-btn:hover { filter: brightness(1.08); }
.super-nav .super-create-btn:active { transform: scale(0.97); }
.super-nav .super-create-menu {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 1200; width: 264px;
  background: color-mix(in srgb, var(--paper, var(--bg-elevated, #fff)) 97%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--lg-border, var(--separator)); border-radius: 14px;
  box-shadow: var(--lg-shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.18)); padding: 0.4rem;
  animation: superCreateIn 0.2s cubic-bezier(.22, .61, .36, 1);
}
.super-nav .super-create-menu[hidden] { display: none; }
@keyframes superCreateIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.super-nav .super-create-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.6rem; border-radius: 9px; text-decoration: none; color: var(--label-primary); }
.super-nav .super-create-item:hover { background: var(--fill-tertiary, rgba(0, 0, 0, 0.04)); }
.super-nav .super-create-item > svg { color: var(--sys-blue, #0a84ff); flex: none; }
.super-nav .super-create-item strong { display: block; font-size: 0.88rem; font-weight: 600; }
.super-nav .super-create-item small { display: block; font-size: 0.74rem; color: var(--label-secondary); }
/* The menu is white, but .app-nav-admin .app-nav-links forced white text
   (the navy nav link color) → restore dark text with higher
   specificity (3 classes), otherwise the Prestation/Devis/Facture headings are invisible. */
.super-nav .super-create-menu .super-create-item,
.super-nav .super-create-menu .super-create-item strong { color: var(--label-primary); }
@media (max-width: 760px) {
  .super-nav .super-search-ph, .super-nav .super-search-kbd { display: none; }
  .super-nav .super-search { width: auto; }
  .super-nav .super-create-btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .super-nav .app-nav-brand .app-logo-svg, .super-nav .super-search, .super-nav .super-create-btn { transition: none; }
  .super-nav .app-nav-brand:hover .app-logo-svg { transform: none; }
  .super-nav .super-create-menu { animation: none; }
}

/* ── AT THE BOTTOM: macOS-style dock — the « apps » of the current workspace. ── */
.super-dock {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1150;
  display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.5rem 0.7rem; border-radius: 22px;
  background: color-mix(in srgb, #0f2544 60%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.super-dock .dock-app { position: relative; display: block; text-decoration: none; line-height: 0; }
.super-dock .dock-tile {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px;
  /* Symbol ALWAYS white on the colored tile (Julien's choice) — overrides the
     nav-icon-mint/cyan/yellow classes that make the symbol dark elsewhere. */
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  transform-origin: bottom center;
  transition: transform 0.2s cubic-bezier(.22, .61, .36, 1), box-shadow 0.2s ease;
  will-change: transform;
}
.super-dock .dock-tile svg { width: 26px; height: 26px; }
/* Hover: ONLY the pointed tile reacts (no effect on neighboring tiles, Julien's
   choice). transform-origin: bottom → it grows upward from the floor of the
   dock and overflows above the panel (overflow: visible further down allows it). */
.super-dock .dock-app:hover .dock-tile { transform: translateY(-6px) scale(1.32); box-shadow: 0 14px 26px rgba(0, 0, 0, 0.38); }
.super-dock .dock-app:active .dock-tile { transform: translateY(-3px) scale(1.16); transition-duration: 0.09s; }
.super-dock .dock-label {
  position: absolute; left: 50%; bottom: calc(100% + 25px); transform: translate(-50%, 6px) scale(.96); white-space: nowrap;
  background: rgba(0, 0, 0, 0.82); color: #fff; font: 600 0.76rem/1.2 'Roboto', -apple-system, system-ui, sans-serif;
  padding: 0.26rem 0.6rem; border-radius: 8px; opacity: 0; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transition: opacity 0.16s ease, transform 0.18s cubic-bezier(.22, .61, .36, 1);
}
.super-dock .dock-app:hover .dock-label { opacity: 1; transform: translate(-50%, 0) scale(1); }
.super-dock .dock-app.is-active::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.55);
}
.super-dock .dock-sep { width: 1px; height: 38px; margin: 0 0.3rem; align-self: center; background: rgba(255, 255, 255, 0.20); flex: none; }
/* overflow: visible → the enlarged tile and label extend above the
   panel without being clipped (auto/scroll overflow would also clip vertically,
   per spec, and was clipping the icon). The tiles do not shrink (flex: none). */
.super-dock .dock-app { flex: none; }
.super-dock { overflow: visible; }
body.has-super-dock { padding-bottom: 92px; }

/* Entrance: the dock rises ONCE per session (.dock-animate class added by an
   inline script that remembers the first view in sessionStorage → no re-animation
   on every navigation). The panel rises, and the tiles appear in sequence. */
@keyframes superDockPanel {
  from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.98); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes superDockTile {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
.super-dock.dock-animate { animation: superDockPanel 0.5s cubic-bezier(.22, .61, .36, 1) both; }
.super-dock.dock-animate .dock-app {
  opacity: 0; animation: superDockTile 0.42s cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 32ms + 110ms);
}

@media (prefers-reduced-motion: reduce) {
  .super-dock .dock-tile, .super-dock .dock-label { transition: none; }
  .super-dock.dock-animate, .super-dock.dock-animate .dock-app { animation: none; opacity: 1; }
}
/* Phone: the twelve applications do not fit across the screen
   (the dock is about 725 px wide). When centered, it overflowed on both sides and the
   applications at the ends became unreachable. It is therefore anchored to the
   edges of the screen and scrolls horizontally under the finger: every icon
   keeps its touch size and becomes reachable again. */
@media (max-width: 780px) {
  .super-dock {
    left: 10px; right: 10px; transform: none; max-width: none;
    justify-content: flex-start;
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .super-dock::-webkit-scrollbar { width: 0; height: 0; }
  /* The centered dock entrance animation recentered the bar (translateX(-50%)):
     variant without recentering for the dock anchored to the edges. */
  .super-dock.dock-animate { animation-name: superDockPanelFlush; }
}
@keyframes superDockPanelFlush {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media print { .super-dock { display: none !important; } }

/* ── Control center (admin/dashboard): mini trend + activity feed ── */
.dash-trend { display: flex; align-items: flex-end; gap: 0.5rem; height: 92px; }
.dash-trend__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.dash-trend__bar { width: 70%; max-width: 36px; min-height: 2px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #6e8fb6, #41608a); }
.dash-trend__lbl { font-size: 0.7rem; color: var(--label-secondary, #6b7280); margin-top: 0.3rem; text-transform: capitalize; }
.dash-activity { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.dash-activity__item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--separator, #eef1f5); font-size: 0.88rem; }
.dash-activity__item:last-child { border-bottom: 0; }
.dash-activity__meta { color: var(--label-secondary, #6b7280); font-size: 0.78rem; white-space: nowrap; }

/* A row of fields: used by the pre-exam settings and defined
   nowhere. No existing class does the same thing — renaming to a
   A close alternative would have produced the wrong layout instead of no layout. */
.compo-field-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }

/* Two classes used in the views and defined nowhere. A missing class
   raises no error: the section header appears stacked instead of spread out, and the
   text above the title is the same size as the body text. You only see it by opening the page. */
.app-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.app-section-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted, #6b7a90); }
