/* ============================================================================
   css/preparer-allaitement.css - page preparer-allaitement.php (14/10/2026, v4)
   Chargé par $donneesSupplementairesHeader, donc AVANT custom.css :
   préfixe .main pour gagner à spécificité égale. Jetons de vm-tokens.css
   seuls, aucun !important, mobile-first, bascule à 577 px.

   RÈGLE DE COULEUR (charte VM) :
   - texte : toujours --vm-bleu-fonce ou --vm-bleu, jamais une couleur d'accent ;
   - accents (traits, pastilles, pictos décoratifs) : couleurs de charte
     pures (rose, turquoise, jaune, bleu clair, cyan), sans mélange avec du noir ;
   - fonds : teintes pâles de vm-tokens.css (--vm-*-pale) ou blanc.
   ============================================================================ */

/* Couleurs d'accent : --prep = teinte pure, --prep-pale = fond pâle */
.main .vm-prep-c--rose       { --prep: var(--vm-rose);       --prep-pale: var(--vm-rose-pale); }
.main .vm-prep-c--turquoise  { --prep: var(--vm-turquoise);  --prep-pale: var(--vm-turquoise-pale); }
.main .vm-prep-c--jaune      { --prep: var(--vm-jaune);      --prep-pale: var(--vm-jaune-pale); }
.main .vm-prep-c--bleu-clair { --prep: var(--vm-bleu-clair); --prep-pale: var(--vm-bleu-clair-pale); }
.main .vm-prep-c--cyan       { --prep: var(--vm-cyan);       --prep-pale: var(--vm-cyan-pale); }

/* Phrase rassurante de l'intro */
.main .vm-prep-rassure {
	padding: var(--vm-space-3) var(--vm-space-4);
	border-radius: var(--vm-radius-md);
	background: var(--vm-creme-pale);
	color: var(--vm-bleu-fonce);
}
.main .vm-prep-rassure .fa-leaf { color: var(--vm-turquoise); }

/* Sommaire des 4 étapes */
.main .vm-prep-sommaire {
	display: grid;
	gap: var(--vm-space-2);
	padding-left: 0;
	margin: var(--vm-space-4) auto 0;
	text-align: left;
}
.main .vm-prep-sommaire a {
	display: flex;
	align-items: center;
	gap: var(--vm-space-3);
	padding: var(--vm-space-3);
	border: 1px solid var(--vm-border);
	border-left: 4px solid var(--prep);
	border-radius: var(--vm-radius-md);
	background: var(--vm-surface);
	color: var(--vm-bleu-fonce);
	font-weight: var(--vm-fw-semi);
	text-decoration: none;
	transition: box-shadow var(--vm-transition-fast);
}
.main .vm-prep-sommaire a:hover { box-shadow: var(--vm-shadow-md); }
.main .vm-prep-sommaire a:focus-visible { outline: 2px solid var(--vm-bleu); outline-offset: 2px; }
.main .vm-prep-sommaire__num {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 2px solid var(--prep);
	background: var(--prep-pale);
	color: var(--vm-bleu-fonce);
	font-weight: var(--vm-fw-bold);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Surtitre d'étape (pastille de couleur) + repère chronologique */
.main .vm-prep-etape {
	margin-bottom: var(--vm-space-1);
	color: var(--vm-bleu-fonce);
	font-weight: var(--vm-fw-bold);
	text-transform: uppercase;
	letter-spacing: .05em;
}
.main .vm-prep-etape::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: var(--vm-space-2);
	border-radius: 50%;
	background: var(--prep);
	vertical-align: middle;
}
.main .vm-prep-quand {
	display: inline-block;
	margin-left: var(--vm-space-2);
	padding: 2px var(--vm-space-3);
	border-radius: var(--vm-radius-pill);
	background: var(--prep-pale);
	color: var(--vm-bleu-fonce);
	font-weight: var(--vm-fw-medium);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--vm-fs-xs);
}

/* Pastilles : personnes du « cocon » (étape 2) et mots de l'exercice (étape 1) */
.main ul.vm-prep-proches,
.main ul.vm-prep-mots {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vm-space-2);
	padding-left: 0;
}
.main ul.vm-prep-mots { justify-content: center; margin: var(--vm-space-3) 0; }
.main ul.vm-prep-proches li,
.main ul.vm-prep-mots li {
	padding: var(--vm-space-1) var(--vm-space-3);
	border-radius: var(--vm-radius-pill);
	border: 1px solid var(--prep);
	background: var(--vm-surface);
	color: var(--vm-bleu-fonce);
	font-weight: var(--vm-fw-medium);
}
.main ul.vm-prep-proches li { --prep: var(--vm-turquoise); }

/* Cartes de ressources */
.main .vm-prep-cartes { margin-top: var(--vm-space-5); }
.main .vm-prep-carte__link { display: block; height: 100%; color: inherit; }
.main .vm-prep-carte {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--vm-surface);
	border-top: 4px solid var(--prep);
}
.main .vm-prep-carte__ico {
	width: clamp(48px, 8vw, 64px);
	height: clamp(48px, 8vw, 64px);
	border-radius: 50%;
	background: var(--prep-pale);
	color: var(--prep);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: var(--vm-space-3);
}
.main .vm-prep-carte__title {
	font-size: 1.1rem;
	color: var(--vm-bleu-fonce);
	margin-bottom: var(--vm-space-2);
}
.main .vm-prep-carte p { flex: 1 1 auto; }
.main .vm-prep-carte__cta { color: var(--vm-bleu); font-weight: var(--vm-fw-semi); }
.main a[class*="__link"]:hover .vm-prep-carte__cta { text-decoration: underline; }

/* Encart de mise en avant (Entretien VanillaMilk) : carte blanche, liseré cyan */
.main .vm-prep-encart {
	padding: var(--vm-space-5);
	border: 1px solid var(--vm-border);
	border-left: 4px solid var(--vm-cyan);
	border-radius: var(--vm-radius-md);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow-sm);
	text-align: center;
}
.main .vm-prep-encart__action { margin-top: var(--vm-space-4); }

/* Encarts image (livret, Salon Baby) : visuel + texte, empilés sur mobile */
.main .vm-prep-livret {
	display: grid;
	gap: var(--vm-space-5);
	align-items: center;
	max-width: var(--vm-container-max);
	margin: 0 auto;
}
.main .vm-prep-livret--carte {
	padding: var(--vm-space-5);
	border: 1px solid var(--vm-border);
	border-top: 4px solid var(--vm-cyan);
	border-radius: var(--vm-radius-lg);
	background: var(--vm-surface);
	box-shadow: var(--vm-shadow-md);
}
.main .vm-prep-livret__visuel { text-align: center; }
.main .vm-prep-livret__visuel a { display: inline-block; }
.main .vm-prep-livret__badge {
	display: inline-block;
	margin-bottom: var(--vm-space-2);
	padding: 2px var(--vm-space-3);
	border-radius: var(--vm-radius-pill);
	background: var(--vm-jaune);
	color: var(--vm-bleu-fonce);
	font-weight: var(--vm-fw-bold);
	font-size: var(--vm-fs-sm);
}
.main ul.vm-prep-livret__points { margin-bottom: var(--vm-space-4); }
.main ul.vm-prep-livret__points li { margin-bottom: var(--vm-space-2); }
.main .vm-prep-livret__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vm-space-3);
}
.main .vm-prep-photo {
	width: 100%;
	max-width: 520px;
	height: auto;
	border-radius: var(--vm-radius-lg);
	box-shadow: var(--vm-shadow-md);
}

@media (min-width: 577px) {
	.main .vm-prep-sommaire { grid-template-columns: 1fr 1fr; }
	.main .vm-prep-livret--carte { padding: var(--vm-space-6); }
}

@media (min-width: 992px) {
	.main .vm-prep-livret { grid-template-columns: 2fr 3fr; }
	.main .vm-prep-livret--inverse { grid-template-columns: 3fr 2fr; }
	.main .vm-prep-livret--inverse .vm-prep-livret__visuel { order: 2; }
}