/**
 * Ateliers — styles front.
 *
 * Les couleurs passent par les variables de theme.json avec repli codé en dur :
 * la feuille fonctionne dès maintenant et se laissera reprendre par le thème
 * enfant quand il existera, sans retouche.
 *
 * Direction : papier de riz, encre, céladon de porcelaine, et un seul rouge
 * cinabre réservé au cachet de date. Pas d'ombre portée, pas de coins arrondis
 * uniformes : la hiérarchie passe par le filet et le vide.
 */

.cdz-ateliers,
.cdz-dates,
.cdz-fiche,
.cdz-cachet {
	--cdz-papier: var( --wp--preset--color--papier, #fbfaf7 );
	--cdz-encre: var( --wp--preset--color--encre, #23211e );
	--cdz-encre-doux: var( --wp--preset--color--encre-doux, #6c6660 );
	--cdz-celadon: var( --wp--preset--color--celadon, #e4ebe4 );
	--cdz-celadon-trait: var( --wp--preset--color--celadon-trait, #b9c9bc );
	--cdz-cinabre: var( --wp--preset--color--cinabre, #a6332a );
	--cdz-rayon: var( --wp--custom--rayon, 6px );

	color: var( --cdz-encre );
}

/* --- Piste : grille sur grand écran, carrousel au pouce ------------------ */

.cdz-ateliers__piste {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 19rem, 1fr ) );
	gap: clamp( 1.5rem, 4vw, 2.75rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

@media ( max-width: 48em ) {
	.cdz-ateliers__piste {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min( 80%, 20rem );
		gap: 1rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 1rem;
		padding-inline: 1rem;
		padding-bottom: 0.75rem;
		margin-inline: -1rem;
	}

	.cdz-atelier {
		scroll-snap-align: center;
	}
}

/* --- Carte -------------------------------------------------------------- */

.cdz-atelier__contenu {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var( --cdz-papier );
	border: 1px solid var( --cdz-celadon-trait );
	border-radius: var( --cdz-rayon );
	overflow: hidden; /* la photo épouse les coins arrondis */
	transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
}

.cdz-atelier__lien-photo {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.cdz-atelier__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms ease;
}

/* Carte sans photo : aplat céladon, cachet en filigrane. */

.cdz-atelier__sans-photo {
	display: grid;
	place-items: center;
	background: var( --cdz-celadon );
	color: var( --cdz-celadon-trait );
	font-family: var( --police-cjk, "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif );
	font-size: clamp( 4rem, 9vw, 6.5rem );
	line-height: 1;
	text-decoration: none;
}

.cdz-atelier__sans-photo::after {
	content: var( --cdz-marque, "味" );
}

/* Survol : seulement sur un vrai pointeur. Sur écran tactile, l'état survolé
   resterait collé après un appui. Ombre discrète, pas l'ombre grise uniforme
   des gabarits : la carte ne s'élève que sous le curseur. */

@media ( hover: hover ) {
	.cdz-atelier__contenu:hover {
		border-color: var( --cdz-celadon );
		box-shadow: 0 14px 34px -18px rgba( 35, 33, 30, 0.35 );
		transform: translateY( -3px );
	}

	.cdz-atelier__contenu:hover .cdz-atelier__photo {
		transform: scale( 1.04 );
	}
}

.cdz-atelier__corps {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	flex: 1;
	padding: 1.4rem 1.4rem 1.6rem;
}

.cdz-atelier__titre {
	margin: 0;
	font-size: clamp( 1.25rem, 2.4vw, 1.5rem );
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* Un trait court sous le titre, à la manière d'un coup de pinceau. */
.cdz-atelier__titre::after {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2px;
	margin-top: 0.65rem;
	background: var( --cdz-cinabre );
}

.cdz-atelier__titre a {
	color: inherit;
	text-decoration: none;
}

.cdz-atelier__titre a:hover,
.cdz-atelier__titre a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Résumé borné en lignes, pas en mots : le texte entier reste dans la page
   (lecteurs d'écran, moteurs), seule sa hauteur est limitée. Sans borne, un
   résumé automatique de 55 mots prenait une dizaine de lignes au pouce, et
   toute la rangée du carrousel s'alignait sur la carte la plus haute. */

.cdz-ateliers {
	--cdz-resume-lignes: 3;
}

.cdz-atelier__resume {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var( --cdz-resume-lignes, 3 );
	line-clamp: var( --cdz-resume-lignes, 3 );
	overflow: hidden;
	margin: 0;
	max-width: 42ch;
	color: var( --cdz-encre-doux );
	line-height: 1.6;
}

/* --- Faits : durée, prix, langues --------------------------------------- */

.cdz-atelier__faits {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.5rem;
	margin: 0;
	padding-top: 0.4rem;
	border-top: 1px solid var( --cdz-celadon );
}

.cdz-atelier__fait {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.cdz-atelier__fait dt {
	font-size: 0.8125rem;
	color: var( --cdz-encre-doux );
}

.cdz-atelier__fait dd {
	margin: 0;
	font-weight: 600;
}

/* --- Bas de carte ------------------------------------------------------- */

.cdz-atelier__reserver {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	margin-top: auto;
	padding-top: 1rem;
}

.cdz-atelier__quand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

/* Le cachet : seul endroit où le cinabre est en aplat. */
.cdz-atelier__cachet {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 3.1rem;
	padding: 0.35rem 0.4rem 0.45rem;
	background: var( --cdz-cinabre );
	color: var( --cdz-papier );
	line-height: 1;
}

.cdz-atelier__jour {
	font-size: 1.5rem;
	font-weight: 700;
	font-variant-numeric: lining-nums tabular-nums;
}

.cdz-atelier__mois {
	margin-top: 0.15rem;
	font-size: 0.75rem;
}

.cdz-atelier__heure {
	font-size: 1.05rem;
	font-weight: 600;
}

/* --- Jauge -------------------------------------------------------------- */

.cdz-atelier__jauge {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.cdz-atelier__jauge-barre {
	position: relative;
	display: block;
	height: 3px;
	background: var( --cdz-celadon );
}

.cdz-atelier__jauge-barre::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var( --cdz-part, 0% );
	background: var( --cdz-cinabre );
}

.cdz-atelier__jauge-texte {
	font-size: 0.875rem;
	color: var( --cdz-encre-doux );
}

/* --- Appel à l'action --------------------------------------------------- */

.cdz-atelier__cta {
	display: inline-block;
	align-self: flex-start;
	padding: 0.7rem 1.4rem;
	background: var( --cdz-encre );
	color: var( --cdz-papier );
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var( --cdz-encre );
	border-radius: var( --wp--custom--rayon-bouton, 4px );
	transition: background-color 120ms ease, color 120ms ease;
}

.cdz-atelier__cta:hover {
	background: transparent;
	color: var( --cdz-encre );
}

.cdz-atelier__cta:focus-visible {
	outline: 2px solid var( --cdz-cinabre );
	outline-offset: 2px;
}

/* --- Sur demande, et le chemin vers le formulaire de contact ------------- */
/* « Sur demande » prend le petit sceau cinabre des titres de section : c'est
   une mention, pas une absence — l'atelier se réserve, à une date à fixer. */

.cdz-atelier__sur-demande,
.cdz-fiche__sur-demande,
.cdz-dates__sur-demande {
	position: relative;
	margin: 0;
	padding-left: 1.1rem;
	font-family: var( --wp--preset--font-family--titre, serif );
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	color: var( --cdz-encre );
}

.cdz-atelier__sur-demande::before,
.cdz-fiche__sur-demande::before,
.cdz-dates__sur-demande::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	background: var( --cdz-cinabre );
}

.cdz-dates__demande {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.1rem 0;
	border-top: 1px solid var( --cdz-celadon );
	border-bottom: 1px solid var( --cdz-celadon );
}

.cdz-dates__demande .cdz-dates__vide {
	margin: 0 0 0.4rem;
}

/* Bouton au trait : le contact, quand il n'est pas l'action principale. */
.cdz-atelier__contact {
	display: inline-block;
	align-self: flex-start;
	padding: 0.7rem 1.4rem;
	color: var( --cdz-encre );
	font-weight: 600;
	text-decoration: none;
	background: transparent;
	border: 1px solid var( --cdz-encre );
	border-radius: var( --wp--custom--rayon-bouton, 4px );
	transition: background-color 120ms ease, color 120ms ease;
}

.cdz-atelier__contact:hover {
	color: var( --cdz-papier );
	background: var( --cdz-encre );
}

.cdz-atelier__contact:focus-visible,
.cdz-fiche__contact:focus-visible {
	outline: 2px solid var( --cdz-cinabre );
	outline-offset: 2px;
}

/* Lien, à côté de « Réserver » : présent sans concurrencer le bouton. */
.cdz-fiche__contact {
	color: var( --cdz-encre );
	text-decoration-color: var( --cdz-celadon-trait );
	text-underline-offset: 0.25em;
}

.cdz-fiche__contact:hover {
	color: var( --cdz-cinabre );
	text-decoration-color: currentColor;
}

.cdz-atelier__bientot,
.cdz-atelier__complet {
	margin: auto 0 0;
	padding-top: 1rem;
	color: var( --cdz-encre-doux );
	font-style: italic;
}

/* --- Liste des dates sur la page d'un atelier --------------------------- */

.cdz-dates__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.cdz-dates__ligne {
	padding: 1.1rem 0;
	border-bottom: 1px solid var( --cdz-celadon );
}

.cdz-dates__ligne:first-child {
	border-top: 1px solid var( --cdz-celadon );
}

.cdz-dates__ligne .cdz-atelier__reserver {
	padding-top: 0;
}

.cdz-dates__vide {
	color: var( --cdz-encre-doux );
	font-style: italic;
}

@media ( prefers-reduced-motion: reduce ) {
	.cdz-atelier__cta,
	.cdz-atelier__contact,
	.cdz-atelier__contenu,
	.cdz-atelier__photo {
		transition: none;
	}

	.cdz-atelier__contenu:hover,
	.cdz-atelier__contenu:hover .cdz-atelier__photo {
		transform: none;
	}
}

/* --- Dates suivantes ---------------------------------------------------- */

.cdz-atelier__autres {
	margin: 0;
	font-size: 0.875rem;
}

.cdz-atelier__autres a {
	color: var( --cdz-encre-doux );
	text-decoration-color: var( --cdz-celadon-trait );
	text-underline-offset: 0.25em;
}

.cdz-atelier__autres a:hover,
.cdz-atelier__autres a:focus-visible {
	color: var( --cdz-cinabre );
	text-decoration-color: currentColor;
}

/* --- Carte au pouce ----------------------------------------------------- */
/* Tout est restreint à .cdz-ateliers : la fiche de la page d'un atelier
   réutilise les mêmes faits, avec une autre mise en page. */

@media ( max-width: 48em ) {
	.cdz-ateliers {
		--cdz-resume-lignes: 2;
	}

	.cdz-ateliers .cdz-atelier__lien-photo {
		aspect-ratio: 3 / 2;
	}

	.cdz-ateliers .cdz-atelier__corps {
		gap: 0.7rem;
		padding: 1.1rem 1.1rem 1.25rem;
	}

	/* Libellé et valeur sur une même ligne : trois faits tiennent sur une
	   ou deux lignes au lieu de six. */

	.cdz-ateliers .cdz-atelier__faits {
		gap: 0.15rem 1rem;
	}

	.cdz-ateliers .cdz-atelier__fait {
		flex-direction: row;
		align-items: baseline;
		gap: 0.35rem;
	}

	/* Le libellé ne cède pas de place : c'est la valeur qui passe à la ligne,
	   sinon « Animé en » se cassait en deux sous une liste de langues. */

	.cdz-ateliers .cdz-atelier__fait dt {
		flex: none;
	}

	.cdz-ateliers .cdz-atelier__reserver {
		gap: 0.6rem;
		padding-top: 0.5rem;
	}
}

/* --- Fiche de l'atelier -------------------------------------------------- */
/* Encadrée du double filet de la bande de l'accueil, les faits séparés par
   des filets verticaux. La grille déborde d'un pas à gauche, dans un cadre
   qui coupe ce débord : le filet du premier fait de chaque ligne disparaît,
   et son texte s'aligne sur celui du titre, quelle que soit la largeur. */

.cdz-fiche {
	--cdz-fiche-pas: 1.25rem;

	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.cdz-fiche__cadre {
	overflow: hidden;
	border-top: 3px double var( --cdz-celadon-trait );
	border-bottom: 3px double var( --cdz-celadon-trait );
}

.cdz-fiche__faits {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 8.5rem, 1fr ) );
	margin: 0 0 0 calc( -1 * var( --cdz-fiche-pas ) );
	padding: 0;
}

.cdz-fiche .cdz-atelier__fait {
	gap: 0.2rem;
	padding: 0.85rem var( --cdz-fiche-pas ) 0.9rem;
	border-left: 1px solid var( --cdz-celadon-trait );
}

.cdz-fiche .cdz-atelier__fait dd {
	font-family: var( --wp--preset--font-family--titre, serif );
	font-size: var( --wp--preset--font-size--moyen, 1.25rem );
	line-height: 1.25;
}

/* Langues et lieu : une ligne chacun, sous un filet fin, libellé et valeur
   côte à côte comme sur une fiche technique. */

.cdz-fiche .cdz-atelier__fait--large {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: 6.5rem minmax( 0, 1fr );
	gap: 0.15rem 1rem;
	align-items: baseline;
	padding-block: 0.7rem 0.75rem;
	border-top: 1px solid var( --cdz-celadon );
}

.cdz-fiche .cdz-atelier__fait--large dd {
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
}

.cdz-fiche__action {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
}

.cdz-fiche__cta {
	padding: 0.85rem 1.6rem;
}

.cdz-fiche__dates {
	color: var( --cdz-encre );
	text-decoration-color: var( --cdz-celadon-trait );
	text-underline-offset: 0.25em;
}

.cdz-fiche__dates:hover,
.cdz-fiche__dates:focus-visible {
	color: var( --cdz-cinabre );
	text-decoration-color: currentColor;
}

.cdz-fiche__places,
.cdz-fiche__etat {
	margin: 0;
	color: var( --cdz-encre-doux );
}

.cdz-fiche__places {
	font-size: 0.875rem;
}

.cdz-fiche__etat {
	font-style: italic;
}

@media ( max-width: 36em ) {
	.cdz-fiche__cta {
		flex: 1 1 100%;
		text-align: center;
	}
}

/* --- Cachet seul --------------------------------------------------------- */
/* Sa place et sa taille sur la photo relèvent du thème. */

.cdz-cachet {
	display: inline-block;
	line-height: 1;
}