/* ============================================================
   Parcours de réservation — page /rendezvous
   Feuille de style du widget rendu par js/rendezvous-booking.js.

   Contrat DOM figé dans rendezvous.html : la feuille ne suppose aucune
   balise précise (button, a, div, li) et se contente des classes listées.
   Elle se charge après styles.css et css/rendezvous.css : elle ne redéfinit
   donc que le widget.

   Jetons réutilisés (styles.css) : --forest (texte, aplats), --green-muted
   (texte secondaire), --ivory / --surface (fonds clairs), --surface-muted
   (fonds appuyés), --sage (survols), --hairline, --shadow-lift, --ease-out,
   --cap-shift. Aucune police distante, aucun asset externe, aucune URL
   absolue.
   ============================================================ */

/* ---------- 1 · Coque du parcours ---------- */
.rdv-book {
	/* Filet commun : le forêt translucide se pose sur crème comme sur sauge. */
	--rdv-hairline: color-mix(in srgb, var(--forest) 20%, transparent);
	/* Filet des composants (WCAG 1.4.11 attend 3:1 pour délimiter un champ). */
	--rdv-hairline-strong: color-mix(in srgb, var(--forest) 55%, transparent);
	--rdv-radius: 14px;
	--rdv-pad: clamp(20px, 2.2vw, 28px);

	display: grid;
	gap: var(--s-20);
	min-width: 0;
	padding: var(--rdv-pad);
	background-color: var(--ivory);
	border: 1px solid var(--hairline);
	border-radius: 20px;
	box-shadow: 0 34px 64px -44px rgba(31, 58, 45, 0.45);
	color: var(--text-body);
	/* Le défilement vers le parcours laisse passer l'en-tête collant. */
	scroll-margin-top: calc(var(--header-h) + var(--s-16));
}

/* ---------- 1a · Introduction du parcours ---------- */
/* Dès la deuxième étape, l'introduction disparaît : l'intitulé d'étape et le
   titre de l'écran suffisent. Le titre reste dans le DOM, hors écran, pour que
   la section garde son nom accessible. */
.rdv-book:not([data-step="clinic"]) .rdv-book__intro .label,
.rdv-book:not([data-step="clinic"]) .rdv-book__intro-lead {
	display: none;
}
.rdv-book:not([data-step="clinic"]) .rdv-book__intro-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
/* Le titre de la section vit dans la carte : la page n'a plus qu'un seul
   point d'entrée visuel, et le premier écran de réservation suit. */
.rdv-book__intro {
	display: grid;
	gap: var(--s-8);
	min-width: 0;
}
.rdv-book__intro-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--text-heading);
	text-wrap: balance;
}
.rdv-book__intro-lead {
	max-width: 60ch;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--green-muted);
}

/* ---------- 1b · Rail de progression segmenté ---------- */
/* Six segments : la position se lit d'un coup d'œil, sans pastille numérotée.
   Aucun JavaScript : les sélecteurs [data-step] remplissent le rail. */
.rdv-book__progress {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
	height: 4px;
	min-width: 0;
}
.rdv-book__progress span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background-color: var(--surface-muted);
	transition: background-color 320ms var(--ease-out);
}
.rdv-book[data-step="clinic"] .rdv-book__progress span:nth-child(-n + 1),
.rdv-book[data-step="type"] .rdv-book__progress span:nth-child(-n + 2),
.rdv-book[data-step="practitioner"] .rdv-book__progress span:nth-child(-n + 3),
.rdv-book[data-step="date"] .rdv-book__progress span:nth-child(-n + 4),
.rdv-book[data-step="time"] .rdv-book__progress span:nth-child(-n + 5),
.rdv-book[data-step="confirm"] .rdv-book__progress span,
.rdv-book[data-step="success"] .rdv-book__progress span {
	background-color: var(--forest);
}
@media (prefers-reduced-motion: reduce) {
	.rdv-book__progress span {
		transition: none;
	}
}

/* ---------- 2 · Fil des six étapes ---------- */
/* Le ruban numéroté est retiré : le rail segmenté, l'intitulé « Étape 2 sur 6 »
   et le récapitulatif de droite suffisent, et la rangée de pastilles était la
   première source de bruit de l'écran. Le DOM reste en place (contrat figé),
   simplement masqué. */
.rdv-book__steps {
	display: none;
}

/* ---------- 3 · Message d'alerte ---------- */
.rdv-book__notice {
	display: block;
	padding: var(--s-12) var(--s-16);
	border-left: 3px solid var(--miel-dark);
	border-radius: 0 var(--rdv-radius) var(--rdv-radius) 0;
	background-color: var(--surface-muted);
	color: var(--forest);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	overflow-wrap: break-word;
}
.rdv-book__notice a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* `hidden` doit gagner : sans cette règle, display:block l'annulerait. */
.rdv-book__notice[hidden] {
	display: none;
}

/* ---------- 3bis · Repli téléphone (notice et bloc d'erreur) ---------- */
.rdv-book__phones {
	display: inline;
	font-weight: 600;
}
.rdv-book__phones a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--forest);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.rdv-book__phones a:hover {
	text-decoration-thickness: 2px;
}
.rdv-empty .rdv-book__phones {
	display: block;
	margin-top: var(--s-8);
}

/* ---------- 4 · Panneau rendu par le script ---------- */
.rdv-book__panel {
	display: grid;
	gap: var(--s-20);
	align-content: start;
	min-width: 0;
	min-height: 0;
}
.rdv-book__panel > * {
	min-width: 0;
}
.rdv-book__panel[hidden],
.rdv-book__clinics[hidden] {
	display: none;
}

/* Bandeau de tête : retour, intitulé d'étape, puis titre pleine largeur. */
.rdv-book__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-8) var(--s-12);
	min-width: 0;
}
.rdv-book__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--green-muted);
}
.rdv-book__head > .rdv-book__heading {
	flex: 1 1 100%;
}
.rdv-book__head > .rdv-book__recap {
	flex: 1 1 100%;
}
.rdv-book__head > .rdv-calendar__nav-group {
	margin-left: auto;
}

/* ---------- 5 · Titres, intro, aide ---------- */
.rdv-book__heading {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(23px, 2.2vw, 32px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--text-heading);
	text-wrap: balance;
}
.rdv-book__hint {
	max-width: 62ch;
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--green-muted);
}

/* ---------- 6 · Choix (motif, praticien) ---------- */
.rdv-book__choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--s-12);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Le script peut envelopper les choix et les jours dans un <li> : le
   conteneur doit alors laisser la cible tactile occuper toute la cellule. */
.rdv-book__choices > li,
.rdv-calendar__grid > li,
.rdv-slots > li {
	display: grid;
	min-width: 0;
}
.rdv-choice {
	position: relative;
	display: grid;
	gap: var(--s-4);
	align-content: center;
	width: 100%;
	min-width: 0;
	min-height: 72px;
	/* Un <button> rendu par le script doit perdre son habillage natif :
	   les couleurs et la mise en page ci-dessous font tout le travail. */
	-webkit-appearance: none;
	appearance: none;
	padding: var(--s-16) 56px var(--s-16) var(--s-20);
	border: 1px solid var(--rdv-hairline-strong);
	border-radius: var(--rdv-radius);
	background-color: var(--white);
	color: var(--text-body);
	font-family: var(--font-body);
	text-align: left;
	cursor: pointer;
	transition:
		border-color 200ms var(--ease-out),
		background-color 200ms var(--ease-out),
		box-shadow 200ms var(--ease-out),
		transform 200ms var(--ease-out);
}
/* Chevron : signale que la carte est un choix, sans texte supplémentaire. */
.rdv-choice::after {
	content: "→";
	position: absolute;
	right: var(--s-20);
	top: 50%;
	transform: translateY(-50%);
	color: var(--forest);
	font-size: 17px;
	line-height: 1;
	transition: transform 200ms var(--ease-out);
}
.rdv-choice:hover {
	border-color: var(--forest);
	box-shadow: var(--shadow-soft);
	transform: translateY(-1px);
}
.rdv-choice:hover::after {
	transform: translateY(-50%) translateX(3px);
}
.rdv-choice:focus-visible {
	outline: 2px solid var(--forest);
	outline-offset: 2px;
}
.rdv-choice.is-active,
.rdv-choice[aria-pressed="true"],
.rdv-choice[aria-selected="true"],
.rdv-choice[aria-checked="true"] {
	border: 2px solid var(--forest);
	padding: calc(var(--s-16) - 1px) calc(56px - 1px) calc(var(--s-16) - 1px)
		calc(var(--s-20) - 1px);
	background-color: color-mix(in srgb, var(--sage) 40%, var(--white));
}
.rdv-choice.is-active::after,
.rdv-choice[aria-pressed="true"]::after {
	content: "✓";
}
.rdv-choice__name {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--text-heading);
	overflow-wrap: break-word;
}
.rdv-choice__meta {
	font-size: 14px;
	line-height: 1.4;
	color: var(--green-muted);
}
.rdv-choice__avail {
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--green-muted);
}
.rdv-choice__avail.is-pending {
	opacity: 0.7;
}
.rdv-choice__avail.is-none {
	font-style: italic;
}
.rdv-choice__badge {
	justify-self: start;
	margin-top: var(--s-4);
	padding: 3px 10px;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--sage) 55%, var(--ivory));
	color: var(--forest);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
/* Premier créneau disponible : la carte occupe la largeur, filet forêt. */
.rdv-choice--any {
	grid-column: 1 / -1;
	border-color: var(--forest);
	background-color: color-mix(in srgb, var(--sage) 32%, var(--white));
}
.rdv-choice--any .rdv-choice__name {
	font-size: 19px;
}
/* Aucune disponibilité en ligne : la carte n'est plus une promesse cliquable. */
.rdv-choice:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.rdv-choice:disabled:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--rdv-hairline-strong);
}
.rdv-book__choices-hint {
	max-width: 70ch;
}

/* Praticien : photo ronde à gauche du nom. */
.rdv-choice--person {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--s-16);
}
.rdv-choice__photo {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	background-color: var(--surface-muted);
}
.rdv-choice__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

/* ---------- 7 · Écran date + créneau ---------- */
.rdv-schedule {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-32);
	min-width: 0;
}

/* ---------- 7a · Calendrier ---------- */
.rdv-calendar {
	min-width: 0;
	max-width: 420px;
}
.rdv-calendar__nav-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-12);
	margin-bottom: var(--s-16);
}
.rdv-calendar__label {
	margin: 0;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--text-heading);
}
.rdv-calendar__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	border: 1px solid var(--rdv-hairline-strong);
	border-radius: 999px;
	background-color: var(--white);
	color: var(--forest);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color 200ms var(--ease-out),
		border-color 200ms var(--ease-out);
}
.rdv-calendar__nav:hover:not(:disabled) {
	background-color: var(--sage);
	border-color: var(--forest);
}
.rdv-calendar__nav:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.rdv-calendar__nav:focus-visible {
	outline: 2px solid var(--forest);
	outline-offset: 2px;
}
.rdv-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rdv-calendar__weekday {
	padding-bottom: var(--s-8);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	color: var(--green-muted);
}
.rdv-day {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 44px;
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 10px;
	background-color: transparent;
	color: var(--forest);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color 180ms var(--ease-out),
		border-color 180ms var(--ease-out),
		color 180ms var(--ease-out);
}
.rdv-day:not(.is-disabled):not(.is-empty) {
	border-color: var(--rdv-hairline);
	background-color: var(--white);
}
.rdv-day:not(.is-disabled):hover {
	background-color: var(--sage);
	border-color: var(--forest);
}
.rdv-day:focus-visible {
	outline: 2px solid var(--forest);
	outline-offset: 1px;
}
.rdv-day--today:not(.is-selected) {
	box-shadow: inset 0 0 0 1.5px var(--forest);
}
/* `:not(.is-disabled)` : sans lui, la règle « jour disponible » (fond blanc,
   trois sélecteurs) l'emporterait sur le fond forêt du jour choisi. */
.rdv-day.is-selected:not(.is-disabled) {
	background-color: var(--forest);
	border-color: var(--forest);
	color: var(--ivory);
}
.rdv-day.is-disabled,
.rdv-day.is-empty {
	border-color: transparent;
	background-color: transparent;
	/* 55 % : la couleur seule ne suffit pas (WCAG 1.4.1), la rature nomme
	   l'indisponibilité sans dépendre du contraste. */
	color: color-mix(in srgb, var(--forest) 55%, transparent);
	font-weight: 500;
	cursor: default;
}
.rdv-day.is-disabled {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}
.rdv-calendar__empty {
	margin-top: var(--s-16);
	padding: var(--s-16);
	border: 1px dashed var(--rdv-hairline-strong);
	border-radius: var(--rdv-radius);
	color: var(--green-muted);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}
.rdv-calendar__empty p {
	margin: 0;
}
.rdv-calendar__next-month {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: var(--s-8);
	padding: calc(var(--s-8) + var(--cap-shift)) var(--s-20)
		calc(var(--s-8) - var(--cap-shift));
	border: 1px solid var(--forest);
	border-radius: 999px;
	background-color: var(--white);
	color: var(--forest);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.rdv-calendar__next-month:hover {
	background-color: var(--sage);
}

/* ---------- 8 · Colonne des créneaux ---------- */
.rdv-slots-panel {
	display: grid;
	gap: var(--s-16);
	align-content: start;
	min-width: 0;
}
.rdv-slots-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-8) var(--s-16);
	min-width: 0;
}
.rdv-slots-panel__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--text-heading);
}
.rdv-slots-panel__meta {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--green-muted);
}
.rdv-slots__refresh {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	-webkit-appearance: none;
	appearance: none;
	padding: 0 var(--s-16) 0 var(--s-12);
	border: 1px solid var(--rdv-hairline-strong);
	border-radius: 999px;
	background-color: transparent;
	color: var(--forest);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 200ms var(--ease-out);
}
.rdv-slots__refresh::before {
	content: "↻";
	font-size: 15px;
	line-height: 1;
}
.rdv-slots__refresh:hover {
	background-color: var(--sage);
}
.rdv-slots__refresh:focus-visible {
	outline: 2px solid var(--forest);
	outline-offset: 2px;
}
.rdv-slots-group {
	display: grid;
	gap: var(--s-8);
	min-width: 0;
}
.rdv-slots-group + .rdv-slots-group {
	margin-top: var(--s-8);
}
.rdv-slots-group__title {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--green-muted);
}
.rdv-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: var(--s-8);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rdv-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	-webkit-appearance: none;
	appearance: none;
	padding: var(--s-8) var(--s-12);
	border: 1px solid var(--rdv-hairline-strong);
	border-radius: 12px;
	background-color: var(--white);
	color: var(--forest);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	cursor: pointer;
	transition:
		background-color 180ms var(--ease-out),
		border-color 180ms var(--ease-out),
		color 180ms var(--ease-out);
}
.rdv-slot:hover {
	background-color: var(--sage);
	border-color: var(--forest);
}
.rdv-slot:focus-visible {
	outline: 2px solid var(--forest);
	outline-offset: 2px;
}
.rdv-slot.is-selected {
	background-color: var(--forest);
	border-color: var(--forest);
	color: var(--ivory);
}

/* ---------- 9 · Formulaire ---------- */
.rdv-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-16) var(--s-20);
	min-width: 0;
	/* Un champ de saisie large de 650 px se lit mal : la grille du formulaire
	   s'arrête à 960 px (deux colonnes de 470 px à partir de 720 px). */
	max-width: 960px;
}
.rdv-field {
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
	min-width: 0;
}
/* Ce qui se passe après « Confirmer » : dit avant, jamais découvert après. */
.rdv-form__terms {
	grid-column: 1 / -1;
	display: grid;
	gap: var(--s-8);
	margin: 0;
	padding: var(--s-16) var(--s-20);
	border: 1px solid var(--hairline);
	border-radius: var(--rdv-radius);
	background-color: color-mix(in srgb, var(--sage) 24%, var(--ivory));
	font-size: 14px;
	line-height: 1.55;
	color: var(--forest);
}
.rdv-form__terms p {
	margin: 0;
}
.rdv-form__terms a {
	color: var(--forest);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- 9bis · Finalisation sécurisée Acuity ---------- */
.rdv-acuity__intro {
	display: grid;
	gap: var(--s-12);
	max-width: 76ch;
}
.rdv-acuity__lead,
.rdv-acuity__preauth,
.rdv-acuity__loading,
.rdv-acuity__fallback {
	margin: 0;
	line-height: 1.55;
	overflow-wrap: break-word;
}
.rdv-acuity__lead {
	font-size: 16px;
	color: var(--forest);
}
.rdv-acuity__preauth {
	padding: var(--s-16) var(--s-20);
	border-left: 3px solid var(--miel-dark);
	border-radius: 0 var(--rdv-radius) var(--rdv-radius) 0;
	background-color: color-mix(in srgb, var(--sage) 28%, var(--ivory));
	font-size: 14px;
	font-weight: 600;
	color: var(--forest);
}
.rdv-acuity__embed {
	min-width: 0;
	border: 1px solid var(--hairline);
	border-radius: var(--rdv-radius);
	background-color: var(--white);
	overflow: hidden;
}
.rdv-acuity__loading {
	padding: var(--s-16) var(--s-20);
	border-bottom: 1px solid var(--hairline);
	font-size: 14px;
	font-weight: 600;
	color: var(--green-muted);
}
.rdv-acuity__loading[hidden] {
	display: none;
}
.rdv-acuity__frame {
	display: block;
	width: 100%;
	height: 900px;
	border: 0;
	background-color: var(--white);
}
.rdv-acuity__frame:focus-visible {
	outline: 3px solid var(--forest);
	outline-offset: -3px;
}
.rdv-acuity__fallback {
	font-size: 14px;
	color: var(--green-muted);
}
.rdv-acuity__external {
	color: var(--forest);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.rdv-acuity__external:hover {
	text-decoration-thickness: 2px;
}
.rdv-acuity__external:focus-visible {
	outline: 2px solid var(--forest);
	outline-offset: 3px;
}
/* Précisions et champs Acuity occupent toute la largeur ; prénom/nom et
   e-mail/téléphone se partagent la grille à partir de 720 px. */
.rdv-field--wide,
.rdv-honeypot {
	grid-column: 1 / -1;
}
.rdv-field__label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--forest);
	overflow-wrap: break-word;
}
.rdv-field__input {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: var(--s-12) var(--s-16);
	border: 1px solid var(--rdv-hairline-strong);
	border-radius: 12px;
	background-color: var(--white);
	color: var(--text-body);
	/* 16 px minimum : en dessous, iOS zoome à la mise au point. */
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.35;
	transition:
		background-color 200ms var(--ease-out),
		border-color 200ms var(--ease-out),
		box-shadow 200ms var(--ease-out);
}
textarea.rdv-field__input {
	min-height: 96px;
	padding: var(--s-12) var(--s-16);
	line-height: 1.45;
	resize: vertical;
}
select.rdv-field__input {
	/* Sans height imposée, Safari ignore le padding vertical d'un select. */
	height: auto;
	padding-block: var(--s-12);
	cursor: pointer;
}
.rdv-field__input[type="checkbox"],
.rdv-field__input[type="radio"] {
	/* 44 px de zone cliquable : la boîte garde un glyphe de 24 px (padding
	   symétrique) et le retrait négatif réaligne l'encre sur le libellé. */
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 10px;
	margin-left: -10px;
	border: 0;
	background-color: transparent;
	accent-color: var(--forest);
	cursor: pointer;
}
.rdv-field__input[type="checkbox"]:hover,
.rdv-field__input[type="radio"]:hover {
	border-color: transparent;
	background-color: transparent;
}
.rdv-field__input:hover {
	border-color: var(--forest);
}
.rdv-field__input:focus-visible {
	outline: 2px solid var(--forest);
	outline-offset: 1px;
	border-color: var(--forest);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 70%, transparent);
}
.rdv-field__input::placeholder {
	/* Sans opacité : le vert atténué tient 6,8:1 sur blanc, la version
	   translucide tombait à 3,6:1. */
	color: var(--green-muted);
	opacity: 1;
}
.rdv-field__input[aria-invalid="true"],
.rdv-field.has-error .rdv-field__input {
	border-color: #8f3a2b;
	box-shadow: 0 0 0 1px #8f3a2b;
}
/* `hidden` doit gagner : le script masque l'erreur tant qu'il n'y en a pas. */
.rdv-field__error[hidden] {
	display: none;
}
.rdv-field__error {
	display: flex;
	gap: var(--s-8);
	margin: 0;
	color: #8f3a2b;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	overflow-wrap: break-word;
}
.rdv-field__error::before {
	content: "!";
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 999px;
	background-color: #8f3a2b;
	color: var(--white);
	font-size: 12px;
	line-height: 1;
}
/* Champ piège : présent dans le DOM (le robot doit le remplir) mais hors
   écran. `clip` plutôt que display:none, sinon les robots le détectent. */
.rdv-honeypot {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- 10 · Actions et récapitulatif ---------- */
.rdv-submit,
.rdv-back {
	justify-self: start;
}
.rdv-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	-webkit-appearance: none;
	appearance: none;
	/* Compensation optique Gotham, comme .btn : hauteur totale inchangée. */
	padding: calc(var(--s-12) + var(--cap-shift)) var(--s-32)
		calc(var(--s-12) - var(--cap-shift));
	border: 1px solid var(--forest);
	border-radius: 999px;
	background-color: var(--forest);
	color: var(--ivory);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 220ms var(--ease-out),
		border-color 220ms var(--ease-out),
		box-shadow 220ms var(--ease-out),
		transform 220ms var(--ease-out);
}
.rdv-submit:hover {
	background-color: color-mix(in srgb, var(--forest) 86%, var(--sage));
	border-color: color-mix(in srgb, var(--forest) 86%, var(--sage));
	transform: translateY(-1px);
}
.rdv-submit:active {
	transform: translateY(0);
}
.rdv-submit:focus-visible {
	outline: 2px solid var(--forest);
	outline-offset: 2px;
}
.rdv-submit[disabled],
.rdv-submit[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}
/* Retour : bouton fantôme discret, il ne concurrence pas l'action principale. */
.rdv-back {
	display: inline-flex;
	align-items: center;
	gap: var(--s-8);
	min-height: 40px;
	-webkit-appearance: none;
	appearance: none;
	padding: calc(var(--s-4) + var(--cap-shift)) var(--s-16)
		calc(var(--s-4) - var(--cap-shift));
	border: 1px solid var(--rdv-hairline-strong);
	border-radius: 999px;
	background-color: transparent;
	color: var(--forest);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 200ms var(--ease-out),
		border-color 200ms var(--ease-out);
}
.rdv-back::before {
	content: "←";
	font-size: 15px;
	line-height: 1;
}
.rdv-back:hover {
	background-color: var(--sage);
	border-color: var(--forest);
}
.rdv-back:focus-visible {
	outline: 2px solid var(--forest);
	outline-offset: 2px;
}
/* Le script peut les regrouper dans un conteneur sans classe : on le
   reconnaît par son contenu plutôt que d'inventer un nom de classe. */
.rdv-form > div:has(> .rdv-submit),
.rdv-form > div:has(> .rdv-back),
.rdv-book__panel > div:has(> .rdv-submit),
.rdv-book__panel > div:has(> .rdv-back) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-12);
	grid-column: 1 / -1;
}

/* Récapitulatif d'étape (sous 1100 px, la colonne de droite est masquée). */
.rdv-book__recap {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4) var(--s-12);
	min-width: 0;
	margin: 0;
	padding: var(--s-8) var(--s-16);
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--sage) 34%, var(--ivory));
}
.rdv-success__recap {
	display: grid;
	gap: var(--s-12);
	min-width: 0;
	margin: 0;
	padding: var(--s-20);
	border: 1px solid var(--hairline);
	border-radius: var(--rdv-radius);
	background-color: var(--white);
}
.rdv-book__recap > div,
.rdv-book__recap > p,
.rdv-success__recap > div,
.rdv-success__recap > p {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-4) var(--s-16);
	min-width: 0;
	margin: 0;
}
.rdv-book__recap > div {
	justify-content: flex-start;
	gap: var(--s-4);
}
.rdv-book__recap dt,
.rdv-success__recap dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--green-muted);
}
.rdv-book__recap dd,
.rdv-success__recap dd {
	min-width: 0;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--forest);
	text-align: right;
	overflow-wrap: anywhere;
}
.rdv-book__recap dd {
	font-size: 13px;
	text-align: left;
}
.rdv-success__recap dd {
	font-family: var(--font-display);
}

/* ---------- 11 · Chargement, vide ---------- */
.rdv-skeleton-group {
	display: grid;
	gap: var(--s-10);
	min-width: 0;
}
.rdv-skeleton {
	display: block;
	height: 16px;
	border-radius: 8px;
	background-color: var(--surface-muted);
	background-image: linear-gradient(
		90deg,
		var(--surface-muted) 0%,
		var(--ivory) 50%,
		var(--surface-muted) 100%
	);
	background-size: 200% 100%;
	animation: rdv-skeleton-sweep 1.4s var(--ease-out) infinite;
}
.rdv-skeleton:first-child {
	height: 26px;
}
@keyframes rdv-skeleton-sweep {
	from {
		background-position: 120% 0;
	}
	to {
		background-position: -120% 0;
	}
}
.rdv-empty {
	margin: 0;
	padding: var(--s-24);
	border: 1px dashed var(--rdv-hairline-strong);
	border-radius: var(--rdv-radius);
	color: var(--green-muted);
	font-size: 15px;
	line-height: 1.55;
	text-align: center;
	overflow-wrap: break-word;
}
.rdv-empty p {
	margin: 0;
}
.rdv-empty p + p,
.rdv-empty p + .rdv-empty__action {
	margin-top: var(--s-12);
}
.rdv-empty__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	-webkit-appearance: none;
	appearance: none;
	padding: calc(var(--s-8) + var(--cap-shift)) var(--s-20)
		calc(var(--s-8) - var(--cap-shift));
	border: 1px solid var(--forest);
	border-radius: 999px;
	background-color: var(--white);
	color: var(--forest);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition:
		background-color 200ms var(--ease-out),
		color 200ms var(--ease-out);
}
.rdv-empty__action:hover {
	background-color: var(--forest);
	color: var(--ivory);
}
.rdv-empty__action:focus-visible {
	outline: 2px solid var(--forest);
	outline-offset: 2px;
}

/* ---------- 12 · Confirmation ---------- */
.rdv-success {
	display: grid;
	gap: var(--s-16);
	min-width: 0;
	padding: clamp(var(--s-20), 2.5vw, var(--s-32));
	border: 1px solid var(--hairline);
	border-radius: 16px;
	background-color: color-mix(in srgb, var(--sage) 30%, var(--ivory));
}
.rdv-success__title {
	position: relative;
	margin: 0;
	padding-left: var(--s-40);
	font-family: var(--font-display);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--text-heading);
	text-wrap: balance;
}
/* Pastille décorative vide : aucun texte généré, donc rien à vocaliser. */
.rdv-success__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.08em;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background-color: var(--forest);
	box-shadow: inset 0 0 0 6px var(--ivory);
}
.rdv-success__pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-12);
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--forest);
	overflow-wrap: break-word;
}
a.rdv-success__pay,
button.rdv-success__pay,
.rdv-success__pay a,
.rdv-success__pay button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: start;
	min-height: 54px;
	-webkit-appearance: none;
	appearance: none;
	padding: calc(var(--s-12) + var(--cap-shift)) var(--s-32)
		calc(var(--s-12) - var(--cap-shift));
	border: 1px solid var(--forest);
	border-radius: 999px;
	background-color: var(--forest);
	color: var(--ivory);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 220ms var(--ease-out),
		box-shadow 220ms var(--ease-out),
		transform 220ms var(--ease-out);
}
a.rdv-success__pay:hover,
button.rdv-success__pay:hover,
.rdv-success__pay a:hover,
.rdv-success__pay button:hover {
	background-color: color-mix(in srgb, var(--forest) 86%, var(--sage));
	transform: translateY(-1px);
}
a.rdv-success__pay:focus-visible,
button.rdv-success__pay:focus-visible,
.rdv-success__pay a:focus-visible,
.rdv-success__pay button:focus-visible {
	outline: 2px solid var(--forest);
	outline-offset: 2px;
}
.rdv-success__note {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--green-muted);
	overflow-wrap: break-word;
}
.rdv-success__note a {
	color: var(--forest);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.rdv-success__note a:hover {
	text-decoration-thickness: 2px;
}
/* Annonce réservée aux lecteurs d'écran. */
.rdv-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- 13 · Repli réservation ---------- */
.rdv-book__fallback {
	display: grid;
	gap: var(--s-16);
	justify-items: start;
	padding: var(--s-20);
	border: 1px solid var(--hairline);
	border-radius: var(--rdv-radius);
	background-color: var(--surface-muted);
}
.rdv-book__fallback[hidden] {
	display: none;
}
.rdv-book__fallback-text {
	max-width: 62ch;
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--green-muted);
}
.rdv-book__fallback-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: calc(var(--s-12) + var(--cap-shift)) var(--s-32)
		calc(var(--s-12) - var(--cap-shift));
	border: 1px solid var(--forest);
	border-radius: 999px;
	background-color: var(--forest);
	color: var(--ivory);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}
.rdv-book__fallback-link:hover {
	background-color: color-mix(in srgb, var(--forest) 86%, var(--sage));
}

/* ---------- 14 · Étape 1 : les deux fiches clinique ---------- */
.rdv-book__clinics {
	display: grid;
	gap: var(--s-20);
	min-width: 0;
}
.rdv-clinics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: var(--s-16);
	min-width: 0;
}
.rdv-clinic {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) auto;
	gap: var(--s-16) var(--s-20);
	align-items: start;
	min-width: 0;
	padding: var(--s-20);
	background-color: var(--white);
	border: 1px solid var(--rdv-hairline-strong);
	border-radius: 16px;
	cursor: pointer;
	transition:
		border-color 220ms var(--ease-out),
		box-shadow 220ms var(--ease-out),
		transform 220ms var(--ease-out);
}
.rdv-clinic:hover {
	border-color: var(--forest);
	box-shadow: var(--shadow-soft);
	transform: translateY(-2px);
}
.rdv-clinic.is-active {
	border: 2px solid var(--forest);
	padding: calc(var(--s-20) - 1px);
	background-color: color-mix(in srgb, var(--sage) 24%, var(--white));
}
.rdv-clinic.is-active:hover {
	transform: none;
}
.rdv-clinic__body {
	display: grid;
	gap: var(--s-8);
	align-content: start;
	min-width: 0;
}
.rdv-clinic__name {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(18px, 1.4vw, 21px);
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--text-heading);
	text-wrap: balance;
}
.rdv-clinic__addr {
	margin: 0;
	font-style: normal;
	font-size: 15px;
	line-height: 1.45;
	color: var(--forest);
}
.rdv-clinic__access {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--green-muted);
}
.rdv-clinic__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4) var(--s-10);
	margin: 0;
	font-size: 14px;
	color: var(--green-muted);
}
.rdv-clinic__tel,
.rdv-clinic__map {
	display: inline-flex;
	align-items: center;
	/* 44 px : ce sont les deux actions de la fiche clinique (appeler, venir). */
	min-height: 44px;
	font-weight: 600;
	color: var(--forest);
	text-decoration: underline;
	text-decoration-color: var(--green-deep);
	text-underline-offset: 4px;
}
.rdv-clinic__tel:hover,
.rdv-clinic__map:hover {
	text-decoration-color: var(--forest);
}
/* Bouton plein (forêt) : le bouton ivoire du site serait invisible sur crème. */
.rdv-clinic__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	grid-column: 1 / -1;
	justify-self: stretch;
	min-height: 52px;
	-webkit-appearance: none;
	appearance: none;
	padding: calc(var(--s-12) + var(--cap-shift)) var(--s-24)
		calc(var(--s-12) - var(--cap-shift));
	border: 1px solid var(--forest);
	border-radius: 999px;
	background-color: var(--forest);
	color: var(--ivory);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	cursor: pointer;
	transition:
		background-color 220ms var(--ease-out),
		box-shadow 220ms var(--ease-out),
		transform 220ms var(--ease-out);
}
.rdv-clinic__cta::after {
	content: "→";
	margin-left: 0.45em;
	transition: transform 220ms var(--ease-out);
}
.rdv-clinic:hover .rdv-clinic__cta,
.rdv-clinic__cta:hover {
	background-color: color-mix(in srgb, var(--forest) 86%, var(--sage));
}
.rdv-clinic:hover .rdv-clinic__cta::after {
	transform: translateX(3px);
}
.rdv-clinic__cta:focus-visible {
	outline: 2px solid var(--forest);
	outline-offset: 2px;
}
.rdv-clinic__cta[aria-pressed="true"]::after {
	content: "✓";
}
.rdv-book__clinics-hint {
	max-width: 70ch;
}

/* ---------- 15 · États globaux ---------- */
.rdv-book[data-busy="true"] {
	cursor: progress;
}
.rdv-book[data-busy="true"] .rdv-choice,
.rdv-book[data-busy="true"] .rdv-day,
.rdv-book[data-busy="true"] .rdv-slot {
	pointer-events: none;
}

/* ---------- 16 · Responsive ---------- */
@media (max-width: 860px) {
	.rdv-schedule {
		gap: var(--s-24);
	}
	.rdv-calendar {
		max-width: none;
	}
}
@media (min-width: 880px) {
	/* Calendrier et horaires côte à côte : la colonne d'horaires profite de
	   la largeur au lieu de laisser un grand vide à droite. */
	.rdv-schedule {
		grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
	}
}
@media (min-width: 720px) {
	.rdv-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	.rdv-book {
		padding: var(--s-20) var(--s-16);
		gap: var(--s-20);
	}
	.rdv-book__recap > div,
	.rdv-book__recap > p,
	.rdv-success__recap > div,
	.rdv-success__recap > p {
		flex-direction: column;
		align-items: flex-start;
	}
	.rdv-book__recap dd,
	.rdv-success__recap dd {
		text-align: left;
	}
	/* Récapitulatif d'étape sur téléphone : chaque valeur se nomme elle-même
	   (clinique, prestation, praticien, date, heure), les libellés partent aux
	   lecteurs d'écran et les valeurs s'enchaînent. */
	.rdv-book__recap {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 2px var(--s-8);
		border-radius: var(--rdv-radius);
	}
	.rdv-book__recap > div {
		display: inline-flex;
		flex-direction: row;
		align-items: baseline;
		gap: 0;
	}
	.rdv-book__recap dt {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.rdv-book__recap > div + div::before {
		content: "·";
		margin-right: var(--s-8);
		color: var(--green-muted);
	}
	/* Fiches clinique compactes : les deux choix doivent tenir dans le premier
	   écran d'un téléphone. L'accès métro disparaît, le lien « Itinéraire »
	   ouvre Google Maps avec l'adresse. */
	.rdv-clinic {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: var(--s-8) var(--s-12);
		padding: var(--s-12);
	}
	.rdv-clinic.is-active {
		padding: calc(var(--s-12) - 1px);
	}
	.rdv-clinic__access {
		display: none;
	}
	.rdv-clinic__body {
		gap: var(--s-4);
	}
	.rdv-clinic__name {
		font-size: 17px;
	}
	.rdv-clinic__addr {
		font-size: 14px;
	}
	.rdv-clinic__links {
		font-size: 13px;
		gap: 0 var(--s-8);
	}
	.rdv-clinic__cta {
		min-height: 44px;
		font-size: 14.5px;
	}
}
@media (max-width: 480px) {
	.rdv-book {
		padding: var(--s-16) var(--s-12);
		border-radius: 16px;
	}
	.rdv-choice {
		padding: var(--s-12) 48px var(--s-12) var(--s-16);
	}
	.rdv-choice.is-active,
	.rdv-choice[aria-pressed="true"] {
		padding: calc(var(--s-12) - 1px) calc(48px - 1px) calc(var(--s-12) - 1px)
			calc(var(--s-16) - 1px);
	}
	.rdv-clinic {
		grid-template-columns: 80px minmax(0, 1fr);
	}
	.rdv-submit,
	a.rdv-success__pay,
	button.rdv-success__pay,
	.rdv-success__pay a,
	.rdv-success__pay button,
	.rdv-book__fallback-link {
		width: 100%;
	}
	.rdv-slots-panel__head {
		flex-wrap: wrap;
	}
}

/* ---------- 17 · Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
	.rdv-book *,
	.rdv-book *::before,
	.rdv-book *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
	.rdv-skeleton {
		animation: none;
		background-image: none;
	}
	.rdv-choice:hover,
	.rdv-submit:hover,
	.rdv-clinic:hover,
	a.rdv-success__pay:hover,
	button.rdv-success__pay:hover {
		transform: none;
	}
}

/* ============================================================
   18 · Colonne récapitulative (≥ 1100 px)
   ============================================================ */

.rdv-book__aside {
	display: none;
}
.rdv-aside__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--text-heading);
}
.rdv-aside__list {
	display: grid;
	gap: var(--s-12);
	margin: 0;
}
.rdv-aside__list > div {
	display: grid;
	gap: 2px;
	min-width: 0;
}
.rdv-aside__list dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--green-muted);
}
.rdv-aside__list dd {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--forest);
	overflow-wrap: anywhere;
}
.rdv-aside__pay {
	margin: 0;
	padding-top: var(--s-16);
	border-top: 1px solid var(--rdv-hairline);
	font-size: 13px;
	line-height: 1.5;
	color: var(--green-muted);
}
.rdv-aside__help {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--green-muted);
}
.rdv-aside__help a {
	color: var(--forest);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.rdv-aside__help a:hover {
	text-decoration-thickness: 2px;
}
.rdv-aside__how {
	margin: 0;
	padding-left: 1.15em;
	font-size: 14px;
	line-height: 1.55;
	color: var(--green-muted);
}
.rdv-aside__how li + li {
	margin-top: var(--s-4);
}

@media (min-width: 1100px) {
	/* Deux colonnes : l'étape à gauche, le rendez-vous en cours à droite. */
	.rdv-book {
		grid-template-columns: minmax(0, 1fr) 300px;
		grid-template-areas:
			"intro intro"
			"progress progress"
			"notice notice"
			"main aside"
			"fallback aside";
		align-items: start;
	}
	/* Étape 1 : les deux fiches clinique gardent toute la largeur. */
	.rdv-book[data-step="clinic"] {
		grid-template-areas:
			"intro intro"
			"progress progress"
			"notice notice"
			"main main"
			"fallback fallback";
	}
	.rdv-book__intro {
		grid-area: intro;
	}
	.rdv-book__progress {
		grid-area: progress;
	}
	.rdv-book__notice {
		grid-area: notice;
	}
	.rdv-book__clinics,
	.rdv-book__panel {
		grid-area: main;
	}
	.rdv-book__fallback {
		grid-area: fallback;
	}
	.rdv-book__aside {
		grid-area: aside;
		display: grid;
		gap: var(--s-16);
		align-content: start;
		position: sticky;
		top: calc(var(--header-real, var(--header-h)) + var(--s-16));
		padding: var(--s-20);
		border: 1px solid var(--hairline);
		border-radius: var(--rdv-radius);
		background-color: var(--surface-muted);
	}
	.rdv-book__aside:empty,
	.rdv-book[data-step="clinic"] .rdv-book__aside {
		display: none;
	}
	/* Le récapitulatif de tête fait doublon avec la colonne. */
	.rdv-book__head > .rdv-book__recap {
		display: none;
	}
}

/* ---------- 19 · Ruban d'étapes et rail collants (sous 1100 px) ---------- */
/* Un élément collant dans une grille est borné à sa zone de grille : sous
   1100 px le parcours passe en bloc pour que le rail suive le défilement. */
@media (max-width: 1099.98px) {
	.rdv-book {
		display: block;
	}
	.rdv-book > * + * {
		margin-top: var(--s-24);
	}
	.rdv-book__intro + * {
		margin-top: var(--s-20);
	}
	.rdv-book__progress {
		position: sticky;
		top: var(--header-real, var(--header-h));
		z-index: 6;
		/* 24 px de haut : 10 px de marge au-dessus et au-dessous du rail. */
		height: 24px;
		padding-block: 10px;
		background-color: var(--ivory);
		box-shadow: 0 12px 16px -14px rgba(31, 58, 45, 0.5);
	}
}