/* ═══════════════════════════════════════════════════════════
   Service Audiovisuel UFR3S — UFR3S Pharmacie
   Aesthetic: Dark broadcast studio · Glass · Neon cyan+violet
   Font: Outfit (display) + Geist Mono (data)
═══════════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --bg:        #060810;
  --bg2:       #0b0f1a;
  --bg3:       #111827;
  --glass:     rgba(255,255,255,0.04);
  --glass2:    rgba(255,255,255,0.07);
  --border:    rgba(255,255,255,0.08);
  --border2:   rgba(255,255,255,0.12);

  --cyan:      #22d3ee;
  --cyan2:     #06b6d4;
  --violet:    #a78bfa;
  --violet2:   #7c3aed;
  --amber:     #fbbf24;
  --green:     #34d399;
  --red:       #f87171;
  --orange:    #fb923c;

  --text:      #e8edf8;
  --text2:     #8899bb;
  --text3:     #4a5a7a;

  --sidebar-w: 210px;
  --r:         12px;
  --r2:        18px;

  --font:      'Outfit', sans-serif;
  --mono:      'Geist Mono', monospace;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 17px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
button { font-family: inherit; }
input, textarea, select {
  font-family: var(--font);
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r);
  padding: .6rem .9rem;
  font-size: .88rem;
  outline: none;
  transition: border-color .2s, background .2s;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--cyan);
  background: rgba(34,211,238,.05);
}
select { cursor: pointer; }
textarea { resize: vertical; }
.hidden { display: none !important; }



/* ══════════════════════════════════════════════════════
   ORBES DE FOND
══════════════════════════════════════════════════════ */
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none; z-index: 0;
}
.o1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(34,211,238,.18) 0%, transparent 70%);
  top: -200px; left: -150px;
  animation: drift1 12s ease-in-out infinite alternate;
}
.o2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(167,139,250,.15) 0%, transparent 70%);
  bottom: -150px; right: -100px;
  animation: drift2 15s ease-in-out infinite alternate;
}
.o3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(251,191,36,.1) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation: drift3 20s ease-in-out infinite alternate;
}
@keyframes drift1 { from { transform: translate(0,0); } to { transform: translate(60px,40px); } }
@keyframes drift2 { from { transform: translate(0,0); } to { transform: translate(-40px,-60px); } }
@keyframes drift3 { from { transform: translate(-50%,-50%) scale(1); } to { transform: translate(-50%,-50%) scale(1.3); } }

/* Grille de fond */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Noise overlay */
.noise {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ══════════════════════════════════════════════════════
   LOGIN
══════════════════════════════════════════════════════ */
#login-screen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  overflow: hidden;
}

.login-box {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 2.2rem;
  animation: fadeUp .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Logo login */
.login-logo {
  display: flex; align-items: center; gap: 1.4rem;
}
.logo-ring {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              linear-gradient(135deg, var(--cyan), var(--violet)) border-box;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  animation: spin-ring 8s linear infinite;
}
@keyframes spin-ring {
  from { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
  50%  { box-shadow: 0 0 32px 4px rgba(34,211,238,.25); }
  to   { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}
.logo-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow: 0 0 20px rgba(34,211,238,.6);
}
.login-titles h1 {
  font-family: var(--font);
  font-size: 2.2rem; font-weight: 900; letter-spacing: -.03em;
  background: linear-gradient(135deg, #fff 30%, var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-titles p {
  color: var(--text2); font-size: .82rem; margin-top: .25rem;
  font-weight: 400; letter-spacing: .01em;
}

.login-who {
  font-size: .75rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--text3);
}

/* Cartes utilisateur */
.user-list {
  display: flex; flex-direction: column; gap: .85rem;
  width: min(400px, 90vw);
}

.ucard {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1.1rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1.1rem 1.4rem;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  animation: fadeUp .5s cubic-bezier(.16,1,.3,1) both;
}
.ucard:nth-child(1) { animation-delay: .1s; }
.ucard:nth-child(2) { animation-delay: .2s; }
.ucard:nth-child(3) { animation-delay: .3s; }
.ucard:hover {
  transform: translateX(6px);
  border-color: var(--border2);
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
.ucard:hover .ucard-bg { opacity: 1; }
.ucard:hover .ucard-arrow { opacity: 1; transform: translateX(0); }

.ucard-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(34,211,238,.06) 0%, transparent 60%);
  opacity: 0; transition: opacity .25s;
}
[data-u="Eric"]   .ucard-bg { background: linear-gradient(135deg, rgba(167,139,250,.06) 0%, transparent 60%); }
[data-u="Maxime"] .ucard-bg { background: linear-gradient(135deg, rgba(251,191,36,.06)  0%, transparent 60%); }

.ucard-av {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.2rem; flex-shrink: 0;
  position: relative; z-index: 1;
}
.c-cyan   { background: linear-gradient(135deg, var(--cyan2), #0e7490);   box-shadow: 0 4px 20px rgba(34,211,238,.3); color: #fff; }
.c-violet { background: linear-gradient(135deg, var(--violet), var(--violet2)); box-shadow: 0 4px 20px rgba(167,139,250,.3); color: #fff; }
.c-amber  { background: linear-gradient(135deg, var(--amber), #d97706);   box-shadow: 0 4px 20px rgba(251,191,36,.3); color: #fff; }

.ucard-txt { flex: 1; text-align: left; position: relative; z-index: 1; }
.ucard-name { display: block; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: #fff; }
.ucard-role { display: block; color: var(--text2); font-size: .78rem; margin-top: .15rem; }

.ucard-arrow {
  color: var(--text3); font-size: 1.1rem;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .2s, transform .2s;
  position: relative; z-index: 1;
}

.login-time {
  color: var(--text3); font-family: var(--mono); font-size: .75rem;
  letter-spacing: .05em;
}

/* ══════════════════════════════════════════════════════
   DASHBOARD LAYOUT
══════════════════════════════════════════════════════ */
#dashboard {
  display: flex; min-height: 100vh;
  position: relative;
}
.dash-orb {
  position: fixed; border-radius: 50%; pointer-events: none;
  filter: blur(100px); z-index: 0;
}
.da1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(34,211,238,.08) 0%, transparent 70%);
  top: -100px; left: 100px;
}
.da2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(167,139,250,.07) 0%, transparent 70%);
  bottom: -100px; right: 200px;
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: rgba(10,13,22,.85);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: fixed; left: 0; top: 0; bottom: 0;
  z-index: 20;
  display: flex; flex-direction: column;
  padding: 1.5rem 0;
}

.sb-brand {
  display: flex; align-items: center; gap: .7rem;
  padding: 0 1.4rem 1.4rem;
  border-bottom: 1px solid var(--border);
  font-weight: 800; font-size: .95rem; letter-spacing: .04em;
}
.sb-logo-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow: 0 0 12px rgba(34,211,238,.6);
  flex-shrink: 0;
}

.sb-menu {
  list-style: none; flex: 1; padding: 1rem 0;
  display: flex; flex-direction: column; gap: .1rem;
}

.sbtn {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; padding: .65rem 1.4rem;
  background: none; border: none;
  color: var(--text2); font-size: .88rem; font-weight: 500;
  text-align: left;
  border-left: 2px solid transparent;
  transition: all .18s;
  position: relative;
}
.sbtn:hover { color: var(--text); background: rgba(255,255,255,.04); }
.sbtn.active {
  color: #fff;
  border-left-color: var(--cyan);
  background: linear-gradient(90deg, rgba(34,211,238,.1) 0%, transparent 100%);
}
.sbtn.active .sbtn-ic { color: var(--cyan); }
.sbtn-ic {
  font-size: .9rem; width: 18px; text-align: center;
  flex-shrink: 0; color: var(--text3);
  transition: color .18s;
}

.sbadge {
  margin-left: auto;
  background: var(--cyan); color: var(--bg);
  font-size: .68rem; font-weight: 800;
  padding: .08rem .45rem; border-radius: 99px;
  min-width: 20px; text-align: center;
  font-family: var(--mono);
  display: none;
}
.sbadge:not(:empty) { display: inline-block; }
.sbadge.red { background: var(--red); }

/* User chip bottom */
.sb-userchip {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.2rem .4rem;
  border-top: 1px solid var(--border);
  background: none; border-bottom: none; border-left: none; border-right: none;
  color: var(--text); text-align: left; width: 100%;
  transition: background .18s;
}
.sb-userchip:hover { background: rgba(248,113,113,.05); }
.sb-userchip:hover .sb-out-icon { color: var(--red); }

.sb-av {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--cyan2), #0e7490);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .9rem; flex-shrink: 0; color: #fff;
}
.sb-uinfo { flex: 1; }
.sb-uinfo span { display: block; }
.sb-uinfo span:first-child { font-weight: 600; font-size: .88rem; }
.sb-uinfo span:last-child  { color: var(--text2); font-size: .72rem; }
.sb-out-icon { color: var(--text3); font-size: 1rem; transition: color .18s; }

/* ── MAIN ── */
.main {
  margin-left: var(--sidebar-w);
  flex: 1; display: flex; flex-direction: column;
  position: relative; z-index: 1;
}

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem 2rem;
  background: rgba(10,13,22,.7);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky; top: 0; z-index: 10;
}
.tb-l { display: flex; align-items: center; gap: .7rem; }
.tb-section {
  font-family: var(--font);
  font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
}
.tb-dot { color: var(--text3); }
.tb-date { color: var(--text2); font-size: .8rem; font-family: var(--mono); }

.tb-chip {
  display: flex; align-items: center; gap: .55rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 99px; padding: .35rem .9rem;
  font-size: .8rem; font-weight: 500;
}
.tc-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .4; box-shadow: none; } }

/* Sections */
.sec {
  padding: 1.8rem 2rem;
  animation: fadeIn .3s ease both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════
   COMPOSANTS GLASS
══════════════════════════════════════════════════════ */

/* Barre de section */
.sec-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
  margin-bottom: 1.2rem;
}
.sbar-search {
  display: flex; align-items: center; gap: .6rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .5rem .9rem;
  flex: 1; min-width: 200px;
}
.sbar-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.sbar-search input { background: none; border: none; padding: 0; width: 100%; }
.sbar-right { display: flex; gap: .7rem; }
.sbar-right select { width: auto; padding: .5rem .8rem; }

/* Bouton glass */
.gls-btn {
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text2); font-size: .82rem; font-weight: 500;
  padding: .5rem 1rem; border-radius: var(--r);
  transition: all .2s; white-space: nowrap;
}
.gls-btn:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(34,211,238,.06); }

/* Bouton primary */
.primary-btn {
  background: linear-gradient(135deg, var(--cyan2), #0e7490);
  color: #fff; font-weight: 700; font-size: .85rem;
  padding: .6rem 1.2rem; border: none; border-radius: var(--r);
  box-shadow: 0 4px 20px rgba(34,211,238,.25);
  transition: box-shadow .2s, transform .15s;
  white-space: nowrap;
}
.primary-btn:hover { box-shadow: 0 6px 28px rgba(34,211,238,.4); transform: translateY(-1px); }

/* Bouton ghost sm */
.ghost-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2); font-size: .8rem;
  padding: .4rem .8rem; border-radius: var(--r);
  transition: all .18s;
}
.ghost-btn:hover { border-color: var(--text2); color: var(--text); }

/* Status bar planning */
.pstatus {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .03em;
  padding: .65rem 1rem; border-radius: var(--r);
  margin-bottom: 1.2rem;
}
.pstatus.info    { background: rgba(34,211,238,.06);  border: 1px solid rgba(34,211,238,.2);  color: var(--cyan); }
.pstatus.success { background: rgba(52,211,153,.06);  border: 1px solid rgba(52,211,153,.2);  color: var(--green); }
.pstatus.error   { background: rgba(248,113,113,.06); border: 1px solid rgba(248,113,113,.2); color: var(--red); }

/* ── TABLEAU ── */
.tbl-wrap {
  overflow-x: auto;
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(10,13,22,.6);
  backdrop-filter: blur(10px);
  margin-bottom: 1.2rem;
}
.tbl {
  width: 100%; border-collapse: collapse;
  font-size: .85rem;
}
.tbl thead {
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--border);
}
.tbl th {
  padding: .8rem 1.1rem;
  font-family: var(--mono); font-weight: 500;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text3); text-align: left; white-space: nowrap;
}
.tbl td {
  padding: .75rem 1.1rem;
  border-top: 1px solid rgba(255,255,255,.04);
  vertical-align: middle; color: var(--text2);
}
.tbl td:first-child { font-family: var(--mono); font-size: .8rem; color: var(--text3); }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: rgba(255,255,255,.03); }
.tbl tbody tr:hover td { color: var(--text); }

/* Ligne AV en surbrillance */
.tbl .av-row td { color: var(--text); }
.tbl .av-row td:nth-child(4) { color: var(--cyan); font-weight: 600; }
.tbl .av-row { background: rgba(34,211,238,.04); }

/* Badge AV */
.av-tag {
  display: inline-block;
  background: rgba(34,211,238,.15); color: var(--cyan);
  font-family: var(--mono); font-size: .65rem; font-weight: 700;
  padding: .1rem .45rem; border-radius: 6px;
  border: 1px solid rgba(34,211,238,.25);
  margin-left: .4rem; vertical-align: middle;
}

/* Strip salles AV */
.av-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  font-size: .75rem; color: var(--text3); margin-top: .4rem;
  font-family: var(--mono);
}
#av-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.room-pill {
  background: rgba(34,211,238,.08); color: var(--cyan);
  border: 1px solid rgba(34,211,238,.2);
  padding: .15rem .55rem; border-radius: 99px;
  font-size: .7rem; font-weight: 600; font-family: var(--mono);
}

/* ══════════════════════════════════════════════════════
   MESSAGES
══════════════════════════════════════════════════════ */
.compose-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1.3rem;
  margin-bottom: 1.4rem;
  backdrop-filter: blur(20px);
  transition: border-color .2s;
}
.compose-card:focus-within { border-color: rgba(34,211,238,.35); }

.compose-header {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: .9rem;
}
.from-badge {
  background: linear-gradient(135deg, var(--cyan2), #0e7490);
  color: #fff; font-weight: 800; font-size: .75rem;
  padding: .2rem .7rem; border-radius: 99px;
  letter-spacing: .04em;
}
.compose-hint { color: var(--text3); font-size: .78rem; }

#msg-input { margin-bottom: .9rem; }

.send-btn {
  background: linear-gradient(135deg, rgba(34,211,238,.15), rgba(167,139,250,.15));
  border: 1px solid rgba(34,211,238,.3);
  color: var(--cyan); font-weight: 700; font-size: .85rem;
  padding: .55rem 1.3rem; border-radius: var(--r);
  transition: all .2s; float: right;
}
.send-btn:hover {
  background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(167,139,250,.25));
  box-shadow: 0 4px 20px rgba(34,211,238,.2);
}

/* Liste messages */
.msgs-list { display: flex; flex-direction: column; gap: .8rem; clear: both; }

.msg-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1rem 1.2rem;
  animation: fadeIn .25s ease both;
  transition: border-color .2s;
}
.msg-card:hover { border-color: var(--border2); }
.msg-card.own { border-left: 2px solid var(--cyan); }

.msg-top {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .6rem;
}
.msg-author {
  font-weight: 700; font-size: .88rem;
  display: flex; align-items: center; gap: .5rem;
}
.msg-dot { width: 7px; height: 7px; border-radius: 50%; }
.msg-date { color: var(--text3); font-size: .75rem; font-family: var(--mono); margin-left: auto; }
.msg-del {
  background: none; border: none;
  color: var(--text3); font-size: 1rem; padding: .1rem .3rem;
  border-radius: 6px; transition: color .15s, background .15s;
}
.msg-del:hover { color: var(--red); background: rgba(248,113,113,.1); }
.msg-body { font-size: .88rem; color: var(--text2); line-height: 1.6; }

/* ══════════════════════════════════════════════════════
   CHECKLIST
══════════════════════════════════════════════════════ */
.cl-topbar {
  display: flex; align-items: center; gap: 1.2rem;
  flex-wrap: wrap; margin-bottom: 1.4rem;
}
.cl-date { color: var(--text2); font-size: .82rem; font-family: var(--mono); }

.cl-prog-wrap { display: flex; align-items: center; gap: .7rem; margin-left: auto; }
.cl-prog-track {
  width: 120px; height: 4px; border-radius: 99px;
  background: var(--bg3);
  overflow: hidden;
}
.cl-prog-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transition: width .4s cubic-bezier(.34,1.56,.64,1);
  width: 0%;
}
#cl-prog-txt { font-family: var(--mono); font-size: .75rem; color: var(--text3); }

.cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem; margin-bottom: 1.2rem;
}

.cl-item {
  display: flex; align-items: center; gap: .85rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .9rem 1.1rem;
  transition: border-color .18s, background .18s, transform .15s;
  user-select: none;
}
.cl-item:hover { border-color: var(--border2); transform: translateY(-1px); }
.cl-item.done {
  background: rgba(52,211,153,.05);
  border-color: rgba(52,211,153,.25);
}
.cl-item.done .cl-label { text-decoration: line-through; color: var(--text3); }

.cl-box {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
  border: 1.5px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  transition: all .18s; font-size: .8rem;
}
.cl-item.done .cl-box {
  background: var(--green); border-color: var(--green);
  box-shadow: 0 0 12px rgba(52,211,153,.4);
}

.cl-label { flex: 1; font-size: .85rem; font-weight: 500; }

.cl-del {
  background: none; border: none;
  color: transparent; font-size: .85rem;
  padding: .15rem .3rem; border-radius: 5px;
  transition: color .15s;
}
.cl-item:hover .cl-del { color: var(--text3); }
.cl-del:hover { color: var(--red) !important; }

.cl-add {
  display: flex; gap: .7rem; align-items: center;
}
.cl-add input { flex: 1; }
.plus-btn {
  width: 40px; height: 40px; border-radius: var(--r);
  background: var(--glass); border: 1px solid var(--border);
  color: var(--cyan); font-size: 1.3rem;
  flex-shrink: 0;
  transition: all .18s;
}
.plus-btn:hover {
  background: rgba(34,211,238,.1); border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(34,211,238,.2);
}

/* ══════════════════════════════════════════════════════
   INCIDENTS
══════════════════════════════════════════════════════ */
.inc-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1.3rem;
  margin-bottom: 1.4rem;
  backdrop-filter: blur(20px);
}
.inc-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .85rem; margin-bottom: 1rem;
}
.field label {
  display: block;
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text3); margin-bottom: .4rem;
}
.inc-foot {
  display: flex; align-items: center; justify-content: space-between;
}
.inc-tech-lbl { color: var(--text2); font-size: .82rem; }
.inc-tech-lbl strong { color: var(--text); }

/* Bouton delete table */
.tbl-del {
  background: none; border: none;
  color: var(--text3); padding: .25rem .4rem;
  border-radius: 6px; transition: all .15s; font-size: .85rem;
}
.tbl-del:hover { color: var(--red); background: rgba(248,113,113,.1); }

/* ══════════════════════════════════════════════════════
   ALERTES
══════════════════════════════════════════════════════ */
.alert-bar {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.4rem;
}
.alert-bar select { width: auto; flex-shrink: 0; }
.alert-bar input  { flex: 1; min-width: 180px; }

.alertes-list { display: flex; flex-direction: column; gap: .75rem; }

.alert-card {
  display: flex; align-items: flex-start; gap: 1rem;
  border-radius: var(--r2); padding: 1rem 1.2rem;
  border: 1px solid transparent;
  animation: fadeIn .25s ease both;
  backdrop-filter: blur(10px);
  transition: transform .15s;
}
.alert-card:hover { transform: translateX(4px); }
.alert-card.panne   { background: rgba(248,113,113,.07); border-color: rgba(248,113,113,.2); }
.alert-card.verif   { background: rgba(251,146,60,.07);  border-color: rgba(251,146,60,.2); }
.alert-card.urgence { background: rgba(251,191,36,.07);  border-color: rgba(251,191,36,.2); }
.alert-card.info    { background: rgba(34,211,238,.07);  border-color: rgba(34,211,238,.2); }

.alert-emoji { font-size: 1.2rem; flex-shrink: 0; line-height: 1.4; }
.alert-body  { flex: 1; }
.alert-txt   { font-size: .88rem; margin-bottom: .3rem; }
.alert-meta  { font-size: .75rem; color: var(--text3); font-family: var(--mono); }
.alert-del {
  background: none; border: none;
  color: var(--text3); padding: .2rem .4rem; border-radius: 6px;
  transition: all .15s; font-size: .9rem;
}
.alert-del:hover { color: var(--red); background: rgba(248,113,113,.1); }

/* ══════════════════════════════════════════════════════
   NOTES
══════════════════════════════════════════════════════ */
.notes-card {
  max-width: 760px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 1.3rem;
  backdrop-filter: blur(20px);
  transition: border-color .2s;
}
.notes-card:focus-within { border-color: rgba(167,139,250,.35); }
.notes-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
  font-weight: 600; font-size: .9rem;
}
#notes-ta { min-height: 360px; line-height: 1.75; font-size: .88rem; }
.notes-ok {
  display: block; margin-top: .7rem;
  color: var(--green); font-family: var(--mono); font-size: .78rem;
  animation: fadeIn .2s ease both;
}

/* ══════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════ */
.empty {
  text-align: center; padding: 3rem 1rem;
  color: var(--text3); font-size: .85rem;
  font-family: var(--mono);
}
.empty-icon { font-size: 2rem; margin-bottom: .7rem; opacity: .4; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE MOBILE
   S'active uniquement sous 768px — la version PC
   reste strictement identique au-dessus.
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Layout général ── */
  :root { --sidebar-w: 0px; }

  #dashboard { flex-direction: column; }

  /* ── Sidebar → barre de nav en BAS (style app mobile) ── */
  .sidebar {
    width: 100%; min-height: unset; height: 64px;
    position: fixed; left: 0; bottom: 0; top: auto;
    border-right: none; border-top: 1px solid var(--border);
    flex-direction: row; align-items: center;
    padding: 0; z-index: 50;
    background: rgba(8,11,20,.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  /* Masquer logo et user chip en mobile */
  .sb-brand, .sb-userchip { display: none; }

  /* Menu horizontal */
  .sb-menu {
    flex-direction: row; padding: 0;
    width: 100%; gap: 0;
    justify-content: space-around;
  }
  .sb-menu li { flex: 1; }

  .sbtn {
    flex-direction: column; justify-content: center; align-items: center;
    gap: .2rem; padding: .5rem .2rem;
    border-left: none; border-top: 2px solid transparent;
    width: 100%; font-size: .6rem; font-weight: 600;
    letter-spacing: .03em;
  }
  .sbtn span:last-child {
    display: block;
    font-size: .58rem; color: var(--text3);
  }
  .sbtn.active {
    border-top-color: var(--cyan);
    background: rgba(34,211,238,.07);
    color: var(--cyan);
  }
  .sbtn.active span:last-child { color: var(--cyan); }
  .sbtn-ic { font-size: 1.1rem; width: auto; }

  /* Badge sur mobile */
  .sbadge {
    position: absolute; top: 6px; right: calc(50% - 18px);
    font-size: .55rem; padding: .05rem .3rem; min-width: 14px;
  }
  .sb-menu li { position: relative; }

  /* ── Contenu principal ── */
  .main {
    margin-left: 0;
    padding-bottom: 72px; /* espace pour la nav bar */
  }

  /* ── Topbar ── */
  .topbar { padding: .75rem 1rem; }
  .tb-section { font-size: .95rem; }
  .tb-date { display: none; } /* trop long sur mobile */
  .tb-chip { font-size: .75rem; padding: .25rem .7rem; }

  /* ── Sections ── */
  .sec { padding: 1rem; }

  /* ── Barre de recherche planning ── */
  .sec-bar { flex-direction: column; align-items: stretch; gap: .6rem; }
  .sbar-search { width: 100%; }
  .sbar-right { display: flex; gap: .5rem; }
  .sbar-right select { flex: 1; }
  .gls-btn { flex-shrink: 0; }

  /* ── Filtres salle : scroll horizontal ── */
  .plan-filters { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .filter-btns {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; gap: .4rem;
    padding-bottom: .3rem; width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-btns::-webkit-scrollbar { display: none; }
  .fbtn { flex-shrink: 0; font-size: .75rem; padding: .4rem .9rem; }

  /* ── Tableau planning → cartes mobile ── */
  .tbl-wrap { border-radius: var(--r); border: none; background: none; }
  .tbl thead { display: none; } /* masquer les en-têtes */
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tbody tr {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-bottom: .65rem;
    padding: .85rem 1rem;
    position: relative;
  }
  .tbl tbody tr:hover { background: var(--glass2); }
  .tbl td {
    border: none; padding: .15rem 0;
    font-size: .85rem;
  }
  /* Afficher des labels avant chaque cellule */
  .tbl td:nth-child(1)::before { content: "📅 "; }
  .tbl td:nth-child(2)::before { content: "🕐 "; }
  .tbl td:nth-child(3)::before { content: "🕑 "; }
  .tbl td:nth-child(4)::before { content: "📍 "; font-weight: 600; }
  .tbl td:nth-child(5) {
    font-weight: 600; font-size: .92rem;
    color: var(--text); margin-bottom: .3rem;
    order: -1; /* nom du cours en premier */
  }
  .tbl td:nth-child(5)::before { content: ""; }
  /* Ligne AV en surbrillance sur mobile */
  .tbl .av-row { border-color: rgba(34,211,238,.3); background: rgba(34,211,238,.05); }

  /* Tableau incidents → cartes */
  #inc-body tr { display: flex; flex-direction: column; }
  #inc-body td:nth-child(1)::before { content: "📅 "; color: var(--text3); }
  #inc-body td:nth-child(2)::before { content: "📍 "; }
  #inc-body td:nth-child(3)::before { content: "⚠️ "; }
  #inc-body td:nth-child(4)::before { content: "🔧 "; }
  #inc-body td:nth-child(5)::before { content: "👤 "; }
  #inc-body td:nth-child(6)::before { content: "✅ "; }

  /* ── Formulaires ── */
  .inc-fields { grid-template-columns: 1fr; gap: .7rem; }
  .inc-foot { flex-direction: column; gap: .7rem; align-items: stretch; }
  .inc-foot .primary-btn { width: 100%; justify-content: center; }

  /* ── Checklist ── */
  .cl-topbar { flex-wrap: wrap; gap: .6rem; }
  .cl-prog-wrap { margin-left: 0; }
  .cl-grid { grid-template-columns: 1fr; }
  .cl-add { gap: .5rem; }
  .plus-btn { width: 48px; height: 48px; font-size: 1.4rem; }

  /* ── Alertes ── */
  .alert-bar { flex-direction: column; gap: .6rem; }
  .alert-bar select, .alert-bar input { width: 100%; }
  .alert-bar .primary-btn { width: 100%; }

  /* ── Messages ── */
  .compose-card { padding: 1rem; }
  .send-btn { width: 100%; justify-content: center; float: none; margin-top: .5rem; }

  /* ── Notes ── */
  .notes-card { max-width: 100%; }
  #notes-ta { min-height: 260px; }
  .notes-top { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .notes-top .ghost-btn { width: 100%; }

  /* ── Login ── */
  .login-box { padding: 1.5rem 1rem; gap: 1.8rem; }
  .login-logo { flex-direction: column; text-align: center; gap: .8rem; }
  .login-titles h1 { font-size: 1.8rem; }
  .user-list { width: 100%; }
  .ucard { padding: 1rem 1.2rem; }

  /* ── Textes plus grands pour les doigts ── */
  input, textarea, select { font-size: 1rem; padding: .7rem 1rem; }
  .primary-btn, .gls-btn, .ghost-btn { font-size: .9rem; padding: .65rem 1.1rem; }
  .fbtn { touch-action: manipulation; }
  .cl-item { padding: 1rem 1.1rem; min-height: 52px; }
  .cl-box { width: 26px; height: 26px; font-size: .9rem; }
  .msg-del, .tbl-del, .alert-del { padding: .5rem; font-size: 1rem; }
}

/* ════════════════════════════════════════════
   FILTRES PLANNING
════════════════════════════════════════════ */
.plan-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  margin-bottom: 1.1rem;
}
.filter-label {
  font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text3);
  white-space: nowrap;
}
.filter-btns {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.fbtn {
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text2); font-size: .78rem; font-weight: 500;
  padding: .35rem .85rem; border-radius: 99px;
  transition: all .18s; white-space: nowrap;
}
.fbtn:hover { border-color: var(--cyan); color: var(--cyan); }
.fbtn.active {
  background: rgba(34,211,238,.15);
  border-color: var(--cyan); color: var(--cyan);
  box-shadow: 0 0 12px rgba(34,211,238,.15);
}

/* Ligne passée (grisée) */
.tbl .past-row td { opacity: .35; }
.tbl .past-row { text-decoration: line-through; }

/* Cours en cours maintenant */
.tbl .now-row { background: rgba(52,211,153,.06) !important; }
.tbl .now-row td { color: var(--text) !important; }
.now-tag {
  background: rgba(52,211,153,.2) !important;
  color: var(--green) !important;
  border-color: rgba(52,211,153,.4) !important;
  animation: pulse 2s ease-in-out infinite;
}

/* ════════════════════════════════════════════════
   MODE CLAIR — s'active avec data-theme="light"
════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:     #f0f2f8;
  --bg2:    #ffffff;
  --bg3:    #e8ecf5;
  --glass:  rgba(255,255,255,0.7);
  --glass2: rgba(255,255,255,0.9);
  --border: rgba(0,0,0,0.08);
  --border2:rgba(0,0,0,0.14);
  --text:   #0f1628;
  --text2:  #3a4a6a;
  --text3:  #8899bb;
}
[data-theme="light"] .sidebar {
  background: rgba(240,242,248,.92);
}
[data-theme="light"] .topbar {
  background: rgba(240,242,248,.85);
}
[data-theme="light"] .orb { filter: blur(80px) brightness(1.2); }
[data-theme="light"] .dash-orb { filter: blur(100px) brightness(1.3); }
[data-theme="light"] .tbl { color: var(--text2); }
[data-theme="light"] .ucard { background: rgba(255,255,255,.8); }
[data-theme="light"] #login-screen { background: #e8ecf6; }

/* Bouton thème */
.theme-toggle {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: .3rem .6rem; font-size: 1rem;
  transition: all .2s; margin-right: .5rem;
}
.theme-toggle:hover { border-color: var(--cyan); transform: scale(1.1); }

/* ════════════════════════════════════════════════
   MENTIONS
════════════════════════════════════════════════ */
.compose-wrap { position: relative; margin-bottom: .9rem; }
.compose-wrap textarea { width: 100%; margin-bottom: 0; }

.mention-popup {
  position: absolute; bottom: calc(100% + 4px); left: 0;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  overflow: hidden;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  min-width: 160px;
}
.mention-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem 1rem; font-size: .88rem; font-weight: 500;
  transition: background .15s;
}
.mention-item:hover, .mention-item.active {
  background: rgba(34,211,238,.1); color: var(--cyan);
}
.mention-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* Chip mention dans le texte */
.mention-chip {
  font-weight: 700; border-radius: 6px;
  padding: .05rem .35rem; font-size: .88em;
}

/* Bannière mention non lue */
.mention-banner {
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.25);
  color: var(--amber); font-size: .78rem; font-weight: 600;
  padding: .35rem .8rem; border-radius: 8px;
  margin-bottom: .6rem;
}

/* Message non lu */
.msg-card.unread {
  border-color: rgba(34,211,238,.25);
  background: rgba(34,211,238,.03);
}
.msg-card.mentioned {
  border-color: rgba(251,191,36,.35);
  background: rgba(251,191,36,.04);
}

/* Accusé de lecture */
.msg-footer {
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.read-receipt {
  font-size: .72rem; color: var(--green);
  font-family: var(--mono);
}
.read-receipt.unread-r { color: var(--text3); }

/* ════════════════════════════════════════════════
   STATUT INCIDENTS
════════════════════════════════════════════════ */
.status-sel {
  width: auto; padding: .3rem .6rem;
  font-size: .78rem; font-weight: 700;
  border-radius: 99px; border-width: 1px;
  font-family: var(--mono);
  cursor: pointer;
}