:root {
  --espresso: #3b2f2a;
  --cafe: #6f4e37;
  --caramel: #a47148;
  --creme: #f5f0e8;
  --creme-2: #efe7da;
  --blanc: #fffdf9;
  --trait: #e0d6c6;
  --vert: #5b7a52;
  --rouge: #9c5b4f;
  --ombre: 0 8px 24px rgba(59, 47, 42, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--espresso);
  background: var(--creme);
  line-height: 1.5;
}

a { color: var(--cafe); }

/* ---------- En-tête ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  background: var(--blanc);
  border-bottom: 1px solid var(--trait);
}
.topbar img { height: 46px; }
.topbar h1 {
  font-size: 1.15rem;
  margin: 0;
  letter-spacing: 0.3px;
}
.topbar .role {
  font-size: 0.85rem;
  color: var(--caramel);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.topbar .status {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--cafe);
  white-space: nowrap;
}
.topbar .status.ok { color: var(--vert); }
.topbar .status.ko { color: var(--rouge); }

/* ---------- Barre de salon ---------- */
.salon-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: var(--ombre);
}
.salon-bar > div { flex: 1; }
.salon-bar label { margin: 0 0 6px; }
.salon-bar input { width: 100%; }
.salon-bar .btn { white-space: nowrap; }

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* ---------- Accueil ---------- */
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}
.home img.logo { width: 230px; max-width: 70vw; margin-bottom: 10px; }
.home h1 { font-size: 2rem; margin: 0 0 6px; }
.home p { color: var(--cafe); margin: 0 0 32px; }
.choices { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.choice {
  display: block;
  text-decoration: none;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 16px;
  padding: 26px 30px;
  min-width: 210px;
  box-shadow: var(--ombre);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.choice:hover { transform: translateY(-3px); border-color: var(--caramel); }
.choice .emoji { font-size: 2.2rem; }
.choice strong { display: block; font-size: 1.1rem; margin: 8px 0 4px; color: var(--espresso); }
.choice span { font-size: 0.85rem; color: var(--cafe); }

/* ---------- Cartes ---------- */
.card {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--ombre);
  margin-bottom: 20px;
}
.card h2 { margin: 0 0 16px; font-size: 1.1rem; }

/* ---------- Formulaire ---------- */
label { display: block; font-size: 0.85rem; font-weight: 600; margin: 14px 0 6px; }
input[type="text"], textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--trait);
  border-radius: 10px;
  font: inherit;
  background: var(--creme);
  color: var(--espresso);
}
textarea { resize: vertical; min-height: 70px; }

.segment { display: flex; gap: 8px; flex-wrap: wrap; }
.segment button {
  flex: 1;
  min-width: 90px;
  padding: 10px;
  border: 1px solid var(--trait);
  background: var(--creme);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  color: var(--espresso);
}
.segment button.active {
  background: var(--cafe);
  color: var(--blanc);
  border-color: var(--cafe);
}

.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 150px; }

.check { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.check input { width: auto; }
.check label { margin: 0; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--cafe);
  color: var(--blanc);
  transition: filter 0.15s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.full { width: 100%; margin-top: 22px; }
.btn.green { background: var(--vert); }
.btn.ghost { background: transparent; color: var(--cafe); border: 1px solid var(--trait); }

/* ---------- Barre de chargement ---------- */
.loader { margin-top: 24px; text-align: center; }
.loader p { margin: 0 0 10px; color: var(--cafe); font-size: 0.9rem; }
.bar {
  height: 12px;
  background: var(--creme-2);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--trait);
}
.bar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--caramel), var(--cafe));
  transition: width 0.4s linear;
}

/* ---------- Commandes (stagiaire) ---------- */
.empty { text-align: center; color: var(--cafe); padding: 40px 0; }
.order {
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
  background: var(--blanc);
}
.order .head { display: flex; align-items: baseline; gap: 10px; }
.order .head strong { font-size: 1.05rem; }
.order .badge {
  margin-left: auto;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--creme-2);
  color: var(--cafe);
}
.order .badge.accepted { background: #e7eede; color: var(--vert); }
.order .badge.done { background: #e7eede; color: var(--vert); }
.order .badge.rated { background: #f0e3d2; color: var(--caramel); }
.order .specs { font-size: 0.9rem; color: var(--cafe); margin: 8px 0; }
.order .msg {
  font-style: italic;
  background: var(--creme);
  border-left: 3px solid var(--caramel);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 10px 0;
}
.order .actions { display: flex; gap: 10px; margin-top: 14px; }

/* ---------- Refuser : bouton bien visible mais bloqué "en construction" ---------- */
.refuse-zone {
  position: relative;
  flex: 1;
  display: flex;
}
/* On voit clairement le vrai bouton Refuser… en rouge, désactivé. */
.refuse-zone .btn {
  width: 100%;
  background: var(--rouge);
  color: #fff;
  opacity: 1;
}
/* …recouvert d'un ruban de chantier semi-transparent : on comprend qu'il est bloqué. */
.refuse-zone .construction {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  cursor: not-allowed;
  overflow: hidden;
  border: 2px solid #2b2b2b;
}
.refuse-zone .construction::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(244, 226, 161, 0.7),
    rgba(244, 226, 161, 0.7) 11px,
    rgba(43, 43, 43, 0.7) 11px,
    rgba(43, 43, 43, 0.7) 22px
  );
}
.refuse-zone .construction span {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5a4d18;
  background: #fffdf6;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid #d8c98a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  white-space: nowrap;
}
/* Petite légende sous les boutons pour expliquer la blague */
.refuse-note {
  font-size: 0.78rem;
  color: var(--cafe);
  margin-top: 8px;
  font-style: italic;
  opacity: 0.85;
}

/* ---------- Étoiles ---------- */
.stars { display: flex; gap: 6px; margin-top: 10px; font-size: 1.8rem; }
.stars .star { cursor: pointer; color: var(--trait); transition: color 0.1s ease; }
.stars .star.on { color: #e3aa2f; }
.stars.locked .star { cursor: default; }

.note { font-size: 0.85rem; color: var(--cafe); margin-top: 8px; }

.back { display: inline-block; margin-top: 10px; font-size: 0.85rem; }

/* ---------- Portail mot de passe ---------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(59, 47, 42, 0.55);
  backdrop-filter: blur(4px);
}
.gate-box {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 18px;
  padding: 32px 28px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: var(--ombre);
}
.gate-box img { height: 56px; margin-bottom: 6px; }
.gate-box h2 { margin: 0 0 8px; }
.gate-box p { color: var(--cafe); font-size: 0.9rem; margin: 0 0 16px; }
.gate-box input { text-align: center; }
.gate-err {
  display: none;
  color: var(--rouge) !important;
  font-weight: 600;
  margin-top: 12px !important;
}
.shake { animation: shake 0.4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* ---------- Fiche de paie + burnout (stagiaire) ---------- */
.paie {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--ombre);
}
.paie-stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--cafe);
}
.burnout { margin-top: 12px; }
.burnout-label {
  font-size: 0.78rem;
  color: var(--cafe);
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
}
.greve-btn { margin-top: 14px; width: 100%; }
.greve-banner {
  background: #2b2b2b;
  color: #f4e2a1;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
}

/* ---------- Commande urgente ---------- */
.order.urgent { border-color: #d88b3a; box-shadow: 0 0 0 2px rgba(216,139,58,0.25); }
.fire {
  font-size: 0.72rem;
  font-weight: 800;
  color: #c2492f;
  letter-spacing: 0.5px;
}

/* ---------- Préparation animée ---------- */
.prep { margin-top: 12px; }
.prep-step { margin: 0 0 8px; font-size: 0.88rem; color: var(--cafe); font-weight: 600; }
.prep .bar > i { transition: width 0.3s linear; }
.spit {
  margin-top: 10px;
  background: none;
  border: 1px dashed #c9b89a;
  color: #9a8a6a;
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}
.spit:hover { opacity: 1; color: var(--rouge); border-color: var(--rouge); }

/* ---------- Réactions notation + pourboire ---------- */
.reaction { font-size: 1rem; margin-top: 12px; font-weight: 600; }
.pourboire {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--trait);
}
.pourboire p { margin: 0 0 8px; font-size: 0.9rem; color: var(--cafe); }

/* ---------- Citation ---------- */
.citation {
  text-align: center;
  font-style: italic;
  color: var(--cafe);
  opacity: 0.8;
  font-size: 0.85rem;
  margin-top: 24px;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--espresso);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 0.9rem;
  box-shadow: var(--ombre);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
  max-width: 90vw;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Pluie de tasses ---------- */
.cup-fall {
  position: fixed;
  top: -40px;
  z-index: 150;
  pointer-events: none;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(360deg); opacity: 0.9; }
}