:root {
  --bg:#0A0B0F; --s1:#101218; --s2:#171A22; --s3:#20242F;
  --li:#282D3A; --li2:#3A4152;
  --ink:#EDEFF4; --ink2:#A7AFC0; --ink3:#6B7385;
  --ac:#9A82FF; --ac2:#6E4FF0; --ac3:#1C1840; --sur-ac:#FFFFFF;
  --ac-rgb:154,130,255;
  --sur-ok:#041610; --sur-wa:#1E1403; --sur-no:#0B0714;
  --bg-rgb:10,11,15; --ok-rgb:47,217,160; --no-rgb:255,77,100;
  --wa-rgb:247,169,62; --in-rgb:79,168,255;
  --ok:#2FD9A0; --ok3:#082A21;
  --no:#FF4D64; --no3:#2E0D14;
  --wa:#F7A93E; --wa3:#2E2008;
  --in:#4FA8FF; --in3:#08203A;

  --t1:11px; --t2:13px; --t3:15px; --t4:20px; --t5:32px;
  --e1:4px; --e2:8px; --e3:12px; --e4:20px; --e5:32px;
  --r1:6px; --r2:12px; --r3:999px;
  --r-tel:26px;

  --col-lat:260px;
  --ui:'Inter','Segoe UI',system-ui,sans-serif;
  --tt:'DM Serif Display',Georgia,serif;
  --h:38px;
}

.bouton {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--h); padding:0 14px;
  border:1px solid var(--li2); border-radius:var(--r1); background:var(--s3);
  color:var(--ink); font-family:var(--ui); font-size:var(--t2); font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background .12s, border-color .12s, color .12s;
}
.bouton:hover:not(:disabled) { border-color:var(--ac2); color:var(--ac); }

.bouton.primaire { background:var(--ac2); border-color:var(--ac2); color:var(--sur-ac); }
.bouton.primaire:hover:not(:disabled) { background:var(--ac); border-color:var(--ac); color:var(--sur-ac); }
.bouton.valider { background:transparent; border-color:var(--ok); color:var(--ok); }
.bouton.valider:hover:not(:disabled) { background:var(--ok); color:var(--sur-ok); }
.bouton.danger { background:transparent; border-color:var(--no); color:var(--no); }
.bouton.danger:hover:not(:disabled) { background:var(--no); color:var(--sur-no); }
.bouton.discret { background:transparent; border-color:transparent; color:var(--ink3); font-weight:500; }
.bouton.discret:hover:not(:disabled) { background:var(--s2); color:var(--ink); }

.bouton.compact { height:28px; padding:0 10px; font-size:var(--t1); }
.bouton.ico { width:var(--h); padding:0; }
.bouton.ico.compact { width:28px; }
.bouton.large { width:100%; }
.bouton[hidden] { display:none; }

.bouton:disabled { opacity:.45; cursor:not-allowed; }
.bouton.ferme:disabled { opacity:.6; border-style:dashed; }
.bouton.occupe:disabled { opacity:.92; cursor:progress; position:relative; overflow:hidden; }
.bouton.occupe:disabled::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2) 46%, transparent 80%);
  background-size:230% 100%; background-repeat:no-repeat;
  animation:socle-balayage 1.05s linear infinite;
}
@keyframes socle-balayage { from { background-position:230% 0; } to { background-position:-130% 0; } }
@media (prefers-reduced-motion:reduce) {
  .bouton.occupe:disabled::after { animation:none; background:rgba(255,255,255,.12); }
}

.bouton.rond { border-radius:var(--r3); }

@media (max-width:900px) { .bouton { min-height:40px; } .bouton.compact { min-height:34px; } }
@media (max-width:560px) { .fenetre .fen-pied { flex-direction:column-reverse; } .fenetre .fen-pied > .bouton { width:100%; } }

.item {
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:var(--e2);
  width:100%; padding:9px 10px; text-align:left;
  background:var(--s2); border:1px solid var(--li); border-left:3px solid var(--li2);
  border-radius:var(--r1);
  color:var(--ink2); font-family:var(--ui); font-size:var(--t2);
  cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.item:hover:not(:disabled) { border-color:var(--li2); color:var(--ink); }
.item.actif { background:var(--ac3); border-color:var(--ac2); border-left-color:var(--ac); color:var(--ink); font-weight:600; }
.item:disabled { opacity:.45; cursor:not-allowed; }
.item.ferme:disabled { opacity:.6; border-style:dashed; }
.item > .item-fin { margin-left:auto; font-size:var(--t1); color:var(--ink3); font-weight:400; }
.item.empile { flex-direction:column; align-items:stretch; gap:3px; }
.item.centre { justify-content:center; text-align:center; font-weight:600; }
.item.dort > *:not(.mbtn-soon):not(.mbtn-tampon) { opacity:.5; }
.item.dort:hover > *:not(.mbtn-soon):not(.mbtn-tampon) { opacity:.75; }

.colonne {
  width:var(--col-lat); flex-shrink:0; min-height:0;
  display:flex; flex-direction:column;
  background:var(--s1); border-right:1px solid var(--li);
  overflow-y:auto; overflow-x:hidden;
}
.colonne.droite { border-right:none; border-left:1px solid var(--li); }
.colonne.garnie { padding:var(--e4); gap:var(--e3); }
.colonne.fixe { overflow:hidden; }

.rangee { display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2); }

.duo { display:grid; grid-template-columns:1fr 1fr; gap:var(--e2); }

.voile {
  display:none; position:fixed; inset:0; z-index:500;
  align-items:center; justify-content:center; padding:var(--e5);
  background:rgba(0,0,0,.74);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.voile.open { display:flex; animation:socle-voile-entre .18s ease; }
.voile.closing { animation:socle-voile-sort .16s ease forwards; }
.voile.open > .fenetre { animation:socle-fenetre-entre .26s cubic-bezier(.2,.9,.3,1.25); }
.voile.closing > .fenetre { animation:socle-fenetre-sort .16s ease forwards; }
@keyframes socle-voile-entre { from { opacity:0; } to { opacity:1; } }
@keyframes socle-voile-sort { from { opacity:1; } to { opacity:0; } }
@keyframes socle-fenetre-entre { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes socle-fenetre-sort { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(8px) scale(.98); } }
@media (prefers-reduced-motion:reduce) {
  .voile.open, .voile.closing, .voile.open > .fenetre, .voile.closing > .fenetre { animation:none; }
}

.fenetre {
  position:relative;
  width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  background:var(--s1); border:1px solid var(--li2); border-radius:var(--r2);
  box-shadow:0 24px 64px -20px #000;
}
.fenetre.etroite { max-width:420px; }
.fenetre.moyenne { max-width:640px; }
.fenetre.grande  { max-width:860px; }
.fenetre.pleine  { max-width:min(1240px, 96vw); }

.fenetre.defile { display:flex; flex-direction:column; overflow:hidden; }
.fenetre.defile > .fen-tete, .fenetre.defile > .fen-pied { flex-shrink:0; }
.fenetre.defile > .fen-corps { flex:1 1 auto; min-height:0; overflow-y:auto; }

.fenetre .fen-x {
  position:absolute; top:var(--e3); right:var(--e3); z-index:6;
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0;
  background:var(--s2); border:1px solid var(--li); border-radius:var(--r1);
  color:var(--ink3); font-family:var(--ui); font-size:var(--t4); line-height:1;
  cursor:pointer; transition:background .12s, border-color .12s, color .12s;
}
.fenetre .fen-x:hover { background:var(--s3); border-color:var(--li2); color:var(--ink); }
.fenetre .fen-tete {
  display:flex; align-items:center; gap:var(--e2);
  padding:var(--e3); border-bottom:1px solid var(--li);
  font-size:var(--t4); font-weight:600; color:var(--ink);
}
.fenetre .fen-tete .bouton { margin-left:auto; }
.fenetre .fen-corps {
  display:flex; flex-direction:column; gap:var(--e3);
  padding:var(--e3); font-size:var(--t2); color:var(--ink2);
}
.fenetre .fen-pied {
  display:flex; justify-content:flex-end; gap:var(--e2);
  padding:var(--e3); border-top:1px solid var(--li); background:var(--s2);
}

.notification {
  display:flex; align-items:center; gap:var(--e2); max-width:420px;
  padding:9px var(--e3);
  background:var(--s3); border:1px solid var(--li2); border-left:3px solid var(--ink3);
  border-radius:var(--r1); font-size:var(--t2); color:var(--ink);
}
.notification.ok { border-left-color:var(--ok); }
.notification.danger { border-left-color:var(--no); }
.notification.attention { border-left-color:var(--wa); }
.notification.info { border-left-color:var(--ac); }

.bandeau {
  display:flex; gap:var(--e2);
  padding:var(--e2) var(--e3);
  background:var(--wa3); border:1px solid var(--li2); border-left:3px solid var(--wa);
  border-radius:var(--r1); font-size:var(--t2); color:var(--ink2);
}
.bandeau b { color:var(--ink); }
.bandeau.danger { background:var(--no3); border-left-color:var(--no); }
.bandeau.info { background:var(--in3); border-left-color:var(--in); }
.bandeau.ok { background:var(--ok3); border-left-color:var(--ok); }

.bulle {
  max-width:min(300px, 86vw); padding:6px 10px;
  background:var(--s3); border:1px solid var(--li2); border-radius:var(--r1);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.85);
  font-family:var(--ui); font-size:var(--t1); font-weight:400; font-style:normal;
  line-height:1.5; letter-spacing:normal; text-transform:none; text-align:left;
  color:var(--ink);
}
.bulle b, .bulle strong { color:var(--ink); font-weight:600; }
.bulle .bulle-sep { display:block; height:1px; margin:6px 0; background:var(--li); }

.bulle.flottante { position:fixed; z-index:1900; pointer-events:none; }
.bulle.accent { background:var(--ac); border-color:var(--ac); color:var(--sur-ac); font-weight:500; }

.bulle-hote { position:relative; display:inline-block; }
.bulle-hote > .bulle {
  position:absolute; bottom:calc(100% + 8px); left:50%; translate:-50% 0;
  z-index:900; pointer-events:none;
  opacity:0; visibility:hidden; transform:translateY(3px);
  transition:opacity .14s, transform .14s, visibility .14s;
}
.bulle-hote:hover > .bulle,
.bulle-hote:focus-visible > .bulle { opacity:1; visibility:visible; transform:translateY(0); }

.carte {
  background:var(--s1); border:1px solid var(--li); border-radius:var(--r2);
  overflow:hidden;
}
.carte > .carte-tete {
  display:flex; align-items:center; gap:var(--e2);
  padding:10px var(--e3); border-bottom:1px solid var(--li);
  font-size:var(--t1); font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink2);
}
.carte > .carte-corps { display:flex; flex-direction:column; gap:var(--e3); padding:var(--e3); }

.champ { display:flex; flex-direction:column; gap:5px; }
.champ > label {
  font-size:var(--t1); color:var(--ink3);
  letter-spacing:.06em; text-transform:uppercase;
}
.controle,
.champ > input, .champ > select, .champ > textarea {
  width:100%; height:var(--h); padding:0 10px;
  background:var(--s2); border:1px solid var(--li); border-radius:var(--r1);
  color:var(--ink); font-family:var(--ui); font-size:var(--t3);
}
.champ.ligne { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:var(--e2); font-size:var(--t2); color:var(--ink2); }
.champ.ligne > input, .champ.ligne > select, .champ.ligne > textarea { grid-column:2; }
.champ.menu > input, .champ.menu > select, .champ.menu > textarea,
.controle.menu { height:28px; padding:0 8px; font-size:var(--t2); }
.champ > textarea { height:auto; min-height:76px; padding:9px 10px; line-height:1.5; resize:vertical; }
.champ > input:focus, .champ > select:focus, .champ > textarea:focus { border-color:var(--ac2); }
.champ > .champ-aide { font-size:var(--t1); color:var(--ink3); }

.pastille {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border:1px solid var(--li2); border-radius:var(--r3);
  background:var(--s3); color:var(--ink3);
  font-size:var(--t1); font-weight:600;
}
.pastille.ok { color:var(--ok); border-color:var(--ok); background:var(--ok3); }
.pastille.danger { color:var(--no); border-color:var(--no); background:var(--no3); }
.pastille.attention { color:var(--wa); border-color:var(--wa); background:var(--wa3); }
.pastille.info { color:var(--in); border-color:var(--in); background:var(--in3); }

.segment {
  display:flex; gap:var(--e1); padding:3px;
  background:var(--s2); border:1px solid var(--li); border-radius:var(--r1);
}
.segment > button {
  flex:1; height:30px; border:0; border-radius:4px; background:none;
  color:var(--ink3); font-family:var(--ui); font-size:var(--t2); font-weight:600; cursor:pointer;
}
.segment > button.actif { background:var(--s3); color:var(--ink); box-shadow:inset 0 0 0 1px var(--li2); }

.bascule { display:flex; align-items:center; gap:var(--e2); font-size:var(--t2); color:var(--ink2); cursor:pointer; }
.bascule > i {
  position:relative; flex:0 0 auto; width:34px; height:19px;
  background:var(--s3); border:1px solid var(--li2); border-radius:var(--r3);
  transition:background .15s;
}
.bascule > i::after {
  content:""; position:absolute; top:2px; left:2px; width:13px; height:13px;
  background:var(--ink3); border-radius:50%; transition:left .15s, background .15s;
}
.bascule.actif > i { background:var(--ac3); border-color:var(--ac2); }
.bascule.actif > i::after { left:17px; background:var(--ac); }