/* assets/themes/default/css/custom.css */

/* ==========================================================================
   TABLEAU DES RÉSERVATIONS COMPACT SANS SCROLL HORIZONTAL (manager/reservations)
   ========================================================================== */

@media (min-width: 993px) {
	.bookings-table-wrapper:not(.rooms-table-wrapper):not(.pricing-grid-wrapper) {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	.bookings-table-wrapper:not(.rooms-table-wrapper):not(.pricing-grid-wrapper) .table-luxury:not(.rooms-table):not(.pricing-grid-table),
	.bookings-table {
		table-layout: fixed !important;
		width: 100% !important;
		min-width: 0 !important;
		border-collapse: collapse !important;
	}
}

@media (max-width: 992px) {
	.bookings-table-wrapper,
	.table-luxury-container {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		box-sizing: border-box !important;
	}

	.bookings-table-wrapper .table-luxury,
	.table-luxury-container .table-luxury,
	.bookings-table {
		min-width: 780px !important;
		table-layout: auto !important;
		width: max-content !important;
	}
}

.bookings-table-wrapper .table-luxury:not(.rooms-table):not(.pricing-grid-table) th,
.bookings-table-wrapper .table-luxury:not(.rooms-table):not(.pricing-grid-table) td {
	padding: 0.55rem 0.40rem !important;
	font-size: 0.80rem;
	vertical-align: middle;
	box-sizing: border-box;
	word-wrap: break-word;
	overflow: hidden;
}

.bookings-table-wrapper .table-luxury:not(.rooms-table):not(.pricing-grid-table) th {
	font-size: 0.70rem !important;
	letter-spacing: 0.3px !important;
	padding-top: 0.65rem !important;
	padding-bottom: 0.65rem !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.bookings-table-wrapper .table-luxury .table-filter-row th {
	background: #0c1322 !important;
	padding: 0.30rem 0.35rem !important;
	border-bottom: 2px solid rgba(243, 146, 0, 0.35) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: normal !important;
}

.bookings-table-wrapper .table-luxury .table-filter-row th:first-child {
	padding-left: 0.45rem !important;
}

.bookings-table-wrapper .table-luxury .table-filter-row th:last-child {
	padding-right: 0.45rem !important;
}

/* Filtres de colonnes sur table-luxury */
.table-col-filter {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: 28px !important;
	box-sizing: border-box !important;
	background: #080d19 !important;
	border: 1px solid var(--border-medium) !important;
	border-radius: 4px !important;
	color: #FFFFFF !important;
	font-size: 0.72rem !important;
	padding: 0.15rem 0.35rem !important;
	outline: none !important;
	font-family: inherit;
	color-scheme: dark;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.table-col-filter::placeholder {
	color: #64748b !important;
	font-size: 0.68rem;
}

.table-col-filter:focus {
	border-color: var(--gold-400) !important;
	box-shadow: 0 0 0 2px rgba(243, 146, 0, 0.25) !important;
}

.table-col-filter.has-value {
	border-color: var(--gold-400) !important;
	background: rgba(243, 146, 0, 0.12) !important;
	color: #FFFFFF !important;
	font-weight: 600;
	box-shadow: 0 0 6px rgba(243, 146, 0, 0.2);
}

.table-col-filter option,
.table-col-filter optgroup {
	background: #141c2d;
	color: #ffffff;
}

.table-col-filter optgroup {
	color: var(--gold-400);
	font-weight: 700;
	font-size: 0.76rem;
}

.btn-reset-filters {
	height: 28px !important;
	padding: 0.15rem 0.35rem !important;
	font-size: 0.70rem !important;
	border-radius: 4px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.25rem !important;
	width: 100% !important;
	white-space: nowrap !important;
	background: rgba(255, 255, 255, 0.04) !important;
	color: var(--text-muted) !important;
	border: 1px solid var(--border-subtle) !important;
	transition: all 0.2s ease !important;
	cursor: pointer;
}

.btn-reset-filters.has-active {
	background: rgba(243, 146, 0, 0.18) !important;
	color: var(--gold-400) !important;
	border-color: rgba(243, 146, 0, 0.5) !important;
	font-weight: 700 !important;
	box-shadow: 0 0 10px rgba(243, 146, 0, 0.2) !important;
	cursor: pointer !important;
}

.btn-reset-filters.has-active:hover {
	background: rgba(243, 146, 0, 0.28) !important;
	border-color: var(--gold-400) !important;
	color: #ffffff !important;
}

/* Éléments compacts spécifiques au tableau des réservations */
.booking-col-ref {
	width: 11% !important;
	max-width: 11% !important;
}

.booking-ref-badge {
	font-weight: 700;
	font-size: 0.78rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.booking-subject-text {
	font-size: 0.73rem;
	color: var(--text-secondary);
	margin-top: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	max-width: 100%;
}

.booking-notes-chip {
	margin-top: 3px;
	font-size: 0.69rem;
	background: rgba(243, 146, 0, 0.08);
	border: 1px solid rgba(243, 146, 0, 0.22);
	border-radius: 4px;
	padding: 0.12rem 0.35rem;
	color: #FDE68A;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	line-height: 1.2;
}

/* Gestion des comptes utilisateurs & clients */
.user-avatar-pill {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(243, 146, 0, 0.25) 0%, rgba(212, 175, 55, 0.1) 100%);
	border: 1px solid rgba(243, 146, 0, 0.4);
	color: var(--gold-400);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.unlinked-customer-card {
	background: rgba(243, 146, 0, 0.04);
	border: 1px solid rgba(243, 146, 0, 0.22);
	border-radius: 10px;
	padding: 0.85rem 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75rem;
	min-width: 0;
	box-sizing: border-box;
	overflow: hidden;
	transition: all 0.2s ease;
}

.unlinked-customer-card * {
	box-sizing: border-box;
}

.unlinked-customer-card:hover {
	background: rgba(243, 146, 0, 0.08);
	border-color: var(--gold-400);
	transform: translateY(-1px);
}

.user-role-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.user-role-customer {
	background: rgba(59, 130, 246, 0.12);
	color: #60A5FA;
	border: 1px solid rgba(59, 130, 246, 0.3);
}

.user-role-staff {
	background: rgba(168, 85, 247, 0.12);
	color: #C084FC;
	border: 1px solid rgba(168, 85, 247, 0.3);
}

.user-role-admin {
	background: rgba(243, 146, 0, 0.15);
	color: var(--gold-400);
	border: 1px solid rgba(243, 146, 0, 0.4);
}

.user-status-active {
	background: rgba(16, 185, 129, 0.12);
	color: #34D399;
	border: 1px solid rgba(16, 185, 129, 0.3);
}

.user-status-inactive {
	background: rgba(239, 68, 68, 0.12);
	color: #F87171;
	border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Modales SweetAlert2 Quai 36 Dark / Gold */
.swal2-quai36-popup {
	border: 1.5px solid rgba(243, 146, 0, 0.45) !important;
	border-radius: 16px !important;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(243, 146, 0, 0.12) !important;
	font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.swal2-container {
	z-index: 100500 !important;
}

.swal2-backdrop-show {
	background: rgba(0, 0, 0, 0.82) !important;
	backdrop-filter: blur(4px) !important;
}

.swal2-quai36-title {
	color: #ffffff !important;
	font-size: 1.2rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.2px !important;
}

.swal2-quai36-text {
	color: #94a3b8 !important;
	font-size: 0.92rem !important;
	line-height: 1.55 !important;
	overflow-x: hidden !important;
}

.swal2-quai36-text textarea,
.swal2-quai36-textarea {
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	display: block !important;
	background: #141c2d !important;
	color: #f8fafc !important;
	border: 1px solid #334155 !important;
	border-radius: 8px !important;
	padding: 10px 12px !important;
	font-size: 0.88rem !important;
	font-family: inherit !important;
	transition: border-color 0.2s, box-shadow 0.2s !important;
}

.swal2-quai36-text textarea:focus,
.swal2-quai36-textarea:focus {
	border-color: #f39200 !important;
	box-shadow: 0 0 0 3px rgba(243, 146, 0, 0.25) !important;
	outline: none !important;
}

.swal2-quai36-confirm {
	font-weight: 700 !important;
	border-radius: 10px !important;
	padding: 0.6rem 1.5rem !important;
	font-size: 0.9rem !important;
	cursor: pointer !important;
}

.swal2-quai36-cancel {
	font-weight: 600 !important;
	border-radius: 10px !important;
	padding: 0.6rem 1.5rem !important;
	font-size: 0.9rem !important;
	color: #94a3b8 !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	background: transparent !important;
	cursor: pointer !important;
}

.swal2-quai36-cancel:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #f8fafc !important;
}

/* ==========================================================================
   MODALE DE RÉSERVATION FLOTTANTE & CENTRALE (QUAI 36 SIGNATURE)
   Transformation de la sidebar de réservation en modale
   ========================================================================== */

#drawerBackdrop {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(5, 8, 16, 0.78) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	z-index: 99998 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1), visibility 280ms !important;
	cursor: default !important;
}

#drawerBackdrop.open {
	opacity: 1 !important;
	visibility: visible !important;
}

@keyframes modalBounce {
	0%, 100% {
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.018);
	}
}

#bookingDrawer.modal-bounce {
	animation: modalBounce 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

#bookingDrawer {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) scale(0.96) !important;
	width: min(860px, calc(100vw - 2.5rem)) !important;
	max-width: min(860px, calc(100vw - 2.5rem)) !important;
	height: min(92vh, 880px) !important;
	max-height: min(92vh, 880px) !important;
	background: var(--bg-surface, #0D121F) !important;
	border: 1.5px solid var(--border-gold, rgba(243, 146, 0, 0.45)) !important;
	border-radius: var(--radius-xl, 18px) !important;
	box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.9), 0 0 45px rgba(243, 146, 0, 0.16) !important;
	z-index: 99999 !important;
	display: flex !important;
	flex-direction: column !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease, visibility 280ms !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

#bookingDrawer.open {
	transform: translate(-50%, -50%) scale(1) !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

#bookingDrawer .drawer-header {
	padding: 1.25rem 1.85rem !important;
	border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)) !important;
	background: var(--bg-surface-elevated, #141A29) !important;
	flex-shrink: 0 !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	border-radius: var(--radius-xl, 18px) var(--radius-xl, 18px) 0 0 !important;
}

#bookingDrawer .drawer-header-info h3 {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

#bookingDrawer .drawer-header-info p {
	font-size: 0.82rem !important;
	color: var(--gold-400, #F39200) !important;
	margin: 0.2rem 0 0 0 !important;
}

.btn-close-drawer,
#bookingDrawer .btn-close-drawer {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	max-width: 36px !important;
	max-height: 36px !important;
	aspect-ratio: 1 / 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.13)) !important;
	color: var(--text-muted, #94A3B8) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 1.1rem !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.btn-close-drawer:hover,
#bookingDrawer .btn-close-drawer:hover {
	background: rgba(239, 68, 68, 0.15) !important;
	border-color: rgba(239, 68, 68, 0.4) !important;
	color: #F87171 !important;
	transform: scale(1.05) !important;
	box-shadow: 0 0 10px rgba(239, 68, 68, 0.2) !important;
}

.btn-close-drawer .ph-icon,
.btn-close-drawer svg,
#bookingDrawer .btn-close-drawer .ph-icon,
#bookingDrawer .btn-close-drawer svg {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
	aspect-ratio: 1 / 1 !important;
	display: block !important;
	fill: currentColor !important;
	stroke: none !important;
	flex-shrink: 0 !important;
	pointer-events: none !important;
	margin: auto !important;
}

#bookingDrawer form.drawer-form,
#bookingDrawer form:has(> .drawer-body) {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	height: calc(100% - 68px) !important;
	max-height: calc(100% - 68px) !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

#bookingDrawer .drawer-body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	padding: 1.5rem 1.85rem !important;
	overscroll-behavior: contain !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 1.35rem !important;
}

/* Scrollbar dorée raffinée pour la modale */
#bookingDrawer .drawer-body::-webkit-scrollbar {
	width: 6px;
}
#bookingDrawer .drawer-body::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.2);
}
#bookingDrawer .drawer-body::-webkit-scrollbar-thumb {
	background: rgba(243, 146, 0, 0.35);
	border-radius: 999px;
}
#bookingDrawer .drawer-body::-webkit-scrollbar-thumb:hover {
	background: var(--gold-400);
}

#bookingDrawer .drawer-footer,
#bookingDrawer .drawer-footer-actions {
	flex-shrink: 0 !important;
	padding: 1.15rem 1.85rem !important;
	background: var(--bg-surface-elevated, #141A29) !important;
	border-top: 1px solid var(--border-medium, rgba(255, 255, 255, 0.12)) !important;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4) !important;
	border-radius: 0 0 var(--radius-xl, 18px) var(--radius-xl, 18px) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.65rem !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

@media (max-width: 768px) {
	#bookingDrawer {
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		width: min(640px, calc(100vw - 1rem)) !important;
		max-width: min(640px, calc(100vw - 1rem)) !important;
		height: calc(100dvh - 1.5rem) !important;
		max-height: calc(100dvh - 1.5rem) !important;
		border-radius: var(--radius-lg, 14px) !important;
		border: 1.5px solid var(--border-gold, rgba(243, 146, 0, 0.45)) !important;
		transform: translate(-50%, -50%) scale(0.96) !important;
	}

	#bookingDrawer.open {
		transform: translate(-50%, -50%) scale(1) !important;
	}

	#bookingDrawer .drawer-header {
		padding: 0.95rem 1.15rem !important;
		border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0 !important;
	}

	#bookingDrawer .drawer-body {
		padding: 1rem 1.1rem !important;
		gap: 1rem !important;
	}

	#bookingDrawer .drawer-footer,
	#bookingDrawer .drawer-footer-actions {
		padding: 0.9rem 1.1rem !important;
		border-radius: 0 0 var(--radius-lg, 14px) var(--radius-lg, 14px) !important;
	}
}

@media (max-width: 480px) {
	#bookingDrawer {
		width: calc(100vw - 0.75rem) !important;
		max-width: calc(100vw - 0.75rem) !important;
		height: calc(100dvh - 1rem) !important;
		max-height: calc(100dvh - 1rem) !important;
		border-radius: 12px !important;
	}

	#bookingDrawer .drawer-header {
		border-radius: 12px 12px 0 0 !important;
	}

	#bookingDrawer .drawer-footer,
	#bookingDrawer .drawer-footer-actions {
		border-radius: 0 0 12px 12px !important;
	}
}

/* Hiérarchie stricte des plans d'empilement (Z-Index) pour tiroirs et modales */
.drawer-backdrop:not(#drawerBackdrop) {
	z-index: 1050 !important;
}

.booking-drawer:not(#bookingDrawer) {
	z-index: 1060 !important;
}

#createUserModal,
#editUserModal,
#contractModal,
#addHolidayModal,
#linkCustomerModal,
#inventoryModal,
#custPrefModal,
#customFieldModal {
	z-index: 1100 !important;
}

#artworkModalBackdrop,
#iconPickerBackdrop {
	z-index: 1150 !important;
}

#artworkModal,
#iconPickerModal {
	z-index: 1200 !important;
}

/* Modales globales (Conditions de réservation & d'annulation, confirmation success, etc.) et popups s'ouvrant au-dessus de la modale de réservation */
.modal-overlay,
#globalModalOverlay,
.luxury-modal-overlay {
	z-index: 100005 !important;
}

.modal-overlay .modal-card,
#globalModalOverlay .modal-card {
	background: var(--bg-surface, #0D121F) !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: var(--radius-xl, 18px) !important;
	box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.95), 0 0 45px rgba(0, 0, 0, 0.4) !important;
}

.swal2-container {
	z-index: 100500 !important;
}

.toast-container {
	z-index: 100600 !important;
}

/* Menus déroulants custom (luxury-select) et popovers (color picker) au-dessus des modales, alertes et toasts */
.luxury-select-dropdown,
.quai36-color-popover {
	z-index: 100700 !important;
}

/* ==========================================================================
   MODALE DE DÉTAIL D'ESPACE - JOURS D'ACCÈS & BOX DE CONTACT (contact@tiria.fr)
   ========================================================================== */

.room-modal-tech-item.tech-item-wide {
	grid-column: 1 / -1;
}

.room-modal-tech-item.tech-item-wide .tech-val {
	white-space: normal;
	line-height: 1.35;
}

.room-modal-contact-box {
	background: radial-gradient(circle at top right, rgba(226, 217, 204, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	padding: 1.05rem 1.25rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	position: relative;
	overflow: hidden;
}

.room-modal-contact-box::before {
	content: '';
	position: absolute;
	top: -24px;
	right: -24px;
	width: 90px;
	height: 90px;
	background: radial-gradient(circle, rgba(229, 169, 60, 0.12) 0%, transparent 70%);
	filter: blur(12px);
	pointer-events: none;
}

.room-modal-contact-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.65rem;
}

.room-modal-contact-icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: rgba(229, 169, 60, 0.1);
	border: 1px solid rgba(229, 169, 60, 0.25);
	color: var(--gold-400);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 0 8px rgba(229, 169, 60, 0.15);
}

.room-modal-contact-icon svg {
	width: 17px;
	height: 17px;
}

.room-modal-contact-titles {
	min-width: 0;
}

.room-modal-contact-title {
	font-size: 0.84rem;
	font-weight: 700;
	color: #F8FAFC;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.room-modal-contact-subtitle {
	font-size: 0.74rem;
	color: #94A3B8;
	line-height: 1.35;
}

.room-modal-contact-channels {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 0.55rem;
}

.room-modal-contact-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	padding: 0.45rem 0.85rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: #F1F5F9;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.room-modal-contact-pill:hover {
	background: rgba(229, 169, 60, 0.1);
	border-color: rgba(229, 169, 60, 0.35);
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: 0 0 10px rgba(229, 169, 60, 0.2);
}

.room-modal-contact-pill.primary-email {
	background: rgba(229, 169, 60, 0.08);
	border-color: rgba(229, 169, 60, 0.3);
	color: var(--gold-300);
}

.room-modal-contact-pill.primary-email:hover {
	background: rgba(229, 169, 60, 0.16);
	border-color: rgba(229, 169, 60, 0.5);
	color: #FFFFFF;
}

.room-modal-contact-pill svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* ==========================================================================
   EN-TÊTE NAVBAR COLLÉ AU DÉFILEMENT (STICKY HEADER NAV)
   ========================================================================== */

html, body {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

.site-header,
.site-header-portal {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 1000 !important;
}

/* ==========================================================================
   HEADER PORTAIL (/) SUR MOBILE : MASQUER LE BOUTON "APP MOBILE"
   Évite tout overflow horizontal sur smartphone / tablette (le bouton
   d'installation est déjà accessible dans le menu burger via #mobileNavInstallPwa).
   ========================================================================== */

@media (max-width: 992px) {
	.site-header-portal #btnHeaderPwaInstall,
	.site-header-portal .btn-pwa-header-cta {
		display: none !important;
	}

	/* Masquage strict des boutons réservés aux utilisateurs connectés dans le burger */
	.site-header-portal .nav-links.mobile-open #mobileNavMyBookings.is-hidden,
	.site-header-portal .nav-links.mobile-open #mobileNavLogout.is-hidden,
	.site-header-portal .nav-links.mobile-open .mobile-nav-only.is-hidden,
	.site-header-portal .nav-links.mobile-open .mobile-nav-only[style*="display: none"],
	.site-header-portal .nav-links.mobile-open .mobile-nav-only[style*="display:none"] {
		display: none !important;
	}
}

/* ==========================================================================
   HEADER PORTAIL (/) SUR DESKTOP : CENTRAGE PARFAIT DU MENU DE NAVIGATION
   Grille CSS à 3 colonnes symétriques (1fr auto 1fr) assurant que les
   boutons centraux (.nav-links-wrapper) sont mathématiquement centrés sur
   l'axe médian de la page, quelle que soit la largeur du bouton "App Mobile"
   et des actions à droite.
   ========================================================================== */

@media (min-width: 993px) {
	.site-header-portal {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr !important;
		align-items: center !important;
		justify-content: normal !important;
	}

	.site-header-portal > .brand-logo {
		justify-self: start !important;
		max-width: 100% !important;
		flex: none !important;
	}

	.site-header-portal > .nav-links-wrapper {
		justify-self: center !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		margin: 0 auto !important;
		width: auto !important;
		max-width: 100% !important;
		flex: none !important;
	}

	.site-header-portal > .header-actions {
		justify-self: end !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		margin-left: auto !important;
		flex: none !important;
	}
}

/* ==========================================================================
   BOUTON D'ACTION PRÉFÉRENCES CLIENTS (TABLEAU DES CLIENTS & TIERS)
   Strictement conforme aux directives de design AGENTS.md :
   Bordure visible homogène (pas de liseré latéral), fond pastel doux, micro-halo
   ========================================================================== */

.btn-table-action-pref {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	border-radius: 8px;
	font-size: 0.76rem;
	font-weight: 600;
	white-space: nowrap;
	background: rgba(229, 169, 60, 0.08);
	color: #F8FAFC;
	border: 1px solid rgba(229, 169, 60, 0.28);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-table-action-pref:hover {
	background: rgba(229, 169, 60, 0.2);
	border-color: var(--gold-400);
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: 0 0 10px rgba(229, 169, 60, 0.3);
}

.btn-table-action-pref svg {
	color: var(--gold-400);
	font-size: 0.85rem;
	flex-shrink: 0;
}

/* ==========================================================================
   ESPACEMENT LATÉRAL SECTION PLANNING (PORTAIL / SUR MOBILE)
   Harmonise le padding latéral avec les autres sections (expo, catalogue)
   pour éviter que les éléments soient collés aux bords de l'écran du smartphone.
   ========================================================================== */

@media (max-width: 768px) {
	#planning-section,
	.planning-portal-section {
		padding: 1.5rem var(--container-px, 1rem) 3.5rem var(--container-px, 1rem) !important;
		box-sizing: border-box !important;
		width: 100% !important;
	}
}

@media (max-width: 480px) {
	#planning-section,
	.planning-portal-section {
		padding: 1.25rem clamp(0.75rem, 4vw, 1rem) 3rem clamp(0.75rem, 4vw, 1rem) !important;
		box-sizing: border-box !important;
		width: 100% !important;
	}
}

/* ==========================================================================
   PILULE UTILISATEUR COMPACTE SUR MOBILE (PORTAIL /)
   Masquage des boutons 'Mes Réservations' et 'Déconnexion' dans la pilule
   du header sur mobile (actions accessibles via le menu burger).
   ========================================================================== */
@media (max-width: 992px) {
	.portal-user-pill .btn-pill-action,
	.portal-user-pill .btn-pill-bookings,
	.portal-user-pill .btn-pill-logout,
	.portal-user-pill #btnOpenMyBookings,
	.portal-user-pill #btnPortalLogout {
		display: none !important;
	}

	.portal-user-pill {
		padding: 0.28rem 0.65rem !important;
		gap: 0 !important;
		max-width: calc(100vw - 110px) !important;
		box-sizing: border-box !important;
	}

	.portal-user-info {
		max-width: 140px !important;
		padding: 0 !important;
		font-size: 0.76rem !important;
	}
}

/* ==========================================================================
   MODALE RESPONSIVE 'MES RÉSERVATIONS' (ESPACE CLIENT)
   Conversion du volet latéral en modale centrale luxueuse, fluide et responsive.
   Respect strict AGENTS.md : bordure subtile homogène, aucun bandeau flashy,
   halos doux, et grille de cartes à 2 colonnes pour occuper harmonieusement l'espace.
   ========================================================================== */
#myBookingsBackdrop {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(5, 8, 16, 0.78) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	z-index: 1050 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1), visibility 280ms !important;
	cursor: default !important;
}

#myBookingsBackdrop.open,
#myBookingsBackdrop.active {
	opacity: 1 !important;
	visibility: visible !important;
}

#myBookingsDrawer {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) scale(0.96) !important;
	width: min(1080px, calc(100vw - 3rem)) !important;
	max-width: min(1080px, calc(100vw - 3rem)) !important;
	height: min(90vh, 880px) !important;
	max-height: min(90vh, 880px) !important;
	background: var(--bg-surface, #0D121F) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: var(--radius-xl, 18px) !important;
	box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.9), 0 0 45px rgba(243, 146, 0, 0.08) !important;
	z-index: 1060 !important;
	display: flex !important;
	flex-direction: column !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease, visibility 280ms !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

/* Neutraliser la poignée bottom-sheet parasite */
#myBookingsDrawer::before {
	display: none !important;
	content: none !important;
}

/* État fermé : masqué */
#myBookingsDrawer:not(.open):not(.active) {
	transform: translate(-50%, -50%) scale(0.96) !important;
	visibility: hidden !important;
	pointer-events: none !important;
	opacity: 0 !important;
}

/* État ouvert : centré et pleinement visible */
#myBookingsDrawer.open,
#myBookingsDrawer.active {
	transform: translate(-50%, -50%) scale(1) !important;
	visibility: visible !important;
	pointer-events: auto !important;
	opacity: 1 !important;
}

#myBookingsDrawer .drawer-header {
	flex-shrink: 0 !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 1.25rem 1.85rem !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	background: var(--bg-surface-elevated, #141A29) !important;
	border-radius: var(--radius-xl, 18px) var(--radius-xl, 18px) 0 0 !important;
	box-sizing: border-box !important;
}

#myBookingsDrawer .drawer-header-info h3 {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

#myBookingsDrawer .drawer-header-info p {
	font-size: 0.82rem !important;
	color: var(--gold-400, #F39200) !important;
	margin: 0.2rem 0 0 0 !important;
}

#myBookingsListContainer {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	padding: 1.5rem 1.85rem 2.5rem 1.85rem !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 1.25rem !important;
}

/* Grille responsive 2 colonnes pour occuper harmonieusement l'espace de la modale */
.my-bookings-cards-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 1.25rem !important;
	align-items: start !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.my-bookings-cards-grid.single-item {
	grid-template-columns: 1fr !important;
	max-width: 700px !important;
	margin: 0 auto !important;
}

/* Cartes des réservations au sein de la modale */
.my-booking-card {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	align-self: start !important;
	height: auto !important;
	gap: 0.65rem !important;
	background: rgba(255, 255, 255, 0.02) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px !important;
	padding: 1.25rem 1.35rem !important;
	transition: all 0.25s ease !important;
	box-sizing: border-box !important;
	position: relative !important;
}

.my-booking-card > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.my-booking-card:hover {
	background: rgba(255, 255, 255, 0.038) !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45) !important;
	transform: translateY(-2px) !important;
}

/* Pagination au bas de la modale */
.my-bookings-pagination-wrap {
	margin-top: 0.5rem !important;
	padding-top: 1rem !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 0.75rem !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

@media (max-width: 991px) {
	#myBookingsDrawer,
	aside#myBookingsDrawer {
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		width: min(94vw, 840px) !important;
		max-width: min(94vw, 840px) !important;
		height: min(92vh, 860px) !important;
		max-height: min(92vh, 860px) !important;
		z-index: 1060 !important;
	}

	#myBookingsDrawer.open,
	#myBookingsDrawer.active,
	aside#myBookingsDrawer.open,
	aside#myBookingsDrawer.active {
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) scale(1) !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		z-index: 1060 !important;
	}

	.my-bookings-cards-grid {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
	}
}

@media (max-width: 768px) {
	#myBookingsDrawer,
	aside#myBookingsDrawer {
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		width: calc(100vw - 1rem) !important;
		max-width: calc(100vw - 1rem) !important;
		height: min(94vh, 94dvh) !important;
		max-height: min(94vh, 94dvh) !important;
		border-radius: 14px !important;
		z-index: 1060 !important;
	}

	#myBookingsDrawer.open,
	#myBookingsDrawer.active,
	aside#myBookingsDrawer.open,
	aside#myBookingsDrawer.active {
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) scale(1) !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		z-index: 1060 !important;
	}

	#myBookingsDrawer .drawer-header {
		padding: 1rem 1.15rem !important;
		border-radius: 14px 14px 0 0 !important;
	}

	#myBookingsListContainer {
		padding: 1.15rem 1rem 2rem 1rem !important;
		gap: 1rem !important;
	}

	.my-bookings-cards-grid {
		grid-template-columns: 1fr !important;
		gap: 0.85rem !important;
	}
}

@media (max-width: 480px) {
	#myBookingsDrawer,
	aside#myBookingsDrawer {
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		width: calc(100vw - 0.75rem) !important;
		max-width: calc(100vw - 0.75rem) !important;
		height: calc(100dvh - 1rem) !important;
		max-height: calc(100dvh - 1rem) !important;
		border-radius: 12px !important;
		z-index: 1060 !important;
	}

	#myBookingsDrawer.open,
	#myBookingsDrawer.active,
	aside#myBookingsDrawer.open,
	aside#myBookingsDrawer.active {
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) scale(1) !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		z-index: 1060 !important;
	}
}

/* ==========================================================================
   CARTES MES RÉSERVATIONS SUR MOBILE (.my-booking-card)
   - Suppression du grand espace vide causé par flex-basis: 200px sur mobile
   - Repositionnement compact et net de l'en-tête (titre + prix)
   - Bouton 'Annuler' à largeur proportionnée (width: auto) sans s'étirer sur 100%
   ========================================================================== */
.my-booking-card-header {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	gap: 0.65rem !important;
	margin-bottom: 0.65rem !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.my-booking-card-title-wrap {
	flex: 1 1 auto !important;
	flex-basis: auto !important;
	flex-grow: 1 !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
}

.my-booking-price-tag {
	flex: 0 0 auto !important;
	text-align: right !important;
	margin-left: auto !important;
	white-space: nowrap !important;
}

.my-booking-card-footer {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 0.5rem !important;
	width: 100% !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	padding-top: 0.65rem !important;
	margin-top: 0.25rem !important;
}

.my-booking-actions {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 0.45rem !important;
	width: auto !important;
	max-width: 100% !important;
}

.btn-cancel-my-booking {
	width: auto !important;
	max-width: fit-content !important;
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	padding: 0.32rem 0.65rem !important;
	font-size: 0.74rem !important;
}

@media (max-width: 768px) {
	.my-booking-card-header {
		flex-direction: row !important;
		align-items: flex-start !important;
		justify-content: space-between !important;
		gap: 0.5rem !important;
	}

	.my-booking-card-title-wrap {
		flex: 1 1 auto !important;
		flex-basis: auto !important;
		min-height: 0 !important;
		height: auto !important;
	}

	.my-booking-price-tag {
		text-align: right !important;
		margin-left: auto !important;
		flex-shrink: 0 !important;
		font-size: 1rem !important;
	}

	.my-booking-card-footer {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 0.5rem !important;
	}

	.my-booking-actions {
		width: auto !important;
		display: inline-flex !important;
		flex-wrap: wrap !important;
		gap: 0.4rem !important;
	}

	.btn-cancel-my-booking {
		width: auto !important;
		max-width: fit-content !important;
		flex: 0 0 auto !important;
		display: inline-flex !important;
		padding: 0.32rem 0.65rem !important;
		font-size: 0.74rem !important;
	}
}

/* ==========================================================================
   NAVIGATION ADMIN MOBILE (STUDIO GESTIONNAIRE / MANAGER)
   Rétablissement du menu hamburger sur mobile (<= 768px & <= 1200px)
   et neutralisation définitive de l'ancienne barre de navigation basse.
   ========================================================================== */

/* 1. Neutralisation et masquage strict de la bottom navigation */
.bottom-nav,
#bottomNavAdmin {
	display: none !important;
}

/* 2. Annulation du padding-bottom mobile lié à l'ancienne bottom navigation */
@media (max-width: 768px) {
	.manager-container {
		padding-bottom: 1.5rem !important;
	}
	.portal-content,
	body > main {
		padding-bottom: 0 !important;
	}
}

/* 3. Bouton hamburger et menu déroulant mobile admin — Identique au design du portail public */
@media (min-width: 1201px) {
	.site-header:not(.site-header-portal) .nav-toggle-btn,
	#btnAdminNavToggle {
		display: none !important;
	}
	#btnAdminLogoutTop {
		display: inline-flex !important;
	}
}

@media (max-width: 1200px) {
	/* Bouton Hamburger admin : même géométrie, teintes dorées et dimensions (36x36px) que le portail public */
	.site-header:not(.site-header-portal) .nav-toggle-btn,
	#btnAdminNavToggle {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 36px !important;
		height: 36px !important;
		border-radius: 10px !important;
		background: rgba(255, 255, 255, 0.05) !important;
		border: 1px solid rgba(212, 175, 55, 0.35) !important;
		color: var(--gold-400) !important;
		cursor: pointer !important;
		transition: all var(--transition-fast, 0.15s ease) !important;
		padding: 0 !important;
		flex-shrink: 0 !important;
	}

	.site-header:not(.site-header-portal) .nav-toggle-btn:hover,
	#btnAdminNavToggle:hover {
		background: rgba(212, 175, 55, 0.14) !important;
		border-color: rgba(212, 175, 55, 0.5) !important;
		color: #FFFFFF !important;
	}

	/* Masquer le bouton Déconnexion en dehors du menu hamburger sur mobile/tablette */
	#btnAdminLogoutTop {
		display: none !important;
	}

	.site-header:not(.site-header-portal) .nav-links-wrapper {
		display: block !important;
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		overflow: visible !important;
	}

	.site-header:not(.site-header-portal) .nav-links:not(.mobile-open) {
		display: none !important;
	}

	/* Volet déroulant admin ouvert : même structure, fond flouté, bordure dorée Quai 36 et ombre que le portail */
	.site-header:not(.site-header-portal) .nav-links.mobile-open {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		max-height: calc(100dvh - 60px) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		background: rgba(11, 17, 30, 0.98) !important;
		backdrop-filter: blur(25px) !important;
		-webkit-backdrop-filter: blur(25px) !important;
		border-bottom: 2px solid var(--border-gold, rgba(212, 175, 55, 0.35)) !important;
		border-radius: 0 0 16px 16px !important;
		box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95) !important;
		padding: 1.25rem !important;
		gap: 0.6rem !important;
		z-index: 1000 !important;
		animation: navSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
	}

	/* Boutons de navigation mobile admin : look & feel identique au portail public */
	.site-header:not(.site-header-portal) .nav-links.mobile-open .nav-link-btn {
		width: 100% !important;
		padding: 0.7rem 1rem !important;
		font-size: 0.85rem !important;
		font-weight: 600 !important;
		border-radius: 10px !important;
		background: rgba(255, 255, 255, 0.03) !important;
		border: 1px solid rgba(255, 255, 255, 0.06) !important;
		color: #CBD5E1 !important;
		justify-content: flex-start !important;
		text-decoration: none !important;
		transition: all var(--transition-fast, 0.15s ease) !important;
	}

	.site-header:not(.site-header-portal) .nav-links.mobile-open .nav-link-btn:hover {
		background: rgba(212, 175, 55, 0.1) !important;
		border-color: rgba(212, 175, 55, 0.3) !important;
		color: #FFFFFF !important;
	}

	.site-header:not(.site-header-portal) .nav-links.mobile-open .nav-link-btn.active {
		background: rgba(212, 175, 55, 0.18) !important;
		border-color: rgba(212, 175, 55, 0.5) !important;
		color: #FDE68A !important;
	}

	.site-header:not(.site-header-portal) .nav-links.mobile-open .mobile-nav-only {
		display: inline-flex !important;
	}

	/* Bouton Déconnexion dans le menu burger admin : cohérent avec #mobileNavLogout */
	.site-header:not(.site-header-portal) .nav-links.mobile-open #mobileNavAdminLogout {
		grid-column: 1 / -1 !important;
		color: #F87171 !important;
		background: rgba(239, 68, 68, 0.08) !important;
		border: 1px solid rgba(239, 68, 68, 0.22) !important;
		margin-top: 0.25rem !important;
	}

	.site-header:not(.site-header-portal) .nav-links.mobile-open #mobileNavAdminLogout:hover {
		background: rgba(239, 68, 68, 0.16) !important;
		border-color: rgba(239, 68, 68, 0.4) !important;
		color: #FCA5A5 !important;
	}

	/* Dropdown / Accordéon Paramétrage en mode mobile */
	.site-header:not(.site-header-portal) .nav-links.mobile-open .nav-settings-dropdown {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
	}

	.site-header:not(.site-header-portal) .nav-links.mobile-open #btnNavSettings {
		width: 100% !important;
		justify-content: space-between !important;
		padding: 0.7rem 1rem !important;
		font-size: 0.85rem !important;
		font-weight: 600 !important;
		border-radius: 10px !important;
		background: rgba(255, 255, 255, 0.03) !important;
		border: 1px solid rgba(255, 255, 255, 0.06) !important;
	}

	.site-header:not(.site-header-portal) .nav-links.mobile-open #btnNavSettings:hover {
		background: rgba(212, 175, 55, 0.1) !important;
		border-color: rgba(212, 175, 55, 0.3) !important;
	}

	.site-header:not(.site-header-portal) .nav-links.mobile-open #btnNavSettings.active {
		background: rgba(212, 175, 55, 0.18) !important;
		border-color: rgba(212, 175, 55, 0.5) !important;
		color: #FDE68A !important;
	}

	.site-header:not(.site-header-portal) .nav-links.mobile-open #navSettingsMenu {
		position: static !important;
		display: none !important;
		width: 100% !important;
		margin-top: 0.5rem !important;
		background: rgba(15, 23, 42, 0.98) !important;
		border: 1px solid rgba(212, 175, 55, 0.25) !important;
		border-radius: 10px !important;
		box-shadow: none !important;
		padding: 0.5rem !important;
	}

	.site-header:not(.site-header-portal) .nav-links.mobile-open .nav-settings-dropdown.open #navSettingsMenu,
	.site-header:not(.site-header-portal) .nav-links.mobile-open .nav-settings-dropdown[data-open="1"] #navSettingsMenu {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.25rem !important;
	}

	.site-header:not(.site-header-portal) .nav-links.mobile-open #navSettingsMenu .nav-dropdown-item {
		padding: 0.6rem 0.85rem !important;
		font-size: 0.82rem !important;
		border-radius: 8px !important;
		color: #CBD5E1 !important;
		text-decoration: none !important;
		display: flex !important;
		align-items: center !important;
		gap: 0.5rem !important;
	}

	.site-header:not(.site-header-portal) .nav-links.mobile-open #navSettingsMenu .nav-dropdown-item:hover {
		background: rgba(212, 175, 55, 0.08) !important;
		color: #F8FAFC !important;
	}

	.site-header:not(.site-header-portal) .nav-links.mobile-open #navSettingsMenu .nav-dropdown-item.active {
		background: rgba(212, 175, 55, 0.18) !important;
		color: #FDE68A !important;
		border: 1px solid rgba(212, 175, 55, 0.35) !important;
	}
}

@media (max-width: 768px) {
	.site-header:not(.site-header-portal) {
		padding: 0.65rem 1rem !important;
		min-height: 56px !important;
	}

	.site-header:not(.site-header-portal) .nav-links.mobile-open {
		grid-template-columns: 1fr !important;
		padding: 1rem !important;
		gap: 0.5rem !important;
		max-height: calc(100dvh - 56px) !important;
	}
}

@media (max-width: 420px) {
	.site-header:not(.site-header-portal) .brand-title {
		font-size: 0.95rem !important;
	}
	.site-header:not(.site-header-portal) .brand-logo img {
		max-height: 36px !important;
	}
}

/* ==========================================================================
   REFONTE RESPONSIVE MOBILE EXHAUSTIVE DES PAGES ADMIN (STUDIO GESTIONNAIRE)
   Garantie zéro dépassement horizontal (anti-overflow) et adaptabilité
   totale de l'ensemble des 14 sections et tiroirs du back-office.
   ========================================================================== */

/* 1. Sécurité globale anti-débordement horizontal sur mobile et tablette */
@media (max-width: 992px) {
	html, body {
		max-width: 100vw !important;
		overflow-x: clip !important;
	}

	.manager-container {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding: 0.75rem 0.65rem !important;
		overflow-x: hidden !important;
	}

	.manager-container.manager-container-wide,
	.manager-container:has(#view-dashboard.active) {
		padding: 0.75rem 0.65rem !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Réduction du padding (2rem -> 0.85rem) des cartes de page admin */
	.admin-page-view.active {
		padding: 0.85rem 0.65rem !important;
		border-radius: 14px !important;
		margin-bottom: 1.5rem !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	#view-dashboard.active {
		padding: 0 !important;
		border: none !important;
	}

	#view-api.active {
		padding: 0.85rem 0.65rem !important;
	}

	/* Cartes et panneaux internes */
	.luxury-card,
	.room-luxury-card,
	.users-legend-card {
		padding: 1rem 0.85rem !important;
		border-radius: 12px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	.luxury-card-body {
		padding: 0.85rem 0.5rem !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* En-têtes de page (.view-header) */
	.view-header {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.75rem !important;
		margin: 0.75rem 0 1.25rem 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.view-header > div:first-child {
		width: 100% !important;
		max-width: 100% !important;
	}

	.view-title {
		font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
		word-break: break-word !important;
		line-height: 1.25 !important;
	}

	.view-subtitle {
		font-size: 0.82rem !important;
		line-height: 1.4 !important;
		word-break: break-word !important;
	}

	.view-header .view-actions,
	.view-header > div:last-child:not(:first-child) {
		width: 100% !important;
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 0.5rem !important;
	}

	.view-header .view-actions button,
	.view-header .view-actions a,
	.view-header .btn-action-gold,
	.view-header .btn-action-primary,
	.view-header .btn-action-secondary {
		flex: 1 1 auto !important;
		min-width: 120px !important;
		justify-content: center !important;
		text-align: center !important;
	}
}

/* 2. Page En Direct (#view-dashboard) */
@media (max-width: 900px) {
	#view-dashboard .live-columns-grid {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		width: 100% !important;
	}
}

@media (max-width: 768px) {
	.live-dashboard-header {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.75rem !important;
		padding: 1rem 0.75rem !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.live-header-info {
		width: 100% !important;
		text-align: center !important;
	}

	.live-brand-title {
		font-size: clamp(1.1rem, 4vw, 1.35rem) !important;
		justify-content: center !important;
		word-break: break-word !important;
	}

	.live-clock-container {
		width: 100% !important;
		text-align: center !important;
	}

	.live-clock-display {
		font-size: clamp(1.8rem, 7vw, 2.3rem) !important;
	}

	.live-header-actions {
		width: 100% !important;
		justify-content: center !important;
		flex-wrap: wrap !important;
		gap: 0.5rem !important;
	}

	.live-kpi-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0.5rem !important;
		width: 100% !important;
	}

	.live-column-box {
		padding: 1rem 0.85rem !important;
		border-radius: 12px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.live-timeline-panel {
		padding: 1rem 0.75rem !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.live-timeline-header {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.5rem !important;
	}

	.live-timeline-legend {
		flex-wrap: wrap !important;
		gap: 0.5rem !important;
	}

	.live-timeline-scroll {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		box-sizing: border-box !important;
	}
}

@media (max-width: 480px) {
	.live-kpi-grid {
		grid-template-columns: 1fr !important;
	}
}

/* 3. Page Indicateurs (#view-indicateurs) */
@media (max-width: 992px) {
	.indicateurs-grid-row1,
	.indicateurs-grid-row2,
	#view-indicateurs .indicateurs-grid-row2[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		width: 100% !important;
	}
}

@media (max-width: 768px) {
	/* Annulation du nowrap fixe qui forçait 450px sur mobile */
	#view-indicateurs .view-header > div:last-child {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		white-space: normal !important;
		flex-wrap: wrap !important;
		padding: 0.75rem !important;
		box-sizing: border-box !important;
		gap: 0.5rem !important;
	}

	#statsStartDate,
	#statsEndDate {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
	}

	#btnRefreshStats {
		width: 100% !important;
		justify-content: center !important;
	}

	#view-indicateurs .kpi-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0.6rem !important;
		width: 100% !important;
	}

	.indicateurs-sub-nav {
		display: flex !important;
		flex-wrap: wrap !important;
		width: 100% !important;
		gap: 0.35rem !important;
	}

	.indicateurs-sub-btn {
		flex: 1 1 auto !important;
		justify-content: center !important;
		font-size: 0.74rem !important;
		padding: 0.35rem 0.5rem !important;
	}

	#managerCorrelationChart {
		max-width: 100% !important;
		height: auto !important;
	}
}

@media (max-width: 480px) {
	#view-indicateurs .kpi-grid {
		grid-template-columns: 1fr !important;
	}
}

/* 4. Page Planning Chronologique (#view-planning) */
@media (max-width: 768px) {
	#managerTimelineControls {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.65rem !important;
		width: 100% !important;
	}

	#managerTimelineContainer {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		box-sizing: border-box !important;
	}
}

/* 5. Page Réservations (#view-reservations) */
@media (max-width: 768px) {
	.reservations-header-actions {
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.65rem !important;
	}

	.reservations-header-actions > .btn-action-gold {
		width: 100% !important;
		justify-content: center !important;
	}

	.reservations-secondary-actions {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		gap: 0.5rem !important;
	}

	.reservations-secondary-actions .nav-link-btn {
		width: 100% !important;
		justify-content: center !important;
	}

	.reservations-temporal-filter-bar {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.65rem !important;
		padding: 0.65rem !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.reservations-temporal-filter-bar > div:first-child {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		gap: 0.5rem !important;
	}

	.temporal-date-wrap {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		gap: 0.35rem !important;
	}

	.temporal-date-wrap input[type="date"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	.temporal-presets-wrap {
		display: flex !important;
		flex-wrap: wrap !important;
		width: 100% !important;
		gap: 0.35rem !important;
	}

	.temporal-presets-wrap button {
		flex: 1 1 calc(50% - 0.25rem) !important;
		justify-content: center !important;
		text-align: center !important;
		font-size: 0.72rem !important;
		padding: 0.35rem 0.25rem !important;
	}

	#bookingsPaginationContainer {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.6rem !important;
		padding: 0.65rem !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* 6. Page Salles & Tarifs (#view-salles) */
@media (max-width: 768px) {
	#view-salles .input-luxury-group {
		width: 100% !important;
		min-width: 0 !important;
	}

	#view-salles div[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"],
	#view-salles div[style*="grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))"] {
		grid-template-columns: 1fr !important;
		gap: 0.85rem !important;
		padding: 0.85rem !important;
	}

	#btnSaveGlobalPricing,
	#btnAddNewRoom {
		width: 100% !important;
		justify-content: center !important;
	}
}

/* 7. Page Passerelles & Tiers (#view-passerelles) */
@media (max-width: 768px) {
	#view-passerelles .admin-two-cols-grid {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		width: 100% !important;
	}

	#view-passerelles .btn-book-action {
		width: 100% !important;
		justify-content: center !important;
	}
}

/* 8. Page API Comptabilité (#view-api) */
@media (max-width: 768px) {
	#view-api .view-header > div:last-child {
		flex-direction: column !important;
		width: 100% !important;
		gap: 0.5rem !important;
	}

	#view-api .btn-book-action {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
		font-size: 0.78rem !important;
	}

	#comptaTokenCode,
	#view-api code {
		word-break: break-all !important;
		white-space: normal !important;
		display: inline-block !important;
		max-width: 100% !important;
	}

	#view-api pre {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		box-sizing: border-box !important;
	}
}

/* 9. Page Expositions & Art (#view-expos) */
@media (max-width: 768px) {
	#adminCurrentExpoCard div[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
	}

	#adminCurrentExpoCard div[style*="align-items: center"][style*="gap: 1.25rem"] {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
	}

	#adminCurrentExpoCard div[style*="justify-content: space-between"][style*="border-bottom"] {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 1rem !important;
	}

	#adminCurrentExpoCard button {
		width: 100% !important;
		justify-content: center !important;
	}
}

/* 10. Page Inventaire & Matériel (#view-inventaire) */
@media (max-width: 768px) {
	#view-inventaire .stats-overview-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 0.65rem !important;
		width: 100% !important;
	}

	#inventoryCategoryFilters {
		width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		white-space: nowrap !important;
		scrollbar-width: none !important;
		padding-bottom: 0.35rem !important;
	}

	#inventoryCategoryFilters .nav-link-btn {
		flex-shrink: 0 !important;
	}

	#searchInventoryInput {
		width: 100% !important;
		max-width: 100% !important;
	}
}

@media (max-width: 480px) {
	#view-inventaire .stats-overview-grid {
		grid-template-columns: 1fr !important;
	}
}

/* 11. Page Champs Natifs (#view-custom-fields) */
@media (max-width: 768px) {
	#cfModuleTabs {
		width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		white-space: nowrap !important;
		scrollbar-width: none !important;
		padding-bottom: 0.35rem !important;
	}

	#cfModuleTabs button {
		flex-shrink: 0 !important;
	}

	#customFieldsGrid,
	#view-custom-fields div[style*="grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))"],
	#view-custom-fields div[style*="grid-template-columns:repeat(auto-fill, minmax(340px, 1fr))"] {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		width: 100% !important;
	}

	#cfSearchInput {
		width: 100% !important;
	}
}

/* 12. Page Identité de Marque & Design (#view-branding) */
@media (max-width: 768px) {
	#view-branding div[style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"],
	#view-branding div[style*="grid-template-columns:repeat(auto-fit, minmax(320px, 1fr))"],
	#view-branding div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"],
	#view-branding div[style*="grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))"],
	#view-branding div[style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"],
	#view-branding div[style*="grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))"] {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		width: 100% !important;
	}

	#view-branding div[style*="display: flex; gap: 1rem; align-items: center;"] {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	#btnSaveBrandingTop {
		width: 100% !important;
		justify-content: center !important;
	}
}

/* 13. Page Paramétrage & Notifications (#view-settings) */
@media (max-width: 768px) {
	/* Barre d'onglets Paramétrage : scroll horizontal fluide sans débordement */
	#view-settings nav[style*="width:fit-content"],
	#view-settings nav {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		white-space: nowrap !important;
		scrollbar-width: none !important;
		box-sizing: border-box !important;
		margin-bottom: 1.25rem !important;
	}

	#view-settings .settings-tab-btn {
		flex-shrink: 0 !important;
		padding: 0.5rem 0.75rem !important;
		font-size: 0.78rem !important;
	}

	/* Toutes les grilles 2 colonnes dans settings passent à 1 colonne */
	#view-settings div[style*="grid-template-columns:1fr 1fr"],
	#view-settings div[style*="grid-template-columns: 1fr 1fr"],
	#view-settings div[style*="grid-template-columns:repeat(auto-fit, minmax(290px, 1fr))"],
	#view-settings div[style*="grid-template-columns: repeat(auto-fit, minmax(290px, 1fr))"] {
		grid-template-columns: 1fr !important;
		gap: 0.85rem !important;
		width: 100% !important;
	}

	#view-settings button[type="button"],
	#view-settings button[type="submit"] {
		max-width: 100% !important;
	}
}

/* 14. Page Jours Fériés (#view-holidays) */
@media (max-width: 768px) {
	#view-holidays .view-header > div:last-child {
		flex-direction: column !important;
		align-items: stretch !important;
		width: 100% !important;
		gap: 0.5rem !important;
	}

	#holidayYearSelect,
	#btnSyncHolidays,
	#view-holidays button {
		width: 100% !important;
		justify-content: center !important;
	}

	#view-holidays div[style*="justify-content: space-between"][style*="border-radius: var(--radius-md)"] {
		flex-direction: column !important;
		align-items: stretch !important;
		padding: 0.85rem !important;
		gap: 0.75rem !important;
	}
}

/* 15. Page Comptes Utilisateurs & Clients (#view-utilisateurs) */
@media (max-width: 768px) {
	#view-utilisateurs .view-actions {
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 0.5rem !important;
	}

	#btnSyncCommercialStatuses,
	#view-utilisateurs .btn-action-primary {
		width: 100% !important;
		justify-content: center !important;
	}

	#unlinkedCustomersBanner {
		padding: 0.85rem !important;
	}

	#unlinkedCustomersList {
		grid-template-columns: 1fr !important;
		width: 100% !important;
	}

	#usersPaginationContainer {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.6rem !important;
		padding: 0.65rem !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* 16. Tiroirs Latéraux (Drawers) et Modals sur Mobile */
@media (max-width: 768px) {
	.booking-drawer:not(#bookingDrawer):not(#myBookingsDrawer),
	.room-drawer,
	#roomEditDrawer,
	#expoDrawer {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	.drawer-header {
		padding: 0.85rem 1rem !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.drawer-body {
		padding: 1rem 0.85rem !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	.drawer-footer,
	.drawer-footer-actions {
		padding: 0.75rem 1rem !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.5rem !important;
	}

	.drawer-footer button,
	.drawer-footer-actions button {
		width: 100% !important;
		justify-content: center !important;
	}
}

/* ==========================================================================
   MODALES ADMINISTRATIVES SCROLLABLES (INVENTAIRE & PRÉFÉRENCES TIERS)
   ========================================================================== */

#inventoryModal,
#custPrefModal {
	max-height: 90vh !important;
	max-height: 90dvh !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	box-sizing: border-box !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(229, 169, 60, 0.4) rgba(15, 23, 42, 0.6);
}

#inventoryModal::-webkit-scrollbar,
#custPrefModal::-webkit-scrollbar {
	width: 6px;
}

#inventoryModal::-webkit-scrollbar-track,
#custPrefModal::-webkit-scrollbar-track {
	background: rgba(15, 23, 42, 0.6);
	border-radius: 6px;
}

#inventoryModal::-webkit-scrollbar-thumb,
#custPrefModal::-webkit-scrollbar-thumb {
	background: rgba(229, 169, 60, 0.4);
	border-radius: 6px;
}

#inventoryModal::-webkit-scrollbar-thumb:hover,
#custPrefModal::-webkit-scrollbar-thumb:hover {
	background: rgba(229, 169, 60, 0.7);
}

@media (max-width: 640px) {
	#inventoryModal,
	#custPrefModal {
		width: 96% !important;
		max-height: 94vh !important;
		max-height: 94dvh !important;
		padding: 1.25rem 1rem !important;
	}
}

/* ==========================================================================
   BOUTONS D'ACTION PRINCIPALE (.btn-action-primary) - CHARTE QUAI 36
   ========================================================================== */
.btn-action-primary {
	background: linear-gradient(135deg, #E5A93C 0%, #C8821D 100%) !important;
	color: #0C1017 !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: var(--radius-md, 8px) !important;
	font-size: 0.84rem !important;
	font-weight: 700 !important;
	padding: 0.52rem 1.15rem !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.45rem !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
	box-shadow: 0 4px 14px rgba(200, 130, 29, 0.28) !important;
	text-shadow: none !important;
}

.btn-action-primary:hover {
	background: linear-gradient(135deg, #F0B84D 0%, #D48E28 100%) !important;
	box-shadow: 0 6px 20px rgba(200, 130, 29, 0.42) !important;
	transform: translateY(-1px) !important;
	color: #0A0D14 !important;
}

.btn-action-primary:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 6px rgba(200, 130, 29, 0.2) !important;
}

.btn-action-primary svg,
.btn-action-primary .ph-icon {
	color: #0C1017 !important;
}

/* ==========================================================================
   NAVIGATION LATÉRALE DES SECTIONS BRANDING (manager/branding)
   ========================================================================== */

.branding-layout-wrapper {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 2rem;
	align-items: start;
	margin-bottom: 3rem;
}

@media (max-width: 1080px) {
	.branding-layout-wrapper {
		grid-template-columns: 1fr !important;
		gap: 1.5rem !important;
	}
}

.branding-sidebar-nav {
	position: sticky;
	top: 5.5rem;
	background: rgba(13, 19, 32, 0.88);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: var(--radius-xl, 14px);
	padding: 1.25rem 1rem;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

@media (max-width: 1080px) {
	.branding-sidebar-nav {
		position: static !important;
		top: auto !important;
	}
}

.branding-nav-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 0.75rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.branding-nav-header-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: #F8FAFC;
	text-transform: uppercase;
	letter-spacing: 0.75px;
}

.branding-nav-header-title .ph-icon {
	color: var(--gold-400, #E5A93C);
	font-size: 1.05rem;
}

.branding-nav-badge {
	background: rgba(212, 175, 55, 0.08);
	border: 1px solid rgba(212, 175, 55, 0.25);
	border-radius: 9999px;
	padding: 0.15rem 0.55rem;
	font-size: 0.70rem;
	color: var(--gold-400, #E5A93C);
	font-weight: 600;
}

.branding-nav-list {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.branding-nav-item {
	margin: 0;
	padding: 0;
}

.branding-nav-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.85rem;
	border-radius: 10px;
	border: 1px solid transparent;
	background: transparent;
	color: #94A3B8;
	font-size: 0.82rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}

.branding-nav-link:hover {
	background: rgba(255, 255, 255, 0.04);
	color: #F8FAFC;
	border-color: rgba(255, 255, 255, 0.09);
	transform: translateX(2px);
}

.branding-nav-link.active {
	background: rgba(212, 175, 55, 0.09);
	color: #F8FAFC;
	border: 1px solid rgba(212, 175, 55, 0.32);
	font-weight: 600;
}

.branding-nav-num {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 700;
	font-family: monospace;
	color: #CBD5E1;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.branding-nav-link.active .branding-nav-num {
	background: var(--gold-400, #E5A93C);
	border-color: var(--gold-400, #E5A93C);
	color: #0A0F1C;
	box-shadow: 0 0 10px rgba(229, 169, 60, 0.4);
}

.branding-nav-icon {
	color: #94A3B8;
	display: inline-flex;
	align-items: center;
	font-size: 1rem;
	flex-shrink: 0;
	transition: color 0.2s ease;
}

.branding-nav-link:hover .branding-nav-icon,
.branding-nav-link.active .branding-nav-icon {
	color: var(--gold-400, #E5A93C);
}

.branding-nav-label {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.branding-nav-footer {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.branding-section-card {
	scroll-margin-top: 5.5rem;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.branding-section-card:target,
.branding-section-card.highlight-target {
	border-color: rgba(212, 175, 55, 0.45) !important;
	box-shadow: 0 0 20px rgba(212, 175, 55, 0.12) !important;
}

/* ==========================================================================
   TABLEAUX DES SALLES & TARIFS (manager/salles)
   Préservation stricte du ratio d'aspect des photos et des pastilles de couleur
   ========================================================================== */

.rooms-table-wrapper,
.pricing-grid-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	box-sizing: border-box !important;
	margin-bottom: 2rem !important;
}

.rooms-table {
	min-width: 1080px !important;
	width: 100% !important;
	table-layout: auto !important;
	border-collapse: collapse !important;
}

.pricing-grid-table {
	min-width: 960px !important;
	width: 100% !important;
	table-layout: auto !important;
	border-collapse: collapse !important;
}

.rooms-table th,
.rooms-table td,
.pricing-grid-table th,
.pricing-grid-table td {
	box-sizing: border-box !important;
	overflow: visible !important;
	word-wrap: normal !important;
}

.rooms-table th,
.pricing-grid-table th {
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	color: var(--gold-400) !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	padding: 0.85rem 1rem !important;
}

.rooms-table td,
.pricing-grid-table td {
	padding: 0.85rem 1rem !important;
	font-size: 0.88rem !important;
	vertical-align: middle !important;
}

.pricing-grid-table th:last-child,
.pricing-grid-table td:last-child {
	text-align: right !important;
	white-space: nowrap !important;
	width: 110px !important;
	min-width: 110px !important;
	padding-right: 1rem !important;
}

.pricing-grid-table .btn-pricing-grid-edit,
.pricing-grid-table td .nav-link-btn {
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: max-content !important;
	width: auto !important;
}

.pricing-grid-table .btn-pricing-grid-edit span,
.pricing-grid-table td .nav-link-btn span {
	white-space: nowrap !important;
	display: inline-block !important;
}

.pricing-grid-table .btn-pricing-grid-edit:hover,
.pricing-grid-table td .nav-link-btn:hover {
	background: rgba(229, 169, 60, 0.2) !important;
	border-color: rgba(229, 169, 60, 0.6) !important;
	color: #FFFFFF !important;
	box-shadow: 0 0 12px rgba(229, 169, 60, 0.3) !important;
}

/* Image de couverture des salles dans le tableau : ratio 1:1 strict, jamais écrasée */
.room-cover-thumb {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	max-width: 40px !important;
	max-height: 40px !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	border-radius: var(--radius-md) !important;
	border: 1px solid var(--border-subtle) !important;
	display: block !important;
}

/* Ronds et pastilles de couleur : ratio 1:1 strict, jamais étirés ni écrasés */
.room-color-indicator,
.table-luxury .room-color-indicator {
	width: 12px !important;
	height: 12px !important;
	min-width: 12px !important;
	min-height: 12px !important;
	max-width: 12px !important;
	max-height: 12px !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 50% !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	display: inline-block !important;
	box-sizing: border-box !important;
}

.pricing-grid-table .room-color-indicator {
	width: 10px !important;
	height: 10px !important;
	min-width: 10px !important;
	min-height: 10px !important;
	max-width: 10px !important;
	max-height: 10px !important;
}

/* ==========================================================================
   MODALE DE RÉSERVATION : ÉTAPE 3 CONFIGURATION (GRILLE 2 COLONNES + PREVIEW)
   ========================================================================== */

.drawer-config-step-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 1rem;
	align-items: stretch;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.drawer-config-list-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	overflow: visible !important;
	padding: 2px !important;
	box-sizing: border-box;
}

.drawer-config-list-col .config-options-grid {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.65rem !important;
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.drawer-config-preview-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	height: 100%;
}

.drawer-config-preview-header {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #CBD5E1;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0.45rem;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.drawer-config-preview-header .ph-icon {
	color: var(--gold-400, #E5A93C);
	font-size: 0.95rem;
	flex-shrink: 0;
}

#configSvgPreview,
.config-svg-preview-box {
	flex: 1;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	background: radial-gradient(circle at center, rgba(226, 217, 204, 0.03) 0%, rgba(13, 19, 32, 0.8) 100%);
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 12px !important;
	padding: 0.75rem !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
	position: relative;
	overflow: hidden !important;
	box-sizing: border-box !important;
	min-height: 140px;
	margin-top: 0 !important;
}

.config-svg-preview-box::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 140px;
	height: 140px;
	background: radial-gradient(circle, rgba(229, 169, 60, 0.07) 0%, transparent 70%);
	filter: blur(14px);
	pointer-events: none;
}

/* Confinement strict anti-débordement pour les visuels de prévisualisation (SVG et Images) */
.config-preview-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.config-preview-img-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	box-sizing: border-box;
}

#configSvgPreview img,
.config-svg-preview-box img,
.config-preview-img {
	display: block !important;
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	max-height: 115px !important;
	object-fit: contain !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(229, 169, 60, 0.35) !important;
	box-sizing: border-box !important;
}

.config-svg-preview-box svg {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 115px !important;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
	box-sizing: border-box !important;
}

.config-preview-caption {
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--gold-400);
	margin-top: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	text-align: center;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow: hidden;
}

.config-preview-caption span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.config-card-option {
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	background: rgba(255, 255, 255, 0.02) !important;
	border-radius: 12px !important;
	padding: 0.6rem 0.75rem !important;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
	cursor: pointer;
	min-width: 0 !important;
	width: 100% !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	transform: none !important;
}

.config-card-option:hover:not(.disabled):not(.is-disabled) {
	background: rgba(255, 255, 255, 0.055) !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
	transform: none !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.config-card-option.selected {
	border-color: rgba(229, 169, 60, 0.48) !important;
	background: rgba(229, 169, 60, 0.08) !important;
	box-shadow: 0 0 10px rgba(229, 169, 60, 0.22) !important;
	transform: none !important;
}

@media (max-width: 768px) {
	.drawer-config-step-layout {
		grid-template-columns: 1fr !important;
		gap: 0.85rem !important;
	}

	.drawer-config-list-col .config-options-grid {
		grid-template-columns: 1fr !important;
	}

	.config-svg-preview-box {
		min-height: 110px !important;
	}
}

/* ==========================================================================
   ACCESSIBILITÉ WCAG AA & LIGHTHOUSE (PORTAIL CLIENT & FOOTER)
   - Contraste suffisant (ratio >= 4.5:1 sur fond sombre)
   - Discernabilité non-colorimétrique des liens (text-decoration: underline)
   - Couleurs douces et feutrées sans altération de l'identité visuelle Quai 36
   ========================================================================== */

.room-card-price-overlay .price-prefix {
	color: #CBD5E1 !important;
	font-weight: 600;
}

.room-card-configs-hint {
	font-size: 0.76rem;
	color: #CBD5E1 !important;
	margin-bottom: 0.85rem;
	line-height: 1.4;
}

.room-card-configs-hint strong {
	color: #F8FAFC !important;
	font-weight: 600;
}

/* Badges d'étage - Pastels doux conformes AGENTS.md avec ratio contrasté > 11:1 */
.room-card .meta-pill[style*="#3B82F6"],
.room-card .meta-pill[style*="#BFDBFE"] {
	color: #BFDBFE !important;
	background: #0C2344 !important;
	border-color: rgba(59, 130, 246, 0.45) !important;
}

.room-card .meta-pill[style*="#10B981"],
.room-card .meta-pill[style*="#A7F3D0"] {
	color: #A7F3D0 !important;
	background: #06281E !important;
	border-color: rgba(16, 185, 129, 0.45) !important;
}

/* Footer : Lisibilité typographique et discernabilité des liens */
.site-footer .footer-brand p,
.site-footer .footer-meta p {
	color: #94A3B8;
}

.site-footer .footer-brand p strong {
	color: #F8FAFC;
}

.site-footer a {
	color: var(--gold-400);
	text-decoration: underline !important;
	text-underline-offset: 2.5px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(229, 169, 60, 0.6);
	transition: color 0.2s, text-decoration-color 0.2s;
}

.site-footer a:hover,
.site-footer a:focus {
	color: #FFFFFF !important;
	text-decoration-color: #FFFFFF !important;
}

/* ==========================================================================
   BOUTONS DE PRÉRÉGLAGES DES BARÈMES OFFICIELS (manager/salles)
   ========================================================================== */

.btn-rate-preset {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.32rem 0.65rem;
	font-size: 0.72rem;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	background: rgba(229, 169, 60, 0.08);
	border: 1px solid rgba(229, 169, 60, 0.28);
	color: var(--gold-300, #F3C562);
	outline: none;
}

.btn-rate-preset:hover {
	background: rgba(229, 169, 60, 0.18);
	border-color: rgba(229, 169, 60, 0.45);
	color: #FFFFFF;
	transform: translateY(-1px);
}

.btn-rate-preset.active {
	background: linear-gradient(135deg, #F39200 0%, #D97706 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	color: #0F172A !important;
	font-weight: 800 !important;
	box-shadow: 0 0 12px rgba(243, 146, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	transform: translateY(-1px);
}

.btn-rate-preset.active::before {
	content: "✓";
	font-weight: 900;
	font-size: 0.72rem;
	color: #0F172A;
}

/* ==========================================================================
   DÉSACTIVATION DES FLÈCHES (SPINNERS) SUR TOUS LES INPUTS NUMBER ET MODALES
   ========================================================================== */
input[type="number"],
.swal2-popup input[type="number"],
.input-no-spin {
	-moz-appearance: textfield !important;
	appearance: textfield !important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
.swal2-popup input[type="number"]::-webkit-inner-spin-button,
.swal2-popup input[type="number"]::-webkit-outer-spin-button,
.input-no-spin::-webkit-inner-spin-button,
.input-no-spin::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
	display: none !important;
}

/* ==========================================================================
   BOUTON NOUS CONTACTER HERO & ANCRE CONTACT
   ========================================================================== */
.btn-hero-contact {
	width: 100%;
	background: rgba(255, 255, 255, 0.04);
	color: #CBD5E1;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	padding: 0.82rem 1.25rem;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
}

.btn-hero-contact:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(229, 169, 60, 0.45);
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.portal-member-invite-pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	background: linear-gradient(135deg, rgba(22, 27, 38, 0.92) 0%, rgba(13, 16, 23, 0.96) 100%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	padding: 1.65rem 2rem;
	margin-top: 2rem;
	box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	scroll-margin-top: 100px;
	transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
	box-sizing: border-box;
}

.portal-member-invite-pill:target,
.portal-member-invite-pill.highlight-contact {
	border-color: rgba(229, 169, 60, 0.38) !important;
	background: linear-gradient(135deg, rgba(30, 35, 48, 0.95) 0%, rgba(16, 20, 28, 0.98) 100%) !important;
	box-shadow: 0 0 30px rgba(229, 169, 60, 0.2), inset 0 1px 0 rgba(229, 169, 60, 0.3) !important;
}

.portal-contact-info-col {
	flex: 1;
	min-width: 0;
}

.portal-contact-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--gold-400, #F39200);
	background: rgba(243, 146, 0, 0.09);
	border: 1px solid rgba(243, 146, 0, 0.26);
	border-radius: 20px;
	padding: 0.3rem 0.75rem;
	margin-bottom: 0.65rem;
}

.portal-contact-title {
	font-size: 1.18rem;
	font-weight: 700;
	color: #F8FAFC;
	margin: 0 0 0.45rem 0;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.portal-contact-desc {
	font-size: 0.88rem;
	color: #94A3B8;
	margin: 0;
	line-height: 1.55;
}

.portal-contact-actions-col {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.portal-contact-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.85rem 1.25rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	text-decoration: none;
	transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
	box-sizing: border-box;
	min-width: 220px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.portal-contact-action-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(229, 169, 60, 0.45);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.portal-contact-btn-icon {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: rgba(229, 169, 60, 0.12);
	border: 1px solid rgba(229, 169, 60, 0.28);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.2s ease, background 0.2s ease;
}

.portal-contact-action-btn:hover .portal-contact-btn-icon {
	transform: scale(1.05);
	background: rgba(229, 169, 60, 0.2);
}

.portal-contact-btn-icon svg,
.portal-contact-btn-icon .ph-icon {
	width: 20px;
	height: 20px;
	font-size: 20px;
	color: var(--gold-400, #F39200);
}

.portal-contact-btn-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.portal-contact-btn-label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #94A3B8;
	margin-bottom: 2px;
}

.portal-contact-btn-val {
	font-size: 0.96rem;
	font-weight: 700;
	color: #F8FAFC;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.portal-contact-action-btn:hover .portal-contact-btn-val {
	color: var(--gold-300, #FDE68A);
}

@media (max-width: 900px) {
	.portal-member-invite-pill {
		flex-direction: column;
		align-items: flex-start;
		padding: 1.4rem 1.25rem;
		gap: 1.35rem;
	}

	.portal-contact-actions-col {
		width: 100%;
		flex-direction: column;
		gap: 0.75rem;
	}

	.portal-contact-action-btn {
		width: 100%;
		min-width: unset;
	}
}

/* ==========================================================================
   PLANNING : RACCOURCIS CLAVIERS & MENU CONTEXTUEL CLIC DROIT (QUAI 36)
   ========================================================================== */

/* Menu contextuel custom au clic droit */
.planning-context-menu {
	position: fixed;
	z-index: 99999;
	min-width: 250px;
	max-width: 320px;
	background: rgba(15, 23, 42, 0.96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 1px rgba(255, 255, 255, 0.2);
	padding: 6px;
	display: none;
	flex-direction: column;
	gap: 2px;
	user-select: none;
	animation: ctxFadeIn 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ctxFadeIn {
	from {
		opacity: 0;
		transform: scale(0.96) translateY(-4px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.planning-ctx-header {
	padding: 6px 10px 8px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	margin-bottom: 4px;
}

.planning-ctx-header-title {
	font-size: 0.75rem;
	font-weight: 700;
	color: #F8FAFC;
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.planning-ctx-header-sub {
	font-size: 0.68rem;
	color: #94A3B8;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.planning-ctx-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 0.80rem;
	font-weight: 500;
	color: #E2E8F0;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
	border: none;
	background: transparent;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}

.planning-ctx-item:hover:not(.is-disabled) {
	background: rgba(255, 255, 255, 0.08);
	color: #FFFFFF;
}

.planning-ctx-item.is-disabled {
	opacity: 0.42;
	cursor: not-allowed;
	pointer-events: none;
}

.planning-ctx-item-left {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.planning-ctx-item-icon {
	font-size: 0.95rem;
	color: var(--gold-400, #F39200);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.planning-ctx-item-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.planning-ctx-separator {
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
	margin: 3px 0;
}

.planning-ctx-kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.68rem;
	font-weight: 600;
	color: #94A3B8;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 4px;
	padding: 2px 5px;
	line-height: 1;
	flex-shrink: 0;
}

/* État réservation coupée (Cut / Déplacement en attente) */
.is-booking-cut {
	opacity: 0.48 !important;
	filter: grayscale(0.35) !important;
	border-style: dashed !important;
	border-width: 1.5px !important;
	box-shadow: 0 0 14px rgba(243, 146, 0, 0.45) !important;
	animation: bookingCutPulse 1.8s ease-in-out infinite !important;
}

@keyframes bookingCutPulse {
	0%, 100% {
		opacity: 0.48;
		transform: scale(1);
	}
	50% {
		opacity: 0.68;
		transform: scale(0.99);
	}
}

/* État réservation activement sélectionnée */
.is-booking-selected {
	outline: 2px solid var(--gold-400, #F39200) !important;
	outline-offset: 1px !important;
	box-shadow: 0 0 18px rgba(243, 146, 0, 0.4) !important;
}

/* Survol de créneau cible pour collage */
.daycols-slot-cell.paste-target-hover,
.timeline-cell.paste-target-hover {
	background: rgba(243, 146, 0, 0.14) !important;
	border-color: rgba(243, 146, 0, 0.5) !important;
}

/* Barre d'information sur les raccourcis planning */
.planning-shortcuts-bar {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 0.74rem;
	color: #94A3B8;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 8px;
	padding: 4px 10px;
}

.planning-shortcuts-bar kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.68rem;
	font-weight: 600;
	color: #CBD5E1;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 4px;
	padding: 1px 4px;
}

/* ==========================================================================
   COMPOSANT CUSTOM COLOR PICKER HAUT DE GAMME (QUAI 36)
   ========================================================================== */

/* Masquage de l'input natif moche tout en préservant son interopérabilité */
.quai36-color-native-hidden {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Conteneur / Trigger externe du Color Picker */
.quai36-color-picker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	vertical-align: middle;
	position: relative;
	user-select: none;
}

.quai36-color-swatch-btn {
	width: 38px;
	height: 34px;
	min-width: 38px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	position: relative;
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	background: transparent;
	transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
	outline: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-image: 
		linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
		linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
		linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%);
	background-size: 8px 8px;
	background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

.quai36-color-swatch-btn:hover {
	transform: scale(1.05);
	border-color: rgba(255, 255, 255, 0.32);
}

.quai36-color-swatch-btn:focus-visible {
	border-color: var(--gold-400, #F39200);
	box-shadow: 0 0 0 2px rgba(243, 146, 0, 0.35);
}

.quai36-color-swatch-fill {
	width: 100%;
	height: 100%;
	border-radius: 7px;
	transition: background-color 120ms ease;
}

/* Popover Flottant du Color Picker Quai 36 */
.quai36-color-popover {
	position: fixed;
	z-index: 100050 !important;
	width: 316px;
	max-width: calc(100vw - 20px);
	box-sizing: border-box;
	background: rgba(15, 23, 42, 0.98);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(212, 175, 55, 0.12);
	padding: 0.85rem;
	color: #F8FAFC;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	font-family: inherit;
	font-size: 0.82rem;
	animation: q36ColorFadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
	user-select: none;
	scrollbar-width: thin;
	scrollbar-color: rgba(229, 169, 60, 0.4) transparent;
}

@keyframes q36ColorFadeIn {
	from {
		opacity: 0;
		transform: scale(0.96) translateY(-4px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* En-tête du Popover : Double vue Avant/Après & Pipette */
.quai36-color-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.quai36-color-compare-box {
	display: inline-flex;
	width: 48px;
	height: 32px;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
}

.quai36-color-compare-prev,
.quai36-color-compare-curr {
	width: 50%;
	height: 100%;
}

.quai36-color-hex-row {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.quai36-color-hex-input {
	width: 100%;
	background: #090D16;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 6px;
	color: #F8FAFC;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.82rem;
	font-weight: 600;
	padding: 0.4rem 0.5rem;
	text-transform: uppercase;
	outline: none;
	transition: border-color 120ms ease;
}

.quai36-color-hex-input:focus {
	border-color: var(--gold-400, #F39200);
}

.quai36-color-btn-icon {
	width: 32px;
	height: 32px;
	min-width: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	color: #CBD5E1;
	cursor: pointer;
	transition: all 120ms ease;
}

.quai36-color-btn-icon:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #F8FAFC;
	border-color: rgba(255, 255, 255, 0.25);
}

/* Zone 2D Saturation / Luminosité */
.quai36-color-sat-pad {
	position: relative;
	width: 100%;
	height: 120px;
	border-radius: 8px;
	overflow: hidden;
	cursor: crosshair;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.quai36-color-sat-white {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #FFF, rgba(255, 255, 255, 0));
}

.quai36-color-sat-black {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.quai36-color-sat-pointer {
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #FFF;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.8), inset 0 0 2px rgba(0, 0, 0, 0.6);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Barre de Teinte (Hue Slider) */
.quai36-color-hue-bar {
	position: relative;
	width: 100%;
	height: 14px;
	border-radius: 7px;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: linear-gradient(to right, 
		#f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

.quai36-color-hue-pointer {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #FFF;
	border: 1px solid rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Grille des Swatches Prédéfinis Quai 36 */
.quai36-color-swatches-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.2rem;
	margin-bottom: 0.35rem;
}

.quai36-color-swatches-count {
	font-size: 0.65rem;
	color: #94A3B8;
	font-weight: 500;
}
.quai36-color-swatches-title {
	font-size: 0.70rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 700;
	color: var(--gold-400, #F39200);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-top: 0.2rem;
}

.quai36-color-swatches-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	width: 100%;
	box-sizing: border-box;
	gap: 6px;
}

.quai36-color-swatch-item {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: transform 120ms ease, box-shadow 120ms ease;
	outline: none;
	position: relative;
}

.quai36-color-swatch-item:hover {
	transform: scale(1.08);
	z-index: 2;
	border-color: rgba(255, 255, 255, 0.4);
}

.quai36-color-swatch-item.is-selected::after {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #FFF;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

/* Actions en pied de popover */
.quai36-color-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.25rem;
	padding-top: 0.55rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.quai36-color-btn-cancel {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #94A3B8;
	padding: 0.4rem 0.75rem;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 120ms ease;
}

.quai36-color-btn-cancel:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #F8FAFC;
}

.quai36-color-btn-confirm {
	background: linear-gradient(135deg, #F39200 0%, #D48200 100%);
	border: 1px solid rgba(243, 146, 0, 0.5);
	color: #0A0D14;
	padding: 0.4rem 1rem;
	border-radius: 6px;
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 120ms ease;
	box-shadow: 0 2px 8px rgba(243, 146, 0, 0.25);
}

.quai36-color-btn-confirm:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(243, 146, 0, 0.38);
}

/* Animation et défilement pour ouverture vers le haut / espace restreint (F12) */
.quai36-color-popover.opens-up {
	animation: q36ColorFadeInUp 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.quai36-color-popover::-webkit-scrollbar {
	width: 5px;
}

.quai36-color-popover::-webkit-scrollbar-track {
	background: transparent;
}

.quai36-color-popover::-webkit-scrollbar-thumb {
	background: rgba(229, 169, 60, 0.35);
	border-radius: 4px;
}

@keyframes q36ColorFadeInUp {
	from {
		opacity: 0;
		transform: scale(0.96) translateY(4px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* ==========================================================================
   CENTRE DE NOTIFICATIONS (#navBellPopover) : RECHERCHE & FILTRES PAR TYPE
   Élégance Artisanale Quai 36 — Sans aucune bordure latérale colorée
   ========================================================================== */

.nav-bell-popover {
	width: 420px;
	max-width: calc(100vw - 1.5rem);
}

.nav-bell-toolbar {
	padding: 0.65rem 0.85rem;
	background: radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.nav-bell-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.nav-bell-search-icon {
	position: absolute;
	left: 0.7rem;
	top: 50%;
	transform: translateY(-50%);
	color: #94A3B8;
	pointer-events: none;
	flex-shrink: 0;
	z-index: 2;
	transition: color 0.15s ease;
}

#navBellSearchInput,
input[type="text"].nav-bell-search-input,
.nav-bell-search-input {
	width: 100% !important;
	height: 34px !important;
	padding: 0.35rem 2rem 0.35rem 2.2rem !important;
	background: rgba(9, 13, 22, 0.78) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 10px !important;
	color: #F8FAFC !important;
	font-family: inherit;
	font-size: 0.76rem !important;
	line-height: 1.2 !important;
	outline: none !important;
	box-sizing: border-box !important;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#navBellSearchInput::placeholder,
input[type="text"].nav-bell-search-input::placeholder,
.nav-bell-search-input::placeholder {
	color: #64748B !important;
	font-size: 0.73rem !important;
}

#navBellSearchInput:focus,
input[type="text"].nav-bell-search-input:focus,
.nav-bell-search-input:focus {
	background: rgba(9, 13, 22, 0.95) !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
	box-shadow: 0 0 12px rgba(243, 146, 0, 0.12) !important;
}

.nav-bell-search-wrap:focus-within .nav-bell-search-icon {
	color: #E2D9CC;
}

#navBellSearchClear,
button.nav-bell-search-clear,
.nav-bell-search-clear {
	position: absolute !important;
	right: 0.45rem !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	max-height: 20px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	background: rgba(255, 255, 255, 0.06) !important;
	color: #CBD5E1 !important;
	font-size: 0.65rem !important;
	line-height: 1 !important;
	display: inline-flex;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	z-index: 2;
	transition: all 0.15s ease;
}

#navBellSearchClear:hover,
button.nav-bell-search-clear:hover,
.nav-bell-search-clear:hover {
	background: rgba(255, 255, 255, 0.14) !important;
	color: #F8FAFC !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
}

.nav-bell-filter-chips {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.35rem;
}

button.nav-bell-filter-chip,
.nav-bell-filter-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	min-height: 26px !important;
	height: 26px !important;
	padding: 0 0.35rem !important;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
	color: #E2D9CC;
	font-family: inherit;
	font-size: 0.69rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	overflow: hidden;
	transition: all 0.16s ease;
}

.nav-bell-filter-chip:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.24);
	color: #F8FAFC;
}

.nav-bell-filter-chip.is-active[data-bell-type="quote"] {
	background: radial-gradient(circle at 20% 20%, rgba(243, 146, 0, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
	border-color: rgba(255, 255, 255, 0.18);
	color: #F8FAFC;
}

.nav-bell-filter-chip.is-active[data-bell-type="creation"] {
	background: radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
	border-color: rgba(255, 255, 255, 0.18);
	color: #F8FAFC;
}

.nav-bell-filter-chip.is-active[data-bell-type="modification"] {
	background: radial-gradient(circle at 20% 20%, rgba(245, 158, 11, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
	border-color: rgba(255, 255, 255, 0.18);
	color: #F8FAFC;
}

.nav-bell-filter-chip.is-active[data-bell-type="deletion"] {
	background: radial-gradient(circle at 20% 20%, rgba(244, 63, 94, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
	border-color: rgba(255, 255, 255, 0.18);
	color: #F8FAFC;
}

.nav-bell-filter-chip.is-muted {
	background: rgba(255, 255, 255, 0.015);
	border-color: rgba(255, 255, 255, 0.07);
	color: #64748B;
	opacity: 0.58;
}

.nav-bell-filter-chip.is-muted .chip-label {
	text-decoration: line-through;
}

.nav-bell-filter-chip.is-muted .chip-dot {
	box-shadow: none;
	opacity: 0.4;
}

.nav-bell-filter-chip .chip-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
	transition: all 0.16s ease;
}

.nav-bell-filter-chip .chip-dot--quote {
	background: #FCD34D;
	box-shadow: 0 0 7px rgba(252, 211, 77, 0.65);
}

.nav-bell-filter-chip .chip-dot--creation {
	background: #6EE7B7;
	box-shadow: 0 0 7px rgba(110, 231, 183, 0.65);
}

.nav-bell-filter-chip .chip-dot--modification {
	background: #FDBA74;
	box-shadow: 0 0 7px rgba(253, 186, 116, 0.65);
}

.nav-bell-filter-chip .chip-dot--deletion {
	background: #FDA4AF;
	box-shadow: 0 0 7px rgba(253, 164, 175, 0.65);
}

.nav-bell-filter-chip .chip-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

.nav-bell-filter-chip .chip-count {
	font-size: 0.64rem;
	font-weight: 700;
	color: #CBD5E1;
	background: rgba(255, 255, 255, 0.07);
	padding: 0 0.3rem;
	border-radius: 999px;
	line-height: 1.45;
	flex-shrink: 0;
}

.nav-bell-filter-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding-top: 0.15rem;
	font-size: 0.69rem;
	color: #94A3B8;
}

button.nav-bell-filter-reset-btn,
.nav-bell-filter-reset-btn {
	background: transparent;
	border: none;
	color: #E2D9CC;
	font-family: inherit;
	font-size: 0.69rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

.nav-bell-filter-reset-btn:hover {
	color: #F8FAFC;
}

.nav-bell-filter-empty {
	padding: 1.5rem 1rem;
	margin: 0.2rem 0;
	text-align: center;
	background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}

.nav-bell-filter-empty-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #94A3B8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.15rem;
}

.nav-bell-filter-empty-title {
	font-size: 0.80rem;
	font-weight: 600;
	color: #F1F5F9;
}

.nav-bell-filter-empty-sub {
	font-size: 0.72rem;
	color: #94A3B8;
	line-height: 1.4;
}

button.nav-bell-filter-empty-btn,
.nav-bell-filter-empty-btn {
	margin-top: 0.35rem;
	padding: 0.32rem 0.75rem !important;
	min-height: 28px !important;
	height: auto !important;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.05);
	color: #F8FAFC;
	font-family: inherit;
	font-size: 0.73rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}

.nav-bell-filter-empty-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 480px) {
	.nav-bell-filter-chips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   TIROIR DE RÉSERVATION ADMIN (#bookingDrawer) : ENVOI D'EMAIL AU CLIENT
   Élégance Artisanale Quai 36 — Sans aucune bordure latérale colorée
   ========================================================================== */

.drawer-notify-client-card {
	margin-top: 0.65rem;
	margin-bottom: 0.25rem;
	padding: 0.7rem 0.85rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
	transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.drawer-notify-client-card:hover {
	border-color: rgba(255, 255, 255, 0.22);
	background: radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.drawer-notify-client-card.is-checked {
	border-color: rgba(255, 255, 255, 0.22);
	background: radial-gradient(circle at 15% 20%, rgba(243, 146, 0, 0.10) 0%, rgba(255, 255, 255, 0.025) 100%);
	box-shadow: 0 0 16px rgba(243, 146, 0, 0.08);
}

.drawer-notify-client-label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	cursor: pointer;
	user-select: none;
	margin: 0;
}

input[type="checkbox"].drawer-notify-client-checkbox,
.drawer-notify-client-checkbox {
	width: 17px !important;
	height: 17px !important;
	min-width: 17px !important;
	min-height: 17px !important;
	max-height: 17px !important;
	margin-top: 0.12rem !important;
	accent-color: #E5A93C;
	cursor: pointer;
	flex-shrink: 0;
}

.drawer-notify-client-content {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.drawer-notify-client-title {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.79rem;
	font-weight: 600;
	color: #F8FAFC;
	line-height: 1.3;
}

.drawer-notify-client-hint {
	font-size: 0.71rem;
	color: #94A3B8;
	line-height: 1.38;
}

.drawer-notify-client-card.is-checked .drawer-notify-client-hint {
	color: #E2D9CC;
}