/* =========================================================================
   Mej-Affect — Design system
   Direction : institutionnel sobre. Sidebar prune profond, plan de travail
   crème, accents jade. Famille typographique unique : IBM Plex (Sans + Mono).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Prune — couleur mère */
  --plum-950: #1E0F1A;
  --plum-900: #2A1424;
  --plum-850: #35192D;
  --plum-800: #421F37;
  --plum-700: #5C2E4E;
  --plum-600: #7A3D68;
  --plum-500: #9B5186;
  --plum-300: #C9A0BA;
  --plum-100: #F2E6EE;
  --plum-050: #FAF3F8;

  /* Jade — accent */
  --jade-700: #0A5F4C;
  --jade-600: #0E7C63;
  --jade-500: #17957A;
  --jade-100: #DCF0E9;

  /* Signaux */
  --rose-600: #B3255B;
  --rose-100: #FBE4EC;
  --olive-600: #7D6F35;
  --olive-100: #F4F1DF;

  /* Neutres chauds */
  --ink: #241C21;
  --ink-soft: #4A3F46;
  --muted: #7A6E75;
  --line: #E7DFE4;
  --line-soft: #F1EBEE;
  --cream: #FBF8F7;
  --paper: #FFFFFF;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(36, 28, 33, .05), 0 1px 3px rgba(36, 28, 33, .04);
  --shadow-md: 0 4px 12px rgba(36, 28, 33, .07), 0 1px 3px rgba(36, 28, 33, .05);
  --shadow-lg: 0 18px 48px rgba(36, 28, 33, .16);
  --sidebar-w: 258px;

  --sans: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --display: 'IBM Plex Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
p { margin: 0 0 .6rem; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ============================ App shell ============================ */
#app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(178deg, var(--plum-900) 0%, var(--plum-950) 100%);
  color: #EFE3EB;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  border-right: 1px solid rgba(255, 255, 255, .06);
}
.brand { padding: 24px 22px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand .mark {
  font-family: var(--display); font-size: 22px; font-weight: 700;
  letter-spacing: -.035em; color: #fff; display: flex; align-items: baseline; gap: 2px;
}
.brand .mark .dot { color: var(--jade-500); font-size: 26px; line-height: 0; }
.brand .tag {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--plum-300); margin-top: 5px;
}

.nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
.nav-group { margin-bottom: 22px; }
.nav-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: #9A7F91; padding: 0 10px 8px; font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; margin-bottom: 2px;
  color: #D9C6D2; font-size: 13.5px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
  border: none; background: none; width: 100%; text-align: left;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.actif { background: var(--plum-700); color: #fff; }
.nav-item .ico { width: 16px; height: 16px; flex: 0 0 16px; opacity: .85; }
.nav-item .compteur {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  background: rgba(255,255,255,.1); padding: 1px 6px; border-radius: 20px;
}
.nav-sub {
  padding: 6px 10px 6px 36px; font-size: 12.5px; color: #BFA6B7;
  border-radius: 7px; display: block; border: none; background: none;
  width: 100%; text-align: left; margin-bottom: 1px;
}
.nav-sub:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-sub.actif { color: #fff; background: rgba(255,255,255,.08); }

.sidebar-foot { padding: 14px; border-top: 1px solid rgba(255,255,255,.07); }
.user-card { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.avatar {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 32px;
  background: linear-gradient(140deg, var(--plum-600), var(--jade-700));
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
}
.user-card .nom { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.2; }
.user-card .role { font-size: 10.5px; color: #A98CA0; text-transform: uppercase; letter-spacing: .07em; }
.btn-quitter {
  margin-left: auto; background: none; border: none; color: #A98CA0;
  font-size: 11px; padding: 4px;
}
.btn-quitter:hover { color: #fff; }

/* ============================ Main ============================ */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 62px; padding: 0 30px; display: flex; align-items: center; gap: 14px;
  background: rgba(251,248,247,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30;
}
.fil { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.fil b { color: var(--ink); font-weight: 600; }
.fil .sep { opacity: .45; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.contenu { padding: 26px 30px 60px; max-width: 1420px; width: 100%; }
.page-tete { margin-bottom: 22px; display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.page-tete h1 { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -.028em; }
.page-tete .sous { color: var(--muted); font-size: 13.5px; margin-top: 3px; max-width: 70ch; }
.page-tete .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================ Boutons ============================ */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 8px 14px; border-radius: 8px; border: 1px solid transparent;
  font-size: 13px; font-weight: 600; transition: all .15s ease; white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primaire { background: var(--plum-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primaire:hover:not(:disabled) { background: var(--plum-800); }
.btn-jade { background: var(--jade-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn-jade:hover:not(:disabled) { background: var(--jade-700); }
.btn-neutre { background: var(--paper); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-neutre:hover:not(:disabled) { border-color: var(--plum-300); background: var(--plum-050); }
.btn-fantome { background: transparent; color: var(--ink-soft); }
.btn-fantome:hover:not(:disabled) { background: var(--plum-050); color: var(--plum-700); }
.btn-danger { background: var(--paper); color: var(--rose-600); border-color: #EFD3DE; }
.btn-danger:hover:not(:disabled) { background: var(--rose-100); }
.btn-mini { padding: 4px 9px; font-size: 11.5px; border-radius: 6px; }

/* ============================ Cartes ============================ */
.carte {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.carte-tete {
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
}
.carte-tete h3 { font-size: 14.5px; font-weight: 600; }
.carte-tete .actions { margin-left: auto; display: flex; gap: 6px; }
.carte-corps { padding: 18px; }
.carte-corps.serre { padding: 0; }

.grille { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1150px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g-2-1, .g3 { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .g2, .g4 { grid-template-columns: 1fr; } }

/* ============================ Stat tiles ============================ */
.tuile {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.tuile::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--plum-600); opacity: .9;
}
.tuile.jade::after { background: var(--jade-600); }
.tuile.rose::after { background: var(--rose-600); }
.tuile.olive::after { background: var(--olive-600); }
.tuile .lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 600;
}
.tuile .val {
  font-family: var(--display); font-size: 28px; font-weight: 600;
  line-height: 1.15; margin-top: 6px; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.tuile .val small { font-size: 15px; color: var(--muted); font-weight: 500; }
.tuile .note { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* ============================ Badges ============================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2.5px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
  letter-spacing: .01em; white-space: nowrap;
}
.badge .pt { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.b-plum { background: var(--plum-100); color: var(--plum-700); }
.b-jade { background: var(--jade-100); color: var(--jade-700); }
.b-rose { background: var(--rose-100); color: var(--rose-600); }
.b-olive { background: var(--olive-100); color: var(--olive-600); }
.b-neutre { background: #F0EBEE; color: var(--ink-soft); }

/* ============================ Tables ============================ */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: 10px 14px; font-size: 13px; }
table.data thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line);
  background: #FCFAFB; position: sticky; top: 0; z-index: 1;
}
table.data tbody tr { border-bottom: 1px solid var(--line-soft); }
table.data tbody tr:last-child { border-bottom: none; }
table.data tbody tr:hover { background: var(--plum-050); }
table.data td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.data .nom-cell { font-weight: 600; }
table.data .sub { font-size: 11.5px; color: var(--muted); }
tr.cliquable { cursor: pointer; }

/* ============================ Listes campagnes ============================ */
.camp-liste { display: grid; gap: 12px; }
.camp {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
}
.camp:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--plum-300); }
.camp .titre { font-family: var(--display); font-size: 16.5px; font-weight: 600; letter-spacing: -.022em; }
.camp .desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.camp .meta { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.camp .meta .m { font-size: 11.5px; color: var(--muted); }
.camp .meta .m b { font-family: var(--mono); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.camp .droite { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

/* ============================ Barres / jauges ============================ */
.jauge { height: 6px; border-radius: 20px; background: var(--line-soft); overflow: hidden; }
.jauge > span { display: block; height: 100%; background: var(--plum-600); border-radius: 20px; transition: width .5s cubic-bezier(.2,.8,.3,1); }
.jauge.jade > span { background: var(--jade-600); }
.jauge.rose > span { background: var(--rose-600); }

.barres { display: flex; flex-direction: column; gap: 9px; }
.barre-ligne { display: grid; grid-template-columns: 110px 1fr 52px; gap: 12px; align-items: center; }
.barre-ligne .lb { font-size: 12px; color: var(--ink-soft); }
.barre-ligne .vl { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--ink); }

/* ============================ Onglets ============================ */
.onglets {
  display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 22px;
  overflow-x: auto;
}
.onglet {
  padding: 9px 15px; font-size: 13px; font-weight: 600; color: var(--muted);
  border: none; background: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
}
.onglet:hover { color: var(--ink); }
.onglet.actif { color: var(--plum-700); border-bottom-color: var(--plum-700); }
.onglet .pastille {
  font-family: var(--mono); font-size: 10px; background: var(--plum-100);
  color: var(--plum-700); padding: 1px 5px; border-radius: 10px; margin-left: 5px;
}

/* ============================ Formulaires ============================ */
.champ { margin-bottom: 14px; }
.champ label {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: .06em;
}
.champ .aide { font-size: 11.5px; color: var(--muted); margin-top: 4px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.saisie, select.saisie, textarea.saisie {
  width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); transition: border-color .15s, box-shadow .15s; font-size: 13px;
}
.saisie:focus { outline: none; border-color: var(--plum-500); box-shadow: 0 0 0 3px var(--plum-100); }
.ligne-champs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ligne-champs.trois { grid-template-columns: repeat(3, 1fr); }

/* ==================== Bulles d'aide (infobulles) ==================== */
.aide-pt {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 50%; flex: 0 0 15px;
  background: var(--plum-100); color: var(--plum-700);
  font-size: 9.5px; font-weight: 700; font-family: var(--sans);
  cursor: help; position: relative; vertical-align: 1px;
  text-transform: none; letter-spacing: 0;
  transition: background .15s ease, color .15s ease;
}
.aide-pt:hover, .aide-pt:focus-visible { background: var(--plum-700); color: #fff; outline: none; }

.aide-pt .bulle {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: 290px; background: var(--plum-950); color: #F3E8EF;
  border-radius: 10px; padding: 11px 13px; z-index: 90;
  font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left;
  letter-spacing: 0; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.aide-pt:hover .bulle, .aide-pt:focus-visible .bulle {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.aide-pt .bulle::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--plum-950);
}
.aide-pt .bulle b { color: #fff; font-weight: 600; }
.aide-pt .bulle .ex {
  display: block; margin-top: 7px; padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.14); color: var(--plum-300); font-size: 11.5px;
}
.aide-pt .bulle .ex::before { content: 'Exemple — '; font-weight: 600; color: var(--jade-500); }
/* Un élément entier peut porter une bulle (pastilles de propriété, tuiles…) */
.a-aide { position: relative; cursor: help; }
.a-aide > .bulle {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: 290px; background: var(--plum-950); color: #F3E8EF;
  border-radius: 10px; padding: 11px 13px; z-index: 90;
  font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left;
  letter-spacing: 0; text-transform: none; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.a-aide:hover > .bulle { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.a-aide > .bulle::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--plum-950);
}
.a-aide > .bulle b { color: #fff; font-weight: 600; }
.a-aide > .bulle .ex {
  display: block; margin-top: 7px; padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.14); color: var(--plum-300); font-size: 11.5px;
}
.a-aide > .bulle .ex::before { content: 'Exemple — '; font-weight: 600; color: var(--jade-500); }

/* Pastilles de propriété : bulle ancrée au bord du chip (jamais centrée), pour
   ne déborder ni sur la sidebar à gauche, ni hors de l'écran à droite. */
.props .prop > .bulle { left: 0; transform: translateX(0) translateY(4px); }
.props .prop:hover > .bulle { transform: translateX(0) translateY(0); }
.props .prop > .bulle::after { left: 18px; transform: none; }
.algo-grille > .algo:nth-child(even) .props .prop > .bulle {
  left: auto; right: 0; transform: translateX(0) translateY(4px);
}
.algo-grille > .algo:nth-child(even) .props .prop > .bulle::after { left: auto; right: 18px; }

/* Les bulles proches du bord droit s'ancrent à droite */
.aide-pt.bulle-gauche .bulle { left: auto; right: -8px; transform: translateX(0) translateY(4px); }
.aide-pt.bulle-gauche:hover .bulle { transform: translateX(0) translateY(0); }
.aide-pt.bulle-gauche .bulle::after { left: auto; right: 12px; transform: none; }

.champ label { display: flex; align-items: center; gap: 6px; }
.carte-tete h3 .aide-pt { margin-left: 2px; }

/* ============================ Modale ============================ */
.voile {
  position: fixed; inset: 0; background: rgba(30, 15, 26, .48); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 100; padding: 24px;
  animation: apparaitre .16s ease;
}
.modale {
  background: var(--paper); border-radius: var(--radius-lg); width: min(660px, 100%);
  max-height: 88vh; overflow: auto; box-shadow: var(--shadow-lg);
  animation: monter .22s cubic-bezier(.2,.8,.3,1);
}
.modale-tete { padding: 18px 22px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; }
.modale-tete h3 { font-family: var(--display); font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; }
.modale-corps { padding: 22px; }
.modale-pied { padding: 14px 22px; border-top: 1px solid var(--line-soft); display: flex; gap: 8px; justify-content: flex-end; background: #FCFAFB; }
@keyframes apparaitre { from { opacity: 0; } }
@keyframes monter { from { opacity: 0; transform: translateY(12px) scale(.99); } }

/* ============================ Justification ============================ */
.justif {
  background: var(--plum-050); border: 1px solid var(--plum-100);
  border-radius: var(--radius); padding: 13px 15px;
}
.justif .raison { font-size: 13px; font-weight: 500; color: var(--ink); }
.justif .facteurs { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.facteur { display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; }
.facteur .t {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  color: var(--plum-600); background: #fff; border: 1px solid var(--plum-100);
  padding: 1px 6px; border-radius: 4px; flex: 0 0 auto;
}
.facteur .d { color: var(--ink-soft); }

/* ============================ Anomalies ============================ */
.anomalie {
  display: flex; gap: 11px; padding: 11px 13px; border-radius: var(--radius);
  border: 1px solid var(--line); margin-bottom: 8px; background: var(--paper);
}
.anomalie.bloquante { border-color: #EFD3DE; background: var(--rose-100); }
.anomalie.alerte { border-color: #E8E2C4; background: var(--olive-100); }
.anomalie .pastille-n {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 5px; height: fit-content; flex: 0 0 auto;
}
.anomalie.bloquante .pastille-n { background: var(--rose-600); color: #fff; }
.anomalie.alerte .pastille-n { background: var(--olive-600); color: #fff; }
.anomalie .msg { font-size: 12.5px; }
.anomalie .sugg { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* ============================ Comparateur ============================ */
.comparateur { overflow-x: auto; }
table.compar { width: 100%; border-collapse: separate; border-spacing: 0; }
table.compar th, table.compar td { padding: 11px 14px; font-size: 13px; text-align: center; border-bottom: 1px solid var(--line-soft); }
table.compar th:first-child, table.compar td:first-child { text-align: left; position: sticky; left: 0; background: var(--paper); z-index: 1; }
table.compar thead th { background: #FCFAFB; font-size: 11.5px; }
table.compar thead th.publie { background: var(--jade-100); }
table.compar td.val { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.compar td.gagnant { background: var(--jade-100); font-weight: 700; color: var(--jade-700); position: relative; }
table.compar td.gagnant::after { content: '★'; font-size: 9px; position: absolute; top: 6px; right: 6px; opacity: .55; }
.axe-lbl { display: flex; flex-direction: column; }
.axe-lbl .sens { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ============================ Algorithmes ============================ */
.algo-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 900px) { .algo-grille { grid-template-columns: 1fr; } }
.algo {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 17px 19px;
  background: var(--paper); box-shadow: var(--shadow-sm);
}
.algo.choisi { border-color: var(--plum-600); box-shadow: 0 0 0 3px var(--plum-100); }
.algo h4 { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.algo .resume { font-size: 12.5px; color: var(--ink-soft); margin: 7px 0 10px; }
.algo .props { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.prop { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
.prop.ok { background: var(--jade-100); color: var(--jade-700); }
.prop.no { background: var(--rose-100); color: var(--rose-600); }
.prop.mid { background: #F0EBEE; color: var(--ink-soft); }
.algo .quand { font-size: 11.5px; color: var(--muted); }
.algo .quand b { color: var(--plum-700); }

/* ============================ Étudiant ============================ */
.etu-entete {
  background: linear-gradient(140deg, var(--plum-800), var(--plum-950));
  color: #fff; border-radius: var(--radius-lg); padding: 26px 28px; margin-bottom: 22px;
}
.etu-entete h1 { font-family: var(--display); font-size: 23px; font-weight: 600; letter-spacing: -.028em; color: #fff; }
.etu-entete .s { color: var(--plum-300); font-size: 13px; margin-top: 5px; }
.resultat-carte {
  border: 1px solid var(--jade-600); background: linear-gradient(160deg, #fff, var(--jade-100));
  border-radius: var(--radius-lg); padding: 22px 24px;
}
.resultat-carte.neutre { border-color: var(--line); background: var(--paper); }
.resultat-carte .obtenu { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -.025em; margin: 4px 0 2px; }

.voeu-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  margin-bottom: 7px;
}
.voeu-item .rang {
  width: 27px; height: 27px; border-radius: 8px; background: var(--plum-700); color: #fff;
  display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600;
  flex: 0 0 27px;
}
.voeu-item .lib { font-weight: 600; font-size: 13px; }
.voeu-item .det { font-size: 11.5px; color: var(--muted); }
.voeu-item .cmds { margin-left: auto; display: flex; gap: 4px; }
.voeu-item.dispo { border-style: dashed; background: #FCFAFB; }

/* ============================ Divers ============================ */
.vide {
  text-align: center; padding: 46px 20px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--paper);
}
.vide .t { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-bottom: 5px; }
.vide .d { font-size: 13px; max-width: 46ch; margin: 0 auto 14px; }

.toast-zone { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--plum-900); color: #fff; padding: 11px 16px; border-radius: 9px;
  box-shadow: var(--shadow-lg); font-size: 13px; max-width: 380px;
  animation: glisser .25s cubic-bezier(.2,.8,.3,1);
}
.toast.err { background: var(--rose-600); }
.toast.ok { background: var(--jade-700); }
@keyframes glisser { from { opacity: 0; transform: translateX(16px); } }

.chargement { display: grid; place-items: center; padding: 60px; color: var(--muted); }
.spin {
  width: 24px; height: 24px; border: 2.5px solid var(--line);
  border-top-color: var(--plum-600); border-radius: 50%; animation: tourner .7s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }

.sep-v { width: 1px; align-self: stretch; background: var(--line); }
.pile { display: flex; flex-direction: column; gap: 4px; }
.rang-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 5px; bottom: 5px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 15px; }
.tl-item::before {
  content: ''; position: absolute; left: -20px; top: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--paper); border: 2px solid var(--plum-500);
}
.tl-item .act { font-size: 12.5px; font-weight: 600; }
.tl-item .det { font-size: 11.5px; color: var(--muted); }

/* ============================ Connexion ============================ */
.login-page {
  min-height: 100vh; width: 100%; display: grid; grid-template-columns: 1.05fr .95fr;
}
@media (max-width: 900px) { .login-page { grid-template-columns: 1fr; } .login-art { display: none; } }
.login-art {
  background: linear-gradient(155deg, var(--plum-800) 0%, var(--plum-950) 62%, #150A12 100%);
  color: #fff; padding: 60px 56px; display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.login-art::after {
  content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(23,149,122,.30), transparent 68%);
  right: -140px; bottom: -130px;
}
.login-art h1 { font-family: var(--display); font-size: 39px; font-weight: 600; line-height: 1.12; letter-spacing: -.038em; }
.login-art .p { color: var(--plum-300); font-size: 15px; margin-top: 16px; max-width: 42ch; line-height: 1.6; }
.login-art .pts { margin-top: 34px; display: flex; flex-direction: column; gap: 13px; position: relative; z-index: 1; }
.login-art .pt-i { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: #E4D3DE; }
.login-art .pt-i .n { color: var(--jade-500); font-family: var(--mono); font-size: 12px; padding-top: 2px; }
.login-form { display: grid; place-items: center; padding: 40px; background: var(--cream); }
.login-box { width: min(380px, 100%); }
.login-box h2 { font-family: var(--display); font-size: 23px; font-weight: 600; letter-spacing: -.028em; margin-bottom: 5px; }
.compte-demo {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 13px;
  background: var(--paper); margin-bottom: 7px; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; gap: 10px;
}
.compte-demo:hover { border-color: var(--plum-500); background: var(--plum-050); }
.compte-demo .r { font-size: 11px; color: var(--muted); }
.compte-demo .e { font-family: var(--mono); font-size: 11.5px; color: var(--plum-700); margin-left: auto; }