:root {
	--color-bg: #ffffff;
	--color-text: #000000;
	--color-muted: #666666;
	--color-primary: #000000;
	--color-primary-dark: #000000;
	--color-accent-bg: #f5f5f5;
	--color-border: #e5e5e5;
	--color-danger: #d32f2f;
	--radius-pill: 999px;
	/* Doit rester identique a .site-header__inner (height), reaffectee a 68px dans le media query
	   600px ci-dessous ou ce dernier change aussi - sert a .hero (min-height: calc(100vh - ...)) pour
	   que header + hero remplissent exactement un ecran, sans quoi centrer sur 100vh pousse le contenu
	   plus bas que le centre reellement visible (le header mangeant une partie de cet espace). */
	--header-height: 84px;
	/* Doit rester identique a .site-header__inner (max-width + padding) pour que le contenu de
	   chaque page s'aligne exactement avec le logo/titre et la derniere icone du header. */
	--container-width: 1200px;
}

* {
	box-sizing: border-box;
}

/* Coupe (quasiment) toutes les animations/transitions/le defilement fluide pour les visiteurs ayant
   demande "reduire les animations" au niveau OS (accordeon FAQ, changement d'onglet Explorer,
   survols...) - voir aussi explore.js pour le cas du scrollTo({behavior:"smooth"}) en JS, que cette
   regle CSS ne peut pas intercepter. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* overflow-x:hidden : filet de securite pour .hero-motif::before (voir plus bas), qui utilise
   width:100vw pour deborder jusqu'aux bords reels de l'ecran - 100vw peut etre legerement plus large
   que 100% quand une barre de defilement verticale est presente (elle n'est pas comptee dans vw),
   provoquant sinon un micro-debordement horizontal/un leger scroll lateral indesirable. */
body {
	margin: 0;
	overflow-x: hidden;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.5;
}

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 40px;
}

/* Lien d'evitement (voir fragments/header.html) : hors ecran par defaut, ramene dans la zone visible
   des qu'il recoit le focus clavier (Tab) - jamais visible a la souris/au toucher. */
.skip-link {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 1000;
	padding: 14px 24px;
	background: #111;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 10px 0;
}

.skip-link:focus {
	left: 0;
}

/* Banniere de consentement cookies (voir fragments/analytics.html) : fixe en bas de viewport,
   au-dessus du reste du contenu (z-index eleve, comme .skip-link ci-dessus). */
.cookie-banner {
	position: fixed;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 200;
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 24px;
	border-radius: 20px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 10px 30px rgba(17, 17, 17, .16);
}

/* Specificite plus elevee que la regle native [hidden]{display:none} (meme piege que
   .chip-list[data-group="gender"][hidden] ailleurs dans ce fichier) : sans ca, la banniere resterait
   visible meme avec l'attribut hidden pose par defaut dans le template/par le script. */
.cookie-banner[hidden] {
	display: none;
}

.cookie-banner__text {
	flex: 1;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text);
}

.cookie-banner__text a {
	color: #398AD6;
	font-weight: 600;
	text-decoration: underline;
}

.cookie-banner__actions {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.cookie-banner__accept,
.cookie-banner__decline {
	appearance: none;
	cursor: pointer;
	height: 44px;
	padding: 0 20px;
	border: none;
	border-radius: 14px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 700;
}

.cookie-banner__accept {
	background: #398AD6;
	color: #fff;
	box-shadow: 0 4px 0 #1F5E9C;
}

.cookie-banner__decline {
	background: #FFFEFC;
	color: var(--color-text);
	box-shadow: inset 0 0 0 1.5px #DDD0BC;
}

@media (max-width: 640px) {
	.cookie-banner {
		left: 12px;
		right: 12px;
		bottom: 12px;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 18px;
	}

	.cookie-banner__actions {
		justify-content: stretch;
	}

	.cookie-banner__accept,
	.cookie-banner__decline {
		flex: 1;
		justify-content: center;
	}
}

/* Header */
.site-header {
	background: #fff;
	border-bottom: 1.5px dashed #C9BFAF;
}

.site-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	height: 84px;
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-header__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	text-decoration: none;
}

/* Logo bicolore (bleu/or, meme palette que le reste du nouveau design). */
.site-header__logo-a {
	color: #2F78BE;
}

.site-header__logo-b {
	/* #DE9C31 ne passait pas le seuil WCAG AA "grand texte" (3:1) sur fond blanc (2.36:1 mesure) - le nom
	   de la marque est visible en permanence sur chaque page. #B07A1E (deja utilise ailleurs dans ce
	   fichier) passe a 3.72:1. */
	color: #B07A1E;
}

/* Hauteur en em (pas en px) : suit automatiquement .site-header__logo en passant de 28px a 22px a
   600px (voir plus bas), pas besoin de dupliquer une regle dans ce media query. */
.site-header__logo-icon {
	height: 1.2em;
	width: auto;
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Wishlist widget (header) */
/* Widgets d'en-tete (icone + panneau deroulant, ou lien direct pour "Explorer") : liste de souhaits,
   historique de recherches et exploration partagent cette base .header-widget*, seule
   .wishlist-widget__item-image (vignette produit) reste propre a la liste de souhaits. Pilule creme a
   ombre portee quand active - meme famille que les onglets .tab/.wishlist-seg du reste du nouveau
   design, plutot que le soulignement --color-text d'origine. */
.header-widget__toggle {
	position: relative;
	min-width: 96px;
	height: 62px;
	padding: 0 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border-radius: 16px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6B6157;
	border: none;
	background: transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.12s ease, color 0.12s ease;
}

.header-widget__toggle:hover {
	background: #FBF6EE;
	color: #111;
}

.header-widget__toggle[aria-current="page"] {
	background: #FFFEFC;
	color: #111;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 4px 0 #EFE8DD;
}

.header-widget__toggle[aria-current="page"] .header-widget__icon {
	color: #398AD6;
}

.header-widget__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-widget__label {
	white-space: nowrap;
}

.header-widget__badge {
	position: absolute;
	top: -8px;
	right: -12px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px #fff;
}

.header-widget__badge[hidden] {
	display: none;
}

.header-widget__badge--blue {
	background: #398AD6;
	color: #fff;
}

.header-widget__badge--yellow {
	background: #F1C45E;
	color: #111;
}

/* Hero */
.hero {
	position: relative;
	min-height: calc(100vh - var(--header-height));
	min-height: calc(100svh - var(--header-height));
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	text-align: center;
	background: var(--color-bg);
	box-sizing: border-box;
}

.hero__title {
	position: relative;
	margin: 0;
	max-width: 960px;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: clamp(36px, 5.5vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* Surlignage du mot-cle du titre (voir home.html, hero.title.mark) : degrade plutot qu'un background
   plein, pour laisser depasser les jambages des lettres (ex. le "d" de "idee"). */
.hero__mark {
	background: linear-gradient(transparent 62%, #F1C45E 62%, #F1C45E 92%, transparent 92%);
}

.hero__text {
	position: relative;
	margin: 0;
	max-width: 620px;
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.55;
	color: var(--color-muted);
	text-wrap: pretty;
}

/* Meme gabarit que le bouton du footer (.site-footer__btn) : seul le fond reste noir ici. */
/* Meme pilule bleue a ombre portee que .wishlist-cta/.site-footer__btn/.product-detail__buy (nouveau
   design), a la place du bouton noir --color-primary d'origine. */
.hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 58px;
	padding: 0 10px 0 26px;
	border-radius: 18px;
	border: none;
	background: #398AD6;
	box-shadow: 0 5px 0 #1F5E9C;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.hero__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 0 #1F5E9C;
	color: #fff;
}

.hero__btn:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 #1F5E9C;
}

.hero__btn:focus-visible {
	outline: 3px solid #F1C45E;
	outline-offset: 3px;
}

.hero__btn-dot {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #F1C45E;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Deuxieme section de la home (voir .hero ci-dessus, desormais plein ecran et seul a y vivre) : meme
   gabarit de conteneur que .hero (largeur/centrage/padding), sans le plein ecran. Cartes avec photo +
   pastille numerotee plutot que de simples lignes de texte (.steps/.step, remplaces). */
/* Fond gris pleine largeur (comme .explore/.explore__in) : .hiw porte juste le fond, .hiw__in
   recentre et limite le contenu. */
/* Separation visuelle avec les sections voisines (meme bordure pointillee que le footer, voir
   .site-footer dans front.css) : .hiw et .explore (juste apres sur la home) sont maintenant toutes
   deux blanches, sans rupture de couleur pour les distinguer naturellement. */
.hiw {
	position: relative;
	overflow: hidden;
	background: #fff;
	border-top: 1.5px dashed #C9BFAF;
}

.hiw__star {
	position: absolute;
	pointer-events: none;
}

.hiw__in {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 48px;
	box-sizing: border-box;
}

/* Memes proprietes que .explore__title (+ sa surcharge .home-page .explore__title, voir home.html). */
.hiw__title {
	margin: 0;
	max-width: 900px;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(28px, 3.6vw, 44px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.15;
	text-wrap: balance;
}

.hiw__mark {
	background: linear-gradient(transparent 62%, #F1C45E 62%, #F1C45E 92%, transparent 92%);
}

/* Prefixe "Etape N :" audible uniquement (voir th:text="#{hero.steps.srPrefix(...)}" dans home.html) :
   les pastilles numerotees 1/2/3 des mini-ecrans (voir .steps plus bas) sont aria-hidden, sans ce
   prefixe un lecteur d'ecran n'avait aucun moyen de savoir qu'il s'agit de l'etape 1/2/3. */
.hiw__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* 3 blocs etapes (mini-ecrans HTML/CSS, sans texte dans l'image donc identiques dans toutes les
   langues - seuls les h3/p au-dessous, lies aux cles hero.steps.stepN.title/text, sont traduits).
   Remplace l'ancienne grille photo + pastille (.hiw__grid/.hiw__card/.hiw__img, desormais retires) :
   copie telle quelle du fichier fourni (etapes-23c.html), styles des cartes laisses en inline dans
   home.html (valeurs figees du gabarit), seule cette regle de grille est reprise ici. */
.steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
	max-width: 1072px;
	margin: 0 auto;
}

@media (max-width: 899px) {
	.steps {
		grid-template-columns: 1fr;
		max-width: 420px;
		gap: 40px;
	}
}

.hiw__cta {
	position: relative;
	height: 58px;
	padding: 0 10px 0 28px;
	border-radius: 18px;
	background: #398AD6;
	box-shadow: 0 5px 0 #1F5E9C;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 14px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.hiw__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 0 #1F5E9C;
	color: #fff;
}

.hiw__cta:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 #1F5E9C;
}

.hiw__cta:focus-visible {
	outline: 3px solid #F1C45E;
	outline-offset: 3px;
}

.hiw__dot {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #F1C45E;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 900px) {
	.hiw__in {
		padding: 56px 20px;
		gap: 36px;
	}

	.hiw__star {
		display: none;
	}
}

/* FAQ (home) - deux colonnes (intro collante + accordeon), une seule question ouverte a la fois
   (voir js/faq.js, evenement "toggle" natif des <details>). Contenu toujours visible dans le DOM
   (ferme ou ouvert) - en phase avec le JSON-LD FAQPage correspondant (voir home.html, JSON-LD
   serialise cote serveur dans HomeController.buildJsonLd). */
.faq {
	background: #fff;
	border-top: 1.5px dashed #C9BFAF;
}

.faq__in {
	max-width: 1120px;
	margin: 0 auto;
	padding: 72px 24px;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 40px 64px;
	align-items: start;
	box-sizing: border-box;
}

/* Reste visible a l'ecran au defilement de la liste de questions, tant que la colonne de droite est
   plus haute que la fenetre - cosmetique, aucun impact sur l'ordre de lecture/le flux du DOM. */
.faq-intro {
	position: sticky;
	top: 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.faq__star {
	position: absolute;
	pointer-events: none;
}

.faq-intro__h {
	position: relative;
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: clamp(30px, 4vw, 48px);
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.faq-intro__mark {
	background: linear-gradient(transparent 62%, #F1C45E 62%, #F1C45E 92%, transparent 92%);
}

.faq-intro__p {
	margin: 0;
	max-width: 380px;
	font-size: 17px;
	line-height: 1.6;
	color: #6B6157;
	text-wrap: pretty;
}

.faq-ask {
	margin-top: 6px;
	height: 56px;
	padding: 0 22px 0 14px;
	border-radius: 18px;
	background: #FFFEFC;
	color: #3D352E;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: transform 0.12s ease;
}

.faq-ask:hover {
	transform: translateY(-2px);
	color: #111;
}

.faq-ask:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 3px;
}

.faq-ask__ic {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #F1C45E;
	display: flex;
	align-items: center;
	justify-content: center;
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.faq-item {
	border-radius: 22px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.faq-item[open] {
	background: #FBF6EE;
	box-shadow: inset 0 0 0 1.5px #F1C45E, 0 5px 0 #F3DFA9;
}

.faq-item__q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 24px 24px 28px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: #111;
}

.faq-item__q::-webkit-details-marker {
	display: none;
}

.faq-item__q:hover {
	color: #1F5E9C;
}

.faq-item__q:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 3px;
	border-radius: 22px;
}

.faq-item__ic {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #F4EEE5;
	color: #3D352E;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, background 0.15s ease;
}

.faq-item[open] .faq-item__ic {
	transform: rotate(45deg);
	background: #F1C45E;
	color: #111;
}

.faq-item__a {
	padding: 0 28px 26px;
}

.faq-item__a p {
	margin: 0;
	max-width: 600px;
	font-size: 16px;
	line-height: 1.7;
	color: #4A4038;
	text-wrap: pretty;
}

@media (max-width: 860px) {
	.faq__in {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.faq-intro {
		position: relative;
		top: auto;
	}

	.faq__star {
		display: none;
	}
}

@media (max-width: 640px) {
	.faq__in {
		padding: 48px 16px;
	}

	.faq-item__q {
		font-size: 16px;
		padding: 20px 18px 20px 20px;
	}

	.faq-item__a {
		padding: 0 20px 22px;
	}
}

/* Buttons */
.button {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 13px;
	text-decoration: none;
	font-weight: 600;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.button[hidden] {
	display: none;
}

.button--primary {
	background: var(--color-primary);
	color: #fff;
	border: 2px solid var(--color-primary);
	border-radius: 14px;
	font-weight: 700;
}

.button--primary:hover {
	background: #fff;
	color: var(--color-primary);
	transform: translateY(-1px);
}

.button--secondary {
	background: #fff;
	color: var(--color-text);
	border: 2px solid var(--color-border);
}

.button--secondary:hover {
	border-color: var(--color-text);
	transform: translateY(-1px);
}

/* "Voir plus" des resultats du generateur (#results-load-more, seul usage actuel de .button--secondary,
   voir generator.html/generator-results.html) : pilule creme a ombre portee, meme famille que les
   pilules .wishlist-seg/.wishlist-cta du nouveau design plutot que le bouton carre --color-border
   d'origine. Scope sous #wizard-results pour ne pas affecter un futur usage ailleurs de
   .button--secondary. */
#wizard-results .button--secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 28px auto 0;
	background: #FEFCF8;
	color: #221E1A;
	border: none;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 4px 0 #EFE8DD;
	border-radius: var(--radius-pill);
	padding: 12px 28px;
	font-weight: 700;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#wizard-results .button--secondary:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 6px 0 #EFE8DD;
}

#wizard-results .button--secondary:active {
	transform: translateY(2px);
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 1px 0 #EFE8DD;
}

#wizard-results .button--secondary:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 2px;
}

/* #wizard-results .button--secondary (display:flex, 1 id + 1 classe) passerait sinon devant
   .button[hidden] (display:none, 2 classes) : un id l'emporte toujours sur des classes quelle que
   soit leur nombre, meme piege [hidden] que deja rencontre plusieurs fois sur ce projet. */
#wizard-results .button--secondary[hidden] {
	display: none;
}

/* Etat de chargement du bouton "Voir plus" (voir results-panel.js) : pas .button:disabled (ci-dessous),
   qui passe a opacity:0 - ici le bouton doit rester visible pendant le chargement. */
.button.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.button:disabled {
	opacity: 0;
	pointer-events: none;
}

/* Explore section (onglets categories + grille d'idees cadeaux) */
.explore {
	background: #fff;
}

/* padding-top 36px : meme espace header->titre que .history (search-history.html) et .eraika-header
   (wishlist.html/generator-results.html, 8px de .results + 28px de .eraika-header) - tous les titres de
   page partagent desormais ce meme espacement. */
.explore__in {
	max-width: 1200px;
	margin: 0 auto;
	padding: 36px 40px 72px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.explore__head {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Grossie/mise en gras par rapport a l'ancienne valeur (generalisee a l'epoque depuis cette meme
   regle vers .eraika-header__title, qui garde volontairement sa propre taille reduite - voir
   fragments/header.html) : la home restaure un gabarit plus modeste pour son h2 d'apercu, qui a deja
   un h1 (le hero) au-dessus, voir .home-page dans home.html. */
.explore__title {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.explore__title-mark {
	background: linear-gradient(transparent 62%, #F1C45E 62%, #F1C45E 92%, transparent 92%);
}

/* Banniere optionnelle du guide selectionne (voir fragments/explore.html, guideBannerUrl) : largeur
   pleine de .explore__in, hauteur contrainte quel que soit le ratio de l'image uploadee. Fond neutre
   (pas de couleur vive/par defaut du navigateur) visible le temps du chargement reseau - sans ca, la
   zone reste transparente jusqu'a l'arrivee de l'image, visible en particulier sur un premier
   chargement (cache navigateur froid, voir Cache-Control sur cet endpoint : instantane ensuite,
   uniquement le tout premier chargement est concerne). Volontairement sans JS (pas de fondu en opacite
   bascule par un onload) : fonctionne quel que soit l'etat du JS, l'image recouvre simplement ce fond
   des qu'elle est decodee, sans dependance supplementaire pour un gain purement cosmetique.*/
.explore__banner {
	width: 100%;
	height: clamp(140px, 22vw, 280px);
	object-fit: cover;
	border-radius: 28px;
	background: #F3ECDD;
}

.tabs-wrap {
	position: relative;
	align-self: flex-start;
	max-width: 100%;
}

.tabs {
	max-width: 100%;
	display: flex;
	gap: 10px;
	padding: 4px 2px 10px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
	display: none;
}

/* Boutons de defilement places dans la marge (-6px, hors de .tabs) plutot qu'en overlay par-dessus
   le dernier onglet (ce que fait le gabarit fourni, qui doit alors reserver un padding-right et
   degrader l'ombre du bouton en fondu pour masquer l'onglet couvert) : plus simple et aucun onglet
   n'est jamais cache. */
.scroll-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #398AD6;
	color: #fff;
	box-shadow: 0 3px 0 #1F5E9C;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.scroll-nav:hover {
	background: #2F78BE;
}

.scroll-nav:active {
	transform: translateY(-50%) translateY(2px);
	box-shadow: 0 1px 0 #1F5E9C;
}

.scroll-nav:focus-visible {
	outline: 3px solid #F1C45E;
	outline-offset: 3px;
}

.scroll-nav svg {
	width: 16px;
	height: 16px;
	pointer-events: none;
}

.scroll-nav--prev {
	left: -6px;
}

.scroll-nav--next {
	right: -6px;
}

.scroll-nav[hidden] {
	display: none;
}

.tab {
	flex-shrink: 0;
	cursor: pointer;
	border: none;
	height: 46px;
	padding: 0 18px;
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius-pill);
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 4px 0 #EFE8DD;
	color: #3D352E;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: transform 0.12s ease;
}

.tab:hover {
	transform: translateY(-2px);
	color: #111;
}

.tab[aria-selected="true"] {
	background: #F1C45E;
	box-shadow: 0 5px 0 #DE9C31;
	color: #111;
	font-weight: 700;
}

.tab:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 3px;
}

.grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: 20px;
	transition: opacity 0.15s ease;
}

/* Changement d'onglet en AJAX sur la page Explorer dediee (voir js/explore.js switchTab) : attenue
   legerement la grille pendant le fetch, pour signaler que le clic a bien ete pris en compte sans
   attendre un rechargement complet de page. */
.grid.is-loading {
	opacity: 0.5;
}

.grid__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 40px 0;
	text-align: center;
	color: var(--color-muted);
}

/* "Voir plus" (page Explorer dediee uniquement, voir fragments/explore.html + js/explore.js) : revele
   les cartes au-dela de l'apercu par defaut (9) deja presentes dans le DOM via [hidden], par paquets de
   9, sans nouvel appel reseau. Meme habillage pilule/ombre que .rating-refine. */
.explore__more {
	grid-column: 1 / -1;
	justify-self: center;
	appearance: none;
	cursor: pointer;
	height: 54px;
	padding: 0 28px;
	margin-top: 6px;
	border: none;
	border-radius: 16px;
	background: #398AD6;
	color: #fff;
	box-shadow: 0 5px 0 #1F5E9C;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 700;
}

.explore__more:hover {
	transform: translateY(-1px);
}

.feat {
	grid-column: span 2;
	grid-row: span 2;
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 24px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
	overflow: hidden;
	transition: transform 0.15s ease;
}

.feat:hover {
	transform: translateY(-3px);
}

/* Meme motif d'image, deja en production et fiable, que .product-detail__image (fiche produit) :
   centree par flex avec une largeur/hauteur en pourcentage (76%) plutot que 100%+padding - une
   premiere tentative en position:absolute+inset cassait le centrage (pas de boite de taille definie
   pour object-fit), un retrait de flex:1 ensuite laissait un vide sous .feat__foot (.feat__media ne
   grandissait plus pour occuper toute la hauteur de .feat une fois etiree par la grille). flex:1 reste
   donc ici (contrairement a .product-detail__image, qui n'en a pas besoin hors grille) : l'ambiguite
   evoquee plus bas se joue au moment ou la grille calcule la hauteur des rangees (avant que flex-grow
   n'intervienne), aspect-ratio y suffit a donner une contribution definie independante du contenu.
   Ancien bug (desormais couvert) : la photo "coup de cœur" peut etre n'importe quel produit source
   (Amazon...), donc n'importe quel format - une image tres haute/etroite (ex. gros plan vertical sur un
   manche de ukulele) rendait la carte entiere demesurement longue, et entrainait aussi les cartes
   voisines dans son sillage (meme rangees de grille). Cause : avec flex:1 et sans aspect-ratio,
   .feat__media n'avait aucune hauteur definie hors flex, et son image en width/height:100% n'en avait
   pas non plus - lors du calcul de la hauteur intrinseque de .feat (utilisee par la grille CSS pour
   dimensionner les 2 rangees qu'il occupe, voir grid-row:span 2 plus haut), les pourcentages indefinis
   retombaient sur la hauteur NATURELLE de l'image, qui se propageait alors aux 2 rangees de toute la
   grille. */
.feat__media {
	position: relative;
	width: 100%;
	flex: 1;
	aspect-ratio: 4 / 3;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
}

.feat__media img {
	width: 76%;
	height: 76%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.feat__badge {
	position: absolute;
	top: 18px;
	left: 18px;
	height: 36px;
	padding: 0 14px;
	border-radius: var(--radius-pill);
	background: #F1C45E;
	box-shadow: 0 3px 0 #DE9C31;
	color: #111;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 8px;
}

.feat__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
}

.feat__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.feat__name {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
	text-decoration: none;
}

.feat__right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.feat__price {
	font-size: 22px;
	font-weight: 800;
	color: #111;
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: 24px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
	overflow: hidden;
	transition: transform 0.15s ease;
}

.card:hover {
	transform: translateY(-3px);
}

.card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	margin: 8px 8px 0;
	border-radius: 18px;
	overflow: hidden;
}

.card__media > a {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
}

.card__media img {
	width: 78%;
	height: 78%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 18px 18px;
}

.card__name {
	margin: 2px 0 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: #111;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card__price {
	margin-top: auto;
	padding-top: 6px;
	font-size: 18px;
	font-weight: 800;
}

/* Icone coeur toujours visible (plutot qu'un "✓" ecrit en JS dans un bouton vide) : seul son
   remplissage change selon aria-pressed (voir js/explore.js), meme motif que
   .product-detail__save-icon sur la fiche produit. */
.save {
	cursor: pointer;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(61, 53, 46, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
}

.save path {
	fill: none;
	stroke: #3D352E;
}

.save[aria-pressed="true"] path {
	fill: #D9473A;
	stroke: #D9473A;
}

.save:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 2px;
}

.card .save {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 42px;
	height: 42px;
}

/* Fonds pastel des visuels - t0 a t4 cyclent sur .feat__media (toujours t0) et .card__media
   (t' + ((i+1) % 5), voir explore.js renderGrid) : une classe construite par concatenation de
   chaines, pas visible par une recherche litterale de "t1"/"t2"/etc. */
.t0 {
	background: #FCE3D6;
}

.t1 {
	background: #E4F2E7;
}

.t2 {
	background: #E3EEFB;
}

.t3 {
	background: #FDF1D3;
}

.t4 {
	background: #F3E7F5;
}

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

	.feat__media {
		min-height: 280px;
	}
}

@media (max-width: 760px) {
	.explore__banner {
		height: 160px;
		border-radius: 20px;
	}

	.grid {
		gap: 12px;
	}

	.feat {
		grid-row: auto;
	}

	.card__body {
		padding: 12px 14px 14px;
	}

	.card .save {
		top: 14px;
		right: 14px;
		width: 36px;
		height: 36px;
	}
}

/* Wizard */
/* Doit occuper tout l'ecran (moins le header, seul element fixe au-dessus) : sur une etape courte
   (peu de puces), le contenu ne remplissait avant qu'une fraction de la page et le footer du site
   apparaissait juste en dessous. .container passe en colonne flex pleine hauteur pour que
   .wizard-footer (boutons Precedent/Suivant, position:sticky) soit pousse tout en bas DU FORMULAIRE
   via margin-top:auto plutot que de suivre le contenu au plus court - contrairement a
   position:fixed (essaye puis abandonne), il reste ainsi cantonne au formulaire : une fois qu'on
   defile au-dela (etape avec beaucoup de contenu), il suit normalement au lieu de rester rive a
   l'ecran par-dessus le footer du site. */
.wizard {
	padding: 32px 20px 0;
	min-height: calc(100vh - 84px);
	/* Sur mobile, 100vh est calcule sur la hauteur MAXIMALE du viewport (barre d'adresse repliee), pas
	   sur la zone reellement visible : quand la barre d'adresse apparait/disparait au defilement, la
	   hauteur reelle change sans que 100vh ne suive, ce qui fait "sauter"/suivre le bloc sticky en bas
	   du formulaire au lieu de rester rive. 100dvh suit la zone visible en temps reel ; ignore par les
	   navigateurs qui ne le supportent pas, qui gardent alors le calcul 100vh ci-dessus. */
	min-height: calc(100dvh - 84px);
	display: flex;
	flex-direction: column;
}

/* display:flex (regle auteur) l'emporte toujours sur le [hidden]{display:none} du navigateur (regle
   UA), quelle que soit la specificite : sans cette regle explicite, generator.js qui fait
   wizardSection.hidden = true une fois les resultats prets ne masque plus rien, et l'ecran reste
   bloque sur "Nous sommes en cours de generation" alors que les resultats sont deja disponibles. */
.wizard[hidden] {
	display: none;
}

.wizard > .container {
	display: flex;
	flex-direction: column;
	flex: 1;
	/* Sans ca, un flex item garde par defaut min-width:auto (taille min-content de son contenu) :
	   des qu'un descendant refuse de retrecir sous une certaine largeur, .container deborde du
	   viewport malgre son max-width, au lieu de laisser son contenu s'adapter/wrap normalement. */
	min-width: 0;
	/* Sans width explicite, la largeur "stretch" de ce flex item reste ambigue des qu'un descendant a
	   une contrainte de taille propre (ex. un ancien bandeau en aspect-ratio+min-height, deborde tout
	   l'ecran en mobile sinon). Un width:100% explicite (pourcentage resolu en cascade "normale" plutot
	   que via l'algorithme de stretch flex) leve l'ambiguite. */
	width: 100%;
}

/* Bandeau du wizard : fond blanc avec etoiles decoratives (voir fragments/banner.html), meme famille
   visuelle que .hero (home). width:100% explicite, sans max-width : pleine largeur du container (le
   formulaire en dessous reste plus etroit, cf. .wizard__inner). */
.wizard-head {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 0 32px;
	border-radius: 24px;
	background: #fff;
	font-family: 'Poppins', sans-serif;
	color: #111;
	padding: 48px 24px 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	box-sizing: border-box;
}

.wizard-head__star {
	position: absolute;
	pointer-events: none;
}

.wizard-head__title {
	position: relative;
	margin: 0;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	text-wrap: balance;
}

.wizard-head__mark {
	background: linear-gradient(transparent 62%, #F1C45E 62%, #F1C45E 92%, transparent 92%);
}

.wizard-head__sub {
	position: relative;
	margin: 0;
	font-size: 16px;
	color: #6B6157;
}

@media (max-width: 860px) {
	.wizard-head {
		padding: 32px 20px 24px;
	}

	.wizard-head__star:nth-of-type(n + 7) {
		display: none;
	}
}

@media (max-width: 520px) {
	.wizard-head__star:nth-of-type(n + 5) {
		display: none;
	}
}

.wizard__inner {
	/* width:100% explicite : meme raison que sur .container (voir plus haut) - sans lui, cet item flex
	   avec un max-width et un contenu plus etroit (peu de puces sur certaines etapes) se retrouve
	   dimensionne sur son contenu au lieu d'etre etire jusqu'a max-width, et ne s'aligne plus avec la
	   banniere au-dessus. */
	width: 100%;
	max-width: 820px;
	margin: 0 auto;
	padding-bottom: 32px;
}

.wizard-stepper {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 20px;
}

.wizard-stepper button {
	all: unset;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	cursor: default;
}

.wizard-stepper .bar {
	height: 5px;
	border-radius: var(--radius-pill);
	background: var(--color-border);
}

.wizard-stepper .lbl {
	font-size: 13px;
	font-weight: 500;
	color: #A0A0A0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wizard-stepper .is-reach {
	cursor: pointer;
}

.wizard-stepper .is-reach .bar {
	background: #9A9A9A;
}

.wizard-stepper .is-reach .lbl {
	color: #3D3D3D;
}

/* Memes couleurs que le reste du wizard (voir .wizard-next__dot/.chip--tile.is-selected) : bleu des
   qu'une etape devient active, puis vire au jaune une fois validee (passe a l'etape suivante). */
.wizard-stepper .is-done .bar {
	background: #F1C45E;
}

.wizard-stepper .is-current .bar {
	background: #398AD6;
}

.wizard-stepper .is-current {
	cursor: default;
}

.wizard-stepper .is-current .lbl {
	color: var(--color-text);
	font-weight: 700;
}

.wizard-step {
	display: none;
}

.wizard-step.is-active {
	display: block;
}

.wizard-step__title {
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin: 0 0 8px;
}

.wizard-step__subtitle {
	color: var(--color-muted);
	margin: 0;
}

.wizard-step__note {
	margin: 16px 0 0;
	font-size: 0.9rem;
	color: var(--color-muted);
}


.wizard-recap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
}

/* "Vos reponses" (voir generator.js, renderRecap) uniquement sur PC : sur mobile/tablette la liste de
   puces casse l'harmonie du reste du wizard. Cible #wizard-recap specifiquement (pas .wizard-recap
   generique, aussi portee par #wizard-loading-recap pendant le chargement, non concerne ici). */
@media (max-width: 1024px) {
	#wizard-recap {
		display: none;
	}
}

.wizard-recap__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-right: 4px;
}

.wizard-recap button {
	cursor: pointer;
	min-height: 34px;
	padding: 0 12px;
	border-radius: var(--radius-pill);
	border: none;
	background: var(--color-accent-bg);
	font-family: inherit;
	font-size: 14px;
	color: var(--color-text);
}

.wizard-recap button:hover {
	background: #E6E6E6;
}

.wizard-step__group-label {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-muted);
	margin: 32px 0 0;
}

/* Masque visuellement sans retirer de l'arbre d'accessibilite (voir generator.html,
   #forwho-relationship-label) : hors du flux (position:absolute) donc sans impact sur le gap flex du
   parent, contrairement a display:none/hidden qui masquerait aussi aux lecteurs d'ecran. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.chip-scroll-wrap {
	position: relative;
}

.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.chip-list.chip-list--scroll {
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 10px;
	scroll-behavior: smooth;
}

.chip-list--scroll::-webkit-scrollbar {
	height: 6px;
}

.chip-list--scroll::-webkit-scrollbar-track {
	background: var(--color-accent-bg);
	border-radius: var(--radius-pill);
}

.chip-list--scroll::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: var(--radius-pill);
}

.chip-list--scroll::-webkit-scrollbar-thumb:hover {
	background: var(--color-muted);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--color-border);
	background: #fff;
	color: var(--color-text);
	cursor: pointer;
	font-family: inherit;
	font-weight: 500;
	font-size: 1rem;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chip:hover {
	border-color: var(--color-text);
}

.chip.is-selected {
	background: var(--color-text);
	color: #fff;
	border-color: var(--color-text);
}

.chip__mark::before {
	content: '+';
}

.chip.is-selected .chip__mark::before {
	content: '✓';
}

/* Etape "Pour qui est ce cadeau ?" (voir generator.html, data-dimension="forWho") : fond blanc avec
   etoiles decoratives, meme famille visuelle que .hero/.wizard-head. Scope a cette seule etape (pas
   .wizard-step generique) pour ne pas affecter les autres, qui n'ont pas (encore) leur propre gabarit. */
/* padding-bottom : overflow:hidden (pour contenir les etoiles decoratives sans provoquer de
   defilement horizontal) rogne aussi tout ce qui depasse visuellement la derniere rangee de contenu,
   y compris une ombre portee - sans cette marge, la derniere rangee des puces "gender"/"animal"
   (ombre 0 4px 0, voir plus bas) se retrouvait coupee en bas des qu'elle passait sur une 2e ligne. */
.wizard-step[data-dimension="forWho"] {
	position: relative;
	overflow: hidden;
	padding: 12px 0 8px;
	box-sizing: border-box;
}

.wizard-step[data-dimension="forWho"].is-active {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.wizard-step__star {
	position: absolute;
	pointer-events: none;
}

/* Memes puces .chip/.chip-list que le reste du wizard (toggleSingle/syncChipPressedState continuent
   de cibler .chip sans modification) : chip--tile n'est qu'une variante visuelle, ajoutee par
   renderChips quand un iconMap est fourni (voir generator.js, groupe "relationship" uniquement). */
.wizard-step[data-dimension="forWho"] .chip-list {
	margin-top: 0;
}

.chip-list[data-group="relationship"] {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.chip.chip--tile {
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	min-height: 124px;
	padding: 18px 14px 16px;
	border-radius: 22px;
	border: none;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	white-space: normal;
	transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.chip.chip--tile:hover {
	border-color: transparent;
	transform: translateY(-2px);
}

.chip.chip--tile.is-selected {
	background: #F1C45E;
	color: #111;
	border-color: transparent;
	box-shadow: 0 6px 0 #DE9C31;
	transform: translateY(-2px);
}

.chip.chip--tile:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 3px;
}

.chip__icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.chip--tile:nth-child(3n+1) .chip__icon {
	background: #F1C45E;
}

.chip--tile:nth-child(3n+2) .chip__icon {
	background: #398AD6;
}

.chip--tile:nth-child(3n) .chip__icon {
	background: #DE9C31;
}

.chip--tile.is-selected .chip__icon {
	background: #fff;
	color: #111;
}

/* Groupe "gender"/"animal" (voir renderSecondGroup dans generator.js, meme conteneur reutilise pour
   les deux) : barre segmentee plutot que des puces independantes, purement en CSS (pas de changement
   de rendu JS necessaire, toujours les memes boutons .chip). */
.chip-list[data-group="gender"] {
	display: flex;
	flex-wrap: wrap;
	width: fit-content;
	gap: 4px;
	padding: 5px;
	border-radius: var(--radius-pill);
	background: #FEFCF8;
	box-shadow: inset 0 0 0 1.5px #EEE4D3, 0 4px 0 #E6DACA;
}

/* [data-group="gender"] a une specificite plus elevee que la regle native [hidden]{display:none} :
   sans cette regle, le groupe reste visible (display:flex) meme avec l'attribut hidden, cassant le
   masquage selon la relation choisie/deselectionnee (voir renderSecondGroup dans generator.js). */
.chip-list[data-group="gender"][hidden] {
	display: none;
}

.chip-list[data-group="gender"] .chip {
	min-height: 40px;
	padding: 0 18px;
	border: none;
	background: transparent;
	font-size: 14px;
	font-weight: 600;
	color: #6B6157;
}

.chip-list[data-group="gender"] .chip:hover {
	border-color: transparent;
}

.chip-list[data-group="gender"] .chip.is-selected {
	background: #398AD6;
	color: #fff;
}

/* Etape "Pour quelle occasion ?" : les occasions mises en avant (voir Occasion.position) en tuiles a
   icone (meme .chip--tile que le groupe "relationship", reutilise tel quel), les suivantes repliees
   derriere un <details> "Voir plus" en simples pilules (pas de regroupement par categorie - toutes les
   occasions de la BDD y passent a plat, voir renderOccasionChips dans generator.js). */
.chip-list[data-group="occasion-tiles"] {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.wizard-occasion-more {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
}

.wizard-occasion-more[hidden] {
	display: none;
}

.wizard-occasion-more summary {
	list-style: none;
	align-self: flex-start;
	height: 44px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #398AD6;
	cursor: pointer;
}

.wizard-occasion-more summary::-webkit-details-marker {
	display: none;
}

.wizard-occasion-more summary svg {
	transition: transform 0.15s ease;
}

.wizard-occasion-more[open] summary svg {
	transform: rotate(180deg);
}

.wizard-occasion-more[open] .wizard-occasion-more__open,
.wizard-occasion-more:not([open]) .wizard-occasion-more__close {
	display: none;
}

.chip-list[data-group="occasion-more"] {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Specificite plus elevee que .chip-list.chip-list--scroll (voir applyScrollLayoutIfOverflowing dans
   generator.js) : cette liste, repliee derriere "Voir plus" et non contrainte en largeur, doit rester
   en pilules qui retombent a la ligne plutot que basculer en defilement horizontal. */
.chip-list[data-group="occasion-more"].chip-list--scroll {
	display: flex;
	flex-wrap: wrap;
	overflow: visible;
}

.chip-list[data-group="occasion-more"] .chip {
	min-height: 46px;
	padding: 10px 18px;
	border: none;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
	font-size: 15px;
	font-weight: 600;
	transition: transform 0.12s ease;
}

.chip-list[data-group="occasion-more"] .chip:hover {
	border-color: transparent;
	transform: translateY(-1px);
}

.chip-list[data-group="occasion-more"] .chip.is-selected {
	background: #F1C45E;
	box-shadow: 0 6px 0 #DE9C31;
}

/* Meme motif que .chip-list[data-group="budget-pills"] : en flex-wrap, chaque pilule garde la
   largeur de son propre texte, qui ne s'aligne plus en colonnes nettes une fois repliee sur un
   ecran etroit. Les deux selecteurs (avec/sans .chip-list--scroll) pour egaler au moins la
   specificite de la regle anti-scroll ci-dessus, qui l'emporterait sinon toujours ici - et on
   reinitialise TOUTES les proprietes de .chip-list.chip-list--scroll (generique, utilisee par les
   grilles de tuiles a defilement horizontal), pas seulement display/grid-template-columns : sinon
   son grid-auto-flow:column/grid-template-rows (pensees pour un defilement en colonnes) restaient
   actives par-dessus et entraient en conflit avec notre grille 2 colonnes, chaque propriete du
   cascade se resolvant independamment des autres. */
@media (max-width: 760px) {
	.chip-list[data-group="occasion-more"],
	.chip-list[data-group="occasion-more"].chip-list--scroll {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-flow: row;
		grid-auto-columns: auto;
		overflow: visible;
		padding-bottom: 0;
	}

	.chip-list[data-group="occasion-more"] .chip {
		justify-content: center;
	}
}

/* Etape "Quels centres d'interet ?" : barre de recherche, tuiles de categorie (meme .chip--tile que
   relationship/occasion-tiles) affichant chacune un seul panneau de pilules a la fois (pattern
   tablist/tabpanel, voir renderInterestCategoryTabs/renderInterestPanel dans generator.js), resultats
   de recherche en liste plate quand on tape, et un plateau ("tray") des choix retirables en bas. */
.wizard-interest-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 54px;
	margin-top: 24px;
	padding: 0 18px;
	border-radius: 16px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC;
}

.wizard-interest-search:focus-within {
	box-shadow: inset 0 0 0 2px #398AD6, 0 0 0 4px #EAF3FC;
}

.wizard-interest-search svg {
	flex-shrink: 0;
}

.wizard-interest-search input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font: 16px 'Poppins', sans-serif;
	color: #111;
}

.chip-list[data-group="interest-cats"] {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin-top: 24px;
}

.chip-list[data-group="interest-cats"] .chip--tile {
	position: relative;
	min-height: 104px;
	font-size: 13px;
}

.wizard-interest-cat__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: var(--radius-pill);
	background: #398AD6;
	color: #fff;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wizard-interest-cat__badge[hidden] {
	display: none;
}

.wizard-interest-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 20px;
	padding: 22px 22px 24px;
	border-radius: 20px;
	background: #FBF8F2;
}

.wizard-interest-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.wizard-interest-panel__title {
	font-size: 17px;
	font-weight: 800;
}

.wizard-interest-panel .chip-list,
.chip-list[data-group="interest-results"] {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wizard-interest-panel .chip-list {
	margin-top: 0;
}

.chip-list[data-group="interest-results"] {
	margin-top: 24px;
}

/* Specificite plus elevee que la regle native [hidden]{display:none} (meme piege que
   .chip-list[data-group="gender"][hidden] plus haut) : sans ca, les resultats de recherche restent
   visibles meme avec l'attribut hidden pose par renderInterestChips. */
.chip-list[data-group="interest-results"][hidden] {
	display: none;
}

/* Specificite plus elevee que .chip-list.chip-list--scroll (voir applyScrollLayoutIfOverflowing dans
   generator.js) : ces deux listes doivent rester en pilules qui retombent a la ligne, jamais en
   defilement horizontal (meme raison que .chip-list[data-group="occasion-more"]). */
.wizard-interest-panel .chip-list.chip-list--scroll,
.chip-list[data-group="interest-results"].chip-list--scroll {
	display: flex;
	flex-wrap: wrap;
	overflow: visible;
}

.wizard-interest-panel .chip-list .chip,
.chip-list[data-group="interest-results"] .chip {
	min-height: 46px;
	padding: 10px 18px 10px 14px;
	border: none;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 4px 0 #EFE8DD;
	font-size: 15px;
	font-weight: 600;
	transition: transform 0.12s ease;
}

.wizard-interest-panel .chip-list .chip:hover,
.chip-list[data-group="interest-results"] .chip:hover {
	border-color: transparent;
	transform: translateY(-1px);
}

.wizard-interest-panel .chip-list .chip.is-selected,
.chip-list[data-group="interest-results"] .chip.is-selected {
	background: #F1C45E;
	box-shadow: 0 5px 0 #DE9C31;
}

/* Meme motif que .chip-list[data-group="budget-pills"]/[data-group="occasion-more"] : en flex-wrap,
   chaque pilule garde la largeur de son propre texte, qui ne s'aligne plus en colonnes nettes une
   fois repliee sur un ecran etroit. Pas de justify-content:center ici (contrairement aux deux autres
   listes) : ces puces ont une icone "+" devant le libelle (chip__mark, voir renderChips dans
   generator.js), un contenu cale a gauche reste plus lisible qu'un bloc icone+texte centre.
   grid-template-rows/grid-auto-flow/grid-auto-columns/overflow/padding-bottom reinitialises : sinon
   ceux de .chip-list.chip-list--scroll (generique, pensee pour un defilement en colonnes) restent
   actifs par-dessus et entrent en conflit avec notre grille 2 colonnes (meme piege que pour
   [data-group="occasion-more"] ci-dessus). */
@media (max-width: 760px) {
	.wizard-interest-panel .chip-list,
	.chip-list[data-group="interest-results"],
	.wizard-interest-panel .chip-list.chip-list--scroll,
	.chip-list[data-group="interest-results"].chip-list--scroll {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-flow: row;
		grid-auto-columns: auto;
		overflow: visible;
		padding-bottom: 0;
	}
}

.wizard-interest-tray {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 24px;
}

.wizard-interest-tray__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6B6157;
}

.wizard-interest-tray__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-height: 38px;
	align-items: center;
}

.wizard-interest-tray__none {
	font-size: 14px;
	color: #B3A797;
}

.wizard-interest-chip {
	height: 36px;
	padding: 0 10px 0 14px;
	border: none;
	border-radius: var(--radius-pill);
	background: #EAF3FC;
	font: 600 14px 'Poppins', sans-serif;
	color: #1F5E9C;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}

.wizard-interest-chip:hover {
	background: #DCEBFA;
}

/* Etape "Pour quel age ?" : memes tuiles .chip--tile que relationship/occasion-tiles (8 valeurs fixes
   de AgeRange, voir AGE_ICONS dans generator.js). */
.chip-list[data-group="age-tiles"] {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

/* Etape "Quel budget ?" : pilules plutot que des tuiles (une fourchette de prix ne se prete pas a une
   icone), meme traitement visuel que .chip-list[data-group="occasion-more"]/les pilules de l'etape
   Interets - selection multiple (voir toggleMulti), d'ou le + /✓ de .chip__mark deja gere par
   renderChips(withMark=true). */
.chip-list[data-group="budget-pills"] {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.chip-list[data-group="budget-pills"].chip-list--scroll {
	display: flex;
	flex-wrap: wrap;
	overflow: visible;
}

.chip-list[data-group="budget-pills"] .chip {
	min-height: 46px;
	padding: 10px 18px 10px 14px;
	border: none;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 4px 0 #EFE8DD;
	font-size: 15px;
	font-weight: 600;
	transition: transform 0.12s ease;
}

.chip-list[data-group="budget-pills"] .chip:hover {
	border-color: transparent;
	transform: translateY(-1px);
}

.chip-list[data-group="budget-pills"] .chip.is-selected {
	background: #F1C45E;
	box-shadow: 0 5px 0 #DE9C31;
}

/* En display:flex, chaque pilule garde la largeur de son propre texte ("Moins de 15 €" plus etroite
   que "15 € - 30 €") : une fois repliees sur 2 par ligne a cette largeur, elles ne s'alignent plus en
   colonnes nettes (effet "brique" peu harmonieux). Une grille a 2 colonnes egales uniformise tout -
   .chip (inline-flex) s'etire automatiquement a la largeur de sa cellule une fois enfant d'une grille,
   sans changement necessaire sur .chip lui-meme. */
@media (max-width: 760px) {
	.chip-list[data-group="budget-pills"] {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.chip-list[data-group="budget-pills"] .chip {
		justify-content: center;
	}
}

@media (max-width: 760px) {
	/* padding-bottom repris de la regle de base (voir plus haut) : ce bloc la remettait sinon a 0,
	   annulant l'espace qui empeche overflow:hidden de rogner l'ombre portee de la derniere rangee de
	   puces gender/animal - precisement a la largeur ou elles passent sur 2 lignes. */
	.wizard-step[data-dimension="forWho"] {
		padding: 10px 0 8px;
	}

	.wizard-step[data-dimension="forWho"] .wizard-step__star {
		display: none;
	}

	.chip-list[data-group="relationship"],
	.chip-list[data-group="occasion-tiles"],
	.chip-list[data-group="age-tiles"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.chip.chip--tile {
		min-height: 108px;
	}

	/* Barre segmentee (gender/animal, voir le commentaire plus haut) : pensee pour tenir sur une seule
	   ligne, elle devient illisible des que ses options passent a la ligne a l'interieur du meme
	   contour en pilule (le texte selectionne prend toute la largeur, les autres options se
	   retrouvent coincees au-dessus/en-dessous). Sur un ecran etroit, on detache les options en puces
	   individuelles (meme fond/liseret que le reste des puces du wizard) plutot que related mal a
	   l'interieur d'un seul contour. */
	.chip-list[data-group="gender"] {
		width: auto;
		padding: 0;
		gap: 10px;
		background: none;
		box-shadow: none;
	}

	.chip-list[data-group="gender"] .chip {
		border-radius: var(--radius-pill);
		background: #FEFCF8;
		box-shadow: inset 0 0 0 1.5px #EEE4D3, 0 4px 0 #E6DACA;
	}

	.chip-list[data-group="gender"] .chip.is-selected {
		box-shadow: inset 0 0 0 1.5px #398AD6, 0 4px 0 #1F5E9C;
	}

	.chip-list[data-group="interest-cats"] {
		display: flex;
		overflow-x: auto;
		gap: 10px;
		padding-bottom: 6px;
		scroll-snap-type: x mandatory;
	}

	.chip-list[data-group="interest-cats"] .chip--tile {
		flex: 0 0 112px;
		scroll-snap-align: start;
	}
}

.wizard-notes {
	width: 100%;
	margin-top: 24px;
	padding: 14px 16px;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: #fff;
	color: var(--color-text);
	font-family: inherit;
	font-size: 0.95rem;
	resize: vertical;
}

.wizard-notes:focus {
	outline: none;
	border-color: var(--color-text);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.wizard-notes__count {
	margin: 6px 0 0;
	font-size: 0.8rem;
	color: var(--color-muted);
	text-align: right;
}

.wizard-notes__count.is-near-limit {
	color: var(--color-danger);
}

/* Meme famille visuelle que le reste du nouveau design (carte a liseret + ombre portee) plutot que
   le fond gris plat/icone ronde plate d'origine, qui ne s'alignait plus avec rien d'autre sur le
   site. Teinte rouge/corail (pas le bleu/or habituel) pour rester lisible comme une erreur. */
.wizard-error {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #FBEAE6;
	box-shadow: inset 0 0 0 1.5px #F0C4BA;
	border-radius: 16px;
	padding: 14px 18px;
	margin-top: 24px;
	color: #8A3221;
	font-weight: 600;
	animation: wizard-error-in 0.2s ease;
}

.wizard-error[hidden] {
	display: none;
}

.wizard-error::before {
	content: "!";
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #D9473A;
	color: #fff;
	font-weight: 800;
	font-size: 0.85rem;
}

@keyframes wizard-error-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes wizard-shake {
	0%, 100% {
		transform: translateX(0);
	}

	20% {
		transform: translateX(-6px);
	}

	40% {
		transform: translateX(6px);
	}

	60% {
		transform: translateX(-4px);
	}

	80% {
		transform: translateX(4px);
	}
}

.wizard-step.is-shaking {
	animation: wizard-shake 0.35s ease;
}

.wizard-footer {
	margin-top: auto;
	position: static;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
}

.wizard-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 820px;
	margin: 0 auto;
	padding: 12px 0 16px;
	border-top: 1.5px dashed #C9BFAF;
}

.wizard-nav__back {
	height: 58px;
	padding: 0 24px 0 18px;
	border: none;
	border-radius: 18px;
	background: #FFFEFC;
	color: #3D352E;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
	font: 700 16px 'Poppins', sans-serif;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.wizard-nav__back-dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #F4EEE5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wizard-nav__back:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1.5px #CDBFA8, 0 7px 0 #EFE8DD;
}

.wizard-nav__back:active {
	transform: translateY(3px);
	box-shadow: inset 0 0 0 1.5px #CDBFA8, 0 2px 0 #EFE8DD;
}

.wizard-nav__back:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 3px;
}

/* display:flex;visibility:hidden plutot que display:none : le bouton Suivant reste a sa place (pas
   de saut du bouton Suivant vers la gauche) quand Precedent est desactive (voir backBtn.disabled dans
   generator.js, etape 1). */
.wizard-nav__back:disabled {
	display: flex;
	visibility: hidden;
}

.wizard-nav__next {
	height: 58px;
	padding: 0 26px 0 30px;
	border: none;
	border-radius: 18px;
	background: #398AD6;
	color: #fff;
	box-shadow: 0 5px 0 #1F5E9C;
	font: 700 16px 'Poppins', sans-serif;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.wizard-nav__dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #F1C45E;
	color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wizard-nav__next:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 0 #1F5E9C;
}

.wizard-nav__next:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 #1F5E9C;
}

.wizard-nav__next:focus-visible {
	outline: 3px solid #F1C45E;
	outline-offset: 3px;
}

.wizard-nav__next:disabled {
	background: #F4EEE5;
	color: #A79C8F;
	box-shadow: inset 0 0 0 1.5px #E6DCCD;
	cursor: not-allowed;
	transform: none;
}

.wizard-nav__next:disabled .wizard-nav__dot {
	background: #E9E1D5;
	color: #A79C8F;
}

@media (max-width: 760px) {
	.wizard-nav__back {
		padding: 0 16px 0 14px;
	}

	.wizard-nav__next {
		flex: 1;
		justify-content: center;
	}
}

.wizard-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	padding: 56px 20px 64px;
	text-align: center;
}

.wizard-loading[hidden] {
	display: none;
}

.wizard-loading__gift {
	position: relative;
	width: 150px;
	height: 150px;
}

.wizard-loading__gift-shadow {
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 2px;
	height: 12px;
	border-radius: 50%;
	background: #EFE8DD;
	animation: wizard-loading-shadow 2.4s ease-in-out infinite;
}

.wizard-loading__gift-box {
	position: absolute;
	left: 23px;
	top: 20px;
	width: 104px;
	height: 116px;
	animation: wizard-loading-bob 2.4s ease-in-out infinite;
}

.wizard-loading__gift-lid {
	transform-origin: 50% 100%;
	animation: wizard-loading-lid 2.4s ease-in-out infinite;
}

.wizard-loading__spark {
	position: absolute;
	left: 50%;
	top: 44px;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	opacity: 0;
	animation: wizard-loading-spark 2.4s ease-out infinite;
}

.wizard-loading__spark:nth-of-type(1) {
	--dx: -52px;
	--dy: -34px;
	animation-delay: 1.7s;
}

.wizard-loading__spark:nth-of-type(2) {
	--dx: 0px;
	--dy: -56px;
	animation-delay: 1.75s;
	width: 12px;
	height: 12px;
	margin-left: -6px;
}

.wizard-loading__spark:nth-of-type(3) {
	--dx: 50px;
	--dy: -30px;
	animation-delay: 1.8s;
}

@keyframes wizard-loading-bob {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50% { transform: translateY(-10px) rotate(3deg); }
}

@keyframes wizard-loading-shadow {
	0%, 100% { transform: scaleX(1); opacity: .5; }
	50% { transform: scaleX(.75); opacity: .3; }
}

@keyframes wizard-loading-lid {
	0%, 62%, 100% { transform: translateY(0) rotate(0); }
	72% { transform: translateY(-16px) rotate(-8deg); }
	84% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes wizard-loading-spark {
	0% { transform: translate(0, 0) scale(0); opacity: 0; }
	15% { opacity: 1; }
	100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(90deg); opacity: 0; }
}

.wizard-loading__title {
	margin: 0;
	font-weight: 800;
	font-size: clamp(1.4rem, 3.4vw, 2rem);
	letter-spacing: -.025em;
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.wizard-loading__mark {
	background: linear-gradient(transparent 62%, #F1C45E 62%, #F1C45E 92%, transparent 92%);
}

.wizard-loading__dots {
	display: inline-flex;
	gap: 5px;
}

.wizard-loading__dots i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #398AD6;
	animation: wizard-loading-dot 1.2s ease-in-out infinite;
}

.wizard-loading__dots i:nth-child(2) {
	animation-delay: .15s;
	background: #F1C45E;
}

.wizard-loading__dots i:nth-child(3) {
	animation-delay: .3s;
	background: #DE9C31;
}

@keyframes wizard-loading-dot {
	0%, 80%, 100% { transform: scale(.6); opacity: .35; }
	40% { transform: scale(1); opacity: 1; }
}

.wizard-loading__step {
	margin: -8px 0 0;
	min-height: 26px;
	font-size: 15px;
	color: var(--color-muted);
	animation: wizard-loading-fade .4s ease;
}

@keyframes wizard-loading-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

.wizard-loading__recap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}

.wizard-loading__recap-title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.wizard-recap--loading {
	justify-content: center;
	max-width: 760px;
	margin: 0 auto;
}

.wizard-recap-tag {
	height: 42px;
	padding: 0 16px;
	border-radius: var(--radius-pill);
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 4px 0 #EFE8DD;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text);
}

.wizard-recap-tag b {
	font-weight: 600;
	color: var(--color-muted);
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.wizard-loading__gift-box,
	.wizard-loading__gift-lid,
	.wizard-loading__gift-shadow,
	.wizard-loading__spark,
	.wizard-loading__dots i {
		animation: none;
	}

	.wizard-loading__spark {
		display: none;
	}
}

@media (max-width: 760px) {
	.wizard-loading {
		padding: 40px 20px 48px;
	}

	.wizard-loading__gift {
		transform: scale(.85);
	}
}

.eraika-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 28px 0 20px;
}

.eraika-header__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Masquer seulement .eraika-header__text (voir wishlist-page.js) ne suffit pas : .eraika-header garde
   son propre padding (28px/20px) meme enfant cache, contrairement a .history__head (search-history.html)
   qui disparait entierement avec son contenu - d'ou l'ecart de marge remonte. .eraika-header[hidden]
   ci-dessous regle ca en cachant tout le bandeau, pas seulement le texte. */
.eraika-header[hidden] {
	display: none;
}

/* Meme police/taille que .explore__title/.history__title/.eraika-header__title sur "Mes idees" (voir
   wishlist.html) : utilisee ici aussi par le titre "Vos idees cadeaux" des resultats du generateur,
   pour que tous les libelles de ce type restent uniformes sur le site. */
.eraika-header__title {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: clamp(22px, 2.6vw, 30px);
	letter-spacing: -0.02em;
	color: #221E1A;
}

.eraika-header__meta {
	margin: 0;
	font-family: 'Instrument Sans', system-ui, sans-serif;
	font-size: 16px;
	color: #6B635A;
}

/* Liste complete des criteres d'une recherche partagee, sous le H1 raccourci (voir
   generator-results.html/GeneratorController.sharedResults). */
/* Pas de max-width (contrairement a .hero__text/.legal-content) : c'est une liste de criteres
   separes par des virgules, pas du texte continu - un retour a la ligne force au milieu de la liste
   est plus genant qu'une ligne large, voir la discussion qui a mene a ce choix. */
.eraika-header__subtitle {
	margin: 0;
	font-family: 'Instrument Sans', system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #776F67;
}

.wishlist-ideas {
	font-family: 'Instrument Sans', system-ui, sans-serif;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Bandeau masque (liste vide, voir wishlist-page.js) : .results ne garde alors que ses 8px de
   padding-top (les 28px habituels venaient du padding de .eraika-header, disparu avec lui) - on les
   restitue ici pour retrouver les memes 36px jusqu'au contenu que .history sur la page Historique
   (36px de padding fixe, non reparti entre deux elements). */
.eraika-header[hidden] + .wishlist-ideas {
	margin-top: 28px;
}

.wishlist-ideas [hidden],
.eraika-header [hidden] {
	display: none !important;
}

.wishlist-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
}

.wishlist-seg {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: #F4EFE8;
	border-radius: var(--radius-pill);
}

.wishlist-seg button {
	border: none;
	cursor: pointer;
	height: 38px;
	padding: 0 16px;
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	background: transparent;
	color: #6B635A;
}

.wishlist-seg button[aria-pressed="true"] {
	background: #fff;
	color: #221E1A;
	box-shadow: 0 1px 3px rgba(34, 30, 26, 0.12);
}

.wishlist-ico {
	display: grid;
	gap: 2px;
	width: 14px;
}

.wishlist-ico span {
	height: 6px;
	border-radius: 1.5px;
	background: currentColor;
}

.wishlist-ico--grid {
	grid-template-columns: 1fr 1fr;
}

.wishlist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 36px 24px;
}

.wishlist-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.wishlist-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 20px;
	background: #F4EFE8;
	overflow: hidden;
}

.wishlist-card__media a {
	display: block;
	width: 100%;
	height: 100%;
}

.wishlist-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	padding: 12%;
	box-sizing: border-box;
}

.wishlist-no-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #776F67;
	font-size: 0.85rem;
	text-align: center;
	padding: 12%;
	box-sizing: border-box;
}

.wishlist-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 2px;
}

.wishlist-shop {
	font-size: 13px;
	color: #776F67;
}

.wishlist-card__name {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	color: #221E1A;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wishlist-price {
	font-size: 18px;
	font-weight: 700;
	color: #221E1A;
}

.wishlist-remove {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.92);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	color: #221E1A;
	box-shadow: 0 1px 3px rgba(34, 30, 26, 0.12);
}

.wishlist-remove:hover {
	background: #221E1A;
	color: #fff;
}

.wishlist-card .wishlist-remove {
	position: absolute;
	top: 12px;
	right: 12px;
}

/* Coeur "Ajouter a mes idees" (resultats du generateur, voir results-panel.js) : meme emplacement
   que .wishlist-remove ci-dessus - les deux ne coexistent jamais sur une meme carte (retirer sur
   "Mes idees", ajouter/basculer sur les resultats). */
.wishlist-card .save {
	position: absolute;
	top: 12px;
	right: 12px;
}

.wishlist-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #EDE6DC;
}

.wishlist-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	padding: 18px 0;
	border-bottom: 1px solid #EDE6DC;
}

.wishlist-row__media {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	border-radius: 16px;
	background: #F4EFE8;
	overflow: hidden;
}

.wishlist-row__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	padding: 10%;
	box-sizing: border-box;
}

.wishlist-row__info {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wishlist-row__name {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.35;
	color: #221E1A;
	text-decoration: none;
}

.wishlist-row .wishlist-price {
	font-size: 20px;
	min-width: 90px;
	text-align: right;
}

.wishlist-row__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wishlist-btn {
	height: 42px;
	padding: 0 18px;
	border-radius: var(--radius-pill);
	background: #221E1A;
	color: #fff;
	display: flex;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.wishlist-btn:hover {
	background: oklch(0.55 0.14 250);
	color: #fff;
}

.wishlist-row .wishlist-remove {
	width: 42px;
	height: 42px;
	border: 1px solid #E4DDD3;
	background: #fff;
	box-shadow: none;
}

.wishlist-row .wishlist-remove:hover {
	background: #F4EFE8;
	color: #221E1A;
}

/* Meme design que .history .empty (voir search-history.html) : etoiles decoratives, medaillon icone,
   titre avec mot-cle surligne, CTA bleu a pastille. Ici en inline dans front.css (pas de <style> propre
   a wishlist.html, contrairement a search-history.html) - voir .wishlist-empty__star/__medal/__mark et
   .wishlist-cta ci-dessous. */
.wishlist-empty {
	position: relative;
	overflow: hidden;
	padding: 72px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
}

.wishlist-empty[hidden] {
	display: none;
}

.wishlist-empty__star {
	position: absolute;
	pointer-events: none;
}

.wishlist-empty__medal {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #F1C45E;
	box-shadow: 0 8px 0 #DE9C31;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wishlist-empty h2 {
	position: relative;
	margin: 8px 0 0;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(26px, 3.4vw, 34px);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: #221E1A;
}

.wishlist-empty__mark {
	background: linear-gradient(transparent 62%, #F1C45E 62%, #F1C45E 92%, transparent 92%);
}

.wishlist-empty p {
	position: relative;
	margin: 0;
	max-width: 460px;
	font-size: 17px;
	line-height: 1.6;
	color: #6B6157;
	text-wrap: pretty;
}

.wishlist-cta {
	position: relative;
	margin-top: 6px;
	height: 58px;
	padding: 0 26px 0 30px;
	border-radius: 18px;
	background: #398AD6;
	box-shadow: 0 5px 0 #1F5E9C;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.wishlist-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 0 #1F5E9C;
	color: #fff;
}

.wishlist-cta:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 #1F5E9C;
}

.wishlist-cta:focus-visible {
	outline: 3px solid #F1C45E;
	outline-offset: 3px;
}

.wishlist-cta__dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #F1C45E;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 760px) {
	.wishlist-empty {
		padding: 48px 8px;
	}

	.wishlist-empty__star:nth-of-type(n + 4) {
		display: none;
	}

	.wishlist-empty__medal {
		width: 96px;
		height: 96px;
	}
}

/* En-tete "Mes idees" : titre avec mot-cle surligne, compteur en pastille - meme famille visuelle que
   .history sur Historique. Tout ici est scope sous .wishlist-page : .eraika-header/.wishlist-toolbar/
   .wishlist-seg/.wishlist-grid/.wishlist-card sont partages avec generator-results.html/generator.html/
   gift-reference-detail.html, qui ne doivent pas changer d'aspect. */
.wishlist-head__txt {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wishlist-head__title {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: #221E1A;
}

.wishlist-head__mark {
	background: linear-gradient(transparent 62%, #F1C45E 62%, #F1C45E 92%, transparent 92%);
}

.wishlist-head__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: #6B6157;
}

.wishlist-head__meta-count {
	height: 30px;
	padding: 0 12px;
	border-radius: var(--radius-pill);
	background: #FBF3DF;
	color: #8A5A12;
	font-weight: 700;
	display: flex;
	align-items: center;
}

/* Pilules de tri/affichage en input[type=radio] natif (voir wishlist.html) plutot que les boutons
   aria-pressed utilises par generator-results.html/generator.html : scope sous .wishlist-page pour ne
   pas affecter leur propre barre d'outils, qui garde .wishlist-seg button[aria-pressed] tel quel. */
.wishlist-page .wishlist-seg {
	padding: 5px;
	background: #FEFCF8;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 4px 0 #EFE8DD;
}

.wishlist-page .wishlist-seg label {
	cursor: pointer;
}

.wishlist-page .wishlist-seg input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.wishlist-page .wishlist-seg span {
	height: 40px;
	padding: 0 16px;
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #6B6157;
}

.wishlist-page .wishlist-seg label:hover span {
	color: #111;
}

.wishlist-page .wishlist-seg input:checked + span {
	background: #398AD6 !important;
	color: #fff !important;
}

/* Affichage (Grille/Liste) a un <span> imbrique pour le libelle, a cote du svg d'icone (necessaire
   pour le binding th:text) : ce span interieur correspond aussi a la regle de base ".wishlist-seg
   span" (selecteur descendant, matche a tous les niveaux), qui reprend donc la main sur le blanc
   hérité du span parent coche - d'ou "Grille"/"Liste" restes gris alors que "Trier" (pas de span
   imbriqué) fonctionnait deja. */
.wishlist-page .wishlist-seg input:checked + span span {
	color: #fff !important;
}

.wishlist-page .wishlist-seg input:focus-visible + span {
	outline: 3px solid #398AD6;
	outline-offset: 2px;
}

.wishlist-page .wishlist-grid {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
}

.wishlist-page .wishlist-card {
	gap: 0;
	border-radius: 24px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
	overflow: hidden;
	transition: transform 0.15s ease;
}

.wishlist-page .wishlist-card:hover {
	transform: translateY(-3px);
}

.wishlist-page .wishlist-card .wishlist-card__media {
	aspect-ratio: 1;
	margin: 8px 8px 0;
	border-radius: 18px;
	background: #F7F2EA;
}

.wishlist-page .wishlist-card .wishlist-card__media img {
	width: 78%;
	height: 78%;
	padding: 0;
	margin: 11%;
}

.wishlist-page .wishlist-card .wishlist-remove {
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	box-shadow: 0 2px 6px rgba(61, 53, 46, 0.12);
}

.wishlist-page .wishlist-card .wishlist-remove:hover {
	background: #fff;
	color: #B4552E;
}

.wishlist-page .wishlist-card__body {
	flex: 1;
	padding: 16px 18px 18px;
}

.wishlist-page .wishlist-card__name {
	margin: 4px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: #111;
}

/* margin-top:auto pousse le prix en bas de la carte (hauteur variable selon que le titre fait 1 ou 2
   lignes) sans avoir besoin d'un conteneur "pied de carte" dedie, puisqu'il n'y a plus de bouton a cote
   de lui (marchand/"voir l'offre" volontairement absents ici, voir wishlist-page.js). */
/* .wishlist-card (3 classes) plutot que .wishlist-page .wishlist-price (2 classes) : cette derniere
   avait exactement la meme specificite que .wishlist-row .wishlist-price (2 classes aussi, regle
   existante pour la vue liste) et la emportait juste parce que definie plus bas dans le fichier -
   margin-top:auto se retrouvait ainsi injecte dans .wishlist-row (flex row), desalignant le prix de
   la vue liste au lieu de ne toucher que la carte grille. */
.wishlist-page .wishlist-card .wishlist-price {
	margin-top: auto;
	padding-top: 12px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #111;
}

/* Vue liste : aucun gabarit fourni pour elle, mais le bouton noir/rectangulaire d'origine (partage
   avec generator-results.html/generator.html, non touche) jurait a cote du reste de cette page
   desormais bleu/arrondi - reskin coherent, scope sous .wishlist-page comme le reste. */
.wishlist-page .wishlist-btn {
	border-radius: 14px;
	background: #398AD6;
	box-shadow: 0 4px 0 #1F5E9C;
	font-weight: 700;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.wishlist-page .wishlist-btn:hover {
	background: #398AD6;
	transform: translateY(-2px);
	box-shadow: 0 6px 0 #1F5E9C;
}

.wishlist-page .wishlist-row .wishlist-remove {
	box-shadow: inset 0 0 0 1.5px #DDD0BC;
}

@media (max-width: 760px) {
	.wishlist-page .wishlist-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

/* Resultats du generateur (generator-results.html, visite directe/partagee, et generator.html, reveal
   en direct a la fin du wizard) : meme identite visuelle que "Mes idees" ci-dessus (pilules de tri/vue
   en radio natif, cartes grille arrondies), reprise ici sous #wizard-results plutot que .wishlist-page
   puisque les deux pages partagent le meme id/les memes ids enfants (voir results-panel.js, module
   commun aux deux templates) - une seule regle CSS s'applique donc naturellement aux deux. */
#wizard-results .eraika-header {
	position: relative;
}

#wizard-results .wishlist-seg {
	padding: 5px;
	background: #FEFCF8;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 4px 0 #EFE8DD;
}

#wizard-results .wishlist-seg label {
	cursor: pointer;
}

#wizard-results .wishlist-seg input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

#wizard-results .wishlist-seg span {
	height: 40px;
	padding: 0 16px;
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #6B6157;
}

#wizard-results .wishlist-seg label:hover span {
	color: #111;
}

#wizard-results .wishlist-seg input:checked + span {
	background: #398AD6 !important;
	color: #fff !important;
}

/* Voir le commentaire equivalent plus haut (.wishlist-page .wishlist-seg input:checked + span span) :
   meme imbrication svg + span pour Grille/Liste, meme correctif necessaire. */
#wizard-results .wishlist-seg input:checked + span span {
	color: #fff !important;
}

#wizard-results .wishlist-seg input:focus-visible + span {
	outline: 3px solid #398AD6;
	outline-offset: 2px;
}

#wizard-results .wishlist-grid {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 24px;
}

#wizard-results .wishlist-card {
	gap: 0;
	border-radius: 24px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
	overflow: hidden;
	transition: transform 0.15s ease;
}

#wizard-results .wishlist-card:hover {
	transform: translateY(-3px);
}

#wizard-results .wishlist-card .wishlist-card__media {
	aspect-ratio: 1;
	margin: 8px 8px 0;
	border-radius: 18px;
	background: #F7F2EA;
}

#wizard-results .wishlist-card .wishlist-card__media img {
	width: 78%;
	height: 78%;
	padding: 0;
	margin: 11%;
}

#wizard-results .wishlist-card__body {
	flex: 1;
	padding: 16px 18px 18px;
}

#wizard-results .wishlist-card__name {
	margin: 4px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: #111;
}

/* 3 classes (.wishlist-card .wishlist-price), pas 2 (#wizard-results .wishlist-price) : meme piege de
   specificite qu'en commentaire plus haut pour .wishlist-page, la regle a 2 classes seule serait a
   egalite avec .wishlist-row .wishlist-price (vue liste) et risquerait de l'emporter par ordre. */
#wizard-results .wishlist-card .wishlist-price {
	margin-top: auto;
	padding-top: 12px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #111;
}

#wizard-results .wishlist-btn {
	border-radius: 14px;
	background: #398AD6;
	box-shadow: 0 4px 0 #1F5E9C;
	font-weight: 700;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#wizard-results .wishlist-btn:hover {
	background: #398AD6;
	transform: translateY(-2px);
	box-shadow: 0 6px 0 #1F5E9C;
}

#wizard-results .wishlist-row .wishlist-remove {
	box-shadow: inset 0 0 0 1.5px #DDD0BC;
}

@media (max-width: 760px) {
	#wizard-results .wishlist-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

.wishlist-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 12px 12px 12px 20px;
	background: #221E1A;
	color: #fff;
	border-radius: var(--radius-pill);
	font-size: 15px;
	font-family: 'Instrument Sans', system-ui, sans-serif;
	box-shadow: 0 10px 30px rgba(34, 30, 26, 0.25);
	z-index: 50;
}

.wishlist-toast[hidden] {
	display: none;
}

.wishlist-toast button {
	border: none;
	cursor: pointer;
	background: #fff;
	color: #221E1A;
	border-radius: var(--radius-pill);
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
}

@media (max-width: 768px) {
	/* Horizontal aligne sur .site-header__inner, qui ne change qu'a 600px (voir plus bas) : entre 600
	   et 768px le header est encore a 40px, .hero doit donc y rester aussi. */
	.hero {
		padding: 48px 40px 32px;
		gap: 22px;
	}

	.hero__btn {
		width: 100%;
		max-width: 420px;
		padding: 0 18px;
		justify-content: center;
	}

	/* Sous ce seuil, le groupe de tri (3 boutons) est plus large que la carte (elle-meme decoupee par
	   overflow:hidden) : sans ce retrecissement, les derniers boutons deviennent invisibles. */
	.wishlist-toolbar,
	.results__toolbar {
		gap: 8px;
	}

	.wishlist-seg {
		gap: 2px;
	}

	/* .wishlist-seg button ne correspond plus a rien depuis le passage aux input[type=radio] + span
	   (voir wishlist.html/generator.html/generator-results.html) : ce retrecissement mobile ne
	   s'appliquait donc plus du tout, les pilules Trier/Grille-Liste gardant leur taille desktop et
	   debordant sur 2 lignes au lieu de tenir cote a cote. */
	.wishlist-page .wishlist-seg span,
	#wizard-results .wishlist-seg span {
		height: 34px;
		padding: 0 10px;
		gap: 4px;
		font-size: 12.5px;
	}

	/* Meme avec ce retrecissement, les groupes Trier (3 pilules) et Affichage (2 pilules) ne tiennent
	   pas cote a cote sur un ecran etroit et retombent sur 2 lignes - acceptable en soi, mais le
	   libelle texte de Grille/Liste (seul groupe avec une icone, voir le <span> imbrique dans
	   wishlist.html/generator.html/generator-results.html) n'apporte pas grand-chose a cote de son
	   icone deja parlante : le masquer visuellement (toujours lu par un lecteur d'ecran) rend ce
	   groupe bien plus etroit. */
	.wishlist-page .wishlist-seg span span,
	#wizard-results .wishlist-seg span span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.eraika-header {
		padding: 12px 0 16px;
	}

	/* 8px (.results) + 24px ici = 32px jusqu'au titre, identique a .history sur la page Historique
	   (padding:32px fixe, voir search-history.html) - la reduction generale ci-dessus (8+12=20px) ne
	   suffisait pas a retrouver cet ecart precis. Scope a .wishlist-page pour ne pas changer celui des
	   resultats du generateur, qui partagent la meme .eraika-header. */
	.wishlist-page .eraika-header {
		padding-top: 24px;
	}

	/* Meme correctif que .wishlist-page juste au-dessus, pour la page de resultats du generateur
	   (id plutot que classe : #wizard-results est directement sur l'element .results concerne). */
	#wizard-results {
		padding-top: 8px;
	}

	#wizard-results .eraika-header {
		padding-top: 24px;
	}

	.eraika-header__title {
		font-size: 30px;
	}

	.eraika-header__meta {
		font-size: 15px;
	}
}

/* Results */
/* Pas de padding horizontal ici : le <div class="container"> systematiquement imbrique a
   l'interieur (voir wishlist.html/generator.html) fournit deja le meme espacement gauche/droite
   que le header (voir .container/--container-width) - en ajouter un ici le cumulerait avec celui
   du container et decalerait le contenu par rapport au header. */
/* 8px + le padding-top propre a .eraika-header (28px, voir plus bas) totalisent 36px jusqu'au titre -
   aligne sur .explore__in/.history (meme reduction, voir explore.html/search-history.html). */
.results {
	padding: 8px 0 80px;
	background: var(--color-bg);
	min-height: 60vh;
	box-sizing: border-box;
}

/* Page "Mes idées" (wishlist.html) : vh-100 (moins le header) plutot que les 60vh generiques
   ci-dessus, sans quoi une liste vide (juste .wishlist-empty) laisse le footer du site remonter juste
   en dessous - memes raisons/meme motif vh/dvh que .history dans search-history.html. Scope a
   .wishlist-page specifiquement : generator-results.html, qui partage .results, n'est pas concerne. */
.results.wishlist-page {
	min-height: calc(100vh - var(--header-height));
	min-height: calc(100dvh - var(--header-height));
}

.results__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 24px;
}

/* Partage + Nouvelle recherche colles l'un a l'autre (gap reduit), le groupe restant lui-meme a
   l'extremite droite de .results__toolbar (deja flex-end) - distinct du gap de 10px entre les
   groupes tri/vue a gauche. */
.results__actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Bloc de notation en bas des resultats du generateur (voir generator.html/generator.js) : seule la
   personne ayant genere la recherche peut envoyer une note, verifie cote serveur (IP). Classes
   prefixees "rating-" pour ne pas entrer en collision avec .chip/.btn/.group deja utilises ailleurs
   sur le site (voir .chip-list plus haut, .btn dans admin-shell.css). */
/* Meme famille visuelle que le reste du site redessine cette session (etoiles decoratives, titre
   surligne, cartes cremes a ombre portee, bleu/or) - voir le gabarit fourni. */
.rating-block {
	position: relative;
	overflow: hidden;
	max-width: 1200px;
	margin: 48px auto 0;
	padding: 40px 44px 36px;
	border-radius: 28px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 6px 0 #EFE8DD;
	box-sizing: border-box;
}

.rating-block[hidden] {
	display: none;
}

.rating-block__star {
	position: absolute;
	pointer-events: none;
}

.rating-form {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* [hidden] seul (display:none de l'agent utilisateur) perd toujours face a un display:flex/grid/block
   pose par l'auteur sur le meme element, quelle que soit la specificite : deja vu sur .wizard/
   .contact .form/.partner .form dans ce projet, meme fix ici. */
.rating-form[hidden] {
	display: none;
}

.rating-form__top {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px 40px;
	padding-bottom: 28px;
	border-bottom: 1.5px dashed #C9BFAF;
}

.rating-form__intro {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 460px;
}

.rating-form__intro h2 {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: clamp(26px, 3.4vw, 36px);
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: #111;
}

.rating-form__mark {
	background: linear-gradient(transparent 62%, #F1C45E 62%, #F1C45E 92%, transparent 92%);
}

.rating-form__intro p {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: #6B6157;
}

.rating-widget {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.rating-stars {
	display: flex;
	gap: 6px;
}

.rating-star {
	appearance: none;
	cursor: pointer;
	width: 54px;
	height: 54px;
	border: none;
	border-radius: 16px;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.12s ease, background 0.12s ease;
}

.rating-star:hover {
	transform: translateY(-2px) scale(1.06);
}

.rating-star svg path {
	fill: #FFFEFC;
	stroke: #CDBFA8;
	stroke-width: 1.8;
	stroke-linejoin: round;
	transition: fill 0.12s ease, stroke 0.12s ease;
}

.rating-star.is-on svg path {
	fill: #F1C45E;
	stroke: #C9952A;
}

.rating-star:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 2px;
}

.rating-label {
	min-height: 20px;
	font-size: 14px;
	font-weight: 700;
	color: #6B6157;
}

.rating-label.is-set {
	color: #8A5A12;
}

.rating-form__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.rating-group {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rating-group__title {
	font-size: 17px;
	font-weight: 700;
	color: #111;
}

.rating-group__optional {
	margin-left: -4px;
	font-size: 14px;
	font-weight: 500;
	color: #6B6157;
}

.rating-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.rating-tag {
	appearance: none;
	cursor: pointer;
	min-height: 46px;
	padding: 10px 18px 10px 14px;
	border-radius: 999px;
	border: none;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 4px 0 #EFE8DD;
	color: #3D352E;
	font-size: 15px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: transform 0.12s ease;
}

.rating-tag:hover {
	transform: translateY(-1px);
}

.rating-tag__check {
	display: none;
}

.rating-tag[aria-pressed="true"] {
	background: #F1C45E;
	box-shadow: 0 5px 0 #DE9C31;
	color: #111;
}

.rating-tag[aria-pressed="true"] .rating-tag__plus {
	display: none;
}

.rating-tag[aria-pressed="true"] .rating-tag__check {
	display: block;
}

.rating-tag:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 3px;
}

.rating-comment {
	min-height: 120px;
	box-sizing: border-box;
	padding: 16px 18px;
	border: none;
	border-radius: 18px;
	background: #fff;
	box-shadow: inset 0 0 0 1.5px #DDD0BC;
	color: #111;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.55;
	resize: vertical;
	outline: none;
	width: 100%;
}

.rating-comment::placeholder {
	color: #B3A797;
}

.rating-comment:focus {
	box-shadow: inset 0 0 0 2px #398AD6, 0 0 0 4px #EAF3FC;
}

.rating-error {
	margin: 0;
	font-size: 13px;
	color: #D9473A;
	font-weight: 600;
}

.rating-error[hidden] {
	display: none;
}

.rating-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
	border-top: 1.5px dashed #C9BFAF;
}

.rating-hint {
	font-size: 14px;
	color: #6B6157;
}

.rating-submit {
	appearance: none;
	cursor: pointer;
	height: 58px;
	padding: 0 28px;
	border: none;
	border-radius: 18px;
	background: #398AD6;
	color: #fff;
	box-shadow: 0 5px 0 #1F5E9C;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.rating-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 0 #1F5E9C;
}

.rating-submit:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 #1F5E9C;
}

.rating-submit:focus-visible {
	outline: 3px solid #F1C45E;
	outline-offset: 3px;
}

.rating-submit:disabled {
	background: #F4EEE5;
	color: #A79C8F;
	box-shadow: inset 0 0 0 1.5px #E6DCCD;
	cursor: not-allowed;
	transform: none;
}

.rating-sent {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
}

.rating-sent[hidden] {
	display: none;
}

.rating-sent__main {
	display: flex;
	align-items: center;
	gap: 18px;
}

.rating-sent__ico {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #F1C45E;
	box-shadow: 0 4px 0 #DE9C31;
	color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rating-sent__main h2 {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 26px;
	letter-spacing: -0.02em;
	color: #111;
}

.rating-refine {
	appearance: none;
	cursor: pointer;
	height: 54px;
	padding: 0 26px;
	border: none;
	border-radius: 16px;
	background: #398AD6;
	color: #fff;
	box-shadow: 0 5px 0 #1F5E9C;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.rating-refine:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 0 #1F5E9C;
	color: #fff;
}

.rating-refine:focus-visible {
	outline: 3px solid #F1C45E;
	outline-offset: 3px;
}

.rating-refine[hidden] {
	display: none;
}

/* Recapitulatif d'un avis deja donne (remplace le formulaire, voir generator.js#showRatingBlock).
   Grille 3 colonnes (note | detail | bouton Modifier) qui repasse en 1 colonne en mobile. */
/* Recapitulatif d'un avis deja donne (remplace le formulaire, voir generator.js#showRatingBlock).
   Grille 3 colonnes (note | detail | bouton Modifier) qui repasse en 1 colonne en mobile. */
.rating-summary {
	position: relative;
	max-width: 1200px;
	margin: 48px auto 0;
	padding: 28px 32px;
	border-radius: 28px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 6px 0 #EFE8DD;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 20px 32px;
	align-items: center;
	box-sizing: border-box;
}

.rating-summary[hidden] {
	display: none;
}

.rating-summary__score {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-right: 32px;
	border-right: 1.5px dashed #C9BFAF;
}

.rating-summary__num {
	font-size: 44px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #111;
}

.rating-summary__num small {
	font-size: 18px;
	font-weight: 600;
	color: #6B6157;
}

.rating-summary__side {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rating-summary__stars {
	display: flex;
	gap: 3px;
}

.rating-summary__stars svg path {
	fill: #FFFEFC;
	stroke: #CDBFA8;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

.rating-summary__stars svg.is-on path {
	fill: #F1C45E;
	stroke: #C9952A;
}

.rating-summary__label {
	font-size: 14px;
	font-weight: 700;
	color: #8A5A12;
}

.rating-summary__detail {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rating-summary__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

.rating-summary__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: #111;
}

.rating-summary__date {
	font-size: 13px;
	color: #6B6157;
}

.rating-summary__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rating-summary__tags:empty {
	display: none;
}

.rating-summary__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: #FBF6EE;
	box-shadow: inset 0 0 0 1.5px #DDD0BC;
	font-size: 13px;
	font-weight: 600;
	color: #3D352E;
}

.rating-summary__tag::before {
	content: '✓';
	font-size: 12px;
	font-weight: 700;
	color: #1F5E9C;
}

.rating-summary__tag--neg::before {
	content: '–';
	color: #B4552E;
}

.rating-summary__quote {
	margin: 0;
	padding-left: 14px;
	border-left: 3px solid #DDD0BC;
	font-size: 15px;
	line-height: 1.55;
	color: #4A4038;
	font-style: italic;
}

.rating-summary__quote:empty {
	display: none;
}

.rating-summary__edit {
	cursor: pointer;
	align-self: start;
	height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	border: none;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 4px 0 #EFE8DD;
	font-size: 14px;
	font-weight: 600;
	color: #3D352E;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	transition: transform 0.12s ease;
}

.rating-summary__edit:hover {
	transform: translateY(-1px);
	color: #111;
}

.rating-summary__edit:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 2px;
}

@media (max-width: 720px) {
	.rating-summary {
		grid-template-columns: 1fr;
		padding: 24px 20px;
	}

	.rating-summary__score {
		padding-right: 0;
		padding-bottom: 20px;
		border-right: none;
		border-bottom: 1.5px dashed #C9BFAF;
	}

	.rating-summary__edit {
		justify-self: start;
	}
}

@media (max-width: 640px) {
	.rating-block {
		padding: 28px 20px 24px;
		border-radius: 22px;
	}

	.rating-block__star {
		display: none;
	}

	.rating-widget {
		width: 100%;
		align-items: flex-start;
	}

	.rating-star {
		width: 46px;
		height: 46px;
	}

	.rating-form__foot .rating-submit {
		width: 100%;
		justify-content: space-between;
	}

	/* Meme motif que .chip-list[data-group="budget-pills"] dans le wizard : en flex-wrap, chaque
	   pilule garde la largeur de son propre texte ("Trop chères" plus etroite que "Pas assez
	   originales"), qui ne s'aligne plus en colonnes nettes une fois repliee sur un ecran etroit. Pas
	   de risque de conflit avec .chip-list--scroll ici (systeme propre au wizard, inutilise par
	   .rating-tags), contrairement au correctif du wizard qui devait aussi neutraliser ces proprietes.
	   Pas de justify-content:center (contrairement aux prix) : ces puces ont une icone +/coche devant
	   le libelle, un contenu cale a gauche reste plus lisible qu'un bloc icone+texte centre - meme
	   raisonnement que pour les puces d'interets du wizard. */
	.rating-tags {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Product detail page */
/* Pas de padding horizontal ici : le <div class="container"> imbrique fournit deja le meme
   espacement gauche/droite que le header (voir .container/--container-width), meme raison que
   .results plus haut. */
.product-detail {
	padding: 40px 0 80px;
}

/* margin-bottom : la colonne image (carree) est souvent plus haute que la colonne contenu - sans
   cette marge, la bordure pointillee de .product-detail__desc juste apres se retrouve collee au bas
   de l'image plutot qu'au bas du contenu texte. */
.product-detail__inner {
	display: grid;
	grid-template-columns: minmax(280px, 1.05fr) minmax(280px, 1fr);
	gap: 56px;
	align-items: start;
	margin-top: 12px;
	margin-bottom: 40px;
}

/* Media produit : meme famille visuelle que .wishlist-card__media (fond creme, coins arrondis,
   image centree par flex plutot que padding), etoiles decoratives en plus (voir .product-detail__star
   ci-dessous), aria-hidden, aucun impact SEO/a11y. */
/* Meme encadre (liseret + ombre portee) que .hero__photo-card sur la home : coherent avec le reste
   du nouveau design, qui fait systematiquement ressortir ses visuels du fond blanc. */
.product-detail__image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 28px;
	overflow: hidden;
	background: #F7F2EA;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 6px 0 #EFE8DD;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-detail__image img {
	width: 76%;
	height: 76%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.product-detail__star {
	position: absolute;
	pointer-events: none;
}

.product-detail__no-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--color-muted);
}

.product-detail__content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-top: 8px;
}

.product-detail__category {
	align-self: flex-start;
	height: 32px;
	padding: 0 14px;
	border-radius: var(--radius-pill);
	background: #E3EEFB;
	color: #1F5E9C;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
}

.product-detail__title {
	margin: 0;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.product-detail__source {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: #6B6157;
}

.product-detail__source strong {
	color: #111;
	font-weight: 700;
}

.product-detail__buybox {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border-radius: 24px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
}

.product-detail__price-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.product-detail__price {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.product-detail__price-note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #6B6157;
}

.product-detail__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.product-detail__buy {
	flex: 1;
	min-width: 220px;
	height: 60px;
	padding: 0 10px 0 26px;
	border-radius: 18px;
	background: #398AD6;
	box-shadow: 0 5px 0 #1F5E9C;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.product-detail__buy:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 0 #1F5E9C;
	color: #fff;
}

.product-detail__buy:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 #1F5E9C;
}

.product-detail__buy:focus-visible,
.product-detail__save:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 3px;
}

.product-detail__buy-dot {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #F1C45E;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Bascule liste de souhaits : aria-pressed (etat natif) plutot qu'une classe is-added + reecriture du
   texte (voir le script en bas de gift-reference-detail.html) - les deux libelles existent deja dans
   le markup (.is-on/.is-off), bascules ici par CSS. */
.product-detail__save {
	height: 60px;
	padding: 0 22px 0 16px;
	border: none;
	border-radius: 18px;
	background: #FFFEFC;
	color: #3D352E;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
	font: 700 15px 'Poppins', sans-serif;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: transform 0.12s ease, background 0.12s ease;
}

.product-detail__save:hover {
	transform: translateY(-2px);
}

.product-detail__save-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #F4EEE5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-detail__save-icon path {
	fill: none;
	stroke: #3D352E;
}

.product-detail__save[aria-pressed="true"] {
	background: #F1C45E;
	color: #111;
	box-shadow: 0 5px 0 #DE9C31;
}

.product-detail__save[aria-pressed="true"] .product-detail__save-icon {
	background: #fff;
}

.product-detail__save[aria-pressed="true"] .product-detail__save-icon path {
	fill: #D9473A;
	stroke: #D9473A;
}

.product-detail__save .is-on,
.product-detail__save[aria-pressed="true"] .is-off {
	display: none;
}

.product-detail__save[aria-pressed="true"] .is-on {
	display: inline;
}

.product-detail__hint {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 1.55;
	color: #6B6157;
}

.product-detail__hint-icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #FBF3DF;
	color: #B07A1E;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-detail__divider {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: 24px 0;
}

.product-detail__desc {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-top: 40px;
	border-top: 1.5px dashed #C9BFAF;
}

.product-detail__desc-title {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.product-detail__desc-mark {
	background: linear-gradient(transparent 62%, #F1C45E 62%, #F1C45E 92%, transparent 92%);
}

.product-detail__desc-box {
	padding: 28px 32px;
	border-radius: 24px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #EEE4D3;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.product-detail__desc-box p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: #4A4038;
	white-space: pre-line;
}

/* Repli purement visuel (voir le script en bas de gift-reference-detail.html) : le texte complet
   reste toujours dans le DOM (SEO/lecteurs d'ecran/sans JS), seul le rendu visuel est tronque. */
.product-detail__desc-box.is-collapsed {
	max-height: 260px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 70%, transparent);
	mask-image: linear-gradient(#000 70%, transparent);
}

.product-detail__desc-more {
	align-self: flex-start;
	height: 44px;
	padding: 0 4px;
	border: none;
	background: transparent;
	font: 700 15px 'Poppins', sans-serif;
	color: #398AD6;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* .product-detail__desc-more (display:flex, 1 classe) passerait sinon devant .button[hidden] ou le
   [hidden] natif de l'agent utilisateur selon le cas : meme piege [hidden] vs display d'auteur deja
   rencontre plusieurs fois sur ce projet. */
.product-detail__desc-more[hidden] {
	display: none;
}

/* Toujours utilisees par le titre/sous-titre de la section "Completez le cadeau" (complements),
   hors perimetre du nouveau gabarit fourni pour cette page - inchangees. */
.product-detail__description-title {
	font-size: 1.1rem;
	margin: 0 0 8px;
}

.product-detail__description {
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0;
	white-space: pre-line;
}

/* .wishlist-grid seul n'a pas de marge haute (voir plus haut) : correct quand c'est le premier
   element d'une section, mais pas ici ou elle suit directement le sous-titre "Completez le cadeau". */
.product-detail__complements-grid {
	margin-top: 24px;
}

.product-detail__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

/* Bouton icone rond + info-bulle de partage : partages entre la fiche produit et les resultats du
   generateur (voir #results-toolbar dans generator.html). */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--color-border);
	background: #fff;
	color: var(--color-text);
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.icon-btn:hover {
	border-color: var(--color-text);
}

.icon-btn.is-copied {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Boutons ronds (retour/partage) des resultats du generateur ET de la fiche produit : meme pilule
   creme a ombre portee que le reste du nouveau design (.wishlist-seg/.button--secondary/
   .wizard-new-search/.product-detail__buy), scopee car .icon-btn reste par ailleurs un bouton rond
   "neutre" generique (bord --color-border) pour un usage futur hors de ces deux familles de pages. */
#wizard-results .icon-btn,
.product-detail .icon-btn {
	border: none;
	background: #FEFCF8;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 4px 0 #EFE8DD;
	color: #221E1A;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#wizard-results .icon-btn:hover,
.product-detail .icon-btn:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 6px 0 #EFE8DD;
}

#wizard-results .icon-btn:active,
.product-detail .icon-btn:active {
	transform: translateY(2px);
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 1px 0 #EFE8DD;
}

#wizard-results .icon-btn:focus-visible,
.product-detail .icon-btn:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 2px;
}

#wizard-results .icon-btn.is-copied,
.product-detail .icon-btn.is-copied {
	border: none;
	box-shadow: inset 0 0 0 1.5px #398AD6, 0 4px 0 #1F5E9C;
	color: #398AD6;
}

/* Boutons ronds un peu plus grands sur la fiche produit (52px, voir le gabarit fourni) qu'en barre
   d'outils des resultats (40px, .icon-btn de base). */
.product-detail .icon-btn {
	width: 52px;
	height: 52px;
}

@media (max-width: 860px) {
	/* Pas de padding horizontal a reduire ici (deja gere par .container, voir plus haut) : seul le
	   vertical suit la reduction du gabarit (40/80 -> 24/48). */
	.product-detail {
		padding: 24px 0 48px;
	}

	.product-detail__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.product-detail__star {
		display: none;
	}

	/* Icone seule (libelle masque visuellement, toujours lu par un lecteur d'ecran) : reste a cote de
	   .product-detail__buy sur la meme ligne, un cercle de la meme hauteur (60px) plutot qu'empile en
	   pleine largeur en dessous - les deux boutons n'avaient plus la meme largeur une fois le libelle
	   retire, les empiler cote a cote les aligne au lieu d'un contraste plein-largeur/texte-court. */
	.product-detail__save {
		width: 60px;
		padding: 0;
		justify-content: center;
	}

	.product-detail__save .is-on,
	.product-detail__save .is-off {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
}

.share-wrap {
	position: relative;
}

.share-feedback {
	position: absolute;
	top: 50%;
	right: calc(100% + 10px);
	transform: translateY(-50%) translateX(6px);
	white-space: nowrap;
	background: var(--color-text);
	color: var(--color-bg);
	font-size: 0.75rem;
	padding: 4px 10px;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.share-feedback.is-visible {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* "Nouvelle recherche" (voir #results-toolbar dans generator-results.html) : vrai bouton plutot qu'un
   lien souligne (voir .wizard-link), meme hauteur que .icon-btn juste a cote pour l'alignement. Reprend
   le bleu/ombre portee des pilules du nouveau design (voir .wishlist-btn/.wishlist-cta) plutot que
   --color-primary (noir, dateant de l'ancien habillage). */
.wizard-new-search {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 20px;
	border-radius: var(--radius-pill);
	background: #398AD6;
	box-shadow: 0 4px 0 #1F5E9C;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.wizard-new-search:hover {
	background: #398AD6;
	transform: translateY(-2px);
	box-shadow: 0 6px 0 #1F5E9C;
}

.wizard-new-search:active {
	transform: translateY(2px);
	box-shadow: 0 2px 0 #1F5E9C;
}

.wizard-new-search:focus-visible {
	outline: 3px solid #F1C45E;
	outline-offset: 2px;
}

.wizard-new-search svg {
	flex-shrink: 0;
}

/* Pages "Mentions legales" / "Politique de confidentialite" / "CGU" (voir legal-notice.html/
   privacy-policy.html/terms-of-use.html) : meme famille visuelle que le reste du nouveau design (titre
   surligne, contenu dans une carte creme a ombre portee) plutot que du texte brut directement sur le
   fond blanc de la page. padding-top 36px : meme espace header->titre que les autres pages (voir
   .explore__in plus haut). */
/* max-width/padding horizontal identiques a .explore__in/.history : la page occupe la meme largeur et
   s'aligne sur les memes bords gauche/droit que le reste du site, au lieu d'une colonne de lecture
   etroite centree toute seule au milieu de l'ecran. */
.legal-page {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 36px 40px 96px;
}

.legal-head {
	margin: 0 0 32px;
}

.legal-head__title {
	position: relative;
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: clamp(28px, 4vw, 40px);
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.legal-head__mark {
	background: linear-gradient(transparent 62%, #F1C45E 62%, #F1C45E 92%, transparent 92%);
}

.legal-content {
	padding: 40px 44px 48px;
	border-radius: 28px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 6px 0 #EFE8DD;
	font-size: 16px;
	line-height: 1.7;
	color: #4A4038;
	box-sizing: border-box;
}

.legal-updated {
	margin: 0 0 28px;
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border-radius: var(--radius-pill);
	background: #FBF3DF;
	color: #B07A1E;
	font-size: 13px;
	font-weight: 700;
}

.legal-content h2 {
	margin: 36px 0 12px;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.01em;
	color: #111;
}

.legal-content h2:first-of-type {
	margin-top: 0;
}

.legal-content p {
	margin: 0 0 16px;
}

.legal-content ul {
	margin: 0 0 16px;
	padding-left: 22px;
}

.legal-content li {
	margin-bottom: 8px;
}

.legal-content a {
	color: #1F5E9C;
	font-weight: 600;
}

.legal-content a:hover {
	color: #398AD6;
}

/* Information qu'il reste a renseigner (raison sociale, SIRET, hebergeur applicatif...) avant mise
   en ligne : mis en evidence pour ne pas passer inaperçu, ni cote code ni sur la page rendue. Meme
   teinte que .legal-updated/.hint doree ailleurs dans le nouveau design. */
.legal-placeholder {
	background: #FBF3DF;
	color: #B07A1E;
	padding: 1px 6px;
	border-radius: 6px;
	font-weight: 700;
}

/* Le tableau des cookies ne peut pas descendre sous une largeur minimale (3 colonnes de texte) :
   sans ce wrapper, il deborde le conteneur sur mobile au lieu de defiler horizontalement. */
.legal-table-wrap {
	overflow-x: auto;
	margin: 0 0 24px;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1.5px #EEE4D3;
}

.legal-content table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 15px;
}

.legal-content th,
.legal-content td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid #EEE4D3;
	vertical-align: top;
}

.legal-content th {
	font-weight: 800;
	background: #FBF6EE;
}

@media (max-width: 640px) {
	.legal-page {
		padding: 28px 0 64px;
	}

	.legal-content {
		padding: 28px 20px 32px;
	}
}

/* Footer : meme famille visuelle que le reste du site redessine cette session (dashed border creme,
   cartes a ombre portee, bleu/or) plutot que l'ancien fond noir - voir le gabarit fourni. */
.site-footer {
	background: #fff;
	color: #111;
	border-top: 1.5px dashed #C9BFAF;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.site-footer__in {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 40px 32px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 3px;
	border-radius: 8px;
}

.site-footer__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 24px;
	flex-wrap: wrap;
	padding: 28px 32px;
	border-radius: 24px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
}

.site-footer__cta-left {
	display: flex;
	align-items: center;
	gap: 18px;
}

.site-footer__cta-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #F1C45E;
	box-shadow: 0 4px 0 #DE9C31;
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-footer__title {
	margin: 0;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.site-footer__btn {
	height: 58px;
	padding: 0 10px 0 26px;
	border-radius: 18px;
	background: #398AD6;
	box-shadow: 0 5px 0 #1F5E9C;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 14px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.site-footer__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 0 #1F5E9C;
	color: #fff;
}

.site-footer__btn:active {
	transform: translateY(3px);
	box-shadow: 0 2px 0 #1F5E9C;
}

.site-footer__btn-dot {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #F1C45E;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 4 "colonnes" sur desktop : a propos (logo+accroche), liens Eraika, liens legaux, langue - voir le
   commentaire dans fragments/footer.html pour le detail de .site-footer__navs (display:contents,
   "deplie" ses 2 <nav> comme 2 colonnes distinctes de cette grille). auto sur la derniere colonne
   (langue) : largeur de son propre contenu, pas une fraction de l'espace restant comme les 3 autres. */
.site-footer__bar {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 48px;
	align-items: start;
}

.site-footer__about {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.site-footer__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}

.site-footer__logo-icon {
	height: 1.2em;
	width: auto;
}

/* Meme logo bicolore que .site-header__logo (voir plus haut). */
.site-footer__logo-a {
	color: #2F78BE;
}

.site-footer__logo-b {
	/* Meme correction de contraste que .site-header__logo-b ci-dessus. */
	color: #B07A1E;
}

.site-footer__tagline {
	margin: 0;
	max-width: 300px;
	font-size: 14px;
	line-height: 1.6;
	/* #6B6157 (pas #9A8F82 du gabarit fourni, contraste insuffisant - voir l'audit accessibilite, meme
	   correction deja appliquee ailleurs sur ce site). */
	color: #6B6157;
}

/* display:contents sur desktop (voir le commentaire dans fragments/footer.html) : ce conteneur
   disparait de la boite, ses 2 <nav> enfants deviennent directement les colonnes 2 et 3 de la grille
   .site-footer__bar ci-dessus - inoffensif ici puisque .site-footer__navs est une simple div de
   regroupement, pas un repere semantique (contrairement aux <nav> qu'elle contient, qui restent
   intacts). Redevient un vrai conteneur (grid 2 colonnes) sur mobile, voir la media query plus bas. */
.site-footer__navs {
	display: contents;
}

/* Liens empiles verticalement (pas en rangee) : chaque colonne de la grille ci-dessus est etroite,
   une rangee horizontale de liens y retomberait a la ligne de façon imprevisible. */
.site-footer__nav {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Visible aussi bien en desktop (titre de colonne, voir le gabarit fourni) qu'en mobile (distingue les
   2 colonnes une fois empilees cote a cote) - aucune des deux largeurs ne doit la masquer. */
.site-footer__nav-h {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* #6B6157 (pas #9A8F82, contraste insuffisant - voir l'audit accessibilite, meme correction deja
	   appliquee ailleurs sur ce site). */
	color: #6B6157;
}

.site-footer__nav a,
.site-footer__nav button {
	font-size: 15px;
	font-weight: 500;
	color: #3D352E;
	transition: color 0.12s ease;
}

.site-footer__langcol {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Meme style que .site-footer__nav-h, classe separee (voir fragments/footer.html) : cette colonne
   n'existe que sur desktop (voir la media query plus bas, qui la masque sur mobile - design mobile deja
   valide separement, la pastille de langue y reste sans intitule, directement a cote du logo). */
.site-footer__langcol-h {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6B6157;
}

.site-footer__nav a:hover,
.site-footer__nav button:hover {
	color: #398AD6;
}

/* Reinitialise le bouton "Gerer les cookies" (voir fragments/footer.html) pour qu'il se fonde dans les
   liens texte voisins, plutot que de ressembler a un bouton. text-align:left indispensable : un
   <button> est centre par defaut dans la feuille de style navigateur (contrairement a un <a>), ce qui
   le desalignait des liens voisins une fois empile dans la colonne "Informations legales" (voir
   .site-footer__nav, flex-direction:column). */
.site-footer__nav button {
	appearance: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
}

.site-footer__lang {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: var(--radius-pill);
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC;
}

.site-footer__lang a {
	height: 34px;
	min-width: 42px;
	padding: 0 10px;
	box-sizing: border-box;
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: #6B6157;
}

.site-footer__lang a:hover {
	color: #111;
}

.site-footer__lang a[aria-current="true"] {
	background: #F1C45E;
	color: #111;
}

.site-footer__legal {
	display: flex;
	justify-content: space-between;
	gap: 12px 24px;
	flex-wrap: wrap;
	padding-top: 20px;
	border-top: 1px solid #F1EBE2;
	font-size: 13px;
	line-height: 1.6;
	color: #6B6157;
}

.site-footer__legal p {
	margin: 0;
	max-width: 720px;
	text-wrap: pretty;
}

/* Sous ce seuil, le flex-wrap de .site-footer__bar (desktop/tablette) casse de facon imprevisible
   selon la largeur du contenu - meme constat que l'ancienne disposition en colonnes qu'il remplace :
   un empilement explicite (logo, puis nav, puis langue) fixe le resultat quel que soit le nombre de
   liens/caracteres. */
@media (max-width: 760px) {
	.site-footer__in {
		padding: 36px 20px 28px;
	}

	.site-footer__cta {
		padding: 24px 20px;
	}

	.site-footer__btn {
		flex: 1;
		justify-content: space-between;
	}

	/* Logo + langue sur la meme ligne (langue fixee a droite), liens sur une 2e ligne en dessous - voir
	   order ci-dessous. DOM inchange (about, navs, langcol dans cet ordre, voir fragments/footer.html) :
	   order ne change que l'affichage visuel sur mobile, pas le DOM. display:flex (pas la grid 4 colonnes
	   du desktop, voir plus haut) + flex-wrap + flex-basis:100% sur .site-footer__navs ci-dessous forcent
	   ce dernier seul sur sa propre ligne, pendant que about (order:1) et langcol (order:2) se partagent
	   la 1ere ligne - justify-content s'applique independamment a chaque ligne d'un conteneur flex-wrap,
	   donc "space-between" sur une ligne a 2 elements les pousse chacun vers un bord. L'accroche et
	   l'intitule "Langue" (voir .site-footer__about/.site-footer__langcol, specifiques au gabarit
	   desktop) sont masques ici : design mobile deja valide separement, logo seul + pastille sans
	   intitule, non repris du gabarit desktop fourni. */
	.site-footer__bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.site-footer__about {
		order: 1;
	}

	.site-footer__tagline {
		display: none;
	}

	.site-footer__langcol {
		order: 2;
	}

	.site-footer__langcol-h {
		display: none;
	}

	/* 2 colonnes nommees (Informations legales / Liens utiles, voir fragments/footer.html et
	   .site-footer__nav-h plus haut) plutot qu'une grille a plat sans titre (ancien design) : chaque
	   groupe reste groupe avec son propre libelle, pas de melange ligne par ligne entre les deux
	   categories de liens. order:3 + flex-basis:100% (voir le commentaire sur .site-footer__bar
	   ci-dessus) : passe toujours apres about+langcol, sur sa propre ligne pleine largeur. display:grid
	   (pas contents, voir la regle desktop plus haut) : redevient un vrai conteneur sur mobile, ses 2
	   <nav> ne doivent plus se "dissoudre" dans .site-footer__bar ici. */
	.site-footer__navs {
		order: 3;
		flex-basis: 100%;
		margin-top: 20px;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
		width: 100%;
	}

	.site-footer__nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	/* display:block deja le cas par defaut (voir plus haut, visible en desktop comme en mobile) : juste
	   l'espacement qui differe ici. */
	.site-footer__nav-h {
		padding-bottom: 6px;
	}

	/* Cible tactile confortable (voir les recommandations WCAG 2.5.5/2.5.8), plus genereuse qu'en desktop
	   (voir .site-footer__nav plus haut, deja empile verticalement mais avec un espacement plus large
	   entre liens) ou le gap de 12px suffisait deja. */
	.site-footer__nav a,
	.site-footer__nav button {
		min-height: 40px;
		display: flex;
		align-items: center;
	}
}

/* Responsive */
@media (max-width: 600px) {
	:root {
		--header-height: 68px;
	}

	.site-header__inner {
		height: 68px;
		padding: 0 16px;
	}

	.site-header__logo {
		font-size: 22px;
	}

	.site-header__nav {
		gap: 4px;
	}

	/* Icone seule (plus de libelle visible, voir .header-widget__label juste en dessous) : garde une
	   cible tactile confortable (52px) dans la hauteur reduite du header mobile (68px). */
	.header-widget__toggle {
		min-width: 0;
		width: 52px;
		height: 52px;
		padding: 0;
	}

	/* Masque visuellement sans retirer du DOM/de l'arbre d'accessibilite (technique clip classique) :
	   le libelle ("Explorer"/"Historique"/"Mes idees") reste lu par les lecteurs d'ecran, seule l'icone
	   est visible a l'ecran sur mobile. */
	.header-widget__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	/* Meme padding horizontal que .site-header__inner a cette largeur (voir plus haut), pour garder
	   le contenu des pages aligne avec le header jusqu'en mobile. */
	.container {
		padding: 0 16px;
	}

	.hero {
		padding-left: 16px;
		padding-right: 16px;
	}

	.site-footer__in {
		padding: 36px 16px 28px;
		gap: 28px;
	}

	.wizard {
		padding: 24px 16px 0;
		min-height: calc(100vh - 68px);
		min-height: calc(100dvh - 68px);
	}

	.wizard-stepper .lbl {
		display: none;
	}

	.results {
		padding: 40px 0 64px;
	}

	/* Cette regle 40px s'ajoutait aux 24px de .wishlist-page .eraika-header (voir plus haut), donnant
	   64px jusqu'au titre au lieu des 32px vises (identiques a .history) : .results est partagee avec
	   les resultats du generateur, qui ont besoin de leurs 40px, "Mes idees" non. */
	.results.wishlist-page {
		padding-top: 8px;
	}

	/* .results__toolbar a un 3e groupe (.share-wrap, absent de .wishlist-toolbar) qui ne tient plus sur
	   la meme ligne a ce seuil : avec justify-content:flex-end (valeur desktop, voir plus bas dans ce
	   fichier), le bouton de partage bascule alors seul sur une 2e ligne, aligne a droite - laissant un
	   grand vide a sa gauche. flex-start ici le colle au bord gauche de sa ligne a la place. Place dans
	   CE bloc media (et non le bloc 768px juste au-dessus, pourtant plus proche logiquement) : la regle
	   de base .results__toolbar{justify-content:flex-end} est declaree PLUS BAS dans le fichier (hors
	   media query) - a specificite egale, elle l'emporterait sur un override place dans un bloc media
	   situe avant elle dans la cascade, quelle que soit la largeur d'ecran. */
	.results__toolbar {
		justify-content: flex-start;
	}

	/* Icone seule (libelle masque visuellement, toujours lu par un lecteur d'ecran) : fait tenir
	   "Nouvelle recherche" sur la meme ligne que le bouton de partage juste a cote, un cercle de 40px
	   comme .icon-btn plutot qu'une pilule avec un texte qui debordait a cette largeur. */
	.wizard-new-search {
		width: 40px;
		padding: 0;
		justify-content: center;
	}

	.wizard-new-search span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	/* Sous ce seuil, la base flex de 260px (voir .wishlist-row__info plus haut) ne tient plus a cote
	   de la vignette 96px + gap dans la largeur disponible (~223px a 375px de large) : flex-wrap bascule
	   alors TOUTE la ligne (titre, prix, actions) sur une 2e ligne en se basant sur cette base avant
	   retrecissement, laissant la vignette seule avec un grand vide a sa droite. Une base plus petite
	   tient a cote de la vignette ; flex-grow:1 (deja en place) l'etire ensuite pour occuper l'espace
	   restant, le prix/les actions peuvent encore passer sur une 2e ligne sans resusciter le bug.*/
	.wishlist-row__info {
		flex-basis: 140px;
	}

	.product-detail__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 980px) {
	/* Horizontal aligne sur .site-header__inner, qui ne change qu'a 600px : voir l'override
	   .explore__in ci-dessous (apres ce bloc pour gagner la cascade a <=600px). */
	.explore__in {
		padding: 56px 40px 48px;
	}

	.grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.feat__media {
		min-height: 260px;
	}
}

/* Place apres le bloc 980px ci-dessus (meme specificite, doit venir apres dans la cascade pour
   gagner a cette largeur) : meme padding horizontal que .site-header__inner/.container a 600px. */
@media (max-width: 600px) {
	.explore__in {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Idem : place apres le bloc 980px (56px de padding-top) pour gagner la cascade sur un telephone, qui
   verifie les deux conditions a la fois (ex. ≤760 ET ≤980). Sans ce retrecissement declare apres, le
   56px du bloc 980px l'emportait silencieusement sur les 32px vises ici, malgre le seuil plus etroit -
   la cascade CSS departage par ordre d'apparition, pas par largeur de seuil. */
@media (max-width: 760px) {
	.explore__in {
		padding-top: 32px;
	}
}

@media (max-width: 560px) {
	.feat__foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.feat__right {
		width: 100%;
		justify-content: space-between;
	}
}

/* Blog (voir templates/blog.html, blog-article.html, fragments/header.html) */
/* padding-top/bottom seules (jamais le raccourci "padding: Xpx 0 Ypx", qui remettrait le padding
   horizontal herite de .container a 0 et ferait deborder le contenu jusqu'aux bords de l'ecran). */
/* padding-top 36px : meme espace header->titre que les autres pages du site (voir .explore__in,
   .history, .eraika-header...). */
.blog {
	padding-top: 36px;
	padding-bottom: 80px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* Reprend le gap de .blog ci-dessus : les onglets/compteur/grille/pagination ne sont plus des enfants
   directs de .blog (voir #blog-results dans blog.html, echange en bloc en AJAX par js/blog.js), ils
   perdraient sinon cet espacement entre eux. .is-loading : meme attenuation que .grid.is-loading
   (Explorer) le temps d'un echange AJAX. */
.blog-results {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.blog-results.is-loading {
	opacity: 0.5;
}

.blog__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.blog__title {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: clamp(30px, 4vw, 44px);
	letter-spacing: -0.025em;
	line-height: 1.1;
}

/* Meme surlignage jaune que les autres titres de page (voir .explore__title-mark/.legal-head__mark/
   .wishlist-head__mark). */
.blog__title-mark {
	background: linear-gradient(transparent 62%, #F1C45E 62%, #F1C45E 92%, transparent 92%);
}

.blog__meta {
	/* Rapproche ce texte du menu de filtres juste au-dessus : le gap uniforme de .blog-results (28px,
	   voir plus haut) etait trop genereux ici specifiquement, marge negative plutot que de reduire ce
	   gap global (qui doit rester tel quel entre les autres blocs : grille, pagination...). */
	margin: -16px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: #6B6157;
}

.blog__meta-count {
	height: 30px;
	padding: 0 12px;
	border-radius: var(--radius-pill);
	background: #FBF3DF;
	color: #8A5A12;
	font-weight: 700;
	display: flex;
	align-items: center;
}

/* Meme gabarit que .explore__banner (fragments/explore.html) : hauteur bornee par clamp() plutot
   qu'un ratio fixe, pour rester a une taille raisonnable quelle que soit la largeur du conteneur. Fond
   neutre le temps du chargement reseau (voir le commentaire detaille sur .explore__banner). */
.blog__banner {
	display: block;
	width: 100%;
	height: clamp(140px, 22vw, 280px);
	object-fit: cover;
	border-radius: 28px;
	background: #F3ECDD;
}

/* Recherche (titre + mots-cles + categories, voir BlogArticleService.search) : remplace l'ancienne
   nav par onglets de categorie. Meme gabarit que .wizard-interest-search (generator.html) pour rester
   coherent avec les autres champs de recherche du site. */
.blog-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 54px;
	padding: 0 18px;
	border-radius: 16px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC;
}

.blog-search:focus-within {
	box-shadow: inset 0 0 0 2px #398AD6, 0 0 0 4px #EAF3FC;
}

.blog-search svg {
	flex-shrink: 0;
}

.blog-search input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font: 16px 'Poppins', sans-serif;
	color: #111;
}

.blog__empty {
	margin: 0;
	padding: 40px 0;
	text-align: center;
	color: var(--color-muted);
}

.blog-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 24px;
}

.blog-card {
	display: flex;
	flex-direction: column;
	border-radius: 24px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
	overflow: hidden;
	transition: transform 0.15s ease;
}

.blog-card:hover {
	transform: translateY(-3px);
}

.blog-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
	text-decoration: none;
}

.blog-card__link:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: -3px;
}

.blog-card__media {
	position: relative;
	display: block;
	aspect-ratio: 2 / 1;
	background: #F7F2EA;
	margin: 8px 8px 0;
	border-radius: 18px;
	overflow: hidden;
}

.blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-card__featbadge {
	position: absolute;
	top: 14px;
	left: 14px;
	height: 30px;
	padding: 0 12px;
	border-radius: var(--radius-pill);
	background: #F1C45E;
	color: #111;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
}

.blog-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px 18px;
}

/* Un article peut avoir plusieurs categories (voir migration 0057) : .blog-card__cats enveloppe une
   pastille .blog-card__cat par categorie. */
.blog-card__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.blog-card__cat {
	align-self: flex-start;
	height: 24px;
	padding: 0 10px;
	border-radius: var(--radius-pill);
	background: #E3EEFB;
	color: #1F5E9C;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
}

.blog-card__title {
	margin: 4px 0 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.35;
	text-wrap: balance;
}

.blog-card__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #5E574F;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-card__foot {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.blog-card__meta {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	/* #6B6157 (pas #8A8178 du gabarit source) : contraste insuffisant sur fond blanc a cette taille
	   (~3.8:1, sous le seuil WCAG AA 4.5:1 pour du texte normal) - #6B6157 est deja utilise ailleurs sur
	   ces pages et passe a 6:1. */
	color: #6B6157;
}

.blog-card__cta {
	margin-left: auto;
	flex-shrink: 0;
	height: 42px;
	padding: 0 6px 0 14px;
	border-radius: 14px;
	background: #398AD6;
	box-shadow: 0 3px 0 #1F5E9C;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.blog-card__cta svg {
	width: 28px;
	height: 28px;
	padding: 7px;
	border-radius: 50%;
	background: #F1C45E;
	color: #111;
	flex-shrink: 0;
}

.blog-card__link:hover .blog-card__cta {
	transform: translateY(-2px);
	box-shadow: 0 5px 0 #1F5E9C;
}

/* Article mis en avant (voir BlogController.list - 1er article de la 1ere page uniquement) : image et
   contenu cote a cote plutot qu'empiles, pleine largeur de la grille. */
.blog-card--feat .blog-card__link {
	flex-direction: row;
	flex-wrap: wrap;
}

.blog-card--feat .blog-card__media {
	flex: 1 1 320px;
	margin: 8px;
	min-height: 220px;
}

.blog-card--feat .blog-card__media img {
	position: absolute;
	inset: 0;
}

.blog-card--feat .blog-card__body {
	flex: 1 1 320px;
	justify-content: center;
	gap: 14px;
	padding: 28px 32px 32px 24px;
}

.blog-card--feat .blog-card__cat {
	height: 26px;
}

.blog-card--feat .blog-card__meta {
	font-size: 13px;
}

.blog-card--feat .blog-card__title {
	margin: 0;
	font-weight: 800;
	font-size: clamp(24px, 2.6vw, 30px);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.blog-card--feat .blog-card__desc {
	font-size: 16px;
	line-height: 1.6;
	-webkit-line-clamp: 4;
}

.blog-card--feat .blog-card__cta {
	height: 48px;
	padding: 0 6px 0 18px;
	font-size: 14px;
	gap: 10px;
}

.blog-card--feat .blog-card__cta svg {
	width: 34px;
	height: 34px;
	padding: 9px;
}

.blog-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 20px;
}

.blog-pagination__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 4px 0 #EFE8DD;
	color: var(--color-text);
}

.blog-pagination__btn:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 3px;
}

.blog-pagination__status {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-muted);
}

/* Article */
/* Pas de max-width ici (contrairement au gabarit source, pense comme une page autonome sans le
   header/.container du site) : .blog-article reste dans .container comme le reste du site, pour que
   ses bords gauche/droit s'alignent exactement avec le logo/les icones du header (voir --container-width
   plus haut), au lieu d'une colonne de lecture plus etroite et recentree. */
/* padding-top 36px : meme espace header->titre que les autres pages du site (voir .blog plus haut). */
.blog-article-page .blog-article {
	padding-top: 36px;
	padding-bottom: 80px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* Lien de retour vers /blog (voir BlogController.blogIndexUrl) */
.blog-article__back {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px 0 12px;
	border-radius: var(--radius-pill);
	background: #FEFCF8;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 3px 0 #EFE8DD;
	color: #6B6157;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.blog-article__back:hover {
	color: var(--color-text);
}

.blog-article__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Un article peut avoir plusieurs categories (voir migration 0057) : .blog-article__cats enveloppe
   une pastille .blog-article__cat par categorie, en ligne dans .blog-article__meta. */
/* Autrefois affiche en ligne dans .blog-article__meta (a cote de l'auteur/date) - deplace juste
   au-dessus des mots-cles (voir blog-article.html), avec son propre separateur en pointilles comme
   .blog-article__tags/.blog-article__related ci-dessous, meme pattern repete sur cette page. */
.blog-article__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 24px;
	border-top: 1.5px dashed #DDD0BC;
}

.blog-article__cat {
	align-self: flex-start;
	height: 28px;
	padding: 0 12px;
	border-radius: var(--radius-pill);
	background: #E3EEFB;
	color: #1F5E9C;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
}

.blog-article__title {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: clamp(30px, 4.4vw, 44px);
	letter-spacing: -0.025em;
	line-height: 1.12;
}

.blog-article__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	font-size: 14px;
	color: #6B6157;
}

.blog-article__author {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Voir .blog-card__meta ci-dessus : meme correction de contraste. */
	color: #6B6157;
}

.blog-article__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #C9BBA6;
}

/* Meme gabarit que .explore__banner (fragments/explore.html) : hauteur bornee par clamp() plutot
   qu'un ratio fixe. Fond neutre le temps du chargement reseau (voir le commentaire detaille sur
   .explore__banner). */
.blog-article__cover {
	display: block;
	width: 100%;
	height: clamp(140px, 22vw, 280px);
	object-fit: cover;
	border-radius: 28px;
	background: #F3ECDD;
}

.blog-article__content {
	font-size: 17px;
	line-height: 1.75;
	color: #2B2622;
}

.blog-article__content p {
	margin: 0 0 20px;
	text-wrap: pretty;
}

/* 1er paragraphe du contenu (introduction redigee avant le 1er titre de section) : mis en avant, sans
   necessiter de champ dedie - repose sur l'ordre naturel des blocs Editor.js (voir
   BlogArticleContentRenderer). */
.blog-article__content > p:first-child {
	font-size: 19px;
	line-height: 1.65;
}

.blog-article__content h2,
.blog-article__content h3,
.blog-article__content h4 {
	margin: 36px 0 16px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

/* Titres de section numerotes (voir BlogArticleContentRenderer.renderHeader/.blog-article__num) :
   uniquement les h2, pas les sous-titres h3/h4. */
.blog-article__content h2 {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-weight: 800;
	font-size: clamp(21px, 2.6vw, 25px);
	letter-spacing: -0.015em;
	line-height: 1.3;
}

.blog-article__content h2 span:last-child {
	padding-top: 3px;
	text-wrap: balance;
}

.blog-article__num {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #F1C45E;
	box-shadow: 0 3px 0 #DE9C31;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 800;
}

.blog-article__content h3 {
	font-size: 21px;
}

.blog-article__content h4 {
	font-size: 18px;
}

.blog-article__content ul,
.blog-article__content ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.blog-article__content li {
	margin-bottom: 8px;
}

.blog-article__content a {
	color: #398AD6;
	text-decoration: none;
}

/* Tags (mots-cles) : deplaces en pied d'article (voir blog-article.html), separes du contenu par un
   filet pointille - purement visuels, pas des liens (aucune page d'archive par mot-cle n'existe). */
.blog-article__tags {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 24px;
	border-top: 1.5px dashed #DDD0BC;
}

.blog-article__tagsLabel {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Voir .blog-card__meta plus haut : meme correction de contraste. */
	color: #6B6157;
}

.blog-article__tagsList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* CTA contextuel vers le generateur, insere automatiquement dans chaque article (voir
   BlogArticleContentRenderer.renderGeneratorCta) - jamais en <style> inline dans le HTML genere (vivrait
   en double si jamais plusieurs CTA finissaient sur la meme page). Design fourni par l'admin (carte
   claire, bouton bleu, fleche sur cercle dore) - remplace l'ancienne carte bleue. */
.ar-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; padding: 22px 22px 22px 20px; border-radius: 24px; background: #FBF3DF; box-shadow: inset 0 0 0 1.5px #EBDDBF, 0 5px 0 #EFE8DD; margin: 40px 0 32px; }
.ar-cta__star { position: absolute; pointer-events: none; }
.ar-cta__icon { flex-shrink: 0; width: 60px; height: 60px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px #EBDDBF; display: flex; align-items: center; justify-content: center; }
.ar-cta__txt { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ar-cta__title { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; color: #111; text-wrap: balance; }
.ar-cta__mark { background: linear-gradient(transparent 62%, #F1C45E 62%, #F1C45E 92%, transparent 92%); }
.ar-cta__text { margin: 0; font-size: 15px; line-height: 1.5; color: #6B6157; text-wrap: pretty; }
/* Specificite .ar-cta .ar-cta__btn (0,2,0), meme motif que .blog-product .blog-product__cta plus bas :
   sans ca, .blog-article__content a (0,1,1) imposait sa couleur bleue au texte du bouton (meme panne
   que la carte bleue precedente, deja rencontree une fois ici). */
.ar-cta .ar-cta__btn { text-decoration: none; flex-shrink: 0; height: 46px; padding: 0 6px 0 16px; border-radius: 14px; background: #398AD6; box-shadow: 0 4px 0 #1F5E9C; color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; transition: transform .12s, box-shadow .12s; }
.ar-cta .ar-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #1F5E9C; color: #fff; }
.ar-cta .ar-cta__btn:focus-visible { outline: 3px solid #398AD6; outline-offset: 3px; }
.ar-cta__arrow { width: 32px; height: 32px; border-radius: 50%; background: #F1C45E; display: flex; align-items: center; justify-content: center; }
@media (max-width: 560px) { .ar-cta .ar-cta__btn { flex: 1 1 100%; justify-content: space-between; } }

/* Le bloc "faq" d'un article reutilise exactement .faq-list/.faq-item (voir plus haut, section FAQ de
   la home) pour un design identique - seul ce wrapper + le titre sont specifiques a l'article. */
.blog-article__faq {
	margin: 8px 0 24px;
}

.blog-article__faqTitle {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
}

.blog-article__related {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 24px;
	border-top: 1.5px dashed #DDD0BC;
}

.blog-article__relatedTitle {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.blog-article__relatedList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}

.blog-article__relatedLink {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 12px;
	border: 1.5px solid #E5E3DF;
	text-decoration: none;
	color: #111111;
	/* Les <li> grid s'etirent deja a la hauteur de la ligne la plus grande (comportement par defaut de
	   CSS Grid) - sans ce height:100%, ce lien (le vrai contour visible de la carte) restait size a son
	   propre contenu et ne suivait pas cet etirement, d'ou le decalage visuel quand un titre fait plus
	   de lignes qu'un autre. */
	height: 100%;
	box-sizing: border-box;
}

.blog-article__relatedLink:hover {
	background: #FAFAF8;
	border-color: #398AD6;
}

.blog-article__relatedMedia {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: #F7F2EA;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.blog-article__relatedMedia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-article__relatedName {
	font-size: 14px;
	font-weight: 600;
}

.blog-article__tagsList li {
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: #F7F2EA;
	color: #6B6157;
	font-size: 13px;
	font-weight: 600;
}

/* Bloc "produit" insere dans le contenu (voir BlogArticleContentRenderer) : nom + bouton CTA sont deux
   liens distincts (jamais un <a> imbrique dans un autre). */
.blog-product {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	margin: 24px 0;
	padding: 10px 14px 10px 10px;
	border-radius: 22px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 5px 0 #EFE8DD;
}

.blog-product__media {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: 16px;
	background: #F7F2EA;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.blog-product__media img {
	width: 82%;
	height: 82%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.blog-product__body {
	flex: 1 1 220px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Specificite .blog-product .blog-product__name (0,2,0), pas juste .blog-product__name (0,1,0) :
   sans ca, la regle generale .blog-article__content a (0,1,1 - couleur des liens inseres dans le
   texte redige) l'emporterait et imposerait sa couleur bleue ici aussi. */
.blog-product .blog-product__name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: inherit;
	text-decoration: none;
}

.blog-product .blog-product__name:hover {
	color: #398AD6;
}

.blog-product__price {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #2B2622;
}

/* Specificite .blog-product .blog-product__cta (0,2,0) : meme raison que .blog-product__name
   ci-dessus - sans ca, .blog-article__content a (0,1,1) imposait sa couleur bleue au texte du bouton,
   illisible sur le fond bleu du bouton lui-meme. */
.blog-product .blog-product__cta {
	flex-shrink: 0;
	height: 46px;
	padding: 0 6px 0 16px;
	border-radius: 14px;
	background: #398AD6;
	box-shadow: 0 4px 0 #1F5E9C;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.blog-product__cta svg {
	width: 32px;
	height: 32px;
	padding: 8px;
	border-radius: 50%;
	background: #F1C45E;
	color: #111;
	flex-shrink: 0;
}

.blog-product .blog-product__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 #1F5E9C;
	color: #fff;
}

.blog-product__cta:focus-visible,
.blog-product__name:focus-visible,
.blog-article__back:focus-visible {
	outline: 3px solid #398AD6;
	outline-offset: 3px;
}

@media (max-width: 760px) {
	.blog {
		padding-top: 32px;
		padding-bottom: 56px;
		gap: 20px;
	}

	.blog__banner {
		height: 160px;
		border-radius: 20px;
	}

	.blog-grid {
		grid-template-columns: 1fr;
	}

	.blog-card--feat .blog-card__body {
		padding: 20px 18px 22px;
	}

	.blog-article-page .blog-article {
		padding-top: 32px;
		padding-bottom: 56px;
		gap: 24px;
	}

	.blog-article__cover {
		height: 160px;
		border-radius: 20px;
	}

	.blog-article__content {
		font-size: 16px;
	}

	.blog-article__content > p:first-child {
		font-size: 17px;
	}

	.blog-product__media {
		width: 80px;
		height: 80px;
	}

	.blog-product__cta {
		flex: 1 1 100%;
		justify-content: space-between;
	}
}

/* Fond motif decoratif de la section 1 de la home (voir .hero-motif dans home.html) : copie telle
   quelle (image data:URI incluse) du fichier hero-motif.css fourni, sauf le positionnement du motif
   (::before) modifie en "full-bleed" (left:50%+translateX(-50%)+width:100vw au lieu de inset:0) : .hero
   a max-width:1200px + margin:0 auto, le motif s'arretait donc aux bords de cette boite sur grand ecran
   au lieu de couvrir toute la largeur visible. Le voile (::after) reste lui cale sur la largeur de
   .hero : c'est la zone qui protege le texte, deja centree avec lui, pas besoin de deborder. */
.hero-motif{position:relative;background:#FFFFFF;isolation:isolate}
.hero-motif::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-2;pointer-events:none;opacity:.5;background-size:240px 240px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20fill%3D%27none%27%20stroke-width%3D%271.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27translate(28%2024)%27%20stroke%3D%27%23E8C77F%27%3E%3Cpath%20fill%3D%27%23FDF6E4%27%20d%3D%27M10%2030%20C%200%2022%2C%200%204%2C%2016%202%20C%2032%204%2C%2032%2022%2C%2022%2030%20L%2022%2036%20L%2010%2036%20Z%27%2F%3E%3Cpath%20d%3D%27M11%2041%20L%2021%2041%20M16%20-6%20L%2016%20-10%20M%202%204%20L%20-2%200%20M%2030%204%20L%2034%200%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate(140%2030)%27%20stroke%3D%27%23A9C7E6%27%3E%3Crect%20fill%3D%27%23F2F7FC%27%20x%3D%270%27%20y%3D%278%27%20width%3D%2740%27%20height%3D%2710%27%20rx%3D%272.5%27%2F%3E%3Crect%20fill%3D%27%23F2F7FC%27%20x%3D%274%27%20y%3D%2718%27%20width%3D%2732%27%20height%3D%2722%27%20rx%3D%272.5%27%2F%3E%3Cpath%20stroke%3D%27%23E8C77F%27%20d%3D%27M20%208%20L%2020%2040%27%2F%3E%3Cpath%20stroke%3D%27%23E8C77F%27%20fill%3D%27%23FDF6E4%27%20d%3D%27M20%208%20C%2013%20-2%2C%204%202%2C%208%207%20C%2010%209%2C%2016%208%2C%2020%208%20Z%20M20%208%20C%2027%20-2%2C%2036%202%2C%2032%207%20C%2030%209%2C%2024%208%2C%2020%208%20Z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate(86%20104)%27%20stroke%3D%27%23A9C7E6%27%3E%3Crect%20fill%3D%27%23F2F7FC%27%20x%3D%270%27%20y%3D%270%27%20width%3D%2730%27%20height%3D%2738%27%20rx%3D%275%27%2F%3E%3Cpath%20d%3D%27M7%2012%20L%209%2014%20L%2013%209%20M17%2012%20L%2024%2012%20M7%2026%20L%209%2028%20L%2013%2023%20M17%2026%20L%2024%2026%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate(186%20120)%27%20stroke%3D%27%23E8C77F%27%3E%3Cpath%20fill%3D%27%23FDF6E4%27%20d%3D%27M12%200%20C%2013%208%2C%2016%2011%2C%2024%2012%20C%2016%2013%2C%2013%2016%2C%2012%2024%20C%2011%2016%2C%208%2013%2C%200%2012%20C%208%2011%2C%2011%208%2C%2012%200%20Z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate(24%20150)%27%20stroke%3D%27%23B7D0AE%27%3E%3Cpath%20fill%3D%27%23F2F7EF%27%20d%3D%27M0%2014%20L%2026%202%20L%2034%2018%20L%208%2030%20Z%27%2F%3E%3Ccircle%20cx%3D%2727%27%20cy%3D%2712%27%20r%3D%272.5%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate(130%20184)%27%20stroke%3D%27%23EBB8AA%27%3E%3Cpath%20fill%3D%27%23FCEDE8%27%20d%3D%27M14%2024%20C%202%2016%2C%202%204%2C%208%204%20C%2011%204%2C%2014%207%2C%2014%209%20C%2014%207%2C%2017%204%2C%2020%204%20C%2026%204%2C%2026%2016%2C%2014%2024%20Z%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate(206%20206)%27%20stroke%3D%27%23A9C7E6%27%3E%3Ccircle%20fill%3D%27%23F2F7FC%27%20cx%3D%2710%27%20cy%3D%2710%27%20r%3D%278%27%2F%3E%3Cpath%20d%3D%27M16%2016%20L%2022%2022%27%2F%3E%3C%2Fg%3E%3Cpath%20stroke%3D%27%23DEDAD4%27%20stroke-width%3D%271.8%27%20d%3D%27M70%2070%20L%2073%2073%20M73%2070%20L%2070%2073%20M110%2020%20L%20110%2020.1%20M220%2090%20L%20220%2090.1%20M80%20220%20L%2083%20223%20M83%20220%20L%2080%20223%27%2F%3E%3C%2Fsvg%3E");animation:heroMotifPan 60s linear infinite}
.hero-motif::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 40% 46% at 50% 50%,#FFFFFF 58%,rgba(255,255,255,0)),linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 18%,rgba(255,255,255,0) 82%,rgba(255,255,255,.6))}
@media (max-width:760px){.hero-motif::after{background:radial-gradient(ellipse 84% 30% at 50% 50%,#FFFFFF 58%,rgba(255,255,255,0)),linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 18%,rgba(255,255,255,0) 82%,rgba(255,255,255,.6))}}
@keyframes heroMotifPan{from{background-position:0 0}to{background-position:0 -480px}}
@media (prefers-reduced-motion:reduce){.hero-motif::before{animation:none}}