/* ============================================================================
   WAYFLARE — Design system (mobile first)
   Palette : Bleu Nuit #102A43 · Bleu Profond #0B2135 · Bleu Secondaire #24557A
             Doré Mat #B89A5E · Ivoire #F5F1E8 · Blanc #FFFFFF
   Trois espaces, un segment de la manche à air chacun (attribut data-space sur <html>) :
             superadmin = Control Tower · company = Cockpit · portal = Lounge
   ============================================================================ */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
	--c-navy:  #102A43;
	--c-deep:  #0B2135;
	--c-blue:  #24557A;
	--c-gold:  #B89A5E;
	--c-ivory: #F5F1E8;
	--c-white: #FFFFFF;
	--c-steel: #8CA3B1;   /* bleu acier, 2e tiers de la manche à air sur fond sombre : étape à venir de la Trajectoire */

	--c-success: #2F7D5B;
	--c-warning: #B8862B;
	--c-danger:  #B5473F;
	--c-notif:   var(--c-navy);   /* pastilles de compteur (non lus, à traiter) : couleurs de la charte */
	--c-info:    #24557A;

	--t-1: #102A43;
	--t-2: #4A5D73;
	--t-3: #7B8A9C;
	--t-on-dark: #F5F1E8;
	--t-on-dark-2: rgba(245,241,232,.7);

	--surface: #FFFFFF;
	--surface-2: #FBF9F4;
	--line: rgba(16,42,67,.10);
	--line-strong: rgba(16,42,67,.18);

	--brand-primary: var(--c-navy);
	--brand-primary-hover: var(--brand-secondary);
	--brand-secondary: var(--c-blue);
	--brand-on-primary: #F5F1E8;
	--brand-on-secondary: #F5F1E8;

	/* Cadre de l'application : redéfini par espace (voir « Espaces ») */
	--page-bg: var(--c-ivory);
	--bar-bg: var(--c-navy);
	--bar-fg: #F5F1E8;
	--bar-hover: rgba(255,255,255,.12);
	--bar-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 12px rgba(11,33,53,.25);
	--nav-bg: var(--c-deep);
	--nav-fg: #F5F1E8;
	--nav-fg-2: rgba(245,241,232,.7);
	--nav-icon: currentColor;
	--nav-hover: rgba(245,241,232,.06);
	--nav-active: rgba(245,241,232,.10);
	--nav-line: rgba(245,241,232,.08);
	--nav-edge: none;
	/* Rubrique active du menu : surbrillance ivoire, pictogramme bleu ; compteurs en pastilles ivoire */
	--nav-active-bg: var(--c-ivory);
	--nav-active-fg: var(--c-navy);
	--nav-active-icon: var(--c-blue);
	--nav-count-bg: rgba(245,241,232,.92);
	--nav-count-fg: var(--c-deep);
	--hero-bg: var(--c-navy);
	--hero-fg: #F5F1E8;
	--hero-fg-2: rgba(245,241,232,.7);

	/* Graphiques : palette catégorielle, dans cet ordre (série 1 = --chart-1…). Dérivée des teintes de la marque et
	   validée sur fond blanc : contraste ≥ 3:1, séries voisines distinctes y compris pour les daltoniens. Ne pas réordonner. */
	--chart-1: #28679B;   /* bleu */
	--chart-2: #B58A33;   /* doré */
	--chart-3: #984929;   /* terracotta */
	--chart-4: #9663A6;   /* prune */
	--chart-5: #506F1C;   /* olive */
	--chart-6: #129A92;   /* sarcelle */
	--chart-other: #AEB8C2;   /* « Autres », série en retrait */
	--chart-grid: rgba(16,42,67,.08);
	--chart-axis: rgba(16,42,67,.28);

	/* Logo, variante couleur (wayflare-logo-couleur) : nom, mât et 1er tiers de la manche à air, puis 2e et 3e tiers */
	--wf-1: #102A43;
	--wf-2: #24557A;
	--wf-3: #B89A5E;

	--shadow-1: 0 1px 2px rgba(16,42,67,.06), 0 8px 24px rgba(16,42,67,.08);
	--shadow-2: 0 2px 4px rgba(16,42,67,.08), 0 16px 40px rgba(16,42,67,.14);

	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 20px;

	--appbar-h: 56px;
	--tabbar-h: 64px;
	--topnav-h: 48px;
	--sidenav-w: 260px;
	--ease: cubic-bezier(.2,.8,.2,1);

	--font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;   /* données : références, heures, n° de série */

	/* Bootstrap overrides */
	--bs-body-font-family: var(--font);
	--bs-body-font-size: 1rem;
	--bs-body-color: var(--t-1);
	--bs-body-bg: var(--page-bg);
	--bs-primary: #102A43;
	--bs-primary-rgb: 16,42,67;
	--bs-link-color: #24557A;
	--bs-link-color-rgb: 36,85,122;
	--bs-link-hover-color: #102A43;
	--bs-link-hover-color-rgb: 16,42,67;
	--bs-border-color: rgba(16,42,67,.10);
	--bs-border-radius: 8px;
	--bs-border-radius-lg: 12px;
	--bs-focus-ring-color: rgba(36,85,122,.35);
}

/* ── Espaces ────────────────────────────────────────────────────────────────
   Du plus sombre au plus clair, comme la manche à air du logo :
   Control Tower (bleu nuit) · Cockpit (bleu) · Lounge (clair, couleurs de l'entreprise). */

/* Control Tower : cadre nuit continu (menu + barre), fond de page froid */
:root[data-space="superadmin"]{
	--page-bg: #ECEFF3;
	--surface-2: #F5F7F9;
	--bar-bg: var(--c-deep);
	--hero-bg: var(--c-deep);
}

/* Cockpit : menu bleu, barre claire sur desktop (bleue sur mobile, où elle porte seule l'identité), actions en bleu */
:root[data-space="company"]{
	--brand-primary: var(--c-blue);
	--brand-primary-hover: var(--c-navy);
	--bar-bg: var(--c-blue);
	--nav-bg: var(--c-blue);
	--nav-fg-2: rgba(245,241,232,.8);
	--nav-hover: rgba(255,255,255,.09);
	--nav-active: rgba(11,33,53,.30);
	--nav-line: rgba(245,241,232,.16);
	--hero-bg: var(--c-blue);
	--hero-fg-2: rgba(245,241,232,.82);
}
@media (min-width: 992px){
	:root[data-space="company"]{
		--bar-bg: var(--surface);
		--bar-fg: var(--t-1);
		--bar-hover: rgba(16,42,67,.06);
		--bar-shadow: 0 1px 0 var(--line);
	}
}

/* Lounge : marque blanche. Barre et bandeau aux couleurs de l'entreprise, menu clair, Wayflare en signature */
:root[data-space="portal"]{
	--bar-bg: var(--brand-primary);
	--bar-fg: var(--brand-on-primary);
	--nav-bg: var(--surface);
	--nav-fg: var(--t-1);
	--nav-fg-2: var(--t-2);
	--nav-icon: var(--brand-secondary);
	--nav-hover: rgba(16,42,67,.05);
	--nav-active: rgba(16,42,67,.08);
	--nav-line: var(--line);
	--nav-edge: 1px 0 0 var(--line);
	--nav-active-bg: rgba(16,42,67,.07);
	--nav-active-fg: var(--t-1);
	--nav-active-icon: var(--brand-secondary);
	--nav-count-bg: var(--c-navy);
	--nav-count-fg: #F5F1E8;
	--hero-bg: var(--brand-primary);
	--hero-fg: var(--brand-on-primary);
	--hero-fg-2: var(--brand-on-primary);
}

/* ── Logo Wayflare (partials/logo.php) ──────────────────────────────────── */
/* Le logo porte la manche à air au-dessus du nom : hauteurs ~1,25 × celles de l'ancien logo, pour un nom de même taille */
.wf-logo{ display: block; height: 35px; width: auto; flex: none; }
.wf-logo .wf-s1{ fill: var(--wf-1); }
.wf-logo .wf-s2{ fill: var(--wf-2); }
.wf-logo .wf-s3{ fill: var(--wf-3); }
/* Variante inverse, sur fond sombre (wayflare-logo-inverse). Les deux variantes s'emploient telles quelles : ni teinte, ni opacité. */
.wf-logo.on-dark{ --wf-1: #F5F1E8; --wf-2: #8CA3B1; --wf-3: #B89A5E; }
/* Logo animé ($logoAnimated) : le <picture> s'efface de la mise en page, l'image porte .wf-logo et ses hauteurs */
.wf-pic{ display: contents; }

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
	margin: 0;
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--t-1);
	background: var(--page-bg);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	min-height: 100dvh;
	padding-top: calc(var(--appbar-h) + env(safe-area-inset-top));
	padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
body.no-shell{ padding-top: 0; padding-bottom: 0; }
::selection{ background: var(--c-navy); color: var(--c-ivory); }
input, textarea{ caret-color: var(--c-blue); }
*{ scrollbar-color: rgba(36,85,122,.45) transparent; scrollbar-width: thin; }
a{ color: var(--c-blue); text-decoration: none; text-underline-offset: .15em; }
a:hover{ color: var(--c-navy); text-decoration: underline; }
:focus-visible{ outline: 3px solid rgba(36,85,122,.45); outline-offset: 2px; border-radius: 4px; }
img{ max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3{ font-weight: 600; color: var(--t-1); line-height: 1.2; margin: 0 0 .5rem; text-wrap: balance; }
h1, .h1{ font-size: 1.5rem; letter-spacing: -.02em; }
h2, .h2, h3, .h3{ letter-spacing: -.01em; }
h2, .h2{ font-size: 1.25rem; }
h3, .h3{ font-size: 1.125rem; }
.text-2{ color: var(--t-2); }
.text-3{ color: var(--t-3); }
.text-gold{ color: var(--c-gold); }
.small{ font-size: .875rem; }
.xsmall{ font-size: .75rem; }
.fw-500{ font-weight: 500; }
.fw-600{ font-weight: 600; }
.fw-700{ font-weight: 700; }
.mono{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@media (min-width: 992px){
	h1, .h1{ font-size: 1.875rem; letter-spacing: -.025em; }
}

/* ── App bar ────────────────────────────────────────────────────────────── */
.appbar{
	position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
	height: calc(var(--appbar-h) + env(safe-area-inset-top));
	padding-top: env(safe-area-inset-top);
	background: var(--bar-bg);
	color: var(--bar-fg);
	display: flex; align-items: center;
	box-shadow: var(--bar-shadow);
}
.appbar-in{
	width: 100%; height: var(--appbar-h);
	display: flex; align-items: center; gap: .5rem;
	padding: 0 .75rem;
}
.appbar-title{
	min-width: 0;
	font-weight: 700; font-size: 1.0625rem;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: var(--bar-fg);
}
/* Titre de page, et au-dessus le nom de l'espace quand le menu latéral n'est pas affiché (mobile) */
.appbar-titles{ flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.appbar-space{ font-size: .8125rem; color: var(--bar-fg); opacity: .78; }
.appbar-brand{ display: flex; align-items: center; gap: .625rem; color: var(--bar-fg); text-decoration: none; margin-right: .25rem; }
.appbar-brand .wf-logo{ height: 20px; }
.appbar-brand .tenant-logo{ height: 32px; max-width: 88px; }
.appbar-brand:hover{ text-decoration: none; color: var(--bar-fg); }
.appbar-btn{
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	color: var(--bar-fg); background: transparent; border: 0;
	font-size: 1.125rem; transition: background .15s var(--ease);
	text-decoration: none; position: relative;
}
.appbar-btn:hover, .appbar-btn:focus-visible{ background: var(--bar-hover); color: var(--bar-fg); text-decoration: none; }
.appbar .dropdown-menu{ margin-top: .5rem; }
/* Pastille d'impersonation (super admin connecté dans Cockpit / Lounge) : un clic ramène à la Control Tower */
.appbar-pill{
	display: inline-flex; align-items: center; gap: .5rem;
	height: 32px; padding: 0 .75rem; border-radius: 16px;
	background: var(--c-gold); color: var(--c-deep);
	font-weight: 700; font-size: .8125rem; line-height: 1;
	text-decoration: none; white-space: nowrap; max-width: 40vw;
	transition: filter .15s var(--ease);
}
.appbar-pill:hover, .appbar-pill:focus-visible{ color: var(--c-deep); text-decoration: none; filter: brightness(1.08); }
.appbar-pill-label{ overflow: hidden; text-overflow: ellipsis; }
.appbar-pill-out{ font-size: .75rem; opacity: .7; }
@media (max-width: 575px){
	.appbar-pill{ width: 32px; padding: 0; justify-content: center; }
	.appbar-pill-label, .appbar-pill-out{ display: none; }
}
.avatar{
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--c-gold); color: var(--c-deep);
	font-weight: 700; font-size: .8125rem; letter-spacing: .02em;
}
.avatar-lg{ width: 48px; height: 48px; font-size: 1rem; }
.badge-count{
	position: absolute; top: 6px; right: 6px;
	min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 9px; background: var(--c-notif); color: #fff;
	font-size: .6875rem; font-weight: 700; line-height: 18px; text-align: center;
}
.badge-notif{
	display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
	min-width: 18px; height: 18px; padding: 0 5px; margin-right: .375rem;
	border-radius: 9px; background: var(--c-notif); color: #fff;
	font-size: .6875rem; font-weight: 700; line-height: 18px; text-align: center;
}
.text-notif{ color: var(--c-notif); }

/* ── Tab bar (mobile) ───────────────────────────────────────────────────── */
.tabbar{
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
	height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--surface);
	border-top: 1px solid var(--line);
	display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.tabbar a, .tabbar button{
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	height: var(--tabbar-h); color: var(--t-3); text-decoration: none;
	font-size: .6875rem; font-weight: 600; background: none; border: 0; position: relative;
	transition: color .15s var(--ease);
}
.tabbar a i, .tabbar button i{ font-size: 1.25rem; }
.tabbar a span, .tabbar button span{ text-align: center; line-height: 1.1; padding: 0 .125rem; }
.tabbar a:hover, .tabbar button:hover{ text-decoration: none; color: var(--brand-secondary); }
.tabbar a.active{ color: var(--brand-primary); }
.tabbar a.active::before{
	content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 28px; height: 2px; background: var(--brand-primary); border-radius: 0 0 2px 2px;
}
.tabbar .badge-count{ top: 8px; right: calc(50% - 22px); }

/* ── Top nav (Lounge, desktop) : barre horizontale des catégories sous la barre haute ─ */
/* Mobile d'abord : la barre n'existe pas, la tab bar et la feuille « Plus » naviguent. */
.topnav{ display: none; }
/* Logo de l'entreprise et nom de l'espace côte à côte, centrés verticalement, dans la barre haute */
.appbar-brand.brand-pair{ gap: .75rem; margin-right: .5rem; }
.appbar-brand.brand-pair .space-sign{ height: 30px; }
@media (min-width: 992px){
	body.has-topnav{ padding-top: calc(var(--appbar-h) + var(--topnav-h) + env(safe-area-inset-top)); }
	.topnav{
		display: block; position: fixed; left: 0; right: 0; z-index: 1029;
		top: calc(var(--appbar-h) + env(safe-area-inset-top)); height: var(--topnav-h);
		background: var(--surface); border-bottom: 1px solid var(--line);
	}
	.topnav-in{ max-width: 1280px; margin: 0 auto; padding: 0 2rem; height: 100%; display: flex; align-items: stretch; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
	.topnav-in::-webkit-scrollbar{ display: none; }
	.topnav a{
		display: inline-flex; align-items: center; gap: .5rem; padding: 0 .875rem; flex: none;
		color: var(--t-2); font-weight: 600; font-size: .9375rem; text-decoration: none;
		border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s var(--ease);
	}
	.topnav a i{ color: var(--brand-secondary); font-size: .9375rem; }
	.topnav a:hover{ color: var(--t-1); text-decoration: none; }
	.topnav a.active{ color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
	.topnav a.active i{ color: var(--brand-primary); }
	.topnav .badge-notif{ margin: 0; }
	.appbar-brand.brand-pair .tenant-logo{ height: 36px; max-width: 120px; }
	.appbar-brand.brand-pair .space-sign{ height: 34px; }
	.appbar-brand.brand-pair .space-sign .space-word{ font-size: 1.0625rem; }
	body.has-topnav .appbar-brand.brand-pair{ margin-right: 1.25rem; }
	/* Le titre de page ferait doublon avec la catégorie soulignée dans la barre : seul le logo et le nom de l'espace restent */
	body.has-topnav .appbar-titles{ visibility: hidden; }
}

/* ── Accueil du Lounge : panneau des catégories (cartes avec sous-liens) ─── */
.hub{ display: grid; grid-template-columns: 1fr; gap: 1rem; }
.hub-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.hub-head{ display: flex; align-items: center; gap: .875rem; }
.hub-icon{ width: 48px; height: 48px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; background: var(--brand-primary); color: var(--brand-on-primary); }
.hub-head h2{ margin: 0; font-size: 1.125rem; display: flex; align-items: center; gap: .5rem; }
.hub-head h2 .badge-notif{ margin: 0; }
.hub-text{ color: var(--t-2); font-size: .9375rem; margin: 0; }
.hub-links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.hub-links a{ display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .5rem 0; color: var(--t-1); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.hub-links a i:first-child{ width: 22px; text-align: center; color: var(--brand-secondary); flex: none; }
.hub-links a .lbl{ flex: 1; min-width: 0; }
.hub-links a .chev{ color: var(--t-3); font-size: .75rem; }
.hub-links a:hover{ color: var(--brand-primary); text-decoration: none; }
.hub-links a:hover .chev{ color: var(--brand-primary); }
.hub-links a.primary{ color: var(--brand-primary); }
.hub-links a.primary i:first-child{ color: var(--brand-primary); }
.hub-links a.danger{ color: var(--c-danger); }
.hub-links a.danger i:first-child{ color: var(--c-danger); }
.hub-links .count{ font-size: .75rem; font-weight: 700; color: var(--t-3); background: rgba(16,42,67,.07); border-radius: 999px; padding: 2px 8px; }
.hub-links .badge-notif{ margin: 0; }
@media (min-width: 576px){ .hub{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px){ .hub{ grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .hub-card{ padding: 1.5rem; } }

/* ── Side nav (desktop) ─────────────────────────────────────────────────── */
.sidenav{ display: none; }
/* Nom d'un espace : le caractère du nom « wayflare » du logo (Jost SemiBold, même interlettrage) */
.space-word{ font-family: 'Jost', var(--font); font-weight: 600; letter-spacing: -.015em; line-height: 1; }
/* Panneau d'un espace (Generic::spaceSign) : plaque blanche, pictogramme sur la couleur du tiers de manche à air de l'espace
   (Control Tower bleu profond, Cockpit bleu, Lounge ardoise : pas de doré dans le Lounge), nom en Jost. Posé sur le menu, la barre haute ou une page. */
.space-sign{
	display: inline-flex; align-items: center; gap: .5rem; height: 32px; padding: 0 .6875rem 0 .3125rem; border-radius: 6px;
	background: var(--surface); color: var(--c-navy); box-shadow: 0 1px 2px rgba(11,33,53,.18); flex: none;
}
.space-sign .space-word{ font-size: 1rem; color: var(--c-navy); }
.space-sign-tile{ width: 22px; height: 22px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-blue); color: #FFFFFF; font-size: .6875rem; flex: none; }
.space-sign.is-superadmin .space-sign-tile{ background: var(--c-deep); }
.space-sign.is-portal .space-sign-tile{ background: var(--c-gold); color: var(--c-deep); }
/* Identité en tête de menu : le logo en grand (Wayflare en Control Tower et Cockpit, celui de l'entreprise dans Lounge),
   et le panneau de l'espace calé à droite sous le logo (.sidenav-brand-in épouse la largeur du logo) ; la paire est centrée */
.sidenav-brand{ display: flex; justify-content: center; padding: 1.25rem 1.25rem 1rem; color: var(--nav-fg); text-decoration: none; flex: none; }
.sidenav-brand:hover{ text-decoration: none; color: var(--nav-fg); }
.sidenav-brand-in{ display: inline-flex; flex-direction: column; align-items: flex-end; gap: .625rem; }
.sidenav-brand .wf-logo{ height: 48px; }
/* Lounge (marque blanche) : logo de l'entreprise sur plaque blanche, sur un bandeau aux couleurs de l'entreprise qui prolonge la barre haute */
.sidenav-brand.is-band{ margin-bottom: .75rem; background: var(--bar-bg); color: var(--bar-fg); box-shadow: var(--bar-shadow); }
.sidenav-brand.is-band:hover{ color: var(--bar-fg); }
.sidenav-brand.is-band .tenant-logo{ height: 48px; max-width: 100%; padding: 6px 10px; border-radius: 8px; }
.sidenav-brand.is-band .tenant-mark{ width: 48px; height: 48px; font-size: 1.25rem; background: rgba(255,255,255,.16); color: var(--bar-fg); }
/* Entreprise affichée : sous la marque dans le Cockpit (logo sur plaque blanche, nom en dessous ; sans logo, initiales et nom
   côte à côte) ; dans Lounge le logo est déjà en tête, il reste le nom de l'entreprise et celui du client. */
.sidenav-tenant{ display: flex; align-items: center; gap: .625rem; margin: .25rem .75rem .75rem; padding: .625rem; border-radius: var(--r-sm); background: var(--nav-hover); color: var(--nav-fg); text-decoration: none; min-width: 0; }
.sidenav-tenant:hover{ text-decoration: none; color: var(--nav-fg); background: var(--nav-active); }
.sidenav-tenant.has-logo{ flex-direction: column; align-items: flex-start; gap: .5rem; padding: .75rem; }
.sidenav-tenant.has-logo .tenant-logo{ height: 44px; max-width: 100%; }
.sidenav-tenant.has-logo .tenant-txt{ width: 100%; }
.tenant-logo{ height: 36px; width: auto; max-width: 96px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px 5px; flex: none; }
.tenant-mark{ width: 36px; height: 36px; border-radius: 8px; background: var(--brand-primary); color: var(--brand-on-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8125rem; letter-spacing: .02em; flex: none; }
.appbar .tenant-mark{ background: rgba(255,255,255,.16); color: var(--bar-fg); }
.tenant-txt{ min-width: 0; }
.tenant-txt .name{ font-weight: 700; font-size: .9375rem; line-height: 1.25; overflow-wrap: anywhere; }
.tenant-txt .sub{ font-size: .75rem; color: var(--nav-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav-section{ padding: 1rem 1.25rem .375rem; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nav-fg-2); }
.sidenav nav a{
	display: flex; align-items: center; gap: .75rem;
	padding: .625rem 1.25rem; margin: 2px .75rem;
	color: var(--nav-fg); text-decoration: none; border-radius: var(--r-sm);
	font-weight: 500; font-size: .9375rem; position: relative;
	transition: background .15s var(--ease);
}
.sidenav nav a i{ width: 20px; text-align: center; font-size: 1rem; opacity: .85; color: var(--nav-icon); }
.sidenav nav a.sub{ padding-top: .5rem; padding-bottom: .5rem; padding-left: 2.25rem; font-size: .8125rem; }
.sidenav nav a.sub i{ font-size: .8125rem; }
.sidenav nav a:hover{ background: var(--nav-hover); text-decoration: none; color: var(--nav-fg); }
/* Entrée avec sous-menu (shell.php) : le libellé reste un lien vers sa page, le chevron à droite déplie ses pages (> * : <i> ou <svg> du kit Font Awesome) */
.nav-row{ position: relative; }
.nav-toggle{ position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; border-radius: var(--r-sm); }
.nav-toggle > *{ font-size: .6875rem; transition: transform .2s var(--ease); }
.nav-toggle:not(.collapsed) > *{ transform: rotate(180deg); }
.sidenav nav .nav-row a{ padding-right: 3rem; }
.sidenav .nav-toggle{ right: 1.125rem; width: 32px; height: 32px; color: var(--nav-fg-2); }
.sidenav .nav-toggle:hover{ background: var(--nav-hover); color: var(--nav-fg); }
.sidenav nav a.active{ background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 600; }
.sidenav nav a.active i{ opacity: 1; color: var(--nav-active-icon); }
.sidenav nav a .count{ margin-left: auto; background: var(--nav-count-bg); color: var(--nav-count-fg); font-size: .6875rem; font-weight: 600; min-width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 10px; padding: 0 6px; }
.sidenav nav a.active .count{ background: var(--c-navy); color: #F5F1E8; }
.sidenav-footer{ margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid var(--nav-line); color: var(--nav-fg-2); font-size: .75rem; }
/* « Propulsé par Wayflare » (Lounge, marque blanche) */
.powered{ display: flex; align-items: center; gap: .5rem; }
.powered .wf-logo{ height: 20px; }
.login-foot.powered{ justify-content: center; }
.login-card .login-foot{ margin-top: 1.5rem; padding-bottom: 0; }
@media (min-width: 768px){
	.login-card{ position: relative; }
	.login-card .login-foot{ position: absolute; left: 0; right: 0; bottom: 1rem; margin: 0; }
}

@media (min-width: 992px){
	body{ padding-bottom: 0; }
	body.has-sidenav{ padding-left: var(--sidenav-w); }
	.tabbar{ display: none; }
	.sidenav{
		display: flex; flex-direction: column;
		position: fixed; top: 0; bottom: 0; left: 0; z-index: 1035;
		width: var(--sidenav-w); background: var(--nav-bg); box-shadow: var(--nav-edge);
		overflow-y: auto; padding-bottom: env(safe-area-inset-bottom);
	}
	body.has-sidenav .appbar{ left: var(--sidenav-w); }
	.appbar-in{ padding: 0 1.5rem; }
	.appbar-brand.mobile-only, .appbar-space{ display: none; }
}

/* ── Fil d'Ariane (shell.php) : au-dessus du contenu, une ligne, défilable sur mobile ── */
.crumbs{ max-width: 1280px; margin: 0 auto; padding: .875rem 1rem 0; }
.crumbs ol{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--t-3); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.crumbs ol::-webkit-scrollbar{ display: none; }
.crumbs li{ display: flex; align-items: center; gap: .5rem; flex: none; }
.crumbs li + li::before{ content: '›'; color: var(--t-3); }
.crumbs a{ color: var(--t-2); font-weight: 600; }
.crumbs a:hover{ color: var(--t-1); }
.crumbs li[aria-current]{ color: var(--t-1); font-weight: 600; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; }
.crumbs + .app-main{ padding-top: .75rem; }
@media (min-width: 992px){ .crumbs{ padding: 1.5rem 2rem 0; } }

/* ── Contenu ────────────────────────────────────────────────────────────── */
.app-main{ padding: 1rem; max-width: 1280px; margin: 0 auto; }
.page-head{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-head h1{ margin: 0; }
.page-head .sub{ color: var(--t-2); font-size: .9375rem; margin-top: .125rem; }
.page-actions{ display: flex; gap: .5rem; flex-wrap: wrap; }
@media (min-width: 992px){
	.app-main{ padding: 2rem; }
	.page-head{ margin-bottom: 1.5rem; }
}

/* ── Cartes et panneaux ─────────────────────────────────────────────────── */
.panel{
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
	box-shadow: var(--shadow-1); padding: 1rem; margin-bottom: 1rem;
}
.panel-head{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.panel-head h2, .panel-head h3{ margin: 0; }
.panel-flush{ padding: 0; }
.panel-flush .panel-head{ padding: 1rem 1rem 0; }
@media (min-width: 992px){
	.panel{ padding: 1.5rem; }
	.panel-flush .panel-head{ padding: 1.5rem 1.5rem 0; }
}

/* Statistiques : ligne de chiffres, sans carte imbriquée */
.stat-row{ display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1rem; }
.stat{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: .875rem 1rem; box-shadow: var(--shadow-1); text-decoration: none; color: inherit; display: block; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
a.stat:hover{ text-decoration: none; color: inherit; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.stat .label{ font-size: .8125rem; color: var(--t-2); font-weight: 600; display: flex; align-items: center; gap: .375rem; }
.stat .label i{ color: var(--brand-secondary); }
.stat .value{ font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--t-1); margin-top: .125rem; }
.stat .value small{ font-size: .875rem; font-weight: 600; color: var(--t-3); }
.stat.attention .value{ color: var(--c-warning); }
@media (min-width: 768px){ .stat-row{ grid-template-columns: repeat(4, 1fr); } .stat-row.cols-3{ grid-template-columns: repeat(3, 1fr); } }
.stat .value.compact{ font-size: 1.125rem; }
/* Cartes d'un tableau de bord (graphiques) : toutes de la même taille, 2 par ligne, 3 quand il y en a trois sur grand écran */
.card-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 992px){
	.card-grid{ gap: 1.5rem; margin-bottom: 1.5rem; }
	.card-grid.cols-2, .card-grid.cols-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1400px){ .card-grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Chiffres clés en palettes (tableau de bord du Cockpit) : tuiles de même taille, libellé en haut, palettes en bas */
.stat-row.cols-5{ grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px){ .stat-row.cols-5{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ .stat-row.cols-5{ grid-template-columns: repeat(5, 1fr); } }
.stat.stat-flap{ display: flex; flex-direction: column; justify-content: space-between; gap: .875rem; padding: 1rem 1.125rem; }
.stat.stat-flap .label{ font-size: .875rem; font-weight: 500; gap: .5rem; }
.stat.stat-flap .value{ display: flex; align-items: flex-end; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; }
.stat.stat-flap .value small{ font-size: .8125rem; font-weight: 500; color: var(--t-2); padding-bottom: .1875rem; }
.stat.stat-flap .progress{ height: 6px; margin-top: .625rem; background: rgba(16,42,67,.08); }

/* ── Listes : cartes sur mobile, tableau sur desktop ────────────────────── */
.list-cards{ display: flex; flex-direction: column; gap: .625rem; }
.list-card{
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
	padding: .875rem 1rem; display: flex; flex-direction: column; gap: .375rem; text-decoration: none; color: inherit;
	box-shadow: var(--shadow-1); transition: box-shadow .15s var(--ease);
}
.list-card:hover{ text-decoration: none; color: inherit; box-shadow: var(--shadow-2); }
.list-card.clickable{ cursor: pointer; }
.list-card.clickable:focus-visible{ outline: 2px solid var(--brand-secondary); outline-offset: 2px; }
.list-card .row1{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.list-card .title{ font-weight: 700; }
.list-card .meta{ font-size: .8125rem; color: var(--t-2); display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.list-card .ref{ font-size: .75rem; color: var(--t-3); font-weight: 600; letter-spacing: .02em; }

.table-desk{ display: none; }
@media (min-width: 992px){
	.list-cards.to-table{ display: none; }
	.table-desk{ display: block; }
}
.table{ --bs-table-bg: transparent; margin: 0; font-size: .9375rem; }
.table thead th{ font-size: .75rem; color: var(--t-2); font-weight: 500; border-bottom: 1px solid var(--line-strong); padding: .75rem 1rem; white-space: nowrap; }
/* Tableau posé à fleur d'un panneau : première et dernière colonnes alignées sur le titre du panneau */
.panel-flush .table th:first-child, .panel-flush .table td:first-child{ padding-left: 1rem; }
@media (min-width: 992px){
	.panel-flush .table th:first-child, .panel-flush .table td:first-child{ padding-left: 1.5rem; }
	.panel-flush .table th:last-child, .panel-flush .table td:last-child{ padding-right: 1.5rem; }
}
.table tbody td{ padding: .875rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td{ border-bottom: 0; }
.table tbody tr.clickable{ cursor: pointer; transition: background .12s var(--ease); }
.table tbody tr.clickable:hover{ background: var(--surface-2); }
.table .num{ text-align: right; }

/* ── Badges de statut ───────────────────────────────────────────────────── */
/* Pill neutre (gris très clair, libellé Bleu Nuit) : seule la pastille, toujours pleine, porte la couleur du statut :
   dorée = action attendue, bleue = en cours, ambre = en attente, rouge = refusé / annulé, verte = terminé, grise = clos ou inactif.
   Une icône peut remplacer la pastille, dans la même couleur. Une seule forme pour tout statut ou état
   (Generic::badge, badgeStatus, badgeActive…) ; couleurs des pastilles reprises par Generic::badgeTones() pour les PDF. */
.badge-status{
	--badge-tone: var(--c-blue);
	display: inline-flex; align-items: center; gap: .375rem;
	height: 24px; padding: 0 .625rem; border-radius: 999px; white-space: nowrap; vertical-align: middle;
	background: rgba(16,42,67,.06); color: var(--t-1);
	font-family: var(--font); font-size: .75rem; font-weight: 600; line-height: 1;
}
.badge-status .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--badge-tone); flex: none; }
.badge-status i{ font-size: .625rem; color: var(--badge-tone); }
.badge-gold{ --badge-tone: var(--c-gold); }
.badge-gold .dot{ box-shadow: 0 0 0 1px rgba(16,42,67,.22); }
.badge-warning{ --badge-tone: var(--c-warning); }
.badge-danger{ --badge-tone: var(--c-danger); }
.badge-success{ --badge-tone: var(--c-success); }
.badge-muted{ --badge-tone: var(--t-3); color: var(--t-2); }
/* Libellé d'une pill qui tourne à l'apparition (flipLabel dans app.js) : une case par lettre, largeur de sa lettre dans le mot (crénage
   compris). La case qui tourne est centrée, rognée sur les côtés seulement, et estompée (opacité : lisible sur une pill claire comme sur
   une puce active foncée) ; arrêtée, sa lettre est calée à gauche sans rognage, à sa place exacte dans le texte qui revient ensuite */
.flap-word{ display: inline-flex; }
.flap-char{ display: inline-block; text-align: left; white-space: pre; }
.flap-char.is-turning{ text-align: center; clip-path: inset(-.5em 0); opacity: .45; }
/* Badge cliquable (lien autour du badge) */
.badge-link, .badge-link:hover{ text-decoration: none; }
.badge-link:hover .badge-status{ background: rgba(16,42,67,.10); }
/* Chiffres clés des tableaux de bord (Generic::flapNumber) : gros chiffres sans cadre, qui tournent à l'apparition comme les statuts
   (flipPalettes dans app.js) ; chiffres à chasse fixe, le nombre ne change pas de largeur en tournant */
.flaps{ display: inline-flex; vertical-align: bottom; font-size: 1.875rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--t-1); }
.flap{ display: inline-block; }
.flap.is-gap{ width: .25em; }
.flap.is-turning{ opacity: .45; }
/* Pastille « action attendue » (SAV à répondre, commandes à traiter) */
.dot-attn{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-gold); box-shadow: 0 0 0 1px rgba(16,42,67,.22); flex: none; }
/* Qui traite le SAV : une étiquette, pas un statut ; Atelier DSI en doré */
.badge-status.badge-handled{ color: var(--t-2); }
.badge-status.badge-handled i{ color: var(--c-blue); }
.badge-status.badge-handled.badge-gold{ background: rgba(184,154,94,.18); color: #5E4D26; }
.badge-status.badge-handled.badge-gold i{ color: #5E4D26; }
/* Statut modifiable en place (Generic::shipmentStatusSelect, comme les commandes de pièces du Back-office) : la pill du statut,
   le select prend la place du libellé et couvre toute la pill */
.badge-status.status-pick{ position: relative; padding: 0; }
.status-pick .dot{ position: absolute; left: .625rem; top: 50%; margin-top: -3.5px; pointer-events: none; }
select.status-select{
	display: block; height: 100%; appearance: none; -webkit-appearance: none; border: 0; border-radius: inherit; cursor: pointer;
	padding: 0 1.5rem 0 1.4375rem; background-color: transparent; color: inherit; font: inherit;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23102A43' stroke-opacity='.55' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .5rem center; background-size: 10px;
}
select.status-select:focus{ outline: 0; }
.status-pick:focus-within{ box-shadow: 0 0 0 3px rgba(36,85,122,.18); }
.status-pick:has(select.is-loading){ opacity: .5; pointer-events: none; }
.status-select-lg .status-pick{ height: 36px; font-size: .875rem; }
.status-select-lg .status-pick .dot{ left: .875rem; }
.status-select-lg select.status-select{ padding: 0 2.125rem 0 1.6875rem; background-position: right .75rem center; }
/* Pendant l'animation (flipLabel) : le libellé qui tourne est posé à l'emplacement du texte du select, rendu transparent */
.status-pick .flap-over{ position: absolute; left: 1.4375rem; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none; }
.status-select-lg .status-pick .flap-over{ left: 1.6875rem; }
.status-pick.is-flipping select.status-select{ color: transparent; }
.status-pick.is-flipping select.status-select option{ color: var(--t-1); }
/* Couleur d'un statut SAV de l'entreprise (Cockpit > Statuts SAV) : une option par classe de badge, sa pastille et ce qu'elle signale ;
   .is-compact = pastille seule (sens en infobulle), dans la liste. Bleu par défaut, comme .badge-status ; la classe badge-* de l'option le remplace.
   Sert aussi aux choix en pastilles d'un formulaire (fiche document : contenu, langues) : .is-large, cibles de 36 px */
.tone-pick{ --badge-tone: var(--c-blue); display: flex; flex-wrap: wrap; gap: .375rem; }
.tone-pick .tone-opt{ position: relative; display: inline-flex; align-items: center; gap: .375rem; height: 28px; margin: 0; padding: 0 .625rem; border-radius: 999px; background: rgba(16,42,67,.06); color: var(--t-1); font-size: .75rem; font-weight: 600; cursor: pointer; }
.tone-opt input{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tone-opt .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--badge-tone); flex: none; }
.tone-pick .tone-opt:hover{ background: rgba(16,42,67,.10); }
.tone-pick .tone-opt:has(input:checked){ background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--badge-tone); }
.tone-opt:has(input:focus-visible){ outline: 2px solid var(--c-blue); outline-offset: 2px; }
.tone-pick.is-compact{ flex-wrap: nowrap; gap: .125rem; }
.tone-pick.is-compact .tone-opt{ justify-content: center; width: 28px; padding: 0; background: transparent; }
.tone-pick.is-compact .tone-opt .dot{ width: 10px; height: 10px; }
.tone-pick.is-large{ gap: .5rem; }
.tone-pick.is-large .tone-opt{ height: 36px; padding: 0 .875rem; font-size: .8125rem; }
.tone-pick.is-large .tone-opt > i, .tone-pick.is-large .tone-opt > svg{ color: var(--brand-secondary); }
.tone-pick.is-large .tone-opt .lang-flag{ font-size: 1rem; margin-left: -.375rem; }
.d-contents{ display: contents; }
.tag{ display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 6px; font-size: .75rem; font-weight: 600; background: rgba(36,85,122,.10); color: var(--c-blue); }

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn{
	--bs-btn-padding-y: .625rem; --bs-btn-padding-x: 1.125rem;
	--bs-btn-font-weight: 700; --bs-btn-border-radius: var(--r-sm);
	--bs-btn-font-size: .9375rem; min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-color: var(--brand-on-primary); --bs-btn-hover-bg: var(--brand-primary-hover); --bs-btn-hover-border-color: var(--brand-primary-hover); --bs-btn-hover-color: var(--brand-on-secondary); --bs-btn-active-bg: var(--c-deep); --bs-btn-active-border-color: var(--c-deep); --bs-btn-disabled-bg: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary); --bs-btn-disabled-color: var(--brand-on-primary); }
.btn-outline-primary{ --bs-btn-color: var(--brand-secondary); --bs-btn-border-color: var(--brand-secondary); --bs-btn-hover-bg: var(--brand-secondary); --bs-btn-hover-border-color: var(--brand-secondary); --bs-btn-hover-color: var(--brand-on-secondary); --bs-btn-active-bg: var(--brand-secondary); --bs-btn-active-border-color: var(--brand-secondary); --bs-btn-active-color: var(--brand-on-secondary); }
.btn-ghost{ --bs-btn-color: var(--brand-secondary); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(36,85,122,.08); --bs-btn-hover-color: var(--c-navy); --bs-btn-active-bg: rgba(36,85,122,.14); }
.btn-danger{ --bs-btn-bg: var(--c-danger); --bs-btn-border-color: var(--c-danger); --bs-btn-hover-bg: #96382F; --bs-btn-hover-border-color: #96382F; --bs-btn-active-bg: #7E2E27; }
.btn-outline-danger{ --bs-btn-color: var(--c-danger); --bs-btn-border-color: var(--c-danger); --bs-btn-hover-bg: var(--c-danger); --bs-btn-hover-border-color: var(--c-danger); }
.btn-sm{ --bs-btn-padding-y: .375rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .8125rem; min-height: 36px; }
.btn-icon{ width: 44px; padding: 0; }
.btn-icon.btn-sm{ width: 36px; }
.btn.is-loading{ position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after{ content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn-outline-primary.is-loading::after, .btn-ghost.is-loading::after{ border-color: rgba(36,85,122,.3); border-top-color: var(--c-blue); }
@keyframes spin{ to{ transform: rotate(360deg); } }
.btn-block{ width: 100%; }

/* ── Formulaires ────────────────────────────────────────────────────────── */
.form-label{ font-weight: 600; font-size: .875rem; color: var(--t-1); margin-bottom: .375rem; }
.form-control, .form-select{
	min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
	background: var(--surface); color: var(--t-1); font-size: 1rem; padding: .5rem .875rem;
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-control::placeholder{ color: var(--t-3); }
.form-control:focus, .form-select:focus{ border-color: var(--brand-secondary); box-shadow: 0 0 0 3px rgba(36,85,122,.18); background: var(--surface); color: var(--t-1); }
.form-control.is-invalid, .form-select.is-invalid{ border-color: var(--c-danger); }
.form-control.is-invalid:focus{ box-shadow: 0 0 0 3px rgba(181,71,63,.18); }
.form-control:disabled, .form-control[readonly]{ background: var(--surface-2); color: var(--t-2); opacity: 1; }
textarea.form-control{ min-height: 120px; }
.form-text{ color: var(--t-3); font-size: .8125rem; }
.invalid-feedback{ color: var(--c-danger); font-weight: 600; }
.form-check-input{ width: 1.25em; height: 1.25em; border: 1px solid var(--line-strong); margin-top: .125em; }
.form-check-input:checked{ background-color: var(--brand-primary); border-color: var(--brand-primary); }
.form-check-input:focus{ box-shadow: 0 0 0 3px rgba(36,85,122,.18); border-color: var(--brand-secondary); }
.form-switch .form-check-input{ width: 2.5em; height: 1.375em; }
.form-check-label{ padding-left: .25rem; }
.form-check{ min-height: 32px; display: flex; align-items: center; gap: .25rem; }
.input-group-text{ background: var(--surface-2); border-color: var(--line-strong); color: var(--t-2); }
.color-field{ display: flex; align-items: center; gap: .75rem; }
.color-field input[type=color]{ width: 44px; height: 44px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.form-actions{ display: flex; gap: .625rem; flex-wrap: wrap; margin-top: 1.25rem; }
.form-actions .btn{ flex: 1; }
@media (min-width: 576px){ .form-actions .btn{ flex: 0 0 auto; } }
.form-section{ padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.form-section:last-child{ border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.form-section h3{ font-size: 1rem; margin-bottom: .75rem; }
.form-section .hint{ color: var(--t-2); font-size: .875rem; margin-bottom: .75rem; }

/* Tom Select harmonisé */
.ts-control{ min-height: 44px; border: 1px solid var(--line-strong) !important; border-radius: var(--r-sm) !important; padding: .5rem .875rem !important; font-family: var(--font); box-shadow: none !important; }
.ts-wrapper.focus .ts-control{ border-color: var(--brand-secondary) !important; box-shadow: 0 0 0 3px rgba(36,85,122,.18) !important; }
.ts-dropdown{ border-radius: var(--r-sm); border-color: var(--line); box-shadow: var(--shadow-2); font-family: var(--font); }
.ts-dropdown .active{ background: rgba(36,85,122,.10); color: var(--t-1); }
.ts-wrapper.multi .ts-control > div{ background: rgba(36,85,122,.10); color: var(--c-blue); border-radius: 6px; font-weight: 600; }

/* ── Alertes ────────────────────────────────────────────────────────────── */
.alert{ border: 0; border-radius: var(--r-md); padding: .875rem 1rem; display: flex; align-items: flex-start; gap: .625rem; font-weight: 500; margin-bottom: 1rem; }
.alert i{ margin-top: .15rem; }
.alert-success{ background: rgba(47,125,91,.12); color: #1F5439; }
.alert-warning{ background: rgba(184,134,43,.14); color: #6E4E12; }
.alert-danger{ background: rgba(181,71,63,.12); color: #7E2E27; }
.alert-info{ background: rgba(36,85,122,.10); color: var(--c-navy); }

/* ── États vides et chargement ──────────────────────────────────────────── */
.empty{ text-align: center; padding: 2.5rem 1rem; color: var(--t-2); }
.empty .icon{ width: 64px; height: 64px; border-radius: 50%; background: rgba(36,85,122,.08); color: var(--brand-secondary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; }
.empty h3{ font-size: 1.0625rem; margin-bottom: .375rem; }
.empty p{ max-width: 42ch; margin: 0 auto .75rem; font-size: .9375rem; }
.skeleton{ background: linear-gradient(90deg, rgba(16,42,67,.06) 25%, rgba(16,42,67,.12) 37%, rgba(16,42,67,.06) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; height: 1em; }
@keyframes shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }

/* ── Login (sans shell) ─────────────────────────────────────────────────── */
.login-page{ min-height: 100dvh; display: flex; flex-direction: column; background: var(--page-bg); }
.login-hero{
	background: var(--hero-bg); color: var(--hero-fg);
	padding: calc(2rem + env(safe-area-inset-top)) 1.5rem 3.5rem;
	position: relative; overflow: hidden;
}
.login-hero::after{ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c-gold) 30%, var(--c-gold) 70%, transparent); opacity: .9; }
.login-hero .brand{ display: flex; align-items: center; gap: .75rem; font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; color: var(--hero-fg); text-decoration: none; }
.login-hero .brand img:not(.wf-logo){ max-height: 44px; width: auto; max-width: 180px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px 8px; }
.login-hero .brand .wf-logo{ height: 38px; }
/* Nom de l'espace, au-dessus du titre : petit filet doré + capitales espacées */
.space-tag{ display: flex; align-items: center; gap: .75rem; margin-top: 1.75rem; font-family: 'Jost', var(--font); font-weight: 600; letter-spacing: -.015em; line-height: 1; font-size: 1.5rem; color: var(--hero-fg); }
.space-tag::before{ content: ''; width: 24px; height: 2px; border-radius: 1px; background: var(--c-gold); }
.login-hero h1{ color: var(--hero-fg); font-size: 1.5rem; margin: 1.5rem 0 .25rem; }
.login-hero .space-tag + h1{ margin-top: .875rem; }
.login-hero p{ color: var(--hero-fg-2); margin: 0; font-size: .9375rem; }
.login-card{
	background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; margin-top: -1.5rem;
	padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); flex: 1;
	box-shadow: 0 -8px 32px rgba(16,42,67,.10);
}
.login-card form{ max-width: 420px; margin: 1.5rem auto 0; }
.login-foot{ text-align: center; color: var(--t-3); font-size: .75rem; padding: 1rem; }
@media (min-width: 768px){
	.login-page{ flex-direction: row; }
	.login-hero{ flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; padding: 3rem; }
	.login-hero::after{ left: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, transparent, var(--c-gold) 30%, var(--c-gold) 70%, transparent); }
	.login-hero h1{ font-size: 2.25rem; max-width: 18ch; }
	.login-hero p{ font-size: 1.0625rem; max-width: 40ch; }
	.login-card{ flex: 1 1 50%; margin: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; justify-content: center; padding: 3rem; }
	.login-card form{ width: 100%; margin-top: 0; }
}

/* ── Landing ────────────────────────────────────────────────────────────── */
.landing{ min-height: 100dvh; display: flex; flex-direction: column; }
.landing-hero{ background: var(--c-deep); color: var(--t-on-dark); padding: calc(1.5rem + env(safe-area-inset-top)) 1.5rem 3rem; }
.landing-hero h1{ color: var(--t-on-dark); font-size: 2rem; letter-spacing: -.02em; max-width: 20ch; margin: 2rem 0 1rem; }
.landing-hero p{ color: var(--t-on-dark-2); max-width: 48ch; font-size: 1.0625rem; }
.landing-hero .brand .wf-logo{ height: 42px; }
.landing-spaces{ padding: 1.5rem; display: grid; gap: 1rem; max-width: 960px; margin: 0 auto; width: 100%; }
.space-link{ display: flex; align-items: center; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.25rem; text-decoration: none; color: inherit; box-shadow: var(--shadow-1); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.space-link:hover{ text-decoration: none; color: inherit; transform: translateY(-2px); box-shadow: var(--shadow-2); }
.space-link .ic{ width: 48px; height: 48px; border-radius: 12px; background: var(--c-navy); color: var(--c-ivory); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: none; }
.space-link .ic-cockpit{ background: var(--c-blue); }
.space-link .ic-lounge{ background: var(--c-gold); color: var(--c-deep); }
.space-link .txt strong{ display: block; font-size: 1.0625rem; }
.space-link .txt strong .space-word{ font-size: 1.375rem; }
.space-link .txt strong small{ font-size: .75rem; font-weight: 600; color: var(--t-3); margin-left: .375rem; }
.space-link .txt span{ color: var(--t-2); font-size: .9375rem; }
.space-link .arrow{ margin-left: auto; color: var(--c-gold); }
@media (min-width: 768px){
	.landing-hero{ padding: 3rem 3rem 4rem; }
	.landing-hero h1{ font-size: 3rem; }
	.landing-spaces{ grid-template-columns: 1fr 1fr; padding: 2rem 3rem; margin-top: -2rem; }
}

/* ── Offcanvas (feuille mobile) ─────────────────────────────────────────── */
.offcanvas{ --bs-offcanvas-bg: var(--surface); --bs-offcanvas-width: min(320px, 85vw); }
.offcanvas-bottom{ --bs-offcanvas-height: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 85dvh; padding-bottom: env(safe-area-inset-bottom); }
.offcanvas-backdrop{ backdrop-filter: blur(2px); }
.sheet-list a{ display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; color: var(--t-1); text-decoration: none; border-radius: var(--r-sm); font-weight: 600; min-height: 48px; }
.sheet-list a i{ width: 22px; text-align: center; color: var(--brand-secondary); }
.sheet-list a:hover, .sheet-list a.active{ background: rgba(36,85,122,.08); text-decoration: none; }
.sheet-list .nav-row a{ padding-right: 3.5rem; }
.sheet-list .nav-toggle{ right: .125rem; width: 44px; height: 44px; color: var(--t-3); }
.sheet-list .nav-toggle > *{ font-size: .75rem; }
.sheet-list .nav-toggle:hover{ background: rgba(36,85,122,.08); color: var(--t-1); }
.sheet-list a.sub{ padding-left: 3.25rem; font-weight: 500; }
.sheet-list a.danger{ color: var(--c-danger); }
.sheet-list a.danger i{ color: var(--c-danger); }
.sheet-list .sep{ height: 1px; background: var(--line); margin: .5rem 0; }
.sheet-brand{ display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 0 .25rem; color: var(--t-3); font-size: .75rem; }
.sheet-title{ display: flex; align-items: baseline; gap: .625rem; min-width: 0; }
.sheet-title .space-word{ font-size: 1.5rem; color: var(--t-1); }
.sheet-title small{ font-size: .8125rem; font-weight: 600; color: var(--t-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-brand .wf-logo{ height: 22px; }

/* ── Modales ────────────────────────────────────────────────────────────── */
.modal-content{ border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.modal-header{ border-bottom: 1px solid var(--line); padding: 1rem 1.25rem; }
.modal-title{ font-weight: 700; font-size: 1.0625rem; }
.modal-body{ padding: 1.25rem; color: var(--t-2); }
.modal-footer{ border-top: 1px solid var(--line); padding: .875rem 1.25rem; gap: .5rem; }
@media (max-width: 575px){
	.modal-dialog{ margin: 0; position: fixed; bottom: 0; left: 0; right: 0; }
	.modal-content{ border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: env(safe-area-inset-bottom); }
	.modal.fade .modal-dialog{ transform: translateY(24px); }
	.modal.show .modal-dialog{ transform: none; }
}

/* ── Toasts ─────────────────────────────────────────────────────────────── */
.toast-container{ position: fixed; top: calc(var(--appbar-h) + env(safe-area-inset-top) + .75rem); right: .75rem; left: .75rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.toast-item{ pointer-events: auto; background: var(--c-navy); color: var(--c-ivory); padding: .75rem 1rem; border-radius: var(--r-sm); box-shadow: var(--shadow-2); font-weight: 600; font-size: .9375rem; display: flex; gap: .625rem; align-items: center; animation: toastIn .25s var(--ease); }
.toast-item.success{ background: var(--c-success); }
.toast-item.danger{ background: var(--c-danger); }
.toast-item.warning{ background: #8C6418; }
@keyframes toastIn{ from{ opacity: 0; transform: translateY(-8px); } to{ opacity: 1; transform: none; } }
@media (min-width: 576px){ .toast-container{ left: auto; width: 360px; } }

/* ── Loader de page ─────────────────────────────────────────────────────── */
#pageLoader{ position: fixed; inset: 0; z-index: 2000; background: rgba(245,241,232,.7); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; }
#pageLoader.show{ display: flex; }
#pageLoader .spinner{ width: 40px; height: 40px; border: 3px solid rgba(36,85,122,.2); border-top-color: var(--c-blue); border-radius: 50%; animation: spin .8s linear infinite; }

/* ── Bannière hors-ligne ────────────────────────────────────────────────── */
.banner{ font-weight: 700; font-size: .875rem; padding: .5rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
#offlineBanner{ display: none; position: fixed; left: 0; right: 0; top: calc(var(--appbar-h) + env(safe-area-inset-top)); z-index: 1029; background: var(--c-danger); color: #fff; }
body.is-offline #offlineBanner{ display: flex; }

/* ── Divers ─────────────────────────────────────────────────────────────── */
.progress{ height: 8px; background: rgba(16,42,67,.08); border-radius: 4px; }
.progress-bar{ background: var(--brand-secondary); border-radius: 4px; }
.progress-bar.warn{ background: var(--c-warning); }
.progress-bar.danger{ background: var(--c-danger); }
.kv{ display: grid; grid-template-columns: 1fr; gap: .5rem .75rem; margin: 0; }
.kv dt{ font-size: .75rem; color: var(--t-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.kv dd{ margin: 0 0 .5rem; }
@media (min-width: 576px){ .kv{ grid-template-columns: 160px 1fr; } .kv dt{ text-transform: none; letter-spacing: 0; font-size: .875rem; padding-top: .125rem; } }
.divider{ height: 1px; background: var(--line); margin: 1rem 0; }
.lang-flag{ display: inline-flex; font-size: 1.125rem; line-height: 1; vertical-align: middle; }
/* Drapeaux de langue (Generic::flag) : le drapeau peint sur une dérive d'avion, en flèche à 34°, toujours dans un rond blanc cerclé.
   Incliné, pas rogné : toutes les bandes restent visibles ; bord d'attaque arrondi, bord de fuite resserré, reflet le long de la flèche,
   liseré fin pour les drapeaux clairs. Sous le drapeau, une bande blanche au pied de la dérive porte « WFL » en gras (::after), comme
   le code d'une compagnie. Rond de 1,75 em ; dérive de 1,3 em à l'échelle de la dérive (1 em de drapeau + .3 em de bande), réduite à .68
   pour tenir dans le rond et centrée (boîte de 1,3224 em au pied + 1,3 em × tan 34° de flèche visible = 1,669 em de large ; le bord de
   fuite garde sa pente, 66 % de 1,2 em en haut). Le liseré (filter) est sur la boîte, la dérive rognée sur ::before. */
.flag{ position: relative; display: inline-block; flex: none; width: 1.75em; height: 1.75em; vertical-align: middle; border-radius: 50%; background: var(--c-white); box-shadow: inset 0 0 0 1px var(--line-strong); }
.flag > span{ position: absolute; left: 50%; top: 50%; font-size: .68em; width: 1.669em; height: 1.3em; margin: -.65em 0 0 -.8345em; filter: drop-shadow(0 0 .5px rgba(16,42,67,.6)) drop-shadow(0 0 .5px rgba(16,42,67,.6)); }
.flag > span::before{
	content: ''; position: absolute; left: 0; bottom: 0; width: 1.3224em; height: 1.3em;
	background: linear-gradient(90deg, rgba(255,255,255,.38), rgba(255,255,255,0) 30% 62%, rgba(0,0,0,.16)) 0 0 / 100% 100% no-repeat,
		var(--flag, linear-gradient(var(--c-steel), var(--c-steel))) 50% 0 / auto 1em no-repeat, var(--c-white);
	border-radius: .3em .08em 0 0; clip-path: polygon(0 0, 59.89% 0, 100% 100%, 0 100%);
	transform: skewX(-34deg); transform-origin: 0 100%;
}
/* « WFL » en Archivo Expanded 700 (sous-ensemble W, F, L) : capitales à 72 % de la bande (.314 em × hauteur de capitale .687 = .216 em
   sur .3 em), centrées : pied de ligne à -.013 em (ascendante .9, descendante .25, ligne de 1 em). */
.flag > span::after{ content: 'WFL'; position: absolute; left: 45%; bottom: -.013em; font: 700 expanded .314em/1 'Archivo', var(--font); letter-spacing: .04em; white-space: nowrap; color: var(--c-deep); transform: translateX(-50%) skewX(-12deg); }
.dropdown-menu{ border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: .375rem; font-family: var(--font); }
.dropdown-item{ border-radius: 6px; padding: .5rem .75rem; font-weight: 500; min-height: 40px; display: flex; align-items: center; gap: .625rem; }
.dropdown-item:hover, .dropdown-item:focus{ background: rgba(36,85,122,.08); color: var(--t-1); }
.dropdown-item.active{ background: rgba(36,85,122,.12); color: var(--c-navy); }
.nav-tabs{ border-bottom: 1px solid var(--line-strong); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; }
.nav-tabs .nav-link{ border: 0; color: var(--t-2); font-weight: 600; padding: .625rem .875rem; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nav-tabs .nav-link.active{ color: var(--c-navy); border-bottom-color: var(--c-gold); background: transparent; }
.filters{ display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filters .form-select, .filters .form-control{ min-width: 140px; flex: 1; }
.chips{ display: flex; gap: .375rem; flex-wrap: wrap; }
.chip{ border: 1px solid var(--line-strong); border-radius: 999px; padding: .375rem .75rem; font-size: .8125rem; font-weight: 600; color: var(--t-2); background: var(--surface); cursor: pointer; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; gap: .375rem; }
.chip.active{ background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-on-primary); }
.chip:hover{ text-decoration: none; border-color: var(--brand-secondary); color: var(--t-1); }
.chip.active:hover{ color: var(--brand-on-primary); }
.pagination{ --bs-pagination-color: var(--c-blue); --bs-pagination-active-bg: var(--brand-primary); --bs-pagination-active-border-color: var(--brand-primary); --bs-pagination-border-color: var(--line-strong); --bs-pagination-hover-bg: rgba(36,85,122,.08); --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(36,85,122,.18); margin: 1rem 0 0; }
.page-link{ min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.feature-grid{ display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 576px){ .feature-grid{ grid-template-columns: 1fr 1fr; } }
.feature-item{ display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.feature-item i{ color: var(--brand-secondary); width: 20px; text-align: center; }
.feature-item .form-check{ margin-left: auto; min-height: 0; }
.logo-preview{ height: 64px; width: auto; max-width: 200px; object-fit: contain; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem; }
.brand-preview{ border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.brand-preview .bar{ background: var(--brand-primary); color: var(--brand-on-primary); padding: .875rem 1rem; font-weight: 700; display: flex; align-items: center; gap: .625rem; }
.brand-preview .body{ padding: 1rem; background: var(--c-ivory); display: flex; align-items: center; gap: .5rem; }
.brand-preview .bar img{ background: #fff; border-radius: 4px; padding: 2px 4px; }
.brand-preview .btn-primary{ --bs-btn-hover-bg: var(--brand-secondary); --bs-btn-hover-border-color: var(--brand-secondary); }
.click2Loader{ cursor: pointer; }
@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }

/* ── Listes à l'intérieur d'un panneau : lignes, pas de cartes imbriquées ── */
.panel .list-cards{ gap: 0; }
.panel .list-card{ box-shadow: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .875rem .25rem; }
.panel .list-card:last-child{ border-bottom: 0; }
.panel .list-card:hover{ background: var(--surface-2); box-shadow: none; }
.panel-flush .list-cards{ padding-left: 1rem !important; padding-right: 1rem !important; }
@media (min-width: 992px){ .panel-flush .list-cards{ padding-left: 1.5rem !important; padding-right: 1.5rem !important; } }
.sidenav-divider{ height: 1px; background: var(--nav-line); margin: .75rem 1.25rem; }

/* ── SAV : devis (éditeur) ───────────────────────────────────────────── */
/* Drapeau prioritaire : bascule directe depuis les listes */
.fav-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -.375rem .125rem -.375rem -.5rem; border: 0; border-radius: 50%; background: transparent; color: rgba(16,42,67,.22); vertical-align: middle; cursor: pointer; transition: color .15s var(--ease), background .15s var(--ease); }
.fav-toggle i{ font-size: .875rem; }
.fav-toggle:hover{ background: rgba(16,42,67,.06); color: var(--t-2); }
.fav-toggle.is-on{ color: var(--c-gold, #B8862B); }
.fav-toggle.is-on:hover{ background: rgba(184,134,43,.14); }
.fav-toggle.is-loading{ opacity: .5; pointer-events: none; }
.fav-toggle:focus-visible{ outline: 2px solid var(--brand-secondary); outline-offset: 1px; }
.file-btn{ position: relative; overflow: hidden; }
.file-btn input[type=file]{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.attach-list{ display: none; flex-wrap: wrap; gap: .375rem; }
.attach-list.has-files{ display: flex; }
.attach-chip{ display: inline-flex; align-items: center; gap: .375rem; max-width: 100%; min-height: 32px; padding: .125rem .25rem .125rem .625rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: .8125rem; color: var(--t-1); }
.attach-chip > i{ color: var(--t-3); }
.attach-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.attach-chip small{ color: var(--t-3); white-space: nowrap; }
.attach-remove{ border: 0; background: transparent; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--t-3); cursor: pointer; }
.attach-remove:hover{ background: rgba(16,42,67,.08); color: var(--c-danger); }
.composer .attach-list.has-files{ padding: 0 .25rem .625rem; }
.quote-lines{ width: 100%; }
.quote-lines th{ font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--t-3); font-weight: 700; padding: .375rem .25rem; }
.quote-lines td{ padding: .25rem; vertical-align: top; }
.quote-lines .form-control{ min-height: 40px; padding: .375rem .625rem; font-size: .9375rem; }
.quote-lines .num .form-control{ text-align: right; }

.quote-lines .line-total{ text-align: right; font-weight: 700; padding-top: .75rem; white-space: nowrap; }
.quote-totals{ margin-left: auto; max-width: 320px; }
.quote-totals div{ display: flex; justify-content: space-between; padding: .25rem 0; }
.quote-totals .ttc{ font-weight: 700; font-size: 1.125rem; border-top: 1px solid var(--line-strong); margin-top: .25rem; padding-top: .5rem; }
@media (max-width: 767px){
	.quote-lines thead{ display: none; }
	.quote-lines tr{ display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; border-bottom: 1px solid var(--line); padding: .625rem 0; }
	.quote-lines td{ padding: 0; }
	.quote-lines td.wide{ grid-column: 1 / -1; }
	.quote-lines .line-total{ text-align: left; padding-top: .375rem; }
}
.answer-box{ background: rgba(184,154,94,.10); border: 1px solid rgba(184,154,94,.4); border-radius: var(--r-md); padding: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   FICHE SAV — en-tête · conversation (fil chronologique) · fiche récapitulative
   ══════════════════════════════════════════════════════════════════════════ */

/* En-tête */
/* Carte du SAV (partials/savDetail.php) : la forme d'une carte d'embarquement, les mots du SAV. Corps blanc (bandeau : référence,
   statut ; trajet client → prise en charge ; champs), perforation, talon ivoire (mise à jour, code décoratif, n° de série). */
.sav-pass{ display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1); margin-bottom: 1rem; }
.sav-pass-main{ flex: 1; min-width: 0; }
.sav-pass-band{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.sav-pass-ref{ font-size: 1rem; font-weight: 600; color: var(--t-1); display: inline-flex; align-items: center; gap: .25rem; }
.sav-pass-ref .fav-toggle{ margin: -.375rem 0; }
.sav-pass-badges{ display: inline-flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.sav-pass-route{ display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem; padding: 1rem 1rem .25rem; }
.sav-pass-to{ text-align: right; }
.sav-pass-lbl{ display: block; font-size: .75rem; color: var(--t-2); margin-bottom: .1875rem; }
.sav-pass-name{ display: block; font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; overflow-wrap: anywhere; }
.sav-pass-sub{ display: block; margin-top: .25rem; font-size: .8125rem; color: var(--t-2); }
.sav-pass-sub i{ font-size: .6875rem; }
.sav-pass-arrow{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--c-blue); font-size: .8125rem; }
.sav-pass-fields{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .875rem 1.25rem; margin: .75rem 1rem 0; padding: .875rem 0 1rem; border-top: 1px solid var(--line); }
.sav-pass-fields dt{ font-size: .75rem; font-weight: 400; color: var(--t-2); margin-bottom: .1875rem; }
.sav-pass-fields dd{ margin: 0; font-size: .9375rem; font-weight: 600; color: var(--t-1); min-width: 0; overflow-wrap: anywhere; }
.sav-pass-fields dd .text-2, .sav-pass-fields dd .text-3, .sav-pass-fields dd .mono{ font-weight: 500; }
/* Talon : séparé par une perforation (pointillés + deux encoches à la couleur de la page) */
.sav-pass-stub{ position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; padding: .875rem 1rem 1rem; background: var(--surface-2); border-top: 1px dashed var(--line-strong); border-radius: 0 0 16px 16px; }
.sav-pass-stub::before, .sav-pass-stub::after{ content: ''; position: absolute; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--page-bg); box-shadow: inset 0 0 0 1px var(--line); }
.sav-pass-stub::before{ left: -11px; clip-path: inset(0 0 0 50%); }
.sav-pass-stub::after{ right: -11px; clip-path: inset(0 50% 0 0); }
.sav-pass-update{ display: block; font-size: .9375rem; font-weight: 500; }
/* QR code de la fiche (Generic::savQr) : modules Bleu Nuit sur carte blanche, marge claire comprise dans le SVG */
.sav-pass-code{ width: 84px; height: 84px; flex: none; color: var(--c-navy); background: #FFFFFF; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.sav-pass-code svg{ display: block; width: 100%; height: 100%; }
.sav-pass-serial{ font-size: .75rem; letter-spacing: .06em; color: var(--t-2); }
@media (min-width: 768px){
	.sav-pass{ flex-direction: row; }
	.sav-pass-band{ padding: .875rem 1.5rem; }
	.sav-pass-route{ padding: 1.25rem 1.5rem .25rem; gap: 1.5rem; }
	.sav-pass-name{ font-size: 1.375rem; }
	.sav-pass-fields{ margin: .75rem 1.5rem 0; padding: 1rem 0 1.25rem; }
	.sav-pass-stub{ width: 220px; flex: none; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 1.25rem 1.25rem 1.25rem 1.5rem; border-top: 0; border-left: 1px dashed var(--line-strong); border-radius: 0 16px 16px 0; }
	.sav-pass-stub::before{ top: -11px; left: -10px; clip-path: inset(50% 0 0 0); }
	.sav-pass-stub::after{ top: auto; bottom: -11px; right: auto; left: -10px; clip-path: inset(0 0 50% 0); }
	.sav-pass-code{ width: 128px; height: 128px; }
}

/* Trajectoire : les statuts successifs du SAV, datés ; trait plein pour le parcours, pointillés vers la destination (Résolu) */
.sav-route{ margin-bottom: 1rem; }
.sav-route-scroll{ overflow-x: auto; margin: 0 -.25rem; padding: .25rem .25rem .25rem; }
.sav-route-list{ list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); }
.sav-route-list .stop{ position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1875rem; padding: 0 .375rem; }
.sav-route-list .stop + .stop::before{ content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--c-blue); }
.sav-route-list .stop.is-next::before{ height: 0; border-top: 2px dashed var(--c-steel); background: none; }
.stop-dot{ position: relative; z-index: 1; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .375rem; }
.stop-dot::before{ content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--c-blue); box-shadow: 0 0 0 4px var(--surface); }
.stop.is-current .stop-dot{ border-radius: 50%; background: var(--c-blue); color: #FFFFFF; font-size: .8125rem; box-shadow: 0 0 0 4px var(--surface); }
.stop.is-current .stop-dot::before{ display: none; }
.stop.is-next .stop-dot::before{ width: 14px; height: 14px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--c-steel), 0 0 0 4px var(--surface); }
.stop.is-gap .stop-dot::before{ width: 6px; height: 6px; background: var(--c-steel); }
.stop-label{ font-size: .875rem; font-weight: 500; line-height: 1.25; }
.stop.is-current .stop-label{ font-weight: 600; }
.stop.is-next .stop-label, .stop.is-gap .stop-label{ color: var(--t-2); }
.stop-date{ font-size: .75rem; color: var(--t-2); }
.stop-who{ font-size: .75rem; color: var(--t-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.case-head{ display: grid; grid-template-columns: 1fr; gap: .75rem; margin-bottom: 1.25rem; }
.case-title h1{ margin: 0; font-size: 1.375rem; line-height: 1.25; text-wrap: balance; max-width: 34ch; }
.case-actions{ display: flex; gap: .5rem; flex-wrap: wrap; }
.case-actions .btn{ flex: 1; }
@media (min-width: 768px){
	.case-head{ grid-template-columns: 1fr auto; grid-template-areas: "title actions"; align-items: end; column-gap: 1.5rem; }
	.case-title{ grid-area: title; }
	.case-actions{ grid-area: actions; }
	.case-actions .btn{ flex: 0 0 auto; }
	.case-title h1{ font-size: 1.75rem; }
}

/* Grille : conversation + fiche */
.case-grid{ display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.case-side{ order: -1; }
@media (min-width: 992px){
	.case-grid{ grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: 1.5rem; }
	.case-side{ order: 0; position: sticky; top: calc(var(--appbar-h) + 1.5rem); }
}
@media (min-width: 1200px){ .case-grid{ grid-template-columns: minmax(0, 8fr) minmax(320px, 4fr); } }

/* Fiche récapitulative : repliable sur mobile, toujours ouverte sur desktop */
.case-summary{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.case-summary summary{ list-style: none; cursor: pointer; display: flex; align-items: center; gap: .625rem; padding: .875rem 1rem; font-weight: 700; color: var(--t-1); min-height: 48px; }
.case-summary summary::-webkit-details-marker{ display: none; }
.case-summary summary .chev{ margin-left: auto; color: var(--t-3); transition: transform .2s var(--ease); }
.case-summary[open] summary .chev{ transform: rotate(180deg); }
.case-summary summary > i:first-child{ color: var(--brand-secondary); }
.case-summary-body{ padding: 0 1rem 1rem; }
@media (min-width: 992px){
	.case-summary summary{ display: none; }
	.case-summary-body{ padding: .25rem 1.25rem 1.25rem; }
}
.case-section{ padding: 1rem 0; border-top: 1px solid var(--line); }
.case-section:first-child{ border-top: 0; padding-top: .5rem; }
.case-section:last-child{ padding-bottom: 0; }
.case-section h2{ font-size: .9375rem; font-weight: 600; color: var(--t-1); margin: 0 0 .625rem; }
.case-dl{ display: grid; grid-template-columns: minmax(84px, 34%) 1fr; gap: .375rem .75rem; margin: 0; font-size: .9375rem; }
.case-dl dt{ color: var(--t-2); font-weight: 500; }
.case-dl dd{ margin: 0; color: var(--t-1); font-weight: 600; min-width: 0; word-break: break-word; }
.case-dl dd .text-2, .case-dl dd .text-3{ font-weight: 500; }
.case-dl dd a{ font-weight: 600; }

/* Documents */
.doc-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.doc-item{ border: 1px solid var(--line); border-radius: var(--r-sm); padding: .75rem; }
.doc-row{ display: flex; align-items: center; gap: .625rem; }
.doc-icon{ width: 36px; height: 36px; border-radius: 8px; background: rgba(36,85,122,.10); color: var(--brand-secondary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.doc-main{ min-width: 0; flex: 1; }
.doc-num{ font-weight: 700; }
.doc-sub{ font-size: .75rem; color: var(--t-3); }
.doc-right{ display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.doc-amount{ font-weight: 700; white-space: nowrap; }
.doc-actions{ display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem; }
.doc-answer{ margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--line-strong); }
.doc-comment{ margin-top: .5rem; font-size: .8125rem; color: var(--t-2); display: flex; gap: .5rem; }
.doc-comment i{ color: var(--t-3); margin-top: .2rem; }

/* Conversation : fil chronologique aligné à gauche, rail d'avatars */
.case-main{ min-width: 0; }
.case-thread{ padding: .875rem; margin-bottom: 0; }
.case-thread-title{ font-size: 1.0625rem; font-weight: 600; color: var(--t-1); margin: 0 0 1rem; }
.case-thread-count{ font-weight: 500; color: var(--t-2); }
@media (min-width: 992px){ .case-thread{ padding: 1.25rem; } }
.timeline{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.tl-day{ display: flex; align-items: center; gap: .75rem; color: var(--t-3); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: .25rem 0 -.25rem; }
.tl-day::before, .tl-day::after{ content: ''; flex: 1; height: 1px; background: var(--line); }
.tl-msg{ display: grid; grid-template-columns: 40px 1fr; gap: .75rem; }
.tl-avatar{ width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8125rem; letter-spacing: .02em; flex: none; }
.tl-user .tl-avatar{ background: var(--c-gold); color: var(--c-deep); }
.tl-team .tl-avatar{ background: var(--brand-primary); color: var(--brand-on-primary); }
.tl-superadmin .tl-avatar{ background: var(--c-blue); color: var(--c-ivory); }
.tl-system .tl-avatar{ background: rgba(16,42,67,.10); color: var(--t-2); }
.tl-body{ min-width: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: .75rem .875rem; }
.tl-internal .tl-body{ background: #FBF6EA; border-color: rgba(184,154,94,.45); }
.tl-meta{ display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; margin-bottom: .375rem; font-size: .8125rem; }
.tl-name{ font-weight: 700; color: var(--t-1); font-size: .9375rem; }
.tl-role{ color: var(--t-3); }
.tl-tag{ font-size: .6875rem; font-weight: 700; padding: .125rem .5rem; border-radius: 999px; background: rgba(36,85,122,.10); color: var(--c-blue); white-space: nowrap; }
.tl-tag:has(.flag){ padding-left: .125rem; }
.tl-tag-lock{ background: rgba(184,154,94,.18); color: #7D6634; }
.tl-meta time{ margin-left: auto; color: var(--t-3); font-variant-numeric: tabular-nums; }
.tl-text{ font-size: 1rem; line-height: 1.55; color: var(--t-1); white-space: pre-wrap; word-break: break-word; max-width: 72ch; }
.tl-files{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .625rem; }
.tl-thumb img{ width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.tl-file{ display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .875rem; max-width: 100%; }
.tl-file span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-file small{ color: var(--t-3); white-space: nowrap; }
/* Événements : une ligne, dans le rail */
.tl-event{ display: flex; flex-direction: column; align-items: center; gap: .375rem; text-align: center; }
.tl-event-card{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; max-width: 100%; padding: .375rem .875rem .375rem .5rem; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); font-size: .8125rem; color: var(--t-2); text-align: left; }
.tl-event-icon{ width: 26px; height: 26px; border-radius: 50%; background: rgba(16,42,67,.08); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; font-size: .6875rem; flex: none; }
.tl-event-gold{ background: #FBF6EA; border-color: rgba(184,154,94,.45); }
.tl-event-gold .tl-event-icon{ background: rgba(184,154,94,.28); color: #7D6634; }
.tl-event-blue{ background: rgba(36,85,122,.07); border-color: rgba(36,85,122,.30); }
.tl-event-blue .tl-event-icon{ background: rgba(36,85,122,.16); color: var(--c-blue); }
.tl-event-text{ min-width: 0; line-height: 1.7; }
.tl-event-text .badge-status{ vertical-align: middle; }
.tl-event-text strong{ color: var(--t-1); }
.tl-event-text a{ font-weight: 700; }
.tl-event-amount{ color: var(--t-3); }
.tl-event-card time{ color: var(--t-3); font-variant-numeric: tabular-nums; padding-left: .625rem; border-left: 1px solid var(--line); line-height: 1; white-space: nowrap; }
.tl-event-note{ font-size: .875rem; font-style: italic; color: var(--t-2); max-width: 60ch; }

/* Composer */
.composer{ background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: .75rem; margin-bottom: 1.25rem; }
.composer-text{ display: block; width: 100%; border: 0; background: transparent; resize: vertical; font: inherit; font-size: 1rem; line-height: 1.5; color: var(--t-1); padding: .25rem .25rem .5rem; min-height: 72px; outline: none; }
.composer-text::placeholder{ color: var(--t-3); }
.composer-bar{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; border-top: 1px solid var(--line); padding-top: .625rem; }
.composer-switch{ display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; color: var(--t-2); cursor: pointer; min-height: 36px; padding: 0 .375rem; }
.composer-switch .form-check-input{ margin: 0; }
.composer-switch i{ color: var(--c-gold); }
/* Synthèse de SAV : mode sélection */
.summary-bar{ display: none; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; border-color: var(--c-gold); }
.summary-bar-text{ flex: 1 1 240px; font-size: .875rem; color: var(--t-2); }
.summary-bar-text i{ color: var(--c-gold); margin-right: .25rem; }
.summary-mode .summary-bar{ display: flex; }
.summary-mode .composer{ display: none; }
.tl-pick{ display: none; align-items: center; margin-right: .5rem; }
.tl-pick .form-check-input{ margin: 0; width: 18px; height: 18px; cursor: pointer; }
.summary-mode .tl-pick{ display: inline-flex; }
.composer-status{ width: auto; min-height: 36px; flex: 1 1 180px; max-width: 260px; }
.composer-send{ margin-left: auto; }
@media (min-width: 992px){ .composer{ padding: 1rem; } }
/* Mobile : composer compact, s'étend à la saisie */
@media (max-width: 991px){
	.composer-text{ min-height: 44px; }
	.composer:focus-within .composer-text{ min-height: 96px; }
}
.case-main .alert{ margin-bottom: 1.25rem; }

/* ── Graphiques (Generic::chart, initCharts) ──────────────────────────────── */
.chart{ margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .875rem; container-type: inline-size; }
.chart-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.chart-title{ font-size: 1.0625rem; margin: 0; }
.chart-sub{ font-size: .8125rem; color: var(--t-2); margin-top: .125rem; }
.chart-toggle{ flex: none; width: 36px; height: 36px; margin: -.375rem -.375rem 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--t-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.chart-toggle:hover{ background: rgba(16,42,67,.06); color: var(--t-1); }
.chart-toggle[aria-pressed="true"]{ background: rgba(36,85,122,.12); color: var(--c-blue); }
.chart-main{ display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.chart-body{ position: relative; min-width: 0; }
.chart-body canvas{ display: block; }
/* Légende : pastille de la couleur de la série, texte dans les encres de l'interface */
.chart-legend{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8125rem; color: var(--t-2); }
.chart-legend li{ display: flex; align-items: center; gap: .5rem; min-width: 0; }
.chart-legend .swatch{ width: 10px; height: 10px; border-radius: 3px; flex: none; }
.chart-legend .swatch-line{ height: 3px; width: 14px; border-radius: 2px; }
/* Anneau et camembert : la légende porte les valeurs et les parts */
.chart-legend-values{ flex-direction: column; flex-wrap: nowrap; gap: .5rem; }
.chart-legend-values .name{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend-values strong{ color: var(--t-1); font-weight: 700; }
.chart-legend-values .part{ width: 3.25em; text-align: right; color: var(--t-3); }
/* Assez de largeur dans le bloc (et non dans la fenêtre) : anneau à gauche, légende à droite */
@container (min-width: 400px){
	.chart-round .chart-main{ display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); align-items: center; gap: 1.25rem; }
}
.chart.is-table .chart-main{ display: none; }
.chart-table{ margin: 0 -.25rem; }
.chart-table .table{ font-size: .875rem; }
.chart-table .table td, .chart-table .table th{ padding: .5rem .75rem; }
.chart-empty{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .625rem; min-height: 160px; color: var(--t-3); font-size: .875rem; text-align: center; }
.chart-empty i{ font-size: 1.5rem; color: rgba(36,85,122,.35); }
.chart-call{ display: block; margin-top: 1rem; padding: .5rem .75rem; border-radius: var(--r-sm); background: var(--surface-2); color: var(--t-2); font-size: .75rem; white-space: pre-wrap; word-break: break-word; }
.chart-period{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: 1.25rem 0 .75rem; }
.chart-period h2{ margin: 0; }

/* ── Produits ─────────────────────────────────────────────────────────────── */
.product-thumb{ width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--t-3); font-size: 1.25rem; }
.product-thumb-sm{ width: 40px; height: 40px; font-size: .875rem; border-radius: 8px; }
.product-thumb-empty{ background: rgba(16,42,67,.05); }
.product-image-preview{ max-width: 240px; max-height: 240px; object-fit: contain; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
/* Photo d'une fiche (app.js .photo-field) : vignette carrée, corbeille toujours visible en haut à droite, bouton d'envoi dessous ;
   .is-empty sans photo, .is-loading pendant l'envoi ou la suppression */
.photo-field{ display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; width: 176px; }
.photo-tile{ position: relative; width: 176px; height: 176px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.photo-tile img{ width: 100%; height: 100%; object-fit: contain; }
.photo-tile-empty{ display: none; flex-direction: column; align-items: center; gap: .5rem; color: var(--t-3); font-size: .8125rem; }
.photo-tile-empty > :first-child{ font-size: 1.75rem; }
.photo-field.is-empty .photo-tile{ border-style: dashed; background: rgba(16,42,67,.04); }
.photo-field.is-empty .photo-tile img, .photo-field.is-empty .photo-delete, .photo-field.is-empty .when-full, .photo-field:not(.is-empty) .when-empty{ display: none; }
.photo-field.is-empty .photo-tile-empty{ display: flex; }
.photo-delete{ position: absolute; top: .5rem; right: .5rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--c-danger); box-shadow: var(--shadow-1); transition: background .15s var(--ease), color .15s var(--ease); }
.photo-delete::before{ content: ''; position: absolute; inset: -5px; }
.photo-delete:hover{ background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.photo-pick{ margin: 0; }
.photo-pick:focus-within{ box-shadow: 0 0 0 .25rem rgba(36,85,122,.25); }
.photo-field.is-loading{ pointer-events: none; }
.photo-field.is-loading .photo-tile > *{ opacity: .35; }
.photo-field.is-loading .photo-tile::after{ content: ''; position: absolute; width: 28px; height: 28px; border: 3px solid rgba(36,85,122,.3); border-top-color: var(--c-blue); border-radius: 50%; animation: spin .7s linear infinite; }
/* Case à cocher d'une ligne cliquable : toute la cellule (ou une marge autour, en carte) coche la case au lieu d'ouvrir la ligne */
.check-cell{ display: flex; align-items: center; justify-content: center; margin: -.875rem -1rem; padding: .875rem 1rem; cursor: pointer; }
.list-card .check-cell{ margin: -.5rem; padding: .5rem; align-self: flex-start; }
.check-cell input{ margin: 0; }
.color-swatch{ width: 16px; height: 16px; border-radius: 4px; display: inline-block; border: 1px solid rgba(0,0,0,.08); }

/* ── Devis : sélecteur de produit ─────────────────────────────────────────── */
.line-pick{ display: inline-flex; align-items: center; gap: .5rem; width: 100%; min-height: 40px; padding: .25rem .5rem .25rem .25rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--t-1); text-align: left; cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.line-pick:hover{ border-color: var(--brand-secondary); }
.line-pick:focus-visible{ outline: 0; box-shadow: 0 0 0 3px rgba(36,85,122,.18); border-color: var(--brand-secondary); }
.line-pick:disabled{ cursor: default; opacity: .7; }
.line-pick-thumb{ width: 30px; height: 30px; flex: 0 0 auto; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--t-3); font-size: .75rem; background: var(--surface); }
.line-pick-empty{ background: rgba(16,42,67,.05); }
.line-pick-sku{ font-weight: 700; font-size: .8125rem; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-tools{ display: grid; grid-template-columns: 1fr 200px; gap: .5rem; margin-bottom: .75rem; }
@media (max-width: 575px){ .picker-tools{ grid-template-columns: 1fr; } }
.picker-list{ display: flex; flex-direction: column; gap: .375rem; max-height: 52vh; overflow: auto; padding-right: .25rem; }
.picker-row{ display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .625rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left; cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.picker-row:hover, .picker-row:focus-visible{ border-color: var(--brand-secondary); box-shadow: var(--shadow-1); outline: 0; }
.picker-thumb{ width: 48px; height: 48px; flex: 0 0 auto; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--t-3); background: var(--surface); }
.picker-thumb-empty{ background: rgba(16,42,67,.05); }
.picker-main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.picker-sku{ font-weight: 700; font-size: .8125rem; letter-spacing: .02em; color: var(--t-1); }
.picker-name{ font-size: .9375rem; color: var(--t-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-tags{ display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .125rem; }
.picker-price{ flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--t-1); white-space: nowrap; }
.picker-price small{ font-weight: 600; color: var(--t-3); margin-left: .25rem; font-size: .6875rem; }

/* ── Devis : menus de diagnostics / actions prédéfinis ───────────────────── */
.template-menu{ min-width: 320px; max-width: 90vw; padding: .5rem 0; }
.template-menu .template-items{ max-height: 300px; overflow: auto; }
.template-menu .dropdown-item{ white-space: normal; font-size: .9375rem; padding: .5rem 1rem; }

/* ── Catégories tarifaires : incidence du pourcentage, prix calculés / modifiés ── */
.pct-effect{ display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; }
.pct-effect .pct-icon{ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 6px; font-size: 1rem; }
.pct-effect.is-up{ color: #8C6418; }
.pct-effect.is-up .pct-icon{ background: rgba(184,134,43,.14); }
.pct-effect.is-down{ color: #256448; }
.pct-effect.is-down .pct-icon{ background: rgba(47,125,91,.12); }
.pct-effect.is-zero{ color: var(--t-3); font-weight: 500; }
.pct-effect.is-zero .pct-icon{ background: rgba(16,42,67,.06); font-size: .875rem; }
/* ── Zones d'une fiche (fiche produit) ───────────────────────────────────────
   Cadre avec un bandeau de titre, puis une ligne par champ (.zone-row : libellé à gauche, champ à droite), une ligne par élément
   (.zone-item) ou un bloc libre (.zone-body) ; .zone-split met une colonne à gauche (photo) à côté des lignes. Sur mobile, le libellé passe au-dessus. */
/* Grille de zones alignées : deux colonnes à partir de 1200 px, les zones vont par rangées et se partagent la hauteur de la rangée
   (même haut, même bas) ; .zone-wide occupe la rangée entière. Ordre du HTML = ordre des rangées ; .zone-side (à côté du formulaire)
   passe après les zones du formulaire quand la grille est sur une colonne. */
.zone-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.zone-actions{ margin-top: .25rem; }
.zone-last{ order: 2; }
@media (min-width: 1200px){
	.zone-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
	.zone-wide{ grid-column: 1 / -1; }
}
@media (max-width: 1199.98px){
	.zone-side{ order: 1; }
}
.zone{ display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1); container-type: inline-size; }
/* Conteneur de requêtes = contexte d'empilement : la zone où une liste déroulante est ouverte (focus) passe devant la suivante */
.zone:focus-within{ position: relative; z-index: 2; }
.panel .zone{ box-shadow: none; }
.zone-head{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 40px; padding: .5rem 1rem; border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; background: var(--surface-2); }
.zone > :last-child{ border-bottom-left-radius: calc(var(--r-md) - 1px); border-bottom-right-radius: calc(var(--r-md) - 1px); }
.zone-title{ margin: 0; color: var(--t-3); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.zone-title label{ margin: 0; }
.zone-head a, .zone-head .zone-meta{ font-size: .8125rem; font-weight: 600; }
.zone-head .zone-meta{ color: var(--t-3); font-variant-numeric: tabular-nums; }
.zone.is-danger .zone-title{ color: var(--c-danger); }
.zone-row, .zone-item, .zone-body, .zone-foot{ border-top: 1px solid var(--line); padding: .75rem 1rem; }
.zone-row{ display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: .375rem 1rem; }
.zone-label{ margin: 0; color: var(--t-1); font-size: .875rem; font-weight: 600; }
/* Champ sur plusieurs lignes (adresse) : libellé aligné sur la première */
.zone-row.is-top{ align-items: start; }
.zone-row.is-top > .zone-label{ padding-top: .75rem; }
.zone-value{ font-variant-numeric: tabular-nums; }
.zone-field-sm{ max-width: 168px; }
.zone-item{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 52px; padding-top: .375rem; padding-bottom: .375rem; }
/* Ligne-lien (liste de SAV…) : toute la ligne ouvre la fiche */
.zone-link{ color: inherit; text-decoration: none; transition: background .15s var(--ease); }
.zone-link:hover{ background: var(--surface-2); color: inherit; text-decoration: none; }
.zone-foot{ margin-top: auto; background: var(--surface-2); color: var(--t-2); font-size: .8125rem; }
.zone-split{ display: grid; grid-template-columns: 208px minmax(0, 1fr); border-top: 1px solid var(--line); }
.zone-split-side{ padding: 1rem; border-right: 1px solid var(--line); }
.zone-split-main > .zone-row:first-child{ border-top: 0; }
/* À côté de la photo, libellés courts (Nom, Référence…) : colonne de libellé réduite pour laisser la place aux champs */
.zone-split-main .zone-row{ grid-template-columns: 96px minmax(0, 1fr); }
/* Utilitaire : un enfant flex ou grid qui peut rétrécir sous la largeur de son contenu (texte tronqué) */
.min-w-0{ min-width: 0; }
.zone-hint{ display: block; margin-top: .125rem; color: var(--t-3); font-size: .75rem; font-weight: 400; line-height: 1.4; }
.zone-note{ color: var(--t-2); font-size: .8125rem; }
.zone-field > * + *{ margin-top: .5rem; }
.zone-inline{ display: flex; gap: .5rem; }
.zone-inline > :first-child{ flex: 0 0 120px; }
.zone-inline > :last-child{ flex: 1 1 auto; min-width: 0; }
/* Réglage tout-ou-rien : libellé (et aide) à gauche, interrupteur à droite ; toute la ligne bascule l'interrupteur */
.zone-switch{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0; padding: .75rem 1rem; border-top: 1px solid var(--line); cursor: pointer; }
.zone-switch > i, .zone-switch > svg{ flex: none; width: 20px; color: var(--brand-secondary); text-align: center; }
.zone-switch > span:not(.form-switch){ flex: 1 1 auto; min-width: 0; }
.zone-switch .form-switch{ flex: none; min-height: 0; margin: 0; padding: 0; }
.zone-switch .form-switch .form-check-input{ float: none; margin: 0; cursor: pointer; }
/* Éléments en cellules (interrupteurs de fonctionnalités…) : deux colonnes dans une zone large, séparées par des filets ;
   un dernier élément seul occupe toute la ligne */
.zone-cells{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; border-top: 1px solid var(--line); background: var(--line); overflow: hidden; }
.zone-cells > *{ border-top: 0; background: var(--surface); }
@container (min-width: 640px){ .zone-cells{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .zone-cells > :last-child:nth-child(odd){ grid-column: 1 / -1; } }
/* Ligne d'option à choix (ex. fonctionnalités) : icône, libellé et aide, puis le choix à droite */
.zone-option{ display: flex; align-items: center; gap: .75rem; padding: .625rem 1rem; border-top: 1px solid var(--line); }
.zone-option > i, .zone-option > svg{ flex: none; width: 20px; color: var(--brand-secondary); text-align: center; }
.zone-option > .form-select{ flex: none; width: auto; margin-left: auto; }
/* Colonnes selon la largeur de la zone (pas de l'écran) : libellé plus étroit dans une zone moyenne, au-dessus du champ dans une zone étroite.
   Pas d'overflow caché : les listes déroulantes (Tom Select) débordent sur la zone suivante */
@container (max-width: 560px){ .zone-row{ grid-template-columns: 140px minmax(0, 1fr); } .price-cats .price-row{ grid-template-columns: 140px 168px minmax(0, 1fr); } }
@container (max-width: 400px){ .zone-row{ grid-template-columns: minmax(0, 1fr); } .zone-row.is-top > .zone-label{ padding-top: 0; } .zone-field-sm{ max-width: none; } }
@media (max-width: 575.98px){
	.zone-row{ grid-template-columns: minmax(0, 1fr); }
	.zone-row.is-top > .zone-label{ padding-top: 0; }
	.zone-split{ grid-template-columns: minmax(0, 1fr); }
	.zone-split-side{ border-right: 0; border-bottom: 1px solid var(--line); }
	.zone-field-sm{ max-width: none; }
}

/* Prix d'une fiche produit (partials/productPrices.php, une zone) : une ligne par catégorie — nom et ajustement, prix HT, état.
   Prix modifié (.is-fixed) : champ doré et capsule « Revenir à {prix calculé} » à la place de « Prix calculé » */
.price-ttc{ display: inline-flex; align-items: center; min-height: 44px; font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-row{ display: grid; grid-template-columns: 180px 168px minmax(0, 1fr); align-items: center; gap: .75rem 1rem; padding: .625rem 1rem; border-top: 1px solid var(--line); }
.price-row-name{ display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-width: 0; margin: 0; font-size: .9375rem; }
.price-row .form-control{ text-align: right; font-variant-numeric: tabular-nums; }
.pct-pill{ display: inline-flex; align-items: center; padding: .0625rem .5rem; border-radius: 999px; background: rgba(16,42,67,.06); color: var(--t-3); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pct-pill.is-up{ background: rgba(184,134,43,.14); color: #8C6418; }
.pct-pill.is-down{ background: rgba(47,125,91,.12); color: #256448; }
.price-cat-auto{ display: inline-flex; align-items: center; gap: .375rem; color: var(--t-3); font-size: .8125rem; }
.price-cat-reset{ display: none; align-items: center; gap: .4375rem; min-height: 34px; padding: .25rem .875rem; border: 1px solid rgba(184,154,94,.6); border-radius: 999px; background: rgba(184,154,94,.12); color: #8C6418; font-size: .8125rem; font-weight: 600; white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease); }
.price-cat-reset:hover, .price-cat-reset:focus-visible{ background: var(--c-gold); border-color: var(--c-gold); color: #fff; }
.price-cat-computed{ font-variant-numeric: tabular-nums; }
.price-cat.is-fixed .form-control{ border-color: var(--c-gold); background: rgba(184,154,94,.10); font-weight: 600; }
.price-cat.is-fixed .price-cat-auto{ display: none; }
.price-cat.is-fixed .price-cat-reset{ display: inline-flex; }
/* Mobile : nom et ajustement sur une ligne, puis le prix et l'état côte à côte, l'état passant dessous s'il manque de place */
@media (max-width: 575.98px){
	.price-row{ display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
	.price-row-name{ flex: 1 1 100%; }
	.price-row .input-group{ flex: 1 1 140px; }
	.price-row-state{ flex: 0 1 auto; }
}

/* Tags d'une fiche produit (partials/productTags.php, Generic::tagToggle) : pastille au point de la couleur du tag, pleine une fois cochée ;
   « Nouveau tag » en pointillés ouvre un champ d'ajout */
.tag-picker-list{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tag-toggle{ position: relative; margin: 0; cursor: pointer; }
.tag-toggle-in, .tag-add-open{ display: inline-flex; align-items: center; gap: .4375rem; min-height: 36px; padding: .375rem .875rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--t-1); font-size: .8125rem; font-weight: 600; user-select: none; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.tag-toggle-in::before{ content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tag); }
.tag-toggle-check{ display: none; font-size: .75rem; }
.tag-toggle:hover .tag-toggle-in{ border-color: var(--tag); }
.tag-toggle input:checked + .tag-toggle-in{ background: var(--tag); border-color: var(--tag); color: var(--tag-fg); }
.tag-toggle input:checked + .tag-toggle-in::before{ display: none; }
.tag-toggle input:checked + .tag-toggle-in .tag-toggle-check{ display: inline-flex; }
.tag-toggle input:focus-visible + .tag-toggle-in{ outline: 2px solid var(--c-blue); outline-offset: 2px; }
.tag-add-open{ border-style: dashed; background: none; color: var(--t-2); }
.tag-add-open:hover, .tag-add-open:focus-visible{ border-color: var(--c-blue); color: var(--c-blue); }
.tag-add-form{ display: inline-flex; align-items: center; gap: .375rem; }
.tag-add-form .form-control{ width: 180px; min-height: 36px; padding: .25rem .875rem; border-radius: 999px; font-size: .8125rem; }

/* ── Documentation ─────────────────────────────────────────────────────────
   Tuile d'icône d'un document (PDF, vidéo envoyée, vidéo en ligne), drapeaux de ses langues ; fiche document : fichier actuel et envoi
   par morceaux (.doc-upload : is-sending, is-done, is-error). Lounge : filtres (groupes, langues, format et produit), puis une section par
   produit (.doc-product) avec une ligne par document (.doc-row) ; lecteur vidéo en fenêtre (.doc-player) */
.doc-icon{ display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 8px; background: rgba(36,85,122,.08); color: var(--c-blue); font-size: 1rem; }
.doc-langs{ display: inline-flex; align-items: center; gap: .125rem; }
.doc-langs .lang-flag{ font-size: 1rem; }
.doc-refs .ref{ display: inline-block; margin: .125rem .25rem .125rem 0; padding: .0625rem .375rem; border-radius: 6px; background: rgba(16,42,67,.06); color: var(--t-2); font-size: .75rem; white-space: nowrap; }
/* Cockpit : recherche et son bouton sur la première ligne, les filtres dessous */
.doc-filters-cockpit input[type=search]{ flex: 1 1 calc(100% - 44px - .5rem); }
.doc-current{ display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; padding: .625rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.doc-upload-pick{ margin: 0; }
.doc-upload-pick:focus-within{ box-shadow: 0 0 0 .25rem rgba(36,85,122,.25); }
.doc-upload-state{ margin-top: .625rem; max-width: 420px; }
.doc-upload .progress{ height: 6px; }
.doc-upload .progress-bar{ transition: width .2s var(--ease); }
.doc-upload.is-done .doc-upload-status{ color: var(--c-success); }
.doc-upload.is-error .doc-upload-status{ color: var(--c-danger); }
.doc-upload.is-error .progress{ display: none; }
.doc-upload .zone-hint{ margin-top: .5rem; }

.doc-filters{ display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.doc-filters-row{ display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.doc-filters .chip .lang-flag{ font-size: .9375rem; margin-left: -.375rem; }
.doc-search{ display: flex; gap: .5rem; flex: 1 1 320px; min-width: 0; }
.doc-search .form-select{ flex: 0 0 auto; width: auto; }
.doc-search .form-control{ flex: 1 1 auto; min-width: 0; }
.doc-products{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.doc-product{ margin: 0; padding: 0; overflow: hidden; }
.doc-product-head{ display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.doc-product-head h2{ margin: 0; font-size: 1rem; line-height: 1.3; }
.doc-product-head .ref{ color: var(--t-3); font-size: .75rem; font-weight: 600; }
.doc-list{ margin: 0; padding: 0; list-style: none; }
.doc-row{ display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; }
.doc-row + .doc-row{ border-top: 1px solid var(--line); }
.doc-main{ flex: 1 1 auto; min-width: 0; }
.doc-name{ display: block; color: var(--t-1); font-weight: 600; overflow-wrap: anywhere; text-decoration: none; }
.doc-name:hover{ color: var(--brand-secondary); text-decoration: underline; }
.doc-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin-top: .125rem; color: var(--t-2); font-size: .8125rem; }
.doc-actions{ display: flex; align-items: center; gap: .25rem; flex: none; }
.doc-player{ background: #000; }
.doc-player > iframe, .doc-player > video{ border: 0; }
@media (max-width: 575.98px){
	.doc-search{ flex-wrap: wrap; }
	.doc-search .form-select{ flex: 1 1 100%; }
	.doc-action-label{ display: none; }
	.doc-row{ padding: .75rem; }
	.doc-icon{ width: 36px; height: 36px; }
}
@media (min-width: 1200px){
	.doc-products{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.doc-product-photo{ width: 80px; height: 80px; }
@media (max-width: 575.98px){
	.doc-product-photo{ width: 64px; height: 64px; }
}

/* ── Lounge : photos entières, aucun doré ────────────────────────────────────
   Photos produit en entier sur fond blanc (une photo verticale recadrée en carré n'était plus qu'un aplat). Marque blanche : les accents
   dorés de Wayflare deviennent neutres (demande du 2026-10-23) : encre ardoise de la charte (--t-2) sur fond clair, blanc translucide
   (couleur du texte de la barre) sur la barre aux couleurs de l'entreprise. Les graphiques gardent leur palette validée. */
[data-space="portal"] img.product-thumb{ object-fit: contain; padding: 3px; background: #FFFFFF; }
[data-space="portal"] .space-sign.is-portal .space-sign-tile{ background: var(--t-2); color: #FFFFFF; }
[data-space="portal"] .appbar-pill{ background: color-mix(in srgb, var(--bar-fg) 16%, transparent); color: var(--bar-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar-fg) 30%, transparent); }
[data-space="portal"] .appbar-pill:hover, [data-space="portal"] .appbar-pill:focus-visible{ color: var(--bar-fg); filter: none; background: color-mix(in srgb, var(--bar-fg) 24%, transparent); }
[data-space="portal"] .avatar{ background: rgba(16,42,67,.08); color: var(--t-1); }
[data-space="portal"] .appbar .avatar{ background: color-mix(in srgb, var(--bar-fg) 18%, transparent); color: var(--bar-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bar-fg) 30%, transparent); }
[data-space="portal"] .badge-gold{ --badge-tone: var(--t-2); }
[data-space="portal"] .dot-attn{ background: var(--t-2); }
[data-space="portal"] .text-gold{ color: var(--t-3); }
[data-space="portal"] .tl-user .tl-avatar{ background: var(--t-2); color: #FFFFFF; }
[data-space="portal"] .tl-event-gold{ background: rgba(16,42,67,.03); border-color: rgba(16,42,67,.16); }
[data-space="portal"] .tl-event-gold .tl-event-icon{ background: rgba(16,42,67,.08); color: var(--t-2); }
[data-space="portal"] .fav-toggle.is-on{ color: var(--t-2); }
[data-space="portal"] .login-hero::after{ background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hero-fg) 55%, transparent) 30%, color-mix(in srgb, var(--hero-fg) 55%, transparent) 70%, transparent); }
[data-space="portal"] .space-tag::before{ background: currentColor; opacity: .55; }
@media (min-width: 992px){
	[data-space="portal"] .login-hero::after{ background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--hero-fg) 55%, transparent) 30%, color-mix(in srgb, var(--hero-fg) 55%, transparent) 70%, transparent); }
}