:root {
  --bg:#0d1016;
  --card:#171a21;
  --soft:#202532;
  --text:#f6f3ee;
  --muted:#b7b1a5;
  --primary:#d7a36d;
  --gold:#f3d8b4;
  --border:#2a3040;
  --success:#56c288;
  --danger:#ff7676;
  --pending:#f6c453;
  --shadow:0 20px 50px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top,#202636 0,#0d1016 45%);color:var(--text);font-family:Inter,Arial,sans-serif}
a{text-decoration:none;color:inherit}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;padding:14px;border-radius:14px;border:1px solid var(--border);background:#0d1016;color:var(--text)}
button{border:none;cursor:pointer}
label span{display:block;margin-bottom:7px;color:var(--muted);font-size:.94rem}
.app-shell{max-width:1380px;margin:0 auto;padding:24px}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:18px 0;gap:20px}
.site-header nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.site-header nav a{color:var(--muted)}
.site-header nav a:hover{color:var(--text)}
.brand{display:flex;gap:14px;align-items:center}
.brand small{display:block;color:var(--muted)}
.brand-mark{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#111722,#1b2130);border:1px solid rgba(255,255,255,.06);overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.hero-card,.card{background:rgba(23,26,33,.88);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow)}
.hero-card{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;border-radius:32px;padding:38px;align-items:center}
.hero-card h1,.page-head h1,.success-card h1,.manage-card h1{font-size:clamp(2rem,5vw,4rem);margin:.2em 0}
.lead{font-size:1.05rem;color:var(--muted);line-height:1.6;max-width:68ch}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:16px;font-weight:700}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--gold));color:#17120c}
.btn-ghost{background:#0e131b;border:1px solid var(--border);color:var(--text)}
.btn-mini{padding:10px 12px;border-radius:12px;font-size:.92rem}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pill,.mode-pill{padding:10px 14px;background:#111722;border:1px solid var(--border);border-radius:999px;color:var(--muted)}
.vip-pill{color:#22180b;background:linear-gradient(135deg,var(--primary),var(--gold));border:none}
.mode-pill.mode-manual{border-color:rgba(246,196,83,.35);color:var(--pending)}
.mode-pill.mode-automatic{border-color:rgba(86,194,136,.35);color:var(--success)}
.hero-photo-stack{display:grid;grid-template-columns:1.3fr .9fr;gap:16px;min-height:360px}
.hero-photo{border-radius:26px;background-size:cover;background-position:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.hero-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.35))}
.hero-photo-main{min-height:360px}
.hero-photo-side{min-height:260px;align-self:end}
.grid-3,.grid-4,.grid-2,.customer-book-grid,.customer-grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{border-radius:24px;padding:24px}
.booking-grid{display:grid;grid-template-columns:.82fr 1.38fr;gap:24px;align-items:start}
.sticky-card{position:sticky;top:20px}
.stack{display:flex;flex-direction:column}
.gap-12{gap:12px}
.gap-24{gap:24px}
.compact-form input,.compact-form textarea{padding:11px}
.muted{color:var(--muted)}
.slot-list,.table-grid{display:grid;gap:10px}
.slot-btn,.table-pill{padding:13px 14px;border-radius:14px;border:1px solid var(--border);background:#111722;color:var(--text);cursor:pointer;text-align:left}
.slot-btn.active,.table-pill.active,.scene-table.selected{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset,0 0 18px rgba(215,163,109,.35)}
.selection-box{padding:16px;border-radius:18px;background:#111722;border:1px solid var(--border)}
.page-head{margin:18px 0 20px}.eyebrow{color:var(--primary);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}
.center-wrap{display:grid;place-items:center;min-height:70vh}.success-card,.manage-card{max-width:760px;width:100%}
.summary-list{display:grid;gap:12px}
.summary-list div,.source-list div,.reservation-item,.note-item{display:flex;justify-content:space-between;gap:18px;padding:14px;border-radius:16px;background:#111722;border:1px solid var(--border)}
.summary-list span,.source-list span{color:var(--muted)}.metric span{display:block;color:var(--muted)}.metric strong{font-size:2rem;margin-top:8px;display:block}
.reservation-list{display:grid;gap:12px}.reservation-item p,.customer-card-mini p{margin:.35em 0 0;color:var(--muted)}
.action-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.status-chip{padding:8px 11px;border-radius:999px;font-size:.86rem}
.status-confirmed{background:rgba(86,194,136,.12);color:var(--success)}
.status-seated,.status-completed,.status-instal-l-e,.status-termin-e{background:rgba(212,163,115,.16);color:var(--primary)}
.status-no-show,.status-no_show,.status-annul-e,.status-cancelled{background:rgba(255,118,118,.12);color:var(--danger)}
.status-pending,.status-en-attente{background:rgba(246,196,83,.16);color:var(--pending)}
.room-box{padding:14px;border-radius:16px;background:#111722;border:1px solid var(--border);margin-bottom:12px}
.table-mini-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.table-mini-grid span{padding:8px 10px;background:#0d1016;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.flash-wrap{display:grid;gap:10px;margin-bottom:18px}.flash{padding:14px 16px;border-radius:16px;background:#111722;border:1px solid var(--border)}.flash.success{border-color:rgba(86,194,136,.4)}.flash.error{border-color:rgba(255,118,118,.4)}
.mt-24{margin-top:24px}.mt-16{margin-top:16px}.split-head{display:flex;justify-content:space-between;gap:18px;align-items:center}.compact-head{align-items:flex-start}
.legend-row{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.92rem}.dot{display:inline-block;width:10px;height:10px;border-radius:999px;background:#51607b;margin-right:6px}.dot.free{background:var(--success)}.dot.selected{background:var(--primary)}
.room-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.room-tab{padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:#0f141d;color:var(--muted)}.room-tab.active{background:linear-gradient(135deg,rgba(215,163,109,.18),rgba(243,216,180,.07));color:var(--text);border-color:rgba(215,163,109,.55)}
.scene-wrapper{position:relative}.room-scene{display:none}.room-scene.active{display:block}
.scene-backdrop{position:relative;height:560px;border-radius:28px;border:1px solid rgba(255,255,255,.08);overflow:hidden;background:#181d27;background-size:cover;background-position:center}
.scene-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.18) 55%,rgba(0,0,0,.42) 100%)}
.scene-photo.scene-salle-principale{background-image:url('/static/img/restaurant-interior.jpg');background-position:center center}
.scene-photo.scene-terrasse{background-image:url('/static/img/restaurant-exterior.jpg');background-position:center center}
.scene-photo.scene-salon-prive{background-image:url('/static/img/restaurant-interior.jpg');background-position:right center}
.scene-caption{position:absolute;left:24px;bottom:22px;display:grid;gap:6px;z-index:2;max-width:420px}.scene-caption strong{font-size:1.4rem}.scene-caption span{color:#ece1d0}
.scene-table{position:absolute;transform:translate(-50%,-50%);width:78px;height:78px;padding:0 10px;border-radius:999px;background:rgba(17,23,34,.84);border:2px solid rgba(255,255,255,.18);color:var(--text);display:grid;place-items:center;z-index:2;transition:all .2s ease}
.scene-table.is-square{border-radius:22px;width:88px;height:72px}
.scene-table.available{border-color:rgba(86,194,136,.8);box-shadow:0 0 0 1px rgba(86,194,136,.35) inset,0 8px 24px rgba(0,0,0,.35)}
.scene-table:not(.available){opacity:.26;pointer-events:none}
.scene-table:hover.available{transform:translate(-50%,-50%) scale(1.05)}
.scene-table span{font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.table-grid-v4{grid-template-columns:repeat(2,1fr)}.table-card{display:grid;gap:5px}.table-card small{color:var(--gold)}
.dashboard-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:24px}.mode-switch-card{display:grid;gap:10px;padding:18px;border-radius:20px;background:#111722;border:1px solid var(--border);min-width:330px}.toggle-row{display:grid;gap:10px;color:var(--muted)}.feature-card{min-height:170px}
.customer-grid{grid-template-columns:repeat(3,1fr)}.customer-card-mini,.customer-book-card{background:#111722;border:1px solid var(--border);border-radius:18px;padding:16px}.customer-book-grid{grid-template-columns:repeat(2,1fr)}
.compact-summary div{padding:12px}.journal-note{padding:14px;border-radius:16px;background:#111722;border:1px solid var(--border);line-height:1.5}.note-list,.mini-history{display:grid;gap:10px}.note-item{display:block}.note-item strong,.note-item small,.mini-history strong,.mini-history span{display:block}.note-item p{margin:.5em 0;color:var(--muted)}.mini-history div{padding:12px;border-radius:14px;background:#0e131b;border:1px solid var(--border)}.mini-history span{margin-top:5px;color:var(--muted)}
.hidden{display:none !important}.admin-links{display:flex;gap:12px;flex-wrap:wrap}.inline-search{display:flex;gap:12px;align-items:center}.inline-search input{min-width:300px}.manage-wrap{align-items:start}
@media (max-width: 1100px){.hero-card,.booking-grid,.grid-3,.grid-4,.grid-2,.dashboard-grid,.table-grid-v4,.customer-book-grid,.customer-grid,.hero-photo-stack{grid-template-columns:1fr}.site-header{flex-direction:column;align-items:flex-start}.sticky-card{position:static}.scene-backdrop{height:380px}.inline-search{width:100%;flex-direction:column;align-items:stretch}}


.booking-grid-v8{display:grid;gap:22px;grid-template-columns:1fr}
.booking-step{display:none}.booking-step.active{display:block}
.stepper-card{margin-bottom:22px;background:rgba(23,26,33,.72);border:1px solid rgba(255,255,255,.07);border-radius:26px;padding:14px 18px;box-shadow:var(--shadow)}
.booking-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step-pill{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:#111722;border:1px solid var(--border);color:var(--muted);text-align:left}
.step-pill span{width:34px;height:34px;border-radius:999px;background:#0d1016;border:1px solid var(--border);display:grid;place-items:center;color:var(--gold);font-weight:800}
.step-pill strong{font-size:.95rem}
.step-pill.active{border-color:rgba(215,163,109,.55);background:linear-gradient(135deg,rgba(215,163,109,.18),rgba(243,216,180,.06));color:var(--text)}
.step-pill.done{border-color:rgba(86,194,136,.45);color:var(--text)}
.step-pill.done span{background:rgba(86,194,136,.16);color:var(--success)}
.step-badge{padding:10px 12px;border-radius:999px;background:#111722;border:1px solid var(--border);color:var(--gold);font-size:.85rem}
.scene-topdown{height:620px;background-size:cover;background-position:center}
.scene-overlay-light{background:linear-gradient(180deg,rgba(12,14,18,.08),rgba(12,14,18,.14) 55%,rgba(12,14,18,.24) 100%)}
.scene-caption-top{top:22px;left:22px;bottom:auto;max-width:460px;background:rgba(17,23,34,.72);backdrop-filter:blur(12px);padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.08)}
.scene-topdown.scene-salle-principale{background-image:url('/static/img/topdown-main.svg')}
.scene-topdown.scene-terrasse{background-image:url('/static/img/topdown-terrace.svg')}
.scene-topdown.scene-salon-prive{background-image:url('/static/img/topdown-private.svg')}
.table-real{width:96px;height:96px;background:rgba(255,250,242,.92);border:3px solid rgba(110,76,46,.45);color:#3b2818;box-shadow:0 16px 24px rgba(0,0,0,.18)}
.table-real.is-square{width:110px;height:84px;border-radius:24px}
.table-real span{text-shadow:none;font-size:1rem}
.table-real.available{border-color:#47996b;box-shadow:0 0 0 3px rgba(71,153,107,.16),0 18px 24px rgba(0,0,0,.18)}
.table-real.selected{border-color:#d7a36d;box-shadow:0 0 0 4px rgba(215,163,109,.22),0 20px 26px rgba(0,0,0,.22);transform:translate(-50%,-50%) scale(1.06)}
.table-grid-v8{grid-template-columns:repeat(3,1fr)}
.summary-inline{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.summary-inline div{padding:14px;border-radius:16px;background:#111722;border:1px solid var(--border)}
.summary-inline span{display:block;color:var(--muted);margin-bottom:6px}
.small{font-size:.92rem}
@media (max-width: 900px){.booking-steps{grid-template-columns:1fr 1fr}.table-grid-v8,.summary-inline{grid-template-columns:1fr}.scene-topdown{height:440px}.table-real{width:74px;height:74px}.table-real.is-square{width:86px;height:68px}}


/* V10 mobile/tablette improvements */
@media (max-width: 768px){
  .app-shell{padding:12px;max-width:100%;}
  .site-header{padding:12px 0;gap:14px;}
  .site-header nav{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .site-header nav a{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);text-align:center;}
  .hero-card,.card{padding:18px;border-radius:20px;}
  .page-head h1,.hero-card h1,.success-card h1,.manage-card h1{font-size:clamp(1.9rem,8vw,2.5rem);}
  .summary-list div,.source-list div,.reservation-item,.note-item{padding:12px;border-radius:14px;}
}
@media (max-width: 520px){
  .site-header nav{grid-template-columns:1fr;}
  .brand{align-items:flex-start;}
}
/* ===== V10 MOBILE / TABLETTE FIX ===== */

html, body {
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

.app-shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px;
}

.page-head.split-head {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 18px;
  align-items: stretch;
}

.page-head.split-head > div,
.card,
.mode-switch-card,
.stepper-card,
.public-head-card,
.step-panel-card {
  min-width: 0;
}

.grid-2,
.grid-3,
.grid-4,
.dashboard-grid,
.customer-grid,
.customer-book-grid,
.booking-grid,
.booking-grid-v8,
.summary-inline,
.summary-inline-v9 {
  min-width: 0;
}

input,
select,
textarea,
button,
.btn,
.btn-v9 {
  max-width: 100%;
}

.reservation-item,
.source-list div,
.summary-list div {
  min-width: 0;
}

.reservation-item strong,
.customer-card-mini strong,
.card h2,
.card h3,
.mode-switch-card span {
  word-break: break-word;
}

.table-list-v9,
.table-grid,
.table-grid-v8,
.slot-grid,
.slot-grid-v9 {
  min-width: 0;
}

/* Réservation */
.scene-wrapper,
.scene-box-v9,
.scene-backdrop.scene-topdown {
  width: 100%;
  max-width: 100%;
}

.scene-box-v9 {
  margin: 0 auto;
}

#table-results,
#slot-results {
  width: 100%;
}

/* ===== TABLETTE ===== */
@media (max-width: 1024px) {
  .app-shell {
    padding: 14px;
  }

  .page-head.split-head,
  .public-head,
  .dashboard-grid,
  .booking-grid,
  .booking-grid-v8,
  .customer-grid,
  .customer-book-grid {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-2,
  .summary-inline,
  .summary-inline-v9 {
    grid-template-columns: 1fr;
  }

  .stepper-rail,
  .booking-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scene-box-v9 {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }

  .scene-backdrop.scene-topdown {
    min-height: 420px;
    max-height: none;
  }
}

/* ===== SMARTPHONE ===== */
@media (max-width: 768px) {
  .app-shell {
    padding: 10px;
  }

  .site-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .site-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .page-head,
  .public-head {
    gap: 12px;
  }

  .page-head.split-head,
  .public-head,
  .dashboard-grid,
  .booking-grid,
  .booking-grid-v8,
  .grid-4,
  .grid-3,
  .grid-2,
  .customer-grid,
  .customer-book-grid,
  .summary-inline,
  .summary-inline-v9 {
    grid-template-columns: 1fr !important;
  }

  .page-head.split-head > div,
  .public-head-card,
  .step-panel-card,
  .card,
  .mode-switch-card,
  .stepper-card {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .page-head h1,
  .public-head h1,
  .hero-card h1 {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    line-height: 1.1;
  }

  .lead {
    font-size: 15px;
    line-height: 1.6;
  }

  .stepper-rail,
  .booking-steps {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }

  .step-chip,
  .step-pill {
    min-width: 0;
    width: 100%;
    padding: 12px 12px;
    font-size: 14px;
  }

  .step-chip strong,
  .step-pill strong {
    font-size: 14px;
  }

  .btn,
  .btn-v9 {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
  }

  .btn-row,
  .admin-links,
  .action-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .action-row .btn {
    width: 100%;
  }

  .reservation-item,
  .source-list div,
  .summary-list div {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .mode-pill,
  .mode-pill-v9,
  .dashboard-current-mode {
    width: 100%;
  }

  .room-tabs,
  .room-tabs-v9 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .room-tab,
  .room-tab-v9 {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
    min-height: 44px;
  }

  .scene-box-v9 {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
  }

  .scene-backdrop.scene-topdown {
    min-height: 280px;
    max-height: none;
    border-radius: 18px;
  }

  .scene-caption-v9,
  .scene-caption.scene-caption-top {
    top: 10px;
    left: 10px;
    right: 10px;
    max-width: none;
    padding: 10px 12px;
  }

  .scene-caption-v9 strong,
  .scene-caption.scene-caption-top strong {
    font-size: 14px;
  }

  .scene-caption-v9 span,
  .scene-caption.scene-caption-top span {
    font-size: 11px;
  }

  .scene-table-v9,
  .scene-table.table-real {
    width: 40px !important;
    height: 40px !important;
    margin-left: -20px !important;
    margin-top: -20px !important;
    font-size: 10px !important;
    border-width: 2px !important;
  }

  .scene-table-v9.is-square,
  .scene-table.table-real.is-square {
    border-radius: 10px !important;
  }

  .table-list-v9,
  .table-grid,
  .table-grid-v8,
  .slot-grid,
  .slot-grid-v9 {
    grid-template-columns: 1fr !important;
  }

  input,
  select,
  textarea {
    min-height: 46px;
    font-size: 16px;
  }
}

/* ===== PETIT SMARTPHONE ===== */
@media (max-width: 480px) {
  .app-shell {
    padding: 8px;
  }

  .page-head.split-head > div,
  .public-head-card,
  .step-panel-card,
  .card,
  .mode-switch-card,
  .stepper-card {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .stepper-rail,
  .booking-steps {
    grid-template-columns: 1fr !important;
  }

  .room-tab,
  .room-tab-v9 {
    flex: 1 1 100%;
  }

  .scene-table-v9,
  .scene-table.table-real {
    width: 36px !important;
    height: 36px !important;
    margin-left: -18px !important;
    margin-top: -18px !important;
    font-size: 9px !important;
  }
}
/* ===== FIX BOUTONS DASHBOARD MOBILE ===== */

@media (max-width: 768px) {

  .action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .action-row .btn {
    flex: 1 1 calc(50% - 8px); /* 2 boutons par ligne */
    max-width: calc(50% - 8px);
    min-height: 40px;
    padding: 10px;
    font-size: 13px;
  }

  /* cas spécial si 3 boutons → mieux réparti */
  .action-row .btn:nth-child(3) {
    flex: 1 1 100%;
    max-width: 100%;
  }

}