/**
 * ET Events Calendar — la prise de rendez-vous.
 *
 * Les couleurs, l'arrondi, les polices et le mode sombre viennent des
 * jetons du style choisi (etec.css, ETEC_Presets). La mise en page suit la
 * largeur du module lui-même (container queries) : en barre latérale comme
 * en pleine page, il se range juste.
 *
 * @package ET_Events_Calendar
 */

.etec-rdv {
	--etec-rdv-couleur: var(--etec-accent);
	--etec-rdv-texte: var(--etec-accent-texte, var(--etec-accent));
	container-type: inline-size;
	position: relative;
	min-height: 320px;
	box-sizing: border-box;
}

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

.etec-rdv .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ─────────── Le chargement ─────────── */

.etec-rdv__chargement {
	display: grid;
	gap: 12px;
	padding: 8px 0;
}

.etec-rdv.is-pret .etec-rdv__chargement {
	display: none;
}

.etec-rdv__squelette {
	display: block;
	height: 44px;
	background: linear-gradient(90deg, var(--etec-fond) 25%, color-mix(in srgb, currentColor 9%, transparent) 50%, var(--etec-fond) 75%);
	background-size: 200% 100%;
	border-radius: var(--etec-rayon);
	animation: etec-rdv-lueur 1.2s linear infinite;
}

@keyframes etec-rdv-lueur {

	from {
		background-position: 200% 0;
	}

	to {
		background-position: -200% 0;
	}
}

/* ─────────── Les bandeaux ─────────── */

.etec-rdv__apercu {
	margin: 0 0 12px;
	padding: 6px 12px;
	font-size: .85em;
	font-weight: 600;
	color: #7a2e0e;
	background: #fdecd8;
	border-radius: var(--etec-rayon);
}

.etec-rdv__bandeau {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 16px;
	padding: 12px 14px;
	font-weight: 600;
	border-radius: var(--etec-rayon);
}

.etec-rdv__bandeau--info {
	background: var(--etec-accent-doux);
}

.etec-rdv__bandeau--succes {
	color: #0f5132;
	background: #d1e7dd;
}

.etec-rdv__bandeau--erreur {
	color: #842029;
	background: #f8d7da;
}

.etec-rdv__bandeau .etec-rdv__icone {
	flex: none;
}

/* ─────────── Les titres, les méta ─────────── */

.etec-rdv .etec-rdv__titre {
	margin: 0 0 14px;
	font-size: 1.2em;
	line-height: 1.25;
}

.etec-rdv .etec-rdv__titre:focus {
	outline: none;
}

.etec-rdv__icone {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 1.15em;
	height: 1.15em;
	margin-right: 8px;
	color: var(--etec-rdv-texte);
	vertical-align: -.2em;
}

.etec-rdv__icone svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* La flèche d'un bouton vient après son texte, et non avant. */
.etec-rdv .etec__bouton .etec-rdv__icone--suite {
	margin: 0 0 0 6px;
}

.etec-rdv .etec-rdv__meta.etec-rdv__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	font-size: .92em;
	color: var(--etec-doux);
	list-style: none;
}

.etec-rdv .etec-rdv__meta > li,
.etec-rdv .etec-rdv__meta > span {
	display: flex;
	align-items: baseline;
	margin: 0;
	padding: 0;
	list-style: none;
}

.etec-rdv .etec-rdv__meta > li::before,
.etec-rdv .etec-rdv__meta > li::marker {
	content: none;
}

.etec-rdv .etec-rdv__meta--colonne.etec-rdv__meta--colonne {
	flex-direction: column;
	gap: 8px;
}

/* ─────────── La liste des prestations ─────────── */

.etec-rdv .etec-rdv__cartes.etec-rdv__cartes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.etec-rdv .etec-rdv__cartes > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.etec-rdv .etec-rdv__cartes > li::before,
.etec-rdv .etec-rdv__cartes > li::marker {
	content: none;
}

.etec-rdv .etec-rdv__carte {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	height: 100%;
	padding: 18px 18px 16px;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	background: var(--etec-panneau, var(--etec-fond));
	border: 1px solid var(--etec-trait);
	border-top: 4px solid var(--etec-rdv-couleur);
	border-radius: var(--etec-rayon);
	box-shadow: var(--etec-ombre, none);
	transition: transform .15s, box-shadow .15s, border-color .15s;
}

.etec-rdv .etec-rdv__carte:hover,
.etec-rdv .etec-rdv__carte:focus-visible {
	transform: translateY(-2px);
	border-color: var(--etec-rdv-couleur);
	box-shadow: 0 10px 24px rgba(16, 24, 40, .1);
}

.etec-rdv .etec-rdv__carte:focus-visible {
	outline: 2px solid var(--etec-rdv-couleur);
	outline-offset: 2px;
}

.etec-rdv__carte-titre {
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.3;
}

.etec-rdv__carte-texte {
	display: -webkit-box;
	overflow: hidden;
	font-size: .92em;
	color: var(--etec-doux);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.etec-rdv__carte-action {
	margin-top: auto;
	font-weight: 600;
	color: var(--etec-rdv-texte);
}

/* ─────────── Les trois colonnes ─────────── */

.etec-rdv__grille-etapes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	padding: 20px;
	background: var(--etec-panneau, transparent);
	border: 1px solid var(--etec-trait);
	border-radius: calc(var(--etec-rayon) + 4px);
	box-shadow: var(--etec-ombre, none);
}

@container (min-width: 620px) {

	.etec-rdv__grille-etapes {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	}

	.etec-rdv__resume {
		grid-column: 1 / -1;
	}

	.etec-rdv__grille-etapes--form {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	}

	.etec-rdv__grille-etapes--form .etec-rdv__recap {
		grid-column: auto;
		align-self: start;
	}
}

@container (min-width: 940px) {

	.etec-rdv__grille-etapes {
		grid-template-columns: 260px minmax(0, 1fr) 256px;
		gap: 0;
		padding: 0;
	}

	.etec-rdv__grille-etapes > * {
		padding: 24px;
	}

	.etec-rdv__resume {
		grid-column: auto;
		border-right: 1px solid var(--etec-trait);
	}

	.etec-rdv__horaires {
		max-height: 520px;
		overflow-y: auto;
		border-left: 1px solid var(--etec-trait);
	}

	/*
	 * L'étape du formulaire n'a pas de filets entre colonnes : elle reprend
	 * donc un rembourrage et un écart de grille, plutôt que des marges posées
	 * sur chaque enfant. Le formulaire n'avait pas de marge à gauche : ses
	 * champs touchaient le récapitulatif.
	 */
	.etec-rdv__grille-etapes--form {
		grid-template-columns: 300px minmax(0, 1fr);
		column-gap: 32px;
		padding: 28px;
	}

	.etec-rdv__grille-etapes--form > * {
		padding: 0;
	}

	.etec-rdv__grille-etapes--form .etec-rdv__recap {
		margin: 0;
		padding: 20px;
	}
}

/* ─────────── Le résumé ─────────── */

.etec-rdv__resume {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.etec-rdv .etec-rdv__retour {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	padding: 4px 0;
	font: inherit;
	font-size: .9em;
	font-weight: 600;
	color: var(--etec-rdv-texte);
	cursor: pointer;
	background: none;
	border: 0;
}

.etec-rdv .etec-rdv__retour:hover {
	text-decoration: underline;
}

.etec-rdv__hotes {
	display: flex;
	gap: 10px;
	align-items: center;
}

.etec-rdv__avatars {
	display: flex;
}

.etec-rdv__avatars img {
	width: 40px;
	height: 40px;
	margin-left: -10px;
	object-fit: cover;
	border: 2px solid var(--etec-fond-page, #fff);
	border-radius: 50%;
}

.etec-rdv__avatars img:first-child {
	margin-left: 0;
}

.etec-rdv__hotes-noms {
	font-size: .9em;
	font-weight: 600;
	color: var(--etec-doux);
}

.etec-rdv .etec-rdv__nom {
	margin: 0;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.25;
}

.etec-rdv .etec-rdv__description,
.etec-rdv .etec-rdv__actuel {
	margin: 0;
	font-size: .92em;
}

.etec-rdv .etec-rdv__actuel {
	padding: 10px 12px;
	background: var(--etec-fond);
	border-radius: var(--etec-rayon);
}

/* ─────────── Le calendrier ─────────── */

.etec-rdv__calendrier {
	position: relative;
	min-width: 0;
}

.etec-rdv__mois {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 10px;
}

.etec-rdv .etec-rdv__mois-titre {
	margin: 0;
	font-weight: 700;
	text-transform: capitalize;
}

.etec-rdv .etec-rdv__fleche {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font: inherit;
	font-size: 1.4em;
	line-height: 1;
	color: var(--etec-rdv-texte);
	cursor: pointer;
	background: var(--etec-accent-doux);
	border: 0;
	border-radius: 50%;
}

.etec-rdv .etec-rdv__fleche:disabled {
	color: var(--etec-doux);
	cursor: default;
	background: transparent;
	opacity: .4;
}

.etec-rdv .etec-rdv__grille.etec-rdv__grille {
	width: 100%;
	margin: 0;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 2px 4px;
	border: 0;
}

.etec-rdv .etec-rdv__grille th,
.etec-rdv .etec-rdv__grille td {
	padding: 0;
	text-align: center;
	background: transparent;
	border: 0;
}

.etec-rdv .etec-rdv__grille th {
	padding: 4px 0;
	font-size: .75em;
	font-weight: 700;
	color: var(--etec-doux);
}

.etec-rdv .etec-rdv__grille abbr {
	text-decoration: none;
	border: 0;
}

.etec-rdv .etec-rdv__jour {
	display: inline-grid;
	place-items: center;
	width: 44px;
	max-width: 100%;
	aspect-ratio: 1;
	padding: 0;
	font: inherit;
	font-size: .95em;
	font-variant-numeric: tabular-nums;
	color: var(--etec-doux);
	cursor: default;
	background: transparent;
	border: 0;
	border-radius: 50%;
	transition: background-color .15s, color .15s;
}

.etec-rdv .etec-rdv__jour.is-libre {
	font-weight: 700;
	color: var(--etec-rdv-texte);
	cursor: pointer;
	background: color-mix(in srgb, var(--etec-rdv-couleur) 12%, transparent);
}

.etec-rdv .etec-rdv__jour.is-libre:not(.is-choisi):hover {
	background: color-mix(in srgb, var(--etec-rdv-couleur) 22%, transparent);
}

.etec-rdv .etec-rdv__jour.is-choisi {
	color: var(--etec-sur-accent);
	background: var(--etec-plein, var(--etec-accent));
}

.etec-rdv .etec-rdv__jour.is-aujourdhui {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--etec-rdv-couleur) 60%, transparent);
}

.etec-rdv .etec__bouton:focus-visible,
.etec-rdv .etec-rdv__jour:focus-visible,
.etec-rdv .etec-rdv__creneau:focus-visible,
.etec-rdv .etec-rdv__fleche:focus-visible,
.etec-rdv .etec-rdv__retour:focus-visible {
	outline: 2px solid var(--etec-rdv-couleur);
	outline-offset: 2px;
}

.etec-rdv__calendrier.is-charge .etec-rdv__grille {
	opacity: .35;
	pointer-events: none;
}

.etec-rdv__calendrier.is-charge::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	content: "";
	border: 3px solid var(--etec-accent-doux);
	border-top-color: var(--etec-rdv-couleur);
	border-radius: 50%;
	animation: etec-rdv-tour .8s linear infinite;
}

@keyframes etec-rdv-tour {

	to {
		transform: rotate(360deg);
	}
}

.etec-rdv .etec-rdv__fuseau {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 14px 0 0;
	font-size: .88em;
}

.etec-rdv .etec-rdv__fuseau label {
	display: flex;
	align-items: center;
	font-weight: 600;
}

.etec-rdv .etec-rdv__fuseau select {
	width: 100%;
	min-height: 40px;
	padding: 6px 10px;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var(--etec-trait);
	border-radius: var(--etec-rayon);
}

/* ─────────── Les horaires ─────────── */

.etec-rdv__horaires {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	scroll-margin-top: 90px;
}

/* Une capitale au début, et pas une à chaque mot : en français, le mois
   s'écrit en minuscules — « Mercredi 23 septembre ». */
.etec-rdv .etec-rdv__jour-titre {
	margin: 0 0 10px;
	font-size: 1em;
	line-height: 1.3;
}

.etec-rdv .etec-rdv__jour-titre::first-letter {
	text-transform: uppercase;
}

.etec-rdv .etec-rdv__vide-texte {
	margin: 0;
	color: var(--etec-doux);
}

.etec-rdv .etec-rdv__creneaux.etec-rdv__creneaux {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container (min-width: 940px) {

	.etec-rdv .etec-rdv__creneaux.etec-rdv__creneaux {
		grid-template-columns: minmax(0, 1fr);
	}
}

.etec-rdv .etec-rdv__creneaux > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.etec-rdv .etec-rdv__creneaux > li::before,
.etec-rdv .etec-rdv__creneaux > li::marker {
	content: none;
}

.etec-rdv .etec-rdv__creneau {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: 46px;
	padding: 0 8px;
	font: inherit;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--etec-rdv-texte);
	cursor: pointer;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--etec-rdv-couleur) 50%, transparent);
	border-radius: var(--etec-rayon);
	transition: background-color .15s, border-color .15s;
}

/* Le survol épaissit le trait par une ombre intérieure, et non par la
   bordure : une bordure qui passe de 1 à 2 pixels décale le texte, et toute la
   liste tressaute sous le pointeur. */
.etec-rdv .etec-rdv__creneau:hover {
	border-color: var(--etec-rdv-couleur);
	box-shadow: inset 0 0 0 1px var(--etec-rdv-couleur);
}

/* L'heure choisie et « Suivant » côte à côte quand la colonne le permet,
   l'un sous l'autre sinon : deux moitiés de 88 pixels coupaient « Suivant » en
   deux lignes, « Suiva » puis « nt ». */
.etec-rdv .etec-rdv__creneau-choisi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 6px;
	grid-column: 1 / -1;
}

.etec-rdv .etec-rdv__creneau.is-choisi {
	color: var(--etec-sur-accent);
	cursor: default;
	background: var(--etec-accent-fort, color-mix(in srgb, var(--etec-accent) 80%, #000));
	border-color: transparent;
}

.etec-rdv .etec-rdv__suivant {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: 46px;
	padding-inline: 12px;
	white-space: nowrap;
	animation: etec-rdv-glisse .18s ease-out;
}

/* Le bouton glisse, il ne s'allume pas : une animation d'opacité qui ne se
   joue pas — onglet en arrière-plan, capture, navigateur qui économise —
   laisse le bouton invisible à son point de départ. Un glissement qui ne se
   joue pas laisse un bouton décalé de six pixels, et parfaitement lisible. */
@keyframes etec-rdv-glisse {

	from {
		transform: translateX(-6px);
	}
}

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

.etec-rdv__recap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px;
	background: var(--etec-fond);
	border-left: 4px solid var(--etec-rdv-couleur);
	border-radius: var(--etec-rayon);
}

.etec-rdv .etec-rdv__recap-titre {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0;
	font-size: 1.1em;
	font-weight: 700;
}

.etec-rdv__recap .etec-rdv__meta {
	color: inherit;
}

.etec-rdv__form {
	min-width: 0;
}

/* Le titre du formulaire s'aligne sur celui du récapitulatif. */
.etec-rdv__form > :first-child {
	margin-top: 0;
}

/* Les liens du texte prennent la couleur du style, pas le bleu du navigateur. */
.etec-rdv .etec-rdv__aide a,
.etec-rdv .etec-rdv__fin-texte a {
	color: var(--etec-rdv-texte);
}

.etec-rdv .etec__bouton .etec-rdv__icone {
	color: inherit;
}

/* Un champ en erreur se voit, même quand la feuille du formulaire pose sa propre bordure. */
.etec-rdv .etec-form [aria-invalid="true"] {
	border-color: #c0392b;
	box-shadow: 0 0 0 1px #c0392b;
}

.etec-rdv .etec-form input[type="checkbox"][aria-invalid="true"] {
	outline: 2px solid #c0392b;
	outline-offset: 2px;
}

.etec-rdv .etec-rdv__aide {
	display: block;
	margin: 2px 0 0;
	font-size: .85em;
	font-weight: 400;
	color: var(--etec-doux);
}

.etec-rdv .etec-rdv__moyens {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}

.etec-rdv .etec-rdv__moyens legend {
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	font-size: .9em;
	font-weight: 600;
}

.etec-rdv .etec-rdv__moyen {
	display: flex;
	flex: 1 1 160px;
	gap: 8px;
	align-items: center;
	padding: 12px 14px;
	cursor: pointer;
	border: 1px solid var(--etec-trait);
	border-radius: var(--etec-rayon);
}

.etec-rdv .etec-rdv__moyen:has(input:checked) {
	background: var(--etec-accent-doux);
	border-color: var(--etec-rdv-couleur);
}

.etec-rdv .etec-rdv__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
}

.etec-rdv .etec-rdv__envoyer {
	min-width: min(100%, 260px);
	min-height: 48px;
}

.etec-rdv .etec__bouton[disabled] {
	cursor: progress;
	opacity: .7;
}

.etec-rdv .etec-rdv__danger.etec__bouton--plein:not(#etec) {
	color: #fff;
	background: #b3261e;
}

.etec-rdv .etec-rdv__danger.etec__bouton--plein:not(#etec):hover,
.etec-rdv .etec-rdv__danger.etec__bouton--plein:not(#etec):focus-visible {
	color: #fff;
	background: #8c1d17;
}

/* ─────────── La confirmation et la gestion ─────────── */

.etec-rdv__fin,
.etec-rdv__gerer {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 640px;
	margin: 0 auto;
	padding: 24px;
	background: var(--etec-panneau, transparent);
	border: 1px solid var(--etec-trait);
	border-radius: calc(var(--etec-rayon) + 4px);
	box-shadow: var(--etec-ombre, none);
}

.etec-rdv__fin {
	text-align: center;
}

.etec-rdv__fin .etec-rdv__recap {
	text-align: left;
}

.etec-rdv__coche {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	font-size: 2em;
	font-weight: 700;
	color: #fff;
	background: #1e8e5a;
	border-radius: 50%;
	animation: etec-rdv-coche .35s cubic-bezier(.2, 1.4, .4, 1);
}

@keyframes etec-rdv-coche {

	from {
		opacity: 0;
		transform: scale(.4);
	}
}

.etec-rdv .etec-rdv__fin-texte {
	margin: 0;
}

.etec-rdv .etec-rdv__agenda {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0;
}

.etec-rdv__gerer .etec-rdv__agenda {
	justify-content: flex-start;
}

.etec-rdv__statut {
	padding: 2px 10px;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	border-radius: 999px;
}

.etec-rdv__statut--confirme {
	color: #0f5132;
	background: #d1e7dd;
}

.etec-rdv__statut--attente_paiement {
	color: #7a2e0e;
	background: #fdecd8;
}

.etec-rdv__statut--annule {
	color: #842029;
	background: #f8d7da;
}

.etec-rdv .etec-rdv__barre {
	margin: 0;
	color: var(--etec-doux);
	text-decoration: line-through;
}

.etec-rdv .etec-rdv__nouveau {
	margin: 0;
	font-weight: 700;
}

/* ─────────── Mouvement réduit ─────────── */

@media (prefers-reduced-motion: reduce) {

	.etec-rdv *,
	.etec-rdv *::before,
	.etec-rdv *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ─────────── Le logo et la photo de l'hôte ─────────── */

.etec-rdv__logo {
	margin-bottom: 4px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--etec-trait);
}

.etec-rdv__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

/* Un seul hôte : sa photo au-dessus de son nom, comme une carte de visite ;
   plusieurs hôtes : les vignettes se chevauchent sur une ligne, comme avant. */
.etec-rdv__hotes--seul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.etec-rdv__hotes--seul .etec-rdv__avatars img {
	width: 72px;
	height: 72px;
	margin: 0;
}

.etec-rdv__hotes--seul .etec-rdv__hotes-noms {
	font-weight: 600;
}