/* ── Prodige Booking Widget ──────────────────────────────────────────── */

.pb-icon {
    display: inline-block;
    vertical-align: -3px;
    flex-shrink: 0;
    color: var(--pb-primary, #1a1a2e);
}

.pb-widget {
    max-width: 560px;
    margin: 0 auto;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 65%, transparent);
    border-radius: 18px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    box-shadow: 0 1px 2px rgba(28,26,23,.04), 0 8px 20px rgba(28,26,23,.06);
    background: #fff;
}

/* Header */
.pb-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1.5px solid rgba(28,26,23,.12);
    color: #1c1a17;
}
.pb-avatar {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pb-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    box-shadow: 0 2px 6px rgba(28,26,23,.15);
    color: #fff;
}
.pb-avatar .pb-icon { color: #fff; vertical-align: 0; }
.pb-title  { font-weight: 700; flex: 1; letter-spacing: -.01em; font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; font-size: 16px; }
.pb-status { font-size: 11px; color: #8a8175; display: flex; align-items: center; gap: 4px; }
.pb-status::before { content: ''; display: inline-block; width: 6px; height: 6px; background: #2e7d32; border-radius: 50%; animation: pb-pulse 2s infinite; }
@keyframes pb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* Barre "Changer de collaborateur" */
.pb-switch-staff-bar {
    padding: 7px 20px;
    text-align: right;
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #fff);
    border-bottom: 1.5px solid rgba(28,26,23,.08);
}
.pb-switch-staff-btn {
    border: none;
    background: none;
    color: var(--pb-primary, #1a1a2e);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    font-family: inherit;
}
.pb-switch-staff-btn:hover { text-decoration: underline; }

/* Messages */
.pb-messages {
    height: 340px;
    overflow-y: auto;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f8f8fb;
}

.pb-message { max-width: 84%; word-break: break-word; }
.pb-message p { margin: 0; padding: 11px 15px; border-radius: 16px; line-height: 1.55; }

.pb-message--bot   { align-self: flex-start; }
.pb-message--bot p { background: #fff; border: 1px solid #eaeaef; color: #222; border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }

.pb-message--user   { align-self: flex-end; }
.pb-message--user p { background: var(--pb-primary); color: #fff; border-bottom-right-radius: 4px; }

/* Typing indicator */
.pb-loading {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}
.pb-loading span {
    width: 7px; height: 7px;
    background: #aaa;
    border-radius: 50%;
    animation: pb-bounce 1.2s infinite;
}
.pb-loading span:nth-child(2) { animation-delay: .2s; }
.pb-loading span:nth-child(3) { animation-delay: .4s; }

@keyframes pb-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%            { transform: translateY(-6px); }
}

/* Confirm form */
.pb-confirm-form {
    margin: 0 14px 10px;
    padding: 16px 18px;
    background: var(--pb-secondary, #f0f7ff);
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 18%, transparent);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.75;
}
.pb-confirm-summary { margin: 0 0 14px; }
.pb-confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.pb-optin-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    margin: 10px 0;
    line-height: 1.5;
}
.pb-optin-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--pb-primary, #1a1a2e);
}

/* Input area */
.pb-input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #e0e0e0;
    background: #fff;
}

#pb-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    outline: none;
    line-height: 1.5;
    transition: border-color .2s;
}
#pb-input:focus { border-color: var(--pb-primary); }

/* Buttons */
.pb-btn { cursor: pointer; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; padding: 9px 16px; transition: opacity .15s; }
.pb-btn:disabled { opacity: .5; cursor: not-allowed; }

.pb-btn--primary { background: var(--pb-primary); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--pb-primary, #1a1a2e) 35%, transparent); }
.pb-btn--primary:hover:not(:disabled) { opacity: .85; }
.pb-btn--primary .pb-icon { color: #fff; }

.pb-btn--ghost { background: transparent; color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 35%, #444); border: 1px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 20%, #ccc); }
.pb-btn--ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #f0f0f0); }

.pb-btn--send {
    background: var(--pb-primary);
    color: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pb-btn--send svg { width: 18px; height: 18px; }
.pb-btn--send:hover:not(:disabled) { opacity: .85; }

/* Contact bar */
.pb-contact-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
}
.pb-contact-link {
    font-size: 13px;
    color: #555;
    text-decoration: none;
    padding: 4px 12px;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 65%, transparent);
    border-radius: 20px;
    transition: background .15s, color .15s;
}
.pb-contact-link:hover { background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 8%, #fff); color: #222; }

/* Admin schedule table */
.pb-schedule-table td,
.pb-schedule-table th { padding: 8px 12px; vertical-align: middle; }

/* ── Layout wrapper ────────────────────────────────────────────────── */
.pb-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: inherit;
}

/* Title */
.pb-page-title {
    font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
    font-size: 28px;
    font-weight: 700;
    color: inherit;
    margin: 0;
    line-height: 1.25;
    letter-spacing: -.01em;
}

/* ── Bannière paiement abandonné ──────────────────────────────────────── */
.pb-pending-banner {
    background: #fff8e6;
    border: 1.5px solid #f59e0b;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 4px;
}
.pb-pending-banner-title {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 15px;
    color: #92400e;
}
.pb-pending-banner-text {
    margin: 0 0 12px;
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}
.pb-pending-banner-hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: #777;
}

/* ── Bannière espace client (connecté / proposition de connexion) ─────── */
.pb-client-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--pb-secondary, #f0f7ff) 55%, #fff);
    border: 1.5px solid var(--pb-primary, #1a1a2e);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 4px;
    font-size: 14px;
}
.pb-client-banner-text { color: var(--pb-primary, #1a1a2e); font-weight: 600; }
.pb-client-banner-logout { color: var(--pb-primary, #1a1a2e); text-decoration: underline; font-size: 13px; white-space: nowrap; }
.pb-client-banner-hint { margin: 8px 0 4px; font-size: 12.5px; color: #666; }

.pb-client-login {
    background: color-mix(in srgb, var(--pb-secondary, #f0f7ff) 55%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 35%, transparent);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 4px;
}
.pb-client-login-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--pb-primary, #1a1a2e);
}
.pb-client-login-toggle span:last-child { font-size: 13px; font-weight: 400; text-decoration: underline; white-space: nowrap; }
.pb-client-login-form {
    display: none;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.pb-client-login-form.pb-open { display: flex; }
.pb-client-login-form input[type="email"] {
    flex: 1;
    min-width: 200px;
    padding: 10px 12px;
    border: 1.5px solid #d8dce3;
    border-radius: 8px;
    font-size: 14px;
}
.pb-client-login-msg { width: 100%; font-size: 13px; margin-top: 8px; }
.pb-client-login-msg.pb-ok  { color: #1e6b38; }
.pb-client-login-msg.pb-err { color: #b91c1c; }

/* ── Choix "compte / invité" (après le créneau, avant les coordonnées) ── */
.pb-identify-intro { margin: 0 0 4px; font-size: 14px; }
.pb-identify-choices { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.pb-identify-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 16px 18px;
    border: 1.5px solid var(--pb-primary, #1a1a2e);
    border-radius: 12px;
    background: color-mix(in srgb, var(--pb-secondary, #f0f7ff) 45%, #fff);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.pb-identify-btn:hover { background: color-mix(in srgb, var(--pb-secondary, #f0f7ff) 70%, #fff); transform: translateY(-1px); }
.pb-identify-btn strong { font-size: 15px; color: var(--pb-primary, #1a1a2e); }
.pb-identify-btn span   { font-size: 13px; color: #666; }
.pb-identify-btn--secondary { border-color: #d8dce3; background: #fff; }
.pb-identify-btn--secondary:hover { background: #fafafa; }

.pb-identify-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; }
.pb-identify-msg { font-size: 13px; margin: 6px 0 10px; }
.pb-identify-msg.pb-ok  { color: #1e6b38; }
.pb-identify-msg.pb-err { color: #b91c1c; }
.pb-identify-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.pb-identify-link { background: none; border: none; padding: 0; color: var(--pb-primary, #1a1a2e); text-decoration: underline; font-size: 13px; cursor: pointer; }

/* Proposition de définir un mot de passe après connexion par lien magique */
.pb-set-password-box {
    background: color-mix(in srgb, var(--pb-secondary, #f0f7ff) 45%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 30%, transparent);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 4px;
}
.pb-set-password-box p { margin: 0 0 10px; font-size: 13px; color: #555; }
.pb-set-password-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-set-password-row input[type="password"] {
    flex: 1;
    min-width: 180px;
    padding: 10px 12px;
    border: 1.5px solid #d8dce3;
    border-radius: 8px;
    font-size: 14px;
}

/* ── Staff selector (liste compacte, accent au survol) ───────────────── */
.pb-staff-selector {
    background: color-mix(in srgb, var(--pb-secondary, #f0f7ff) 55%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 65%, transparent);
    border-radius: 20px;
    padding: 20px 20px 22px;
}

.pb-staff-selector-hint {
    font-size: 17px;
    font-weight: 800;
    color: var(--pb-primary, #1a1a2e);
    margin: 0 0 14px;
    letter-spacing: -.01em;
}

.pb-staff-list {
    display: flex;
    flex-direction: column;
}

.pb-staff-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 16%, transparent);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, padding-left .15s ease;
}

.pb-staff-list .pb-staff-card:last-child {
    border-bottom: none;
}

.pb-staff-card:hover {
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, transparent);
    border-left-color: var(--pb-primary, #1a1a2e);
    padding-left: 8px;
}

.pb-staff-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pb-primary, #1a1a2e) 14%, transparent);
}

.pb-staff-avatar--init {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pb-primary, #1a1a2e) 22%, #fff),
        color-mix(in srgb, var(--pb-primary, #1a1a2e) 10%, #fff));
}

.pb-staff-avatar--init span {
    font-size: 14px;
    font-weight: 800;
    color: var(--pb-primary, #1a1a2e);
    letter-spacing: -.01em;
    line-height: 1;
    user-select: none;
}

.pb-staff-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pb-staff-card--any .pb-staff-card-name,
.pb-staff-card-name--any {
    color: #6b6f76;
    font-weight: 600;
}

.pb-staff-card-name {
    font-weight: 700;
    font-size: 15.5px;
    color: #1a1d21;
    line-height: 1.3;
}

.pb-staff-card-desc {
    font-size: 12.5px;
    color: #777;
    line-height: 1.5;
    margin-top: 2px;
}

.pb-staff-card-chevron {
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 55%, #9a9a9e);
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
}

/* ── Booking wrap (colonne : carrousel + chat empilés) ──────────────── */
.pb-booking-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pb-booking-wrap--hidden { display: none; }

.pb-booking-wrap .pb-widget {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
}

/* Back button */
.pb-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1.5px solid #ccc;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
    align-self: flex-start;
}
.pb-back-btn:hover { background: #f5f5f5; border-color: #999; color: #222; }

/* ── Section services avec carrousel ─────────────────────────────────── */
.pb-svc-section {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.pb-svc-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.pb-services-title {
    font-size: 13px;
    font-weight: 700;
    color: #777;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
    margin: 0;
}

/* Filtres catégories (pills) */
.pb-cat-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    flex: 1;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pb-cat-filters::-webkit-scrollbar { display: none; }

.pb-cat-btn {
    padding: 5px 15px;
    border-radius: 20px;
    border: 1.5px solid var(--pb-primary, #1a1a2e);
    background: transparent;
    color: var(--pb-primary, #1a1a2e);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}
.pb-cat-btn:hover,
.pb-cat-btn--active {
    background: var(--pb-primary, #1a1a2e);
    color: #fff;
}

/* Carrousel */
.pb-carousel-outer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pb-carousel-track {
    flex: 1;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 6px;
    /* La navigation se fait par les flèches (ou le doigt en tactile) : la barre de défilement
       native est entièrement masquée plutôt qu'affinée, pour ne pas doubler la navigation avec
       un indicateur redondant — voir sizeCarouselCards()/scrollCarousel() dans chat.js. */
    scrollbar-width: none;
}
.pb-carousel-track::-webkit-scrollbar { display: none; }
/* Ajouté par JS (updateCarouselNav) quand toutes les cartes tiennent sans défilement,
   pour éviter qu'elles restent collées à gauche avec beaucoup d'espace vide à droite. */
.pb-carousel-track--fit { justify-content: center; }

.pb-carousel-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--pb-primary, #1a1a2e);
    color: #fff;
    font-size: 26px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(28,26,23,.14);
    transition: opacity .15s, transform .15s;
    padding: 0;
    font-family: inherit;
}
.pb-carousel-btn:hover:not(:disabled) {
    opacity: .82;
    transform: scale(1.08);
}
.pb-carousel-btn:disabled { opacity: .2; cursor: default; }

@media (max-width: 420px) {
    /* En dessous de cette largeur, les flèches empièteraient sur les cartes (voir sizeCarouselCards()
       dans chat.js, qui vise ~200px minimum par carte) : le doigt (glisser) reste la navigation. */
    .pb-carousel-btn { display: none; }
}

/* Cards dans le carrousel — largeur calculée par sizeCarouselCards() (chat.js) pour qu'un
   nombre ENTIER de cartes (jamais plus de 4) tienne exactement dans la largeur disponible,
   quelle que soit celle-ci : jamais de carte coupée au bord, quelle que soit la mise en page du
   site qui héberge le widget. --pb-card-w a une valeur de repli avant l'exécution du JS. */
.pb-service-card {
    flex: 0 0 var(--pb-card-w, 220px);
    box-sizing: border-box; /* padding/bordure inclus dans --pb-card-w calculé en JS, sinon la carte déborde de sa largeur prévue */
    scroll-snap-align: start;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    padding: 20px 18px 18px;
    border: 1.5px solid #ececec;
    border-top: 3px solid var(--pb-primary, #1a1a2e);
    transition: box-shadow .2s, transform .15s;
    display: flex;
    flex-direction: column;
}
.pb-service-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    transform: translateY(-2px);
}

.pb-service-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.pb-service-name {
    font-weight: 700;
    font-size: 14px;
    color: inherit;
    line-height: 1.35;
    flex: 1;
}

.pb-service-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--pb-primary, #1a1a2e);
    white-space: nowrap;
    flex-shrink: 0;
}

.pb-service-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pb-service-badge {
    font-size: 11px;
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 10%, #f5f5f5);
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 80%, #333);
    border-radius: 20px;
    padding: 2px 9px;
    white-space: nowrap;
    line-height: 1.6;
}

.pb-service-desc {
    font-size: 12px;
    color: #777;
    margin: 10px 0 0;
    line-height: 1.55;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    flex: 1;
}

.pb-service-book-btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 11px 12px;
    background: var(--pb-primary, #1a1a2e);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: opacity .15s;
    font-family: inherit;
}
.pb-service-book-btn:hover { opacity: .85; }

/* Image de service */
.pb-service-img-wrap {
    margin: -16px -16px 12px;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    height: 120px;
    flex-shrink: 0;
}
.pb-service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   Formulaire classique premium v1.6
   ══════════════════════════════════════════════════════════════════════ */

/* Wrap principal — large pour accueillir deux colonnes */
.pb-classic-wrap {
    max-width: 1060px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    color: inherit;
}

/* En-tête */
.pb-classic-header  { margin-bottom: 28px; }
.pb-classic-title   { font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; font-size: 26px; font-weight: 700; color: inherit; margin: 0 0 5px; letter-spacing: -.01em; line-height: 1.2; }
.pb-classic-subtitle { color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 35%, #444); margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.pb-classic-contact-hint { color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 22%, #666); font-size: 14px; margin: 4px 0 0; }
.pb-cl-contact-link { color: var(--pb-primary, #1a1a2e); text-decoration: underline; }
.pb-cl-contact-link:hover { opacity: .8; }

/* Layout deux colonnes */
.pb-cl-main {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.pb-cl-steps {
    flex: 1;
    min-width: 0;
}

.pb-cl-sidebar {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
}

/* ── Barre de progression avec points et connecteurs ── */
.pb-cl-progress {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

.pb-prog-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pb-prog-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 20%, #e8e8e8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, box-shadow .25s;
}

.pb-prog-dot span {
    font-size: 13px;
    font-weight: 700;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 55%, #555);
    transition: color .25s;
    line-height: 1;
}

.pb-prog-label {
    font-size: 11px;
    font-weight: 700;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 45%, #555);
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: color .25s;
    text-align: center;
    white-space: nowrap;
}

.pb-prog-connector {
    flex: 1;
    height: 2px;
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 10%, #e8e8e8);
    margin: 0 6px;
    margin-bottom: 22px;
    transition: background .3s;
}
.pb-prog-connector.done { background: #2e7d32; }

.pb-prog-step.active .pb-prog-dot { background: var(--pb-primary, #1a1a2e); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pb-primary, #1a1a2e) 15%, transparent); }
.pb-prog-step.active .pb-prog-dot span { color: #fff; }
.pb-prog-step.active .pb-prog-label   { color: var(--pb-primary, #1a1a2e); }

.pb-prog-step.done .pb-prog-dot { background: #2e7d32; }
.pb-prog-step.done .pb-prog-dot span { color: #fff; }
.pb-prog-step.done .pb-prog-label { color: #2e7d32; }

/* ── Panneaux avec animation ── */
.pb-cl-panel,
#pb-cl-location-panel {
    animation: pb-panel-in .22s ease;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 65%, transparent);
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: 0 1px 2px rgba(28,26,23,.04), 0 8px 20px rgba(28,26,23,.06);
}
.pb-cl-panel--hidden { display: none; }
/* #pb-cl-location-panel n'a plus la classe .pb-cl-panel (voir classic.php) : elle était captée
   sans le vouloir par le sélecteur non filtré de showPanel() dans classic.js (document.querySelectorAll
   sur .pb-cl-panel, pas limité aux 5 vraies étapes) — même famille de bug que .pb-svc-card corrigé
   juste avant, ici purement préventif (aucun symptôme constaté avec l'ordre d'appel actuel, mais
   le même risque exact). Le panneau lieu reste visuellement identique via cette règle sur son id.

@keyframes pb-panel-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pb-cl-panel-title {
    font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
    font-size: 19px;
    font-weight: 700;
    color: inherit;
    margin: 0 0 20px;
    letter-spacing: -.01em;
}

.pb-cl-back {
    /* display: flex (pas inline-flex) : un élément inline seul, sans rien d'autre sur sa ligne,
       ne créait pas l'espacement vertical attendu malgré margin-bottom (retour de Barbara, "trop
       collé au titre" dans toutes les étapes) — flex reste sur sa propre ligne comme un bloc, tout
       en gardant l'alignement flèche+texte. */
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 16%, #888);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 22px;
    font-family: inherit;
    transition: color .15s;
}
.pb-cl-back:hover { color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 45%, #2a2a2a); }

.pb-cl-error { color: #c00; font-size: 13px; margin: 4px 0; }
.pb-cl-hint  { color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 20%, #777); font-size: 13px; margin-top: 10px; }

/* ── Onglets catégories (mode classique) ──── */
.pb-cl-cat-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #f0f0f0);
}

.pb-cl-cat-tab {
    padding: 7px 18px;
    border-radius: 8px;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 25%, #ddd);
    background: #fff;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 35%, #444);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    white-space: nowrap;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--pb-primary, #1a1a2e) 8%, transparent);
}

.pb-cl-cat-tab:hover:not(.pb-cl-cat-tab--active) {
    border-color: var(--pb-primary, #1a1a2e);
    color: var(--pb-primary, #1a1a2e);
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 5%, #fff);
}

.pb-cl-cat-tab--active {
    background: var(--pb-primary, #1a1a2e);
    border-color: var(--pb-primary, #1a1a2e);
    color: #fff;
}

/* ── Grille de cartes de services ── */
.pb-svc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.pb-svc-card {
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 12%, #ebebeb);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .22s, transform .22s, border-color .22s;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, transparent), 0 6px 16px color-mix(in srgb, var(--pb-primary, #1a1a2e) 8%, transparent);
}

.pb-svc-card:hover {
    box-shadow: 0 10px 32px rgba(0,0,0,.11);
    border-color: var(--pb-primary, #1a1a2e);
    transform: translateY(-3px);
}

.pb-svc-card.selected {
    border-color: var(--pb-primary, #1a1a2e);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-primary, #1a1a2e) 15%, transparent);
}

/* Photo du service */
.pb-svc-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 12%, color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #f2f2f2));
    flex-shrink: 0;
}

/* Placeholder initiales quand pas de photo */
.pb-svc-photo--init {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--pb-primary, #1a1a2e) 18%, #f5f5f5),
        color-mix(in srgb, var(--pb-primary, #1a1a2e) 7%, #fafafa));
}

.pb-svc-photo--init span {
    font-size: 44px;
    font-weight: 800;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 22%, color-mix(in srgb, var(--pb-primary, #1a1a2e) 18%, #e0e0e0));
    letter-spacing: -.02em;
    line-height: 1;
    user-select: none;
}

/* Corps de la carte */
.pb-svc-info {
    padding: 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pb-svc-name {
    font-size: 17px;
    font-weight: 700;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 55%, #14120d);
    margin: 0;
    line-height: 1.3;
}

.pb-svc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pb-svc-badge {
    font-size: 12px;
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #f3f3f3);
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 30%, #555);
    border-radius: 20px;
    padding: 3px 10px;
    font-weight: 600;
    line-height: 1.5;
}

.pb-svc-badge--price {
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 10%, #fff);
    color: var(--pb-primary, #1a1a2e);
}

.pb-svc-desc {
    font-size: 13px;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 22%, #666);
    line-height: 1.6;
    margin: 0;
}

/* Pied de la carte — CTA */
.pb-svc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: var(--pb-primary, #1a1a2e);
    transition: background .2s;
}
.pb-svc-card:hover .pb-svc-footer { background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 85%, #000); }

.pb-svc-cta {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.pb-svc-arrow {
    color: #fff;
    flex-shrink: 0;
    transition: transform .2s;
}
.pb-svc-card:hover .pb-svc-arrow { transform: translateX(3px); }

/* ── Sélection du lieu (mode multi-lieux, page de réservation sans IA) ────────
   Cartes dédiées plutôt qu'une réutilisation telle quelle des cartes service
   (.pb-svc-card ci-dessus) : un lieu n'a pas de photo prévue dans sa fiche (contrairement à un
   service), le gros carré "photo" avec une simple initiale rendait l'écran plat et peu engageant
   (retour explicite de Barbara). Une ligne pleine largeur par lieu par défaut, empilées
   verticalement plutôt qu'une grille à colonnes — plus lisible avec 2-3 lieux, et le nom du lieu
   (ce qui compte vraiment ici) est mis en avant en grand plutôt que noyé sous une photo vide. */
.pb-cl-location-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Carte autonome (ne partage plus la classe .pb-svc-card avec les cartes service, voir
   classic.php — un sélecteur JS non filtré sur .pb-svc-card ailleurs dans classic.js déclenchait
   sinon aussi la sélection de service au clic sur un lieu, un vrai bug vécu et corrigé). Toutes les
   propriétés nécessaires (fond, bordure, ombre, survol) sont donc reprises ici explicitement. */
.pb-cl-loc-card {
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 12%, #ebebeb);
    border-radius: 16px;
    cursor: pointer;
    transition: box-shadow .22s, transform .22s, border-color .22s;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, transparent), 0 6px 16px color-mix(in srgb, var(--pb-primary, #1a1a2e) 8%, transparent);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
}
.pb-cl-loc-card:hover {
    box-shadow: 0 10px 32px rgba(0,0,0,.11);
    border-color: var(--pb-primary, #1a1a2e);
    transform: translateY(-3px);
}

.pb-cl-loc-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pb-cl-loc-name {
    font-size: 21px;
    font-weight: 800;
    color: var(--pb-primary, #1a1a2e);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.pb-cl-loc-desc {
    font-size: 13.5px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.pb-cl-loc-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: var(--pb-primary, #1a1a2e);
    color: #fff;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    transition: background .2s, transform .2s;
}
.pb-cl-loc-card:hover .pb-cl-loc-cta { background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 85%, #000); }
.pb-cl-loc-card:hover .pb-cl-loc-cta svg { transform: translateX(3px); }
.pb-cl-loc-cta svg { transition: transform .2s; flex-shrink: 0; }

/* Responsive : sous ~480px, le bouton passe sous le nom/l'adresse plutôt que de les compresser
   horizontalement — jamais de texte tronqué ou de bouton écrasé sur petit écran. */
@media (max-width: 480px) {
    .pb-cl-loc-card {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .pb-cl-loc-cta {
        justify-content: center;
    }
}

/* ── Pagination des services (6 par page au-delà de 6 services) ── */
.pb-cl-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
}
.pb-cl-pager-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 20%, #e0e0e0);
    background: #fff;
    color: var(--pb-primary, #1a1a2e);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s, box-shadow .15s;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--pb-primary, #1a1a2e) 8%, transparent);
}
.pb-cl-pager-btn:hover:not(:disabled) { background: var(--pb-primary, #1a1a2e); color: #fff; }
.pb-cl-pager-btn:disabled { opacity: .3; cursor: default; }
.pb-cl-pager-label {
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 30%, #666);
    min-width: 90px;
    text-align: center;
}

/* ── Calendrier ── */
.pb-cl-calendar {
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 10%, #e8e8e8);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--pb-primary, #1a1a2e) 5%, transparent), 0 8px 20px color-mix(in srgb, var(--pb-primary, #1a1a2e) 7%, transparent);
}

.pb-cal-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--pb-primary, #1a1a2e);
    color: #fff;
}

.pb-cal-month-label { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }

.pb-cal-nav {
    background: none;
    border: none;
    color: rgba(255,255,255,.85);
    font-size: 24px;
    line-height: 1;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    transition: background .15s, color .15s;
}
.pb-cal-nav:hover:not([disabled]) { background: rgba(255,255,255,.15); color: #fff; }
.pb-cal-nav[disabled] { opacity: .3; cursor: default; }

.pb-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 10px;
    gap: 3px;
}

.pb-cal-dh {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 12%, #aaa);
    padding: 6px 2px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pb-cal-day {
    text-align: center;
    padding: 9px 3px;
    font-size: 14px;
    border-radius: 8px;
    transition: background .15s, color .15s;
    user-select: none;
    line-height: 1;
}

.pb-cal-day--off  { color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #d8d8d8); }

.pb-cal-day--on {
    font-weight: 600;
    cursor: pointer;
    color: var(--pb-primary, #1a1a2e);
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 8%, #fff);
}
.pb-cal-day--on:hover { background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 18%, #fff); }

.pb-cal-day--sel {
    background: var(--pb-primary, #1a1a2e) !important;
    color: #fff !important;
    font-weight: 700;
}

.pb-cal-day--today:not(.pb-cal-day--sel) {
    box-shadow: inset 0 0 0 2px var(--pb-primary, #1a1a2e);
    font-weight: 700;
}

/* ── Créneaux horaires ── */
.pb-slots-label {
    font-size: 12px;
    font-weight: 700;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 20%, #777);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 12px;
}

.pb-slots-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.pb-slot {
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 18%, #e0e0e0);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 45%, #2a2a2a);
    font-family: inherit;
    transition: background .15s, border-color .15s, color .15s;
    min-width: 64px;
    text-align: center;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--pb-primary, #1a1a2e) 5%, transparent);
}
.pb-slot:hover    { border-color: var(--pb-primary, #1a1a2e); color: var(--pb-primary, #1a1a2e); }
.pb-slot--sel     { background: var(--pb-primary, #1a1a2e); border-color: var(--pb-primary, #1a1a2e); color: #fff; }

/* ── Mes préférences (filtre jours / moment de la journée) ── */
.pb-cl-prefs {
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 10%, #e8e8e8);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, transparent);
}
.pb-cl-prefs summary {
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
}
.pb-cl-prefs summary::-webkit-details-marker { display: none; }
.pb-cl-prefs summary::after {
    content: "▾";
    margin-left: auto;
    color: var(--pb-primary, #1a1a2e);
    transition: transform .2s;
}
.pb-cl-prefs[open] summary::after { transform: rotate(180deg); }
.pb-cl-prefs-hint { font-weight: 400; color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 16%, #888); font-size: 12px; }
.pb-cl-prefs-badge {
    font-weight: 700;
    font-size: 12px;
    color: var(--pb-primary, #1a1a2e);
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 12%, #fff);
    border-radius: 20px;
    padding: 2px 10px;
    margin-left: 6px;
}
.pb-week-scroll-hint {
    font-size: 12px;
    font-weight: 600;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 20%, #777);
    margin: 0 0 6px;
    text-align: right;
}
.pb-cl-prefs-body { padding: 4px 16px 16px; border-top: 1px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #f0f0f0); }
.pb-cl-prefs-row { margin-top: 12px; }
.pb-cl-prefs-label { display: block; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 20%, #777); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.pb-cl-prefs-days, .pb-cl-prefs-period { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-cl-prefs-toggle {
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 18%, #e0e0e0);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 35%, #444);
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s, color .15s;
}
.pb-cl-prefs-toggle:hover { border-color: var(--pb-primary, #1a1a2e); }
.pb-cl-prefs-toggle--active {
    background: var(--pb-primary, #1a1a2e);
    border-color: var(--pb-primary, #1a1a2e);
    color: #fff;
}
.pb-cl-prefs-clear {
    background: none;
    border: none;
    color: var(--pb-primary, #1a1a2e);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    padding: 12px 0 0;
}

/* ── Calendrier semaine (7 jours, créneaux visibles directement) ── */
.pb-week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--pb-primary, #1a1a2e);
    color: #fff;
    padding: 12px 18px;
    border-radius: 14px 14px 0 0;
}
.pb-week-label { font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
/* Barre de défilement miroir au-dessus de la grille (voir commentaire dans classic.php) : ne
   montre rien d'autre qu'une barre de défilement horizontale, synchronisée en JS avec la vraie
   grille en dessous. Hauteur réduite au strict nécessaire pour ne montrer que le rail. */
.pb-week-scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    height: 16px;
    margin-bottom: 2px;
}
.pb-week-scroll-top-inner { height: 1px; }
.pb-week-grid-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 10%, #e8e8e8);
    border-top: none;
    border-radius: 0 0 14px 14px;
    margin-bottom: 20px;
}
.pb-week-grid { display: flex; min-width: 560px; }
.pb-week-col {
    flex: 1;
    min-width: 78px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border-right: 1px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #f2f2f2);
}
.pb-week-col:last-child { border-right: none; }
.pb-week-col-head { text-align: center; margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #f2f2f2); width: 100%; }
.pb-week-col-dow { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 12%, #aaa); }
.pb-week-col-num { display: block; font-size: 15px; font-weight: 700; color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 45%, #2a2a2a); margin-top: 2px; }
.pb-week-col-head--today .pb-week-col-num {
    color: var(--pb-primary, #1a1a2e);
    box-shadow: inset 0 0 0 2px var(--pb-primary, #1a1a2e);
    border-radius: 50%;
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
}
.pb-week-col-empty { color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #d8d8d8); font-size: 14px; margin-top: 6px; }
.pb-week-slot {
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 18%, #e0e0e0);
    border-radius: 8px;
    padding: 7px 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 45%, #2a2a2a);
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: center;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--pb-primary, #1a1a2e) 5%, transparent);
    transition: background .15s, border-color .15s, color .15s;
}
.pb-week-slot:hover { border-color: var(--pb-primary, #1a1a2e); color: var(--pb-primary, #1a1a2e); }

@media (max-width: 560px) {
    .pb-week-grid { min-width: 480px; }
    .pb-week-col { min-width: 66px; }
}

/* ── Champs de formulaire ── */
.pb-cl-fields { display: flex; flex-direction: column; gap: 14px; }

.pb-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pb-field { display: flex; flex-direction: column; }

.pb-field-lbl {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 35%, #444);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pb-req { color: #c00; font-weight: 700; }
.pb-opt { color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 14%, #999); font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: 0; }

.pb-cl-input {
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 18%, #e0e0e0);
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color .2s, box-shadow .2s;
    background: #fff;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 55%, #14120d);
    appearance: none;
}
.pb-cl-input:focus {
    border-color: var(--pb-primary, #1a1a2e);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-primary, #1a1a2e) 12%, transparent);
}

/* Neutralise le fond jaune que certains navigateurs imposent aux champs auto-remplis */
.pb-cl-input:-webkit-autofill,
.pb-cl-input:-webkit-autofill:hover,
.pb-cl-input:-webkit-autofill:focus,
.pb-cl-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 55%, #14120d) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ── Opt-in ── */
.pb-optin-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 35%, #444);
    cursor: pointer;
    line-height: 1.55;
    margin: 10px 0;
}
.pb-optin-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--pb-primary, #1a1a2e);
    cursor: pointer;
}

/* ── Récapitulatif étape 4 ── */
.pb-cl-summary { margin-bottom: 20px; }

.pb-cl-sum-list {
    background: color-mix(in srgb, var(--pb-primary, #1a1a2e) 4%, #f8f9fb);
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 8%, #eaeaea);
    border-radius: 14px;
    overflow: hidden;
}

.pb-cl-sum-row {
    display: flex;
    gap: 14px;
    padding: 11px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #eee);
    align-items: baseline;
}
.pb-cl-sum-row:last-child { border-bottom: none; }

.pb-cl-sum-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 14%, #999);
    min-width: 70px;
    flex-shrink: 0;
}

.pb-cl-sum-val {
    font-size: 14px;
    font-weight: 500;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 55%, #14120d);
    flex: 1;
    /* Sans min-width:0, un flex-item garde par défaut la largeur de son contenu comme plancher
       (min-width:auto) — pour un email un peu long (un seul "mot" sans espace), ce plancher
       dépassait la largeur disponible et .pb-cl-sum-list (overflow:hidden) rognait le texte
       silencieusement au lieu de le laisser passer à la ligne. */
    min-width: 0;
    overflow-wrap: break-word;
}

/* ── Succès ── */
.pb-cl-success {
    text-align: center;
    padding: 48px 24px 40px;
}

.pb-cl-success-check {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #e8f5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.pb-cl-success-check svg {
    width: 34px;
    height: 34px;
    color: #2e7d32;
}

.pb-cl-success h3 { font-size: 22px; font-weight: 800; color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 55%, #14120d); margin: 0 0 10px; letter-spacing: -.02em; }
.pb-cl-success p  { color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 30%, #555); font-size: 15px; margin: 0; line-height: 1.6; }

/* ── Sidebar de récapitulatif live ── */
.pb-sidebar-card {
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 65%, transparent);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(28,26,23,.04), 0 8px 20px rgba(28,26,23,.06);
}

.pb-sidebar-head {
    background: #faf7f2;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(28,26,23,.1);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 60%, #444);
}

.pb-sidebar-body { padding: 6px 0; }

.pb-sidebar-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--pb-primary, #1a1a2e) 6%, #f3f3f3);
}
.pb-sidebar-row:last-child { border-bottom: none; }

.pb-sidebar-key {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 35%, #777);
}

.pb-sidebar-val {
    font-size: 14px;
    font-weight: 600;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 55%, #14120d);
    line-height: 1.4;
}

.pb-sidebar-empty {
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 30%, #999);
    font-size: 13px;
    text-align: center;
    padding: 24px 16px;
    margin: 0;
    line-height: 1.5;
}

/* ── Responsive ── */
@media (max-width: 860px) {
    .pb-cl-main {
        flex-direction: column-reverse;
    }
    .pb-cl-steps {
        /* Sans ça, align-items:flex-start (nécessaire en colonnes desktop) fait que
           cette colonne se dimensionne sur son contenu le plus large (ex : la grille
           calendrier à 480px min-width) une fois empilée en colonne sur mobile,
           au lieu de se limiter à la largeur de l'écran → débordement horizontal
           de toute la page. */
        width: 100%;
    }
    .pb-cl-sidebar {
        width: 100%;
        position: static;
    }
    .pb-cl-sidebar-card, .pb-sidebar-card {
        display: none; /* Masqué sur mobile : le résumé étape 4 suffit */
    }
    .pb-svc-grid {
        grid-template-columns: 1fr;
    }
    .pb-fields-row {
        grid-template-columns: 1fr;
    }
    .pb-classic-title { font-size: 22px; }
}


/* Seuil vérifié empiriquement (pas une valeur au hasard) : avec ses 5 libellés français
   (SERVICE / COLLABORATEUR / DATE & HEURE / COORDONNÉES / CONFIRMATION, chacun un seul mot
   sans espace pour "COLLABORATEUR"/"CONFIRMATION"/"COORDONNÉES" — donc jamais coupables au
   milieu), la barre de progression a besoin d'environ 500-550px pour tenir sans les masquer.
   En dessous de 460px (l'ancien seuil), elle passait déjà en mode pastilles seules — mais entre
   460px et ~550px, les libellés restaient affichés SANS assez de place : la dernière étape
   ("5 Confirmation") se retrouvait poussée hors de l'écran, coupée. 580px laisse une marge de
   sécurité confortable au-delà du point de bascule réel mesuré (~550-560px). */
@media (max-width: 580px) {
    .pb-prog-label { display: none; }
    .pb-prog-dot   { width: 28px; height: 28px; }
    .pb-prog-dot span { font-size: 11px; }
    .pb-prog-connector { margin: 0 3px; margin-bottom: 5px; }
}

/* ── Carte de confirmation visuelle (item 8) ──────────────────────── */
.pb-confirmed-card {
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid #e8f5e9;
    border-radius: 18px;
    padding: 36px 28px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.08);
    animation: pb-fade-in .4s ease;
}
@keyframes pb-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.pb-confirmed-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--pb-primary, #1a1a2e);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(28,26,23,.15);
}
.pb-confirmed-icon .pb-icon { color: #fff; }
.pb-confirmed-title {
    margin: 0 0 16px;
    color: #1a7a1a;
    font-size: 22px;
    font-weight: 700;
}
.pb-confirmed-details {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 16px 20px;
    text-align: left;
    margin-bottom: 20px;
    font-size: 14px;
    color: color-mix(in srgb, var(--pb-primary, #1a1a2e) 45%, #2a2a2a);
    line-height: 1.8;
}
.pb-confirmed-details p {
    margin: 0;
}
.pb-confirmed-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.pb-confirmed-actions .pb-btn {
    font-size: 13px;
    padding: 10px 18px;
}