:root {
  --bg: #1a1a1a; --card: #242424; --gold: #c9a24d; --gold-light: #e6c675; --gold-dark: #b8892f;
  --text: #f5f1e8; --muted: #a8a39a; --red: #b3403b; --green: #3f9b66; --orange: #c98a2b; --grey: #6b6862;
  --line: rgba(201, 162, 77, 0.3);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Manrope", system-ui, sans-serif; line-height: 1.45; }
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; margin: 0; }
h1 { font-size: 34px; } h2 { font-size: 26px; color: var(--gold); } h3 { font-size: 20px; }
a { color: var(--gold); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px 48px; }
header.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px; border-bottom: 1px solid var(--line); }
.brand { font-family: "Cormorant Garamond", Georgia, serif; font-size: 28px; font-weight: 600; color: var(--gold); text-decoration: none; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
input, select, textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: #1a1a1a; color: var(--text); font: inherit; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 150px; }
button, .btn { min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--gold); background: transparent; color: var(--gold); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button.primary, .btn.primary { background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); color: #1a1a1a; border: 0; }
button.danger { border-color: var(--red); color: #e58a85; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.muted { color: var(--muted); font-size: 14px; }
.price { color: var(--gold); font-weight: 700; font-size: 22px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.tag { border: 1px solid var(--line); border-radius: 14px; padding: 4px 10px; font-size: 12px; }
.msg { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: rgba(201, 162, 77, 0.1); border: 1px solid var(--line); }
.msg.err { background: rgba(179, 64, 59, 0.15); border-color: var(--red); }
.hidden { display: none !important; }
dialog { background: var(--card); color: var(--text); border: 1px solid var(--gold); border-radius: 18px; max-width: 460px; width: calc(100% - 32px); padding: 20px; }
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }

/* Planning */
.planning { overflow-x: auto; }
.pl-table { min-width: 760px; display: grid; gap: 6px; }
.pl-row { display: grid; grid-template-columns: 170px 1fr; align-items: center; }
.pl-days, .pl-track { display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr)); }
.pl-days span { text-align: center; font-size: 12px; color: var(--muted); }
.pl-track { position: relative; height: 52px; border-radius: 10px; background: repeating-linear-gradient(90deg, rgba(63,155,102,.3) 0, rgba(63,155,102,.3) calc(100%/var(--days) - 3px), transparent calc(100%/var(--days) - 3px), transparent calc(100%/var(--days))); }
.pl-bar { margin: 6px 2px; border-radius: 8px; padding: 0 10px; display: flex; align-items: center; font-size: 13px; font-weight: 600; overflow: hidden; white-space: nowrap; border: 0; color: var(--text); min-height: 0; justify-content: flex-start; }
.pl-bar.booking { background: var(--red); cursor: pointer; }
.pl-bar.block { background: var(--grey); }
.pl-free { background: transparent; border: 0; min-height: 0; padding: 0; cursor: pointer; }
.pl-free:hover { background: rgba(63,155,102,.45); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 12px 0; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; }

/* Arabe : lecture de droite à gauche */
[dir="rtl"] body { font-family: "Segoe UI", Tahoma, "Manrope", system-ui, sans-serif; }
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="number"], [dir="rtl"] input[type="date"] { direction: ltr; text-align: right; }
[dir="rtl"] .price, [dir="rtl"] .muted { unicode-bidi: plaintext; }
.stars button { min-height: 44px; padding: 0 12px; font-size: 22px; }
.stars button.on { background: var(--gold); color: #1a1a1a; }

/* Logo Golden Keys : le fond noir du logo se fond dans le fond sombre grâce au mode "screen" */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand::before { content: ""; width: 76px; height: 48px; background: url("logo.jpg") center / contain no-repeat; mix-blend-mode: screen; flex: none; }
.hero-logo { display: block; width: min(360px, 80%); margin: 8px auto 0; mix-blend-mode: screen; }

/* Barre d'administration : en-tête compact + onglets défilants sur mobile */
header.staffbar { display: block; padding: 10px 16px 0; position: sticky; top: 0; z-index: 5; background: var(--bg); }
.staffbar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.staffbar-user { display: flex; align-items: center; gap: 8px; }
button.small, .btn.small { min-height: 36px; padding: 0 12px; font-size: 13px; }
.staffbar-tabs { display: flex; gap: 4px; overflow-x: auto; margin-top: 8px; scrollbar-width: none; }
.staffbar-tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; padding: 12px 16px; color: var(--muted); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--gold); border-bottom-color: var(--gold); }

/* Téléphone */
@media (max-width: 600px) {
  h1 { font-size: 28px; } h2 { font-size: 22px; }
  .wrap { padding: 14px 16px 40px; }
  header.top { padding: 10px 16px; gap: 8px; }
  header.top > .row { width: 100%; flex-wrap: nowrap !important; gap: 8px; }
  header.top > .row > * { flex: 1 1 auto; min-width: 0; }
  header.top button, header.top .btn, header.top select { min-height: 42px; padding: 0 10px; font-size: 14px; }
  .brand { font-size: 24px; }
  .brand::before { width: 60px; height: 38px; }
  .hero-logo { width: 190px; margin-top: 0; }
  .card { padding: 14px; border-radius: 16px; }
  .grid { grid-template-columns: 1fr; }
  dialog { padding: 16px; }
  .tab { padding: 11px 12px; font-size: 14px; }
}

/* En-tête client : boutons à leur taille naturelle, sur une seule ligne */
header.top > .row { flex-wrap: nowrap; align-items: center; }
header.top > .row > * { flex: 0 0 auto; }
header.top > .row select { width: auto; }