/**
 * 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;
	}
}