/* ============================================================
   LOK-ALL EVENTS — Section réservation publique v3
   Design refondu · Inter · Meilleure UX client
   ============================================================ */

/* ── Typographie (via héritage — ne touche pas les pseudo-éléments FA) ── */
.reservation-section {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Section ── */
.reservation-section {
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}

/* ── Indicateur d'étapes ── */
.step-indicator {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 44px; max-width: 600px; padding: 0 16px; gap: 0;
}
.step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: #bbb;
  letter-spacing: .3px; text-transform: uppercase;
  min-width: 64px; transition: color .3s;
}
.step.done   { color: #e20612; }
.step.active { color: #1a1a1a; }
.step-num {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid #ddd; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex-shrink: 0;
  transition: all .3s; box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.step.done .step-num {
  background: #e20612; border-color: #e20612; color: #fff;
  box-shadow: 0 4px 12px rgba(226,6,18,.3);
}
.step.active .step-num {
  border-color: #1a1a1a; color: #1a1a1a; background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.step-line {
  flex: 1; height: 2px; background: #e8e8e8;
  margin-bottom: 22px; transition: background .4s; min-width: 30px;
}
.step-line.done { background: #e20612; }

/* ── Panels ── */
.res-panel {
  background: #fff; border-radius: 20px; border: none;
  box-shadow: 0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  overflow: hidden; transition: box-shadow .25s;
}
.res-panel:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.05);
}
.res-panel-header {
  padding: 16px 22px; background: #fff;
  border-bottom: 1px solid #f0f0f0;
  display: flex; align-items: center; gap: 10px; position: relative;
}
.res-panel-header::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: linear-gradient(180deg, #e20612, #a90f0f);
  border-radius: 0 3px 3px 0;
}
.res-panel-header h3 {
  margin: 0; font-size: 14px; font-weight: 700;
  color: #1a1a1a; letter-spacing: -.2px;
}
.res-panel-header i { color: #e20612; font-size: 15px; -webkit-text-fill-color: #e20612; }
.res-panel-body { padding: 22px; }

/* ── Inputs ── */
.res-label {
  display: block; font-size: 11px; font-weight: 700; color: #555;
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 7px;
}
.res-label i { color: #e20612; margin-right: 5px; font-size: 9px; -webkit-text-fill-color: #e20612; }
.res-input {
  width: 100%; padding: 12px 16px; border: 1.5px solid #ebebeb; border-radius: 12px;
  font-size: 13px; color: #1a1a1a; background: #fafafa;
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
  font-family: inherit;
}
.res-input:focus {
  border-color: #e20612; box-shadow: 0 0 0 3px rgba(226,6,18,.08); background: #fff;
}
.res-input::placeholder { color: #c5c5c5; }
textarea.res-input { resize: none; min-height: 88px; line-height: 1.6; }

/* ── Toggle jour/WE ── */
.toggle-wrap {
  display: flex; background: #f4f4f4; border-radius: 12px; padding: 4px;
  margin-bottom: 16px; gap: 3px;
}
.toggle-btn {
  flex: 1; padding: 8px 6px; border-radius: 9px;
  font-size: 11px; font-weight: 700; border: none; cursor: pointer;
  transition: all .2s; background: transparent; color: #999;
  text-align: center; font-family: inherit; letter-spacing: .1px;
}
.toggle-btn.active { background: #fff; color: #e20612; box-shadow: 0 2px 10px rgba(0,0,0,.1); }

/* ── Filtres univers ── */
.univers-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.upill {
  padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
  border: 1.5px solid #e8e8e8; background: #fff; cursor: pointer;
  transition: all .2s; color: #888; font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.upill:hover { border-color: rgba(226,6,18,.3); color: #e20612; background: rgba(226,6,18,.03); }
.upill.active { border-color: #e20612; background: rgba(226,6,18,.08); color: #e20612; }

/* ── Barre de dispo stock ── */
.stock-hint-bar {
  display: flex; align-items: center; gap: 7px;
  background: #f8f8f8; border: 1.5px solid #ebebeb; border-radius: 10px;
  padding: 8px 13px; margin-bottom: 14px;
  font-size: 11px; font-weight: 500; color: #999; transition: all .3s;
}
.stock-hint-bar i { color: #bbb; font-size: 11px; -webkit-text-fill-color: #bbb; flex-shrink: 0; }
.stock-hint-bar.ready { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.stock-hint-bar.ready i { color: #16a34a; -webkit-text-fill-color: #16a34a; }
.stock-hint-bar.loading { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.stock-hint-bar.loading i { color: #d97706; -webkit-text-fill-color: #d97706; }

/* ── Liste articles ── */
.art-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 480px; overflow-y: auto; padding-right: 4px;
}
.art-list::-webkit-scrollbar { width: 4px; }
.art-list::-webkit-scrollbar-track { background: #f4f4f4; border-radius: 4px; }
.art-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.art-list::-webkit-scrollbar-thumb:hover { background: #ccc; }

.art-row {
  display: flex; align-items: center; gap: 10px;
  background: #fafafa; border-radius: 12px; padding: 10px 13px;
  border: 1.5px solid transparent; transition: all .18s;
  cursor: pointer; position: relative;
}
.art-row:hover { background: #fff; border-color: #e8e8e8; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.art-row.selected { background: #fff; border-color: #e20612; box-shadow: 0 2px 12px rgba(226,6,18,.12); }

.ar-check {
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid #ddd;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s; font-size: 10px;
}
.art-row.selected .ar-check { background: #e20612; border-color: #e20612; color: #fff; }

.ar-ico  { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.ar-info { flex: 1; min-width: 0; }
.ar-name { font-size: 12.5px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-meta { font-size: 10px; color: #bbb; margin-top: 2px; }
.ar-price { font-size: 12px; font-weight: 700; color: #ccc; white-space: nowrap; flex-shrink: 0; transition: color .15s; }
.art-row.selected .ar-price { color: #e20612; }
.ar-qty { display: none; align-items: center; gap: 5px; flex-shrink: 0; }
.art-row.selected .ar-qty { display: flex; }
.qty-btn {
  width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #e8e8e8; background: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #1a1a1a; transition: all .15s; line-height: 1;
}
.qty-btn:hover { border-color: #e20612; color: #e20612; background: rgba(226,6,18,.04); }
.qty-val { font-size: 12px; font-weight: 700; color: #1a1a1a; min-width: 16px; text-align: center; }

/* ── Badges disponibilité ── */
.ar-stock {
  display: inline-flex; align-items: center; font-size: 9px; font-weight: 700;
  padding: 3px 8px; border-radius: 20px; white-space: nowrap;
  flex-shrink: 0; letter-spacing: .3px; line-height: 1;
}
.ar-stock.ok      { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.ar-stock.partiel { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.ar-stock.complet { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; font-style: italic; }
.art-row.art-complet { opacity: .5; cursor: not-allowed; }
.art-row.art-complet .ar-qty   { pointer-events: none; opacity: .35; }
.art-row.art-complet .ar-check { pointer-events: none; }

/* ── Calendrier ── */
.cal-wrap  { background: #f9f9f9; border-radius: 14px; padding: 18px; }
.cal-nav   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-month { font-size: 15px; font-weight: 700; color: #1a1a1a; letter-spacing: -.2px; }
.cal-btn {
  background: #fff; border: 1.5px solid #e8e8e8; border-radius: 10px;
  width: 34px; height: 34px; cursor: pointer; color: #555; font-size: 11px;
  transition: all .2s; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.cal-btn:hover { border-color: #e20612; color: #e20612; background: rgba(226,6,18,.03); }
.cal-dh { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 6px; }
.cal-dh span {
  text-align: center; font-size: 9px; font-weight: 700;
  color: #bbb; text-transform: uppercase; padding: 3px 0; letter-spacing: .4px;
}
.cal-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }
.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 12px; font-weight: 500;
  color: #1a1a1a; cursor: pointer; transition: all .15s; background: #fff;
}
.cal-day:hover:not(.empty):not(.booked):not(.past) {
  background: rgba(226,6,18,.09); color: #e20612; transform: scale(1.05);
}
.cal-day.empty   { background: transparent; cursor: default; }
.cal-day.past    { color: #ddd; cursor: not-allowed; background: transparent; }
.cal-day.booked  { background: #f5f5f5; color: #ccc; cursor: not-allowed; text-decoration: line-through; text-decoration-color: #ddd; }
.cal-day.selected {
  background: #e20612; color: #fff; font-weight: 700;
  box-shadow: 0 3px 10px rgba(226,6,18,.35); z-index: 1;
}
.cal-day.selected-end {
  background: #a90f0f; color: #fff; font-weight: 700;
  box-shadow: 0 3px 10px rgba(169,15,15,.3); z-index: 1;
}
.cal-day.in-range { background: rgba(226,6,18,.1); color: #e20612; }
.cal-day.today    { border: 2px solid rgba(226,6,18,.4); color: #e20612; font-weight: 700; }
.cal-day.today.selected { border: none; }
.cal-legend { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.cal-legend span { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #aaa; }
.cal-legend .dot { width: 10px; height: 10px; border-radius: 4px; flex-shrink: 0; }

/* ── Résumé dates ── */
.date-summary {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #e20612 0%, #a90f0f 100%);
  border-radius: 12px; padding: 15px 18px;
  box-shadow: 0 4px 16px rgba(226,6,18,.2);
}
.date-summary i   { color: #fff; font-size: 18px; opacity: .85; -webkit-text-fill-color: #fff; flex-shrink: 0; }
.date-summary .ds-text { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -.1px; }
.date-summary .ds-sub  { font-size: 10px; color: rgba(255,255,255,.6); margin-top: 3px; }

/* ── Toggle livraison ── */
.livraison-row {
  display: flex; align-items: center; justify-content: space-between;
  background: #fafafa; border-radius: 12px; padding: 12px 16px;
  cursor: pointer; border: 1.5px solid #ebebeb; transition: all .2s; margin-top: 14px;
}
.livraison-row:hover { border-color: rgba(226,6,18,.3); background: #fff; }
.lr-label { font-size: 12px; font-weight: 600; color: #1a1a1a; display: flex; align-items: center; gap: 7px; }
.lr-label i { color: #e20612; font-size: 12px; -webkit-text-fill-color: #e20612; }
.lr-switch {
  width: 36px; height: 20px; background: #ddd; border-radius: 20px;
  position: relative; transition: background .25s; flex-shrink: 0;
}
.lr-switch.on { background: #e20612; }
.lr-switch::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  background: #fff; border-radius: 50%; top: 3px; left: 3px;
  transition: left .25s; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.lr-switch.on::after { left: 19px; }

/* ── Lignes devis ── */
.devis-lines { display: flex; flex-direction: column; gap: 6px; min-height: 40px; margin-bottom: 12px; }
.devis-line  { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-size: 12.5px; }
.dl-name  { color: #555; font-weight: 500; flex: 1; line-height: 1.4; }
.dl-qty   { font-size: 10px; color: #bbb; font-weight: 500; }
.dl-price { font-weight: 700; color: #1a1a1a; white-space: nowrap; }
.devis-empty { font-size: 11px; color: #ccc; text-align: center; padding: 12px 0; font-style: italic; }
.devis-sep { border: none; border-top: 1.5px dashed #ebebeb; margin: 12px 0; }

/* ── Sous-totaux ── */
.sub-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.sl { color: #999; font-weight: 500; }
.sv { font-weight: 600; color: #1a1a1a; }
.liv-line         { display: none; }
.liv-line.visible { display: flex; }
.liv-line .sv     { color: #c8922a; }

/* ── Total ── */
.devis-total {
  background: linear-gradient(135deg, #e20612 0%, #a90f0f 100%);
  border-radius: 14px; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; box-shadow: 0 6px 20px rgba(226,6,18,.22);
}
.dt-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.8); }
.dt-val   { font-size: 19px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.3px; }
.dt-sub   { font-size: 9px; color: rgba(255,255,255,.5); margin-top: 3px; text-align: right; }
.devis-note { font-size: 10px; color: #bbb; text-align: center; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 4px; }

/* ── Bouton réserver ── */
.btn-reserver {
  width: 100%; padding: 16px; margin-top: 18px;
  background: linear-gradient(135deg, #e06100, #e20612);
  color: #fff; font-size: 15px; font-weight: 700;
  border: none; border-radius: 14px; cursor: pointer;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 6px 20px rgba(226,6,18,.28);
  letter-spacing: .1px; font-family: inherit;
}
.btn-reserver:hover    { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(226,6,18,.35); }
.btn-reserver:active   { transform: translateY(0); box-shadow: 0 4px 12px rgba(226,6,18,.2); }
.btn-reserver:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Alertes ── */
.res-alert {
  border-radius: 12px; padding: 13px 16px; margin-bottom: 18px;
  font-size: 13px; display: flex; align-items: flex-start; gap: 10px;
}
.res-alert.error   { background: #fff2f2; border: 1.5px solid rgba(226,6,18,.2); color: #c0000a; }
.res-alert.success { background: #f0fdf4; border: 1.5px solid #bbf7d0; color: #166534; }

/* ── Succès ── */
.res-success { display: none; text-align: center; padding: 64px 24px; }
.res-success .success-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #e20612, #a90f0f);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 24px; box-shadow: 0 8px 28px rgba(226,6,18,.3);
  animation: pop-in .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
.res-success .success-icon i { font-size: 36px; color: #fff; -webkit-text-fill-color: #fff; }
.res-success h3 { font-size: 26px; font-weight: 800; color: #1a1a1a; margin-bottom: 12px; letter-spacing: -.4px; }
.res-success p  { color: #777; font-size: 14px; max-width: 420px; margin: 0 auto 28px; line-height: 1.75; }

/* ════════════════════════════════════════════════════
   PANNEAU OPTIONS PAR ARTICLE
   ════════════════════════════════════════════════════ */
.art-options-panel {
  background: #f8f9ff; border: 1.5px solid #e0e7ff; border-top: none;
  border-radius: 0 0 12px 12px; margin-top: -6px; margin-bottom: 2px;
  overflow: hidden; animation: aop-in .15s ease;
}
@keyframes aop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aop-inner { padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 7px; }
.aop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff; border-radius: 10px; padding: 9px 12px; border: 1.5px solid #e8e8e8;
}
.aop-left { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: #333; }
.aop-price { font-size: 10px; font-weight: 600; color: #555; background: #f4f4f4; border-radius: 6px; padding: 2px 7px; flex-shrink: 0; }
.aop-toggle {
  width: 36px; height: 20px; background: #e0e0e0; border-radius: 20px;
  position: relative; transition: background .2s; flex-shrink: 0; cursor: pointer;
}
.aop-toggle.on { background: #e20612; }
.aop-toggle::after {
  content: ''; position: absolute; width: 14px; height: 14px; background: #fff;
  border-radius: 50%; top: 3px; left: 3px;
  transition: left .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.aop-toggle.on::after { left: 19px; }
.aop-stepper { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.stp-btn {
  width: 26px; height: 26px; border-radius: 7px; border: 1.5px solid #e8e8e8; background: #fff;
  font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #1a1a1a; transition: all .15s;
}
.stp-btn:hover { border-color: #e20612; color: #e20612; }
.stp-val { font-size: 12px; font-weight: 700; color: #1a1a1a; min-width: 24px; text-align: center; }
.aop-sep { border: none; border-top: 1.5px dashed #e0e7ff; margin: 2px 0; }
.aop-opts-title { font-size: 10px; font-weight: 700; color: #7e22ce; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 5px; }
.aop-opt-row {
  display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px;
  padding: 9px 12px; border: 1.5px solid #e8e8e8; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.aop-opt-row:hover   { border-color: #c4b5fd; background: #fdf4ff; }
.aop-opt-row.checked { border-color: #7e22ce; background: #fdf4ff; }
.aop-checkbox {
  width: 18px; height: 18px; border-radius: 5px; border: 2px solid #e8e8e8;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s; color: transparent;
}
.aop-checkbox.on { background: #7e22ce; border-color: #7e22ce; color: #fff; }

/* ════════════════════════════════════════════════════
   DEVIS — sous-lignes options
   ════════════════════════════════════════════════════ */
.devis-line-sub .dl-name { color: #999; font-size: 11px; padding-left: 14px; position: relative; }
.devis-line-sub .dl-name::before { content: '↳'; position: absolute; left: 0; color: #ccc; font-size: 11px; }
.devis-line-sub .dl-price { font-size: 11px; font-weight: 600; color: #777; }

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .reservation-section { padding: 60px 0 50px; }
  .step span { display: none; }
  .step-line { min-width: 20px; }
  .res-panel-body { padding: 16px; }
  .cal-wrap { padding: 12px; }
  .cal-day { font-size: 11px; }
  .art-list { max-height: 360px; }
  .dt-val { font-size: 17px; }
}