/* ==========================================================
   Mirage Informatique - page Mentions légales
   Styles : .mml--sobre / .mml--cartes / .mml--editorial
   Tout se règle par des variables CSS (Réglages Mirage > Page) :
   une variable absente = valeur par défaut du style.

   1.5 : chaque taille et chaque espace a sa valeur mobile (--xxx-m).
   Le passage en mobile suit la largeur de la zone (container query),
   pas celle de l'écran : l'aperçu mobile de l'administration est donc exact.
   ========================================================== */

.mml-legal {
	--mml-accent: #0ea5e9;
	--mml-width: 880px;
	--mml-line: rgba(127, 127, 127, .22);
	--mml-soft: rgba(127, 127, 127, .06);
	container-type: inline-size;
	container-name: mml;
	display: block;
	width: 100%;
}
.mml-legal[hidden], .mml-legal [hidden] { display: none !important; }
.mml-legal *, .mml-legal *::before, .mml-legal *::after { box-sizing: border-box; }

.mml-in {
	max-width: var(--mml-width);
	/* 1.8.1 : un vrai espace par défaut avec le menu et le pied de page (avant : 0, le contenu collait). */
	margin: var(--mml-mt, 48px) auto var(--mml-mb, 72px);
	font-size: var(--mml-size, 16px);
	line-height: var(--mml-lh, 1.7);
	color: var(--mml-text, inherit);
}
.mml-align-gauche > .mml-in { margin-left: 0; }

/* Police, couleur du texte, fond de la zone */
.mml-legal.has-font, .mml-legal.has-font :is(p, dd, dt, li, a, strong) { font-family: var(--mml-font) !important; }
.mml-legal.has-text-color .mml-in, .mml-legal.has-text-color :is(p, dd, li, strong) { color: var(--mml-text) !important; }
.mml-legal.has-page-bg > .mml-in {
	padding: var(--mml-page-pad, 32px);
	border-radius: var(--mml-radius, 16px);
	background: var(--mml-page-bg);
}
.mml-legal p { margin: 0 0 .8em; padding: 0; font-size: inherit; line-height: inherit; }
.mml-legal p:last-child { margin-bottom: 0; }
.mml-legal a { color: var(--mml-link, var(--mml-accent)); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; word-break: break-word; }
.mml-legal a:hover { text-decoration-thickness: 2px; }

/* --- Sommaire --- */
.mml-toc { margin: 0 0 32px; }
.mml-toc ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mml;
}
.mml-toc li { margin: 0; padding: 0; counter-increment: mml; }
.mml-toc a {
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--mml-line);
	border-radius: 999px;
	font-size: .8125em;
	line-height: 1.3;
	color: inherit;
	text-decoration: none;
	transition: border-color .2s, background .2s;
}
.mml-toc a::before {
	content: counter(mml, decimal-leading-zero);
	font-size: .85em;
	font-weight: 700;
	color: var(--mml-accent);
}
.mml-toc a:hover { border-color: var(--mml-accent); background: color-mix(in srgb, var(--mml-accent) 8%, transparent); }

/* --- Sections --- */
.mml-section { scroll-margin-top: 110px; }
.mml-h {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 var(--mml-title-gap, 14px) !important;
	padding: 0 !important;
	font-size: var(--mml-title-size, 1.25em) !important;
	line-height: 1.3 !important;
	font-weight: var(--mml-title-weight, 700) !important;
}
/* 1.5.2 : par défaut, les titres prennent la couleur du texte de la page, pas celle des titres du thème
   (un thème qui met ses titres en blanc pour des bandeaux sombres les rendait invisibles). */
.mml-legal .mml-h { color: inherit; }
.has-title-color .mml-h { color: var(--mml-title-color) !important; }
.has-title-font .mml-h { font-family: var(--mml-title-font) !important; }
.mml-num {
	font-size: var(--mml-num-size, .7em);
	font-weight: 700;
	color: var(--mml-accent);
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}

/* --- Listes d'informations --- */
.mml-dl { margin: 0; padding: 0; }
.mml-row {
	display: grid;
	grid-template-columns: minmax(150px, 34%) 1fr;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px dashed var(--mml-line);
}
.mml-row:last-child { border-bottom: 0; }
.mml-row dt { margin: 0; font-size: .88em; opacity: .65; }
.has-label-color .mml-row dt { color: var(--mml-label) !important; opacity: 1; }
.mml-row dd { margin: 0; font-weight: 500; }

.mml-callout {
	margin-top: 16px;
	padding: 16px 20px;
	border-left: 3px solid var(--mml-accent);
	border-radius: 0 calc(var(--mml-radius, 16px) * .6) calc(var(--mml-radius, 16px) * .6) 0;
	background: color-mix(in srgb, var(--mml-accent) 6%, transparent);
}
.mml-callout__title { font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mml-accent); margin-bottom: 4px !important; }

.mml-muted { opacity: .75; font-size: .92em; }
.mml-updated { margin-top: 32px !important; font-size: .8125em; opacity: .6; text-align: right; }

/* ===== Style : Sobre ===== */
.mml--sobre .mml-section { padding: calc(var(--mml-gap, 52px) / 2) 0; border-top: 1px solid var(--mml-line); }
.mml--sobre .mml-section:first-child { border-top: 0; padding-top: 0; }

/* ===== Style : Cartes ===== */
.mml--cartes .mml-sections { display: grid; gap: var(--mml-gap, 18px); }
.mml--cartes .mml-section {
	padding: var(--mml-pad, 26px 28px);
	border: 1px solid var(--mml-line);
	border-radius: var(--mml-radius, 16px);
	background: var(--mml-soft);
	transition: border-color .3s, transform .3s;
}
.mml--cartes .mml-section:target,
.mml--cartes .mml-section:hover { border-color: color-mix(in srgb, var(--mml-accent) 45%, transparent); }

/* ===== Style : Éditorial ===== */
.mml--editorial .mml-section {
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: 32px;
	padding: calc(var(--mml-gap, 68px) / 2) 0;
	border-top: 1px solid var(--mml-line);
}
.mml--editorial .mml-section:first-child { border-top: 2px solid currentColor; }
.mml--editorial .mml-h { flex-direction: column; gap: 6px; font-size: var(--mml-title-size, 1.1em) !important; }
.mml--editorial .mml-num { font-size: var(--mml-num-size, 2.4em); line-height: 1; font-weight: 300; }

/* ===== Mobile : la zone fait moins de 700 px de large ===== */
@container mml (max-width: 700px) {
	.mml-in {
		max-width: var(--mml-width-m, 100%); /* 1.5.6 : largeur réglable sur mobile */
		margin: var(--mml-mt-m, var(--mml-mt, 32px)) auto var(--mml-mb-m, var(--mml-mb, 48px));
		font-size: var(--mml-size-m, 15px);
	}
	.has-page-bg > .mml-in { padding: var(--mml-page-pad-m, 20px); }

	/* Sommaire : une ligne qui défile au doigt */
	.mml-toc { margin: 0 0 24px; }
	.mml-toc ol {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 2px 0 8px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mml-toc ol::-webkit-scrollbar { display: none; }
	.mml-toc li { flex: 0 0 auto; scroll-snap-align: start; }
	.mml-toc a { padding: 8px 14px; }

	.mml-h {
		margin-bottom: var(--mml-title-gap-m, var(--mml-title-gap, 12px)) !important;
		font-size: var(--mml-title-size-m, 1.15em) !important;
	}
	.mml-num { font-size: var(--mml-num-size-m, .7em); }
	.mml-legal .mml-h1 { font-size: var(--mml-h1-size-m, var(--mml-h1-size, 28px)) !important; }

	.mml-row { grid-template-columns: 1fr; gap: 0; padding: 10px 0; }
	.mml-row dt { font-size: .8em; text-transform: uppercase; letter-spacing: .05em; }
	.mml-callout { padding: 14px 16px; }

	.mml--sobre .mml-section { padding: calc(var(--mml-gap-m, 40px) / 2) 0; }
	.mml--sobre .mml-section:first-child { padding-top: 0; }
	.mml--cartes .mml-sections { gap: var(--mml-gap-m, 12px); }
	.mml--cartes .mml-section { padding: var(--mml-pad-m, 20px 18px); }
	.mml--editorial .mml-section { grid-template-columns: 1fr; gap: 12px; padding: calc(var(--mml-gap-m, 48px) / 2) 0; }
	.mml--editorial .mml-h { flex-direction: row; align-items: baseline; gap: 10px; font-size: var(--mml-title-size-m, 1.1em) !important; }
	.mml--editorial .mml-num { font-size: var(--mml-num-size-m, 1.5em); }
	.mml-updated { text-align: left; }
}

@media print {
	.mml-toc { display: none; }
	.mml--cartes .mml-section { border: 0; background: none; padding: 12px 0; }
}

/* 1.7.0 : politique de confidentialité, une fiche par usage */
.mml-legal .mml-pc-item { margin: 0 0 12px; }
.mml-legal .mml-pc-item .mml-dl { margin: 0; }

/* 1.7.2 : titre de la page dans notre zone ; celui du thème est masqué pour n'en garder qu'un */
.mml-legal .mml-head { margin: 0 0 calc(var(--mml-gap, 28px) * .9); }
/* 1.8.1 : taille et couleur réglables ; la taille par défaut est en px (avant : en em, donc différente
   d'une page à l'autre dès que la taille du texte changeait). Le thème ne peut plus l'écraser. */
.mml-legal .mml-h1 {
	margin: 0 !important; padding: 0 !important;
	font-family: var(--mml-title-font, inherit);
	font-weight: var(--mml-title-weight, 700) !important;
	font-size: var(--mml-h1-size, clamp(28px, 22px + 1.2vw, 38px)) !important;
	line-height: 1.15 !important;
	letter-spacing: -.01em;
	color: var(--mml-title-color, inherit) !important;
}
.mml-legal.has-title-font .mml-h1 { font-family: var(--mml-title-font) !important; }
.mml-legal.has-h1-color .mml-h1 { color: var(--mml-h1-color) !important; }
.mml-legal .mml-head::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 14px; border-radius: 3px; background: var(--mml-accent); }
.mml-legal.is-centre .mml-head, .mml-legal.mml-centre .mml-head { text-align: inherit; }
body.mml-own-title h1.entry-title,
body.mml-own-title .main_title,
body.mml-own-title .et_post_meta_wrapper > h1,
body.mml-own-title .wp-block-post-title,
body.mml-own-title .page-title,
body.mml-own-title .entry-header > .entry-title { display: none !important; }

/* 1.7.3 : politique de confidentialité sur Divi : on sort du conteneur du thème (80 % de l'écran)
   pour que la largeur réglée (ex. 80 %) soit celle de la page, comme pour les mentions légales.
   L'espace au-dessus se règle dans le style (Espace au-dessus), plus celui du thème. */
body.mml-pc-page #main-content > .container { width: 100%; max-width: none; padding-top: 0; }
body.mml-pc-page #main-content > .container::before { display: none; }
body.mml-pc-page #left-area { width: 100%; float: none; padding: 0 !important; }
body.mml-pc-page #sidebar { display: none; }
body.mml-pc-page #left-area article.page { margin-bottom: 0; padding-bottom: 0; }

/* 1.8.1 : sommaire protégé contre les numéros de liste du thème (Divi : « 1. 2. 3. » devant les pastilles). */
.mml-legal .mml-toc ol,
.mml-legal .mml-toc li { list-style: none !important; }
.mml-legal .mml-toc ol { margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; line-height: inherit !important; }
.mml-legal .mml-toc li { margin-left: 0 !important; padding-left: 0 !important; }
.mml-legal .mml-toc li::marker { content: none; }
.mml-legal .mml-toc li::before { content: none !important; display: none !important; }