/* Collection « luxe A » : le pourquoi de chaque règle est dans collection.php (« Notes sur collection.css »). */

/* ===== 1. Teintes, gouttière, écarts ===== */

/* Teintes absentes de la palette, gouttière, écart entre rangées. */
body.cala-collection {
	--cala-gouttiere: 16px;
	--cala-rangee: 40px;
	--cala-encre: #2b2724;
	--cala-gris: #6f6a66;
	--cala-or: #b0915a;
	--cala-or-fonce: #a38551;
	--cala-or-pale: rgba(176, 145, 90, 0.42);
	--cala-filet: #e6ddd1;
	--cala-fond-clair: var(--theme-palette-color-9, #fdf9f7);
}

/* ===== 2. Conteneur ===== */

@media (max-width: 689.98px) {

	/* Téléphone : une gouttière de chaque côté, sans 100vw. */
	body.cala-collection .site-main > .ct-container {
		--theme-container-width: 100%;
		width: calc(100% - 2 * var(--cala-gouttiere));
	}
}

@media (min-width: 690px) {

	/* Tablette et ordinateur : largeur du conteneur du site, écarts plus larges. */
	body.cala-collection {
		--cala-rangee: 64px;
	}
}

@media (min-width: 690px) and (max-width: 999.98px) {

	/* Tablette : écarts resserrés. */
	body.cala-collection {
		--cala-rangee: 48px;
	}
}

/* ===== 3. Grille ===== */

/* Écarts : entre colonnes par Blocksy, entre rangées par la marge des éléments. */
body.cala-collection ul.products[data-products] {
	--grid-columns-gap: 11px;
	row-gap: 0;
}

@media (min-width: 690px) and (max-width: 999.98px) {

	/* Écart entre colonnes, tablette. */
	body.cala-collection ul.products[data-products] {
		--grid-columns-gap: 18px;
	}
}

@media (min-width: 1000px) {

	/* Écart entre colonnes, ordinateur (4 colonnes). */
	body.cala-collection ul.products[data-products] {
		--grid-columns-gap: 16px;
	}
}

/* ===== 4. Cartes (reprises dans customizer.css du thème enfant) ===== */

/* Carte : texte centré, l'espace sous la carte fait l'écart entre rangées. */
body.cala-collection ul.products > li.product {
	--product-element-spacing: 0px;
	margin-bottom: var(--cala-rangee);
	text-align: center;
}

/* Image à angles droits. */
body.cala-collection ul.products > li.product .ct-media-container,
body.cala-collection ul.products > li.product .ct-media-container img {
	border-radius: 0;
}

/* Espace sous l'image. */
body.cala-collection ul.products > li.product > figure {
	margin-bottom: 14px;
}

/* Nom : Didot, capitales espacées. */
body.cala-collection ul.products > li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0 4px;
	font-family: var(--brand-font-heading);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	color: var(--cala-encre);
}

/* Finitions sous le nom, dans l'ordre de Blocksy (leur dessin est dans variations.css). */
body.cala-collection ul.products > li.product :is(.ct-card-variation-swatches, .cala-finition-seule) {
	margin: 6px 0 0;
}

/* Prix fin, sous le nom ou les finitions. */
body.cala-collection ul.products > li.product .price {
	margin: 4px 0 0;
	font-family: var(--brand-font-body);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--cala-gris);
}

/* Écran tactile : pas d'image de survol. */
@media (hover: none) {
	body.cala-collection ul.products .ct-media-container > img.ct-swap {
		display: none;
	}
}

/* Noms, finitions et prix alignés d'une carte à l'autre (sous-grille de 4 rangées). */
@supports (grid-template-rows: subgrid) {
	body.cala-collection ul.products > li.product {
		grid-row: span 4;
		display: grid;
		grid-template-rows: subgrid;
		row-gap: 0;
		align-items: start;
		justify-items: center;
	}

	/* L'image, sur toute la largeur de la carte, en rangée 1. */
	body.cala-collection ul.products > li.product > figure {
		grid-row: 1;
		width: 100%;
	}

	/* Le nom en rangée 2. */
	body.cala-collection ul.products > li.product .woocommerce-loop-product__title {
		grid-row: 2;
	}

	/* Les finitions en rangée 3 (« LIEN » seul pour un bracelet simple). */
	body.cala-collection ul.products > li.product :is(.ct-card-variation-swatches, .cala-finition-seule) {
		grid-row: 3;
	}

	/* Le prix en rangée 4, avec ou sans finitions. */
	body.cala-collection ul.products > li.product .price {
		grid-row: 4;
	}
}

@media (max-width: 689.98px) {

	/* Packshot agrandi dans un cadre carré, bracelets des moments compris. */
	body.cala-collection ul.products > li.product .ct-media-container {
		aspect-ratio: 1 / 1;
	}

	/* La boîte de l'image, agrandie, centrée un peu sous le milieu. */
	body.cala-collection ul.products > li.product .ct-media-container > img:not(.ct-swap) {
		position: absolute;
		top: -21.6%;
		left: -20%;
		width: 140%;
		max-width: none;
		height: 140%;
	}
}

@media (min-width: 690px) {

	/* Espace sous l'image, ordinateur. */
	body.cala-collection ul.products > li.product > figure {
		margin-bottom: 18px;
	}

	/* Nom, ordinateur. */
	body.cala-collection ul.products > li.product .woocommerce-loop-product__title {
		font-size: 13.5px;
		letter-spacing: 0.17em;
	}

	/* Prix, ordinateur. */
	body.cala-collection ul.products > li.product .price {
		margin-top: 6px;
		font-size: 13px;
	}
}

@media (min-width: 690px) and (max-width: 999.98px) {

	/* Nom, tablette. */
	body.cala-collection ul.products > li.product .woocommerce-loop-product__title {
		font-size: 12px;
		letter-spacing: 0.13em;
	}

	/* Prix, tablette. */
	body.cala-collection ul.products > li.product .price {
		font-size: 12.5px;
	}
}

/* ===== 5. Barre filtre / tri ===== */

/* Deux filets d'or pâle. */
body.cala-collection .woo-listing-top {
	margin-bottom: 22px;
	padding: 6px 0;
	border-top: 1px solid var(--cala-or-pale);
	border-bottom: 1px solid var(--cala-or-pale);
}

/* « Filtre » sans cadre, Optima espacé. */
body.cala-collection .woo-listing-top .ct-toggle-filter-panel {
	--toggle-button-border-width: 0px;
	--toggle-button-padding: 8px 0;
	--toggle-button-background: transparent;
	font-family: var(--brand-font-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.2em;
	color: var(--cala-encre);
}

/* Survol de « Filtre ». */
body.cala-collection .woo-listing-top .ct-toggle-filter-panel:hover {
	color: var(--theme-palette-color-2, #8e473d);
}

/* Compteur discret. */
body.cala-collection .woo-listing-top .woocommerce-result-count {
	--theme-font-weight: 400;
	--theme-letter-spacing: 0.18em;
	--theme-font-size: 10.5px;
	font-family: var(--brand-font-body);
	color: var(--cala-gris);
}

/* Tri sans bordure. */
body.cala-collection .woo-listing-top .woocommerce-ordering select {
	border: 0;
	box-shadow: none;
	background-color: transparent;
	letter-spacing: 0.06em;
}

@media (min-width: 690px) {

	/* Espace sous la barre, ordinateur. */
	body.cala-collection .woo-listing-top {
		margin-bottom: 30px;
	}
}

/* ===== 6. Pagination « Précédent 1 2 Suivant » ===== */

/* Filet au-dessus, trois colonnes. */
body.cala-collection nav.ct-pagination[data-pagination] {
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin-top: calc(72px - var(--cala-rangee));
	padding-top: 30px;
	border-top: 1px solid var(--cala-filet);
}

/* « Précédent » en colonne 1. */
body.cala-collection nav.ct-pagination .prev {
	grid-row: 1;
	grid-column: 1;
	justify-self: start;
}

/* Numéros en colonne 2, centrés. */
body.cala-collection nav.ct-pagination > div {
	grid-row: 1;
	grid-column: 2;
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 0;
}

/* « Suivant » en colonne 3. */
body.cala-collection nav.ct-pagination .next {
	grid-row: 1;
	grid-column: 3;
	justify-self: end;
}

/* Liens sans cadre ni fond. */
body.cala-collection nav.ct-pagination .page-numbers {
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* Numéros en Didot. */
body.cala-collection nav.ct-pagination > div .page-numbers {
	flex: 0 0 30px;
	width: 30px;
	height: 34px;
	margin: 0;
	font-family: var(--brand-font-heading);
	font-size: 17px;
	font-weight: 400;
	color: var(--cala-gris);
}

/* Page courante soulignée d'or. */
body.cala-collection nav.ct-pagination > div .page-numbers.current {
	color: var(--cala-encre);
	background: transparent;
	box-shadow: inset 0 -1px 0 var(--cala-or-fonce);
}

/* Survol d'un numéro. */
body.cala-collection nav.ct-pagination a.page-numbers:hover {
	color: var(--cala-encre);
}

/* « Précédent » et « Suivant » en petites capitales espacées. */
body.cala-collection nav.ct-pagination .prev,
body.cala-collection nav.ct-pagination .next {
	padding-inline: 0;
	font-family: var(--brand-font-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cala-encre);
}

/* ===== 7. Focus visible ===== */

/* Contour au clavier, bordures et fonds ayant disparu. */
body.cala-collection :is(nav.ct-pagination a, .woocommerce-ordering select, .ct-toggle-filter-panel, .ct-woo-card-extra .ct-button):focus-visible {
	outline: 2px solid var(--cala-encre);
	outline-offset: 2px;
}

/* ===== 8. Les moments : formes de la config, places du serveur (page 1) ===== */

/* Photo d'ambiance : ni lien, ni fond, cadre fixe. */
body.cala-collection ul.cala-compose--p1 > .cala-moment {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La photo remplit son cadre. */
body.cala-collection ul.cala-compose--p1 > .cala-moment .cala-moment__photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	object-position: var(--cala-cadrage-m, 50% 50%);
}

/* --- Téléphone --- */
@media (max-width: 689.98px) {

	/* Photos pleine largeur par la gouttière. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment {
		grid-column: 1 / -1;
		margin: 14px calc(-1 * var(--cala-gouttiere)) 0;
	}

	/* Cartel et pleine largeur : photo en paysage. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-m--cartel-droite, .cala-forme-m--cartel-gauche, .cala-forme-m--pleine-largeur) {
		aspect-ratio: 3 / 2;
	}

	/* Duo : photo en portrait. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-m--duo {
		aspect-ratio: 4 / 5;
	}

	/* Pleine largeur : suivie d'un écart de rangée, son bijou ouvre la rangée suivante. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-m--pleine-largeur {
		margin-bottom: var(--cala-rangee);
	}

	/* Cartel : son bijou sur toute la largeur, texte d'un côté, photo de l'autre. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-m--cartel-droite, .cala-forme-m--cartel-gauche) + li.product {
		--horizontal-alignment: flex-start;
		grid-column: 1 / -1;
		grid-row: auto;
		display: grid;
		grid-template-columns: minmax(0, 1fr) 56%;
		grid-template-rows: auto auto 1fr;
		column-gap: 18px;
		align-items: start;
		justify-items: stretch;
		margin-bottom: calc(30px + var(--cala-rangee));
		text-align: left;
	}

	/* Photo à gauche : colonnes inversées. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-m--cartel-gauche + li.product {
		grid-template-columns: 56% minmax(0, 1fr);
	}

	/* Sa photo, liserée de blanc, chevauche la photo du cartel (à droite). */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-m--cartel-droite, .cala-forme-m--cartel-gauche) + li.product > figure {
		grid-column: 2;
		grid-row: 1 / span 3;
		width: auto;
		margin: -96px 7px 0 0;
		box-shadow: 0 0 0 7px #fff, 0 6px 22px rgba(43, 39, 36, 0.12);
	}

	/* … ou à gauche. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-m--cartel-gauche + li.product > figure {
		grid-column: 1;
		margin: -96px 0 0 7px;
	}

	/* Son nom, sous la photo du cartel. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-m--cartel-droite, .cala-forme-m--cartel-gauche) + li.product .woocommerce-loop-product__title {
		grid-column: 1;
		grid-row: 1;
		margin-top: 22px;
		padding: 0;
		font-size: 12.5px;
		line-height: 1.7;
		letter-spacing: 0.16em;
	}

	/* Ses finitions, sous le nom. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-m--cartel-droite, .cala-forme-m--cartel-gauche) + li.product :is(.ct-card-variation-swatches, .cala-finition-seule) {
		grid-column: 1;
		grid-row: 2;
	}

	/* Son prix, sous les finitions. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-m--cartel-droite, .cala-forme-m--cartel-gauche) + li.product .price {
		grid-column: 1;
		grid-row: 3;
		margin-top: 6px;
		font-size: 13px;
	}

	/* Photo à gauche : le texte dans la colonne de droite. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-m--cartel-gauche + li.product :is(.woocommerce-loop-product__title, .ct-card-variation-swatches, .cala-finition-seule, .price) {
		grid-column: 2;
	}

	/* La première finition au bord du texte. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-m--cartel-droite, .cala-forme-m--cartel-gauche) + li.product .ct-swatch-container:first-of-type {
		padding-left: 0;
	}

	/* « LIEN » seul, aligné à gauche comme le nom. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-m--cartel-droite, .cala-forme-m--cartel-gauche) + li.product .cala-finition-seule {
		justify-content: flex-start;
	}

	/* Duo : la carte entière de son bijou, centrée, chevauche la photo. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-m--duo + li.product {
		grid-column: 1 / -1;
		grid-row: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-self: center;
		position: relative;
		z-index: 0;
		width: min(252px, 70%);
		margin-top: -72px;
		margin-bottom: calc(30px + var(--cala-rangee));
		padding: 9px 9px 22px;
	}

	/* Fond clair pleine largeur, du bas de la photo jusque sous la carte. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-m--duo + li.product::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 72px;
		right: 0;
		bottom: -30px;
		left: 0;
		background: var(--cala-fond-clair);
		box-shadow: 0 0 0 100vmax var(--cala-fond-clair);
		clip-path: inset(0 -100vmax);
	}

	/* Le blanc de la carte, au-dessus du fond clair. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-m--duo + li.product::after {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		background: #fff;
		box-shadow: 0 6px 22px rgba(43, 39, 36, 0.1);
	}

	/* Sa photo. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-m--duo + li.product > figure {
		width: 100%;
		margin: 0 0 14px;
	}

	/* Son nom. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-m--duo + li.product .woocommerce-loop-product__title {
		font-size: 14px;
		letter-spacing: 0.2em;
	}

	/* Son prix. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-m--duo + li.product .price {
		margin-top: 6px;
		font-size: 13px;
	}

	/* Filet d'or sous le nom (cartel à gauche, carte centrée). */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-m--cartel-droite, .cala-forme-m--cartel-gauche, .cala-forme-m--duo) + li.product .woocommerce-loop-product__title::after {
		content: "";
		display: block;
		width: 18px;
		height: 1px;
		margin: 11px auto 2px;
		background: var(--cala-or);
	}

	/* Filet du cartel, à gauche. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-m--cartel-droite, .cala-forme-m--cartel-gauche) + li.product .woocommerce-loop-product__title::after {
		margin: 12px 0 2px;
	}

	/* Carte à finitions : pas de filet, le tiret d'or de la finition suffit. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-m--cartel-droite, .cala-forme-m--cartel-gauche, .cala-forme-m--duo) + li.product:has(.ct-card-variation-swatches, .cala-finition-seule) .woocommerce-loop-product__title::after {
		display: none;
	}

	/* Dernière carte seule sur sa rangée : centrée. */
	body.cala-collection ul.cala-compose--p1 > li.cala-seule-m {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - var(--grid-columns-gap)) / 2);
	}
}

/* --- Tablette et ordinateur : placement dense, rangées du serveur --- */
@media (min-width: 690px) {

	/* Trous remplis dans l'ordre ; largeur de la liste pour la hauteur des photos. */
	body.cala-collection ul.cala-compose--p1[data-products] {
		--cala-duo-marge: 56px;
		--cala-duo-ecart: 26px;
		--cala-duo-largeur: min(420px, 100% - var(--cala-duo-ecart));
		grid-auto-flow: row dense;
		container-type: inline-size;
	}

	/* Chaque moment et son bijou dans la rangée que le serveur leur donne. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment,
	body.cala-collection ul.cala-compose--p1 > .cala-moment + li {
		grid-row: var(--cala-r);
	}

	/* Sous-grille : chaque élément de la page couvre les 4 rangées d'une carte. */
	@supports (grid-template-rows: subgrid) {
		body.cala-collection ul.cala-compose--p1 > li {
			grid-row: span 4;
		}

		/* La rangée du serveur en lignes de la grille (4 par rangée). */
		body.cala-collection ul.cala-compose--p1 > .cala-moment,
		body.cala-collection ul.cala-compose--p1 > .cala-moment + li {
			grid-row: var(--cala-l) / span 4;
		}
	}
}

/* --- Tablette : 3 colonnes en 6 demi-colonnes --- */
@media (min-width: 690px) and (max-width: 999.98px) {

	/* Demi-colonnes, duo resserré. */
	body.cala-collection ul.cala-compose--p1[data-products] {
		--shop-columns: repeat(6, minmax(0, 1fr));
		--cala-duo-marge: 40px;
		--cala-duo-ecart: 8px;
	}

	/* Une carte : deux demi-colonnes. */
	body.cala-collection ul.cala-compose--p1 > li {
		grid-column: span 2;
	}

	/* Rangées des moments et de leur bijou (variables de la liste). */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--1 {
		--cala-r: var(--cala-r1-t);
		--cala-l: var(--cala-l1-t);
	}

	/* Le bijou du moment 1. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--1 + li {
		--cala-r: var(--cala-rb1-t);
		--cala-l: var(--cala-lb1-t);
	}

	/* Le moment 2. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--2 {
		--cala-r: var(--cala-r2-t);
		--cala-l: var(--cala-l2-t);
	}

	/* Son bijou. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--2 + li {
		--cala-r: var(--cala-rb2-t);
		--cala-l: var(--cala-lb2-t);
	}

	/* Le moment 3. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--3 {
		--cala-r: var(--cala-r3-t);
		--cala-l: var(--cala-l3-t);
	}

	/* Son bijou. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--3 + li {
		--cala-r: var(--cala-rb3-t);
		--cala-l: var(--cala-lb3-t);
	}

	/* Le moment 4. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--4 {
		--cala-r: var(--cala-r4-t);
		--cala-l: var(--cala-l4-t);
	}

	/* Son bijou. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--4 + li {
		--cala-r: var(--cala-rb4-t);
		--cala-l: var(--cala-lb4-t);
	}

	/* Le moment 5. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--5 {
		--cala-r: var(--cala-r5-t);
		--cala-l: var(--cala-l5-t);
	}

	/* Son bijou. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--5 + li {
		--cala-r: var(--cala-rb5-t);
		--cala-l: var(--cala-lb5-t);
	}

	/* Cadrage de la tablette. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment .cala-moment__photo {
		object-position: var(--cala-cadrage-t, var(--cala-cadrage-d, 50% 50%));
	}

	/* Cartel : deux tiers pour la photo, à la hauteur du packshot d'un tiers. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-t--cartel-droite, .cala-forme-t--cartel-gauche) {
		align-self: start;
		height: calc((100cqw - 2 * var(--grid-columns-gap)) / 3);
	}

	/* Photo à droite (demi-colonnes 3 à 6)… */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-t--cartel-droite {
		grid-column: 3 / span 4;
	}

	/* … son bijou à gauche (1 et 2). */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-t--cartel-droite + li {
		grid-column: 1 / span 2;
	}

	/* Photo à gauche (1 à 4)… */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-t--cartel-gauche {
		grid-column: 1 / span 4;
	}

	/* … son bijou à droite (5 et 6). */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-t--cartel-gauche + li {
		grid-column: 5 / span 2;
	}

	/* Duo : la photo en portrait, contre l'axe, sur le fond clair. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-t--duo-gauche, .cala-forme-t--duo-droite) {
		align-self: center;
		width: var(--cala-duo-largeur);
		aspect-ratio: 3 / 4;
		box-shadow: 0 0 0 100vmax var(--cala-fond-clair);
		clip-path: inset(calc(-1 * var(--cala-duo-marge)) -100vmax);
	}

	/* Photo à gauche (demi-colonnes 1 à 3)… */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-t--duo-gauche {
		grid-column: 1 / span 3;
		justify-self: end;
		margin: var(--cala-duo-marge) var(--cala-duo-ecart) calc(var(--cala-duo-marge) + var(--cala-rangee)) 0;
	}

	/* … ou à droite (4 à 6). */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-t--duo-droite {
		grid-column: 4 / span 3;
		justify-self: start;
		margin: var(--cala-duo-marge) 0 calc(var(--cala-duo-marge) + var(--cala-rangee)) var(--cala-duo-ecart);
	}

	/* Bijou du duo : carte blanche en grand, contre l'axe. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-t--duo-gauche, .cala-forme-t--duo-droite) + li.product {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: center;
		position: relative;
		z-index: 1;
		width: var(--cala-duo-largeur);
		padding: 12px 12px 26px;
		background: #fff;
		box-shadow: 0 8px 28px rgba(43, 39, 36, 0.1);
	}

	/* À droite de la photo (4 à 6)… */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-t--duo-gauche + li.product {
		grid-column: 4 / span 3;
		justify-self: start;
		margin-left: var(--cala-duo-ecart);
	}

	/* … ou à gauche (1 à 3). */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-t--duo-droite + li.product {
		grid-column: 1 / span 3;
		justify-self: end;
		margin-right: var(--cala-duo-ecart);
	}

	/* Sa photo. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-t--duo-gauche, .cala-forme-t--duo-droite) + li.product > figure {
		width: 100%;
		margin-bottom: 22px;
	}

	/* Son nom. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-t--duo-gauche, .cala-forme-t--duo-droite) + li.product .woocommerce-loop-product__title {
		font-size: 16px;
		letter-spacing: 0.2em;
	}

	/* Le filet d'or sous le nom. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-t--duo-gauche, .cala-forme-t--duo-droite) + li.product .woocommerce-loop-product__title::after {
		content: "";
		display: block;
		width: 20px;
		height: 1px;
		margin: 14px auto 4px;
		background: var(--cala-or);
	}

	/* Carte à finitions : pas de filet. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-t--duo-gauche, .cala-forme-t--duo-droite) + li.product:has(.ct-card-variation-swatches, .cala-finition-seule) .woocommerce-loop-product__title::after {
		display: none;
	}

	/* Son prix. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-t--duo-gauche, .cala-forme-t--duo-droite) + li.product .price {
		font-size: 14px;
	}

	/* Pleine largeur : toute la grille, en 21:9. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-t--pleine-largeur {
		grid-column: 1 / -1;
		aspect-ratio: 21 / 9;
		margin-bottom: var(--cala-rangee);
	}

	/* Son bijou ouvre la rangée suivante. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-t--pleine-largeur + li {
		grid-column: 1 / span 2;
	}

	/* Dernière rangée centrée : une carte (demi-colonnes 3 et 4)… */
	body.cala-collection ul.cala-compose--p1 > li.cala-fin-t--3 {
		grid-column: 3 / span 2;
	}

	/* … ou deux (2 et 3, 4 et 5). */
	body.cala-collection ul.cala-compose--p1 > li.cala-fin-t--2 {
		grid-column: 2 / span 2;
	}

	/* La seconde. */
	body.cala-collection ul.cala-compose--p1 > li.cala-fin-t--4 {
		grid-column: 4 / span 2;
	}
}

/* --- Ordinateur : 4 colonnes en 24 pistes --- */
@media (min-width: 1000px) {

	/* 24 pistes (une carte sur 6) ; duo ample, en % de sa moitié. */
	body.cala-collection ul.cala-compose--p1[data-products] {
		--shop-columns: repeat(24, minmax(0, 1fr));
		--cala-duo-photo: calc(100% - var(--cala-duo-ecart));
		--cala-duo-carte: min(0.75 * var(--cala-duo-photo), 500px);
	}

	/* Une carte : six pistes. */
	body.cala-collection ul.cala-compose--p1 > li {
		grid-column: span 6;
	}

	/* Rangées des moments et de leur bijou (variables de la liste). */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--1 {
		--cala-r: var(--cala-r1-d);
		--cala-l: var(--cala-l1-d);
	}

	/* Le bijou du moment 1. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--1 + li {
		--cala-r: var(--cala-rb1-d);
		--cala-l: var(--cala-lb1-d);
	}

	/* Le moment 2. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--2 {
		--cala-r: var(--cala-r2-d);
		--cala-l: var(--cala-l2-d);
	}

	/* Son bijou. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--2 + li {
		--cala-r: var(--cala-rb2-d);
		--cala-l: var(--cala-lb2-d);
	}

	/* Le moment 3. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--3 {
		--cala-r: var(--cala-r3-d);
		--cala-l: var(--cala-l3-d);
	}

	/* Son bijou. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--3 + li {
		--cala-r: var(--cala-rb3-d);
		--cala-l: var(--cala-lb3-d);
	}

	/* Le moment 4. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--4 {
		--cala-r: var(--cala-r4-d);
		--cala-l: var(--cala-l4-d);
	}

	/* Son bijou. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--4 + li {
		--cala-r: var(--cala-rb4-d);
		--cala-l: var(--cala-lb4-d);
	}

	/* Le moment 5. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--5 {
		--cala-r: var(--cala-r5-d);
		--cala-l: var(--cala-l5-d);
	}

	/* Son bijou. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment--5 + li {
		--cala-r: var(--cala-rb5-d);
		--cala-l: var(--cala-lb5-d);
	}

	/* Cadrage de l'ordinateur. */
	body.cala-collection ul.cala-compose--p1 > .cala-moment .cala-moment__photo {
		object-position: var(--cala-cadrage-d, 50% 50%);
	}

	/* Cartel : deux tiers pour la photo, à la hauteur du packshot d'un tiers. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-d--cartel-droite, .cala-forme-d--cartel-gauche) {
		align-self: start;
		height: calc((100cqw - 2 * var(--grid-columns-gap)) / 3);
	}

	/* Photo à droite (pistes 9 à 24)… */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-d--cartel-droite {
		grid-column: 9 / span 16;
	}

	/* … son bijou à gauche (1 à 8). */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-d--cartel-droite + li {
		grid-column: 1 / span 8;
	}

	/* Photo à gauche (1 à 16)… */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-d--cartel-gauche {
		grid-column: 1 / span 16;
	}

	/* … son bijou à droite (17 à 24). */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-d--cartel-gauche + li {
		grid-column: 17 / span 8;
	}

	/* Duo : la photo carrée, sur sa moitié moins l'écart, sur le fond clair. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-d--duo-gauche, .cala-forme-d--duo-droite) {
		align-self: center;
		width: var(--cala-duo-photo);
		aspect-ratio: 1 / 1;
		box-shadow: 0 0 0 100vmax var(--cala-fond-clair);
		clip-path: inset(calc(-1 * var(--cala-duo-marge)) -100vmax);
	}

	/* Photo à gauche, depuis le bord de la grille (pistes 1 à 12)… */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-d--duo-gauche {
		grid-column: 1 / span 12;
		justify-self: end;
		margin: var(--cala-duo-marge) var(--cala-duo-ecart) calc(var(--cala-duo-marge) + var(--cala-rangee)) 0;
	}

	/* … ou à droite, jusqu'au bord (13 à 24). */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-d--duo-droite {
		grid-column: 13 / span 12;
		justify-self: start;
		margin: var(--cala-duo-marge) 0 calc(var(--cala-duo-marge) + var(--cala-rangee)) var(--cala-duo-ecart);
	}

	/* Bijou du duo : carte blanche en grand, centrée dans l'autre moitié. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-d--duo-gauche, .cala-forme-d--duo-droite) + li.product {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: center;
		position: relative;
		z-index: 1;
		width: var(--cala-duo-carte);
		padding: 12px 12px 26px;
		background: #fff;
		box-shadow: 0 8px 28px rgba(43, 39, 36, 0.1);
	}

	/* À droite de la photo (13 à 24)… */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-d--duo-gauche + li.product {
		grid-column: 13 / span 12;
		justify-self: start;
		margin-left: calc(var(--cala-duo-ecart) + (var(--cala-duo-photo) - var(--cala-duo-carte)) / 2);
	}

	/* … ou à gauche (1 à 12). */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-d--duo-droite + li.product {
		grid-column: 1 / span 12;
		justify-self: end;
		margin-right: calc(var(--cala-duo-ecart) + (var(--cala-duo-photo) - var(--cala-duo-carte)) / 2);
	}

	/* Sa photo. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-d--duo-gauche, .cala-forme-d--duo-droite) + li.product > figure {
		width: 100%;
		margin-bottom: 22px;
	}

	/* Son nom. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-d--duo-gauche, .cala-forme-d--duo-droite) + li.product .woocommerce-loop-product__title {
		font-size: 16px;
		letter-spacing: 0.2em;
	}

	/* Le filet d'or sous le nom. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-d--duo-gauche, .cala-forme-d--duo-droite) + li.product .woocommerce-loop-product__title::after {
		content: "";
		display: block;
		width: 20px;
		height: 1px;
		margin: 14px auto 4px;
		background: var(--cala-or);
	}

	/* Carte à finitions : pas de filet. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-d--duo-gauche, .cala-forme-d--duo-droite) + li.product:has(.ct-card-variation-swatches, .cala-finition-seule) .woocommerce-loop-product__title::after {
		display: none;
	}

	/* Son prix. */
	body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-d--duo-gauche, .cala-forme-d--duo-droite) + li.product .price {
		font-size: 14px;
	}

	/* Pleine largeur : toute la grille, en 21:9. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-d--pleine-largeur {
		grid-column: 1 / -1;
		aspect-ratio: 21 / 9;
		margin-bottom: var(--cala-rangee);
	}

	/* Son bijou ouvre la rangée suivante. */
	body.cala-collection ul.cala-compose--p1 > .cala-forme-d--pleine-largeur + li {
		grid-column: 1 / span 6;
	}

	/* Dernière rangée centrée : une carte (pistes 10 à 15)… */
	body.cala-collection ul.cala-compose--p1 > li.cala-fin-d--10 {
		grid-column: 10 / span 6;
	}

	/* … deux (7 et 13)… */
	body.cala-collection ul.cala-compose--p1 > li.cala-fin-d--7 {
		grid-column: 7 / span 6;
	}

	/* … la seconde. */
	body.cala-collection ul.cala-compose--p1 > li.cala-fin-d--13 {
		grid-column: 13 / span 6;
	}

	/* … ou trois (4, 10 et 16). */
	body.cala-collection ul.cala-compose--p1 > li.cala-fin-d--4 {
		grid-column: 4 / span 6;
	}

	/* La troisième. */
	body.cala-collection ul.cala-compose--p1 > li.cala-fin-d--16 {
		grid-column: 16 / span 6;
	}
}

@supports not (height: 1cqw) {

	/* Cartel sans unités de conteneur : rapport fixe, tablette. */
	@media (min-width: 690px) and (max-width: 999.98px) {
		body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-t--cartel-droite, .cala-forme-t--cartel-gauche) {
			height: auto;
			aspect-ratio: 2.08 / 1;
		}
	}

	/* … et ordinateur. */
	@media (min-width: 1000px) {
		body.cala-collection ul.cala-compose--p1 > :is(.cala-forme-d--cartel-droite, .cala-forme-d--cartel-gauche) {
			height: auto;
			aspect-ratio: 2.04 / 1;
		}
	}
}

/* ===== 9. Animation d'entrée des photos (bloc isolé : le supprimer en entier pour la retirer) ===== */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {

		/* Rogner sans créer de conteneur de défilement : view() suit l'écran. */
		body.cala-collection ul.cala-compose--p1 > .cala-moment {
			overflow: clip;
		}

		/* La photo se pose (léger zoom arrière) en entrant dans l'écran. */
		body.cala-collection ul.cala-compose--p1 > .cala-moment .cala-moment__photo {
			animation: cala-pose linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 50%;
		}

		/* Le mouvement. */
		@keyframes cala-pose {
			from {
				transform: scale(1.08);
			}
			to {
				transform: scale(1);
			}
		}
	}
}
/* ===== Fin de l'animation d'entrée ===== */