/**
 * Socle du gabarit « Document (design généré) », charte Mediapilote.
 *
 * Le gabarit est autonome : les feuilles du thème WordPress sont retirées
 * (voir dequeue_theme_styles_for_document). Cette base fixe donc TOUT ce qui
 * doit être présentable sans la feuille générée : typographie de la charte
 * (Poppins pour les titres, Source Sans 3 pour la lecture), palette
 * rose #FF164C / bordeaux #940830 / noir, en-tête et pied, médias, tableaux,
 * listes, figures. Elle expose ses jetons sur .sag-doc ; la feuille générée,
 * imprimée après, peut les redéfinir (accent du client, fonds, radius).
 *
 * Règle de spécificité : sélecteurs bas (une classe + un élément au plus)
 * pour que la feuille générée l'emporte toujours à spécificité égale.
 */

body.sag-doc {
	margin: 0;
}

.sag-doc *,
.sag-doc *::before,
.sag-doc *::after {
	box-sizing: border-box;
}

.sag-doc {
	--sag-accent: #ff164c;
	--sag-accent-deep: #940830;
	--sag-ink: #000000;
	--sag-ink-soft: #2a2b2f;
	--sag-muted: #5f6168;
	--sag-line: #e4e4e6;
	--sag-surface: #f4f4f4;
	--sag-bg: #ffffff;
	--sag-radius: 12px;
	--sag-font-display: "Poppins", "Avenir Next", "Futura", "Helvetica Neue", Arial, sans-serif;
	--sag-font-body: "Source Sans 3", "Source Sans Pro", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
	--sag-measure: 68ch;

	background: var(--sag-bg);
	color: var(--sag-ink);
	font-family: var(--sag-font-body);
	font-size: 18px;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Le document déclare son schéma : la base suit, la feuille générée décide. */
.sag-doc--dark {
	--sag-ink: #f4f5f7;
	--sag-ink-soft: #e2e3e7;
	--sag-muted: #a8abb3;
	--sag-line: #2a2c33;
	--sag-surface: #16181d;
	--sag-bg: #0e1014;
}

/* Verrou de charte Mediapilote (body.sag-doc--brand-mediapilote) : la feuille
   générée est imprimée après ce socle, ses jetons de couleur sont donc
   surchargés ici en !important, sous tous les noms courants. */
.sag-doc--brand-mediapilote {
	--sag-accent: #ff164c !important;
	--sag-accent-2: #940830 !important;
	--sag-accent-deep: #940830 !important;
	--sag-accent-soft: #ffe3ea !important;
	--sag-primary: #ff164c !important;
	--sag-brand: #ff164c !important;
	--sag-link: #940830 !important;
	--sag-highlight: #ffe3ea !important;
	--sag-mark: #ffe3ea !important;
	--accent: #ff164c !important;
	--primary: #ff164c !important;
	--sag-bg: #ffffff !important;
	--sag-background: #ffffff !important;
	--sag-canvas: #ffffff !important;
	--sag-paper: #ffffff !important;
	--sag-surface: #f4f4f4 !important;
	--sag-surface-2: #f4f4f4 !important;
	--sag-ink: #000000 !important;
	--sag-text: #000000 !important;
	--sag-fg: #000000 !important;
	--sag-muted: #5f6168 !important;
	--sag-line: #e4e4e6 !important;
	--sag-border: #e4e4e6 !important;
	--sag-font-display: "Poppins", "Avenir Next", "Futura", "Helvetica Neue", Arial, sans-serif !important;
	--sag-font-body: "Source Sans 3", "Source Sans Pro", "Avenir Next", "Helvetica Neue", Arial, sans-serif !important;
	--sag-display: "Poppins", "Avenir Next", "Helvetica Neue", Arial, sans-serif !important;
	--sag-body: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif !important;
	background: #ffffff !important;
	color: #000000 !important;
}

.sag-doc--brand-mediapilote .sag-doc__main a {
	color: #940830 !important;
}

.sag-doc--brand-mediapilote .sag-doc__main a:hover {
	color: #ff164c !important;
}

.sag-doc--brand-mediapilote .sag-doc__main mark,
.sag-doc--brand-mediapilote .sag-doc__main [class*="highlight"],
.sag-doc--brand-mediapilote .sag-doc__main [class*="current"] {
	background-color: #ffe3ea !important;
}

/* Tableaux générés : jamais coupés par leur conteneur. */
.sag-doc--styled .sag-doc__main table {
	max-width: 100%;
	min-width: 0 !important;
	width: 100% !important;
}

.sag-doc--styled .sag-doc__main td,
.sag-doc--styled .sag-doc__main th {
	overflow-wrap: anywhere;
}

.sag-doc--brand-mediapilote .sag-doc__header {
	background: #ffffff !important;
}

/* ── Typographie ──────────────────────────────────────────────────────── */

.sag-doc h1,
.sag-doc h2,
.sag-doc h3,
.sag-doc h4,
.sag-doc h5,
.sag-doc h6 {
	color: var(--sag-ink);
	font-family: var(--sag-font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

.sag-doc h1 {
	font-size: clamp(38px, 5.2vw, 64px);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.sag-doc h2 {
	font-size: clamp(30px, 3.6vw, 42px);
}

.sag-doc h3 {
	font-size: clamp(22px, 2.2vw, 26px);
}

.sag-doc h4 {
	font-size: 19px;
}

.sag-doc p,
.sag-doc li {
	color: var(--sag-ink-soft);
}

.sag-doc p {
	margin: 0 0 1.2em;
}

.sag-doc strong {
	color: var(--sag-ink);
	font-weight: 700;
}

.sag-doc small {
	color: var(--sag-muted);
	font-size: 14px;
}

/* Sur-titre de la charte : rose, capitales, lettrage espacé (sans feuille générée). */
.sag-doc:not(.sag-doc--styled) .sag-eyebrow,
.sag-doc:not(.sag-doc--styled) [class*="__eyebrow"],
.sag-doc:not(.sag-doc--styled) [class*="-eyebrow"],
.sag-doc:not(.sag-doc--styled) [class*="kicker"] {
	color: var(--sag-accent);
	font-family: var(--sag-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ── Liens ────────────────────────────────────────────────────────────── */

.sag-doc a {
	color: var(--sag-accent-deep);
	text-decoration-color: color-mix(in srgb, var(--sag-accent) 45%, transparent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.18em;
	transition: color 120ms ease, text-decoration-color 120ms ease;
}

.sag-doc a:hover {
	color: var(--sag-accent);
	text-decoration-color: var(--sag-accent);
}

.sag-doc--dark a {
	color: #ff5d84;
}

.sag-doc :focus-visible {
	outline: 2px solid var(--sag-accent);
	outline-offset: 3px;
}

/* ── Ossature de secours : UNIQUEMENT sans feuille générée. Le design d'un
   document (figures, tableaux, encadrés, citations, boutons) est le travail
   de la feuille générée par l'IA ; la base ne le retouche jamais. ──

/* ── Médias et figures ───────────────────────────────────────────────── */

.sag-doc img,
.sag-doc video,
.sag-doc svg,
.sag-doc iframe {
	max-width: 100%;
}

.sag-doc img,
.sag-doc video {
	height: auto;
}

.sag-doc:not(.sag-doc--styled) figure {
	margin: 0 0 1.6em;
}

.sag-doc:not(.sag-doc--styled) figure img,
.sag-doc:not(.sag-doc--styled) .sag-figure img,
.sag-doc:not(.sag-doc--styled) .wp-block-image img {
	border-radius: var(--sag-radius);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.sag-doc:not(.sag-doc--styled) figcaption {
	color: var(--sag-muted);
	font-size: 14px;
	line-height: 1.45;
	margin-top: 10px;
}

.sag-doc:not(.sag-doc--styled) .sag-figure--wide {
	margin-left: auto;
	margin-right: auto;
	max-width: 1180px;
}

.sag-doc img[src=""] {
	display: none;
}

/* ── Listes, citations, tableaux, encadrés ───────────────────────────── */

.sag-doc:not(.sag-doc--styled) ul,
.sag-doc:not(.sag-doc--styled) ol {
	margin: 0 0 1.4em;
	padding-left: 1.3em;
}

.sag-doc:not(.sag-doc--styled) li {
	margin-bottom: 0.45em;
}

.sag-doc:not(.sag-doc--styled) li::marker {
	color: var(--sag-accent);
	font-weight: 700;
}

.sag-doc:not(.sag-doc--styled) blockquote {
	border-left: 4px solid var(--sag-accent);
	color: var(--sag-ink);
	font-family: var(--sag-font-display);
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.35;
	margin: 1.8em 0;
	padding: 4px 0 4px 24px;
}

.sag-doc:not(.sag-doc--styled) blockquote p {
	color: inherit;
	margin: 0;
}

.sag-doc:not(.sag-doc--styled) blockquote cite {
	color: var(--sag-muted);
	display: block;
	font-family: var(--sag-font-body);
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	margin-top: 10px;
}

.sag-doc:not(.sag-doc--styled) table {
	border-collapse: collapse;
	font-size: 16px;
	margin: 0 0 1.8em;
	width: 100%;
}

.sag-doc:not(.sag-doc--styled) th,
.sag-doc:not(.sag-doc--styled) td {
	border-bottom: 1px solid var(--sag-line);
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
}

.sag-doc:not(.sag-doc--styled) th {
	background: var(--sag-ink);
	color: #ffffff;
	font-family: var(--sag-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sag-doc--dark:not(.sag-doc--styled) th {
	background: var(--sag-accent-deep);
}

.sag-doc:not(.sag-doc--styled) tbody tr:nth-child(even) td {
	background: var(--sag-surface);
}

.sag-doc:not(.sag-doc--styled) aside {
	background: var(--sag-surface);
	border-left: 4px solid var(--sag-accent);
	border-radius: 0 var(--sag-radius) var(--sag-radius) 0;
	margin: 1.6em 0;
	padding: 20px 24px;
}

.sag-doc:not(.sag-doc--styled) hr {
	border: 0;
	border-top: 1px solid var(--sag-line);
	margin: 2.4em 0;
}

/* ── Boutons et appels à l'action ────────────────────────────────────── */

.sag-doc:not(.sag-doc--styled) button,
.sag-doc:not(.sag-doc--styled) [class*="btn"],
.sag-doc:not(.sag-doc--styled) [class*="button"],
.sag-doc:not(.sag-doc--styled) [class*="cta"] a {
	font-family: var(--sag-font-display);
	font-weight: 700;
}

.sag-doc:not(.sag-doc--styled) button {
	background: var(--sag-accent);
	border: 0;
	border-radius: 999px;
	color: #ffffff;
	cursor: pointer;
	font-size: 15px;
	padding: 12px 22px;
	transition: background 120ms ease, transform 120ms ease;
}

.sag-doc:not(.sag-doc--styled) button:hover {
	background: var(--sag-accent-deep);
}

/* ── Lien d'évitement : visible uniquement au clavier ────────────────── */

.sag-doc__skip {
	background: var(--sag-accent);
	color: #ffffff;
	font-weight: 700;
	left: -9999px;
	padding: 12px 20px;
	position: absolute;
	top: 0;
	z-index: 999;
}

.sag-doc__skip:focus {
	left: 0;
}

/* ── En-tête : filet rose, logo, menu ─────────────────────────────────── */

.sag-doc__header {
	background: var(--sag-bg);
	border-top: 4px solid var(--sag-accent);
	position: sticky;
	top: 0;
	z-index: 50;
}

.sag-doc__header::after {
	background: var(--sag-line);
	content: "";
	display: block;
	height: 1px;
}

.sag-doc__header-inner,
.sag-doc__footer-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1280px;
	padding: 18px 28px;
}

.sag-doc__brand-link {
	align-items: center;
	color: var(--sag-ink);
	display: inline-flex;
	gap: 12px;
	text-decoration: none;
}

.sag-doc__brand img,
.sag-doc__brand .custom-logo {
	display: block;
	height: auto;
	max-height: 44px;
	width: auto;
}

.sag-doc__brand-name {
	color: var(--sag-ink);
	font-family: var(--sag-font-display);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.sag-doc__brand-name::after {
	color: var(--sag-accent);
	content: "\2217";
	font-weight: 800;
	margin-left: 2px;
}

.sag-doc__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sag-doc__menu li {
	margin: 0;
}

.sag-doc__menu a {
	color: var(--sag-ink);
	font-family: var(--sag-font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 6px 0;
	position: relative;
	text-decoration: none;
}

.sag-doc__menu a::after {
	background: var(--sag-accent);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 160ms ease;
	width: 100%;
}

.sag-doc__menu a:hover::after,
.sag-doc__menu .current-menu-item > a::after {
	transform: scaleX(1);
}

/* ── Contenu : le document compose sa largeur ─────────────────────────── */

.sag-doc__main {
	display: block;
}

/* Colonne de lecture large et marges latérales réduites, y compris pour les
   documents déjà générés : la feuille générée définit sa mesure (72ch) et ses
   marges sur .sag-doc / .sag-s ; redéfinies ici avec une spécificité
   supérieure, elles s'imposent quel que soit le nom de jeton retenu. */
.sag-doc--styled .sag-doc__main .sag-s,
.sag-doc--styled .sag-doc__main .sag-subsection {
	--sag-content: min(112ch, 1120px);
	--sag-measure: min(112ch, 1120px);
	--sag-reading: min(112ch, 1120px);
	--sag-narrow: min(112ch, 1120px);
	--sag-text: min(112ch, 1120px);
	--sag-prose: min(112ch, 1120px);
	--sag-col: min(112ch, 1120px);
	--sag-column: min(112ch, 1120px);
	--sag-wide: 1240px;
	--measure: min(112ch, 1120px);
	--content-width: min(112ch, 1120px);
	padding-left: clamp(20px, 3vw, 44px);
	padding-right: clamp(20px, 3vw, 44px);
}

/* Une section à fond (bande pleine largeur, margin 0 dans la feuille générée)
   ne doit JAMAIS être plafonnée en largeur : elle resterait collée à gauche.
   Seules les sections que la feuille générée centre elle-même (margin auto)
   portent une largeur max ; on ne la fixe donc pas ici. */

/* Tout enfant direct d'une section est centré dans la colonne : une feuille
   générée qui pose une marge fixe (16px) sur un bloc large le décalerait à
   gauche par rapport au texte centré. Les blocs « larges » (figures, bandes)
   restent plafonnés à --sag-wide, centrés eux aussi. */
.sag-doc--styled .sag-doc__main .sag-s > * {
	max-width: min(112ch, 1120px);
}

.sag-doc--styled .sag-doc__main .sag-s > figure,
.sag-doc--styled .sag-doc__main .sag-s > [class*="wide"],
.sag-doc--styled .sag-doc__main .sag-s > [class*="band"],
.sag-doc--styled .sag-doc__main .sag-s > [class*="grid"],
.sag-doc--styled .sag-doc__main .sag-s > [class*="table"] {
	max-width: 1240px;
}

@media (min-width: 900px) {
	.sag-doc--styled .sag-doc__main .sag-s > * {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* Texte de liste enveloppé à l'affichage (wrap_bare_list_text) : sous le
   titre, sur toute la largeur de l'item, même en grille. */
.sag-doc--styled li > .sag-li-text {
	grid-column: 1 / -1;
	flex-basis: 100%;
	margin: 6px 0 0;
}

/* Les ancres du sommaire ne passent pas sous l'en-tête collant. */
.sag-doc [id] {
	scroll-margin-top: 96px;
}

.sag-doc {
	scroll-behavior: smooth;
}

/* Ossature de secours, UNIQUEMENT quand la feuille générée est absente
   (body sans .sag-doc--styled) : colonne de lecture centrée. */
.sag-doc:not(.sag-doc--styled) .sag-doc__main .sag-s {
	padding: 56px 24px;
}

.sag-doc:not(.sag-doc--styled) .sag-doc__main .sag-s > * {
	margin-left: auto;
	margin-right: auto;
	max-width: 760px;
}

/* ── Pied : noir, nom du site, mention légale ─────────────────────────── */

.sag-doc__footer {
	background: var(--sag-ink);
	color: #ffffff;
	margin-top: 80px;
}

.sag-doc--dark .sag-doc__footer {
	background: #000000;
}

.sag-doc__footer-inner {
	padding-bottom: 36px;
	padding-top: 36px;
}

.sag-doc__footer p {
	color: #ffffff;
	margin: 0;
}

.sag-doc__footer-name {
	font-family: var(--sag-font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.sag-doc__footer-name::after {
	color: var(--sag-accent);
	content: "\2217";
	margin-left: 2px;
}

.sag-doc__footer-legal {
	font-size: 14px;
	opacity: 0.72;
}

@media (max-width: 640px) {
	.sag-doc {
		font-size: 17px;
	}

	.sag-doc__header-inner,
	.sag-doc__footer-inner {
		padding-left: 18px;
		padding-right: 18px;
	}

	.sag-doc__header {
		position: static;
	}

	.sag-doc:not(.sag-doc--styled) .sag-doc__main .sag-s {
		padding: 36px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sag-doc a,
	.sag-doc button,
	.sag-doc__menu a::after {
		transition: none;
	}
}

/* Filet de sécurité des schémas : le fond et l'encre de base suivent TOUJOURS
   le thème du document, même si la feuille générée a perdu ses règles de fond
   (les sélecteurs body/html sont hors scope et retirés par la sanitisation). */
body.sag-doc--light {
	background-color: #ffffff;
	color: #000000;
}

body.sag-doc--dark {
	background-color: #0e1014;
	color: #f4f5f7;
}