/* Lot IO — Contact step UX
 * External stylesheet to avoid style="" inline and keep contact-step presentation out of JS markup.
 * Étendu : classes bundle, coupon, address toggle, async-panel, waitlist-panel, sidebar icons.
 */

/* ═══════════════════════════════════════════════════════
   Contact step — champs et hints
   ═══════════════════════════════════════════════════════ */

.contact-step-enhanced {
  --contact-gap: 1rem;
}



.contact-step-enhanced .form-group,
.contact-step-enhanced .form-group-details {
  margin-bottom: var(--contact-gap);
}

.contact-restore-inline-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, var(--accent, #6b46c1)) 18%, #e5e7eb);
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand-primary, var(--accent, #6b46c1)) 5%, #fff);
}

.contact-restore-inline-card button,
.contact-restore-inline-card a,
.contact-restore-inline-card [role="button"] {
  white-space: nowrap;
}

.contact-step-blocking-field {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .12) !important;
  border-radius: 12px;
}

.contact-step-blocking-field .form-label,
.contact-step-blocking-field label,
.contact-step-blocking-field .form-label-accordion {
  color: #b91c1c;
}

.contact-step-required-hint {
  margin-top: 6px;
  font-size: .86rem;
  font-weight: 650;
  color: #b91c1c;
}

.contact-step-required-hint[hidden],
#returning-customer-prompt.is-hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════
   Address toggle
   ═══════════════════════════════════════════════════════ */

.btn-link--manual-address {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--brand-primary, #6b46c1);
  padding: 0;
}

.btn-link--manual-address:hover {
  color: var(--brand-primary-dark, #553c9a);
}

.address-feedback-hidden {
  display: none;
}

#address-display-container {
  margin-top: 10px;
}

#manual-address-container {
  margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════
   Bundle section — états
   ═══════════════════════════════════════════════════════ */

.bundle-section-card {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  transition: background 0.2s ease;
}

.bundle-section-card.bundle-state--active {
  background: #f0fff4;
  border-color: #9ae6b4;
}

.bundle-section-card.bundle-state--partial {
  background: #fffaf0;
  border-color: #ecc94b;
}

.bundle-section-card.bundle-state--idle {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.bundle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
}

.bundle-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary, #6366f1);
}

/* Bundle hint — états */
.bundle-status-hint {
  font-size: 12px;
  margin-top: 4px;
  margin-left: 28px;
}

.bundle-hint--idle {
  color: #718096;
}

.bundle-hint--loading {
  color: #718096;
}

.bundle-hint--active {
  color: #2f855a;
}

.bundle-hint--partial {
  color: #7a5a00;
}

.bundle-hint--preview {
  color: #44337a;
}

.bundle-hint--auth {
  color: #718096;
}

.bundle-hint--recommended {
  color: #805ad5;
}

.bundle-hint--error {
  color: #e53e3e;
}

/* Bundle preview card (before auth) */
.bundle-preview-card {
  padding: 10px;
  border: 1px solid #d6bcfa;
  border-radius: 10px;
  background: #faf5ff;
  color: #44337a;
  line-height: 1.45;
}

.bundle-preview-title {
  font-weight: 800;
  color: #553c9a;
  margin-bottom: 4px;
}

.bundle-preview-text {
  font-size: .82rem;
  color: #3d2c00;
  background: #fffaf0;
  border: 1px solid #ecc94b;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.bundle-preview-cta {
  border: none;
  background: #6b46c1;
  color: #fff;
  border-radius: 8px;
  padding: 7px 10px;
  font-weight: 700;
  cursor: pointer;
  font-size: .78rem;
  transition: background 0.2s ease;
}

.bundle-preview-cta:hover {
  background: #553c9a;
}

.bundle-preview-note {
  font-size: .75rem;
  color: #718096;
  margin-bottom: 8px;
}

/* Bundle inline cards (has_bundle state) */
.bundle-inline-card {
  border-radius: 10px;
  padding: 9px 10px;
  line-height: 1.5;
}

.bundle-inline-card--partial {
  color: #3d2c00;
  background: #fffaf0;
  border: 1px solid #ecc94b;
}

.bundle-inline-card--active {
  color: #1a4731;
  background: #f0fff4;
  border: 1px solid #9ae6b4;
}

.bundle-inline-title {
  font-weight: 900;
  color: #7a5a00;
  margin-bottom: 4px;
}

.bundle-inline-card--active .bundle-inline-title {
  color: #276749;
}

/* ═══════════════════════════════════════════════════════
   Coupon suggestions
   ═══════════════════════════════════════════════════════ */

.applicable-coupons {
  margin-top: 10px;
}

.coupon-intro-label {
  font-size: 0.9em;
  color: #4a5568;
}

/* ═══════════════════════════════════════════════════════
   Async booking panel
   ═══════════════════════════════════════════════════════ */

.async-panel {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #ddd6fe;
  border-radius: 16px;
  background: #faf5ff;
}

.async-panel__title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: #4c1d95;
}

.async-panel__description {
  margin: 0 0 14px;
  color: #6b5a7d;
  font-size: .95rem;
}

.async-panel__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.async-panel__field-group {
  display: block;
}

.async-panel__field-group--full {
  margin-top: 12px;
}

.async-panel__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════
   Waitlist panel
   ═══════════════════════════════════════════════════════ */

.waitlist-panel {
  margin-top: 16px;
  padding: 18px;
  border: 1px dashed #c4b5fd;
  border-radius: 16px;
  background: #fcfcff;
}

.waitlist-panel__title {
  margin: 0 0 8px;
  font-size: 1rem;
  color: #4338ca;
}

.waitlist-panel__description {
  margin: 0 0 14px;
  color: #6b7280;
  font-size: .92rem;
}

.waitlist-panel__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.waitlist-panel__field-group {
  display: block;
}

.waitlist-panel__field-group--full {
  display: block;
  margin-top: 12px;
}

.waitlist-panel__submit {
  margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════
   Sidebar icons (SVG decorators)
   ═══════════════════════════════════════════════════════ */

.sidebar-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  color: #7c3aed;
}

/* ═══════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════ */

@media (min-width: 900px) {
  .contact-step-enhanced {
    padding-bottom: 20px;
  }

  .contact-step-enhanced .form-group,
  .contact-step-enhanced .form-group-details {
    margin-bottom: 1.15rem;
  }
}

@media (max-width: 640px) {
  .contact-restore-inline-card {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-restore-inline-card button,
  .contact-restore-inline-card a,
  .contact-restore-inline-card [role="button"] {
    width: 100%;
  }

  .async-panel__fields,
  .waitlist-panel__fields {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════
   Client identifié — badge personnalisé dans le header
   (remplace le prompt générique "Retrouver mes infos")
   ═══════════════════════════════════════════════════════ */

.contact-identified-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  animation: badge-appear 0.3s ease;
}

@keyframes badge-appear {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.contact-identified-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  flex-shrink: 0;
}

.contact-identified-badge__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   Indicateur champ obligatoire — abbr.required-star
   Utilisé pour séparer l'astérisque de la clé i18n
   ═══════════════════════════════════════════════════════ */

abbr.required-star {
  text-decoration: none;
  color: #dc2626;
  font-style: normal;
  cursor: default;
}

/* Optionnel : indicateur CSS générique pour tout champ required
   (en complément de l'abbr pour les champs dont le label ne contient pas d'abbr) */
.form-label:has(~ .form-input[required]) abbr.required-star,
.form-label:has(~ .form-textarea[required]) abbr.required-star {
  color: #dc2626;
}

/* ═══════════════════════════════════════════════════════
   Lisibilité du header contact — text-shadow de sécurité
   Garantit le contraste même si la charte n'est pas encore
   appliquée ou si le gradient a un point clair.
   ═══════════════════════════════════════════════════════ */

.contact-header-top,
.contact-header-top * {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Les boutons ghost du header : fond semi-opaque sombre
   pour garantir la lisibilité sur n'importe quelle couleur de gradient */
.content-header--contact .btn-ghost-sm,
.content-header--contact .back-button {
  background: rgba(0, 0, 0, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
  backdrop-filter: blur(4px);
}

.content-header--contact .btn-ghost-sm:hover,
.content-header--contact .back-button:hover {
  background: rgba(0, 0, 0, 0.28) !important;
}

/* Badge identifié : fond sombre derrière le texte */
.contact-identified-badge {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  padding: 3px 10px 3px 6px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}


/* ═══════════════════════════════════════════════════════
   Lot IT — Contraste explicite du bandeau
   Même si une règle legacy colore le texte, le header force
   la couleur prévue dans la charte graphique.
   ═══════════════════════════════════════════════════════ */

/* P1R6BZ — le texte clair du header s'applique uniquement aux surfaces de header.
   Le panneau du menu client est une surface de contenu/card et ne doit jamais
   hériter de headerText via un sélecteur descendant global. */
.content-header,
.content-header *,
.booking-topbar-brand,
.booking-topbar-brand *,
.booking-user-menu__button,
.booking-user-menu__button *,
.contact-header-top,
.contact-header-top *,
.returning-customer-prompt,
.returning-customer-prompt *,
.contact-identified-badge,
.contact-identified-badge *,
  color: var(--brand-header-text, #fff) !important;
  -webkit-text-fill-color: var(--brand-header-text, #fff) !important;
}

.contact-header-top,
.contact-header-top *,
.content-header--contact *,
.contact-identified-badge,
.contact-identified-badge *,
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.content-header--contact .btn-ghost-sm,
.content-header--contact .back-button,
.contact-identified-badge {
  background: color-mix(in srgb, var(--brand-header-control-bg, #2a174f) 82%, transparent) !important;
  border-color: color-mix(in srgb, var(--brand-header-text, #fff) 52%, transparent) !important;
  color: var(--brand-header-text, #fff) !important;
  -webkit-text-fill-color: var(--brand-header-text, #fff) !important;
  backdrop-filter: blur(6px);
}

.contact-identified-badge__icon {
  background: color-mix(in srgb, var(--brand-header-text, #fff) 22%, transparent) !important;
  color: var(--brand-header-text, #fff) !important;
}

.contact-identified-badge__label {
  color: var(--brand-header-text, #fff) !important;
  -webkit-text-fill-color: var(--brand-header-text, #fff) !important;
}


/* ═══════════════════════════════════════════════════════
   Lot KA — Contraste du bandeau praticien dans la sidebar
   Même règle que le header principal : texte toujours lisible
   sur fond de charte sombre/violet.
   ═══════════════════════════════════════════════════════ */

.booking-sidebar .sidebar-header,
.booking-sidebar .sidebar-header *,
.booking-sidebar .sidebar-practitioner-label,
.booking-sidebar #sidebar-practitioner-name {
  color: var(--brand-header-text, #fff) !important;
  -webkit-text-fill-color: var(--brand-header-text, #fff) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.booking-sidebar .sidebar-header svg {
  color: var(--brand-header-text, #fff) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ═══════════════════════════════════════════════════════
   Lot KB — Sidebar/topbar : images sans style inline + coordonnées lisibles
   ═══════════════════════════════════════════════════════ */

.booking-topbar-logo {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 32px;
  max-width: 84px;
  overflow: hidden;
  border-radius: 6px;
}

.booking-topbar-logo > img,
.booking-topbar-logo-img {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: 84px !important;
  max-height: 32px !important;
  object-fit: contain !important;
  border-radius: 6px;
  vertical-align: middle;
}

.sidebar-practitioner-avatar {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  line-height: 1;
}

.sidebar-practitioner-avatar > img,
.sidebar-practitioner-avatar-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 32px !important;
  max-height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 767px) {
  .booking-topbar-logo {
    height: 28px;
    max-width: 62px;
  }

  .booking-topbar-logo > img,
  .booking-topbar-logo-img {
    max-width: 62px !important;
    max-height: 28px !important;
  }
}

.sidebar-practitioner-meta {
  font-size: .73rem;
  color: #7b7494;
  line-height: 1.4;
  padding: 4px 18px 8px;
}

.sidebar-contact p {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.sidebar-contact a,
.sidebar-contact span {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.45;
}

.sidebar-contact .sidebar-icon {
  flex: 0 0 auto;
  margin-top: .15em;
}

/* ═══════════════════════════════════════════════════════
   Validation contact — état initial non accusateur
   Les erreurs rouges restent masquées tant que l'utilisateur
   n'a pas interagi avec le champ ou cliqué sur Continuer.
   ═══════════════════════════════════════════════════════ */

#step-contact.contact-step-pristine .form-group.error:not(.is-touched) .form-input,
#step-contact.contact-step-pristine .form-group.error:not(.is-touched) .form-textarea,
#step-contact.contact-step-pristine .form-group.error:not(.is-touched) .form-select,
#step-contact.contact-step-pristine .form-group.success:not(.is-touched) .form-input,
#step-contact.contact-step-pristine .form-group.success:not(.is-touched) .form-textarea,
#step-contact.contact-step-pristine .form-group.success:not(.is-touched) .form-select,
#step-contact.contact-step-pristine .form-group-details.error:not(.is-touched) .form-input,
#step-contact.contact-step-pristine .form-group-details.error:not(.is-touched) .form-textarea,
#step-contact.contact-step-pristine .form-group-details.error:not(.is-touched) .form-select,
#step-contact.contact-step-pristine .form-group-details.success:not(.is-touched) .form-input,
#step-contact.contact-step-pristine .form-group-details.success:not(.is-touched) .form-textarea,
#step-contact.contact-step-pristine .form-group-details.success:not(.is-touched) .form-select,
#step-contact.contact-step-pristine .checkbox-legal.error:not(.is-touched),
#step-contact.contact-step-pristine .checkbox-legal.success:not(.is-touched) {
  border-color: color-mix(in srgb, var(--brand-primary, var(--accent, #6b46c1)) 18%, #d9d2e8) !important;
  box-shadow: none !important;
}

#step-contact.contact-step-pristine .form-group.error:not(.is-touched) .field-error,
#step-contact.contact-step-pristine .form-group.success:not(.is-touched) .field-error,
#step-contact.contact-step-pristine .form-group-details.error:not(.is-touched) .field-error,
#step-contact.contact-step-pristine .form-group-details.success:not(.is-touched) .field-error,
#step-contact.contact-step-pristine .checkbox-legal.error:not(.is-touched) .field-error,
#step-contact.contact-step-pristine .checkbox-legal.success:not(.is-touched) .field-error,
#step-contact.contact-step-pristine .contact-step-required-hint {
  display: none !important;
}

#step-contact.contact-step-pristine .form-group.error:not(.is-touched) .form-label,
#step-contact.contact-step-pristine .form-group.success:not(.is-touched) .form-label,
#step-contact.contact-step-pristine .form-group-details.error:not(.is-touched) .form-label,
#step-contact.contact-step-pristine .form-group-details.success:not(.is-touched) .form-label,
#step-contact.contact-step-pristine .form-group-details.error:not(.is-touched) .form-label-accordion,
#step-contact.contact-step-pristine .form-group-details.success:not(.is-touched) .form-label-accordion {
  color: #7b7494 !important;
}

/* ═══════════════════════════════════════════════════════
   Lot KG — Vos informations : finition UX homogène avec le questionnaire
   ═══════════════════════════════════════════════════════ */

.contact-step-enhanced {
  --contact-card-border: color-mix(in srgb, var(--brand-primary, var(--accent, #6b46c1)) 16%, #e5e7eb);
  --contact-card-bg: #fff;
  --contact-card-soft-bg: color-mix(in srgb, var(--brand-primary, var(--accent, #6b46c1)) 5%, #fff);
}

.contact-step-enhanced .content-body--compact {
  padding-top: 18px !important;
}

.contact-progress {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--contact-card-border);
  border-radius: 14px;
  background: var(--contact-card-soft-bg);
}

.contact-progress__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-progress__title {
  font-weight: 760;
  color: var(--brand-text, #1f2937);
}

.contact-progress__count {
  font-size: .9rem;
  font-weight: 800;
  color: var(--brand-primary, var(--accent, #6b46c1));
}

.contact-progress__bar {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--brand-primary, var(--accent, #6b46c1)) 13%, #eef2ff);
}

.contact-progress__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-primary, var(--accent, #6b46c1)), var(--brand-secondary, var(--brand-primary, #6b46c1)));
  transition: width .22s ease;
}

.contact-progress__hint {
  font-size: .88rem;
  color: #6b7280;
}

.contact-progress.is-complete {
  border-color: color-mix(in srgb, var(--brand-success, #16a34a) 24%, #dcfce7);
  background: color-mix(in srgb, var(--brand-success, #16a34a) 6%, #fff);
}

.contact-progress.is-complete .contact-progress__count,
.contact-progress.is-complete .contact-progress__hint {
  color: var(--brand-success, #16a34a);
}

.contact-step-enhanced .form-grid-4.contact-section-card,
.contact-step-enhanced .form-grid-2-compact.contact-section-card {
  position: relative;
  padding: 14px !important;
  margin: 0 0 14px !important;
  border: 1px solid var(--contact-card-border);
  border-radius: 16px;
  background: var(--contact-card-bg);
  box-shadow: 0 8px 24px rgba(40, 24, 70, .05);
}

.contact-step-enhanced .contact-section-card__heading {
  grid-column: 1 / -1;
  display: block;
  margin: 0 0 2px;
  color: var(--public-title);
  font-size: .94rem;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: none;
}

.contact-step-enhanced .contact-section-card .form-group {
  min-width: 0;
}

.contact-step-enhanced .form-group.success .form-input,
.contact-step-enhanced .form-group.success .form-textarea,
.contact-step-enhanced .form-group.success .form-select {
  border-color: color-mix(in srgb, var(--brand-success, #16a34a) 72%, #d1fae5) !important;
  background: color-mix(in srgb, var(--brand-success, #16a34a) 3%, #fff) !important;
}

.contact-step-enhanced .form-group.error .form-input,
.contact-step-enhanced .form-group.error .form-textarea,
.contact-step-enhanced .form-group.error .form-select,
.contact-step-enhanced .contact-step-blocking-field .form-input,
.contact-step-enhanced .contact-step-blocking-field .form-textarea,
.contact-step-enhanced .contact-step-blocking-field .form-select {
  border-color: #dc2626 !important;
  background: #fffafa !important;
}

.contact-step-enhanced.contact-step-pristine .form-group:not(.contact-field-touched) .form-input,
.contact-step-enhanced.contact-step-pristine .form-group:not(.contact-field-touched) .form-textarea,
.contact-step-enhanced.contact-step-pristine .form-group:not(.contact-field-touched) .form-select {
  border-color: #d8d2ea !important;
  background: #fff !important;
}

.contact-step-enhanced .field-error {
  min-height: 16px;
  font-size: .82rem;
  line-height: 1.25;
}

.contact-step-enhanced .contact-identified-badge {
  gap: 8px;
  max-width: 100%;
}


@media (max-width: 767px) {
  .contact-step-enhanced .form-grid-4.contact-section-card,
  .contact-step-enhanced .form-grid-2-compact.contact-section-card {
    padding: 12px !important;
  }

  .contact-progress {
    margin-bottom: 12px;
  }

}

/* ═══════════════════════════════════════════════════════
   Lot KH — harmonie visuelle Vos informations
   Le questionnaire possède désormais son autorité CSS dédiée (P1R6CU-R6).
   ═══════════════════════════════════════════════════════ */

#step-contact.contact-step-enhanced,
#step-contact.contact-step-enhanced #pre-session-questionnaire {
  --ux-panel-border: color-mix(in srgb, var(--public-accent) 18%, var(--public-border));
  --ux-panel-border-strong: color-mix(in srgb, var(--public-accent) 32%, var(--public-border));
  --ux-panel-bg: var(--public-surface);
  --ux-panel-soft-bg: color-mix(in srgb, var(--public-accent-soft) 45%, var(--public-surface));
  --ux-panel-soft-bg-strong: color-mix(in srgb, var(--public-accent-soft) 68%, var(--public-surface));
  --ux-panel-shadow: var(--shadow-xs);
  --ux-help-text: var(--public-text-muted);
}

#step-contact.contact-step-enhanced .contact-progress {
  border-color: var(--ux-panel-border) !important;
  background: var(--ux-panel-soft-bg) !important;
  box-shadow: none !important;
}

#step-contact.contact-step-enhanced .form-grid-4.contact-section-card,
#step-contact.contact-step-enhanced .form-grid-2-compact.contact-section-card {
  border-color: var(--ux-panel-border) !important;
  background: var(--ux-panel-bg) !important;
  box-shadow: var(--ux-panel-shadow) !important;
}

#step-contact.contact-step-enhanced .contact-section-card:focus-within {
  border-color: var(--ux-panel-border-strong) !important;
  box-shadow: var(--shadow-sm) !important;
}

#step-contact.contact-step-enhanced .contact-progress__bar {
  background: color-mix(in srgb, var(--public-accent) 12%, var(--public-surface-muted)) !important;
}

#step-contact.contact-step-enhanced .contact-progress__fill {
  background: var(--brand-gradient-primary) !important;
}

#step-contact.contact-step-enhanced .contact-section-card__heading,
#step-contact.contact-step-enhanced .contact-progress__title {
  color: var(--public-title) !important;
}

/* Les explications de champs deviennent des aides secondaires, pas des messages au même niveau que le champ. */
#step-contact.contact-step-enhanced .form-group:not(.error) .field-error:not(:empty),
#step-contact.contact-step-enhanced .form-group-details:not(.error) .field-error:not(:empty),
#step-contact.contact-step-enhanced .checkbox-legal:not(.error) .field-error:not(:empty),
#step-contact.contact-step-enhanced .form-help-text,
#step-contact.contact-step-enhanced .field-help,
#step-contact.contact-step-enhanced .form-hint,
#step-contact.contact-step-enhanced .help-text,
#step-contact.contact-step-enhanced [data-contact-help] {
  display: block;
  margin-top: 4px;
  min-height: 0;
  font-size: .74rem !important;
  line-height: 1.32 !important;
  font-weight: 450 !important;
  letter-spacing: .005em;
  color: var(--ux-help-text) !important;
}

#step-contact.contact-step-enhanced .form-group.error .field-error:not(:empty),
#step-contact.contact-step-enhanced .form-group-details.error .field-error:not(:empty),
#step-contact.contact-step-enhanced .checkbox-legal.error .field-error:not(:empty) {
  color: var(--error) !important;
}

/* ============================================================================
   Propriété CSS du tunnel public

   Les styles de l’étape Date et heure sont exclusivement maintenus dans :
   - css/datetime-step-ux.css ;
   - css/datetime-calendar-slots-layout.css.

   Aucun sélecteur #step-datetime ne doit être réintroduit dans cette feuille.
   ============================================================================ */

/* ── Lot NW : nettoyage UX contact ─────────────────────────────────────── */
#step-contact .contact-identified-badge,
#step-contact #returning-customer-prompt.contact-identified-badge {
  display: none !important;
}

#booking-customer-session-strip .booking-customer-session-strip__link {
  display: none !important;
}

#step-contact .field-hint {
  margin-top: 6px;
  font-size: .78rem;
  line-height: 1.35;
  font-weight: 600;
  color: color-mix(in srgb, var(--text-mid, #5b556f) 88%, #6b46c1);
}

#step-contact .field-hint--info {
  padding: 7px 9px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-primary, #5b4fcf) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #5b4fcf) 18%, #e9e3f5);
}

#step-contact #phone {
  letter-spacing: .01em;
}

#step-contact #consultation-motif {
  min-height: 120px !important;
  resize: vertical;
  overflow-y: hidden;
}

#step-contact .contact-progress__count--label {
  min-width: auto;
  font-size: .82rem;
  font-weight: 750;
  white-space: nowrap;
}

#step-contact .contact-progress__title {
  font-weight: 850;
}


/* ── Lot NX : hints statiques + nudge connexion doux ───────────────────── */
#step-contact #contact-email-alias-hint.field-hint--email-alias {
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--text-mid, #6b667a) !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  white-space: normal !important;
  pointer-events: none;
}

#step-contact #contact-email-alias-hint[hidden] {
  display: none !important;
}

#step-contact #contact-phone-format-hint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#step-contact .contact-login-nudge {
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #5b4fcf) 14%, #e7def8) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--brand-primary, #5b4fcf) 4%, #fff) !important;
  gap: 10px !important;
}

#step-contact .contact-login-nudge .returning-label {
  color: var(--text-mid, #6b667a) !important;
  -webkit-text-fill-color: var(--text-mid, #6b667a) !important;
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.35;
  text-shadow: none !important;
}

#step-contact .contact-login-nudge #show-auth-modal-link {
  white-space: nowrap;
}


/* ── Lot OE : téléphone international avec pays/indicatif ───────────────── */
#step-contact .iti {
  width: 100%;
  display: block;
}

#step-contact .iti .form-input,
#step-contact .iti input[type="tel"] {
  width: 100%;
}

#step-contact .iti__selected-country {
  border-radius: 12px 0 0 12px;
}

#step-contact .iti__country-list {
  z-index: 9999;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(37, 22, 65, .18);
  border-color: color-mix(in srgb, var(--brand-primary, #5b4fcf) 16%, #e5e0ef);
}

#step-contact .iti__search-input {
  width: calc(100% - 16px);
  margin: 8px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #5b4fcf) 18%, #d9d2e8);
  padding: 8px 10px;
}

#step-contact #contact-phone-format-hint {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}


/* ── Lot OF : correction alignement préfixe téléphone international ─────── */
#step-contact .iti.booking-intl-phone-input {
  width: 100%;
  display: block;
  --booking-phone-prefix-width: 104px;
}

#step-contact .iti.booking-intl-phone-input .iti__country-container {
  top: 1px;
  bottom: 1px;
  left: 1px;
  padding: 0;
  z-index: 4;
  border-right: 1px solid color-mix(in srgb, var(--brand-primary, #5b4fcf) 18%, #ded6ea);
  border-radius: 13px 0 0 13px;
  background: color-mix(in srgb, var(--brand-primary, #5b4fcf) 3%, #fff);
}

#step-contact .iti.booking-intl-phone-input .iti__selected-country {
  height: 100%;
  min-width: calc(var(--booking-phone-prefix-width, 104px) - 12px);
  padding: 0 10px;
  justify-content: center;
  gap: 5px;
  color: var(--brand-text, #1f2937);
}

#step-contact .iti.booking-intl-phone-input .iti__selected-country-primary {
  padding: 0;
  gap: 5px;
}

#step-contact .iti.booking-intl-phone-input .iti__selected-dial-code {
  display: inline-flex !important;
  align-items: center;
  margin-left: 4px;
  font-weight: 800;
  color: var(--brand-primary, #4a0b77);
  white-space: nowrap;
  line-height: 1;
}

#step-contact .iti.booking-intl-phone-input .iti__arrow {
  margin-left: 6px;
  flex: 0 0 auto;
}

#step-contact .iti.booking-intl-phone-input input#phone.iti__tel-input,
#step-contact .iti.booking-intl-phone-input input#phone.form-input {
  padding-left: var(--booking-phone-prefix-width, 104px) !important;
  padding-right: 42px !important;
  min-height: 45px;
  line-height: 1.35;
}

#step-contact .iti.booking-intl-phone-input .iti__flag {
  flex: 0 0 auto;
}

#step-contact .iti.booking-intl-phone-input.booking-intl-phone-input--ready input#phone {
  transition: padding-left .12s ease;
}

@media (max-width: 480px) {
  #step-contact .iti.booking-intl-phone-input {
    --booking-phone-prefix-width: 96px;
  }

  #step-contact .iti.booking-intl-phone-input .iti__selected-country {
    min-width: calc(var(--booking-phone-prefix-width, 96px) - 10px);
    padding: 0 8px;
  }

  #step-contact .iti.booking-intl-phone-input input#phone.iti__tel-input,
  #step-contact .iti.booking-intl-phone-input input#phone.form-input {
    padding-left: var(--booking-phone-prefix-width, 96px) !important;
  }
}


/* ── Lot OG : indicatif pays toujours visible dans le sélecteur téléphone ─ */
#step-contact .iti.booking-intl-phone-input .iti__selected-dial-code {
  display: none !important;
}

#step-contact .iti.booking-intl-phone-input .booking-intl-phone-visible-dial-code {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  margin-left: 4px;
  font-weight: 850;
  font-size: .88rem;
  line-height: 1;
  color: var(--brand-primary, #4a0b77) !important;
  -webkit-text-fill-color: var(--brand-primary, #4a0b77) !important;
  white-space: nowrap;
  opacity: 1 !important;
  visibility: visible !important;
}

#step-contact .iti.booking-intl-phone-input .iti__selected-country {
  overflow: visible !important;
}

#step-contact .iti.booking-intl-phone-input .iti__selected-country-primary {
  flex: 0 0 auto;
}

#step-contact .iti.booking-intl-phone-input .iti__arrow {
  opacity: .9;
}

#step-contact .iti.booking-intl-phone-input[data-selected-dial-code] .iti__selected-country::after {
  content: "";
  display: none;
}


/* ── Lot OH : restauration sélecteur téléphone + motif plus confortable ─── */
#step-contact #phone.form-input {
  background-color: #fff;
}

#step-contact #phone[data-intl-phone-ready="1"],
#step-contact .iti.booking-intl-phone-input input#phone {
  font-variant-numeric: tabular-nums;
}

#step-contact .form-grid-2-compact--request {
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .85fr) !important;
  align-items: stretch;
}

#step-contact .form-grid-2-compact--request .form-group--motif {
  min-width: 0;
}

#step-contact .form-grid-2-compact--request #consultation-motif {
  min-height: 148px !important;
  height: auto;
}

#step-contact .form-grid-2-compact--request #notes {
  min-height: 86px;
}

@media (max-width: 900px) {
  #step-contact .form-grid-2-compact--request {
    grid-template-columns: 1fr !important;
  }

  #step-contact .form-grid-2-compact--request #consultation-motif {
    min-height: 132px !important;
  }
}


/* P1R6AI — statut d'admission de réservation, propriétaire distinct des erreurs email. */
#step-contact .booking-admission-status[hidden] {
  display: none !important;
}

#step-contact .booking-admission-status[data-state="blocked"] {
  display: block;
  grid-column: 1 / -1;
  margin: 10px 0 2px;
  padding: 12px 14px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fff1f2;
  color: #991b1b;
  font-size: .86rem;
  line-height: 1.42;
  font-weight: 700;
}