:root{
  --blue:#1f7dbf; --teal:#1e8e87; --amber:#f59e0b; --rose:#f59e0b;
  --bg:#ffffff; --card:#cbcbcb; --panel:#ffffff; --muted:#1e8e87; --text:#1f7dbf;
  --seat:#1b2a55; --seat-hover:#22336a; --shadow:0 1px 2px rgba(0,0,0,.35);
  --glass:rgba(255,255,255,.06); --border:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
body{
  margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:
    radial-gradient(900px 600px at 15% -10%, #ffffff 0%, #ffffff 60%),
    radial-gradient(700px 500px at 120% 10%, #ffffff 0%, #ffffff 40%),
    var(--bg);
}
.container{max-width:1200px;margin:0 auto;padding:24px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:60px;height:60px}
h1{margin:0;font-size:24px;font-weight:800}
.muted{color:var(--muted);font-size:13px}

.rowContainer { display: flex; align-items: center; gap: 10px; }
.rowNumber { width: 24px; text-align: right; font-weight: 700; color: var(--muted); font-size: 12px; user-select: none; }

.controls{
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;min-width:640px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--border);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow)
}
.select{appearance:none;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-weight:700;color:var(--text)}

.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sliderWrap{display:flex;flex-direction:column;gap:6px;width:100%}
.sliderWrap input[type="range"]{width:100%}

.btnbar{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;width:100%}
.btn{border:none;border-radius:14px;height:42px;padding:0 16px;font-weight:900;letter-spacing:.2px;color:#fff;cursor:pointer;
      box-shadow:0 10px 24px rgba(0,0,0,.25);display:inline-flex;align-items:center;gap:8px;transition:transform .06s, filter .2s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg, var(--blue), #3aa0e8)}
.btn.teal{background:linear-gradient(135deg, var(--teal), #49c0b7)}
.btn.rose{background:linear-gradient(135deg, var(--rose), #eec47d)}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.1) brightness(.8)}

.layout{display:grid;grid-template-columns:360px 1fr;gap:18px}
@media (max-width:980px){.layout{grid-template-columns:1fr}}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:var(--shadow)
}

.scoreRow{display:flex;justify-content:space-between;align-items:center;gap:12px}
.scoreGroup{display:flex;align-items:baseline;gap:10px}
.scoreLabel{font-size:12px;color:var(--muted);font-weight:700}
.scoreVal{font-weight:900;font-size:28px}
.deltaInline{font-size:12px;font-weight:800;color:var(--muted)}
.hide{display:none}
.mixline{margin-top:10px;font-size:12px;color:var(--muted);font-weight:700}

.meter{position:relative;height:14px;background:#0f1530;border-radius:999px;overflow:hidden;border:1px solid var(--border);margin-top:6px}
.meter>div{height:100%;width:0;background:linear-gradient(90deg, var(--teal), #64e3d6, #9cd8ff)}

.legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%}
.dot.work{background:#7FB3D5}
.dot.sleep{background:#dcc1e0}
.dot.social{background:#F5B7B1}
.dot.socialp{background:#82E0AA}
.dot.idk{background:#cbd5e1}

.map{padding:16px}
.seats{display:grid;gap:10px;justify-content:center;align-content:start}
.rowSeats{display:grid;gap:10px;grid-auto-flow:column;justify-content:center;align-items:center}
.aisle{width:24px}
.seat{position:relative;width:46px;height:50px;border-radius:12px;background:var(--seat);display:grid;place-items:center;
      border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:transform .08s, background .2s}
.seat:hover{background:var(--seat-hover);transform:translateY(-2px)}
.seat .label{font-weight:900;color:#cfe3ff}
.seat.premium::after{content:"★";position:absolute;top:-8px;right:-8px;font-size:13px;background:linear-gradient(135deg,#ffd166,#ffeaa7);
  color:#6b4d00;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(0,0,0,.25);box-shadow:0 6px 14px rgba(0,0,0,.35)}
.seat.unknown::before{content:"?";position:absolute;top:-8px;left:-8px;font-size:12px;background:#eef2ff;color:#334155;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;border:1px solid #cbd5e1;box-shadow:0 4px 10px rgba(0,0,0,.2)}
/* Garder l'étoile telle quelle */
.seat.premium::after{
  content:"★";
  position:absolute;
  top:-8px;
  right:-8px;
  font-size:13px;
  background:linear-gradient(135deg,#ffd166,#ffeaa7);
  color:#6b4d00;
  width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(0,0,0,.25);
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  z-index:2;
}

/* Mettre le cadenas en haut-gauche avec ::before */
.seat.locked::before{
  content:"🔒";
  position:absolute;
  top:-10px;
  left:-10px;
  font-size:14px;
  background:#e2e8f0;
  color:#0f172a;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid #cbd5e1;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  z-index:3;             /* au-dessus de la pastille si besoin */
  pointer-events:none;   /* ne bloque pas les clics sur la case */
}
.seat[data-mood="work"]{background:linear-gradient(180deg,#7FB3D5,#3f5f77)}
.seat[data-mood="sleep"]{background:linear-gradient(180deg,#dcc1e0,#806e84)}
.seat[data-mood="social"]{background:linear-gradient(180deg,#F5B7B1,#8a5a57)}
.seat[data-mood="social+"]{background:linear-gradient(180deg,#82E0AA,#3b7a60)}
.seat[data-mood="idk"]{background:linear-gradient(180deg,#cbd5e1,#64748b)}
.separator{height:1px;margin:12px 0;background:linear-gradient(90deg, transparent, #5a66a055, transparent)}

.footer{margin-top:10px;color:var(--muted);font-size:12px}

/* Modal */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:50}
.modal{
  width:min(700px, 92vw);
  background:#ffffff;
  border:1px solid #e5e7eb;border-radius:16px;padding:16px;
  box-shadow:0 24px 50px rgba(0,0,0,0.15); color:#0f172a;
}
.modal h3{margin:0 0 14px 0}
.modal-top{justify-content:space-between}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal label{font-size:12px;color:#0f766e}
.modal input,.modal select{
  width:100%;background:#ffffff;color:#0f172a;border:1px solid #d1d5db;border-radius:10px;padding:10px 12px;
  font-weight:500;box-shadow:inset 0 1px 2px rgba(0,0,0,0.05);transition:border-color .2s, box-shadow .2s;
}
.modal input:focus,.modal select:focus{outline:none;border-color:#1f7dbf;box-shadow:0 0 0 2px rgba(31,125,191,0.25)}
.rowLine{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.switch{display:flex;align-items:center;gap:8px}
.typeWrap{display:flex;flex-direction:column;gap:6px;min-width:220px}
.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.modal .btn { color:#fff!important; font-weight:700; }

/* Mood pills */
.mood-group{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:12px;
}
.mood-group .pill{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; color:#0f172a; cursor:pointer; user-select:none;
  transition:border-color .2s, box-shadow .2s, transform .05s;
}
.mood-group .pill:hover{ border-color:#cbd5e1; box-shadow:0 1px 2px rgba(0,0,0,.06); transform:translateY(-1px) }
.mood-group .pill input{ appearance:none; width:16px; height:16px; border:2px solid #94a3b8; border-radius:4px; display:inline-block; }
.mood-group .pill input:checked{ background:#1f7dbf; border-color:#1f7dbf; box-shadow:inset 0 0 0 2px #fff; }