/*
 * 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):not(.bk-cat-perso):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):not(.bk-cat-perso):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):not(.bk-cat-perso):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):not(.bk-cat-perso):not(.bk-titre-recap):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; }
/* Les barbiers sont une RANGÉE de portraits : un filet sous chacun faisait des traits orphelins (18/10/2026) — ni fond ni cadre, sans filet. */
.booking-tunnel.bk-c-ligne :is([data-layer="Carte Barbier"]) > div, .booking-tunnel.bk-c-ligne :is(.booking-barber-item, [data-layer="Liste Barbiers"] .booking-choice-card) { border-width: 0 !important; border-radius: 0 !important; background-color: transparent !important; box-shadow: none !important; }
.booking-tunnel.bk-c-ligne :is([data-layer^="Carte"]:not([data-layer="Carte Barbier"])) > div, .booking-tunnel.bk-c-ligne :is(.booking-srv-item, .booking-choice-card):not([data-layer="Liste Barbiers"] *) { 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):not(.bk-cat-perso):not(.bk-titre-recap):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.
   .bk-cat-perso : titre de catégorie réglé sur son répéteur (titreCategorie) — les réglages de titres du tunnel ne l'écrasent pas. */
.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: min(calc(var(--booking-choix-taille) * 0.7), 17px) !important; letter-spacing: 0.04em; }
/* Un créneau tient sur une ligne : « 13:45 - 14:15 » coupé en deux sur téléphone se lisait mal. */
.booking-tunnel .bk-creneau, .booking-tunnel [data-layer="Heure Créneau"] :is(p, span, div) { white-space: nowrap; }
@container cyb-canevas (max-width: 640px) { .booking-tunnel.bk-i-taille .bk-creneau { font-size: min(calc(var(--booking-choix-taille) * 0.55), 13px) !important; letter-spacing: 0; } }
/* Le mois et « Créneaux disponibles » sont des titres : même taille relative qu'eux. */
/* Plafonné à 22 px (18/10/2026) : des titres d'étapes de 40 px donnaient un mois de 30 px et un « CRÉNEAUX
   DISPONIBLES » qui se chevauchait lui-même sur téléphone. */
.booking-tunnel.bk-t-police .bk-titre-calendrier { font-size: clamp(15px, calc(var(--booking-titre-taille, 18px) * 0.5), 22px) !important; letter-spacing: 0.04em !important; line-height: 1.15 !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; }
/* L'équipe est par défaut un carrousel (dispositionEquipe : remplissage par colonne, défilement, cartes à la
   largeur du conteneur) : en colonnes, tout le carrousel est coupé — sinon les deux se mêlaient, une carte
   écrasée à gauche (rond et trait cliquables) et une barre de défilement sous une rangée qui débordait. */
.booking-tunnel:is(.bk-choix-2, .bk-choix-3) [data-layer="Liste Barbiers"] > div { grid-auto-flow: row !important; grid-auto-columns: auto !important; overflow: visible !important; scroll-snap-type: none !important; container-type: normal !important; padding-bottom: 0 !important; }
.booking-tunnel:is(.bk-choix-2, .bk-choix-3) [data-layer="Liste Barbiers"] > div > * { min-height: 0 !important; width: auto !important; min-width: 0 !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):not(.is-done) [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; }
}
/* L'étape en cours n'est jamais pâle : le site pose une opacité en ligne sur les étapes « pas encore atteintes ». */
.booking-tunnel:is(.bk-e-filet, .bk-e-texte) .bk-etape.is-current { opacity: 1 !important; }
/* Les encarts du tunnel (calendrier, récapitulatif, « Compte client », pastilles) suivent le style des cartes de
   choix : même arrondi, même ombre ou même fond — sinon des boîtes blanches arrondies juraient avec des cartes
   à angles droits (14/10/2026). Leurs boutons suivent l'arrondi du bouton ; les ronds (jours, choix) restent ronds. */
.booking-tunnel.bk-c-rayon :is(div, span, p, a):is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl),
.booking-tunnel.bk-c-rayon [data-layer="Calendrier Wrapper"] > div { border-radius: var(--booking-rayon-cartes) !important; }
.booking-tunnel.bk-b-rayon button:is(.rounded-lg, .rounded-xl, .rounded-2xl) { border-radius: var(--booking-btn-rayon) !important; }
.booking-tunnel.bk-c-ombre :is(div.border:is(.rounded-xl, .rounded-2xl, .rounded-3xl), [data-layer="Calendrier Wrapper"] > div) { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.10), 0 10px 24px -12px rgba(15, 23, 42, 0.28) !important; border-color: transparent !important; }
.booking-tunnel.bk-c-fond :is(div.border:is(.rounded-xl, .rounded-2xl, .rounded-3xl), [data-layer="Calendrier Wrapper"] > div) { border-color: transparent !important; }
.booking-tunnel:is(.bk-c-ombre, .bk-c-fond) :is([data-layer="Calendrier Wrapper"], [data-layer="Calendrier Wrapper"] > div, [data-layer="Calendrier Wrapper"] > div > div) { border-color: transparent !important; }
/* Étapes déjà faites : nettes et à l'encre (on peut y revenir) ; seules les étapes à venir sont atténuées. */
.booking-tunnel:is(.bk-e-filet, .bk-e-texte) .bk-etape.is-done { opacity: 1 !important; }
.booking-tunnel:is(.bk-e-filet, .bk-l-colonnes) .bk-etape.is-done [data-layer="Libellé"] :is(p, span, div) { color: var(--booking-text) !important; }

/* Menu du téléphone en plein écran (`mobileMenuStyle: "plein-ecran"`, cmsRendu.js › menuPleinEcran). Les liens du
   menu (1er bloc sous la barre) grossissent et glissent l'un après l'autre ; les actions restent à leur taille. */
.cyb-menu-plein { position: fixed; inset: 0; z-index: 2147482000; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    background: var(--cyb-menu-fond); color: var(--cyb-menu-texte); }
.cyb-menu-plein__haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 20px; box-sizing: border-box; flex-shrink: 0; }
.cyb-menu-plein__fermer { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: inherit; cursor: pointer; flex-shrink: 0; }
.cyb-menu-plein__corps { display: flex; flex-direction: column; align-items: stretch; gap: 32px; padding: 32px 32px 48px; box-sizing: border-box; counter-reset: cyb-menu; }
.cyb-menu-plein__corps > :first-child a { font-size: var(--cyb-menu-taille) !important; line-height: 1.1 !important; padding-left: 0 !important; }
.cyb-menu-plein__corps > :first-child [data-block-id] { animation: cyb-menu-lien .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.08s + var(--cyb-menu-i, 0) * .07s); }
.cyb-menu-plein__corps > :first-child [data-block-id]:nth-child(2) { --cyb-menu-i: 1; }
.cyb-menu-plein__corps > :first-child [data-block-id]:nth-child(3) { --cyb-menu-i: 2; }
.cyb-menu-plein__corps > :first-child [data-block-id]:nth-child(4) { --cyb-menu-i: 3; }
.cyb-menu-plein__corps > :first-child [data-block-id]:nth-child(5) { --cyb-menu-i: 4; }
.cyb-menu-plein__corps > :first-child [data-block-id]:nth-child(6) { --cyb-menu-i: 5; }
.cyb-menu-plein__corps > :first-child [data-block-id]:nth-child(n+7) { --cyb-menu-i: 6; }
.cyb-menu-plein__corps > :nth-child(n+2) { animation: cyb-menu-lien .5s cubic-bezier(.22, 1, .36, 1) .5s both; }
.cyb-menu-plein[data-numeros] .cyb-menu-plein__corps > :first-child a::before { counter-increment: cyb-menu; content: counter(cyb-menu, decimal-leading-zero);
    display: inline-block; font-size: 12px; letter-spacing: .1em; opacity: .5; margin-right: 16px; vertical-align: middle; font-weight: 500; }
@keyframes cyb-menu-lien { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.cyb-menu-plein-enter-active, .cyb-menu-plein-leave-active { transition: opacity .35s cubic-bezier(.22, 1, .36, 1); }
.cyb-menu-plein-enter-from, .cyb-menu-plein-leave-to { opacity: 0; }
/* Dans l'éditeur, le calque reste dans le cadre du téléphone (un calque fixe couvrirait tout l'éditeur). */
.cyb-menu-plein--editeur { position: absolute; inset: 0 0 auto 0; min-height: 640px; z-index: 95; }
@media (prefers-reduced-motion: reduce) { .cyb-menu-plein__corps > * , .cyb-menu-plein__corps [data-block-id] { animation: none !important; } }

/* Tunnel sur téléphone (19/10/2026, tunnel détaillé de diezbarber.fr à 390 et 360 px).
   Le titre « Récapitulatif de votre rendez-vous » est l'en-tête d'un encadré, pas un titre d'étape : à la
   taille des titres (44 px) il gardait l'interligne de 16 px de text-xs et ses lignes s'écrivaient les unes
   sur les autres. Il suit la police et la casse des titres, à une taille d'en-tête d'encadré. */
.booking-tunnel.bk-t-taille .bk-titre-recap { font-size: clamp(13px, calc(var(--booking-titre-taille, 18px) * 0.36), 16px) !important; line-height: 1.25 !important; letter-spacing: 0.02em; align-items: flex-start !important; }
.booking-tunnel .bk-titre-recap > span:first-child { margin-top: 0.2em; flex-shrink: 0; }
/* Un titre interne qui porte text-xs / text-sm hérite d'un interligne en px : grossi par le thème, il se
   chevauchait. L'interligne suit alors la taille. */
.booking-tunnel.bk-t-taille :is(h1, h2, h3, h4, h5, h6):is(.text-xs, .text-sm, .text-base) { line-height: 1.2 !important; }
/* Accord RGPD et « plus tôt » : sans couleur à eux, ils prenaient le #0f172a écrit en ligne sur le bloc
   parent — illisibles sur un tunnel sombre. Ils suivent le texte et le texte atténué du thème. */
.booking-tunnel :is(.booking-accord, .booking-plus-tot) { color: var(--booking-text, #0f172a); }
.booking-tunnel .booking-accord label > span { font-size: 12px; opacity: 0.85; }
.booking-tunnel .booking-accord p { font-size: 11px; color: var(--booking-muted, #64748b); opacity: 1; }
/* L'accord est posé dans le bloc du bouton « Confirmer » : sans ça, les réglages des boutons du tunnel
   (bk-b-fond, bk-b-texte, bk-b-hauteur…) peignaient le lien « Politique de confidentialité » en bouton. */
.booking-tunnel.booking-tunnel .booking-accord.booking-accord a { color: var(--booking-text, #0f172a) !important; background-color: transparent !important; min-height: 0 !important; border-radius: 0 !important; text-transform: none !important; letter-spacing: normal !important; font-weight: inherit !important; padding: 0 !important; }
.booking-tunnel .booking-accord input[type="checkbox"] { width: 18px; height: 18px; }
/* Carte « Peu importe » : pas de photo, une icône d'équipe à l'échelle de la carte et un filet du thème,
   au lieu d'un pictogramme de 20 px perdu dans un aplat gris. */
.booking-tunnel .bk-avatar-equipe { width: clamp(28px, 32%, 64px); height: auto; aspect-ratio: 1 / 1; color: var(--booking-text, #0f172a); opacity: 0.55; }
.booking-tunnel :has(> .bk-avatar-equipe) { box-shadow: inset 0 0 0 1.5px var(--booking-card-border, #e2e8f0); }
.booking-tunnel .bk-date-creneaux { white-space: nowrap; flex-shrink: 0; }
@container cyb-canevas (max-width: 640px) {
    /* « CRÉNEAUX DISPONIBLES » tient sur une ligne ; la date passe dessous plutôt que de se couper. */
    .booking-tunnel .bk-entete-creneaux { flex-wrap: wrap; gap: 6px 10px; }
    .booking-tunnel .bk-titre-creneaux { white-space: nowrap; }
    .booking-tunnel.bk-t-police .bk-titre-creneaux { font-size: clamp(14px, calc(var(--booking-titre-taille, 18px) * 0.4), 17px) !important; }
    /* Cibles tactiles d'au moins 40 px. Le jour prend la largeur de sa colonne (plafonnée à 44 px) : la
       grille de 7 jours tient à 360 px sans déborder. */
    .booking-tunnel .bk-cal-nav { width: 44px !important; height: 44px !important; min-width: 44px; }
    .booking-tunnel .bk-cal-jour { width: 100% !important; max-width: 44px; height: auto !important; aspect-ratio: 1 / 1; min-width: 0 !important; min-height: 40px !important; }
    .booking-tunnel .bk-se-connecter { min-height: 44px; padding-left: 16px; padding-right: 16px; }
    .booking-tunnel .bk-creneau { min-height: 44px; }
}

/* Texte riche à plusieurs paragraphes (`paragraphSpacing`, px) : la remise à zéro des marges collait les paragraphes
   et les lignes d'une liste des mentions légales les uns aux autres (19/10/2026). */
[style*="--cyb-para"] :is(p, ul, ol, h3, h4) + :is(p, ul, ol, h3, h4) { margin-top: var(--cyb-para); }
[style*="--cyb-para"] li + li { margin-top: calc(var(--cyb-para) / 3); }
[style*="--cyb-para"] :is(ul, ol) { padding-left: 1.1em; }
[style*="--cyb-para"] ul { list-style: disc; }
[style*="--cyb-para"] ol { list-style: decimal; }
/* Les actions du menu plein écran (Connexion, Réserver) : de vrais boutons pour le pouce, sur toute la largeur. */
.cyb-menu-plein__corps > :nth-child(n+2) a { width: 100%; min-height: 52px; display: inline-flex !important; align-items: center; justify-content: center; }

/* Carrousel en fondu enchaîné (transitionMode « fade », 19/10/2026) : les diapositives se superposent, la courante
   apparaît pendant que la précédente s'efface (fadeDuration, 650 ms par défaut, courbe qui ralentit). */
.carousel-track.cyb-fondu { display: grid !important; }
.cyb-fondu > .cyb-diapo { grid-area: 1 / 1; min-width: 0; height: 100%; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--cyb-fondu-duree, 650ms) cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear var(--cyb-fondu-duree, 650ms); }
.cyb-fondu > .cyb-diapo.est-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1;
    transition: opacity var(--cyb-fondu-duree, 650ms) cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; }
.cyb-fondu > .cyb-diapo > * { height: 100%; width: 100%; }
/* Bouton pause d'un carrousel qui défile seul (pauseButton). */
.cyb-carrousel-pause { position: absolute; right: 10px; bottom: 10px; z-index: 6; width: 24px; height: 24px; border-radius: 9999px; border: 0;
    display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); color: #111; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: opacity .15s; }
.cyb-carrousel-pause:hover { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .cyb-fondu > .cyb-diapo { transition: none; } }

/* Boutique, cartes nues (cardStyle « nu ») : la photo zoome au survol de la carte (×1,15, .5 s), comme les vitrines SumUp. */
@media (hover: hover) { .cyb-carte-nue:hover img { transform: scale(1.15); } }

/* En-tête sur deux étages (navbar navLayout « etages », ordinateur) : logo à gauche et actions à droite en haut, menu
   aligné à droite en dessous — l'en-tête des boutiques SumUp (La Planque, 19/10/2026). */
.cyb-barre-etages { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 14px; align-items: center; }
.cyb-barre-etages > :nth-child(1) { grid-column: 1; grid-row: 1; }
.cyb-barre-etages > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
.cyb-barre-etages > :nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; }
.cyb-annonce p { margin: 0; }
/* Au téléphone, nom et prix des cartes nues en 16 px (leur gabarit : 20 px à l'écran large). */
@media (max-width: 640px) { .cyb-carte-nue > p, .cyb-carte-nue > span:last-of-type { font-size: 16px !important; } }