/*
 * Accueil (/ et /page/N/) — LOT 1 (public).
 * Bandeau d'intro (template-parts/public/hero.php), barre de recherche,
 * en-tête des résultats et pastilles de filtres, fil continu, modale
 * « Créer une alerte ». Uniquement des variables de tokens.css.
 *
 * Budget vertical (exigence client) : en 1440 × 900, en-tête 64 px +
 * bandeau ≈ 420 px + barre de recherche ≈ 76 px → la 1re rangée de cartes
 * commence vers 560 px, au-dessus de la ligne de flottaison.
 */

/* Cartes un peu moins hautes sur l'accueil (ajustement prévu par le socle,
 * cf. architecture § 9) : avec le bandeau, la 1re rangée tient entière en
 * 1440 × 900 ; sans lui, deux rangées (6 cartes) tiennent sous la recherche. */
.pepite-page-accueil {
	--carte-ratio: 16 / 9;
}

/* =============================================================================
 * Bandeau d'intro (hero)
 * ========================================================================== */
.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Pleine largeur, collé à l'en-tête : annule la marge haute de la zone
	 * principale du socle (.contenu-principal, padding-block espace-6). */
	margin-top: calc(-1 * var(--espace-6));
	padding: var(--espace-12) 0 var(--espace-6);
	border-bottom: 1px solid var(--couleur-bordure);
	text-align: center;
}

/* Dégradé radial or + base noir profond. */
.hero__fond {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--couleur-or) 22%, transparent) 0%, color-mix(in srgb, var(--couleur-or) 5%, transparent) 35%, transparent 60%),
		linear-gradient(180deg, var(--couleur-surface) 0%, var(--couleur-noir) 75%);
}

/* Halo doré qui « respire » ; parallaxe au défilement plus bas. */
.hero__halo {
	position: absolute;
	top: -45%;
	left: 50%;
	width: min(760px, 120vw);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--couleur-or) 34%, transparent) 0%, color-mix(in srgb, var(--couleur-or) 8%, transparent) 40%, transparent 70%);
	filter: blur(40px);
	translate: -50% 0;
	animation: hero-respiration 9s ease-in-out infinite;
	will-change: scale, opacity;
}

/* Grain lumineux (bruit SVG en data-URI, sans couleur). */
.hero__grain {
	position: absolute;
	inset: 0;
	opacity: 0.06;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
	pointer-events: none;
}

.hero__contenu {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero__surtitre {
	padding: 6px var(--espace-4);
	border: 1px solid var(--couleur-or-bord);
	border-radius: var(--rayon-pilule);
	background: var(--couleur-or-fond);
	color: var(--couleur-or-clair);
	font-size: var(--taille-xs);
	font-weight: var(--graisse-semi);
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.hero__titre {
	margin-top: var(--espace-4);
	background: linear-gradient(180deg, var(--couleur-texte) 0%, var(--couleur-texte-doux) 55%, var(--couleur-texte-secondaire) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(2.75rem, 7vw, 5.25rem);
	font-weight: var(--graisse-extra);
	letter-spacing: -0.04em;
	line-height: 0.95;
}

.hero__accroche {
	max-width: 600px;
	margin-top: var(--espace-4);
	color: var(--couleur-texte-doux);
	font-size: clamp(var(--taille-base), 2.2vw, var(--taille-l));
	line-height: 1.45;
}

.hero__stores {
	margin-top: var(--espace-6);
}

/* Points forts : ligne discrète (bureau uniquement, pour rester compact). */
.hero__atouts {
	display: none;
}

.hero__atout {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-2);
}

.hero__atout .icone {
	color: var(--couleur-or);
}

.hero__defiler {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-2);
	margin-top: var(--espace-5);
	padding: var(--espace-2) var(--espace-3);
	border-radius: var(--rayon-pilule);
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-s);
	font-weight: var(--graisse-semi);
	transition: color var(--duree-rapide) var(--courbe);
}

.hero__defiler:hover {
	color: var(--couleur-or-clair);
}

.hero__defiler .icone {
	width: 16px;
	height: 16px;
	animation: hero-invitation 1.8s ease-in-out infinite;
}

@media (min-width: 900px) {
	.hero__atouts {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--espace-2) var(--espace-8);
		margin-top: var(--espace-5);
		color: var(--couleur-texte-secondaire);
		font-size: var(--taille-s);
	}
}

@media (max-width: 639px) {
	.hero {
		padding-top: var(--espace-10);
	}
}

/* Apparitions progressives (100 % CSS : aucun contenu caché sans JS). */
.hero__apparition {
	animation: hero-apparition 0.7s var(--courbe) both;
}

.hero__contenu > :nth-child(2) { animation-delay: 0.08s; }
.hero__contenu > :nth-child(3) { animation-delay: 0.16s; }
.hero__contenu > :nth-child(4) { animation-delay: 0.24s; }
.hero__contenu > :nth-child(5) { animation-delay: 0.32s; }
.hero__contenu > :nth-child(6) { animation-delay: 0.4s; }

/* Parallaxe du halo liée au défilement, là où le navigateur la permet. */
@supports (animation-timeline: scroll()) {
	.hero__halo {
		animation: hero-respiration 9s ease-in-out infinite, hero-parallaxe linear both;
		animation-timeline: auto, scroll(root);
		animation-range: normal, 0 600px;
	}
}

@keyframes hero-respiration {
	0%,
	100% {
		scale: 1;
		opacity: 0.85;
	}
	50% {
		scale: 1.12;
		opacity: 1;
	}
}

@keyframes hero-parallaxe {
	to {
		translate: -50% 140px;
	}
}

@keyframes hero-apparition {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
}

@keyframes hero-invitation {
	0%,
	100% {
		transform: translateY(-2px);
	}
	50% {
		transform: translateY(3px);
	}
}

/* Lien « Découvrir les annonces » : défilement doux vers la grille. */
@media (prefers-reduced-motion: no-preference) {
	html:has(.hero) {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__halo,
	.hero__apparition,
	.hero__defiler .icone {
		animation: none;
	}
}

/* Contrastes forcés (Windows) : le titre en dégradé redevient lisible. */
@media (forced-colors: active) {
	.hero__titre {
		background: none;
		color: CanvasText;
	}
}

/* =============================================================================
 * Section des annonces
 * ========================================================================== */
.accueil:focus {
	outline: none;
}

.hero + .accueil {
	padding-top: var(--espace-6);
}

/* Barre de recherche + « Filtres » ; rangée « categories » : barre des
 * catégories (lot 5, cf. template-parts/public/barre-recherche.php). */
.accueil-recherche {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		'barre filtres'
		'categories categories';
	gap: 0 var(--espace-3);
	margin-bottom: var(--espace-5);
}

.accueil-recherche__formulaire {
	grid-area: barre;
	position: relative;
	display: flex;
	align-items: center;
}

.accueil-recherche__icone {
	position: absolute;
	left: var(--espace-4);
	color: var(--couleur-texte-secondaire);
	pointer-events: none;
}

.accueil-recherche__saisie {
	width: 100%;
	min-height: 52px;
	padding: 0 var(--espace-4) 0 calc(var(--espace-4) + 1.25em + var(--espace-3));
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-l);
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
	font-size: var(--taille-base);
	transition: border-color var(--duree-rapide) var(--courbe), box-shadow var(--duree-rapide) var(--courbe);
}

.accueil-recherche__saisie::placeholder {
	color: var(--couleur-texte-secondaire);
}

.accueil-recherche__saisie:hover {
	border-color: var(--couleur-bordure-forte);
}

.accueil-recherche__saisie:focus,
.accueil-recherche__saisie:focus-visible {
	outline: none;
	border-color: var(--couleur-or);
	box-shadow: 0 0 0 3px var(--couleur-or-fond);
}

.accueil-recherche__filtres {
	grid-area: filtres;
	min-height: 52px;
}

.accueil-recherche__compteur {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 6px;
	border-radius: var(--rayon-pilule);
	background: var(--couleur-or);
	color: var(--couleur-sur-or);
	font-size: var(--taille-xs);
	font-weight: var(--graisse-forte);
}

@media (max-width: 479px) {
	/* Petit écran : « Filtres » réduit à son icône (nom accessible conservé). */
	.accueil-recherche__filtres > span:first-child {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.accueil-recherche__filtres {
		padding-inline: var(--espace-4);
	}
}

/* Barre des catégories (esquisse p. 2) : cinq liens répartis sur la largeur ;
 * le lien de la page courante (aria-current) est encadré d'or. Sur mobile :
 * pastilles horizontales défilantes. */
.accueil-categories {
	grid-area: categories;
	margin-top: var(--espace-4);
}

.accueil-categories__liste {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--espace-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.accueil-categorie {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--espace-2);
	min-height: 46px;
	padding: var(--espace-2) var(--espace-4);
	border: 1px solid transparent;
	border-radius: var(--rayon-l);
	color: var(--couleur-texte-doux);
	font-size: var(--taille-m);
	font-weight: var(--graisse-semi);
	white-space: nowrap;
	transition: background var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe);
}

.accueil-categorie:hover {
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
}

.accueil-categorie[aria-current='page'] {
	border-color: var(--couleur-or);
	background: var(--couleur-or-fond);
	color: var(--couleur-or-clair);
}

.accueil-categorie__icone {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
}

.accueil-categorie__nombre {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: var(--rayon-pilule);
	background: var(--couleur-surface-3);
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-xs);
	font-weight: var(--graisse-semi);
	text-align: center;
}

.accueil-categorie[aria-current='page'] .accueil-categorie__nombre {
	background: var(--couleur-or);
	color: var(--couleur-sur-or);
}

@media (max-width: 899px) {
	.accueil-categories {
		margin-inline: calc(-1 * var(--gouttiere));
	}

	.accueil-categories__liste {
		/* position: relative : la liste devient le bloc conteneur des
		   libellés `.visuellement-masque` (position absolue) des pastilles
		   hors champ ; sans cela ils échappent au défilement et élargissent
		   toute la page. */
		position: relative;
		display: flex;
		overflow-x: auto;
		padding: 2px var(--gouttiere);
		scroll-padding-inline: var(--gouttiere);
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.accueil-categories__liste::-webkit-scrollbar {
		display: none;
	}

	.accueil-categories__liste > li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.accueil-categorie {
		min-height: 40px;
		padding-inline: var(--espace-4);
		border-color: var(--couleur-bordure);
		border-radius: var(--rayon-pilule);
		background: var(--couleur-surface-2);
	}

	.accueil-categorie__icone {
		width: 20px;
		height: 20px;
	}
}

/* En-tête des résultats d'une recherche. */
.accueil-resultats {
	margin-bottom: var(--espace-5);
}

.accueil-resultats__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--espace-3) var(--espace-4);
}

.accueil-resultats__titre {
	font-size: var(--taille-xl);
	font-weight: var(--graisse-forte);
	letter-spacing: -0.01em;
	line-height: var(--interligne-serre);
}

.accueil-resultats__nombre {
	margin-top: 2px;
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-m);
}

/* Filtres actifs : pastilles retirables (une ligne défilante sur mobile,
 * comme FiltresActifsBar de l'app). */
.accueil-filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--espace-2);
	margin-top: var(--espace-4);
}

.accueil-filtre {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-2);
	min-height: 36px;
	padding: 6px var(--espace-2) 6px var(--espace-3);
	border: 1px solid var(--couleur-or-bord);
	border-radius: var(--rayon-pilule);
	background: var(--couleur-or-fond);
	color: var(--couleur-texte);
	font-size: var(--taille-s);
	font-weight: var(--graisse-moyenne);
	white-space: nowrap;
	transition: border-color var(--duree-rapide) var(--courbe), background var(--duree-rapide) var(--courbe);
}

.accueil-filtre:hover {
	border-color: var(--couleur-or);
	background: color-mix(in srgb, var(--couleur-or) 24%, transparent);
}

.accueil-filtre__retirer {
	width: 16px;
	height: 16px;
	color: var(--couleur-or-clair);
}

.accueil-filtres__effacer {
	padding: 6px var(--espace-2);
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-s);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.accueil-filtres__effacer:hover {
	color: var(--couleur-or-clair);
}

@media (max-width: 639px) {
	.accueil-filtres {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(-1 * var(--gouttiere));
		padding: 2px var(--gouttiere);
		scrollbar-width: none;
	}

	.accueil-filtres::-webkit-scrollbar {
		display: none;
	}

	.accueil-filtres > li {
		flex: 0 0 auto;
	}
}

/* Fil continu. */
.accueil-fil__precedentes {
	margin-bottom: var(--espace-4);
	font-size: var(--taille-m);
}

.accueil-fil__precedentes .lien {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-1);
}

.accueil-fil__suite {
	display: flex;
	justify-content: center;
	min-height: 48px;
	margin-top: var(--espace-8);
}

.accueil-fil__suite .etat {
	width: 100%;
}

.accueil-fil__suite .etat--chargement {
	padding-block: var(--espace-4);
}

.accueil-fil__fin {
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-m);
}

/* =============================================================================
 * Modale « Créer une alerte » (accueil/alerte.js)
 * ========================================================================== */
.accueil-alerte__bloc {
	display: flex;
	flex-direction: column;
	gap: var(--espace-2);
}

.accueil-alerte__criteres {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espace-2);
}

.accueil-alerte__critere {
	padding: 4px var(--espace-3);
	border: 1px solid var(--couleur-or-bord);
	border-radius: var(--rayon-pilule);
	background: var(--couleur-or-fond);
	color: var(--couleur-texte);
	font-size: var(--taille-s);
}

.accueil-alerte__canaux {
	display: flex;
	flex-direction: column;
	gap: var(--espace-3);
	margin: 0;
	padding: 0;
	border: 0;
}

.accueil-alerte__canaux legend {
	margin-bottom: var(--espace-2);
	padding: 0;
}