/*
 * Home: "Nos catégories" (six hall tiles that tilt toward the pointer), "Le catalogue" (tabbed product carousels
 * with the shared .pcard) and "Les marques" (the five makers in one still row).
 * Markup: template-parts/home/categories.php, catalogue.php, brands.php. Behaviour: assets/js/home-catalogue.js.
 */

/* ======================================================================
 * Nos catégories
 * ==================================================================== */
.categories__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4);
}
.categories__item { container: cattile / inline-size; min-width: 0; perspective: 900px; }

.categories__tile {
	--px: 0; --py: 0; --gx: 50%; --gy: 35%;
	position: relative; display: flex; flex-direction: column; height: 100%;
	border-radius: var(--r-md); background: var(--mist); color: var(--ink); text-decoration: none;
	cursor: pointer; -webkit-tap-highlight-color: transparent;
	transform-style: preserve-3d;
	transform: rotateX(calc(var(--py) * -8deg)) rotateY(calc(var(--px) * 8deg));
	transition: transform var(--dur-4) var(--ease-out-expo), background-color var(--dur-3) var(--ease-out), scale var(--dur-2) var(--ease-spring);
}
.categories__tile.is-tilting { transition: background-color var(--dur-3) var(--ease-out), scale var(--dur-2) var(--ease-spring); }
.categories__tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; transform: rotateX(5deg); }
.categories__tile:active { scale: 0.975; }

/* The light that follows the pointer across the mist (behind the product). */
.categories__glare {
	position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: radial-gradient(circle at var(--gx) var(--gy), rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 58%);
	opacity: 0; transform: translateZ(0);
	transition: opacity var(--dur-3) var(--ease-out);
}

/* The product stands on its own floor shadow; when the tile is pointed at or focused, it lifts off it. */
.categories__stage {
	position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
	aspect-ratio: 1.42; min-height: 0; transform-style: preserve-3d; /* min-height 0: the ratio holds whatever the product's shape */
}
.categories__floor {
	position: absolute; left: 21%; right: 21%; bottom: 6%; height: 15%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.08) 55%, rgb(0 0 0 / 0));
	transform: translateZ(1px);
	translate: calc(var(--px) * -14px) calc(var(--py) * -6px);
	transition: translate var(--dur-4) var(--ease-out-expo), scale var(--dur-4) var(--ease-out-expo), opacity var(--dur-4) var(--ease-out-expo);
}
.categories__img {
	grid-area: 1 / 1; width: auto; height: auto; max-width: 74%; max-height: 80%; object-fit: contain;
	transform: translate3d(calc(var(--px) * 6px), calc(var(--py) * 4px), 2px);
	filter: drop-shadow(0 8px 8px rgb(0 0 0 / 0.08));
	transition: transform var(--dur-4) var(--ease-out-expo), translate var(--dur-4) var(--ease-out-expo), scale var(--dur-4) var(--ease-out-expo), filter var(--dur-4) var(--ease-out-expo);
	-webkit-user-drag: none; user-select: none;
}
.categories__tile--wide .categories__img { max-width: 88%; max-height: 58%; }
.categories__tile--tall .categories__img { max-width: 58%; max-height: 86%; }
.categories__tile.is-tilting .categories__floor { transition: scale var(--dur-4) var(--ease-out-expo), opacity var(--dur-4) var(--ease-out-expo); }
.categories__tile.is-tilting .categories__img { transition: translate var(--dur-4) var(--ease-out-expo), scale var(--dur-4) var(--ease-out-expo), filter var(--dur-4) var(--ease-out-expo); }

.categories__tile.is-tilting .categories__glare { opacity: 1; }
.categories__tile.is-tilting .categories__img,
.categories__tile:focus-visible .categories__img { translate: 0 -6px 46px; filter: drop-shadow(0 16px 14px rgb(0 0 0 / 0.12)); }
.categories__tile.is-tilting .categories__floor,
.categories__tile:focus-visible .categories__floor { scale: 1.16 1.25; opacity: 0.62; }
/* Without the pointer script (or before it runs), hover still lifts the product. */
@media (hover: hover) {
	.categories__tile:hover .categories__img { translate: 0 -6px 46px; filter: drop-shadow(0 16px 14px rgb(0 0 0 / 0.12)); }
	.categories__tile:hover .categories__floor { scale: 1.16 1.25; opacity: 0.62; }
	.categories__tile:hover { background: var(--mist-2); }
	.categories__tile.is-tilting:hover { background: var(--mist); }
}

.categories__text { position: relative; display: block; padding: 2px 12px 18px; text-align: center; transform: translateZ(4px); }
.categories__name {
	margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.2; letter-spacing: var(--tracking-tight);
	font-size: clamp(1rem, 0.86rem + 0.32vw, 1.1875rem); text-wrap: balance;
}
.categories__meta { display: block; margin-top: 4px; font-size: var(--text-sm); line-height: 1.35; color: var(--muted); }
.categories__meta .num { font-weight: 500; color: var(--ink-2); }
.categories__count, .categories__from { white-space: nowrap; }

/* A narrow tile puts the count and the starting price on two lines. */
@container cattile (max-width: 188px) {
	.categories__dot { display: none; }
	.categories__count, .categories__from { display: block; }
	.categories__meta { font-size: 0.8125rem; }
}
/* A wide tile (three to a row) gives the product more room and the name more size. */
@container cattile (min-width: 260px) {
	.categories__stage { aspect-ratio: 1.9; }
	.categories__name { font-size: var(--text-lg); }
	.categories__meta { font-size: 0.9375rem; }
	.categories__text { padding-bottom: 22px; }
}

@media (max-width: 1199px) {
	.categories__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phones: a snap rail, the third tile peeking past the edge. */
@media (max-width: 767px) {
	.categories__grid {
		grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 38vw; gap: var(--s-3);
		overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
		margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
		margin-block: -4px -8px;
	}
	.categories__grid::-webkit-scrollbar { display: none; }
	/* The row follows the campaign card closely, as in the phone comp, so whole tiles show in the first viewport;
	   the page title (two lines here) steps down and sits closer, so the tiles' prices stay above the bottom bar. */
	.categories__head { margin-bottom: var(--s-3); }
	.home .categories__title { font-size: var(--text-lg); }
	.categories__item { scroll-snap-align: start; perspective: none; }
	.categories__tile { transform: none; border-radius: var(--r-sm); }
	.categories__tile:focus-visible { transform: none; outline-offset: -2px; }
	.categories__stage { aspect-ratio: 1.12; }
	.categories__text { padding: 0 8px 14px; }
	.categories__name { font-size: 1rem; }
}
/* Short portrait phones (700 px and less): as in the phone comp's own short frame, the tiles follow the campaign card
   directly (the heading stays for screen readers), and each tile turns into a compact row (the product on its floor at
   the left, the name, count and starting price at the right) so the whole row, prices included, sits above the
   bottom bar in the first viewport. The 380 px campaign card above keeps its size. */
@media (max-width: 767px) and (max-aspect-ratio: 1/1) and (max-height: 700px) {
	.categories__head { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.categories__grid { grid-auto-columns: 56vw; }
	.categories__tile { flex-direction: row; align-items: center; gap: 4px; padding: 6px 10px 6px 4px; }
	.categories__stage { flex: none; width: 64px; aspect-ratio: 1; }
	.categories__text { flex: 1 1 auto; min-width: 0; padding: 0; text-align: left; }
	.categories__name { font-size: 0.9375rem; text-wrap: nowrap; }
	.categories__meta { margin-top: 2px; font-size: 0.8125rem; line-height: 1.3; }
	.categories__dot { display: none; }
	.categories__count, .categories__from { display: block; }
}

/* ======================================================================
 * Le catalogue
 * ==================================================================== */
.catalogue__bar {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
	margin-bottom: var(--s-5);
}
.catalogue__tabs-wrap { flex: 1 1 auto; min-width: 0; }
.catalogue__tabs { position: relative; padding: 4px; margin: -4px; } /* room for the focus ring (2 px offset + 2 px) */
.catalogue__tools { flex: none; }

/* Tablets: the six tabs need the whole row, so the arrows move up beside "Tout voir". */
@media (min-width: 768px) and (max-width: 1023px) {
	.catalogue__top {
		display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title all tools" "tabs tabs tabs";
		align-items: center; column-gap: var(--s-3); row-gap: var(--s-5); margin-bottom: var(--s-5);
	}
	.catalogue__head, .catalogue__bar { display: contents; }
	.catalogue__head .section__title { grid-area: title; }
	.catalogue__all { grid-area: all; margin-bottom: 0; }
	.catalogue__tools { grid-area: tools; }
	.catalogue__tabs-wrap { grid-area: tabs; }
}

/* The selected tab: an ink pill that glides from tab to tab. It is a second row of the same labels, in white on
 * ink, clipped to the selected tab; the clip moves, so the label turns white exactly where the pill arrives. */
.catalogue__glide {
	position: absolute; top: 0; left: 0; z-index: 2;
	display: flex; gap: var(--s-2); width: max-content;
	background: var(--ink); border-radius: var(--r-pill);
	pointer-events: none; visibility: hidden;
	clip-path: inset(0 100% 0 0 round var(--r-pill));
	transition: clip-path 560ms var(--ease-out-expo);
}
.catalogue__ghost { scroll-snap-align: none; background: transparent; color: var(--on-ink); border-color: transparent; cursor: default; }
.catalogue.is-ready .catalogue__glide { visibility: visible; }
.catalogue.is-ready .catalogue__tab[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.catalogue.is-instant .catalogue__glide { transition: none; }

/* Panels sit on one grid cell so the outgoing and incoming tracks can cross-fade without the page jumping. */
.catalogue__panels { display: grid; }
.catalogue__panel { grid-area: 1 / 1; min-width: 0; }
.catalogue__panel.is-leaving { pointer-events: none; }

/* The shared card, a little wider than tall in the carousel so a row reads at a glance. */
.catalogue .pcard__media { aspect-ratio: 1.42; min-height: 0; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.catalogue .pcard__img { max-height: 76%; }

.catalogue__track {
	--gap: var(--s-4);
	gap: var(--gap);
	grid-auto-columns: calc((100% - 3 * var(--gap)) / 4);
	padding-block: 6px 10px; margin-block: -6px -10px;
}
@media (max-width: 1199px) { .catalogue__track { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); } }
@media (max-width: 1023px) { .catalogue__track { grid-auto-columns: calc((100% - 2 * var(--gap)) / 2.2); } }
@media (max-width: 767px) { .catalogue__track { --gap: var(--s-3); grid-auto-columns: calc((100% - var(--gap)) / 1.3); } }

/* The last slide: the whole hall. */
.catalogue__more { min-width: 0; }
.catalogue__more-link {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%;
	padding: var(--s-5); border-radius: var(--r-md); background: var(--mist); color: var(--ink); text-decoration: none;
	transition: background-color var(--dur-2) var(--ease-out);
}
.catalogue__more-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.2; letter-spacing: var(--tracking-tight); text-wrap: balance; max-width: 14ch; }
.catalogue__more-meta { font-size: var(--text-sm); color: var(--muted); }
.catalogue__more-meta .num { color: var(--ink-2); font-weight: 500; }
.catalogue__more-go {
	position: absolute; top: var(--s-5); right: var(--s-5);
	display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	background: var(--ink); color: var(--on-ink);
	transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.catalogue__more-go .icon { width: 22px; height: 22px; }
@media (hover: hover) {
	.catalogue__more-link:hover { background: var(--mist-2); }
	.catalogue__more-link:hover .catalogue__more-go { transform: translateX(4px); background: var(--action); }
}
.catalogue__more-link:active .catalogue__more-go { transform: scale(0.94); }
.catalogue__more-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Where the visible cards sit in the hall's row. */
.catalogue__progress {
	--pw: 1; --pp: 0;
	position: relative; width: min(240px, 46%); height: 3px; margin: var(--s-6) auto 0;
	border-radius: 3px; background: var(--hairline); overflow: hidden;
	transition: opacity var(--dur-3) var(--ease-out);
}
.catalogue__progress-thumb {
	position: absolute; inset-block: 0; left: 0; width: calc(var(--pw) * 100%);
	border-radius: inherit; background: var(--accent);
	transform: translateX(calc(var(--pp) * (1 / var(--pw) - 1) * 100%));
}
.catalogue__progress.is-full { opacity: 0; }

@media (max-width: 767px) {
	.catalogue__bar { margin-bottom: var(--s-4); }
	.catalogue__tabs { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
	.catalogue__tools { display: none; }
	.catalogue__more-link { padding: var(--s-4); }
	.catalogue__more-go { top: var(--s-4); right: var(--s-4); }
	.catalogue__progress { margin-top: var(--s-5); }
}

/* ======================================================================
 * Les marques
 * ==================================================================== */
.brands__head { margin-bottom: var(--s-4); }
/* The makers' own marks in one still row on a shared baseline, in one grey (ink at 47 %: #878787, 3.6:1 on paper)
 * that turns to ink on hover. --m is the row's x-height: each mark's factor gives the five an equal optical size,
 * and its vertical-align drops the descender (the g of Longse, the y of Cudy) below the shared baseline.
 * Evenly spaced on one line from 768 px; three then two on phones. Kablo has no mark: typeset in the display face. */
.brands__list {
	--m: clamp(15px, 0.62rem + 1.1vw, 26px);
	--pad: clamp(8px, 1vw, 16px);
	/* Spread across the column: the first mark starts under the heading, the last ends on the column's edge (the
	   links' own padding is pulled back out with the negative margin). */
	display: flex; justify-content: space-between; align-items: baseline;
	margin: 0 calc(-1 * var(--pad)); padding: 0; list-style: none;
}
.brands__item { flex: none; min-width: 0; }
.brands__brand {
	display: block; padding: calc(var(--m) * 0.3) var(--pad);
	line-height: max(44px, calc(var(--m) * 2.4)); white-space: nowrap;
	border-radius: var(--r-sm); color: var(--ink); text-decoration: none;
}
.brands__mark { display: inline-block; width: auto; opacity: 0.47; transition: opacity var(--dur-1) var(--ease-out); }
.brands__mark--longse  { --h: calc(var(--m) * 1.62); height: var(--h); vertical-align: calc(var(--h) * -0.269); }
.brands__mark--staniot { --h: calc(var(--m) * 1.02); height: var(--h); vertical-align: calc(var(--h) * -0.025); }
.brands__mark--cudy    { --h: calc(var(--m) * 1.9);  height: var(--h); vertical-align: calc(var(--h) * -0.2255); }
.brands__mark--fanvil  { --h: calc(var(--m) * 1.4);  height: var(--h); vertical-align: calc(var(--h) * -0.025); }
.brands__mark--type { font-family: var(--font-display); font-weight: 500; font-size: calc(var(--m) * 1.84); line-height: 1; letter-spacing: -0.025em; }
@media (hover: hover) {
	.brands__brand:hover .brands__mark { opacity: 1; }
}
.brands__brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.brands__brand:focus-visible .brands__mark { opacity: 1; }
@media (max-width: 767px) {
	/* Equal gaps on each line; the zero-height ::before (ordered between the third and fourth mark) breaks the line. */
	.brands__list { --m: clamp(12px, 3.85vw, 18px); flex-wrap: wrap; justify-content: center; column-gap: clamp(12px, 5vw, 32px); margin-inline: 0; }
	.brands__list::before { content: ""; flex-basis: 100%; height: 0; order: 1; }
	.brands__item:nth-child(n + 4) { order: 2; }
	.brands__brand { padding-inline: 6px; }
}

/* ======================================================================
 * Reduced motion: no tilt, no glide.
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
	.categories__tile, .categories__tile:focus-visible { transform: none; }
	.categories__img { transform: none; }
	.categories__tile:hover .categories__img, .categories__tile:focus-visible .categories__img { translate: 0 -4px; }
	.categories__glare { display: none; }
	.catalogue__glide { transition: none; }
}