/* UPC Premium UI — couche visuelle uniquement (aucune logique métier modifiée) */
:root{--pr-blue:linear-gradient(135deg,#1f6fe5,#2f8cff);--pr-green:linear-gradient(135deg,#12915a,#2fb877);--pr-orange:linear-gradient(135deg,#f08a1c,#f5b13d);--pr-purple:linear-gradient(135deg,#6a4de0,#9b6cf5);--pr-side:linear-gradient(180deg,#0a1f47 0%,#0d2b63 55%,#123a7a 100%);--pr-ease:cubic-bezier(.2,.7,.2,1)}
body{font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;background:radial-gradient(1200px 500px at 80% -10%,rgba(47,140,255,.10),transparent 60%),var(--bg)}
/* Sidebar */
aside{background:var(--pr-side)!important;border-right:1px solid rgba(255,255,255,.06);position:sticky;top:0;align-self:flex-start;height:100vh;height:100dvh;overflow-x:hidden;overflow-y:auto}
aside::before{content:"";position:absolute;width:280px;height:280px;left:-110px;bottom:-90px;background:radial-gradient(circle,rgba(47,140,255,.35),transparent 65%);pointer-events:none;animation:prFloat 9s ease-in-out infinite}
aside .brand{padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
aside .brand h2{letter-spacing:2px;font-weight:800}
nav button{border-radius:12px!important;padding:11px 14px!important;color:#c9d9f2!important;transition:background .18s var(--pr-ease),transform .18s var(--pr-ease),color .18s!important;position:relative}
nav button:hover{background:rgba(255,255,255,.10)!important;color:#fff!important;transform:translateX(3px);padding-left:14px!important}
nav button.active{background:linear-gradient(135deg,#2a7cf0,#4a6df0)!important;color:#fff!important;box-shadow:0 10px 26px rgba(42,124,240,.38)}
nav button.active::before{content:"";position:absolute;left:-10px;top:22%;height:56%;width:4px;border-radius:4px;background:#7fb2ff}
nav button .ico{filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));transition:transform .2s var(--pr-ease)}
nav button:hover .ico{transform:scale(1.15) rotate(-4deg)}
.side-foot{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:14px}
/* Header */
header{background:color-mix(in srgb,var(--card) 88%,transparent)!important;backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header h1#pageTitle{background:linear-gradient(90deg,var(--navy),#2f8cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.global-search input{border-radius:999px!important;transition:box-shadow .2s,border-color .2s}
.global-search input:focus{box-shadow:0 0 0 4px rgba(47,140,255,.18);border-color:#2f8cff}
button{transition:transform .15s var(--pr-ease),box-shadow .15s,filter .15s!important}
button:hover:not(:disabled){transform:translateY(-1px)}
button:active:not(:disabled){transform:translateY(0) scale(.98)}
button.primary{background:linear-gradient(135deg,#1f6fe5,#3a86ff)!important;box-shadow:0 6px 16px rgba(31,111,229,.30);border:0}
button.primary:hover:not(:disabled){box-shadow:0 10px 22px rgba(31,111,229,.42);filter:brightness(1.05)}
:focus-visible{outline:3px solid #7fb2ff!important;outline-offset:2px}
/* Hero */
.upc-hero{position:relative;overflow:hidden;border-radius:22px;padding:34px 34px;margin-bottom:20px;color:#fff;background:linear-gradient(120deg,#0b2a63,#1b5fc4 60%,#2f8cff);box-shadow:0 24px 60px -20px rgba(16,60,140,.55);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;animation:prIn .6s var(--pr-ease) both}
.upc-hero::before,.upc-hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08);animation:prFloat 10s ease-in-out infinite}
.upc-hero::before{width:280px;height:280px;right:-60px;top:-110px}
.upc-hero::after{width:170px;height:170px;right:170px;bottom:-90px;animation-delay:-4s}
.upc-hero>*{position:relative;z-index:1}
.upc-hero small{letter-spacing:2px;font-weight:700;opacity:.75;font-size:11px}
.upc-hero h2{margin:6px 0 6px;font-size:clamp(22px,3.2vw,34px);font-weight:800;letter-spacing:.2px}
.upc-hero p{margin:0;opacity:.85;font-size:14px}
.upc-hero img{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:18px;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.upc-clock{text-align:right}.upc-clock b{display:block;font-size:34px;font-weight:800;font-variant-numeric:tabular-nums}.upc-clock span{font-size:12px;opacity:.8}
/* KPI cards */
.cards .card{border:0;border-radius:18px;padding:20px 22px;position:relative;overflow:hidden;box-shadow:0 14px 34px -16px rgba(20,50,100,.35);animation:prIn .55s var(--pr-ease) both;animation-delay:calc(var(--i,0)*70ms)}
.cards .card::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.14)}
.cards .card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -16px rgba(20,60,140,.5)}
.cards .card:nth-child(4n+1){background:var(--pr-blue)}.cards .card:nth-child(4n+2){background:var(--pr-green)}
.cards .card:nth-child(4n+3){background:var(--pr-orange)}.cards .card:nth-child(4n+4){background:var(--pr-purple)}
.cards .card .lbl,.cards .card b{color:#fff!important;position:relative;z-index:1}
.cards .card .lbl{opacity:.9;font-weight:600}.cards .card b{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums}
.cards .card.warn,.cards .card.accent{border-left:0}
/* Panels, tables */
.panel{border-radius:18px;border:1px solid var(--line);box-shadow:0 12px 32px -18px rgba(20,50,100,.28);transition:box-shadow .2s,transform .2s;animation:prIn .5s var(--pr-ease) both}
.panel:hover{box-shadow:0 18px 40px -18px rgba(20,60,140,.38)}
.panel h2{background:linear-gradient(90deg,color-mix(in srgb,var(--navy) 6%,transparent),transparent)}
.table th{background:color-mix(in srgb,var(--navy) 6%,var(--card))}
.table tbody tr{transition:background .15s}.table tbody tr:hover{background:color-mix(in srgb,#2f8cff 8%,transparent)}
.progress-fill{transition:width 1s var(--pr-ease)}
.modal .box{border-radius:20px;box-shadow:0 30px 80px rgba(8,20,50,.45)}
html[data-theme="dark"] body{background:radial-gradient(1000px 500px at 80% -10%,rgba(47,140,255,.16),transparent 60%),#0a1424}
html[data-theme="dark"] aside{background:linear-gradient(180deg,#050d1f,#0a1a3a)!important}
@keyframes prIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes prFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,12px)}}
@media(max-width:800px){.upc-hero{padding:22px;border-radius:18px}.upc-clock{text-align:left}button{min-height:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* --- Phase 2 : graphiques animés, prochaine soutenance, progression, tableaux mobiles --- */
.dash-charts svg rect{transform-box:fill-box;transform-origin:bottom;animation:prGrow .9s var(--pr-ease) both}
.dash-charts svg path,.dash-charts svg circle{animation:prFade 1s var(--pr-ease) both}
@keyframes prGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes prFade{from{opacity:0}to{opacity:1}}
.pr-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;margin-bottom:18px}
.pr-next{border-radius:18px;padding:20px 22px;color:#fff;background:linear-gradient(135deg,#0d2b63,#2a5fd0);box-shadow:0 18px 40px -18px rgba(20,60,140,.6);position:relative;overflow:hidden;animation:prIn .55s var(--pr-ease) both}
.pr-next::after{content:"🎓";position:absolute;right:16px;bottom:-10px;font-size:84px;opacity:.12}
.pr-next small{letter-spacing:1.6px;font-weight:700;opacity:.75;font-size:11px}
.pr-next h3{margin:6px 0 4px;font-size:18px}.pr-next p{margin:2px 0;font-size:13px;opacity:.9}
.pr-next .pr-when{display:inline-block;margin-top:10px;background:rgba(255,255,255,.16);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700}
.pr-prog{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:0 12px 32px -18px rgba(20,50,100,.28);animation:prIn .55s var(--pr-ease) both}
.pr-prog h3{margin:0 0 12px;font-size:14.5px;color:var(--title)}
.pr-prow{margin:10px 0}.pr-prow div:first-child{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.pr-track{height:9px;border-radius:9px;background:color-mix(in srgb,var(--navy) 10%,var(--card));overflow:hidden}
.pr-fill{height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#1f6fe5,#5fb0ff);transition:width 1.1s var(--pr-ease)}
@media(max-width:900px){.pr-row{grid-template-columns:1fr}}
/* Tableaux -> cartes sur téléphone */
@media(max-width:640px){
  table.table.pr-stack,table.table.pr-stack tbody,table.table.pr-stack tr,table.table.pr-stack td{display:block;width:100%}
  table.table.pr-stack thead{display:none}
  table.table.pr-stack tr{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:10px 0;padding:8px 12px;box-shadow:0 6px 18px -12px rgba(20,50,100,.3)}
  table.table.pr-stack td{border:0;padding:6px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  table.table.pr-stack td::before{content:attr(data-label);font-weight:600;color:var(--muted);text-align:left;font-size:12px}
}
.tag{box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
/* --- Phase 3 : 3 modèles visuels, icônes vectorielles, dossiers, calendrier --- */
.pr-svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav button .ico{display:inline-grid;place-items:center}
#prModel{border-radius:999px;padding:7px 12px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:12.5px;cursor:pointer}
/* Modèle 1 — Institutionnel : sobre, or/bleu profond */
html[data-model="inst"] aside{background:linear-gradient(180deg,#0b1f3f,#12305f)!important}
html[data-model="inst"] .cards .card:nth-child(n){background:linear-gradient(135deg,#123a6b,#1d5199)}
html[data-model="inst"] .cards .card:nth-child(4n+3){background:linear-gradient(135deg,#8a6a1f,#b8912f)}
html[data-model="inst"] .upc-hero{background:linear-gradient(120deg,#0b2245,#173e78)}
html[data-model="inst"] .cards .card::after,html[data-model="inst"] .upc-hero::before,html[data-model="inst"] aside::before{display:none}
/* Modèle 2 — Modern SaaS : clair, épuré, cartes blanches */
html[data-model="saas"] aside{background:#0f172a!important}
html[data-model="saas"] .cards .card:nth-child(n){background:var(--card);border:1px solid var(--line);box-shadow:0 4px 14px -8px rgba(15,23,42,.2)}
html[data-model="saas"] .cards .card .lbl{color:var(--muted)!important;opacity:1}
html[data-model="saas"] .cards .card b{color:var(--title)!important}
html[data-model="saas"] .cards .card::after{background:rgba(47,140,255,.10)}
html[data-model="saas"] .upc-hero{background:linear-gradient(120deg,#111c3a,#2447a8);border-radius:16px}
html[data-model="saas"] nav button.active{background:#2563eb!important}
/* Modèle 3 — Premium Futuristic : profondeur, lueur */
html[data-model="futur"] body{background:radial-gradient(900px 500px at 15% -10%,rgba(124,92,255,.18),transparent 60%),radial-gradient(900px 500px at 90% 0,rgba(47,140,255,.16),transparent 60%),var(--bg)}
html[data-model="futur"] aside{background:linear-gradient(180deg,#070b1f,#140f3d 60%,#1a2a72)!important}
html[data-model="futur"] .cards .card{box-shadow:0 18px 44px -14px rgba(106,77,224,.55),inset 0 1px 0 rgba(255,255,255,.25)}
html[data-model="futur"] .upc-hero{background:linear-gradient(120deg,#160f45,#3a2fb8 55%,#2f8cff);box-shadow:0 30px 70px -20px rgba(94,70,230,.65)}
html[data-model="futur"] .panel,html[data-model="futur"] .pr-prog{backdrop-filter:blur(8px)}
/* Dossiers (Informations Étudiants) */
.pr-dossiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.pr-dossiers .pr-prog{padding:16px 18px}.pr-dossiers b.big{font-size:26px;display:block;margin:2px 0 8px;color:var(--title)}
/* Calendrier mensuel */
.pr-cal{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:18px;box-shadow:0 12px 32px -18px rgba(20,50,100,.28)}
.pr-cal-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.pr-cal-h b{text-transform:capitalize;font-size:15px}
.pr-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.pr-cal-g>span{font-size:11px;color:var(--muted);text-align:center;font-weight:700}
.pr-day{min-height:54px;border-radius:12px;border:1px solid var(--line);padding:5px 7px;font-size:12px;cursor:pointer;background:var(--card);transition:transform .15s,box-shadow .15s}
.pr-day:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(20,60,140,.5)}
.pr-day.today{border-color:#2f8cff;box-shadow:0 0 0 2px rgba(47,140,255,.25)}.pr-day.off{opacity:.35}
.pr-day i{display:inline-block;font-style:normal;margin-top:4px;padding:1px 7px;border-radius:99px;background:linear-gradient(135deg,#1f6fe5,#6a4de0);color:#fff;font-size:10.5px;font-weight:700}