/* Mise en lecture MinucciSuite : sommaire (colonne sur ordinateur, barre et
   feuille sur mobile) et typographie de lecture. Couleurs et polices : variables --mr-* posées par le
   module depuis le design system du site (valeurs neutres ci-dessous en repli) ;
   tailles --mr-fs-* tirées de son échelle quand il en a une, sinon celles-ci. */
:root {
	--mr-bg: #fff;
	--mr-ink: #111;
	--mr-text: #222;
	--mr-muted: #5f5f5f;
	--mr-accent: #444;
	--mr-link: #444;
	--mr-brand: #222;
	--mr-line: #e2e2e2;
	--mr-soft: #f6f6f6;
	--mr-tint: #f2f2f2;
	--mr-head: inherit;
	--mr-body: inherit;
	--mr-top: 0px;
	--mr-measure: 624px;
	/* Durée et courbe du design system de Labrugère (duration.fast, easing.standard). */
	--mr-fast: 300ms;
	--mr-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.mr { color: var(--mr-text); }
.mr * { box-sizing: border-box; }

/* ——— Texte ——— */
.mr .mr-body {
	max-width: var(--mr-measure);
	margin: 0 auto;
	font-family: var(--mr-body);
	font-size: var(--mr-fs-body, 18px);
	line-height: 1.7;
	color: var(--mr-text);
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.mr .mr-body > :first-child { margin-top: 0; }
.mr .mr-body p {
	margin: 0 0 21px;
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 7 3 3;
	text-wrap: pretty;
}
.mr .mr-body h2,
.mr .mr-body h3 {
	position: relative;
	font-family: var(--mr-head);
	color: var(--mr-ink);
	text-align: left;
	text-wrap: balance;
	-webkit-hyphens: manual;
	hyphens: manual;
	scroll-margin-top: 16px;
}
.mr .mr-body h2 { font-weight: 800; font-size: var(--mr-fs-h2, 24px); line-height: 1.3; letter-spacing: -0.2px; margin: 44px 0 13px; }
.mr .mr-body h3 { font-weight: 700; font-size: var(--mr-fs-h3, 20px); line-height: 1.4; margin: 32px 0 9px; }
.mr .mr-body strong { font-weight: 600; color: var(--mr-ink); }
.mr .mr-body a {
	color: var(--mr-link) !important;
	text-decoration: underline;
	text-decoration-color: var(--mr-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.15s;
}
.mr .mr-body a:hover { text-decoration-color: currentColor; }
.mr .mr-body ul,
.mr .mr-body ol { margin: 0 0 23px; padding-left: 25px; text-align: left; }
.mr .mr-body ul { list-style: disc; }
.mr .mr-body ol { list-style: decimal; }
.mr .mr-body li { display: list-item; margin: 0 0 8px; padding-left: 4px; text-align: left; }
.mr .mr-body li::marker { color: var(--mr-brand); }
.mr .mr-body ol > li::marker { font-weight: 600; }
.mr .mr-body blockquote { margin: 29px 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--mr-accent); color: var(--mr-ink); }

/* ——— Bloc large (classe `alignwide` de WordPress) ———
   Un tableau ou un classement qui ne tient pas dans la colonne de lecture en
   sort, centré, jusqu'à 1 040 px, sans jamais dépasser l'écran (16 px de marge
   de chaque côté, de 320 à 1 440 px). */
.mr .mr-body .alignwide {
	--mr-wide: min(1040px, 100vw - 32px);
	width: var(--mr-wide);
	max-width: none;
	margin-inline: calc((100% - var(--mr-wide)) / 2);
}

/* ——— Encadré « L'essentiel à retenir » ——— */
.mr .mr-key { background: var(--mr-tint); box-shadow: inset 0 0 0 1px var(--mr-key-line, transparent); border-radius: 16px; padding: 22px 22px 8px; margin: 4px 0 40px; }
.mr .mr-key h2 { display: flex; align-items: center; gap: 8px; font-size: var(--mr-fs-key, 17px) !important; letter-spacing: 0; margin: 0 0 12px !important; }
.mr .mr-key h2::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mr-accent); }
.mr .mr-key ul,
.mr .mr-key ol { margin-bottom: 14px; }

/* ——— Tableaux ——— */
.mr .mr-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 29px; border: 1px solid var(--mr-line); border-radius: 14px; }
.mr .mr-table table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: var(--mr-fs-ui, 16px); line-height: 1.5; font-variant-numeric: tabular-nums; }
.mr .mr-table th,
.mr .mr-table td { border: 0; border-bottom: 1px solid var(--mr-line); padding: 12px 16px; text-align: left; vertical-align: top; }
.mr .mr-table th { background: var(--mr-soft); color: var(--mr-ink); font-weight: 600; white-space: nowrap; }
.mr .mr-table tr:last-child td { border-bottom: 0; }
.mr .mr-table p { margin: 0; text-align: left; }

/* ——— Lien copiable par titre ——— */
.mr .mr-anchor {
	position: absolute; left: -26px; top: 2px;
	display: grid; place-items: center; width: 22px; height: 22px;
	border: 0; border-radius: 6px; padding: 0; background: none;
	color: var(--mr-muted); font: 600 var(--mr-fs-small, 15px)/1 var(--mr-body);
	opacity: 0; cursor: pointer;
}
.mr .mr-body h2:hover .mr-anchor,
.mr .mr-anchor:focus-visible { opacity: 1; }

@media (min-width: 768px) { .mr .mr-body { font-size: var(--mr-fs-body, 19px); } }
.mr :focus-visible { outline: 2px solid var(--mr-link); outline-offset: 2px; border-radius: 4px; }

/* ——— Sommaire ———
   Langage du menu des « Artefacts » de Perplexity (demande de David du
   03/11/2026) : le titre du document en texte plein, les parties numérotées
   en texte atténué, aucune boîte, aucun fond, aucune icône ; un filet
   vertical de 3 px marque la partie en cours et glisse jusqu'à elle (placé
   par le script ; sans script, il reste sur le titre). Même langage dans la
   colonne de l'ordinateur, la barre et la feuille du mobile. Sert aussi les
   pages et articles Elementor tirés du modèle du site : seules les règles
   `.mr-nav` et `.mr-sheet` s'y appliquent, jamais la typographie `.mr`. */
.mr-nav { --mr-gap: 48px; font-family: var(--mr-body); }
.mr-nav *,
.mr-sheet,
.mr-sheet * { box-sizing: border-box; }
.mr-toc { position: relative; }
.mr-nav .mr-toc ol,
.mr-sheet .mr-toc ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.mr-nav .mr-toc li,
.mr-sheet .mr-toc li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.mr-nav .mr-toc li::marker,
.mr-sheet .mr-toc li::marker { content: none; }
.mr-nav .mr-toc a,
.mr-sheet .mr-toc a {
	display: block; margin: 0; padding: 6px 0 6px 28px;
	color: var(--mr-muted) !important; text-decoration: none !important; background: none !important;
	font-family: var(--mr-body); font-size: var(--mr-fs-small, 15px); font-weight: 400; line-height: 1.5;
	letter-spacing: 0; text-align: left; text-transform: none;
	transition: color var(--mr-fast) var(--mr-ease);
}
.mr-nav .mr-toc .mr-doc,
.mr-sheet .mr-toc .mr-doc { margin-bottom: 10px; padding-left: 16px; color: var(--mr-ink) !important; font-weight: 500; }
.mr-toc .mr-n { font-variant-numeric: tabular-nums; }
.mr-nav .mr-toc a[aria-current],
.mr-sheet .mr-toc a[aria-current] { color: var(--mr-ink) !important; }
@media (hover: hover) {
	.mr-nav .mr-toc a:hover,
	.mr-sheet .mr-toc a:hover { color: var(--mr-ink) !important; }
}
.mr-mark {
	position: absolute; left: 0; top: 0; width: 3px; height: var(--mr-h, 0); border-radius: 3px;
	background: var(--mr-accent); transform: translateY(var(--mr-y, 0)); pointer-events: none;
	transition: transform var(--mr-fast) var(--mr-ease), height var(--mr-fast) var(--mr-ease);
}
.mr-nav:not(.mr-js) .mr-side .mr-doc { box-shadow: inset 3px 0 var(--mr-accent); }

/* Mobile, tablette et écran où la colonne n'a pas la place : barre collante
   qui dit la partie en cours. Sans script, elle se déplie sur la liste ; avec
   lui, elle ouvre la feuille. Elle s'étend d'un bord à l'autre de l'écran,
   son texte aligné sur celui de la colonne. */
.mr-side { display: none; }
.mr-nav { position: sticky; top: var(--mr-top); z-index: 50; margin-bottom: 20px; }
.mr-nav .mr-m {
	width: 100vw; max-width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%);
	background: color-mix(in srgb, var(--mr-bg) 94%, transparent);
	-webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
	/* Filet d'un demi-pixel : un trait d'un pixel physique sur un écran Retina, comme une barre iOS. */
	box-shadow: 0 0.5px 0 var(--mr-line);
	transition: opacity var(--mr-fast) var(--mr-ease), visibility var(--mr-fast);
}
.mr-nav .mr-m.mr-gone { opacity: 0; visibility: hidden; }
.mr-nav .mr-m summary {
	position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 0 2px 0 15px;
	list-style: none; cursor: pointer; color: var(--mr-ink); background: none;
	font-family: var(--mr-body); font-size: var(--mr-fs-small, 15px); line-height: 1.3;
	-webkit-tap-highlight-color: transparent;
}
.mr-nav .mr-m summary::-webkit-details-marker { display: none; }
.mr-nav .mr-m summary::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--mr-accent); }
.mr-nav .mr-m summary::after {
	content: ""; flex: none; width: 7px; height: 7px; margin: -4px 4px 0 0;
	border: solid var(--mr-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
	transition: transform var(--mr-fast) var(--mr-ease);
}
.mr-nav .mr-m[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.mr-m-now { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.mr-m-now .mr-n { color: var(--mr-muted); font-weight: 400; }
.mr-m-n { flex: none; color: var(--mr-muted); font-variant-numeric: tabular-nums; }
.mr-nav .mr-m .mr-toc { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 12px; }
.mr-nav .mr-m .mr-toc a { padding-top: 11px; padding-bottom: 11px; font-size: var(--mr-fs-ui, 16px); }

/* Ordinateur : colonne collante à gauche du texte, sans le rétrécir, dans la
   marge qu'il laisse (sa largeur suit cette marge, 248 px au plus). Dès
   1 240 px d'écran, à partir duquel une colonne de 720 px laisse au moins
   170 px de chaque côté ; le script revient à la barre si la marge réelle est
   plus étroite (colonne de texte plus large). */
@media (min-width: 1240px) {
	@supports selector(:has(*)) {
		:has(> .mr-nav) { position: relative; }
		.mr-nav { position: static; margin-bottom: 0; }
		.mr-nav.mr-cramped { position: sticky; margin-bottom: 20px; }
		.mr-side {
			display: block; position: absolute; top: 0; bottom: 0; right: calc(100% + var(--mr-gap));
			width: min(248px, (100vw - 100%) / 2 - var(--mr-gap) - 32px);
		}
		.mr-side .mr-toc {
			position: sticky; top: calc(var(--mr-top) + 48px);
			max-height: calc(100vh - var(--mr-top) - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
		}
		.mr-side .mr-toc::-webkit-scrollbar { display: none; }
		.mr-nav .mr-m { display: none; }
		.mr-nav.mr-cramped .mr-side { display: none; }
		.mr-nav.mr-cramped .mr-m { display: block; }
		/* Le sommaire occupe la marge gauche : le bloc large s'étend vers la
		   droite seulement, du bord gauche du texte jusqu'à 32 px du bord de l'écran. */
		.mr .mr-body:has(> .mr-nav:not(.mr-cramped)) .alignwide {
			--mr-wide: min(1040px, (100% + 100vw) / 2 - 32px);
			margin-inline: 0 calc(100% - var(--mr-wide));
		}
	}
}

/* Feuille du mobile (créée par le script, dans <body>). */
.mr-sheet {
	position: fixed; inset: auto 0 0; width: 100%; max-width: 100%; max-height: 85vh; margin: auto 0 0; padding: 0;
	border: 0; border-radius: 15px 15px 0 0; background: var(--mr-bg); color: var(--mr-text);
}
.mr-sheet[open] { animation: mr-up var(--mr-fast) var(--mr-ease); }
.mr-sheet::backdrop { background: color-mix(in srgb, var(--mr-ink) 32%, transparent); }
@keyframes mr-up { from { transform: translateY(100%); } }
.mr-sheet-in { max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px calc(16px + env(safe-area-inset-bottom)); }
.mr-sheet-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; margin-bottom: 4px; background: var(--mr-bg); }
.mr-sheet-h p { margin: 0; color: var(--mr-ink); font-family: var(--mr-head); font-size: var(--mr-fs-key, 17px); font-weight: 800; line-height: 1.3; }
.mr-sheet .mr-x {
	min-width: 44px; min-height: 44px; margin-right: -8px; padding: 0 8px; border: 0; border-radius: 0; background: none;
	color: var(--mr-ink); font-family: var(--mr-body); font-size: var(--mr-fs-ui, 16px); font-weight: 500; line-height: 1; cursor: pointer;
}
.mr-sheet .mr-toc a { padding-top: 11px; padding-bottom: 11px; font-size: var(--mr-fs-ui, 16px); }

.mr-nav :focus-visible,
.mr-sheet :focus-visible { outline: 2px solid var(--mr-ink); outline-offset: 2px; border-radius: 3px; }

/* Ancres : le titre visé s'arrête 16 px sous la barre (mobile, avec scroll-padding-top) ou 48 px sous l'en-tête. */
.mnc-article-content h2[id],
.mr .mr-body h2 { scroll-margin-top: 16px; }
@media (min-width: 1240px) {
	.mnc-article-content h2[id],
	.mr .mr-body h2 { scroll-margin-top: calc(var(--mr-top) + 48px); }
}

html:has(.mr-nav) { scroll-behavior: smooth; }
/* Barre de sommaire collante en haut (mobile) : un détail ouvert, un lien suivi
   ou un champ atteint au clavier se place sous elle, jamais dessous. */
@media (max-width: 1239px) {
	html:has(.mr-nav) { scroll-padding-top: calc(var(--mr-top) + 64px); }
}
@media (prefers-reduced-motion: reduce) {
	html:has(.mr-nav) { scroll-behavior: auto; }
	.mr *, .mr-nav *, .mr-sheet, .mr-sheet * { transition: none !important; animation: none !important; }
}
@media print {
	.mr-nav, .mr-sheet, .mr-anchor { display: none !important; }
	.mr .mr-body { max-width: none; }
}