/* Looks (inc/looks.php), v6 du 21/10/2026 (v6 : bloc de la fiche en pleine largeur disponible même avec un seul look ; v5 : bloc de la fiche produit à la largeur du contenu ; v4 : nouveau format « look » : recherche, tri, pages, plusieurs thèmes, page d'un look, bloc de la fiche produit ; v3 : « Texte du look » sous le titre ; v2 : grille en rangées dans l'ordre choisi au lieu de colonnes « mosaïque » qui laissaient une colonne vide ; photo limitée en hauteur ; bloc d'accueil séparé de « Nos coups de cœur ») : page « Looks » et bloc d'accueil façon stories.
   Même langage que la vitrine « Ils vendent sur Anaaz » et « Nos coups de cœur » : bande orange #ffdcc3, titres #111,
   arrondis 12 px (8 px sur téléphone), pastilles claires. */

/* ==================== Page « Looks » ==================== */

.anaaz-looks {
	color: #111;
}

.anaaz-looks__bande {
	padding: 28px 30px 20px;
	background: #ffdcc3;
}

.anaaz-looks__entete,
.anaaz-looks__filtres,
.anaaz-looks__grille,
.anaaz-looks__vide {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

.anaaz-looks__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 20px;
}

.anaaz-looks__entete h1 {
	margin: 0;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 600;
	color: #111;
}

.anaaz-looks__intro {
	flex: 1 1 280px;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
}

.anaaz-looks__reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.anaaz-looks__reseaux a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.anaaz-looks__reseaux a:hover {
	text-decoration: underline;
}

/* Filtres : une rangée de pastilles ; sur téléphone, elle défile du doigt. */
.anaaz-looks__filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.anaaz-looks__filtre {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid #111;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}

.anaaz-looks__filtre:hover {
	background: #f7eee5;
}

.anaaz-looks__filtre.is-actif {
	background: #111;
	color: #fff;
}

.anaaz-looks__filtre:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

/* Grille « mosaïque » : chaque photo garde sa forme (planche, tenue à plat, série) ; colonnes de largeur égale. */
.anaaz-looks__grille {
	padding: 24px 30px 40px;
	box-sizing: content-box;
	columns: 3;
	column-gap: 16px;
}

.anaaz-look {
	display: inline-block; /* reste entier dans sa colonne */
	width: 100%;
	margin: 0 0 16px;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 6px rgba(17, 17, 17, .08);
	break-inside: avoid;
	vertical-align: top;
	scroll-margin-top: 140px;
}

.anaaz-look[hidden] {
	display: none;
}

.anaaz-look__photo {
	background: #f7eee5;
}

.anaaz-look__photo img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 900px; /* très longue photo : montrée en entier mais pas plus haute qu'un écran */
	margin: 0 auto;
	object-fit: contain;
}

.anaaz-look__corps {
	padding: 14px 16px 16px;
}

.anaaz-look__theme {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: #ffdcc3;
	color: #111;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
}

.anaaz-look__titre {
	margin: 8px 0 0;
	font-size: 18px;
	line-height: 1.25;
	font-weight: 600;
	color: #111;
	overflow-wrap: anywhere;
}

.anaaz-look__produits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.anaaz-look__produits li {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.anaaz-look__produit {
	display: block;
	color: #111;
	text-decoration: none;
}

.anaaz-look__produit-photo {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 8px;
	background: #f7eee5;
}

.anaaz-look__produit-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-look__produit:hover .anaaz-look__produit-photo img {
	transform: scale(1.04);
}

.anaaz-look__produit-nom {
	display: -webkit-box;
	margin-top: 6px;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: anywhere;
}

.anaaz-look__produit:hover .anaaz-look__produit-nom {
	text-decoration: underline;
}

.anaaz-looks__vide {
	padding: 32px 30px;
	font-size: 15px;
}

@media (max-width: 1023px) {
	.anaaz-looks__grille {
		columns: 2;
	}
}

/* Téléphone : une colonne, filtres sur une ligne qui défile. */
@media (max-width: 599px) {
	.anaaz-looks__bande {
		padding: 18px 16px 14px;
	}

	.anaaz-looks__entete h1 {
		font-size: 22px;
	}

	.anaaz-looks__intro {
		flex-basis: 100%;
		font-size: 13px;
	}

	.anaaz-looks__filtres {
		flex-wrap: nowrap;
		margin: 14px -16px 0;
		padding: 0 16px 2px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

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

	.anaaz-looks__filtre {
		flex: 0 0 auto;
	}

	.anaaz-looks__grille {
		columns: 1;
		padding: 16px 16px 32px;
	}

	.anaaz-look {
		border-radius: 8px;
	}

	.anaaz-look__corps {
		padding: 12px 12px 14px;
	}

	.anaaz-look__titre {
		font-size: 16px;
	}

	.anaaz-look__produits {
		gap: 8px;
	}
}

/* ==================== Bloc d'accueil « Looks » (stories) ==================== */

.anaaz-looksx {
	padding: 24px 30px 28px;
	background: #ffdcc3;
}

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

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

.anaaz-looksx__entete h2 {
	margin: 0;
	font-size: 24px;
	line-height: 1.15;
	font-weight: 600;
	color: #111;
}

.anaaz-looksx__tous {
	font-size: 14px;
	color: #111;
	text-decoration: none;
	white-space: nowrap;
}

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

/* Ordinateur et tablette : 4 cartes au plus sur une ligne (centrées s'il y en a moins). */
.anaaz-looksx__rangee {
	display: grid;
	grid-template-columns: repeat(var(--anaaz-looksx-n, 4), minmax(0, calc((100% - 36px) / 4)));
	justify-content: center;
	gap: 12px;
}

.anaaz-looksx__carte:nth-child(n+5) {
	display: none;
}

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

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

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

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

.anaaz-looksx__carte:hover .anaaz-looksx__photo img {
	transform: scale(1.03);
}

.anaaz-looksx__voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(17, 17, 17, .88) 0%, rgba(17, 17, 17, .72) 38%, rgba(17, 17, 17, 0) 72%);
	pointer-events: none;
}

.anaaz-looksx__texte {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.anaaz-looksx__theme {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
	color: #ffdcc3;
}

.anaaz-looksx__nom {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 600;
	color: #fff;
	overflow-wrap: anywhere;
}

.anaaz-looksx__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-looksx__carte:hover .anaaz-looksx__bouton {
	background: #fff;
}

@media (max-width: 1440px) {
	.anaaz-looksx__nom {
		font-size: 17px;
	}
}

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

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

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

/* Téléphone : tous les looks, 2 cartes et un bout, défilement du doigt. */
@media (max-width: 767px) {
	.anaaz-looksx {
		padding: 16px 6px 18px;
	}

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

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

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

	.anaaz-looksx__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-looksx__rangee::-webkit-scrollbar {
		display: none;
	}

	.anaaz-looksx__carte,
	.anaaz-looksx__carte:nth-child(n+5) {
		display: block;
		flex: 0 0 calc((100% - 16px) / 2.3);
		border-radius: 8px;
		scroll-snap-align: start;
	}

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

	.anaaz-looksx__theme {
		font-size: 10px;
	}

	.anaaz-looksx__nom {
		font-size: 14px;
	}

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

/* ==================== v2 ==================== */

/* Grille en rangées : l'ordre de l'administration se lit de gauche à droite ; chaque carte garde sa hauteur. */
.anaaz-looks__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 16px;
	columns: auto;
}

.anaaz-look {
	display: block;
	margin: 0;
}

/* Photo entière (jamais recadrée) dans un cadre de hauteur limitée, centrée sur fond crème. */
.anaaz-look__photo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.anaaz-look__photo img {
	width: auto;
	max-width: 100%;
	max-height: 560px;
}

@media (max-width: 1023px) {
	.anaaz-looks__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.anaaz-look__photo img {
		max-height: 480px;
	}
}

@media (max-width: 599px) {
	.anaaz-looks__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	.anaaz-look__photo img {
		max-height: 70vh;
	}
}

/* Bloc d'accueil : bande blanche entre « Nos coups de cœur » et « Looks » (deux bandes orange à la suite). */
.anaaz-alaune + .anaaz-looksx {
	margin-top: 24px;
}

@media (max-width: 767px) {
	.anaaz-alaune + .anaaz-looksx {
		margin-top: 16px;
	}
}
/* ==================== v3 ==================== */

/* « Texte du look » (facultatif) : gris foncé #444 sur blanc (contraste 9,7:1), plus petit que le titre, texte continu. */
.anaaz-look__texte {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: #444;
	overflow-wrap: anywhere;
}

@media (max-width: 599px) {
	.anaaz-look__texte {
		font-size: 13px;
	}
}
/* ==================== v4 : nouveau format ==================== */

/* Recherche */
.anaaz-looks__recherche {
	display: flex;
	gap: 8px;
	max-width: 1440px;
	margin: 16px auto 0;
}

.anaaz-looks__recherche input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 420px;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #111;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-size: 16px; /* pas de zoom automatique sur iPhone */
	box-sizing: border-box;
}

.anaaz-looks__recherche button {
	flex: 0 0 auto;
	height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid #111;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.anaaz-looks__recherche input:focus-visible,
.anaaz-looks__recherche button:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

/* Tri */
.anaaz-looks__tri {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	max-width: 1440px;
	margin: 12px auto 0;
	font-size: 13px;
}

.anaaz-looks__tri-choix {
	color: #111;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.anaaz-looks__tri-choix.is-actif {
	font-weight: 600;
	border-bottom-color: #111;
}

.anaaz-looks__tri-choix:hover {
	border-bottom-color: #111;
}

/* Nombre de looks et pages */
.anaaz-looks__resultats[aria-busy="true"] {
	opacity: .55;
	transition: opacity .15s ease;
}

.anaaz-looks__compte {
	max-width: 1440px;
	margin: 20px auto 0;
	padding: 0 30px;
	box-sizing: content-box;
	font-size: 13px;
	color: #444;
}

.anaaz-looks__compte a {
	color: #111;
}

.anaaz-looks__resultats .anaaz-looks__grille {
	padding-top: 12px;
}

.anaaz-looks__pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	padding: 0 30px 40px;
}

.anaaz-looks__pages:empty {
	display: none;
}

.anaaz-looks__plus,
.anaaz-looks__prec {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid #111;
	border-radius: 999px;
	background: #fff;
	color: #111;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.anaaz-looks__plus {
	background: #111;
	color: #fff;
}

.anaaz-looks__plus[aria-busy="true"] {
	opacity: .6;
}

/* Carte : photo et titre cliquables, plusieurs thèmes */
a.anaaz-look__photo {
	text-decoration: none;
}

.anaaz-look__themes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

a.anaaz-look__theme {
	text-decoration: none;
}

a.anaaz-look__theme:hover {
	text-decoration: underline;
}

.anaaz-look__titre a {
	color: #111;
	text-decoration: none;
}

.anaaz-look__titre a:hover {
	text-decoration: underline;
}

/* ==================== Page d'un look ==================== */

.anaaz-lkp {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 30px 48px;
	color: #111;
}

.anaaz-lkp__retour {
	margin: 0 0 16px;
	font-size: 14px;
}

.anaaz-lkp__retour a {
	color: #111;
}

.anaaz-lkp__grille {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: start;
	gap: 32px;
}

.anaaz-lkp__photo {
	display: flex;
	justify-content: center;
	overflow: hidden;
	border-radius: 12px;
	background: #f7eee5;
}

.anaaz-lkp__photo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 80vh;
	margin: 0;
	object-fit: contain;
}

.anaaz-lkp__titre {
	margin: 10px 0 0;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 600;
	color: #111;
	overflow-wrap: anywhere;
}

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

.anaaz-lkp__sous-titre {
	margin: 24px 0 0;
	font-size: 17px;
	font-weight: 600;
	color: #111;
}

.anaaz-lkp__produits .anaaz-look__produit-nom {
	font-size: 13px;
}

@media (max-width: 899px) {
	.anaaz-lkp {
		padding: 14px 16px 32px;
	}

	.anaaz-lkp__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.anaaz-lkp__photo {
		border-radius: 8px;
	}

	.anaaz-lkp__photo img {
		max-height: 75vh;
	}

	.anaaz-lkp__titre {
		font-size: 22px;
	}
}

/* ==================== Fiche produit : « Ce produit dans ces looks » ==================== */

.anaaz-looksx--fiche {
	clear: both;
	margin: 24px 0;
	border-radius: 12px;
}

.anaaz-alaune + .anaaz-looksx--fiche {
	margin-top: 24px;
}

@media (max-width: 599px) {
	.anaaz-looks__recherche input[type="search"] {
		max-width: none;
	}

	.anaaz-looks__compte {
		padding: 0 16px;
	}

	.anaaz-looks__pages {
		padding: 0 16px 32px;
	}

	.anaaz-looksx--fiche {
		border-radius: 8px;
	}
}
/* v5 : fiche produit, bloc à la largeur du contenu de la page (et non de tout l'écran), centré */
.anaaz-looksx--fiche {
	box-sizing: border-box;
	width: 100%; /* v6 : la fiche centre ses blocs ; sans largeur imposée, le bloc se réduisait à son contenu */
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1220px) {
	.anaaz-looksx--fiche {
		width: calc(100% - 32px);
		margin-left: 16px;
		margin-right: 16px;
	}
}

@media (max-width: 767px) {
	.anaaz-looksx--fiche {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		border-radius: 0;
	}
}

/* ==================== v8 (21/10/2026 ; v7 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 seulement : le bloc de la fiche produit garde son ombre) ====================
   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-looksx:not(.anaaz-looksx--fiche) .anaaz-looksx__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-looksx:not(.anaaz-looksx--fiche) .anaaz-looksx__texte {
	z-index: 1;
}

.anaaz-looksx:not(.anaaz-looksx--fiche) .anaaz-looksx__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-looksx:not(.anaaz-looksx--fiche) .anaaz-looksx__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%);
	}
}

/* ==================== v9 (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-looksx:not(.anaaz-looksx--fiche) .anaaz-looksx__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-looksx:not(.anaaz-looksx--fiche) .anaaz-looksx__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-looksx:not(.anaaz-looksx--fiche) .anaaz-looksx__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%);
	}
}

/* ==================== v11 (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-looksx:not(.anaaz-looksx--fiche) .anaaz-looksx__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-looksx:not(.anaaz-looksx--fiche) .anaaz-looksx__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-looksx:not(.anaaz-looksx--fiche) .anaaz-looksx__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%);
	}
}

/* ==================== v12 (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-looksx:not(.anaaz-looksx--fiche) .anaaz-looksx__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-looksx:not(.anaaz-looksx--fiche) .anaaz-looksx__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%);
	}
}