/**
 * Les Minis Positifs — feuille de style principale.
 *
 * Couleurs et polices extraites de _reference/minipositif_html/ :
 * - Polices Google réellement chargées par le site (lien #lmp-fonts-css sur
 *   lesminispositifs-accueil.html) : Baloo 2, Quicksand, Playfair Display.
 * - Couleurs relevées dans les styles inline / SVG présents sur plusieurs
 *   pages de référence (panier de tête, barre de recherche, formes
 *   décoratives). Le vrai fichier style.css du thème original (chargé en
 *   externe, non capturé dans ces exports HTML) n'était pas disponible :
 *   les règles ci-dessous sont donc une reconstruction cohérente avec cette
 *   palette et cette typo réelles, pas une copie littérale.
 * - Attribution police titres/texte (--font-heading / --font-body) déduite
 *   du seul indice disponible : Playfair Display est utilisée en italique
 *   pour une citation, Baloo 2 (ronde, ludique) et Quicksand (sobre) se
 *   partagent titres/texte courant — à ajuster si Christine indique un
 *   autre pairage.
 */

:root {
	--lmp-creme: #FAF6F1;
	--lmp-creme-dark: #F0E8DD;
	--lmp-blanc-casse: #FDFBF8;
	--lmp-blanc: #FFFFFF;
	--lmp-brun: #3D2B1F;
	--lmp-brun-cuir: #8B6914;
	--lmp-brun-moka: #6B4C3B;
	--lmp-beige: #D4B896;
	--lmp-lavande: #9B7EBD;
	/* Variante foncée pour le texte/fond de bouton uniquement -- #9B7EBD ne
	   passe pas le AA (3.1-4.2:1 mesuré) sur le badge, les libellés FAQ, ou
	   le texte blanc des boutons (trouvé via /impeccable critique le
	   2026-09-02). #815CAC donne >=4.5:1 dans les deux sens (texte blanc
	   dessus, ou lui-même en texte sur fond clair) en gardant la même
	   teinte -- pas touché ailleurs (bordures, icônes décoratives) où le
	   AA texte ne s'applique pas. */
	--lmp-lavande-aa: #815CAC;
	--lmp-lavande-clair: #B8A9C9;
	--lmp-lavande-light: #D4C5E2;
	--lmp-lavande-bordure: #C9B8DA;
	--lmp-rose: #F2D0D0;
	--lmp-rose-light: #F5F0FF;
	--lmp-sauge: #9CAF88;
	--lmp-vert-light: #D4E4D0;
	--lmp-jaune: #FBE3A0;
	--lmp-text-light: #7A6358;

	--font-heading: 'Baloo 2', cursive;
	--font-body: 'Quicksand', sans-serif;
	--font-accent: 'Playfair Display', serif;
}

/* ==========================================================
   Base
   ========================================================== */

body {
	font-family: var(--font-body);
	color: var(--lmp-brun);
	background: var(--lmp-creme);
	margin: 0;
}

/* margin-bottom:0 ajouté ici (2026-09-02, /impeccable audit -- "beaucoup
   trop espacé partout où y'a un titre", signalé par Félix avec captures).
   Le reset ne remettait à zéro que margin-top -- chaque titre gardait la
   marge par défaut du navigateur (~0.83em, mesuré 34.86px sur un h2 de
   42px) EN PLUS du margin-top explicite déjà posé sur le paragraphe
   suivant. Les deux s'additionnaient (ex: 35px + 17.5px = 52px d'écart
   réel pour un intervalle voulu de 17.5px). Chaque section garde son
   contrôle via le margin-top du texte qui suit -- rien d'autre à
   toucher. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--lmp-brun);
	margin-top: 0;
	margin-bottom: 0;
}

/* Même bug que les titres, sur <p> cette fois (2026-09-02, /impeccable
   audit -- "section Pistache encore pas mal d'espace"). Aucune règle ne
   remettait la marge par défaut du navigateur (~1em haut+bas) à zéro sur
   les paragraphes -- la plupart des composants la neutralisaient au cas
   par cas (.bubble p, .step p, etc.) mais pas tous (ex :
   .pistache-band-inner p gardait 17.5px en haut ET en bas). Dans un
   conteneur flex (gap:18px ici), les marges ne fusionnent PAS comme en
   flux normal -- gap + margin-top + margin-bottom du voisin s'additionnent
   tous. Reset global ici, chaque section garde son rythme via son propre
   gap/margin-top explicite. */
p {
	margin: 0;
}

a {
	color: var(--lmp-brun);
}

/* ==========================================================
   Boutons
   ========================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font-family: var(--font-body);
	font-weight: 600;
	text-decoration: none;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	padding: 0.75rem 1.5rem;
	background: var(--lmp-lavande);
	color: var(--lmp-blanc);
	transition: background-color 0.2s ease;
}

.btn:hover {
	background: var(--lmp-brun);
	color: var(--lmp-blanc);
}

.btn--lavande {
	background: var(--lmp-lavande-aa);
	color: var(--lmp-blanc);
}

.btn--sm {
	padding: 0.5rem 1.1rem;
	font-size: 0.9rem;
}

/* ==========================================================
   En-tête (.mp-header — intégration de _reference/header-1b.html,
   2026-07-28). Palette/typo propres au fichier fourni (--purple, --ink,
   Nunito Sans...), volontairement scopées à .mp-header plutôt que placées
   dans :root/body : le fichier de référence est une page de démo autonome,
   ses resets globaux (box-sizing, body, a) auraient changé la police/
   couleur de tout le site s'ils avaient été copiés tels quels.
   ========================================================== */

.mp-header {
	--purple: #8C6BC8;
	--purple-dark: #7A57B8;
	--purple-soft: #D9C9EE;
	--ink: #453A33;
	--muted: #8A7A6E;
	--sand: #A2907F;
	--cream: #FDFBF8;
	--cream-2: #F7F2EB;
	--line: #EFE6DB;
	--line-2: #E6DACE;

	background: var(--cream);
	position: sticky;
	top: 0;
	z-index: 50;
	font-family: 'Nunito Sans', system-ui, sans-serif;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	transition: transform 0.25s ease;
}

/* Header masqué en scroll vers le bas, réapparaît en remontant (header.js). */
.mp-header.mp-header--hidden {
	transform: translateY(-100%);
}

.mp-header,
.mp-header *,
.mp-header *::before,
.mp-header *::after {
	box-sizing: border-box;
}

/* :where() = spécificité nulle, comme le sélecteur global "a" du fichier
   fourni : sans ça, ".mp-header a" (0,1,1) passerait devant des classes de
   composant à spécificité (0,1,0) comme .mp-cta, rendant son texte blanc
   invisible (violet sur violet) — bug constaté à l'intégration. */
:where( .mp-header ) a {
	text-decoration: none;
	color: var(--purple);
}

/* Bandeau utilitaire */
.mp-topbar {
	height: 36px;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: var(--muted);
	background: var(--cream-2);
}

.mp-topbar-links {
	display: flex;
	align-items: center;
	gap: 20px;
}

.mp-topbar-sep {
	width: 1px;
	height: 12px;
	background: var(--line-2);
}

.mp-topbar a {
	color: var(--muted);
}

.mp-topbar a:hover {
	color: #6E4FA8;
}

/* Rangée principale */
.mp-main {
	height: 104px;
	padding: 0 32px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	background: var(--cream);
	position: relative;
}

.mp-search {
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14.5px;
	color: #6B5A4D;
	padding: 10px 14px;
	border-radius: 22px;
	border: 1px solid var(--line-2);
	background: none;
	cursor: pointer;
	font-family: inherit;
	transition: border-color 0.18s, color 0.18s;
}

.mp-search:hover {
	border-color: var(--purple);
	color: #6E4FA8;
}

.mp-search-bar {
	display: none;
	position: absolute;
	top: 100%;
	left: 32px;
	background: var(--cream);
	border: 1px solid var(--line-2);
	border-radius: 12px;
	padding: 12px;
	box-shadow: 0 6px 20px rgba(69, 58, 51, 0.15);
	z-index: 60;
}

.mp-search-bar.is-open {
	display: block;
}

.mp-search-bar form {
	display: flex;
	gap: 8px;
	align-items: center;
}

.mp-search-input {
	border: 1px solid var(--line-2);
	border-radius: 8px;
	padding: 8px 12px;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 14px;
	min-width: 220px;
	outline: none;
}

.mp-search-input:focus {
	border-color: var(--purple);
}

.mp-search-submit {
	background: var(--purple);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
}

.mp-search-submit:hover {
	background: var(--purple-dark);
}

.mp-brand {
	justify-self: center;
	display: flex;
	align-items: center;
	gap: 16px;
}

.mp-brand img {
	width: 82px;
	height: 82px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 8px 20px -12px rgba(69, 58, 51, 0.6);
}

.mp-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.mp-brand-name {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 26px;
	color: var(--ink);
}

.mp-brand-tag {
	font-size: 12.5px;
	color: var(--sand);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-top: 5px;
}

.mp-actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 16px;
}

.mp-cart {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6B5A4D;
	border: 1px solid var(--line-2);
	transition: border-color 0.18s, color 0.18s;
}

.mp-cart:hover {
	border-color: var(--purple);
	color: #6E4FA8;
}

/* Icône "Mon compte" -- même gabarit visuel que .mp-cart quand déconnectée
   (cercle 44px), devient une pastille avec le prénom une fois connectée
   (voir header.php, .mp-account--connected). */
.mp-account {
	position: relative;
	height: 44px;
	min-width: 44px;
	padding: 0 14px;
	border-radius: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #6B5A4D;
	border: 1px solid var(--line-2);
	transition: border-color 0.18s, color 0.18s, background-color 0.18s;
}

.mp-account:not(.mp-account--connected) {
	padding: 0 16px 0 14px;
}

/* Libellé "Connexion" à côté du pictogramme (2026-09-18) : l'icône seule était
   peu découvrable pour une visiteuse qui cherche où créer/ouvrir son compte.
   Même destination qu'avant (page Mon compte WooCommerce : connexion ET
   inscription y vivent côte à côte). */
.mp-account-label {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	white-space: nowrap;
}

.mp-account:hover {
	border-color: var(--purple);
	color: #6E4FA8;
}

.mp-account--connected {
	background: var(--cream-2);
}

.mp-account--connected:hover {
	background: var(--cream);
}

.mp-account-name {
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mp-cart-count {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	background: var(--purple);
	color: #fff;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 11.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--cream);
}

.mp-cta {
	height: 48px;
	padding: 0 26px;
	border-radius: 24px;
	background: var(--purple);
	color: #fff;
	display: flex;
	align-items: center;
	font-family: 'Quicksand', sans-serif;
	font-weight: 700;
	font-size: 15.5px;
	box-shadow: 0 10px 22px -12px rgba(140, 107, 200, 0.95);
	transition: background 0.18s;
}

.mp-cta:hover {
	background: var(--purple-dark);
	color: #fff;
}

/* Navigation */
.mp-nav {
	height: 56px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--cream);
	font-family: 'Quicksand', sans-serif;
	font-weight: 600;
	font-size: 15.5px;
}

.mp-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.mp-nav a {
	display: inline-block;
	padding: 16px;
	color: var(--ink);
	border-bottom: 2px solid transparent;
	transition: color 0.18s, border-color 0.18s;
}

.mp-nav a:hover {
	color: #6E4FA8;
	border-bottom-color: var(--purple-soft);
}

.mp-nav li.current-menu-item > a,
.mp-nav li.current_page_item > a {
	color: #6E4FA8;
	border-bottom-color: var(--purple);
}

/* Burger + menu mobile (masqués en desktop) */
.mp-burger,
.mp-mobile-nav,
.mp-cta-mobile {
	display: none;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
	.mp-topbar {
		padding: 6px 16px;
		height: auto;
		min-height: 30px;
		font-size: 12px;
		line-height: 1.35;
		text-align: center;
		justify-content: center;
	}

	.mp-topbar-links {
		display: none;
	}

	.mp-main {
		height: auto;
		padding: 14px 16px 16px;
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 10px;
		border-bottom: 1px solid var(--line);
	}

	.mp-search,
	.mp-search-bar {
		display: none;
	}

	.mp-burger {
		display: flex;
		position: absolute;
		left: 12px;
		top: 20px;
		width: 42px;
		height: 42px;
		border-radius: 12px;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		padding: 0 10px;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.mp-burger span {
		display: block;
		height: 2px;
		background: var(--ink);
		border-radius: 2px;
	}

	.mp-burger span:last-child {
		width: 14px;
	}

	.mp-brand {
		flex-direction: column;
		gap: 8px;
	}

	.mp-brand img {
		width: 64px;
		height: 64px;
	}

	.mp-brand-name {
		font-size: 19px;
	}

	.mp-brand-tag {
		display: none;
	}

	.mp-actions {
		position: absolute;
		right: 14px;
		top: 20px;
		gap: 8px;
	}

	.mp-cta {
		display: none;
	}

	.mp-cart {
		width: 42px;
		height: 42px;
		background: var(--cream);
	}

	/* Icône seule sur mobile (jamais de nom) -- peu de place à côté du
	   burger/logo, et .mp-account-name (max-width:120px) ferait déborder
	   la ligne du haut. */
	.mp-account {
		width: 42px;
		min-width: 42px;
		height: 42px;
		padding: 0;
		background: var(--cream);
	}

	.mp-account-name {
		display: none;
	}

	/* Déconnectée : garder le libellé (plus petit, pilule compacte) -- c'est
	   justement sur mobile que l'icône seule passait inaperçue. */
	.mp-account:not(.mp-account--connected) {
		width: auto;
		padding: 0 12px;
		gap: 6px;
	}

	.mp-account-label {
		font-size: 13px;
	}

	.mp-cta-mobile {
		display: flex;
		height: 46px;
		width: 100%;
		border-radius: 23px;
		background: var(--purple);
		color: #fff;
		align-items: center;
		justify-content: center;
		font-family: 'Quicksand', sans-serif;
		font-weight: 700;
		font-size: 16px;
	}

	.mp-cta-mobile:hover {
		background: var(--purple-dark);
		color: #fff;
	}

	.mp-nav {
		display: none;
	}

	.mp-mobile-nav {
		display: none;
		padding: 10px 14px 18px;
		border-bottom: 1px solid var(--line);
	}

	.mp-mobile-nav.is-open {
		display: block;
	}

	.mp-mobile-nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
		font-family: 'Quicksand', sans-serif;
		font-weight: 600;
		font-size: 17px;
	}

	.mp-mobile-nav a {
		display: block;
		padding: 14px 12px;
		border-radius: 12px;
		color: var(--ink);
	}

	.mp-mobile-nav a:hover {
		background: var(--cream-2);
	}
}

/* Logo/lien "site-logo" — toujours utilisé par le footer (footer.php),
   indépendant de .mp-header ci-dessus. */
.site-logo {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
}

.site-logo__img {
	display: block;
	height: auto;
}

/* ==========================================================
   Pied de page (site-footer)
   ========================================================== */

.site-footer {
	background: var(--lmp-brun);
	color: var(--lmp-creme);
	margin-top: 3rem;
}

.footer-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 1.5rem 2rem;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.4fr;
	gap: 2rem;
}

.footer-brand .site-logo__img--footer {
	display: block;
	height: auto;
	margin-bottom: 0.75rem;
}

.footer-description {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--lmp-creme);
	opacity: 0.85;
	max-width: 32ch;
}

.footer-social {
	display: flex;
	gap: 0.75rem;
	margin-top: 1rem;
}

.social-link {
	color: var(--lmp-creme);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px;
	margin: -11px;
	opacity: 0.85;
}

.social-link:hover {
	opacity: 1;
	color: var(--lmp-lavande-clair);
}

.footer-col h3 {
	font-family: var(--font-heading);
	font-size: 1rem;
	color: var(--lmp-creme);
	margin-bottom: 0.9rem;
}

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.footer-links a {
	color: var(--lmp-creme);
	opacity: 0.85;
	text-decoration: none;
	font-size: 0.9rem;
}

.footer-links a:hover {
	opacity: 1;
	color: var(--lmp-lavande-clair);
}

.footer-newsletter p {
	font-size: 0.85rem;
	line-height: 1.5;
	opacity: 0.85;
	margin-top: 0;
}

.newsletter-form {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
	flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
	flex: 1 1 160px;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid var(--lmp-lavande-clair);
	border-radius: 8px;
	padding: 0.55rem 0.75rem;
	font-family: var(--font-body);
	background: var(--lmp-creme);
}

.newsletter-form button {
	background: var(--lmp-lavande);
	color: var(--lmp-blanc);
	border: none;
	border-radius: 8px;
	padding: 0.55rem 1rem;
	font-family: var(--font-body);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.newsletter-form button:hover {
	background: var(--lmp-lavande-clair);
}

.footer-bottom {
	border-top: 1px solid rgba(250, 246, 241, 0.15);
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	font-size: 0.8rem;
}

.footer-copyright {
	margin: 0;
	opacity: 0.75;
}

.footer-credit {
	margin-left: 0.35em;
}

.footer-credit a {
	color: var(--lmp-creme);
	text-decoration: underline;
	text-decoration-color: rgba(250, 246, 241, 0.4);
	text-underline-offset: 2px;
}

.footer-credit a:hover {
	text-decoration-color: currentColor;
}

.footer-legal {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.footer-legal a {
	color: var(--lmp-creme);
	opacity: 0.75;
	text-decoration: none;
}

.footer-legal a:hover {
	opacity: 1;
}

/* Liens « WP Admin » et « Se déconnecter » (cparent seulement, footer.php) : volontairement discrets. */
.footer-compte-portail {
	display: inline-flex;
	gap: 1rem;
}

.footer-wp-admin {
	color: var(--lmp-creme);
	opacity: 0.35;
	font-size: 0.75rem;
	text-decoration: none;
}

.footer-wp-admin:hover,
.footer-wp-admin:focus-visible {
	opacity: 0.8;
}

@media (max-width: 900px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================
   Accueil — Hero (refonte _reference/Les Minis Positifs - page
   complete.html, 2026-07-29 — remplace l'ancien .hero-wrapper/.hero__*)
   ========================================================== */

/* Rythme d'espacement resserré (2026-09-02, /impeccable audit --
   "beaucoup de place, trop de spacing" signalé par Félix) : padding de
   section ramené à une échelle cohérente (56px, exceptionnellement 64px
   pour la FAQ qui reste la section la plus dense) au lieu du mélange
   60/64/72/80px précédent qui n'ajoutait pas de vraie hiérarchie, juste
   du vide. Voir aussi .pistache-band-inner, .steps, .produits, .philo,
   .faq, .cta plus bas dans ce fichier. */
/* Refonte 2026-09-02 : Hero en 2 colonnes (texte + visuel groupé) pour que
   tout soit visible sans scroll -- avant, le strip photo + Pistache
   étaient empilés sous le texte, poussant Pistache hors de l'écran sur
   beaucoup de résolutions. Retire au passage hero-strip-4-bebe-creme.png
   du visuel (image incohérente avec les 3 autres -- texte/icônes
   incrustés directement dedans, repéré en audit le 2026-09-02). */
.hero {
	background: var(--lmp-creme);
	padding: 44px 0;
	position: relative;
	overflow: hidden;
}

.hero-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	align-items: center;
	gap: 48px;
}

.hero-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 16px;
	border-radius: 20px;
	background: var(--lmp-rose-light);
	color: var(--lmp-lavande-aa);
	font-size: 13.5px;
	font-weight: 600;
}

.chip i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lmp-lavande);
	display: block;
}

/* Titre punché (2026-09-02, demande de Félix -- référence : hero mode
   "fashion" avec surlignage sur un mot-clé). Plus gros, plus lourd
   (800 au lieu du poids par défaut du h1), et "briller" reçoit un
   surlignage façon marqueur (::before, rose, légèrement penché) plutôt
   qu'une simple couleur de texte -- même idée que le badge qui chevauche
   le titre dans la référence, adaptée à la palette existante. */
.hero-text h1 {
	margin-top: 22px;
	font-size: clamp(40px, 4.2vw, 68px);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.02em;
}

.hero-text h1 span {
	color: var(--lmp-lavande);
}

.hero-sub {
	margin-top: 18px;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--lmp-brun-moka);
	max-width: 46ch;
}

.hero-text .btn-row {
	margin-top: 28px;
	justify-content: flex-start;
}

.hero-visual {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hero-visual-photos {
	display: flex;
	gap: 14px;
}

/* Effet "pile de photos" (2026-09-02, demande de Félix) -- chaque photo
   a une carte de couleur décalée derrière elle (::before, légèrement
   pivotée), façon polaroids empilés, plutôt que 3 photos plates alignées.
   Couleurs alternées dans la palette existante (lavande/rose/sauge). */
.hv-photo-wrap {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.hv-photo-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 20px;
	z-index: 0;
}

.hv-photo-wrap--1 {
	transform: rotate(-2.5deg);
}

.hv-photo-wrap--1::before {
	background: var(--lmp-lavande-light);
	transform: rotate(4deg) translate(6px, 8px);
}

.hv-photo-wrap--2 {
	transform: rotate(1.5deg);
}

.hv-photo-wrap--2::before {
	background: var(--lmp-rose);
	transform: rotate(-4deg) translate(-6px, 8px);
}

.hv-photo-wrap--3 {
	transform: rotate(-1.5deg);
}

.hv-photo-wrap--3::before {
	background: var(--lmp-vert-light);
	transform: rotate(3deg) translate(6px, 8px);
}

.hv-photo {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 16px 30px -18px rgba(61, 43, 31, 0.45);
}

.bubble {
	box-sizing: border-box;
	background: var(--lmp-blanc);
	border: 1px solid var(--lmp-lavande-clair);
	border-radius: 16px 16px 4px 16px;
	padding: 13px 17px;
	max-width: 215px;
	box-shadow: 0 16px 34px -20px rgba(61, 43, 31, 0.6);
}

.bubble p {
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--lmp-text-light);
	font-style: italic;
	margin: 0;
}

.bubble span {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--lmp-lavande);
	font-weight: 600;
}

/* position:relative -- pas pour la mise en page (élément normal dans le
   flux de .hero-visual maintenant, sous les 3 photos), mais reste un
   contexte de positionnement valide pour .bubble-dot (position:absolute)
   à l'intérieur. Bulle réduite (voir .hero-visual .bubble--thought
   ci-dessous) pour tenir à côté de Pistache dans la colonne visuelle
   plus étroite qu'avant. */
/* Chevauche le bas de la pile de photos (margin-top négatif) au lieu de
   flotter séparément en dessous -- Pistache fait maintenant partie de la
   composition plutôt que de sembler ajoutée après coup (signalé par
   Félix, 2026-09-02). Alignée à droite (margin-left:auto), près de la
   3e photo. z-index pour passer par-dessus les photos qu'elle chevauche. */
.hero-mascot {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	width: fit-content;
	margin-top: -46px;
	margin-left: auto;
	margin-right: 6%;
	gap: 18px;
}

.hero-visual .bubble--thought {
	width: 250px;
	max-width: 250px;
}

.hero-mascot img {
	width: 130px;
	filter: drop-shadow(0 14px 22px rgba(61, 43, 31, 0.28));
}

/* Bulle de pensée façon cartoon (anime.js, voir assets/js/hero-bubble.js) --
   vrai contour de nuage en SVG (.bubble-cloud, cercles superposés qui se
   fondent en une seule forme) au lieu d'un border-radius qui rendait juste
   un ovale plat ("dessiné avec Paint", signalé par Félix le 2026-09-02) --
   + 2 petits ronds qui la relient à Pistache. État de repos ici (caché) :
   le JS pilote l'entrée, ce style est juste le point de départ. */
/* display:flex + centrage ajoutés ici (2026-09-02, Félix : "TRES TRES
   decentré", capture à l'appui). .bubble-content n'était jamais centré
   VERTICALEMENT dans le nuage -- il restait en haut du bloc par défaut
   (flux normal), laissant tout le bas du nuage vide. Le padding seul ne
   pouvait pas corriger ça correctement. Centrage flex réel sur les deux
   axes maintenant ; .bubble-content garde un léger padding horizontal
   asymétrique pour compenser le poids visuel des bubble-dot à droite. */
.bubble--thought {
	position: relative;
	width: 250px;
	max-width: 250px;
	aspect-ratio: 250 / 158;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	opacity: 0;
	transform: scale(0.4);
	transform-origin: 92% 100%;
}

.bubble-cloud {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 14px 20px rgba(61, 43, 31, 0.22));
}

/* Décalage optique (2026-09-02, Félix : "centrer le texte dans le nuage").
   Le texte etait deja centre mathematiquement dans .bubble-content, mais
   les 2 bubble-dot juste a l'exterieur du coin bas-droit de la bulle
   (menant a Pistache) ajoutent du poids visuel de ce cote, donnant
   l'impression que le texte penche a gauche. Padding asymetrique pour
   recentrer optiquement (moins a gauche/haut, plus a droite/bas). */
.bubble-content {
	position: relative;
	z-index: 1;
	padding: 0 30px 0 22px;
	text-align: center;
}

.hero-visual .bubble-content p {
	font-size: 14px;
}

.hero-visual .bubble-content span {
	font-size: 12px;
}

.bubble-dot {
	position: absolute;
	background: var(--lmp-blanc);
	border: 1px solid var(--lmp-lavande-clair);
	border-radius: 50%;
	box-shadow: 0 10px 20px -14px rgba(61, 43, 31, 0.6);
	opacity: 0;
	transform: scale(0.3);
}

.bubble-dot--2 {
	width: 16px;
	height: 16px;
	right: 112px;
	bottom: 122px;
}

.bubble-dot--1 {
	width: 9px;
	height: 9px;
	right: 96px;
	bottom: 150px;
}

@media (max-width: 900px) {
	.hero {
		padding-top: 40px;
	}

	/* 2 colonnes -> empilé (texte puis visuel), même schéma que
	   .pistache-band et .hero-mascot plus haut sur cette page. */
	.hero-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.hero-text {
		align-items: center;
		text-align: center;
	}

	.hero-text .btn-row {
		justify-content: center;
	}

	.hero-visual {
		align-items: center;
	}

	.hero-visual-photos {
		justify-content: center;
	}

	.hero-mascot {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.hero-visual-photos {
		gap: 8px;
	}

	.hero-mascot img {
		width: 84px;
	}

	.hero-visual .bubble--thought {
		width: 168px;
		max-width: 168px;
	}

	.hero-visual .bubble-content p {
		font-size: 11px;
	}
}

/* ==========================================================
   Accueil — Section Pistache (refonte 2026-07-29, remplace l'ancien
   .pistache-home-v2/.pistache-section/etc.)
   ========================================================== */

/* padding-top retiré (2026-09-02, /impeccable audit -- "gap beige/blanc/
   bleu entre 2 sections", signalé par Félix avec capture). .pistache a
   son propre fond (--lmp-blanc-casse, un crème légèrement différent de
   celui du Hero) et son padding-top de 44px laissait une fine bande de
   CE fond visible avant que .pistache-band (le vrai bandeau mauve
   pleine largeur) ne commence -- 3 tons qui se succèdent sur peu de
   hauteur, lu comme un bug plutôt qu'une respiration voulue. Le mauve
   démarre maintenant directement à la fin du Hero ; padding-bottom
   conservé pour l'espace après les 3 étapes. */
.pistache {
	background: var(--lmp-blanc-casse);
	padding: 0 0 44px;
}

.pistache-band {
	background: var(--lmp-rose-light);
	position: relative;
	padding: 0 32px;
	display: flex;
	justify-content: center;
}

.pistache-band-inner {
	max-width: 640px;
	padding: 28px 0 22px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.pistache-band h2 {
	font-size: 42px;
	line-height: 1.08;
}

.pistache-band p {
	font-size: 17.5px;
	line-height: 1.65;
	color: var(--lmp-text-light);
}

.pistache-band .eyebrow {
	color: var(--lmp-lavande);
}

/* Le texte reste centré sur la page (.pistache-band-inner, max-width:640px,
   flex justify-content:center sur le parent) comme à l'origine -- pas de
   wrapper de groupe qui le pousserait hors du centre.
   Pistache est ancrée en position:absolute directement dans .pistache-band,
   mais avec left calculé par rapport au centre réel de la page (50%) plutôt
   qu'une distance fixe depuis le bord de la section -- corrige le bug
   d'origine (Pistache figée à 34px du bord gauche, distance grandissante
   sur grand écran) sans dépendre d'un wrapper supplémentaire :
   50% = centre de .pistache-band = centre du bloc texte (tant que le
   viewport est assez large pour que le bloc soit à son max-width de 640px,
   donc >= 900px -- en dessous, le media query prend le relais en flux
   normal). 320px = moitié du bloc texte, 150px = déborde de 40px dans le
   bloc (190px de large - 150px). */
.pistache-band .pistache-img-wrap {
	position: absolute;
	left: calc(50% - 520px);
	bottom: -34px;
	width: 190px;
}

.pistache-band .pistache-img-wrap > img {
	display: block;
	width: 100%;
	filter: drop-shadow(0 18px 26px rgba(61, 43, 31, 0.25));
}

/* Coeurs flottants animés autour de Pistache (anime.js, voir
   assets/js/pistache-coeurs.js) -- retrouvés dans le CSS capturé des
   pages contact/faq/nos-creations de _reference (absents de
   lesminispositifs-accueil.html mais présents ailleurs sur le site
   original -- animation @keyframes pistacheFloatRight, jamais réintégrée
   lors de la refonte du 2026-07-29). opacity:0 ici : anime.js pilote
   entièrement l'apparition, ce style est juste l'état de repos avant JS. */
.pistache-coeur {
	position: absolute;
	left: 70%;
	top: 61%;
	color: #E8A9B8;
	opacity: 0;
	pointer-events: none;
}

.pistache-coeur svg {
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}

.pistache-coeur svg path {
	stroke: #C0527A;
	stroke-width: 1.5;
}

.pistache-coeur.c1 { font-size: 28px; }
.pistache-coeur.c2 { font-size: 23px; }
.pistache-coeur.c3 { font-size: 26px; }

.steps {
	max-width: 1200px;
	margin: 0 auto;
	padding: 26px 32px 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

/* Cartes punchées (2026-09-02, demande de Félix) : texte centré, numéro
   agrandi avec fond mauve plein (--lmp-lavande-aa, déjà validé AA pour
   le contraste) au lieu du pastel discret, ombre portée à la place du
   contour fin, léger effet de soulèvement au survol. */
.step {
	background: var(--lmp-blanc);
	border: none;
	border-radius: 20px;
	padding: 34px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	box-shadow: 0 18px 34px -22px rgba(61, 43, 31, 0.4);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 38px -18px rgba(61, 43, 31, 0.45);
}

.step i {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--lmp-lavande-aa);
	color: var(--lmp-blanc);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	box-shadow: 0 10px 18px -6px rgba(129, 92, 172, 0.55);
}

.step b {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
}

.step p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--lmp-text-light);
	margin: 0;
}

.pistache .btn-row {
	justify-content: center;
	margin-top: 20px;
}

@media (max-width: 900px) {
	.pistache-band {
		flex-direction: column;
		align-items: center;
		padding-bottom: 24px;
	}

	.pistache-band .pistache-img-wrap {
		position: static;
		width: 150px;
		margin: 0 auto -20px;
	}

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

/* ==========================================================
   Accueil — Nos vêtements (refonte 2026-07-29 — remplace .vetements/
   .vetement-card sur l'accueil ; ces classes restent utilisées telles
   quelles par /boutique-personnaliser/, non touchées ici)
   ========================================================== */

.produits {
	background: var(--lmp-creme);
	padding: 44px 0;
}

.section-head-center {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
}

.section-head-center h2 {
	font-size: 42px;
	line-height: 1.08;
}

.section-head-center p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--lmp-text-light);
	max-width: 54ch;
	margin: 0;
}

.grid-produits {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	grid-template-rows: 216px 216px;
	gap: 18px;
}

.card-feature {
	grid-row: span 2;
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	background: var(--lmp-creme-dark);
	text-decoration: none;
}

.card-feature > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-feature-body {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: linear-gradient(180deg, rgba(61, 43, 31, 0), rgba(61, 43, 31, 0.72));
}

.tag {
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 14px;
	background: var(--lmp-blanc);
	color: var(--lmp-lavande);
	font-size: 12.5px;
	font-weight: 700;
	font-family: var(--font-heading);
	margin-bottom: 4px;
}

.card-feature h3 {
	font-size: 26px;
	color: var(--lmp-blanc);
}

.card-feature p {
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
	max-width: 34ch;
	margin: 0;
}

.card {
	background: var(--lmp-blanc);
	border: 1px solid var(--lmp-lavande-clair);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: border-color 0.18s, transform 0.18s;
}

.card:hover {
	border-color: var(--lmp-lavande);
	transform: translateY(-3px);
}

.card img {
	width: 100%;
	height: 132px;
	object-fit: cover;
	display: block;
}

.card-body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.card-body b {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16.5px;
	color: var(--lmp-brun);
}

.card-body span {
	font-size: 14px;
	line-height: 1.45;
	color: var(--lmp-text-light);
}

@media (max-width: 1024px) {
	.grid-produits {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}

	.card-feature {
		grid-row: span 1;
		min-height: 300px;
	}
}

@media (max-width: 900px) {
	.grid-produits {
		grid-template-columns: 1fr;
	}

	.card-feature {
		min-height: 260px;
	}
}

/* ==========================================================
   Accueil — Philosophie (refonte 2026-07-29 — remplace .pourquoi/
   .avantages-grid/.avantage-card sur l'accueil ; ces classes ne sont
   utilisées nulle part ailleurs, laissées inertes plutôt que
   supprimées)
   ========================================================== */

.philo {
	background: var(--lmp-creme);
	padding: 44px 0;
}

.philo-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 64px;
	align-items: start;
}

.philo-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.philo-left h2 {
	font-size: 42px;
	line-height: 1.08;
}

.philo-lead {
	font-size: 21px;
	line-height: 1.5;
	color: var(--lmp-lavande);
	max-width: 34ch;
	margin: 0;
}

.philo-text {
	font-size: 17px;
	line-height: 1.7;
	color: var(--lmp-text-light);
	max-width: 46ch;
	margin: 0;
}

.values {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* Punché (2026-09-02, demande de Félix) : fond blanc + ombre au lieu du
   beige plat, icône agrandie en badge mauve plein (même
   --lmp-lavande-aa que les cartes étapes) au lieu du contour pastel,
   soulèvement au survol -- même traitement que .step pour cohérence
   entre les deux jeux de cartes de la page. */
.value {
	background: var(--lmp-blanc);
	border-radius: 20px;
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: 0 16px 30px -22px rgba(61, 43, 31, 0.4);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.value:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 34px -18px rgba(61, 43, 31, 0.45);
}

.value i {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--lmp-lavande-aa);
	color: var(--lmp-blanc);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-style: normal;
	box-shadow: 0 10px 18px -6px rgba(129, 92, 172, 0.5);
}

.value b {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 19px;
}

.value p {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--lmp-text-light);
	margin: 0;
}

@media (max-width: 1024px) {
	.philo-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

@media (max-width: 900px) {
	.values {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================
   Accueil — FAQ (refonte 2026-07-29, 3 catégories + <details>/
   <summary> — remplace .faq-home/.faq-home__list/.faq-home__cta du
   chantier FAQ précédent. Règles scopées sous .faq pour ne pas
   toucher .faq-list/.faq-item de l'ancienne page /faq/ dédiée
   — devenue inaccessible, redirigée en 301, mais dont le CSS reste
   en place par précaution.)
   ========================================================== */

/* Fond changé de --lmp-blanc-casse (#FDFBF8) à --lmp-rose-light
   (#F5F0FF) -- 2026-09-02, Félix : quasiment impossible à distinguer du
   blanc pur de .philo juste au-dessus (#FFFFFF vs #FDFBF8). La teinte
   lavande donne une vraie séparation et fait écho à la couleur d'accent
   du site plutôt qu'un quasi-blanc de plus. */
.faq {
	background: var(--lmp-blanc);
	padding: 44px 0 48px;
	scroll-margin-top: 1.5rem;
	position: relative;
}

/* Fleurs décoratives réintégrées (présentes sur l'ancienne page /faq/ dédiée,
   perdues lors de la consolidation de la FAQ sur l'accueil le 2026-07-29) --
   même image que .faq-hero__flower, namespace distinct (.faq__flower) pour ne
   jamais toucher l'ancienne page, dont le CSS reste en place par précaution. */
.faq__flower {
	position: absolute;
	top: -8px;
	opacity: 1;
	filter: drop-shadow( 0 2px 4px rgba( 61, 43, 31, 0.25 ) );
	pointer-events: none;
	z-index: 1;
}

.faq__flower--left {
	left: 2%;
	width: 46px;
}

.faq__flower--right {
	top: 4px;
	right: 2%;
	width: 54px;
}

@media ( max-width: 900px ) {
	.faq__flower {
		display: none;
	}
}

.faq .faq-grid {
	display: grid;
	grid-template-columns: 0.72fr 1.28fr;
	gap: 56px;
	align-items: start;
}

.faq-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.faq-left h2 {
	font-size: 40px;
	line-height: 1.08;
}

.faq-left p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--lmp-text-light);
	max-width: 34ch;
	margin: 0;
}

.faq-help {
	margin-top: 14px;
	background: var(--lmp-blanc);
	border: 1px solid var(--lmp-lavande-clair);
	border-radius: 20px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	width: 100%;
	box-sizing: border-box;
}

.faq-help b {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 17px;
}

.faq-help p {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--lmp-text-light);
	margin: 0;
}

/* box-sizing:border-box -- sans ça, le padding (56px total) s'ajoutait
   par-dessus la largeur pleine de 100% que prend .faq-list quand
   .faq-grid passe en 1 colonne sous 1024px, débordant l'écran de 34px
   à 390px (scrollWidth 424 vs clientWidth 390, trouvé via /impeccable
   critique le 2026-09-02). */
.faq .faq-list {
	box-sizing: border-box;
	width: 100%;
	background: var(--lmp-blanc);
	border: 1px solid var(--lmp-lavande-clair);
	border-radius: 24px;
	padding: 8px 28px 20px;
}

.faq-cat {
	padding: 26px 0 6px;
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lmp-lavande-aa);
}

.faq-cat:first-child {
	padding-top: 24px;
}

.faq .faq-list details {
	border-top: 1px solid var(--lmp-creme-dark);
}

.faq .faq-list summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 17px;
	color: var(--lmp-brun);
	transition: color 0.18s;
}

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

.faq .faq-list summary:hover {
	color: var(--lmp-lavande);
}

.faq .faq-list summary::after {
	content: "+";
	color: var(--lmp-lavande);
	font-size: 20px;
	line-height: 1;
}

.faq .faq-list details[open] summary::after {
	content: "–";
}

.faq .faq-list details p {
	margin: -6px 0 20px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--lmp-text-light);
	max-width: 70ch;
}

@media (max-width: 1024px) {
	.faq .faq-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

/* ==========================================================
   Accueil — CTA final (refonte 2026-07-29 — remplace .marque-citation ;
   cette dernière n'est utilisée nulle part ailleurs, laissée inerte)
   ========================================================== */

/* padding-top ajouté (2026-09-02 -- "section CTA trop collée avec la
   FAQ", signalé par Félix). .cta n'avait jamais eu de padding-top (0),
   comptant uniquement sur le padding-bottom de .faq pour l'espace --
   au fil des passes de resserrement du spacing, ce n'était plus assez
   pour une carte de couleur pleine aussi visible : elle avait l'air
   collée à la section du dessus plutôt que d'être son propre moment. */
.cta {
	background: var(--lmp-creme);
	padding: 56px 0 44px;
}

.cta-inner {
	max-width: 1200px;
	margin: 0 auto;
	background: var(--lmp-rose-light);
	border-radius: 28px;
	padding: 64px 56px;
	display: flex;
	align-items: center;
	gap: 48px;
}

.cta-inner > img {
	width: 210px;
	flex-shrink: 0;
	filter: drop-shadow(0 18px 26px rgba(61, 43, 31, 0.22));
}

.cta-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.cta-text h2 {
	font-size: 42px;
	line-height: 1.08;
	max-width: 20ch;
}

.cta-text p {
	font-size: 17.5px;
	line-height: 1.65;
	color: var(--lmp-text-light);
	max-width: 50ch;
	margin: 0;
}

/* Ligne rassurante ajoutée sous le CTA final (2026-09-02, suite à
   /impeccable critique) -- la FAQ juste au-dessus mentionne la politique
   de non-remboursement sans rien pour la contrebalancer près d'un bouton
   d'action. Réutilise une affirmation déjà validée (même phrase que la
   FAQ "Est-ce que je dois vérifier l'orthographe ?"), pas une nouvelle
   promesse inventée. */
.cta-reassurance {
	font-size: 13.5px;
	color: var(--lmp-text-light);
	margin: -8px 0 0;
}

.cta-pics {
	margin-left: auto;
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

.cta-pics img {
	width: 132px;
	height: 210px;
	object-fit: cover;
	border-radius: 20px;
}

.cta-pics img:last-child {
	margin-top: 26px;
}

@media (max-width: 1024px) {
	.cta-pics {
		display: none;
	}
}

@media (max-width: 900px) {
	.cta-inner {
		flex-direction: column;
		text-align: center;
		padding: 48px 24px;
		gap: 28px;
	}

	.cta-text {
		align-items: center;
	}

	.cta-text .btn-row {
		justify-content: center;
	}
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.eyebrow {
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lmp-text-light);
}

.btn--ghost {
	border: 1.5px solid var(--lmp-lavande-clair);
	color: var(--lmp-brun);
	background: var(--lmp-blanc);
}

.btn--ghost:hover {
	border-color: var(--lmp-lavande);
	color: var(--lmp-lavande);
}

@media (max-width: 900px) {
	.section-head-center h2,
	.philo-left h2,
	.faq-left h2,
	.cta-text h2,
	.pistache-band h2 {
		font-size: 32px;
	}
}

.btn--sage {
	background: var(--lmp-sauge);
	color: var(--lmp-brun);
}

.btn--sage:hover {
	background: var(--lmp-brun);
	color: var(--lmp-blanc);
}

.btn--lg {
	padding: 0.9rem 2rem;
	font-size: 1.05rem;
}

@media (max-width: 720px) {
	.pistache-section {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 2.5rem 1.5rem;
	}

	.pistache-bulle {
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==========================================================
   Accueil — En-tête de section partagé (tag + titre + intro)
   ========================================================== */

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.section-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 3rem;
}

.section-tag {
	display: inline-block;
	background: var(--lmp-rose);
	color: var(--lmp-brun);
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	margin-bottom: 1rem;
}

.section-header h2 {
	font-size: clamp(1.6rem, 3.5vw, 2.3rem);
	margin-bottom: 0.75rem;
}

.section-header p {
	color: var(--lmp-brun);
	opacity: 0.8;
	line-height: 1.6;
	margin: 0;
}

/* ==========================================================
   Accueil — Nos vêtements
   ========================================================== */

.vetements {
	padding: 4rem 1.5rem;
}

.vetements__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem;
}

.vetement-card {
	background: var(--lmp-blanc);
	border: 1px solid var(--lmp-lavande-clair);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex: 1 1 220px;
	max-width: 280px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vetement-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(61, 43, 31, 0.1);
}

.vetement-card__visual {
	position: relative;
	aspect-ratio: 4 / 3;
}

.vetement-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vetement-card__pastille {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--lmp-blanc);
}

.vetement-card__body {
	padding: 1.25rem 1.25rem 1.5rem;
}

.vetement-card__name {
	font-family: var(--font-heading);
	font-size: 1.15rem;
	margin: 0 0 0.4rem;
	color: var(--lmp-brun);
}

.vetement-card__desc {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--lmp-brun);
	opacity: 0.8;
	margin: 0 0 0.9rem;
}

.vetement-card__cta {
	color: var(--lmp-lavande);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}

.vetement-card__cta:hover {
	color: var(--lmp-brun);
}

/* Titre de section en h1 (pas h2) — utilisé par la page Boutique &
   personnaliser, dont le titre "Commencez votre création" EST le titre
   principal de la page (page-boutique-personnaliser.php n'affiche pas de
   h1.entry-title générique). Additif : ne touche pas .section-header h2
   utilisé par les sections de l'accueil. */
.section-header h1 {
	font-family: var(--font-heading);
	font-size: clamp(2.2rem, 4vw, 3.2rem);
	color: var(--lmp-brun);
	margin-bottom: 12px;
}

/* ==========================================================
   Boutique & personnaliser — grille "Commencez votre création"

   Réutilise les classes .vetement-card/.vetement-card__* déjà définies
   ci-dessus pour l'accueil, mais avec une présentation différente (photo
   plus haute, CTA en pastille colorée par vêtement, texte plus grand) —
   confirmée par le CSS réel du site (boutique-personnaliser-source-complet.txt,
   .vetement-card__name/.vetement-card__desc y sont surchargés en !important
   globalement). Plutôt que de dupliquer ce chevauchement fragile, tout est
   scopé sous .boutique-personnaliser__grid : la grille de l'accueil (bare
   .vetement-card, hors de ce conteneur) n'est jamais affectée.
   ========================================================== */

.boutique-personnaliser__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
}

.boutique-personnaliser__grid .vetement-card {
	background: var(--lmp-blanc);
	border-radius: 24px;
	overflow: hidden;
	transition: all 0.28s ease;
	border: 2px solid transparent;
	cursor: pointer;
	text-align: center;
	height: 100%;
	width: 100%;
	max-width: none;
	display: flex;
	flex-direction: column;
}

.boutique-personnaliser__grid .vetement-card:hover {
	border-color: var(--lmp-lavande-clair);
	transform: translateY(-6px);
	box-shadow: 0 4px 24px rgba(61, 43, 31, 0.09);
}

.boutique-personnaliser__grid .vetement-card__visual {
	padding: 8px;
	height: 220px;
	box-sizing: border-box;
}

.boutique-personnaliser__grid .vetement-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Beaucoup plus arrondi (10px -> 28px) pour un rendu plus doux -- demande
	   de Christine, 2026-09-10, sur les nouvelles photos thumbnails. */
	border-radius: 28px;
	background: var(--lmp-blanc);
	display: block;
	transition: transform 0.28s ease;
}

.boutique-personnaliser__grid .vetement-card:hover .vetement-card__img {
	transform: scale(1.05);
}

.boutique-personnaliser__grid .vetement-card__body {
	padding: 20px 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.boutique-personnaliser__grid .vetement-card__name {
	font-family: var(--font-heading);
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--lmp-brun);
	margin-bottom: 6px;
}

.boutique-personnaliser__grid .vetement-card__price {
	font-family: var(--font-heading);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--lmp-lavande-aa);
	margin-bottom: 10px;
}

.boutique-personnaliser__grid .vetement-card__desc {
	font-size: 1.05rem;
	color: #2E2018;
	opacity: 1;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: 16px;
}

.boutique-personnaliser__grid .vetement-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	font-weight: 800;
	padding: 8px 18px;
	border-radius: 50px;
	transition: all 0.28s ease;
	border: none;
	cursor: pointer;
	text-decoration: none;
}

/* Une couleur de bouton par vêtement — valeurs exactes du vrai site,
   pas une palette --lmp-* réinterprétée : #D8C7A8/#3D2B1F (pantalon) est
   la seule paire à texte brun, toutes les autres sont blanches. */
.boutique-personnaliser__grid .vetement-card:nth-child(1) .vetement-card__cta { background: #8AA6C9; color: #fff; }
.boutique-personnaliser__grid .vetement-card:nth-child(2) .vetement-card__cta { background: #C68A9A; color: #fff; }
.boutique-personnaliser__grid .vetement-card:nth-child(3) .vetement-card__cta { background: #8FAE83; color: #fff; }
.boutique-personnaliser__grid .vetement-card:nth-child(4) .vetement-card__cta { background: #D8C7A8; color: #3D2B1F; }

.boutique-personnaliser__grid .vetement-card:hover .vetement-card__cta {
	background: var(--lmp-brun);
	color: var(--lmp-creme);
}

@media (max-width: 1200px) {
	.boutique-personnaliser__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.boutique-personnaliser__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.boutique-personnaliser__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================
   Accueil — Pourquoi Les Minis Positifs
   ========================================================== */

.pourquoi {
	padding: 4rem 1.5rem;
	background: var(--lmp-blanc);
}

.pourquoi__intro {
	text-align: center;
	max-width: 640px;
	margin: -1.5rem auto 2rem;
	font-family: var(--font-accent);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--lmp-lavande);
}

.pourquoi__texte p {
	font-size: 0.98rem;
}

.avantages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem;
	margin-top: 1rem;
}

.avantage-card {
	text-align: center;
	padding: 1.5rem 1rem;
}

.avantage-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
}

.avantage-card__icon img {
	width: 64px;
	height: 64px;
}

.avantage-card__title {
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
}

.avantage-card__text {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--lmp-brun);
	opacity: 0.8;
	margin: 0;
}

/* ==========================================================
   Accueil — Comment ça fonctionne (restaurée 2026-09-03, demande de
   Christine -- section retirée pendant la refonte du 2026-07-29,
   jamais réintégrée. Christine veut explicitement les 6 vraies
   images (pas des lignes de texte) : etape-1..6.png sont un crop
   de la planche icones-etapes.png déjà présente dans les uploads.

   Fond blanc retiré le 2026-09-03 (Félix) : les PNG d'origine étaient
   des cartes à coins arrondis (voulues -- couleur pastel + badge
   numéroté + texte, à garder intactes) posées sur un canevas JPG
   blanc légèrement plus grand que la carte elle-même -- seul ce
   contour blanc devait disparaître, pas tout le fond de la carte
   (première passe trop agressive, corrigée : un détourage plein sujet
   avait aussi effacé le badge/texte de façon incohérente d'une image
   à l'autre). Corrigé par un flood fill DEPUIS LES 4 COINS RÉELS de
   chaque image (garantis hors de la carte, coupés par son rayon
   d'arrondi) avec une tolérance de couleur serrée (12/765, un seul pas
   depuis le pixel de coin -- pas un flood fill chaîné, qui dérivait
   dans les cartes très pâles comme etape-6, crème proche du blanc) :
   ne retire QUE le canevas JPG hors de la carte, jamais l'intérieur
   même pâle. etape-N-icon.png, uploads/2026/07/, coins transparents,
   carte + badge + texte intacts -- voir script dans les notes de
   session, pas committé (traitement ponctuel, pas un outil réutilisé).
   filter:drop-shadow (pas box-shadow, qui dessinerait un rectangle
   incluant la marge transparente désormais coupée) pour l'ombre
   portée, suit le contour réel de la carte détourée.
   ========================================================== */

.fonctionnement {
	background: var(--lmp-blanc-casse);
	padding: 44px 0;
}

.etapes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 8px;
}

.etape-img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 8px 16px rgba(61, 43, 31, 0.12));
	transition: filter 0.25s ease;
}

/* .etape-tile (pas .etape-img directement) porte le transform de survol :
   anime.js (scroll-reveal.js) pose un style inline transform/opacity SUR
   .etape-img à la révélation, et un style inline gagne toujours contre une
   règle de feuille de style, hover ou pas -- un transform CSS sur
   .etape-img:hover serait donc silencieusement écrasé une fois la révélation
   jouée. Le wrapper .etape-tile, jamais touché par anime.js, n'a pas ce
   problème. (2026-09-03) */
.etape-tile {
	display: block;
	transition: transform 0.25s ease;
}

.etape-tile:hover {
	transform: translateY(-6px);
}

.etape-tile:hover .etape-img {
	filter: drop-shadow(0 14px 24px rgba(61, 43, 31, 0.18));
}

.fonctionnement-cta {
	text-align: center;
	margin-top: 32px;
}

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

@media (max-width: 480px) {
	.etapes-grid {
		grid-template-columns: 1fr;
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==========================================================
   Accueil — Galerie d'inspiration
   ========================================================== */

.galerie-home {
	padding: 4rem 1.5rem;
	background: var(--lmp-blanc);
}

/* Galerie défilante de l'accueil (2026-09-09) -- remplace la grille figée de
   6 photos aléatoires : un vrai ruban qui défile en continu (scrollLeft
   incrémenté en JS, contenu dupliqué pour boucler sans à-coup), + flèches et
   glisser/déposer manuels qui mettent l'auto-défilement en pause. Distinct de
   .galerie-masonry (page /nos-creations/ dédiée, jamais touchée). */
.galerie-scroll {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
}

.galerie-scroll__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px 0;
}

.galerie-scroll__track::-webkit-scrollbar {
	display: none;
}

.galerie-scroll__item {
	flex: 0 0 auto;
	width: 220px;
	border-radius: 16px;
	overflow: hidden;
	display: block;
}

.galerie-scroll__item img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
}

.galerie-scroll__arrow {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--lmp-creme-dark);
	background: var(--lmp-blanc);
	color: var(--lmp-brun);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.galerie-scroll__arrow:hover {
	background: var(--lmp-lavande-clair);
	color: var(--lmp-blanc);
}

@media ( max-width: 640px ) {
	.galerie-scroll__arrow {
		display: none;
	}

	.galerie-scroll__item {
		width: 160px;
	}

	.galerie-scroll__item img {
		height: 190px;
	}
}

/* Titre de section en h1 (pas h2) — page Nos créations, dont le titre
   "Nos créations en images" EST le titre principal de la page (même
   composant .galerie-home que l'accueil, réutilisé tel quel, mais
   l'accueil l'utilise en sous-section donc h2). Additif, ne touche pas
   .section-header h2. */
.galerie-home--page .section-header h1 {
	font-size: clamp(1.6rem, 3.5vw, 2.3rem);
	margin-bottom: 0.75rem;
}

/* Catalogue complet (2026-09-10) — sous la galerie défilante de la page Nos
   créations, une grille statique avec TOUTES les photos du même POOL
   (identique à l'accueil) plutôt qu'une sélection à part : remplace
   l'ancienne .galerie-masonry (mise en page asymétrique grand/petit, à la
   main, 21/46 photos seulement, jamais tenue à jour avec les nouvelles
   photos ajoutées côté accueil -- demande explicite de Félix, "les mêmes
   photos que dans la galerie"). Grille uniforme simple : s'ajoute
   automatiquement pour toute nouvelle photo ajoutée au POOL de l'accueil,
   aucune retouche manuelle de mise en page requise. Pas de légendes ici
   (contrairement à l'ancienne masonry) -- seulement 21/46 photos en
   avaient une (texte générique recyclé des phrases Pistache, pas une vraie
   description par photo) ; laissé de côté pour un catalogue cohérent sur
   les 46 plutôt qu'un mélange à moitié légendé. */
.galerie-catalogue-section {
	padding: 4rem 1.5rem 5rem;
	background: var(--lmp-creme);
}

.galerie-catalogue {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}

.galerie-catalogue__item {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.galerie-catalogue__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.galerie-catalogue__item:hover img {
	transform: scale(1.05);
}

@media (max-width: 640px) {
	.galerie-catalogue {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 10px;
	}
}

/* ==========================================================
   Accueil — FAQ (consolidée depuis /faq/ le 2026-07-28, voir
   lmp_redirect_faq_page() dans functions.php ; contenu + JSON-LD FAQPage
   directement dans le post_content, comportement d'accordéon ci-dessous
   dans page-accueil.php)
   ========================================================== */

.faq-home {
	padding: 4rem 1.5rem;
	scroll-margin-top: 1.5rem;
}

.faq-home__list {
	max-width: 780px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.faq-home__cta {
	text-align: center;
	margin-top: 2.5rem;
}

.faq-home__cta p {
	font-size: 1.05rem;
	color: var(--lmp-brun);
	font-weight: 600;
	margin-bottom: 14px;
}

/* ==========================================================
   Accueil — Phrase de marque
   ========================================================== */

.marque-citation {
	background: var(--lmp-brun);
	padding: 5rem 1.5rem;
	text-align: center;
}

.marque-citation__phrase {
	font-family: var(--font-accent);
	font-style: italic;
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	color: var(--lmp-creme);
	max-width: 700px;
	margin: 0 auto 1.75rem;
	line-height: 1.5;
}

.marque-citation__sous-texte {
	font-size: 0.95rem;
	color: var(--lmp-creme);
	opacity: 0.65;
	max-width: 500px;
	margin: 0 auto 2.25rem;
	line-height: 1.75;
}

/* ==========================================================
   Notre histoire

   Fleurs décoratives (.carte-fleur) scopées sous .apropos-hero /
   .fondatrice-section plutôt que par le sélecteur d'attribut fragile
   section[style*="--creme"] utilisé sur le vrai site (repose sur le
   contenu littéral d'un style inline, casse au moindre refactor) —
   même résultat visuel, sélection par classe réelle à la place.
   ========================================================== */

.apropos-hero {
	background: #EDE7F2;
	padding: 4rem 2rem;
	position: relative;
	overflow: hidden;
}

.apropos-hero__brand {
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem 1rem;
	position: relative;
	z-index: 1;
}

.apropos-hero__badge {
	position: relative;
	display: inline-block;
	background: var(--lmp-lavande-clair);
	color: var(--lmp-brun);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 16px;
	border-radius: 20px;
	margin-bottom: 1.2rem;
}

.apropos-hero__badge-flower {
	position: absolute;
	top: -22px;
	right: -20px;
	width: 42px;
	height: auto;
	pointer-events: none;
}

.apropos-hero__title {
	font-family: var(--font-heading);
	color: var(--lmp-brun);
	font-size: clamp(1.8rem, 3vw, 2.8rem);
	line-height: 1.2;
	margin: 0 0 1rem;
}

.apropos-hero__subtitle {
	color: #6B5E78;
	font-size: 1.05rem;
	line-height: 1.7;
	margin: 0 0 1rem;
}

.apropos-hero__body {
	color: #564B47;
	line-height: 1.6;
	margin: 0 0 0.8rem;
	font-size: 0.97rem;
}

.fondatrice-section {
	background: var(--lmp-creme);
	padding: 5rem 2rem;
	position: relative;
}

.fondatrice-section__inner {
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.fondatrice-section .section-header {
	text-align: center;
	margin-bottom: 3rem;
}

.fondatrice-section .section-header h2 {
	font-family: var(--font-heading);
	color: var(--lmp-brun);
	margin: 1rem 0;
	font-size: 2.5rem;
}

.fondatrice-grid {
	display: grid;
	grid-template-columns: minmax(260px, 360px) 1fr;
	gap: 2.5rem;
	align-items: center;
}

.fondatrice-grid__photo-wrap {
	position: relative;
	max-width: 340px;
	margin: 0 auto;
}

.fondatrice-grid__photo {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 20px;
	border: 5px solid var(--lmp-lavande-bordure);
	box-shadow: 0 10px 28px rgba(61, 43, 31, 0.15);
}

.fondatrice-grid__photo-flower {
	position: absolute;
	top: -28px;
	right: -28px;
	width: 90px;
	height: auto;
	pointer-events: none;
}

.fondatrice-grid__text p {
	color: var(--lmp-brun-moka);
	line-height: 1.8;
	margin: 0 0 1rem;
}

.fondatrice-grid__text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 720px) {
	.fondatrice-grid {
		grid-template-columns: 1fr;
	}
}

/* .carte-fleur (composant de base) existe déjà, réutilisé sur l'accueil
   (.pistache-section : fleurs 64px, coins -16px). Notre histoire a besoin
   d'un gabarit différent (fleurs 90px+, coins +8px, plus grandes en coin
   haut-droit) — scopé entièrement sous .apropos-hero/.fondatrice-section
   plutôt que de redéfinir .carte-fleur globalement, pour ne jamais changer
   l'apparence des fleurs de la section Pistache. */
/* position:absolute manquant ici (2026-09-02, /impeccable audit --
   "Notre histoire spacing weird en maudit", signalé par Félix). Les
   variantes .coin-hg/.coin-hd/.coin-bg/.coin-bd posent des top/left/
   right/bottom plus bas dans ce fichier, mais SANS position:absolute sur
   la règle de base ces valeurs ne font rien -- les 3 fleurs (jusqu'à
   280px de large, images sources carrées 1254x1254) restaient en flux
   normal et s'empilaient avant le contenu réel, créant un vide d'environ
   530px avant le titre du hero. Les parents (.apropos-hero,
   .fondatrice-section) avaient déjà position:relative, prêts à recevoir
   ces enfants en absolute -- il ne manquait que cette seule ligne. */
.apropos-hero .carte-fleur,
.fondatrice-section .carte-fleur {
	position: absolute;
	width: 90px;
	opacity: 0.55;
	z-index: 0;
}

.apropos-hero .carte-fleur.coin-hg,
.fondatrice-section .carte-fleur.coin-hg {
	top: 8px;
	left: 8px;
}

.apropos-hero .carte-fleur.coin-hd,
.fondatrice-section .carte-fleur.coin-hd {
	width: 280px;
	top: 8px;
	right: 8px;
	transform: scaleX(-1);
	opacity: 0.7;
}

.apropos-hero .carte-fleur.coin-bg,
.fondatrice-section .carte-fleur.coin-bg {
	bottom: 8px;
	left: 8px;
	transform: scaleY(-1);
}

.apropos-hero .carte-fleur.coin-bd,
.fondatrice-section .carte-fleur.coin-bd {
	bottom: 8px;
	right: 8px;
	transform: scale(-1, -1);
}

.apropos-hero .carte-fleur.coin-bg {
	opacity: 1;
	filter: drop-shadow(0 2px 5px rgba(61, 43, 31, 0.25));
}

.fondatrice-section .carte-fleur.coin-bg {
	width: 280px;
	opacity: 1;
	filter: drop-shadow(0 2px 5px rgba(61, 43, 31, 0.25));
}

.fondatrice-section .carte-fleur.coin-bd {
	top: 60px;
	bottom: auto;
	right: 8px;
	opacity: 1;
	filter: drop-shadow(0 2px 5px rgba(61, 43, 31, 0.25));
}

.fondatrice-section .carte-fleur.coin-bg-mauve {
	bottom: 8px;
	left: 8px;
	width: 140px;
	opacity: 0.7;
}

@media (max-width: 768px) {
	.apropos-hero .carte-fleur,
	.fondatrice-section .carte-fleur,
	.apropos-hero__badge-flower,
	.fondatrice-grid__photo-flower {
		display: none;
	}

	.fondatrice-section .section-header h2 {
		font-size: 2rem;
	}

	.apropos-hero {
		padding: 2.75rem 1.25rem;
	}

	.fondatrice-section {
		padding: 3rem 1.25rem;
	}
}

/* ==========================================================
   FAQ — page 100% statique, accordéon en vanille JS (voir
   assets/js/faq-accordion.js) : un seul .faq-item ouvert à la fois,
   classe .open ajoutée/retirée au clic, comportement identique au
   vrai site.
   ========================================================== */

.faq-page {
	/* Pas de padding-top : .faq-hero ci-dessous a déjà son propre padding
	   interne (respiration du texte) — en ajouter un ici empilait un
	   second espace vide avant que le bandeau commence, entre le header
	   du site et le bandeau. Même correctif que /personnaliser/. */
	padding: 0 0 6.25rem;
	background: var(--lmp-blanc-casse);
}

.faq-hero {
	/* Pas de carte/dégradé : même langage que .lmp-studio__hero
	   (/personnaliser/) et la grille de /boutique-personnaliser/ — le
	   titre respire directement sur le fond crème de la page, pas de
	   bande colorée rose/mauve plaquée par-dessus. */
	position: relative;
	text-align: center;
	padding: 2.5rem 1.75rem 0;
	margin-bottom: 3rem;
}

.faq-hero__flower {
	position: absolute;
	top: -10px;
	opacity: 1;
	filter: drop-shadow( 0 2px 4px rgba( 61, 43, 31, 0.25 ) );
	pointer-events: none;
}

.faq-hero__flower--left {
	left: 8%;
	width: 60px;
}

.faq-hero__flower--right {
	top: 0;
	right: 8%;
	width: 70px;
}

.faq-hero h1 {
	font-family: var(--font-heading);
	font-size: clamp( 2.8rem, 5vw, 4rem );
	color: var(--lmp-brun);
	margin-bottom: 12px;
}

.faq-hero__subtitle {
	color: var(--lmp-brun);
	font-weight: 500;
	font-size: 1.8rem;
	margin: 0;
}

.faq-flex-wrapper {
	display: flex;
	align-items: center;
	gap: 30px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

.faq-pistache-sidebar {
	flex: 0 0 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.faq-pistache-sidebar__bubble {
	position: relative;
	background: var(--lmp-blanc);
	border: 3px solid var(--lmp-lavande-bordure);
	border-radius: 18px;
	padding: 14px 16px;
	font-size: 0.98rem;
	color: var(--lmp-brun);
	line-height: 1.4;
	font-weight: 600;
	box-shadow: 0 6px 18px rgba( 61, 43, 31, 0.12 );
	margin-bottom: 10px;
}

.faq-pistache-sidebar img {
	width: 180px;
	height: auto;
}

.faq-list {
	max-width: 820px;
	margin: 0 auto 0 100px;
	padding: 0 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}

.faq-item {
	background: var(--lmp-blanc);
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid var(--lmp-creme-dark);
	transition: all 0.28s ease;
}

.faq-item.open {
	box-shadow: 0 4px 24px rgba( 61, 43, 31, 0.09 );
}

.faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px;
	cursor: pointer;
	gap: 16px;
}

.faq-item__question-text {
	font-weight: 800;
	color: var(--lmp-brun);
	font-size: 0.95rem;
	line-height: 1.4;
}

.faq-item__question-text::before {
	content: "🌸";
	margin-right: 8px;
}

.faq-item__toggle {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--lmp-creme-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	flex-shrink: 0;
	transition: all 0.28s ease;
	color: var(--lmp-brun);
}

.faq-item.open .faq-item__toggle {
	background: var(--lmp-brun);
	color: var(--lmp-creme);
	transform: rotate( 45deg );
}

.faq-item__answer {
	display: none;
	padding: 18px 24px 22px;
	font-size: 0.9rem;
	color: var(--lmp-text-light);
	line-height: 1.75;
	border-top: 1px solid var(--lmp-creme-dark);
}

.faq-item.open .faq-item__answer {
	display: block;
}

.faq-cta {
	text-align: center;
	margin-top: 3.5rem;
	padding: 0 1.75rem;
}

.faq-cta p {
	font-size: 1.1rem;
	color: var(--lmp-brun);
	margin-bottom: 16px;
	font-weight: 600;
}

@media ( max-width: 900px ) {
	.faq-flex-wrapper {
		flex-direction: column;
	}

	.faq-list {
		margin: 0 auto;
		width: 100%;
	}
}

@media ( max-width: 480px ) {
	.faq-hero__flower {
		display: none;
	}
}

/* ==========================================================
   Contact — formulaire Contact Form 7 réel (voir includes/cf7.php),
   pas une reproduction statique. Styles ciblant le balisage que CF7
   génère réellement (.wpcf7-form-control) — les règles .form-group/
   .form-row du site de référence ne s'appliquaient à aucun élément
   du HTML rendu (CF7 génère <p><label> lui-même), donc pas reprises.
   ========================================================== */

.contact-page {
	/* Pas de padding-top : .contact-hero ci-dessous a déjà son propre
	   padding interne — en ajouter un ici empilait un second espace vide
	   entre le header du site et le bandeau. Même correctif que
	   /personnaliser/ (voir .faq-page, identique). */
	padding: 0 0 6.25rem;
	background: var(--lmp-blanc-casse);
}

.contact-hero {
	/* Pas de carte/dégradé rose-mauve : même langage que .lmp-studio__hero
	   (/personnaliser/) et la grille de /boutique-personnaliser/ — le
	   titre respire directement sur le fond crème de la page. */
	text-align: center;
	padding: 2.5rem 1.75rem 0;
	margin-bottom: 3rem;
}

.contact-hero h1 {
	font-family: var(--font-heading);
	font-size: clamp( 2.8rem, 5vw, 4rem );
	color: var(--lmp-brun);
	margin-bottom: 12px;
}

.contact-hero p {
	color: var(--lmp-text-light);
	font-size: 1rem;
	max-width: 46ch;
	margin: 0 auto;
}

.contact-layout {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	align-items: start;
	gap: 48px;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 28px;
}

.contact-form {
	background: var(--lmp-blanc);
	border-radius: 36px;
	padding: 40px;
	border: 1px solid var(--lmp-creme-dark);
}

.contact-form__title {
	font-family: var(--font-heading);
	font-size: 1.65rem;
	color: var(--lmp-brun);
	margin-bottom: 28px;
}

.contact-form__encouragement {
	margin: 18px 0 0;
	font-size: 0.9rem;
	color: var(--lmp-text-light);
	text-align: center;
}

.contact-form .wpcf7-form-control-wrap {
	display: block;
}

.contact-form label {
	display: block;
	font-size: 0.92rem;
	color: var(--lmp-brun);
	margin-bottom: 6px;
	font-weight: 500;
}

.contact-form input.wpcf7-form-control:not( .wpcf7-submit ),
.contact-form textarea.wpcf7-form-control {
	width: 100%;
	padding: 14px 16px;
	font-size: 1rem;
	border: 1px solid var(--lmp-lavande-bordure);
	border-radius: 12px;
	background: var(--lmp-blanc);
	margin-bottom: 18px;
	font-family: inherit;
	color: var(--lmp-brun);
	box-sizing: border-box;
}

.contact-form textarea.wpcf7-form-control {
	min-height: 170px;
	resize: vertical;
}

.contact-form input.wpcf7-form-control:not( .wpcf7-submit ):focus,
.contact-form textarea.wpcf7-form-control:focus {
	outline: none;
	border-color: var(--lmp-brun);
}

.contact-form .wpcf7-submit {
	background: var(--lmp-lavande);
	color: var(--lmp-blanc);
	border: none;
	padding: 15px 38px;
	border-radius: 999px;
	font-size: 1.02rem;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.2s ease;
	margin-top: 4px;
}

.contact-form .wpcf7-submit:hover {
	background: #876AA8;
}

.contact-form .wpcf7-not-valid-tip {
	color: #C0392B;
	font-size: 0.82rem;
	margin: -14px 0 14px;
}

.contact-form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 0.88rem;
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.contact-info-card {
	background: var(--lmp-blanc);
	border-radius: 24px;
	padding: 24px;
	border: 1px solid var(--lmp-creme-dark);
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.contact-info-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	text-decoration: none;
}

.contact-info-card:nth-child( 1 ) .contact-info-card__icon {
	background: var(--lmp-lavande-light);
}

.contact-info-card:nth-child( 2 ) .contact-info-card__icon {
	background: var(--lmp-rose-light);
}

.contact-info-card:nth-child( 3 ) .contact-info-card__icon {
	background: var(--lmp-vert-light);
}

.contact-info-card h4 {
	font-weight: 800;
	color: var(--lmp-brun);
	margin-bottom: 4px;
	font-size: 0.95rem;
}

.contact-info-card p {
	font-size: 0.88rem;
	color: var(--lmp-text-light);
	line-height: 1.5;
	margin: 0;
}

.contact-info-card p a {
	color: var(--lmp-lavande);
	text-decoration: none;
}

.contact-socials {
	display: flex;
	gap: 14px;
	margin-top: 14px;
}

.contact-socials a {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--lmp-rose-light);
	color: var(--lmp-brun);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	text-decoration: none;
}

.contact-socials a:hover {
	background: var(--lmp-lavande);
	color: var(--lmp-blanc);
}

.contact-quote {
	background: var(--lmp-creme);
	border-radius: 24px;
	padding: 24px;
	border: 1px solid var(--lmp-creme-dark);
}

.contact-quote p:first-child {
	font-family: var(--font-heading);
	font-size: 1.1rem;
	color: var(--lmp-brun);
	font-style: italic;
	line-height: 1.5;
	margin: 0 0 14px;
}

.contact-quote p:last-child {
	font-size: 0.82rem;
	color: var(--lmp-text-light);
	margin: 0;
}

@media ( max-width: 767px ) {
	.contact-layout {
		grid-template-columns: 1fr;
	}

	.contact-form {
		padding: 24px;
	}

	.contact-page,
	.faq-page {
		padding-bottom: 4rem;
	}
}

/* ==========================================================
   Passe mobile — réduction des paddings verticaux hérités du
   desktop (60-80px) sur les sections pleine largeur de l'accueil,
   pour resserrer le rythme vertical sur petit écran. Groupé ici
   plutôt qu'éclaté à côté de chaque section : ce sont uniquement
   des ajustements de padding, aucune règle de mise en page.
   ========================================================== */

@media (max-width: 600px) {
	.pistache {
		padding: 48px 0 40px;
	}

	.produits {
		padding: 40px 0 48px;
	}

	.philo {
		padding: 48px 0;
	}

	.faq {
		padding: 48px 0;
	}

	.cta {
		padding: 0 0 48px;
	}
}

/* ==========================================================
   Guide des tailles (/guide-des-tailles/) — 2026-09-03
   ========================================================== */

.guide-page {
	padding: 0 0 6.25rem;
	background: var(--lmp-blanc-casse);
}

.guide-hero {
	text-align: center;
	padding: 2.5rem 1.75rem 0;
	margin-bottom: 2.5rem;
}

.guide-hero h1,
.guide-hero h2 {
	font-family: var(--font-heading);
	font-size: clamp( 2.2rem, 4.5vw, 3.2rem );
	color: var(--lmp-brun);
	margin-bottom: 12px;
}

.guide-hero p {
	color: var(--lmp-text-light);
	font-size: 1rem;
	max-width: 46ch;
	margin: 0 auto;
}

.guide-grid {
	max-width: 1200px;
	margin: 0 auto 3rem;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.75rem;
}

.guide-card {
	background: var(--lmp-blanc);
	border: 1px solid var(--lmp-lavande-clair);
	border-radius: 20px;
	padding: 1.5rem;
	text-align: center;
}

.guide-card h2 {
	font-family: var(--font-heading);
	font-size: 1.3rem;
	color: var(--lmp-brun);
	margin: 0 0 1rem;
}

.guide-image {
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* ==========================================================
   Pages légales (politique.php) — 2026-09-03
   ========================================================== */

.politique-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 5rem;
	background: var(--lmp-blanc-casse);
}

.politique-page > h1 {
	font-family: var(--font-heading);
	font-size: clamp( 2rem, 4vw, 2.6rem );
	color: var(--lmp-brun);
	margin: 0 0 1.75rem;
}

.politique-page__content {
	color: var(--lmp-brun);
	line-height: 1.7;
}

.politique-page__content h2 {
	font-family: var(--font-heading);
	font-size: 1.3rem;
	color: var(--lmp-brun);
	margin: 2rem 0 0.75rem;
}

.politique-page__content h2:first-child {
	margin-top: 0;
}

.politique-page__content p,
.politique-page__content li {
	color: var(--lmp-text-light);
}

.politique-page__content ul,
.politique-page__content ol {
	padding-left: 1.25rem;
}

.politique-page__content li {
	margin-bottom: 0.4rem;
}

.politique-page__content a {
	color: var(--lmp-lavande-aa);
}

.politique-page__content .politique-page__maj {
	font-size: 0.85rem;
	color: var(--lmp-text-light);
	opacity: 0.8;
	margin-bottom: 2rem;
}

.politique-page__content .politique-page__placeholder {
	background: var(--lmp-jaune);
	color: var(--lmp-brun);
	padding: 0.15rem 0.5rem;
	border-radius: 6px;
	font-weight: 700;
}

/* ==========================================================
   Boutique & personnaliser — how-to + politiques + contact (2026-09-03)
   ========================================================== */

.howto {
	max-width: 1200px;
	margin: 0 auto 3rem;
}

.howto-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	justify-content: center;
	text-align: left;
	margin-bottom: 1.75rem;
}

.howto-mascot {
	width: 96px;
	height: auto;
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.howto-header {
		flex-direction: column;
		text-align: center;
	}
}

.boutique-contact {
	max-width: 640px;
	margin: 0 auto;
	padding-top: 2.5rem;
	border-top: 1.5px solid var(--lmp-lavande-clair);
}

/* ==========================================================
   Boutique & personnaliser — bloc "Avant de personnaliser" (2026-09-03)
   ========================================================== */

.boutique-infos {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1.5px solid var(--lmp-lavande-clair);
}

.boutique-infos__grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
}

/* Cartes "punchées" -- même langage que .step (Comment ça marche, demande de
   Félix 2026-09-02) : fond plein sans contour fin, ombre portée à la place,
   pastille de couleur pleine, léger soulèvement au survol. Remplace l'ancien
   style carte pastel/contour discret, jugé trop plat ("brut"). */
.info-card {
	background: var(--lmp-blanc);
	border: none;
	border-radius: 20px;
	padding: 1.75rem 1.5rem;
	box-shadow: 0 18px 34px -22px rgba(61, 43, 31, 0.4);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	/* Le texte varie beaucoup en longueur d'une carte à l'autre (grille à
	   hauteur égale) -- sans ça, les cartes courtes laissent un grand vide en
	   bas au lieu d'aligner leur lien avec celles des cartes plus longues
	   (repéré avec Playwright le 2026-09-04, aspect "brut"/inachevé). */
	display: flex;
	flex-direction: column;
}

.info-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 38px -18px rgba(61, 43, 31, 0.45);
}

.info-card__badge {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--lmp-lavande-aa);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	margin-bottom: 1rem;
	box-shadow: 0 10px 18px -6px rgba(129, 92, 172, 0.55);
}

.info-card h3 {
	font-family: var(--font-heading);
	font-size: 1.15rem;
	color: var(--lmp-brun);
	margin: 0 0 0.6rem;
}

.info-card p {
	color: var(--lmp-text-light);
	line-height: 1.6;
	font-size: 0.92rem;
	margin: 0 0 0.6rem;
}

.info-card p:last-child {
	margin-bottom: 0;
}

.info-card__link-wrap {
	/* Toujours ancré en bas de la carte, peu importe la longueur du texte
	   au-dessus -- voir commentaire sur .info-card. Un <div> plutôt qu'un
	   margin-top:auto directement sur le <a> : wpautop() (WordPress) laisse
	   les balises de bloc tranquilles mais mal-forme le HTML autour d'un
	   <a> nu juste avant un </div> (vérifié en direct, <p> jamais fermé). */
	margin-top: auto;
	padding-top: 0.75rem;
}

.info-card__link {
	display: inline-block;
	color: var(--lmp-lavande-aa);
	font-weight: 700;
	text-decoration: none;
	font-size: 0.9rem;
}

.info-card__link:hover {
	text-decoration: underline;
}

/* ==========================================================
   Gabarit de secours (index.php) — panier/paiement/mon compte n'ont pas de
   page-*.php dédié (contrairement à accueil/contact/personnaliser/etc.),
   donc retombent sur le h1.entry-title générique, jamais stylé jusqu'ici --
   texte brut du navigateur flush à gauche, aucun rapport visuel avec le
   reste du site (repéré le 2026-09-03 avec Playwright sur /cart/, "Cart"
   énorme et non stylé collé au bord de l'écran). Les titres eux-mêmes
   (post_title de ces 3 pages) étaient aussi encore en anglais ("Cart",
   "Checkout", "My account") -- renommés en base (Panier/Paiement/Mon
   compte), voir CLI direct plutôt qu'un correctif de code (donnée, pas
   comportement).
   ========================================================== */
/* IMPORTANT : .site-main/#main est le MÊME id/classe utilisé par TOUS les
   page-*.php du thème (accueil, personnaliser, etc. -- chacun l'ouvre lui-
   même, header.php ne le fait pas). Une règle .site-main non scopée casse
   donc le plein écran de CES pages-là aussi (régression rencontrée déjà
   deux fois le 2026-09-03 -- "on a perdu le full screen des pages"). Scopé
   ici aux classes body que WooCommerce pose lui-même sur panier/paiement/
   mon compte (woocommerce-cart/-checkout/-account), JAMAIS posées sur les
   pages custom du thème (accueil, personnaliser, contact...) -- ne JAMAIS
   dé-scoper cette règle, même "pour simplifier". */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 4vw, 2.8rem);
	color: var(--lmp-brun);
	margin: clamp(32px, 5vw, 48px) 0 8px;
}

/* ==========================================================
   Notices WooCommerce génériques (wc_print_notices()) -- même besoin que
   ci-dessus mais pour une page qui n'est PAS panier/paiement/mon compte :
   /personnaliser/ affiche le code de bienvenue 10% (wc_add_notice(), voir
   lmp_generer_code_bienvenue() dans functions.php) juste après l'inscription
   via wc_print_notices() ajouté à page-personnaliser.php, sinon texte brut
   vert WooCommerce par défaut. UNE seule classe (spécificité plus basse que
   .woocommerce-account .woocommerce-message ci-dessus, qui continue donc à
   s'appliquer sur Mon compte sans changement) -- sert de repli partout
   ailleurs où une notice pourrait un jour s'afficher. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	list-style: none;
	max-width: 640px;
	margin: 24px auto;
	padding: 16px 22px;
	border-radius: 16px;
	border: none;
	outline: none;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--lmp-brun);
}

.woocommerce-message {
	background: var(--lmp-vert-light);
}

.woocommerce-error {
	background: var(--lmp-rose);
}

.woocommerce-info {
	background: var(--lmp-lavande-light);
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	display: none;
}

.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
	color: var(--lmp-lavande-aa);
	font-weight: 700;
}

/* Bannière "code de bienvenue" -- voir page-personnaliser.php, s'affiche
   juste après une inscription via le popup "Crée un compte"
   (compte-configurateur-popup.js). */
.lmp-bienvenue-banniere {
	max-width: 640px;
	margin: 24px auto 0;
	padding: 20px 24px;
	border-radius: 18px;
	background: var(--lmp-lavande-light);
	text-align: center;
}

.lmp-bienvenue-banniere__texte {
	margin: 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--lmp-brun);
}

.lmp-bienvenue-banniere__code {
	margin: 8px 0 0;
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--lmp-lavande-aa);
}

/* Espace membre seulement (pas panier/paiement, jamais demandé pour ces
   deux-là) -- le titre officiel de la page ("Détails du compte", "Adresses",
   "Commande n°220"...) restait collé au bord gauche de sa colonne malgré
   celle-ci déjà centrée sur la page, ce qui déséquilibrait visuellement tout
   l'espace membre (demande du 2026-09-07). */
.woocommerce-account .entry-title {
	text-align: center;
}

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
	margin-bottom: clamp(40px, 5vw, 64px);
}