/**
 * Booking Calendar - Frontend CSS
 * Présentation « Classique »
 *
 * Les couleurs effectives viennent de Weeben_V5_Loader::palette(),
 * injectée en style inline après cette feuille (voir la section
 * « Présentation classique » en bas de fichier) : les valeurs var(...)
 * ci-dessous ne sont que des filets de sécurité si l'injection ne
 * tourne pas.
 */

/* Variables globales */
:root {
    --primary-color: #3f7da2;
    --primary-light: #5a8db8;
    --success-color: #48bb78;
    --danger-color: #fc8181;
}

.weeben-booking-wrapper {
    --wb-font-ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --wb-font-display: 'Piazzolla', Georgia, 'Times New Roman', serif;

    --wb-radius-xs: 8px;
    --wb-radius-sm: 11px;
    --wb-radius-md: 16px;
    --wb-radius-lg: 22px;
    --wb-radius-pill: 999px;

    --wb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --wb-ease-out-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    font-family: var(--wb-font-ui);
    -webkit-font-smoothing: antialiased;
}

/* Reset */
.weeben-booking-wrapper * {
    box-sizing: border-box;
}

.weeben-booking-wrapper ::selection {
    background: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    color: #fff;
}

/* Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes slideRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

@keyframes weeben-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes weeben-ring-pop {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes weeben-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .weeben-booking-wrapper * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Wrapper principal */
.weeben-booking-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 24px;
}

/* ==========================================
   SECTION 1 : SÉLECTION DU SERVICE
   ========================================== */

#service-selection-section h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    color: #15161b;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.service-card {
    background: var(--wb-surface, #fff);
    border: 1.5px solid var(--wb-border, #e4e4e8);
    border-radius: var(--wb-radius-md);
    padding: 28px;
    text-align: center;
    cursor: pointer;
    transition: border-color 200ms var(--wb-ease-out-soft), box-shadow 200ms var(--wb-ease-out-soft),
                transform 200ms var(--wb-ease-out-soft), background-color 200ms var(--wb-ease-out-soft);
    position: relative;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    box-shadow: var(--wb-elevation, 0 14px 30px rgba(0, 47, 167, .14));
}

.service-card:active {
    transform: translateY(-3px) scale(0.99);
}

.service-card.selected {
    border-color: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    border-width: 2px;
    background: var(--wb-primary-soft, #eef2ff);
    box-shadow: 0 0 0 3px var(--wb-primary-soft, #eef2ff);
}

.service-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wb-primary-soft, #eef2ff);
    color: white;
}
.service-card .service-icon svg , .service-duration svg, .service-price svg .selected-service-info svg{
    fill: none;
    color: var(--e-global-color-primary, var(--wb-primary, #002fa7));
}
.service-name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.005em;
    margin: 0 0 12px 0;
    color: #15161b;
    min-height: 52px;
}

.service-description {
    color: var(--wb-text, #15161b);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px 0;
    min-height: 60px;
}

.service-details, .service-price {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    padding: 14px;
    background: var(--wb-soft-bg, #f3f3f5);
    border-radius: var(--wb-radius-xs);
}

.service-duration,
.service-price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

.service-duration svg,
.service-price svg {
    color: var(--e-global-color-primary, var(--wb-primary, #002fa7));
}

.service-select-btn {
    width: 100%;
    padding: 13px 24px;
    background: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    color: white;
    border: none;
    border-radius: var(--wb-radius-sm);
    font-weight: 700;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 160ms var(--wb-ease-out-soft), transform 120ms var(--wb-ease-out-soft);
}

.service-select-btn:hover {
    opacity: .9;
}

.service-select-btn:active {
    transform: scale(0.98);
}

/* ==========================================
   SECTION 2 : SÉLECTION DE DATE
   ========================================== */

.selected-service-badge {
    padding: 10px 20px;
    background: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    color: white;
    border-radius: var(--wb-radius-pill, 999px);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    animation: slideUp 320ms var(--wb-ease-out) both;
}

.btn-back {
    padding: 10px 20px;
    background: var(--wb-surface, #fff);
    border: 1.5px solid var(--wb-border, #e4e4e8);
    border-radius: var(--wb-radius-sm);
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color 160ms var(--wb-ease-out-soft), color 160ms var(--wb-ease-out-soft),
                transform 120ms var(--wb-ease-out-soft);
    color: #475569;
}

.btn-back:hover {
    border-color: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    color: var(--e-global-color-primary, var(--wb-primary, #002fa7));
}

.btn-back:active {
    transform: scale(0.97);
}

/* Navigation semaine */
.week-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding: 16px 20px;
    background: var(--wb-surface, #fff);
    border: 1px solid var(--wb-border, #e4e4e8);
    border-radius: var(--wb-radius-lg);
    animation: slideUp 320ms var(--wb-ease-out) both;
}

.week-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--wb-border, #e4e4e8);
    background: var(--wb-surface, #fff);
    color: var(--wb-text, #15161b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 160ms var(--wb-ease-out-soft), color 160ms var(--wb-ease-out-soft),
                transform 120ms var(--wb-ease-out-soft);
}

.week-nav-btn:hover {
    border-color: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    color: var(--e-global-color-primary, var(--wb-primary, #002fa7));
}

.week-nav-btn:active {
    transform: scale(0.92);
}

#week-title {
    margin: 0;
    font-family: var(--wb-font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 21px;
}

/* Calendrier semaine */
.week-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    margin-bottom: 30px;
    animation: fadeIn 380ms var(--wb-ease-out) both;
}

.day-unavailable {
    background: var(--wb-day-closed, #f3f3f5) !important;
}

.day-card {
    background: var(--wb-surface, #fff);
    border: 1.5px solid var(--wb-border, #e4e4e8);
    border-radius: var(--wb-radius-sm);
    padding: 18px;
    text-align: center;
    cursor: pointer;
    transition: border-color 160ms var(--wb-ease-out-soft), background-color 160ms var(--wb-ease-out-soft),
                color 160ms var(--wb-ease-out-soft), transform 160ms var(--wb-ease-out-soft),
                box-shadow 160ms var(--wb-ease-out-soft);
    position: relative;
}

.day-card:hover:not(.day-past):not(.day-blocked):not(.day-unavailable) {
    transform: translateY(-4px);
    border-color: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    box-shadow: var(--wb-elevation, 0 10px 22px rgba(0, 47, 167, .12));
}

.day-card:active:not(.day-past):not(.day-blocked):not(.day-unavailable) {
    transform: scale(0.96);
}

.day-card.day-selected {
    background: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    border-color: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    box-shadow: var(--wb-elevation, 0 10px 22px rgba(0, 47, 167, .18));
}

.day-card.day-past {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.day-card.day-blocked {
    background: rgba(185, 28, 28, .06);
    border-color: rgba(185, 28, 28, .25);
    cursor: not-allowed;
    pointer-events: none;
}

.day-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: 0.7;
    margin-bottom: 8px;
}

.day-number {
    font-size: 26px;
    font-weight: 800;
    margin: 8px 0;
    font-variant-numeric: tabular-nums;
}

.day-month {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 8px;
}

.day-bookings {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    background: var(--wb-soft-bg, #f3f3f5);
    border-radius: var(--wb-radius-pill, 999px);
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}

.day-selected .day-bookings {
    background: rgba(255, 255, 255, 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .day-card:hover:not(.day-past):not(.day-blocked):not(.day-unavailable),
    .day-card:active:not(.day-past):not(.day-blocked):not(.day-unavailable) {
        transform: none;
    }
}

/* Section créneaux */
#slots-section {
    margin: 30px 0;
    animation: slideUp 320ms var(--wb-ease-out) both;
}

.slots-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.slots-header h3 {
    margin: 0;
    font-family: var(--wb-font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 22px;
}

#selected-date-display {
    padding: 8px 16px;
    background: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    border-radius: var(--wb-radius-xs);
    color: #ffffff;
    font-weight: 700;
}

.slots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.slots-period {
    background: var(--wb-surface, #fff);
    border: 1px solid var(--wb-border, #e4e4e8);
    border-radius: var(--wb-radius-md);
    padding: 20px;
}

.slots-period h4 {
    margin: 0 0 15px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--wb-muted, #5c5f68);
}

.slots-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 9px;
}

.time-slot {
    padding: 11px;
    background: var(--wb-slot-bg, #fff);
    border: 1.5px solid var(--wb-border, #e4e4e8);
    border-radius: var(--wb-radius-sm);
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    transition: border-color 160ms var(--wb-ease-out-soft), background-color 160ms var(--wb-ease-out-soft),
                color 160ms var(--wb-ease-out-soft), transform 120ms var(--wb-ease-out-soft),
                box-shadow 160ms var(--wb-ease-out-soft);
    color: var(--wb-text, #15161b);
}

.time-slot:hover:not(.unavailable) {
    border-color: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    background: var(--wb-primary-soft, #eef2ff);
}

.time-slot:active:not(.unavailable) {
    transform: scale(0.95);
}

.time-slot.selected {
    background: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    color: white;
    border-color: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    box-shadow: var(--wb-elevation, 0 8px 18px rgba(0, 47, 167, .16));
}

.time-slot.unavailable {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .time-slot:active:not(.unavailable) {
        transform: none;
    }
}

/* Bouton prochaine disponibilité */
.btn-next-available {
    padding: 16px 32px;
    background: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    color: white;
    border: none;
    border-radius: var(--wb-radius-sm);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 160ms var(--wb-ease-out-soft), box-shadow 160ms var(--wb-ease-out-soft);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--wb-elevation, 0 8px 20px rgba(0, 47, 167, .18));
}

.btn-next-available:hover {
    transform: translateY(-2px);
}

.btn-next-available:active {
    transform: translateY(-1px) scale(0.98);
}

.btn-next-available svg {
    animation: slideRight 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .btn-next-available svg { animation: none; }
    .btn-next-available:hover,
    .btn-next-available:active { transform: none; }
}

/* ==========================================
   SECTION 3 : FORMULAIRE
   ========================================== */

.booking-form-card {
    background: var(--wb-surface, #fff);
    border: 1px solid var(--wb-border, #e4e4e8);
    border-radius: var(--wb-radius-md);
    padding: 30px;
    margin-top: 30px;
    animation: slideUp 320ms var(--wb-ease-out) both;
}

.booking-form-card h3 {
    margin: 0 0 20px 0;
    font-family: var(--wb-font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 23px;
}

#booking-summary {
    padding: 16px 18px;
    background: var(--wb-soft-bg, #f3f3f5);
    border-radius: var(--wb-radius-xs);
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.6;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--wb-border, #e4e4e8);
    border-radius: var(--wb-radius-sm);
    background: var(--wb-field-bg, #fff);
    font-size: 15px;
    font-family: inherit;
    color: var(--wb-text, #15161b);
    transition: border-color 160ms var(--wb-ease-out-soft), box-shadow 160ms var(--wb-ease-out-soft);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--e-global-color-primary, var(--wb-primary, #002fa7));
    box-shadow: 0 0 0 3px var(--wb-primary-soft, #eef2ff);
}

.btn-submit,
.btn-new {
    width: 100%;
    padding: 16px 24px;
    background: var(--wb-primary, #002fa7);
    color: white;
    border: none;
    border-radius: var(--wb-radius-sm);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 160ms var(--wb-ease-out-soft), transform 120ms var(--wb-ease-out-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--wb-elevation, 0 10px 24px rgba(0, 47, 167, .18));
}

.btn-submit:hover,
.btn-new:hover {
    opacity: .9;
}

.btn-submit:active:not(:disabled),
.btn-new:active {
    transform: scale(0.99);
}

.btn-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .btn-submit:active:not(:disabled),
    .btn-new:active {
        transform: none;
    }
}

/* Message de succès */
#booking-success {
    animation: fadeIn 380ms var(--wb-ease-out) both;
}

.success-card {
    text-align: center;
    padding: 60px 40px;
    background: var(--wb-surface, #fff);
    border: 1px solid var(--wb-border, #e4e4e8);
    border-radius: var(--wb-radius-md);
}

.success-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-bottom: 20px;
}

.success-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--wb-soft-bg, #f3f3f5);
    opacity: 0;
    transform: scale(0.5);
    animation: weeben-ring-pop 480ms var(--wb-ease-out) 40ms both;
}

.success-icon svg {
    position: relative;
    color: var(--wb-success, #15803d);
}

.success-icon svg path {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
    animation: weeben-draw 480ms var(--wb-ease-out) 140ms both;
}

.success-icon svg polyline {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    animation: weeben-draw 320ms var(--wb-ease-out) 480ms both;
}

.success-card h3 {
    font-family: var(--wb-font-display);
    font-style: italic;
    font-weight: 600;
    color: var(--wb-success, #15803d);
    margin-bottom: 10px;
    font-size: 30px;
    opacity: 0;
    animation: weeben-fade-up 380ms var(--wb-ease-out) 620ms both;
}

.success-card p {
    color: #5c5f68;
    font-size: 16px;
    margin-bottom: 20px;
    opacity: 0;
    animation: weeben-fade-up 380ms var(--wb-ease-out) 720ms both;
}

.success-card .btn-new {
    opacity: 0;
    animation: weeben-fade-up 380ms var(--wb-ease-out) 820ms both;
}

@media (prefers-reduced-motion: reduce) {
    .success-icon::before,
    .success-icon svg path,
    .success-icon svg polyline,
    .success-card h3,
    .success-card p,
    .success-card .btn-new {
        animation: none;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
    }
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    .weeben-booking-wrapper {
        padding: 14px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-details, .service-price{
        flex-direction: column;
        gap: 10px;
    }

    .week-calendar {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .day-card {
        padding: 12px;
    }

    .day-number {
        font-size: 21px;
    }

    .slots-grid {
        grid-template-columns: 1fr;
    }

    .slots-container {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .booking-form-card {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .week-navigation {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    #week-title {
        font-size: 19px;
    }

    .day-card {
        padding: 10px;
    }

    .day-number {
        font-size: 19px;
    }

    .service-card {
        padding: 20px;
    }

    .service-name {
        font-size: 18px;
    }
}

/* Ajoutez ce CSS à votre fichier de styles */

.service-description {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 10px;
    margin-bottom: 15px;
    line-height: 1.55;
    color: var(--wb-muted, #5c5f68);

    /* Style de la scrollbar pour navigateurs Webkit (Chrome, Safari, Edge) */
    scrollbar-width: thin;
    scrollbar-color: var(--wb-border, #e4e4e8) transparent;
}

/* Scrollbar personnalisée pour Chrome/Safari/Edge */
.service-description::-webkit-scrollbar {
    width: 6px;
}

.service-description::-webkit-scrollbar-track {
    background: transparent;
}

.service-description::-webkit-scrollbar-thumb {
    background: var(--wb-border, #e4e4e8);
    border-radius: 10px;
}

.service-description::-webkit-scrollbar-thumb:hover {
    background: var(--wb-muted, #5c5f68);
}

/* Effet de dégradé en bas pour indiquer qu'il y a plus de contenu */
.service-card {
    position: relative;
}

.service-description::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, transparent, var(--wb-surface, #fff));
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms var(--wb-ease-out-soft);
}

.service-description:not(:hover)::after {
    opacity: 1;
}
/* Image de prestation, présentation classique */
.service-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-bottom: 16px;
    border-radius: var(--wb-radius-xs);
    overflow: hidden;
    background: rgba(0, 0, 0, .04);
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 420ms var(--wb-ease-out);
}

.service-card:hover .service-image img { transform: scale(1.045); }

@media (prefers-reduced-motion: reduce) {
    .service-card:hover .service-image img { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Message sous les créneaux horaires
   Réglé dans Réservations → Réglages → Général.
══════════════════════════════════════════════════════════════════════ */

.slots-notice {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.65;
}

.slots-notice p { margin: 0 0 8px; }
.slots-notice p:last-child { margin-bottom: 0; }

.slots-notice--info {
    padding: 16px 20px;
    border-radius: var(--wb-radius-xs);
    background: rgba(0, 0, 0, .03);
    border: 1px solid rgba(0, 0, 0, .08);
}

.slots-notice--warning {
    padding: 16px 20px;
    border-radius: var(--wb-radius-xs);
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
}

.slots-notice--plain {
    opacity: .75;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════
   Présentation classique — couleurs réglées dans Couleurs et textes
   Ces règles branchent les éléments de la présentation classique sur la
   même palette que la présentation Étapes, pour que les deux répondent
   aux mêmes réglages.
══════════════════════════════════════════════════════════════════════ */

.weeben-booking-wrapper .selected-service-badge {
    background: var(--wb-badge-bg, var(--wb-primary)) !important;
    color: var(--wb-badge-text, var(--wb-on-primary, #fff)) !important;
}

.weeben-booking-wrapper .week-navigation {
    background: var(--wb-header-bg, transparent);
}

.weeben-booking-wrapper .week-navigation h3 {
    color: var(--wb-header-text, var(--wb-text));
}

.weeben-booking-wrapper .week-nav-btn {
    background: var(--wb-back-bg, var(--wb-surface));
    color: var(--wb-nav, var(--wb-text));
    border-color: var(--wb-border);
}

.weeben-booking-wrapper .day-card {
    background: var(--wb-day-bg, #fff);
    border-color: var(--wb-border);
}

.weeben-booking-wrapper .day-name {
    color: var(--wb-day-name, var(--wb-muted));
}

.weeben-booking-wrapper .day-number,
.weeben-booking-wrapper .day-month {
    color: var(--wb-text);
}

.weeben-booking-wrapper .day-bookings {
    background: var(--wb-count-bg, transparent);
    color: var(--wb-count-text, var(--wb-muted));
}

.weeben-booking-wrapper .day-card.day-selected {
    background: var(--wb-day-selected, var(--wb-primary)) !important;
    border-color: var(--wb-day-selected, var(--wb-primary)) !important;
}

.weeben-booking-wrapper .day-card.day-selected .day-name,
.weeben-booking-wrapper .day-card.day-selected .day-number,
.weeben-booking-wrapper .day-card.day-selected .day-month,
.weeben-booking-wrapper .day-card.day-selected .day-bookings {
    color: var(--wb-on-primary, #fff) !important;
}

.weeben-booking-wrapper .day-card.day-unavailable {
    background: var(--wb-day-closed, var(--wb-soft-bg));
    color: var(--wb-day-closed-text, var(--wb-muted));
}

/* Jour ouvert dont tous les créneaux sont pris */
.weeben-booking-wrapper .day-card.day-full {
    background: var(--wb-day-full, #fdecec);
    border-color: var(--wb-day-full, #fdecec);
    cursor: not-allowed;
    pointer-events: none;
}

.weeben-booking-wrapper .day-card.day-full .day-name,
.weeben-booking-wrapper .day-card.day-full .day-number,
.weeben-booking-wrapper .day-card.day-full .day-month,
.weeben-booking-wrapper .day-card.day-full .day-bookings {
    color: var(--wb-day-full-text, #b42318);
}

.weeben-booking-wrapper .day-card.day-full .day-bookings {
    background: transparent;
}

.weeben-booking-wrapper .slots-header h3,
.weeben-booking-wrapper .booking-form-card h3 {
    color: var(--wb-heading, var(--wb-text));
}

.weeben-booking-wrapper #selected-date-display {
    background: var(--wb-badge-bg, var(--wb-primary));
    color: var(--wb-badge-text, var(--wb-on-primary, #fff));
}

.weeben-booking-wrapper .slots-period {
    background: var(--wb-header-bg, transparent);
}

.weeben-booking-wrapper .slots-period h4 {
    color: var(--wb-slot-group, var(--wb-muted));
}

.weeben-booking-wrapper .time-slot {
    background: var(--wb-slot-bg, #fff);
    border-color: var(--wb-border);
    color: var(--wb-text);
}

.weeben-booking-wrapper .time-slot.selected {
    background: var(--wb-slot-selected, var(--wb-primary)) !important;
    border-color: var(--wb-slot-selected, var(--wb-primary)) !important;
    color: var(--wb-on-primary, #fff) !important;
}

.weeben-booking-wrapper .form-group label {
    color: var(--wb-label, var(--wb-text));
}

.weeben-booking-wrapper .form-group input,
.weeben-booking-wrapper .form-group textarea,
.weeben-booking-wrapper .form-group select {
    background: var(--wb-field-bg, #fff);
    border-color: var(--wb-field-border, var(--wb-border));
    color: var(--wb-text);
}

.weeben-booking-wrapper .btn-submit {
    background: var(--wb-submit-bg, var(--wb-primary)) !important;
    color: var(--wb-on-submit, var(--wb-on-primary, #fff)) !important;
}

.weeben-booking-wrapper .btn-back {
    background: var(--wb-back-bg, var(--wb-surface));
    color: var(--wb-back-text, var(--wb-text));
}

.weeben-booking-wrapper .service-description {
    color: var(--wb-service-desc, var(--wb-muted));
}

.weeben-booking-wrapper .service-duration {
    color: var(--wb-duration, var(--wb-muted));
}

.weeben-booking-wrapper .service-price {
    color: var(--wb-price, var(--wb-text));
}

.weeben-booking-wrapper .slots-notice--warning {
    background: var(--wb-warning-bg, #fffbeb);
    border-color: var(--wb-warning-border, #fcd34d);
    color: var(--wb-warning-text, #92400e);
}

/* ══════════════════════════════════════════════════════════════════════
   Choix du praticien — présentation classique
   Une étape à part entière, au même niveau visuel que le choix de la
   prestation et de la date.
══════════════════════════════════════════════════════════════════════ */

.weeben-booking-wrapper .weeben-classic-staff {
    margin: 0 0 24px;
}

.weeben-booking-wrapper .weeben-staff-title {
    font-family: var(--wb-font-display);
    font-style: italic;
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--wb-heading, var(--wb-text, #15161b));
}

.weeben-booking-wrapper .weeben-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.weeben-booking-wrapper .weeben-staff-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 14px;
    background: var(--wb-surface, #fff);
    border: 1.5px solid var(--wb-border, #e4e4e8);
    border-radius: var(--wb-radius, 14px);
    cursor: pointer;
    text-align: center;
    transition: border-color 180ms var(--wb-ease-out-soft), box-shadow 180ms var(--wb-ease-out-soft),
                transform 180ms var(--wb-ease-out-soft);
}

.weeben-booking-wrapper .weeben-staff-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--wb-elevation, 0 8px 20px rgba(0, 47, 167, .1));
}

.weeben-booking-wrapper .weeben-staff-card:active {
    transform: scale(0.98);
}

.weeben-booking-wrapper .weeben-staff-card.is-selected {
    border-color: var(--wb-primary, #002fa7);
    background: var(--wb-primary-soft, #eef2ff);
}

.weeben-booking-wrapper .weeben-staff-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--wb-primary, #002fa7);
    color: var(--wb-on-primary, #fff);
    font-size: 20px;
    font-weight: 700;
}

.weeben-booking-wrapper .weeben-staff-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.weeben-booking-wrapper .weeben-staff-avatar.is-any {
    background: var(--wb-soft-bg, #f3f3f5);
    color: var(--wb-muted, #5c5f68);
}

.weeben-booking-wrapper .weeben-staff-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--wb-text, #15161b);
}

.weeben-booking-wrapper .weeben-staff-role {
    font-size: 12px;
    line-height: 1.4;
    color: var(--wb-staff-role, var(--wb-muted, #5c5f68));
}

.weeben-booking-wrapper .weeben-classic-staff-hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--wb-muted, #5c5f68);
}

@media (prefers-reduced-motion: reduce) {
    .weeben-booking-wrapper .weeben-staff-card:hover,
    .weeben-booking-wrapper .weeben-staff-card:active { transform: none; }
}

/* Attente du choix du praticien, avant l'affichage du calendrier */
.weeben-booking-wrapper .weeben-staff-waiting {
    margin: 0 0 20px;
    padding: 16px 20px;
    border-radius: var(--wb-radius, 12px);
    background: var(--wb-soft-bg, #f3f3f5);
    color: var(--wb-on-soft, var(--wb-muted, #5c5f68));
    font-size: 15px;
    text-align: center;
}

/* Praticien retenu, ajouté au récapitulatif */
.weeben-booking-wrapper .weeben-summary-staff {
    margin-top: 4px;
}

/* Forfaits et cartes en vente, sous les prestations (présentation classique) */
.weeben-booking-wrapper .weeben-classic-packages {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--wb-border, #e4e4e8);
}

.weeben-booking-wrapper .weeben-classic-packages-title {
    font-family: var(--wb-font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 24px;
    margin: 0 0 6px;
    color: var(--wb-heading, var(--wb-text, #15161b));
}

.weeben-booking-wrapper .weeben-classic-packages-lead {
    margin: 0 0 18px;
    color: var(--wb-lead, var(--wb-muted, #5c5f68));
}

/* Mention Rézervéo sous le formulaire (licence avec logo, essai…) */
.rezerveo-credit {
    margin: 14px auto 0;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    color: var(--wb-muted, var(--wb-text-light, #6b7280));
    opacity: 0.75;
}

.rezerveo-credit a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    border: 0;
    box-shadow: none;
}

.rezerveo-credit img {
    display: block;
    width: 64px;
    height: 16px;
    margin: 0;
    border: 0;
    box-shadow: none;
}

.rezerveo-credit a:hover,
.rezerveo-credit a:focus-visible {
    opacity: 1;
}

/* Zone de texte : en mode « Pilule », un angle arrondi mais pas une capsule */
.form-group textarea {
    border-radius: min(var(--wb-radius-sm), var(--wb-radius-lg));
}