/* Rimota — mise en page éditoriale des articles de blog.
   Tout est confiné sous .rmb-article : aucune règle ne peut atteindre
   le reste du site. Aucune police externe, aucune animation lourde. */

.rmb-article {
	--rmb-creme: #f8f1e5;
	--rmb-beige: #f2e7d5;
	--rmb-olive: #5d6b2f;
	--rmb-olive-clair: #7d8c4a;
	--rmb-terracotta: #c2521f;
	--rmb-or: #c9a24a;
	--rmb-texte: #3d3a33;
	--rmb-doux: #7d7768;
	--rmb-bord: #e3d9c8;
	color: var(--rmb-texte);
}

.rmb-article p { line-height: 1.75; }

/* ---------------------------- Repères de lecture --------------------- */

.rmb-reperes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	align-items: center;
	margin: 0 0 26px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--rmb-bord);
	font-size: 14px;
	color: var(--rmb-doux);
	letter-spacing: .2px;
}
.rmb-reperes span { display: inline-flex; align-items: center; gap: 7px; }
.rmb-reperes .rmb-pastille {
	background: var(--rmb-olive);
	color: #fff;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
}

/* -------------------------- Sommaire de l'article -------------------- */

.rmb-sommaire {
	position: relative;
	margin: 30px 0 38px;
	padding: 26px 28px 22px;
	background: linear-gradient(180deg, var(--rmb-creme) 0%, #fdfaf4 100%);
	border: 1px solid var(--rmb-bord);
	border-radius: 18px;
	overflow: hidden;
}
.rmb-sommaire::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: linear-gradient(180deg, var(--rmb-olive), var(--rmb-or));
}
.rmb-sommaire h2 {
	margin: 0 0 14px !important;
	font-size: 17px !important;
	line-height: 1.3 !important;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--rmb-olive) !important;
}
.rmb-sommaire ul { margin: 0; padding: 0; list-style: none; }
.rmb-sommaire li {
	position: relative;
	margin: 0 0 9px;
	padding-left: 26px;
	font-size: 16px;
	line-height: 1.55;
}
.rmb-sommaire li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rmb-terracotta);
}

/* ------------------------------ Encadrés ----------------------------- */

.rmb-encadre {
	margin: 30px 0;
	padding: 22px 24px;
	border-radius: 16px;
	border: 1px solid var(--rmb-bord);
	background: #fffdf8;
}
.rmb-encadre > :first-child { margin-top: 0 !important; }
.rmb-encadre > :last-child { margin-bottom: 0 !important; }
.rmb-encadre .rmb-titre {
	display: block;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.rmb-conseil { background: #f6f8ef; border-color: #dde5c8; }
.rmb-conseil .rmb-titre { color: var(--rmb-olive); }
.rmb-attention { background: #fdf3ec; border-color: #f0d9c8; }
.rmb-attention .rmb-titre { color: var(--rmb-terracotta); }

/* --------------------------- Étapes numérotées ----------------------- */

.rmb-etapes { margin: 32px 0; display: grid; gap: 14px; }
.rmb-etape {
	position: relative;
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 16px;
	align-items: start;
	padding: 18px 20px;
	background: #fffdf8;
	border: 1px solid var(--rmb-bord);
	border-radius: 16px;
}
.rmb-etape .rmb-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--rmb-olive);
	color: #fff;
	font-size: 18px;
	font-weight: 800;
}
.rmb-etape h3 {
	margin: 2px 0 6px !important;
	font-size: 19px !important;
	line-height: 1.3 !important;
}
.rmb-etape p { margin: 0 !important; font-size: 16px; }
.rmb-etape .rmb-quand {
	display: inline-block;
	margin: 8px 0 0;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--rmb-beige);
	color: var(--rmb-doux);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
}

/* ------------------------------ Bloc pack ---------------------------- */

.rmb-pack {
	position: relative;
	margin: 42px 0;
	padding: 30px;
	border-radius: 24px;
	background: radial-gradient(120% 90% at 15% 0%, #fdf7ec 0%, var(--rmb-creme) 55%, #f1e6d2 100%);
	border: 1px solid var(--rmb-bord);
	overflow: hidden;
}
.rmb-pack::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 220px;
	height: 220px;
	border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
	background: rgba(125, 140, 74, .10);
	pointer-events: none;
}
.rmb-pack-grille { position: relative; z-index: 1; display: grid; gap: 24px; }
.rmb-pack-visuel { position: relative; display: flex; justify-content: center; }
.rmb-pack-visuel::before {
	content: "";
	position: absolute;
	inset: 8% 6%;
	border-radius: 52% 48% 44% 56% / 46% 52% 48% 54%;
	background: linear-gradient(150deg, #ffffff 0%, #f7efe1 100%);
	box-shadow: 0 18px 40px rgba(93, 107, 47, .13);
}
.rmb-pack-visuel img {
	position: relative;
	max-width: 300px;
	width: 100%;
	height: auto;
	border-radius: 18px;
	filter: drop-shadow(0 12px 22px rgba(61, 58, 51, .16));
}
.rmb-pack h2 { margin: 0 0 8px !important; font-size: 27px !important; line-height: 1.2 !important; }
.rmb-pack .rmb-promesse { margin: 0 0 18px !important; color: var(--rmb-doux); font-size: 17px; }
.rmb-benefices { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 9px; }
.rmb-benefices li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; }
.rmb-benefices li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .42em;
	width: 15px;
	height: 9px;
	border-left: 2.5px solid var(--rmb-olive);
	border-bottom: 2.5px solid var(--rmb-olive);
	transform: rotate(-45deg);
}
.rmb-inclus {
	margin: 0 0 20px;
	padding: 16px 18px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid var(--rmb-bord);
	border-radius: 14px;
	font-size: 15px;
	line-height: 1.65;
}
.rmb-inclus strong { display: block; margin-bottom: 6px; color: var(--rmb-olive); font-size: 13px; letter-spacing: .7px; text-transform: uppercase; }
.rmb-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0 0 18px; }
.rmb-prix .rmb-actuel { font-size: 32px; font-weight: 800; color: var(--rmb-terracotta); line-height: 1; }
.rmb-prix .rmb-ancien { font-size: 19px; color: var(--rmb-doux); text-decoration: line-through; }
.rmb-prix .rmb-eco {
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--rmb-olive);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

/* -------------------------------- Boutons ---------------------------- */

.rmb-bouton {
	display: inline-block;
	padding: 16px 30px;
	border-radius: 12px;
	background: var(--rmb-olive);
	color: #fff !important;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background .2s ease, transform .1s ease;
}
.rmb-bouton:hover { background: var(--rmb-olive-clair); color: #fff !important; }
.rmb-bouton:active { transform: scale(.985); }
.rmb-bouton:focus-visible { outline: 3px solid var(--rmb-or); outline-offset: 3px; }
.rmb-reassurance { margin: 14px 0 0 !important; font-size: 14px; color: var(--rmb-doux); }

/* ---------------------------------- FAQ ------------------------------ */

.rmb-faq { margin: 40px 0; display: grid; gap: 12px; }
.rmb-faq details {
	border: 1px solid var(--rmb-bord);
	border-radius: 14px;
	background: #fffdf8;
	overflow: hidden;
}
.rmb-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 52px 18px 22px;
	position: relative;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}
.rmb-faq summary::-webkit-details-marker { display: none; }
.rmb-faq summary::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -7px;
	border-right: 2.5px solid var(--rmb-olive);
	border-bottom: 2.5px solid var(--rmb-olive);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.rmb-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.rmb-faq summary:focus-visible { outline: 3px solid var(--rmb-or); outline-offset: -3px; }
.rmb-faq .rmb-reponse { padding: 0 22px 20px; }
.rmb-faq .rmb-reponse p { margin: 0 !important; font-size: 16px; }

/* ------------------------------ Bloc final --------------------------- */

.rmb-final {
	margin: 42px 0 10px;
	padding: 30px;
	border-radius: 24px;
	background: linear-gradient(160deg, #fdf8ef 0%, var(--rmb-beige) 100%);
	border: 1px solid var(--rmb-bord);
	text-align: center;
}
.rmb-final img {
	max-width: 190px;
	width: 100%;
	height: auto;
	margin: 0 auto 18px;
	display: block;
	border-radius: 16px;
	filter: drop-shadow(0 10px 20px rgba(61, 58, 51, .14));
}
.rmb-final h2 { margin: 0 0 10px !important; font-size: 24px !important; line-height: 1.25 !important; }
.rmb-final p { margin: 0 0 18px !important; }
.rmb-final .rmb-prix { justify-content: center; }

/* ------------------------------- Écrans larges ----------------------- */

@media (min-width: 782px) {
	.rmb-pack { padding: 38px 40px; }
	.rmb-pack-grille { grid-template-columns: 300px 1fr; align-items: center; gap: 34px; }
	.rmb-final { padding: 38px 40px; }
	.rmb-final img { max-width: 220px; }
}

/* ------------------------------- Petits écrans ----------------------- */

@media (max-width: 480px) {
	.rmb-pack, .rmb-final { padding: 22px 18px; border-radius: 20px; }
	.rmb-sommaire { padding: 22px 20px 18px; }
	.rmb-etape { grid-template-columns: 38px 1fr; gap: 13px; padding: 16px; }
	.rmb-etape .rmb-num { width: 38px; height: 38px; font-size: 16px; }
	.rmb-pack h2 { font-size: 23px !important; }
	.rmb-prix .rmb-actuel { font-size: 28px; }
	.rmb-bouton { display: block; text-align: center; padding: 16px 20px; }
	.rmb-faq summary { padding: 16px 46px 16px 18px; font-size: 16px; }
	.rmb-faq .rmb-reponse { padding: 0 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.rmb-bouton, .rmb-faq summary::after { transition: none; }
}

/* ------------------- Corrections apportées en v1.0.1 ----------------- */

/* Le thème applique ses propres puces aux listes du contenu. Elles se
   superposaient à nos repères. On les neutralise, uniquement dans nos blocs. */
.rmb-article ul { list-style: none !important; padding-left: 0 !important; }
.rmb-article ul li { list-style: none !important; }
.rmb-article ul li::marker { content: "" !important; }
.rmb-sommaire ul li, .rmb-benefices li { background: none !important; }

/* Halo organique derrière la photo du pack.
   Les visuels produit ont un fond blanc : le halo était masqué. On l'élargit
   et on le décale pour qu'il déborde visiblement autour de la photo. */
.rmb-pack-visuel::before {
	inset: -6% -4%;
	border-radius: 54% 46% 42% 58% / 44% 54% 46% 56%;
	background: linear-gradient(150deg, rgba(255,255,255,.9) 0%, rgba(226,236,201,.75) 55%, rgba(201,162,74,.28) 100%);
	box-shadow: 0 22px 46px rgba(93, 107, 47, .16);
}
.rmb-pack-visuel img {
	border-radius: 20px;
	background: #fff;
	padding: 6px;
	box-shadow: 0 6px 18px rgba(61, 58, 51, .10);
	filter: none;
}
.rmb-final img { background: #fff; padding: 6px; }

/* ------------------- Correction apportée en v1.0.2 ------------------- */
/* Le thème remet à zéro le retrait des éléments de liste dans le contenu,
   ce qui superposait nos repères au texte. On rétablit le retrait. */
.rmb-sommaire li { padding-left: 30px !important; margin-left: 0 !important; }
.rmb-sommaire li::before { left: 6px; }
.rmb-benefices li { padding-left: 30px !important; margin-left: 0 !important; }
.rmb-benefices li::before { left: 4px; }

/* ------------------- Cloisonnement complet — v1.0.3 ------------------ */

/* Le corps de l'article est marque par la classe rmb-page, ajoutee sur
   <body> par l'extension sous exactement les memes conditions que le
   chargement de cette feuille. Chaque regle ci-dessous est donc doublement
   cloisonnee : par la classe de corps ET par le conteneur du contenu.
   Meme si cette feuille etait chargee par erreur sur une autre page, aucune
   de ces regles ne pourrait s'y appliquer, faute de la classe rmb-page. */

body.rmb-page .entry-content > h2 {
	font-size: 30px !important;
	line-height: 1.25 !important;
	margin: 46px 0 16px !important;
	letter-spacing: -.2px;
}
body.rmb-page .entry-content > h2::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	margin-top: 14px;
	border-radius: 3px;
	background: linear-gradient(90deg, #5d6b2f, #c9a24a);
}
body.rmb-page .entry-content > h3 {
	font-size: 21px !important;
	line-height: 1.3 !important;
	margin: 30px 0 10px !important;
}

@media (max-width: 600px) {
	body.rmb-page .entry-content > h2 {
		font-size: 25px !important;
		margin: 36px 0 14px !important;
	}
	body.rmb-page .entry-content > h3 { font-size: 19px !important; }
}

/* ------------------ Prix dynamiques — ajouté en v1.0.4 --------------- */
.rmb-product-price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}
.rmb-secours { color: var(--rmb-doux); font-style: italic; }
.rmb-secours a { color: var(--rmb-olive); text-decoration: underline; }
.rmb-rupture {
	padding: 4px 12px;
	border-radius: 999px;
	background: #fdf3ec;
	color: var(--rmb-terracotta);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .3px;
}