:root {
	/* Design tokens repris tels quels de madame.lefigaro.fr (couleurs,
	   z-index, easing) — ce n'est pas une approximation. */
	--fig-color-primary-main: 18 18 18;
	--fig-color-primary-70: 87 87 87;
	--fig-color-primary-60: 189 15 34;
	--fig-color-primary-50: 235 19 42;
	--fig-color-primary-10: 245 239 233;
	--fig-color-alert-main: 198 40 40;
	--fig-color-neutral-90: 18 18 18;
	--fig-color-neutral-50: 114 114 114;
	--fig-color-neutral-20: 204 204 204;
	--fig-color-neutral-10: 242 242 242;
	--fig-color-white: 255 255 255;
	--fig-z0: 0;
	--fig-z1: 1;
	--fig-z2: 2;
	--transition-speed-quick: .15s;
	--transition-speed-medium: .3s;
	--transition-type-cubic: cubic-bezier(.4,0,.2,1);
	--transition-type-ease: ease-out;
	--motion-medium: var(--transition-speed-medium) var(--transition-type-cubic);
	--motion-quick: var(--transition-speed-quick) var(--transition-type-ease);

	--mfr-ink: rgb(var(--fig-color-primary-main));
	--mfr-paper: #fff;
	--mfr-line: rgb(var(--fig-color-neutral-20));
	--mfr-muted: rgb(var(--fig-color-primary-70));
	--mfr-red: rgb(var(--fig-color-primary-60));
	--mfr-gold: #f2b705;

	/*
	 * Polices reprises de madame.lefigaro.fr, sous licence désormais :
	 * gt-super-display / gt-super-text / gt-super-text-book (Grilli Type)
	 * et proza-libre (OFL, Google Fonts). @font-face déclarés ci-dessous
	 * (assets/fonts/gt-super, assets/fonts/proza-libre).
	 */
	--fig-font-weight-light: 300;
	--fig-font-weight-regular: 400;
	--fig-font-weight-medium: 500;
	--fig-font-weight-semibold: 600;
	--fig-font-weight-bold: 700;
	--fig-font-system-sans-serif: "Arial", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", "Helvetica", sans-serif;
	--fig-font-system-serif: "Times New Roman", "Times", "Georgia", "Verdana", "Garamond", "Palatino", serif;
	--fig-font-family-1: gt-super-display, "Fraunces", var(--fig-font-system-serif);
	--fig-font-family-2: proza-libre, var(--fig-font-system-sans-serif);
	--fig-font-family-3: gt-super-text-book, "Fraunces", var(--fig-font-system-serif);
	--fig-font-family-4: gt-super-text, "Fraunces", var(--fig-font-system-serif);
	/* Police du CHROME (header/footer), PAS du corps d'article (2026-09-23,
	   retour Ethibaud « clone identique ») — vérifié en direct sur
	   madame.lefigaro.fr : `.fh-*`/`.fh-ft*` (header/footer widget) rendent
	   en "source-sans-pro", alors que le corps des articles (`article p`)
	   reste sur proza-libre (--fig-font-family-2, déjà correct). Les deux
	   familles cohabitent réellement sur le vrai site, ce n'est pas une
	   confusion — "Source Sans 3" en est la version Google Fonts actuelle
	   (OFL, peut être chargée pour de vrai, contrairement à gt-super sous
	   licence). */
	--fig-font-family-5: "Source Sans 3", var(--fig-font-system-sans-serif);
	/* Largeur "boxed" du chrome (2026-09-23) — vérifiée en direct :
	   `.fh-container` (logo row) ET `.fh-ft` (footer) sont TOUS DEUX
	   centrés à max-width:1280px sur le vrai site, jamais plus large,
	   quelle que soit la largeur de la fenêtre. */
	--mfr-boxed-width: 1280px;
}

@font-face {
	font-family: "gt-super-display";
	src: url("../fonts/gt-super/GT-Super-Display-Light-Trial.otf") format("opentype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-display";
	src: url("../fonts/gt-super/GT-Super-Display-Light-Italic-Trial.otf") format("opentype");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-display";
	src: url("../fonts/gt-super/GT-Super-Display-Regular-Trial.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-display";
	src: url("../fonts/gt-super/GT-Super-Display-Regular-Italic-Trial.otf") format("opentype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-display";
	src: url("../fonts/gt-super/GT-Super-Display-Medium-Trial.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-display";
	src: url("../fonts/gt-super/GT-Super-Display-Medium-Italic-Trial.otf") format("opentype");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-display";
	src: url("../fonts/gt-super/GT-Super-Display-Bold-Trial.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-display";
	src: url("../fonts/gt-super/GT-Super-Display-Bold-Italic-Trial.otf") format("opentype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-display";
	src: url("../fonts/gt-super/GT-Super-Display-Super-Trial.otf") format("opentype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-display";
	src: url("../fonts/gt-super/GT-Super-Display-Super-Italic-Trial.otf") format("opentype");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-text-book";
	src: url("../fonts/gt-super/GT-Super-Text-Book-Trial.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-text-book";
	src: url("../fonts/gt-super/GT-Super-Text-Book-Italic-Trial.otf") format("opentype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-text";
	src: url("../fonts/gt-super/GT-Super-Text-Regular-Trial.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-text";
	src: url("../fonts/gt-super/GT-Super-Text-Regular-Italic-Trial.otf") format("opentype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-text";
	src: url("../fonts/gt-super/GT-Super-Text-Medium-Trial.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-text";
	src: url("../fonts/gt-super/GT-Super-Text-Medium-Italic-Trial.otf") format("opentype");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-text";
	src: url("../fonts/gt-super/GT-Super-Text-Bold-Trial.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-text";
	src: url("../fonts/gt-super/GT-Super-Text-Bold-Italic-Trial.otf") format("opentype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-text";
	src: url("../fonts/gt-super/GT-Super-Text-Black-Trial.otf") format("opentype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "gt-super-text";
	src: url("../fonts/gt-super/GT-Super-Text-Black-Italic-Trial.otf") format("opentype");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "proza-libre";
	src: url("../fonts/proza-libre/ProzaLibre-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "proza-libre";
	src: url("../fonts/proza-libre/ProzaLibre-Italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "proza-libre";
	src: url("../fonts/proza-libre/ProzaLibre-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "proza-libre";
	src: url("../fonts/proza-libre/ProzaLibre-MediumItalic.ttf") format("truetype");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "proza-libre";
	src: url("../fonts/proza-libre/ProzaLibre-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "proza-libre";
	src: url("../fonts/proza-libre/ProzaLibre-SemiBoldItalic.ttf") format("truetype");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "proza-libre";
	src: url("../fonts/proza-libre/ProzaLibre-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "proza-libre";
	src: url("../fonts/proza-libre/ProzaLibre-BoldItalic.ttf") format("truetype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "proza-libre";
	src: url("../fonts/proza-libre/ProzaLibre-ExtraBold.ttf") format("truetype");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "proza-libre";
	src: url("../fonts/proza-libre/ProzaLibre-ExtraBoldItalic.ttf") format("truetype");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

* { box-sizing: border-box; }

body.mfr-body {
	margin: 0;
	background: var(--mfr-paper);
	color: var(--mfr-ink);
	font-family: var(--fig-font-family-1);
	line-height: 1.5;
}

a { color: inherit; }

.mfr-list, .mfr-article {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 1rem 4rem;
}

/* ---------- Header ---------- */

.mfr-header {
	border-top: 2px solid var(--mfr-ink);
	border-bottom: 1px solid var(--mfr-ink);
}

/* text-transform NI letter-spacing élargi (2026-09-23, retour Ethibaud,
   comparaison capture réelle vs regards) — le vrai site n'affiche PAS cette
   barre en majuscules, contrairement à ce qui avait été posé ici avant
   d'avoir les vrais libellés (héritage de l'époque où le texte était un
   placeholder). `font-size` remonté de 0.7rem à 0.8rem pour la même
   raison : à la casse d'origine, 0.7rem paraissait chétif à côté du vrai
   rendu (~14px). */
.mfr-utilitybar {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	max-width: var(--mfr-boxed-width);
	margin: 0 auto;
	padding: 0.5rem 1.25rem;
	font-family: var(--fig-font-family-5);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--mfr-ink);
	flex-wrap: wrap;
}
.mfr-utilitybar__spacer, .mfr-utilitybar__spacer2 { flex: 1; }
.mfr-utilitybar__item--account { font-weight: 700; }
.mfr-utilitybar__sep { color: var(--mfr-line); }
.mfr-utilitybar__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.mfr-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.mfr-utilitybar a.mfr-utilitybar__item,
.mfr-logorow__side--left { text-decoration: none; }

/* max-width:1280px centré (2026-09-23, "boxed") — même largeur que
   `.fh-container` sur le vrai site : sans ça, sur un grand écran, le
   kiosque/logo/partenaire s'étirent bord à bord au lieu de rester group  és
   dans une colonne centrée. */
.mfr-logorow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--mfr-boxed-width);
	margin: 0 auto;
	padding: 1rem 1.25rem;
	flex-wrap: wrap;
}

.mfr-logorow__side {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1;
	font-family: var(--fig-font-family-5);
	font-size: 0.8rem;
}
.mfr-logorow__side--right { justify-content: flex-end; }

/* Bouton "Vente Flash" (2026-09-23, retour Ethibaud : « copy aussi la
   vente flash ») — couleurs/tailles vérifiées en direct sur
   madame.lefigaro.fr (getComputedStyle sur `.fh-subscribe`), pas
   approximées. */
.mfr-subscribe {
	display: block;
	background: #ecb62f;
	color: #121212;
	font-family: var(--fig-font-family-5);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	border-radius: 4px;
	padding: 8px 12px;
	white-space: nowrap;
}
.mfr-subscribe span {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
}

/* Vraie couverture du numéro (2026-09-23, retour Ethibaud : « on peut pas
   récup l'image du magazine ? ») — hotlink direct sur le CDN Figaro
   (`i.f1g.fr`, même image que sur madame.lefigaro.fr), plus un simple
   cadre gris vide. */
.mfr-kiosque-teaser__cover {
	display: inline-block;
	width: 50px;
	height: 63px;
	object-fit: cover;
}

.mfr-logorow__center {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex: 0 0 auto;
}

/*
 * Vrai logo vectoriel (2026-09-23, retour Ethibaud : « les logos centraux,
 * il y a les 3 dans la svg » puis « mais nan, au centre met juste la
 * svg ») — docs/logos.svg contient les 3 marques (madame FIGARO / regards
 * / MEDIA-START.) DÉJÀ composées ensemble, dans leurs positions/espacements
 * définitifs : on l'utilise TEL QUEL comme UNE seule image, pas redécoupé
 * en 3 fichiers recomposés à la main avec nos propres marges (essai
 * précédent, immédiatement corrigé). Remplace l'ancien placeholder texte
 * stylé CSS (`.mfr-logo-figaro-mark`, "regards"/"MEDIA-START." en texte) —
 * SAUF dans `partials/topbar-ad.php` (petite mention "regards en
 * partenariat avec MEDIA-START." dans le bandeau, texte à cette échelle,
 * cf. `.mfr-logo-regards--small`/`.mfr-logo-partner--small` plus bas).
 */
.mfr-logo-combined { height: 72px; width: auto; display: block; }

/* Mention texte du bandeau partnerstrip (petite échelle, pas les logos
   ci-dessus) — inchangé. */
.mfr-logo-regards--small {
	font-style: italic;
	font-size: 1.3rem;
	font-weight: 500;
}
.mfr-logo-partner--small {
	font-family: var(--fig-font-family-2);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
}
.mfr-logo-partner__dot { color: var(--mfr-red); }

.mfr-catnav {
	padding: 0 1rem;
	font-family: var(--fig-font-family-5);
	font-size: 0.875rem;
	font-weight: 600;
	border-top: 1px solid var(--mfr-ink);
	position: relative;
}
.mfr-catnav a { text-decoration: none; }
.mfr-catnav__chevron { display: inline-block; font-size: 0.7em; color: var(--mfr-muted); }

/*
 * Mega-menu (2026-09-23, retour Ethibaud : nav réelle de madame.lefigaro.fr,
 * cf. docblock de header.php/nav-rubrics-data.php) — 11 rubriques, la
 * plupart avec un sous-menu. `.mfr-catnav__lk--btn` réinitialise le
 * `<button>` pour qu'il se comporte visuellement comme les liens directs
 * (Bijoux et montres/Royauté, seules rubriques sans sous-menu sur le vrai
 * site) : même famille de police/couleur/taille, pas de style natif de
 * bouton. Sous-menu affiché au survol OU au focus clavier (`:focus-within`)
 * — accessible sans JS, pas de gestion d'état à maintenir côté PHP/JS.
 */
.mfr-catnav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0.6rem 0;
	list-style: none;
}
/* PAS de position:relative ici (2026-09-23) — .mfr-catnav__sub doit
   s'ancrer sur <nav class="mfr-catnav"> (déjà position:relative, plus
   bas), pas sur ce <li> étroit : sinon `left:0;right:0` se calcule par
   rapport à la largeur du <li> (juste le libellé) au lieu de toute la
   page — c'est exactement le bug qui donnait un panneau minuscule au
   lieu du panneau pleine largeur attendu. */
.mfr-catnav__lk {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	color: inherit;
	font: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
.mfr-catnav__item--has-sub:hover .mfr-catnav__chevron,
.mfr-catnav__item--has-sub:focus-within .mfr-catnav__chevron {
	transform: rotate(180deg);
}
.mfr-catnav__chevron { transition: transform var(--motion-quick); }

/*
 * Panneau du mega-menu — PLEINE LARGEUR sous TOUTE la barre de rubriques
 * (2026-09-23, retour Ethibaud : « il y a une div qui se déploie sous le
 * header », vérifié en direct sur madame.lefigaro.fr : `.fh-rubrics__wrapper`
 * est `position:absolute; left:0` sur toute la largeur de la page, PAS un
 * petit dropdown ancré sous l'item cliqué comme la 1ère version ici).
 *
 * `.mfr-catnav__sub` s'ancre sur `<nav class="mfr-catnav">` (position:relative,
 * déjà pleine largeur, cf. plus haut) via `left:0; right:0` — span donc
 * automatiquement toute la largeur de page, sans mesure JS. À l'intérieur,
 * `.mfr-catnav__panel` reste "boxed" à 1280px comme le reste du chrome
 * (--mfr-boxed-width), padding-left 48px — mêmes valeurs que
 * `.fh-sub-rubrics__list` réel (vérifié via getComputedStyle).
 *
 * Structure à 2 niveaux, PAS une liste plate (retour Ethibaud, capture à
 * l'appui) : `.mfr-catnav__group` = un groupe (titre + tiret "—" via
 * `::before`, 20px/600 — valeurs réelles `.fh-sub-rubrics__lk`), avec
 * `.mfr-catnav__group-children` en dessous si le groupe a des enfants
 * (15px/400 — valeurs réelles `.fh-ssub-rubrics__lk`).
 */
.mfr-catnav__sub {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--fig-z2);
	background: var(--mfr-paper);
	border-top: 1px solid var(--mfr-line);
	box-shadow: 0 12px 24px rgba(18, 18, 18, 0.1);
	max-height: min(70vh, 640px);
	overflow-y: auto;
}
.mfr-catnav__item--has-sub:hover .mfr-catnav__sub,
.mfr-catnav__item--has-sub:focus-within .mfr-catnav__sub,
.mfr-catnav__item--has-sub.is-open .mfr-catnav__sub {
	display: block;
}

.mfr-catnav__panel {
	display: flex;
	flex-wrap: wrap;
	max-width: var(--mfr-boxed-width);
	margin: 0 auto;
	padding: 0 24px 16px 48px;
}

.mfr-catnav__group {
	position: relative;
	flex: 0 0 25%;
	max-width: 25%;
	padding-right: 4%;
	margin-top: 24px;
	margin-bottom: 8px;
	box-sizing: border-box;
}
.mfr-catnav__group-title {
	display: inline-block;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--mfr-ink);
}
.mfr-catnav__group-title::before {
	/* "-" (simple trait d'union), pas un tiret cadratin — valeur exacte
	   mesurée sur `.fh-sub-rubrics__item:before { content: "-" }`. */
	content: "-";
	position: absolute;
	left: -20px;
	color: var(--mfr-ink);
}
.mfr-catnav__group-title:hover { color: var(--mfr-red); }

.mfr-catnav__group-children {
	margin: 5px 0 0;
	padding: 0;
	list-style: none;
}
.mfr-catnav__group-children a {
	display: block;
	padding: 2px 0;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--mfr-ink);
}
.mfr-catnav__group-children a:hover { color: var(--mfr-red); }

@media (max-width: 74.99em) {
	.mfr-catnav__group { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 47.99em) {
	.mfr-catnav__group { flex: 0 0 100%; max-width: 100%; }
}
.mfr-catnav__item--has-sub.is-open .mfr-catnav__chevron { transform: rotate(180deg); }

.mfr-partnerstrip {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.9rem 1rem;
	font-family: var(--fig-font-family-2);
	font-size: 0.85rem;
	color: var(--mfr-muted);
	border-bottom: 1px solid var(--mfr-line);
}

.mfr-ad-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	background: #f2f2f2;
	color: #999;
	min-height: 130px;
	margin: 0;
	font-family: var(--fig-font-family-2);
	font-size: 0.75rem;
}

/*
 * Pavé collant en haut de viewport pendant le scroll — comme le vrai
 * module #pave_atf (position: sticky; top: 0), qui longe toute la
 * colonne de contenu (carrousel + fil d'articles), pas seulement le
 * carrousel. Mécanisme : .mfr-actu-row__ad est le vrai enfant flex,
 * étiré (align-items: stretch) pour épouser la hauteur totale de
 * .mfr-actu-row__main (carrousel + lignes) ; à l'intérieur, le pavé
 * lui-même garde une taille fixe et devient sticky à l'intérieur de
 * ce grand conteneur — il reste donc collé jusqu'à la fin du bloc,
 * puis se détache normalement. Empiler le sticky directement sur le
 * conteneur étiré ne marche pas : l'élément entier grandirait avec
 * lui et son contenu se retrouverait hors-écran, centré au milieu
 * d'une boîte de plusieurs milliers de pixels.
 */
.mfr-actu-row__ad { display: none; flex: 0 0 300px; }

.mfr-ad-slot--pave {
	display: none;
	margin: 0;
	width: 300px;
	min-height: 600px;
	position: sticky;
	top: 1rem;
}

.mfr-actu-row {
	display: flex;
	align-items: stretch;
	gap: 1.5rem;
	margin-bottom: 3rem;
}
.mfr-actu-row__main { flex: 1 1 auto; min-width: 0; }

@media (min-width: 64em) {
	.mfr-actu-row__ad { display: block; }
	.mfr-ad-slot--pave { display: flex; }
}
.mfr-ad-slot__icon { font-size: 1.3rem; }

/*
 * Pubs latérales (2026-09-23, retour Ethibaud : « créer deux div qui se
 * comportent comme le margin ») — le `margin: 0 auto` de .mfr-list/
 * .mfr-article est juste de l'espace vide laissé par le centrage ; ici on
 * remplace cet espace vide par deux vraies colonnes de grille contenant un
 * pavé, PAS un `position: fixed` (essai précédent) : les pavés restent
 * dans le flux normal, défilent avec la page exactement comme le ferait
 * le margin qu'ils remplacent.
 *
 * `.mfr-page-row` (grid 3 colonnes, la centrale à 1000px) n'a QU'UNE
 * SEULE ligne — `.mfr-page-row__center` enveloppe le partnerstrip + la
 * pub du haut (`partials/topbar-ad.php`) ET <main> dans UN SEUL enfant de
 * grille (retour Ethibaud : « il faut que ça monte jusqu'au header »),
 * PAS deux/trois enfants directs empilés sur plusieurs lignes auto : posé
 * ainsi, un pavé latéral avec `grid-row: 1 / -1` (span sur plusieurs
 * lignes `auto`) et un enfant `height:100vh` (le sticky) faisait gonfler
 * la PREMIÈRE ligne (celle du partnerstrip, ~80px) à ~930px au lieu de
 * s'appuyer sur la ligne de <main> déjà bien plus haute — Chrome
 * distribue mal l'espace demandé par un item multi-lignes entre lignes
 * `auto`. Avec une seule ligne, plus d'ambiguïté : sa hauteur = le MAX des
 * contributions de ses items (le centre, ~5700px, l'emporte largement sur
 * le pavé, 100vh) — aucune inflation possible.
 */
.mfr-page-row { display: block; }
.mfr-ad-rail-slot { display: none; }

@media (min-width: 1368px) {
	.mfr-page-row {
		display: grid;
		grid-template-columns: 1fr 1000px 1fr;
	}
	.mfr-page-row__center { grid-column: 2; }
	.mfr-ad-rail-slot {
		display: block;
	}
	/* :first-of-type/:last-of-type portent sur le tag (div), pas la classe —
	   ça marche car les deux pavés sont les SEULS <div> en tête/queue des
	   enfants de .mfr-page-row (.mfr-page-row__center est un autre <div>,
	   mais au milieu, donc ni le premier ni le dernier). */
	.mfr-page-row > .mfr-ad-rail-slot:first-of-type { grid-column: 1; }
	.mfr-page-row > .mfr-ad-rail-slot:last-of-type { grid-column: 3; }

	.mfr-ad-slot--side {
		position: sticky;
		top: 0;
		height: 100vh;
	}
}

/* ---------- Hero "la UNE" ---------- */

.mfr-hero {
	display: block;
	position: relative;
	text-decoration: none;
	background: #000;
	min-height: 460px;
	margin-bottom: 2.5rem;
	overflow: hidden;
}

@media (min-width: 64em) {
	.mfr-hero { min-height: 520px; }
}

.mfr-hero__media { position: absolute; inset: 0; }
.mfr-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; filter: grayscale(0.15); }

.mfr-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
}

/* Pictogramme "La Une" (repris du site Madame Figaro) : image SVG
   positionnée en absolu, au-dessus de l'image du hero (z-index). */
.mfr-hero__mark {
	position: absolute;
	z-index: var(--fig-z1);
	left: 16px;
	bottom: 24px;
	width: 60px;
	height: 176px;
	background: url("data:image/svg+xml,%3csvg width='118' height='347' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 118 347' aria-hidden='true' focusable='false'%3e%3cg fill='white' fill-rule='evenodd'%3e%3cpath d='M100.8 229.88c0-11.5733333-3.313333-20.3-9.94-26.18-6.626667-5.88-16.146667-8.82-28.56-8.82H15.82c-4.9466667 0-8.5166667-.86333333-10.71-2.59-2.1933333-1.72666667-3.57-4.50333333-4.13-8.33H0v29.12h.98c.6533333-4.9466667 2.17-8.5633333 4.55-10.85 2.38-2.2866667 6.136667-3.43 11.27-3.43h42.98c21.84 0 32.76 8.3066667 32.76 24.92 0 8.2133333-2.753333 14.4433333-8.26 18.69-5.506667 4.2466667-13.58 6.37-24.22 6.37h-45.5c-4.6666667 0-7.91-.8166667-9.73-2.45-1.82-1.6333333-3.1033333-4.5966667-3.85-8.89H0v40.18h.98c.6533333-3.8266667 1.8666667-6.4633333 3.64-7.91 1.7733333-1.4466667 4.76-2.17 8.96-2.17H60.9c12.973333 0 22.866667-3.2433333 29.68-9.73 6.813333-6.4866667 10.22-15.7966667 10.22-27.93zm-1.4-136.5H16.38c-5.04 0-8.7266667-.9333333-11.06-2.8-2.3333333-1.866667-3.78-4.993333-4.34-9.38H0v29.54h.98c.7466667-5.2266667 2.2166667-8.7966667 4.41-10.71 2.1933333-1.9133333 5.8566667-2.87 10.99-2.87h48.58L0 150.36v28.28h.98c.9333333-2.52 2.2166667-4.7833333 3.85-6.79 1.6333333-2.0066667 3.6633333-4.0366667 6.09-6.09H80.5c5.6 0 9.613333.9566667 12.04 2.87 2.426667 1.9133333 3.92 5.25 4.48 10.01H98v-30.38h-.98c-.746667 5.04-2.263333 8.5633333-4.55 10.57-2.286667 2.0066667-6.276667 3.01-11.97 3.01H15.68l83.72-67.9v-.56zM98 3.64L60.9 0v.84C69.393333 2.8 76.066667 5.086667 80.92 7.7c4.853333 2.613333 8.423333 5.996667 10.71 10.15 2.286667 4.153333 3.43 9.59 3.43 16.31v12.18H49.28v-8.4c0-5.786667 1.54-10.22 4.62-13.3s7.793333-5.273333 14.14-6.58v-.84H28.28v.84c6.066667 1.306667 10.57 3.5 13.51 6.58 2.94 3.08 4.41 7.513333 4.41 13.3v8.4H2.94V33.88c0-8.4 2.3333333-14.886667 7-19.46C14.606667 9.846667 22.026667 6.253333 32.2 3.64v-.98L0 5.32V74.9h.98c.6533333-3.826667 1.8666667-6.463333 3.64-7.91 1.7733333-1.446667 4.76-2.17 8.96-2.17h69.86c4.853333 0 8.19.7 10.01 2.1 1.82 1.4 3.01 4.06 3.57 7.98H98V3.64zM99.6 343.2c0-1.6533333-1.04-3.7066667-3.12-6.16s-4.88-4.9866667-8.4-7.6l-.48.56c4.906667 4 7.36 6.9066667 7.36 8.72 0 1.1733333-.56 1.76-1.68 1.76-.48 0-.88-.0533333-1.2-.16L40 326.4l2.96 12.08.88.24-.32-1.6c-.106667-.4266667-.16-.9866667-.16-1.68 0-1.6533333.746667-2.48 2.24-2.48.48 0 1.04.08 1.68.24l46.56 12.48c1.173333.2666667 2.053333.4 2.64.4 2.08 0 3.12-.96 3.12-2.88zm0-42.72c0-1.6533333-1-3.6133333-3-5.88s-4.946667-4.76-8.84-7.48l-.4.64c2.506667 1.92 4.4 3.6533333 5.68 5.2 1.28 1.5466667 1.92 2.7733333 1.92 3.68 0 .8533333-.453333 1.28-1.36 1.28l-.96-.16L56.32 286l1.84 5.6 1.2.4c-.906667 1.0666667-1.36 2.4533333-1.36 4.16 0 1.5466667.4 3.3733333 1.2 5.48.8 2.1066667 1.706667 3.9066667 2.72 5.4 2.56 3.68 5.666667 6.88 9.32 9.6 3.653333 2.72 7.373333 4.8 11.16 6.24 3.786667 1.44 7.12 2.16 10 2.16 2.4 0 4.2-.5333333 5.4-1.6 1.2-1.0666667 1.8-2.4266667 1.8-4.08 0-2.5066667-2.16-5.7333333-6.48-9.68-4.32-3.9466667-9.706667-7.92-16.16-11.92l14 4.56c2.293333.8 4.026667 1.2 5.2 1.2 1.013333 0 1.84-.2533333 2.48-.76.64-.5066667.96-1.2666667.96-2.28zm-4.64 16.32c0 .7466667-.32 1.3733333-.96 1.88-.64.5066667-1.733333.76-3.28.76-4.213333 0-8.466667-.84-12.76-2.52-4.293333-1.68-8-3.8266667-11.12-6.44-3.12-2.6133333-5.133333-5.28-6.04-8 0-2.2933333.2-4.12.6-5.48.4-1.36 1.106667-2.5733333 2.12-3.64l10.72 3.52c6.773333 4.6933333 11.92 8.68 15.44 11.96 3.52 3.28 5.28 5.9333333 5.28 7.96zM117 146h1v200h-1z'/%3e%3c/g%3e%3c/svg%3e") no-repeat center / contain;
}

@media (min-width: 48em) {
	.mfr-hero__mark { width: 90px; height: 264px; left: 24px; bottom: 32px; }
}
@media (min-width: 64em) {
	.mfr-hero__mark { width: 100px; height: 294px; left: 32px; }
}

.mfr-hero__inner {
	position: relative;
	z-index: 2;
	min-height: 460px;
	padding: 1.5rem 2rem 2rem 6.5rem;
	display: flex;
	align-items: flex-end;
}

@media (min-width: 64em) {
	.mfr-hero__inner { min-height: 520px; }
}

.mfr-hero__label-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mfr-hero__title {
	color: #fff;
	font-weight: 500;
	max-width: 640px;
	margin: 0 0 0 1rem;
	transform: translateY(-1rem);
	position: relative;
	hyphens: auto;
	overflow-wrap: break-word;
	letter-spacing: -0.3px;
	font-size: 1.5rem;
	line-height: 1.33333;
}

@media (min-width: 48em) {
	.mfr-hero__title { letter-spacing: -0.4px; font-size: 2.25rem; line-height: 1.22222; }
}
@media (min-width: 64em) {
	.mfr-hero__title { letter-spacing: -0.5px; font-size: 3rem; line-height: 1.16667; }
}

a.mfr-hero:hover .mfr-hero__title {
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (min-width: 48em) {
	.mfr-hero__inner { padding-left: 8.5rem; }
}

/* ---------- Carrousel "les news" ---------- */

/*
 * Valeurs reprises au pixel près du vrai module (mesurées en direct
 * sur madame.lefigaro.fr via getComputedStyle) : tailles de police,
 * couleurs, dimensions/espacements des pastilles, flèches et cartes.
 */

.mfr-actu { margin-bottom: 3rem; }

.mfr-actu__head {
	position: relative;
	z-index: var(--fig-z1);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 0;
}

.mfr-actu__title {
	position: relative;
	margin: 0;
	height: 42px; /* hauteur de l'eyebrow seul : "NEWS" en sort en absolu */
}

.mfr-actu__eyebrow {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--fig-font-family-1);
	font-style: italic;
	font-weight: var(--fig-font-weight-light);
	font-size: 36px;
	line-height: 42px;
	color: var(--mfr-ink);
}
/* Trait "_" dessiné en CSS : le caractère littéral rend mal en police
   de repli (glyphe italique déformé selon la police système). */
.mfr-actu__eyebrow::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1px;
	margin-right: 8px;
	background: var(--mfr-ink);
	vertical-align: baseline;
}

.mfr-actu__news {
	position: absolute;
	top: 28px;
	left: 60px; /* repli si JS désactivé ; recalculé précisément par carousel.js */
	font-family: var(--fig-font-family-1);
	font-style: normal;
	font-weight: var(--fig-font-weight-light);
	font-size: 72px;
	line-height: 83px;
	color: var(--mfr-ink);
	white-space: nowrap;
}

@media (max-width: 40em) {
	.mfr-actu__title { height: 26px; }
	.mfr-actu__eyebrow { font-size: 22px; line-height: 26px; }
	.mfr-actu__news { font-size: 44px; line-height: 51px; top: 17px; }
}

/* Titre simple (une seule ligne, sans eyebrow ni chevauchement), pour
   les sections par catégorie type "Les stories de Madame Figaro". */
.mfr-actu__title--plain {
	height: auto;
	font-family: var(--fig-font-family-2);
	font-size: 1.5rem;
	font-weight: var(--fig-font-weight-bold);
	color: var(--mfr-ink);
}

.mfr-actu__dashes {
	position: relative;
	z-index: var(--fig-z1);
	display: flex;
	padding-top: 54px; /* aligne les pastilles sur la ligne de l'eyebrow, comme le vrai module */
}

@media (max-width: 40em) {
	.mfr-actu__dashes { padding-top: 33px; }
}

.mfr-actu__dashes button {
	width: 16px;
	height: 4px;
	border: none;
	padding: 0;
	margin-left: 8px;
	margin-bottom: 24px;
	background: rgb(var(--fig-color-neutral-50));
	cursor: pointer;
}
.mfr-actu__dashes button:first-child { margin-left: 0; }
.mfr-actu__dashes button.is-active { background: var(--mfr-ink); }

.mfr-actu__viewport-wrap { position: relative; }

/* Flèches flottantes, superposées au bord des vignettes et centrées
   verticalement dessus (pas alignées avec les pastilles). */
.mfr-actu__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: var(--fig-z2);
	width: 40px;
	height: 56px;
	border: none;
	border-radius: 0;
	background: #fff;
	color: var(--mfr-ink);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: opacity var(--motion-quick);
}
.mfr-actu__arrow--left { left: -12px; }
.mfr-actu__arrow--right { right: -12px; }
.mfr-actu__arrow:disabled { opacity: 0; cursor: default; }

.mfr-actu__viewport {
	position: relative;
	z-index: var(--fig-z0);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.mfr-actu__viewport::-webkit-scrollbar { display: none; }

.mfr-actu__grid {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 17px) / 3);
	gap: 17px;
}

@media (max-width: 40em) {
	.mfr-actu__grid { grid-auto-columns: calc((100% - 17px) / 1.2); }
}

.mfr-card {
	text-decoration: none;
	scroll-snap-align: start;
}
/* Décalage vertical cyclique par groupe de 3 (mesuré sur le vrai site :
   0px / 32px / 16px), qui donne cet effet de zigzag aux vignettes. */
.mfr-card:nth-child(3n+2) { padding-top: 32px; }
.mfr-card:nth-child(3n+3) { padding-top: 16px; }
.mfr-card__media { aspect-ratio: 4 / 5; overflow: hidden; background: rgb(var(--fig-color-neutral-10)); }
.mfr-card__media img,
.mfr-card__media--placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.mfr-card__title {
	font-family: var(--fig-font-family-1);
	font-size: 18px;
	font-weight: var(--fig-font-weight-regular);
	line-height: 21px;
	margin: 12px 0 0;
	color: var(--mfr-ink);
}
.mfr-card__date {
	display: block;
	font-family: var(--fig-font-family-2);
	font-size: 12px;
	font-weight: var(--fig-font-weight-semibold);
	color: rgb(var(--fig-color-alert-main));
	margin-top: 8px;
}

/* ---------- Lignes d'articles (photo à droite) ---------- */

.mfr-rows { display: flex; flex-direction: column; }

/*
 * Reprend la mesure réelle de .fig-ranking-profile-container
 * (fig-ranking-profile-big-picture) : ancien layout par float côté
 * Figaro, ici en flexbox (même résultat visuel) — conteneur 616px de
 * référence : colonne texte 328px, image carrée 272px, gap 16px.
 */
.mfr-row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	text-decoration: none;
	padding: 32px 0;
	border-top: 0.67px solid var(--mfr-line);
}
.mfr-rows .mfr-row:first-child { border-top: 0.67px solid var(--mfr-line); }

.mfr-row__text { flex: 1 1 auto; min-width: 0; }
.mfr-row__title {
	font-family: var(--fig-font-family-1);
	font-size: 30px;
	font-weight: var(--fig-font-weight-regular);
	line-height: 38px;
	color: var(--mfr-ink);
	margin: 0;
}
.mfr-row__chapo {
	font-family: var(--fig-font-family-2);
	font-size: 14px;
	font-weight: var(--fig-font-weight-regular);
	line-height: 22px;
	color: var(--mfr-ink);
	margin: 8px 0 0;
}

.mfr-row__media { flex: 0 0 44%; }
.mfr-row__media img,
.mfr-row__media--placeholder { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: rgb(var(--fig-color-neutral-10)); display: block; }

/* ---------- Article ---------- */

.mfr-article__meta { margin: 1.5rem 0; }
.mfr-article__chapo { font-size: 1.15rem; color: var(--mfr-muted); margin: 0 0 0.5rem; }
.mfr-article__date { font-family: var(--fig-font-family-2); font-size: 0.8rem; color: var(--mfr-muted); }
.mfr-article__body { font-size: 1.05rem; margin-bottom: 1rem; }
.mfr-article__body img { max-width: 100%; height: auto; display: block; margin: 1.5rem 0; }
/* Vidéos insérées depuis l'éditeur Atlas (TipTap, VideoExtension.ts) :
   iframe (YouTube/Vimeo) en 16:9 responsive, <video> (fichier direct) en
   pleine largeur. Même marqueur `data-video-src` que le HTML généré côté
   Atlas, pas de dépendance à TipTap ici — juste du CSS sur ce que WP sert. */
.mfr-editor-video { margin: 1.5rem 0; }
.mfr-editor-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.mfr-editor-video video { width: 100%; height: auto; display: block; }
.mfr-article__back a { font-family: var(--fig-font-family-2); font-size: 0.9rem; text-decoration: none; }

.mfr-empty { color: var(--mfr-muted); font-style: italic; }

/* ---------- Footer ---------- */

.mfr-footer {
	background: var(--mfr-ink); /* rgb(18,18,18), identique au vrai footer */
	color: #ddd;
	margin-top: 3rem;
	padding: 2.5rem 32px 1rem;
	font-family: var(--fig-font-family-5);
}

.mfr-footer__grid {
	max-width: var(--mfr-boxed-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
}

.mfr-footer__col h4 {
	font-family: var(--fig-font-family-5);
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	margin: 0 0 0.9rem;
}
.mfr-footer__col a { color: #ccc; text-decoration: none; font-size: 0.8125rem; }
.mfr-footer__col ul {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: #ccc;
}

.mfr-kiosque { display: flex; gap: 0.85rem; }
.mfr-kiosque__cover { width: 70px; height: 95px; background: #333; flex-shrink: 0; }
.mfr-kiosque__title { font-size: 0.85rem; margin: 0 0 0.6rem; }

.mfr-btn {
	display: inline-block;
	background: #fff;
	color: #111;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.5rem 0.9rem;
}

.mfr-social { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.6rem; }
.mfr-social a { font-size: 0.8rem; }

.mfr-footer__legal {
	max-width: var(--mfr-boxed-width);
	margin: 2rem auto 0;
	padding-top: 1.25rem;
	border-top: 1px solid #333;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 1.4rem;
}
.mfr-footer__legal a,
.mfr-footer__legal-btn {
	color: #999;
	font-size: 0.72rem;
	text-decoration: none;
	font-family: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

/* ---------- Bandeau promo collant ---------- */

.mfr-promobar {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: #111;
	color: #fff;
	padding: 0.75rem 1rem;
	font-family: var(--fig-font-family-5);
	font-size: 0.85rem;
}
.mfr-btn--promo { background: var(--mfr-gold); color: #111; }
.mfr-promobar__close {
	background: none;
	border: none;
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	position: absolute;
	right: 1rem;
}

@media (max-width: 640px) {
	.mfr-row { flex-direction: column; }
	.mfr-row__media { flex-basis: auto; }
	.mfr-row__media img, .mfr-row__media--placeholder { width: 100%; height: 200px; }
	.mfr-hero__title { padding-left: 1.5rem; }
	.mfr-promobar { flex-wrap: wrap; }
	.mfr-actu__news { font-size: 3rem; }
	.mfr-actu__head { margin-bottom: -1rem; }
}