/* Styles propres à chaque gabarit de page. */

/* ---------- Héros ---------- */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) var(--section-py);
	border-bottom: var(--border-width) solid var(--c-border);
}

.hero::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 130%;
	background:
		radial-gradient(48rem 32rem at 18% 12%, var(--hero-glow-1), transparent 62%),
		radial-gradient(40rem 30rem at 85% 8%, var(--hero-glow-2), transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(60rem 34rem at 50% 0%, #000 20%, transparent 78%);
	pointer-events: none;
	z-index: 0;
}

.hero > * {
	position: relative;
	z-index: 1;
}

.hero__inner {
	display: grid;
	gap: var(--space-xl);
	align-items: center;
}

@media (min-width: 64rem) {
	.hero__inner {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		gap: var(--space-2xl);
	}
}

.hero__title {
	font-size: var(--fs-display);
	margin-bottom: var(--space-sm);
}

.hero__title em {
	font-style: normal;
	color: var(--c-accent);
}

.hero__text {
	font-size: var(--fs-lead);
	color: var(--c-text-soft);
	max-width: 40ch;
	margin-bottom: var(--space-md);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-bottom: var(--space-md);
}

.hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--c-text-muted);
	font-size: 0.88rem;
}

.hero__proof li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}

.hero__proof .icon {
	width: 1.05rem;
	height: 1.05rem;
	color: var(--c-accent);
}

/* Panneau visuel du héros : une « console » abstraite, sans image à charger. */
.hero__panel {
	background: var(--c-surface);
	border: var(--border-width) solid var(--c-border-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.hero__panel-bar {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem var(--space-sm);
	background: var(--c-surface-2);
	border-bottom: var(--border-width) solid var(--c-border);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--c-text-muted);
}

.hero__panel-dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--c-border-strong);
}

.hero__panel-dot:first-child {
	background: var(--c-accent);
}

.hero__panel-body {
	padding: var(--space-md);
	display: grid;
	gap: var(--space-xs);
}







/* En-tête de page interne */
.page-hero {
	position: relative;
	padding-block: var(--space-lg) var(--space-xl);
	border-bottom: var(--border-width) solid var(--c-border);
	background: var(--c-bg-alt);
}

.page-hero__inner {
	max-width: 52rem;
}

.page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--space-md);
}

.page-hero__meta .badge {
	max-width: 100%;
	white-space: normal;
}

.page-hero__title {
	margin-block: var(--space-xs) var(--space-sm);
}

/* ---------- Estimateur du héros ---------- */
/*
 * Le panneau du héros porte l'estimateur de budget, branché sur le même moteur
 * que la page outil (voir [data-calc] dans main.js). Sans JavaScript, les deux
 * champs restent affichés et le résultat garde son tiret : la promesse n'est
 * pas tenue, mais rien n'est cassé, et le lien vers l'outil complet reste là.
 */
.hero__panel--tool .hero__panel-body {
	gap: var(--space-sm);
}

.hero__panel-intro {
	margin: 0;
	font-size: 0.88rem;
	color: var(--c-text-soft);
}

.hero__panel-fields {
	display: grid;
	gap: var(--space-xs);
}

@media (min-width: 26rem) {
	.hero__panel-fields {
		grid-template-columns: 8rem minmax(0, 1fr);
	}
}

.hero__panel--tool .field > label {
	font-size: 0.8rem;
	font-weight: var(--fw-medium);
	color: var(--c-text-soft);
}

.hero__result {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: var(--space-xs) var(--space-sm);
	background: var(--c-surface-2);
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-sm);
}

.hero__result-label {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.hero__result-value {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	font-weight: var(--fw-display);
	letter-spacing: var(--tracking-display);
	color: var(--c-accent);
	line-height: 1.15;
}

.hero__result-note {
	font-size: 0.76rem;
	line-height: 1.4;
	color: var(--c-text-muted);
}

/* ---------- Pôles sur la page d'accueil ---------- */
.pole-grid {
	display: grid;
	gap: var(--space-md);
	/* Trois par ligne au large : même largeur minimale que .grid--3, ce qui
	   évite d'inventer un point de rupture. À 16rem, une quatrième colonne
	   passait et les cartes devenaient trop étroites pour leur liste. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}

/*
 * La liste des prestations d'un pôle se lisait comme un paragraphe : cinq
 * lignes de même graisse, séparées par un simple interligne. Chaque entrée
 * devient une ligne à part entière — un filet la sépare de la suivante, un
 * chevron la désigne comme un lien. Le chevron est dessiné avec deux bordures :
 * pas d'image à charger, pas de balise en plus dans le gabarit.
 */
.pole-card__services {
	list-style: none;
	margin: var(--space-xs) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	font-size: 0.9rem;
}

.pole-card__services li {
	margin: 0;
	border-top: var(--border-width) solid var(--c-border);
}

.pole-card__services a {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 0.4rem;
	margin-inline: -0.4rem;
	border-radius: var(--radius-xs);
	color: var(--c-text-soft);
	text-decoration: none;
	transition: color var(--transition), background var(--transition);
}

.pole-card__services a::before {
	content: "";
	flex: none;
	width: 0.32rem;
	height: 0.32rem;
	border-top: 2px solid var(--c-accent);
	border-right: 2px solid var(--c-accent);
	transform: rotate(45deg);
	transition: transform var(--transition);
}

.pole-card__services a:hover {
	background: var(--c-accent-soft);
	color: var(--c-text);
	text-decoration: none;
}

.pole-card__services a:hover::before {
	transform: rotate(45deg) translate(1.5px, -1.5px);
}

/* ---------- Page prestation ---------- */
.service-layout {
	display: grid;
	/* Les graphiques et démos ne doivent pas imposer leur largeur à la page. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl);
	padding-block: var(--section-py);
	align-items: start;
}

.service-body,
.service-aside {
	min-width: 0;
}

@media (min-width: 64rem) {
	.service-layout {
		grid-template-columns: minmax(0, 1fr) 19rem;
		gap: var(--space-2xl);
	}
}

.service-body > * + * {
	margin-top: var(--space-lg);
}

.service-body h2 {
	font-size: var(--fs-h2);
	margin-bottom: var(--space-xs);
}

.service-body h3 {
	margin-bottom: 0.3rem;
}

.service-aside {
	position: sticky;
	top: calc(var(--header-h) + var(--space-sm));
	display: grid;
	gap: var(--space-sm);
}

.aside-card {
	padding: var(--space-md);
	background: var(--c-surface);
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-lg);
}

.aside-card h2,
.aside-card h3 {
	font-size: 0.82rem;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--c-text-muted);
	margin-bottom: var(--space-2xs);
	font-weight: var(--fw-strong);
}

.aside-card dl {
	display: grid;
	gap: 0.65rem;
	margin: 0;
}

.aside-card dt {
	font-size: 0.8rem;
	color: var(--c-text-muted);
}

.aside-card dd {
	margin: 0.1rem 0 0;
	font-weight: var(--fw-strong);
	color: var(--c-text);
	font-size: 0.98rem;
}

.benefit-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.benefit {
	padding-top: var(--space-2xs);
	border-top: 2px solid var(--c-accent);
}

.benefit h3 {
	font-size: var(--fs-h4);
	font-weight: var(--fw-strong);
	margin-bottom: 0.25rem;
}

.benefit p {
	margin: 0;
	color: var(--c-text-soft);
	font-size: 0.95rem;
}

/* ---------- Tarifs ---------- */
.pricing-toggle {
	display: inline-flex;
	gap: 0.2rem;
	padding: 0.25rem;
	background: var(--c-surface-2);
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-pill);
	margin-bottom: var(--space-lg);
}

.pricing-toggle button {
	border: 0;
	background: transparent;
	color: var(--c-text-soft);
	font: inherit;
	font-size: 0.9rem;
	font-weight: var(--fw-strong);
	padding: 0.5rem 1rem;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.pricing-toggle button[aria-pressed="true"] {
	background: var(--c-accent);
	color: var(--c-accent-text);
}

/* ---------- Contact ---------- */
.contact-layout {
	display: grid;
	gap: var(--space-xl);
	align-items: start;
}

@media (min-width: 62rem) {
	.contact-layout {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
		gap: var(--space-2xl);
	}
}

.contact-panel {
	display: grid;
	gap: var(--space-md);
}

.contact-item {
	display: flex;
	gap: var(--space-xs);
	align-items: flex-start;
}

.contact-item .icon {
	color: var(--c-accent);
	margin-top: 0.15rem;
}

.contact-item strong {
	display: block;
	font-size: 0.95rem;
}

.contact-item a {
	text-decoration: none;
}

/* ---------- Blog & archives ---------- */
.post-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.post-card__date {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--c-text-muted);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.entry-content {
	max-width: var(--wrap-narrow);
}

/* La présentation garde des lignes courtes, avec deux blocs visuels larges. */
.entry-content--about {
	max-width: none;
}

.entry-content--about > :not(.callout--portrait):not(.expertise-bridge) {
	max-width: var(--wrap-narrow);
}

.entry-content--about > .callout--portrait,
.entry-content--about > .expertise-bridge {
	width: 100%;
	max-width: none;
}

@media (min-width: 64rem) {
	.entry-content--about > .callout--portrait {
		gap: 2rem;
		padding: 2rem;
	}

	.entry-content--about .callout--portrait .portrait {
		width: 14rem;
	}
}

.entry-content > * + * {
	margin-top: var(--space-sm);
}

.entry-content--method {
	max-width: none;
}

.method-row {
	display: grid;
	gap: 1rem;
	padding-block: 2rem;
	border-bottom: 1px solid var(--c-border);
}

.entry-content--method > .method-row { margin-top: 0; }
.method-row:first-child { padding-top: 0; }
.method-row:last-child { padding-bottom: 0; border-bottom: 0; }
.entry-content .method-row__heading h2 { margin: 0; font-size: 1.55rem; }
.method-row__content { min-width: 0; max-width: var(--wrap-narrow); }
.method-row__content > :first-child { margin-top: 0; }
.method-row__content > :last-child { margin-bottom: 0; }

@media (min-width: 64rem) {
	.method-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--wrap-narrow));
		gap: 3rem;
	}
}

.entry-content h2 {
	margin-top: var(--space-lg);
}

.entry-content h3 {
	margin-top: var(--space-md);
}

.entry-content img {
	border-radius: var(--radius-md);
}

.entry-content ul li,
.entry-content ol li {
	color: var(--c-text-soft);
}

/* ---------- Portfolio ---------- */
.portfolio-filters {
	margin-bottom: var(--space-lg);
}

.portfolio-filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.portfolio-filters .button {
	white-space: normal;
	text-align: center;
}

.portfolio-filters li {
	margin: 0;
}

.portfolio-grid {
	display: grid;
	gap: var(--space-lg);
}

@media (min-width: 48rem) {
	.portfolio-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.portfolio-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: top;
	border-radius: var(--radius-sm);
	border: var(--border-width) solid var(--c-border);
}

.portfolio-card__image--banner {
	object-fit: contain;
	object-position: center;
	background: var(--c-bg);
}

.portfolio-card__more {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: auto;
	padding-top: var(--space-sm);
	color: var(--c-accent);
	font-weight: var(--fw-strong);
}

/* Sur un pôle, une réalisation illustrée est distincte du catalogue. */
.pole-project-card {
	display: grid;
	gap: var(--space-lg);
	align-items: center;
}

.pole-project-card__body {
	display: grid;
	gap: var(--space-sm);
	padding: var(--space-sm);
}

.pole-project-card .card__title {
	font-size: var(--fs-h3);
}

.pole-project-card .portfolio-card__more {
	margin-top: 0;
}

@media (min-width: 48rem) {
	.pole-project-card--illustrated {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}
}

.portfolio-gallery {
	display: grid;
	gap: var(--space-lg);
	align-items: start;
}

.portfolio-gallery figure {
	margin: 0;
}

.portfolio-gallery img,
.portfolio-modal__banner img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--border-width) solid var(--c-border-strong);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.portfolio-modal__banner {
	margin: 0 0 var(--space-lg);
}

.portfolio-gallery figcaption {
	margin-top: var(--space-xs);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.portfolio-gallery__mobile {
	width: min(100%, 20rem);
	justify-self: center;
}

@media (min-width: 48rem) {
	.portfolio-gallery {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.3fr);
	}
}

.has-portfolio-modal,
.has-portfolio-modal body {
	overflow: hidden;
}

.portfolio-modal {
	width: min(calc(100% - 2rem), 64rem);
	max-width: none;
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: var(--border-width) solid var(--c-border-strong);
	border-radius: var(--radius-lg);
	background: var(--c-bg);
	color: var(--c-text);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.portfolio-modal[open] {
	display: flex;
	flex-direction: column;
}

.portfolio-modal::backdrop {
	background: color-mix(in srgb, var(--c-contact-text) 75%, transparent);
	backdrop-filter: blur(5px);
}

.portfolio-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-lg);
	border-bottom: var(--border-width) solid var(--c-border);
	flex-shrink: 0;
}

.portfolio-modal__header h2 {
	margin: 0;
	font-size: var(--fs-h3);
}

.portfolio-modal__body {
	padding: var(--space-lg);
	overflow-y: auto;
	overscroll-behavior: contain;
	min-height: 0;
}

.portfolio-modal__content {
	margin-block: var(--space-lg);
}

.portfolio-modal__content h2 {
	font-size: var(--fs-h3);
}

.portfolio-modal__actions {
	align-items: stretch;
}

.portfolio-modal__actions .button {
	min-height: 3rem;
	white-space: normal;
	text-align: center;
}

@media (max-width: 48rem) {
	.portfolio-modal {
		width: calc(100% - 1rem);
		max-height: calc(100dvh - 1rem);
	}
	.portfolio-modal__header,
	.portfolio-modal__body {
		padding: var(--space-sm);
	}
	.portfolio-modal__actions .button {
		width: 100%;
	}
}

/* ---------- Outils gratuits ---------- */
.tool-embed {
	padding: var(--space-lg);
	background: var(--c-surface);
	border: var(--border-width) solid var(--c-border-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.tool-embed .field input,
.tool-embed .field select {
	background: var(--c-bg);
}

.tool-embed--forecast .field {
	align-content: start;
}

.tool-embed--forecast > .form__row + .form__row {
	margin-top: var(--space-sm);
}

.tool-embed--forecast > .field {
	margin-block: var(--space-sm);
}

.forecast-refine {
	border-block: var(--border-width) solid var(--c-border);
	padding-block: var(--space-sm);
	margin-block: var(--space-md);
}

.forecast-refine summary {
	cursor: pointer;
	font-weight: var(--fw-strong);
}

.tool-embed--forecast .field input[type="range"] {
	padding: 0;
	accent-color: var(--c-accent);
}

.tool-embed--forecast output {
	font-family: var(--font-mono);
	color: var(--c-text);
}

.forecast-breakdown {
	margin: var(--space-md) 0 0;
}

.forecast-breakdown > div {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-md);
	padding-block: var(--space-xs);
	border-top: var(--border-width) solid var(--c-border);
}

.forecast-breakdown dd {
	margin: 0;
	font-weight: var(--fw-strong);
	font-variant-numeric: tabular-nums;
}

.forecast-breakdown__cash {
	margin-top: var(--space-sm);
}

.tool-result {
	display: grid;
	gap: 0.35rem;
	margin-top: var(--space-md);
	padding: var(--space-md);
	background: var(--c-accent-soft);
	border: var(--border-width) solid color-mix(in srgb, var(--c-accent) 30%, transparent);
	border-radius: var(--radius-md);
}

.tool-result__value {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
	font-weight: var(--fw-display);
	letter-spacing: var(--tracking-display);
	line-height: 1.05;
	color: var(--c-text);
}

.tool-result__label {
	font-size: 0.88rem;
	color: var(--c-text-muted);
}

/* ---------- Page 404 ---------- */
.error-404 {
	padding-block: var(--space-2xl);
	text-align: center;
}

.error-404__code {
	font-family: var(--font-mono);
	font-size: clamp(3.5rem, 2rem + 8vw, 7rem);
	font-weight: var(--fw-display);
	color: var(--c-accent);
	line-height: 1;
	margin-bottom: var(--space-sm);
}

/* ---------- Bandeau logos / preuve ---------- */
.marquee {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm) var(--space-xl);
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--c-text-muted);
	font-family: var(--font-mono);
	font-size: 0.82rem;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}

.marquee li {
	margin: 0;
}

/* ---------- Bandeau cookies ---------- */
/*
 * Le bandeau dit quelque chose que presque aucun site ne peut dire : il n'y a
 * rien à accepter. Autant que la forme le dise aussi — d'où le filet ambre, le
 * halo repris du héros et la promesse posée en titre plutôt qu'un « Cookies »
 * générique noyé dans un paragraphe.
 */
.cookie-bar {
	position: fixed;
	left: max(1rem, env(safe-area-inset-left));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 190;
	width: min(27rem, calc(100vw - 2rem));
	padding: var(--space-md);
	padding-left: calc(var(--space-md) + 3px);
	background:
		radial-gradient(18rem 12rem at 0% 0%, color-mix(in srgb, var(--c-cta) 7%, transparent), transparent 70%),
		var(--c-surface);
	border: var(--border-width) solid var(--c-border-strong);
	border-left: 3px solid var(--c-cta);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	font-size: 0.9rem;
}

.cookie-bar__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.35rem;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	font-weight: var(--fw-strong);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--c-accent);
}

.cookie-bar__eyebrow .icon {
	width: 1rem;
	height: 1rem;
}

.cookie-bar__claim {
	margin-bottom: var(--space-2xs);
	font-family: var(--font-display);
	font-size: 1.18rem;
	font-weight: var(--fw-display);
	letter-spacing: var(--tracking-display);
	line-height: 1.2;
	color: var(--c-text);
}

.cookie-bar[hidden] {
	display: none;
}

.cookie-bar p {
	margin-bottom: var(--space-xs);
	color: var(--c-text-soft);
	max-width: none;
}

.cookie-bar .cookie-bar__claim {
	color: var(--c-text);
}

/* ---------- Démonstration du héros ----------
   Une facture est lue, les zones utiles se détectent, les champs se
   remplissent. L'état par défaut est l'état final : tout est visible et
   lisible sans une seule animation. effects.css se contente ensuite de
   rejouer la séquence, et seulement si le visiteur ne l'a pas refusée. */
.demo {
	display: grid;
	grid-template-columns: 8.75rem 1fr;
	gap: var(--space-sm);
	align-items: start;
}

.demo__page {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.demo__sheet {
	fill: var(--c-bg);
	stroke: var(--c-border-strong);
	stroke-width: 1;
}

/* Le faux texte du document : il ne doit jamais être pris pour du contenu,
   d'où des barres et non des lettres. */
.demo__ink rect {
	fill: var(--c-text);
	opacity: 0.16;
}

.demo__zone {
	fill: color-mix(in srgb, var(--c-cta) 16%, transparent);
	stroke: var(--c-cta);
	stroke-width: 1.5;
	transform-box: fill-box;
	transform-origin: center;
}

.demo__scan {
	fill: var(--c-cta);
	opacity: 0;
}

.demo__fields {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.demo__field {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0 0.5rem;
	padding: 0.4rem 0.55rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-surface-2);
}

.demo__key {
	grid-column: 1;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.demo__val {
	grid-column: 1;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	color: var(--c-text);
	overflow-wrap: anywhere;
}

.demo__score {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--c-cta);
}

.demo__summary {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0.2rem 0 0;
	font-size: 0.78rem;
	color: var(--c-text-muted);
}

.demo__summary-dot {
	width: 0.45rem;
	height: 0.45rem;
	flex: none;
	border-radius: 50%;
	background: var(--c-success, var(--c-cta));
}

/* Sous 30rem le document vole la place au texte extrait, qui porte le sens. */
@media (max-width: 30rem) {
	.demo {
		grid-template-columns: 6.5rem 1fr;
	}

	.demo__val {
		font-size: 0.76rem;
	}
}

/* ---------- Bandeau d'article ----------
   Image livrée avec le thème (assets/covers/), en 1200 × 630. Le rapport est
   réservé avant le chargement : un bandeau de cette taille qui apparaît d'un
   coup pousserait tout le texte vers le bas. */
.article-cover {
	margin: 0 0 var(--space-lg);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: var(--border-width) solid var(--c-border);
}

.article-cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 630;
}

/* Toutes les listes des démonstrations espacent par « gap ». La marge de prose
   de base.css — « li + li { margin-top: 0.35em } » — s'y ajoutait en double, et
   surtout : dans une grille étirée, elle ampute la hauteur des éléments qui la
   portent. Le premier n'en ayant pas, il paraissait plus grand que ses voisins.
   C'était le cas de la chaîne de mise en ligne. */
.demo li + li {
	margin-top: 0;
}

/* ---------- Démonstrations de pôle ----------
   Même règle que le panneau du héros : ce qui est écrit ici est l'état final.
   Tout est lisible sans une seule animation ; effects.css ne fait que rejouer
   la séquence pour qui ne l'a pas refusée. */

.demo-showcase {
	max-width: 44rem;
}

.demo-panel .demo {
	grid-template-columns: 1fr;
}

/* --- Prévision et intervalle --- */
.demo-prevision__chart {
	min-width: 0;
}

.demo-prevision__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;

	/* Sans plafond, le graphique s'étire avec la colonne et devient la plus
	   haute des cinq démonstrations. Comme le panneau prend la hauteur de la
	   plus grande, c'est lui qui creusait un vide sous les autres. */
	max-height: 11rem;
}

.demo-prevision__grid line {
	stroke: var(--c-border);
	stroke-width: 1;
}

.demo-prevision__split {
	stroke: var(--c-border-strong);
	stroke-width: 1;
	stroke-dasharray: 3 4;
}

/* La bande d'incertitude : franche mais discrète, elle ne doit pas se lire
   comme une deuxième courbe. */
.demo-prevision__band {
	fill: color-mix(in srgb, var(--c-cta) 20%, transparent);
	transform-box: fill-box;
	transform-origin: left center;
}

.demo-prevision__past,
.demo-prevision__future {
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.demo-prevision__past {
	stroke: var(--c-text-soft);
}

.demo-prevision__future {
	stroke: var(--c-cta);
	stroke-dasharray: 5 4;
}

.demo-prevision__dots circle {
	fill: var(--c-cta);
}

.demo-prevision__pm {
	color: var(--c-text-muted);
}

.demo--prevision .demo__fields {
	grid-template-columns: repeat(3, 1fr);
}

/* --- Core Web Vitals --- */
.demo-vitals {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.demo-vitals__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.15rem 0.6rem;
	padding: 0.5rem 0.6rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-surface-2);
}

.demo-vitals__sigle {
	grid-row: 1 / span 2;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: var(--fw-strong);
	color: var(--c-text);
	padding: 0.1rem 0.35rem;
	border-radius: var(--radius-xs);
	background: var(--c-alt-surface-2, var(--c-surface));
	border: var(--border-width) solid var(--c-border);
}

.demo-vitals__nom {
	font-size: 0.74rem;
	color: var(--c-text-muted);
}

.demo-vitals__valeurs {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	white-space: nowrap;
}

.demo-vitals__avant {
	color: var(--c-danger);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.demo-vitals__fleche,
.demo-vitals__apres {
	color: var(--c-success);
}

.demo-vitals__piste {
	grid-column: 2 / -1;
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--c-text) 12%, transparent);
	overflow: hidden;
}

/* Le seuil « bon » de Google : sans lui, la barre ne dit pas si c'est réussi. */
.demo-vitals__seuil {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 38%;
	width: 1px;
	background: var(--c-border-strong);
}

.demo-vitals__jauge {
	position: absolute;
	inset: 0 auto 0 0;
	width: 26%;
	border-radius: 999px;
	background: var(--c-success);
}

/* --- Maquette et intégration ---
   Le sélecteur reprend « .demo-panel » : sans lui, il pèse moins que la règle
   générique du panneau juste au-dessus, et la maquette s'étalait sur toute la
   largeur au lieu de tenir sa colonne. */
.demo-panel .demo--maquette {
	grid-template-columns: 8.75rem 1fr;
}

@media (max-width: 34rem) {
	.demo-panel .demo--maquette {
		grid-template-columns: 1fr;
	}
}

.demo-maquette__svg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
}

.demo-maquette__bloc {
	fill: color-mix(in srgb, var(--c-cta) 14%, transparent);
	stroke: var(--c-cta);
	stroke-width: 1.4;
}

.demo-maquette__ink rect {
	fill: var(--c-text);
	opacity: 0.18;
}

.demo-maquette__code {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ligne;
}

.demo-maquette__ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.5rem;
	padding: 0.35rem 0.55rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-surface-2);
}

.demo-maquette__ligne::before {
	counter-increment: ligne;
	content: counter(ligne);
	font-family: var(--font-mono);
	font-size: 0.66rem;
	color: var(--c-text-muted);
	flex: none;
}

.demo-maquette__tag {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--c-cta);

	/* « anywhere » coupait au milieu des mots — « heade / r » — dès que la
	   colonne se resserrait. La ligne se replie désormais, et la balise reste
	   entière. */
	overflow-wrap: break-word;
}

.demo-maquette__note {
	margin-left: auto;
	font-size: 0.7rem;
	color: var(--c-text-muted);
	text-align: right;
}

/* ---------- Rotation des démonstrations du héros ----------
   Les cinq panneaux occupent la même cellule de grille : le conteneur prend la
   hauteur du plus grand, donc rien ne saute d'une démonstration à l'autre.

   État par défaut — celui de l'impression, d'un navigateur sans animation et de
   qui a demandé moins de mouvement : seul le premier panneau existe. Empiler
   cinq panneaux visibles serait illisible, et c'est exactement ce qui arriverait
   si la rotation ne tenait qu'à l'animation. */
/*
 * Le carrousel ne doit jamais imposer sa largeur à la grille qui l'accueille.
 * Une piste « 1fr » ne descend pas sous la largeur minimale de son contenu :
 * sans ces deux garde-fous, le composant réclamait 380 px dans une colonne de
 * 338, et tout le héros débordait — masqué par l'« overflow-x: hidden » du
 * corps, donc invisible au défilement mais bien coupé à droite.
 */
.hero-rotation {
	min-width: 0;
}

.hero-rotation__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	min-width: 0;
}

.hero-rotation__item {
	grid-area: 1 / 1;
	display: none;
	min-width: 0;
}

.hero-rotation__item--1 {
	display: grid;
}

/* Le panneau occupe toute la cellule, quelle que soit la démonstration qu'il
   contient. Sans ça, la « console » se rétractait sur les démonstrations les
   plus courtes : la mise en page ne bougeait pas, mais le cadre lui-même
   changeait de taille à chaque rotation, ce qui se voit beaucoup. */
@media (max-width: 48rem) {
	/*
	 * Sur mobile, les panneaux ne s'empilent plus : une démonstration qui passe
	 * en une colonne fait sept cents pixels de haut, une autre cent trente. La
	 * cellule commune réservait la hauteur de la plus grande, et les courtes
	 * flottaient au milieu de six cents pixels de vide.
	 *
	 * Un seul panneau occupe donc la place, et le cadre suit sa hauteur. On perd
	 * le fondu entre deux démonstrations — « display » ne s'anime pas — mais un
	 * fondu ne vaut pas un écran à moitié vide.
	 */
	.hero-rotation__item {
		display: none;
	}

	.hero-rotation__item--1 {
		display: grid;
	}

	:root[data-kiaros-carousel] .hero-rotation__item.is-active {
		display: grid;
	}

	.hero-rotation__item > .hero__panel {
		min-height: 0;
	}

	.hero-rotation__item .hero__panel-body {
		align-content: start;
	}
}

.hero-rotation__item > .hero__panel {
	min-height: 100%;

	/* La barre de titre garde sa hauteur, le corps prend tout le reste. Sans
	   cette répartition, le corps gardait sa hauteur naturelle et le centrage
	   ci-dessous n'avait rien à centrer. */
	display: grid;
	grid-template-rows: auto 1fr;
}

/* Vingt-cinq démonstrations de tailles très différentes dans un cadre de
   hauteur fixe : le contenu se centre plutôt que de tomber en haut. Le vide
   se répartit alors des deux côtés et se lit comme un cadrage, non comme une
   moitié de panneau qui manque. */
.hero-rotation__item .hero__panel-body {
	align-content: center;
}

/* Le panneau du héros retrouve ses deux colonnes : la règle générique du
   composant les réduit à une seule, et elle pèse plus lourd que « .demo ». */
.demo-panel .demo--extraction {
	grid-template-columns: 8.75rem 1fr;
}

@media (max-width: 34rem) {
	.demo-panel .demo--extraction {
		grid-template-columns: 1fr;
	}
}

/* ---------- Commandes du carrousel ----------
   Rendues visibles par main.js seulement : sans lui elles ne commanderaient
   rien, et le CSS fait défiler les panneaux tout seul.

   Les règles d'affichage sont hors de toute requête de mouvement : même avec
   « prefers-reduced-motion », on doit pouvoir choisir une démonstration à la
   main. C'est justement là que les onglets servent le plus. */
.hero-rotation__controls[hidden] {
	display: none;
}

.hero-rotation__controls {
	display: grid;
	gap: var(--space-2xs);
	margin-top: var(--space-xs);
}

.hero-rotation__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.hero-rotation__tab {
	font: inherit;
	font-size: 0.76rem;
	line-height: 1.2;
	padding: 0.3rem 0.6rem;
	border: var(--border-width) solid var(--c-border-strong);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--c-text-muted);
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.hero-rotation__tab:hover {
	color: var(--c-text);
	border-color: var(--c-text-muted);
}

.hero-rotation__tab[aria-selected="true"] {
	color: var(--c-cta-text);
	background: var(--c-cta);
	border-color: var(--c-cta);
}

.hero-rotation__transport {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

/* La progression du créneau courant : elle dit combien de temps il reste avant
   la démonstration suivante, ce qu'une pastille active ne dit pas. */
.hero-rotation__progress {
	flex: 1;
	height: 3px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--c-text) 14%, transparent);
	overflow: hidden;
}

.hero-rotation__progress-fill {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: 999px;
	background: var(--c-cta);
	transform-origin: left center;
	transform: scaleX(0);
}

.hero-rotation__pause {
	font: inherit;
	font-size: 0.72rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.5rem;
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-xs);
	background: transparent;
	color: var(--c-text-muted);
	cursor: pointer;
	flex: none;
}

.hero-rotation__pause:hover {
	color: var(--c-text);
}

/* Deux barres verticales, puis un triangle une fois en pause : dessiné en CSS
   plutôt qu'en SVG, il n'y a rien à charger pour deux formes aussi simples. */
.hero-rotation__icone {
	width: 0.6rem;
	height: 0.7rem;
	flex: none;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.hero-rotation__pause[aria-pressed="true"] .hero-rotation__icone {
	width: 0;
	height: 0;
	border-left: 0.6rem solid currentColor;
	border-right: 0;
	border-top: 0.36rem solid transparent;
	border-bottom: 0.36rem solid transparent;
}

/* ---------- Le script a pris la main ----------
   Dès que main.js pilote le carrousel, ce n'est plus l'animation CSS qui
   décide lequel des panneaux se voit, mais la classe « is-active ». */
:root[data-kiaros-carousel] .hero-rotation__item {
	display: grid;
	opacity: 0;
	visibility: hidden;
}

:root[data-kiaros-carousel] .hero-rotation__item.is-active {
	opacity: 1;
	visibility: visible;
}

/* ---------- Dix démonstrations de plus ----------
   Même règle que les précédentes : ce qui est écrit ici est l'état final,
   lisible sans une seule animation. Le vocabulaire est mutualisé au maximum —
   la pastille, la liste de résultats, la colonne visuelle — pour qu'une
   démonstration supplémentaire ne coûte presque aucune feuille de style. */

/* La pastille, partagée par la moitié des démonstrations. */
.demo-chip {
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.04em;
	padding: 0.14rem 0.4rem;
	border-radius: var(--radius-xs);
	border: var(--border-width) solid currentColor;
	white-space: nowrap;
	flex: none;
}

.demo-chip--urgent { color: var(--c-danger); }
.demo-chip--normal { color: var(--c-text-muted); }
.demo-chip--faible { color: var(--c-text-muted); opacity: 0.75; }
.demo-chip--source { color: var(--c-accent); }
.demo-chip--bloque { color: var(--c-success); }
.demo-chip--garde  { color: var(--c-text-muted); }
.demo-chip--verbe  { color: var(--c-cta); }
.demo-chip--ok     { color: var(--c-success); }

/* Les deux démonstrations qui gardent une colonne visuelle à gauche. */
.demo-panel .demo--courrier,
.demo-panel .demo--vision {
	grid-template-columns: 8.75rem 1fr;
}

@media (max-width: 34rem) {
	.demo-panel .demo--courrier,
	.demo-panel .demo--vision {
		grid-template-columns: 1fr;
	}
}

/* --- Tri du courrier --- */
.demo-courrier__svg,
.demo-vision__svg,
.demo-monitoring__svg {
	display: block;
	width: 100%;
	height: auto;
}

.demo-courrier__pli {
	fill: var(--c-surface-2);
	stroke: var(--c-border-strong);
	stroke-width: 1.4;
	transform-box: fill-box;
	transform-origin: center;
}

.demo-courrier__corbeilles rect {
	fill: none;
	stroke: var(--c-cta);
	stroke-width: 1.6;
}

.demo-courrier__etiquettes rect {
	fill: var(--c-text);
	opacity: 0.24;
}

/* --- Tickets --- */
.demo-tickets,
.demo-rgpd,
.demo-api {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.demo-tickets__item,
.demo-rgpd__item,
.demo-api__ligne {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.55rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-surface-2);
	font-size: 0.78rem;
}

.demo-tickets__sujet,
.demo-rgpd__nom {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.demo-tickets__item .demo-chip,
.demo-rgpd__item .demo-chip {
	margin-left: auto;
}

.demo-rgpd__bilan {
	margin: 0.2rem 0 0;
	font-size: 0.76rem;
	color: var(--c-text-muted);
}

/* --- Recherche --- */
.demo-requete {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.45rem 0.6rem;
	border: var(--border-width) solid var(--c-border-strong);
	border-radius: var(--radius-pill);
	background: var(--c-surface-2);
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--c-text);
}

.demo-requete__icone .icon {
	width: 1rem;
	height: 1rem;
	color: var(--c-text-muted);
}

/* --- Assistant --- */
.demo-dialogue {
	display: grid;
	gap: 0.45rem;
}

.demo-dialogue__bulle {
	margin: 0;
	padding: 0.5rem 0.7rem;
	border-radius: var(--radius-md);
	font-size: 0.8rem;
	line-height: 1.45;
}

.demo-dialogue__bulle--question {
	justify-self: end;
	max-width: 88%;
	background: var(--c-surface-2);
	border: var(--border-width) solid var(--c-border);
	color: var(--c-text-muted);
}

.demo-dialogue__bulle--reponse {
	max-width: 94%;
	background: color-mix(in srgb, var(--c-cta) 12%, transparent);
	border: var(--border-width) solid color-mix(in srgb, var(--c-cta) 38%, transparent);
	color: var(--c-text);
}

.demo-dialogue__sources {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0;
}

/* --- Vision --- */
.demo-vision__fond {
	fill: var(--c-bg);
	stroke: var(--c-border-strong);
	stroke-width: 1;
}

.demo-vision__pieces circle {
	fill: var(--c-text);
	opacity: 0.14;
}

/* --- Scoring --- */
.demo-scoring {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.demo-scoring__item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.78rem;
}

.demo-scoring__nom {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--c-text-muted);
}

.demo-scoring__piste {
	height: 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--c-text) 12%, transparent);
	overflow: hidden;
}

.demo-scoring__barre {
	display: block;
	height: 100%;
	width: var(--part, 50%);
	border-radius: 999px;
	transform-origin: left center;
}

.demo-scoring__barre--haut  { background: var(--c-cta); }
.demo-scoring__barre--moyen { background: var(--c-accent); }
.demo-scoring__barre--bas   { background: var(--c-border-strong); }

.demo-scoring__valeur {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
}

/* --- Recommandation --- */
.demo-reco__depart {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.45rem 0.55rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-surface-2);
	font-size: 0.82rem;
}

.demo-reco__vignette {
	width: 2rem;
	height: 2rem;
	flex: none;
	border-radius: var(--radius-xs);
	background: color-mix(in srgb, var(--c-cta) 22%, transparent);
	border: var(--border-width) solid color-mix(in srgb, var(--c-cta) 45%, transparent);
}

.demo-reco__note {
	display: block;
	font-size: 0.72rem;
	color: var(--c-text-muted);
}

/* --- Supervision --- */
.demo-monitoring__ligne {
	fill: none;
	stroke: var(--c-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.demo-monitoring__pic {
	fill: var(--c-danger);
}

/* --- API --- */
.demo-api__ligne code {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	color: var(--c-text);
	overflow-wrap: anywhere;
}

.demo-api__mesure {
	margin: 0.2rem 0 0;
	font-size: 0.76rem;
	color: var(--c-text-muted);
}

/* ---------- Troisième lot de démonstrations ----------
   Même règle : l'état écrit ici est l'état final, lisible sans animation. */

/* --- Tournées : le tracé optimisé est l'état de repos, le brouillon
       n'existe que le temps de l'animation. --- */
.demo-tournees__svg,
.demo-seo__svg {
	display: block;
	width: 100%;
	height: auto;

	/* Ces deux-là sont les plus hautes des vingt-cinq, et le panneau du héros
	   prend la hauteur de la plus grande : les resserrer réduit le vide sous
	   toutes les autres. */
	max-height: 8.5rem;
}

.demo-tournees__brouillon,
.demo-tournees__optimise {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.demo-tournees__brouillon {
	stroke: var(--c-danger);
	stroke-width: 1.6;
	opacity: 0;
}

.demo-tournees__optimise {
	stroke: var(--c-cta);
	stroke-width: 2.4;
}

.demo-tournees__arrets circle {
	fill: var(--c-bg);
	stroke: var(--c-cta);
	stroke-width: 2;
}

.demo-tournees__arrets circle:first-child {
	fill: var(--c-cta);
}

/* --- Système de design : un seul jeton, six composants.
       Déclaré via @property pour qu'une couleur puisse s'interpoler ; sans ça
       elle sauterait d'une valeur à l'autre au lieu de fondre. --- */
@property --demo-ds-accent {
	syntax: "<color>";
	inherits: true;
	initial-value: #ffb020;
}

.demo-ds {
	--demo-ds-accent: var(--c-cta);

	display: grid;
	gap: var(--space-xs);
}

.demo-ds__jeton {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	color: var(--c-text-muted);
}

.demo-ds__pastille {
	width: 0.9rem;
	height: 0.9rem;
	border-radius: var(--radius-xs);
	background: var(--demo-ds-accent);
	border: var(--border-width) solid var(--c-border-strong);
}

.demo-ds__grille {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	font-size: 0.76rem;
}

.demo-ds__bouton {
	padding: 0.3rem 0.7rem;
	border-radius: var(--radius-pill);
	background: var(--demo-ds-accent);
	color: var(--c-cta-text);
	font-weight: var(--fw-strong);
}

.demo-ds__badge {
	padding: 0.16rem 0.45rem;
	border-radius: var(--radius-xs);
	border: var(--border-width) solid var(--demo-ds-accent);
	color: var(--demo-ds-accent);
	font-family: var(--font-mono);
	font-size: 0.66rem;
}

.demo-ds__lien {
	color: var(--demo-ds-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.demo-ds__champ {
	padding: 0.28rem 0.6rem;
	border-radius: var(--radius-sm);
	border: var(--border-width) solid var(--demo-ds-accent);
	color: var(--c-text-muted);
	background: var(--c-surface-2);
}

.demo-ds__alerte {
	padding: 0.26rem 0.55rem;
	border-radius: var(--radius-sm);
	border-left: 3px solid var(--demo-ds-accent);
	background: color-mix(in srgb, var(--c-text) 6%, transparent);
	color: var(--c-text);
}

.demo-ds__carte {
	padding: 0.3rem 0.7rem;
	border-radius: var(--radius-sm);
	border: var(--border-width) solid var(--c-border);
	border-top: 3px solid var(--demo-ds-accent);
	background: var(--c-surface-2);
	color: var(--c-text-muted);
}

.demo-ds__note {
	margin: 0;
	font-size: 0.74rem;
	color: var(--c-text-muted);
}

/* --- Analyse : un tableau qui se range --- */
.demo-analyse {
	display: grid;
	gap: 0.25rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
}

.demo-analyse__ligne {
	display: grid;
	grid-template-columns: 5rem 1fr 5.5rem;
	gap: 0.4rem;
	padding: 0.28rem 0.45rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-xs);
	background: var(--c-surface-2);
	color: var(--c-text-muted);
}

.demo-analyse__cel {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.demo-analyse__cel--corrige {
	color: var(--c-success);
}

/* Le doublon est replié : c'est son état final, il n'existe qu'en animation. */
.demo-analyse__ligne--doublon {
	display: none;
}

/* --- Tests --- */
.demo-tests {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.demo-tests__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.55rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-surface-2);
	font-size: 0.78rem;
}

.demo-tests__marque {
	width: 0.9rem;
	height: 0.9rem;
	flex: none;
	border-radius: 50%;
	position: relative;
}

.demo-tests__marque--ok { background: var(--c-success); }
.demo-tests__marque--ko { background: var(--c-danger); }

.demo-tests__marque--ok::after {
	content: "";
	/* Garder la place des deux branches en plus des bordures de la coche. */
	box-sizing: content-box;
	position: absolute;
	left: 50%;
	top: 44%;
	width: 0.3rem;
	height: 0.15rem;
	border-left: 2px solid var(--c-bg);
	border-bottom: 2px solid var(--c-bg);
	transform: translate(-50%, -50%) rotate(-45deg);
}

.demo-tests__nom { flex: 1; min-width: 0; }

.demo-tests__duree {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--c-text-muted);
}

.demo-tests__item--3 .demo-tests__duree { color: var(--c-danger); }

.demo-tests__bilan,
.demo-audit__detail {
	margin: 0.2rem 0 0;
	font-size: 0.76rem;
	color: var(--c-text-muted);
}

/* --- Mise en ligne --- */
.demo-deploiement {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.demo-deploiement__etage {
	display: grid;
	justify-items: center;
	gap: 0.3rem;
	padding: 0.5rem 0.2rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-surface-2);
	font-size: 0.68rem;
	color: var(--c-text-muted);
	text-align: center;
}

.demo-deploiement__voyant {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--c-success);
}

/* --- Tableaux de bord --- */
.demo-tableaux {
	display: grid;
	gap: var(--space-2xs);
}

.demo-tableaux__sources {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0;
}

.demo-tableaux__tuiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.35rem;
}

.demo-tableaux__tuile {
	display: grid;
	gap: 0.1rem;
	padding: 0.45rem 0.5rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-surface-2);
	font-size: 0.66rem;
	color: var(--c-text-muted);
}

.demo-tableaux__tuile strong {
	font-size: 0.98rem;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
}

.demo-tableaux__barres {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: end;
	gap: 0.3rem;
	height: 3.2rem;
}

.demo-tableaux__barres span {
	display: block;
	height: var(--h, 50%);
	border-radius: var(--radius-xs) var(--radius-xs) 0 0;
	background: color-mix(in srgb, var(--c-cta) 65%, transparent);
	transform-origin: bottom center;
}

/* --- Silos SEO --- */
.demo-seo__lien {
	fill: none;
	stroke: var(--c-border-strong);
	stroke-width: 1.4;
}

.demo-seo__noeud {
	fill: var(--c-surface-2);
	stroke: var(--c-cta);
	stroke-width: 1.4;
}

.demo-seo__noeud--racine {
	fill: color-mix(in srgb, var(--c-cta) 24%, transparent);
}

/* --- Audit --- */
.demo-audit {
	display: grid;
	gap: 0.5rem;
}

.demo-audit__tache {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-size: 0.82rem;
}

.demo-audit__minuteur .icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--c-cta);
}

.demo-audit__detail {
	display: block;
}

.demo-audit__piste {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--c-text) 12%, transparent);
	overflow: hidden;
}

.demo-audit__jauge {
	display: block;
	height: 100%;
	width: 78%;
	border-radius: 999px;
	background: var(--c-cta);
	transform-origin: left center;
}

/* --- Extension de navigateur --- */
.demo-extension {
	display: grid;
	gap: 0.4rem;
}

.demo-extension__barre {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.5rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-pill);
	background: var(--c-surface-2);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--c-text-muted);
}

.demo-extension__url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.demo-extension__icone {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	display: grid;
	place-content: center;
	border-radius: var(--radius-xs);
	background: var(--c-cta);
	color: var(--c-cta-text);
	font-size: 0.66rem;
	font-weight: var(--fw-display);
}

.demo-extension__panneau {
	padding: 0.5rem 0.55rem;
	border: var(--border-width) solid color-mix(in srgb, var(--c-cta) 40%, transparent);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--c-cta) 8%, transparent);
}

.demo-extension__titre {
	margin: 0 0 0.4rem;
	font-size: 0.76rem;
	font-weight: var(--fw-strong);
}

/* ---------- La démonstration d'une prestation, sur sa propre page ---------- */
.service-demo {
	margin-top: var(--space-lg);
	max-width: 34rem;
}

/* ---------- Sélecteur du carrousel ----------
   Vingt-cinq démonstrations : la liste d'onglets a laissé place à un menu
   déroulant natif, groupé par pôle. Il tient sur une ligne, se manipule au
   clavier et au doigt sans code, et ne dépend d'aucune bibliothèque. */
/*
 * Toute la rangée doit pouvoir descendre sous la largeur de son contenu. Le
 * menu déroulant natif se dimensionne sur son option la plus longue — plus de
 * trois cents pixels — et, sans « min-width: 0 » à chaque étage, cette largeur
 * remontait jusqu'à la grille du héros. Une option trop longue est tronquée par
 * le navigateur, ce qui est le comportement attendu d'un select.
 */
.hero-rotation__controls,
.hero-rotation__picker,
.hero-rotation__transport {
	min-width: 0;
}

.hero-rotation__picker {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.hero-rotation__select {
	/* base nulle : la largeur vient de l'espace disponible, jamais du contenu */
	flex: 1 1 0;
	min-width: 0;
	font: inherit;
	font-size: 0.78rem;
	padding: 0.32rem 0.6rem;
	border: var(--border-width) solid var(--c-border-strong);
	border-radius: var(--radius-sm);
	background: var(--c-surface-2);
	color: var(--c-text);
	cursor: pointer;
}

/*
 * La liste déroulante elle-même est dessinée par le système, hors de la page :
 * elle n'hérite ni du fond du thème, ni de sa notion de clair ou de sombre.
 * Sans couleur posée explicitement sur les options, elles reprenaient le blanc
 * cassé du texte sombre et s'affichaient blanc sur blanc — illisibles.
 *
 * Les deux propriétés vont ensemble : donner l'une sans l'autre revient à
 * parier sur la couleur que le système choisira pour la seconde.
 */
.hero-rotation__select option,
.hero-rotation__select optgroup {
	/*
	 * Impérativement une couleur opaque. Le héros réécrit la palette locale en
	 * bande, où « --c-surface » vaut un noir translucide : posé sur une liste
	 * que le système compose au-dessus de son propre fond clair, il donnait un
	 * gris pâle, et le texte clair du thème devenait illisible dessus.
	 *
	 * Les jetons « --c-alt-* » décrivent justement la bande d'encre, opaque
	 * dans les deux palettes : ils donnent le même contraste des deux côtés.
	 */
	background-color: var(--c-alt-page);
	color: var(--c-alt-text);
}

.hero-rotation__select optgroup {
	color: var(--c-alt-text-muted);
	font-style: normal;
	font-weight: var(--fw-strong);
}

.hero-rotation__fleche {
	font: inherit;
	line-height: 1;
	flex: none;
	width: 1.85rem;
	height: 1.85rem;
	display: grid;
	place-content: center;
	border: var(--border-width) solid var(--c-border-strong);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--c-text-muted);
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition);
}

.hero-rotation__fleche:hover {
	color: var(--c-text);
	border-color: var(--c-text-muted);
}

.hero-rotation__rang {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	color: var(--c-text-muted);
	font-variant-numeric: tabular-nums;
	flex: none;
}

/* ---------- Pôle gamification ----------
   Quatre démonstrations, et une règle de plus que d'habitude : elles doivent
   éviter le vocabulaire que le pôle passe ses pages à démonter — points,
   classements, badges. D'où des courbes, un entonnoir, un échec, et un jeu qui
   reste dans la charte au lieu de virer au criard. */

/* --- Mise en situation : essayé, raté, réussi --- */
.demo-scenario {
	display: grid;
	gap: 0.5rem;
}

.demo-scenario__situation {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0.5rem 0.65rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-surface-2);
	font-size: 0.8rem;
	line-height: 1.45;
}

.demo-scenario__rang {
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.demo-scenario__choix {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.demo-scenario__reponse {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.55rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-sm);
	font-size: 0.78rem;
}

.demo-scenario__reponse > span:nth-child(2) {
	flex: 1;
	min-width: 0;
}

.demo-scenario__lettre {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	display: grid;
	place-content: center;
	border-radius: var(--radius-xs);
	background: var(--c-surface-2);
	border: var(--border-width) solid var(--c-border-strong);
	font-family: var(--font-mono);
	font-size: 0.68rem;
}

.demo-scenario__reponse--bonne {
	border-color: color-mix(in srgb, var(--c-success) 55%, transparent);
	background: color-mix(in srgb, var(--c-success) 10%, transparent);
}

/* La fausse piste et sa conséquence n'existent que pendant la séquence : au
   repos, seule la bonne réponse est marquée. */
.demo-scenario__reponse--fausse,
.demo-scenario__consequence {
	display: none;
}

.demo-scenario__lecon {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	margin: 0;
	font-size: 0.78rem;
	color: var(--c-text-muted);
}

.demo-scenario__essai {
	flex: none;
	font-family: var(--font-mono);
	font-size: 0.64rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.12rem 0.4rem;
	border-radius: var(--radius-xs);
	border: var(--border-width) solid var(--c-cta);
	color: var(--c-cta);
}

/* --- Mini-jeu : des effets, mais dans la charte ---
   L'état de repos est la scène d'après : l'ennemi détruit, la barre de vie
   vide, le score final. Balles, étincelles et gerbe n'existent que pendant la
   séquence, et rien ici ne dépend d'une animation pour rester lisible. */
.demo-arcade {
	display: grid;
	gap: var(--space-2xs);
}

.demo-arcade__svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 9.5rem;
	border-radius: var(--radius-sm);
}

.demo-arcade__fond {
	fill: var(--c-alt-page);
}

.demo-arcade__etoiles circle {
	fill: var(--c-alt-text);
	opacity: 0.3;
}

/* Les deux arrêts du dégradé : déclarés en CSS pour rester dans la palette,
   un dégradé SVG n'ayant pas de couleur propre. */
.demo-arcade__stop--vif { stop-color: var(--c-cta); stop-opacity: 0.9; }
.demo-arcade__stop--nul { stop-color: var(--c-cta); stop-opacity: 0; }

/* --- L'ennemi --- */
.demo-arcade__ennemi {
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
}

.demo-arcade__coque {
	fill: color-mix(in srgb, var(--c-cta) 22%, transparent);
	stroke: var(--c-cta);
	stroke-width: 2;
}

.demo-arcade__noyau {
	fill: var(--c-cta);
}

.demo-arcade__anneau {
	fill: none;
	stroke: var(--c-cta);
	stroke-width: 1.4;
	stroke-dasharray: 6 9;
	opacity: 0.6;
}

.demo-arcade__halo { opacity: 0; }

/* --- La barre de vie --- */
.demo-arcade__vie-fond {
	fill: var(--c-alt-text);
	opacity: 0.18;
}

.demo-arcade__vie-jauge {
	fill: var(--c-cta);
	transform-box: fill-box;
	transform-origin: left center;
	transform: scaleX(0);
}

.demo-arcade__vie { opacity: 0; }

/* --- Tirs, impacts, gerbe --- */
.demo-arcade__balle,
.demo-arcade__trainee,
.demo-arcade__etincelle,
.demo-arcade__eclat,
.demo-arcade__onde,
.demo-arcade__flash {
	opacity: 0;
}

.demo-arcade__balle { fill: var(--c-cta); }

.demo-arcade__trainee { fill: var(--c-cta); }

.demo-arcade__etincelle,
.demo-arcade__eclat {
	fill: var(--c-cta);
	transform-box: fill-box;
	transform-origin: center;
}

.demo-arcade__onde {
	fill: none;
	stroke: var(--c-cta);
	stroke-width: 2;
	transform-box: fill-box;
	transform-origin: center;
}

/* --- Le vaisseau --- */
.demo-arcade__joueur {
	fill: var(--c-alt-text);
}

.demo-arcade__reacteur {
	fill: var(--c-cta);
	opacity: 0.5;
	transform-box: fill-box;
	transform-origin: center;
}

/* L'éclair de bouche : posé sur la pointe, dessiné après la coque. C'est lui
   qui rattache le projectile au vaisseau — sans lui, une balle qui démarre au
   bon endroit paraît quand même surgir de nulle part. */
.demo-arcade__bouche {
	fill: var(--c-cta);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: left center;
}

.demo-arcade__vaisseau {
	transform-box: fill-box;
	transform-origin: center;
}

/* --- Le tableau de bord --- */
.demo-arcade__hud {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 0.4rem 0.6rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-surface-2);
}

.demo-arcade__jauge {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex: 1;
	min-width: 0;
}

.demo-arcade__label {
	font-family: var(--font-mono);
	font-size: 0.64rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

/* Les sept valeurs occupent la même case : le score change sans que la ligne
   bouge d'un pixel. */
.demo-arcade__scores {
	display: grid;
	justify-items: start;
}

.demo-arcade__score {
	grid-area: 1 / 1;
	font-family: var(--font-mono);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	color: var(--c-cta);
	opacity: 0;
	white-space: nowrap;
}

.demo-arcade__score--6 { opacity: 1; }

.demo-arcade__combos {
	display: grid;
	justify-items: end;
	flex: none;
}

.demo-arcade__combo {
	grid-area: 1 / 1;
	font-family: var(--font-mono);
	font-size: 0.76rem;
	padding: 0.1rem 0.4rem;
	border-radius: var(--radius-xs);
	border: var(--border-width) solid var(--c-cta);
	color: var(--c-cta);
	opacity: 0;
	transform-origin: center;
}

.demo-arcade__combo--3 { opacity: 1; }

/* --- Entonnoir d'activation --- */
.demo-activation {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.demo-activation__etape {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.2rem 0.5rem;
	font-size: 0.76rem;
}

.demo-activation__nom {
	color: var(--c-text-muted);
}

.demo-activation__piste {
	grid-column: 1 / -1;
	position: relative;
	height: 12px;
	border-radius: var(--radius-xs);
	background: color-mix(in srgb, var(--c-text) 10%, transparent);
	overflow: hidden;
}

.demo-activation__avant,
.demo-activation__apres {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--part, 50%);
	border-radius: var(--radius-xs);
}

.demo-activation__avant {
	background: color-mix(in srgb, var(--c-text) 26%, transparent);
}

.demo-activation__apres {
	background: var(--c-cta);
	transform-origin: left center;
}

.demo-activation__chiffres {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
}

.demo-activation__vieux {
	color: var(--c-text-muted);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.demo-activation__neuf {
	color: var(--c-cta);
}

/* --- Taux de complétion --- */
.demo-completion__svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 8.5rem;
}

.demo-completion__grille line {
	stroke: var(--c-border);
	stroke-width: 1;
}

.demo-completion__avant,
.demo-completion__apres {
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.demo-completion__avant {
	stroke: var(--c-text-muted);
	stroke-dasharray: 4 4;
}

.demo-completion__apres {
	stroke: var(--c-cta);
}

.demo-completion__fin--avant { fill: var(--c-text-muted); }
.demo-completion__fin--apres { fill: var(--c-cta); }

/* --- Création de site : la mise en page qui se replie ---
   Le cadre est un conteneur de requête : la maquette qu'il contient se
   réorganise parce qu'il rétrécit réellement, pas parce qu'on aurait dessiné
   trois états à la main. C'est le mécanisme même de la prestation.

   État de repos — navigateur sans requêtes de conteneur, impression, moins
   d'animations : le cadre reste au large et la maquette est lisible. */
.demo-responsive {
	display: grid;
	gap: var(--space-2xs);
}

.demo-responsive__scene {
	display: flex;
	justify-content: center;
	padding: 0.4rem;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--c-text) 6%, transparent);
}

.demo-responsive__cadre {
	width: 100%;
	border: var(--border-width) solid var(--c-border-strong);
	border-radius: var(--radius-xs);
	background: var(--c-surface);
	overflow: hidden;
}

@supports (container-type: inline-size) {
	.demo-responsive__cadre {
		container-type: inline-size;
		container-name: apercu;
	}
}

.demo-responsive__site {
	display: grid;
	gap: 0.35rem;
	padding: 0.4rem;
}

.demo-responsive__entete {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding-bottom: 0.35rem;
	border-bottom: var(--border-width) solid var(--c-border);
}

.demo-responsive__logo {
	width: 1.1rem;
	height: 1.1rem;
	flex: none;
	border-radius: var(--radius-xs);
	background: var(--c-cta);
}

.demo-responsive__nav {
	display: flex;
	gap: 0.3rem;
	margin-left: auto;
}

.demo-responsive__nav span {
	display: block;
	width: 1.5rem;
	height: 0.32rem;
	border-radius: 2px;
	background: var(--c-text);
	opacity: 0.28;
}

/* Le bouton de menu n'existe qu'à l'étroit. */
.demo-responsive__burger {
	display: none;
	margin-left: auto;
	width: 1rem;
}

.demo-responsive__burger span {
	display: block;
	height: 0.16rem;
	margin-bottom: 0.16rem;
	border-radius: 1px;
	background: var(--c-text);
	opacity: 0.4;
}

.demo-responsive__heros {
	display: grid;
	gap: 0.22rem;
}

.demo-responsive__titre {
	height: 0.62rem;
	width: 62%;
	border-radius: 3px;
	background: var(--c-text);
	opacity: 0.34;
}

.demo-responsive__texte {
	height: 0.3rem;
	width: 88%;
	border-radius: 2px;
	background: var(--c-text);
	opacity: 0.2;
}

.demo-responsive__bouton {
	height: 0.62rem;
	width: 3.4rem;
	margin-top: 0.1rem;
	border-radius: var(--radius-pill);
	background: var(--c-cta);
}

.demo-responsive__grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.3rem;
	/* Réserver les trois cartes empilées, même lorsque la maquette s'élargit. */
	min-height: calc(3 * 2.1rem + 2 * 0.3rem);
	align-content: start;
}

.demo-responsive__carte {
	height: 2.1rem;
	border-radius: var(--radius-xs);
	border: var(--border-width) solid var(--c-border);
	background: var(--c-surface-2);
}

/* Les deux replis, en vraies requêtes de conteneur.
   Les seuils sont calés sur la largeur réelle du cadre — 25 rem au large dans
   le panneau du héros, 32 rem sur une page de prestation — et non sur des
   points de rupture de site. Trop hauts, l'état à trois colonnes n'apparaissait
   jamais. */
@container apercu (max-width: 21rem) {
	.demo-responsive__grille { grid-template-columns: repeat(2, 1fr); }
}

@container apercu (max-width: 12rem) {
	.demo-responsive__grille { grid-template-columns: 1fr; }
	.demo-responsive__nav { display: none; }
	.demo-responsive__burger { display: block; }
	.demo-responsive__titre { width: 84%; }
	.demo-responsive__bouton { width: 100%; }
}

.demo-responsive__mesure {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.6rem;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-surface-2);
}

/* Les trois largeurs et les trois états occupent chacun une seule case : la
   ligne ne bouge pas quand la valeur change. */
.demo-responsive__largeurs,
.demo-responsive__etat {
	display: grid;
}

.demo-responsive__largeurs { justify-items: start; flex: 1; }
.demo-responsive__etat { justify-items: end; }

.demo-responsive__largeur {
	grid-area: 1 / 1;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
	color: var(--c-text);
	opacity: 0;
	white-space: nowrap;
}

.demo-responsive__etat > * {
	grid-area: 1 / 1;
	opacity: 0;
}

.demo-responsive__largeur--1,
.demo-responsive__etat--1 { opacity: 1; }

/* --- Reprise de site : la passation ---
   Cinq clés quittent un prestataire injoignable. Au repos elles sont déjà
   arrivées : c'est l'état final, et il se lit sans animation. */
.demo-reprise {
	display: grid;
	gap: 0.45rem;
}

.demo-reprise__colonnes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.demo-reprise__entete {
	display: grid;
	gap: 0.1rem;
	margin: 0;
	font-size: 0.74rem;
	font-weight: var(--fw-strong);
}

.demo-reprise__entete--avant { color: var(--c-text-muted); }
.demo-reprise__entete--apres { color: var(--c-cta); }

.demo-reprise__silence {
	font-size: 0.66rem;
	font-weight: var(--fw-body);
	color: var(--c-text-muted);
}

.demo-reprise__cles {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Une clé arrivée occupe la colonne de droite. */
.demo-reprise__cle {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: 50%;
	padding: 0.3rem 0.5rem;
	border: var(--border-width) solid color-mix(in srgb, var(--c-cta) 45%, transparent);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--c-cta) 10%, transparent);
	font-size: 0.74rem;
}

.demo-reprise__jeton .icon {
	width: 0.85rem;
	height: 0.85rem;
	color: var(--c-cta);
}