:root{
  --bg:#f7fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:rgba(15,23,42,.10);
  --shadow:0 8px 24px rgba(15,23,42,.08);

  --brand:#0ea5a4;
  --brand-dark:#0b8c8b;
  --brand-soft:rgba(14,165,164,.12);

  --radius:14px;
  --radius-lg:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1200px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:180px}
.brand-logo{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--brand);
  color:#fff;
  box-shadow:var(--shadow);
}
.brand-name{font-weight:900;letter-spacing:.2px}

.topbar-actions{min-width:170px;display:flex;justify-content:flex-end}

/* Buttons */
.btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font-weight:900;
  border-radius:12px;
  padding:9px 12px;
  cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:#fff}
.btn-primary{
  background:var(--brand);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 18px rgba(14,165,164,.25);
}
.btn-primary:hover{background:var(--brand-dark)}
.btn-plus{font-weight:900;margin-right:2px}

/* Page */
.page{
  max-width:1200px;
  margin:0 auto;
  padding:18px 16px 36px 16px;
}
.view{display:none}
.view.is-active{display:block}

/* Home Hero */
.hero{
  text-align:center;
  padding:32px 10px 18px 10px;
}
.hero-logo{
  width:56px;height:56px;border-radius:16px;
  background:var(--brand);
  color:#fff;
  display:grid;place-items:center;
  margin:0 auto 14px auto;
  box-shadow:var(--shadow);
}
.hero h1{
  margin:0;
  font-size:34px;
  letter-spacing:-0.4px;
}
.hero-sub{
  margin:10px auto 0 auto;
  color:var(--muted);
  max-width:760px;
  line-height:1.35;
  font-size:13px;
}

/* Menu cards */
.menu-grid{
  margin:18px auto 0 auto;
  max-width:860px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
@media (max-width: 900px){ .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width: 600px){ .menu-grid{grid-template-columns:1fr;} }

.menu-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:14px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.menu-card:hover{border-color:rgba(14,165,164,.25)}
.menu-card:active{transform:translateY(1px)}
.menu-ico{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  color:#fff;
  font-size:18px;
}
.menu-title{font-weight:950}
.menu-sub{color:var(--muted);font-size:12px}
.menu-arrow{color:var(--muted);font-weight:900}

/* Page head */
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin:14px 0 12px 0;
}
.page-head h2{margin:0;font-size:22px}
.page-sub{margin:6px 0 0 0;color:var(--muted);font-size:12px}
.head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Stats cards */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
@media (max-width: 900px){ .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.stat-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:12px 12px;
  text-align:center;
}
.stat-val{font-weight:950;font-size:18px}
.stat-lab{color:var(--muted);font-size:12px;margin-top:3px}

/* Topo list */
.topo-list{margin-top:14px;display:grid;gap:12px}
.sector{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.sector-head{
  padding:12px 14px;
  background:#fbfdff;
  border-bottom:1px solid var(--line);
  font-weight:950;
  font-size:12px;
  color:rgba(15,23,42,.85);
  text-transform:lowercase;
}
.voie-row{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.voie-left{display:flex;align-items:center;gap:12px}
.color-dot{
  width:16px;height:16px;border-radius:6px;
  border:1px solid rgba(15,23,42,.12);
}
.voie-name{font-weight:900;font-size:13px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.badge-lite{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(2,6,23,.04);
  color:rgba(15,23,42,.75);
  border:1px solid rgba(15,23,42,.08);
  font-weight:800;
}
.badge-lite.ok{
  background:rgba(14,165,164,.12);
  color:var(--brand-dark);
  border-color:rgba(14,165,164,.25);
}
.voie-actions{display:flex;gap:8px}
.icon-btn{
  width:34px;height:34px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  color:rgba(15,23,42,.65);
}
.icon-btn:hover{color:rgba(15,23,42,.95);border-color:rgba(14,165,164,.25)}
.icon-btn.danger:hover{border-color:rgba(239,68,68,.25);color:rgba(239,68,68,.9)}

/* Soft cards */
.card-soft{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:14px;
  color:var(--muted);
  font-weight:700;
}

/* badges row */
.badge-row{display:flex;gap:10px;flex-wrap:wrap}
.badge{
  border:1px solid rgba(14,165,164,.25);
  background:rgba(14,165,164,.10);
  color:var(--brand-dark);
  font-weight:900;
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
}
.badge:hover{background:rgba(14,165,164,.14)}

/* student list */
.student-list{display:grid;gap:10px}
.student-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:var(--text);
}
.student-name{font-weight:900}
.student-sub{font-size:12px;color:var(--muted);margin-top:2px}
.student-actions{display:flex;gap:8px;flex-wrap:wrap}
.student-btn{
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
  color:var(--text);
}
.student-btn:hover{border-color:rgba(14,165,164,.25)}

/* misc */
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.muted-sm{font-size:12px;color:var(--muted)}

/* ===== Login modal ===== */
.modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-backdrop.is-open{display:flex}
.modal-card{
  width:min(520px, 100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  color:var(--text);
}
.modal-head{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px 14px;
  border-bottom:1px solid var(--line);
}
.modal-logo{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--brand);
  color:#fff;
}
.modal-title{font-weight:950}
.modal-sub{font-size:12px;color:var(--muted);margin-top:2px}
.modal-body{padding:14px;display:grid;gap:12px}
.field{display:grid;gap:6px}
.field span{font-size:12px;color:var(--muted);font-weight:900}
.field input{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  outline:none;
  background:#fff;
}
.field input:focus{
  border-color:rgba(14,165,164,.35);
  box-shadow:0 0 0 4px rgba(14,165,164,.14);
}
.check{display:flex;gap:10px;align-items:center}
.hint{font-size:12px;color:var(--muted)}
/* ===== Defis ===== */
.btn-danger{
  background:#ef476f;
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 18px rgba(239,71,111,.22);
}
.btn-danger:hover{background:#e23d65}
.btn-full{width:100%}

.tabs{
  margin-top:12px;
  display:flex;
  gap:6px;
  padding:6px;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(15,23,42,.07);
}

.tabs::-webkit-scrollbar{
  display:none;
}

.tab{
  border:1px solid transparent;
  background:transparent;
  padding:10px 14px;
  border-radius:14px;
  font-weight:900;
  color:#64748b;
  cursor:pointer;
  white-space:nowrap;
  flex:0 0 auto;
  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.tab:hover{
  background:rgba(15,23,42,.04);
  color:#0f172a;
}

.tab.is-active{
  background:linear-gradient(180deg, #ffffff, #f8fafc);
  border-color:rgba(91,75,255,.16);
  color:#1e293b;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 8px 20px rgba(91,75,255,.10);
}

.defis-panel{display:none; margin-top:12px;}
.defis-panel.is-active{display:block;}

.defis-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:6px;
  max-width:860px;
}
@media (max-width: 900px){ .defis-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width: 600px){ .defis-cards{grid-template-columns:1fr;} }

.defi-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.defi-topbar{
  height:5px;
  background:linear-gradient(90deg, #3b82f6, #8b5cf6);
}
.defi-body{padding:12px}
.defi-title{font-weight:950; font-size:13px}
.defi-cat{
  margin-top:4px;
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(2,6,23,.04);
  color:rgba(15,23,42,.75);
}
.defi-foot{
  padding:10px 12px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.small-pill{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  font-size:12px;
  color:var(--text);
}
.small-pill:hover{border-color:rgba(14,165,164,.25)}

/* defis stats icons */
.stat-ico{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  color:#fff;font-weight:900;
  margin:0 auto 6px auto;
}

/* modal close in header */
.modal-head{
  justify-content:space-between;
}
.modal-head .icon-btn{
  width:34px;height:34px;
}

/* stars block */
.stars-block{
  border:1px solid rgba(15,23,42,.08);
  background:rgba(2,6,23,.02);
  border-radius:14px;
  padding:12px;
  display:grid;
  gap:10px;
}
.stars-title{
  font-weight:950;
  color:rgba(15,23,42,.80);
  font-size:12px;
}
.stars-input{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  outline:none;
  background:#fff;
}
.stars-input:focus{
  border-color:rgba(239,71,111,.35);
  box-shadow:0 0 0 4px rgba(239,71,111,.12);
}
/* ===== Session bar ===== */
.session-bar{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}
.session-title{font-weight:950}
.session-sub{color:var(--muted);font-size:12px;margin-top:4px;max-width:720px}
.session-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.session-metrics{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(2,6,23,.02);
  font-weight:950;
  font-size:12px;
  color:rgba(15,23,42,.75);
}
.pill-ok{
  background:rgba(14,165,164,.12);
  color:var(--brand-dark);
  border-color:rgba(14,165,164,.25);
}
.pill-warn{
  background:rgba(245,158,11,.12);
  color:#b45309;
  border-color:rgba(245,158,11,.25);
}

/* list header */
.list-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.list-title{font-weight:950;color:var(--text)}
.list-hint{font-size:12px;color:var(--muted);font-weight:800}

/* student item presence/absence */
.student-item.is-absent{
  opacity:.55;
  filter:saturate(.7);
}
.abs-badge{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(239,68,68,.18);
  background:rgba(239,68,68,.08);
  color:rgba(239,68,68,.90);
  margin-left:8px;
}

/* ===== Drawer ===== */
.drawer-backdrop{
  position:fixed; inset:0; z-index:120;
  background:rgba(15,23,42,.35);
  display:none;
  justify-content:flex-end;
}
.drawer-backdrop.is-open{display:flex}
.drawer{
  width:min(420px, 92vw);
  height:100%;
  background:#fff;
  border-left:1px solid var(--line);
  box-shadow:0 14px 40px rgba(15,23,42,.18);
  display:flex;
  flex-direction:column;
}
.drawer-head{
  padding:14px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.drawer-title{font-weight:950}
.drawer-sub{font-size:12px;color:var(--muted);margin-top:3px}

.drawer-tabs{
  display:flex;
  gap:6px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none;
}

.drawer-tabs::-webkit-scrollbar{
  display:none;
}

.dtab{
  border:1px solid transparent;
  background:transparent;
  padding:10px 14px;
  border-radius:14px;
  font-weight:950;
  color:#64748b;
  cursor:pointer;
  white-space:nowrap;
  flex:0 0 auto;
  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.dtab:hover{
  background:rgba(15,23,42,.04);
  color:#0f172a;
}

.dtab.is-active{
  background:linear-gradient(180deg, #ffffff, #f8fafc);
  border-color:rgba(91,75,255,.16);
  color:#1e293b;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 8px 20px rgba(91,75,255,.10);
}
.drawer-panel{display:none; padding:14px; overflow:auto}
.drawer-panel.is-active{display:block}

.drawer-cta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}

/* mini list in drawer */
.mini-list{display:grid;gap:10px}
.mini-row{
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  padding:10px 10px;
  background:#fff;
}
.mini-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mini-title{font-weight:950;font-size:13px}
.mini-sub{font-size:12px;color:var(--muted);margin-top:4px}
.tag{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:950;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(2,6,23,.02);
}
.tag.ok{background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.22); color:rgba(22,163,74,.95)}
.tag.ko{background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.18); color:rgba(239,68,68,.95)}

/* history */
.history{display:grid;gap:10px;margin-top:10px}
.hist-block{
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.hist-head{
  padding:10px 12px;
  background:#fbfdff;
  border-bottom:1px solid rgba(15,23,42,.08);
  font-weight:950;
  font-size:12px;
}
.hist-body{padding:10px 12px; display:grid; gap:8px}

/* add voie modal widgets */
.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.toggle-lab{font-size:12px;color:var(--muted);font-weight:950}
.seg{display:flex;gap:8px}
.seg-btn{
  width:44px;height:38px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  cursor:pointer;
  font-weight:950;
}
.seg-btn.is-active{
  border-color:rgba(239,71,111,.25);
  box-shadow:0 0 0 4px rgba(239,71,111,.10);
}
/* Toggle Absences ON */
.btn-abs-on{
  background: rgba(245, 158, 11, .16) !important; /* amber soft */
  border-color: rgba(245, 158, 11, .45) !important;
  color: #b45309 !important;
  font-weight: 900;
}
/* Liseret "listview" topo (secteurs/voies) */
.topo-list{
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255,255,255,.65);
}

/* Petite séparation douce entre rows */
.topo-list .voie-row{
  border-radius: 14px;
}
.topo-list .voie-row + .voie-row{
  margin-top: 8px;
}
/* Pastilles cotation par "niveau" */
.badge-lite.grade-3{ background: rgba(34,197,94,.14);  color:#16a34a; border-color: rgba(34,197,94,.35); }
.badge-lite.grade-4{ background: rgba(249,115,22,.14); color:#ea580c; border-color: rgba(249,115,22,.35); }
.badge-lite.grade-5{ background: rgba(59,130,246,.14);  color:#2563eb; border-color: rgba(59,130,246,.35); }
.badge-lite.grade-6{ background: rgba(139,92,246,.14); color:#7c3aed; border-color: rgba(139,92,246,.35); }
.badge-lite.grade-7{ background: rgba(239,68,68,.14);  color:#dc2626; border-color: rgba(239,68,68,.35); }
.badge-lite.grade-8{ background: rgba(17,24,39,.14);   color:#111827; border-color: rgba(17,24,39,.35); }

//* =========================
   MODALE VOIE — UI MODERNE
   ========================= */
.modal-backdrop{
  background: rgba(15,23,42,.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-card{
  width: min(720px, 100%);
  max-height: calc(100vh - 24px);
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 26px 80px rgba(15,23,42,.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-head{
  padding: 14px 16px;
  background:
    radial-gradient(900px 170px at 0% 0%, rgba(14,165,164,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  border-bottom: 1px solid rgba(15,23,42,.10);
}

.modal-title{
  font-size: 15px;
  font-weight: 950;
  letter-spacing: .2px;
}

.modal-sub{
  font-size: 12px;
  color: rgba(100,116,139,.95);
  margin-top: 2px;
}

.modal-body{
  padding: 16px;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* ✅ grille 2 colonnes (1 sur mobile) */
.modal-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 680px){
  .modal-grid{ grid-template-columns: 1fr; }
}

/* Champs : label + inputs/select/textarea cohérents */
.field span{
  font-size: 12px;
  font-weight: 950;
  color: rgba(15,23,42,.72);
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.96);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(14,165,164,.45);
  box-shadow: 0 0 0 4px rgba(14,165,164,.14);
}

/* Select chevron propre */
.field select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.field textarea{
  resize: vertical;
  min-height: 92px;
}

/* ✅ Étend certains champs sur 2 colonnes */
.field.is-wide{ grid-column: 1 / -1; }

/* Footer sticky */
.modal-foot{
  grid-column: 1 / -1;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(15,23,42,.10);
  padding: 12px 16px;
  display:flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Boutons */
.modal-foot .btn{
  border-radius: 14px;
  padding: 10px 12px;
}
.modal-foot .btn-primary{
  background: var(--brand);
  border-color: transparent;
  color:#fff;
  box-shadow: 0 10px 22px rgba(14,165,164,.28);
}
.modal-foot .btn-primary:hover{ background: var(--brand-dark); }

/* Close button un peu plus “soft” */
.modal-head .icon-btn{
  background: rgba(2,6,23,.02);
  border-color: rgba(15,23,42,.10);
}
/* ===== Pills stats & Permis ===== */
.meta-line{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:4px;
}
.meta-mini{ font-size:12px; color:var(--muted); font-weight:800; }

.pill-lite{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:950;
  font-size:11px;
  color:rgba(15,23,42,.78);
}
.pill-ok{ background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.25); color:rgba(22,163,74,.95); }
.pill-warn{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.25); color:#b45309; }
.pill-ko{ background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.18); color:rgba(239,68,68,.95); }

.btn-permis{
  border:1px solid rgba(245,158,11,.35);
  background:rgba(245,158,11,.10);
  color:#b45309;
  font-weight:950;
  border-radius:12px;
  padding:7px 10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-permis:hover{ background:rgba(245,158,11,.14); }
.chev{
  width:28px;height:28px;border-radius:10px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  display:grid;place-items:center;
  color:rgba(15,23,42,.55);
}

/* ===== Modal Permis ===== */
.permis-modal{ width:min(520px, 100%); }

.permis-card{
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.permis-card--ok{ background:rgba(34,197,94,.06); border-color:rgba(34,197,94,.18); }
.permis-card--ko{ background:rgba(239,68,68,.06); border-color:rgba(239,68,68,.16); }

.permis-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.permis-left{ display:flex; align-items:center; gap:10px; }
.permis-ico{
  width:34px;height:34px;border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  display:grid;place-items:center;
  background:#fff;
}
.permis-title{ font-weight:950; font-size:13px; }
.permis-date{ font-size:12px; color:var(--muted); margin-top:2px; }
.permis-badge{
  font-size:12px;
  font-weight:950;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
}

.permis-seg{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.permis-seg-btn{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  border-radius:12px;
  padding:9px 10px;
  font-weight:950;
  cursor:pointer;
  color:rgba(15,23,42,.80);
}
.permis-seg-btn.is-active{
  border-color:rgba(14,165,164,.35);
  box-shadow:0 0 0 4px rgba(14,165,164,.14);
}
/* ====== Student list (Base44-ish) ====== */
.student-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 14px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  background:#fff;
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
  margin-bottom:12px;
}

.student-item:hover{
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
}

.student-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:240px;
  flex:1;
}

.student-avatar{
  width:38px;height:38px;
  border-radius:999px;
  display:grid;place-items:center;
  font-weight:950;
  font-size:12px;
  color:#fff;
  background: linear-gradient(135deg, rgba(91,75,255,1), rgba(124,108,255,1));
  flex:0 0 auto;
}

.student-main{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.student-name{
  font-weight:950;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.student-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.student-metrics{
  font-size:12px;
  color:rgba(17,24,39,.60);
  font-weight:800;
}

/* Pills (plus proches Base44) */
.pill-lite{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:950;
  font-size:11px;
  line-height:1;
}

.pill-ok{ background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.25); color:rgba(22,163,74,.95); }
.pill-warn{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.25); color:#b45309; }
.pill-ko{ background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.18); color:rgba(239,68,68,.95); }

/* Right actions */
.student-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

/* Bouton Permis : plus "app" */
.btn-permis{
  border:1px solid rgba(245,158,11,.35);
  background:rgba(245,158,11,.10);
  color:#b45309;
  font-weight:950;
  border-radius:12px;
  padding:7px 10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-permis:hover{ background:rgba(245,158,11,.14); }

/* Ouvrir : bouton neutre */
.btn-open{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:rgba(15,23,42,.85);
  font-weight:950;
  border-radius:12px;
  padding:7px 10px;
  cursor:pointer;
}
.btn-open:hover{ background:rgba(15,23,42,.04); }

/* Chevron */
.chev{
  width:32px;height:32px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  display:grid;place-items:center;
  color:rgba(15,23,42,.45);
}

/* Absent : nuance */
.student-item.is-absent{
  opacity:.78;
}
.abs-badge{
  margin-left:8px;
  font-size:11px;
  font-weight:950;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.20);
  color:rgba(239,68,68,.95);
}
/* =========================================
   MODALE AJOUT VOIE (v2) — blocs & UX
   ========================================= */

.mini-context{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(2,6,23,.02);
  border-radius:14px;
}

.radio-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:680px){
  .radio-cards{ grid-template-columns:1fr; }
}
.radio-card{
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  border-radius:16px;
  padding:12px;
  text-align:left;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  display:grid;
  grid-template-columns:40px 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:2px;
}
.radio-card:hover{ border-color: rgba(14,165,164,.28); }
.radio-card.is-active{
  border-color: rgba(14,165,164,.55);
  box-shadow: 0 0 0 4px rgba(14,165,164,.14), 0 12px 26px rgba(15,23,42,.08);
}
.rc-ico{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(14,165,164,.10);
  border:1px solid rgba(14,165,164,.18);
  font-size:18px;
  grid-row: 1 / span 2;
}
.rc-title{ font-weight:950; }
.rc-sub{ font-size:12px; color: var(--muted); font-weight:800; }

.seg-wide{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.seg-wide-btn{
  flex:1;
  min-width:90px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  font-weight:950;
  cursor:pointer;
}
.seg-wide-btn:hover{ background: rgba(2,6,23,.03); }
.seg-wide-btn.is-active{
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 0 0 4px rgba(245,158,11,.14);
}

.assureur-eval{
  border:1px solid rgba(15,23,42,.08);
  background:rgba(2,6,23,.02);
  border-radius:14px;
  padding:12px;
  display:grid;
  gap:10px;
}
.stars{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.star{
  width:44px;height:40px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  cursor:pointer;
  font-size:16px;
}
.star.is-active{
  border-color: rgba(236,72,153,.35);
  box-shadow: 0 0 0 4px rgba(236,72,153,.12);
}
.stars-label{
  margin-left:6px;
  font-size:12px;
  font-weight:950;
  color: rgba(15,23,42,.70);
}
#assureurComment{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  outline:none;
}
#assureurComment:focus{
  border-color: rgba(236,72,153,.40);
  box-shadow: 0 0 0 4px rgba(236,72,153,.12);
}

/* Certification switch */
.cert-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  background:rgba(2,6,23,.02);
}
.cert-title{ font-weight:950; }
.cert-sub{ font-size:12px; color:var(--muted); font-weight:800; margin-top:2px; }

.switch{ position:relative; display:inline-block; width:52px; height:32px; flex:0 0 auto; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; inset:0;
  background:rgba(15,23,42,.18);
  border-radius:999px;
  transition:.15s;
}
.slider:before{
  content:"";
  position:absolute;
  height:24px; width:24px;
  left:4px; top:4px;
  background:white;
  border-radius:999px;
  box-shadow: 0 8px 18px rgba(15,23,42,.14);
  transition:.15s;
}
.switch input:checked + .slider{
  background: rgba(34,197,94,.35);
}
.switch input:checked + .slider:before{
  transform: translateX(20px);
}

.cert-pwd{
  margin-top:10px;
  display:grid;
  gap:8px;
}
#certPwdInput{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  outline:none;
}
#certPwdInput:focus{
  border-color: rgba(34,197,94,.45);
  box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}
/* =========================
   LISTVIEW VOIES (style card)
   ========================= */
.voie-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:#fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  cursor:pointer;
  margin:10px 0;
}
.voie-item:hover{ border-color: rgba(14,165,164,.30); }
.voie-item .voie-left{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  font-size:18px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
  flex:0 0 auto;
}
.voie-item .voie-left.ok{
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
}
.voie-item .voie-left.ko{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.10);
}

.voie-main{ flex:1; min-width:0; }
.voie-title{
  font-weight:950;
  font-size:14px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.voie-sub{
  margin-top:4px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color: var(--muted);
  font-weight:800;
  font-size:12px;
}
.voie-sub .dot{ opacity:.6; }

.voie-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
  font-weight:900;
  font-size:12px;
  color: rgba(15,23,42,.75);
}

.voie-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.cert-ico{
  width:30px;height:30px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
  font-size:14px;
}
.cert-ico.on{
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
}
.cert-ico.off{
  border-color: rgba(148,163,184,.35);
  background: rgba(148,163,184,.10);
}

.voie-item .voie-actions{
  width:100%;
  display:none;
  margin-top:10px;
}
.voie-item.is-open .voie-actions{ display:flex; }
.voie-actions .btn-danger{
  margin-left:auto;
  padding:10px 12px;
  border-radius:14px;
  font-weight:950;
}
/* =========================
   LISTVIEW VOIES (style card) — SCOPÉ SUR .voie-item
   ========================= */
.voie-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:#fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  cursor:pointer;
  margin:10px 0;
}
.voie-item:hover{ border-color: rgba(14,165,164,.30); }

.voie-item .voie-left{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  font-size:18px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
  flex:0 0 auto;
}
.voie-item .voie-left.ok{
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
}
.voie-item .voie-left.ko{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.10);
}

.voie-item .voie-main{ flex:1; min-width:0; }
.voie-item .voie-title{
  font-weight:950;
  font-size:14px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.voie-item .voie-sub{
  margin-top:4px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color: var(--muted);
  font-weight:800;
  font-size:12px;
}
.voie-item .voie-sub .dot{ opacity:.6; }

.voie-item .voie-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
  font-weight:900;
  font-size:12px;
  color: rgba(15,23,42,.75);
}

.voie-item .voie-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.voie-item .cert-ico{
  width:30px;height:30px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
  font-size:14px;
}
.voie-item .cert-ico.on{
  border-color: rgba(34,197,94,.30);
  background: rgba(34,197,94,.10);
}
.voie-item .cert-ico.off{
  border-color: rgba(148,163,184,.35);
  background: rgba(148,163,184,.10);
}

.voie-item .voie-actions{
  width:100%;
  display:none;
  margin-top:10px;
}
.voie-item.is-open .voie-actions{ display:flex; }
.voie-item .voie-actions .btn-danger{
  margin-left:auto;
  padding:10px 12px;
  border-radius:14px;
  font-weight:950;
}
/* Permis modal buttons */
.permis-seg-btn { border: 1px solid rgba(17,24,39,.12); }
.permis-seg-btn.is-active { color: #fff; border-color: transparent; }

.permis-seg-btn.permis-ko.is-active   { background: #ef4444; } /* rouge */
.permis-seg-btn.permis-warn.is-active { background: #f59e0b; } /* orange */
.permis-seg-btn.permis-ok.is-active   { background: #22c55e; } /* vert */
/* Badges Permis (modale) */
#permisBadgeGrimper, #permisBadgeAssurer {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  color: #fff;
}

.badge-ko   { background: #ef4444; } /* rouge */
.badge-warn { background: #f59e0b; } /* orange */
.badge-ok   { background: #22c55e; } /* vert */
.modal-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.modal-logo img {
  height: 28px;
  width: auto;
  transition: opacity .2s ease;
}

.modal-logo:hover img {
  opacity: 0.8;
}
.topbar-menu-btn{
  flex:0 0 auto;
  padding:8px 10px;
  font-size:13px;
  font-weight:900;
}

.topbar-menu-panel{
  position:sticky;
  top:56px;
  z-index:49;
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:10px 16px 12px 16px;
}

.topbar-menu-nav{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  gap:8px;
}

.topbar-menu-nav .nav-link{
  justify-content:flex-start;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  border-radius:14px;
  padding:12px 14px;
}
#topbarUserBtn{
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:8px 10px;
  font-size:12px;
}

#syncBtn{
  padding:8px 10px;
  font-size:12px;
}

.topbar-actions{
  min-width:auto;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}
.student-list{
  display:grid;
  gap:10px;
  width:100%;
}

.student-item{
  width:100%;
  min-width:0;
  align-items:flex-start;
}

.student-left{
  min-width:0;
  flex:1 1 auto;
}

.student-main{
  min-width:0;
  width:100%;
}

.student-name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.student-meta{
  min-width:0;
}

.student-metrics{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width: 700px){
  .topbar-inner{
    padding:10px;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
  }

  .brand{
    min-width:0;
    gap:8px;
    flex:1 1 auto;
  }

  .brand-name{
    font-size:14px;
  }

  .topbar-menu-btn{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .topbar-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .topbar-actions .btn,
  #topbarUserBtn,
  #syncBtn{
    width:100%;
    max-width:none;
    min-width:0;
    text-align:center;
    justify-content:center;
  }

  .student-item{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px;
  }

  .student-actions{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }

  .btn-permis,
  .btn-open,
  .student-btn{
    max-width:100%;
  }

  .list-head{
    flex-direction:column;
    align-items:flex-start;
  }
}

.menu-popup{
  position:fixed;
  inset:0;
  z-index:200;
}

.menu-popup[hidden]{
  display:none !important;
}

.menu-popup-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .22s ease;
}

.menu-popup.is-open .menu-popup-backdrop{
  opacity:1;
}

.menu-popup-dialog{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:280px;
  max-width:88vw;
  background:#fff;
  border-right:1px solid rgba(15,23,42,.08);
  box-shadow:0 20px 60px rgba(15,23,42,.22);
  padding:14px 12px 18px 12px;
  transform:translateX(-100%);
  transition:transform .24s ease;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.menu-popup.is-open .menu-popup-dialog{
  transform:translateX(0);
}

.menu-popup-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 4px 10px 4px;
  border-bottom:1px solid rgba(15,23,42,.08);
  margin-bottom:4px;
}

.menu-popup-title{
  font-size:15px;
  font-weight:900;
  color:#0f172a;
}

.menu-popup-close{
  border:none;
  background:#f8fafc;
  color:#0f172a;
  width:36px;
  height:36px;
  border-radius:12px;
  font-size:16px;
  cursor:pointer;
}

.topbar-menu-nav{
  display:grid;
  gap:8px;
}


body.menu-open{
  overflow:hidden;
}
.params-grid{
  display:grid;
  gap:12px;
}

.params-card{
  padding:16px;
}

.params-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.params-card-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.params-warning{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(245, 158, 11, .10);
  border:1px solid rgba(245, 158, 11, .25);
  color:#92400e;
  font-size:13px;
  line-height:1.4;
}

@media (max-width: 700px){
  .params-card{
    padding:14px;
  }

  .params-card-actions .btn{
    width:100%;
    justify-content:center;
  }
}
.modal-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.voie-details{
  display:grid;
  gap:6px;
  margin-bottom:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
  font-size:13px;
  line-height:1.4;
}
.voie-pill-bloc{
  background:#f97316;
  color:white;
  font-weight:700;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
}
.voie-pill-corde{
  background:#0ea5a4;
  color:white;
  font-weight:700;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
}
/* =========================
   PREMIUM HEADER + MENU
   ========================= */

.topbar{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 24px rgba(15,23,42,.05);
}

.topbar-inner{
  min-height: 68px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:180px;
  text-decoration:none;
  color:inherit;
}

.brand-logo{
  width:44px;
  height:44px;
  border-radius:14px;
  background: linear-gradient(135deg, #ffffff, #f4f7fb);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 24px rgba(91,75,255,.14);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 auto;
}

.brand-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.brand-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.brand-name{
  font-weight:950;
  font-size:15px;
  letter-spacing:.2px;
  line-height:1.1;
}

.brand-tagline{
  margin-top:3px;
  font-size:11px;
  font-weight:800;
  color:#64748b;
  white-space:nowrap;
}

.menu-popup-dialog{
  width:320px;
  max-width:90vw;
  background:
    radial-gradient(700px 220px at top left, rgba(91,75,255,.16), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-right:1px solid rgba(15,23,42,.08);
  box-shadow: 0 24px 60px rgba(15,23,42,.22);
  padding:16px 14px 20px 14px;
}

.menu-popup-head{
  padding:4px 4px 14px 4px;
  margin-bottom:8px;
}

.menu-popup-title{
  font-size:16px;
  font-weight:950;
  letter-spacing:.2px;
}

.menu-popup-close{
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}

.premium-nav{
  gap:10px;
}

.premium-nav .nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.premium-nav .nav-link:hover{
  transform: translateY(-1px);
  border-color: rgba(91,75,255,.22);
  box-shadow: 0 14px 28px rgba(91,75,255,.10);
  background:#fff;
}

.premium-nav .nav-link.is-active{
  background: linear-gradient(135deg, rgba(91,75,255,.12), rgba(14,165,164,.10));
  border-color: rgba(91,75,255,.22);
}

.nav-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:22px;
  flex:0 0 auto;
  border:1px solid rgba(15,23,42,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.nav-icon-home{
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
}

.nav-icon-topo{
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
}

.nav-icon-suivi{
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.nav-icon-defis{
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.nav-icon-params{
  background: linear-gradient(135deg, #fee2e2, #fecaca);
}

.nav-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.nav-label{
  font-weight:950;
  font-size:14px;
  color:#0f172a;
  line-height:1.1;
}

.nav-desc{
  margin-top:4px;
  font-size:12px;
  color:#64748b;
  font-weight:700;
  line-height:1.25;
}

@media (max-width:700px){
  .brand-tagline{
    display:none;
  }

  .brand-logo{
    width:40px;
    height:40px;
  }

  .menu-popup-dialog{
    width:300px;
  }
}
@media (max-width: 700px){
  .modal-backdrop{
    align-items: flex-end;
    padding: 8px;
  }

  .modal-card{
    width: 100%;
    max-height: calc(100vh - 8px);
    border-radius: 18px 18px 0 0;
  }

  .modal-head{
    padding: 12px 14px;
  }

  .modal-body{
    padding: 12px;
  }

  .modal-foot{
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
  }

  .modal-foot .btn{
    flex: 1 1 140px;
  }
}
.topbar-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
}

#topbarUserBtn,
#syncBtn{
  min-width:0;
}
@media (max-width:700px){
  .tabs{
    padding:5px;
    border-radius:16px;
    gap:5px;
  }

  .tab{
    padding:9px 12px;
    font-size:13px;
    border-radius:12px;
  }

  .drawer-tabs{
    gap:5px;
    padding:10px 12px;
  }

  .dtab{
    padding:9px 12px;
    font-size:13px;
    border-radius:12px;
  }
}
/* =========================================================
   STATS PREMIUM iOS-FIRST
   ========================================================= */

#eleveStatsGrid{
  display:grid;
  gap:14px;
  margin-top:12px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}

.stats-premium-card{
  position:relative;
  overflow:hidden;
  min-width:0;
  border-radius:24px;
  padding:16px;
  background:
    radial-gradient(500px 160px at top left, rgba(91,75,255,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.90));
  border:1px solid rgba(255,255,255,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 16px 34px rgba(15,23,42,.08);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
}

.stats-premium-card::after{
  content:"";
  position:absolute;
  inset:auto -30% -55% auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(91,75,255,.08), transparent 68%);
  pointer-events:none;
}

.stats-premium-card--wide{
  grid-column:1 / -1;
}

.stats-premium-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.stats-premium-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,247,251,.98));
  border:1px solid rgba(15,23,42,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 10px 20px rgba(91,75,255,.10);
  flex:0 0 auto;
}

.stats-premium-headcopy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.stats-premium-title{
  font-size:15px;
  line-height:1.15;
  font-weight:950;
  color:#0f172a;
  letter-spacing:-.01em;
}

.stats-premium-sub{
  font-size:12px;
  line-height:1.3;
  color:#64748b;
  font-weight:700;
}

.stats-premium-body{
  display:grid;
  gap:8px;
}

.stats-line{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:8px 0;
}

.stats-line + .stats-line{
  border-top:1px solid rgba(15,23,42,.06);
}

.stats-line-label{
  min-width:0;
  font-size:13px;
  line-height:1.35;
  color:#475569;
  font-weight:700;
}

.stats-line-value{
  flex:0 0 auto;
  text-align:right;
  font-size:13px;
  line-height:1.35;
  color:#0f172a;
  font-weight:950;
}

.stats-line.is-success .stats-line-value{
  color:#16a34a;
}

.stats-line.is-warn .stats-line-value{
  color:#b45309;
}

.stats-line.is-info .stats-line-value{
  color:#2563eb;
}

.stats-separator{
  height:1px;
  margin:4px 0;
  background:linear-gradient(90deg, rgba(15,23,42,.04), rgba(15,23,42,.10), rgba(15,23,42,.04));
}

.stats-group-title{
  margin-top:2px;
  font-size:12px;
  font-weight:950;
  color:#1e293b;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.stats-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:4px;
}

.stats-chip{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:900;
  color:#334155;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}

.stats-chip.is-success{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.24);
  color:#15803d;
}

.stats-chip.is-warn{
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.24);
  color:#b45309;
}

.stats-chip.is-info{
  background:rgba(59,130,246,.10);
  border-color:rgba(59,130,246,.22);
  color:#2563eb;
}

.stats-analysis-box{
  margin-top:4px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(15,23,42,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76);
}

.stats-analysis-label{
  font-size:12px;
  font-weight:950;
  color:#475569;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.stats-analysis-text{
  margin-top:6px;
  font-size:14px;
  line-height:1.45;
  color:#0f172a;
  font-weight:800;
}

/* tablette */
@media (min-width:701px) and (max-width:1100px){
  #eleveStatsGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* téléphone */
@media (max-width:700px){
  #eleveStatsGrid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .stats-premium-card{
    border-radius:22px;
    padding:14px;
  }

  .stats-premium-head{
    gap:10px;
    margin-bottom:12px;
  }

  .stats-premium-icon{
    width:42px;
    height:42px;
    border-radius:15px;
    font-size:20px;
  }

  .stats-premium-title{
    font-size:14px;
  }

  .stats-premium-sub{
    font-size:11px;
  }

  .stats-line{
    padding:7px 0;
  }

  .stats-line-label,
  .stats-line-value{
    font-size:12px;
  }

  .stats-analysis-text{
    font-size:13px;
  }
}
.check-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
  margin-top:8px;
}

.check-class{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(17,24,39,.12);
  border-radius:12px;
  background:#fff;
}
.sync-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.sync-modal.is-open {
  display: block;
}

.sync-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sync-modal__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 560px);
  max-height: 88vh;
  overflow: auto;
  transform: translate(-50%, -50%);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 25px 60px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.65);
  padding: 18px;
}

.sync-modal__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.sync-modal__headings h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}

.sync-modal__headings p {
  margin: 4px 0 0;
  color: #475569;
  font-size: 14px;
}

.sync-orb {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}

.sync-orb__ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 3px solid rgba(99, 102, 241, 0.16);
  border-top-color: rgba(99, 102, 241, 0.95);
  animation: syncSpin 1.05s linear infinite;
}

.sync-orb__core {
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(241,245,249,0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  font-size: 22px;
  color: #4f46e5;
}

@keyframes syncSpin {
  to { transform: rotate(360deg); }
}

.sync-progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
  margin-bottom: 16px;
}

.sync-progress__bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #60a5fa, #6366f1, #8b5cf6);
  transition: width .35s ease;
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.25);
}

.sync-steps {
  display: grid;
  gap: 10px;
}

.sync-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 18px;
  background: rgba(255,255,255,0.56);
  border: 1px solid rgba(148, 163, 184, 0.14);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.sync-step__ico {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(99, 102, 241, 0.10);
  font-size: 18px;
  flex: 0 0 40px;
}

.sync-step__body {
  min-width: 0;
  flex: 1;
}

.sync-step__title {
  font-weight: 700;
  color: #0f172a;
  line-height: 1.15;
}

.sync-step__meta {
  margin-top: 3px;
  color: #64748b;
  font-size: 13px;
}

.sync-step__state {
  width: 28px;
  text-align: center;
  font-size: 18px;
  color: #94a3b8;
  flex: 0 0 28px;
}

.sync-step.is-active {
  background: rgba(255,255,255,0.82);
  border-color: rgba(99, 102, 241, 0.22);
  transform: translateY(-1px);
}

.sync-step.is-done .sync-step__state {
  color: #16a34a;
}

.sync-step.is-error .sync-step__state {
  color: #dc2626;
}


.sync-modal__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

@media (max-width: 640px) {
  .sync-modal__card {
    width: min(94vw, 560px);
    padding: 16px;
    border-radius: 24px;
  }

  .sync-modal__top {
    align-items: flex-start;
  }

  .sync-orb {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }
}
.sync-step.is-done {
  animation: syncPop .25s ease;
}

@keyframes syncPop {
  0% { transform: scale(.96); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.sync-orb__core.is-success {
  color: #16a34a;
}

.sync-orb__core.is-error {
  color: #dc2626;
}
.eleve-defis-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}

.eleve-defi-card{
  width:100%;
  border:none;
  border-radius:18px;
  padding:14px;
  background:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,.08);
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.eleve-defi-card__top{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.eleve-defi-card__ico{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
  flex:0 0 42px;
}

.eleve-defi-card__title{
  font-weight:800;
  line-height:1.2;
}

.eleve-defi-card__cat{
  font-size:.9rem;
  opacity:.72;
  margin-top:4px;
}

.eleve-defi-card__foot{
  display:flex;
  justify-content:flex-start;
}

.defi-eval-star.is-on{
  outline:2px solid rgba(91,75,255,.28);
  background:rgba(91,75,255,.08);
}
.defi-stat-card{
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.defi-suivi-table-box{
  overflow:auto;
}

.defi-suivi-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:720px;
}

.defi-suivi-table th,
.defi-suivi-table td{
  padding:10px 8px;
  border-bottom:1px solid rgba(15,23,42,.08);
  text-align:center;
  vertical-align:middle;
}

.defi-suivi-table th:first-child,
.defi-suivi-table td:first-child{
  text-align:left;
  position:sticky;
  left:0;
  background:#fff;
  z-index:1;
}

.defi-student-name{
  font-weight:700;
  white-space:nowrap;
}

.defi-col-head{
  min-width:120px;
}

.defi-col-title{
  font-weight:800;
  font-size:.92rem;
  line-height:1.2;
}

.defi-col-cat{
  font-size:.78rem;
  color:#667085;
  margin-top:4px;
}

.defi-cell{
  min-width:58px;
  padding:8px 10px;
  border-radius:12px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.defi-cell--na{
  background:#e5e7eb;
  color:#6b7280;
}

.defi-cell--0{
  background:#ef4444;
  color:#fff;
}

.defi-cell--1{
  background:#f97316;
  color:#fff;
}

.defi-cell--2{
  background:#facc15;
  color:#111827;
}

.defi-cell--3{
  background:#22c55e;
  color:#fff;
}
.defi-col-head-btn{
  appearance:none;
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  width:100%;
  text-align:center;
  cursor:pointer;
}

.defi-col-head-btn:hover .defi-col-title{
  text-decoration:underline;
}
.help-pill{
  border:none;
  background:#e5e7eb;
  color:#111827;
  font-weight:600;
  border-radius:999px;
  width:22px;
  height:22px;
  cursor:pointer;
  font-size:13px;
}

.help-pill:hover{
  background:#d1d5db;
}
.class-setting-item{
  padding:12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  background:rgba(255,255,255,.65);
}

.class-setting-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
  margin-top:10px;
}
.class-setting-item__head{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.class-setting-toggle{
  padding:2px 8px;
  min-width:auto;
  height:30px;
  line-height:1;
  font-weight:800;
}
.class-setting-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
}
.class-setting-panel{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(15,23,42,.08);
}
.axes-grid{
  display:grid;
  gap:12px;
}

.axes-hero{
  padding:16px;
}

.axes-hero__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.axes-hero__title{
  font-weight:800;
  font-size:1.1rem;
}

.axes-hero__main{
  margin-top:14px;
}

.axes-big-score{
  font-size:2rem;
  font-weight:900;
  line-height:1;
}

.axes-big-label{
  margin-top:6px;
  font-weight:700;
}

.axes-priority-list{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.axes-priority-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-top:1px solid rgba(15,23,42,.08);
}

.axes-cats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}

.axes-cat-card{
  padding:14px;
}

.axes-cat-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}

.axes-cat-title{
  font-weight:800;
}

.axes-items{
  display:grid;
  gap:8px;
}

.axes-item-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-top:1px solid rgba(15,23,42,.08);
}

.axes-item-label{
  font-weight:700;
}
.student-avatar{
  width:56px;
  min-width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  color:#fff;
  box-shadow:0 4px 12px rgba(15,23,42,.12);
}

.student-avatar--red{
  background:#ef4444;
}

.student-avatar--orange{
  background:#f97316;
}

.student-avatar--yellow{
  background:#facc15;
  color:#111827;
}

.student-avatar--green{
  background:#22c55e;
}

.student-avatar--na{
  background:#94a3b8;
}
.voie-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.voie-cert-inline{
  font-size:18px;
  line-height:1;
}

.voie-cert-inline.off{
  opacity:.55;
}

.voie-pill-ok{
  background:rgba(34,197,94,.12);
  color:#15803d;
  border:1px solid rgba(34,197,94,.22);
}

.voie-pill-ko{
  background:rgba(239,68,68,.10);
  color:#b91c1c;
  border:1px solid rgba(239,68,68,.18);
}
.profil-pos{
  background:rgba(59,130,246,.12);
  color:#2563eb;
  border:1px solid rgba(59,130,246,.25);
}

.profil-vert{
  background:rgba(16,185,129,.12);
  color:#059669;
  border:1px solid rgba(16,185,129,.25);
}

.profil-neg{
  background:rgba(245,158,11,.12);
  color:#b45309;
  border:1px solid rgba(245,158,11,.25);
}
.classe-table-wrap{
  overflow:auto;
}

.classe-table{
  width:100%;
  min-width:900px;
  border-collapse:collapse;
}

.classe-table th{
  text-align:left;
  padding:10px 12px;
  background:#eef2ff;
  color:#2563eb;
  border-bottom:1px solid rgba(15,23,42,.08);
  font-size:.92rem;
}

.classe-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
  font-size:.95rem;
  color:#111827;
}

.classe-table tbody tr:hover{
  background:#f8fafc;
}

.pill-orange{
  background:rgba(249,115,22,.12);
  color:#c2410c;
  border:1px solid rgba(249,115,22,.22);
}