/*
 * Photos de colo — ce que voient les familles. Les polices et couleurs viennent du thème quand il les a
 * (préréglages WordPress), sinon des valeurs de secours.
 */
.ieuf-photos {
	--ieuf-encre: var(--wp--preset--color--contrast, #2b2d3a);
	--ieuf-bleu: var(--wp--preset--color--encre-bleu, #2f4f86);
	--ieuf-doux: var(--wp--preset--color--muted, #5b5f6e);
	--ieuf-amatic: var(--wp--preset--font-family--amatic, "Amatic SC", cursive);
	--ieuf-feutre: var(--wp--preset--font-family--manuscrite, "Gochi Hand", cursive);
	--ieuf-rangee: 230px;
}
@media (max-width: 640px) {
	.ieuf-photos {
		--ieuf-rangee: 130px;
	}
}

.ieuf-retour {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small, 0.95rem);
}
.ieuf-retour a {
	color: var(--ieuf-doux);
	text-underline-offset: 3px;
}
.ieuf-chapeau {
	max-width: 46rem;
	margin-top: 0.8rem;
	font-size: var(--wp--preset--font-size--large, 1.3rem);
}
.ieuf-vide {
	margin-top: 2rem;
}

/* -- Les séjours ------------------------------------------------------------------------------------------------ */
.ieuf-sejours {
	list-style: none;
	padding: 0;
	margin: 2.5rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
	gap: 2rem 1.75rem;
}
.ieuf-sejour:nth-child(odd) {
	transform: rotate(-1.2deg);
}
.ieuf-sejour:nth-child(even) {
	transform: rotate(1deg);
}
.ieuf-sejour a {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	color: var(--ieuf-encre);
	text-decoration: none;
}
.ieuf-sejour__nom {
	font-family: var(--ieuf-amatic);
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1;
}
.ieuf-sejour__compte {
	color: var(--ieuf-doux);
	font-size: 0.95rem;
}
.ieuf-sejour__voir {
	margin-top: 0.6rem;
	text-wrap: balance;
	font-family: var(--ieuf-feutre);
	font-size: 1.3rem;
	color: var(--ieuf-bleu);
}
.ieuf-sejour a:hover .ieuf-sejour__voir {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* -- Le mot de passe -------------------------------------------------------------------------------------------- */
.ieuf-mdp {
	max-width: 34rem;
	margin: 2.5rem 0 0;
}
.ieuf-mdp__titre {
	margin: 0 0 0.5rem;
	font-family: var(--ieuf-amatic);
	font-weight: 700;
	font-size: 2.1rem;
	line-height: 1.05;
}
.ieuf-mdp__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.2rem;
}
.ieuf-mdp input[type="password"] {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.65rem 0.9rem;
	font: inherit;
	border: 2px solid var(--ieuf-encre);
	border-radius: var(--wp--custom--radius--control, 255px 18px 225px 18px / 18px 225px 18px 255px);
	background: #fff;
}
.ieuf-mdp__erreur {
	margin: 0.8rem 0 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--encre-rouge, #c8323f);
}

/* -- La liste des journées -------------------------------------------------------------------------------------- */
.ieuf-journees {
	list-style: none;
	padding: 0;
	margin: 2.5rem 0 0;
	display: grid;
	gap: 1.25rem;
}
.ieuf-journee-ligne a {
	display: block;
	padding: 1.1rem 0 1.4rem;
	color: var(--ieuf-encre);
	text-decoration: none;
	/* Les pointillés des plaquettes, entre deux journées. */
	background-image: radial-gradient(circle, color-mix(in srgb, currentColor 40%, transparent) 1.1px, transparent 1.5px);
	background-size: 10px 4px;
	background-repeat: repeat-x;
	background-position: left bottom;
}
.ieuf-journee-ligne .ieuf-titre-jour {
	font-size: clamp(2rem, 4vw, 2.6rem);
}
.ieuf-journee-ligne__texte {
	max-width: 46rem;
	margin: 0.4rem 0 0;
	color: var(--ieuf-doux);
}
.ieuf-journee-ligne__voir {
	display: inline-block;
	margin-top: 0.7rem;
	font-family: var(--ieuf-feutre);
	font-size: 1.25rem;
	color: var(--ieuf-bleu);
}
.ieuf-journee-ligne a:hover .ieuf-journee-ligne__voir {
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* Un aperçu d'une rangée : les photos gardent leur proportion, la rangée coupe ce qui dépasse. */
.ieuf-apercu {
	display: flex;
	gap: 5px;
	height: 110px;
	margin-top: 0.9rem;
	overflow: hidden;
}
.ieuf-apercu .ieuf-tuile {
	flex: 0 0 auto;
	height: 100%;
	width: auto;
}
@media (max-width: 640px) {
	.ieuf-apercu {
		height: 84px;
	}
}

/* -- Une journée ------------------------------------------------------------------------------------------------ */
.ieuf-date {
	margin: 0;
	font-family: var(--ieuf-feutre);
	font-size: 1.35rem;
	color: var(--ieuf-bleu);
	transform: rotate(-1.5deg);
	transform-origin: left;
}
.ieuf-titre-jour {
	margin: 0.15rem 0 0;
	font-family: var(--ieuf-amatic);
	font-weight: 700;
	line-height: 1;
	color: var(--ieuf-encre);
}
h1.ieuf-titre-jour {
	font-size: clamp(2.8rem, 7vw, 4.4rem);
}
.ieuf-texte {
	max-width: 46rem;
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--large, 1.2rem);
}

/*
 * La mosaïque : des rangées de même hauteur qui remplissent la largeur. Chaque photo prend une part de la rangée
 * proportionnelle à sa forme (--r = largeur / hauteur), si bien que portraits et paysages se rangent sans être
 * recadrés. La dernière rangée ne s'étire pas (le ::after prend la place qui reste).
 */
.ieuf-galerie {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2rem;
}
.ieuf-galerie::after {
	content: "";
	flex-grow: 999999;
}
.ieuf-tuile {
	position: relative;
	display: block;
	aspect-ratio: var(--r);
	padding: 0;
	border: 0;
	border-radius: 3px;
	overflow: hidden;
	/* La couleur de la tache tant que la photo arrive : pas de trou blanc pendant le défilement. */
	background: var(--wp--preset--color--tuile-4, #bfdcf1);
	-webkit-touch-callout: none;
	user-select: none;
}
.ieuf-galerie .ieuf-tuile {
	flex: var(--r) 1 calc(var(--r) * var(--ieuf-rangee));
	cursor: zoom-in;
}
.ieuf-galerie .ieuf-tuile:nth-child(5n + 2) { background: var(--wp--preset--color--tuile-2, #f9de8e); }
.ieuf-galerie .ieuf-tuile:nth-child(5n + 3) { background: var(--wp--preset--color--tuile-3, #bcdcc6); }
.ieuf-galerie .ieuf-tuile:nth-child(5n + 4) { background: var(--wp--preset--color--tuile-1, #f4bfcc); }
.ieuf-galerie .ieuf-tuile:nth-child(5n + 5) { background: var(--wp--preset--color--tuile-5, #f8cba6); }
.ieuf-tuile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
.ieuf-galerie .ieuf-tuile:focus-visible {
	outline: 3px solid var(--ieuf-bleu);
	outline-offset: 2px;
}
@media (hover: hover) {
	.ieuf-galerie .ieuf-tuile img {
		transition: transform 0.35s ease;
	}
	.ieuf-galerie .ieuf-tuile:hover img {
		transform: scale(1.03);
	}
}

.ieuf-nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 3rem;
	font-family: var(--ieuf-feutre);
	font-size: 1.4rem;
}
.ieuf-nav a {
	color: var(--ieuf-bleu);
	text-underline-offset: 4px;
}

/* -- La visionneuse --------------------------------------------------------------------------------------------- */
.ieuf-visio {
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #16171d;
	color: #f3efe7;
	overflow: hidden;
	-webkit-touch-callout: none;
	user-select: none;
}
.ieuf-visio::backdrop {
	background: #16171d;
}
.ieuf-visio__scene {
	position: absolute;
	inset: 3.2rem 0 3.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: pan-y;
}
.ieuf-visio__scene img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	pointer-events: none;
	transition: transform 0.25s ease;
}
.ieuf-visio__haut,
.ieuf-visio__bas {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0 0.75rem 0 1.1rem;
	height: 3.2rem;
}
.ieuf-visio__haut {
	top: 0;
}
.ieuf-visio__bas {
	bottom: 0;
	justify-content: center;
}
.ieuf-visio__compte {
	font-family: var(--wp--preset--font-family--manuscrite, "Gochi Hand", cursive);
	font-size: 1.2rem;
	white-space: nowrap;
}
.ieuf-visio__titre {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.95rem;
	opacity: 0.75;
}
.ieuf-visio button {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}
.ieuf-visio button:hover,
.ieuf-visio button:focus-visible {
	background: rgb(255 255 255 / 0.12);
	outline: none;
}
.ieuf-visio__prec,
.ieuf-visio__suiv {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 1;
}
.ieuf-visio__prec {
	left: 0.5rem;
}
.ieuf-visio__suiv {
	right: 0.5rem;
}
.ieuf-visio button[disabled] {
	visibility: hidden;
}
@media (hover: none) {
	/* Au doigt, on glisse : les flèches encombreraient la photo. */
	.ieuf-visio__prec,
	.ieuf-visio__suiv {
		display: none !important;
	}
}

/* -- La frise des jours ----------------------------------------------------------------------------------------- */
.ieuf-frise {
	margin: 1.6rem 0 1.4rem;
}
.ieuf-frise ol {
	display: flex;
	gap: 0.4rem;
	margin: 0;
	padding: 0.3rem 0.1rem 0.6rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}
.ieuf-frise li {
	flex: 0 0 auto;
	scroll-snap-align: center;
}
.ieuf-frise__jour {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 3.4rem;
	padding: 0.35rem 0.5rem 0.3rem;
	border: 2px solid color-mix(in srgb, var(--ieuf-encre) 70%, transparent);
	border-radius: var(--wp--custom--radius--control, 255px 18px 225px 18px / 18px 225px 18px 255px);
	background: #fff;
	color: var(--ieuf-encre);
	line-height: 1.1;
	text-decoration: none;
}
.ieuf-frise__j {
	font-family: var(--ieuf-amatic);
	font-weight: 700;
	font-size: 1.45rem;
}
.ieuf-frise__d {
	font-size: 0.78rem;
	color: var(--ieuf-doux);
}
a.ieuf-frise__jour:hover {
	background: var(--wp--preset--color--tuile-4, #bfdcf1);
}
.ieuf-frise__jour.est-courant {
	background: var(--wp--preset--color--tuile-2, #f9de8e);
	border-color: var(--ieuf-encre);
	transform: rotate(-2deg);
}
.ieuf-frise__jour.est-vide {
	border-style: dashed;
	border-color: color-mix(in srgb, var(--ieuf-encre) 25%, transparent);
	color: color-mix(in srgb, var(--ieuf-encre) 40%, transparent);
	background: transparent;
}
.ieuf-frise__jour.est-vide .ieuf-frise__d {
	color: inherit;
}

.ieuf-sejour__sien {
	align-self: flex-start;
	padding: 0.1rem 0.6rem;
	margin-bottom: 0.2rem;
	border: 2px solid var(--ieuf-encre);
	border-radius: var(--wp--custom--radius--control, 255px 18px 225px 18px / 18px 225px 18px 255px);
	background: #fff;
	font-family: var(--ieuf-feutre);
	font-size: 1rem;
	transform: rotate(-3deg);
}