/* Pages publiques — réservation façon Calendly */
body.pub { background: var(--bg); }
.pub-wrap { max-width: 920px; margin: 0 auto; padding: 2.5rem 1.2rem; }
.pub-foot { text-align: center; color: var(--muted-2); font-size: .82rem; margin-top: 2rem; }

.pub-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden;
}

/* Profil organisateur */
.profil-head { text-align: center; padding: 2rem 1rem 1rem; }
.avatar {
  width: 72px; height: 72px; border-radius: 50%; background: var(--accent);
  color: #fff; display: grid; place-items: center; font-size: 1.8rem; font-weight: 800;
  margin: 0 auto 1rem;
}
.event-list { display: grid; gap: .9rem; padding: 1rem 1.4rem 1.8rem; }
.event-item {
  display: flex; align-items: center; gap: 1rem; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem 1.2rem;
  color: var(--ink); transition: var(--tr); background: var(--surface);
}
.event-item:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); text-decoration: none; transform: translateY(-1px); }
.event-item .bar { width: 5px; align-self: stretch; border-radius: 4px; }
.event-item .meta { color: var(--muted); font-size: .88rem; }
.event-item .arrow { margin-left: auto; color: var(--muted-2); font-size: 1.4rem; }

/* Réservation : deux colonnes */
.resa-grid { display: grid; grid-template-columns: 300px 1fr; min-height: 460px; }
.resa-info { padding: 1.8rem; border-right: 1px solid var(--line); }
.resa-info .back { color: var(--muted); font-size: .85rem; }
.resa-info h1 { font-size: 1.4rem; margin: .8rem 0 .3rem; }
.resa-info .org { color: var(--muted); font-weight: 600; }
.resa-info .pill { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-2); margin-top: .9rem; font-size: .9rem; }
.resa-info .desc { margin-top: 1rem; color: var(--ink-2); font-size: .92rem; }

.resa-pick { padding: 1.8rem; }
.resa-pick h2 { font-size: 1.05rem; }
.tz-row { margin: .4rem 0 1.2rem; }
.tz-row select { max-width: 320px; }

.slots-zone { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; max-height: 320px; overflow-y: auto; }
.slot-btn {
  font: inherit; font-weight: 600; padding: .7em; border: 1px solid var(--accent);
  background: var(--surface); color: var(--accent); border-radius: var(--r-sm);
  cursor: pointer; transition: var(--tr);
}
.slot-btn:hover { background: var(--accent); color: #fff; }
.slots-empty { color: var(--muted); grid-column: 1/-1; padding: 1.5rem 0; text-align: center; }

.dates-hint { margin-top: .5rem; font-size: .85rem; }
.dates-hint .muted { color: var(--muted); }
.date-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.date-chip {
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  padding: .35em .7em; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); transition: var(--tr);
}
.date-chip:hover { border-color: var(--accent); color: var(--accent); }
.date-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }

.resa-form .field { margin-bottom: 1rem; }
.recap {
  background: var(--accent-2); border: 1px solid var(--accent-3, var(--accent));
  border-radius: var(--r-sm); padding: .8rem 1rem; margin-bottom: 1.2rem; color: var(--accent-d); font-weight: 600;
}

/* Confirmation / gestion */
.confirm-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-2); color: var(--accent-d);
  display: grid; place-items: center; font-size: 2rem; margin: 0 auto 1rem; }
.detail-line { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.detail-line .k { color: var(--muted); width: 110px; flex-shrink: 0; }

@media (max-width: 720px) {
  .resa-grid { grid-template-columns: 1fr; }
  .resa-info { border-right: none; border-bottom: 1px solid var(--line); }
  .slots-zone { grid-template-columns: 1fr 1fr; max-height: none; }
}
@media (max-width: 480px) {
  .pub-wrap { padding: 1.2rem .8rem; }
  .resa-info, .resa-pick { padding: 1.2rem; }
  .profil-head { padding: 1.5rem 1rem .5rem; }
  .event-list { padding: .8rem 1rem 1.4rem; }
  .tz-row select, .resa-info h1 { font-size: 1.2rem; }
  .tz-row select { font-size: .95rem; }
}