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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--lmp-brun);
	margin-top: 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);
	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 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;
}

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

	.mp-cta {
		display: none;
	}

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

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

@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__*)
   ========================================================== */

.hero {
	background: var(--lmp-creme);
	padding: 60px 0 0;
	position: relative;
	overflow: hidden;
}

.hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

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

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

.hero h1 {
	margin-top: 22px;
	font-size: clamp(38px, 5.2vw, 66px);
	line-height: 1.02;
	letter-spacing: -0.015em;
}

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

.hero-sub {
	margin-top: 18px;
	font-size: 19px;
	line-height: 1.6;
	color: var(--lmp-text-light);
	max-width: 52ch;
}

.hero .btn-row {
	margin-top: 30px;
	justify-content: center;
}

.hero-strip {
	display: flex;
	gap: 16px;
	align-items: flex-end;
	justify-content: center;
	margin-top: 44px;
	width: 100%;
}

.hero-strip img {
	object-fit: cover;
	border-radius: 22px 22px 0 0;
}

.hero-strip img:nth-child(1),
.hero-strip img:nth-child(4) {
	width: 212px;
	height: 246px;
}

.hero-strip img:nth-child(2),
.hero-strip img:nth-child(3) {
	width: 230px;
	height: 300px;
}

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

.hero-mascot {
	position: absolute;
	right: 34px;
	bottom: 26px;
	display: flex;
	align-items: flex-end;
}

.hero-mascot .bubble {
	margin-right: -8px;
	margin-bottom: 34px;
}

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

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

	.hero-strip {
		gap: 10px;
		overflow-x: auto;
		justify-content: flex-start;
		padding: 0 20px;
		margin-left: -20px;
		margin-right: -20px;
	}

	.hero-strip img {
		flex: 0 0 auto;
	}

	.hero-strip img:nth-child(1),
	.hero-strip img:nth-child(4) {
		width: 140px;
		height: 170px;
	}

	.hero-strip img:nth-child(2),
	.hero-strip img:nth-child(3) {
		width: 150px;
		height: 200px;
	}

	.hero-mascot {
		position: static;
		justify-content: center;
		margin: 28px 0 0;
		padding-bottom: 24px;
	}
}

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

.pistache {
	background: var(--lmp-blanc-casse);
	padding: 80px 0 72px;
}

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

.pistache-band-inner {
	max-width: 640px;
	padding: 56px 0 44px;
	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);
}

.pistache-band > img {
	position: absolute;
	left: 34px;
	bottom: -34px;
	width: 190px;
	filter: drop-shadow(0 18px 26px rgba(61, 43, 31, 0.25));
}

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

.step {
	background: var(--lmp-blanc);
	border: 1px solid var(--lmp-lavande-clair);
	border-radius: 20px;
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.step i {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--lmp-rose-light);
	color: var(--lmp-lavande);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
}

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

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

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

@media (max-width: 900px) {
	.pistache-band > img {
		position: static;
		width: 150px;
		margin: 0 auto -20px;
	}

	.pistache-band {
		flex-direction: column;
		align-items: center;
		padding-bottom: 24px;
	}

	.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: 64px 0 72px;
}

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

.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-blanc);
	padding: 72px 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: 18px;
}

.value {
	background: var(--lmp-creme-dark);
	border-radius: 20px;
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.value i {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--lmp-rose-light);
	color: var(--lmp-lavande);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-style: normal;
}

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

.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.)
   ========================================================== */

.faq {
	background: var(--lmp-blanc-casse);
	padding: 72px 0;
	scroll-margin-top: 1.5rem;
}

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

.faq .faq-list {
	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);
}

.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)
   ========================================================== */

.cta {
	background: var(--lmp-creme);
	padding: 0 0 72px;
}

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

.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(5, 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;
	border-radius: 10px;
	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__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:nth-child(5) .vetement-card__cta { background: #C77E92; color: #fff; }

.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
   ========================================================== */

.fonctionnement {
	padding: 4rem 1.5rem;
}

.etapes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.75rem;
}

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

.etape-card__number {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--lmp-lavande);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

.etape-card__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1rem;
	background-repeat: no-repeat;
	background-size: 300% 200%;
}

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

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

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

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

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

.galerie-masonry {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.galerie-row {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 1rem;
}

.galerie-row--grand-droite {
	grid-template-columns: 1fr 1.4fr;
}

.galerie-row--grand-droite .galerie-item--grand {
	order: 2;
}

.galerie-col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.galerie-item {
	border-radius: 16px;
	overflow: hidden;
}

.galerie-item__link {
	display: block;
	height: 100%;
}

.galerie-item__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.galerie-item--grand {
	min-height: 100%;
}

.galerie-item--petit {
	flex: 1;
}

@media (max-width: 720px) {
	.galerie-row,
	.galerie-row--grand-droite {
		grid-template-columns: 1fr;
	}

	.galerie-row--grand-droite .galerie-item--grand {
		order: 0;
	}
}

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

/* Bandeau de légende par photo — présent uniquement sur la page Nos
   créations (galerie complète, 21 photos), pas sur l'aperçu de l'accueil
   (6 photos, sans légendes) : scopé sous .galerie-home--page pour ne
   jamais apparaître sur l'accueil même si sa structure de classes est
   partagée. */
.galerie-home--page .galerie-item {
	position: relative;
}

.galerie-home--page .galerie-item__caption {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	background: var(--lmp-lavande-clair);
	color: var(--lmp-blanc);
	font-size: 0.72rem;
	font-weight: 600;
	padding: 4px 14px;
	border-radius: 20px;
	white-space: nowrap;
	pointer-events: none;
	max-width: 90%;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: 0.02em;
}

/* ==========================================================
   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. */
.apropos-hero .carte-fleur,
.fondatrice-section .carte-fleur {
	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 .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;
	}
}