: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;
	}
}

body {
	margin: 0;
	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;
	overflow: hidden;
	min-height: calc(100vh - 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;
}

/* Etoiles decoratives (voir home.html) : positionnees en absolu par rapport a .hero (position:
   relative ci-dessus), overflow:hidden sur .hero evite tout debordement/scroll horizontal sur petit
   ecran. Masquees au-dela de la 6e sur tablette/mobile (voir media query plus bas), en plus des photos. */
.hero__star {
	position: absolute;
	pointer-events: none;
}

.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;
}

/* Visible uniquement sur grand ecran (voir media query plus bas) : masquee plutot que simplement
   redimensionnee sur smartphone/tablette, sur demande explicite. */
.hero__photos {
	position: relative;
	width: 100%;
	max-width: 860px;
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	align-items: end;
}

/* Encadre (fond creme + liseret) autour de chaque photo, avec effet de survol - meme famille que
   .hiw__card/.wishlist-card (nouveau design) : l'ombre/le liseret directement sur l'<img> ne donnaient
   ni cadre visible (l'image colle au bord) ni effet de survol. */
.hero__photo-card {
	padding: 8px;
	border-radius: 26px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 6px 0 #EFE8DD;
	transition: transform 0.15s ease;
}

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

.hero__photo {
	display: block;
	width: 100%;
	height: var(--h);
	object-fit: cover;
	border-radius: 20px;
}

/* PC uniquement pour les photos (demande explicite) : tablette (iPad landscape compris, jusqu'a
   1024px) et mobile gardent le hero sans photos, juste le titre/texte/CTA. */
@media (max-width: 1024px) {
	.hero__photos {
		display: none;
	}

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

/* 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%);
}

.hiw__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 1120px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr);
	align-items: stretch;
}

.hiw__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hiw__card {
	display: flex;
	flex-direction: column;
	border-radius: 26px;
	background: #FFFEFC;
	box-shadow: inset 0 0 0 1.5px #DDD0BC, 0 6px 0 #EFE8DD;
	overflow: hidden;
	text-align: left;
	transition: transform 0.15s ease;
}

.hiw__card:hover {
	transform: translateY(-4px);
}

.hiw__media {
	margin: 8px 8px 0;
	border-radius: 20px;
	overflow: hidden;
}

.hiw__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.hiw__body {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 38px 26px 28px;
}

/* Chevauche le coin haut de la carte, par-dessus la photo : liseret de la couleur de fond de carte
   pour le decoller de l'image, meme motif que .product-detail__buy-dot/.wishlist-cta__dot (nouveau
   design) plutot que les teintes oklch/le liseret --color-bg d'origine. */
.hiw__num {
	position: absolute;
	top: -26px;
	left: 24px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 20px;
}

.hiw__num--1 {
	background: #F1C45E;
	box-shadow: 0 4px 0 #DE9C31, 0 0 0 5px #FFFEFC;
	color: #111;
}

.hiw__num--2 {
	background: #398AD6;
	box-shadow: 0 4px 0 #1F5E9C, 0 0 0 5px #FFFEFC;
	color: #fff;
}

.hiw__num--3 {
	background: #DE9C31;
	box-shadow: 0 4px 0 #B07A1E, 0 0 0 5px #FFFEFC;
	color: #fff;
}

.hiw__step {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* Prefixe "Etape N :" audible uniquement (voir th:text="#{hero.steps.srPrefix(...)}" dans home.html) :
   la pastille numerotee a cote est aria-hidden, sans ce prefixe un lecteur d'ecran n'avait jusqu'ici
   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);
}

.hiw__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: #6B6157;
	text-wrap: pretty;
}

.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;
	}

	.hiw__grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		gap: 20px;
	}

	.hiw__arrow {
		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;
}

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}

.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__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}

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

.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. */
.site-footer__nav button {
	appearance: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}

.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;
	}

	.site-footer__bar {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Meme motif que les puces du wizard/des resultats (voir .chip-list[data-group="budget-pills"]) :
	   en flex-wrap, chaque lien garde la largeur de son propre texte ("CGU" bien plus court que
	   "Confidentialite"), qui ne s'aligne plus en colonnes nettes une fois replie sur un ecran etroit.
	   grid-auto-flow:column (pas la valeur par defaut "row") : remplit la 1re colonne avant de passer
	   a la seconde, pour garder Mentions legales/Confidentialite/CGU ensemble dans la meme colonne
	   plutot que les voir repartis un par un entre les deux colonnes (voir l'ordre des liens dans
	   fragments/footer.html). */
	.site-footer__nav {
		display: grid;
		grid-auto-flow: column;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, auto);
		gap: 14px 28px;
		width: 100%;
	}
}

/* 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;
	}
}