/* ===================================================================
   Page Catégories (categories.php)
   Feuille de style dédiée — s'appuie sur les tokens et classes déjà
   définis dans assets/css/style.css (.categories-grid, .category-card,
   .produit-card, .cta-banner, etc.).
   =================================================================== */

/* -------------------------------------------------------------------
   Hero — même esprit "scène" que la page Présentation, adapté à la
   photo de la catégorie quand elle existe.
   ------------------------------------------------------------------- */

.categories-hero{
	position: relative;
	min-height: 34vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding-bottom: 48px;
	background-color: var(--bg);
	background-image:
		radial-gradient(560px 260px at 85% 10%, rgba(255,176,32,.18), transparent 60%),
		radial-gradient(560px 280px at 10% 30%, rgba(47,217,198,.16), transparent 60%);
	background-size: cover;
	background-position: center;
}

.categories-hero::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,11,.25) 0%, rgba(10,10,11,.92) 100%);
	z-index: 1;
}

.categories-hero-content{
	position: relative;
	z-index: 2;
	animation: catHeroFadeUp .8s ease both;
}

.categories-hero-content h1{
	font-size: clamp(1.8rem, 4.4vw, 2.8rem);
	color: #fff;
}

.categories-hero-tagline{
	margin: 10px 0 0;
	color: rgba(255,255,255,.75);
	max-width: 560px;
	font-size: 1rem;
}

@keyframes catHeroFadeUp{
	from{ opacity: 0; transform: translateY(16px); }
	to{ opacity: 1; transform: translateY(0); }
}

/* Égaliseur décoratif, identique à celui de la page Présentation */
.categories-hero-waves{
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 30px;
	opacity: .5;
}
.categories-hero-waves span{
	width: 4px;
	border-radius: 2px;
	background: var(--accent-2);
	animation: catEqBounce 1.1s ease-in-out infinite;
}
.categories-hero-waves span:nth-child(1){ animation-delay: .0s; }
.categories-hero-waves span:nth-child(2){ animation-delay: .1s; background: var(--accent); }
.categories-hero-waves span:nth-child(3){ animation-delay: .2s; }
.categories-hero-waves span:nth-child(4){ animation-delay: .3s; background: var(--accent); }
.categories-hero-waves span:nth-child(5){ animation-delay: .15s; }
.categories-hero-waves span:nth-child(6){ animation-delay: .25s; background: var(--accent); }
.categories-hero-waves span:nth-child(7){ animation-delay: .05s; }
.categories-hero-waves span:nth-child(8){ animation-delay: .35s; background: var(--accent); }

@keyframes catEqBounce{
	0%, 100%{ height: 6px; }
	50%{ height: 30px; }
}

@media (prefers-reduced-motion: reduce){
	.categories-hero-content{ animation: none; }
	.categories-hero-waves span{ animation: none; height: 14px; }
}

/* -------------------------------------------------------------------
   Contenu
   ------------------------------------------------------------------- */

.categories-content-section{
	padding: 64px 0 16px;
	background: var(--bg);
}

.categories-empty{
	padding: 40px 0;
}
.categories-empty a{
	color: var(--accent-2);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Grille de catégories réutilise .categories-grid / .category-card
   de style.css ; on ajoute juste le badge nombre de produits et un
   petit effet "spot" au survol. */

.category-card{ position: relative; }

.category-card-count{
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	background: rgba(18,18,20,.72);
	color: #fff;
	font-size: .74rem;
	font-weight: 600;
	padding: 4px 11px;
	border-radius: 999px;
	backdrop-filter: blur(2px);
}

.category-card-img{ position: relative; }
.category-card-img::before{
	content: "";
	position: absolute;
	top: -60%;
	left: -60%;
	width: 40%;
	height: 220%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
	transform: rotate(20deg);
	transition: left .6s ease;
	pointer-events: none;
}
.category-card:hover .category-card-img::before{ left: 140%; }

@media (prefers-reduced-motion: reduce){
	.category-card-img::before{ transition: none; }
}

/* -------------------------------------------------------------------
   Détail de catégorie (champ `detail` en base) — image + texte,
   affiché avant les produits quand ce contenu existe.
   ------------------------------------------------------------------- */

.category-detail{
	display: grid;
	grid-template-columns: minmax(220px, 380px) 1fr;
	align-items: center;
	gap: 40px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: clamp(20px, 3vw, 36px);
	margin-bottom: 40px;
}
.category-detail.no-image{ grid-template-columns: 1fr; }

.category-detail-image img{
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
}

.category-detail-text,
.category-detail-text *{
	font-family: var(--font-body) !important;
	color: var(--text) !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.category-detail-text div{
	width: auto !important;
	float: none !important;
	padding: 0 !important;
}
.category-detail-text p{
	font-size: 1rem !important;
	line-height: 1.8 !important;
	color: var(--muted) !important;
	margin: 0 0 14px !important;
}
.category-detail-text p:last-child{ margin-bottom: 0 !important; }
.category-detail-text strong{ color: var(--text) !important; }

/* -------------------------------------------------------------------
   Fil de catégories (mode détail) — pastilles de navigation rapide
   ------------------------------------------------------------------- */

.category-chips{
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 10px;
	margin-bottom: 32px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.category-chips::-webkit-scrollbar{ display: none; }

.category-chip{
	flex-shrink: 0;
	padding: 9px 18px;
	border: 1px solid black;
	border-radius: 999px;
	color: black;
	font-size: .85rem;
	white-space: nowrap;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.category-chip:hover{ border-color: black; color: white; }
.category-chip.is-active{
	background: #4b82ff);
	border-color: #4b82ff;
	color: var(--accent-ink);
	font-weight: 600;
}

/* -------------------------------------------------------------------
   Grille de produits (mode détail) — réutilise .produit-card
   ------------------------------------------------------------------- */

.products-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
	padding-bottom: 8px;
}

.products-grid .produit-card{
	flex: none;
	width: 100%;
}

/* -------------------------------------------------------------------
   Apparition au scroll (appliquée via assets/js/categories.js)
   ------------------------------------------------------------------- */

.reveal{
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view{
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
	.reveal{ opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------- */

@media (max-width: 960px){
	.products-grid{ grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

@media (max-width: 780px){
	.categories-hero{ min-height: 28vh; padding-bottom: 36px; }
	.categories-content-section{ padding: 48px 0 8px; }
	.category-detail{ grid-template-columns: 1fr; }
	.category-detail-image img{ aspect-ratio: 16 / 9; }
}

@media (max-width: 560px){
	.products-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
}