/* Espace entreprise B2B. Feuille autonome : ces pages ne passent pas par le build
   Tailwind de l'admin, une classe ajoutée ici n'a besoin d'aucune recompilation. */

:root {
	--ink: #171a20;
	--ink-soft: #393c41;
	--muted: #5c5e62;
	--subtle: #8e8e8e;
	--line: #e2e3e3;
	--surface: #ffffff;
	--background: #f4f4f4;
	--accent: #3e6ae1;
	--success: #0f7b3f;
	--success-bg: #e7f6ee;
	--danger: #c9251c;
	--danger-bg: #fdecea;
	--warning-bg: #fff6e0;
	--radius: 10px;
}

* { box-sizing: border-box; }

body.btob {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--background);
	color: var(--ink);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

/* La règle qui active les ligatures vit dans le CSS compilé de l'admin, que ces pages ne
   chargent pas : sans elle, les icônes s'affichent en toutes lettres ("arrow_forward"). */
.material-symbols-outlined {
	display: inline-block;
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	vertical-align: middle;
	font-feature-settings: "liga";
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- Forms */

.btob-form { display: flex; flex-direction: column; gap: 18px; }

.btob-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 560px) { .btob-row { grid-template-columns: 1fr; } }

.btob-field label, .btob-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-soft);
}

.btob-field input[type="text"],
.btob-field input[type="email"],
.btob-field input[type="password"],
.btob-input {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.btob-field input:focus, .btob-input:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgba(23, 26, 32, 0.08);
}

.btob-field.has-error input { border-color: var(--danger); }

/* Affichés comme ils seront enregistrés (le serveur retire aussi les accents). */
.btob-field input[name="first_name"], .btob-field input[name="last_name"] { text-transform: uppercase; }

.btob-help { margin-top: 6px; font-size: 12px; color: var(--subtle); }

.btob-errors {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--danger);
}

.btob-code-input input {
	text-align: center;
	font-size: 28px !important;
	font-weight: 600;
	letter-spacing: 0.4em;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Buttons */

.btob-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border: 0;
	border-radius: 8px;
	background: var(--ink);
	color: #ffffff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s;
}

.btob-button:hover { background: #000000; }
.btob-button:disabled { opacity: 0.5; cursor: default; }
.btob-button.is-block { width: 100%; }

.btob-button.is-secondary {
	background: var(--surface);
	color: var(--ink);
	border: 1.5px solid var(--line);
}

.btob-button.is-secondary:hover { border-color: var(--ink); }

.btob-link-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------------------------------------------------------------- Messages */

.btob-messages { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; width: 100%; }

.btob-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 14px;
	background: var(--background);
	border: 1px solid var(--line);
}

.btob-alert.is-error { background: var(--danger-bg); border-color: #f5c2bd; color: #8a1a13; }
.btob-alert.is-success { background: var(--success-bg); border-color: #b8e2c9; color: #0b5a2e; }
.btob-alert.is-info { background: #eef2fd; border-color: #cdd9f7; color: #24418f; }

/* ---------------------------------------------------------------- Autocomplete */

.btob-autocomplete { position: relative; }

.btob-suggestions {
	position: absolute;
	z-index: 10;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 300px;
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.btob-suggestions[hidden] { display: none; }

.btob-suggestions li {
	padding: 9px 12px;
	border-radius: 6px;
	cursor: pointer;
}

.btob-suggestions li.is-active, .btob-suggestions li:hover { background: var(--background); }

.btob-suggestions li.is-empty { color: var(--subtle); cursor: default; background: none; }

.btob-suggestion-title { font-size: 14px; font-weight: 500; }
.btob-suggestion-detail { font-size: 12px; color: var(--subtle); }

.btob-company-selected {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1.5px solid var(--ink);
	border-radius: 8px;
	background: #fafafa;
}

.btob-company-selected[hidden] { display: none; }
.btob-company-selected strong { display: block; font-size: 14px; }
.btob-company-selected small { color: var(--muted); }

/* ---------------------------------------------------------------- Fichiers déposés */

.btob-file-list { margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-soft); }
.btob-file-list li { display: flex; align-items: center; gap: 6px; padding: 3px 0; }

/* ================================================================ Pages d'accès
   Écran partagé repris de la connexion de l'admin Tesla : formulaire à gauche,
   vitrine à droite à partir de 1024px. */

.auth { display: flex; min-height: 100vh; width: 100%; }

.auth-panel {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.25rem;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

@media (min-width: 480px) { .auth-panel { padding: 1.5rem 2.5rem; } }

.auth-top {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
	min-height: 40px;
	font-size: 14px;
	color: var(--muted);
}

.auth-top-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 14px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s;
}

.auth-top-link:hover { border-color: var(--ink); }
.auth-top-link .material-symbols-outlined { font-size: 18px; }

.auth-wrapper {
	width: 100%;
	max-width: 400px;
	margin: auto;
	padding: 2.5rem 0;
}

.auth-wrapper.is-wide { max-width: 480px; }

.auth-logo { display: block; height: 56px; width: auto; margin: 0 auto 2.75rem; }

.auth-pretitle {
	margin: 0 0 0.5rem;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #64748b;
}

.auth-title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.6rem, 6vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: #0f172a;
}

.auth-lead { margin: 0 0 2rem; color: var(--muted); }

.auth-form { display: flex; flex-direction: column; gap: 1.25rem; }

.auth-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1.25rem;
	border-radius: 14px;
	background: #f1f5f9;
}

.auth-icon .material-symbols-outlined { font-size: 28px; color: var(--ink); }
.auth-icon.is-warning { background: var(--warning-bg); }
.auth-icon.is-warning .material-symbols-outlined { color: #7a5300; }

.auth-inline-link { margin-top: -0.5rem; text-align: right; font-size: 14px; }
.auth-inline-link a { color: var(--muted); text-decoration: none; }
.auth-inline-link a:hover { color: var(--ink); text-decoration: underline; }

.auth-secondary { margin-top: 1.5rem; text-align: center; font-size: 14px; color: var(--muted); }

.auth-legal { margin: 0; text-align: center; font-size: 12px; color: var(--subtle); }

.auth-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: #f1f5f9;
	font-size: 13px;
	color: var(--ink-soft);
}

.auth-note .material-symbols-outlined { font-size: 18px; color: var(--success); }

/* Flèche qui glisse au survol, comme sur la connexion de l'admin. */
.btob-button { transition: background 0.15s, transform 0.15s; }
.btob-button .material-symbols-outlined { font-size: 20px; transition: transform 0.2s ease; }
.btob-button:not(:disabled):hover { transform: translateY(-1px); }
.btob-button:hover .material-symbols-outlined:last-child:not(:first-child) { transform: translateX(3px); }

.btob-button.is-ghost { background: none; color: var(--muted); padding-left: 8px; padding-right: 12px; }
.btob-button.is-ghost:hover { background: #f1f5f9; color: var(--ink); transform: none; }
.btob-button.is-ghost:hover .material-symbols-outlined { transform: translateX(-3px); }

/* ---------------------------------------------------------------- Étapes de l'inscription */

.auth-steps { display: none; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.is-stepped .auth-steps { display: flex; gap: 8px; }

.auth-steps li {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-top: 10px;
	border-top: 3px solid var(--line);
	transition: border-color 0.3s;
}

.auth-steps li.is-active, .auth-steps li.is-done { border-top-color: var(--ink); }

.auth-step-dot { display: none; }
.auth-step-label { font-size: 12px; font-weight: 500; color: var(--subtle); }
.auth-steps li.is-active .auth-step-label { color: var(--ink); font-weight: 600; }
.auth-steps li.is-done .auth-step-label { color: var(--ink-soft); }

.auth-step {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.auth-step + .auth-step { margin-top: 1rem; }
.is-stepped .auth-step + .auth-step { margin-top: 0; }
.is-stepped .auth-step[hidden] { display: none; }
.is-stepped .auth-step:not([hidden]) { animation: auth-step-in 0.35s ease; }

@keyframes auth-step-in {
	from { opacity: 0; transform: translateX(12px); }
	to { opacity: 1; transform: none; }
}

.auth-step-title { padding: 0; margin-bottom: 0.25rem; font-size: 17px; font-weight: 600; color: var(--ink); }

.auth-step-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 0.5rem; }
.auth-step-actions .btob-button:last-child { min-width: 160px; }

/* Sans JavaScript, toutes les étapes sont visibles : les boutons de navigation n'ont pas de sens. */
.auth-form:not(.is-stepped) [data-step-next], .auth-form:not(.is-stepped) [data-step-back] { display: none; }

/* ---------------------------------------------------------------- Recherche d'entreprise */

.btob-field .auth-search input[type="text"] { padding-left: 42px; }
.auth-search-icon { position: absolute; left: 13px; top: 12px; color: var(--subtle); pointer-events: none; }

.btob-company-selected { justify-content: flex-start; padding: 14px 16px; }
.btob-company-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--ink);
	color: #ffffff;
}
.btob-company-text { flex: 1; min-width: 0; }
.btob-company-text strong, .btob-company-text small { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Mot de passe */

.auth-password { position: relative; }
.auth-password input { padding-right: 46px !important; }

.auth-password-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	padding: 6px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--subtle);
	cursor: pointer;
}

.auth-password-toggle:hover { color: var(--ink); background: #f1f5f9; }

.auth-rules {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 12px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--subtle);
}

.auth-rules li { display: flex; align-items: center; gap: 6px; transition: color 0.2s; }
.auth-rules li::before {
	content: "";
	flex: 0 0 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--line);
	transition: background 0.2s;
}
.auth-rules li.is-ok { color: var(--success); }
.auth-rules li.is-ok::before { background: var(--success); }

/* ---------------------------------------------------------------- Vitrine */

/* Collée à l'écran : quand le formulaire dépasse la hauteur de la fenêtre, la vitrine ne
   s'étire pas et les primes restent visibles. */
.auth-showcase {
	display: none;
	position: sticky;
	top: 0;
	height: 100vh;
	align-self: flex-start;
	flex: 1;
	max-width: 55%;
	overflow: hidden;
	background: linear-gradient(135deg, #171a20 0%, #2d3138 50%, #171a20 100%);
}

@media (min-width: 1024px) { .auth-showcase { display: block; } }

.auth-showcase::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -20%;
	width: 80%;
	height: 200%;
	background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
	pointer-events: none;
}

.auth-showcase::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
	pointer-events: none;
}

.auth-vehicles {
	position: absolute;
	top: 42%;
	left: 50%;
	width: 115%;
	max-width: 900px;
	aspect-ratio: 16 / 9;
	transform: translate(-50%, -50%);
}

.auth-vehicles img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.6));
	opacity: 0;
	animation: auth-vehicle 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Délais négatifs : une voiture est déjà en place à l'ouverture de la page. */
.auth-vehicles img:nth-child(1) { animation-delay: -2s; }
.auth-vehicles img:nth-child(2) { animation-delay: 4s; }

/* Deux voitures, 6 s chacune : entrée par la gauche, pause, sortie par la droite. */
@keyframes auth-vehicle {
	0% { transform: translateX(-20%); opacity: 0; }
	6% { opacity: 0; }
	12% { transform: translateX(0); opacity: 1; }
	42% { transform: translateX(0); opacity: 1; }
	50% { transform: translateX(20%); opacity: 0; }
	100% { transform: translateX(20%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.auth-vehicles img { animation: none; }
	.auth-vehicles img:first-child { opacity: 1; }
	.is-stepped .auth-step:not([hidden]) { animation: none; }
}

.auth-showcase-content {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.75rem;
}

.auth-primes { display: flex; gap: 1rem; }

.auth-prime {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 190px;
	padding: 16px 20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.auth-prime strong { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: #ffffff; }
.auth-prime span { font-size: 13px; color: rgba(255, 255, 255, 0.6); }

.auth-tagline {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

/* ================================================================ Espace connecté
   Barre latérale fixe et contenu à droite, sur le modèle de l'écran de configuration
   entreprise de Renault ; la barre se replie en bandeau sous 1024px. */

.app { position: relative; display: flex; min-height: 100vh; width: 100%; background: #f6f7f9; }

/* Deux halos flous derrière tout le contenu, sans jamais capter un clic. */
.app-aurora { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.app-aurora span { position: absolute; border-radius: 50%; filter: blur(80px); }
.app-aurora span:first-child { top: -14rem; left: 8rem; width: 34rem; height: 34rem; background: rgba(62, 106, 225, 0.08); }
.app-aurora span:last-child { bottom: -16rem; right: -10rem; width: 38rem; height: 38rem; background: rgba(16, 185, 129, 0.07); }

.app-eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--subtle);
}

.app-eyebrow.is-light { color: rgba(255, 255, 255, 0.55); }

/* ---------------------------------------------------------------- Barre latérale */

.app-rail {
	position: sticky;
	top: 0;
	z-index: 2;
	display: none;
	flex-direction: column;
	width: 280px;
	height: 100vh;
	flex-shrink: 0;
	padding: 28px 20px 20px;
	border-right: 1px solid rgba(226, 227, 227, 0.8);
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

@media (min-width: 1024px) { .app-rail { display: flex; } }

.app-brand { display: inline-flex; }
.app-rail .app-brand { margin: 0 0 22px 8px; }
.app-rail .app-brand img { height: 40px; width: auto; }
.app-rail > .app-eyebrow { margin-left: 8px; }

.app-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }

.app-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 10px;
	color: var(--ink-soft);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.app-nav a:hover { background: #f1f3f5; color: var(--ink); }
.app-nav a.is-active { background: var(--ink); color: #ffffff; box-shadow: 0 6px 16px rgba(23, 26, 32, 0.18); }

.app-rail-footer { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }

.app-company {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #ffffff;
}

.app-company-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	height: 36px;
	border-radius: 10px;
	background: #f1f5f9;
	color: #475569;
}

.app-company strong, .app-user-text strong { display: block; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.app-company small, .app-user-text small { display: block; font-size: 12px; color: var(--subtle); }

.app-user { display: flex; align-items: center; gap: 10px; padding: 4px 4px 0; }
.app-user-text { flex: 1; min-width: 0; }
.app-user form { margin: 0; }

.app-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #2d3138, #171a20);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
}

.app-icon-button {
	display: inline-flex;
	padding: 8px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--subtle);
	cursor: pointer;
}

.app-icon-button:hover { background: #f1f3f5; color: var(--ink); }

/* ---------------------------------------------------------------- Bandeau mobile */

.app-body { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.app-topbar .app-brand img { height: 28px; width: auto; }
.app-topbar-nav { display: flex; align-items: center; gap: 4px; }
.app-topbar-nav form { margin: 0; }
.app-topbar-nav a, .app-topbar-nav button {
	display: inline-flex;
	padding: 8px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--ink-soft);
	cursor: pointer;
}

.app-topbar-nav a { text-decoration: none; }

@media (min-width: 1024px) { .app-topbar { display: none; } }

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

.app-main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 32px 16px 24px; }
@media (min-width: 640px) { .app-main { padding: 44px 40px 32px; } }

.app-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 20px 16px 28px;
	font-size: 12px;
	color: var(--subtle);
	text-align: center;
}

.app-footer .material-symbols-outlined { font-size: 16px; color: var(--success); }
.app-footer-sep { width: 3px; height: 3px; margin: 0 6px; border-radius: 50%; background: var(--subtle); }

.app-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }

.app-title { margin: 0; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; color: #0f172a; }
.app-lead { margin: 8px 0 0; color: var(--muted); max-width: 560px; }

.app-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; }
.app-back:hover { color: var(--ink); }
.app-back .material-symbols-outlined { font-size: 18px; transition: transform 0.15s; }
.app-back:hover .material-symbols-outlined { transform: translateX(-3px); }

.app-card {
	margin-bottom: 20px;
	padding: 24px;
	border: 1px solid rgba(226, 227, 227, 0.9);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
}

@media (min-width: 640px) { .app-card { padding: 28px; } }

.app-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.app-card-head h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.app-card-head p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

.app-columns { display: grid; gap: 20px; margin-bottom: 20px; }
.app-columns > .app-card { margin-bottom: 0; }
@media (min-width: 900px) { .app-columns { grid-template-columns: 1fr 1fr; } }

.app-narrow { max-width: 560px; }

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

.app-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f1f5f9;
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

.app-chip .material-symbols-outlined { font-size: 15px; }
.app-chip.is-success { background: var(--success-bg); color: var(--success); }

.app-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.app-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18); }
.app-status.is-warning { background: #fff7e6; color: #b45309; }
.app-status.is-dark { background: rgba(251, 191, 36, 0.15); color: #fcd34d; }

/* ---------------------------------------------------------------- Dépôt */

.app-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 36px 20px;
	border: 2px dashed #d5d9de;
	border-radius: 14px;
	background: linear-gradient(180deg, #fbfcfd 0%, #f5f7f9 100%);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.app-dropzone:hover, .app-dropzone.is-dragover { border-color: var(--ink); background: #f3f5f8; }
.app-dropzone strong { font-size: 15px; color: var(--ink); }
.app-dropzone small { color: var(--subtle); }
.app-dropzone input[type="file"] { display: none; }

.app-dropzone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	color: var(--ink);
	font-size: 28px;
}

.app-dropzone-button { margin-top: 10px; padding: 9px 16px; font-size: 14px; pointer-events: none; }

.app-upload-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; }


/* ---------------------------------------------------------------- Liste des dossiers */

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

.app-folder {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.app-folder:hover { border-color: #c9ced4; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07); transform: translateY(-1px); }

.app-folder-thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: linear-gradient(180deg, #f8fafc, #e2e8f0);
}

.app-folder-thumb img { width: 52px; height: auto; object-fit: contain; }
.app-folder-main { min-width: 0; }
.app-folder-main strong { display: block; font-size: 15px; }
.app-folder-main small { display: block; font-size: 13px; color: var(--subtle); }
.app-folder-prime { font-size: 15px; font-weight: 650; white-space: nowrap; }
.app-folder-arrow { color: var(--subtle); transition: transform 0.15s; }
.app-folder:hover .app-folder-arrow { transform: translateX(3px); color: var(--ink); }

/* Chips et statut sur leur propre ligne sous 720px. */
.app-folder .app-chip, .app-folder .app-status { display: none; }

@media (min-width: 720px) {
	.app-folder { grid-template-columns: auto 1fr auto auto auto auto; }
	.app-folder .app-chip, .app-folder .app-status { display: inline-flex; }
}

.app-empty { display: flex; flex-direction: column; align-items: center; padding: 8px 0 12px; text-align: center; }
.app-empty-car { width: min(340px, 80%); height: auto; margin-bottom: 8px; opacity: 0.9; filter: drop-shadow(0 18px 24px rgba(15, 23, 42, 0.12)); }
.app-empty-title { margin: 0; font-size: 17px; font-weight: 600; }
.app-empty-text { margin: 4px 0 18px; color: var(--muted); }

.app-steps { display: grid; gap: 12px; width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; }
@media (min-width: 720px) { .app-steps { grid-template-columns: repeat(3, 1fr); } }

.app-steps li { display: flex; gap: 12px; padding: 16px; border-radius: 12px; background: #f8fafc; }
.app-steps li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ink);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
}
.app-steps strong { display: block; font-size: 14px; }
.app-steps small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- Fiche dossier */

.app-showcase {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 240px;
	margin-bottom: 20px;
	padding: 32px;
	overflow: hidden;
	border-radius: 20px;
	background: linear-gradient(135deg, #171a20 0%, #2d3138 55%, #171a20 100%);
	color: #ffffff;
}

.app-showcase::before {
	content: "";
	position: absolute;
	top: -60%;
	right: -10%;
	width: 70%;
	height: 220%;
	background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
	pointer-events: none;
}

.app-showcase-text { position: relative; z-index: 1; }
.app-showcase h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 650; letter-spacing: -0.02em; }
.app-showcase-rn { margin: 6px 0 0; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.app-showcase-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 22px; }
.app-showcase-prime { display: flex; flex-direction: column; font-size: 24px; font-weight: 650; line-height: 1.1; }
.app-showcase-prime small { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }

.app-showcase-car {
	position: relative;
	z-index: 1;
	display: none;
	width: min(46%, 440px);
	height: auto;
	margin: -20px -10px -30px 0;
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
}

@media (min-width: 720px) { .app-showcase-car { display: block; } }

.app-timeline { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .app-timeline { grid-template-columns: repeat(4, 1fr); gap: 0; } }

.app-timeline li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 48px; min-height: 40px; }
@media (min-width: 720px) {
	.app-timeline li { align-items: center; padding: 0 8px; text-align: center; }
	/* Le trait vers l'étape suivante part de chaque pastille, sauf la dernière. */
	.app-timeline li:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 19px;
		left: calc(50% + 26px);
		right: calc(-50% + 26px);
		height: 2px;
		background: var(--line);
	}
	.app-timeline li.is-done::after { background: var(--success); }
}

.app-timeline-dot {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #f1f5f9;
	color: var(--subtle);
}

@media (min-width: 720px) { .app-timeline-dot { position: static; margin-bottom: 8px; } }

.app-timeline-dot .material-symbols-outlined { font-size: 19px; }
.app-timeline li.is-done .app-timeline-dot { background: var(--success); color: #ffffff; }
.app-timeline li.is-current .app-timeline-dot { background: var(--ink); color: #ffffff; box-shadow: 0 0 0 5px rgba(23, 26, 32, 0.1); }
.app-timeline strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.app-timeline li:not(.is-done):not(.is-current) strong { color: var(--subtle); font-weight: 500; }
.app-timeline small { font-size: 12px; color: var(--subtle); }

.app-notice {
	display: flex;
	gap: 10px;
	margin-top: 24px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #eef2fd;
	color: #24418f;
	font-size: 14px;
}

.app-notice p { margin: 0; }

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

.app-usage-option {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.app-usage-option:hover { border-color: #c9ced4; }
.app-usage-option:has(input:checked) { border-color: var(--ink); background: #fafbfc; box-shadow: 0 0 0 3px rgba(23, 26, 32, 0.06); }
.app-usage-option input { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }

.app-usage-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 42px;
	height: 42px;
	border-radius: 12px;
	background: #f1f5f9;
	color: var(--ink);
}

.app-usage-text { flex: 1; min-width: 0; }
.app-usage-text strong { display: block; font-size: 15px; }
.app-usage-text small { display: block; font-size: 13px; color: var(--muted); }
.app-usage-amount { font-size: 17px; font-weight: 650; white-space: nowrap; }

.app-details { display: grid; gap: 0; margin: 0; }
.app-details > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #f0f1f3; font-size: 14px; }
.app-details > div:last-child { border-bottom: 0; }
.app-details dt { color: var(--muted); }
.app-details dd { margin: 0; font-weight: 550; text-align: right; }

/* ---------------------------------------------------------------- Validation et signature */

.app-status.is-info { background: #eef2fd; color: #2c4fb8; }
.app-status.is-danger { background: var(--danger-bg); color: var(--danger); }
.app-status.is-info .app-status-dot { box-shadow: 0 0 0 3px rgba(62, 106, 225, 0.18); }
.app-status.is-danger .app-status-dot { box-shadow: 0 0 0 3px rgba(201, 37, 28, 0.18); }
.app-status.is-dark.is-info { background: rgba(96, 165, 250, 0.16); color: #93c5fd; }
.app-status.is-dark.is-danger { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }

.app-chip.is-danger { background: var(--danger-bg); color: var(--danger); }

.app-notice.is-success { margin: 0 0 20px; background: var(--success-bg); color: #0b5a2e; }
.app-notice small { color: inherit; opacity: 0.8; }

.app-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--ink);
	color: #ffffff;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(23, 26, 32, 0.18);
	transition: transform 0.15s;
}

.app-banner:hover { transform: translateY(-1px); }
.app-banner > .material-symbols-outlined:last-child { transition: transform 0.15s; }
.app-banner:hover > .material-symbols-outlined:last-child { transform: translateX(3px); }

.app-banner-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
}

.app-banner-text { flex: 1; min-width: 0; }
.app-banner-text strong { display: block; font-size: 15px; }
.app-banner-text small { display: block; color: rgba(255, 255, 255, 0.65); }

.app-drafts { display: grid; gap: 20px; margin-bottom: 20px; }
.app-drafts > .app-card { margin-bottom: 0; }
@media (min-width: 900px) { .app-drafts { grid-template-columns: 1fr 1fr; } }

.app-draft-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.app-draft-head .app-folder-main { flex: 1; }
.app-draft .app-details { margin-bottom: 16px; }

.app-draft-prime {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 16px;
	border-radius: 12px;
	background: #f8fafc;
	font-size: 14px;
	color: var(--muted);
}

.app-draft-prime strong { font-size: 17px; color: var(--ink); }

.app-usage.is-compact { gap: 8px; }
.app-usage.is-compact .app-usage-option { padding: 12px 14px; }
.app-usage-option.is-static { cursor: default; border-color: var(--line); }
.app-usage + .app-details { margin-top: 12px; }

.app-confirm { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.app-confirm strong { font-size: 16px; }
.app-confirm p { margin: 4px 0 0; max-width: 620px; font-size: 14px; color: var(--muted); }

.app-signature {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding: 18px 20px;
	border: 1px solid #cdd9f7;
	border-radius: 14px;
	background: #f5f8ff;
}

.app-signature.is-error { border-color: #f5c2bd; background: var(--danger-bg); }
.app-signature form { margin: 0; }

.app-signature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	height: 44px;
	border-radius: 12px;
	background: #ffffff;
	color: var(--accent);
}

.app-signature.is-error .app-signature-icon { color: var(--danger); }
.app-signature-text { flex: 1; min-width: 240px; }
.app-signature-text strong { display: block; font-size: 15px; }
.app-signature-text p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

@media (min-width: 720px) { .app-timeline.is-five { grid-template-columns: repeat(5, 1fr); } }

/* ---------------------------------------------------------------- Accueil sans dossier */

.app-welcome { max-width: 760px; margin: 12px auto 0; }
.app-welcome .app-title { font-size: clamp(1.8rem, 4.5vw, 2.5rem); }
.app-welcome .app-lead { max-width: none; margin-bottom: 24px; font-size: 16px; }
.app-welcome .app-card { margin-bottom: 24px; }

.app-callout {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
	padding: 16px 18px;
	border: 1px solid #fde3a7;
	border-radius: 14px;
	background: #fffaeb;
	color: #7a4b00;
	font-size: 14px;
	line-height: 1.55;
}

.app-callout .material-symbols-outlined { color: #b45309; }
.app-callout p { margin: 0; }
.app-callout strong { color: #5c3800; }

.app-upload-note { margin: 0; font-size: 13px; color: var(--muted); }
label.btob-button { cursor: pointer; }
.btob-button.is-busy { opacity: 0.7; pointer-events: none; }

/* ---------------------------------------------------------------- Nouveau dossier (liste remplie) */

.app-new {
	margin-bottom: 20px;
	border: 1.5px dashed #c9ced4;
	border-radius: 16px;
	background: #ffffff;
	transition: border-color 0.15s;
}

.app-new[open] { border-style: solid; border-color: var(--line); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); }
.app-new:hover { border-color: var(--ink); }

.app-new summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
}

.app-new summary::-webkit-details-marker { display: none; }
.app-new summary strong { display: block; font-size: 15px; }
.app-new summary small { display: block; font-size: 13px; color: var(--muted); }
.app-new summary > span:nth-child(2) { flex: 1; }

.app-new-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--ink);
	color: #ffffff;
}

.app-new-chevron { color: var(--subtle); transition: transform 0.2s; }
.app-new[open] .app-new-chevron { transform: rotate(180deg); }
.app-new-body { padding: 0 20px 20px; }

/* ---------------------------------------------------------------- Pièces du dossier */

.doc-step {
	margin-top: 28px;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: linear-gradient(180deg, #f7f8fa 0%, #ffffff 75%);
}

@media (max-width: 560px) { .doc-step { padding: 20px; } }

.doc-step-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.doc-step-head .sign-step-head { flex: 1; min-width: 260px; }
.sign-step-badge.is-ink { background: var(--ink); }

.doc-step-progress { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 10px; min-width: 200px; }
.doc-step-progress strong { font-size: 30px; font-weight: 650; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.doc-step-progress strong small { color: var(--subtle); font-size: 16px; font-weight: 600; }
.doc-step-progress-label { color: var(--muted); font-size: 13px; }
.doc-step-bar { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: #e9ebee; }
.doc-step-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--success), #22a35c); transform-origin: left; }

.app-documents { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }

.app-document {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #ffffff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.app-document[data-drop-target]:hover { border-color: #cfd3d8; box-shadow: 0 14px 30px -24px rgba(23, 26, 32, 0.55); }
.app-document.is-done { border-color: #cfe9da; }
.app-document.is-locked { border-style: dashed; background: transparent; }
.app-document.is-locked .app-document-text { opacity: 0.75; }

.app-document-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	height: 44px;
	border-radius: 13px;
	background: #eef3ff;
	color: var(--accent);
}

.app-document-icon > .material-symbols-outlined:first-child { font-size: 22px; }
.app-document.is-done .app-document-icon { background: var(--success-bg); color: var(--success); }
.app-document.is-locked .app-document-icon { background: #eceef0; color: var(--subtle); }

/* Pastille d'état au coin de l'icône : validée ou refusée. */
.app-document-state {
	position: absolute;
	right: -5px;
	bottom: -5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: var(--success);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
}

.app-document-state.is-error { background: var(--danger); }

.app-document-text { flex: 1; min-width: 220px; }
.app-document-text strong { display: block; font-size: 15px; font-weight: 600; }
.app-document-text small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }

.doc-tag { flex: none; padding: 3px 10px; border-radius: 999px; background: #eef3ff; color: var(--accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.doc-tag.is-done { background: var(--success-bg); color: var(--success); }
.doc-tag.is-error { background: var(--danger-bg); color: var(--danger); }
.doc-tag.is-locked { background: #eceef0; color: var(--muted); }

.app-document-actions { display: flex; align-items: center; gap: 8px; }
.app-document-actions form { margin: 0; }
.app-document-actions .btob-button { padding: 9px 14px; font-size: 14px; }

.app-document-view {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 10px;
	color: var(--ink-soft);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s;
}

.app-document-view:hover { background: #f1f3f5; color: var(--ink); }
.app-document-view .material-symbols-outlined { font-size: 18px; }

.app-link { font-size: 14px; font-weight: 600; color: var(--ink); }

.app-status.is-success { background: var(--success-bg); color: var(--success); }
.app-status.is-success .app-status-dot { box-shadow: 0 0 0 3px rgba(15, 123, 63, 0.18); }
.app-status.is-dark.is-success { background: rgba(74, 222, 128, 0.14); color: #86efac; }

/* Pièce refusée : le motif s'affiche sous la ligne, là où le client vient de déposer. */
.app-document.has-error { border-color: #f5c2bd; background: #fffafa; }
.app-document.has-error .app-document-icon { background: var(--danger-bg); color: var(--danger); }

.app-document-error {
	flex-basis: 100%;
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--danger-bg);
	color: var(--danger);
	font-size: 14px;
	font-weight: 500;
}

/* Glisser-déposer sur une ligne de pièce. */
.app-document-drop {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	margin: 0;
	border: 2px dashed var(--ink);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.92);
	font-weight: 600;
	pointer-events: none;
}

.app-document.is-dragover .app-document-drop { display: flex; }

/* ---------------------------------------------------------------- Étape de signature (AH + PV de réception) */

.sign-step {
	margin-top: 28px;
	padding: 28px;
	border: 1px solid #dbe4fb;
	border-radius: 18px;
	background: linear-gradient(180deg, #f3f6ff 0%, #ffffff 75%);
}

.sign-step.is-signed,
.sign-step.is-complete { border-color: #cbe9d8; background: linear-gradient(180deg, #ecf8f1 0%, #ffffff 75%); }
.sign-step.is-error { border-color: #f5c2bd; background: linear-gradient(180deg, #fdf0ee 0%, #ffffff 75%); }
@media (max-width: 560px) { .sign-step { padding: 20px; } }

.sign-step-head { max-width: 660px; }
.sign-step-head h2 { margin: 14px 0 6px; font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 650; letter-spacing: -0.015em; }
.sign-step-head p { margin: 0; color: var(--muted); font-size: 15px; }

.sign-step-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px 5px 9px;
	border-radius: 999px;
	background: var(--accent);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sign-step-badge .material-symbols-outlined { font-size: 16px; }
.is-signed .sign-step-badge,
.is-complete .sign-step-badge { background: var(--success); }
.is-error .sign-step-badge { background: var(--danger); }

.sign-step-mail {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 22px;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0 14px 34px -22px rgba(23, 26, 32, 0.45);
}

.sign-step-mail form { margin: 0; }

.sign-step-mail-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 48px;
	height: 48px;
	border-radius: 14px;
	background: #eef3ff;
	color: var(--accent);
	font-size: 24px;
}

.is-error .sign-step-mail-icon { background: var(--danger-bg); color: var(--danger); }
.sign-step-mail-text { display: flex; flex: 1; flex-direction: column; min-width: 200px; }
.sign-step-mail-text small { color: var(--muted); font-size: 13px; }
.sign-step-mail-text strong { font-size: 17px; font-weight: 650; overflow-wrap: anywhere; }

.sign-step-docs { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .sign-step-docs { grid-template-columns: 1fr 1fr; } }

.sign-step-docs li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #ffffff;
}

.sign-step-docs li > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sign-step-docs strong { font-size: 14px; font-weight: 600; }
.sign-step-docs small { color: var(--muted); font-size: 13px; }

.sign-step-doc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--background);
	color: var(--ink);
}

.sign-step-tag { flex: none; padding: 3px 10px; border-radius: 999px; background: #eef3ff; color: var(--accent); font-size: 12px; font-weight: 600; }
.is-signed .sign-step-tag { background: var(--warning-bg); color: #8a5a00; }
.is-complete .sign-step-tag { background: var(--success-bg); color: var(--success); }

.sign-step-flow { display: grid; gap: 14px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; }
@media (min-width: 720px) { .sign-step-flow { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.sign-step-flow li { display: flex; align-items: flex-start; gap: 12px; }
.sign-step-flow li > div { display: flex; flex-direction: column; gap: 2px; }
.sign-step-flow strong { font-size: 14px; font-weight: 600; }
.sign-step-flow small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.sign-step-flow li:not(.is-done):not(.is-current) strong { color: var(--subtle); }

.sign-step-flow-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 30px;
	height: 30px;
	border-radius: 50%;
	background: #eceef0;
	color: var(--subtle);
	font-size: 13px;
	font-weight: 650;
}

.sign-step-flow-dot .material-symbols-outlined { font-size: 18px; }
.sign-step-flow li.is-current .sign-step-flow-dot { background: var(--ink); color: #ffffff; box-shadow: 0 0 0 5px rgba(23, 26, 32, 0.1); }
.sign-step-flow li.is-done .sign-step-flow-dot { background: var(--success); color: #ffffff; }

.sign-step-hint { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.sign-step-hint .material-symbols-outlined { font-size: 17px; }

/* ---------------------------------------------------------------- Animations (discrètes)
   Entrée des blocs en cascade, traits de la frise qui se tracent, pastilles qui apparaissent,
   étape en cours qui respire. portal.js ajoute les chiffres qui défilent, la mise en valeur de
   la pièce déposée et l'analyse en cours. Rien de tout cela si l'utilisateur réduit les animations. */

@keyframes btob-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes btob-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes btob-pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes btob-ring { 0% { box-shadow: 0 0 0 0 rgba(23, 26, 32, 0.25); } 70%, 100% { box-shadow: 0 0 0 10px rgba(23, 26, 32, 0); } }
@keyframes btob-glow { 0% { box-shadow: 0 0 0 0 rgba(15, 123, 63, 0.35); } 100% { box-shadow: 0 0 0 14px rgba(15, 123, 63, 0); } }
@keyframes btob-scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes btob-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.app-showcase,
.app-card { animation: btob-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.app-card { animation-delay: 0.06s; }

.app-document,
.sign-step-docs li,
.sign-step-flow li { animation: btob-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.app-document:nth-child(1), .sign-step-docs li:nth-child(1), .sign-step-flow li:nth-child(1) { animation-delay: 0.18s; }
.app-document:nth-child(2), .sign-step-docs li:nth-child(2), .sign-step-flow li:nth-child(2) { animation-delay: 0.26s; }
.app-document:nth-child(3), .sign-step-flow li:nth-child(3) { animation-delay: 0.34s; }

.app-timeline li.is-done::after { transform-origin: left; animation: btob-grow 0.5s ease-out both; }
.app-timeline li:nth-child(1)::after { animation-delay: 0.2s; }
.app-timeline li:nth-child(2)::after { animation-delay: 0.35s; }
.app-timeline li:nth-child(3)::after { animation-delay: 0.5s; }
.app-timeline li:nth-child(4)::after { animation-delay: 0.65s; }

.doc-step-bar > span { animation: btob-grow 0.9s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.app-document-state { animation: btob-pop 0.35s 0.5s both; }

.app-timeline li.is-current .app-timeline-dot,
.sign-step-flow li.is-current .sign-step-flow-dot { animation: btob-ring 2.6s 1s ease-out infinite; }
.sign-step:not(.is-signed):not(.is-complete):not(.is-error) .sign-step-mail-icon { animation: btob-float 3.2s ease-in-out infinite; }

/* Pièce tout juste acceptée. */
.app-document.is-new { border-color: #9fd6b6; animation: btob-glow 1.4s ease-out 2; }
.app-document.is-new .app-document-state { animation: btob-pop 0.45s 0.15s both; }

/* Analyse du PDF en cours. */
.app-document.is-busy { overflow: hidden; border-color: #cdd9f7; }
.app-document.is-busy::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(62, 106, 225, 0.12), transparent);
	animation: btob-scan 1.3s linear infinite;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.app-showcase, .app-card, .app-document, .sign-step-docs li, .sign-step-flow li,
	.app-timeline li::after, .doc-step-bar > span, .app-document-state, .app-timeline-dot,
	.sign-step-flow-dot, .sign-step-mail-icon, .app-document.is-busy::after { animation: none !important; }
}

/* ---------------------------------------------------------------- Dépôt : fichiers retenus, refus, bouton */

.app-dropzone.is-filled { border-style: solid; border-color: #b9c8f2; background: #f5f8ff; padding: 22px 20px; }
.app-dropzone.is-filled .app-dropzone-icon { width: 44px; height: 44px; font-size: 22px; }

.app-upload-files { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.app-upload-files:empty { display: none; }

.app-upload-files li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 10px 10px 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #ffffff;
	animation: btob-rise 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.app-upload-file-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	height: 36px;
	border-radius: 10px;
	background: #fdecea;
	color: #c9251c;
}

.app-upload-file-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.app-upload-file-text strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.app-upload-file-text small { color: var(--subtle); font-size: 12px; }

.app-upload-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; }
.app-upload-note .material-symbols-outlined { font-size: 18px; color: var(--subtle); }

@keyframes btob-ready { 0% { box-shadow: 0 0 0 0 rgba(23, 26, 32, 0.35); } 100% { box-shadow: 0 0 0 14px rgba(23, 26, 32, 0); } }
.app-upload-submit.is-ready { animation: btob-ready 1s ease-out 2; }

.app-upload-errors { margin-top: 14px; padding: 14px 16px; border: 1px solid #f5c2bd; border-radius: 12px; background: var(--danger-bg); animation: btob-rise 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.app-upload-errors-head { display: flex; align-items: center; gap: 8px; color: var(--danger); }
.app-upload-errors-head strong { font-size: 14px; }
.app-upload-errors ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.app-upload-errors li, .app-upload-errors > p { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: #ffffff; color: var(--ink-soft); font-size: 14px; }
.app-upload-errors ul li { margin: 0; }
.app-upload-errors-file { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.app-upload-errors-file .material-symbols-outlined { font-size: 18px; color: var(--danger); }
.app-upload-errors-card { margin-bottom: 20px; }
.app-upload-errors-card .app-upload-errors { margin-top: 0; }
.app-upload-errors-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- Onglet RIB et coordonnées bancaires */

.app-nav-alert {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--danger);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 0 0 0 rgba(201, 37, 28, 0.4);
	animation: btob-alert 2.4s ease-out infinite;
}

@keyframes btob-alert { 0% { box-shadow: 0 0 0 0 rgba(201, 37, 28, 0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(201, 37, 28, 0); } }
.app-topbar-rib { position: relative; }
.app-topbar-rib .app-nav-alert { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; font-size: 10px; }

.app-banner.is-warning { background: linear-gradient(135deg, #7c2d12 0%, #c2410c 100%); }

.rib-alert {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 20px;
	padding: 18px 20px;
	border: 1px solid #fed7aa;
	border-radius: 14px;
	background: #fff7ed;
}

.rib-alert-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;
	height: 38px;
	border-radius: 50%;
	background: #ea580c;
	color: #ffffff;
}

.rib-alert strong { display: block; font-size: 15px; }
.rib-alert p { margin: 2px 0 0; color: #9a3412; font-size: 14px; }

.rib-layout { display: grid; gap: 20px; margin-bottom: 20px; }
@media (min-width: 900px) { .rib-layout { grid-template-columns: 1.15fr 1fr; align-items: stretch; } }

/* Carte bancaire : le compte enregistré, IBAN masqué. */
.rib-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	min-height: 230px;
	padding: 28px;
	overflow: hidden;
	border-radius: 20px;
	background: linear-gradient(135deg, #171a20 0%, #2d3138 55%, #1d2330 100%);
	color: #ffffff;
	box-shadow: 0 24px 50px -28px rgba(23, 26, 32, 0.8);
	animation: btob-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.rib-card::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -20%;
	width: 70%;
	height: 180%;
	background: radial-gradient(ellipse at center, rgba(62, 106, 225, 0.25) 0%, transparent 70%);
	pointer-events: none;
}

.rib-card > * { position: relative; }
.rib-card-top { display: flex; align-items: center; justify-content: space-between; }
.rib-card-logo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); }
.rib-card-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; background: rgba(34, 197, 94, 0.16); color: #86efac; font-size: 12px; font-weight: 600; }
.rib-card-status .material-symbols-outlined { font-size: 16px; }
.rib-card small { display: block; color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.rib-card-iban strong { display: block; margin-top: 6px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: clamp(1.05rem, 2.6vw, 1.45rem); font-weight: 600; letter-spacing: 0.06em; }
.rib-card-meta { display: flex; flex-wrap: wrap; gap: 16px 36px; }
.rib-card-meta strong { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; }

.rib-side h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.rib-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.rib-security { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.rib-security .material-symbols-outlined { font-size: 18px; color: var(--success); }

.rib-manual { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; }
.rib-manual > strong { font-size: 14px; }
.rib-manual > p { margin: 4px 0 14px; color: var(--muted); font-size: 13px; }
.rib-input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.04em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
	.app-upload-files li, .app-upload-submit.is-ready, .app-upload-errors, .app-nav-alert, .rib-card { animation: none !important; }
}

/* ---------------------------------------------------------------- Après la signature : RIB à ajouter, dossier complet */

.sign-step.is-rib { border-color: #fed7aa; background: linear-gradient(180deg, #fff7ed 0%, #ffffff 75%); }
.is-rib .sign-step-badge { background: #ea580c; }

.sign-step-cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 22px;
	padding: 18px 20px;
	border: 1px solid #fdba74;
	border-radius: 14px;
	background: #ffffff;
	color: var(--ink);
	text-decoration: none;
	box-shadow: 0 14px 34px -22px rgba(234, 88, 12, 0.6);
	transition: transform 0.15s, box-shadow 0.15s;
}

.sign-step-cta:hover { transform: translateY(-1px); box-shadow: 0 18px 38px -22px rgba(234, 88, 12, 0.75); }
.sign-step-cta .sign-step-mail-icon { background: #fff7ed; color: #ea580c; animation: btob-float 3.2s ease-in-out infinite; }
.sign-step-cta .btob-button { pointer-events: none; }

.sign-step.is-final .sign-step-mail-icon { background: var(--success-bg); color: var(--success); }
.sign-step.is-final .sign-step-head h2 { font-size: clamp(1.45rem, 3.2vw, 1.95rem); }

@media (prefers-reduced-motion: reduce) { .sign-step-cta .sign-step-mail-icon { animation: none !important; } }

/* ---------------------------------------------------------------- Langue (FR / EN) */

.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #ffffff;
}

.lang-switch > .material-symbols-outlined { margin: 0 4px 0 6px; color: var(--subtle); font-size: 17px; }

.lang-switch button,
.app-topbar-nav .lang-switch button {
	padding: 4px 10px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--muted);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.lang-switch button:hover { color: var(--ink); }
.lang-switch button.is-active,
.app-topbar-nav .lang-switch button.is-active { background: var(--ink); color: #ffffff; }
.app-rail-footer .lang-switch { align-self: flex-start; margin-bottom: 4px; }
.app-topbar-nav .lang-switch > .material-symbols-outlined { display: none; }

/* ---------------------------------------------------------------- Coordonnées de la société */

.auth-step-subtitle,
.app-company-contact-title { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 -4px; font-size: 14px; font-weight: 600; color: var(--ink); }
.auth-step-subtitle small,
.app-company-contact-title small { color: var(--muted); font-size: 13px; font-weight: 400; }
.app-company-contact { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }