/* demo-eudi-wallet.css — démonstrateur EUDI Wallet (2 parcours).
 * Couleurs : uniquement les tokens @doxallia/design, via les alias .eudi-*
 * ci-dessous. Chargé APRÈS le design system et site.css ; tout est scoped
 * .eudi-*. Aucune règle inline dans le HTML (CSP style-src 'self'). */

.eudi-demo,
.eudi-home {
	/* Alias sémantiques du démonstrateur → tokens du design system. */
	--eudi-bank: var(--color-brand);
	--eudi-bank-soft: var(--color-brand-active);
	--eudi-tel: var(--color-brand-mid);
	--eudi-dox: var(--color-warning);
	--eudi-ok: var(--color-success);
	--eudi-ink: var(--color-text);
	--eudi-muted: var(--color-text-muted);
	--eudi-subtle: var(--color-text-subtle);
	--eudi-line: var(--color-border);
	--eudi-surface: var(--color-surface);
	--eudi-bg: var(--color-bg);
	--eudi-on-accent: var(--color-on-brand);
}

.eudi-demo__inner {
	width: 100%;
	max-width: var(--page-max-width);
	margin: 0 auto;
	padding: var(--s-6) var(--s-6) var(--s-12);
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}

.eudi-backlink {
	margin: 0;
	font-size: var(--text-sm);
}

.eudi-backlink a {
	color: var(--eudi-muted);
	text-decoration: none;
	font-weight: var(--fw-semi);
}

.eudi-backlink a:hover {
	color: var(--color-brand-text);
}

.eudi-disclaimer {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	margin: 0;
	padding: var(--s-4) var(--s-5);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	background: var(--eudi-surface);
	font-size: var(--text-sm);
	color: var(--eudi-muted);
}

.eudi-disclaimer svg {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
	color: var(--color-brand-text);
}

.eudi-noscript {
	margin: 0;
	padding: var(--s-3) var(--s-4);
	border: var(--border-width) dashed var(--eudi-line);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--eudi-muted);
}

/* ── Accueil du démonstrateur : cartes parcours ─────────────── */

.eudi-home {
	width: 100%;
	max-width: var(--page-max-width);
	margin: 0 auto;
	padding: var(--s-6) var(--s-6) var(--s-12);
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}

.eudi-journeys {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20.5rem, 1fr));
	gap: var(--s-5);
}

.eudi-journey {
	display: flex;
	flex-direction: column;
	background: var(--eudi-surface);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition:
		transform var(--transition),
		box-shadow var(--transition),
		border-color var(--transition);
}

.eudi-journey:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
	border-color: var(--color-brand-border);
}

.eudi-journey__media {
	position: relative;
	height: 8.5rem;
	display: grid;
	place-items: center;
	border-bottom: var(--border-width) solid var(--eudi-line);
	background: linear-gradient(var(--color-surface-muted), var(--eudi-bg));
}

.eudi-journey__badge {
	position: absolute;
	top: var(--s-3);
	left: var(--s-3);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--eudi-on-accent);
	background: var(--eudi-bank);
	padding: var(--s-1) var(--s-3);
	border-radius: var(--radius-full);
}

.eudi-journey--tel .eudi-journey__badge {
	background: var(--eudi-tel);
}

.eudi-journey__ill {
	display: inline-flex;
	align-items: center;
	gap: var(--s-4);
	color: var(--color-brand-text);
}

.eudi-journey__ill svg {
	width: 2rem;
	height: 2rem;
}

.eudi-journey__ill svg:nth-child(2) {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--eudi-subtle);
}

.eudi-journey__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--s-3);
	padding: var(--s-5) var(--s-5) var(--s-6);
}

.eudi-journey__tag {
	margin: 0;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-brand-text);
}

.eudi-journey__body h3 {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: var(--fw-semi);
	letter-spacing: -0.015em;
}

.eudi-journey__desc {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--eudi-subtle);
	line-height: 1.55;
}

.eudi-journey__points {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	flex: 1;
}

.eudi-journey__points li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	font-size: var(--text-sm);
	color: var(--eudi-ink);
}

.eudi-journey__pt {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: var(--radius-full);
	background: var(--eudi-bank-soft);
	color: var(--color-brand-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	margin-top: 0.0625rem;
}

.eudi-journey__pt svg {
	width: 0.75rem;
	height: 0.75rem;
}

.eudi-journey .btn {
	align-self: flex-start;
}

.eudi-journey .btn svg {
	width: 1rem;
	height: 1rem;
}

/* ── Modalité (parcours 1) ──────────────────────────────────── */

.eudi-modality {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--s-3);
	margin: 0;
	padding: var(--s-4);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	background: var(--eudi-surface);
}

.eudi-modality legend {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--eudi-muted);
	padding: 0 var(--s-2);
}

.eudi-modality__opt {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	cursor: pointer;
}

.eudi-modality__opt:has(input:checked) {
	border-color: var(--color-brand-border);
	background: var(--eudi-bank-soft);
}

.eudi-modality__opt:has(input:focus-visible) {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.eudi-modality__opt input {
	margin-top: 0.25rem;
	accent-color: var(--color-brand);
}

.eudi-modality__opt strong {
	display: block;
	font-size: var(--text-sm);
	color: var(--eudi-ink);
}

.eudi-modality__opt small {
	display: block;
	font-size: var(--text-xs);
	color: var(--eudi-subtle);
	line-height: 1.45;
	margin-top: 0.125rem;
}

/* Filtre de modalité : sans JS l'attribut est absent → les deux variantes
 * restent lisibles ; le module client pose data-modality au démarrage. */
.eudi-demo[data-modality="crossdevice"] [data-modality-only="samedevice"] {
	display: none;
}

.eudi-demo[data-modality="samedevice"] [data-modality-only="crossdevice"] {
	display: none;
}

/* ── Ruban des deux actes (parcours 2) ──────────────────────── */

.eudi-acts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--s-3);
}

.eudi-act {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	background: var(--eudi-surface);
}

.eudi-act:not([data-act-state="active"]) {
	/* WCAG AA : pas d'opacity globale (elle diluait le texte sous 4,5:1) —
	   la de-emphase passe par la bordure pointillee. */
	border-style: dashed;
}

.eudi-act[data-act-state="active"] {
	border-color: var(--color-brand-border);
	box-shadow: var(--shadow-sm);
}

.eudi-act[data-act-state="done"] {
	opacity: 1;
}

.eudi-act__num {
	width: 1.875rem;
	height: 1.875rem;
	border-radius: var(--radius-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	background: var(--color-surface-muted);
	color: var(--eudi-subtle);
	flex: none;
}

.eudi-act[data-act-state="active"] .eudi-act__num {
	background: var(--eudi-bank);
	color: var(--eudi-on-accent);
}

.eudi-act[data-act-state="done"] .eudi-act__num {
	background: var(--eudi-ok);
	color: var(--eudi-on-accent);
}

.eudi-act__id strong {
	display: block;
	font-size: var(--text-sm);
	color: var(--eudi-ink);
}

.eudi-act__id small {
	display: block;
	font-size: var(--text-xs);
	color: var(--eudi-subtle);
}

/* ── Scène : deux volets + chronologie ──────────────────────── */

.eudi-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: var(--s-5);
	align-items: start;
}

.eudi-stage__scene {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--s-4);
	flex-wrap: wrap;
	min-width: 0;
}

.eudi-stage__device {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	min-width: 0;
}

.eudi-stage__device--web {
	flex: 1 1 24rem;
}

.eudi-stage__device--phone {
	flex: 0 0 auto;
}

.eudi-stage__link {
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-2);
	min-width: 5.5rem;
}

.eudi-stage__linkline {
	width: 100%;
	height: 2px;
	background: repeating-linear-gradient(
		90deg,
		var(--eudi-line) 0,
		var(--eudi-line) 6px,
		transparent 6px,
		transparent 12px
	);
}

.eudi-stage__linktag {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	background: var(--eudi-bank-soft);
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius-full);
	white-space: nowrap;
}

.eudi-stage__linktag svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

.eudi-frame-label {
	margin: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.eudi-frame-label strong {
	font-size: var(--text-sm);
	color: var(--eudi-ink);
}

.eudi-frame-label span {
	font-size: var(--text-xs);
	color: var(--eudi-subtle);
}

.eudi-stage__side {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	max-height: 52rem;
	overflow-y: auto;
	padding-right: var(--s-1);
}

@media (max-width: 1100px) {
	.eudi-stage {
		grid-template-columns: 1fr;
	}

	.eudi-stage__side {
		max-height: none;
		overflow-y: visible;
	}

	.eudi-stage__link {
		display: none;
	}
}

/* ── Cadre navigateur ───────────────────────────────────────── */

.eudi-browser {
	width: 100%;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: var(--border-width) solid var(--eudi-line);
	box-shadow: var(--shadow-md);
	background: var(--eudi-surface);
}

.eudi-browser__bar {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-3);
	background: var(--color-brand-dark);
}

.eudi-browser__lights {
	display: inline-flex;
	gap: var(--s-1);
}

.eudi-browser__lights i {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: var(--radius-full);
	background: var(--color-brand-mid);
}

.eudi-browser__tab {
	font-size: var(--text-xs);
	color: var(--eudi-on-accent);
	background: var(--color-brand-mid);
	padding: 0.1875rem var(--s-3);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 70%;
}

.eudi-browser__url {
	display: flex;
	align-items: center;
	padding: var(--s-1) var(--s-3) var(--s-2);
	background: var(--color-brand-dark);
}

.eudi-browser__urltext {
	flex: 1;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--eudi-on-accent);
	background: var(--color-brand-mid);
	border-radius: var(--radius-full);
	padding: 0.1875rem var(--s-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.eudi-browser__viewport {
	position: relative;
	height: 34rem;
	overflow-y: auto;
	background: var(--eudi-bg);
}

/* ── Cadre mobile ───────────────────────────────────────────── */

.eudi-phone {
	position: relative;
	width: 19rem;
	border-radius: 2.25rem;
	border: 0.5rem solid var(--color-brand-dark);
	background: var(--eudi-surface);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.eudi-phone__notch {
	position: absolute;
	top: 0.375rem;
	left: 50%;
	transform: translateX(-50%);
	width: 6rem;
	height: 1.125rem;
	border-radius: var(--radius-full);
	background: var(--color-brand-dark);
	z-index: 2;
}

.eudi-phone__viewport {
	height: 34rem;
	overflow-y: auto;
	background: var(--eudi-surface);
}

.eudi-phone__homebar {
	position: absolute;
	bottom: 0.25rem;
	left: 50%;
	transform: translateX(-50%);
	width: 7rem;
	height: 0.25rem;
	border-radius: var(--radius-full);
	background: var(--eudi-line);
	z-index: 2;
}

/* ── Écrans (génériques) ────────────────────────────────────── */

.eudi-screen {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

.eudi-screen[hidden] {
	display: none;
}

/* ── UI Banque / Téléo (volet web) ──────────────────────────── */

.eudi-bank-head {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-5);
	border-bottom: var(--border-width) solid var(--eudi-line);
	background: var(--eudi-surface);
}

.eudi-bank-logo {
	width: 2.125rem;
	height: 2.125rem;
	border-radius: var(--radius-md);
	background: var(--eudi-bank);
	color: var(--eudi-on-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.eudi-bank-logo--tel {
	background: var(--eudi-tel);
}

.eudi-bank-logo svg {
	width: 1.125rem;
	height: 1.125rem;
}

.eudi-bank-brand {
	font-size: var(--text-lg);
	font-weight: var(--fw-bold);
	letter-spacing: -0.01em;
	color: var(--eudi-ink);
}

.eudi-bank-brand span {
	color: var(--color-brand-text);
}

.eudi-bank-nav {
	margin-left: auto;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.eudi-bank-body {
	flex: 1;
	padding: var(--s-6) var(--s-5);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-4);
}

.eudi-bank-body--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-5);
}

.eudi-bank-body--split > div:first-child {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-4);
}

.eudi-bank-body--center {
	align-items: center;
	justify-content: center;
	text-align: center;
}

.eudi-bank-title {
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: var(--fw-bold);
	letter-spacing: -0.02em;
	line-height: var(--lh-tight);
	color: var(--eudi-ink);
	text-wrap: balance;
}

.eudi-bank-title--sm {
	font-size: var(--text-xl);
}

.eudi-bank-sub {
	margin: 0;
	font-size: var(--text-sm);
	line-height: 1.55;
	color: var(--eudi-muted);
	max-width: 46ch;
	text-wrap: pretty;
}

.eudi-bank-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

.eudi-bank-perks {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--s-3);
	width: 100%;
}

.eudi-bank-perks li {
	padding: var(--s-3) var(--s-4);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	background: var(--eudi-surface);
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.eudi-bank-perks strong {
	font-size: var(--text-sm);
	color: var(--eudi-ink);
}

.eudi-bank-perks span {
	font-size: var(--text-xs);
	color: var(--eudi-muted);
	line-height: 1.45;
}

.eudi-bank-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--s-4);
	width: 100%;
}

.eudi-bank-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	flex-wrap: wrap;
	padding: var(--s-3) var(--s-5);
	border-top: var(--border-width) solid var(--eudi-line);
	background: var(--eudi-surface);
	font-size: var(--text-xs);
	color: var(--eudi-subtle);
}

.eudi-bbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	font-family: inherit;
	color: var(--eudi-on-accent);
	background: var(--eudi-bank);
	cursor: pointer;
	transition: background var(--transition);
}

.eudi-bbtn:hover {
	background: var(--color-brand-hover);
}

.eudi-bbtn svg {
	width: 1rem;
	height: 1rem;
}

.eudi-bbtn--tel {
	background: var(--eudi-tel);
}

.eudi-bbtn--tel:hover {
	background: var(--color-brand-dark);
}

.eudi-bbtn--deeplink {
	font-size: var(--text-base);
	padding: var(--s-4) var(--s-6);
}

.eudi-bbtn-ghost {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	font-family: inherit;
	color: var(--color-brand-text);
	background: transparent;
	cursor: pointer;
}

.eudi-bbtn-ghost:hover {
	background: var(--hover-surface);
}

.eudi-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	padding: var(--s-1) var(--s-3);
	border-radius: var(--radius-full);
	border: var(--border-width) solid var(--eudi-line);
	background: var(--eudi-surface);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--eudi-ink);
	white-space: nowrap;
}

.eudi-pill svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

.eudi-pill--brand {
	color: var(--color-brand-text);
	background: var(--eudi-bank-soft);
	border-color: transparent;
}

.eudi-pill--ok {
	/* WCAG AA : le vert token (3,1:1 sur post-bg) reste decoratif (bordure),
	   le texte porte la couleur de texte pleine. */
	color: var(--color-text);
	background: var(--color-post-bg);
	border-color: var(--eudi-ok);
}

.eudi-pill--tel {
	color: var(--eudi-on-accent);
	background: var(--eudi-tel);
	border-color: transparent;
}

.eudi-eyebrow-sm {
	margin: 0;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-brand-text);
}

.eudi-eyebrow-sm--ok {
	color: var(--eudi-ok);
}

.eudi-eyebrow-sm--tel {
	color: var(--eudi-tel);
}

/* Options d'identification */

.eudi-options {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	width: 100%;
	max-width: 34rem;
}

.eudi-option {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	width: 100%;
	text-align: left;
	padding: var(--s-4);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	background: var(--eudi-surface);
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.eudi-option--on {
	cursor: pointer;
	border-color: var(--color-brand-border);
}

.eudi-option--on:hover {
	background: var(--hover-surface);
	box-shadow: var(--shadow-sm);
}

.eudi-option[aria-disabled="true"] {
	opacity: var(--disabled-opacity);
}

.eudi-option > svg {
	width: 1.25rem;
	height: 1.25rem;
	color: var(--color-brand-text);
	flex: none;
}

.eudi-option__icon {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-md);
	background: var(--eudi-bank-soft);
	color: var(--color-brand-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.eudi-option__icon svg {
	width: 1.375rem;
	height: 1.375rem;
}

.eudi-option__id {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.eudi-option__id strong {
	font-size: var(--text-sm);
	color: var(--eudi-ink);
}

.eudi-option__id span {
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-option__badge {
	font-style: normal;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--eudi-ok);
	background: var(--color-post-bg);
	padding: 0.125rem var(--s-2);
	border-radius: var(--radius-full);
	margin-left: var(--s-2);
	white-space: nowrap;
}

/* QR / statut / protocole */

.eudi-qr-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.eudi-qr-steps li {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--text-sm);
	color: var(--eudi-ink);
}

.eudi-qr-steps li span {
	width: 1.375rem;
	height: 1.375rem;
	border-radius: var(--radius-full);
	background: var(--eudi-bank-soft);
	color: var(--color-brand-text);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.eudi-status {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	background: var(--color-surface-muted);
	max-width: 100%;
}

.eudi-status--pulse {
	background: var(--eudi-bank-soft);
	border-color: var(--color-brand-border);
}

.eudi-status__dots {
	display: inline-flex;
	gap: var(--s-1);
	flex: none;
}

.eudi-status__dots i {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--radius-full);
	background: var(--color-brand-text);
	opacity: 0.35;
}

.eudi-status--pulse .eudi-status__dots i {
	animation: eudi-pulse 1.1s infinite;
	opacity: 1;
}

.eudi-status--pulse .eudi-status__dots i:nth-child(2) {
	animation-delay: 0.18s;
}

.eudi-status--pulse .eudi-status__dots i:nth-child(3) {
	animation-delay: 0.36s;
}

.eudi-status__text {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.eudi-status__text strong {
	font-size: var(--text-sm);
	color: var(--eudi-ink);
}

.eudi-status__text span {
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-proto {
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--eudi-subtle);
}

.eudi-qr-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-6);
	padding: var(--s-5) var(--s-4) var(--s-4);
}

.eudi-qr {
	position: relative;
	width: 10.5rem;
	height: 10.5rem;
	padding: var(--s-2);
	border-radius: var(--radius-lg);
	background: var(--color-on-brand);
	border: var(--border-width) solid var(--eudi-line);
}

.eudi-qr__grid {
	width: 100%;
	height: 100%;
}

.eudi-qr__grid rect {
	fill: var(--color-brand-dark);
}

.eudi-qr__logo {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.eudi-qr__logo svg {
	width: 1.5rem;
	height: 1.5rem;
	padding: 0.25rem;
	border-radius: var(--radius-sm);
	background: var(--eudi-bank);
	color: var(--eudi-on-accent);
	box-shadow: 0 0 0 4px var(--color-on-brand);
}

.eudi-qr-expiry {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--eudi-subtle);
}

.eudi-doxmark {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	padding: var(--s-3);
	border: 2px dashed var(--eudi-dox);
	border-radius: var(--radius-lg);
}

.eudi-doxmark__tag {
	position: absolute;
	top: -0.8125rem;
	left: -0.5rem;
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	padding: 0.1875rem var(--s-2);
	border-radius: var(--radius-full);
	background: var(--eudi-dox);
	color: var(--eudi-on-accent);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	white-space: nowrap;
}

.eudi-doxmark__tag svg {
	width: 0.75rem;
	height: 0.75rem;
}

.eudi-doxmark__sub {
	position: absolute;
	bottom: -0.8125rem;
	right: -0.5rem;
	padding: 0.125rem var(--s-2);
	border-radius: var(--radius-full);
	background: var(--eudi-surface);
	border: var(--border-width) solid var(--eudi-dox);
	color: var(--eudi-dox);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	white-space: nowrap;
}

/* Spinner / notices / synthèse */

.eudi-spinner {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-full);
	border: 3px solid var(--eudi-line);
	border-top-color: var(--eudi-bank);
	animation: eudi-spin 0.9s linear infinite;
	flex: none;
}

.eudi-spinner--lg {
	width: 3.5rem;
	height: 3.5rem;
	border-width: 4px;
}

.eudi-spinner--tel {
	border-top-color: var(--eudi-tel);
}

.eudi-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--radius-md);
	border: var(--border-width) solid var(--eudi-line);
	background: var(--color-surface-muted);
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--eudi-ink);
	max-width: 100%;
}

.eudi-notice svg {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
	margin-top: 0.0625rem;
	color: var(--color-brand-text);
}

.eudi-notice--ok {
	background: var(--color-post-bg);
	border-color: transparent;
}

.eudi-notice--ok svg {
	color: var(--eudi-ok);
}

.eudi-notice--key {
	background: var(--eudi-bank-soft);
	border-color: var(--color-brand-border);
}

.eudi-summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--s-4);
	width: 100%;
}

@media (max-width: 640px) {
	.eudi-summary {
		grid-template-columns: 1fr;
	}
}

.eudi-summary__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-4);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	background: var(--eudi-surface);
	text-align: center;
	height: fit-content;
}

.eudi-summary__card strong {
	font-size: var(--text-base);
	color: var(--eudi-ink);
	white-space: nowrap;
}

.eudi-summary__card span {
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-summary__card code {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-brand-text);
	background: var(--eudi-bank-soft);
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius-sm);
}

.eudi-summary__fields {
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	background: var(--eudi-surface);
	overflow: hidden;
}

.eudi-field {
	display: flex;
	align-items: baseline;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
}

.eudi-field + .eudi-field {
	border-top: var(--border-width) solid var(--eudi-line);
}

.eudi-field > span:first-child {
	width: 9.5rem;
	flex: none;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--eudi-muted);
}

.eudi-field strong {
	flex: 1;
	font-size: var(--text-sm);
	color: var(--eudi-ink);
	overflow-wrap: anywhere;
}

.eudi-ok-icon {
	color: var(--eudi-ok);
	flex: none;
	display: inline-flex;
}

.eudi-ok-icon svg {
	width: 1rem;
	height: 1rem;
}

.eudi-endnote {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--eudi-subtle);
	line-height: 1.5;
	max-width: 60ch;
	text-wrap: pretty;
}

.eudi-done-badge {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--radius-full);
	background: var(--eudi-ok);
	color: var(--eudi-on-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.eudi-done-badge svg {
	width: 1.75rem;
	height: 1.75rem;
}

.eudi-done-badge--flat {
	background: var(--color-post-bg);
	color: var(--eudi-ok);
}

/* Cartes compte / forfait / résultats (parcours 2) */

.eudi-account-card,
.eudi-plan-card {
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--eudi-surface);
}

.eudi-account-card__band,
.eudi-plan-card__band {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-4) var(--s-5);
	background: var(--eudi-bank);
	color: var(--eudi-on-accent);
}

.eudi-plan-card__band {
	background: var(--eudi-tel);
}

.eudi-account-card__band > span:first-child,
.eudi-plan-card__band > span:first-child {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.06em;
	opacity: 0.85;
}

.eudi-account-card__band code {
	font-family: var(--font-mono);
	font-size: var(--text-base);
	font-weight: var(--fw-semi);
	letter-spacing: 0.03em;
	overflow-wrap: anywhere;
}

.eudi-account-card__meta {
	font-size: var(--text-xs);
	opacity: 0.85;
}

.eudi-plan-card__band strong {
	font-size: var(--text-3xl);
	font-weight: var(--fw-bold);
	letter-spacing: -0.02em;
}

.eudi-plan-card__band strong small {
	font-size: var(--text-sm);
	font-weight: var(--fw-normal);
	opacity: 0.85;
}

.eudi-plan-card__band > span:last-child {
	font-size: var(--text-xs);
	opacity: 0.85;
}

.eudi-account-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-5);
	font-size: var(--text-sm);
}

.eudi-account-card__foot span {
	color: var(--eudi-muted);
}

.eudi-plan-card__perks {
	margin: 0;
	padding: var(--s-4) var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.eudi-plan-card__perks li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--text-sm);
	color: var(--eudi-ink);
}

.eudi-plan-card__perks svg {
	width: 0.875rem;
	height: 0.875rem;
	color: var(--eudi-tel);
	flex: none;
}

.eudi-action-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	background: var(--eudi-surface);
}

.eudi-action-card strong {
	font-size: var(--text-sm);
	color: var(--eudi-ink);
}

.eudi-action-card p {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--eudi-muted);
	line-height: 1.5;
	flex: 1;
}

.eudi-action-card__icon {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-md);
	background: var(--eudi-bank-soft);
	color: var(--color-brand-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.eudi-action-card__icon svg {
	width: 1.375rem;
	height: 1.375rem;
}

.eudi-action-card__hint {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	padding: var(--s-3);
	border-radius: var(--radius-md);
	background: var(--color-surface-muted);
	font-size: var(--text-xs);
	color: var(--eudi-ink);
	line-height: 1.5;
}

.eudi-action-card__hint svg {
	width: 1rem;
	height: 1rem;
	flex: none;
	color: var(--color-brand-text);
	margin-top: 0.0625rem;
}

.eudi-needs {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.eudi-needs li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-2) 0;
}

.eudi-needs li + li {
	border-top: var(--border-width) solid var(--eudi-line);
}

.eudi-needs--flat li {
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	padding: var(--s-3);
	background: var(--eudi-surface);
}

.eudi-needs--flat li + li {
	margin-top: var(--s-2);
}

.eudi-needs svg {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--color-brand-text);
	flex: none;
	margin-top: 0.125rem;
}

.eudi-needs strong {
	display: block;
	font-size: var(--text-sm);
	color: var(--eudi-ink);
}

.eudi-needs small {
	display: block;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-result-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	padding: var(--s-4);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	background: var(--eudi-surface);
}

.eudi-result-card__head {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0 0 var(--s-2);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eudi-muted);
}

.eudi-result-card__head svg {
	width: 0.9375rem;
	height: 0.9375rem;
	color: var(--color-brand-text);
}

.eudi-result-card .eudi-field {
	padding: var(--s-2) 0;
}

.eudi-result-card .eudi-field > span:first-child {
	width: 8rem;
}

.eudi-result-card .eudi-pill {
	align-self: flex-start;
	margin-top: var(--s-2);
}

/* ── UI Wallet (volet mobile) ───────────────────────────────── */

.eudi-wallet-head {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--s-2) var(--s-3);
	padding: var(--s-8) var(--s-4) var(--s-3);
	border-bottom: var(--border-width) solid var(--eudi-line);
}

.eudi-wallet-mark {
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-md);
	background: var(--color-brand-dark);
	color: var(--eudi-on-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.eudi-wallet-mark svg {
	width: 1.125rem;
	height: 1.125rem;
}

.eudi-wallet-mark--lg {
	width: 2.75rem;
	height: 2.75rem;
}

.eudi-wallet-brand {
	display: flex;
	flex-direction: column;
	line-height: var(--lh-tight);
}

.eudi-wallet-brand strong {
	font-size: var(--text-base);
	font-weight: var(--fw-bold);
	letter-spacing: -0.01em;
	color: var(--eudi-ink);
}

.eudi-wallet-brand small {
	font-size: 0.625rem;
	font-weight: var(--fw-semi);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--eudi-subtle);
}

.eudi-wallet-head__sub {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-wallet-body {
	flex: 1;
	padding: var(--s-4);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.eudi-wallet-title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--eudi-ink);
}

.eudi-wallet-note {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
	line-height: 1.45;
}

.eudi-wallet-sechead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--s-2);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--eudi-ink);
}

.eudi-wallet-sechead span:last-child {
	color: var(--eudi-subtle);
}

.eudi-wallet-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-5) var(--s-4);
	border: var(--border-width) dashed var(--eudi-line);
	border-radius: var(--radius-md);
	text-align: center;
	font-size: var(--text-xs);
	color: var(--eudi-subtle);
	line-height: 1.5;
}

.eudi-wallet-empty svg {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--eudi-subtle);
}

.eudi-wallet-foot {
	padding: var(--s-3) var(--s-4) var(--s-6);
	border-top: var(--border-width) solid var(--eudi-line);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.eudi-wallet-foot__note {
	margin: 0;
	text-align: center;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-wbtn {
	width: 100%;
	padding: var(--s-3) var(--s-4);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	font-family: inherit;
	color: var(--eudi-on-accent);
	background: var(--color-brand-dark);
	cursor: pointer;
	transition: background var(--transition);
}

.eudi-wbtn:hover {
	background: var(--color-brand);
}

.eudi-wbtn-text {
	width: 100%;
	padding: var(--s-2);
	border: none;
	background: none;
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	font-family: inherit;
	color: var(--eudi-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Carte PID */

.eudi-pid {
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.eudi-pid__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s-2) var(--s-4);
	background: var(--color-brand-dark);
	color: var(--eudi-on-accent);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.04em;
}

.eudi-pid__band svg {
	width: 1rem;
	height: 1rem;
}

.eudi-pid__body {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-4);
	background: var(--eudi-surface);
}

.eudi-pid__id {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.eudi-pid__id strong {
	font-size: var(--text-base);
	color: var(--eudi-ink);
}

.eudi-pid__id span {
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-pid__active {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	font-weight: var(--fw-semi);
	color: var(--eudi-ok);
}

.eudi-pid__active i {
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: var(--radius-full);
	background: var(--eudi-ok);
}

.eudi-pid__cert {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	border-top: var(--border-width) solid var(--eudi-line);
	background: var(--color-post-bg);
}

.eudi-pid__issuer {
	flex-basis: 100%;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

/* Photo d'identité (silhouette neutre) */

.eudi-idphoto {
	position: relative;
	display: inline-block;
	overflow: hidden;
	flex: none;
	background: linear-gradient(
		160deg,
		var(--color-surface-muted),
		var(--eudi-line)
	);
	border-radius: var(--radius-md);
}

.eudi-idphoto i {
	position: absolute;
	left: 50%;
	top: 22%;
	transform: translateX(-50%);
	width: 42%;
	aspect-ratio: 1;
	border-radius: var(--radius-full);
	background: var(--eudi-subtle);
}

.eudi-idphoto::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -18%;
	transform: translateX(-50%);
	width: 86%;
	height: 55%;
	border-radius: var(--radius-full) var(--radius-full) 0 0;
	background: var(--eudi-subtle);
}

.eudi-idphoto--sm {
	width: 2.125rem;
	height: 2.75rem;
}

.eudi-idphoto--md {
	width: 3.375rem;
	height: 4.25rem;
}

.eudi-idphoto--lg {
	width: 5.5rem;
	height: 7rem;
}

/* Attestation IBAN */

.eudi-iban-chip {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-md);
	background: linear-gradient(
		150deg,
		var(--eudi-bank),
		var(--color-brand-dark)
	);
	color: var(--eudi-on-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.eudi-iban-chip svg {
	width: 1.25rem;
	height: 1.25rem;
}

.eudi-iban-chip--sm {
	width: 2.125rem;
	height: 2.125rem;
}

.eudi-iban-card {
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--eudi-surface);
}

.eudi-iban-card--inline {
	width: 100%;
	max-width: 28rem;
}

.eudi-iban-card__row {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3);
}

.eudi-iban-card__id {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.eudi-iban-card__id strong {
	font-size: var(--text-sm);
	color: var(--eudi-ink);
}

.eudi-iban-card__id span {
	font-size: var(--text-xs);
	color: var(--eudi-muted);
	overflow-wrap: anywhere;
}

.eudi-iban-card__iban {
	display: block;
	padding: var(--s-2) var(--s-3);
	border-top: var(--border-width) solid var(--eudi-line);
	background: var(--color-surface-muted);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--eudi-ink);
	letter-spacing: 0.02em;
}

.eudi-iban-preview {
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.eudi-iban-preview__band {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	padding: var(--s-3) var(--s-4);
	background: linear-gradient(
		150deg,
		var(--eudi-bank),
		var(--color-brand-dark)
	);
	color: var(--eudi-on-accent);
}

.eudi-iban-preview__band span {
	font-size: 0.625rem;
	font-weight: var(--fw-semi);
	letter-spacing: 0.05em;
	opacity: 0.85;
}

.eudi-iban-preview__band code {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	overflow-wrap: anywhere;
}

.eudi-kv {
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-4);
	font-size: var(--text-xs);
}

.eudi-kv + .eudi-kv {
	border-top: var(--border-width) solid var(--eudi-line);
}

.eudi-kv span {
	color: var(--eudi-muted);
}

.eudi-kv strong {
	color: var(--eudi-ink);
	text-align: right;
}

/* Scan (fond sombre) */

.eudi-scan {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--s-8) var(--s-4) var(--s-6);
	background: radial-gradient(
		120% 80% at 50% 30%,
		var(--color-brand-mid),
		var(--color-brand-dark) 70%
	);
	color: var(--eudi-on-accent);
	text-align: center;
}

.eudi-scan__title {
	margin: 0;
	font-size: var(--text-base);
	font-weight: var(--fw-semi);
}

.eudi-scan__sub {
	margin: var(--s-1) 0 0;
	font-size: var(--text-xs);
	opacity: 0.75;
}

.eudi-scan__frame {
	position: relative;
	width: 11rem;
	height: 11rem;
	margin: var(--s-8) 0;
	border: 3px solid var(--eudi-on-accent);
	border-radius: var(--radius-xl);
	opacity: 0.9;
}

.eudi-scan__line {
	position: absolute;
	left: 0.5rem;
	right: 0.5rem;
	top: 20%;
	height: 2px;
	border-radius: var(--radius-full);
	background: linear-gradient(
		90deg,
		transparent,
		var(--eudi-on-accent),
		transparent
	);
	animation: eudi-scanline 1.4s ease-in-out infinite alternate;
}

.eudi-scan__foot {
	/* WCAG AA : couleur de texte token (pas d'opacity qui diluerait sous 4,5:1). */
	margin: auto 0 0;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

/* États centrés du wallet (spinner, succès, ouverture) */

.eudi-wallet-center {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	padding: var(--s-6) var(--s-5);
	text-align: center;
}

.eudi-wallet-center strong {
	font-size: var(--text-base);
	color: var(--eudi-ink);
}

.eudi-wallet-center p {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--eudi-muted);
	line-height: 1.5;
	max-width: 17rem;
}

.eudi-wallet-center code {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--eudi-subtle);
}

/* Code personnel */

.eudi-auth {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-8) var(--s-5) var(--s-6);
}

.eudi-auth__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-2);
	text-align: center;
}

.eudi-auth__lock {
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-md);
	background: var(--color-surface-muted);
	color: var(--color-brand-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.eudi-auth__lock svg {
	width: 1.5rem;
	height: 1.5rem;
}

.eudi-auth__intro strong {
	font-size: var(--text-base);
	color: var(--eudi-ink);
}

.eudi-auth__intro p {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
	max-width: 15rem;
	line-height: 1.45;
}

.eudi-auth__dots {
	display: inline-flex;
	gap: var(--s-3);
	margin-top: var(--s-3);
}

.eudi-auth__dots i {
	width: 0.8125rem;
	height: 0.8125rem;
	border-radius: var(--radius-full);
	border: 2px solid var(--eudi-line);
	background: transparent;
	transition:
		background var(--transition-fast),
		border-color var(--transition-fast);
}

.eudi-auth__dots i.eudi-auth__dot--on {
	background: var(--color-brand);
	border-color: var(--color-brand);
}

.eudi-auth__pad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-2);
	max-width: 15rem;
	width: 100%;
	margin: 0 auto;
}

.eudi-pinkey {
	height: 3rem;
	border: none;
	border-radius: var(--radius-md);
	background: var(--color-surface-muted);
	font-family: inherit;
	font-size: var(--text-xl);
	font-weight: var(--fw-medium);
	color: var(--eudi-ink);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.eudi-pinkey:hover {
	background: var(--hover-surface);
}

.eudi-pinkey--text {
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	background: transparent;
	color: var(--eudi-muted);
}

/* Consentement */

.eudi-verifier {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	background: var(--color-surface-muted);
}

.eudi-verifier__logo {
	width: 2.375rem;
	height: 2.375rem;
	border-radius: var(--radius-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--eudi-on-accent);
	flex: none;
}

.eudi-verifier__logo svg {
	width: 1.25rem;
	height: 1.25rem;
}

.eudi-verifier__logo--bank {
	background: var(--eudi-bank);
}

.eudi-verifier__logo--tel {
	background: var(--eudi-tel);
}

.eudi-verifier__id {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.eudi-verifier__id strong {
	font-size: var(--text-sm);
	color: var(--eudi-ink);
}

.eudi-verifier__ok {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--eudi-ok);
}

.eudi-verifier__ok svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

.eudi-claims-caption {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: var(--s-2) 0 0;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eudi-muted);
}

.eudi-claims-caption svg {
	width: 0.8125rem;
	height: 0.8125rem;
	color: var(--color-brand-text);
}

.eudi-claims {
	margin: 0;
	padding: 0;
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--eudi-surface);
}

.eudi-claim {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3);
}

.eudi-claim + .eudi-claim {
	border-top: var(--border-width) solid var(--eudi-line);
}

.eudi-claim__swatch {
	width: 1.625rem;
	height: 1.625rem;
	border-radius: var(--radius-sm);
	background: var(--color-surface-muted);
	flex: none;
}

.eudi-claim__id {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.eudi-claim__id strong {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--eudi-ink);
}

.eudi-claim__id span {
	font-size: var(--text-xs);
	color: var(--eudi-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.eudi-claim__required {
	font-size: 0.625rem;
	font-weight: var(--fw-semi);
	color: var(--eudi-muted);
	background: var(--color-surface-muted);
	padding: 0.1875rem var(--s-2);
	border-radius: var(--radius-sm);
	flex: none;
}

.eudi-toggle {
	position: relative;
	display: inline-flex;
	flex: none;
	cursor: pointer;
}

.eudi-toggle input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.eudi-toggle__track {
	width: 2.625rem;
	height: 1.5625rem;
	border-radius: var(--radius-full);
	background: var(--eudi-line);
	padding: 0.125rem;
	display: inline-flex;
	transition: background var(--transition-fast);
}

.eudi-toggle__track::after {
	content: "";
	width: 1.3125rem;
	height: 1.3125rem;
	border-radius: var(--radius-full);
	background: var(--color-on-brand);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-fast);
}

.eudi-toggle input:checked + .eudi-toggle__track {
	background: var(--eudi-ok);
}

.eudi-toggle input:checked + .eudi-toggle__track::after {
	transform: translateX(1.0625rem);
}

.eudi-toggle input:focus-visible + .eudi-toggle__track {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.eudi-wallet-privacy {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	margin: 0;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
	line-height: 1.5;
}

.eudi-wallet-privacy svg {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
}

.eudi-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ── Chronologie + contrôles ────────────────────────────────── */

.eudi-announce {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border: var(--border-width) solid var(--color-brand-border);
	border-radius: var(--radius-lg);
	background: var(--eudi-bank-soft);
}

.eudi-announce__icon {
	width: 1.625rem;
	height: 1.625rem;
	border-radius: var(--radius-sm);
	background: var(--eudi-bank);
	color: var(--eudi-on-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.eudi-announce__icon svg {
	width: 0.9375rem;
	height: 0.9375rem;
}

.eudi-announce__caption {
	margin: 0;
	flex: 1;
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--eudi-ink);
}

.eudi-announce__tech {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	background: var(--eudi-surface);
	border: var(--border-width) solid var(--eudi-line);
	padding: var(--s-1) var(--s-2);
	border-radius: var(--radius-sm);
	white-space: nowrap;
	align-self: flex-start;
}

.eudi-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.eudi-controls[hidden] {
	display: none;
}

.eudi-controls .btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}

.eudi-controls .btn svg {
	width: 0.9375rem;
	height: 0.9375rem;
}

.eudi-btn-ghost {
	border: var(--border-width) solid var(--eudi-line);
	background: var(--eudi-surface);
	color: var(--color-brand-text);
}

.eudi-btn-ghost:hover {
	background: var(--hover-surface);
}

.eudi-btn-ghost:disabled {
	opacity: var(--disabled-opacity);
	cursor: not-allowed;
}

.eudi-controls__count {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--eudi-subtle);
	white-space: nowrap;
}

.eudi-timeline {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	counter-reset: eudi-step;
}

.eudi-timeline__item {
	display: block;
}

.eudi-timeline__step {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	width: 100%;
	text-align: left;
	padding: var(--s-3);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	background: var(--eudi-surface);
	font-family: inherit;
	color: inherit;
	cursor: pointer;
	transition:
		border-color var(--transition),
		background var(--transition);
}

.eudi-timeline__step:hover {
	border-color: var(--color-brand-border);
}

.eudi-timeline__step[aria-current="step"] {
	border-color: var(--color-brand-border);
	background: var(--eudi-bank-soft);
	box-shadow: var(--shadow-sm);
}

.eudi-timeline__step--done {
	opacity: 0.75;
}

.eudi-timeline__num {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--radius-full);
	background: var(--color-surface-muted);
	color: var(--eudi-subtle);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	margin-top: 0.0625rem;
}

.eudi-timeline__step[aria-current="step"] .eudi-timeline__num {
	background: var(--eudi-bank);
	color: var(--eudi-on-accent);
}

.eudi-timeline__step--done .eudi-timeline__num {
	background: var(--eudi-ok);
	color: var(--eudi-on-accent);
}

.eudi-timeline__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	min-width: 0;
}

.eudi-timeline__title {
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	color: var(--eudi-ink);
}

.eudi-timeline__caption {
	font-size: var(--text-xs);
	color: var(--eudi-muted);
	line-height: 1.5;
}

.eudi-timeline__modality {
	display: inline-block;
	font-size: 0.625rem;
	font-weight: var(--fw-semi);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-brand-text);
	background: var(--eudi-bank-soft);
	padding: 0.0625rem var(--s-1);
	border-radius: var(--radius-sm);
	margin-right: var(--s-1);
}

.eudi-timeline__tech {
	font-family: var(--font-mono);
	font-size: 0.625rem;
	color: var(--eudi-subtle);
}

/* ── Schéma ARF (SVG statique tokenisé) ─────────────────────── */

.eudi-arf {
	margin: 0;
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-xl);
	background: var(--eudi-surface);
	padding: var(--s-5);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.eudi-arf__title {
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
	color: var(--eudi-ink);
}

.eudi-arf__scroll {
	overflow-x: auto;
}

.eudi-arf__svg {
	display: block;
	min-width: 47rem;
	width: 100%;
	height: auto;
}

.eudi-arf__card {
	fill: var(--color-surface-muted);
	stroke: var(--color-border);
	stroke-width: 1.5;
}

.eudi-arf__node--dox .eudi-arf__card {
	stroke: var(--color-warning);
	fill: var(--color-surface);
}

.eudi-arf__node--holder .eudi-arf__card {
	stroke: var(--color-brand-mid);
}

.eudi-arf__node--issuer .eudi-arf__card,
.eudi-arf__node--verifier .eudi-arf__card {
	stroke: var(--color-brand);
}

.eudi-arf__role {
	font-family: var(--font-sans);
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	fill: var(--color-text-subtle);
}

.eudi-arf__node--dox .eudi-arf__role {
	fill: var(--color-warning);
}

.eudi-arf__name {
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 700;
	fill: var(--color-text);
}

.eudi-arf__sub {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	fill: var(--color-text-muted);
}

.eudi-arf__proto {
	font-family: var(--font-mono);
	font-size: 0.625rem;
	font-weight: 600;
	fill: var(--color-brand-text);
	text-anchor: middle;
}

.eudi-arf__link {
	stroke: var(--color-border);
	stroke-width: 2;
	stroke-dasharray: 2 6;
	stroke-linecap: round;
}

.eudi-arf__link--wallet {
	stroke: var(--color-brand-mid);
}

.eudi-arf__link--issuer,
.eudi-arf__link--verifier {
	stroke: var(--color-brand);
}

.eudi-arf__legend {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
	line-height: 1.55;
	max-width: 72ch;
}

/* ── Animations ─────────────────────────────────────────────── */

@keyframes eudi-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes eudi-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}
}

@keyframes eudi-scanline {
	from {
		top: 12%;
	}

	to {
		top: 84%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eudi-spinner,
	.eudi-scan__line,
	.eudi-status--pulse .eudi-status__dots i {
		animation: none;
	}
}

/* ── Mode live : sélecteur simulation | live + panneau « Session live » ─────
   Ajouté au chantier « mode live » : le panneau coexiste avec le récit simulé
   et restitue la timeline réelle de l'API demo. Couleurs = tokens uniquement. */

.eudi-mode {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--s-3);
	margin: 0 0 var(--s-4);
	padding: var(--s-4);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	background: var(--eudi-surface);
}

.eudi-mode legend {
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--eudi-muted);
	padding: 0 var(--s-2);
}

.eudi-mode__opt {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	cursor: pointer;
}

.eudi-mode__opt:has(input:checked) {
	border-color: var(--color-brand-border);
	background: var(--eudi-bank-soft);
}

.eudi-mode__opt:has(input:disabled) {
	cursor: default;
}

.eudi-mode__opt:has(input:focus-visible) {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.eudi-mode__opt span {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.eudi-mode__opt small {
	color: var(--eudi-muted);
	font-size: var(--text-xs);
}

.eudi-noscript {
	margin: var(--s-2) 0 0;
	grid-column: 1 / -1;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-live {
	margin: var(--s-5) 0 0;
	padding: var(--s-5);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	background: var(--eudi-surface);
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}

/* Le `display:flex` ci-dessus l'emporte sur le `display:none` UA de l'attribut
   `hidden` (spécificité de classe > UA) : on rétablit explicitement la garde,
   sinon le panneau et l'UI de scan s'afficheraient en mode simulation. */
.eudi-live[hidden],
.eudi-live__scan[hidden] {
	display: none;
}

.eudi-live__head {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.eudi-live__title {
	margin: 0;
	font-size: var(--text-lg, 1.125rem);
	font-weight: var(--fw-semi);
}

.eudi-live__badge {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-live__status {
	margin: var(--s-1) 0 0;
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
}

.eudi-live__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--s-5);
	align-items: start;
}

.eudi-live__session {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.eudi-live__qr {
	width: 9rem;
	height: 9rem;
	align-self: flex-start;
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	background: var(--eudi-bg);
	image-rendering: pixelated;
}

.eudi-live__uri-label,
.eudi-live__empty,
.eudi-live__join-hint {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-live__uri {
	display: block;
	overflow-wrap: anywhere;
	font-size: var(--text-xs);
	padding: var(--s-2);
	border-radius: var(--radius-sm, 0.375rem);
	background: var(--eudi-bg);
	border: var(--border-width) solid var(--eudi-line);
}

.eudi-live__meta {
	display: grid;
	gap: var(--s-1);
	margin: var(--s-1) 0 0;
}

.eudi-live__meta > div {
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);
	font-size: var(--text-xs);
}

.eudi-live__meta dt {
	color: var(--eudi-muted);
}

.eudi-live__meta dd {
	margin: 0;
	overflow-wrap: anywhere;
	text-align: right;
}

.eudi-live__subtitle {
	margin: 0 0 var(--s-2);
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
}

.eudi-live__timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.eudi-live-step {
	display: flex;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-3);
	border: var(--border-width) solid var(--eudi-line);
	border-left-width: 3px;
	border-radius: var(--radius-sm, 0.375rem);
	background: var(--eudi-bg);
}

.eudi-live-step[aria-current="step"] {
	border-color: var(--color-brand-border);
	background: var(--eudi-bank-soft);
}

.eudi-live-step--running {
	border-left-color: var(--color-brand-border);
}

.eudi-live-step--done {
	border-left-color: var(--color-success);
}

.eudi-live-step--failed {
	border-left-color: var(--color-error);
}

.eudi-live-step--pending {
	border-left-color: var(--eudi-line);
}

.eudi-live-step__status {
	flex: none;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--eudi-muted);
	min-width: 5.5rem;
}

.eudi-live-step__body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.eudi-live-step__id {
	font-size: var(--text-xs);
	color: var(--eudi-muted);
	overflow-wrap: anywhere;
}

.eudi-live-step__meta {
	font-size: var(--text-xs);
	color: var(--eudi-subtle);
}

.eudi-live__join {
	border-top: var(--border-width) solid var(--eudi-line);
	padding-top: var(--s-4);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.eudi-live__scan {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	align-items: flex-start;
}

.eudi-live__video {
	width: 100%;
	max-width: 20rem;
	border-radius: var(--radius-md);
	background: var(--eudi-ink);
}

.eudi-live__join-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	align-items: flex-end;
}

.eudi-live__join-label {
	flex: 1 1 100%;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-live__join-input {
	flex: 1 1 16rem;
	padding: var(--s-2) var(--s-3);
	font-size: var(--text-sm);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	background: var(--eudi-surface);
	color: var(--eudi-ink);
}

.eudi-live__join-input:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.eudi-live__join-error {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--color-error);
}

.eudi-live__scenario-label {
	font-size: var(--text-xs);
	color: var(--eudi-muted);
	margin-top: var(--s-1);
}

.eudi-live__scenario {
	padding: var(--s-2) var(--s-3);
	font-size: var(--text-sm);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	background: var(--eudi-surface);
	color: var(--eudi-ink);
}

.eudi-live__scenario:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* ── Parcours SBB — ouverture d'un compte professionnel ─────────────────────
   Identité bancaire neutre : aucune couleur en dur, uniquement les tokens
   --eudi-* définis en tête de fichier (eux-mêmes adossés à @doxallia/design).
   La timeline de l'API réutilise telles quelles les classes .eudi-live-step*. */

.eudi-journey--pro .eudi-journey__badge {
	background: var(--eudi-dox);
}

.eudi-sbb-h2 {
	margin: 0 0 var(--s-2);
	font-size: var(--text-lg, 1.125rem);
	font-weight: var(--fw-semi);
}

.eudi-sbb-lead {
	margin: 0 0 var(--s-4);
	font-size: var(--text-sm);
	color: var(--eudi-muted);
	max-width: 60ch;
}

/* Le dossier — société, dirigeante, compte */

.eudi-sbb-dossier {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--s-4);
	margin: var(--s-5) 0 0;
}

.eudi-sbb-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-5);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	background: var(--eudi-surface);
}

.eudi-sbb-card__icon {
	display: inline-flex;
	color: var(--color-brand-text);
}

.eudi-sbb-card__icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.eudi-sbb-card__title {
	margin: 0;
	font-size: var(--text-base, 1rem);
	font-weight: var(--fw-semi);
}

.eudi-sbb-card__sub {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-sbb-dl {
	display: grid;
	gap: var(--s-2);
	margin: var(--s-2) 0 0;
}

.eudi-sbb-dl > div {
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: var(--s-2);
	align-items: baseline;
}

.eudi-sbb-dl dt {
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-sbb-dl dd {
	margin: 0;
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/* Le récit en quatre actes */

.eudi-sbb-narrative,
.eudi-sbb-creds {
	margin: var(--s-6) 0 0;
}

.eudi-sbb-narrative__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--s-4);
}

.eudi-sbb-narrative__item {
	padding: var(--s-4);
	border-inline-start: 3px solid var(--eudi-bank);
	border-radius: var(--radius-md);
	background: var(--eudi-surface);
}

.eudi-sbb-narrative__kicker {
	margin: 0;
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
	color: var(--color-brand-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.eudi-sbb-narrative__title {
	margin: var(--s-1) 0;
	font-size: var(--text-base, 1rem);
	font-weight: var(--fw-semi);
}

.eudi-sbb-narrative__body {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--eudi-muted);
}

.eudi-sbb-narrative__role {
	margin: var(--s-2) 0 0;
	font-size: var(--text-xs);
	color: var(--eudi-subtle);
}

/* Attestations demandées */

.eudi-sbb-cred-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s-3);
}

.eudi-sbb-cred {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	padding: var(--s-3) var(--s-4);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	background: var(--eudi-surface);
}

.eudi-sbb-cred__pt {
	display: inline-flex;
	color: var(--eudi-ok);
	flex: none;
}

.eudi-sbb-cred__pt svg {
	width: 1.1rem;
	height: 1.1rem;
}

.eudi-sbb-cred__body {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	font-size: var(--text-sm);
}

.eudi-sbb-cred__body span {
	color: var(--eudi-muted);
	font-size: var(--text-xs);
}

/* Parcours live enchaîné */

.eudi-sbb-live {
	margin: var(--s-6) 0 0;
	padding: var(--s-5);
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-lg);
	background: var(--eudi-surface);
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}

/* Comme .eudi-live : la classe l'emporte sur le display:none de `hidden`. */
.eudi-sbb-live[hidden] {
	display: none;
}

.eudi-sbb-live__head {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.eudi-sbb-live__badge {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-sbb-live__lead {
	margin: var(--s-1) 0 0;
	font-size: var(--text-sm);
	color: var(--eudi-muted);
	max-width: 70ch;
}

.eudi-sbb-live__status {
	margin: var(--s-2) 0 0;
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
}

.eudi-sbb-live__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-top: var(--s-3);
}

.eudi-sbb-acts {
	display: grid;
	gap: var(--s-5);
}

.eudi-sbb-act {
	padding: var(--s-4);
	border: var(--border-width) solid var(--eudi-line);
	border-inline-start: 3px solid var(--eudi-line);
	border-radius: var(--radius-lg);
	background: var(--eudi-bg);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.eudi-sbb-act[data-act-state="running"] {
	border-inline-start-color: var(--eudi-dox);
}

.eudi-sbb-act[data-act-state="success"] {
	border-inline-start-color: var(--eudi-ok);
}

.eudi-sbb-act[data-act-state="failed"] {
	border-inline-start-color: var(--color-error);
}

.eudi-sbb-act[data-act-state="skipped"] {
	opacity: 0.6;
}

.eudi-sbb-act__head {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.eudi-sbb-act__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: var(--radius-full);
	background: var(--eudi-bank);
	color: var(--eudi-on-accent);
	font-size: var(--text-xs);
	font-weight: var(--fw-semi);
}

.eudi-sbb-act__title {
	margin: 0;
	font-size: var(--text-base, 1rem);
	font-weight: var(--fw-semi);
}

.eudi-sbb-act__role,
.eudi-sbb-act__caption,
.eudi-sbb-act__uri-label {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-sbb-act__status {
	margin: var(--s-1) 0 0;
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
}

.eudi-sbb-act__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--s-5);
	align-items: start;
}

.eudi-sbb-act__session,
.eudi-sbb-act__display,
.eudi-sbb-act__timeline-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	min-width: 0;
}

.eudi-sbb-act__qr {
	width: 9rem;
	height: 9rem;
	align-self: flex-start;
	border: var(--border-width) solid var(--eudi-line);
	border-radius: var(--radius-md);
	background: var(--eudi-bg);
	image-rendering: pixelated;
}

.eudi-sbb-act__uri {
	font-size: var(--text-xs);
	overflow-wrap: anywhere;
	color: var(--eudi-ink);
}

.eudi-sbb-act__meta > div,
.eudi-sbb-act__display-list > div {
	display: grid;
	grid-template-columns: minmax(7rem, auto) 1fr;
	gap: var(--s-2);
	align-items: baseline;
	padding: var(--s-1) 0;
}

.eudi-sbb-act__meta dt,
.eudi-sbb-act__display-list dt {
	font-size: var(--text-xs);
	color: var(--eudi-muted);
}

.eudi-sbb-act__meta dd,
.eudi-sbb-act__display-list dd {
	margin: 0;
	font-size: var(--text-sm);
	overflow-wrap: anywhere;
}

.eudi-sbb-act__subtitle {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: var(--fw-semi);
}

.eudi-sbb-act__display-title {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--eudi-subtle);
}

.eudi-sbb-act__timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}