/**
 * Marliva — Composants UI
 * Boutons, cards, bandeaux CTA, encadrés, formulaires, accordéons
 */

/* ============================================================
   RESET FIN + TYPO DE BASE
   ============================================================ */
body {
	font-family: var(--marliva-font-sans);
	font-size: var(--marliva-fs-body);
	line-height: 1.75;
	color: var(--marliva-noir-doux);
	background: var(--marliva-blanc-creme);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--marliva-font-serif);
	color: var(--marliva-bleu-encre);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 var(--marliva-space-md);
}

h1 { font-size: var(--marliva-fs-h1); line-height: 1.1; }
h2 { font-size: var(--marliva-fs-h2); }
h3 { font-size: var(--marliva-fs-h3); line-height: 1.3; }
h4 { font-size: var(--marliva-fs-h4); font-family: var(--marliva-font-sans); font-weight: 600; }

p { margin: 0 0 var(--marliva-space-md); }

a {
	color: var(--marliva-or-mat);
	text-decoration: none;
	transition: var(--marliva-transition);
}
a:hover {
	color: var(--marliva-rose-ancien);
	text-decoration: underline;
}

/* ============================================================
   SUR-TITRES (eyebrow)
   ============================================================ */
.marliva-sur-titre {
	font-family: var(--marliva-font-sans);
	font-size: var(--marliva-fs-tiny);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--marliva-or-mat);
	margin-bottom: var(--marliva-space-md);
	display: inline-block;
}

/* ============================================================
   BOUTONS
   ============================================================ */
.marliva-btn,
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	font-family: var(--marliva-font-sans);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	border-radius: var(--marliva-radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: var(--marliva-transition);
	text-decoration: none;
	line-height: 1;
}

/* Primaire — rose ancien (CTA principal "Prendre RDV") */
.marliva-btn--primary,
.wp-block-button.is-style-marliva-primary .wp-block-button__link {
	background: var(--marliva-rose-ancien);
	color: var(--marliva-blanc);
	border-color: var(--marliva-rose-ancien);
}
.marliva-btn--primary:hover,
.wp-block-button.is-style-marliva-primary .wp-block-button__link:hover {
	background: var(--marliva-bleu-encre);
	border-color: var(--marliva-bleu-encre);
	color: var(--marliva-blanc);
	transform: translateY(-2px);
	box-shadow: var(--marliva-shadow-md);
	text-decoration: none;
}

/* Secondaire — fantôme bleu encre */
.marliva-btn--secondary,
.wp-block-button.is-style-marliva-secondary .wp-block-button__link {
	background: transparent;
	color: var(--marliva-bleu-encre);
	border: 1px solid var(--marliva-bleu-encre);
}
.marliva-btn--secondary:hover,
.wp-block-button.is-style-marliva-secondary .wp-block-button__link:hover {
	background: var(--marliva-bleu-encre);
	color: var(--marliva-ivoire);
	text-decoration: none;
}

/* Or mat — variante prestige */
.marliva-btn--gold,
.wp-block-button.is-style-marliva-gold .wp-block-button__link {
	background: var(--marliva-or-mat);
	color: var(--marliva-bleu-encre);
	border-color: var(--marliva-or-mat);
}
.marliva-btn--gold:hover,
.wp-block-button.is-style-marliva-gold .wp-block-button__link:hover {
	background: var(--marliva-or-clair);
	border-color: var(--marliva-or-clair);
	text-decoration: none;
}

/* Fantôme ivoire — sur fond bleu encre */
.marliva-btn--ghost-light {
	background: transparent;
	color: var(--marliva-ivoire);
	border: 1px solid var(--marliva-ivoire);
}
.marliva-btn--ghost-light:hover {
	background: var(--marliva-ivoire);
	color: var(--marliva-bleu-encre);
	text-decoration: none;
}

/* ============================================================
   CARDS (pôles, articles, témoignages)
   ============================================================ */
.marliva-card {
	background: var(--marliva-blanc-creme);
	border: 1px solid var(--marliva-separateur);
	border-radius: var(--marliva-radius-lg);
	padding: var(--marliva-space-xl);
	transition: var(--marliva-transition);
}
.marliva-card:hover {
	background: var(--marliva-ivoire);
	border-color: var(--marliva-rose-ancien);
	transform: translateY(-4px);
	box-shadow: var(--marliva-shadow-md);
}

/* ============================================================
   BANDEAU CTA RÉUTILISABLE
   ============================================================ */
.marliva-cta-bandeau {
	padding: var(--marliva-space-3xl) var(--marliva-space-lg);
	text-align: center;
}
.marliva-cta-bandeau__inner {
	max-width: var(--marliva-container);
	margin: 0 auto;
}
.marliva-cta-bandeau__content {
	max-width: 720px;
	margin: 0 auto var(--marliva-space-xl);
}
.marliva-cta-bandeau__sur-titre {
	font-family: var(--marliva-font-sans);
	font-size: var(--marliva-fs-tiny);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--marliva-or-mat);
	margin-bottom: var(--marliva-space-md);
}
.marliva-cta-bandeau__titre {
	font-family: var(--marliva-font-serif);
	font-size: var(--marliva-fs-h2);
	color: var(--marliva-bleu-encre);
	margin-bottom: var(--marliva-space-md);
}
.marliva-cta-bandeau__texte {
	color: var(--marliva-gris-chaud);
	font-size: 1.125rem;
}
.marliva-cta-bandeau__actions {
	display: flex;
	gap: var(--marliva-space-md);
	justify-content: center;
	flex-wrap: wrap;
}

/* Variantes */
.marliva-cta-bandeau--ivoire { background: var(--marliva-ivoire); }
.marliva-cta-bandeau--rose   { background: var(--marliva-rose-poudre); }
.marliva-cta-bandeau--encre  {
	background: var(--marliva-bleu-encre);
	color: var(--marliva-ivoire);
}
.marliva-cta-bandeau--encre .marliva-cta-bandeau__titre,
.marliva-cta-bandeau--encre .marliva-cta-bandeau__texte {
	color: var(--marliva-ivoire);
}
.marliva-cta-bandeau--encre .marliva-cta-bandeau__sur-titre {
	color: var(--marliva-or-clair);
}

/* ============================================================
   ENCADRÉ "À RETENIR" (templates articles)
   ============================================================ */
.marliva-a-retenir {
	background: var(--marliva-ivoire);
	border-left: 4px solid var(--marliva-rose-ancien);
	padding: var(--marliva-space-lg) var(--marliva-space-xl);
	margin: var(--marliva-space-xl) 0;
	border-radius: 0 var(--marliva-radius) var(--marliva-radius) 0;
}
.marliva-a-retenir__titre {
	font-family: var(--marliva-font-sans);
	font-size: var(--marliva-fs-tiny);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--marliva-rose-ancien);
	margin-bottom: var(--marliva-space-md);
}
.marliva-a-retenir ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.marliva-a-retenir li {
	padding-left: var(--marliva-space-md);
	position: relative;
	margin-bottom: var(--marliva-space-sm);
}
.marliva-a-retenir li::before {
	content: "—";
	color: var(--marliva-or-mat);
	position: absolute;
	left: 0;
}

/* ============================================================
   CITATIONS ÉDITORIALES
   ============================================================ */
blockquote,
.marliva-citation {
	font-family: var(--marliva-font-serif);
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.5;
	color: var(--marliva-rose-ancien);
	border-left: none;
	margin: var(--marliva-space-xl) 0;
	padding: 0;
}

/* ============================================================
   HEADER STICKY
   ============================================================ */
.marliva-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--marliva-z-header);
	padding: var(--marliva-space-md) var(--marliva-space-xl);
	background: transparent;
	transition: var(--marliva-transition);
}
.marliva-header--scrolled {
	background: var(--marliva-blanc-creme);
	box-shadow: var(--marliva-shadow-sm);
	padding: 0.75rem var(--marliva-space-xl);
}
.marliva-header__inner {
	max-width: var(--marliva-container-wide);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--marliva-space-xl);
}

/* ============================================================
   FOOTER
   ============================================================ */
.marliva-footer {
	background: var(--marliva-bleu-encre);
	color: var(--marliva-ivoire);
	padding: var(--marliva-space-3xl) var(--marliva-space-lg) var(--marliva-space-xl);
}
.marliva-footer a {
	color: var(--marliva-ivoire);
	opacity: 0.85;
}
.marliva-footer a:hover {
	color: var(--marliva-or-clair);
	opacity: 1;
	text-decoration: underline;
}

/* ============================================================
   STICKY CTA MOBILE
   ============================================================ */
.marliva-sticky-mobile {
	display: none;
}
@media (max-width: 768px) {
	.marliva-sticky-mobile {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: var(--marliva-space-sm);
		background: var(--marliva-blanc-creme);
		box-shadow: 0 -4px 24px rgba(43, 58, 85, 0.08);
		z-index: var(--marliva-z-sticky-mobile);
		transition: transform 0.3s ease;
	}
	.marliva-sticky-mobile.is-hidden {
		transform: translateY(100%);
	}
	.marliva-sticky-mobile .marliva-btn {
		width: 100%;
	}
}

/* ============================================================
   ACCESSIBILITÉ — focus visible
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--marliva-rose-ancien);
	outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE — grilles fluides
   ============================================================ */
@media (max-width: 768px) {
	.marliva-cta-bandeau {
		padding: var(--marliva-space-2xl) var(--marliva-space-lg);
	}
	.marliva-cta-bandeau__actions {
		flex-direction: column;
		align-items: stretch;
	}
}