/* Calendriers d'occupation - La Perla de Torrenueva (123web, 02/10/2026) - module isolé, tout est préfixé .perla-cal */
.perla-cal {
	--pc-libre: #eaf6fc;
	--pc-libre-bord: #b9e1f4;
	--pc-occupe: #17608a;
	--pc-texte: #1f2d3a;
	--pc-accent: #23b0ec;
	margin: 2.5rem 0 1rem;
	padding: 1.5rem 0 0;
	border-top: 1px solid #e6e6e6;
	color: var(--pc-texte);
}
.perla-cal__titre { margin: 0; text-transform: uppercase; }
.perla-cal__intro { margin: 0 0 1rem; max-width: 60rem; }
.perla-cal__legende {
	list-style: none; margin: 0 0 1rem; padding: 0;
	display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .95em;
}
.perla-cal__legende li { display: flex; align-items: center; gap: .5rem; margin: 0; }
.perla-cal__pastille {
	display: inline-block; width: 1.6rem; height: 1.6rem; border-radius: 4px;
	border: 1px solid var(--pc-libre-bord); flex: 0 0 auto;
}
.perla-cal__sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.perla-cal__nav {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	margin: 0 0 .75rem;
}
.perla-cal__nav[hidden] { display: none; }
.perla-cal__statut {
	margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
	text-align: center; flex: 1 1 auto; font-size: 1.05em;
}
.perla-cal__btn {
	flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 50%;
	border: 2px solid var(--pc-occupe); background: #fff; color: var(--pc-occupe);
	font-size: 1.6rem; line-height: 1; cursor: pointer; display: inline-flex;
	align-items: center; justify-content: center; padding: 0 0 .2rem;
}
.perla-cal__btn:hover:not(:disabled) { background: var(--pc-occupe); color: #fff; }
.perla-cal__btn:focus-visible { outline: 3px solid #0b3550; outline-offset: 2px; }
.perla-cal__btn:disabled { opacity: .35; cursor: default; }
.perla-cal__mois-liste {
	display: grid; gap: 1.25rem 2rem;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.perla-cal.pc-js .perla-cal__mois-liste { grid-template-columns: 1fr; }
@media (min-width: 768px) {
	.perla-cal.pc-js .perla-cal__mois-liste { grid-template-columns: 1fr 1fr; }
}
.perla-cal__mois[hidden] { display: none; }
.perla-cal__mois {
	width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px;
	margin: 0;
}
.perla-cal__mois caption {
	caption-side: top; text-align: center; font-weight: 600; color: var(--pc-texte);
	text-transform: capitalize; padding: 0 0 .4rem; font-size: 1em;
}
@media (max-width: 767px) {
	.perla-cal.pc-js .perla-cal__mois caption {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
	}
}
.perla-cal__mois th {
	text-align: center; font-weight: 600; font-size: .8em; padding: .2rem 0;
	color: #4a5663; border: 0; background: none;
}
.perla-cal__mois td {
	position: relative; padding: 0; height: 2.6rem; text-align: center; vertical-align: middle;
	border-radius: 4px; font-size: .9em; border: 0;
}
.perla-cal__mois td.pc-vide { background: none; }
.perla-cal__mois .pc-n {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.6rem; height: 1.6rem; border-radius: 1rem; font-weight: 500;
}
/* Libre */
.perla-cal .pc-free { background: var(--pc-libre); box-shadow: inset 0 0 0 1px var(--pc-libre-bord); }
/* Réservé (nuit pleine) */
.perla-cal .pc-full { background: var(--pc-occupe); color: #fff; }
.perla-cal__mois td.pc-full .pc-n { text-decoration: line-through; }
/* Jour d'arrivée : matin libre (haut-gauche), après-midi occupée (bas-droite) */
.perla-cal .pc-arr {
	background: linear-gradient(to bottom right, var(--pc-libre) 0, var(--pc-libre) calc(50% - .5px), var(--pc-occupe) calc(50% + .5px), var(--pc-occupe) 100%);
	box-shadow: inset 0 0 0 1px var(--pc-libre-bord);
}
/* Jour de départ : matin occupé (haut-gauche), après-midi libre (bas-droite) */
.perla-cal .pc-dep {
	background: linear-gradient(to bottom right, var(--pc-occupe) 0, var(--pc-occupe) calc(50% - .5px), var(--pc-libre) calc(50% + .5px), var(--pc-libre) 100%);
	box-shadow: inset 0 0 0 1px var(--pc-libre-bord);
}
/* Départ + arrivée le même jour : deux triangles occupés séparés par la diagonale */
.perla-cal .pc-turn {
	background: linear-gradient(to bottom right, var(--pc-occupe) 0, var(--pc-occupe) calc(50% - 1.5px), #fff calc(50% - 1px), #fff calc(50% + 1px), var(--pc-occupe) calc(50% + 1.5px), var(--pc-occupe) 100%);
	color: #fff;
}
.perla-cal__mois td.pc-arr .pc-n,
.perla-cal__mois td.pc-dep .pc-n,
.perla-cal__mois td.pc-turn .pc-n {
	background: rgba(255, 255, 255, .92); color: var(--pc-texte);
}
/* Dates passées : neutres */
.perla-cal__mois td.pc-passe {
	background: #f3f4f5; color: #5f6873; box-shadow: none;
}
.perla-cal__mois td.pc-passe .pc-n { background: none; color: #5f6873; text-decoration: none; }
/* Aujourd'hui */
.perla-cal__mois td.pc-auj { box-shadow: inset 0 0 0 2px #0b3550; }
.perla-cal__maj { margin: 1rem 0 0; font-size: .85em; color: #4a5663; }
@media (max-width: 400px) {
	.perla-cal__mois { border-spacing: 2px; }
	.perla-cal__mois td { height: 2.4rem; font-size: .85em; }
	.perla-cal__mois .pc-n { min-width: 1.4rem; height: 1.4rem; }
}