/**
 * BookingLeads — styles front.
 *
 * Jetons repris tels quels du socle Client Vault (`cv-isolation.css`) : même
 * bleu marine pivot, même échelle d'espacement à 4 px, mêmes rayons, mêmes
 * ombres. Ils sont déclarés sur `.bkl` et non sur `:root` — l’écran d’accès vit dans la
 * page d'un thème tiers, il n'a aucune raison d'en polluer les variables.
 *
 * Trois modes d'affichage partagent les mêmes composants d'étape : ce qui
 * change est le contenant, jamais la mécanique.
 *
 *   .bkl--locked      calendrier visible et scellé, déverrouillé sur place
 *   .bkl--fullscreen  colonne centrée, une étape à la fois
 *   .bkl--split       argumentaire à gauche, parcours à droite
 */

.bkl {
	/* ─── COULEURS PRIMAIRES ─── */
	--bkl-primary: #1e3a5f;
	--bkl-primary-light: #2a5298;
	--bkl-primary-dark: #132742;
	--bkl-primary-subtle: #eef3f9;
	--bkl-primary-rgb: 30, 58, 95;

	/* ─── ACCENT ─── */
	--bkl-accent: #e8913a;
	--bkl-accent-light: #f5a623;
	--bkl-accent-strong: #c97520;

	/* ─── SÉMANTIQUE ─── */
	--bkl-success: #27ae60;
	--bkl-success-bg: #d4edda;
	--bkl-danger: #e74c3c;
	--bkl-danger-bg: #f8d7da;
	--bkl-warning: #92400e;
	--bkl-warning-bg: #fef3c7;
	--bkl-info: #1e40af;
	--bkl-info-bg: #dbeafe;

	/* ─── NEUTRES ─── */
	--bkl-bg: #f0f2f5;
	--bkl-bg-alt: #f8fafc;
	--bkl-bg-hover: #f8f9fb;
	--bkl-bg-subtle: #fafbfc;
	--bkl-card: #ffffff;
	--bkl-surface-2: #f7f8fa;

	/* ─── BORDURES ─── */
	--bkl-border: #e1e5eb;
	--bkl-border-light: #d0d5dd;
	--bkl-border-strong: #9ca3af;
	--bkl-border-focus: #e8ecf0;

	/* ─── TEXTE ─── */
	--bkl-text: #2c3e50;
	--bkl-text-dark: #1a2332;
	--bkl-text-muted: #5a6c7d;
	--bkl-text-hint: #7b8794;
	--bkl-text-placeholder: #9aa5b1;

	/* ─── TYPOGRAPHIE ─── */
	--bkl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bkl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--bkl-fs-xs: 11px;
	--bkl-fs-sm: 12px;
	--bkl-fs-base: 14px;
	--bkl-fs-md: 15px;
	--bkl-fs-lg: 16px;
	--bkl-fs-xl: 18px;
	--bkl-fs-2xl: 22px;
	--bkl-fs-3xl: 28px;
	--bkl-fs-4xl: 36px;

	/* ─── ESPACEMENTS (échelle 4 px) ─── */
	--bkl-space-2: 4px;
	--bkl-space-3: 6px;
	--bkl-space-4: 8px;
	--bkl-space-5: 12px;
	--bkl-space-6: 16px;
	--bkl-space-7: 20px;
	--bkl-space-8: 24px;
	--bkl-space-9: 32px;
	--bkl-space-10: 40px;
	--bkl-space-11: 48px;

	/* ─── RAYONS ─── */
	--bkl-radius-xs: 3px;
	--bkl-radius-sm: 7px;
	--bkl-radius: 10px;
	--bkl-radius-lg: 14px;
	--bkl-radius-xl: 20px;
	--bkl-radius-pill: 999px;

	/* ─── OMBRES ─── */
	--bkl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
	--bkl-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
	--bkl-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	--bkl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
	--bkl-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.10);
	--bkl-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.14);
	--bkl-shadow-focus: 0 0 0 3px rgba(30, 58, 95, 0.15);

	/* ─── TRANSITIONS ─── */
	--bkl-t-fast: 120ms ease;
	--bkl-t-base: 200ms ease;
	--bkl-t-slow: 320ms ease;

	/* ─── DÉGRADÉ SIGNATURE ─── */
	--bkl-gradient: linear-gradient(135deg, var(--bkl-primary) 0%, var(--bkl-primary-light) 100%);

	font-family: var(--bkl-font-sans);
	font-size: var(--bkl-fs-base);
	line-height: 1.5;
	color: var(--bkl-text);

	/* ⚠️ LE NAVIGATEUR GROSSISSAIT NOS PETITS TEXTES, TOUT SEUL.
	   ────────────────────────────────────────────────────────────────────
	   Sur un téléphone, les navigateurs « aident » les pages anciennes en
	   remontant les petits caractères. L'étiquette flottante, réglée à
	   10,5 px, s'affichait à 14. Elle débordait de son champ, se coupait, et
	   l'écran avait l'air mal fini — alors que la feuille de style disait la
	   bonne taille.
	   Mesuré : un texte forcé à 8 px dans l'écran d'accès sortait à 14 px,
	   pendant qu'un témoin posé hors de l'écran sortait bien à 9. Ce n'était
	   donc ni un réglage du visiteur, ni notre CSS.
	   Notre écran est déjà pensé pour les petits écrans : il n'a pas besoin
	   qu'on l'agrandisse à sa place. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.bkl *,
.bkl *::before,
.bkl *::after {
	box-sizing: border-box;
}

/* ═════════════════════════════════════════════════════════ Boutons */

.bkl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border: 1.5px solid transparent;
	border-radius: var(--bkl-radius);
	background: var(--bkl-primary);
	color: #fff;
	font-family: inherit;
	font-size: var(--bkl-fs-base);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--bkl-t-fast), box-shadow var(--bkl-t-fast), transform var(--bkl-t-fast);
}

.bkl-btn:hover {
	background: var(--bkl-primary-light);
	box-shadow: 0 4px 14px rgba(var(--bkl-primary-rgb), 0.24);
	transform: translateY(-1px);
}

.bkl-btn:active {
	transform: translateY(0);
}

.bkl-btn:focus-visible {
	outline: none;
	box-shadow: var(--bkl-shadow-focus);
}

.bkl-btn--ghost {
	background: #fff;
	border-color: #d6dde6;
	color: #475569;
}

.bkl-btn--ghost:hover {
	background: var(--bkl-bg-alt);
	border-color: var(--bkl-primary-light);
	color: var(--bkl-primary);
	box-shadow: none;
}

.bkl-btn--sm {
	padding: 7px 14px;
	font-size: var(--bkl-fs-sm);
	border-radius: var(--bkl-radius-sm);
}

.bkl-btn--block {
	width: 100%;
}

.bkl-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ══════════════════════════════════════════════════════════ Champs */

.bkl-field {
	margin-bottom: var(--bkl-space-6);
}

.bkl-field > label,
.bkl-label {
	display: block;
	margin-bottom: var(--bkl-space-3);
	font-size: 13px;
	font-weight: 600;
	color: var(--bkl-text);
}

.bkl-hint {
	display: block;
	margin-top: var(--bkl-space-3);
	font-size: var(--bkl-fs-sm);
	line-height: 1.55;
	color: var(--bkl-text-hint);
}

.bkl-input,
.bkl-select,
.bkl-textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	color: #1e293b;
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.45;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
	transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.bkl-input::placeholder,
.bkl-textarea::placeholder {
	color: var(--bkl-text-placeholder);
}

.bkl-input:hover,
.bkl-select:hover,
.bkl-textarea:hover {
	border-color: #cbd5e1;
	background: var(--bkl-bg-subtle);
}

.bkl-input:focus,
.bkl-select:focus,
.bkl-textarea:focus {
	outline: none;
	border-color: var(--bkl-primary);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(var(--bkl-primary-rgb), 0.14);
}

/* Chevron dessiné dans le fond, comme `.cv-form-row select`. */
.bkl-select {
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
}

.bkl-input--lg {
	padding: 12px 15px;
	font-size: var(--bkl-fs-md);
	border-radius: var(--bkl-radius);
}

/* 1.42.0 — chaque champ porte sa mini-icône : on comprend d'un coup d'œil
   ce qu'on demande, et le formulaire gagne en modernité. */
.bkl-field--icon {
	position: relative;
}

.bkl-field--icon .bkl-field__ico {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--bkl-text-placeholder);
	pointer-events: none;
	transition: color 180ms ease;
}

.bkl-field--icon .bkl-field__ico svg {
	width: 100%;
	height: 100%;
}

.bkl-field--icon .bkl-input {
	padding-left: 41px;
}

.bkl-field--icon:focus-within .bkl-field__ico {
	color: var(--bkl-primary);
}

.bkl-input--xs {
	width: 78px;
	padding: 8px 10px;
	text-align: center;
}

/* ═══════════════════════════════════════════════ Pastilles et tags */

.bkl-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: var(--bkl-radius-pill);
	background: var(--bkl-primary-subtle);
	color: var(--bkl-primary);
	font-size: var(--bkl-fs-xs);
	font-weight: 600;
	line-height: 1.7;
	white-space: nowrap;
}

.bkl-tag--green { background: #d4edda; color: #155724; }
.bkl-tag--blue { background: #e8f0fe; color: #1e40af; }
.bkl-tag--orange { background: #fff3cd; color: #856404; }
.bkl-tag--red { background: #f8d7da; color: #721c24; }
.bkl-tag--purple { background: #f3e8ff; color: #6b21a8; }
.bkl-tag--accent { background: var(--bkl-accent); color: #fff; }


.bkl {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--bkl-border);
	border-radius: var(--bkl-radius-lg);
	background: var(--bkl-card);
	box-shadow: var(--bkl-shadow-md);
}

/* ══════════════════════════════════════════════ Barre de progression */

.bkl__progress {
	position: relative;
	height: 3px;
	background: #eef1f5;
}

.bkl__progress-fill {
	height: 100%;
	width: 0;
	background: var(--bkl-gradient);
	border-radius: 0 3px 3px 0;
	transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bkl__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 22px 0;
	font-size: var(--bkl-fs-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bkl-text-hint);
}

.bkl__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 6px;
	border: 0;
	border-radius: var(--bkl-radius-pill);
	background: none;
	color: var(--bkl-text-hint);
	font-family: inherit;
	font-size: var(--bkl-fs-sm);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background var(--bkl-t-fast), color var(--bkl-t-fast);
}

.bkl__back:hover {
	background: var(--bkl-bg-alt);
	color: var(--bkl-primary);
}

/* ── UN BOUTON CACHÉ NE DOIT PAS GARDER SA PLACE ──────────────────────────

   Le bouton « Retour » était masqué par `visibility: hidden` : invisible, et
   pourtant encombrant. Il tenait vingt-trois pixels, et sa bande trente-sept,
   sur TOUS les écrans où il ne sert pas — c'est-à-dire la première étape, celle
   que tout le monde voit.

   La réserve avait un but : éviter que le contenu ne saute quand le bouton
   apparaît à l'étape suivante. Mais l'étape suivante redessine l'écran entier :
   il n'y avait pas de saut à éviter. Il ne restait que le blanc, au-dessus du
   pli, sur un téléphone.

   L'attribut `hidden` reprend donc son sens ordinaire. */

.bkl__back[hidden] {
	display: none;
}

.bkl__back svg {
	width: 14px;
	height: 14px;
}

/* ═══════════════════════════════════════════════════════ Les écrans */

.bkl__screen {
	display: none;
	animation: bkl-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bkl__screen.is-active {
	display: block;
}

.bkl__screen.is-leaving {
	animation: bkl-out 180ms ease forwards;
}

@keyframes bkl-in {
	from { opacity: 0; transform: translateX(22px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes bkl-out {
	from { opacity: 1; transform: translateX(0); }
	to { opacity: 0; transform: translateX(-18px); }
}

@media (prefers-reduced-motion: reduce) {
	.bkl__screen,
	.bkl__screen.is-leaving {
		animation: none;
	}
	.bkl__progress-fill {
		transition: none;
	}
}

/* ══════════════════════════════════════════════════════ Titres d'étape */

.bkl__eyebrow {
	margin: 0 0 8px;
	font-size: var(--bkl-fs-sm);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bkl-accent-strong);
}

.bkl__title {
	margin: 0 0 10px;
	font-size: var(--bkl-fs-3xl);
	font-weight: 700;
	--bkl-lh-base: 1.16;
	line-height: max(0.82, calc(var(--bkl-lh-base) * var(--bkl-lh, 1)));
	letter-spacing: -0.015em;
	color: var(--bkl-text-dark);
}

.bkl__lede {
	margin: 0 0 26px;
	max-width: 46ch;
	font-size: var(--bkl-fs-md);
	--bkl-lh-base: 1.5;
	line-height: max(0.82, calc(var(--bkl-lh-base) * var(--bkl-lh, 1)));
	color: var(--bkl-text-muted);
}

/* ════════════════════════════════════════════ Cartes de réponse
 *
 * Une réponse est une cible cliquable pleine largeur, pas un bouton radio de
 * 13 pixels. C'est la différence de taux de complétion entre un formulaire
 * administratif et un parcours qu'on finit sans y penser.
 */

.bkl-choices {
	display: grid;
	gap: 10px;
}

.bkl-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 1.5px solid var(--bkl-border-focus);
	border-radius: var(--bkl-radius);
	background: #fff;
	cursor: pointer;
	transition: border-color var(--bkl-t-fast), background var(--bkl-t-fast), box-shadow var(--bkl-t-fast), transform var(--bkl-t-fast);
}

.bkl-choice:hover {
	border-color: var(--bkl-primary-light);
	background: var(--bkl-bg-alt);
	box-shadow: 0 4px 14px rgba(var(--bkl-primary-rgb), 0.1);
	transform: translateY(-1px);
}

.bkl-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bkl-choice__key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border: 1.5px solid var(--bkl-border-light);
	border-radius: var(--bkl-radius-xs);
	background: #fff;
	color: var(--bkl-text-hint);
	font-size: var(--bkl-fs-sm);
	font-weight: 700;
	transition: all var(--bkl-t-fast);
}

.bkl-choice__label {
	flex: 1 1 auto;
	font-size: var(--bkl-fs-md);
	font-weight: 500;
	line-height: 1.4;
	color: var(--bkl-text);
}

.bkl-choice__tick {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	opacity: 0;
	color: var(--bkl-primary);
	transition: opacity var(--bkl-t-fast);
}

.bkl-choice input:checked ~ .bkl-choice__tick {
	opacity: 1;
}

.bkl-choice:has(input:checked) {
	border-color: var(--bkl-primary);
	background: var(--bkl-primary-subtle);
	box-shadow: 0 0 0 3px rgba(var(--bkl-primary-rgb), 0.09);
}

.bkl-choice:has(input:checked) .bkl-choice__key {
	border-color: var(--bkl-primary);
	background: var(--bkl-primary);
	color: #fff;
}

.bkl-choice input:focus-visible ~ .bkl-choice__key {
	box-shadow: var(--bkl-shadow-focus);
}

/* ══════════════════════════════════════ Accusé de capture du lead
 *
 * Le moment le plus important du parcours n'est pas la réservation, c'est
 * celui-ci : le prospect vient de laisser son adresse et elle est déjà en
 * base. On le dit, parce que c'est aussi rassurant pour lui.
 */

.bkl-saved {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 11px 15px;
	border: 1px solid #bbf7d0;
	border-radius: var(--bkl-radius);
	background: #f0fdf4;
	font-size: 13.5px;
	line-height: 1.5;
	color: #166534;
	animation: bkl-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bkl-saved__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
}

.bkl-saved__mark svg {
	width: 13px;
	height: 13px;
}

.bkl-saved strong {
	font-weight: 600;
}

@keyframes bkl-pop {
	from { opacity: 0; transform: translateY(-6px) scale(0.97); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════════════════════════════════════════════ Pied d'étape */

.bkl__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
}

.bkl__consent {
	margin: 16px 0 0;
	font-size: var(--bkl-fs-sm);
	line-height: 1.6;
	color: var(--bkl-text-hint);
}

.bkl__consent a {
	color: var(--bkl-text-muted);
}

.bkl__error {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--bkl-danger);
}

.bkl__error:empty {
	display: none;
}

/* ══════════════════════════════════════════════════════ Calendrier */

.bkl-recap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	padding: 12px 16px;
	border: 1px solid var(--bkl-border-focus);
	border-radius: var(--bkl-radius);
	background: var(--bkl-bg-alt);
	font-size: 13.5px;
	color: var(--bkl-text-muted);
}

.bkl-recap__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--bkl-gradient);
	color: #fff;
	font-size: var(--bkl-fs-sm);
	font-weight: 700;
}

.bkl-recap strong {
	color: var(--bkl-text);
	font-weight: 600;
}

.bkl-cal {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 24px;
	align-items: start;
}

@media (max-width: 720px) {
	.bkl-cal {
		grid-template-columns: 1fr;
	}
}

.bkl-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.bkl-cal__month {
	font-size: var(--bkl-fs-lg);
	font-weight: 600;
	color: var(--bkl-text);
}

.bkl-cal__nav {
	display: flex;
	gap: 6px;
}

.bkl-cal__nav button {
	width: 30px;
	height: 30px;
	border: 1px solid var(--bkl-border);
	border-radius: 7px;
	background: #fff;
	color: var(--bkl-text-muted);
	font-family: inherit;
	cursor: pointer;
	transition: all var(--bkl-t-fast);
}

.bkl-cal__nav button:hover {
	border-color: var(--bkl-primary-light);
	color: var(--bkl-primary);
}

.bkl-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
	text-align: center;
}

.bkl-cal__dow {
	padding-bottom: 6px;
	font-size: var(--bkl-fs-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--bkl-text-placeholder);
}

.bkl-cal__day {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--bkl-text-placeholder);
}

.bkl-cal__day.is-open {
	background: var(--bkl-bg-alt);
	color: var(--bkl-text);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--bkl-t-fast);
}

.bkl-cal__day.is-open:hover {
	background: var(--bkl-primary-subtle);
	color: var(--bkl-primary);
}

.bkl-cal__day.is-selected {
	background: var(--bkl-primary);
	color: #fff;
}

.bkl-slots__title {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bkl-text-muted);
}

.bkl-slots__list {
	display: grid;
	gap: 8px;
	max-height: 268px;
	overflow-y: auto;
}

.bkl-slot {
	padding: 11px 14px;
	border: 1.5px solid var(--bkl-border-focus);
	border-radius: 8px;
	background: #fff;
	color: var(--bkl-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--bkl-t-fast);
}

.bkl-slot:hover {
	border-color: var(--bkl-primary);
	background: var(--bkl-primary-subtle);
	color: var(--bkl-primary);
}

/* ═══════════════════════════════════════════════════ Écrans d'issue */

.bkl-outcome {
	max-width: 460px;
	margin: 0 auto;
	padding: 22px 0 8px;
	text-align: center;
}

.bkl-outcome__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--bkl-primary-subtle);
	color: var(--bkl-primary);
}

.bkl-outcome__mark svg {
	width: 28px;
	height: 28px;
}

.bkl-outcome--soft .bkl-outcome__mark {
	background: var(--bkl-info-bg);
	color: var(--bkl-info);
}

.bkl-outcome--hard .bkl-outcome__mark {
	background: #fdecea;
	color: var(--bkl-danger);
}

.bkl-outcome--done .bkl-outcome__mark {
	background: #dcfce7;
	color: #16a34a;
}

.bkl-outcome__title {
	margin: 0 0 10px;
	font-size: var(--bkl-fs-2xl);
	font-weight: 700;
	line-height: 1.3;
	color: var(--bkl-text-dark);
}

.bkl-outcome__text {
	margin: 0 0 22px;
	font-size: var(--bkl-fs-md);
	line-height: 1.65;
	color: var(--bkl-text-muted);
	/* Le champ est un textarea : un message écrit en deux paragraphes
	   s'affichait en un seul bloc, les retours à la ligne perdus en route. */
	white-space: pre-wrap;
}

.bkl-outcome__aside {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--bkl-border-focus);
	font-size: var(--bkl-fs-sm);
	line-height: 1.6;
	color: var(--bkl-text-hint);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  DIRECTION A — plein écran centré                                ║
   ╚══════════════════════════════════════════════════════════════════╝ */

.bkl--fullscreen .bkl__stage {
	padding: 26px 32px 40px;
}

.bkl--fullscreen .bkl__inner {
	max-width: 560px;
	margin: 0 auto;
}

/* L'étape du calendrier a besoin de toute la largeur : c'est précisément ce
   que la mise en page en deux colonnes de la 1.1.0 lui refusait. */
.bkl--fullscreen .bkl__screen[data-step="3"] .bkl__inner {
	max-width: 820px;
}

.bkl--fullscreen .bkl__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 22px 22px 0;
	font-size: var(--bkl-fs-base);
	font-weight: 600;
	color: var(--bkl-text-muted);
}

.bkl--fullscreen .bkl__brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--bkl-gradient);
	color: #fff;
}

.bkl--fullscreen .bkl__brand-mark svg {
	width: 16px;
	height: 16px;
}

.bkl--fullscreen .bkl__title {
	text-align: center;
}

.bkl--fullscreen .bkl__eyebrow {
	text-align: center;
}

.bkl--fullscreen .bkl__lede {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.bkl--fullscreen .bkl__actions {
	justify-content: center;
}

.bkl--fullscreen .bkl__consent {
	text-align: center;
}

.bkl--fullscreen .bkl__footer {
	padding: 16px 22px;
	border-top: 1px solid var(--bkl-border-focus);
	background: var(--bkl-bg-subtle);
	text-align: center;
	font-size: var(--bkl-fs-sm);
	color: var(--bkl-text-placeholder);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  DIRECTION B — deux colonnes, panneau d'argumentaire             ║
   ╚══════════════════════════════════════════════════════════════════╝ */

.bkl--split {
	display: grid;
	grid-template-columns: 320px 1fr;
}

@media (max-width: 860px) {
	.bkl--split {
		grid-template-columns: 1fr;
	}
}

.bkl__aside {
	position: relative;
	overflow: hidden;
	padding: 30px 28px;
	background: var(--bkl-gradient);
	color: #fff;
}

.bkl__aside-watermark {
	position: absolute;
	right: -50px;
	bottom: -40px;
	opacity: 0.07;
	pointer-events: none;
}

.bkl__aside-watermark svg {
	width: 220px;
	height: 220px;
	color: #fff;
}

.bkl__aside-inner {
	position: relative;
	z-index: 1;
}

.bkl__aside-title {
	margin: 0 0 8px;
	font-size: var(--bkl-fs-xl);
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.bkl__aside-sub {
	margin: 0 0 26px;
	font-size: 13.5px;
	--bkl-lh-base: 1.5;
	line-height: max(0.82, calc(var(--bkl-lh-base) * var(--bkl-lh, 1)));
	color: rgba(255, 255, 255, 0.72);
}

.bkl-steps {
	display: grid;
	gap: 2px;
	margin-bottom: 26px;
}

.bkl-steps__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	font-size: 13.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
	transition: color var(--bkl-t-base);
}

.bkl-steps__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	font-size: var(--bkl-fs-xs);
	font-weight: 700;
	transition: all var(--bkl-t-base);
}

.bkl-steps__dot svg {
	width: 12px;
	height: 12px;
}

.bkl-steps__item.is-current {
	color: #fff;
	font-weight: 600;
}

.bkl-steps__item.is-current .bkl-steps__dot {
	border-color: var(--bkl-accent-light);
	background: var(--bkl-accent-light);
	color: var(--bkl-primary-dark);
}

.bkl-steps__item.is-done {
	color: rgba(255, 255, 255, 0.82);
}

.bkl-steps__item.is-done .bkl-steps__dot {
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.bkl__proof {
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 13px;
	--bkl-lh-base: 1.5;
	line-height: max(0.82, calc(var(--bkl-lh-base) * var(--bkl-lh, 1)));
	color: rgba(255, 255, 255, 0.72);
}

.bkl__proof strong {
	display: block;
	margin-bottom: 3px;
	color: #fff;
	font-weight: 600;
}

.bkl--split .bkl__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bkl--split .bkl__stage {
	flex: 1 1 auto;
	padding: 24px 30px 34px;
}

.bkl--split .bkl__title {
	font-size: var(--bkl-fs-2xl);
}

.bkl--split .bkl__footer {
	padding: 14px 30px;
	border-top: 1px solid var(--bkl-border-focus);
	background: var(--bkl-bg-subtle);
	font-size: var(--bkl-fs-sm);
	color: var(--bkl-text-placeholder);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  DIRECTION C — calendrier visible, verrouillé                    ║
   ╚══════════════════════════════════════════════════════════════════╝
 *
 * Le mode d'origine, et celui qui explique le mieux le marché : le visiteur
 * voit les créneaux exister avant de savoir qu'il devra se déclarer pour y
 * accéder. La promesse est lisible en une seconde, sans une ligne de texte.
 *
 * Le verrou est visuel *et* réel : filtre, absence de pointeur, `inert`. Mais
 * il ne porte aucune décision — c'est le serveur qui refuse la réservation, et
 * lui seul. Retirer la classe à la main dans le navigateur ne donne rien.
 */

.bkl--locked {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
}

@media (max-width: 900px) {
	.bkl--locked {
		grid-template-columns: 1fr;
	}
}

.bkl--locked .bkl__main {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-right: 1px solid var(--bkl-border-focus);
}

@media (max-width: 900px) {
	.bkl--locked .bkl__main {
		border-right: 0;
		border-bottom: 1px solid var(--bkl-border-focus);
	}
}

.bkl--locked .bkl__stage {
	flex: 1 1 auto;
	padding: 22px 26px 30px;
}

.bkl--locked .bkl__title {
	font-size: var(--bkl-fs-2xl);
}

.bkl--locked .bkl__footer {
	padding: 13px 26px;
	border-top: 1px solid var(--bkl-border-focus);
	background: var(--bkl-bg-subtle);
	font-size: var(--bkl-fs-sm);
	color: var(--bkl-text-placeholder);
}

/* ─────────────────────────────────────────── Le panneau verrouillé */

.bkl__vault {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 22px 26px;
	background: var(--bkl-bg-subtle);
}

.bkl__vault-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.bkl__vault-title {
	margin: 0;
	font-size: var(--bkl-fs-md);
	font-weight: 700;
	color: var(--bkl-text);
}

.bkl__vault-state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: var(--bkl-radius-pill);
	background: #fff;
	border: 1px solid var(--bkl-border);
	font-size: var(--bkl-fs-xs);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--bkl-text-hint);
	transition: all var(--bkl-t-base);
}

.bkl__vault-state svg {
	width: 12px;
	height: 12px;
}

.bkl__vault-body {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--bkl-border-focus);
	border-radius: 12px;
	background: #fff;
	padding: 16px;
	overflow: hidden;
}

.bkl__vault-body .bkl__vault-inner {
	flex: 1 1 auto;
}

/* 1.44.0 — le vrai calendrier, en fond : imposant en hauteur, légèrement
   flouté tant que l’écran d’accès n'est pas franchi. Le flou EST le message — le
   déverrouillage le dissipe d'un coup et le calendrier reprend sa netteté :
   on comprend qu'on peut agir directement dessus. */
.bkl__vault-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 480px;
	filter: blur(2.4px) saturate(0.62) opacity(0.8);
	transform: scale(0.985);
	transition: filter 640ms cubic-bezier(0.4, 0, 0.2, 1), transform 640ms cubic-bezier(0.34, 1.3, 0.5, 1);
	pointer-events: none;
	user-select: none;
}

.bkl__vault-inner > * {
	width: 100%;
	max-width: 920px;
}

.bkl--locked.is-unlocked .bkl__vault-inner {
	filter: none;
	transform: scale(1);
	pointer-events: auto;
	user-select: auto;
}

.bkl--locked.is-unlocked .bkl__vault-state {
	border-color: #bbf7d0;
	background: #f0fdf4;
	color: #166534;
}

.bkl--locked.is-blocked .bkl__vault-state {
	border-color: #f5c2c7;
	background: #fff5f5;
	color: #b42318;
}

/* ─────────────────────────── Le sceau : carte flottante devant le calendrier */

/* 1.43.0 — comme sur le modèle d'origine : le message vit dans une carte
   flottante DEVANT le calendrier, et le calendrier reste visible derrière,
   en arrière-plan. « Je remplis le formulaire → il s'ouvre derrière. » */
.bkl__seal {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	transition: opacity 380ms ease;
}

.bkl__seal[hidden] {
	display: none;
}

.bkl--locked.is-unlocked .bkl__seal {
	opacity: 0;
	pointer-events: none;
}

.bkl__seal-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	max-width: 400px;
	padding: 22px 28px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 18px 50px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(15, 23, 42, 0.05);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.bkl__seal-lock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--bkl-gradient);
	color: #fff;
	box-shadow: 0 8px 24px rgba(var(--bkl-primary-rgb), 0.28);
}

.bkl__seal-lock svg {
	width: 21px;
	height: 21px;
}

.bkl__seal-text {
	max-width: 30ch;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	--bkl-lh-base: 1.42;
	line-height: max(0.82, calc(var(--bkl-lh-base) * var(--bkl-lh, 1)));
	color: var(--bkl-text);
}

.bkl__seal-sub {
	max-width: 34ch;
	margin: 0;
	font-size: var(--bkl-fs-sm);
	--bkl-lh-base: 1.45;
	line-height: max(0.82, calc(var(--bkl-lh-base) * var(--bkl-lh, 1)));
	color: var(--bkl-text-hint);
}

/* Le compteur de créneaux : c'est lui qui donne envie d'entrer. */
.bkl__seal-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	padding: 4px 12px;
	border-radius: var(--bkl-radius-pill);
	background: var(--bkl-accent);
	color: #fff;
	font-size: var(--bkl-fs-xs);
	font-weight: 700;
}

/* ══════════════════════════════════════════ Accueil du calendrier
 *
 * Modes « plein écran » et « deux colonnes » : le calendrier n'est révélé
 * qu'à l'étape 3. Il reste dans le document depuis le départ — le retirer
 * puis le réinsérer casserait le script du moteur de réservation.
 */

.bkl__calhost {
	padding: 0 32px 32px;
	animation: bkl-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bkl__calhost[hidden] {
	display: none;
}

.bkl--split .bkl__calhost {
	padding: 0 30px 30px;
}

.bkl__logo {
	display: block;
	max-height: 28px;
	width: auto;
	margin-bottom: 12px;
}

/* Sur le fond bleu, le logo garde ses vraies couleurs sur une pastille
   blanche. L'ancien filtre (brightness 0 + invert) le passait en silhouette
   blanche : avec un logo opaque — un JPEG, un PNG sans transparence — il ne
   restait qu'un carré blanc. */
.bkl__aside .bkl__logo {
	background: #fff;
	padding: 5px 9px;
	border-radius: 9px;
	box-shadow: 0 1px 4px rgba(10, 25, 50, 0.25);
}

.bkl-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Le calendrier natif hérite d'une largeur maximale dans certains thèmes :
   on la lui rend, sinon il reste tassé au centre de sa colonne. */
.bkl__calendar {
	max-width: 100%;
}

/* Planificateur hébergé. L'iframe n'entre dans le document qu'après
   qualification : ce bloc n'existe pas dans la page tant que l’écran d’accès n'est pas
   franchi. La hauteur est fixée parce qu'une iframe tierce ne peut pas nous
   dire la sienne — 720 px couvre le calendrier et le formulaire de Calendly
   comme de Cal.com sans double barre de défilement. */
.bkl__embed {
	position: relative;
	width: 100%;
	min-height: 720px;
	border-radius: var(--bkl-radius-md, 14px);
	overflow: hidden;
	background: var(--bkl-surface-2, #f6f8fb);
	animation: bkl-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bkl__embed iframe {
	display: block;
	width: 100%;
	height: 720px;
	border: 0;
}

@media (max-width: 640px) {
	.bkl__embed,
	.bkl__embed iframe {
		min-height: 840px;
		height: 840px;
	}
}

/* Arguments de vente sous l'accroche (modes verrouillé et plein écran). */
.bkl__points {
	margin: 2px 0 14px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}

/* 1.42.0 — le sous-titre qui invite à remplir, juste avant les champs :
   « Essayez par vous-même 👇 », comme sur le modèle d'origine. */
.bkl__intro {
	margin: 0 0 12px;
	font-size: var(--bkl-fs-md);
	font-weight: 600;
	color: var(--bkl-text);
}

.bkl__points li {
	position: relative;
	padding-left: 24px;
	font-size: 13.5px;
	--bkl-lh-base: 1.38;
	line-height: max(0.82, calc(var(--bkl-lh-base) * var(--bkl-lh, 1)));
	color: var(--bkl-front-muted, #5b6a7e);
}

.bkl__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="black"/></svg>') center / contain no-repeat;
	mask: none;
}

.bkl__points li::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 7px;
	width: 7px;
	height: 4px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

/* 1.31.0 — le bandeau de marque vit aussi dans le mode verrouillé : logo et
   titre en tête de la colonne du formulaire, alignés sur son contenu. */
.bkl--locked .bkl__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 22px 30px 0;
	font-size: var(--bkl-fs-base);
	font-weight: 600;
	color: var(--bkl-text-muted);
}

.bkl--locked .bkl__brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--bkl-gradient);
	color: #fff;
}

.bkl--locked .bkl__brand-mark svg {
	width: 16px;
	height: 16px;
}

.bkl__brand .bkl__logo {
	margin-bottom: 0;
}

/* 1.38.0 — en mode verrouillé, le pied de carte court sur TOUTE la carte
   (formulaire + calendrier), comme un vrai pied de page. */
.bkl--locked > .bkl__footer {
	grid-column: 1 / -1;
	padding: 14px 30px;
	border-top: 1px solid var(--bkl-border-focus);
	background: var(--bkl-bg-subtle);
	text-align: center;
	font-size: var(--bkl-fs-sm);
	color: var(--bkl-text-placeholder);
}

/* 1.39.0 — le fond de la carte accepte un dégradé : deux pipettes dans la
   palette, un seul point d'application ici. `none` par défaut = fond uni. */
.bkl {
	background-image: var(--bkl-card-image, none);
}

/* 1.40.0 — le pied de carte, dernier enfant de l’écran d’accès dans les trois modes :
   pleine largeur, hors de la zone d'affichage, avec SES couleurs. */
.bkl > .bkl__footer {
	grid-column: 1 / -1;
	padding: 14px 30px;
	border-top: 1px solid var(--bkl-border-focus);
	background: var(--bkl-footer-bg, var(--bkl-bg-subtle));
	color: var(--bkl-footer-text, var(--bkl-text-placeholder));
	text-align: center;
	font-size: var(--bkl-fs-sm);
}

/* 1.41.0 — couleurs PAR ZONE : chaque zone de l’écran d’accès peut recevoir son propre
   texte et son propre fond, réglés en cliquant la zone dans l'éditeur.
   Chaque repli est la valeur d'origine : sans réglage, rien ne bouge. */
.bkl .bkl__title {
	color: var(--bkl-zt-step_title, var(--bkl-text-dark));
	background: var(--bkl-zb-step_title, transparent);
}

.bkl .bkl__lede {
	color: var(--bkl-zt-lede, var(--bkl-text-muted));
	background: var(--bkl-zb-lede, transparent);
}

.bkl .bkl__points {
	color: var(--bkl-zt-bullets, var(--bkl-front-muted, #5b6a7e));
	background: var(--bkl-zb-bullets, transparent);
}

.bkl .bkl__proof {
	color: var(--bkl-zt-bullets, rgba(255, 255, 255, 0.72));
	background: var(--bkl-zb-bullets, transparent);
}

.bkl .bkl-btn {
	background: var(--bkl-zb-button, var(--bkl-primary));
	color: var(--bkl-zt-button, #fff);
}

.bkl .bkl__seal-text {
	color: var(--bkl-zt-lock_message, var(--bkl-text));
	background: var(--bkl-zb-lock_message, transparent);
}

.bkl .bkl__seal-sub {
	color: var(--bkl-zt-seal_note, var(--bkl-text-hint));
	background: var(--bkl-zb-seal_note, transparent);
}

.bkl .bkl-saved {
	background: var(--bkl-zb-captured, #f0fdf4);
	color: var(--bkl-zt-captured, inherit);
}

.bkl .bkl__aside-sub {
	color: var(--bkl-zt-headline, rgba(255, 255, 255, 0.72));
	background: var(--bkl-zb-headline, transparent);
}

/* ═══════ 1.49.0 — le calendrier fantôme du mode verrouillé (moteurs à
   rendu différé : hébergés — Calendly, TidyCal…) : un décor local derrière
   le sceau, remplacé par la vraie iframe au déblocage. */

.bkl-ghost-cal {
	width: 100%;
	font-family: inherit;
}

.bkl-ghost-cal__head {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 12px;
	color: var(--bkl-text-dark);
}

.bkl-ghost-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
}

.bkl-ghost-cal__grid span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-radius: 9px;
	font-size: 13.5px;
	color: var(--bkl-text-placeholder);
	background: var(--bkl-bg-subtle);
}

.bkl-ghost-cal__grid span.is-open {
	background: var(--bkl-primary-subtle);
	color: var(--bkl-primary);
	font-weight: 600;
}

.bkl-ghost-cal__slots {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.bkl-ghost-cal__slots span {
	flex: 1;
	text-align: center;
	padding: 12px 0;
	border: 1.5px solid var(--bkl-border-focus);
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bkl-text);
}

/* ═══════ 1.62.0 — l'étiquette flotte, l'indicatif reste, l'erreur se voit

   Un champ dont le libellé sert de texte fantôme laisse le visiteur sans
   repère dès la première lettre. L'étiquette remonte donc au-dessus de la
   saisie : elle ne quitte jamais le champ. */

.bkl-field--float {
	position: relative;
}

.bkl-field--float .bkl-input {
	padding-top: 20px;
	padding-bottom: 6px;
}

.bkl-field--float .bkl-field__lab {
	position: absolute;
	left: 41px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bkl-text-placeholder);
	font-size: var(--bkl-fs-md);
	line-height: 1.2;
	pointer-events: none;
	transition: top 160ms ease, font-size 160ms ease, color 160ms ease, transform 160ms ease;
}

.bkl-field--float .bkl-input:focus ~ .bkl-field__lab,
.bkl-field--float .bkl-input:not(:placeholder-shown) ~ .bkl-field__lab,
.bkl-field--float.is-filled .bkl-field__lab {
	top: 9px;
	transform: none;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bkl-text-muted);
}

.bkl-field--float .bkl-input:focus ~ .bkl-field__lab {
	color: var(--bkl-primary);
}

/* Le téléphone porte son pays : drapeau et indicatif, posés dans le champ et
	jamais effaçables. Un numéro sans indicatif n'est pas rappelable depuis un
	autre pays, et c'est le genre de perte qu'on ne voit jamais venir. */
.bkl-field--dial .bkl-field__dial {
	position: absolute;
	left: 38px;
	bottom: 5px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--bkl-text-muted);
	font-family: inherit;
	font-size: var(--bkl-fs-md);
	line-height: 1.3;
	cursor: pointer;
	opacity: 0;
	transition: opacity 160ms ease, background 140ms ease;
}

.bkl-field--dial .bkl-field__dial svg {
	width: 9px;
	height: 6px;
	opacity: 0.55;
}

.bkl-field--dial .bkl-field__dial:hover,
.bkl-field--dial .bkl-field__dial:focus-visible {
	background: var(--bkl-primary-subtle);
	color: var(--bkl-primary);
	outline: none;
}

/* Le choix du pays : le site suppose, le visiteur corrige. */
.bkl-dialmenu {
	position: absolute;
	z-index: 2147483000;
	top: calc(100% + 6px);
	left: 0;
	width: 100%;
	max-width: 320px;
	padding: 8px;
	border: 1px solid var(--bkl-border);
	border-radius: var(--bkl-radius);
	background: #fff;
	box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.bkl-dialmenu[hidden] {
	display: none;
}

.bkl-dialmenu__search {
	width: 100%;
	margin-bottom: 6px;
	padding: 8px 10px;
	border: 1px solid var(--bkl-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
}

.bkl-dialmenu__list {
	max-height: 240px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.bkl-dialmenu__item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 7px 9px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}

.bkl-dialmenu__item[hidden] {
	display: none;
}

.bkl-dialmenu__item:hover,
.bkl-dialmenu__item:focus-visible {
	background: var(--bkl-primary-subtle);
	outline: none;
}

.bkl-dialmenu__item span:nth-child(2) {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bkl-dialmenu__item em {
	color: var(--bkl-text-muted);
	font-style: normal;
}

.bkl-field--dial .bkl-input:focus ~ .bkl-field__dial,
.bkl-field--dial .bkl-input:not(:placeholder-shown) ~ .bkl-field__dial,
.bkl-field--dial.is-filled .bkl-field__dial {
	opacity: 1;
}

.bkl-field--dial .bkl-input:focus,
.bkl-field--dial .bkl-input:not(:placeholder-shown) {
	padding-left: 108px;
}

/* La ligne fautive se montre : un message seul oblige à chercher. */
.bkl-field.is-error .bkl-input {
	border-color: var(--bkl-danger, #e74c3c);
	box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.14);
}

.bkl-field.is-error .bkl-field__lab {
	color: var(--bkl-danger, #e74c3c);
}

/* Le panneau des pays, une fois déménagé à la racine du document : coordonnées
	d'écran, au-dessus de tout. La carte de l’écran d’accès découpe ce qui dépasse d'elle —
	c'est ce qui lui donne ses coins ronds — et le panneau s'y faisait couper. */
.bkl-dialmenu--loose {
	position: fixed;
	top: 0;
	left: 0;
	max-width: none;
}

/* La case de consentement : le visiteur coche lui-même, et la ligne se lit
	comme une phrase, pas comme un formulaire administratif. */
.bkl__consent--check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
}

.bkl__consent--check input[type="checkbox"] {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--bkl-primary);
	cursor: pointer;
}

.bkl__consent--check.is-error,
.bkl-field.is-error .bkl__consent--check {
	color: var(--bkl-danger);
}

.bkl__consent--check.is-error input[type="checkbox"] {
	outline: 2px solid var(--bkl-danger);
	outline-offset: 2px;
}

/* ═══════ 1.73.0 — après l’écran d’accès, on ne redemande pas ce qu'on sait déjà

   Les deux champs que l’écran d’accès vient de remplir sont mis de côté, pas
   supprimés : le moteur les envoie toujours. Et tout revient à la moindre
   erreur — un visiteur ne doit jamais rester devant un écran mort. */
.bkl-autofold {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Ce qui va partir, écrit noir sur blanc : on ne fait pas confirmer à
	l'aveugle. */
.bkl-autorecap {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1.5px solid var(--bkl-border, #e1e5eb);
	background: var(--bkl-bg-alt, #f6f8fb);
	font-size: 14px;
	font-weight: 600;
	color: var(--bkl-text-dark, #1a2332);
	text-align: center;
}

/* 1.87.0 — un nombre, une date, un code postal : trois caractères dans un
	champ pleine largeur avaient l'air d'un champ cassé. */
.bkl-field--narrow .bkl-input {
	max-width: 240px;
}

/* ═══════ 1.88.0 — la liste déroulante, dessinée

	Un `<select>` natif ouvre le panneau du système : gris, hors charte,
	impossible à styler. Le select reste dans le formulaire — invisible, il
	porte la valeur envoyée — et un bouton dessiné prend sa place. */

.bkl-drop {
	position: relative;
}

.bkl-drop__native {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

.bkl-drop__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 16px 18px;
	border: 1.5px solid var(--bkl-border, #e1e5eb);
	border-radius: var(--bkl-radius, 12px);
	background: #fff;
	font-family: inherit;
	font-size: var(--bkl-fs-md, 15px);
	color: var(--bkl-text, #1a2332);
	text-align: left;
	cursor: pointer;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.bkl-drop__btn:hover {
	border-color: var(--bkl-primary, #2a5298);
}

.bkl-drop.is-open .bkl-drop__btn,
.bkl-drop__btn:focus-visible {
	border-color: var(--bkl-primary, #2a5298);
	box-shadow: 0 0 0 3px rgba(var(--bkl-primary-rgb, 42, 82, 152), 0.14);
	outline: none;
}

.bkl-drop__val.is-placeholder {
	color: var(--bkl-text-placeholder, #9aa5b1);
}

.bkl-drop__caret {
	display: inline-flex;
	flex: none;
	color: var(--bkl-text-hint, #6b7a8d);
	transition: transform 200ms ease;
}

.bkl-drop__caret svg {
	width: 16px;
	height: 16px;
}

.bkl-drop.is-open .bkl-drop__caret {
	transform: rotate(180deg);
}

.bkl-drop__menu {
	position: absolute;
	z-index: 40;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: 300px;
	overflow-y: auto;
	padding: 6px;
	border: 1.5px solid var(--bkl-border, #e1e5eb);
	border-radius: var(--bkl-radius, 12px);
	background: #fff;
	box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
	animation: bkl-in 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bkl-drop__menu[hidden] {
	display: none;
}

.bkl-drop__opt {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 13px 14px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	font-family: inherit;
	font-size: var(--bkl-fs-md, 15px);
	color: var(--bkl-text, #1a2332);
	text-align: left;
	cursor: pointer;
	transition: background 120ms ease;
}

.bkl-drop__opt:hover,
.bkl-drop__opt:focus-visible {
	background: var(--bkl-primary-subtle, #eef3fb);
	outline: none;
}

.bkl-drop__opt.is-on {
	background: var(--bkl-primary-subtle, #eef3fb);
	font-weight: 600;
}

.bkl-drop__key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: none;
	border: 1.5px solid var(--bkl-border-focus, #dbe3ee);
	border-radius: 8px;
	font-size: var(--bkl-fs-xs, 11px);
	font-weight: 700;
	color: var(--bkl-text-hint, #6b7a8d);
}

.bkl-drop__opt.is-on .bkl-drop__key {
	border-color: var(--bkl-primary, #2a5298);
	background: var(--bkl-primary, #2a5298);
	color: #fff;
}

/* Le champ date : un input `date` nu affiche la mécanique du navigateur —
	une petite icône grise collée à droite, une police système. Ici il porte
	le même habit que les autres champs, avec son pictogramme à gauche. */
.bkl-datefield {
	position: relative;
	max-width: 280px;
}

.bkl-datefield__ico {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	color: var(--bkl-text-hint, #6b7a8d);
	pointer-events: none;
}

.bkl-datefield__ico svg {
	width: 19px;
	height: 19px;
}

.bkl-datefield .bkl-input {
	max-width: none;
	padding-left: 48px;
	font-family: inherit;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.bkl-datefield .bkl-input::-webkit-calendar-picker-indicator {
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 2px;
	border-radius: 6px;
	opacity: 0.45;
	cursor: pointer;
	transition: opacity 140ms ease, background 140ms ease;
}

.bkl-datefield .bkl-input::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
	background: var(--bkl-primary-subtle, #eef3fb);
}

.bkl-datefield .bkl-input::-webkit-datetime-edit {
	padding: 0;
}

/* ═══════ 1.97.0 — les deux colonnes, empilées sur un téléphone

	Sur un mobile, la colonne d'argumentaire passe AU-DESSUS du formulaire :
	titre, sous-titre, trois étapes déroulées et le bloc de preuve occupaient
	un écran entier avant que le premier champ n'apparaisse. On garde ce qui
	situe — le titre et où l'on en est — et on laisse la place au formulaire. */

@media (max-width: 860px) {
	.bkl--split .bkl__aside {
		padding: 18px 20px 16px;
	}

	.bkl--split .bkl__aside-sub {
		margin-bottom: 14px;
	}

	/* Les étapes se posent sur une ligne : trois pastilles et le nom de
		l'étape en cours suffisent à dire où l'on en est. */
	.bkl--split .bkl-steps {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 0;
	}

	.bkl--split .bkl-steps__item {
		padding: 0;
		gap: 7px;
		font-size: 12.5px;
	}

	.bkl--split .bkl-steps__item:not(.is-current) span:not(.bkl-steps__dot) {
		display: none;
	}

	.bkl--split .bkl-steps__dot {
		width: 22px;
		height: 22px;
		font-size: 11px;
	}

	/* Les arguments RESTENT — ce sont eux qui vendent. Ils se resserrent :
		même texte, moins de gouttière, et le formulaire n'est plus repoussé
		hors de l'écran. */
	.bkl--split .bkl__proof {
		margin-top: 12px;
		padding-top: 12px;
		font-size: 12px;
		line-height: 1.45;
	}

	.bkl--split .bkl__proof strong {
		margin-bottom: 1px;
	}

	.bkl--split .bkl__aside-watermark {
		display: none;
	}
}

/* ═══════ 1.100.0 — un bloc, un appareil

	Certains blocs valent leur place sur un ordinateur et la volent sur un
	téléphone. Plutôt que de décider à la place du client, on lui donne le
	choix — sur les trois blocs où la question se pose vraiment. */

@media (max-width: 860px) {
	.bkl [data-bkl-only="desk"] {
		display: none !important;
	}
}

@media (min-width: 861px) {
	.bkl [data-bkl-only="phone"] {
		display: none !important;
	}
}

/* ==========================================================================
   2.49.0 — Pour qui ce créneau est-il pris ?
   ========================================================================== */

/* Le lien de reprise n'appartient pas au client : c'est une clé, et celui qui
	la tient réserve sous cette identité. Le commercial l'ouvre donc lui-même,
	au téléphone, pour caler le rendez-vous à la place de son client.
	D'où ce bandeau : il rassure celui qui revient — c'est bien son rendez-vous
	— et il protège celui qui réserve pour un autre. Deux fiches ouvertes l'une
	après l'autre partagent le même cookie, et le dernier lien ouvert l'emporte :
	sans nom affiché, on réserverait pour l'un en croyant réserver pour l'autre. */
.bkl__forwhom {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 12px;
	padding: 10px 14px;
	border-radius: 12px;
	background: #eff6ff;
	box-shadow: inset 0 0 0 1px #bfdbfe;
	font-size: 13px;
	line-height: 1.35;
	color: #1e3a5f;
}

.bkl__forwhom-lab {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.65;
}

.bkl__forwhom strong {
	font-weight: 800;
}

.bkl__forwhom-mail,
.bkl__forwhom-zone {
	font-size: 12px;
	opacity: 0.75;
}

.bkl__forwhom-zone::before {
	content: "·";
	margin-right: 8px;
	opacity: 0.5;
}

/* ── LE BOUTON DU BLOC, ET LE MUR QU'IL OUVRE ──────────────────────────────

   Une page de vente ne veut pas toujours d'un calendrier posé au milieu du
   texte : elle veut une phrase, puis un bouton. L’écran d’accès existe quand même dans
   la page — replié — et se déplie dans un voile au clic. Le charger seulement
   au clic aurait ajouté une attente au moment précis où quelqu'un vient de
   dire oui. */

.bkl-open {
	--bkl-open-bg: #1e3a5f;
	--bkl-open-fg: #ffffff;
}

.bkl-open__btn {
	display: inline-block;
	padding: 14px 28px;
	border: 0;
	border-radius: 10px;
	background: var(--bkl-open-bg);
	color: var(--bkl-open-fg);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.bkl-open__btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* ── LA FENÊTRE PASSE DEVANT TOUT, SANS EXCEPTION ──────────────────────────

   Un million paraissait beaucoup. Les bandeaux de consentement, les bulles de
   discussion et les barres d'annonce montent, eux, jusqu'au dernier rang que
   le navigateur accepte — et une icône de cookies restait posée par-dessus la
   fenêtre de réservation, à la vue du visiteur, cliquable pendant qu'il
   saisissait son adresse.

   La fenêtre prend donc le dernier rang elle aussi. À rang égal, c'est
   l'ordre d'écriture qui tranche : le script la déplace en toute fin de page
   à l'ouverture, et elle passe devant ce qui la précède. */
.bkl-open__veil {
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 16, 28, 0.62);
}

.bkl-open__veil[hidden] {
	display: none;
}

.bkl-open__sheet {
	position: relative;
	width: min(1180px, 100%);
	max-height: 100%;
	overflow: auto;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
}

.bkl-open__x {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.08);
	color: #1a2332;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/* Dans l'éditeur, le voile n'a rien à recouvrir : le bouton seul suffit à
   dire ce que verra le visiteur. */
.block-editor-block-list__layout .bkl-open__veil {
	display: none !important;
}

/* Dans l'éditeur : l'aperçu se regarde, il ne se remplit pas. Cliquer dedans
   doit sélectionner le bloc — c'est ce qu'on attend d'un bloc, et c'est ce qui
   permet de le déplacer ou de le supprimer. */
.bkl-blockview {
	pointer-events: none;
}

/* ── L'aveu, quand le moteur n'a rien rendu ────────────────────────────────
   Il remplace le décor du calendrier scellé au moment où l’écran d’accès s'ouvre.
   Sobre, centré, et sans faux air de calendrier. */
.bkl__nocal {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 220px;
	padding: 28px 24px;
	text-align: center;
}

.bkl__nocal-text {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #1a2332;
}

.bkl__nocal-sub {
	margin: 0;
	max-width: 34ch;
	font-size: 13.5px;
	line-height: 1.55;
	color: #5a6c7d;
}

.bkl__nocal-go { margin: 6px 0 0; }

/* ══════════════════════════════════════════════════════════════════════════
   SEIZE PIXELS : LE SEUIL EN DESSOUS DUQUEL SAFARI ZOOME
   Les champs étaient en 13,5 px, ceux de l'identité en 15. Sous 16 px, Safari
   sur iPhone agrandit la page à l'instant où le champ reçoit le focus : le
   visiteur touche « Prénom », l'écran fait un bond, et il doit dézoomer à la
   main AVANT d'avoir tapé une lettre. Sur mobile — l'essentiel du trafic d'un
   écran d’accès de qualification — c'est le tout premier geste du parcours qui rate.
   La règle ne s'applique qu'au pointeur grossier (doigt) : sur un écran
   d'ordinateur, les tailles d'origine restent, elles y sont justes.
   ══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
	.bkl .bkl-input,
	.bkl .bkl-select,
	.bkl .bkl-textarea,
	.bkl .bkl-input--lg {
		font-size: 16px;
	}
}

/* Un paragraphe d'erreur vide gardait sa place : le formulaire « sautait » à
   la première erreur. */
.bkl .bkl__error:empty {
	display: none;
}

/* La réponse manquante se voit, comme le champ manquant de l'étape 1. */
.bkl .bkl-choices.is-error {
	border-radius: var(--bkl-radius);
	box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.35);
}

/* ═══════════════════════════════ Le formulaire sur un téléphone (5.91.0)

   QUATRE CHAMPS EMPILÉS REPOUSSENT LE CALENDRIER HORS DE L'ÉCRAN.

   Sur un téléphone, l'écran d'accès n'a qu'une colonne : le formulaire
   d'abord, le calendrier scellé dessous. Chaque ligne de formulaire coûte
   66 px — 50 de champ, 16 d'écart — et quatre lignes suffisent à pousser
   « Choisissez votre créneau » sous le pli. Le visiteur ne voit alors pas
   ce qu'il gagne à remplir : il voit un formulaire, et rien d'autre.

   Trois économies, dans cet ordre d'importance :
   1. le prénom et le nom partagent une ligne (voir `bkl-ids--pair`, décidé
      dans le script pour ne jamais laisser un demi-champ solitaire) ;
   2. les champs passent de 50 à 46 px — la zone de tap reste au-dessus des
      44 px recommandés, donc rien ne devient plus difficile à viser ;
   3. les écarts et les marges de titre se resserrent.

   Rien de tout cela ne s'applique au-delà de 640 px : sur un écran large,
   la place ne manque pas, et un formulaire aéré s'y lit mieux. */

@media (max-width: 640px) {
	.bkl-ids {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 10px;
	}

	.bkl-ids .bkl-field {
		grid-column: 1 / -1;
		margin-bottom: 10px;
	}

	.bkl-ids--pair .bkl-field[data-bkl-row="first_name"],
	.bkl-ids--pair .bkl-field[data-bkl-row="last_name"] {
		grid-column: span 1;
	}

	.bkl-ids .bkl-field--float .bkl-input {
		padding-top: 18px;
		padding-bottom: 5px;
	}

	.bkl-ids .bkl-field--float .bkl-input:focus ~ .bkl-field__lab,
	.bkl-ids .bkl-field--float .bkl-input:not(:placeholder-shown) ~ .bkl-field__lab,
	.bkl-ids .bkl-field--float.is-filled .bkl-field__lab {
		top: 7px;
	}

	/* Deux champs côte à côte, c'est moins de largeur pour l'étiquette :
	   l'icône se rapproche du bord et rend ses pixels au texte. */
	.bkl-ids--pair .bkl-field[data-bkl-row="first_name"] .bkl-field__ico,
	.bkl-ids--pair .bkl-field[data-bkl-row="last_name"] .bkl-field__ico {
		left: 10px;
	}

	.bkl-ids--pair .bkl-field[data-bkl-row="first_name"] .bkl-input,
	.bkl-ids--pair .bkl-field[data-bkl-row="last_name"] .bkl-input {
		padding-left: 34px;
	}

	/* UNE ÉTIQUETTE QUI SE PLIE EN DEUX N'EST PLUS UNE ÉTIQUETTE.

	   Demi-largeur, l'étiquette flottante passait à la ligne : « Votre prénom »
	   s'écrivait sur deux lignes, débordait du champ, et l'écran avait l'air
	   cassé. Elle tient donc sur une ligne, et se coupe proprement si le
	   libellé choisi est trop long — un mot tronqué se comprend, un mot plié
	   ne se lit pas. La marque du champ reste l'icône, toujours entière. */
	.bkl-ids--pair .bkl-field[data-bkl-row="first_name"] .bkl-field__lab,
	.bkl-ids--pair .bkl-field[data-bkl-row="last_name"] .bkl-field__lab {
		left: 34px;
		right: 8px;
		max-width: calc(100% - 42px);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* ⚠️ LA TAILLE DE REPOS NE VAUT QU'AU REPOS.

	   Elle était posée sur l'étiquette elle-même. Elle s'appliquait donc AUSSI
	   une fois l'étiquette remontée, où elle n'a rien à faire : le libellé
	   montait en capitales de 14 px, débordait du demi-champ et se coupait.
	   Deux règles qui se disputent le même élément finissent toujours par se
	   tromper d'état ; on les rend donc EXCLUSIVES — celle-ci ne parle qu'au
	   champ vide et sans curseur. */
	.bkl-ids--pair .bkl-field[data-bkl-row="first_name"] .bkl-input:placeholder-shown:not(:focus) ~ .bkl-field__lab,
	.bkl-ids--pair .bkl-field[data-bkl-row="last_name"] .bkl-input:placeholder-shown:not(:focus) ~ .bkl-field__lab {
		font-size: 14px;
	}

	/* Le haut de l'écran se resserre lui aussi : c'est là que se gagne la
	   place qui fait apparaître le calendrier. On ne touche pas au bandeau de
	   marque : son écart est un `padding` propre à chaque disposition, et le
	   blanc qu'on voyait sous le logo venait du titre en double, supprimé. */
	.bkl__title {
		margin-bottom: 6px;
	}

	.bkl__lede {
		margin-bottom: 14px;
	}

	.bkl__actions {
		margin-top: 12px;
	}
}

/* SOUS 360 px, DEUX CHAMPS NE TIENNENT PLUS CÔTE À CÔTE.

   Un iPhone SE fait 320 px de large : deux demi-champs y tombent à 135 px,
   dont 42 pris par l'icône. L'étiquette n'aurait plus la place de se dire, et
   on aurait échangé deux lignes contre deux libellés illisibles. Sur ces
   écrans-là, on rend la ligne entière à chaque champ — la place gagnée ne vaut
   jamais un formulaire qu'on ne comprend plus. */

@media (max-width: 359px) {
	.bkl-ids--pair .bkl-field[data-bkl-row="first_name"],
	.bkl-ids--pair .bkl-field[data-bkl-row="last_name"] {
		grid-column: 1 / -1;
	}

	.bkl-ids--pair .bkl-field[data-bkl-row="first_name"] .bkl-field__ico,
	.bkl-ids--pair .bkl-field[data-bkl-row="last_name"] .bkl-field__ico {
		left: 13px;
	}

	.bkl-ids--pair .bkl-field[data-bkl-row="first_name"] .bkl-input,
	.bkl-ids--pair .bkl-field[data-bkl-row="last_name"] .bkl-input {
		padding-left: 41px;
	}

	.bkl-ids--pair .bkl-field[data-bkl-row="first_name"] .bkl-field__lab,
	.bkl-ids--pair .bkl-field[data-bkl-row="last_name"] .bkl-field__lab {
		left: 41px;
		font-size: var(--bkl-fs-md);
	}
}


/* ═══════════════════════════ Rien au-dessus du formulaire (5.94.0)

   `bkl--tight` est posé par le script, APRÈS mesure : il ne dit pas « ce
   calendrier n'a pas de titre », il dit « rien de visible ne sépare le logo du
   premier champ ». La nuance compte — un titre masqué par un réglage, un
   argument vide, un bouton caché comptent tous pour rien, et aucune liste de
   cas particuliers n'est à tenir à jour.

   Dès qu'un titre, un chapeau, un argument ou le bouton « Retour » reprend sa
   place, la classe disparaît et la respiration revient. */

.bkl--tight .bkl__meta {
	padding-top: 0;
}

.bkl--tight .bkl__stage {
	/* 5.98.0 — 8 px, c'était trop peu : en gagnant de la hauteur, on avait
	   collé le premier champ sous le logo. On respire de nouveau, sans rendre
	   la page haute pour autant. */
	padding-top: 18px;
}


/* ═══════════════════════════════ L'INTERLIGNE, BLOC PAR BLOC (5.95.0)

   La barre de mise en forme règle la TAILLE du texte. Elle ne peut PAS régler
   l'espace entre les lignes : une enveloppe posée à l'intérieur d'un bloc ne
   resserre jamais ses lignes — le bloc impose un plancher que rien d'interne ne
   franchit. Le réglage vit donc à côté du texte, et se pose sur le bloc.

   Un MULTIPLICATEUR, pas une valeur. Chaque bloc garde sa proportion propre :
   un titre serré reste plus serré qu'un paragraphe serré, et la hiérarchie
   typographique survit au réglage. Une valeur unique aurait fait l'inverse —
   « serré » aurait AÉRÉ les titres, déjà plus serrés que le corps. */

/* ⚠️ UN PLANCHER, SINON LES LIGNES SE TOUCHENT.

   Le multiplicateur s'applique à des bases très différentes : 1,5 pour un
   paragraphe, 1,16 pour un titre. Sans garde-fou, le réglage le plus serré
   descendait le titre sous 1, et les jambages de la première ligne venaient
   toucher la seconde.

   Le plancher était à 1,05 tant qu'il n'y avait que trois positions. Depuis
   qu'on peut cliquer autant de fois qu'on veut, un plancher aussi haut mangeait
   les derniers clics : on appuyait, et plus rien ne bougeait. Il descend donc à
   0,82 — la limite en dessous de laquelle les jambages se touchent vraiment. */

/* Les anciens réglages à trois positions restent lus : un écran enregistré
   avant que le pas libre n'existe garde exactement l'espacement qu'il avait. */

[data-bkl-lh="tight"] {
	--bkl-lh: 0.85;
}

[data-bkl-lh="loose"] {
	--bkl-lh: 1.18;
}

/* Le pied de carte n'avait pas d'interligne à lui : il héritait de la carte,
   donc le réglage n'aurait rien eu à multiplier. */

.bkl__footer {
	--bkl-lh-base: 1.5;
	line-height: max(0.82, calc(var(--bkl-lh-base) * var(--bkl-lh, 1)));
}

/* ═══════════════════════ Densité de l'écran sur un téléphone (5.96.0)

   Comparé aux écrans de réservation qui se vendent aujourd'hui, le nôtre
   parlait trop gros et se tenait trop loin des bords. Sur 390 px de large,
   cinquante-deux pixels partaient en gouttières et le titre pesait vingt-huit
   pixels : le calendrier commençait sous le pli, et le visiteur ne voyait pas
   ce qu'il gagnait à remplir.

   Trois leviers, dans cet ordre d'effet :
   1. les gouttières se resserrent — le contenu va presque bord à bord ;
   2. l'échelle typographique descend d'un cran, SAUF sur les champs de
      saisie : sous 16 px, iOS zoome à la mise au point et l'écran saute ;
   3. le logo se fait discret — sur un téléphone, il annonce, il ne domine pas.

   Rien de tout cela au-delà de 640 px : sur un écran large, l'air est un
   luxe qu'on peut se payer. */

@media (max-width: 640px) {
	.bkl {
		--bkl-fs-sm: 11.5px;
		--bkl-fs-base: 13px;
		--bkl-fs-lg: 15px;
		--bkl-fs-xl: 16.5px;
		--bkl-fs-2xl: 20px;
		--bkl-fs-3xl: 23px;
		--bkl-fs-4xl: 28px;
	}

	/* Le chapeau suit l'échelle sans passer par --bkl-fs-md, qui habille
	   aussi les champs de saisie et ne doit pas descendre. */
	.bkl__lede {
		font-size: 14px;
	}

	/* ── PRESQUE BORD À BORD ─────────────────────────────────────────── */

	.bkl--locked .bkl__brand,
	.bkl--fullscreen .bkl__brand {
		padding: 14px 16px 0;
	}

	.bkl--locked .bkl__stage,
	.bkl--fullscreen .bkl__stage {
		padding-right: 16px;
		padding-bottom: 22px;
		padding-left: 16px;
	}

	.bkl--locked .bkl__vault {
		padding: 16px;
	}

	.bkl--locked > .bkl__footer {
		padding: 12px 16px;
	}

	.bkl__meta {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* ── LE LOGO ANNONCE, IL NE DOMINE PAS ───────────────────────────── */

	.bkl__logo {
		max-height: 20px;
		margin-bottom: 8px;
	}

	.bkl__brand .bkl__logo {
		margin-bottom: 0;
	}
}

/* ⚠️ L'ÉTIQUETTE REMONTÉE AVAIT REPRIS SA TAILLE DE REPOS.

   La règle qui fait tenir « Votre prénom » sur une demi-largeur fixe une
   taille de 14 px. Elle a la MÊME spécificité que celle de l'étiquette
   remontée, et elle vient après : elle gagnait. Résultat, dès qu'on cliquait
   dans le champ, le libellé montait en 14 px capitales, débordait, et se
   coupait — « VOTRE PRÉNO… » en travers d'un champ de 170 px.

   L'état remonté est donc réaffirmé APRÈS, à la même largeur de règle. Une
   étiquette remontée est un repère, pas un titre : elle se fait petite. */

@media (max-width: 640px) {
	.bkl-ids--pair .bkl-field[data-bkl-row="first_name"] .bkl-input:focus ~ .bkl-field__lab,
	.bkl-ids--pair .bkl-field[data-bkl-row="first_name"] .bkl-input:not(:placeholder-shown) ~ .bkl-field__lab,
	.bkl-ids--pair .bkl-field[data-bkl-row="last_name"] .bkl-input:focus ~ .bkl-field__lab,
	.bkl-ids--pair .bkl-field[data-bkl-row="last_name"] .bkl-input:not(:placeholder-shown) ~ .bkl-field__lab {
		font-size: 10px;
		letter-spacing: 0.02em;
	}

	/* Et sur les champs pleine largeur, l'étiquette remontée descend elle
	   aussi d'un demi-point : elle n'a jamais eu besoin d'être lue de loin. */
	.bkl-ids .bkl-field--float .bkl-input:focus ~ .bkl-field__lab,
	.bkl-ids .bkl-field--float .bkl-input:not(:placeholder-shown) ~ .bkl-field__lab {
		font-size: 10px;
	}
}


/* ═══════════════════════ Les espaces entre les blocs (5.98.0)

   Deux reproches, opposés, sur la même page :

   1. « Le logo est souvent collé aux autres blocs. » Le bandeau de marque
      n'avait aucun espace sous lui — le compteur d'étape venait s'appuyer
      dessus. Un logo est une signature : il lui faut de l'air en dessous,
      sinon il se lit comme la première ligne du bloc suivant.

   2. « Le bloc argument : vraiment beaucoup trop de place avec le bloc
      précédent. » Quarante-six pixels séparaient l'accroche des arguments —
      la marge de l'accroche PLUS le retrait du filet. Deux espaces posés
      chacun de leur côté, qui s'additionnaient sans que personne l'ait voulu.

   On rend donc de l'air là où il manquait, et on en reprend là où il y en
   avait deux fois. */

.bkl--fullscreen .bkl__brand,
.bkl--locked .bkl__brand {
	padding-bottom: 10px;
}

.bkl__aside-sub {
	margin-bottom: 16px;
}

.bkl__proof {
	padding-top: 16px;
}

@media (max-width: 640px) {
	.bkl--fullscreen .bkl__brand,
	.bkl--locked .bkl__brand {
		padding-bottom: 8px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
 * LA FICHE DU MOTEUR : ENTIÈRE, COUCHÉE, OU ABSENTE
 *
 * Le portrait, le titre, la durée et le lieu sont rendus par le moteur de
 * réservation, dans son propre balisage. On ne le réécrit pas — on le couche.
 *
 * Pourquoi cela vaut la peine : sous ~380 px de large, ces calendriers passent
 * en disposition empilée et posent ce bandeau AU-DESSUS des dates. Mesuré chez
 * FluentBooking : 289 px de hauteur avant le premier jour, 809 px en tout. La
 * même colonne à 672 px de large tient en 452 px. Et à cet instant, le visiteur
 * a déjà donné son nom, son adresse et ses réponses : il vient choisir une
 * heure, pas relire avec qui.
 *
 * ⚠️ Les `!important` sont ici volontaires et nécessaires : on passe par-dessus
 * la feuille d'un autre plugin, chargée après la nôtre. Les sélecteurs restent
 * cadrés par `.bkl--ecard-*` : le jour où le moteur renomme ses blocs, la règle
 * ne s'applique plus — elle ne casse rien.
 * ------------------------------------------------------------------------- */

/* ⚠️ CES RÈGLES NE SONT PAS QUE L'OPTION « sur une ligne ».
 * Elles s'appliquent AUSSI d'elles-mêmes dès que le moteur empile
 * (`.fcal_mobile`, `.fcal_on_xs`) — c'est-à-dire exactement là où le bandeau
 * coûte 289 px au-dessus des dates. L'option, elle, force la ligne unique
 * même sur grand écran. Le déclencheur est la classe du moteur, donc la
 * largeur du CONTENEUR, jamais celle de l'appareil : un écran d'accès posé
 * dans une colonne étroite se comporte comme sur un téléphone, ce qui est
 * la bonne réponse.
 */

.bkl--ecard-off .fcal_side {
	display: none !important;
}

/* ⚠️ Le moteur impose `min-width: 360px` à son bandeau. En disposition empilée
   dans une colonne plus étroite, il DÉBORDE et se fait rogner en silence par
   l'`overflow: hidden` du parent — on perdait la fin de « 30 minutes » et de
   « Google Meet » sans le moindre signe. On lui rend la largeur de sa boîte. */
.bkl--ecard-compact .fcal_side,
.bkl .fcal_mobile .fcal_side,
.bkl .fcal_on_xs .fcal_side {
	width: 100% !important;
	min-width: 0 !important;
	padding: 14px 16px 0 !important;
}

/* DEUX LIGNES, ET PAS TROIS.
   Une grille d'UNE colonne : chaque rangée est une ligne, quelle que soit la
   longueur des textes — un flex qui se replie où il peut ne le garantit pas.
   Rangée 1 le portrait et le nom, rangée 2 la durée et le lieu CÔTE À CÔTE
   (ils restent dans `.fcal_slot_info`, qu'on passe simplement en flex : à deux
   colonnes de grille, ils se retrouvaient aux deux bouts de la carte, ce qui
   se voyait), rangée 3 la description. On ne touche pas au balisage du
   moteur. */
.bkl--ecard-compact .fcal_slot_wrapper,
.bkl .fcal_mobile .fcal_slot_wrapper,
.bkl .fcal_on_xs .fcal_slot_wrapper {
	display: grid;
	/* ⚠️ `minmax(0, 1fr)` et jamais `max-content` : une colonne de contenu pur
	   se laisse élargir par sa ligne la plus longue — la description a suffi à
	   pousser le lieu hors de la carte, et le parent a `overflow: hidden`,
	   donc il disparaissait sans un mot. Le plancher à zéro rend la colonne
	   compressible ; la largeur de la carte gagne. */
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	width: 100%;
	max-width: 100%;
	gap: 2px;
}

.bkl--ecard-compact .fcal_slot_info,
.bkl .fcal_mobile .fcal_slot_info,
.bkl .fcal_on_xs .fcal_slot_info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}

/* Ligne 1 : le portrait et le nom, sur toute la largeur. */
.bkl--ecard-compact .fcal_author,
.bkl .fcal_mobile .fcal_author,
.bkl .fcal_on_xs .fcal_author {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.bkl--ecard-compact .fcal_author_name,
.bkl .fcal_mobile .fcal_author_name,
.bkl .fcal_on_xs .fcal_author_name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.bkl--ecard-compact .fcal_author_avatar,
.bkl .fcal_mobile .fcal_author_avatar,
.bkl .fcal_on_xs .fcal_author_avatar,
.bkl--ecard-compact .fcal_author_avatar img,
.bkl .fcal_mobile .fcal_author_avatar img,
.bkl .fcal_on_xs .fcal_author_avatar img {
	width: 20px !important;
	height: 20px !important;
	min-width: 20px;
	margin: 0 !important;
}

/* Ligne 2 : la durée et le lieu — les deux seules choses qu'il lui reste à
   vérifier avant de cliquer sur une heure. Ils vivent dans `.fcal_slot_info`,
   passé en flex plus haut : ils sont donc côte à côte, et non plus aux deux
   bouts de la carte. */
.bkl--ecard-compact .slot_timing,
.bkl .fcal_mobile .slot_timing,
.bkl .fcal_on_xs .slot_timing {
	min-width: 0;
	margin: 0 !important;
}

.bkl--ecard-compact .slot_location,
.bkl .fcal_mobile .slot_location,
.bkl .fcal_on_xs .slot_location {
	min-width: 0;
	margin: 0 !important;
}

/* Le titre de l'événement sort : c'est le bloc le plus redondant ici — la page
   l'annonce déjà, et le rappel des réponses est juste à côté. Le garder,
   c'était une ligne de plus, ou un nom de personne coupé en plein milieu, ce
   qui est pire. « Fiche entière » reste là pour qui veut tout afficher. */
.bkl--ecard-compact .fcal_slot_heading,
.bkl .fcal_mobile .fcal_slot_heading,
.bkl .fcal_on_xs .fcal_slot_heading {
	display: none !important;
}

/* LA DESCRIPTION : UNE LIGNE, ET LA SUITE À LA DEMANDE.
 *
 * C'est le seul bloc de la fiche dont on ne peut pas décider à l'avance s'il
 * est utile : il est écrit par celui qui a créé l'événement. Le masquer lui
 * retire le droit d'exister, le laisser entier repousse les dates de
 * plusieurs lignes. Une ligne, puis un bouton — et le visiteur tranche.
 *
 * L'enveloppe `.bkl-desc` est posée par le script autour de la description du
 * moteur ; le bouton n'est montré que si la ligne unique cache vraiment
 * quelque chose. */
.bkl-desc {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.bkl--ecard-compact .bkl-desc,
.bkl .fcal_mobile .bkl-desc,
.bkl .fcal_on_xs .bkl-desc {
	grid-column: 1;
	grid-row: 3;
	min-width: 0;
	max-width: 100%;
}

.bkl--ecard-compact .fcal_slot_description,
.bkl .fcal_mobile .fcal_slot_description,
.bkl .fcal_on_xs .fcal_slot_description {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	overflow: hidden;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	font-size: 11px !important;
	line-height: 1.4 !important;
	color: var(--bkl-front-muted, #6b7280) !important;
}

.bkl--ecard-compact .bkl-desc.is-open,
.bkl .fcal_mobile .bkl-desc.is-open,
.bkl .fcal_on_xs .bkl-desc.is-open {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.bkl--ecard-compact .bkl-desc.is-open .fcal_slot_description,
.bkl .fcal_mobile .bkl-desc.is-open .fcal_slot_description,
.bkl .fcal_on_xs .bkl-desc.is-open .fcal_slot_description {
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

/* Un lien, pas un bouton dessiné : il ne doit rien disputer au calendrier. */
.bkl-desc__more {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bkl-accent, #2563eb);
	font: inherit;
	font-size: var(--bkl-fs-xs, 12px);
	text-decoration: underline;
	cursor: pointer;
}

.bkl-desc__more:hover {
	opacity: 0.75;
}

/* Hors disposition empilée, la description est entière : rien à replier. */
.bkl .bkl-desc__more {
	display: none;
}

.bkl--ecard-compact .bkl-desc__more,
.bkl .fcal_mobile .bkl-desc__more,
.bkl .fcal_on_xs .bkl-desc__more {
	display: inline;
}

.bkl .bkl-desc__more[hidden] {
	display: none !important;
}
/* LA TAILLE DES CARACTÈRES : ON DESCEND, ET C'EST VOULU.
 *
 * Cette fiche n'est plus là pour être lue, elle est là pour être vérifiée d'un
 * coup d'œil : le visiteur a déjà donné son nom et ses réponses, il vient
 * choisir une heure. Chaque point de police en moins est un pixel de hauteur
 * gagné avant la première date. La hiérarchie tient quand même — le nom en
 * gras, la durée et le lieu en dessous, la description en gris et minuscule.
 * Mesuré : la fiche passe de 130 px à 70 px, description comprise. */
.bkl--ecard-compact .slot_timing,
.bkl .fcal_mobile .slot_timing,
.bkl .fcal_on_xs .slot_timing,
.bkl--ecard-compact .slot_location,
.bkl .fcal_mobile .slot_location,
.bkl .fcal_on_xs .slot_location {
	gap: 5px !important;
	font-size: 12px !important;
	line-height: 1.3 !important;
}

/* Les pictogrammes du moteur suivent, sinon ils imposent leur propre hauteur
   de ligne et le gain de police ne sert à rien. */
.bkl--ecard-compact .slot_timing svg,
.bkl .fcal_mobile .slot_timing svg,
.bkl .fcal_on_xs .slot_timing svg,
.bkl--ecard-compact .slot_location svg,
.bkl .fcal_mobile .slot_location svg,
.bkl .fcal_on_xs .slot_location svg,
.bkl--ecard-compact .slot_location img,
.bkl .fcal_mobile .slot_location img,
.bkl .fcal_on_xs .slot_location img {
	width: 13px !important;
	height: 13px !important;
}

.bkl--ecard-compact .bkl-desc__more,
.bkl .fcal_mobile .bkl-desc__more,
.bkl .fcal_on_xs .bkl-desc__more {
	font-size: 11px;
}

/* ────────────────────────────────────────────────────────────────────────────
 * LE RAPPEL DE CE QU'IL VIENT DE DIRE
 *
 * Discret par construction : un filet, une étiquette en petites capitales, et
 * du texte. Pas de carte encadrée — elle rivaliserait avec le calendrier, qui
 * est la seule chose à faire à cet écran.
 * ------------------------------------------------------------------------- */

.bkl-resume {
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--bkl-border-light, #e9edf5);
	text-align: left;
}

.bkl-resume__head {
	margin: 0 0 8px;
	font-size: var(--bkl-fs-xs, 11px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bkl-text-hint, #8b93a7);
}

.bkl-resume__who {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin: 0 0 10px;
	font-size: var(--bkl-fs-sm, 13px);
	color: var(--bkl-text, #1f2937);
}

.bkl-resume__mail {
	color: var(--bkl-text-muted, #6b7280);
	word-break: break-word;
}

.bkl-resume__list {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bkl-resume__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin: 0;
	font-size: var(--bkl-fs-sm, 13px);
	line-height: 1.35;
}

.bkl-resume__q {
	color: var(--bkl-text-muted, #6b7280);
}

.bkl-resume__a {
	font-weight: 600;
	color: var(--bkl-text, #1f2937);
}

/* ────────────────────────────────────────────────────────────────────────────
 * LE THÈME HÔTE NE DOIT PAS DÉFIGURER LA FICHE DU MOTEUR
 *
 * Le titre du calendrier est un vrai `<h1>`. Il hérite donc du style de titre
 * du site qui l'accueille — et les thèmes vitrines calibrent ce style pour des
 * titres de 60 px : police d'affichage, graisse lourde, et surtout une approche
 * NÉGATIVE. Relevé sur bookingleads.pro : `Figtree 700`, approche `-2.4px`,
 * appliquée à un texte de 20 px. Les lettres se chevauchent, et le nom du
 * calendrier ressort écrasé à côté du nom de l'hôte, lui resté en police
 * système.
 *
 * On ne devine pas le thème : on rend simplement au composant la typographie
 * du composant. Cadré sous `.bkl`, donc sans effet ailleurs sur la page.
 * ------------------------------------------------------------------------- */

.bkl .fcal_cal_wrap h1,
.bkl .fcal_cal_wrap h2,
.bkl .fcal_cal_wrap h3,
.bkl .fcal_cal_wrap h4 {
	font-family: var(--bkl-font-sans, inherit);
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.3;
}

.bkl .fcal_slot_heading {
	margin: 0 0 2px;
	font-size: var(--bkl-fs-lg, 18px);
	font-weight: 700;
	color: var(--bkl-text, #1f2937);
}

.bkl .fcal_author_name {
	font-family: var(--bkl-font-sans, inherit);
	letter-spacing: normal;
}

/* ────────────────────────────────────────────────────────────────────────────
 * L'HABILLAGE DU CALENDRIER — `.bkl--skin`
 *
 * Jusqu'ici le visiteur franchissait une frontière : notre écran d'accès d'un
 * côté, le calendrier du moteur de l'autre, avec sa palette, ses rayons et ses
 * gris. La couture se voyait. On reprend donc la PEAU des cases, et rien
 * d'autre.
 *
 * Ce qu'on touche : la couleur des jours ouverts, celle du jour choisi, le
 * cerclage d'aujourd'hui, le rayon, la respiration entre les cases, et les
 * boutons de créneaux. Ce qu'on ne touche JAMAIS : la structure, le script, le
 * calcul des disponibilités, le fuseau horaire — tout cela reste au moteur.
 *
 * ⚠️ Les couleurs viennent des variables du thème de l'écran (`--bkl-primary`
 * et compagnie) : l'habillage suit donc automatiquement la palette choisie
 * dans l'onglet Affichage, y compris en marque blanche. Aucune couleur n'est
 * écrite en dur ailleurs que dans les valeurs de repli.
 *
 * ⚠️ Balisage visé, relevé sur FluentBooking : `.calendar-container` >
 * `.calendar` (grille de 7 colonnes) > `span.day.day-enabled | .day-disabled |
 * .day_is_selected` > `span` (c'est CE span intérieur qui porte la pastille,
 * et qui reçoit `.is-today`). Les créneaux : `button.fcal_spot_name`.
 * S'il renomme, la règle ne s'applique plus et le calendrier reprend son
 * apparence d'origine — c'est le comportement voulu.
 * ------------------------------------------------------------------------- */

/* Plus de place pour les cases : on récupère la marge du conteneur et on
   resserre l'écart. Mesuré : la case passe de 31 à 35 px de côté. */
.bkl--skin .fcal_cal_wrap .calendar-container {
	padding: 18px 12px !important;
}

.bkl--skin .fcal_cal_wrap .calendar {
	gap: 5px !important;
}

.bkl--skin .fcal_cal_wrap .day {
	width: auto !important;
	height: auto !important;
}

.bkl--skin .fcal_cal_wrap .day > span {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	border-radius: 9px !important;
	font-weight: 600 !important;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* Un jour ouvert : teinté, pas rempli. Le remplissage est réservé au jour
   choisi — sinon plus rien ne se distingue. */
.bkl--skin .fcal_cal_wrap .day.day-enabled > span {
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.1 ) !important;
	color: var( --bkl-primary-dark, #12288a ) !important;
	box-shadow: none !important;
}

.bkl--skin .fcal_cal_wrap .day.day-enabled > span:hover {
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.2 ) !important;
}

.bkl--skin .fcal_cal_wrap .day.day_is_selected > span {
	background: var( --bkl-primary, #1b3ed4 ) !important;
	color: #fff !important;
}

/* Aujourd'hui se cercle, il ne se remplit pas : ce n'est pas un choix, c'est
   un repère. */
.bkl--skin .fcal_cal_wrap .day > span.is-today {
	box-shadow: inset 0 0 0 1.5px var( --bkl-primary, #1b3ed4 ) !important;
	color: var( --bkl-primary, #1b3ed4 ) !important;
}

.bkl--skin .fcal_cal_wrap .day.day_is_selected > span.is-today {
	color: #fff !important;
}

/* Un jour fermé n'a aucune raison d'attirer l'œil. */
.bkl--skin .fcal_cal_wrap .day.day-disabled > span {
	background: transparent !important;
	box-shadow: none !important;
	font-weight: 400 !important;
}

.bkl--skin .fcal_cal_wrap .day-name {
	color: var( --bkl-front-muted, #6b7280 ) !important;
	font-weight: 600 !important;
}

/* Les créneaux : mêmes rayons, même bleu, même graisse que le reste. */
.bkl--skin .fcal_cal_wrap .fcal_spot_name {
	border-radius: 9px !important;
	border-color: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.35 ) !important;
	color: var( --bkl-primary-dark, #12288a ) !important;
	font-weight: 600 !important;
}

.bkl--skin .fcal_cal_wrap .fcal_spot_name:hover {
	border-color: var( --bkl-primary, #1b3ed4 ) !important;
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.08 ) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
 * L'HABILLAGE, MOTEUR PAR MOTEUR
 *
 * Chaque moteur a son propre balisage, relevé sur un calendrier RÉEL — jamais
 * deviné. Les sélecteurs restent ancrés sous la racine du moteur : une règle
 * qui ne trouve pas sa cible ne fait rien, et c'est le comportement voulu le
 * jour où l'un d'eux se réorganise.
 *
 * ⚠️ DEUX FAMILLES, ET ELLES NE SE TRAITENT PAS PAREIL :
 *
 * 1. La couleur ne dit QUE ouvert / fermé / choisi — Fluent Booking, Amelia,
 *    Hydra Booking. On repeint : rien ne se perd.
 *
 * 2. La couleur porte une LÉGENDE — Booking Calendar et WP Booking System
 *    affichent « disponible / réservé / en attente / partiellement réservé »,
 *    chacun avec sa teinte. Tout repeindre en bleu EFFACERAIT l'information et
 *    le visiteur ne saurait plus lire le calendrier. **On n'y touche donc
 *    qu'aux rayons et à la respiration.** C'est une décision, pas un oubli.
 * ------------------------------------------------------------------------- */

/* ── AMELIA — c'est du FullCalendar ─────────────────────────────────────────
 * `td.fc-daygrid-day` porte l'état, `.fc-daygrid-day-frame` porte la couleur :
 * exactement le schéma de Fluent Booking. */
.bkl--skin .amelia-v2-booking .fc-daygrid-day-frame {
	border-radius: 9px !important;
	transition: background-color 0.15s ease;
}

.bkl--skin .amelia-v2-booking td.fc-daygrid-day:not( .am-advsc__dayGridMonth-disabled ) .fc-daygrid-day-frame {
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.1 ) !important;
}

.bkl--skin .amelia-v2-booking td.fc-daygrid-day:not( .am-advsc__dayGridMonth-disabled ):hover .fc-daygrid-day-frame {
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.2 ) !important;
}

.bkl--skin .amelia-v2-booking td.fc-daygrid-day:not( .am-advsc__dayGridMonth-disabled ) .fc-daygrid-day-number {
	color: var( --bkl-primary-dark, #12288a ) !important;
	font-weight: 600 !important;
}

.bkl--skin .amelia-v2-booking td.fc-day-today .fc-daygrid-day-frame {
	box-shadow: inset 0 0 0 1.5px var( --bkl-primary, #1b3ed4 ) !important;
}

.bkl--skin .amelia-v2-booking td.am-advsc__dayGridMonth-disabled .fc-daygrid-day-frame {
	background: transparent !important;
}

/* ── HYDRA BOOKING — il se pilote par ses VARIABLES ────────────────────────
 * Découverte utile, et généralisable : ce moteur ne colore pas ses cases dans
 * des règles, il les tire de ses propres variables CSS (`--tfhb-*`). Écraser
 * ses fonds ne servait à rien — ses règles gagnaient. **On redéfinit ses
 * variables sous notre classe, et tout suit d'un coup** : cases, survols,
 * boutons, sélection.
 *
 * C'est plus propre qu'un empilement de `!important`, et bien plus solide : le
 * jour où il ajoute un écran, il héritera de nos couleurs sans qu'on écrive
 * une ligne. Chercher les variables d'un moteur AVANT d'écrire des sélecteurs.
 *
 * ⚠️ Ses classes d'état sont d'une généralité dangereuse (`current`, `active`,
 * `inactive`) : toute règle qui les vise reste ancrée sous
 * `.tfhb-calendar-dates`, sinon elle repeindrait n'importe quel menu de la
 * page hôte. */
.bkl--skin .tfhb-meeting-box {
	--tfhb-primary-color: var( --bkl-primary, #1b3ed4 );
	--tfhb-primary-hover-color: var( --bkl-primary-light, #2b59ff );
	--tfhb-secondary-color: var( --bkl-primary-dark, #12288a );
	--tfhb-surface-primary-color: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.18 );
	--tfhb-secondary-hover-color: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.1 );
	--tfhb-surface-background-color: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.05 );
}

.bkl--skin .tfhb-meeting-box .tfhb-calendar-dates li {
	border-radius: 9px !important;
	transition: background-color 0.15s ease;
}

/* ── BOOKING CALENDAR — la forme seulement ──────────────────────────────────
 * Ses couleurs SONT la légende (disponible, réservé, en attente, partiel).
 * On ne prend que le rayon et la respiration. */
.bkl--skin .wpbc_container .wpbc-cell-box {
	border-radius: 8px !important;
}

.bkl--skin .wpbc_container td.datepick-days-cell {
	padding: 2px !important;
}

/* ── WP BOOKING SYSTEM — la forme seulement, même raison ────────────────── */
.bkl--skin .wpbs-main-wrapper .wpbs-date-inner {
	border-radius: 8px !important;
}

/* ── BOOKLY — pas de grille de mois, une liste de créneaux ──────────────────
 * Son étape 2 n'affiche PAS un calendrier mensuel : elle liste les créneaux
 * groupés par jour. Les deux seules pièces qui portent la couleur sont donc
 * l'en-tête de jour et la pastille d'heure.
 *
 * ⚠️ Bookly migre vers des classes utilitaires (`bookly:bg-white`,
 * `bookly:rounded`). On ne s'appuie QUE sur ses classes sémantiques
 * (`.bookly-day`, `.bookly-hour`, `.bookly-btn`) : les utilitaires changent au
 * gré de leur mise en page, et une règle assise dessus casserait sans bruit. */
.bkl--skin .bookly-css-root .bookly-day,
.bkl--skin .bookly-css-root .bookly-btn {
	background: var( --bkl-primary, #1b3ed4 ) !important;
	border-radius: 8px !important;
}

.bkl--skin .bookly-css-root .bookly-hour {
	border-radius: 8px !important;
	border-color: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.35 ) !important;
	color: var( --bkl-primary-dark, #12288a ) !important;
}

.bkl--skin .bookly-css-root .bookly-hour:hover {
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.08 ) !important;
	border-color: var( --bkl-primary, #1b3ed4 ) !important;
}

/* ── BOOKINGPRESS — c'est du VCalendar ──────────────────────────────────────
 * `.vc-day` porte la case, `.vc-day-content` porte la pastille. Encore le même
 * schéma que Fluent Booking et Amelia : l'état d'un côté, la couleur de
 * l'autre. */
.bkl--skin .bpa-frontend-main-container .vc-day-content {
	border-radius: 9px !important;
	transition: background-color 0.15s ease;
}

.bkl--skin .bpa-frontend-main-container .vc-day-content:not( .vc-disabled ):not( .vc-highlight ) {
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.1 ) !important;
	color: var( --bkl-primary-dark, #12288a ) !important;
	font-weight: 600 !important;
}

.bkl--skin .bpa-frontend-main-container .vc-highlight {
	background: var( --bkl-primary, #1b3ed4 ) !important;
	border-radius: 9px !important;
}

.bkl--skin .bpa-frontend-main-container .vc-day-content.vc-disabled {
	background: transparent !important;
}

/* ── EASY APPOINTMENTS — c'est le sélecteur de dates de jQuery UI ───────────
 * Le plus stable de tous : ce composant n'a pas changé depuis dix ans. */
.bkl--skin .ea-bootstrap .ui-datepicker td .ui-state-default {
	border-radius: 8px !important;
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.1 ) !important;
	color: var( --bkl-primary-dark, #12288a ) !important;
	font-weight: 600 !important;
	transition: background-color 0.15s ease;
}

.bkl--skin .ea-bootstrap .ui-datepicker td .ui-state-default:hover {
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.2 ) !important;
}

.bkl--skin .ea-bootstrap .ui-datepicker td .ui-state-active,
.bkl--skin .ea-bootstrap .ui-datepicker td .ui-state-highlight {
	background: var( --bkl-primary, #1b3ed4 ) !important;
	color: #fff !important;
}

.bkl--skin .ea-bootstrap .ui-datepicker td.ui-state-disabled .ui-state-default,
.bkl--skin .ea-bootstrap .ui-datepicker td.ui-datepicker-unselectable .ui-state-default {
	background: transparent !important;
	font-weight: 400 !important;
}

/* ── SIMPLY SCHEDULE APPOINTMENTS — l'iframe du MÊME site ───────────────────
 * ⚠️ Contre-exemple précieux : SSA rend son calendrier dans une iframe, mais
 * cette iframe est servie par le site LUI-MÊME
 * (`/wp-json/ssa/v1/embed-inner`). Même origine, donc atteignable — pas par
 * le CSS, qui ne franchit jamais une iframe, mais par le SCRIPT, qui le peut
 * quand l'origine est la même.
 *
 * **Une iframe n'est donc pas une porte fermée : c'est l'ORIGINE qui décide.**
 * Ces règles-ci sont injectées dans le document de l'iframe par
 * `skinSameOriginFrames()` — elles ne servent à rien dans la page mère. */
.bkl-skin-frame .book-day button,
.bkl-skin-frame .book-day .md-whiteframe {
	border-radius: 9px !important;
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.1 ) !important;
	color: var( --bkl-primary-dark, #12288a ) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
 * DEUX COLONNES, JAMAIS TROIS — LE GABARIT ÉTENDU À TOUS LES MOTEURS
 *
 * Le problème, dit par le client : « il ne doit pas se retrouver avec trois
 * colonnes ». Aujourd'hui il en voit trois — l'écran d'accès qui annonce que
 * c'est ouvert, le panneau d'identité du moteur (photo, titre, durée, lieu,
 * fuseau), puis le calendrier. **Le panneau du milieu ne sert plus à rien à
 * cet instant** : tout le travail a été fait en amont. Et c'est lui qui vole
 * la largeur, donc qui pousse le calendrier en disposition empilée, donc qui
 * coûte la hauteur — sur téléphone surtout.
 *
 * On applique donc à chaque moteur le gabarit écrit pour Fluent Booking : le
 * panneau se couche en bandeau au-dessus des dates, ou disparaît. Il reste
 * DEUX colonnes : l'écran d'accès, et le calendrier.
 *
 * ⚠️ DEUX SORTES DE PANNEAUX, ET ILS NE SE TRAITENT PAS PAREIL :
 *
 * — Les panneaux d'IDENTITÉ (photo, titre, durée, lieu) portent une
 *   information qu'on peut coucher sur une ligne : Fluent Booking, Hydra.
 * — Les panneaux d'ÉTAPES (Amelia, BookingPress) et les bandeaux de RÉSUMÉ
 *   (Radius) n'ont pas de forme courte : les coucher ne donnerait rien de
 *   lisible. On les masque, et le calendrier prend toute la place.
 * ------------------------------------------------------------------------- */

/* ── HYDRA BOOKING — le panneau se couche ───────────────────────────────────
 * Mesuré : le panneau passe de 450 px de HAUTEUR et 323 px de largeur volée
 * à un bandeau de 76 px sur toute la largeur. Le calendrier récupère la
 * colonne entière. */
.bkl--ecard-compact .tfhb-meeting-card,
.bkl .fcal_mobile .tfhb-meeting-card,
.bkl .fcal_on_xs .tfhb-meeting-card,
.bkl--skin .tfhb-meeting-card {
	flex-direction: column !important;
}

.bkl--skin .tfhb-meeting-info {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	width: 100% !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	padding: 12px 16px 8px !important;
	border-right: 0 !important;
}

/* La bannière décorative de l'hôte n'a rien à faire dans un bandeau. */
.bkl--skin .tfhb-meeting-info .hidden-field,
.bkl--skin .tfhb-meeting-info [class*="banner"],
.bkl--skin .tfhb-meeting-info [class*="cover"] {
	display: none !important;
}

.bkl--skin .tfhb-meeting-info .tfhb-host-info {
	display: flex !important;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

.bkl--skin .tfhb-meeting-info .tfhb-host-info * {
	font-size: 13px !important;
	font-weight: 600 !important;
}

.bkl--skin .tfhb-meeting-info .tfhb-host-info img,
.bkl--skin .tfhb-meeting-info .tfhb-host-info svg {
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
}

.bkl--skin .tfhb-meeting-details {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 14px;
	flex: 1 1 auto;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bkl--skin .tfhb-meeting-details > *,
.bkl--skin .tfhb-meeting-details h1,
.bkl--skin .tfhb-meeting-details h2,
.bkl--skin .tfhb-meeting-details h3,
.bkl--skin .tfhb-meeting-details h4,
.bkl--skin .tfhb-meeting-details p {
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 1.3 !important;
}

.bkl--skin .tfhb-meeting-details svg {
	width: 13px !important;
	height: 13px !important;
}

.bkl--skin .tfhb-calander-times {
	width: 100% !important;
	flex: 1 1 auto !important;
}

/* ── LES PANNEAUX SANS FORME COURTE — on les retire ─────────────────────────
 * Amelia et BookingPress affichent un fil d'étapes ; Radius un résumé de la
 * commande en cours. Aucun des trois n'a de version « sur une ligne » qui
 * resterait lisible. Les masquer rend la largeur au calendrier, et l'écran
 * d'accès dit déjà où en est le visiteur. */
.bkl--ecard-off .am-fs-sb,
.bkl--ecard-compact .am-fs-sb,
.bkl .fcal_mobile .am-fs-sb,
.bkl .fcal_on_xs .am-fs-sb,
.bkl--ecard-off .bpa-front-tab-menu,
.bkl--ecard-compact .bpa-front-tab-menu,
.bkl .fcal_mobile .bpa-front-tab-menu,
.bkl .fcal_on_xs .bpa-front-tab-menu,
.bkl--ecard-off .rtrb-booking-status,
.bkl--ecard-compact .rtrb-booking-status,
.bkl .fcal_mobile .rtrb-booking-status,
.bkl .fcal_on_xs .rtrb-booking-status {
	display: none !important;
}

/* ── SIMPLY SCHEDULE APPOINTMENTS — dans son iframe du même site ───────────
 * Son en-tête répète le titre et la durée, déjà connus du visiteur. */
.bkl-skin-frame .ssa-booking-title,
.bkl-skin-frame [class*="event-details"],
.bkl-skin-frame [class*="appointment-type-header"] {
	display: none !important;
}

/* ────────────────────────────────────────────────────────────────────────────
 * LE CALENDRIER REMPLIT LA PLACE QU'ON LUI DONNE
 *
 * Dit par le client : « peu importe le plugin, toute la zone doit être
 * remplie ». Le constat est juste — chaque moteur impose SA largeur (Fluent
 * Booking bloque sa grille à 272 px, Hydra à 536) et flotte ensuite au milieu
 * de la colonne qu'on lui offre, avec du vide autour.
 *
 * On leur retire donc leur largeur imposée, et on étire la grille des jours
 * sur sept colonnes égales, cases carrées. Le calendrier suit alors la
 * colonne, quelle qu'elle soit — c'est ça, être responsive.
 *
 * ⚠️ On ne touche QUE la largeur et la grille. Ni la structure, ni le script,
 * ni le calcul des disponibilités. Et rien de tout cela ne s'applique aux
 * iframes d'un autre domaine : Calendly garde sa mise en page, on ne peut pas
 * la lui reprendre.
 * ------------------------------------------------------------------------- */

/* Les conteneurs qui bloquent la largeur, moteur par moteur. */
.bkl--skin .fcal_cal_wrap,
.bkl--skin .fcal_calendar_inner,
.bkl--skin .fcal_side,
.bkl--skin .fcal_day_picker,
.bkl--skin .fcal_day_picker .calendar-container,
.bkl--skin .amelia-v2-booking .am-fs,
.bkl--skin .amelia-v2-booking .am-fs-main,
.bkl--skin .tfhb-meeting-box,
.bkl--skin .tfhb-meeting-card,
.bkl--skin .tfhb-calander-times,
.bkl--skin .tfhb-meeting-calendar,
.bkl--skin .tfhb-calendar-container,
.bkl--skin .bpa-frontend-main-container,
.bkl--skin .bpa-frontend-main-booking-calendar,
.bkl--skin .ea-bootstrap,
.bkl--skin .ea-bootstrap .ui-datepicker,
.bkl--skin .wpbc_container,
.bkl--skin .wpbs-main-wrapper,
.bkl--skin .radius-booking,
.bkl--skin .bookly-css-root {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* Fluent Booking — la grille des sept jours s'étire, les cases restent carrées. */
.bkl--skin .fcal_cal_wrap .calendar {
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) ) !important;
	width: 100% !important;
}

/* Amelia — FullCalendar sait déjà s'étirer ; il lui manque juste la largeur. */
.bkl--skin .amelia-v2-booking .fc,
.bkl--skin .amelia-v2-booking .fc-view-harness,
.bkl--skin .amelia-v2-booking .fc-scrollgrid {
	width: 100% !important;
}

/* Easy Appointments — le sélecteur de jQuery UI a une largeur en dur. */
.bkl--skin .ea-bootstrap .ui-datepicker,
.bkl--skin .ea-bootstrap .ui-datepicker-calendar {
	width: 100% !important;
}

.bkl--skin .ea-bootstrap .ui-datepicker-calendar td {
	width: 14.28% !important;
}

.bkl--skin .ea-bootstrap .ui-datepicker td .ui-state-default {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	aspect-ratio: 1 / 1;
}

/* Hydra — sa grille de dates est une liste : on l'étire en sept colonnes. */
.bkl--skin .tfhb-meeting-box .tfhb-calendar-dates {
	display: grid !important;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) ) !important;
	width: 100% !important;
}

.bkl--skin .tfhb-meeting-box .tfhb-calendar-dates li {
	width: 100% !important;
	aspect-ratio: 1 / 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* BookingPress — VCalendar accepte de s'étirer, il faut le lui dire. */
.bkl--skin .bpa-frontend-main-container .vc-container,
.bkl--skin .bpa-frontend-main-container .vc-pane,
.bkl--skin .bpa-frontend-main-container .vc-weeks {
	width: 100% !important;
	max-width: none !important;
}

.bkl--skin .bpa-frontend-main-container .vc-day-content {
	width: 100% !important;
	aspect-ratio: 1 / 1;
}

/* Booking Calendar et WP Booking System — la forme seulement, mais la largeur
   aussi : remplir la colonne ne change aucune couleur, donc aucune légende. */
.bkl--skin .wpbc_container .datepick,
.bkl--skin .wpbc_container table,
.bkl--skin .wpbs-main-wrapper table,
.bkl--skin .wpbs-main-wrapper .wpbs-calendar {
	width: 100% !important;
}

.bkl--skin .wpbc_container .wpbc-cell-box,
.bkl--skin .wpbs-main-wrapper .wpbs-date-inner {
	width: 100% !important;
	aspect-ratio: 1 / 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* ────────────────────────────────────────────────────────────────────────────
 * LE RELEVÉ EN CONDITIONS RÉELLES — CE QUE LA PAGE A CORRIGÉ
 *
 * Tout ce qui suit a été écrit DEVANT le rendu, moteur par moteur, sur la page
 * d'essai du site de développement, colonne bloquée à 560 px — la largeur que
 * BookingLeads offre réellement à droite. Chaque règle répare quelque chose
 * qui a été VU, pas supposé.
 *
 * ⚠️ LA LEÇON DE CE PASSAGE, ET ELLE VAUT POUR TOUTE RÈGLE FUTURE :
 * `!important` ne suffit pas. Entre deux déclarations `!important`, c'est la
 * SPÉCIFICITÉ qui tranche, l'ordre ne sert que de départage. BookingPress
 * écrit `.bpa-front--dt__calendar .vc-day .vc-highlights .vc-day-layer
 * .vc-highlight` (cinq classes) : notre règle à trois classes perdait en
 * silence, et le calendrier restait vert. **Il faut donc au moins égaler la
 * chaîne du moteur.** C'est pour ça que les sélecteurs ci-dessous sont longs.
 * ------------------------------------------------------------------------- */

/* ── AMELIA — sa carte s'arrêtait à 520 px et son grillage se coupait ───────
 * `.am-fs__main` porte un `max-width: 520px`, et FullCalendar s'enferme dans
 * un défilement interne à hauteur fixe : le mois débordait avec une barre de
 * défilement au lieu de s'étaler. On rend la hauteur au flux. */
.bkl--skin .amelia-v2-booking .am-fs__main,
.bkl--skin .amelia-v2-booking .am-fs__wrapper,
.bkl--skin .amelia-v2-booking .am-fs__main-inner {
	max-width: none !important;
	width: 100% !important;
}

.bkl--skin .amelia-v2-booking .am-fs-dt__calendar.am-fs__main-content {
	padding-left: 14px !important;
	padding-right: 14px !important;
}

.bkl--skin .amelia-v2-booking .fc-view-harness,
.bkl--skin .amelia-v2-booking .fc-scroller-harness,
.bkl--skin .amelia-v2-booking .fc-scroller,
.bkl--skin .amelia-v2-booking .fc-scroller-liquid-absolute {
	height: auto !important;
	overflow: visible !important;
	position: static !important;
}

/* Le contour de la case restait bleu Amelia (`rgba(38,92,242,.6)`). */
.bkl--skin .amelia-v2-booking .fc-daygrid-day-frame {
	border-color: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.28 ) !important;
	min-height: 42px !important;
}

.bkl--skin .amelia-v2-booking td.am-advsc__dayGridMonth-disabled .fc-daygrid-day-frame {
	border-color: transparent !important;
}

.bkl--skin .amelia-v2-booking .am-button--primary,
.bkl--skin .amelia-v2-booking button.am-fs__footer-button,
.bkl--skin .amelia-v2-booking .el-button--primary {
	background: var( --bkl-primary, #1b3ed4 ) !important;
	border-color: var( --bkl-primary, #1b3ed4 ) !important;
}

/* ── BOOKLY — il restait deux orangés ───────────────────────────────────────
 * Les cases et les créneaux prenaient bien le thème, mais la barre d'étapes
 * et le liseré du jour gardaient l'orange de la marque. */
.bkl--skin .bookly-form .bookly-progress-tracker > div.active {
	color: var( --bkl-primary, #1b3ed4 ) !important;
}

.bkl--skin .bookly-form .bookly-progress-tracker > div.active .step {
	background: var( --bkl-primary, #1b3ed4 ) !important;
}

.bkl--skin .bookly-form .bookly-day {
	border-color: var( --bkl-primary, #1b3ed4 ) !important;
}

/* ── BOOKINGPRESS — il se pilote par ses VARIABLES, comme Hydra ─────────────
 * Découverte du relevé : tout son vert sort de `--bpa-pt-main-green`. On le
 * redéfinit, et la marque entière suit — cases, boutons, liserés, survols —
 * sans avoir à courir après chaque sélecteur. Les règles nominatives qui
 * suivent ne servent qu'aux endroits où le moteur écrit la couleur en dur. */
.bkl--skin .bpa-frontend-main-container,
.bkl--skin .bpa-frontend-vue3-root,
.bkl--skin .bookingpress_front_wrapper {
	--bpa-pt-main-green: var( --bkl-primary, #1b3ed4 );
	--bpa-pt-main-green-darker: var( --bkl-primary-dark, #12288a );
	--bpa-pt-main-green-alpha-08: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.08 );
	--bpa-pt-main-green-alpha-12: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.12 );
	--bpa-sc-success: var( --bkl-success, #27ae60 );
}

/* Ces quatre-là égalent la chaîne du moteur — voir l'avertissement en tête. */
.bkl--skin .bpa-frontend-main-container .bpa-front--dt__calendar .vc-day .vc-highlights .vc-day-layer .vc-highlight.vc-highlight-bg-solid,
.bkl--skin .bpa-frontend-main-container .bpa-front--dt__calendar .vc-day .vc-highlight {
	background: var( --bkl-primary, #1b3ed4 ) !important;
	border-color: var( --bkl-primary, #1b3ed4 ) !important;
	border-radius: 9px !important;
}

.bkl--skin .bpa-frontend-main-container .bpa-front--dt__calendar .vc-day .vc-day-content:not( .is-disabled ):not( .vc-highlight-content-solid ) {
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.1 ) !important;
	color: var( --bkl-primary-dark, #12288a ) !important;
	font-weight: 600 !important;
	border-radius: 9px !important;
}

.bkl--skin .bpa-frontend-main-container .bpa-front--dt__calendar .vc-day .vc-day-content.is-disabled {
	background: transparent !important;
}

.bkl--skin .bpa-frontend-main-container .bpa-front--dt__calendar .vc-day .vc-day-content.vc-highlight-content-solid {
	background: transparent !important;
	color: #fff !important;
}

.bkl--skin .bpa-frontend-main-container .bpa-front--dt__ts-body--item:hover,
.bkl--skin .bpa-frontend-main-container .bpa-front--dt__ts-body--item.bpa-front--ts-item-selected,
.bkl--skin .bpa-frontend-main-container .bpa-front--dt__ts-body--item.is-selected {
	border-color: var( --bkl-primary, #1b3ed4 ) !important;
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.08 ) !important;
	color: var( --bkl-primary-dark, #12288a ) !important;
}

.bkl--skin .bpa-frontend-main-container .vc-weekday {
	color: var( --bkl-text-muted, #6b7a90 ) !important;
}

.bkl--skin .bpa-frontend-main-container .bpa-front--dt__wrapper {
	display: block !important;
}

/* ── LATEPOINT — le panneau de gauche ET le récapitulatif de droite ─────────
 * Il en pose DEUX, un de chaque côté : il faut masquer les deux pour qu'il ne
 * reste que le calendrier. */
.bkl--ecard-off .latepoint-side-panel,
.bkl--ecard-compact .latepoint-side-panel,
.bkl--skin .latepoint-side-panel,
.bkl--ecard-off .latepoint-summary-w,
.bkl--ecard-compact .latepoint-summary-w,
.bkl--skin .latepoint-summary-w {
	display: none !important;
}

.bkl--skin .latepoint-w,
.bkl--skin .latepoint-content-w,
.bkl--skin .latepoint-body {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.bkl--skin .latepoint-w .os-monthly-calendar-days,
.bkl--skin .latepoint-w .os-weekdays {
	display: grid !important;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) ) !important;
	width: 100% !important;
}

.bkl--skin .latepoint-w .os-monthly-calendar-days .os-day,
.bkl--skin .latepoint-w .os-weekdays .weekday {
	width: auto !important;
	min-width: 0 !important;
	flex: none !important;
	box-sizing: border-box;
}

.bkl--skin .latepoint-w .os-day .os-day-box {
	border-radius: 9px !important;
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.1 ) !important;
	color: var( --bkl-primary-dark, #12288a ) !important;
	min-height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bkl--skin .latepoint-w .os-day.os-day-disabled .os-day-box,
.bkl--skin .latepoint-w .os-day.disabled .os-day-box {
	background: transparent !important;
}

.bkl--skin .latepoint-w .os-day.selected .os-day-box,
.bkl--skin .latepoint-w .os-day.os-day-selected .os-day-box {
	background: var( --bkl-primary, #1b3ed4 ) !important;
	color: #fff !important;
}

/* ── SIMPLY SCHEDULE APPOINTMENTS — dans son iframe de MÊME ORIGINE ─────────
 * L'en-tête d'identité (titre du rendez-vous, durée) est justement la colonne
 * du milieu dont le client ne veut plus : elle disparaît, le calendrier reste.
 * Les flèches et le bouton d'envoi gardaient le vert du moteur. */
.bkl-skin-frame .booking-header {
	display: none !important;
}

.bkl-skin-frame .book-day button,
.bkl-skin-frame .book-day .md-whiteframe {
	border-radius: 9px !important;
}

.bkl-skin-frame .material-icons,
.bkl-skin-frame .mdc-icon-button {
	color: var( --bkl-primary, #1b3ed4 ) !important;
}

.bkl-skin-frame .app-wrapper,
.bkl-skin-frame .booking,
.bkl-skin-frame .md-layout-item {
	max-width: none !important;
}

.bkl-skin-frame button.mdc-button--raised,
.bkl-skin-frame .mdc-button--unelevated {
	background: var( --bkl-primary, #1b3ed4 ) !important;
}

/* ── HYDRA BOOKING — le bandeau, et le décor qui traînait derrière ──────────
 * Trois choses vues à l'écran : un dégradé vert peint par
 * `.tfhb-timezone::before` couvrait tout le bandeau ; un voile sombre
 * (`.tfhb-host-info::after`) passait derrière le nom de l'hôte ; et les cases
 * du mois en cours mais déjà passées poussaient leur pastille À CÔTÉ du
 * chiffre au lieu de derrière — leur `::after` retombait en `position:
 * static` et devenait un frère dans la boîte flexible. */
.bkl--skin .tfhb-meeting-info {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 4px 14px !important;
	padding: 10px 14px !important;
	border-right: 0 !important;
	border-bottom: 1px solid var( --bkl-border-light, rgba( 0, 0, 0, 0.08 ) ) !important;
	background: transparent !important;
}

.bkl--skin .tfhb-meeting-info::before,
.bkl--skin .tfhb-meeting-info::after,
.bkl--skin .tfhb-host-info::before,
.bkl--skin .tfhb-host-info::after,
.bkl--skin .tfhb-host-profile::before,
.bkl--skin .tfhb-host-profile::after,
.bkl--skin .tfhb-meeting-info .tfhb-timezone::before {
	display: none !important;
	content: none !important;
	background-image: none !important;
}

.bkl--skin .tfhb-host-info {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	width: auto !important;
}

.bkl--skin .tfhb-host-info img {
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
}

.bkl--skin .tfhb-host-name {
	font-size: 12px !important;
	line-height: 20px !important;
	font-weight: 600 !important;
	color: var( --bkl-text, #2c3e50 ) !important;
	background: transparent !important;
	white-space: nowrap;
}

.bkl--skin .tfhb-meeting-details {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 4px 14px !important;
	flex: 1 1 auto !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

.bkl--skin .tfhb-meeting-details h2 {
	font-size: 12px !important;
	line-height: 20px !important;
	margin: 0 !important;
	font-weight: 600 !important;
}

.bkl--skin .tfhb-meeting-details > div,
.bkl--skin .tfhb-meeting-details > p,
.bkl--skin .tfhb-meeting-details span {
	font-size: 11px !important;
	line-height: 18px !important;
	margin: 0 !important;
}

.bkl--skin .tfhb-meeting-info .tfhb-timezone,
.bkl--skin .tfhb-meeting-info .tfhb-timezone-tabs,
.bkl--skin .tfhb-meeting-info [class*="timezone"] {
	font-size: 11px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	position: static !important;
	width: auto !important;
}

.bkl--skin .tfhb-meeting-info .tfhb-timezone .select2-container,
.bkl--skin .tfhb-meeting-info .select2-selection {
	border: 0 !important;
	background: transparent !important;
	height: auto !important;
	min-height: 0 !important;
}

.bkl--skin .tfhb-calendar-navigation::before {
	background-image: linear-gradient( to right bottom, rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0 ), rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.18 ), rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0 ) ) !important;
}

.bkl--skin .tfhb-meeting-box .tfhb-calendar-dates li {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	z-index: 0;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	box-sizing: border-box;
}

.bkl--skin .tfhb-meeting-box .tfhb-calendar-dates li::after {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
	margin: 0 !important;
	border-radius: 9px !important;
	z-index: -1 !important;
}

.bkl--skin .tfhb-meeting-box .tfhb-calendar-dates li.inactive,
.bkl--skin .tfhb-meeting-box .tfhb-calendar-dates li.current.inactive {
	color: var( --bkl-text-hint, #93a1af ) !important;
	background: transparent !important;
}

.bkl--skin .tfhb-meeting-box .tfhb-calendar-dates li.inactive span,
.bkl--skin .tfhb-meeting-box .tfhb-calendar-dates li.current.inactive span {
	color: var( --bkl-text-hint, #93a1af ) !important;
}

.bkl--skin .tfhb-meeting-box .tfhb-calendar-dates li.inactive::after,
.bkl--skin .tfhb-meeting-box .tfhb-calendar-dates li.current.inactive::after {
	display: none !important;
	content: none !important;
}

/* ── BOOKING CALENDAR — il posait le mois à 238 px à côté du formulaire ─────
 * Sa rangée est une boîte flexible : calendrier à gauche, champs à droite,
 * dans une colonne de 560 px. On la couche, le mois prend toute la largeur,
 * les champs passent dessous. **Les couleurs ne bougent pas** : elles portent
 * la légende (disponible / réservé / en attente / partiel). */
.bkl--skin .wpbc_container .wpbc__row {
	flex-direction: column !important;
}

.bkl--skin .wpbc_container .wpbc__field,
.bkl--skin .wpbc_container .bfb_element,
.bkl--skin .wpbc_container .wpbc_calendar_wraper,
.bkl--skin .wpbc_container .wpbc_cal_container,
.bkl--skin .wpbc_container .hasDatepick,
.bkl--skin .wpbc_container .datepick-inline {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.bkl--skin .wpbc_container .datepick-inline .datepick-month table {
	width: 100% !important;
}

.bkl--skin .wpbc_container .datepick-inline td.datepick-days-cell {
	width: 14.28% !important;
}

.bkl--skin .wpbc_container .datepick-inline .wpbc-cell-box {
	width: 100% !important;
	min-height: 34px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 9px !important;
}

/* ── WP BOOKING SYSTEM — le mois à 380 px, la légende collée au flanc ───────
 * Même décision que ci-dessus pour la couleur. La légende passe dessous. */
.bkl--skin .wpbs-main-wrapper .wpbs-calendars-wrapper,
.bkl--skin .wpbs-main-wrapper .wpbs-calendars,
.bkl--skin .wpbs-main-wrapper .wpbs-calendar,
.bkl--skin .wpbs-main-wrapper .wpbs-calendar-wrapper,
.bkl--skin .wpbs-main-wrapper .wpbs-calendar-wrapper > table {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.bkl--skin .wpbs-main-wrapper .wpbs-calendars-wrapper.wpbs-legend-position-side {
	display: block !important;
}

.bkl--skin .wpbs-main-wrapper .wpbs-calendar-wrapper > table td {
	width: 14.28% !important;
}

.bkl--skin .wpbs-main-wrapper .wpbs-date {
	width: 100% !important;
}

.bkl--skin .wpbs-main-wrapper .wpbs-date > .wpbs-date-inner {
	border-radius: 9px !important;
}

.bkl--skin .wpbs-main-wrapper .wpbs-legend {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 10px !important;
	padding-left: 0 !important;
}

.bkl--skin .wpbs-main-wrapper .wpbs-legend > * {
	float: none !important;
	width: auto !important;
}

/* ── RADIUS BOOKING — CORRECTION D'UN VERDICT ──────────────────────────────
 * Le premier relevé le donnait pour impossible : ses cases sont écrites en
 * utilitaires Tailwind (`w-[34px]`, `bg-[#EDF2FF]`), donc sans prise stable.
 * **C'était faux.** La grille des jours porte une classe sémantique bien à
 * elle — `.rtrb-step-calender` (leur faute de frappe, pas la nôtre) — et les
 * cases en sont les enfants directs. Il y a donc une prise, et Radius se
 * traite comme les autres. */
.bkl--skin .rtrb-appointment-form > div:not( .rtrb-booking-status ) {
	width: 100% !important;
	max-width: none !important;
	flex: 1 1 auto !important;
}

.bkl--skin .rtrb-appointment-form .rtrb-step-calender {
	width: 100% !important;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) ) !important;
}

.bkl--skin .rtrb-appointment-form .rtrb-step-calender > button {
	width: 100% !important;
	min-width: 0 !important;
	border-radius: 9px !important;
	border-color: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.35 ) !important;
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.1 ) !important;
	color: var( --bkl-primary-dark, #12288a ) !important;
	font-weight: 600 !important;
}

.bkl--skin .rtrb-appointment-form .rtrb-step-calender > button:disabled,
.bkl--skin .rtrb-appointment-form .rtrb-step-calender > button[disabled] {
	background: transparent !important;
	border-color: transparent !important;
	color: var( --bkl-text-hint, #93a1af ) !important;
}

.bkl--skin .rtrb-appointment-form .rtrb-step-calender > button[aria-selected="true"],
.bkl--skin .rtrb-appointment-form .rtrb-step-calender > button.rtrb-selected {
	background: var( --bkl-primary, #1b3ed4 ) !important;
	border-color: var( --bkl-primary, #1b3ed4 ) !important;
	color: #fff !important;
}

/* ────────────────────────────────────────────────────────────────────────────
 * LA LARGEUR, MESURÉE — PAS JUGÉE À L'ŒIL
 *
 * Reprise du client : « il y en a une bonne partie qui ne prend pas toute la
 * largeur… et pour Easy Appointments c'est l'inverse, le calendrier sort de
 * l'espace alloué. » Il avait raison sur les deux points.
 *
 * ⚠️⚠️ DEUX LEÇONS DE MÉTHODE, À NE PAS REPERDRE :
 *
 * 1. **Le banc d'essai doit contraindre la COLONNE, pas chaque moteur.**
 *    Bloquer chaque racine à 560 px produit de faux débordements : sur Easy
 *    Appointments, `.ea-bootstrap` désigne DEUX éléments imbriqués, et forcer
 *    les deux à 560 faisait sortir l'intérieur du rembourrage de l'extérieur.
 *    On met la largeur sur `.entry-content` et on laisse chaque moteur suivre.
 *
 * 2. **`width: 100%` ne peut RIEN contre un `flex-basis`.** LatePoint pose
 *    `flex: 0 0 470px` sur sa colonne de formulaire : notre `width: 100%`
 *    passait sans effet et la colonne restait à 470 px dans 560. Il faut
 *    écrire `flex: 1 1 auto`. Devant une largeur qui refuse de bouger dans une
 *    boîte flexible, regarder la BASE, pas la largeur.
 *
 * 3. Une barre de défilement interne mange 15 px et rend la marge ASYMÉTRIQUE
 *    (Radius : 11 px à gauche, 26 à droite). Une asymétrie de cet ordre est
 *    presque toujours ça. On rend la hauteur au flux.
 *
 * Cible tenue : la grille des jours occupe **95 % à 99 % de la colonne, avec
 * des marges égales**. Le reste est le rembourrage de carte du moteur, et il
 * doit rester — sans lui les cases touchent le bord.
 * ------------------------------------------------------------------------- */

/* ── LATEPOINT — la base flexible qui bloquait à 470 px ─────────────────────*/
.bkl--skin .latepoint-w .latepoint-booking-form-element {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

.bkl--skin .latepoint-w .latepoint-booking-form-element .latepoint-form-w {
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: 100% !important;
}

.bkl--skin .latepoint-w .os-monthly-calendar-days,
.bkl--skin .latepoint-w .os-weekdays {
	gap: 4px !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box;
	overflow: hidden;
}

.bkl--skin .latepoint-w .os-day {
	padding: 0 !important;
	margin: 0 !important;
}

.bkl--skin .latepoint-w .os-day .os-day-box {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box;
}

/* ── EASY APPOINTMENTS — 76 px de rembourrage, et DEUX `.ea-bootstrap` ──────
 * ⚠️ Le sélecteur `.ea-bootstrap` désigne l'extérieur ET l'intérieur. Seul
 * l'extérieur porte le rembourrage ; l'intérieur doit rester en `auto`, sinon
 * il sort de son parent. */
.bkl--skin .ea-bootstrap.bootstrap {
	padding-left: 12px !important;
	padding-right: 12px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.bkl--skin .ea-bootstrap .ea-new-ui-container {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ── BOOKING CALENDAR — 64 px de rembourrage ────────────────────────────────*/
.bkl--skin .wpbc_container .wpbc_bfb_form {
	padding-left: 12px !important;
	padding-right: 12px !important;
	max-width: 100% !important;
}

.bkl--skin .wpbc_container .wpbc_wizard_step {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ── BOOKINGPRESS — rembourrage de carte + défilement interne ───────────────*/
.bkl--skin .bpa-frontend-main-container .bpa-front-dc--body {
	padding-left: 12px !important;
	padding-right: 12px !important;
	overflow: visible !important;
	max-height: none !important;
}

.bkl--skin .bpa-frontend-main-container .bpa-front-module-container,
.bkl--skin .bpa-frontend-main-container .bpa-front--dt__col,
.bkl--skin .bpa-frontend-main-container .bpa-front--dt__calendar,
.bkl--skin .bpa-frontend-main-container .bpa-front--dt__calendar-host,
.bkl--skin .bpa-frontend-main-container .vc-pane-container,
.bkl--skin .bpa-frontend-main-container .vc-weeks {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.bkl--skin .bpa-frontend-main-container .bpa-front--dt__time-slots {
	overflow: visible !important;
	max-height: none !important;
}

/* ── RADIUS — le rembourrage du parent, et la barre de défilement ───────────*/
.bkl--skin .rtrb-root,
.bkl--skin .radius-booking {
	width: 100% !important;
	max-width: 100% !important;
}

.bkl--skin div:has( > .rtrb-appointment-form ) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.bkl--skin .rtrb-appointment-form > div:not( .rtrb-booking-status ) {
	padding-left: 10px !important;
	padding-right: 10px !important;
	overflow: visible !important;
	max-height: none !important;
	box-sizing: border-box;
}

.bkl--skin .rtrb-appointment-form .flex-1 {
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: 100% !important;
	padding-right: 0 !important;
}

/* ── HYDRA — le rembourrage était compté DEUX fois ──────────────────────────*/
.bkl--skin .tfhb-meeting-box .tfhb-meeting-calendar {
	padding-left: 12px !important;
	padding-right: 12px !important;
	box-sizing: border-box;
}

.bkl--skin .tfhb-meeting-box .tfhb-calendar-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.bkl--skin .tfhb-meeting-box .tfhb-calendar-dates {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
}

/* ── BOOKLY — sa liste de créneaux était décalée de 20/25 px ────────────────
 * Sa colonne calcule sa largeur elle-même en JavaScript : on ne la force pas,
 * on remet seulement ses marges d'aplomb. */
.bkl--skin .bookly-form .bookly-time-step {
	margin-left: 12px !important;
	margin-right: 12px !important;
}

.bkl--skin .bookly-form .bookly-columnizer,
.bkl--skin .bookly-form .bookly-columnizer-wrap {
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ── SIMPLY SCHEDULE APPOINTMENTS — la largeur DANS son iframe ──────────────
 * Ses deux flèches de semaine réservaient 48 px chacune : la liste des jours
 * ne faisait plus que 422 px sur 558. On rétrécit les flèches et on rend le
 * reste à la liste. Ces règles voyagent avec la feuille que
 * `skinSameOriginFrames()` recopie dans le document de l'iframe. */
.bkl-skin-frame .app-wrapper,
.bkl-skin-frame .booking,
.bkl-skin-frame .booking-app,
.bkl-skin-frame .appt-select,
.bkl-skin-frame .md-layout-item {
	max-width: none !important;
	width: 100% !important;
}

.bkl-skin-frame .calendar.weekly {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.bkl-skin-frame .calendar-days {
	flex: 1 1 auto !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.bkl-skin-frame .book-day {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.bkl-skin-frame .calendar.weekly > .mdc-icon-button,
.bkl-skin-frame .calendar.weekly button.mdc-icon-button {
	width: 26px !important;
	min-width: 26px !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ────────────────────────────────────────────────────────────────────────────
 * CE QUE LE TÉLÉPHONE ET LE DÉTECTEUR ONT TROUVÉ
 *
 * Deux vérifications faites APRÈS coup, et qui ont rapporté toutes les deux.
 *
 * ⚠️⚠️ **LEÇON DE MÉTHODE, LA PLUS CHÈRE DE TOUTES :**
 * une règle éprouvée en direct dans le navigateur et jamais recopiée ICI est
 * une règle qui N'EXISTE PAS. Le bouton principal de BookingPress a été
 * corrigé à l'écran, vu juste, puis oublié à la transcription : il est reparti
 * vert dans deux versions livrées. **Ce qui n'est pas dans le fichier n'a
 * jamais été fait.**
 *
 * ── 1. LE TÉLÉPHONE ────────────────────────────────────────────────────────
 * Tout avait été mesuré à 560 px sur grand écran. À 375 px, dans un VRAI
 * navigateur en fenêtre étroite, Bookly change de balisage : sa barre
 * d'étapes devient une rangée de pastilles peintes par
 * `ol.bookly-stepper > li::before`, que rien ne touchait. L'orange revenait,
 * sur mobile seulement.
 * **Un moteur peut avoir un balisage MOBILE que le bureau ne montre jamais.**
 *
 * ── 2. LE DÉTECTEUR DE COULEURS ÉTRANGÈRES ─────────────────────────────────
 * Plutôt que de chercher à l'œil, on parcourt chaque élément et pseudo-élément
 * d'un moteur, on convertit ses couleurs en teinte/saturation, et on signale
 * ce qui est à la fois SATURÉ (> 30 %) et LOIN de la teinte du thème (> 45°).
 * Les gris et les bleus de la maison ne remontent pas ; le vert de
 * BookingPress et l'orange de Bookly, si. Deux fuites que l'œil avait
 * laissées passer sur trois versions.
 * ------------------------------------------------------------------------- */

/* ── BOOKLY — son balisage MOBILE, invisible depuis le bureau ───────────────*/
.bkl--skin .bookly-form .bookly-stepper > li::before,
.bkl--skin .bookly-form .bookly-stepper > li::after {
	background: var( --bkl-primary, #1b3ed4 ) !important;
	border-color: var( --bkl-primary, #1b3ed4 ) !important;
}

.bkl--skin .bookly-form .bookly-stepper > li.bookly-step-active ~ li::before,
.bkl--skin .bookly-form .bookly-stepper > li.bookly-step-active ~ li::after {
	background: var( --bkl-border-light, #dfe3e8 ) !important;
	border-color: var( --bkl-border-light, #dfe3e8 ) !important;
}

/* ── BOOKLY — les intitulés et les cases à cocher de la première étape ──────*/
.bkl--skin .bookly-form label,
.bkl--skin .bookly-form .bookly-col-label {
	color: var( --bkl-primary, #1b3ed4 ) !important;
}

.bkl--skin .bookly-form input[type="checkbox"],
.bkl--skin .bookly-form input[type="radio"] {
	accent-color: var( --bkl-primary, #1b3ed4 ) !important;
	background-color: var( --bkl-primary, #1b3ed4 ) !important;
	border-color: var( --bkl-primary, #1b3ed4 ) !important;
}

/* ── BOOKINGPRESS — LE BOUTON OUBLIÉ À LA TRANSCRIPTION ─────────────────────*/
.bkl--skin .bpa-frontend-main-container .bpa-front-btn,
.bkl--skin .bpa-frontend-main-container button.bpa-front-btn,
.bkl--skin .bpa-frontend-main-container .bpa-front-btn__medium {
	background: var( --bkl-primary, #1b3ed4 ) !important;
	border-color: var( --bkl-primary, #1b3ed4 ) !important;
	color: #fff !important;
}

/* Six classes chez eux, six chez nous — voir la règle de spécificité. */
.bkl--skin .bpa-frontend-vue3 .bpa-front-module--category .bpa-front-cat-items .bpa-front-ci-pill.el-tag,
.bkl--skin .bpa-frontend-vue3 .bpa-front-module--category .bpa-front-cat-items .bpa-front-ci-pill.el-tag.__bpa-is-active,
.bkl--skin .bpa-frontend-vue3 .bpa-front-module--service-item.__bpa-is-selected .bpa-front-si-card {
	border-color: var( --bkl-primary, #1b3ed4 ) !important;
}

.bkl--skin .bpa-frontend-main-container .bpa-front-ci-pill .el-icon,
.bkl--skin .bpa-frontend-main-container .el-tag svg {
	color: var( --bkl-primary, #1b3ed4 ) !important;
	fill: var( --bkl-primary, #1b3ed4 ) !important;
}

/* ── HYDRA — LE NOM DE L'HÔTE ÉTAIT ÉCRIT EN BLANC ──────────────────────────
 * ⚠️ **Régression de notre propre fait, et elle mérite d'être racontée.**
 * Hydra pose le nom de l'hôte SUR une bannière sombre, donc en blanc. La
 * version précédente a retiré cette bannière — un décor qui n'avait plus lieu
 * d'être dans un bandeau — sans toucher à la couleur du texte. Résultat : du
 * blanc sur du blanc. Le nom était bien dans la page, mesurable, présent au
 * clavier, et invisible à l'œil.
 * **Retirer un fond, c'est se rendre responsable du texte qui vivait dessus.** */
.bkl--skin .tfhb-host-name,
.bkl--skin .tfhb-host-name h3,
.bkl--skin .tfhb-host-name * {
	color: var( --bkl-text, #2c3e50 ) !important;
	-webkit-text-fill-color: var( --bkl-text, #2c3e50 ) !important;
	font-size: 12px !important;
	line-height: 20px !important;
	margin: 0 !important;
}

/* ── HYDRA — la durée et le lieu tenaient en COLONNE ────────────────────────
 * Sa liste `<ul>` empilait « 60 minutes » et « In Person » l'un sous l'autre :
 * 56 px pour deux mots. Couchée, le bandeau passe de 156 à 107 px. */
.bkl--skin .tfhb-meeting-details ul {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 2px 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	width: auto !important;
}

.bkl--skin .tfhb-meeting-details ul li {
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 5px;
	white-space: nowrap;
}

.bkl--skin .tfhb-meeting-info .tfhb-timezone {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px;
	width: auto !important;
	flex: 0 0 auto !important;
}

.bkl--skin .tfhb-meeting-info .tfhb-timezone .tfhb-timezone-tabs,
.bkl--skin .tfhb-meeting-info .tfhb-timezone select,
.bkl--skin .tfhb-meeting-info .tfhb-timezone .select2-container {
	width: auto !important;
	max-width: 170px !important;
}

.bkl--skin .tfhb-meeting-info {
	align-items: baseline !important;
}

.bkl--skin .tfhb-meeting-details h2 {
	flex: 0 0 auto !important;
}

/* ── HYDRA — la pastille de navigation du mois ──────────────────────────────
 * Six pixels de vert entre les deux flèches, `.tfhb-calendar-navigation-dots`.
 * Trouvée par `elementsFromPoint` sur la capture : ni le relevé de classes ni
 * `getComputedStyle` ne l'avaient sortie. **Un détail de six pixels est un
 * détail — jusqu'à ce qu'il soit le seul reste d'une autre marque.** */
.bkl--skin .tfhb-calendar-navigation-dots,
.bkl--skin .tfhb-calendar-navigation-dots * {
	background-color: var( --bkl-primary, #1b3ed4 ) !important;
	border-color: var( --bkl-primary, #1b3ed4 ) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
 * LATEPOINT, ENFIN VU AVEC DES JOURS OUVERTS
 *
 * Jusqu'ici la prestation de démonstration n'avait aucun intervenant rattaché
 * — pas une limite de la version gratuite, comme on l'avait cru, mais une case
 * jamais cochée dans « Agents Who Offer This Service ». Le calendrier
 * répondait « No appointments are currently available », et l'habillage était
 * écrit sans que personne ne l'ait jamais vu à l'œuvre.
 *
 * ⚠️⚠️ **TROIS ÉTATS N'EXISTENT QU'UNE FOIS QU'IL Y A DE LA DISPONIBILITÉ**,
 * et les trois arrivaient aux couleurs de LatePoint :
 *   — la barre de disponibilité sous chaque jour, EN VERT ;
 *   — la pastille du jour même, EN JAUNE ;
 *   — la liste des créneaux, EN VERT.
 * Aucun ne pouvait se voir sur un calendrier vide. **Un habillage écrit contre
 * un moteur muet n'est pas un habillage vérifié.**
 *
 * ⚠️ Et les noms d'états avaient été DEVINÉS : `.os-day-disabled`,
 * `.selected`. Les vrais sont `.os-not-available`, `.os-day-passed`,
 * `.os-today`, `.os-not-in-allowed-period`. Des classes inventées ne lèvent
 * aucune erreur — elles ne font simplement rien.
 * ------------------------------------------------------------------------- */

/* La barre de disponibilité : ⚠️ le remplissage est un ENFANT de la barre
 * (`.day-available`), pas la barre elle-même. Peindre la barre ne suffisait
 * pas : le vert restait, posé par-dessus. */
.bkl--skin .latepoint-w .os-day .os-day-status {
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.14 ) !important;
	border-radius: 2px !important;
	opacity: 1;
}

.bkl--skin .latepoint-w .os-day .os-day-status > * {
	background: var( --bkl-primary, #1b3ed4 ) !important;
	border-radius: 2px !important;
}

/* Le jour même portait une pastille jaune. */
.bkl--skin .latepoint-w .os-day.os-today .os-day-number {
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.18 ) !important;
	color: var( --bkl-primary-dark, #12288a ) !important;
	border-radius: 6px !important;
}

/* Les vrais noms d'états — voir l'avertissement ci-dessus. */
.bkl--skin .latepoint-w .os-day.os-not-available .os-day-box,
.bkl--skin .latepoint-w .os-day.os-day-passed .os-day-box,
.bkl--skin .latepoint-w .os-day.os-not-in-allowed-period .os-day-box {
	background: transparent !important;
}

.bkl--skin .latepoint-w .os-day.os-not-available .os-day-status,
.bkl--skin .latepoint-w .os-day.os-day-passed .os-day-status {
	display: none !important;
}

.bkl--skin .latepoint-w .os-day.os-day-selected .os-day-box,
.bkl--skin .latepoint-w .os-day.selected .os-day-box {
	background: var( --bkl-primary, #1b3ed4 ) !important;
}

.bkl--skin .latepoint-w .os-day.os-day-selected .os-day-number,
.bkl--skin .latepoint-w .os-day.selected .os-day-number {
	color: #fff !important;
	background: transparent !important;
}

.bkl--skin .latepoint-w .os-available-slots-tooltip {
	background: var( --bkl-primary-dark, #12288a ) !important;
}

/* Les créneaux : une troisième étape que personne n'avait jamais atteinte. */
.bkl--skin .latepoint-w .dp-timebox,
.bkl--skin .latepoint-w .os-time-slot {
	background: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.1 ) !important;
	border-color: rgba( var( --bkl-primary-rgb, 27, 62, 212 ), 0.28 ) !important;
	color: var( --bkl-primary-dark, #12288a ) !important;
	border-radius: 8px !important;
}

.bkl--skin .latepoint-w .dp-timebox:hover,
.bkl--skin .latepoint-w .dp-timebox.selected,
.bkl--skin .latepoint-w .os-time-slot.selected {
	background: var( --bkl-primary, #1b3ed4 ) !important;
	border-color: var( --bkl-primary, #1b3ed4 ) !important;
	color: #fff !important;
}

.bkl--skin .latepoint-w .times-header-label,
.bkl--skin .latepoint-w .times-header-label span,
.bkl--skin .latepoint-w .os-times-w a,
.bkl--skin .latepoint-w .times-header a {
	color: var( --bkl-primary, #1b3ed4 ) !important;
}