/*
 * La Vie Claire — header/footer réduits pour les sites externes du groupe
 * ------------------------------------------------------------------------
 * Version statique, sans dépendance WordPress/SCSS, dérivée fidèlement du
 * landmark "login-header" / "login-footer" du thème smartcore-theme (utilisé
 * sur tous les parcours "fermés" du site principal : mire de connexion,
 * checkout, validation d'email...).
 *
 * Polices : pile système uniquement (aucun fichier de police livré ici).
 * "Lato" est listée en premier au cas où elle serait déjà installée chez le
 * visiteur, avec un repli sur une pile système proche en forme (humanist
 * sans-serif) sinon.
 */

:root {
	--lvc-font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--lvc-color-text-primary: #052b0a;
	--lvc-color-text-secondary: #737373;
	--lvc-color-green: #4a8270;
	--lvc-color-green-hover: #2d5e4e;
	--lvc-color-surface-neutral: #f9f9f5ed; /* crème, canal alpha ~93% inclus (comme la source) */
	--lvc-color-surface-highlight-green: #e8f2ee;
}

.lvc-header,
.lvc-footer {
	font-family: var(--lvc-font-family);
	box-sizing: border-box;
}

.lvc-header *,
.lvc-footer *,
.lvc-header *::before,
.lvc-footer *::before,
.lvc-header *::after,
.lvc-footer *::after {
	box-sizing: inherit;
}

/* ------------------------------------------------------------------------
 * Header réduit (fond blanc, logo + retour au site principal)
 * ---------------------------------------------------------------------- */

.lvc-header {
	background: #fff;
}

.lvc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem; /* 16px */
	max-width: 1480px; /* 1440px de contenu utile + 2 x 20px de marge intérieure */
	width: 100%;
	margin-inline: auto;
	padding-block: 1.25rem; /* 20px */
	padding-inline: 1.25rem; /* 20px */
}

.lvc-header__logo-link {
	display: block;
	flex-shrink: 0;
}

.lvc-header__logo {
	display: block;
	width: 150px;
	height: auto;
}

/* Bouton "Retour vers le site principal" : pilule pleine, sur le modèle du
 * bouton "secondary" du thème (fond vert, texte blanc, fonce au survol). */
.lvc-header__back {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.5rem; /* 8px */
	padding: 0.5rem 1rem; /* 8px 16px */
	border-radius: 999px;
	background-color: var(--lvc-color-green);
	color: #fff;
	font-family: inherit;
	font-size: 0.875rem; /* 14px */
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.lvc-header__back:hover,
.lvc-header__back:focus-visible {
	background-color: var(--lvc-color-green-hover);
	color: #fff;
}

.lvc-header__back-icon {
	display: block;
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	stroke: currentColor;
}

/* ------------------------------------------------------------------------
 * Footer réduit (fond crème, liens légaux + copyright)
 * ---------------------------------------------------------------------- */

.lvc-footer {
	background: var(--lvc-color-surface-neutral);
}

.lvc-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem; /* 12px */
	max-width: 460px; /* 420px de contenu utile + 2 x 20px de marge intérieure */
	width: 100%;
	margin-inline: auto;
	padding-block: 1.5rem 2rem; /* 24px 32px */
	padding-inline: 1.25rem; /* 20px */
	text-align: center;
}

.lvc-footer__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem; /* 8px 16px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.lvc-footer__menu a {
	color: var(--lvc-color-text-secondary);
	font-size: 0.75rem; /* 12px */
	text-decoration: underline;
}

.lvc-footer__menu a:hover {
	color: var(--lvc-color-green);
}

.lvc-footer__copyright {
	margin: 0;
	color: var(--lvc-color-text-secondary);
	font-size: 0.75rem; /* 12px */
}