/* ═══════════════════════════════════════════════════════════════════════════
   Réservations — côté visiteur.

   Aucune couleur n'est écrite en dur : tout passe par les jetons du thème, avec
   une valeur de repli. Le greffon suit donc la charte du site — y compris la
   variante pastel du miroir `/pastel/`, sans une ligne de plus — et reste
   présentable si on l'installe un jour sur un thème qui n'a pas ces jetons.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Les jetons sont posés sur les DEUX racines du greffon. `.kdlr-bouton`,
   `.kdlr-form` et `.kdlr-champ` les lisent sans valeur de repli : servis en
   dehors d'une de ces deux racines, ils perdraient toute couleur. */
.kdlr-journees,
.kdlr-rdv {
	--kdlr-encre: var(--wp--preset--color--ink, #2c2c33);
	--kdlr-encre-douce: var(--wp--preset--color--ink-soft, #6b6b78);
	--kdlr-trait: var(--wp--preset--color--line, #e6e3dd);
	--kdlr-fond: var(--wp--preset--color--base, #fff);
	--kdlr-surface: var(--wp--preset--color--surface, #faf8f5);
	--kdlr-accent: var(--wp--preset--color--accent-deep, #7a4bc0);
	--kdlr-rayon: 14px;

	max-width: 640px;
	margin-inline: auto;
	color: var(--kdlr-encre);
}

/* ─── L'année, étiquette et non titre ─────────────────────────────────────── */

.kdlr-annee {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kdlr-accent);
	margin: 2.25rem 0 0.5rem;
}

.kdlr-annee:first-child {
	margin-top: 0;
}

/* ─── Une journée ─────────────────────────────────────────────────────────── */

.kdlr-journee {
	border-bottom: 1px solid var(--kdlr-trait);
}

.kdlr-journee--ouverte {
	background: var(--kdlr-surface);
	border-radius: var(--kdlr-rayon);
	border-bottom-color: transparent;
	margin: 0.5rem -1rem;
	padding: 0 1rem;
}

.kdlr-journee__ligne {
	display: grid;
	grid-template-columns: minmax(8rem, 1fr) auto auto;
	align-items: center;
	gap: 0.4rem 1.25rem;
	padding: 1rem 0;
}

.kdlr-journee__date {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem;
}

/* Le jour de la semaine est le même douze fois : il informe une fois, puis il
   encombre. Il reste, en retrait — c'est le quantième qu'on cherche du regard. */
.kdlr-journee__jour {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kdlr-encre-douce);
}

.kdlr-journee__quantieme {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.3125rem;
}

/* ─── Les places restantes ────────────────────────────────────────────────── */

.kdlr-journee__places {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--kdlr-encre-douce);
}

.kdlr-place {
	display: inline-flex;
	gap: 0.35rem;
	white-space: nowrap;
}

.kdlr-place b {
	font-weight: 600;
	color: var(--kdlr-encre);
}

/* Complet se dit en gris, pas en rouge : ce n'est pas une erreur, c'est une
   information — et douze lignes dont trois en rouge donnent l'air d'une panne. */
.kdlr-place--complet b {
	color: var(--kdlr-encre-douce);
	font-weight: 400;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.kdlr-journee__complet {
	font-size: 0.8125rem;
	color: var(--kdlr-encre-douce);
}

/* ─── Boutons ─────────────────────────────────────────────────────────────── */

.kdlr-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--kdlr-accent);
	border-radius: 999px;
	padding: 0.45rem 1.1rem;
	font-size: 0.875rem;
	line-height: 1.2;
	text-decoration: none;
	color: var(--kdlr-accent);
	background: transparent;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.kdlr-bouton:hover,
.kdlr-bouton:focus-visible {
	background: var(--kdlr-accent);
	color: var(--kdlr-fond);
}

.kdlr-bouton--principal {
	background: var(--kdlr-accent);
	color: var(--kdlr-fond);
	padding: 0.75rem 1.75rem;
	font-size: 0.9375rem;
}

.kdlr-bouton--principal:hover,
.kdlr-bouton--principal:focus-visible {
	background: var(--kdlr-encre);
	border-color: var(--kdlr-encre);
}

/* ─── Le formulaire ───────────────────────────────────────────────────────── */

.kdlr-form {
	padding: 0.5rem 0 1.5rem;
	border-top: 1px solid var(--kdlr-trait);
}

.kdlr-form fieldset {
	border: 0;
	padding: 0;
	margin: 1.25rem 0;
}

.kdlr-form legend,
.kdlr-champ label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kdlr-encre-douce);
	margin-bottom: 0.5rem;
	padding: 0;
}

/* Le choix de la place se fait en deux cartes cliquables plutôt qu'en boutons
   radio nus : c'est la décision qui structure la réservation, et le prix doit
   se lire en même temps que l'intitulé. */
.kdlr-choix {
	display: grid;
}

.kdlr-choix__option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	border: 1px solid var(--kdlr-trait);
	border-radius: var(--kdlr-rayon);
	padding: 0.85rem 1rem;
	margin-bottom: 0.5rem;
	background: var(--kdlr-fond);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.kdlr-choix__option:hover {
	border-color: var(--kdlr-accent);
}

.kdlr-choix__option:has(input:checked) {
	border-color: var(--kdlr-accent);
	box-shadow: 0 0 0 1px var(--kdlr-accent);
}

.kdlr-choix__option--indispo {
	opacity: 0.45;
	cursor: not-allowed;
}

.kdlr-choix__nom {
	flex: 1;
}

.kdlr-choix__prix {
	font-weight: 600;
}

.kdlr-champs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0 1rem;
}

.kdlr-champ {
	margin: 0 0 1rem;
}

.kdlr-champ input[type="text"],
.kdlr-champ input[type="email"],
.kdlr-champ input[type="tel"],
.kdlr-champ textarea {
	width: 100%;
	border: 1px solid var(--kdlr-trait);
	border-radius: 10px;
	padding: 0.65rem 0.8rem;
	font: inherit;
	font-size: 0.9375rem;
	background: var(--kdlr-fond);
	color: inherit;
}

.kdlr-champ input:focus-visible,
.kdlr-champ textarea:focus-visible {
	outline: 2px solid var(--kdlr-accent);
	outline-offset: 1px;
	border-color: transparent;
}

.kdlr-facultatif {
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.75;
}

.kdlr-champ--consent label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.kdlr-champ--consent input {
	margin-top: 0.2em;
	flex: 0 0 auto;
}

.kdlr-envoi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 1.5rem 0 0;
}

.kdlr-envoi__note {
	font-size: 0.75rem;
	color: var(--kdlr-encre-douce);
	max-width: 22rem;
}

/* Le pot de miel : hors écran, mais jamais `display: none` — certains robots
   ignorent les champs cachés, et les lecteurs d'écran doivent pouvoir passer. */
.kdlr-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ─── Messages ────────────────────────────────────────────────────────────── */

.kdlr-avis {
	border-radius: var(--kdlr-rayon, 14px);
	border: 1px solid var(--wp--preset--color--line, #e6e3dd);
	background: var(--wp--preset--color--surface, #faf8f5);
	padding: 0.9rem 1.1rem;
	font-size: 0.9375rem;
	margin: 0 0 1.25rem;
}

.kdlr-avis--erreur {
	border-color: #c0392b;
	color: #96261a;
}

/* ─── Le reçu ─────────────────────────────────────────────────────────────── */

.kdlr-recu {
	max-width: 34rem;
	margin-inline: auto;
	border: 1px solid var(--wp--preset--color--line, #e6e3dd);
	border-radius: 18px;
	padding: 1.75rem;
	background: var(--wp--preset--color--base, #fff);
}

.kdlr-recu__titre {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.5rem;
	margin: 0 0 1.25rem;
}

.kdlr-recu__liste {
	margin: 0;
	display: grid;
	gap: 0.6rem;
}

.kdlr-recu__liste > div {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 1rem;
}

.kdlr-recu__liste dt {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft, #6b6b78);
	padding-top: 0.15em;
}

.kdlr-recu__liste dd {
	margin: 0;
}

.kdlr-recu__note {
	margin: 1.5rem 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-soft, #6b6b78);
}

/* ─── Téléphone ───────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	/* La date et l'action restent face à face sur la première ligne ; les
	   places passent dessous, où elles ont la largeur de s'écrire en entier. */
	.kdlr-journee__ligne {
		grid-template-columns: 1fr auto;
	}

	.kdlr-journee__places {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.kdlr-envoi__note {
		max-width: none;
	}

	.kdlr-recu__liste > div {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kdlr-bouton,
	.kdlr-choix__option {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Les séances individuelles.
   ═══════════════════════════════════════════════════════════════════════════ */

.kdlr-rdv {
	max-width: 44rem;
}

/* ─── Le fil des étapes ───────────────────────────────────────────────────── */

/* Trois mots, pas une frise numérotée : le parcours fait trois écrans, et
   c'est le chemin déjà parcouru qu'on vient chercher — pour y revenir. */
.kdlr-fil {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.75rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kdlr-encre-douce);
}

.kdlr-fil__etape + .kdlr-fil__etape::before {
	content: "›";
	margin-right: 0.75rem;
	color: var(--kdlr-trait);
}

.kdlr-fil__etape--active {
	color: var(--kdlr-accent);
}

.kdlr-fil__etape a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--kdlr-trait);
}

.kdlr-fil__etape a:hover,
.kdlr-fil__etape a:focus-visible {
	border-bottom-color: currentColor;
}

/* ─── Une question posée avant chaque choix ───────────────────────────────── */

.kdlr-question {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.25rem;
	margin: 0 0 1.25rem;
}

.kdlr-note {
	font-size: 0.8125rem;
	color: var(--kdlr-encre-douce);
	margin: 1.25rem 0 0;
}

/* ─── Le choix de la séance ───────────────────────────────────────────────── */

.kdlr-seances,
.kdlr-lieux {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kdlr-seances {
	display: grid;
	gap: 0.75rem;
}

/* La carte entière est cliquable, pas seulement le nom : sur un téléphone, une
   cible de la taille d'une ligne de texte se rate une fois sur trois. */
.kdlr-seance__lien {
	display: grid;
	gap: 0.3rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--kdlr-trait);
	border-radius: var(--kdlr-rayon);
	background: var(--kdlr-fond);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.kdlr-seance__lien:hover,
.kdlr-seance__lien:focus-visible {
	border-color: var(--kdlr-accent);
	background: var(--kdlr-surface);
}

.kdlr-seance__nom {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.125rem;
}

.kdlr-seance__texte {
	font-size: 0.9375rem;
	color: var(--kdlr-encre-douce);
}

.kdlr-seance__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	color: var(--kdlr-encre-douce);
}

.kdlr-seance__prix {
	color: var(--kdlr-accent);
}

.kdlr-lieux {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.kdlr-bouton--choix {
	padding: 0.7rem 1.4rem;
}

/* ─── Les créneaux ────────────────────────────────────────────────────────── */

.kdlr-jours {
	display: grid;
	gap: 1.5rem;
}

.kdlr-jour__titre {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	font-weight: 400;
}

.kdlr-jour__nom {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kdlr-encre-douce);
}

.kdlr-jour__quantieme {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.1875rem;
}

.kdlr-heures {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Une heure est une cible : 2,75 rem de haut, soit au-dessus des 44 px que
   demande un doigt. Une liste d'heures serrées se tape de travers. */
.kdlr-heure {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 5rem;
	min-height: 2.75rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--kdlr-trait);
	border-radius: 999px;
	background: var(--kdlr-fond);
	color: inherit;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.kdlr-heure:hover,
.kdlr-heure:focus-visible {
	border-color: var(--kdlr-accent);
	background: var(--kdlr-accent);
	color: var(--kdlr-fond);
}

.kdlr-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--kdlr-trait);
	font-size: 0.875rem;
}

.kdlr-pagination a {
	color: var(--kdlr-accent);
}

/* ─── Le récapitulatif, au-dessus du formulaire ───────────────────────────── */

.kdlr-recap {
	border: 1px solid var(--kdlr-trait);
	border-radius: var(--kdlr-rayon);
	background: var(--kdlr-surface);
	padding: 1.25rem 1.4rem;
	margin-bottom: 1.5rem;
}

.kdlr-recap p {
	margin: 0;
}

.kdlr-recap__seance {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.1875rem;
}

.kdlr-recap__quand {
	margin-top: 0.2rem !important;
	font-size: 1rem;
}

.kdlr-recap__ou {
	margin-top: 0.35rem !important;
	font-size: 0.875rem;
	color: var(--kdlr-encre-douce);
}

.kdlr-recap__changer {
	margin-top: 0.75rem !important;
	font-size: 0.8125rem;
}

.kdlr-recap__changer a {
	color: var(--kdlr-accent);
}

.kdlr-rdv .kdlr-form {
	border-top: 0;
	padding-top: 0;
}

@media (max-width: 600px) {
	.kdlr-heure {
		min-width: 4.5rem;
	}

	.kdlr-heures {
		gap: 0.4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kdlr-heure,
	.kdlr-seance__lien {
		transition: none;
	}
}

/* ─── Les liens qui n'en sont pas ─────────────────────────────────────────── */

/* Le thème souligne, colore et épaissit tout lien posé dans un `li` du
   contenu — c'est ce qui rend ses articles lisibles, et c'est justement ce
   qu'il ne faut pas ici : une carte de séance et une pastille d'horaire sont
   des BOUTONS, qui portent déjà leur cadre. Sa règle vaut 0,2,1 ; on repasse
   devant par la structure (0,3,1) plutôt que par un `!important`, qui
   interdirait au thème de reprendre la main le jour où la charte change. */
.kdlr-rdv .kdlr-heures a.kdlr-heure,
.kdlr-rdv .kdlr-seances a.kdlr-seance__lien,
.kdlr-rdv .kdlr-lieux a.kdlr-bouton {
	text-decoration: none;
	font-weight: inherit;
	color: inherit;
}

.kdlr-rdv .kdlr-lieux a.kdlr-bouton {
	color: var(--kdlr-accent);
}

.kdlr-rdv .kdlr-heures a.kdlr-heure:hover,
.kdlr-rdv .kdlr-heures a.kdlr-heure:focus-visible,
.kdlr-rdv .kdlr-lieux a.kdlr-bouton:hover,
.kdlr-rdv .kdlr-lieux a.kdlr-bouton:focus-visible {
	color: var(--kdlr-fond);
}