/*
Theme Name:  Astra Child — Moi, fonctionnaire
Description: Thème enfant Astra pour le site du livre « Moi, fonctionnaire — Neuf ans dans les coulisses d'un lycée public » de François Ballande. Landing de lancement (compte à rebours / Amazon), page extraits, kit presse, blog, schema.org et Open Graph intégrés.
Author:      François Ballande
Template:    astra
Version:     1.0.0
Requires at least: 6.3
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child-mf
*/

/* =========================================================
   0. FONTS LOCALES (Google Fonts auto-hébergées, licence OFL)
   ========================================================= */

@font-face {
	font-family: 'Oswald';
	src: url('assets/fonts/oswald-latin.woff2') format('woff2');
	font-weight: 200 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Lora';
	src: url('assets/fonts/lora-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Lora';
	src: url('assets/fonts/lora-italic-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

/* =========================================================
   1. DESIGN TOKENS — palette « journal satirique à l'encre »
   ========================================================= */

:root {
	--mf-cream:      #F5EFE0; /* crème papier          */
	--mf-cream-deep: #EDE4CE; /* crème plus soutenu    */
	--mf-ink:        #1A1A1A; /* encre noire           */
	--mf-navy:       #1B2A4A; /* bleu nuit             */
	--mf-navy-deep:  #14203A;
	--mf-red:        #B3272D; /* rouge tampon          */
	--mf-red-deep:   #8E1F24;
	--mf-blue:       #4A6285; /* bleu de travail délavé */

	--mf-font-title: 'Oswald', 'Arial Narrow', Impact, sans-serif;
	--mf-font-body:  'Lora', Georgia, 'Times New Roman', serif;

	--mf-shadow-card: 6px 6px 0 rgba(27, 42, 74, 0.14);
	--mf-border-ink:  2px solid var(--mf-ink);

	/* Hachures façon dessin de presse (très discrètes) */
	--mf-hatch-ink:  repeating-linear-gradient(135deg, rgba(26,26,26,0.05) 0 1px, transparent 1px 7px);
	--mf-hatch-cream: repeating-linear-gradient(135deg, rgba(245,239,224,0.07) 0 1px, transparent 1px 7px);
}

/* =========================================================
   2. BASE
   ========================================================= */

html, body {
	overflow-x: hidden; /* repli navigateurs anciens (Safari < 16) */
	overflow-x: clip;   /* nécessaire aux sections pleine largeur (calc 50vw) */
}

body {
	font-family: var(--mf-font-body);
	color: var(--mf-ink);
	background-color: var(--mf-cream);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	font-family: var(--mf-font-title);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--mf-ink);
	line-height: 1.15;
}

a {
	color: var(--mf-red);
}
a:hover,
a:focus {
	color: var(--mf-red-deep);
}

::selection {
	background: var(--mf-navy);
	color: var(--mf-cream);
}

:focus-visible {
	outline: 3px solid var(--mf-red);
	outline-offset: 2px;
}

/* =========================================================
   3. HEADER / FOOTER ASTRA (bleu nuit)
   ========================================================= */

.site-header,
.main-header-bar,
.ast-primary-header-bar,
.ast-above-header-bar {
	background: var(--mf-navy);
	border-bottom: 3px solid var(--mf-red);
}

.site-header .site-title a,
.site-header .site-description,
.main-header-menu .menu-link,
.ast-builder-menu .menu-link,
.main-header-bar .main-header-menu a,
.ast-header-account-wrap,
.ast-mobile-menu-trigger-minimal,
.site-header .menu-toggle {
	color: var(--mf-cream) !important;
	font-family: var(--mf-font-title);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 500;
}

.main-header-menu .menu-link:hover,
.ast-builder-menu .menu-link:hover,
.main-header-menu .current-menu-item > .menu-link {
	color: #fff !important;
	text-decoration: underline;
	text-decoration-color: var(--mf-red);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.ast-mobile-popup-drawer .ast-mobile-popup-inner {
	background: var(--mf-navy);
}
.ast-mobile-popup-drawer .menu-link,
.ast-mobile-popup-drawer .menu-toggle-close {
	color: var(--mf-cream);
}

.site-footer,
.site-footer .ast-builder-grid-row,
.site-footer [data-section] {
	background: var(--mf-navy);
	color: var(--mf-cream);
}
.site-footer a {
	color: var(--mf-cream);
	text-decoration: underline;
	text-decoration-color: var(--mf-blue);
}
.site-footer a:hover {
	color: #fff;
	text-decoration-color: var(--mf-red);
}
.site-footer .ast-footer-copyright {
	font-size: 0.85rem;
}

/* =========================================================
   4. COMPOSANTS GÉNÉRIQUES
   ========================================================= */

/* --- Conteneurs / sections pleine largeur ---
   Astra enferme le contenu dans .ast-container (max-width 1240 px,
   display:flex). Un élément flex ne peut pas s'en échapper par des marges
   négatives : il garde la largeur de son contenu et se décale vers la
   gauche, laissant une bande vide à droite. On libère donc le conteneur
   lui-même sur les gabarits landing, qui gèrent leur propre centrage via
   .mf-container. Les classes ci-dessous sont générées par WordPress
   (body_class) : elles ne dépendent d'aucune version d'Astra. */
.page-template-template-accueil .site-content > .ast-container,
.page-template-template-extraits .site-content > .ast-container,
.page-template-template-presse .site-content > .ast-container,
.page-template-template-mentions .site-content > .ast-container,
.error404 .site-content > .ast-container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.mf-landing {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.mf-section {
	padding: 4.5rem 1.5rem;
}

.mf-container {
	max-width: 1120px;
	margin: 0 auto;
}
.mf-container--narrow {
	max-width: 780px;
}

.mf-section--cream       { background: var(--mf-cream); }
.mf-section--cream-deep  { background: var(--mf-cream-deep) var(--mf-hatch-ink); }
.mf-section--navy        { background: var(--mf-navy) var(--mf-hatch-cream); color: var(--mf-cream); }
.mf-section--navy h2,
.mf-section--navy h3     { color: var(--mf-cream); }

.mf-section-title {
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	margin: 0 0 0.75em;
	text-align: center;
}
.mf-section-title::after {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	background: var(--mf-red);
	margin: 0.4em auto 0;
}
.mf-section-sub {
	text-align: center;
	max-width: 640px;
	margin: -0.5rem auto 2.5rem;
	font-style: italic;
	opacity: 0.85;
}

/* --- Boutons --- */
.mf-btn {
	display: inline-block;
	font-family: var(--mf-font-title);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 1.05rem;
	line-height: 1.2;
	padding: 0.95em 1.9em;
	border: 2px solid transparent;
	border-radius: 3px;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.mf-btn--red {
	background: var(--mf-red);
	color: #fff !important;
	box-shadow: 4px 4px 0 rgba(26, 26, 26, 0.25);
}
.mf-btn--red:hover,
.mf-btn--red:focus {
	background: var(--mf-red-deep);
	color: #fff !important;
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 rgba(26, 26, 26, 0.3);
}
.mf-btn--ghost {
	background: transparent;
	color: var(--mf-navy) !important;
	border-color: var(--mf-navy);
}
.mf-btn--ghost:hover,
.mf-btn--ghost:focus {
	background: var(--mf-navy);
	color: var(--mf-cream) !important;
}
.mf-section--navy .mf-btn--ghost {
	color: var(--mf-cream) !important;
	border-color: var(--mf-cream);
}
.mf-section--navy .mf-btn--ghost:hover {
	background: var(--mf-cream);
	color: var(--mf-navy) !important;
}
.mf-btn--big {
	font-size: 1.25rem;
	padding: 1.1em 2.4em;
}

/* --- Tampon administratif --- */
.mf-stamp {
	display: inline-block;
	font-family: var(--mf-font-title);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.95rem;
	color: var(--mf-red);
	border: 3px solid var(--mf-red);
	border-radius: 6px;
	padding: 0.45em 1em;
	transform: rotate(-3deg);
	background:
		radial-gradient(ellipse at 30% 40%, rgba(179, 39, 45, 0.06), transparent 60%);
	box-shadow: inset 0 0 0 1px rgba(179, 39, 45, 0.25);
}

/* --- Carte « carton administratif » --- */
.mf-card {
	background: var(--mf-cream);
	border: var(--mf-border-ink);
	border-radius: 4px;
	box-shadow: var(--mf-shadow-card);
	padding: 1.75rem;
	position: relative;
}
.mf-card::before {
	/* trombone / coin de dossier : simple liseré haut */
	content: "";
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	height: 0;
	border-top: 1px dashed rgba(26, 26, 26, 0.25);
}

/* --- Filet exergue --- */
.mf-quote {
	font-family: var(--mf-font-title);
	font-weight: 500;
	font-size: clamp(1.3rem, 3vw, 1.9rem);
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--mf-navy);
	border-left: 6px solid var(--mf-red);
	padding: 0.35em 0 0.35em 0.75em;
	margin: 1.5rem 0;
}

/* --- Utilitaires d'espacement / de mesure (remplacent les styles inline) --- */
.mf-mt-0 { margin-top: 0; }
.mf-mt-1 { margin-top: 1rem; }
.mf-mt-2 { margin-top: 2.5rem; }
.mf-my-2 { margin: 2rem 0; }
.mf-measure { max-width: 44em; }
.mf-center-cta { text-align: center; margin-top: 2rem; }
.mf-h-sub { font-size: 1.2rem; }

/* =========================================================
   5. BANDEAU DE LANCEMENT + COMPTE À REBOURS
   ========================================================= */

.mf-banner {
	background: var(--mf-navy-deep) var(--mf-hatch-cream);
	color: var(--mf-cream);
	padding: 0.85rem 1.5rem;
	text-align: center;
}
.mf-banner .mf-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 2rem;
}
.mf-banner-label {
	font-family: var(--mf-font-title);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 1rem;
}
.mf-banner-label strong {
	color: #fff;
	border-bottom: 3px solid var(--mf-red);
}
.mf-banner--slim {
	font-size: 0.9rem;
	padding: 0.55rem 1rem;
}
.mf-banner--slim a {
	color: var(--mf-cream);
	text-decoration: underline;
	text-decoration-color: var(--mf-red);
}

.mf-countdown {
	display: inline-flex;
	gap: 0.9rem;
}
.mf-count-unit {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 3.2em;
	background: rgba(245, 239, 224, 0.08);
	border: 1px solid rgba(245, 239, 224, 0.3);
	border-radius: 4px;
	padding: 0.3em 0.5em;
}
.mf-count-unit b {
	font-family: var(--mf-font-title);
	font-weight: 600;
	font-size: 1.45rem;
	line-height: 1.1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.mf-count-unit i {
	font-style: normal;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	opacity: 0.85;
}
/* À minuit le jour de la sortie, le JS masque le compte à rebours,
   cache les éléments .mf-cta-pre et révèle les .mf-cta-post. */
.mf-countdown.mf-ended {
	display: none;
}
[hidden] {
	display: none !important;
}

/* =========================================================
   6. HERO (accueil)
   ========================================================= */

.mf-hero {
	background: var(--mf-cream) var(--mf-hatch-ink);
	padding: 4rem 1.5rem 4.5rem;
}
.mf-hero .mf-container {
	display: grid;
	grid-template-columns: minmax(260px, 420px) 1fr;
	gap: 3.5rem;
	align-items: center;
}
.mf-hero-cover {
	text-align: center;
}
.mf-hero-cover img {
	width: 100%;
	max-width: 400px;
	height: auto;
	border: var(--mf-border-ink);
	box-shadow: 10px 10px 0 rgba(27, 42, 74, 0.18);
	transform: rotate(-1.5deg);
	background: #fff;
}
.mf-hero-content .mf-stamp {
	margin-bottom: 1.25rem;
}
.mf-hero-title {
	font-size: clamp(2.1rem, 5vw, 3.2rem);
	margin: 0 0 0.35em;
}
.mf-hero-title .mf-hero-subtitle {
	display: block;
	font-size: 0.42em;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--mf-blue);
	margin-top: 0.5em;
}
.mf-hero-hook {
	font-family: var(--mf-font-body);
	font-style: italic;
	font-size: clamp(1.25rem, 2.6vw, 1.6rem);
	color: var(--mf-red);
	margin: 0.75rem 0 1rem;
}
.mf-hero-pitch {
	font-size: 1.08rem;
	max-width: 34em;
}
.mf-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.75rem;
	align-items: center;
}
.mf-hero-meta {
	margin-top: 1.1rem;
	font-size: 0.9rem;
	opacity: 0.75;
	font-style: italic;
}

/* =========================================================
   7. PUNCHLINES (3 cartes)
   ========================================================= */

.mf-punchlines {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.mf-punchline {
	text-align: center;
	padding-top: 1.25rem;
}
.mf-punchline img {
	width: 130px;
	height: 130px;
	object-fit: cover;
	border-radius: 50%;
	border: var(--mf-border-ink);
	background: #fff;
	margin-bottom: 1rem;
}
.mf-punchline h3 {
	font-size: 1.15rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--mf-navy);
	margin: 0;
}
.mf-punchline h3 strong {
	color: var(--mf-red);
}
.mf-punchline p {
	font-size: 0.92rem;
	font-style: italic;
	opacity: 0.8;
	margin: 0.6rem 0 0;
}

/* =========================================================
   8. SECTION « LE LIVRE » (4e de couverture)
   ========================================================= */

.mf-book {
	display: grid;
	grid-template-columns: 1fr minmax(280px, 380px);
	gap: 3rem;
	align-items: start;
}
.mf-book-text p {
	font-size: 1.08rem;
	line-height: 1.75;
}
.mf-book-text > p:first-of-type::first-letter {
	font-family: var(--mf-font-title);
	font-size: 3.1em;
	line-height: 0.85;
	float: left;
	padding: 0.06em 0.12em 0 0;
	color: var(--mf-red);
}
.mf-book-signature {
	font-family: var(--mf-font-title);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mf-red);
	font-size: 1.15rem;
}
.mf-book-aside img {
	width: 100%;
	height: auto;
	border: var(--mf-border-ink);
	box-shadow: var(--mf-shadow-card);
	background: #fff;
}
.mf-book-facts {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 1.25rem 1.5rem;
	border: var(--mf-border-ink);
	background: var(--mf-cream);
	box-shadow: var(--mf-shadow-card);
	font-size: 0.98rem;
}
.mf-book-facts li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4em 0;
	border-bottom: 1px dashed rgba(26, 26, 26, 0.25);
}
.mf-book-facts li:last-child {
	border-bottom: 0;
}
.mf-book-facts b {
	font-family: var(--mf-font-title);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	color: var(--mf-blue);
}

/* =========================================================
   9. ILLUSTRATIONS
   ========================================================= */

.mf-illustrations {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.mf-illustration {
	margin: 0;
	background: #fff;
	border: var(--mf-border-ink);
	box-shadow: var(--mf-shadow-card);
	transition: transform 0.15s ease;
}
.mf-illustration:hover {
	transform: translateY(-4px) rotate(-0.4deg);
}
.mf-illustration img {
	display: block;
	width: 100%;
	height: auto;
}
.mf-illustration figcaption {
	font-family: var(--mf-font-title);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85rem;
	text-align: center;
	padding: 0.7em 0.5em;
	border-top: var(--mf-border-ink);
	background: var(--mf-cream);
}

/* =========================================================
   10. CAPTURE EMAIL
   ========================================================= */

.mf-email-block {
	text-align: center;
}
.mf-email-block .mf-section-title::after {
	background: var(--mf-cream);
}
.mf-email-form {
	max-width: 560px;
	margin: 2rem auto 0;
}

/* Habillage générique des formulaires (MailPoet, Brevo, HTML) */
.mf-email-form input[type="text"],
.mf-email-form input[type="email"] {
	width: 100%;
	font-family: var(--mf-font-body);
	font-size: 1.05rem;
	padding: 0.85em 1em;
	border: var(--mf-border-ink);
	border-radius: 3px;
	background: #fff;
	color: var(--mf-ink);
	margin-bottom: 0.9rem;
}
.mf-email-form input[type="submit"],
.mf-email-form button[type="submit"],
.mf-email-form .mailpoet_submit,
.mf-email-form .sib-form-block__button {
	display: inline-block;
	width: auto;
	font-family: var(--mf-font-title);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 1.05rem;
	background: var(--mf-red);
	color: #fff;
	border: 2px solid transparent;
	border-radius: 3px;
	padding: 0.9em 2em;
	cursor: pointer;
	box-shadow: 4px 4px 0 rgba(26, 26, 26, 0.25);
	transition: background-color 0.12s ease;
}
.mf-email-form input[type="submit"]:hover,
.mf-email-form button[type="submit"]:hover,
.mf-email-form .mailpoet_submit:hover {
	background: var(--mf-red-deep);
}
.mf-email-form .mailpoet_paragraph label,
.mf-email-form label {
	font-size: 0.9rem;
}
.mf-email-privacy {
	font-size: 0.85rem;
	font-style: italic;
	opacity: 0.75;
	margin-top: 1rem;
}
.mf-admin-note {
	margin-top: 1.25rem;
	padding: 0.9em 1.2em;
	border: 2px dashed var(--mf-red);
	background: rgba(179, 39, 45, 0.07);
	font-size: 0.9rem;
	text-align: left;
}

/* =========================================================
   11. FAQ (accordéons <details>)
   ========================================================= */

.mf-faq details {
	border: var(--mf-border-ink);
	background: var(--mf-cream);
	box-shadow: var(--mf-shadow-card);
	margin-bottom: 1.1rem;
	border-radius: 4px;
}
.mf-faq summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--mf-font-title);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 1.05rem;
	padding: 1.05em 3em 1.05em 1.25em;
	position: relative;
}
.mf-faq summary::-webkit-details-marker {
	display: none;
}
.mf-faq summary::after {
	content: "+";
	position: absolute;
	right: 1.1em;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5em;
	color: var(--mf-red);
	transition: transform 0.15s ease;
}
.mf-faq details[open] summary::after {
	content: "–";
}
.mf-faq details > div {
	padding: 0 1.25rem 1.25rem;
	line-height: 1.7;
}

/* =========================================================
   12. CTA FINAL
   ========================================================= */

.mf-final-cta {
	text-align: center;
}
.mf-final-cta .mf-stamp {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
}
.mf-final-cta h2 {
	font-size: clamp(1.8rem, 4.5vw, 2.6rem);
	margin: 0 0 1rem;
}

/* =========================================================
   13. PAGE PRESSE
   ========================================================= */

.mf-press-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}
.mf-press-downloads {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mf-press-downloads li {
	margin-bottom: 1rem;
}
.mf-press-downloads a {
	display: flex;
	align-items: center;
	gap: 1rem;
	border: var(--mf-border-ink);
	background: var(--mf-cream);
	box-shadow: var(--mf-shadow-card);
	padding: 1rem 1.25rem;
	text-decoration: none;
	color: var(--mf-ink);
	font-family: var(--mf-font-title);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: transform 0.12s ease;
}
.mf-press-downloads a:hover {
	transform: translate(-2px, -2px);
	color: var(--mf-red);
}
.mf-press-downloads .mf-dl-badge {
	flex: none;
	font-size: 0.7rem;
	font-weight: 600;
	color: #fff;
	background: var(--mf-navy);
	padding: 0.35em 0.6em;
	border-radius: 3px;
	letter-spacing: 0.1em;
}
.mf-press-quotes {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: mf-quote;
}
.mf-press-quotes li {
	counter-increment: mf-quote;
	position: relative;
	padding: 1rem 1.25rem 1rem 3.4rem;
	border: var(--mf-border-ink);
	background: var(--mf-cream);
	box-shadow: var(--mf-shadow-card);
	margin-bottom: 1.1rem;
	font-style: italic;
	line-height: 1.6;
}
.mf-press-quotes li::before {
	content: counter(mf-quote, decimal-leading-zero);
	position: absolute;
	left: 1rem;
	top: 0.95rem;
	font-family: var(--mf-font-title);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--mf-red);
	font-style: normal;
}
.mf-press-date {
	font-family: var(--mf-font-title);
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(1.3rem, 3vw, 1.9rem);
	color: var(--mf-red);
	letter-spacing: 0.05em;
}

/* =========================================================
   14. BLOG (gabarit article)
   ========================================================= */

.single-post .entry-title,
.blog .entry-title,
.archive .entry-title {
	font-size: clamp(1.9rem, 4.5vw, 2.7rem);
}

.single-post .entry-content {
	font-size: 1.1rem;
	line-height: 1.8;
}

/* Exergue punchline : blockquote natif Gutenberg */
.single-post .entry-content blockquote,
.entry-content .wp-block-quote {
	font-family: var(--mf-font-title);
	font-weight: 500;
	font-size: clamp(1.25rem, 3vw, 1.7rem);
	font-style: normal;
	line-height: 1.35;
	color: var(--mf-navy);
	border-left: 6px solid var(--mf-red);
	background: var(--mf-cream-deep) var(--mf-hatch-ink);
	padding: 1.4rem 1.75rem;
	margin: 2.25rem 0;
}
.entry-content .wp-block-quote cite {
	display: block;
	font-family: var(--mf-font-body);
	font-size: 0.85rem;
	font-style: italic;
	margin-top: 0.75em;
	color: var(--mf-ink);
	opacity: 0.7;
}

/* CTA livre en fin d'article */
.mf-book-cta {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 1.5rem;
	align-items: center;
	border: var(--mf-border-ink);
	background: var(--mf-cream) var(--mf-hatch-ink);
	box-shadow: var(--mf-shadow-card);
	padding: 1.75rem;
	margin: 3rem 0 1rem;
}
.mf-book-cta img {
	width: 100%;
	height: auto;
	border: 1px solid var(--mf-ink);
	transform: rotate(-2deg);
	box-shadow: 4px 4px 0 rgba(27, 42, 74, 0.15);
}
.mf-book-cta h3 {
	margin: 0 0 0.4em;
	font-size: 1.25rem;
}
.mf-book-cta p {
	margin: 0 0 1em;
	font-size: 0.98rem;
}

/* =========================================================
   15. FIL D'ARIANE
   ========================================================= */

.mf-breadcrumbs {
	font-size: 0.85rem;
	font-family: var(--mf-font-title);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin: 0 0 2rem;
	opacity: 0.85;
}
.mf-breadcrumbs a {
	color: var(--mf-blue);
	text-decoration: none;
}
.mf-breadcrumbs a:hover {
	color: var(--mf-red);
}
.mf-breadcrumbs .sep {
	margin: 0 0.5em;
	color: var(--mf-red);
}

/* =========================================================
   16. MENTIONS LÉGALES / PAGES SOBRES
   ========================================================= */

.mf-legal h2 {
	font-size: 1.3rem;
	margin-top: 2.25rem;
}
.mf-legal {
	font-size: 0.98rem;
	line-height: 1.75;
}

/* =========================================================
   17. RESPONSIVE
   ========================================================= */

@media (max-width: 921px) {
	.mf-hero .mf-container {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		text-align: center;
	}
	.mf-hero-ctas {
		justify-content: center;
	}
	.mf-hero-cover img {
		max-width: 300px;
	}
	.mf-punchlines,
	.mf-illustrations {
		grid-template-columns: 1fr 1fr;
	}
	.mf-book {
		grid-template-columns: 1fr;
	}
	.mf-book-aside {
		max-width: 420px;
		margin: 0 auto;
	}
	.mf-press-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.mf-section {
		padding: 3rem 1.25rem;
	}
	.mf-punchlines,
	.mf-illustrations {
		grid-template-columns: 1fr;
	}
	.mf-countdown {
		gap: 0.5rem;
	}
	.mf-count-unit b {
		font-size: 1.15rem;
	}
	.mf-book-cta {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.mf-book-cta img {
		max-width: 130px;
		margin: 0 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mf-btn,
	.mf-illustration,
	.mf-press-downloads a {
		transition: none;
	}
}

/* =========================================================
   18. IMPRESSION (kit presse imprimable)
   ========================================================= */

@media print {
	.mf-banner,
	.site-header,
	.site-footer,
	.mf-btn {
		display: none !important;
	}
	body {
		background: #fff;
	}
}