/**
 * Prise de rendez-vous MyCEWeb — d'après la maquette contact-shine, onglet
 * « Réserver un appel » : colonne d'information à gauche, calendrier mensuel et
 * créneaux libres à droite.
 *
 * Structure et formes reprises de la maquette ; couleurs alignées sur celles du
 * site (palette Blocksy), comme le formulaire de contact : le vert sapin devient
 * bleu nuit, le jaune devient ambre, le crème devient blanc, et la colonne
 * d'information prend le bleu CEWeb de la colonne latérale du site.
 *
 * S'appuie sur myceweb-contact.css (carte, champs, bouton, erreurs) : le bloc
 * porte les classes .mcwc et .mcwb. Les contrôles Style du widget écrivent des
 * variables --ceweb-booking-*, relayées vers les --ceweb-contact-* que lit la
 * feuille du contact.
 */

/* Valeurs par défaut. Spécificité minimale, pour que les contrôles Elementor
   ({{WRAPPER}} .mcwb) l'emportent. */
.mcwb {
	--ceweb-booking-primary: var(--theme-palette-color-6, #0c1a3c);     /* bleu nuit : texte, jour et créneau choisis, bouton */
	--ceweb-booking-accent: var(--theme-palette-color-5, #ffb020);      /* ambre : jours ouverts, coches, italiques */
	--ceweb-booking-brand: var(--theme-palette-color-1, #1a6fff);       /* bleu CEWeb : colonne d'information, focus */
	--ceweb-booking-muted: var(--theme-palette-color-7, #475569);
	--ceweb-booking-surface: var(--theme-palette-color-11, #ffffff);
	--ceweb-booking-bg-warm: var(--theme-palette-color-10, #f4f8ff);
	--ceweb-booking-line: var(--theme-palette-color-9, #e2e8f0);
	--ceweb-booking-line-strong: var(--theme-palette-color-8, #94a3b8);
	--ceweb-booking-danger: #b03a2b;
	--ceweb-booking-input-bg: var(--theme-palette-color-11, #ffffff);
	--ceweb-booking-input-radius: 14px;
	--ceweb-booking-card-radius: 32px;
	--ceweb-booking-button-bg: var(--ceweb-booking-primary);
	--ceweb-booking-button-bg-hover: var(--ceweb-contact-brand-deep);
	--ceweb-booking-button-color: var(--theme-palette-color-11, #ffffff);
	--ceweb-booking-button-radius: 100px;

	/* Colonne d'information. */
	--ceweb-booking-info-bg: var(--ceweb-booking-brand);
	--ceweb-booking-info-color: var(--theme-palette-color-11, #ffffff);
	--ceweb-booking-info-accent: var(--ceweb-booking-accent);
	--ceweb-booking-feature-check-bg: var(--ceweb-booking-accent);
	--ceweb-booking-feature-check-color: var(--ceweb-booking-primary);

	/* Calendrier et créneaux. */
	--ceweb-booking-day-bg: var(--ceweb-booking-accent);
	--ceweb-booking-day-color: var(--ceweb-booking-primary);
	--ceweb-booking-day-selected-bg: var(--ceweb-booking-primary);
	--ceweb-booking-day-selected-color: var(--ceweb-booking-surface);
	--ceweb-booking-slot-bg: transparent;
	--ceweb-booking-slot-color: var(--ceweb-booking-primary);
	--ceweb-booking-slot-selected-bg: var(--ceweb-booking-primary);
	--ceweb-booking-slot-selected-color: var(--ceweb-booking-surface);
	--ceweb-booking-slot-radius: 12px;
}

/* Relais vers la feuille du contact. .mcwc.mcwb l'emporte sur .mcwc. */
.mcwc.mcwb {
	--ceweb-contact-primary: var(--ceweb-booking-primary);
	--ceweb-contact-accent: var(--ceweb-booking-accent);
	--ceweb-contact-brand: var(--ceweb-booking-brand);
	--ceweb-contact-muted: var(--ceweb-booking-muted);
	--ceweb-contact-surface: var(--ceweb-booking-surface);
	--ceweb-contact-bg: var(--ceweb-booking-surface);
	--ceweb-contact-bg-warm: var(--ceweb-booking-bg-warm);
	--ceweb-contact-line: var(--ceweb-booking-line);
	--ceweb-contact-line-strong: var(--ceweb-booking-line-strong);
	--ceweb-contact-danger: var(--ceweb-booking-danger);
	--ceweb-contact-input-bg: var(--ceweb-booking-input-bg);
	--ceweb-contact-input-radius: var(--ceweb-booking-input-radius);
	--ceweb-contact-card-radius: var(--ceweb-booking-card-radius);
	--ceweb-contact-button-bg: var(--ceweb-booking-button-bg);
	--ceweb-contact-button-bg-hover: var(--ceweb-booking-button-bg-hover);
	--ceweb-contact-button-color: var(--ceweb-booking-button-color);
	--ceweb-contact-button-radius: var(--ceweb-booking-button-radius);

	--ceweb-booking-info-muted: rgba(255, 255, 255, 0.8);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.mcwc.mcwb {
		--ceweb-booking-info-muted: color-mix(in srgb, var(--ceweb-booking-info-color) 82%, transparent);
	}
}

/* ---------- Mise en page ---------- */

.mcwb-inner {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
}

.mcwb--no-info .mcwb-inner {
	grid-template-columns: 1fr;
}

.mcwc .mcwb-main {
	min-width: 0;
	padding: 48px;
}

/* ---------- Colonne d'information ---------- */

.mcwb-info {
	padding: 56px 48px;
	background: var(--ceweb-booking-info-bg);
	color: var(--ceweb-booking-info-color);
}

.mcwb-info-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ceweb-booking-info-accent);
}

.mcwb-info-label::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ceweb-booking-info-accent);
}

.mcwb-info-title {
	margin: 0 0 24px;
	font-family: var(--ceweb-contact-serif);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--ceweb-booking-info-color);
}

.mcwb-info-title em {
	font-style: italic;
	color: var(--ceweb-booking-info-accent);
}

.mcwb-info-text {
	margin: 0 0 32px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ceweb-booking-info-muted);
}

.mcwb-features {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcwb-feature {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-size: 14px;
	color: var(--ceweb-booking-info-color);
}

.mcwb-feature-check {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ceweb-booking-feature-check-bg);
	color: var(--ceweb-booking-feature-check-color);
}

.mcwb-feature-check svg {
	width: 12px;
	height: 12px;
}

/* ---------- Calendrier ---------- */

.mcwb-cal-month + .mcwb-cal-month {
	margin-top: 32px;
}

.mcwb-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ceweb-contact-line);
}

.mcwb-cal-title {
	margin: 0;
	font-family: var(--ceweb-contact-serif);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ceweb-contact-primary);
}

.mcwb-cal-title em {
	font-style: italic;
	font-weight: 400;
	color: var(--ceweb-contact-muted);
}

.mcwb-cal-nav {
	display: flex;
	gap: 8px;
}

.mcwb-cal-nav[hidden] {
	display: none;
}

.mcwc button.mcwb-cal-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ceweb-contact-line-strong);
	border-radius: 50%;
	background: transparent;
	color: var(--ceweb-contact-primary);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.mcwc button.mcwb-cal-arrow:hover:not([disabled]) {
	background: var(--ceweb-contact-primary);
	border-color: var(--ceweb-contact-primary);
	color: var(--ceweb-contact-surface);
}

.mcwc button.mcwb-cal-arrow[disabled] {
	opacity: 0.3;
	cursor: not-allowed;
}

.mcwc button.mcwb-cal-arrow:focus-visible {
	outline: 2px solid var(--ceweb-contact-brand);
	outline-offset: 2px;
}

.mcwb-cal-arrow svg {
	width: 14px;
	height: 14px;
}

.mcwb-cal-weekdays,
.mcwb-cal-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.mcwb-cal-weekdays {
	margin-bottom: 8px;
}

.mcwb-cal-weekdays span {
	padding: 8px 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	color: var(--ceweb-contact-muted);
}

.mcwb-cal-day {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 48px;
	margin: 0 auto;
	aspect-ratio: 1;
	border-radius: 50%;
	font-size: 14px;
	color: var(--ceweb-contact-primary);
	opacity: 0.3;
}

.mcwb-cal-day.is-empty {
	opacity: 0;
}

.mcwc a.mcwb-cal-day.has-slots {
	background: var(--ceweb-booking-day-bg);
	color: var(--ceweb-booking-day-color);
	font-weight: 600;
	text-decoration: none;
	opacity: 1;
	transition: transform 0.2s, background-color 0.2s, color 0.2s;
}

.mcwc a.mcwb-cal-day.has-slots:hover {
	transform: scale(1.08);
}

.mcwc a.mcwb-cal-day.is-selected {
	background: var(--ceweb-booking-day-selected-bg);
	color: var(--ceweb-booking-day-selected-color);
}

.mcwc a.mcwb-cal-day:focus-visible {
	outline: 2px solid var(--ceweb-contact-brand);
	outline-offset: 2px;
}

/* Renvoi vers le mois suivant, affiché par le script seulement. */
.mcwc button.mcwb-cal-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 18px 0 0;
	padding: 10px 16px;
	border: 1px solid var(--ceweb-contact-line-strong);
	border-radius: 100px;
	background: transparent;
	color: var(--ceweb-contact-primary);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.mcwc button.mcwb-cal-more[hidden] {
	display: none;
}

.mcwc button.mcwb-cal-more:hover {
	background: var(--ceweb-contact-primary);
	border-color: var(--ceweb-contact-primary);
	color: var(--ceweb-contact-surface);
}

.mcwc button.mcwb-cal-more:focus-visible {
	outline: 2px solid var(--ceweb-contact-brand);
	outline-offset: 2px;
}

/* ---------- Créneaux ---------- */

.mcwb-timeslots {
	position: relative;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--ceweb-contact-line);
}

.mcwb-tz {
	position: absolute;
	top: 24px;
	right: 0;
	margin: 0;
	font-size: 11px;
	line-height: 26px;
	color: var(--ceweb-contact-muted);
}

.mcwb-day {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mcwb-day + .mcwb-day {
	margin-top: 28px;
}

.mcwb-day-label {
	margin: 0 0 16px;
	padding: 0 150px 0 0;
	font-family: var(--ceweb-contact-serif);
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	letter-spacing: -0.01em;
	color: var(--ceweb-contact-primary);
}

.mcwb-day-label em {
	font-style: italic;
	font-weight: 400;
	color: var(--ceweb-contact-muted);
}

.mcwb-times {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.mcwb-time {
	position: relative;
	display: block;
	cursor: pointer;
}

.mcwb-time-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.mcwb-time-label {
	display: block;
	padding: 12px;
	border: 1px solid var(--ceweb-contact-line-strong);
	border-radius: var(--ceweb-booking-slot-radius);
	background: var(--ceweb-booking-slot-bg);
	color: var(--ceweb-booking-slot-color);
	font-size: 14px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	text-align: center;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.mcwb-time:hover .mcwb-time-label {
	background: var(--ceweb-contact-bg-warm);
}

.mcwb-time-input:checked + .mcwb-time-label {
	background: var(--ceweb-booking-slot-selected-bg);
	border-color: var(--ceweb-booking-slot-selected-bg);
	color: var(--ceweb-booking-slot-selected-color);
}

.mcwb-time-input:focus-visible + .mcwb-time-label {
	outline: 2px solid var(--ceweb-contact-brand);
	outline-offset: 2px;
}

.mcwc .mcwb-slots.mcwc-field--error .mcwb-time-label {
	border-color: var(--ceweb-contact-danger);
}

.mcwb-empty {
	margin: 0;
	font-size: 14px;
	color: var(--ceweb-contact-muted);
}

/* ---------- Coordonnées et confirmation ---------- */

.mcwb-section {
	margin: 32px 0 20px;
	padding-top: 24px;
	border-top: 1px solid var(--ceweb-contact-line);
	font-family: var(--ceweb-contact-serif);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ceweb-contact-primary);
}

/* Bouton pleine largeur, comme « Confirmer · Vendredi 15 mai à 10h30 ». */
.mcwb .mcwc-submit {
	flex-direction: column-reverse;
	align-items: stretch;
	gap: 14px;
}

.mcwb button.mcwc-btn {
	justify-content: center;
	width: 100%;
}

.mcwb .mcwc-note {
	text-align: center;
}

/* ---------- Portail injoignable, aucun créneau ---------- */

.mcwb-notice {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: 22px 24px;
	border: 1px solid var(--ceweb-contact-line);
	border-radius: var(--ceweb-contact-input-radius);
	background: var(--ceweb-contact-bg-warm);
}

.mcwb-notice-text {
	max-width: 52ch;
	margin: 0;
	font-size: 15px;
	color: var(--ceweb-contact-primary);
}

.mcwb-notice-link {
	margin: 0;
}

.mcwc a.mcwc-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 26px;
	border-radius: var(--ceweb-contact-button-radius);
	background: var(--ceweb-contact-button-bg);
	color: var(--ceweb-contact-button-color);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.25s, transform 0.25s;
}

.mcwc a.mcwc-btn:hover {
	background: var(--ceweb-contact-button-bg-hover);
	color: var(--ceweb-contact-button-color);
	transform: translateY(-1px);
}

.mcwc a.mcwc-btn:focus-visible {
	outline: 2px solid var(--ceweb-contact-accent);
	outline-offset: 3px;
}

/* ---------- Confirmation ---------- */

.mcwb-success-slot {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 16px 20px;
	border-left: 3px solid var(--ceweb-contact-accent);
	border-radius: 0 var(--ceweb-contact-input-radius) var(--ceweb-contact-input-radius) 0;
	background: var(--ceweb-contact-bg-warm);
}

.mcwb-success-prefix {
	font-size: 12px;
	font-weight: 500;
	color: var(--ceweb-contact-muted);
}

.mcwb-success-when {
	font-family: var(--ceweb-contact-serif);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ceweb-contact-primary);
}

.mcwb-success-mode {
	font-size: 13px;
	color: var(--ceweb-contact-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
	.mcwb-inner {
		grid-template-columns: 1fr;
	}

	.mcwb-info {
		padding: 40px 32px;
	}

	.mcwc .mcwb-main {
		padding: 40px 32px;
	}
}

@media (max-width: 640px) {
	.mcwb-info {
		padding: 32px 20px;
	}

	.mcwb-info-title {
		font-size: 32px;
	}

	.mcwc .mcwb-main {
		padding: 28px 20px;
	}

	.mcwb-tz {
		position: static;
		margin-bottom: 12px;
		line-height: 1.4;
	}

	.mcwb-day-label {
		padding-right: 0;
	}

	.mcwb-times {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcwc a.mcwb-cal-day.has-slots:hover {
		transform: none;
	}
}