/* ===================================================================
   TOKENS — identité ESISAR (magenta Grenoble INP) sur fond tech sombre
=================================================================== */
:root{
  --bg:         #0B0E14;
  --bg-raised:  #11151F;
  --bg-card:    #11151F;
  --line:       #232838;
  --line-soft:  #1A1E2B;

  --text:       #EDEFF4;
  --text-soft:  #8E94A6;
  --text-dim:   #5B6175;

  --accent:     #E4197F;   /* magenta ESISAR (Pantone 254C ≈ RVB 150-20-125) */
  --accent-soft: #E4197F22;
  --accent-line: #E4197F55;

  --ok:         #3DDC8A;
  --ok-soft:    #3DDC8A1A;
  --ko:         #FF5C72;
  --ko-soft:    #FF5C721A;
  --abj:        #5B6175;

  --f-display: 'Space Grotesk', sans-serif;
  --f-body:    'Space Grotesk', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
[hidden]{ display: none !important; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  min-height: 100vh;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* fine technical grid, barely visible */
.grain{
  position: fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}

@media (prefers-reduced-motion: no-preference){
  .stamp, .ue-card, .login-card{ animation: rise .45s ease both; }
}
@keyframes rise{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

button{ font-family: inherit; cursor:pointer; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===================================================================
   LAYOUT — SCREENS
=================================================================== */
.screen{
  position: relative; z-index: 1;
  min-height: 100vh;
  display:flex; flex-direction:column;
}

/* ===================================================================
   LOGIN
=================================================================== */
.screen-login{
  align-items:center; justify-content:center;
  padding: 24px;
}
.login-card{
  width:100%; max-width: 420px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 44px 36px 32px;
  position: relative;
}
.login-card::before{
  content:"";
  position:absolute; top:0; left:0; width:100%; height:2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
}
.login-mark{ margin-bottom: 52px; }
.mark-line{
  display:block; font-family: var(--f-mono); letter-spacing: 0.16em;
  font-size: 12.5px; font-weight:700; text-transform: uppercase;
  color: var(--accent);
}
.mark-line--sub{
  font-weight:400; letter-spacing: 0.02em; color: var(--text-soft);
  margin-top: 6px; text-transform:none; font-size: 12.5px;
}
.login-title{
  font-family: var(--f-display);
  font-size: clamp(30px, 6vw, 38px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
  color: var(--text);
}
.login-form{ display:flex; flex-direction:column; gap:10px; }
.login-label{
  font-family: var(--f-mono); font-size: 11px; letter-spacing:.12em;
  text-transform: uppercase; color: var(--text-dim);
}
.login-input{
  font-family: var(--f-mono);
  font-size: 22px;
  letter-spacing: 0.06em;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  width:100%;
  transition: border-color .15s ease;
}
.login-input::placeholder{ color: var(--text-dim); }
.login-input:focus{ outline:none; border-color: var(--accent); }
.login-submit{
  margin-top: 18px;
  background: var(--accent);
  color: #fff;
  border:none;
  border-radius: 4px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  padding: 15px 18px;
  letter-spacing: 0.01em;
  transition: transform .15s ease, filter .15s ease;
}
.login-submit:hover{ filter: brightness(1.1); }
.login-submit:active{ transform: scale(0.985); }
.login-error{
  color: var(--ko); font-size: 13.5px; margin: 4px 0 0;
  font-family: var(--f-body);
}
.login-footnote{
  margin: 28px 0 0; font-size: 12.5px; line-height:1.5;
  color: var(--text-dim);
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* ===================================================================
   TOPBAR
=================================================================== */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px clamp(20px,5vw,56px);
  border-bottom: 1px solid var(--line);
}
.topbar-id{
  font-family: var(--f-mono); font-size: 13px; letter-spacing:.04em;
}
.topbar-num{ font-weight:700; color: var(--text); }
.topbar-dot{ margin: 0 8px; color: var(--text-dim); }
.topbar-label{ color: var(--text-soft); }
.btn-logout{
  background:none; border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12.5px; padding: 8px 14px;
  font-family: var(--f-body); font-weight:500;
  color: var(--text-soft);
  transition: border-color .15s ease, color .15s ease;
}
.btn-logout:hover{ border-color: var(--accent); color: var(--text); }

/* ===================================================================
   STAMP ZONE (signature element) — carte "moyenne" type dashboard
=================================================================== */
.stamp-zone{
  display:flex; flex-wrap:wrap; align-items:center; gap: clamp(24px,5vw,56px);
  padding: clamp(32px,6vw,56px) clamp(20px,5vw,56px) clamp(24px,4vw,40px);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
.stamp{
  flex: 0 0 auto;
  display:flex; align-items:flex-end; gap:6px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 28px 16px;
  position:relative;
}
.stamp::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--ok);
  border-radius: 6px 0 0 6px;
}
.stamp.is-fail::before{ background: var(--ko); }
.stamp::after{
  content:"VALIDÉ";
  position:absolute; top:12px; right:14px;
  font-family: var(--f-mono); font-size:10px; letter-spacing:.12em;
  color: var(--ok);
}
.stamp.is-fail::after{ content:"À SURVEILLER"; color: var(--ko); }
.stamp-value{
  font-family: var(--f-display); font-weight:700;
  font-size: clamp(52px, 9vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.stamp-unit{
  font-family: var(--f-mono); font-size: 17px; color: var(--text-dim);
  margin-bottom: 10px;
}
.stamp-meta{ flex:1 1 320px; min-width: 280px; }
.stamp-caption{
  margin:0 0 16px; font-family: var(--f-mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim);
}
.ruler{ width:100%; max-width: 480px; }
.ruler-track{
  position:relative; height: 6px; background: var(--line-soft);
  border-radius: 99px; overflow: hidden;
}
.ruler-fill{
  position:absolute; left:0; top:0; bottom:0;
  background: linear-gradient(90deg, var(--accent), #ff5fb3);
  border-radius: 99px;
  width:0%;
  transition: width .8s cubic-bezier(.2,.8,.2,1);
}
.ruler-marker{
  position:absolute; top:-4px; bottom:-4px; width:2px; background: var(--text);
  left:0%; transition: left .8s cubic-bezier(.2,.8,.2,1);
  opacity: 0.6;
}
.ruler-marker::after{ display:none; }
.ruler-ticks{
  display:flex; justify-content:space-between;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--text-dim);
  margin-top:8px;
}
.stamp-rank{
  margin: 16px 0 0; font-size: 14.5px; color: var(--text-soft);
  line-height: 1.5;
}
.stamp-rank b{ font-weight:700; color: var(--accent); }
.stamp-rank-extra{
  display:inline-block; margin-top: 6px; font-size: 12.5px; color: var(--text-dim);
}
.stamp-rank-extra b{ color: var(--text); }

/* ===================================================================
   SEMESTER SWITCH
=================================================================== */
.semester-switch{
  display:flex; gap: 4px;
  margin: 0 auto 8px;
  max-width: 1280px;
  padding: 0 clamp(20px,5vw,56px);
  width: 100%;
}
.sem-btn{
  background: var(--bg-raised); border:1px solid var(--line);
  border-radius: 4px;
  padding: 9px 18px;
  font-family: var(--f-body); font-size: 13.5px; font-weight:500;
  color: var(--text-soft);
  transition: border-color .15s ease, color .15s ease;
}
.sem-btn.is-active{
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent-line); font-weight:700;
}
.sem-btn:not(.is-active):hover{ border-color: var(--text-dim); color: var(--text); }

/* ===================================================================
   UE GRID — colonnes fixes responsive, jamais de trous
=================================================================== */
.view{
  padding: 24px clamp(20px,5vw,56px) 8px;
  max-width: 1280px; margin: 0 auto; width: 100%;
}
.ue-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1000px){ .ue-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .ue-grid{ grid-template-columns: 1fr; } }

.ue-card{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 20px;
  display:flex; flex-direction:column; gap: 12px;
  text-align:left;
  position:relative;
  transition: border-color .15s ease, transform .15s ease;
}
.ue-card:hover{ border-color: var(--accent-line); transform: translateY(-2px); }
.ue-card-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap: 8px;
}
.ue-card-name{
  font-family: var(--f-body); font-weight:700; font-size: 15px;
  letter-spacing: .005em; color: var(--text);
}
.ue-card-tag{
  font-family: var(--f-mono); font-size: 10px; letter-spacing:.06em;
  padding: 3px 8px; border-radius: 99px; text-transform:uppercase;
  white-space: nowrap;
}
.ue-card-tag.ok{ color: var(--ok); background: var(--ok-soft); }
.ue-card-tag.ko{ color: var(--ko); background: var(--ko-soft); }
.ue-card-tag.abj{ color: var(--text-dim); background: var(--line-soft); }
.ue-card-moy{
  font-family: var(--f-display); font-size: 34px; font-weight:700;
  line-height:1; color: var(--text);
}
.ue-card-moy small{ font-family: var(--f-mono); font-size:13px; color:var(--text-dim); font-weight:400; }
.ue-card-rank{
  font-family: var(--f-mono); font-size: 12px; color: var(--text-soft);
}
.ue-card-bar{
  height: 4px; background: var(--line-soft); border-radius: 99px; margin-top:2px;
  position:relative; overflow:hidden;
}
.ue-card-bar > span{
  position:absolute; left:0; top:0; bottom:0; background: var(--accent);
  border-radius: 99px;
}
.ue-card-sub{
  margin-top: 2px;
  display:flex; flex-direction:column; gap:5px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.ue-card-sub-row{
  display:flex; justify-content:space-between; font-size:12.5px; color: var(--text-soft);
  font-family: var(--f-mono);
}
.ue-card-sub-row b{ color: var(--text); font-weight:700; }

/* ===================================================================
   PANEL (detail matiere)
=================================================================== */
.panel-overlay{
  position: fixed; inset:0; z-index: 50;
  background: rgba(5,7,12,0.6);
  display:flex; justify-content:flex-end;
  backdrop-filter: blur(2px);
}
.panel{
  width: min(540px, 94vw); height:100%;
  background: var(--bg-raised);
  border-left: 1px solid var(--line);
  padding: 32px 28px 28px;
  overflow-y: auto;
  position:relative;
  animation: slidein .25s ease both;
}
@keyframes slidein{ from{ transform: translateX(24px); opacity:0;} to{ transform:translateX(0); opacity:1;} }
.panel-close{
  position:absolute; top:20px; right:20px;
  background:none; border:1px solid var(--line);
  border-radius: 4px;
  width:32px; height:32px; font-size:20px; line-height:1;
  color: var(--text-soft);
  transition: border-color .15s ease, color .15s ease;
}
.panel-close:hover{ border-color: var(--accent); color: var(--text); }
.panel-eyebrow{
  font-family: var(--f-mono); font-size: 11px; letter-spacing:.1em;
  text-transform:uppercase; color: var(--accent); margin: 0 0 6px;
}
.panel-title{
  font-family: var(--f-display); font-weight:700; font-size: 24px;
  margin: 0 0 18px; padding-right: 40px; line-height:1.2;
  color: var(--text);
}
.panel-summary{
  display:flex; gap: 22px; margin-bottom: 22px; padding-bottom:18px;
  border-bottom: 1px solid var(--line);
}
.panel-summary-item{ display:flex; flex-direction:column; gap: 4px; }
.panel-summary-label{ font-family:var(--f-mono); font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
.panel-summary-value{ font-family: var(--f-display); font-size: 24px; font-weight:700; color: var(--text); }

/* ---- Bloc par matière, avec jauge comparative classe ---- */
.panel-matieres{ display:flex; flex-direction:column; gap: 22px; }
.matiere-block{
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 16px 14px;
  background: var(--bg-card);
}
.matiere-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom: 10px;
}
.matiere-code{
  font-family: var(--f-body); font-weight:700; font-size: 14.5px; color: var(--text);
}
.matiere-rank{
  font-family: var(--f-mono); font-size: 11.5px; color: var(--text-soft);
}
.matiere-compare{ margin: 10px 0 12px; }
.compare-track{
  position: relative; height: 28px;
}
.compare-bar{
  position:absolute; top: 11px; left:0; right:0; height:6px;
  background: var(--line-soft); border-radius: 99px;
}
.compare-range{
  position:absolute; top: 11px; height:6px;
  background: var(--line); border-radius: 99px;
}
.compare-marker{
  position:absolute; top: 4px; width:2px; height: 20px;
  background: var(--text-dim);
}
.compare-marker.is-mean{ background: var(--text-soft); }
.compare-marker.is-you{
  width: 3px; background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.compare-marker.is-you::after{
  content:"TOI"; position:absolute; top:-16px; left:50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 9px; letter-spacing:.06em; color: var(--accent);
  white-space: nowrap;
}
.compare-labels{
  display:flex; justify-content:space-between;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--text-dim);
  margin-top: 2px;
}
.compare-legend{
  display:flex; gap: 14px; flex-wrap:wrap;
  font-family: var(--f-mono); font-size: 10px; color: var(--text-dim);
  margin-top: 8px;
}
.compare-legend span{ display:inline-flex; align-items:center; gap: 5px; }
.compare-legend i{ width:8px; height:8px; border-radius:50%; display:inline-block; }

.matiere-detail{ margin-top: 12px; }
.matiere-detail-row{
  display:flex; justify-content:space-between;
  font-family: var(--f-mono); font-size: 12.5px; color: var(--text-soft);
  padding: 6px 0; border-bottom: 1px solid var(--line-soft);
}
.matiere-detail-row:last-child{ border-bottom:none; }
.matiere-detail-row b{ color: var(--text); font-weight:700; }

/* ---- Bilan annuel (popup détaillant le compteur X/8) ---- */
.bilan-grid{ display:flex; flex-direction:column; gap: 10px; }
.bilan-row{
  display:flex; justify-content:space-between; align-items:center;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 12px 16px;
  background: var(--bg-card);
}
.bilan-row-name{ font-weight:700; font-size: 14px; }
.bilan-row-sems{ display:flex; gap: 8px; }
.bilan-pill{
  font-family: var(--f-mono); font-size: 11px; padding: 4px 9px; border-radius: 99px;
}
.bilan-pill.ok{ color: var(--ok); background: var(--ok-soft); }
.bilan-pill.ko{ color: var(--ko); background: var(--ko-soft); }

/* ===================================================================
   FOOTER
=================================================================== */
.page-footer{
  margin-top: auto;
  padding: 28px clamp(20px,5vw,56px) 36px;
  max-width: 1280px; margin-left:auto; margin-right:auto; width:100%;
  font-size: 12px; color: var(--text-dim); border-top: 1px solid var(--line);
}

/* ===================================================================
   RESPONSIVE
=================================================================== */
@media (max-width: 560px){
  .stamp-zone{ flex-direction:column; align-items:flex-start; }
  .topbar{ padding: 14px 18px; }
  .view{ padding: 18px 14px 8px; }
  .semester-switch{ padding: 0 14px; }
  .stamp-zone{ padding: 24px 18px; }
}