/* components.css — styles des composants/partials partagés (inclus par plusieurs
   pages, sans <head> propre) : extraits de leurs <style> inline. Couche design,
   chargé globalement via partials/head.ejs. Variables depuis 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; }
/* En-tête de section du menu Outils (regroupement ergonomique). */
.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; }
/* En-tête de MONDE du menu « Mes apps » : Ma gestion · Mon activité · Mon application.
   Niveau 1 (au-dessus des sous-sections .admin-tools-head qui restent sous « Mon 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; }

/* ── Écran d'accueil / splash (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); }
/* Garde locale (ce style charge apres liquid-glass.css, qui ne peut donc pas
   l'opacifier depuis son propre bloc d'accessibilite). */
@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; }
}

/* ── Palette de commandes ⌘K (partials/cmdk) ── */
/* Overlay : palette positionnée vers le haut (pas centrée verticalement). */
.cmdk-modal { align-items: flex-start; padding-top: 11vh; }
/* Carte : hérite de la surface liquid glass de .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; }
}

/* ── Sélecteur d'école (partials/ecole-switcher) ── */
/* Mode "userarea" : pill style app-nav-switcher, à droite près du user info. */
.ecole-switcher-userarea {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 0.5rem;
}
.ecole-switcher-userarea-pill {
  cursor: pointer;
}
.ecole-switcher-userarea-pill > span {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ecole-switcher-userarea select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
}
/* Mode "brand" : pill cliquable à côté du logo nav. */
.ecole-switcher-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
}
.ecole-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;
}
.ecole-switcher-brand:hover .ecole-switcher-brand-pill {
  background: var(--fill-tertiary);
}
.ecole-switcher-brand select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
}
/* Mode "breadcrumb" : pill inline dans le breadcrumb d'une page. */
.ecole-switcher-breadcrumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.ecole-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;
}
.ecole-switcher-breadcrumb:hover .ecole-switcher-breadcrumb-pill {
  background: var(--fill-secondary);
}
.ecole-switcher-breadcrumb select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
}
.ecole-switcher-bar {
  background: transparent;
  border-bottom: 0.5px solid var(--separator);
  padding: 0.3rem 1.5rem;
  font-size: 0.78rem;
}
.ecole-switcher-bar-inner {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.4rem;
  color: var(--label-secondary);
}
.ecole-switcher-bar-text strong {
  color: var(--label-primary);
  font-weight: 600;
}
.ecole-switcher-bar-form {
  position: relative;
  display: inline-flex;
}
.ecole-switcher-bar-link {
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.78rem;
}
.ecole-switcher-bar-link:hover { text-decoration: none; }
.ecole-switcher-bar-form select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
}
.ecole-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;
}
.ecole-switcher label { color: var(--label-secondary); font-weight: 500; }
.ecole-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;
}

/* ── Aide à l'écran (partials/help-overlay) ── */
.help-overlay {
  /* Voile aligné sur le standard des pop-ups : assombrissement léger, c'est la carte qui porte le verre. */
  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);
}

/* ── Barre de navigation gestion : notifications, icônes utilitaires, présence
      (partials/gestion-nav — bloc statique ; le `:root{--brand-primary}` dynamique
      reste inline dans la vue). ── */
.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;
  /* Panneau de notifications : nettement plus opaque que le verre standard
     (lisibilité du contenu), tout en gardant un léger flou pour la cohérence. */
  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;   /* jaillit de la cloche */
}
@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; }
/* Icônes utilitaires de la nav (recherche, notifications, déconnexion) : MÊME gabarit
   que les icônes de rubrique (36×36, glyphe 22px) pour une barre homogène. */
.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; }
/* Infobulle « nom » au survol des icônes de la barre (sous l'icône). */
.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);
}
/* Présence live : pastille discrète « N en ligne » avec point vert pulsé. */
/* [hidden] doit primer : sans cette regle, la valeur d attente « 1 » du HTML restait
   affichee en permanence, alors que l indicateur ne vaut que des 2 personnes connectees. */
.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:#34c759; 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(52,199,89,0.45); }
  70% { box-shadow:0 0 0 5px rgba(52,199,89,0); }
  100% { box-shadow:0 0 0 0 rgba(52,199,89,0); } }
@media (max-width: 720px) { .app-presence-label { display:none; } }

/* ─── Boutons d'icone de l'en-tete (recherche, administration, deconnexion) ──────────
   Ils etaient des icones nues, difficiles a distinguer de la decoration et petites a
   viser au pouce. Pastille pleine : cible franche de 36px, contraste suffisant. */
.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 : liste depliante des collegues en ligne ─────────────────────────────
   L information n existait que dans l infobulle, donc inaccessible sur un telephone
   (pas de survol). Elle s ouvre desormais au doigt. */
.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; }

/* ── Menu contextuel (clic droit sur tuile planning ; présent sur plusieurs vues ;
      extrait du bloc statique de gestion/planning). ── */
.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) ──
   Bas d'ecran, ambre. Distinct du bandeau dev (rouge, haut) : pas de collision.
   Cliquable (contient le bouton Quitter), au-dessus de tout sauf modales. */
.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); }
/* Le contenu remonte de la hauteur du bandeau pour ne pas masquer le bas de page. */
body.has-imp-banner { padding-bottom: 3rem; }
@media print {
  .app-imp-banner { display: none !important; }
  body.has-imp-banner { padding-bottom: 0 !important; }
}

/* ── Annonces in-app (diffusion admin, head.ejs) : bandeaux fermables en haut
   de page, empilés, colorés par niveau. Bleu désaturé pour « info ». ── */
.app-annonces { 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-annonce-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-annonces { display: none !important; } }

/* ── super-nav : nav dédiée du compte éditeur (super-admin). EN HAUT : sélecteur
   de zone (Administration / Gestion / Enseignement) + options admin. ── */
.super-nav .super-area { font-weight: 600; }
.super-nav .super-area.active { background: rgba(255, 255, 255, 0.18) !important; color: #fff !important; }

/* Logo en haut à gauche : magnify au survol, dans l'esprit des tuiles du dock. */
.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); }

/* ── Barre du haut : recherche centrale + bouton « Créer » (remplit le milieu). ── */
/* overflow: visible → le menu « Créer » peut déborder sous la barre (sinon le
   overflow-x:auto hérité de .app-nav-links le rogne, comme pour le 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); }
/* Le menu est blanc, mais .app-nav-admin .app-nav-links a force un texte blanc
   (couleur des liens de la nav navy) → on remet du texte foncé, spécificité plus
   forte (3 classes), sinon les titres Prestation/Devis/Facture sont invisibles. */
.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; }
}

/* ── EN BAS : dock façon macOS — les « apps » de l'espace courant. ── */
.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;
  /* Signe TOUJOURS blanc sur la tuile colorée (choix Julien) — surclasse les classes
     nav-icon-mint/cyan/yellow qui passent le signe en foncé ailleurs. */
  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; }
/* Survol : SEULE la tuile pointée réagit (pas d'effet sur les voisines, choix de
   Julien). transform-origin: bottom → elle grandit vers le haut depuis le sol du
   dock et dépasse au-dessus du panneau (overflow: visible plus bas l'autorise). */
.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 → la tuile agrandie et l'étiquette dépassent au-dessus du
   panneau sans être coupées (un overflow auto/scroll rognerait aussi la verticale,
   par spec, et coupait l'icône). Les tuiles ne se compressent pas (flex: none). */
.super-dock .dock-app { flex: none; }
.super-dock { overflow: visible; }
body.has-super-dock { padding-bottom: 92px; }

/* Entrée : le dock monte UNE fois par session (classe .dock-animate posée par un
   script inline qui mémorise la 1re vue dans sessionStorage → pas de ré-animation
   à chaque navigation). Le panneau monte, les tuiles apparaissent en cascade. */
@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; }
}
/* Téléphone : les douze applications ne tiennent pas sur la largeur de l’écran
   (le dock mesure environ 725 px). Centré, il débordait des deux côtés et les
   applications des extrémités devenaient inatteignables. Il s’ancre donc aux
   bords de l’écran et défile horizontalement au doigt : toutes les icônes
   gardent leur taille tactile et redeviennent accessibles. */
@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; }
  /* L’animation d’entrée du dock centré recentrait la barre (translateX(-50%)) :
     variante sans recentrage pour le dock ancré aux bords. */
  .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; } }

/* ── Centre de pilotage (admin/dashboard) : mini-tendance + flux d'activité ── */
.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; }
