/*
 * RENDU DES BLOCS DU CMS — une seule feuille pour l'ÉDITEUR (apps/dashboard-salon/app.html) et le SITE
 * PUBLIC (apps/public-site/salon-page.html), 30/09/2026.
 *
 * Ces règles vivaient dans salon-page.html seulement : l'éditeur ne les appliquait pas (tunnel de
 * réservation 896 px dans l'éditeur, 760 px en ligne ; cartes, créneaux et couleurs du tunnel
 * différents). Les règles « petit écran » sont des requêtes de CONTENEUR (cyb-canevas) : dans l'éditeur,
 * le conteneur est l'écran simulé ; en ligne, c'est <body> (les pop-ups y sont téléportées).
 * Ne rien mettre ici qui concerne la page elle-même (défilement, préchargement, liens légaux).
 */
/* Booking tunnel scoped styles */
.booking-srv-item { background-color: var(--booking-card-bg); border-color: var(--booking-card-border); color: var(--booking-text); border-radius: var(--booking-radius); border-width: 1px; border-style: solid; transition: all 0.2s ease; }
.booking-srv-item:hover { background-color: var(--booking-hover-bg); border-color: var(--booking-hover-border); color: var(--booking-hover-text); }
.booking-srv-item.is-selected { background-color: var(--booking-active-bg) !important; border-color: var(--booking-primary) !important; border-width: 2px !important; }

.booking-barber-item { background-color: var(--booking-card-bg); border-color: var(--booking-card-border); color: var(--booking-text); border-radius: var(--booking-radius); border-width: 1px; border-style: solid; transition: all 0.2s ease; }
.booking-barber-item:hover { background-color: var(--booking-hover-bg); border-color: var(--booking-hover-border); color: var(--booking-hover-text); }
.booking-barber-item.is-selected { background-color: var(--booking-active-bg) !important; border-color: var(--booking-primary) !important; border-width: 2px !important; }

.booking-cal-cell { width: 36px !important; height: 36px !important; max-width: 36px !important; max-height: 36px !important; border-radius: 9999px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; transition: all 0.2s ease; box-shadow: none !important; }
.booking-cal-cell * { line-height: 1 !important; }
.booking-cal-cell:hover { background-color: var(--booking-hover-bg, #f1f5f9); border-color: var(--booking-hover-border, #cbd5e1); color: var(--booking-hover-text, #0f172a); }
.booking-cal-cell.is-selected { background-color: var(--booking-primary, #0f172a) !important; color: #ffffff !important; border-color: var(--booking-primary, #0f172a) !important; border-radius: 9999px !important; font-weight: 900 !important; }

/* Ensure calendar days header (Lu, Ma, Me...) is a perfect 7-column centered grid */
[data-layer="Jours Semaine"],
[data-layer="Jours Semaine"] > div { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; width: 100% !important; text-align: center !important; }
[data-layer^="Jour ("] { text-align: center !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; }

/* Cartes du TUNNEL de réservation : seule la carte intérieure porte la bordure. Limité au tunnel
   (30/09/2026) : appliqué à tout calque « Carte… », il retirait en ligne les ombres et bordures des
   cartes du gérant, visibles dans l'éditeur. */
.booking-tunnel [data-layer^="Carte"],
.booking-tunnel [data-layer="Carte Barbier"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.booking-srv-item,
.booking-barber-item {
    border-width: 2px !important;
    border-style: solid !important;
    box-sizing: border-box !important;
    transform: none !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.booking-srv-item.is-selected,
.booking-barber-item.is-selected {
    border-color: var(--booking-primary, #0f172a) !important;
    border-width: 2px !important;
    transform: none !important;
}

.booking-slot-cell { background-color: var(--booking-card-bg, #ffffff); border: 1px solid var(--booking-card-border); color: var(--booking-text); border-radius: var(--booking-radius); transition: all 0.2s ease; }
.booking-slot-cell:hover { background-color: var(--booking-hover-bg); border-color: var(--booking-hover-border); color: var(--booking-hover-text); }
.booking-slot-cell.is-selected { background-color: var(--booking-primary) !important; color: var(--booking-active-text) !important; border-color: var(--booking-primary) !important; font-weight: 900 !important; }

.booking-input { background-color: var(--booking-card-bg); border: 1px solid var(--booking-card-border); color: var(--booking-text); border-radius: var(--booking-radius); transition: all 0.2s ease; }
.booking-input:focus { border-color: var(--booking-primary) !important; background-color: var(--booking-active-bg) !important; outline: none !important; }

/* Éléments du tunnel de réservation pilotés par les variables du thème (fond sombre ou clair) */
.booking-sticky-header-bar { background: var(--booking-surface, rgba(255,255,255,0.97)); border-bottom: 1px solid var(--booking-card-border, #f1f5f9); }
.booking-sticky-footer-bar { background: var(--booking-surface, rgba(255,255,255,0.95)); border-top: 1px solid var(--booking-card-border, #f1f5f9); }
.booking-secondary-btn { background: var(--booking-card-bg, #f1f5f9); color: var(--booking-text, #1e293b); border-color: var(--booking-card-border, #e2e8f0); }
.booking-secondary-btn:hover { border-color: var(--booking-primary, #0f172a); }
.booking-select { background: var(--booking-card-bg, #ffffff); color: var(--booking-text, #0f172a); border-color: var(--booking-card-border, #e2e8f0); }
.booking-select:hover, .booking-select:focus { border-color: var(--booking-primary, #0f172a); outline: none; }
.booking-select option { color: #0f172a; background: #ffffff; }
.booking-choice-card { background: var(--booking-card-bg, #ffffff); border-color: var(--booking-card-border, #e2e8f0); }
.booking-choice-card:hover { border-color: var(--booking-primary, #0f172a); }
.booking-choice-card.is-selected { border-color: var(--booking-primary, #0f172a) !important; background: var(--booking-light-bg, rgba(15,23,42,0.06)) !important; }
.booking-radio { border-color: var(--booking-card-border, #cbd5e1); background: transparent; }
.booking-radio.is-on { border-color: var(--booking-primary, #0f172a); background: var(--booking-primary, #0f172a); }
.booking-radio-dot { background: var(--booking-on-primary, #ffffff); }
.booking-avatar { border-color: var(--booking-card-border, #e2e8f0); background: var(--booking-card-bg, #ffffff); color: var(--booking-muted, #94a3b8); }
.booking-day { color: var(--booking-text, #0f172a); background: transparent; }
.booking-day:hover { background: var(--booking-light-bg, rgba(15,23,42,0.06)); }
.booking-day.is-off { color: var(--booking-muted, #94a3b8); }
.booking-day.is-selected { background: var(--booking-primary, #0f172a) !important; color: var(--booking-on-primary, #ffffff) !important; border-color: var(--booking-primary, #0f172a) !important; }
.booking-day-dot { background: var(--booking-primary, #0f172a); }
.booking-mobile-steps { background: var(--booking-card-bg, #f8fafc); border-color: var(--booking-card-border, #e2e8f0); }
.booking-step-badge { background: var(--booking-primary, #0f172a); color: var(--booking-on-primary, #ffffff); }
.booking-dot { background: var(--booking-card-border, #cbd5e1); }
.booking-dot.is-current { background: var(--booking-primary, #0f172a); }
.booking-dot.is-done { background: #10b981; }

/* Custom scrollbar for booking slots — thin, elegant, no double scroll */
.booking-slots-scroll { scrollbar-width: thin; scrollbar-color: rgba(15,23,42,0.15) transparent; }
.booking-slots-scroll::-webkit-scrollbar { width: 4px; }
.booking-slots-scroll::-webkit-scrollbar-track { background: transparent; border-radius: 4px; }
.booking-slots-scroll::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.15); border-radius: 4px; }
.booking-slots-scroll::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.3); }

/* Calendar wrapper — prevent overflow issues */
.booking-calendar-wrapper { width: 100%; min-width: 0; overflow: visible; }

/* The booking flow belongs to the page scroll, never to a nested panel. */
.booking-tunnel { width: 100%; max-width: 760px; min-width: 0; height: auto !important; max-height: none !important; overflow: visible !important; }
.booking-tunnel > *, .booking-tunnel [data-type="div"], .booking-tunnel [data-type="repeater"] { min-width: 0; }
.booking-tunnel [data-repeater-source="calendar_slots"] { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 8px; align-items: start !important; grid-auto-rows: max-content; max-height: none !important; overflow: visible !important; }
.booking-tunnel [data-repeater-source="calendar_slots"] > div { width: auto !important; min-width: 0; height: auto !important; align-self: start; }
.booking-calendar-block { width: 100%; min-width: 0; }
.booking-calendar-shell { min-width: 0; overflow: hidden; }
.booking-calendar-shell [data-layer="Calendrier Wrapper"] { min-width: 0; }

/* Smooth scale animation for selected items */
@keyframes scaleIn { from { transform: scale(0.95); opacity: 0.8; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeInUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }

/* ===== DEFAULT BOOKING BLOCKS — THEME-AWARE STYLES ===== */
.bk-nav-btn { width: 38px; height: 38px; min-width: 38px; max-width: 38px; border-radius: 12px; background: var(--booking-card-bg, #fff); border: 1.5px solid var(--booking-card-border, #e2e8f0); color: var(--booking-text, #334155); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.bk-nav-btn:hover { background: var(--booking-hover-bg, #f8fafc); border-color: var(--booking-hover-border, #cbd5e1); transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06); }
.bk-nav-btn:active { transform: scale(0.95); }
.bk-nav-btn svg { width: 16px; height: 16px; }

.bk-day { width: 100%; aspect-ratio: 1; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; user-select: none; border: 2px solid transparent; color: var(--booking-text, #0f172a); }
.bk-day:hover:not(.bk-day--past):not(.bk-day--off):not(.bk-day--empty) { background: var(--booking-hover-bg, #f1f5f9); transform: scale(1.04); }
.bk-day--past, .bk-day--off { color: var(--booking-card-border, #cbd5e1); cursor: default; pointer-events: none; opacity: 0.6; }
.bk-day--empty { visibility: hidden; }
.bk-day--today:not(.bk-day--selected) { font-weight: 900; color: var(--booking-primary, #0f172a); }
.bk-day--today:not(.bk-day--selected)::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--booking-primary, #0f172a); }
.bk-day--selected { background: var(--booking-primary, #0f172a) !important; color: #fff !important; font-weight: 900; box-shadow: 0 6px 16px rgba(15,23,42,0.28); transform: scale(1.08); border-color: transparent; }

.bk-slot { padding: 12px 14px; border: 1.5px solid var(--booking-card-border, #e2e8f0); border-radius: 14px; background: var(--booking-card-bg, #fff); color: var(--booking-text, #1e293b); font-family: inherit; font-size: 13px; font-weight: 800; text-align: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
.bk-slot:hover { border-color: var(--booking-primary, #0f172a); background: var(--booking-hover-bg, #f8fafc); transform: translateY(-1.5px); box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.bk-slot:active { transform: scale(0.97); }
.bk-slot--selected { background: var(--booking-primary, #0f172a) !important; color: #fff !important; border-color: var(--booking-primary, #0f172a) !important; box-shadow: 0 6px 18px rgba(15,23,42,0.22); transform: scale(1.02); }

.bk-radio { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; border: 2px solid var(--booking-card-border, #cbd5e1); background: var(--booking-card-bg, #fff); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; }
.bk-radio--on { border-color: var(--booking-primary, #0f172a); background: var(--booking-primary, #0f172a); }
.bk-radio--on::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

.bk-service-card { padding: 16px; background: var(--booking-card-bg, #fff); border: 1.5px solid var(--booking-card-border, #e2e8f0); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 4px rgba(0,0,0,0.04); color: var(--booking-text, #0f172a); }
.bk-service-card:hover { border-color: var(--booking-hover-border, #94a3b8); box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-1px); }
.bk-service-card--selected { border-color: var(--booking-primary, #0f172a) !important; background: var(--booking-active-bg, #f8fafc) !important; box-shadow: 0 0 0 3px rgba(15,23,42,0.08) !important; }

.bk-barber-card { padding: 16px 12px; background: var(--booking-card-bg, #fff); border: 1.5px solid var(--booking-card-border, #e2e8f0); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 4px rgba(0,0,0,0.04); color: var(--booking-text, #0f172a); }
.bk-barber-card:hover { border-color: var(--booking-hover-border, #94a3b8); box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-1.5px); }
.bk-barber-card--selected { border-color: var(--booking-primary, #0f172a) !important; background: var(--booking-active-bg, #f8fafc) !important; box-shadow: 0 0 0 3px rgba(15,23,42,0.08) !important; }

.bk-price-badge { font-weight: 900; font-size: 13px; color: var(--booking-primary, #0f172a); background: var(--booking-hover-bg, #f1f5f9); padding: 5px 12px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }

.bk-primary-btn { width: 100%; padding: 15px 26px; background: var(--booking-primary, #0f172a); color: #fff; font-weight: 800; font-size: 14px; border-radius: 14px; border: none; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 6px 18px rgba(15,23,42,0.18); display: flex; align-items: center; justify-content: center; gap: 8px; }
.bk-primary-btn:hover { opacity: 0.9; box-shadow: 0 8px 24px rgba(15,23,42,0.24); transform: translateY(-1px); }
.bk-primary-btn:active { transform: scale(0.98); }
.bk-primary-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.bk-input { width: 100%; padding: 11px 15px; font-size: 13px; font-weight: 600; background: var(--booking-card-bg, #f8fafc); border: 1.5px solid var(--booking-card-border, #e2e8f0); border-radius: 12px; color: var(--booking-text, #0f172a); transition: all 0.2s ease; outline: none; box-sizing: border-box; }
.bk-input:focus { border-color: var(--booking-primary, #0f172a); background: var(--booking-active-bg, #fff); box-shadow: 0 0 0 3px rgba(15,23,42,0.08); }
.bk-input::placeholder { color: var(--booking-card-border, #94a3b8); font-weight: 500; }

.bk-label { display: block; font-size: 11px; font-weight: 800; color: var(--booking-text, #334155); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }

.bk-recap-box { padding: 22px; border-radius: 18px; border: 1.5px solid var(--booking-card-border, #e2e8f0); background: var(--booking-card-bg, linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)); box-shadow: 0 1px 4px rgba(0,0,0,0.03); color: var(--booking-text, #0f172a); }
.bk-recap-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; }
.bk-recap-total { border-top: 1.5px solid var(--booking-card-border, #e2e8f0); margin-top: 14px; padding-top: 14px; }

.bk-category-tab { padding: 9px 18px; border-radius: 14px; font-size: 12px; font-weight: 800; cursor: pointer; transition: all 0.2s ease; border: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.bk-category-tab--active { background: var(--booking-primary, #0f172a); color: #fff; box-shadow: 0 3px 10px rgba(15,23,42,0.2); }
.bk-category-tab--inactive { background: var(--booking-hover-bg, #f1f5f9); color: var(--booking-text, #475569); }
.bk-category-tab--inactive:hover { background: var(--booking-card-border, #e2e8f0); }

.bk-avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid var(--booking-card-border, #e2e8f0); box-shadow: 0 2px 6px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; background: var(--booking-primary, #0f172a); color: #fff; font-weight: 900; font-size: 13px; flex-shrink: 0; }
.bk-avatar img { width: 100%; height: 100%; object-fit: cover; }

.bk-section-title { font-size: 11px; font-weight: 900; color: var(--booking-text, #0f172a); text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 8px; }
.bk-section-title::before { content: ''; width: 4px; height: 15px; border-radius: 4px; background: var(--booking-primary, #0f172a); flex-shrink: 0; }

.bk-error { padding: 12px 16px; background: #fef2f2; color: #dc2626; font-size: 12px; font-weight: 700; border-radius: 12px; border: 1px solid #fecaca; }
.bk-success { padding: 14px 18px; background: #f0fdf4; color: #16a34a; font-size: 13px; font-weight: 700; border-radius: 14px; border: 1px solid #bbf7d0; display: flex; align-items: center; gap: 8px; }


/* ─── Widget réservation : les utilitaires clairs codés en dur dans le tunnel suivent les variables
   du widget (--booking-*) pour ne plus produire d'aplats blancs sur un site sombre. ─── */
.booking-tunnel .bg-white, .booking-tunnel .hover\:bg-white:hover { background-color: var(--booking-card-bg, #ffffff) !important; }
.booking-tunnel .bg-slate-50, .booking-tunnel .focus\:bg-white:focus { background-color: var(--booking-card-bg, #ffffff) !important; }
.booking-tunnel .bg-slate-100, .booking-tunnel .hover\:bg-slate-100:hover, .booking-tunnel .hover\:bg-slate-200\/80:hover { background-color: var(--booking-light-bg, rgba(15,23,42,0.06)) !important; }
.booking-tunnel .bg-slate-900 { background-color: var(--booking-primary, #0f172a) !important; }
.booking-tunnel .text-white, .booking-tunnel .bg-slate-900 > * { color: var(--booking-on-primary, #ffffff) !important; }
.booking-tunnel .bg-slate-400 { background-color: var(--booking-muted, #94a3b8) !important; }
.booking-tunnel .text-slate-700, .booking-tunnel .text-slate-800, .booking-tunnel .text-slate-900, .booking-tunnel .group:hover .group-hover\:text-slate-800 { color: var(--booking-text, #0f172a) !important; }
.booking-tunnel .text-slate-400, .booking-tunnel .text-slate-500, .booking-tunnel .text-slate-600 { color: var(--booking-muted, #64748b) !important; }
.booking-tunnel .border-slate-200, .booking-tunnel .border-slate-200\/80, .booking-tunnel .border-slate-200\/90, .booking-tunnel .border-slate-300 { border-color: var(--booking-card-border, #e2e8f0) !important; }
.booking-tunnel .ring-slate-900\/20 { --tw-ring-color: var(--booking-light-bg, rgba(15,23,42,0.2)) !important; }
.booking-tunnel input, .booking-tunnel textarea, .booking-tunnel select { color: var(--booking-text, #0f172a); }
.booking-tunnel input::placeholder, .booking-tunnel textarea::placeholder { color: var(--booking-muted, #94a3b8); opacity: 1; }
.booking-tunnel .bk-radio--on::after { background: var(--booking-on-primary, #fff); }
.booking-tunnel .bk-day--selected, .booking-tunnel .bk-slot--selected, .booking-tunnel .booking-cal-cell.is-selected, .booking-tunnel .booking-slot-cell.is-selected { color: var(--booking-on-primary, #fff) !important; }
.booking-tunnel .bk-primary-btn { color: var(--booking-on-primary, #fff); }

.bk-weekday { font-size: 11px; font-weight: 800; color: var(--booking-card-border, #94a3b8); text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 0; text-align: center; }

.bk-fade-in { animation: fadeInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1); }


.booking-tunnel,
.booking-tunnel * {
    box-sizing: border-box;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Choix du barbier (12/10/2026) : un nom ne se coupe jamais au milieu d'un mot (« Lucie n Marc hand »
   sur un téléphone). Il passe à la ligne entre les mots, et un mot trop long pour la carte finit par
   « … » au lieu d'en sortir. !important : la règle ci-dessus est aussi écrite en ligne sur chaque texte. */
.booking-tunnel [data-repeater-source="staff"] [data-type="text"],
.booking-tunnel [data-repeater-source="staff"] [data-type="text"] *,
.booking-tunnel [data-repeater-source="staff"] .booking-choice-card span {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: manual;
}
.booking-tunnel [data-repeater-source="staff"] [data-type="text"] > div,
.booking-tunnel [data-repeater-source="staff"] .booking-choice-card span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ===== RESPONSIVE: Small screens (< 640px) ===== */
@container cyb-canevas (max-width: 640px) {
    .booking-tunnel { max-width: 100%; padding-left: 4px; padding-right: 4px; }
    .booking-tunnel .booking-calendar-wrapper, .booking-tunnel .booking-calendar-block { border-radius: 16px; }
    .booking-tunnel .booking-calendar-wrapper { padding: 14px 10px; }
    .booking-tunnel [data-repeater-source="calendar_days"] { gap: 3px; }
    .booking-tunnel [data-repeater-source="calendar_slots"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }

    /* Step progress bar: compact on mobile */
    .booking-tunnel [data-type="booking_progress"] .flex { gap: 2px !important; }
    .booking-tunnel [data-type="booking_progress"] .flex > div { gap: 4px !important; }
    .booking-tunnel [data-type="booking_progress"] .flex > div > span.text-xs { font-size: 10px; display: none; }
    .booking-tunnel [data-type="booking_progress"] .flex > span { font-size: 9px; margin: 0 1px; }

    /* Service cards: ensure single column for clean stacking */
    .booking-tunnel [data-type="booking_services"] .grid { grid-template-columns: 1fr !important; }
    .booking-tunnel [data-type="booking_services"] .p-3 { padding: 12px !important; }

    /* Barber cards: 2 columns is fine but tighter */
    .booking-tunnel [data-type="booking_barbers"] .grid { gap: 8px !important; }
    .booking-tunnel [data-type="booking_barbers"] .p-3 { padding: 10px 8px !important; }

    /* Calendar: reduce day cell size for mobile */
    .bk-day { font-size: 12px; border-radius: 12px; }
    .bk-nav-btn { width: 34px; height: 34px; min-width: 34px; max-width: 34px; border-radius: 10px; }
    .bk-nav-btn svg { width: 14px; height: 14px; }

    /* Slots: 3 cols, tighter padding */
    .bk-slot { padding: 10px 8px; font-size: 12px; border-radius: 12px; }

    /* Recap box */
    .booking-tunnel [data-type="booking_recap"] .p-5 { padding: 14px !important; }
    .booking-tunnel [data-type="booking_recap"] .text-xs { font-size: 11px; }

    /* Form inputs: slightly smaller padding */
    .booking-tunnel [data-type="booking_form"] .grid { grid-template-columns: 1fr !important; }
    .booking-tunnel [data-type="booking_form"] input { font-size: 14px !important; padding: 10px 12px !important; }

    /* Confirmation success */
    .booking-tunnel [data-type="booking_form"] .p-6 { padding: 20px 16px !important; }

    /* Primary button: full width on mobile */
    .bk-primary-btn { padding: 12px 18px; font-size: 13px; border-radius: 14px; }

    /* Calendar wrapper inline override */
    .booking-calendar-wrapper { padding: 14px 10px !important; border-radius: 16px !important; }

    /* Booking calendar cell override for mobile */
    .booking-cal-cell { width: 32px !important; height: 32px !important; max-width: 32px !important; max-height: 32px !important; font-size: 12px !important; }
}

/* ===== RESPONSIVE: Extra small screens (< 380px) ===== */
@container cyb-canevas (max-width: 380px) {
    .bk-day { font-size: 11px; border-radius: 10px; }
    .bk-slot { padding: 8px 6px; font-size: 11px; border-radius: 10px; }
    .bk-nav-btn { width: 30px; height: 30px; min-width: 30px; max-width: 30px; }
    .bk-nav-btn svg { width: 12px; height: 12px; }
    .booking-calendar-wrapper { padding: 10px 8px !important; }
    .booking-tunnel [data-type="booking_barbers"] .grid { grid-template-columns: 1fr !important; }
    .booking-cal-cell { width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; font-size: 11px !important; }
}

/* Thème du tunnel de réservation (14/10/2026, themeTunnel dans cmsRendu.js) : chaque règle ne vaut que si
   le bloc booking porte le réglage (classe posée). Un tunnel sans réglage garde exactement son rendu. */
/* Les libellés de la barre d'étapes (« Prestation », « Barbier »…) suivent la police et la casse des titres. */
.booking-tunnel.bk-t-police :is(h1, h2, h3, h4, h5, h6, [data-layer="Libellé"], .booking-step-badge, .bk-titre-calendrier, [data-layer="Mois Actuel"]) { font-family: var(--booking-font-titre) !important; }
.booking-tunnel.bk-t-casse :is(h1, h2, h3, h4, h5, h6, [data-layer="Libellé"], .booking-step-badge, .bk-titre-calendrier, [data-layer="Mois Actuel"]) { text-transform: var(--booking-titre-casse) !important; }
.booking-tunnel.bk-t-graisse :is(h1, h2, h3, h4, h5, h6) { font-weight: var(--booking-titre-graisse) !important; }
.booking-tunnel.bk-t-espacement :is(h1, h2, h3, h4, h5, h6) { letter-spacing: var(--booking-titre-espacement) !important; }
/* Un bloc du tunnel est rendu en trois boîtes (enveloppe [data-layer] > div > div) et c'est la plus profonde
   qui dessine la bordure : l'arrondi les suit toutes les trois, jamais leurs enfants (le rond de sélection).
   Sa propre variable : `--booking-radius` est redéfinie par chaque répéteur du tunnel (12 px par défaut). */
.booking-tunnel.bk-c-rayon :is([data-layer^="Carte"], [data-layer="Bouton Créneau"], [data-layer="Calendrier Wrapper"]) > div,
.booking-tunnel.bk-c-rayon :is([data-layer^="Carte"], [data-layer="Bouton Créneau"], [data-layer="Calendrier Wrapper"]) > div > div { border-radius: var(--booking-rayon-cartes) !important; }
.booking-tunnel.bk-c-rayon :is([data-layer^="Carte"], [data-layer="Bouton Créneau"], [data-layer="Calendrier Wrapper"], [data-type="form_input"] :is(input, select, textarea), :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]), [data-type="booking_recap"] > div, .booking-srv-item, .booking-barber-item, .booking-slot-cell, .bk-creneau, .booking-input, .booking-select, .booking-choice-card, .bk-service-card, .bk-barber-card, .bk-slot, .bk-input, .bk-recap-box) { border-radius: var(--booking-rayon-cartes) !important; }
.booking-tunnel.bk-b-rayon :is([data-type="button"] :is(a, button), .booking-secondary-btn, .bk-primary-btn, button[type="submit"]) { border-radius: var(--booking-btn-rayon) !important; }
.booking-tunnel.bk-b-casse :is([data-type="button"] :is(a, button), .booking-secondary-btn, .bk-primary-btn, button[type="submit"]) { text-transform: var(--booking-btn-casse) !important; }
.booking-tunnel.bk-b-graisse :is([data-type="button"] :is(a, button), .booking-secondary-btn, .bk-primary-btn, button[type="submit"]) { font-weight: var(--booking-btn-graisse) !important; }
.booking-tunnel.bk-b-espacement :is([data-type="button"] :is(a, button), .booking-secondary-btn, .bk-primary-btn, button[type="submit"]) { letter-spacing: var(--booking-btn-espacement) !important; }
.booking-tunnel.bk-sans-entete [data-layer="En-tête"] { display: none !important; }
/* Cartes de choix : la boîte qui dessine la bordure (enveloppe [data-layer] > div), et les cartes du gabarit intégré. */
.booking-tunnel.bk-c-espace :is([data-layer^="Carte"], [data-layer="Bouton Créneau"]) > div, .booking-tunnel.bk-c-espace :is(.booking-srv-item, .booking-barber-item, .booking-choice-card) { padding-top: var(--booking-cartes-espace) !important; padding-bottom: var(--booking-cartes-espace) !important; }
.booking-tunnel.bk-c-fond :not(.is-selected) > :is([data-layer^="Carte"], [data-layer="Bouton Créneau"]) > div, .booking-tunnel.bk-c-fond :is(.booking-srv-item, .booking-barber-item, .booking-choice-card):not(.is-selected) { border-color: transparent !important; }
.booking-tunnel.bk-c-ombre :is([data-layer^="Carte"], [data-layer="Bouton Créneau"]) > div, .booking-tunnel.bk-c-ombre :is(.booking-srv-item, .booking-barber-item, .booking-choice-card) { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10), 0 10px 24px -12px rgba(15, 23, 42, 0.28) !important; }
.booking-tunnel.bk-c-ombre :not(.is-selected) > :is([data-layer^="Carte"], [data-layer="Bouton Créneau"]) > div, .booking-tunnel.bk-c-ombre :is(.booking-srv-item, .booking-barber-item, .booking-choice-card):not(.is-selected) { border-color: transparent !important; }
.booking-tunnel.bk-c-ligne :is([data-layer^="Carte"]) > div, .booking-tunnel.bk-c-ligne :is(.booking-srv-item, .booking-barber-item, .booking-choice-card) { border-width: 0 0 1px 0 !important; border-radius: 0 !important; background-color: transparent !important; box-shadow: none !important; }
.booking-tunnel.bk-t-taille :is(h1, h2, h3, h4, h5, h6) { font-size: var(--booking-titre-taille) !important; }
/* Bouton d'action (« Continuer », « Confirmer », « Se connecter ») — jamais « Retour », qui reste discret. */
.booking-tunnel.bk-b-fond :is([data-type="button"] a, .bk-primary-btn, button[type="submit"]) { background-color: var(--booking-btn-fond) !important; }
.booking-tunnel.bk-b-texte :is([data-type="button"] a, .bk-primary-btn, button[type="submit"]) { color: var(--booking-btn-texte) !important; }
.booking-tunnel.bk-b-hauteur :is([data-type="button"] a, .bk-primary-btn, button[type="submit"], .booking-secondary-btn) { min-height: var(--booking-btn-hauteur) !important; }
.booking-tunnel.bk-sans-etapes :is([data-layer="Barre de Progression"], [data-type="booking_progress"], .booking-mobile-steps) { display: none !important; }
.booking-tunnel.bk-sans-entete.bk-sans-etapes .booking-sticky-header-bar { display: none !important; }
/* Carte choisie : la classe .is-selected est posée sur le PARENT de la carte (élément du répéteur). */
.booking-tunnel.bk-c-choisie .is-selected > [data-layer^="Carte"] > div, .booking-tunnel.bk-c-choisie :is(.booking-srv-item, .booking-barber-item, .booking-choice-card).is-selected { background-color: var(--booking-carte-choisie) !important; }
.booking-tunnel:is(.bk-c-fond, .bk-c-ombre) .is-selected > [data-layer^="Carte"] > div { border-color: var(--booking-primary) !important; }

/* ── Structures du tunnel (14/10/2026, themeTunnel) : repères posés à l'identique par le site et l'éditeur —
   .bk-etapes / .bk-etape(.is-current|.is-done), .bk-liste-choix, .bk-titre-categorie, et les calques de l'arbre. */
.booking-tunnel.bk-t-police [data-layer="Libellé"] :is(p, span, div) { font-size: var(--booking-etape-taille, 15px) !important; letter-spacing: 0.04em !important; }
.booking-tunnel.bk-e-taille [data-layer="Libellé"], .booking-tunnel.bk-e-taille [data-layer="Libellé"] :is(p, span, div) { font-size: var(--booking-etape-taille) !important; }
/* Noms des choix */
.booking-tunnel.bk-i-police :is([data-layer="Nom Prestation"], [data-layer="Nom Barbier"], [data-layer="Prix Prestation"], [data-layer="Heure Créneau"]) :is(p, span, div, h1, h2, h3, h4, h5, h6), .booking-tunnel.bk-i-police .bk-creneau { font-family: var(--booking-choix-police) !important; }
.booking-tunnel.bk-i-taille [data-layer="Prix Prestation"] :is(p, span, div) { font-size: calc(var(--booking-choix-taille) * 0.8) !important; }
.booking-tunnel.bk-i-taille .bk-creneau { font-size: calc(var(--booking-choix-taille) * 0.7) !important; letter-spacing: 0.04em; }
/* Le mois et « Créneaux disponibles » sont des titres : même taille relative qu'eux. */
.booking-tunnel.bk-t-police .bk-titre-calendrier { font-size: max(16px, calc(var(--booking-titre-taille, 18px) * 0.75)) !important; letter-spacing: 0.04em !important; }
.booking-tunnel.bk-i-taille :is([data-layer="Nom Prestation"], [data-layer="Nom Barbier"]) :is(p, span, div, h1, h2, h3, h4, h5, h6) { font-size: var(--booking-choix-taille) !important; line-height: 1.15 !important; }
.booking-tunnel.bk-i-graisse :is([data-layer="Nom Prestation"], [data-layer="Nom Barbier"]) :is(p, span, div, h1, h2, h3, h4, h5, h6) { font-weight: var(--booking-choix-graisse) !important; }
.booking-tunnel.bk-i-casse :is([data-layer="Nom Prestation"], [data-layer="Nom Barbier"]) :is(p, span, div, h1, h2, h3, h4, h5, h6) { text-transform: var(--booking-choix-casse) !important; letter-spacing: 0.02em; }
/* Étapes en filet : plus de pastilles numérotées, un trait sous chaque étape, plein sous l'étape en cours. */
.booking-tunnel.bk-e-filet .bk-etapes { gap: 6px !important; align-items: stretch !important; }
.booking-tunnel.bk-e-filet .bk-etape { flex: 1 1 0; padding-bottom: 10px; border-bottom: 2px solid var(--booking-card-border); }
.booking-tunnel.bk-e-filet .bk-etape.is-done { border-bottom-color: var(--booking-primary); }
.booking-tunnel.bk-e-filet .bk-etape.is-current { border-bottom: 3px solid var(--booking-primary); }
.booking-tunnel.bk-e-filet .bk-etape > div { opacity: 1 !important; filter: none !important; }
.booking-tunnel.bk-e-filet .bk-etape:not(.is-current):not(.is-done) [data-layer="Libellé"] :is(p, span, div) { color: var(--booking-muted) !important; }
.booking-tunnel.bk-e-filet [data-layer="Cercle Numéro"] { display: none !important; }
/* Étapes en texte : seule l'étape en cours, en grand. */
.booking-tunnel.bk-e-texte .bk-etape:not(.is-current) { display: none !important; }
.booking-tunnel.bk-e-texte .bk-etapes { justify-content: flex-start !important; }
.booking-tunnel.bk-e-texte .bk-etape.is-current [data-layer="Libellé"] :is(p, span, div) { font-size: var(--booking-etape-taille, 20px) !important; }
/* Choix sur plusieurs colonnes */
.booking-tunnel:is(.bk-choix-2, .bk-choix-3) .bk-liste-choix { display: grid !important; gap: 12px !important; }
.booking-tunnel:is(.bk-choix-2, .bk-choix-3) .bk-liste-choix > * { margin-top: 0 !important; }
.booking-tunnel.bk-choix-2 :is(.bk-liste-choix, [data-layer="Liste Barbiers"] > div) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.booking-tunnel.bk-choix-3 :is(.bk-liste-choix, [data-layer="Liste Barbiers"] > div) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
/* Colonnes : étapes à gauche (rail collant), contenu à droite — grand écran seulement. */
@container cyb-canevas (min-width: 900px) {
    .booking-tunnel.bk-l-colonnes { display: grid !important; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); column-gap: 48px; row-gap: 0 !important; align-items: start; max-width: 1040px; }
    /* row-gap à 0 : l'espacement de la racine (16 px) s'appliquait entre les 30 rangées que couvre le rail (464 px de vide). */
    .booking-tunnel.bk-l-colonnes > * { grid-column: 2; }
    .booking-tunnel.bk-l-colonnes > .booking-sticky-header-bar { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 96px; border-bottom: 0 !important; background: transparent !important; backdrop-filter: none !important; }
    .booking-tunnel.bk-l-colonnes .bk-etapes { flex-direction: column !important; align-items: stretch !important; gap: 4px !important; }
    .booking-tunnel.bk-l-colonnes .bk-etape { width: 100% !important; padding: 12px 0 12px 16px; border-bottom: 0 !important; border-left: 2px solid var(--booking-card-border); }
    .booking-tunnel.bk-l-colonnes .bk-etape.is-done { border-left-color: var(--booking-primary); }
    .booking-tunnel.bk-l-colonnes .bk-etape.is-current { border-left: 4px solid var(--booking-primary); padding-left: 14px; }
    .booking-tunnel.bk-l-colonnes .bk-etape:not(.is-current) [data-layer="Libellé"] :is(p, span, div) { color: var(--booking-muted) !important; }
}
@container cyb-canevas (max-width: 640px) {
    .booking-tunnel:is(.bk-choix-2, .bk-choix-3) :is(.bk-liste-choix, [data-layer="Liste Barbiers"] > div) { grid-template-columns: minmax(0, 1fr) !important; }
}