/* ============================================================
   Tokens — fidèle au design original Orgazone
   ============================================================ */
:root {
  --c-bg:            #DCF1EC;            /* fond de page menthe pâle */
  --c-card:          #FFFFFF;
  --c-card-inner:    #F6F8FB;            /* fond carte service / confirmation */

  --c-primary:       #147985;            /* teal foncé Orgazone */
  --c-primary-2:     #0F6571;            /* teal hover */
  --c-mint:          #3CD4A8;            /* bouton Contact */
  --c-mint-2:        #2EBE93;            /* hover Contact */

  --c-day:           #D4EDE7;            /* cellule jour dispo */
  --c-day-2:         #BCE3D9;            /* hover jour */
  --c-day-disabled:  #BFCFCB;            /* texte jour off */

  --c-input-bg:      #EAECF8;            /* fond input lavande pâle */
  --c-required:      #C4894A;            /* "Obligatoire" */
  --c-confirm:       #62B14E;            /* vert "Meeting confirmed" */
  --c-dot:           #F4C13A;            /* point jaune devant le service confirmé */

  --c-text:          #1A2733;            /* texte principal navy */
  --c-text-soft:     #5B6B7B;
  --c-border:        #E6E9EF;

  --shadow-card:     0 2px 24px rgba(20, 121, 133, .08);
  --r-card:          18px;
  --r-input:         10px;
  --r-day:           6px;

  --font-sans:       'Mulish', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
}

button { font-family: inherit; cursor: pointer; }

/* ============================================================
   Header (réplique simplifiée)
   ============================================================ */
.site-header {
  padding: 16px 24px 0;
  background: var(--c-bg);
}
.site-header__inner {
  background: #fff;
  border-radius: 22px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--c-primary);
}
.brand__icon { width: 44px; height: 44px; flex: none; }
.brand__name {
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.5px;
}

.nav {
  margin-left: auto;
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav__link {
  color: var(--c-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav__link:hover { color: var(--c-primary); }
.nav__chev { font-size: 12px; line-height: 1; }
.nav__link--active { color: var(--c-primary); }

.btn-contact {
  background: var(--c-mint);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 44px;
  border-radius: 999px;
  font-size: 18px;
  transition: background .15s ease;
}
.btn-contact:hover { background: var(--c-mint-2); }

/* ============================================================
   Hero
   ============================================================ */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 24px 80px;
}
.page-title {
  text-align: center;
  color: var(--c-primary);
  font-weight: 900;
  font-size: 48px;
  letter-spacing: -0.5px;
  margin: 20px 0 36px;
  line-height: 1.1;
}

/* ============================================================
   Booking module
   ============================================================ */
.booking {
  background: var(--c-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
  max-width: 830px;
  margin: 0 auto;
}

.booking__main {
  display: grid;
  grid-template-columns: 253px 1fr;
  gap: 11px;
  min-height: 451px;
}

/* Navigation wizard : masquée hors mode embeded */
.wizard-nav { display: none; }

/* Steps visibility — piloté par data-step */
.booking [data-show] { display: none; }
.booking[data-step="1"] .booking__main { grid-template-columns: 253px 1fr; }
.booking[data-step="2"] .booking__main { grid-template-columns: 253px 1fr 217px; }
.booking[data-step="3"] .booking__main { grid-template-columns: 253px 1fr; }
.booking[data-step="4"] .booking__main { display: none; }

.booking[data-step="1"] [data-show~="1"],
.booking[data-step="2"] [data-show~="2"],
.booking[data-step="3"] [data-show~="3"],
.booking[data-step="4"] [data-show~="4"] {
  display: var(--show-as, block);
  animation: paneFadeIn .3s ease both;
}
/* N'anime QUE le glissement, jamais l'opacité — ainsi le contenu reste
   toujours visible même si le navigateur met l'animation en pause
   (onglet inactif, etc.). */
@keyframes paneFadeIn {
  from { transform: translateY(7px); }
  to   { transform: translateY(0); }
}

/* ============================================================
   Service card (colonne gauche)
   ============================================================ */
.service-card {
  background: var(--c-card-inner);
  border-radius: 14px;
  padding: 20px 20px 20px;
  display: flex;
  flex-direction: column;
}
.service-card__logo {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
}
.service-card__logo svg { width: 100%; height: 100%; }
.service-card__org {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--c-text);
  text-transform: uppercase;
}
.service-card__name {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.3px;
}
.service-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text-soft);
  font-size: 16px;
  margin: 0;
}
.service-card__meta .ico { width: 20px; height: 20px; color: var(--c-text-soft); }

.service-card__summary {
  margin-top: 20px;
  align-items: flex-start;
  gap: 10px;
  color: var(--c-confirm);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
  --show-as: flex;
}
.service-card__summary .ico { width: 22px; height: 22px; color: var(--c-confirm); flex: none; margin-top: 2px; }

/* ============================================================
   Calendar pane
   ============================================================ */
.pane-title {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  margin: 12px 0 24px;
  color: var(--c-text);
}

.calendar-pane {
  padding: 8px 16px 16px;
  flex-direction: column;
  --show-as: flex;
}

.calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  margin-bottom: 14px;
}
.calendar__nav {
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
  transition: background .15s, opacity .15s;
}
.calendar__nav:hover { background: rgba(0,0,0,.04); }
.calendar__nav svg { width: 20px; height: 20px; }
.calendar__nav--disabled,
.calendar__nav:disabled {
  opacity: .25;
  cursor: not-allowed;
  pointer-events: none;
}
.calendar__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text);
  text-transform: lowercase;
}

.calendar__dows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--c-text);
}
.calendar__dows span { padding: 6px 0; }

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.day {
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--c-day);
  color: var(--c-primary);
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--r-day);
  padding: 0;
  transition: background .15s, color .15s, transform .1s;
}
.day:hover:not(:disabled) { background: var(--c-day-2); }
.day--empty {
  background: transparent;
  pointer-events: none;
}
.day:disabled,
.day--off {
  background: transparent;
  color: var(--c-day-disabled);
  font-weight: 600;
  cursor: default;
}
.day--selected {
  background: var(--c-primary);
  color: #fff;
}
.day--selected:hover { background: var(--c-primary-2); }

/* Timezone select */
.tz-select {
  margin-top: auto;
  padding-top: 28px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tz-select__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(calc(-50% + 14px));
  width: 20px;
  height: 20px;
  color: var(--c-text-soft);
  pointer-events: none;
}
.tz-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid var(--c-border);
  background: #fff;
  padding: 14px 38px 14px 42px;
  border-radius: var(--r-input);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
}
.tz-select select:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.tz-select__chev {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(calc(-50% + 14px));
  width: 18px;
  height: 18px;
  color: var(--c-text-soft);
  pointer-events: none;
}

/* ============================================================
   Slots pane
   ============================================================ */
.slots-pane {
  padding: 8px 4px 12px 0;
  border-left: 1px solid var(--c-border);
  padding-left: 16px;
  flex-direction: column;
  max-height: 451px;
  --show-as: flex;
}
.slots-pane__day {
  text-align: center;
  margin: 0 0 14px;
  font-weight: 500;
  color: var(--c-text);
}
.slots-pane__list {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.slots-pane__list::-webkit-scrollbar { width: 6px; }
.slots-pane__list::-webkit-scrollbar-thumb { background: #C9D1D9; border-radius: 6px; }

.slot {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.slot__time {
  flex: 1;
  background: #fff;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary);
  font-weight: 700;
  font-size: 15px;
  height: 52px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.slot__time:hover {
  background: #F0F8F9;
}
.slot--expanded { gap: 8px; }
.slot--expanded .slot__time {
  background: transparent;
  border-color: transparent;
  color: var(--c-text);
  font-weight: 700;
  flex: 0 0 auto;
  padding: 0 10px;
}
.slot__confirm {
  background: var(--c-primary);
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 15px;
  border-radius: 8px;
  padding: 0 26px;
  height: 52px;
  flex: 1;
}
.slot__confirm:hover { background: var(--c-primary-2); }

/* ============================================================
   Form pane
   ============================================================ */
.form-pane {
  padding: 8px 16px 16px;
  position: relative;
}
.back-btn {
  background: #fff;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  padding: 6px 14px 6px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.back-btn:hover { background: #F6F8FB; }
.back-btn svg { width: 18px; height: 18px; }

.form-pane__recap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--c-confirm);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 26px;
}
.form-pane__recap .ico { width: 22px; height: 22px; color: var(--c-confirm); flex: none; margin-top: 2px; }

.form-pane__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 22px;
}

.field {
  margin-bottom: 18px;
}
.field__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.field__head label {
  font-weight: 600;
  font-size: 15px;
  color: var(--c-text);
}
.field__req {
  font-size: 13px;
  color: var(--c-required);
  font-weight: 500;
}
.field input {
  width: 100%;
  background: var(--c-input-bg);
  border: 1.5px solid var(--c-primary);
  border-radius: var(--r-input);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--c-text);
  font-weight: 500;
}
.field input:focus {
  outline: none;
  border-color: var(--c-primary-2);
  background: #fff;
}
.field--error input {
  border-color: #D04C4C;
  background: #FFF2F2;
}
.field__error {
  margin: 6px 0 0;
  font-size: 13px;
  color: #D04C4C;
  display: none;
}
.field--error .field__error { display: block; }

.submit-btn {
  width: 100%;
  margin-top: 8px;
  background: var(--c-primary);
  color: #fff;
  border: 0;
  border-radius: var(--r-input);
  padding: 16px;
  font-weight: 700;
  font-size: 16px;
  transition: background .15s;
}
.submit-btn:hover { background: var(--c-primary-2); }
.submit-btn:disabled { opacity: .6; cursor: progress; }

/* ============================================================
   Confirmation (étape 4)
   ============================================================ */
.booking__confirm {
  align-items: center;
  justify-content: center;
  min-height: 451px;
  padding: 14px;
  --show-as: flex;
}
.confirm-card {
  background: var(--c-card-inner);
  border-radius: 14px;
  padding: 36px 48px 32px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}
.confirm-card__logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
}
.confirm-card__logo svg,
.confirm-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.confirm-card__org {
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--c-text);
}
.confirm-card__hello {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 700;
  color: var(--c-confirm);
  line-height: 1.25;
}
.confirm-card__service {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
}
.confirm-card__service .dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--c-primary);  /* 🆕 teal au lieu de jaune */
}
.confirm-card__when {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  margin: 0 0 26px;
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.45;
}
.confirm-card__when .ico { width: 22px; height: 22px; color: var(--c-text); flex: none; margin-top: 2px; }
.confirm-card__msg {
  margin: 0 0 18px;
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.55;
}
.confirm-card__link {
  display: inline-block;
  color: #6C7FF2;
  font-size: 14px;
  text-decoration: underline;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .nav { gap: 18px; }
  .nav__link { font-size: 15px; }
  .page-title { font-size: 44px; }
}

@media (max-width: 760px) {
  .site-header { padding: 12px 12px 0; }
  .site-header__inner { padding: 10px 14px; gap: 8px; }
  .nav { display: none; }
  .brand__name { font-size: 22px; }
  .btn-contact { padding: 10px 22px; font-size: 15px; }
  .page { padding: 18px 14px 60px; }
  .page-title { font-size: 30px; margin: 12px 0 24px; }

  .booking { padding: 12px; }
  .booking__main,
  .booking[data-step="1"] .booking__main,
  .booking[data-step="2"] .booking__main,
  .booking[data-step="3"] .booking__main {
    display: block;
  }
  .service-card { margin-bottom: 12px; padding: 22px; }
  .calendar-pane, .form-pane { padding: 8px 4px 16px; }
  .slots-pane {
    border-left: 0;
    border-top: 1px solid var(--c-border);
    padding: 16px 4px 0;
    margin-top: 14px;
    max-height: none;
  }
  .slots-pane__list { max-height: 320px; }

  .confirm-card { padding: 28px 22px; }
  .confirm-card__hello { font-size: 22px; }
}

/* ============================================================
   Améliorations UX
   ============================================================ */

/* --- Accessibilité --- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- Stepper --- */
.stepper {
  list-style: none;
  margin: 0 auto 24px;
  padding: 0;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 0;
  counter-reset: step;
}
.stepper__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text-soft);
  font-weight: 600;
  font-size: 14px;
  position: relative;
}
.stepper__item:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 2px;
  background: rgba(20, 121, 133, .18);
  margin-left: 6px;
}
.stepper__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(20, 121, 133, .25);
  color: var(--c-text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.stepper__txt { white-space: nowrap; }

.stepper__item.is-active .stepper__num,
.stepper__item.is-done .stepper__num {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.stepper__item.is-active { color: var(--c-primary); }
.stepper__item.is-done { color: var(--c-primary); }
.stepper__item.is-done::after { background: var(--c-primary); }
.stepper__item.is-done .stepper__num::before {
  content: '✓';
  font-size: 14px;
  line-height: 1;
}
.stepper__item.is-done .stepper__num {
  font-size: 0;
}
.stepper__item.is-done .stepper__num::before { font-size: 15px; }

/* --- Service card desc --- */
.service-card__desc {
  margin: 14px 0 0;
  color: var(--c-text-soft);
  font-size: 14px;
  line-height: 1.5;
}
.service-card__tz { opacity: .85; }

/* --- Créneaux : une seule colonne, sections Matin puis Après-midi empilées --- */
.slots-pane__split {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}
.slots-pane__split::-webkit-scrollbar { width: 6px; }
.slots-pane__split::-webkit-scrollbar-thumb { background: #C9D1D9; border-radius: 6px; }
.slots-pane__col {
  display: flex;
  flex-direction: column;
}
.slots-pane__col-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--c-text-soft);
  text-align: left;
  padding-left: 2px;
}
/* Les listes internes ne scrollent plus indépendamment : c'est le split qui scrolle */
.slots-pane__col .slots-pane__list {
  flex: none;
  overflow: visible;
  max-height: none;
}

/* --- Skeleton loader (calendrier) --- */
.calendar--loading .day {
  background: linear-gradient(90deg, #E8F2F0 0%, #D4EDE7 50%, #E8F2F0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
  color: transparent;
  pointer-events: none;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Phone input avec indicatif pays --- */
.phone-input {
  display: flex;
  gap: 8px;
}
.phone-input select#f-phone-cc {
  width: 110px;
  flex: none;
  background-color: var(--c-input-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23147985' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  border: 1.5px solid var(--c-primary);
  border-radius: var(--r-input);
  padding: 12px 28px 12px 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.phone-input input {
  flex: 1;
  min-width: 0;
}

/* --- "Mon besoin" select + textarea --- */
.field select {
  width: 100%;
  background: var(--c-input-bg);
  border: 1.5px solid var(--c-primary);
  border-radius: var(--r-input);
  padding: 12px 36px 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--c-text);
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23147985' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.field select:focus {
  outline: none;
  border-color: var(--c-primary-2);
  background-color: #fff;
}
.field textarea {
  width: 100%;
  margin-top: 8px;
  background: var(--c-input-bg);
  border: 1.5px solid var(--c-primary);
  border-radius: var(--r-input);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--c-text);
  resize: vertical;
  min-height: 50px;
  display: none; /* affich\u00e9 par JS si "Autre" ou "Plusieurs" */
}
.field textarea:focus {
  outline: none;
  border-color: var(--c-primary-2);
  background-color: #fff;
}

/* --- Spinner sur bouton submit --- */
.submit-btn { position: relative; }
.submit-btn__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
  margin-left: 10px;
  vertical-align: middle;
}
.submit-btn.is-loading .submit-btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Confirmation : checkmark animé --- */
.confirm-card__check {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  color: var(--c-confirm);
}
.confirm-card__check svg { width: 100%; height: 100%; }
.confirm-card__check circle {
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: drawCircle .6s ease-out forwards;
}
.confirm-card__check path {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: drawCheck .35s .55s ease-out forwards;
}
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes drawCheck  { to { stroke-dashoffset: 0; } }

/* --- Confirmation actions --- */
.confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 14px;
}
/* "Ajouter \u00e0 mon calendrier" : visible uniquement sur mobile/tablette.
   Sur desktop, le lien est dans l'email de confirmation. */
.confirm-actions__mobile-only { display: none; }
@media (max-width: 900px) {
  .confirm-actions__mobile-only { display: inline-flex; }
}
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  background: #fff;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 18px;
  border-radius: var(--r-input);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-action:hover { background: #F0F8F9; }
.btn-action svg { width: 18px; height: 18px; flex: none; }
.btn-action--primary {
  background: var(--c-primary);
  color: #fff;
}
.btn-action--primary:hover { background: var(--c-primary-2); }

.confirm-card__hint {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--c-text-soft);
  font-style: italic;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  /* Plus rien \u00e0 forcer ici : la mise en page tient en 920px par d\u00e9faut */
}
@media (max-width: 760px) {
  .stepper { gap: 6px; }
  .stepper__txt { display: none; }
  .stepper__item:not(:last-child)::after { margin: 0 4px; }
  .booking[data-step="2"] .booking__main {
    display: block;
  }
  .slots-pane {
    border-left: 0;
    border-top: 1px solid var(--c-border);
    padding-left: 4px;
    padding-top: 18px;
    margin-top: 14px;
    max-height: none;
  }
}