/*
 * Feuille de style de gedeon.im
 * Système visuel : voir le brief de refonte, section 4.
 * Aucune dépendance, aucun préprocesseur.
 */

/* ---------- Polices (hébergées dans le dépôt, licence OFL) ---------- */

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/figtree-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
}

/* ---------- Variables ---------- */

:root {
	--bg: #F8FAFC;
	--surface: #FFFFFF;
	--text: #191F2B;
	--text-2: #555B66;
	--border: #DDE2E6;
	--border-input: #C5CED5;
	--neutral: #EFF2F5;

	--teal: #007785;
	--teal-bg: #DCF4F8;
	--teal-text: #004049;
	--blue: #234993;
	--blue-bg: #E7EFFC;
	--blue-border: #C7D5F0;
	--warn: #7A4300;
	--warn-bg: #FFF4E5;
	--warn-border: #F2D3A5;
	--error: #8E1B12;
	--error-bg: #FDECEA;
	--error-border: #F3C2BC;

	--code-bg: #191F2B;
	--code-text: #E6EAF0;
	--code-tag: #7FD1DC;
	--code-attr: #F6C177;
	--code-value: #A6E3A1;
	--code-comment: #8B93A3;

	--dark-text: #F3F5F8;
	--dark-text-2: #C9D0DA;
	--dark-border: #3A4356;

	--font-text: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-title: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	--radius-sm: 8px;
	--radius: 10px;
	--radius-md: 12px;
	--radius-lg: 14px;
	--radius-xl: 16px;

	--page-max: 1152px;
	--page-pad: 32px;
}

@media (max-width: 640px) {
	:root {
		--page-pad: 16px;
	}
}

/* ---------- Base ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 16px;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-text);
	font-size: 16px;
	line-height: 1.5;
	overflow-wrap: break-word;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--teal);
}

a:hover {
	color: var(--teal-text);
}

:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 2px;
	border-radius: 4px;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	line-height: 1.15;
}

p {
	margin: 0;
}

code,
pre,
kbd {
	font-family: var(--font-code);
}

strong {
	font-weight: 600;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100;
	padding: 10px 16px;
	border-radius: var(--radius);
	background: var(--text);
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
	color: #FFFFFF;
}

.container {
	width: 100%;
	max-width: var(--page-max);
	margin: 0 auto;
	padding-left: var(--page-pad);
	padding-right: var(--page-pad);
}

.container--narrow {
	max-width: 1088px;
}

main {
	flex: 1 0 auto;
}

/* ---------- Boutons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.btn--lg {
	min-height: 50px;
	padding: 14px 20px;
	font-size: 16px;
}

.btn--sm {
	min-height: 40px;
	padding: 8px 16px;
	font-size: 14px;
}

.btn--primary {
	background: var(--teal);
	color: #FFFFFF;
}

.btn--primary:hover {
	background: var(--teal-text);
	color: #FFFFFF;
}

.btn--blue {
	background: var(--blue);
	color: #FFFFFF;
}

.btn--blue:hover {
	background: #1A3770;
	color: #FFFFFF;
}

.btn--secondary {
	background: var(--surface);
	border-color: var(--border);
	color: var(--text);
}

.btn--secondary:hover {
	border-color: var(--text-2);
	color: var(--text);
}

.btn--light {
	background: #FFFFFF;
	color: var(--text);
}

.btn--light:hover {
	color: var(--text);
	background: var(--neutral);
}

.btn--ghost-dark {
	border-color: #55607A;
	color: var(--dark-text);
}

.btn--ghost-dark:hover {
	border-color: var(--dark-text);
	color: #FFFFFF;
}

.btn--danger-light {
	background: #FFFFFF;
	border-color: var(--error-border);
	color: var(--error);
	font-size: 14px;
}

.btn--danger-light:hover {
	color: var(--error);
	border-color: var(--error);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------- En-tête ---------- */

.site-header {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.brand {
	display: flex;
	align-items: center;
	border-radius: var(--radius-sm);
}

.brand img {
	display: block;
	height: 36px;
	width: auto;
}

.site-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 14px;
	font-weight: 500;
}

.site-nav a {
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	color: var(--text-2);
	text-decoration: none;
}

.site-nav a:hover {
	background: var(--neutral);
	color: var(--text);
}

.site-nav a[aria-current] {
	background: var(--neutral);
	color: var(--text);
}

.site-header__cta {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.nav-toggle__icon {
	position: relative;
	width: 16px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 16px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
}

.nav-toggle__icon::before {
	top: -5px;
}

.nav-toggle__icon::after {
	top: 5px;
}

@media (max-width: 900px) {
	.site-header__inner {
		flex-wrap: wrap;
	}

	/* Le menu ne se replie que si le script est actif : sans script, il reste visible. */
	/* Ordre visuel identique à l'ordre de tabulation : logo, Menu, Découvrir Ulysse. */
	.js .nav-toggle {
		display: inline-flex;
		order: 1;
		margin-left: auto;
	}

	.js .site-header__cta {
		order: 2;
	}

	.js .site-nav {
		display: none;
		order: 3;
		width: 100%;
		flex-direction: column;
		gap: 2px;
		padding-top: 8px;
		border-top: 1px solid var(--border);
	}

	.js .site-nav.is-open {
		display: flex;
	}

	.js .site-nav a {
		padding: 12px;
		font-size: 15px;
	}

	.site-header__cta .btn {
		min-height: 40px;
		padding: 8px 14px;
		font-size: 14px;
	}
}

@media (max-width: 420px) {
	.brand img {
		height: 30px;
	}

	.site-header__cta .btn {
		padding: 8px 10px;
	}

	/* Sur très petit écran, le bouton du menu n'affiche que son icône. */
	.nav-toggle {
		width: 40px;
		justify-content: center;
		padding: 8px;
	}

	.nav-toggle__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* ---------- En-tête de page intérieure ---------- */

.page-hero {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.page-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 40px;
	padding-bottom: 44px;
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--text-2);
}

.breadcrumb li {
	display: flex;
	gap: 8px;
}

/* Le séparateur suit l'élément qu'il termine : il reste en fin de ligne
   quand le fil d'Ariane passe à la ligne, et n'en ouvre jamais une. */
.breadcrumb li:not(:last-child)::after {
	content: "/";
	content: "/" / "";
	color: var(--text-2);
}

.breadcrumb a {
	color: var(--text-2);
}

.breadcrumb [aria-current] {
	color: var(--text);
}

.eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--teal);
}

.eyebrow--blue {
	color: var(--blue);
}

.page-title {
	max-width: 820px;
	font-size: clamp(34px, 5.2vw, 48px);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.lead {
	max-width: 740px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--text-2);
}

.lead--wide {
	max-width: 820px;
}

@media (max-width: 640px) {
	.page-hero__inner {
		padding-top: 28px;
		padding-bottom: 32px;
	}

	.lead {
		font-size: 17px;
	}
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
}

.chip {
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--neutral);
	color: var(--text-2);
}

.chip--code {
	font-family: var(--font-code);
	overflow-wrap: anywhere;
}

/* ---------- Mise en page de documentation ---------- */

.page-body {
	padding-top: 40px;
	padding-bottom: 72px;
}

.doc-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: flex-start;
}

.doc-layout > .doc {
	flex: 999 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 60px;
}

.toc {
	flex: 1 1 200px;
	max-width: 220px;
	position: sticky;
	top: 16px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	font-size: 14px;
}

.toc summary {
	padding: 0 8px 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-2);
	list-style: none;
}

.toc summary::-webkit-details-marker {
	display: none;
}

.toc ol {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.toc a {
	display: block;
	padding: 7px 8px;
	border-radius: var(--radius-sm);
	color: var(--text);
	text-decoration: none;
}

.toc a:hover {
	background: var(--neutral);
}

.toc .toc__sub a {
	padding: 6px 8px 6px 20px;
	color: var(--text-2);
}

.toc .toc__subsub a {
	padding: 6px 8px 6px 32px;
	color: var(--text-2);
}

.toc a.is-active {
	background: var(--teal-bg);
	color: var(--teal-text);
	font-weight: 600;
}

@media (min-width: 901px) {
	/* Sur grand écran, le sommaire reste toujours ouvert. */
	.toc summary {
		pointer-events: none;
	}
}

@media (max-width: 900px) {
	.doc-layout {
		gap: 24px;
	}

	.toc {
		position: static;
		flex: 1 1 100%;
		max-width: none;
		max-height: none;
		padding: 0;
	}

	.toc summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
		padding: 12px 16px;
		font-size: 13px;
		cursor: pointer;
	}

	.toc summary::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		margin-top: -4px;
	}

	.toc[open] summary::after {
		transform: rotate(-135deg);
		margin-top: 4px;
	}

	.toc ol {
		padding: 0 8px 12px;
	}
}

/* ---------- Contenu ---------- */

.stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.stack--sm {
	gap: 10px;
}

.stack--lg {
	gap: 24px;
}

.doc h2 {
	font-size: 30px;
}

.doc h3 {
	font-size: 21px;
}

.doc h3.h-lg {
	font-size: 26px;
}

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

.doc .stack > h3,
.doc .stack > h4 {
	margin-top: 8px;
}

.text {
	font-size: 16px;
	line-height: 1.65;
	color: var(--text-2);
}

.text--sm {
	font-size: 15px;
	line-height: 1.6;
}

.text--xs {
	font-size: 13px;
	color: var(--text-2);
}

.text strong,
.text b {
	color: var(--text);
}

.list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-2);
}

code.inline {
	font-size: 0.875em;
	color: var(--text);
	overflow-wrap: anywhere;
}

.tag-name {
	font-family: var(--font-code);
	font-size: 15px;
	font-weight: 700;
	color: var(--teal);
}

.field-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.field-head > span:last-child {
	font-size: 15px;
	color: var(--text-2);
}

/* ---------- Blocs de code ---------- */

.code {
	overflow-x: auto;
	border-radius: var(--radius-md);
	background: var(--code-bg);
}

.code pre {
	margin: 0;
	padding: 18px 22px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--code-text);
	white-space: pre;
	/* Les exemples sont indentés par tabulations : 2 caractères comme la maquette. */
	tab-size: 2;
	-moz-tab-size: 2;
}

.code--sm {
	border-radius: var(--radius);
}

.code--sm pre {
	padding: 12px 14px;
	font-size: 12px;
	line-height: 1.6;
}

.code .t-tag {
	color: var(--code-tag);
}

.code .t-attr {
	color: var(--code-attr);
}

.code .t-val {
	color: var(--code-value);
}

.code .t-com {
	color: var(--code-comment);
}

/* Classes de coloration historiques (pygments), utilisées par la documentation
   et par les messages du validateur : nt balise, na attribut, s valeur,
   c et cp commentaire, kt type. */
.code .nt {
	color: var(--code-tag);
}

.code .na {
	color: var(--code-attr);
}

.code .s {
	color: var(--code-value);
}

.code .c,
.code .cp {
	color: var(--code-comment);
}

@media (max-width: 640px) {
	.code pre {
		padding: 14px 16px;
		font-size: 12px;
	}
}

/* Mêmes classes dans le texte courant : balises et attributs en ligne. */
.doc .pygments,
.inline-code .pygments {
	font-family: var(--font-code);
	font-size: 0.875em;
	overflow-wrap: anywhere;
}

.doc .pygments .nt,
.inline-code .nt {
	color: var(--teal);
	font-weight: 600;
}

.doc .pygments .na,
.inline-code .na {
	color: var(--blue);
	font-weight: 600;
}

.doc .pygments .s,
.inline-code .s {
	color: var(--error);
}

.doc .pygments .kt,
.inline-code .kt {
	color: var(--blue);
}

.doc code {
	font-size: 0.875em;
	overflow-wrap: anywhere;
}

.doc .optional {
	color: var(--text-2);
	font-style: italic;
}

.icon-warn {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 6px;
	vertical-align: -3px;
	color: var(--warn);
}

/* Listes de balises : une ligne par balise, avec son descriptif. */

.fields {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
}

.fields > li {
	padding: 16px 18px;
	font-size: 15px;
	line-height: 1.6;
}

.fields > li + li {
	border-top: 1px solid var(--neutral);
}

.fields > li > * + * {
	margin-top: 10px;
}

.fields .fields {
	margin-top: 10px;
}

.fields .fields > li {
	padding: 10px 14px;
}

.sublist {
	margin: 8px 0 0;
	padding-left: 14px;
	list-style: none;
	border-left: 2px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15px;
	line-height: 1.55;
}

.sublist ul {
	margin-top: 6px;
}

.values {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.values li {
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--neutral);
	color: var(--text);
	font-family: var(--font-code);
	font-size: 13px;
}

.fields .table-wrap {
	margin-top: 10px;
}

.doc .table {
	min-width: 0;
}

.doc .table--wide {
	min-width: 560px;
}

.doc .table td,
.doc .table th {
	padding: 9px 16px;
}

.divider {
	margin: 14px 0;
	border: 0;
	border-top: 1px solid var(--neutral);
}

/* Explorateur des champs extras. */

.explorer {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}

.filter-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.filter-group legend {
	padding: 0 0 8px;
	font-family: var(--font-text);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-2);
}

.chip-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.chip-button {
	min-height: 36px;
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-text);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.chip-button:hover {
	border-color: var(--text-2);
}

.chip-button[aria-pressed="true"] {
	border-color: var(--teal);
	background: var(--teal);
	color: #FFFFFF;
	font-weight: 600;
}

.extras {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	overflow: hidden;
}

.extras__group > h5 {
	margin: 0;
	padding: 10px 18px;
	background: var(--neutral);
	border-top: 1px solid var(--border);
	font-family: var(--font-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-2);
}

.extras__group:first-child > h5 {
	border-top: 0;
}

.extras ul.extra-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.extra {
	padding: 16px 18px;
	border-top: 1px solid var(--neutral);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.extras__group > h5 + .extra-list > .extra:first-child {
	border-top: 0;
}

.extra__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.extra__key {
	font-family: var(--font-code);
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
	overflow-wrap: anywhere;
}

.extra__type {
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--neutral);
	color: var(--text-2);
	font-family: var(--font-code);
	font-size: 12px;
}

.extra__name {
	font-size: 15px;
}

.extra__contexts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.extra__contexts li {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--blue-bg);
	color: var(--blue);
	font-size: 12px;
	font-weight: 500;
}

.extra__enum {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-2);
}

.extra__enum strong {
	color: var(--text);
}

.extras--compact .extra {
	padding: 12px 16px;
}

.extras-empty {
	padding: 24px 18px;
	font-size: 15px;
	color: var(--text-2);
}

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

.link-list a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.link-list a:hover {
	border-color: var(--teal);
}

/* ---------- Tableaux ---------- */

.table-wrap {
	/* position: relative pour contenir aussi les éléments masqués en absolu. */
	position: relative;
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
}

.table {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
	font-size: 15px;
}

.table--sm {
	min-width: 480px;
}

.table caption {
	padding: 12px 16px;
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	caption-side: top;
}

.table thead tr {
	background: var(--neutral);
	text-align: left;
	color: var(--text-2);
	font-size: 13px;
}

.table th {
	padding: 12px 16px;
	font-weight: 600;
}

.table td {
	padding: 12px 16px;
	vertical-align: top;
	line-height: 1.5;
}

.table tbody tr {
	border-top: 1px solid var(--border);
}

.table td.mono {
	font-family: var(--font-code);
	font-size: 13px;
	white-space: nowrap;
}

.table td.mono.sub {
	padding-left: 36px;
	color: var(--text-2);
}

.table td.muted {
	color: var(--text-2);
}

.table td.pre-line {
	white-space: pre-line;
}

/* ---------- Badges ---------- */

.badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.badge--required {
	background: var(--teal-bg);
	color: var(--teal-text);
}

.badge--recommended {
	background: var(--blue-bg);
	color: var(--blue);
}

.badge--optional {
	background: var(--neutral);
	color: var(--text-2);
}

.badge--warn {
	background: var(--warn-bg);
	color: var(--warn);
}

.badge--pill {
	padding: 4px 10px;
	font-weight: 700;
}

.pill-label {
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid var(--blue-border);
	background: var(--blue-bg);
	color: var(--blue);
	font-size: 14px;
	font-weight: 600;
}

/* ---------- Encadrés ---------- */

.note {
	padding: 14px 16px;
	border-radius: var(--radius);
	font-size: 15px;
	line-height: 1.55;
	background: var(--blue-bg);
	color: var(--blue);
}

.note--warn {
	background: var(--warn-bg);
	color: var(--warn);
}

.note--success {
	background: var(--teal-bg);
	color: var(--teal-text);
}

.note--error {
	background: var(--error-bg);
	color: var(--error);
}

.note a {
	color: inherit;
	font-weight: 600;
}

.note--sm {
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.5;
}

.callout {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border-radius: var(--radius-lg);
	background: var(--teal-bg);
	color: var(--teal-text);
}

.callout strong {
	font-size: 16px;
}

.callout p {
	font-size: 15px;
	line-height: 1.55;
}

.callout a {
	color: var(--teal-text);
	font-weight: 600;
}

/* ---------- Cartes et grilles ---------- */

.card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
}

.card--lg {
	padding: 24px;
	border-radius: var(--radius-xl);
	gap: 12px;
}

.card--muted {
	background: var(--bg);
}

.card h3 {
	font-size: 21px;
}

.card p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-2);
}

.card-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.card__badge {
	align-self: flex-start;
}

.card__link {
	margin-top: auto;
	font-size: 14px;
	font-weight: 600;
}

.grid {
	display: grid;
	gap: 16px;
}

.grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--tight {
	gap: 10px;
}

@media (max-width: 1024px) {
	.grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Sections de l'accueil ---------- */

.section {
	padding-top: 72px;
	padding-bottom: 72px;
}

.section--alt {
	background: var(--surface);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.section__inner {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.section__head {
	max-width: 680px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.section__head--wide {
	max-width: 720px;
}

.section-title {
	font-size: clamp(28px, 4.2vw, 38px);
	line-height: 1.1;
}

.section__head .lead {
	font-size: 18px;
}

@media (max-width: 640px) {
	.section {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.section__inner {
		gap: 28px;
	}
}

/* ---------- Accueil ---------- */

.home-hero {
	padding-top: 64px;
	padding-bottom: 72px;
}

.home-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.home-hero__top {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px;
	align-items: end;
}

.home-hero__title-col,
.home-hero__text-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.home-hero__text-col {
	gap: 22px;
}

.home-title {
	font-size: clamp(36px, 5.6vw, 56px);
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.home-hero__more {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-2);
}

.home-hero__more:hover {
	color: var(--text);
}

@media (max-width: 900px) {
	.home-hero__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

@media (max-width: 640px) {
	.home-hero {
		padding-top: 40px;
		padding-bottom: 48px;
	}

	.home-hero__inner {
		gap: 36px;
	}
}

/* Schéma : votre logiciel, Ulysse et la plateforme Gédéon, les portails. */

.diagram {
	margin: 0;
	padding: 28px;
	border-radius: 20px;
	background: var(--surface);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.diagram__flow {
	display: grid;
	grid-template-columns: 1fr 1.05fr 1.15fr 1.05fr 1fr;
	gap: 14px;
	align-items: stretch;
}

.diagram__end {
	padding: 20px;
	border-radius: var(--radius-lg);
	background: var(--bg);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
}

.diagram__end strong {
	font-family: var(--font-title);
	font-size: 18px;
	font-weight: 600;
}

.diagram__end span {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-2);
}

.diagram__flows {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.flow {
	padding: 12px 14px;
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--teal-bg);
	color: var(--teal-text);
}

.flow--blue {
	background: var(--blue-bg);
	color: var(--blue);
}

.flow__title {
	font-size: 12px;
	font-weight: 700;
}

.flow__text {
	font-size: 13px;
}

.diagram__core {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.core {
	padding: 16px;
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	text-align: center;
	background: var(--teal);
	color: #FFFFFF;
}

.core strong {
	font-family: var(--font-title);
	font-size: 24px;
	font-weight: 600;
}

.core span {
	font-size: 13px;
	color: var(--teal-bg);
}

.core--dark {
	background: var(--code-bg);
	color: var(--dark-text);
}

.core--dark strong {
	font-size: 19px;
}

.core--dark span {
	color: var(--dark-text-2);
}

.core__link {
	align-self: center;
	width: 2px;
	height: 16px;
	background: var(--teal);
}

.diagram figcaption {
	font-size: 13px;
	color: var(--text-2);
}

@media (max-width: 900px) {
	/* Sur mobile, le schéma passe en colonne. */
	.diagram {
		padding: 20px;
	}

	.diagram__flow {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.diagram__flows {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

@media (max-width: 420px) {
	.diagram__flows {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Fonctionnalités : grille séparée par des filets. */

.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.feature {
	padding: 26px;
	background: var(--surface);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.feature h3,
.usage h3,
.resource h3 {
	font-size: 20px;
}

.feature__punch {
	font-weight: 500;
}

.feature__text,
.usage p,
.resource p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-2);
}

@media (max-width: 900px) {
	.feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.feature-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.feature {
		padding: 20px;
	}
}

/* Aperçus d'écran (données fictives). */

.preview {
	margin: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	overflow: hidden;
}

.preview figcaption {
	padding: 12px 18px;
	border-bottom: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	font-size: 14px;
	font-weight: 600;
}

.preview figcaption span + span {
	font-weight: 400;
	font-size: 12px;
	color: var(--text-2);
}

.preview__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.preview__ref {
	font-size: 12px;
	color: var(--text-2);
}

.preview__name {
	margin-top: 2px;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 18px;
}

.rows {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.rows li {
	padding: 10px 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 14px;
}

.rows li + li {
	border-top: 1px solid var(--border);
}

.rows--contacts li {
	padding: 12px 14px;
}

.rows small {
	display: block;
	font-size: 12px;
	color: var(--text-2);
}

.status {
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	background: var(--teal-bg);
	color: var(--teal-text);
}

.status--blue {
	background: var(--blue-bg);
	color: var(--blue);
}

.status--neutral {
	background: var(--neutral);
	color: var(--text-2);
}

.status-text {
	font-size: 12px;
	font-weight: 600;
	color: var(--teal-text);
	white-space: nowrap;
}

.status-text--blue {
	color: var(--blue);
}

/* Usages, étapes et liens d'intégration. */

.usage {
	padding: 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.usage__who {
	font-size: 13px;
	font-weight: 600;
	color: var(--teal);
}

.steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.steps li {
	padding: 22px;
	border-radius: var(--radius-lg);
	background: var(--surface);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.steps__num {
	font-size: 13px;
	font-weight: 700;
	color: var(--teal);
}

.steps strong {
	font-family: var(--font-title);
	font-size: 18px;
	font-weight: 600;
}

.steps li > span:last-child {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-2);
}

@media (max-width: 1024px) {
	.steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

.link-card {
	padding: 18px 20px;
	border-radius: var(--radius-md);
	background: var(--teal-bg);
	color: var(--teal-text);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.link-card:hover {
	color: var(--teal-text);
	background: #C9EDF3;
}

.link-card span {
	font-size: 14px;
}

/* Ressources Gédéon. */

.resource {
	padding: 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--bg);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.resource ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.resource a {
	font-weight: 600;
}

/* Bloc contact sombre. */

.contact-panel {
	padding: 44px;
	border-radius: 20px;
	background: var(--code-bg);
	color: var(--dark-text);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: center;
}

.contact-panel__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.contact-panel h2 {
	font-size: clamp(28px, 4vw, 36px);
	line-height: 1.1;
}

.contact-panel p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--dark-text-2);
}

.contact-list {
	margin: 0;
	border: 1px solid var(--dark-border);
	border-radius: var(--radius-lg);
}

.contact-list > div {
	padding: 18px 20px;
}

.contact-list > div + div {
	border-top: 1px solid var(--dark-border);
}

.contact-list dt {
	font-size: 13px;
	color: #A9B2C1;
}

.contact-list dd {
	margin: 4px 0 0;
	font-size: 18px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.contact-list a {
	color: var(--dark-text);
	text-decoration: none;
}

.contact-list a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.contact-panel :focus-visible {
	outline-color: #FFFFFF;
}

@media (max-width: 900px) {
	.contact-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 28px;
	}
}

@media (max-width: 640px) {
	.contact-panel {
		padding: 24px 20px;
	}
}

/* ---------- Pied de page ---------- */

.site-footer {
	margin-top: auto;
	background: var(--surface);
	border-top: 1px solid var(--border);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	padding-top: 40px;
	padding-bottom: 40px;
	font-size: 14px;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.site-footer__col--brand {
	gap: 12px;
}

.site-footer__col--brand img {
	align-self: flex-start;
	height: 32px;
	width: auto;
}

.site-footer h2 {
	font-family: var(--font-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.site-footer ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer p,
.site-footer li {
	color: var(--text-2);
	line-height: 1.6;
}

.site-footer a {
	color: var(--text-2);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--text);
	text-decoration: underline;
}

/* ---------- Formulaires ---------- */

.form-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--surface);
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
}

.field__help {
	font-size: 13px;
	font-weight: 400;
	color: var(--text-2);
}

.input,
.textarea {
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--border-input);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-text);
	font-size: 15px;
	font-weight: 400;
}

.textarea {
	padding: 10px 12px;
	line-height: 1.5;
	resize: vertical;
}

.input--search {
	padding: 0 14px;
	border-color: var(--border);
	background: var(--bg);
}

.input:focus-visible,
.textarea:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 1px;
	border-color: var(--blue);
}

fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
}

legend {
	padding: 0 0 12px;
	font-family: var(--font-title);
	font-size: 19px;
	font-weight: 600;
}

.choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.choice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid var(--border-input);
	border-radius: var(--radius);
	background: var(--surface);
	font-size: 15px;
	cursor: pointer;
}

.choice:has(input:checked) {
	border-color: var(--teal);
	background: var(--teal-bg);
}

.checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	cursor: pointer;
}

.choice input,
.checkbox input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--teal);
}

.dropzone {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border: 2px dashed #B8C4CC;
	border-radius: var(--radius-md);
	background: var(--bg);
	font-size: 15px;
	font-weight: 600;
}

.dropzone--center {
	align-items: center;
	gap: 10px;
	padding: 36px 24px;
	border-radius: var(--radius-lg);
	text-align: center;
	cursor: pointer;
}

.dropzone input[type="file"] {
	max-width: 100%;
	font-family: var(--font-text);
	font-size: 14px;
	font-weight: 400;
}

.form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
}

.form-actions--end {
	justify-content: flex-end;
}

.form-actions--top {
	padding-top: 8px;
	border-top: 1px solid var(--border);
}

/* Champ piège contre les robots : hors de l'écran, ignoré par les lecteurs d'écran. */
.hp-field {
	position: absolute !important;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Procédure d'export ---------- */

.page-stack {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.page-stack > section {
	scroll-margin-top: 16px;
}

.delivery {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding: 18px 20px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	font-size: 15px;
}

.delivery ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--text-2);
}

.delivery li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.delivery li::before {
	content: "";
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: var(--teal);
}

.delivery li + li::before {
	background: var(--blue);
}

.split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	align-items: center;
}

@media (max-width: 900px) {
	.split {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

.benefit {
	padding: 16px 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	font-size: 15px;
	line-height: 1.5;
}

.request {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	border: 1px solid var(--border);
	border-radius: 20px;
	background: var(--surface);
}

.request form {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.request fieldset {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.request h3 {
	font-size: 19px;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.contact-box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border-radius: var(--radius-md);
	background: var(--bg);
}

.contact-box > strong {
	font-size: 15px;
}

.pack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px;
	border-radius: var(--radius-md);
	background: var(--bg);
	font-size: 15px;
	line-height: 1.55;
}

.pack .note {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pack .note ul {
	margin: 0;
	padding-left: 20px;
}

@media (max-width: 640px) {
	.request {
		padding: 20px 16px;
	}

	.form-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.result--error {
	background: var(--error-bg);
	border: 1px solid var(--error-border);
	color: var(--error);
}

/* ---------- Portails de diffusion ---------- */

.portal-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 20px;
}

.portal-tools .field {
	flex: 1 1 320px;
	max-width: 480px;
}

.portal-tools .input--search {
	background: var(--surface);
}

.portals {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1024px) {
	.portals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.portals {
		grid-template-columns: minmax(0, 1fr);
	}
}

.portal {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	height: 100%;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}

.portal__logo {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	background: var(--neutral);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.portal__logo img {
	display: block;
	max-width: 48px;
	max-height: 48px;
}

.portal__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: var(--text-2);
}

.portal__name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-size: 18px;
	color: var(--text);
}

.portal__link {
	font-family: var(--font-text);
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
}

.portal__id code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--teal-bg);
	color: var(--teal-text);
	font-size: 13px;
	overflow-wrap: anywhere;
}

/* ---------- Robots ---------- */

.bots {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bot {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	padding: 26px;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--surface);
	scroll-margin-top: 16px;
}

.bot__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bot__title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bot__title h2 {
	font-size: 24px;
}

.bot__title h3 {
	font-size: 19px;
}

.bot__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: var(--teal-bg);
	color: var(--teal-text);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bot__icon--neutral {
	background: var(--neutral);
	color: var(--text-2);
}

.bot__icon svg {
	width: 22px;
	height: 22px;
}

.bot__signature {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bot__signature > span {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-2);
}

.bot .text code {
	font-size: 0.875em;
	color: var(--text);
	overflow-wrap: anywhere;
}

@media (max-width: 900px) {
	.bot {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		padding: 20px;
	}
}

.dark-panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px;
	border-radius: var(--radius-xl);
	background: var(--code-bg);
	color: var(--dark-text);
}

.dark-panel h2 {
	font-size: 22px;
}

.dark-panel p,
.dark-panel li {
	font-size: 15px;
	line-height: 1.55;
	color: var(--dark-text-2);
}

.dark-panel ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dark-panel li {
	padding: 12px 16px;
	border: 1px solid #55607A;
	border-radius: var(--radius);
}

.dark-panel a {
	color: #FFFFFF;
	font-weight: 600;
}

.dark-panel :focus-visible {
	outline-color: #FFFFFF;
}

/* ---------- Validateur XML ---------- */

.validator {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 880px;
}

.dropzone__icon {
	width: 40px;
	height: 40px;
	color: var(--teal);
}

.dropzone__title {
	font-size: 17px;
	font-weight: 600;
}

.result {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px;
	border-radius: var(--radius-xl);
	font-size: 15px;
	line-height: 1.55;
}

.result h2 {
	font-size: 22px;
}

.result--success {
	background: var(--teal-bg);
	border: 1px solid #A9DDE5;
	color: var(--teal-text);
}

.result--warn {
	background: var(--warn-bg);
	border: 1px solid var(--warn-border);
	color: var(--warn);
}

.result__head {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.result__icon {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
}

.result__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	padding-top: 4px;
}

.result--success .btn--secondary,
.result--warn .btn--secondary {
	border-color: transparent;
}

.result a:not(.btn) {
	color: inherit;
	font-weight: 600;
}

.result--errors {
	padding: 0;
	gap: 0;
	border: 1px solid var(--error-border);
	background: var(--surface);
	overflow: hidden;
}

.result--errors .result__summary {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 24px;
	background: var(--error-bg);
	color: var(--error);
}

.error-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.error-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 14px;
	padding: 16px 24px;
	border-top: 1px solid #F6E0DD;
}

.error-list__line {
	min-width: 84px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--neutral);
	color: var(--text);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.error-type-warning .error-list__line {
	background: var(--warn-bg);
	color: var(--warn);
}

.error-type-fatal .error-list__line {
	background: var(--error-bg);
	color: var(--error);
}

.error-list__message {
	flex: 1 1 360px;
	min-width: 0;
	font-family: var(--font-code);
	font-size: 13px;
	line-height: 1.6;
	color: var(--text);
	overflow-wrap: anywhere;
}

/* Classes produites par le formatage des messages libxml (dispatch.php). */
.error-list__message .nt {
	color: var(--teal);
}

.error-list__message .na,
.error-list__message .kt {
	color: var(--blue);
}

.error-list__message .s {
	color: var(--error);
}

.error-list__message .pattern {
	padding: 0 4px;
	border-radius: 4px;
	background: var(--neutral);
}

.result--errors .result__actions {
	padding: 16px 24px 20px;
	border-top: 1px solid #F6E0DD;
}

@media (max-width: 640px) {
	.result:not(.result--errors),
	.result--errors .result__summary,
	.error-list li,
	.result--errors .result__actions {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ---------- Divers ---------- */

.mono {
	font-family: var(--font-code);
}

.muted {
	color: var(--text-2);
}

[hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media print {
	.site-header,
	.site-footer,
	.toc,
	.skip-link {
		display: none;
	}

	body {
		background: #FFFFFF;
	}

	.code {
		background: #FFFFFF;
		border: 1px solid var(--border);
	}

	.code pre,
	.code .t-tag,
	.code .t-attr,
	.code .t-val,
	.code .t-com {
		color: var(--text);
	}
}