/* Espace DIA — calendrier de réservation d'une cabine.
   Reprend les jetons du thème (--dia-accent suit la couleur de la page). */

.dia-resa {
	--resa-accent: var(--dia-accent, #405f9a);
	/* Accent assombri : les teintes d'accent du site (violet, turquoise…) n'atteignent pas 4.5:1
	   sur les fonds clairs de la maquette (mesuré à 2.8:1). Même teinte, contraste AA. */
	--resa-accent-strong: color-mix(in srgb, var(--resa-accent) 70%, #000);
	--resa-accent-ink: #fff;
	--resa-ink: var(--bricks-color-dia-noir, #111);
	--resa-line: color-mix(in srgb, var(--resa-ink) 14%, transparent);
	--resa-soft: color-mix(in srgb, var(--resa-accent) 8%, #fff);
	--resa-radius: 80px;
	--resa-ui: "Inter", system-ui, sans-serif;
	--resa-titre: "Fahkwang", Georgia, serif;
	--resa-ease: cubic-bezier(0.16, 1, 0.3, 1);

	display: grid;
	gap: 24px;
	color: var(--resa-ink);
	scroll-margin-top: 120px; /* ancres (#reserver-en-ligne) sous le header fixe */
}

/* Liste « Thérapeute » (réservation « n'importe quel thérapeute ») */
.dia-resa__choix {
	display: grid;
	gap: 8px;
	max-width: 420px;
}

.dia-resa__choix-label {
	color: var(--resa-ink); /* le thème grise tous les <label> (1.09:1 sur fond coloré) */
	font-family: var(--resa-ui);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.dia-resa__select {
	min-height: 48px;
	padding: 0 44px 0 16px;
	border: 1px solid var(--resa-accent-strong);
	border-radius: 8px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
	color: var(--resa-ink);
	font-family: var(--resa-ui);
	font-size: 16px; /* ≥ 16 px : pas de zoom automatique sur iOS */
	appearance: none;
	cursor: pointer;
}

.dia-resa__select:focus-visible {
	outline: 2px solid var(--resa-accent-strong);
	outline-offset: 3px;
}

/* L'élément Bricks occupe toute la largeur de son conteneur (les conteneurs du thème n'étirent pas leurs enfants). */
.brxe-dia-reservation {
	width: 100%;
}

/* Ton « encre » : sur un fond déjà coloré (ex. section violette de la page Contact), l'accent
   assombri ne contraste plus ; titres, onglets et liens passent à l'encre. */
.dia-resa--encre {
	--resa-accent-strong: var(--resa-ink);
}

.dia-resa__titre {
	margin: 0;
	font-family: var(--resa-titre);
	font-size: clamp(22px, 1.4rem + 0.6vw, 30px);
	font-weight: 300;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--resa-accent-strong);
}

/* Formules : onglets en pilules, prix en second niveau */
.dia-resa__tarifs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dia-resa__tarif {
	display: grid;
	gap: 2px;
	padding: 12px 22px;
	border: 1px solid var(--resa-accent-strong);
	border-radius: var(--resa-radius);
	background: transparent;
	color: var(--resa-accent-strong);
	font-family: var(--resa-ui);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s var(--resa-ease);
}

.dia-resa__tarif-nom {
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.dia-resa__tarif-prix {
	font-size: 13px;
}

.dia-resa__tarif:hover {
	background: var(--resa-soft);
}

.dia-resa__tarif[aria-selected="true"] {
	background: var(--resa-accent-strong);
	color: var(--resa-accent-ink);
}

.dia-resa__tarif:active,
.dia-resa__creneau:active {
	transform: scale(0.97);
}

/* Navigation par période */
.dia-resa__panel {
	display: grid;
	gap: 20px;
}

.dia-resa__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--resa-line);
}

.dia-resa__periode {
	margin: 0;
	font-family: var(--resa-ui);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.dia-resa__pas {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--resa-line);
	border-radius: 50%;
	background: transparent;
	color: var(--resa-ink);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.dia-resa__pas:hover:not(:disabled) {
	border-color: var(--resa-accent-strong);
	color: var(--resa-accent-strong);
}

.dia-resa__pas:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Jours : colonnes qui passent à la ligne selon la largeur disponible */
.dia-resa__jours {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: 24px 16px;
	min-height: 140px;
	transition: opacity 0.2s ease;
}

.dia-resa.is-loading .dia-resa__jours {
	pointer-events: none;
	opacity: 0.45;
}

.dia-resa__jour {
	display: grid;
	align-content: start;
	gap: 10px;
}

.dia-resa__jour-titre {
	margin: 0;
	color: var(--resa-ink); /* sinon la couleur des titres du thème (trop claire sur les fonds de la maquette) */
	font-family: var(--resa-ui);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.dia-resa__jour-titre::first-letter {
	text-transform: uppercase;
}

.dia-resa__jour.is-complet .dia-resa__jour-titre {
	font-weight: 400; /* discret sans perdre en contraste */
}

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

.dia-resa__creneaux .is-cache {
	display: none;
}

.dia-resa__jour.is-ouvert .is-cache {
	display: block;
}

.dia-resa__creneau {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--resa-line);
	border-radius: var(--resa-radius);
	background: #fff;
	color: var(--resa-ink);
	font-family: var(--resa-ui);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.25s var(--resa-ease);
}

.dia-resa__creneau:hover {
	border-color: var(--resa-accent-strong);
	background: var(--resa-accent-strong);
	color: var(--resa-accent-ink);
}

.dia-resa__vide {
	margin: 0;
	font-family: var(--resa-ui);
	font-size: 13px;
	font-style: italic;
}

.dia-resa__plus,
.dia-resa__lien,
.dia-resa__tout {
	justify-self: start;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--resa-accent-strong);
	font-family: var(--resa-ui);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.dia-resa__lien:disabled {
	opacity: 0.4;
	cursor: default;
}

.dia-resa__etat {
	grid-column: 1 / -1;
	margin: 0;
	font-family: var(--resa-ui);
	font-size: 14px;
}

.dia-resa__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--resa-line);
	font-family: var(--resa-ui);
	font-size: 13px;
}

.dia-resa button:focus-visible {
	outline: 2px solid var(--resa-accent-strong);
	outline-offset: 3px;
}

.dia-resa-notice {
	padding: 16px;
	border: 1px dashed currentColor;
	font-size: 14px;
}

/* Vue Cal.com intégrée : l'iframe prend toute la largeur, sa hauteur suit son contenu */
.dia-resa__cal {
	min-height: 480px;
	border-radius: 16px;
	overflow: hidden;
}

.dia-resa__cal-frame[hidden] {
	display: none;
}

.dia-resa__externe {
	color: var(--resa-accent-strong);
	font-family: var(--resa-ui);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Section « Prendre rendez-vous » de la fiche thérapeute (élément à la racine du gabarit) */
.dia-resa-section {
	padding: 40px 80px 140px;
	background: var(--dia-surface, transparent);
	scroll-margin-top: 120px; /* header fixe */
}

.dia-resa-section__inner {
	max-width: 1056px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.dia-resa-section {
		padding: 24px 24px 72px;
	}
}

/* Formulaire « Demande de rendez-vous » : lien vers la réservation en ligne */
.dia-form-hint {
	margin: 8px 0 0;
	font-family: "Inter", system-ui, sans-serif;
	font-size: 14px;
}

.dia-form-hint a {
	color: inherit; /* le fond du formulaire suit la couleur de la page : on garde le contraste du texte */
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 478px) {
	.dia-resa__tarif {
		flex: 1 1 100%;
	}

	.dia-resa__jours {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Navigateurs sans color-mix() : accent sombre fixe */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.dia-resa {
		--resa-accent-strong: #3f3a66;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dia-resa *,
	.dia-resa {
		transition: none !important;
	}
}

/* ---------- Affichage « formulaire » ----------
   Copie de l'habillage du formulaire « Demande de rendez-vous » (classe
   dia-rdv-form de la page Contact) : champs encadrés de noir sur fond
   transparent, calendrier sur fond violet clair, week-ends en rouge, jour
   choisi en pastille d'accent, bouton pilule. Valeurs relevées sur ce formulaire. */

.dia-resa-form {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 380px);
	grid-template-areas:
		"calendrier therapeute"
		"calendrier heure"
		"calendrier etat"
		"calendrier envoi"
		"calendrier pied"
		"calendrier .";
	grid-template-rows: auto auto auto auto auto 1fr;
	justify-content: space-between; /* calendrier collé à gauche, champs collés à droite */
	column-gap: 40px;
	row-gap: 14px;
	align-items: start;
	width: 100%;
	font-family: var(--resa-ui);
}

/* Calendrier à gauche, champs et bouton à droite. */
.dia-resa-form [data-role="therapeute"] { grid-area: therapeute; }
.dia-resa-form [data-role="heure"] { grid-area: heure; }
.dia-resa-form .dia-resa-cal { grid-area: calendrier; }
.dia-resa-form .dia-resa-form__etat { grid-area: etat; }
.dia-resa-form .dia-resa-form__envoi { grid-area: envoi; }
.dia-resa-form .dia-resa-form__pied { grid-area: pied; }

/* Mobile : une colonne, le calendrier entre le thérapeute et l'heure. */
@media (max-width: 767px) {
	.dia-resa-form {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "therapeute" "calendrier" "heure" "etat" "envoi" "pied";
		grid-template-rows: none;
		max-width: 420px;
	}
}

.dia-resa-form__champ {
	width: 100%;
	height: 44px;
	padding: 12px 36px 12px 14px;
	border: 1px solid var(--bricks-color-dia-noir, #000);
	border-radius: 5px;
	background: transparent url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.50781 14.8535L0.351562 9.69727L0 9.375L0.673828 8.70117L0.996094 9.05273L5.36133 13.3887V0H6.29883V13.3887L10.6641 9.05273L10.9863 8.70117L11.6602 9.375L11.3086 9.69727L6.15234 14.8535L5.83008 15.2051L5.50781 14.8535Z' fill='black'/%3E%3C/svg%3E") no-repeat right 10px center / 12px 16px;
	color: var(--bricks-color-dia-noir, #000);
	font-family: var(--resa-ui);
	font-size: 15px;
	line-height: 18px;
	letter-spacing: -0.01em;
	appearance: none;
	cursor: pointer;
}

.dia-resa-form__champ[hidden] {
	display: none;
}

.dia-resa-form__champ:disabled {
	cursor: default;
	opacity: 0.6;
}

/* Créneau pris ou passé : grisé et non sélectionnable (option désactivée). */
.dia-resa-form__champ option:disabled {
	color: #a6a6a6;
}

.dia-resa-form__champ:focus-visible {
	outline: 2px solid var(--bricks-color-dia-noir, #000);
	outline-offset: 2px;
}

/* Calendrier : même cadre que le datepicker de la demande de rendez-vous. */
.dia-resa-cal {
	padding: 16px 10px;
	border: 1px solid var(--bricks-color-dia-noir, #000);
	border-radius: 8px;
	background-color: var(--bricks-color-dia-violet-100, #cec7e1);
	color: var(--bricks-color-dia-noir, #000);
	transition: opacity 0.2s ease;
}

.dia-resa.is-loading .dia-resa-cal__jours {
	opacity: 0.5;
}

.dia-resa-cal__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 28px;
	margin-bottom: 12px;
}

.dia-resa-cal__mois {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.dia-resa-cal__pas {
	display: flex;
	align-items: center;
	height: 28px;
	padding: 0 6px;
	border: 0;
	background: none;
	color: var(--bricks-color-dia-noir, #000);
	cursor: pointer;
}

.dia-resa-cal__pas:hover {
	color: var(--dia-accent, #8473b3);
}

/* Flèche d'un mois inaccessible : masquée mais gardée pour centrer le titre. */
.dia-resa-cal__pas.is-masque {
	visibility: hidden;
}

.dia-resa-cal__semaine,
.dia-resa-cal__jours {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
}

/* Grille des jours à hauteur fixe (230 px) : 5 ou 6 semaines se répartissent
   la hauteur, le calendrier ne change pas de taille d'un mois à l'autre. */
.dia-resa-cal__jours {
	height: 230px;
	grid-auto-rows: 1fr;
	align-items: center;
}

.dia-resa-cal__semaine span {
	font-size: 12px;
	line-height: 24px;
	text-transform: uppercase;
}

/* Samedi et dimanche en rouge, en-tête comme jours. */
.dia-resa-cal__semaine span:nth-child(n+6),
.dia-resa-cal__jour.is-weekend {
	color: var(--bricks-color-dia-rouge-300, #e2574c);
}

.dia-resa-cal__jour {
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: center; /* case carrée centrée dans sa colonne : jour choisi et survol en rond */
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	color: var(--bricks-color-dia-noir, #000);
	font-family: var(--resa-ui);
	font-size: 16px;
	line-height: 36px;
}

button.dia-resa-cal__jour {
	cursor: pointer;
}

button.dia-resa-cal__jour:hover {
	background-color: var(--bricks-color-dia-violet-200, #b5aad3);
}

.dia-resa-cal__jour.is-indispo {
	color: rgba(0, 0, 0, 0.3);
}

/* Week-end sans créneau (dimanche, fermé) : reste rouge (non cliquable, sans survol). */
.dia-resa-cal__jour.is-weekend.is-indispo {
	color: var(--bricks-color-dia-rouge-300, #e2574c);
}

.dia-resa-cal__jour.is-choisi,
.dia-resa-cal__jour.is-choisi:hover {
	border-color: var(--dia-accent, #8473b3);
	background-color: var(--dia-accent, #8473b3);
	color: var(--bricks-color-dia-blanc, #fff);
	font-weight: 700;
}

.dia-resa-form__etat {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
}

.dia-resa-form__etat[hidden] {
	display: none;
}

/* Bouton : pilule centrée comme « Prendre rendez-vous » de la demande. */
.dia-resa-form__envoi {
	justify-self: start;
	margin-top: 12px;
	padding: 12px 18px;
	border: 0;
	border-radius: 58px;
	background-color: var(--dia-accent, #8473b3);
	color: var(--bricks-color-dia-blanc, #fff);
	font-family: var(--resa-ui);
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: opacity 0.25s ease;
}

.dia-resa-form__envoi:hover:not(:disabled) {
	opacity: 0.85;
}

.dia-resa-form__envoi:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.dia-resa-form__pied {
	margin: 0;
	font-size: 13px;
}