/* ===== Évasion Float Tube — Design tokens =====
   Palette inspirée de l'eau de la gravière et du sable des berges.
   Deep : profondeur de l'eau / Aqua : surface / Sand : rive au soleil.
*/
:root{
  --bg:#F5F2E9;
  --bg-alt:#ECE6D6;
  --panel:#FFFFFF;
  --ink:#152526;
  --ink-soft:#51635F;
  --deep:#0F3A42;
  --deep-light:#1C5A67;
  --aqua:#3F8FA3;
  --aqua-soft:#DCEAEE;
  --sand:#D9A441;
  --sand-dark:#B07C22;
  --success:#4C7A51;
  --success-bg:#E4EEE1;
  --danger:#B5484A;
  --danger-bg:#F7E5E3;
  --line:#DCD5C2;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 2px 12px rgba(15,58,66,.10);
  --shadow-lift:0 8px 28px rgba(15,58,66,.16);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font);
  letter-spacing:.01em;
  margin:0 0 .4em 0;
  color:var(--deep);
}
a{color:var(--aqua)}
button{font-family:var(--font)}

/* ---- Wave signature: a soft wave line used to separate header bands
   from content, echoing the lake surface. Reused across headers,
   session cards and the ticket stub. ---- */
.wave-divider{
  display:block;
  width:100%;
  height:14px;
  line-height:0;
}
.wave-divider svg{display:block;width:100%;height:100%}

/* ---- App shell ---- */
.app-header{
  background:var(--deep);
  color:#fff;
  padding:18px 22px 0 22px;
}
.app-header .app-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:14px;
  flex-wrap:wrap;
  gap:10px;
}
.app-header h1{
  color:#fff;
  font-size:1.25rem;
  font-weight:700;
  margin:0;
}
.app-header .subtitle{
  color:#BFE0E6;
  font-size:.8rem;
  margin-top:2px;
}
.app-header .wave-divider{margin-top:0}

.tabs{
  display:flex;
  gap:4px;
  padding:0 22px;
  background:var(--deep);
  overflow-x:auto;
}
.tab-btn{
  background:transparent;
  border:none;
  color:#BFE0E6;
  padding:10px 14px;
  font-size:.88rem;
  font-weight:600;
  cursor:pointer;
  border-radius:8px 8px 0 0;
  white-space:nowrap;
}
.tab-btn.active{
  background:var(--bg);
  color:var(--deep);
}

.main{
  max-width:1100px;
  margin:0 auto;
  padding:20px 16px 60px 16px;
}

/* ---- Cards / panels ---- */
.card{
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  margin-bottom:16px;
}
.card-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.card-title h2,.card-title h3{margin:0}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:none;
  border-radius:10px;
  padding:10px 16px;
  font-size:.88rem;
  font-weight:600;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .06s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--sand);color:#3B2A0B}
.btn-primary:hover{background:var(--sand-dark);color:#fff}
.btn-deep{background:var(--deep);color:#fff}
.btn-deep:hover{background:var(--deep-light)}
.btn-outline{background:transparent;color:var(--deep);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--aqua);color:var(--aqua)}
.btn-danger{background:var(--danger-bg);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{padding:6px 10px;font-size:.78rem;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-block{width:100%;justify-content:center}

/* ---- Forms ---- */
label{
  display:block;
  font-size:.78rem;
  font-weight:700;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:5px;
}
input,select,textarea{
  width:100%;
  font-family:var(--font);
  font-size:.95rem;
  padding:10px 11px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--ink);
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--aqua);
  box-shadow:0 0 0 3px var(--aqua-soft);
}
.field{margin-bottom:14px}
.field-row{display:flex;gap:12px;flex-wrap:wrap}
.field-row .field{flex:1;min-width:150px}
.radio-group{display:flex;gap:10px;flex-wrap:wrap}
.radio-card{
  flex:1;
  min-width:130px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  cursor:pointer;
  text-align:center;
}
.radio-card input{width:auto;margin-right:6px}
.radio-card.selected{border-color:var(--sand);background:#FBF3E1}

/* ---- Badges / pills ---- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.pill-dispo{background:var(--success-bg);color:var(--success)}
.pill-complet{background:var(--danger-bg);color:var(--danger)}
.pill-ferme{background:#E7E2D3;color:var(--ink-soft)}
.pill-neutral{background:var(--aqua-soft);color:var(--deep)}

/* ---- Calendar (admin) ---- */
.month-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.month-nav h2{font-size:1.05rem}
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}
.cal-dow{font-size:.7rem;font-weight:700;color:var(--ink-soft);text-align:center;padding-bottom:4px;text-transform:uppercase}
.cal-day{
  background:var(--bg-alt);
  border-radius:10px;
  padding:0;
  min-height:84px;
  cursor:pointer;
  border:1.5px solid transparent;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.cal-day.today{border-color:var(--sand)}
.cal-day.selected{border-color:var(--deep);box-shadow:0 0 0 2px var(--aqua-soft)}
.cal-day.empty{background:transparent;cursor:default}
.cal-day .num{font-size:.74rem;font-weight:700;color:var(--ink);padding:4px 6px 2px}
.cal-day .slot-band{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:.62rem;
  font-weight:800;
  color:#fff;
  letter-spacing:.01em;
}
.cal-day .slot-band .band-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.6);
}
.cal-day .slot-band.dispo{background:var(--success)}
.cal-day .slot-band.complet{background:var(--danger)}
.cal-day .slot-band.ferme{background:#B7AF98;color:#453F2E}
.cal-day .slot-band.vide{background:transparent;color:var(--ink-soft);font-weight:600}

/* ---- Session (créneau) block ---- */
.session-block{
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:14px;
}
.session-head{
  background:var(--deep);
  color:#fff;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.session-head .wave-divider{margin-top:6px}
.session-body{padding:14px;background:#fff}

/* ---- Reservation row ---- */
.resa-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--line);
  margin-bottom:8px;
  flex-wrap:wrap;
}
.resa-row .resa-main{flex:1;min-width:180px}
.resa-row .resa-name{font-weight:700}
.resa-row .resa-meta{font-size:.78rem;color:var(--ink-soft)}
.resa-row .resa-actions{display:flex;gap:6px;flex-wrap:wrap}
.present-toggle{
  display:flex;align-items:center;gap:6px;cursor:pointer;
  padding:6px 10px;border-radius:8px;border:1.5px solid var(--line);font-size:.78rem;font-weight:700;
}
.present-toggle.checked{background:var(--success-bg);border-color:var(--success);color:var(--success)}

/* ---- Ticket / souche ---- */
.ticket{
  width:320px;
  border:1.5px dashed var(--deep);
  border-radius:12px;
  padding:16px;
  background:#FEFDF9;
  font-family:var(--font);
}
.ticket .ticket-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:1px dashed var(--line);
  padding-bottom:8px;margin-bottom:8px;
}
.ticket .ticket-num{font-size:.72rem;color:var(--ink-soft);font-weight:700}
.ticket h3{margin:0;font-size:1rem;color:var(--deep)}
.ticket .ticket-row{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:4px}
.ticket .ticket-row span:first-child{color:var(--ink-soft)}
.ticket .ticket-total{
  margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);
  display:flex;justify-content:space-between;font-weight:700;font-size:1rem;color:var(--deep);
}
.ticket .ticket-note{
  margin-top:10px;font-size:.68rem;color:var(--ink-soft);
  background:var(--aqua-soft);padding:6px 8px;border-radius:8px;
}

/* ---- Report ---- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.stat-card{background:var(--aqua-soft);border-radius:12px;padding:12px 14px}
.stat-card .stat-value{font-size:1.4rem;font-weight:800;color:var(--deep)}
.stat-card .stat-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);font-weight:700}
table.report-table{width:100%;border-collapse:collapse;font-size:.86rem}
table.report-table th,table.report-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
table.report-table th{color:var(--ink-soft);font-size:.72rem;text-transform:uppercase;letter-spacing:.02em}

/* ---- Participants dynamiques (formulaire réservation) ---- */
.participant-block{
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px;
  margin-bottom:8px;
  background:var(--bg-alt);
}
.participant-block .participant-title{
  font-size:.74rem;font-weight:800;color:var(--deep);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;
}

/* ---- Détail du jour (widget public) ---- */
.pub-day-detail{
  margin-top:14px;
  border-top:1px dashed var(--line);
  padding-top:12px;
}
.pub-day-detail h3{text-transform:capitalize;font-size:.95rem;}
.pub-slot-card{
  border-radius:var(--radius-sm);
  padding:10px 12px;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-left:4px solid transparent;
}
.pub-slot-card.slot-matin{border-left-color:var(--aqua);}
.pub-slot-card.slot-apm{border-left-color:var(--sand);}
.pub-slot-card.dispo{background:var(--success-bg);color:var(--success)}
.pub-slot-card.complet{background:var(--danger-bg);color:var(--danger)}
.pub-slot-card.ferme{background:#EFEAD9;color:#6B6249}
.pub-slot-card .pub-slot-name{font-weight:800;font-size:.86rem}
.pub-slot-card .pub-slot-hours{font-size:.76rem;opacity:.85}
.pub-slot-card .pub-slot-status{font-weight:700;font-size:.8rem;white-space:nowrap}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.muted{color:var(--ink-soft)}
.empty-state{
  text-align:center;padding:40px 20px;color:var(--ink-soft);
}
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--deep);color:#fff;padding:12px 20px;border-radius:10px;
  box-shadow:var(--shadow-lift);font-size:.88rem;z-index:999;
}
.toast.error{background:var(--danger)}
.modal-backdrop{
  position:fixed;inset:0;background:rgba(21,37,38,.5);
  display:flex;align-items:center;justify-content:center;z-index:900;padding:16px;
}
.modal{
  background:#fff;border-radius:var(--radius);padding:22px;max-width:480px;width:100%;
  max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lift);
}

@media print{
  body *{visibility:hidden}
  #ticketPrintArea, #ticketPrintArea *{visibility:visible}
  #ticketPrintArea{position:absolute;top:0;left:0}
}

@media (max-width:640px){
  .main{padding:14px 10px 50px}
  .cal-day{min-height:58px}
}