/* ─────────────────────────────────────────────────────────────
   ESPACE ISAT — LOGIN SCREEN
   Matches the dashboard's warm-cream + green glassmorphism.
   ───────────────────────────────────────────────────────────── */

.hidden { display: none !important; }

.login-wrap{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px;overflow-y:auto;overflow-x:hidden;
  /* Role accent palette — retinted by switchLoginRole() */
  --acc:#65910A; --acc-d:#4F7508; --acc-s:#A4C463;
  --acc-rgb:101,145,10;
  --acc-soft:rgba(101,145,10,.14);
  --acc-glow:rgba(101,145,10,.5);
  background:
    radial-gradient(900px 600px at 92% -10%, rgba(var(--acc-rgb),.16), transparent 60%),
    radial-gradient(700px 500px at 8% 110%, rgba(164,196,99,.22), transparent 55%),
    linear-gradient(160deg, #f6efde 0%, #fbf8ee 38%, #ecf3d4 100%);
  animation: loginFade .5s var(--ease, cubic-bezier(.22,1,.36,1)) both;
  transition: background .5s ease;
}
/* FORMATEUR = warm amber theme; ÉTUDIANT keeps the brand green above */
.login-wrap[data-role="formateur"]{
  --acc:#C9781A; --acc-d:#A15E0E; --acc-s:#E4A94E;
  --acc-rgb:201,120,26;
  --acc-soft:rgba(201,120,26,.15);
  --acc-glow:rgba(201,120,26,.5);
}
@keyframes loginFade { from{opacity:0} to{opacity:1} }

/* Re-triggered on every role switch so the change is unmissable */
.login-card.role-swap .login-form,
.login-card.role-swap .login-sub{ animation:roleSwap .45s var(--ease, cubic-bezier(.22,1,.36,1)) }
@keyframes roleSwap{
  0%{ opacity:.35; transform:translateY(6px) }
  100%{ opacity:1; transform:none }
}

/* Grainy texture overlay */
.login-wrap::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(32,32,48,.04) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode:multiply;
  opacity:.35;
}

/* Glowing blobs */
.login-blob{
  position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;
  animation:loginBlob 14s ease-in-out infinite;
}
.login-blob-1{ width:480px;height:480px;background:rgba(101,145,10,.35); top:-160px; left:-140px; animation-delay:0s; }
.login-blob-2{ width:520px;height:520px;background:rgba(164,196,99,.4); bottom:-180px; right:-160px; animation-delay:-7s; }
.login-blob-3{ width:340px;height:340px;background:rgba(245,221,170,.5); top:35%; right:18%; animation-delay:-3s; }
@keyframes loginBlob{
  0%,100%{ transform:translate(0,0) scale(1) }
  50%{ transform:translate(45px,30px) scale(1.12) }
}

.login-frame{
  position:relative;z-index:1;
  width:min(450px, 100%);
  margin:auto;   /* centers vertically when it fits, top-aligns + scrolls when it doesn't */
}

/* The card */
.login-card{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.85);
  border-radius:32px;
  padding:38px 36px;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 32px 80px -28px rgba(32,32,48,.25),
    0 8px 24px -12px rgba(32,32,48,.08);
  animation:cardRise .7s cubic-bezier(.16,1,.3,1) .1s backwards;
}
@keyframes cardRise{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

/* Back-to-site button */
.login-back{
  display:inline-flex;align-items:center;gap:7px;
  margin-bottom:20px;
  padding:8px 14px 8px 11px;border-radius:999px;
  background:rgba(var(--acc-rgb),.07);
  border:1px solid rgba(var(--acc-rgb),.18);
  color:var(--acc-d);font:700 12.5px 'Inter',system-ui;
  cursor:pointer;
  transition:transform .3s var(--ease),background .3s ease,box-shadow .3s ease,color .3s ease,border-color .3s ease;
}
.login-back:hover{
  background:rgba(var(--acc-rgb),.14);
  border-color:rgba(var(--acc-rgb),.32);
  transform:translateX(-2px);
  box-shadow:0 6px 14px -6px var(--acc-glow);
}
.login-back:active{ transform:translateX(-2px) scale(.97) }
.login-back-arrow{ font-size:15px;line-height:1;transition:transform .3s var(--ease) }
.login-back:hover .login-back-arrow{ transform:translateX(-4px) }

.login-brand{
  display:flex;align-items:center;gap:14px;
  padding-bottom:18px;margin-bottom:24px;
  position:relative;cursor:default;
}
/* soft gradient divider replaces the flat border */
.login-brand::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg, rgba(var(--acc-rgb),.4), rgba(32,32,48,.06) 55%, transparent);
  transform:scaleX(.55);transform-origin:left;
  transition:transform .5s var(--ease);
}
.login-brand:hover::after{ transform:scaleX(1) }

.login-mark{
  position:relative;flex-shrink:0;
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(145deg,#ffffff,#f2f6e6);
  border:1px solid rgba(var(--acc-rgb),.18);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 6px 16px -6px rgba(var(--acc-rgb),.35),
    0 3px 8px -4px rgba(32,32,48,.16);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  animation:markPop .6s var(--ease) .15s backwards;
}
@keyframes markPop{ from{opacity:0;transform:scale(.7) rotate(-8deg)} to{opacity:1;transform:none} }

.login-mark img{
  width:46px;height:46px;object-fit:contain;border-radius:10px;
  transition:transform .35s var(--ease);
}

/* glossy light sweep, triggered on hover */
.login-mark-shine{
  position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.8), transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.login-brand:hover .login-mark{
  transform:translateY(-3px) scale(1.06);
  border-color:rgba(var(--acc-rgb),.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 14px 28px -8px rgba(var(--acc-rgb),.5),
    0 6px 14px -6px rgba(32,32,48,.2);
}
.login-brand:hover .login-mark img{ transform:scale(1.05) rotate(-2deg) }
.login-brand:hover .login-mark-shine{ animation:markShine .85s var(--ease) }
@keyframes markShine{ from{left:-130%} to{left:135%} }

.login-brand-text{ animation:brandTextIn .6s var(--ease) .28s backwards }
@keyframes brandTextIn{ from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} }

.login-brand strong{
  display:flex;align-items:center;gap:7px;
  font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.1;
  background:linear-gradient(90deg,#202030 0%,#33334a 60%,var(--acc) 125%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.login-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:linear-gradient(145deg,var(--acc),var(--acc-d));
  color:#fff;font-size:9px;font-weight:900;line-height:1;
  box-shadow:0 2px 6px -1px var(--acc-glow);
  transition:transform .3s var(--ease), background .3s ease, box-shadow .3s ease;
}
.login-brand:hover .login-badge{ transform:scale(1.18) rotate(10deg) }

.login-brand-sub{
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:#6b6b78;font-family:'JetBrains Mono',monospace;
  letter-spacing:.06em;margin-top:4px;
}
.login-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--acc);box-shadow:0 0 0 0 rgba(var(--acc-rgb),.5);
  animation:dotPulse 2.2s ease-in-out infinite;
  transition:background .3s ease;
}
@keyframes dotPulse{
  0%{ box-shadow:0 0 0 0 rgba(var(--acc-rgb),.5) }
  70%{ box-shadow:0 0 0 7px rgba(var(--acc-rgb),0) }
  100%{ box-shadow:0 0 0 0 rgba(var(--acc-rgb),0) }
}

@media (prefers-reduced-motion: reduce){
  .login-mark,.login-brand-text,.login-dot,.foot-dot{ animation:none !important }
  .login-brand:hover .login-mark,
  .login-brand:hover .login-mark img,
  .login-brand:hover .login-badge{ transform:none }
  .login-brand:hover .login-mark-shine{ animation:none }
}

.login-title{
  font-size:28px;font-weight:800;letter-spacing:-.02em;color:#1c1c28;margin:0 0 6px;
}
.login-sub{
  font-size:14px;color:#6b6b78;margin-bottom:24px;line-height:1.5;
}

/* Role tabs */
.login-tabs{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:rgba(32,32,48,.05);border-radius:14px;padding:5px;margin-bottom:22px;
}
.login-tabs-indicator{
  position:absolute;top:5px;bottom:5px;width:calc(50% - 5px);
  background:#fff;border-radius:11px;
  box-shadow:0 4px 12px -4px rgba(32,32,48,.16);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  left:5px;pointer-events:none;
}
.login-tabs[data-role="formateur"] .login-tabs-indicator{
  transform:translateX(100%);
}
.login-tab{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 14px;border-radius:11px;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:700;color:#6b6b78;
  transition:color .25s ease;
}
.login-tab span{ font-size:15px }
.login-tab.on{ color:var(--acc-d) }
#forgotLink{ color:var(--acc-d); transition:color .3s ease }

/* Form fields */
.login-form{ display:flex;flex-direction:column;gap:14px }
.login-field label{
  display:block;font-size:11px;font-weight:700;color:#6b6b78;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;
}
.login-field input{
  width:100%;padding:13px 16px;font-family:inherit;font-size:14.5px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(32,32,48,.08);
  border-radius:12px;color:#1c1c28;
  transition:all .2s ease;
  outline:none;
}
.login-field input:focus{
  background:#fff;
  border-color:var(--acc);
  box-shadow:0 0 0 4px var(--acc-soft);
}
.login-field input::placeholder{ color:#9d9da8 }

/* Error pill */
.login-err{
  display:none;
  padding:11px 14px;border-radius:11px;
  background:rgba(220,68,55,.08);border:1px solid rgba(220,68,55,.3);
  color:#c0392b;font-size:13px;font-weight:600;
}
.login-err.show{ display:block; animation:errIn .3s ease both }
@keyframes errIn{ from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }

/* Submit button */
.login-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px;margin-top:6px;border-radius:13px;
  background:linear-gradient(135deg,var(--acc) 0%,var(--acc-d) 100%);
  color:#fff;font-family:inherit;font-size:14.5px;font-weight:700;
  border:none;cursor:pointer;
  box-shadow:0 12px 24px -8px var(--acc-glow);
  transition:background .35s ease, box-shadow .35s ease, transform .25s ease;
  position:relative;overflow:hidden;
}
.login-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 50%);
  pointer-events:none;
}
.login-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 16px 32px -8px rgba(var(--acc-rgb),.6);
}
.login-btn:active:not(:disabled){ transform:translateY(0) }
.login-btn:disabled{ opacity:.6;cursor:wait }
.login-btn-arrow{ transition:transform .25s ease }
.login-btn:hover:not(:disabled) .login-btn-arrow{ transform:translateX(4px) }

/* Footer */
.login-foot{
  position:relative;
  margin-top:26px;padding-top:20px;
  display:flex;flex-direction:column;gap:14px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* soft gradient divider that recolors with the role accent */
.login-foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--acc-rgb),.26) 25%, rgba(var(--acc-rgb),.26) 75%, transparent);
}
.foot-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}

/* live status pill */
.foot-status{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:999px;
  background:rgba(var(--acc-rgb),.08);
  border:1px solid rgba(var(--acc-rgb),.16);
  color:var(--acc-d);font-size:11.5px;font-weight:600;letter-spacing:.01em;
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.foot-dot{
  width:6px;height:6px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 0 rgba(var(--acc-rgb),.5);
  animation:dotPulse 2.2s ease-in-out infinite;
  transition:background .3s ease;
}

/* interactive website pill */
.login-foot a{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 13px;border-radius:999px;
  background:rgba(var(--acc-rgb),.08);
  border:1px solid rgba(var(--acc-rgb),.16);
  color:var(--acc-d);text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.01em;
  transition:transform .3s var(--ease),background .3s ease,box-shadow .3s ease,color .3s ease,border-color .3s ease;
}
.login-foot a:hover{
  background:linear-gradient(135deg,var(--acc),var(--acc-d));
  border-color:transparent;color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 18px -6px var(--acc-glow);
}
.foot-arrow{ font-size:11px;transition:transform .3s var(--ease) }
.login-foot a:hover .foot-arrow{ transform:translate(2px,-2px) }

/* copyright */
.foot-copy{
  text-align:center;
  font-size:11.5px;font-weight:500;color:#a5a5b0;letter-spacing:.01em;
}

/* Toast (used after login + other actions) */
.esp-toast{
  position:fixed;bottom:24px;right:24px;z-index:5000;
  padding:14px 20px;border-radius:14px;
  background:linear-gradient(135deg,#65910A,#4F7508);color:#fff;
  font-weight:600;font-size:14px;font-family:inherit;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.3);
  transform:translateX(120%);opacity:0;
  transition:all .4s cubic-bezier(.22,.61,.36,1);
  max-width:340px;pointer-events:none;
}
.esp-toast.show{ transform:translateX(0);opacity:1 }
.esp-toast.err{ background:linear-gradient(135deg,#dc4437,#a02f25) }

/* ── Responsive: tablets & phones ── */
@media (max-width:560px){
  /* let the card scroll on short screens instead of clipping */
  .login-wrap{
    align-items:flex-start;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:16px 14px 28px;
  }
  .login-blob{ display:none }              /* drop heavy blur on mobile (perf) */
  .login-frame{ width:100%;margin:auto }

  .login-card{ padding:26px 20px;border-radius:26px }
  .login-back{ margin-bottom:16px;padding:9px 14px;font-size:13px }

  .login-title{ font-size:23px }
  .login-sub{ font-size:13.5px;margin-bottom:20px }

  .login-mark{ width:48px;height:48px }
  .login-mark img{ width:42px;height:42px }
  .login-brand strong{ font-size:16px }

  .login-field input{ padding:14px 15px;font-size:16px }  /* 16px = no iOS zoom-on-focus */
  .login-btn{ padding:15px;font-size:15px }

  /* footer keeps its two-row layout, comfortably spaced */
  .login-foot{ gap:13px }
}

/* very small phones */
@media (max-width:380px){
  .login-card{ padding:22px 16px;border-radius:22px }
  .login-title{ font-size:21px }
  .login-brand{ gap:11px }
  .login-mark{ width:44px;height:44px }
  .login-mark img{ width:38px;height:38px }
  .login-brand strong{ font-size:15px }
  .login-tab{ padding:10px 6px;font-size:12.5px;gap:5px }
  .login-tab span{ font-size:14px }
  .foot-copy{ font-size:10px }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPACT TEACHER/STUDENT PROFILE CARD (replaces the giant illustration)
   ═══════════════════════════════════════════════════════════════════ */
.card.card-profile.compact{
  padding:22px 22px 20px;
  background:linear-gradient(155deg, #4a4a5d 0%, #2D2D45 60%, #1c1c28 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.card.card-profile.compact::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(280px 200px at 90% -20%, rgba(101,145,10,.35), transparent 60%),
    radial-gradient(220px 200px at -10% 110%, rgba(164,196,99,.22), transparent 55%);
}

.tp-header{
  position:relative;z-index:1;
  display:flex;gap:14px;align-items:center;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tp-avatar{
  position:relative;width:62px;height:62px;flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,#65910A,#4F7508);
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;
  font-size:22px;font-weight:800;color:#fff;
  box-shadow:0 8px 24px -6px rgba(101,145,10,.55), inset 0 1px 0 rgba(255,255,255,.25);
  letter-spacing:-.01em;
}
.tp-avatar-initials{ position:relative;z-index:2 }
.tp-avatar-ring,
.tp-avatar-ring-2{
  position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid rgba(101,145,10,.45);
  pointer-events:none;
  animation:tpRing 2.4s ease-in-out infinite;
}
.tp-avatar-ring-2{ animation-delay:1.2s }
@keyframes tpRing{
  0%{ transform:scale(1);opacity:.7 }
  100%{ transform:scale(1.45);opacity:0 }
}
.tp-presence{
  position:absolute;bottom:2px;right:2px;width:13px;height:13px;
  border-radius:50%;background:#A4C463;
  box-shadow:0 0 0 3px #2D2D45, 0 0 10px rgba(164,196,99,.8);
  z-index:3;
  animation:tpPresence 2s ease-in-out infinite;
}
@keyframes tpPresence{
  0%,100%{ box-shadow:0 0 0 3px #2D2D45, 0 0 10px rgba(164,196,99,.8) }
  50%{ box-shadow:0 0 0 3px #2D2D45, 0 0 16px rgba(164,196,99,1) }
}
.tp-info{ flex:1;min-width:0 }
.tp-name{
  font-size:16px;font-weight:800;letter-spacing:-.01em;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tp-role{
  font-size:12px;color:rgba(255,255,255,.6);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tp-badges{ display:flex;gap:6px;margin-top:8px;flex-wrap:wrap }
.tp-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:99px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
  font-size:10.5px;font-weight:700;color:rgba(255,255,255,.85);
  letter-spacing:.02em;
}
.tp-badge-class{
  background:rgba(101,145,10,.22);border-color:rgba(101,145,10,.4);color:#c8e87a;
}
.tp-dot{
  width:6px;height:6px;border-radius:50%;background:#A4C463;
  box-shadow:0 0 8px rgba(164,196,99,.9);
  animation:tpDot 1.6s ease-in-out infinite;
}
@keyframes tpDot{
  0%,100%{ opacity:1;transform:scale(1) }
  50%{ opacity:.6;transform:scale(1.3) }
}

.tp-mini-stats{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding-top:14px;
}
.tp-mini{ text-align:center;padding:6px 4px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
.tp-mini:hover{
  background:rgba(101,145,10,.10);border-color:rgba(101,145,10,.3);transform:translateY(-2px);
}
.tp-mini-n{
  font-family:'JetBrains Mono',monospace;
  font-size:22px;font-weight:800;color:#fff;line-height:1;
}
.tp-mini-l{
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-top:5px;font-weight:600;
}

/* Card-rise animation when tab changes */
@keyframes cardRise{
  from{ opacity:0;transform:translateY(14px) scale(.98) }
  to{ opacity:1;transform:none }
}

/* Pulse on the gauge center number when stat updates */
.gauge-n{ transition:transform .35s cubic-bezier(.16,1,.3,1) }
.gauge-n:hover{ transform:scale(1.06) }

/* Subtle hover lift for every card */
.card{ transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s }
.card:hover{ transform:translateY(-2px); box-shadow:var(--sh-card), 0 16px 32px -16px rgba(101,145,10,.18) }

/* Task hover */
.task{ transition:all .2s cubic-bezier(.16,1,.3,1); cursor:pointer }
.task:hover{ background:rgba(101,145,10,.06); transform:translateX(3px) }

/* Bar hover */
.bar{ transition:transform .25s ease, filter .25s ease }
.bar:hover{ transform:scaleY(1.06); filter:brightness(1.12) }

/* Nav pill smooth indicator */
.np{ transition:all .25s cubic-bezier(.16,1,.3,1) }
.np.on{ animation:npPop .35s cubic-bezier(.22,1,.36,1) }
@keyframes npPop{
  0%{ transform:scale(.92) }
  60%{ transform:scale(1.04) }
  100%{ transform:scale(1) }
}

/* ═══════════════════════════════════════════════════════════════════
   SAISIR NOTES — semester segmented control + selectors
   ═══════════════════════════════════════════════════════════════════ */
.saisir-bar{
  display:flex;gap:12px;flex-wrap:wrap;margin:18px 8px 14px;align-items:center;
}
.saisir-bar .seg{
  display:inline-flex;background:rgba(32,32,48,.05);border-radius:12px;padding:4px;gap:2px;
  border:1px solid rgba(32,32,48,.06);
}
.saisir-bar .seg button{
  border:none;background:none;padding:8px 18px;border-radius:9px;
  font-family:inherit;font-size:12.5px;font-weight:700;color:#6b6b78;
  cursor:pointer;transition:all .22s cubic-bezier(.22,1,.36,1);
  letter-spacing:.02em;
}
.saisir-bar .seg button:hover{ color:#1c1c28 }
.saisir-bar .seg button.on{
  background:#fff;color:#1c1c28;
  box-shadow:0 4px 12px -4px rgba(32,32,48,.18);
}
.saisir-bar .sel{
  padding:11px 16px;font-size:13px;font-weight:700;cursor:pointer;
  max-width:340px;text-overflow:ellipsis;overflow:hidden;
}
.saisir-empty{
  padding:36px;text-align:center;color:#9d9da8;font-style:italic;
  background:rgba(255,255,255,.5);border-radius:18px;
}

/* Matrix row fade-in on roster load */
.mx-row{ animation:mxRowIn .35s cubic-bezier(.16,1,.3,1) both }
@keyframes mxRowIn{ from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:none} }

/* Input focus glow */
.mx-input:focus{
  outline:none;border-color:#65910A;
  box-shadow:0 0 0 4px rgba(101,145,10,.18);
}

/* ═══════════════════════════════════════════════════════════════════
   MES CLASSES — interactive cards
   ═══════════════════════════════════════════════════════════════════ */
.class-card{
  position:relative;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .25s;
  border:1px solid rgba(255,255,255,.85);
}
.class-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg, rgba(101,145,10,.05) 0%, transparent 60%);
  opacity:0;transition:opacity .35s ease;
}
.class-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 36px 60px -22px rgba(101,145,10,.28),
    0 10px 24px -10px rgba(32,32,48,.14);
  border-color:rgba(101,145,10,.18);
}
.class-card:hover::after{ opacity:1 }
.class-card:active{ transform:translateY(-3px) scale(.99) }

.cc-badge{
  width:42px;height:42px;border-radius:12px;color:#fff;
  display:grid;place-items:center;font-weight:800;font-family:'JetBrains Mono',monospace;
  box-shadow:0 8px 18px -6px rgba(101,145,10,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.class-card:hover .cc-badge{ transform:scale(1.08) rotate(-4deg) }

.cc-mini{
  background:rgba(255,255,255,.55);border:1px solid rgba(32,32,48,.06);
  border-radius:14px;padding:12px;
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
.cc-mini-l{ font-size:11px;color:var(--ink3);font-weight:600 }
.cc-mini-n{ font-family:'Instrument Serif',serif;font-size:24px;color:var(--n);line-height:1;margin-top:4px }
.class-card:hover .cc-mini{ background:rgba(255,255,255,.8);border-color:rgba(101,145,10,.18) }

/* Récap row — clickable + hover */
.recap-row{
  padding:8px;margin:-8px;border-radius:10px;cursor:pointer;
  transition:background .25s ease, transform .2s ease;
}
.recap-row:hover{
  background:rgba(101,145,10,.06);transform:translateX(2px);
}

/* ═══════════════════════════════════════════════════════════════════
   STUDENT DASHBOARD — compact profile (same polish as teacher)
   ═══════════════════════════════════════════════════════════════════ */
.card.card-profile.student-compact{
  padding:22px 22px 20px;
  background:linear-gradient(155deg, #65910A 0%, #4F7508 100%);
  color:#fff;position:relative;overflow:hidden;
}
.card.card-profile.student-compact::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(280px 200px at 90% -20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(220px 200px at -10% 110%, rgba(164,196,99,.4), transparent 55%);
}
.sp-header{
  position:relative;z-index:1;
  display:flex;gap:14px;align-items:center;
  padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.18);
}
.sp-avatar{
  position:relative;width:62px;height:62px;flex-shrink:0;border-radius:50%;
  background:linear-gradient(135deg,#2D2D45,#1c1c28);
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:22px;font-weight:800;color:#fff;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
  letter-spacing:-.01em;
}
.sp-avatar::after,
.sp-avatar::before{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);pointer-events:none;
  animation:tpRing 2.4s ease-in-out infinite;
}
.sp-avatar::before{ animation-delay:1.2s }

.sp-info{ flex:1;min-width:0 }
.sp-name{ font-size:16px;font-weight:800;letter-spacing:-.01em;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.sp-class{ font-size:12px;color:rgba(255,255,255,.75);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.sp-badges{ display:flex;gap:6px;margin-top:8px;flex-wrap:wrap }
.sp-badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);
  font-size:10.5px;font-weight:700;color:#fff;letter-spacing:.02em;
}
.sp-mini-stats{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:14px;
}
.sp-mini{
  text-align:center;padding:6px 4px;border-radius:10px;
  background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.08);
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
.sp-mini:hover{
  background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.18);transform:translateY(-2px);
}
.sp-mini-n{ font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:800;color:#fff;line-height:1 }
.sp-mini-l{ font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:5px;font-weight:600 }

/* ═══════════════════════════════════════════════════════════════════
   MES COURS — empty state with animated illustration
   ═══════════════════════════════════════════════════════════════════ */
.empty-state-card{
  margin-top:24px;padding:48px 32px;border-radius:32px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 24px 50px -22px rgba(32,32,48,.16),
    0 6px 14px -8px rgba(32,32,48,.08);
  backdrop-filter:blur(8px);
  text-align:center;
  position:relative;overflow:hidden;
}
.empty-state-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(400px 250px at 90% -20%, rgba(101,145,10,.10), transparent 60%),
    radial-gradient(300px 200px at -5% 110%, rgba(164,196,99,.14), transparent 55%);
}
.es-illu{
  position:relative;z-index:1;display:flex;justify-content:center;margin-bottom:8px;
}
.es-illu svg{ overflow:visible }
.es-float-1{ animation:esFloat 5.5s ease-in-out infinite }
.es-float-2{ animation:esFloat 5.5s ease-in-out infinite -2s }
.es-float-3{ animation:esFloat 5.5s ease-in-out infinite -3.5s }
@keyframes esFloat{
  0%,100%{ transform:translateY(0) rotate(0) }
  50%{ transform:translateY(-8px) rotate(-2deg) }
}
.es-spark{ animation:esSpark 2.4s ease-in-out infinite }
@keyframes esSpark{
  0%,100%{ opacity:0;transform:scale(.5) }
  50%{ opacity:1;transform:scale(1.2) }
}
.es-title{
  position:relative;z-index:1;
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(28px,3vw,38px);font-weight:400;color:var(--n);
  letter-spacing:-.01em;margin:14px 0 8px;
}
.es-sub{
  position:relative;z-index:1;
  font-size:14.5px;color:var(--ink3);max-width:560px;margin:0 auto 32px;line-height:1.6;
}
.es-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;margin-bottom:28px;max-width:920px;margin-left:auto;margin-right:auto;
}
.es-card-min{
  display:flex;align-items:center;gap:12px;padding:14px;
  background:rgba(255,255,255,.7);border:1px solid rgba(32,32,48,.06);
  border-radius:14px;text-align:left;
  transition:all .25s cubic-bezier(.16,1,.3,1);
  animation:cardRise .5s cubic-bezier(.16,1,.3,1) both;
}
.es-card-min:hover{
  background:#fff;border-color:rgba(101,145,10,.22);
  transform:translateY(-2px);
  box-shadow:0 12px 24px -10px rgba(32,32,48,.18);
}
.es-card-ico{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(101,145,10,.18),rgba(101,145,10,.06));
  border:1px solid rgba(101,145,10,.2);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.es-card-body{ flex:1;min-width:0 }
.es-card-nom{ font-size:13.5px;font-weight:700;color:var(--n);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.es-card-meta{ font-size:11.5px;color:var(--ink3);margin-top:2px }
.es-foot{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding-top:18px;border-top:1px solid rgba(32,32,48,.06);
  flex-wrap:wrap;
}

/* ═══════════════════════════════════════════════════════════════════
   RÉSULTATS — filter tag buttons
   ═══════════════════════════════════════════════════════════════════ */
.tag-btn{
  background:rgba(32,32,48,.06);
  border:1px solid rgba(32,32,48,.06);
  color:var(--ink2);
  padding:7px 16px;border-radius:99px;
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  transition:all .22s cubic-bezier(.22,1,.36,1);letter-spacing:.02em;
}
.tag-btn:hover{ background:rgba(32,32,48,.10);color:var(--n) }
.tag-btn.on{
  background:#202030;color:#fff;border-color:#202030;
  box-shadow:0 6px 16px -6px rgba(32,32,48,.4);
}