/* Blocs « à la une » de l'accueil (inc/blocs-une.php), v4 du 20/10/2026 (v4 : plus de prix, petit cœur décoratif ; v3 : ombre qui suit la hauteur du texte, pour les noms longs ; v2 : classes renommées « anaaz-alaune », « anaaz-une » étant déjà la boutique à la une des annonces) : même style que la vitrine « Ils vendent sur
   Anaaz » (vitrine-boutiques-v10.css). Bande de la couleur du bloc (orange #ffdcc3 par défaut), titre noir ou blanc selon
   le fond ; grandes cartes (9/10 sur ordinateur, 4/5 tablette et téléphone), photo plein cadre, dégradé sombre en bas,
   nom en blanc (sans prix depuis la v4), pastille « Voir le produit → ». Ordinateur : 3 cartes par ligne sur toute la largeur (contenu
   limité à 1920 px, centré), 6 produits = 2 lignes, 4 ou 5 = les 3 premiers ; téléphone : 2 cartes et un bout. */

.anaaz-alaune {
	padding: 24px 30px 28px;
	background: var(--anaaz-alaune-fond, #ffdcc3);
}

.anaaz-alaune__entete,
.anaaz-alaune__rangee {
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}

.anaaz-alaune__entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 16px;
}

.anaaz-alaune__entete h2 {
	margin: 0;
	font-size: 24px;
	line-height: 1.15;
	font-weight: 600;
	color: var(--anaaz-alaune-texte, #111);
}

.anaaz-alaune__tous {
	font-size: 14px;
	color: var(--anaaz-alaune-texte, #111);
	text-decoration: none;
	white-space: nowrap;
}

.anaaz-alaune__tous:hover {
	text-decoration: underline;
}

.anaaz-alaune__rangee {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

/* Ordinateur et tablette : une ligne de 3 ; deux lignes seulement s'il y a exactement 6 produits. */
.anaaz-alaune:not(.anaaz-alaune--6) .anaaz-alaune__carte:nth-child(n+4) {
	display: none;
}

.anaaz-alaune__carte {
	position: relative;
	display: block;
	min-width: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	color: #fff;
	text-decoration: none;
}

@media (min-width: 1025px) {
	.anaaz-alaune__carte {
		aspect-ratio: 9 / 10;
	}
}

.anaaz-alaune__photo {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.anaaz-alaune__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: center top;
	transition: transform .35s ease;
}

.anaaz-alaune__carte:hover .anaaz-alaune__photo img {
	transform: scale(1.03);
}

/* Dégradé un peu plus haut que la vitrine (noms longs) : opacité ≥ 0,75 jusqu'à 45 % de la hauteur, 0 à 85 %. */
.anaaz-alaune__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(17, 17, 17, .88) 0%, rgba(17, 17, 17, .75) 45%, rgba(17, 17, 17, 0) 85%);
	pointer-events: none;
}

/* v4 : petit cœur DÉCORATIF « coup de cœur » (pas un bouton favori) : cœur plein couleur du badge sur pastille claire ronde,
   différent des vrais favoris (cœur vide dans un carré blanc) ; ni pointeur, ni survol, ni zone de toucher : le clic
   traverse vers la carte. */
.anaaz-alaune__coeur {
	position: absolute;
	z-index: 2;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f7eee5;
	color: var(--anaaz-alaune-coeur, #8e3a59);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	pointer-events: none;
	cursor: inherit;
}

.anaaz-alaune__coeur svg {
	display: block;
	width: 16px;
	height: 16px;
}
.anaaz-alaune__texte {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 1;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* v3 : ombre sombre qui suit la hauteur du texte (noms longs sur petit téléphone) : opacité ≥ 0,75 derrière toutes les lignes. */
.anaaz-alaune__texte::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: -16px;
	right: -16px;
	bottom: -16px;
	top: -36px;
	background: linear-gradient(to top, rgba(17, 17, 17, .85) 0%, rgba(17, 17, 17, .75) calc(100% - 36px), rgba(17, 17, 17, 0) 100%);
	pointer-events: none;
}

/* Nom en entier, jamais coupé (les noms de produits sont longs : le dégradé monte plus haut que dans la vitrine). */
.anaaz-alaune__nom {
	overflow-wrap: anywhere;
	font-size: 18px;
	line-height: 1.25;
	font-weight: 600;
	color: #fff;
}


.anaaz-alaune__bouton {
	align-self: flex-start;
	margin-top: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	background: #f7eee5;
	color: #111;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 500;
	text-shadow: none;
	white-space: nowrap;
	transition: background-color .2s ease;
}

.anaaz-alaune__carte:hover .anaaz-alaune__bouton {
	background: #fff;
}

@media (max-width: 1024px) {
	.anaaz-alaune__entete h2 {
		font-size: 20px;
	}

	.anaaz-alaune__nom {
		font-size: 15px;
	}


	.anaaz-alaune__bouton {
		font-size: 12px;
		padding: 6px 12px;
	}
}

/* Téléphone : tous les produits, 2 cartes entières et un bout, défilement du doigt (comme la vitrine). */
@media (max-width: 767px) {
	.anaaz-alaune {
		padding: 16px 6px 18px;
	}

	.anaaz-alaune__entete {
		margin-bottom: 12px;
		padding: 0 2px;
	}

	.anaaz-alaune__entete h2 {
		font-size: 17px;
	}

	.anaaz-alaune__tous {
		font-size: 12px;
	}

	.anaaz-alaune__rangee {
		display: flex;
		justify-content: flex-start;
		gap: 8px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.anaaz-alaune__rangee::-webkit-scrollbar {
		display: none;
	}

	.anaaz-alaune:not(.anaaz-alaune--6) .anaaz-alaune__carte:nth-child(n+4) {
		display: block;
	}

	.anaaz-alaune__carte {
		flex: 0 0 calc((100% - 16px) / 2.3);
		border-radius: 8px;
		scroll-snap-align: start;
	}

	.anaaz-alaune__texte {
		left: 8px;
		right: 8px;
		bottom: 8px;
		gap: 2px;
	}

	.anaaz-alaune__texte::before {
		left: -8px;
		right: -8px;
		bottom: -8px;
		top: -24px;
	}

	.anaaz-alaune__nom {
		font-size: 13px;
	}



	.anaaz-alaune__bouton {
		margin-top: 5px;
		padding: 5px 9px;
		font-size: 11px;
	}
}

/* ==================== v6 (21/10/2026 ; v5 avait un voile de texte à 0,40 : trop clair sur les photos claires) : ombre adoucie, même réglage pour « Ils vendent sur Anaaz », « Nos coups de
   cœur » et « Looks » (accueil) ====================
   Photo : environ un tiers de moins (0,88 → 0,59 en bas) et un dégradé qui s'arrête plus bas (transparent à 60 % de la
   hauteur au lieu de 70 à 85 %) : le haut de la photo reste naturel. Texte : un voile (0,62) seulement derrière le nom
   et le bouton, pour garder la lecture sur les photos claires. */
.anaaz-alaune__voile {
	background: linear-gradient(to top, rgba(17, 17, 17, .59) 0%, rgba(17, 17, 17, .47) 30%, rgba(17, 17, 17, 0) 60%);
}

.anaaz-alaune__texte {
	z-index: 1;
}

.anaaz-alaune__texte::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: -16px;
	right: -16px;
	bottom: -16px;
	top: -28px;
	background: linear-gradient(to top, rgba(17, 17, 17, .62) 0%, rgba(17, 17, 17, .5) calc(100% - 28px), rgba(17, 17, 17, 0) 100%);
	pointer-events: none;
}

@media (max-width: 767px) {
	.anaaz-alaune__texte::before {
		left: -8px;
		right: -8px;
		bottom: -8px;
		top: -20px;
		background: linear-gradient(to top, rgba(17, 17, 17, .62) 0%, rgba(17, 17, 17, .5) calc(100% - 20px), rgba(17, 17, 17, 0) 100%);
	}
}

/* ==================== v7 (21/10/2026) : transition progressive (même réglage pour les 3 blocs de l'accueil) ====================
   Remplace les dégradés à 2-3 étapes (paliers et bord visibles) par des dégradés longs et doux à 11 étapes, en courbe
   adoucie : l'ombre s'estompe sans qu'on voie où elle commence. Photo : 0,59 en bas, transparente vers 70 % de la hauteur.
   Texte : 0,62 juste sous le nom et le bouton (lisibilité mesurée ≥ 4,5:1), puis effacement progressif sur 64 px vers le haut
   (48 px sur téléphone), sur toute la largeur de la carte (pas de bord sur les côtés). */
.anaaz-alaune__voile {
	background: linear-gradient(to top,
		rgba(17, 17, 17, .59) 0%,
		rgba(17, 17, 17, .56) 7%,
		rgba(17, 17, 17, .51) 14%,
		rgba(17, 17, 17, .45) 21%,
		rgba(17, 17, 17, .38) 28%,
		rgba(17, 17, 17, .30) 35%,
		rgba(17, 17, 17, .22) 42%,
		rgba(17, 17, 17, .15) 49%,
		rgba(17, 17, 17, .09) 56%,
		rgba(17, 17, 17, .04) 63%,
		rgba(17, 17, 17, 0) 70%);
}

.anaaz-alaune__texte::before {
	top: -64px;
	background: linear-gradient(to top,
		rgba(17, 17, 17, .62) 0%,
		rgba(17, 17, 17, .56) calc(100% - 64px),
		rgba(17, 17, 17, .48) calc(100% - 54px),
		rgba(17, 17, 17, .39) calc(100% - 45px),
		rgba(17, 17, 17, .30) calc(100% - 36px),
		rgba(17, 17, 17, .21) calc(100% - 27px),
		rgba(17, 17, 17, .13) calc(100% - 19px),
		rgba(17, 17, 17, .07) calc(100% - 12px),
		rgba(17, 17, 17, .03) calc(100% - 6px),
		rgba(17, 17, 17, 0) 100%);
}

@media (max-width: 767px) {
	.anaaz-alaune__texte::before {
		top: -48px;
		background: linear-gradient(to top,
			rgba(17, 17, 17, .62) 0%,
			rgba(17, 17, 17, .56) calc(100% - 48px),
			rgba(17, 17, 17, .47) calc(100% - 40px),
			rgba(17, 17, 17, .38) calc(100% - 33px),
			rgba(17, 17, 17, .29) calc(100% - 26px),
			rgba(17, 17, 17, .20) calc(100% - 19px),
			rgba(17, 17, 17, .12) calc(100% - 13px),
			rgba(17, 17, 17, .06) calc(100% - 8px),
			rgba(17, 17, 17, .02) calc(100% - 4px),
			rgba(17, 17, 17, 0) 100%);
	}
}

/* ==================== v9 (21/10/2026) : transition sans démarcation (même réglage pour les 3 blocs de l'accueil) ====================
   Les versions précédentes laissaient voir le haut du voile du texte (fondu trop court) ou passaient sous 4,5:1 (voile trop clair). Désormais : UNE courbe d'ombre sur la photo,
   douce et longue (12 étapes, courbe adoucie) : 0,78 tout en bas, 0,41 au tiers, 0,09 à mi-hauteur, rien à 72 % ; plus un
   voile (0,58) derrière le texte qui s'efface sur 120 px (80 px sur téléphone). Partout au-dessus du texte la photo
   est plus claire qu'à l'origine (0,88 / 0,70 / transparent à 70-85 %). */
.anaaz-alaune__voile {
	background: linear-gradient(to top,
		rgba(17, 17, 17, .78) 0%,
		rgba(17, 17, 17, .74) 8%,
		rgba(17, 17, 17, .67) 16%,
		rgba(17, 17, 17, .57) 24%,
		rgba(17, 17, 17, .46) 31%,
		rgba(17, 17, 17, .35) 38%,
		rgba(17, 17, 17, .25) 44%,
		rgba(17, 17, 17, .16) 50%,
		rgba(17, 17, 17, .09) 56%,
		rgba(17, 17, 17, .04) 62%,
		rgba(17, 17, 17, .01) 67%,
		rgba(17, 17, 17, 0) 72%);
}

.anaaz-alaune__texte::before {
	top: -120px;
	background: linear-gradient(to top,
		rgba(17, 17, 17, .58) 0%,
		rgba(17, 17, 17, .55) calc(100% - 120px),
		rgba(17, 17, 17, .48) calc(100% - 104px),
		rgba(17, 17, 17, .40) calc(100% - 88px),
		rgba(17, 17, 17, .31) calc(100% - 72px),
		rgba(17, 17, 17, .22) calc(100% - 56px),
		rgba(17, 17, 17, .14) calc(100% - 41px),
		rgba(17, 17, 17, .07) calc(100% - 27px),
		rgba(17, 17, 17, .03) calc(100% - 14px),
		rgba(17, 17, 17, 0) 100%);
}

@media (max-width: 767px) {
	.anaaz-alaune__texte::before {
		top: -80px;
		background: linear-gradient(to top,
			rgba(17, 17, 17, .58) 0%,
			rgba(17, 17, 17, .55) calc(100% - 80px),
			rgba(17, 17, 17, .48) calc(100% - 69px),
			rgba(17, 17, 17, .40) calc(100% - 58px),
			rgba(17, 17, 17, .31) calc(100% - 47px),
			rgba(17, 17, 17, .22) calc(100% - 37px),
			rgba(17, 17, 17, .14) calc(100% - 27px),
			rgba(17, 17, 17, .07) calc(100% - 18px),
			rgba(17, 17, 17, .03) calc(100% - 9px),
			rgba(17, 17, 17, 0) 100%);
	}
}

/* ==================== v10 (21/10/2026) : longueur du fondu du voile de texte adaptée à la taille des cartes (120 px ordinateur, 80 px tablette, 56 px téléphone) : sur les petites cartes, 120 px couvraient presque toute la photo. Même réglage pour les 3 blocs. ==================== */
@media (min-width: 768px) and (max-width: 1024px) {
	.anaaz-alaune__texte::before {
		top: -80px;
		background: linear-gradient(to top,
			rgba(17, 17, 17, .58) 0%,
			rgba(17, 17, 17, .55) calc(100% - 80px),
			rgba(17, 17, 17, .48) calc(100% - 70px),
			rgba(17, 17, 17, .40) calc(100% - 58px),
			rgba(17, 17, 17, .31) calc(100% - 48px),
			rgba(17, 17, 17, .22) calc(100% - 38px),
			rgba(17, 17, 17, .14) calc(100% - 27px),
			rgba(17, 17, 17, .07) calc(100% - 18px),
			rgba(17, 17, 17, .03) calc(100% - 10px),
			rgba(17, 17, 17, 0) 100%);
	}
}
@media (max-width: 767px) {
	.anaaz-alaune__texte::before {
		top: -56px;
		background: linear-gradient(to top,
			rgba(17, 17, 17, .58) 0%,
			rgba(17, 17, 17, .55) calc(100% - 56px),
			rgba(17, 17, 17, .48) calc(100% - 49px),
			rgba(17, 17, 17, .40) calc(100% - 41px),
			rgba(17, 17, 17, .31) calc(100% - 34px),
			rgba(17, 17, 17, .22) calc(100% - 26px),
			rgba(17, 17, 17, .14) calc(100% - 19px),
			rgba(17, 17, 17, .07) calc(100% - 12px),
			rgba(17, 17, 17, .03) calc(100% - 7px),
			rgba(17, 17, 17, 0) 100%);
	}
}