/* ===== Pronote Futur – Dark Glassmorphism + Grille Pronote compacte ===== */
:root{
  --bg:#07080e;
  --bg2:#0d0f1c;
  --card:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.09);
  --text:#eef0ff;
  --muted:#9aa0c3;
  --accent:#7c3aed;
  --accent2:#06b6d4;
  --success:#10b981;
  --danger:#ef4444;
  --radius:20px;
  --radius-sm:12px;
  --blur:18px;
}
/* ===== Thèmes ===== */
[data-theme="oled"]{
  --bg:#020205;
  --bg2:#060608;
  --card:rgba(255,255,255,0.035);
  --border:rgba(255,255,255,0.06);
  --text:#f8f8ff;
  --muted:#8a90b8;
  --accent:#8b5cf6;
  --accent2:#22d3ee;
}
[data-theme="oled"] body{
  background: radial-gradient(900px 500px at 20% -10%, rgba(139,92,246,0.18), transparent 60%),
              radial-gradient(700px 400px at 90% 10%, rgba(34,211,238,0.10), transparent 60%),
              var(--bg);
}
[data-theme="oled"] .topbar{ background: rgba(2,2,5,0.88); }
[data-theme="oled"] .glass{ background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); }

[data-theme="ocean"]{
  --bg:#050a12;
  --bg2:#0a1629;
  --card:rgba(14,165,233,0.08);
  --border:rgba(14,165,233,0.14);
  --text:#e6f2ff;
  --muted:#8aa0c2;
  --accent:#0ea5e9;
  --accent2:#06b6d4;
}
[data-theme="ocean"] body{
  background: radial-gradient(1000px 500px at 15% -10%, rgba(14,165,233,0.22), transparent 60%),
              radial-gradient(800px 400px at 85% 10%, rgba(6,182,214,0.14), transparent 60%),
              var(--bg);
}

[data-theme="forest"]{
  --bg:#040a06;
  --bg2:#0a1a12;
  --card:rgba(16,185,129,0.07);
  --border:rgba(16,185,129,0.13);
  --text:#e6fff2;
  --muted:#8ab8a0;
  --accent:#10b981;
  --accent2:#059669;
}
[data-theme="forest"] body{
  background: radial-gradient(1000px 500px at 20% -10%, rgba(16,185,129,0.18), transparent 60%),
              radial-gradient(700px 400px at 90% 15%, rgba(5,150,105,0.12), transparent 60%),
              var(--bg);
}

[data-theme="sunset"]{
  --bg:#0d0708;
  --bg2:#1a0a12;
  --card:rgba(236,72,153,0.07);
  --border:rgba(236,72,153,0.13);
  --text:#fff0f5;
  --muted:#c2a0b0;
  --accent:#ec4899;
  --accent2:#f59e0b;
}
[data-theme="sunset"] body{
  background: radial-gradient(1000px 500px at 20% -10%, rgba(236,72,153,0.18), transparent 60%),
              radial-gradient(800px 400px at 85% 10%, rgba(245,158,11,0.14), transparent 60%),
              var(--bg);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 60%),
              radial-gradient(800px 600px at 50% 120%, color-mix(in srgb, var(--accent2) 8%, transparent), transparent 60%),
              var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition: background .35s ease, color .2s ease;
}
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  backdrop-filter: blur(var(--blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Header */
.topbar{
  position:sticky; top:0; z-index:30;
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: rgba(7,8,14,0.75);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:40px; height:40px; border-radius:12px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display:grid; place-items:center; font-weight:800; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);}
.brand h1{font-size:15px; font-weight:700; letter-spacing:-0.3px}
.brand p{font-size:11px; color:var(--muted); margin-top:2px}
.pill{font-size:11px; padding:6px 10px; border-radius:999px; background: color-mix(in srgb, var(--accent) 15%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: color-mix(in srgb, var(--accent) 45%, white); display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.pill.dot::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success)}

/* Layout */
.container{max-width:1100px; margin:0 auto; padding:18px 16px 40px}
.grid{display:grid; grid-template-columns:1.18fr 0.82fr; gap:18px}
@media(max-width:860px){.grid{grid-template-columns:1fr}}

/* Tabs */
.tabs{display:flex; gap:8px; margin:14px 0 10px; padding:4px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); border-radius:14px; width:fit-content}
.tab{padding:8px 14px; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; border:1px solid transparent; background:transparent; color:var(--muted); transition:.15s}
.tab.active{background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 75%, var(--accent2))); color:white; border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow:0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent)}
.tab .badge-count{margin-left:6px; background:rgba(255,255,255,0.18); padding:2px 6px; border-radius:999px; font-size:11px}
.tab-panels > section{display:none}
.tab-panels > section.active{display:block}

/* Hero compact - temps réel en heure, hauteur réduite */
.hero{padding:12px 14px; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-1px; border-radius:var(--radius); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 40%, color-mix(in srgb, var(--accent2) 10%, transparent)); pointer-events:none;}
.hero-head{display:flex; justify-content:space-between; align-items:center; gap:10px; position:relative}
.kicker{font-size:9px; letter-spacing:0.10em; text-transform:uppercase; color:var(--muted); font-weight:700}
.hero h2{font-size:16px; line-height:1.1; margin-top:4px; letter-spacing:-0.3px}
.hero h2 span{font-weight:400; color:#cbd5e1; font-size:13px}
.meta{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px}
.chip{font-size:10px; padding:4px 7px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.07); display:inline-flex; gap:5px; align-items:center}
.chip b{font-weight:600; font-size:10px}
.countdown{margin-top:0; display:flex; align-items:baseline; gap:6px; flex-direction:column; align-items:flex-end; text-align:right}
.countdown strong{font-size:18px; font-weight:800; letter-spacing:-0.5px; font-variant-numeric:tabular-nums; line-height:1}
.countdown span{color:var(--muted); font-size:10px}
.countdown .countdown-label{font-size:8px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:700}
.progress{height:4px; border-radius:999px; background:rgba(255,255,255,0.07); overflow:hidden; margin-top:8px}
.progress i{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent2)); border-radius:999px; transition:width 0.6s ease}
.hero-empty{padding:14px; text-align:center}
.hero-empty p{color:var(--muted); font-size:12px; margin-top:4px}
.hero-compact-row{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; font-size:10px; color:var(--muted)}

/* Refresh compact */
.refresh-wrap{display:flex; gap:8px; margin-top:8px; position:relative}
.btn-refresh{flex:1; appearance:none; border:none; cursor:pointer; padding:10px 14px; border-radius:12px; font-weight:700; font-size:13px; color:white; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.25); display:inline-flex; align-items:center; justify-content:center; gap:6px; transition: transform .12s; position:relative; overflow:hidden;}
.btn-refresh:active{transform: scale(0.98)}
.btn-refresh:disabled{opacity:0.7; cursor:not-allowed}
.btn-refresh::after{content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent); transform: translateX(-100%); transition: transform .7s;}
.btn-refresh:hover::after{transform: translateX(100%)}
.btn-refresh.small{padding:6px 10px; font-size:11px; border-radius:10px; gap:5px; flex:0 0 auto}
.btn-refresh.small .spinner{width:14px; height:14px; border-width:2px}
.spinner{width:16px; height:16px; border:2.5px solid rgba(255,255,255,0.35); border-top-color:white; border-radius:50%; animation: spin .8s linear infinite; display:none;}
.btn-refresh.loading .spinner{display:block}
.btn-refresh.loading .ico-refresh{opacity:0.0}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-ghost{padding:10px 13px; border-radius:12px; font-weight:600; font-size:12px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:var(--text); cursor:pointer;}

/* Toolbar */
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 2px 8px}
.toolbar h3{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted)}
.date-nav{display:flex; align-items:center; gap:6px}
.date-nav button{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:var(--text); cursor:pointer}
.date-label{font-weight:700; font-size:13px; padding:7px 10px; border-radius:10px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.06)}

/* ===== Grille Pleine style Pronote ===== */
.timeline{
  padding:6px 0 12px 0; 
  display:flex; flex-direction:column; gap:0; 
  background: rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; 
  overflow:hidden;
  margin-bottom:32px;
}
.timeline-header{
  display:grid; grid-template-columns:74px 1fr; 
  background: color-mix(in srgb, var(--accent) 14%, transparent); 
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding:8px 10px; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:700;
}
.slot{
  display:grid; grid-template-columns:74px 1fr; gap:0;
  min-height:52px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.015);
  transition: background .12s;
  position:relative;
}
.slot:last-child{border-bottom:none}
.slot:hover{background: rgba(255,255,255,0.03)}
.slot.active{background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), rgba(255,255,255,0.04));}
.slot.active::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--accent); z-index:1}
.slot.past{opacity:0.65}
.slot.canceled{opacity:0.45}
.slot.canceled .lesson-title{text-decoration:line-through}
.timecol{
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  border-right:1px solid rgba(255,255,255,0.14);
  padding:0; text-align:center; background: transparent; position:relative;
}
.timecol b{font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; transform: translateY(-50%); background: transparent; padding:0; border:none; color:var(--text)}
.timecol span{font-size:10px; font-weight:500; color:var(--muted); line-height:1; transform: translateY(50%); background: transparent; padding:0; border:none}
.slot-label{display:none}
/* Grille pleine : le contenu remplit 100% du créneau */
.slot-content{padding:1px; display:flex; align-items:stretch; background: transparent}
.slot:has(.lesson-card) .slot-content{padding:0}
.lesson-card{
  width:100%; min-height:100%;
  /* Bloc plein opaque glassmorphism accentué */
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 92%, rgba(255,255,255,0.06)), color-mix(in srgb, var(--c) 68%, #0e0e1e));
  border: none;
  border-left:4px solid var(--c, var(--accent));
  border-radius:0; padding:8px 10px 6px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-start; gap:2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
  backdrop-filter: blur(6px) saturate(1.2);
  cursor:pointer; transition: filter .15s, transform .08s;
}
.lesson-card .lesson-title{padding-top:2px}
.lesson-card:hover{filter: brightness(1.08); transform: scale(1.005)}
.lesson-card:active{transform: scale(0.998)}
.lesson-card::before{display:none}
.lesson-card .lesson-title{color:#ffffff; text-shadow:0 1px 2px rgba(0,0,0,0.45); font-size:13px}
.lesson-card .lesson-sub{color:rgba(255,255,255,0.90); font-size:10.5px}
/* Sonnerie discrète : petit bandeau comme une transition */
.slot.ring{
  min-height:22px; background: rgba(245,158,11,0.07); border-bottom:1px solid rgba(245,158,11,0.12);
}
.slot.ring .timecol{padding:2px 4px; background: rgba(245,158,11,0.08)}
.slot.ring .timecol b{font-size:9px}
.slot.ring .timecol span{font-size:8px}
.slot.ring .slot-label{font-size:6.5px}
.slot.ring .slot-content{padding:0; align-items:center}
.slot.ring .empty-slot{font-size:10px; padding:3px 8px; opacity:0.9; background: transparent; border:none; justify-content:center; display:flex; align-items:center; gap:6px}

/* indicateur transition fin et compact */
.transition-gap{
  height:14px; display:flex; align-items:center; justify-content:center; gap:6px;
  background: rgba(255,255,255,0.015);
  border-bottom:1px solid rgba(255,255,255,0.04);
  font-size:9px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); font-weight:600;
}
.transition-gap::before, .transition-gap::after{
  content:""; flex:1; height:1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 4px, transparent 4px 8px);
  opacity:0.5;
}
.transition-gap span{padding:0 6px; white-space:nowrap}
.lesson-title{font-weight:700; font-size:12px; letter-spacing:-0.15px; line-height:1.2}
.lesson-sub{font-size:10px; color:#cbd5e1; display:flex; gap:8px; flex-wrap:wrap; line-height:1.2}
.lesson-sub span{opacity:0.9}
.lesson-hint{font-size:10px; color:#fcd34d; margin-top:2px; display:flex; gap:4px; align-items:center}
.badge{font-size:10px; padding:3px 6px; border-radius:999px; font-weight:700}
.badge-live{background: rgba(16,185,129,0.15); color:#6ee7b7; border:1px solid rgba(16,185,129,0.3)}
.badge-soon{background: rgba(245,158,11,0.15); color:#fcd34d; border:1px solid rgba(245,158,11,0.3)}
.empty-slot{color:var(--muted); font-size:11px; padding:6px 2px; font-style:italic; opacity:0.85}
.slot.pause{ min-height:30px !important; background: repeating-linear-gradient(45deg, rgba(245,158,11,0.06), rgba(245,158,11,0.06) 8px, rgba(255,255,255,0.01) 8px, rgba(255,255,255,0.01) 16px) }
.slot.ring{ background: rgba(255,255,255,0.03) }

/* Devoirs */
.hw-list{display:flex; flex-direction:column; gap:10px}
.hw-group{border:1px solid rgba(255,255,255,0.06); border-radius:14px; overflow:hidden; background:rgba(255,255,255,0.03)}
.hw-group-head{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); border-bottom:1px solid rgba(255,255,255,0.06); font-weight:700; font-size:12px}
.hw-group-head span{font-size:10px; color:var(--muted); font-weight:600; letter-spacing:0.06em; text-transform:uppercase}
.hw-card{padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.05); display:flex; gap:10px; align-items:start}
.hw-card:last-child{border-bottom:none}
.hw-dot{width:10px; height:10px; border-radius:50%; flex:0 0 10px; margin-top:4px; box-shadow:0 0 8px currentColor}
.hw-subject{font-weight:700; font-size:12px}
.hw-meta{font-size:11px; color:var(--muted); margin-top:2px}
.hw-content{font-size:12px; color:#e2e8f0; margin-top:4px; line-height:1.4; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:7px 8px}
.hw-due{font-size:11px; padding:4px 7px; border-radius:999px; font-weight:700; background:rgba(245,158,11,0.14); color:#fcd34d; border:1px solid rgba(245,158,11,0.25); white-space:nowrap}
.hw-empty{padding:22px; text-align:center; color:var(--muted); font-size:13px}

/* Modale cours (glassmorphism) */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display:none; place-items:center; padding:16px;
}
.modal-overlay.open{display:grid}
.modal{
  width:100%; max-width:520px; max-height:88vh; overflow:auto;
  padding:22px; position:relative;
  border-radius:20px;
  animation: modalIn .18s ease;
}
@keyframes modalIn{ from{opacity:0; transform: translateY(10px) scale(0.98)} to{opacity:1; transform: none}}
.modal-close{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; border-radius:10px;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  color:var(--text); font-size:18px; cursor:pointer; display:grid; place-items:center;
}
.modal-head{padding-right:28px; margin-bottom:12px}
.modal-head h3{font-size:18px; letter-spacing:-0.4px; margin-bottom:4px}
.modal-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.modal-section{margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.08)}
.modal-section h4{font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.modal-hw{padding:10px; border:1px solid rgba(255,255,255,0.08); border-radius:12px; background: rgba(255,255,255,0.04); margin-bottom:8px}
.modal-hw strong{font-size:12px}
.modal-hw p{font-size:12px; color:#e2e8f0; margin-top:4px; line-height:1.4}

/* Right col */
.side{ display:flex; flex-direction:column; gap:14px}
.card{ padding:14px}
.card h4{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.stat{padding:10px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06)}
.stat b{display:block; font-size:18px; letter-spacing:-0.4px}
.stat span{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em}
.mini-row{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.06); font-size:12px}
.mini-row:last-child{border:none}
.mini-row b{color:var(--muted); font-weight:500}
.install-banner{display:none; gap:10px; align-items:center; padding:10px; border-radius:12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent2) 14%, transparent)); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent)}
.install-banner.show{display:flex}
.footer{ text-align:center; color:var(--muted); font-size:11px; padding:16px}

/* Thèmes selector */
.theme-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:10px}
.theme-btn{padding:10px; border-radius:12px; border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); cursor:pointer; text-align:left; transition:.15s; position:relative; overflow:hidden}
.theme-btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,0.14)}
.theme-btn.active{border-color: var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent), 0 6px 16px rgba(0,0,0,0.25)}
.theme-btn.active::after{content:"✓"; position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%; background: var(--accent); color:white; display:grid; place-items:center; font-size:11px}
.theme-preview{height:36px; border-radius:8px; margin-bottom:8px; border:1px solid rgba(255,255,255,0.08)}
.theme-name{font-size:12px; font-weight:700; color:var(--text)}
.theme-desc{font-size:10px; color:var(--muted); margin-top:2px}