/* Blog Lilémø : articles et page /blog/. Couleurs et ombres du design system Lilémø. */
.llb-page {
	--llb-turquoise: #21c9c4;
	--llb-turquoise-100: #d5f4f3;
	--llb-teal: #03738c;
	--llb-teal-700: #025c70;
	--llb-teal-100: #d3e8ee;
	--llb-orange: #ff6e2e;
	--llb-orange-100: #ffe2d5;
	--llb-yellow: #ffd900;
	--llb-yellow-600: #e6c200;
	--llb-yellow-100: #fff6cc;
	--llb-red: #d03030;
	--llb-green-light: #8cd999;
	--llb-warm-0: #ffffff;
	--llb-warm-50: #fffaf6;
	--llb-warm-100: #fdf1e7;
	--llb-warm-200: #fae4d5;
	--llb-warm-300: #f0d9c8;
	--llb-warm-400: #d9c3b3;
	--llb-warm-700: #63594f;
	--llb-warm-800: #423d37;
	--llb-ombre: 0 6px 18px rgba(66, 61, 55, .08);
	--llb-ombre-haute: 0 12px 28px rgba(66, 61, 55, .12);
	/* Largeur commune du texte et de tous les blocs : leurs bords s'alignent. */
	--llb-colonne: 1100px;
	--llb-police: "Greycliff CF", "Nunito", system-ui, -apple-system, sans-serif;
}

#main-content.llb {
	background: var(--llb-warm-0);
	font-family: var(--llb-police);
	color: var(--llb-warm-800);
	font-size: 18px;
	line-height: 1.65;
	overflow: hidden;
}
#main-content.llb *,
#main-content.llb *::before,
#main-content.llb *::after { box-sizing: border-box; }
.llb h1, .llb h2, .llb h3 {
	font-family: var(--llb-police);
	color: var(--llb-teal);
	font-weight: 700;
	padding: 0;
	text-transform: none;
	letter-spacing: 0;
	text-wrap: balance;
}
.llb p { padding: 0; }
.llb a { color: var(--llb-teal); text-underline-offset: 3px; }
.llb a:hover { color: var(--llb-teal-700); }
.llb a:focus-visible, .llb button:focus-visible, .llb input:focus-visible, .llb summary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(33, 201, 196, .55);
	border-radius: 6px;
}
.llb img { max-width: 100%; height: auto; }
.llb-cache { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Petits éléments */
.llb-surtitre {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--llb-warm-700);
}
.llb-surtitre--jaune { color: var(--llb-yellow); }
.llb-meta { display: block; font-size: 14px; font-weight: 600; color: var(--llb-warm-700); }
.llb-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.llb-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}
.llb-badge--brand { background: var(--llb-teal-100); color: var(--llb-teal); }
.llb-badge--neutre { background: var(--llb-warm-200); color: var(--llb-warm-800); }
.llb-badge--jaune { background: var(--llb-yellow); color: var(--llb-teal); }
.llb-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--llb-police);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease;
}
.llb a.llb-bouton--jaune, .llb .llb-bouton--jaune { background: var(--llb-yellow); color: var(--llb-teal); }
.llb a.llb-bouton--jaune:hover { background: var(--llb-yellow-600); color: var(--llb-teal); }
.llb .llb-bouton--secondaire { background: var(--llb-teal); color: var(--llb-warm-50); }
.llb .llb-bouton--secondaire:hover { background: var(--llb-teal-700); }

/* En-tête d'article et de /blog/ */
.llb-hero { position: relative; overflow: hidden; background: var(--llb-warm-100); padding: 48px 32px 64px; }
.llb-halo {
	position: absolute;
	bottom: -180px;
	left: -140px;
	width: 460px;
	height: 460px;
	border-radius: 55% 45% 40% 60% / 48% 60% 40% 52%;
}
.llb-halo--haut { top: -140px; right: -120px; bottom: auto; left: auto; width: 520px; height: 520px; }
.llb-hero__inner {
	position: relative;
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 56px;
}
.llb-hero__texte { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.llb-hero h1 { font-size: 46px; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
.llb-chapo { font-size: 20px; line-height: 1.55; margin: 0; max-width: 54ch; }
.llb-retour { font-size: 14px; font-weight: 700; }
.llb .llb-vignette.llb-hero__visuel {
	flex: 1 1 480px;
	min-width: 0;
	max-width: 640px;
	height: 440px;
	object-fit: cover;
	border-radius: 28px;
	box-shadow: var(--llb-ombre-haute);
	display: block;
}
.llb .llb-vignette.llb-hero__visuel.llb-vignette--illu { display: flex; align-items: center; justify-content: center; padding: 32px; }
.llb .llb-hero__visuel.llb-vignette--illu img { width: 100%; height: auto; max-height: 100%; }
/* Page /blog/ : bandeau d'en-tête compact, les articles doivent apparaître tout de suite. */
.llb-hero--index { background: transparent; padding: 24px 32px 8px; }
.llb-hero--index .llb-hero__inner { max-width: var(--llb-colonne); gap: 24px; }
.llb-hero--index .llb-hero__texte { gap: 8px; }
.llb-hero--index h1 { font-size: 32px; }
.llb-hero--index .llb-chapo { font-size: 17px; }
.llb-hero--index .llb-halo--haut { width: 300px; height: 300px; top: -150px; right: -80px; }
.llb img.llb-hero__lily { flex: 0 0 auto; height: 120px; width: auto; display: block; }

/* Corps d'article : une colonne de lecture centrée, sommaire en tête */
.llb-colonnes { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
.llb-hero + .llb-colonnes { padding-top: 56px; }
.llb-corps { max-width: var(--llb-colonne); margin: 0 auto; padding-bottom: 8px; }
.llb-corps > :last-child { margin-bottom: 32px; }
.llb-corps p { margin: 0 0 20px; }
.llb-corps h2 { font-size: 30px; line-height: 1.2; margin: 40px 0 14px; scroll-margin-top: 120px; }
.llb-corps > h2:first-child { margin-top: 0; }
.llb-corps h3 { font-size: 20px; line-height: 1.3; margin: 24px 0 8px; }
.llb-corps ul { margin: 0 0 32px; padding-left: 22px; list-style: disc; }
.llb-corps li { margin: 0 0 12px; padding: 0; }
.llb-corps blockquote {
	margin: 0 0 24px;
	padding: 20px 24px;
	background: var(--llb-warm-100);
	border: none;
	border-radius: 20px;
	font-style: italic;
}
.llb-corps .llb-source { font-size: 14px; color: var(--llb-warm-700); }
.llb-sommaire { background: var(--llb-warm-100); border-radius: 20px; padding: 20px 24px; margin-bottom: 36px; }
.llb-sommaire summary {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--llb-warm-700);
	cursor: pointer;
	min-height: 24px;
}
.llb-sommaire nav { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; font-size: 15px; font-weight: 600; line-height: 1.4; }

/* Blocs pleine largeur */
/* Même largeur que le texte (900 px + marges), pour que les bords s'alignent. */
.llb-large { max-width: calc(var(--llb-colonne) + 96px); margin: 0 auto; padding: 0 48px 48px; }
.llb-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.llb-bloc {
	background: var(--llb-warm-100);
	border-radius: 20px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 16px;
	line-height: 1.6;
}
.llb-bloc p { margin: 0; }
.llb-bloc--blanc { background: var(--llb-warm-0); box-shadow: var(--llb-ombre); }
.llb-bloc--ligne { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px; }
.llb-bloc--ligne > p { flex: 1 1 260px; }
.llb-illu { min-height: 120px; display: flex; align-items: flex-end; justify-content: center; }
.llb-illu svg { max-width: 100%; height: auto; }
.llb-numero {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--llb-yellow);
	color: var(--llb-teal);
	font-size: 24px;
	font-weight: 800;
}
.llb-niveau { padding: 0; overflow: hidden; gap: 0; }
.llb-niveau__bande { height: 12px; }
.llb-niveau__corps { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.llb-niveau__titre { font-size: 20px; font-weight: 700; color: var(--llb-teal); }

/* Pavés-lettres */
.llb-paves { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.llb-pave {
	width: 60px;
	height: 60px;
	display: inline-grid;
	place-items: center;
	background: var(--llb-warm-50);
	border: 2px solid transparent;
	border-radius: 14px;
	box-shadow: var(--llb-ombre);
	font-size: 31px;
	font-weight: 700;
	line-height: 1;
	color: var(--llb-turquoise);
}
.llb-pave--voyelle { color: var(--llb-red); }
.llb-pave--choisi { border-color: var(--llb-turquoise); box-shadow: var(--llb-ombre-haute); transform: translateY(-2px); }
.llb-paves--petits .llb-pave { width: 40px; height: 40px; font-size: 21px; border-radius: 10px; }
.llb-paves__groupe { display: flex; gap: 6px; }

/* Schéma en barres (Singapour) */
.llb-barres { display: flex; flex-direction: column; gap: 14px; font-size: 16px; font-weight: 700; }
.llb-barres__ligne { display: flex; align-items: center; gap: 14px; }
.llb-barres__nom { width: 56px; flex: 0 0 auto; }
.llb-barre {
	height: 44px;
	display: grid;
	place-items: center;
	border: 3px solid var(--llb-warm-800);
	color: #2b2723;
	background: var(--llb-turquoise);
	border-radius: 10px 0 0 10px;
	width: 180px;
}
.llb-barre--seule { border-radius: 10px; }
.llb-barre--suite { border-left: none; border-radius: 0 10px 10px 0; background: var(--llb-yellow); width: 120px; }
.llb-barres__question { padding-left: 70px; font-weight: 600; color: var(--llb-warm-700); }
.llb-corps figure { margin: 0 0 16px; background: var(--llb-warm-100); border-radius: 20px; padding: 28px; }
.llb-corps figcaption { font-size: 14px; color: var(--llb-warm-700); margin-top: 14px; }

/* Bloc produit */
.llb-cta {
	max-width: var(--llb-colonne);
	margin: 8px auto 56px;
	background: var(--llb-teal);
	border-radius: 28px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.llb-cta__texte {
	flex: 1 1 420px;
	min-width: 0;
	padding: 44px;
	color: var(--llb-warm-50);
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}
.llb-cta h2 { font-size: 28px; line-height: 1.2; margin: 0; color: var(--llb-warm-50); }
.llb-cta p { font-size: 17px; line-height: 1.6; margin: 0; color: var(--llb-warm-50); }
.llb-cta img { flex: 1 1 380px; min-width: 0; max-width: 520px; height: 380px; object-fit: cover; display: block; }

/* Cartes d'articles */
.llb-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.llb a.llb-carte {
	display: flex;
	flex-direction: column;
	background: var(--llb-warm-0);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--llb-ombre);
	text-decoration: none;
	color: var(--llb-warm-800);
	transition: box-shadow .15s ease, transform .15s ease;
}
.llb a.llb-carte:hover { box-shadow: var(--llb-ombre-haute); transform: translateY(-2px); }
.llb .llb-vignette { width: 100%; height: 200px; object-fit: cover; display: block; flex: 0 0 auto; }
.llb .llb-vignette.llb-vignette--illu { display: flex; align-items: center; justify-content: center; padding: 20px; }
.llb .llb-vignette--illu img { max-height: 100%; width: auto; max-width: 100%; display: block; }
.llb-carte__corps { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.llb-carte__titre { font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--llb-teal); }
.llb-carte__texte { font-size: 15px; line-height: 1.55; }

/* Page /blog/ */
.llb-section { max-width: calc(var(--llb-colonne) + 96px); margin: 0 auto; padding: 8px 48px 56px; }
.llb-section__titre { font-size: 26px; margin: 0 0 24px; }
.llb a.llb-une {
	display: flex;
	flex-wrap: wrap;
	background: var(--llb-warm-0);
	border-radius: 28px;
	overflow: hidden;
	box-shadow: var(--llb-ombre);
	text-decoration: none;
	color: var(--llb-warm-800);
}
.llb .llb-vignette.llb-une__visuel { flex: 1 1 520px; min-width: 0; width: auto; height: 420px; }
.llb-une__corps { flex: 1 1 420px; min-width: 0; padding: 44px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.llb-une__titre { font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--llb-teal); }
.llb-une__texte { font-size: 17px; line-height: 1.6; }
.llb-lire { font-size: 16px; font-weight: 700; color: var(--llb-teal); text-decoration: underline; text-underline-offset: 3px; }

/* À lire aussi + newsletter */
.llb-aussi { background: var(--llb-warm-100); padding: 56px 48px 72px; }
.llb-aussi__inner { max-width: var(--llb-colonne); margin: 0 auto; }
.llb-aussi h2 { font-size: 26px; margin: 0 0 24px; }
.llb-newsletter { padding: 64px 48px; background: var(--llb-warm-100); }
.llb-aussi + .llb-newsletter { padding-top: 0; }
.llb-newsletter__boite {
	max-width: var(--llb-colonne);
	margin: 0 auto;
	background: var(--llb-warm-0);
	border-radius: 28px;
	box-shadow: var(--llb-ombre);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.llb-newsletter h2 { font-size: 26px; line-height: 1.25; margin: 0; }
.llb-newsletter p { font-size: 16px; line-height: 1.6; margin: 0; }
.llb-newsletter__form { display: flex; flex-wrap: wrap; gap: 12px; }
.llb-newsletter__form input[type="email"] {
	flex: 1 1 260px;
	min-width: 0;
	min-height: 48px;
	padding: 0 18px;
	border: 2px solid var(--llb-warm-400);
	border-radius: 999px;
	font-family: var(--llb-police);
	font-size: 16px;
	color: var(--llb-warm-800);
	background: var(--llb-warm-0);
}
.llb-message { font-weight: 700; border-radius: 14px; padding: 12px 16px; }
.llb-message--ok { background: #dff2e4; color: #2f6b4e; }
.llb-message--erreur { background: #f8dada; color: #9b1f1f; }

/* Mobile */
@media (max-width: 860px) {
	#main-content.llb { font-size: 17px; line-height: 1.6; }
	.llb-hero { padding: 20px 16px 28px; }
	.llb-hero__inner { gap: 20px; }
	.llb-hero__texte { gap: 14px; flex-basis: 100%; }
	.llb-hero h1 { font-size: 30px; line-height: 1.15; }
	.llb-chapo { font-size: 17px; }
	.llb .llb-vignette.llb-hero__visuel { flex-basis: 100%; height: 220px; border-radius: 20px; }
	.llb-hero--index { padding: 28px 16px 8px; }
	.llb img.llb-hero__lily { height: 90px; }
	.llb-halo { width: 300px; height: 300px; }
	.llb-colonnes, .llb-hero + .llb-colonnes { padding: 0 16px; }
	.llb-hero + .llb-colonnes { padding-top: 24px; }
	.llb-corps h2 { font-size: 24px; margin-top: 28px; }
	.llb-large { padding: 0 16px 28px; }
	.llb-cartes { grid-template-columns: 1fr; gap: 14px; }
	.llb-bloc { padding: 20px; }
	.llb-pave { width: 48px; height: 48px; font-size: 25px; border-radius: 12px; }
	.llb-barre { width: 120px; height: 36px; }
	.llb-barre--suite { width: 96px; }
	.llb-barres__nom { width: 40px; }
	.llb-barres__question { padding-left: 54px; }
	.llb-corps figure { padding: 18px; }
	.llb-cta { margin: 0 16px 24px; border-radius: 20px; flex-direction: column-reverse; align-items: stretch; }
	.llb-cta__texte { padding: 22px; flex-basis: auto; }
	.llb-cta h2 { font-size: 22px; }
	.llb-cta .llb-bouton { width: 100%; }
	.llb-cta img { max-width: none; width: 100%; height: 220px; flex-basis: auto; }
	.llb-section { padding: 8px 16px 32px; }
	.llb .llb-vignette.llb-une__visuel { flex-basis: 100%; height: 220px; }
	.llb-une__corps { padding: 22px; flex-basis: 100%; }
	.llb-une__titre { font-size: 24px; }
	.llb-grille { grid-template-columns: 1fr; }
	.llb-aussi { padding: 32px 16px 40px; }
	.llb-newsletter { padding: 32px 16px; }
	.llb-newsletter__boite { padding: 24px; border-radius: 20px; }
	.llb-newsletter h2 { font-size: 22px; }
	.llb-newsletter__form .llb-bouton { width: 100%; }
}

/* Bloc « Nos conseils sur le blog » des fiches produit */
.llb-fiche { font-family: var(--llb-police); color: var(--llb-warm-800); margin: 48px 0 8px; }
.llb-fiche .llb-section__titre { color: var(--llb-teal); font-weight: 700; padding: 0; }
.llb-fiche .llb-lire { display: inline-block; margin-top: 20px; }
.llb-fiche .llb-carte__titre, .llb-fiche .llb-surtitre, .llb-fiche .llb-meta { line-height: 1.3; }

/* Dans la colonne de 900 px, trois cartes doivent tenir côte à côte. */
.llb-aussi .llb-grille { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

/* Photos de cartes (recto / verso) dans un bloc */
.llb .llb-carte-photo { width: 100%; height: 300px; object-fit: cover; border-radius: 14px; display: block; }
.llb .llb-carte-photo--entiere { object-fit: contain; background: transparent; height: 380px; }

/* Image dans le texte d'un article */
.llb .llb-figure-img { background: none; padding: 0; margin: 8px 0 28px; }
.llb .llb-figure-img img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 20px; display: block; }
.llb .llb-figure-img img[src*=".svg"] { object-fit: contain; max-height: none; background: var(--llb-warm-100); padding: 20px; }