/* =====================================================================
   MOS – Mayele Operating System — système visuel (charte graphique MOS, docs/marque/charte-graphique-mos.md)
   Couleurs du logo : Rouge Mayele #8A0303 → Carmin #C01B0B → Orange MOS #E4521A, Anthracite #3D3D3D.
   Orange MOS = actions et éléments actifs ; Rouge Mayele = marque et urgence ; anthracite = textes forts
   et panneaux sombres ; sarcelle = couleur fonctionnelle des valeurs positives et des données, jamais décorative.
   Typographie : Montserrat (la police de la signature du logo). Les documents (factures, lettres) gardent
   leur propre charte (--doc-font, doc.css).
   Deux thèmes : clair (défaut) et sombre anthracite (html[data-theme="dark"], choisi dans la barre latérale
   ou d'après le réglage du système). Les composants n'utilisent que les variables ci-dessous.
   (Noms hérités : --orange = Orange MOS, --orange-deep = Rouge Mayele, --cream = pêche, --teal = sarcelle.)
   ===================================================================== */
:root {
  color-scheme: light;
  /* Marque (logo MOS) */
  --mos-red: #8A0303;
  --mos-carmine: #C01B0B;
  --mos-orange: #E4521A;
  --anthracite: #3D3D3D;
  --grad-mos: linear-gradient(120deg, #8A0303 0%, #C01B0B 48%, #E4521A 100%);
  --brand-rgb: 228, 82, 26;
  --red-rgb: 138, 3, 3;
  --teal-rgb: 11, 119, 109;
  /* Couleurs d'interface dérivées */
  --orange: #E4521A;
  --orange-600: #C8350E;
  --orange-deep: #8A0303;
  --teal: #0B776D;
  --teal-600: #095F57;
  --cream: #FFD2BF;
  --link: #B4300C;
  --brand-dark: #2A2525;
  --grad-brand: linear-gradient(135deg, #B92A0B 0%, #D2410F 55%, #E4521A 100%);
  --grad-teal: linear-gradient(135deg, #14958A 0%, #0B776D 60%, #085A53 100%);
  /* Surfaces et textes (gris légèrement chauds, tirés de l'anthracite du logo) */
  --bg: #F5F3F2;
  --surface: #FFFFFF;
  --surface-2: #FAF8F7;
  --sunken: #EFECEA;
  --hover: #F4F1EF;
  --seg-active: #FFFFFF;
  /* Onglets : capsule sombre, onglet actif en pastille claire. */
  --tabs-bg: #211D1D;
  --tabs-ink: rgba(255, 255, 255, .74);
  --tabs-hover: rgba(255, 255, 255, .1);
  --tabs-active-bg: #FFFFFF;
  --tabs-active-ink: #211D1D;
  --tabs-shadow: 0 10px 24px rgba(33, 29, 29, .18);
  --line: #E7E2DF;
  --line-soft: #EFEBE9;
  --line-strong: #D8D1CD;
  --ink: #4A4544;
  --ink-strong: #211D1D;
  --muted: #6E6967;
  /* Teintes d'accent (fonds de badges, encadrés) */
  --cream-soft: #FFF1E8;
  --cream-line: #F7D3BF;
  --cream-text: #8F3B12;
  --teal-soft: #E2F2EF;
  --teal-soft-2: #D1EAE5;
  --teal-line: #C3E2DC;
  --teal-text: #0A6159;
  --orange-soft: #FDEDE5;
  --orange-line: #F5C9B5;
  --orange-text: #A12A0A;
  --deep-soft: #FBE4E0;
  --deep-text: #8A0303;
  --gray-soft: #F0EDEB;
  --gray-text: #5A5553;
  --dark-chip: #3D3D3D;
  --danger-soft: #FDECE8;
  --danger-line: #F3C4B9;
  --row-hover: #FFF7F3;
  --unread: #FFF4EE;
  --chip-active-bg: #211D1D;
  --chip-active-ink: #FFFFFF;
  --initials-bg: #2A2525;
  --toast-bg: #211D1D;
  /* Structure */
  --sidebar-bg: #FFFFFF;
  --sidebar-line: #ECE7E4;
  --auth-card: #FFF5EF;
  --auth-input: #FFFFFF;
  --auth-line: #EBDDD5;
  --topbar-bg: rgba(255, 255, 255, .86);
  --overlay: rgba(26, 20, 20, .45);
  /* Graphiques : orange MOS, sarcelle, ambre, gris, anthracite */
  --c-orange: #E4521A;
  --c-teal: #0B776D;
  --c-cream: #E9A23B;
  --c-gray: #BDB6B3;
  --c-ink: #3D3D3D;
  --chart-grid: #EEEAE8;
  --chart-zero: #D3CCC8;
  --chart-dot: #FFFFFF;
  /* Formes, ombres, focus */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(33, 25, 25, .05), 0 1px 1px rgba(33, 25, 25, .03);
  --shadow: 0 1px 2px rgba(33, 25, 25, .05), 0 10px 28px rgba(33, 25, 25, .07);
  --shadow-lg: 0 18px 50px rgba(33, 25, 25, .18);
  --shadow-brand: 0 8px 22px rgba(200, 53, 14, .28);
  --focus-ring: 0 0 0 3px rgba(228, 82, 26, .22);
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sidebar-w: 256px;
  --topbar-h: 64px;
  --band-h: 4px;
  /* Mouvement : durées partagées ; ressort (Motion) là où le navigateur le permet */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-exit: 160ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .4);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.5%, 1.043 24.5%, 1.035 28.4%, 1.007 36%, .997 41.2%, 1.001 63.6%, 1);
  }
}

/* Thème sombre : anthracite chaud (l'anthracite du logo, assombri), accents éclaircis pour garder un contraste AA. */
html[data-theme="dark"] {
  color-scheme: dark;
  --mos-red: #FF6B5E;
  --mos-carmine: #F04A2E;
  --mos-orange: #FF7443;
  --anthracite: #F2EEED;
  --grad-mos: linear-gradient(120deg, #9E0A05 0%, #CF2A0E 50%, #F0602A 100%);
  --brand-rgb: 255, 116, 67;
  --red-rgb: 255, 107, 94;
  --teal-rgb: 60, 203, 185;
  --orange: #FF7443;
  --orange-600: #FF9A73;
  --orange-deep: #FF7B6E;
  --teal: #3CCBB9;
  --teal-600: #6BDACB;
  --cream: #FFB596;
  --link: #FF9A73;
  --brand-dark: #100E0E;
  --grad-brand: linear-gradient(135deg, #B92A0B 0%, #D2410F 55%, #E4521A 100%);
  --grad-teal: linear-gradient(135deg, #46D3C1 0%, #22A898 60%, #148578 100%);
  --bg: #141212;
  --surface: #1C1919;
  --surface-2: #221E1E;
  --sunken: #2A2525;
  --hover: #2B2626;
  --seg-active: #3A3333;
  --tabs-bg: #0E0C0C;
  --tabs-ink: rgba(255, 255, 255, .92);
  --tabs-hover: rgba(255, 255, 255, .08);
  --tabs-active-bg: #F6F2F1;
  --tabs-active-ink: #1A1717;
  --tabs-shadow: 0 0 0 1px #3A3333;
  --line: #332D2C;
  --line-soft: #2A2524;
  --line-strong: #463F3D;
  --ink: #F2EEED;
  --ink-strong: #F6F2F1;
  /* Textes secondaires : blancs adoucis, lisibles sur le ciel étoilé. */
  --muted: #DDD6D4;
  --cream-soft: rgba(255, 181, 150, .12);
  --cream-line: rgba(255, 181, 150, .28);
  --cream-text: #FFB596;
  --teal-soft: rgba(60, 203, 185, .14);
  --teal-soft-2: rgba(60, 203, 185, .22);
  --teal-line: rgba(60, 203, 185, .32);
  --teal-text: #74E0D1;
  --orange-soft: rgba(255, 116, 67, .16);
  --orange-line: rgba(255, 116, 67, .38);
  --orange-text: #FFA27E;
  --deep-soft: rgba(255, 107, 94, .16);
  --deep-text: #FF9A8F;
  --gray-soft: rgba(255, 255, 255, .07);
  --gray-text: #BDB4B1;
  --dark-chip: #3D3636;
  --danger-soft: rgba(255, 107, 94, .13);
  --danger-line: rgba(255, 120, 100, .36);
  --row-hover: rgba(255, 116, 67, .06);
  --unread: rgba(255, 116, 67, .08);
  --chip-active-bg: #F6F2F1;
  --chip-active-ink: #1A1616;
  --initials-bg: #3A3232;
  --toast-bg: #2E2828;
  --sidebar-bg: #100E0E;
  --sidebar-line: #262120;
  --auth-card: #1C1919;
  --auth-input: #262121;
  --auth-line: #3A3332;
  --topbar-bg: rgba(20, 18, 18, .82);
  --overlay: rgba(6, 4, 4, .64);
  --c-orange: #FF7443;
  --c-teal: #3CCBB9;
  --c-cream: #F2B65A;
  --c-gray: #5E5654;
  --c-ink: #CBC4C2;
  --chart-grid: #2C2726;
  --chart-zero: #4A4240;
  --chart-dot: #1C1919;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 12px 30px rgba(0, 0, 0, .28);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, .55);
  --shadow-brand: 0 8px 26px rgba(255, 116, 67, .26);
  --focus-ring: 0 0 0 3px rgba(255, 116, 67, .32);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.55; color: var(--ink);
  background: var(--bg); -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink-strong); margin: 0; line-height: 1.25; font-weight: 600; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15.5px; } h4 { font-size: 14px; }
p { margin: 0 0 .6em; }
small, .small { font-size: 12px; }
.muted { color: var(--muted); }
.strong { color: var(--ink-strong); font-weight: 600; }
.teal { color: var(--teal); } .orange { color: var(--orange-600); } .deep { color: var(--orange-deep); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.right { text-align: right; } .center { text-align: center; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
::selection { background: var(--cream); }

/* Bande de marque : le dégradé du logo MOS (rouge Mayele → carmin → orange MOS) */
.band { height: var(--band-h); background: var(--grad-mos); }
.band-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 80; }

/* ------------------------------------------------------------------ Structure */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; padding-top: var(--band-h); }
.sidebar {
  position: sticky; top: var(--band-h); height: calc(100vh - var(--band-h)); overflow-y: auto; background: var(--surface);
  border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 40;
}
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-name { font-weight: 700; font-size: 19px; color: var(--ink-strong); letter-spacing: -.3px; line-height: 1; }
.brand-name span { color: var(--orange); }
.brand-sub { font-size: 9.5px; letter-spacing: 3px; color: var(--orange-deep); font-weight: 600; margin-top: 3px; }
/* En-tête de la barre latérale : identité de l'entreprise connectée */
.company-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 18px 20px 14px; margin: 0 0 2px;
  border-bottom: 1px solid var(--line-soft); color: inherit; text-decoration: none; position: relative;
}
.company-brand::after { content: ""; position: absolute; left: 20px; bottom: -1px; width: 28px; height: 2px; border-radius: 2px; background: var(--orange); }
.company-brand.row { flex-direction: row; align-items: center; gap: 11px; }
.brand-logo { display: block; max-width: 100%; max-height: 54px; width: auto; height: auto; object-fit: contain; }
.company-brand.row .brand-logo { width: 44px; height: 44px; max-height: none; flex: none; }
.brand-initials {
  width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--initials-bg); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; letter-spacing: .5px; box-shadow: inset 0 -3px 0 var(--orange);
}
.brand-company { font-weight: 700; font-size: 13.5px; line-height: 1.3; color: var(--ink-strong); letter-spacing: .2px; overflow-wrap: anywhere; }
.company-brand:hover .brand-company { color: var(--link); }
.nav { padding: 6px 10px 16px; flex: 1; }
.nav-group { margin-top: 14px; }
.nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); font-weight: 600; padding: 0 12px 6px; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 8px; color: var(--ink); font-size: 13.5px;
  font-weight: 500; text-decoration: none; position: relative;
}
.nav a svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.nav a:hover { background: var(--hover); color: var(--ink-strong); }
.nav a.active { background: var(--cream-soft); color: var(--ink-strong); font-weight: 600; }
.nav a.active svg { color: var(--orange); }
.nav a.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--orange); }
.nav .count { margin-left: auto; background: var(--orange); color: #fff; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 0 7px; line-height: 18px; }
.sidebar-foot { padding: 14px 20px 18px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--muted); }
/* Logo MOS – Mayele Operating System : version couleur en thème clair, blanche en thème sombre (mosLogo() dans core.js). */
.mos-logo { display: block; max-width: 100%; height: auto; }
.mos-logo.on-dark, html[data-theme="dark"] .mos-logo.on-light { display: none; }
html[data-theme="dark"] .mos-logo.on-dark { display: block; }
.powered { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.powered .powered-logo { display: block; border-radius: 6px; transition: opacity .15s, transform .15s; }
.powered .powered-logo:hover { opacity: .85; }
.powered .powered-logo:active { transform: scale(.97); }
.powered .mos-logo { width: 128px; }
.powered .p-sub { font-size: 10.5px; color: var(--muted); letter-spacing: .2px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: var(--band-h); z-index: 30; height: var(--topbar-h); background: var(--topbar-bg);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 24px;
}
.topbar .title { min-width: 0; }
.topbar .title h1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .crumb { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .spacer { flex: 1; }
.icon-btn.menu-btn { display: none; }
.content { padding: 24px; width: 100%; max-width: 1400px; margin: 0 auto; flex: 1; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h2 { font-size: 20px; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 10px; font: inherit; color: inherit; }
.user-btn:hover { background: var(--hover); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--initials-bg); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; }
.avatar.orange { background: var(--orange); }
.user-meta { text-align: left; line-height: 1.2; }
.user-meta .n { font-size: 13px; font-weight: 600; color: var(--ink-strong); }
.user-meta .r { font-size: 11px; color: var(--muted); }
.dropdown { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); min-width: 220px; padding: 6px; z-index: 50; }
.dropdown a, .dropdown button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 7px; background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; text-decoration: none; }
.dropdown a:hover, .dropdown button:hover { background: var(--hover); }
.dropdown svg { width: 16px; height: 16px; color: var(--muted); }
.dropdown hr { border: 0; border-top: 1px solid var(--line-soft); margin: 6px 0; }

/* Notifications : cloche, menu déroulant, liste */
.notif-menu { position: relative; }
.notif-badge {
  position: absolute; top: 0; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--orange);
  color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--surface);
}
.notif-dd { width: min(390px, calc(100vw - 24px)); padding: 0; right: -8px; overflow: hidden; }
.notif-dd .nd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.notif-dd .nd-head b { font-size: 14px; color: var(--ink-strong); }
.notif-dd .nd-head button { width: auto; padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--link); }
.notif-dd .nd-head button svg { color: var(--link); width: 14px; height: 14px; }
.notif-dd .nd-list { max-height: min(60vh, 460px); overflow-y: auto; }
.notif-dd a.nd-foot { display: block; text-align: center; padding: 11px; border-top: 1px solid var(--line-soft); border-radius: 0; font-size: 12.5px; font-weight: 600; color: var(--link); }
.notif, .notif-dd a.notif {
  display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 0; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); text-decoration: none;
}
.notif:hover { background: var(--hover); }
.notif.unread { background: var(--unread); }
.notif.unread:hover { background: var(--cream-soft); }
.notif .n-ico { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange-600); }
.notif.lvl-orange .n-ico { background: var(--orange-soft); color: var(--orange-600); }
.notif .n-ico svg { width: 16px; height: 16px; color: inherit; }
.notif .n-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif .n-title { font-weight: 600; font-size: 13px; line-height: 1.35; color: var(--ink-strong); }
.notif.unread .n-title::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); margin-right: 6px; vertical-align: 1px; }
.notif .n-body { font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.notif .n-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.notif .n-meta svg { width: 13px; height: 13px; color: var(--muted); }
.notif-list .notif:last-child { border-bottom: 0; }
.msg-body {
  white-space: pre-wrap; font-size: 13px; line-height: 1.55; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 12px 14px; max-height: 320px; overflow: auto;
}

/* ------------------------------------------------------------------ Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 9px;
  font: 500 13.5px var(--font); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none !important;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s; user-select: none;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.btn-primary:hover { background: var(--orange-600); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-600); }
.btn-outline { background: var(--surface); color: var(--ink-strong); border-color: var(--line); }
.btn-outline:hover { border-color: var(--line-strong); background: var(--surface-2); }
.btn-ai { background: var(--teal-soft); color: var(--teal); border-color: var(--teal-line); }
.btn-ai:hover { background: var(--teal-soft-2); }
/* IA retirée de MOS (réglage serveur Ai:Enabled) : boutons et blocs IA masqués. */
.no-ai .btn-ai, .no-ai [data-ai], .no-ai .ai-tag { display: none !important; }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--hover); }
.btn-danger { background: var(--surface); color: var(--orange-deep); border-color: var(--danger-line); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { height: 31px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-xs { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 31px; }
.btn[disabled], .btn.loading { opacity: .6; pointer-events: none; }
.btn.loading::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.icon-btn { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 6px; border-radius: 7px; display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--hover); color: var(--ink-strong); }
.icon-btn svg { width: 18px; height: 18px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; font: inherit; font-weight: 500; }
.link-btn:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Cartes, tuiles */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.card-head h3 { display: flex; align-items: center; gap: 8px; }
.card-head h3 svg { width: 18px; height: 18px; color: var(--mos-red); }
.card-body { padding: 18px 20px; }
.card-foot { padding: 12px 20px; border-top: 1px solid var(--line-soft); display: flex; justify-content: flex-end; gap: 8px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt { margin-top: 16px; } .mt-s { margin-top: 8px; } .mb { margin-bottom: 16px; }

.kpi { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 15px; overflow: hidden; box-shadow: var(--shadow-sm); }
.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--orange); }
.kpi.teal::before { background: var(--teal); }
.kpi.cream::before { background: var(--cream); }
.kpi.gray::before { background: var(--line-strong); }
.kpi .k-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi .k-label svg { width: 14px; height: 14px; flex: none; }
.kpi .k-value { font-size: 23px; font-weight: 700; color: var(--orange-600); margin-top: 6px; letter-spacing: -.3px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi.teal .k-value { color: var(--teal); }
.kpi.gray .k-value, .kpi.cream .k-value { color: var(--ink-strong); }
.kpi .k-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.kpi a.stretch::after { content: ""; position: absolute; inset: 0; }
.trend-up { color: var(--teal); font-weight: 600; } .trend-down { color: var(--orange-deep); font-weight: 600; }

/* Titre de section façon « article » de la charte */
.sec-title { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--cream); margin-bottom: 14px; }
.sec-title .n { width: 30px; height: 30px; border-radius: 4px; background: var(--orange); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; flex: none; }
.sec-title .l { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; color: var(--orange-600); text-transform: uppercase; }
.sec-title .t { font-size: 14.5px; font-weight: 700; color: var(--orange-deep); text-transform: uppercase; letter-spacing: .3px; }

.callout { border-radius: 10px; padding: 12px 14px; display: flex; gap: 10px; font-size: 13px; line-height: 1.5; }
.callout svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.callout-orange { background: var(--cream-soft); border-left: 3px solid var(--orange); }
.callout-orange svg { color: var(--orange-600); }
.callout-teal { background: var(--teal-soft); border-left: 3px solid var(--teal); }
.callout-teal svg { color: var(--teal); }
.callout-gray { background: var(--sunken); border-left: 3px solid var(--line-strong); }

/* ------------------------------------------------------------------ Badges, puces */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px; line-height: 18px; white-space: nowrap; }
.badge svg { width: 12px; height: 12px; }
.b-orange { background: var(--orange-soft); color: var(--orange-text); }
.b-teal { background: var(--teal-soft); color: var(--teal-600); }
.b-cream { background: var(--cream-soft); color: var(--cream-text); border: 1px solid var(--cream-line); }
.b-gray { background: var(--gray-soft); color: var(--gray-text); }
.b-dark { background: var(--dark-chip); color: #fff; }
.b-deep { background: var(--deep-soft); color: var(--orange-deep); }
.b-outline { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.ai-tag { display: inline-flex; align-items: center; gap: 3px; color: var(--teal); font-size: 11px; font-weight: 600; }
.ai-tag svg { width: 12px; height: 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 20px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; color: var(--ink); font-family: inherit; }
.chip:hover { border-color: var(--line-strong); }
.chip.active { background: var(--chip-active-bg); border-color: var(--chip-active-bg); color: var(--chip-active-ink); }
.pill-count { background: var(--gray-soft); border-radius: 9px; padding: 0 6px; margin-left: 4px; font-size: 11px; }
.chip.active .pill-count { background: rgba(255, 255, 255, .22); }

/* ------------------------------------------------------------------ Onglets */
/* Onglets : capsule sombre ajustée au contenu ; défilement horizontal si elle dépasse (téléphone). */
.tabs { display: flex; gap: 2px; width: fit-content; max-width: 100%; box-sizing: border-box; padding: 5px; margin-bottom: 18px; border-radius: 999px;
  background: var(--tabs-bg); box-shadow: var(--tabs-shadow); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth;
  scroll-snap-type: x proximity; scroll-padding-inline: 5px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button, .tabs a { flex: none; background: none; border: 0; border-radius: 999px; padding: 8px 16px; font: 500 13.5px var(--font); color: var(--tabs-ink); cursor: pointer;
  white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; scroll-snap-align: start; transition: background-color var(--dur-2), color var(--dur-2); }
.tabs button:hover, .tabs a:hover { color: #fff; background: var(--tabs-hover); }
.tabs .active, .tabs .active:hover { background: var(--tabs-active-bg); color: var(--tabs-active-ink); font-weight: 600; }
.tabs button:focus-visible, .tabs a:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

/* ------------------------------------------------------------------ Tableaux */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13.2px; }
.table th { text-align: left; font-size: 10.8px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover td { background: var(--row-hover); }
.table tr.cancelled td { color: var(--muted); text-decoration: line-through; }
.table tr.cancelled td .badge { text-decoration: none; }
.table tfoot td { font-weight: 600; background: var(--surface-2); border-top: 1px solid var(--line); }
.table .sub { font-size: 11.5px; color: var(--muted); }
.table .amount-in { color: var(--teal); font-weight: 600; }
.table .amount-out { color: var(--ink-strong); font-weight: 600; }
.table td.actions-cell { text-align: right; white-space: nowrap; }
.table input.cell-input { width: 92px; height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 0 7px; font: inherit; text-align: right; }
.table-compact td, .table-compact th { padding: 7px 10px; }
.flags { display: inline-flex; gap: 4px; align-items: center; }
.flags svg { width: 15px; height: 15px; }
.flag-warn { color: var(--orange-600); }
.flag-pending { color: var(--teal); }
.flag-file { color: var(--muted); }

/* ------------------------------------------------------------------ Formulaires */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .field-label { font-size: 12.3px; font-weight: 600; color: var(--ink-strong); }
.field .req { color: var(--orange-600); }
.field .help { font-size: 11.5px; color: var(--muted); }
.input, .select, .textarea {
  width: 100%; height: 38px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 11px; font: 13.5px var(--font); color: var(--ink-strong);
  background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 84px; padding: 9px 11px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .16); }
.input[readonly] { background: var(--surface-2); }
.input.sm, .select.sm { height: 32px; font-size: 12.8px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8B8D' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 13.2px; cursor: pointer; color: var(--ink-strong); }
.check input { width: 17px; height: 17px; accent-color: var(--orange); }
.form-section { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange-deep); padding-top: 6px; border-bottom: 1px solid var(--cream-line); padding-bottom: 6px; }
.form-error { background: var(--danger-soft); color: var(--orange-deep); border: 1px solid var(--danger-line); border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-bottom: 12px; }
.input-group { display: flex; gap: 6px; align-items: stretch; }
.input-group .input, .input-group .select { flex: 1; min-width: 0; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters .input, .filters .select { width: auto; min-width: 150px; height: 36px; }
.filters .search { min-width: 220px; flex: 1; max-width: 340px; }
.seg { display: inline-flex; background: var(--sunken); border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; max-width: 100%; }
.seg button { border: 0; background: none; padding: 6px 13px; border-radius: 7px; font: 500 13px var(--font); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button svg { width: 15px; height: 15px; }
.seg button.active { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink-strong); font-weight: 600; }
.seg button.active.in { color: var(--teal); }
.seg button.active.out { color: var(--orange-600); }

.dropzone { border: 2px dashed var(--line-strong); border-radius: 12px; padding: 26px; text-align: center; background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--orange); background: var(--cream-soft); }
.dropzone svg { width: 30px; height: 30px; color: var(--orange); }
.dropzone .dz-title { font-weight: 600; color: var(--ink-strong); margin-top: 6px; }
.dropzone .dz-sub { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ Modales, toasts */
.modal-backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 24px; overflow-y: auto; animation: fade .15s; }
.modal { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; display: flex; flex-direction: column; animation: pop .18s ease-out; }
.modal-lg { max-width: 820px; } .modal-xl { max-width: 1100px; } .modal-sm { max-width: 440px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.modal-head h3 { font-size: 16px; }
.modal-body { padding: 18px 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line-soft); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.modal-foot .left { margin-right: auto; }
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--toast-bg); color: #fff; padding: 11px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13.2px; display: flex; gap: 9px; align-items: center; max-width: min(560px, 92vw); animation: pop .2s ease-out; pointer-events: auto; }
.toast svg { width: 17px; height: 17px; flex: none; }
.toast.success svg { color: #7fd6cf; }
.toast.error { background: var(--orange-deep); }
.toast.pending svg { color: var(--cream); }
@keyframes pop { from { transform: translateY(6px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.spinner { width: 22px; height: 22px; border: 2.5px solid var(--line); border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-block { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 48px; color: var(--muted); }
.skeleton { background: linear-gradient(90deg, var(--sunken) 25%, var(--surface-2) 50%, var(--sunken) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 6px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty svg { width: 36px; height: 36px; color: var(--line-strong); }
.empty .e-title { font-weight: 600; color: var(--ink-strong); margin-top: 8px; }

/* ------------------------------------------------------------------ Markdown (réponses IA) */
.md { font-size: 13.6px; line-height: 1.62; color: var(--ink-strong); overflow-wrap: anywhere; }
.md h1, .md h2, .md h3, .md h4 { color: var(--orange-deep); margin: 14px 0 6px; font-size: 14.5px; }
.md h1 { font-size: 17px; } .md h2 { font-size: 15.5px; }
.md > :first-child { margin-top: 0; }
.md p { margin: 0 0 8px; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 20px; }
.md li { margin: 2px 0; }
.md li::marker { color: var(--orange); }
.md strong { color: var(--ink-strong); font-weight: 600; }
.md code { background: var(--sunken); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.md table { border-collapse: collapse; margin: 8px 0 10px; font-size: 12.8px; width: 100%; }
.md th, .md td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left; }
.md th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.md blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid var(--cream); background: var(--cream-soft); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.md em { color: var(--muted); }

/* ------------------------------------------------------------------ IA */
.ai-card { background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--teal-line); border-left: 4px solid var(--teal); border-radius: var(--radius); }
.ai-card .card-head { border-bottom-color: var(--teal-line); }
.ai-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--teal); }
.ai-badge svg { width: 15px; height: 15px; }
.thinking { display: inline-flex; gap: 4px; align-items: center; color: var(--teal); font-size: 13px; }
.thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: pulse 1s infinite; }
.thinking i:nth-child(2) { animation-delay: .2s; } .thinking i:nth-child(3) { animation-delay: .4s; }

/* ------------------------------------------------------------------ Spira IA (assistant) */
.copilot-drawer { position: fixed; top: var(--band-h); right: 0; bottom: 0; width: 460px; max-width: 100vw; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); z-index: 70; display: flex; flex-direction: column; transform: translateX(105%); transition: transform .22s ease; }
.copilot-drawer.open { transform: none; }
.cp { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cp-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.cp-head .cp-title { font-weight: 700; color: var(--ink-strong); display: flex; gap: 8px; align-items: center; font-size: 14.5px; }
.cp-head .cp-title svg { color: var(--teal); width: 19px; height: 19px; }
.cp-head select { max-width: 170px; }
.cp-body { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); min-height: 0; }
.cp-body > * { flex-shrink: 0; }
.msg { max-width: 92%; }
.msg.user { align-self: flex-end; background: var(--cream-soft); border: 1px solid var(--cream-line); border-radius: 14px 14px 4px 14px; padding: 9px 13px; color: var(--ink-strong); white-space: pre-wrap; }
.msg.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 11px 14px; box-shadow: var(--shadow-sm); }
.msg.restricted { color: var(--muted); font-style: italic; }
.msg .attach { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.msg .attach img { max-height: 90px; border-radius: 8px; border: 1px solid var(--line); }
.activities { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 7px; }
.activity { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; background: var(--teal-soft); color: var(--teal-600); border-radius: 12px; padding: 2px 8px; font-weight: 500; }
.activity svg { width: 11px; height: 11px; }
.action-card { align-self: stretch; background: var(--surface); border: 1px solid var(--orange-line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.action-card.nonfin { border-color: var(--teal-line); }
.action-card .ac-head { background: var(--cream-soft); padding: 10px 14px; font-weight: 600; color: var(--ink-strong); display: flex; gap: 8px; align-items: flex-start; font-size: 13.3px; }
.action-card.nonfin .ac-head { background: var(--teal-soft); }
.action-card .ac-head svg { width: 17px; height: 17px; color: var(--orange-600); flex: none; margin-top: 1px; }
.action-card.nonfin .ac-head svg { color: var(--teal); }
.action-card dl { margin: 0; padding: 10px 14px; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 12.8px; }
.action-card dt { color: var(--muted); }
.action-card dd { margin: 0; color: var(--ink-strong); font-weight: 500; overflow-wrap: anywhere; }
.action-card .before { color: var(--muted); text-decoration: line-through; margin-right: 6px; font-weight: 400; }
.action-card .ac-note { margin: 0 14px 10px; font-size: 12px; }
.action-card .ac-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-soft); justify-content: flex-end; }
.cp-compose { border-top: 1px solid var(--line); padding: 10px 12px 12px; background: var(--surface); }
.cp-compose textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 12px; padding: 10px 12px; font: 13.5px var(--font); resize: none; min-height: 44px; max-height: 160px; color: var(--ink-strong); }
.cp-compose textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .14); }
.cp-compose .bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cp-compose .hint { font-size: 11px; color: var(--muted); flex: 1; }
.cp-files { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.cp-file { display: inline-flex; gap: 6px; align-items: center; background: var(--hover); border-radius: 8px; padding: 3px 8px; font-size: 12px; }
.suggestions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.suggestion { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: 13px var(--font); color: var(--ink-strong); cursor: pointer; }
.suggestion:hover { border-color: var(--teal); background: var(--surface-2); }
.cp-hello { text-align: center; padding: 12px 8px 4px; }
.cp-hello .ico { width: 46px; height: 46px; border-radius: 14px; background: var(--teal-soft); display: grid; place-items: center; margin: 0 auto 8px; }
.cp-hello .ico svg { width: 24px; height: 24px; color: var(--teal); }
.copilot-page { display: grid; grid-template-columns: 260px 1fr; height: calc(100vh - var(--band-h) - var(--topbar-h) - 48px); min-height: 520px; overflow: hidden; }
.copilot-page .conv-list { border-right: 1px solid var(--line); overflow-y: auto; padding: 10px; background: var(--surface); }
.conv-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 10px; font: 13px var(--font); color: var(--ink); cursor: pointer; }
.conv-item:hover { background: var(--hover); }
.conv-item.active { background: var(--cream-soft); color: var(--ink-strong); font-weight: 600; }
.conv-item .d { font-size: 11px; color: var(--muted); font-weight: 400; }

/* ------------------------------------------------------------------ Tableau de bord */
.hero { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.hero h2 { font-size: 21px; }
.hero .date { color: var(--muted); font-size: 13px; margin-top: 3px; }
.hero .date::first-letter { text-transform: uppercase; }
.hero .actions { position: relative; z-index: 1; align-self: center; }
.tri-deco { position: absolute; right: -10px; bottom: -14px; width: 190px; height: 120px; pointer-events: none; opacity: .9; }
.alert-list { list-style: none; margin: 0; padding: 0; }
.alert-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.2px; }
.alert-list li:last-child { border-bottom: 0; }
.alert-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; margin-top: 6px; background: var(--orange); }
.alert-dot.teal { background: var(--teal); }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 12.8px; }
.hbar .lbl { color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.hbar .track { grid-column: 1 / -1; height: 7px; background: var(--sunken); border-radius: 4px; overflow: hidden; margin-bottom: 7px; }
.hbar .fill { height: 100%; background: var(--orange); border-radius: 4px; }
.hbar.teal .fill { background: var(--teal); }
.chart { width: 100%; display: block; overflow: visible; }
.chart text { font-family: var(--font); font-size: 10.5px; fill: var(--muted); }
.chart .grid-line { stroke: var(--chart-grid); }
.chart .zero-line { stroke: var(--chart-zero); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { padding: 9px 0; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13.2px; }
.list-plain li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------ Approbations & diff */
.diff { width: 100%; border-collapse: collapse; font-size: 13px; }
.diff th { text-align: left; font-size: 10.8px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 7px 10px; background: var(--surface-2); }
.diff td { padding: 8px 10px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.diff .before { color: var(--muted); text-decoration: line-through; }
.diff .after { color: var(--ink-strong); font-weight: 600; background: var(--cream-soft); }
.request { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.request + .request { margin-top: 14px; }
.request-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 14px 16px; flex-wrap: wrap; }
.request-head .t { font-weight: 600; color: var(--ink-strong); }
.request-head .m { font-size: 12px; color: var(--muted); margin-top: 2px; }
.request-reason { margin: 0 16px 12px; }
.request-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-soft); justify-content: flex-end; background: var(--surface-2); }

/* ------------------------------------------------------------------ Paie / étapes */
.stepper { display: flex; gap: 0; align-items: center; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; font-size: 12.8px; color: var(--muted); font-weight: 500; }
.step .dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface); }
.step.done .dot { background: var(--teal); border-color: var(--teal); color: #fff; }
.step.current .dot { border-color: var(--orange); color: var(--orange-600); }
.step.current { color: var(--ink-strong); font-weight: 600; }
.step-line { width: 36px; height: 2px; background: var(--line-strong); margin: 0 8px; }

/* Calendrier des présences */
.cal-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.cal { border-collapse: separate; border-spacing: 0; font-size: 11.5px; }
.cal th, .cal td { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); text-align: center; min-width: 30px; height: 32px; padding: 0; }
.cal th { background: var(--surface-2); font-weight: 600; color: var(--muted); position: sticky; top: 0; }
.cal th.name, .cal td.name { position: sticky; left: 0; background: var(--surface); text-align: left; padding: 0 12px; min-width: 190px; white-space: nowrap; z-index: 1; font-weight: 500; color: var(--ink-strong); }
.cal th.name { z-index: 2; background: var(--surface-2); }
.cal td.off { background: var(--sunken); }
.cal td.cell { cursor: pointer; }
.cal td.cell:hover { outline: 2px solid var(--orange); outline-offset: -2px; }
.cal .m { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 700; font-size: 10.5px; }
.m-leave { background: var(--teal-soft); color: var(--teal-600); }
.m-leave-pending { background: var(--cream-soft); color: var(--cream-text); }
.m-absent { background: #ffe3c7; color: var(--orange-deep); }
.m-late { background: #fff1dd; color: #a86200; }
.m-mission { background: #e8eef0; color: #4d6670; }
.m-remote { background: #eef0f7; color: #56607a; }
.m-sick { background: #fde2d3; color: var(--orange-deep); }
.cal-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.cal-legend span { display: inline-flex; gap: 5px; align-items: center; }
.cal-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* Modèles de facture */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.tpl-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.tpl-thumb { height: 300px; background: var(--sunken); position: relative; overflow: hidden; display: flex; justify-content: center; padding-top: 14px; cursor: pointer; }
.tpl-thumb .doc-scaler { box-shadow: 0 4px 18px rgba(0, 0, 0, .12); }
.tpl-info { padding: 12px 14px; flex: 1; }
.tpl-info .n { font-weight: 600; color: var(--ink-strong); }
.tpl-info .d { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tpl-actions { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.editor { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 18px; align-items: start; }
.editor-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; max-height: calc(100vh - 150px); overflow-y: auto; position: sticky; top: calc(var(--band-h) + var(--topbar-h) + 14px); }
.editor-panel details { border-bottom: 1px solid var(--line-soft); }
.editor-panel summary { padding: 13px 16px; font-weight: 600; color: var(--ink-strong); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.editor-panel summary::-webkit-details-marker { display: none; }
.editor-panel summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 18px; }
.editor-panel details[open] summary::after { content: "–"; }
.editor-panel .ep-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.layout-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.layout-opt { border: 2px solid var(--line); border-radius: 10px; padding: 6px; cursor: pointer; background: var(--surface); text-align: center; font: 500 11.5px var(--font); color: var(--ink); min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.layout-opt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layout-opt.active { border-color: var(--orange); background: var(--cream-soft); }
/* Vignette : vraie page A4 réduite (mountPreview), aux couleurs du modèle en cours */
.layout-opt .mini { aspect-ratio: 210 / 297; border-radius: 4px; background: #fff; position: relative; overflow: hidden; box-shadow: 0 0 0 1px var(--line); pointer-events: none; }
.layout-opt .mini .doc-frame { box-shadow: none; }
/* Carte des pointages (js/geomap.js) : tuiles OpenStreetMap, zones des sites, précision GPS, épingles */
.gm { position: relative; overflow: hidden; border-radius: 10px; background: #e8e6df; touch-action: none; cursor: grab; user-select: none; outline: none; border: 1px solid var(--line); }
.gm.dragging { cursor: grabbing; }
.gm:focus-visible { box-shadow: 0 0 0 3px var(--orange-soft, rgba(253, 126, 1, .3)); }
.gm-tiles img { position: absolute; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.gm-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gm-zone { fill: rgba(0, 116, 109, .14); stroke: #00746D; stroke-width: 2; stroke-dasharray: 6 4; }
.gm-acc { fill: rgba(253, 126, 1, .16); stroke: rgba(185, 42, 11, .55); stroke-width: 1; }
.gm-pins { position: absolute; inset: 0; pointer-events: none; }
.gm-pin { position: absolute; width: 22px; height: 22px; margin: -22px 0 0 -11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #B92A0B; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); pointer-events: auto; }
.gm-pin.out { background: #3A3B3C; }
.gm-pin.warn { background: #E4521A; }
.gm-pin b { display: block; transform: rotate(45deg); color: #fff; font: 700 9px/18px var(--font); text-align: center; }
.gm-site { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #00746D; border: 2px solid #fff; border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); pointer-events: auto; }
.gm-site span { position: absolute; left: 14px; top: -5px; white-space: nowrap; font: 600 11px var(--font); color: #0b4f4a; background: rgba(255, 255, 255, .88); padding: 1px 5px; border-radius: 4px; }
.gm-ctl { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.gm-ctl button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #3A3B3C; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.gm-ctl button svg { width: 15px; height: 15px; }
.gm-attr { position: absolute; right: 0; bottom: 0; font-size: 10px; background: rgba(255, 255, 255, .8); padding: 1px 6px; border-top-left-radius: 6px; color: #333; }
.gm-attr a { color: inherit; }
.gm-empty { padding: 24px; text-align: center; }
.gm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.gm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.btn-geo { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; font: inherit; }
.btn-geo:hover { text-decoration: underline; }
.btn-geo svg { width: 14px; height: 14px; }

/* Éditeur de palettes (Administration › Paramètres › Factures) */
.pal-list { display: grid; gap: 8px; }
.pal-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, auto) auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); }
.pal-row input[type=color] { width: 34px; height: 30px; border: 1px solid var(--line); border-radius: 6px; background: none; padding: 1px; cursor: pointer; }
.pal-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pal-preview .pp { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.pal-preview .pp .doc-frame { box-shadow: none; }
.pal-preview .pp b { display: block; font-size: 12px; padding: 6px 8px; border-top: 1px solid var(--line); color: var(--ink); background: var(--surface); }
@media (max-width: 640px) { .pal-row { grid-template-columns: 1fr repeat(4, auto); } .pal-row .icon-btn { grid-column: 1 / -1; justify-self: end; } }
.color-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.color-field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 4px 8px; }
.color-field input[type=color] { width: 30px; height: 26px; border: 0; background: none; padding: 0; cursor: pointer; }
.color-field span { font-size: 12px; }
.palettes { display: flex; gap: 6px; flex-wrap: wrap; }
.palette { display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; height: 22px; }
.palette i { width: 16px; }
.col-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px; align-items: center; }
.preview-stage { background: var(--sunken); border-radius: 12px; padding: 22px; display: flex; justify-content: center; overflow: hidden; min-height: 400px; }
.doc-scaler { transform-origin: top left; background: #fff; }
.doc-frame { position: relative; }

/* Éditeur de facture */
.inv-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 18px; align-items: start; }
.lines-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lines-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); text-align: left; padding: 6px 4px; font-weight: 600; }
.lines-table td { padding: 4px; vertical-align: top; }
.lines-table .input, .lines-table .select { height: 34px; font-size: 12.8px; padding: 0 8px; }
.lines-table .select { padding-right: 26px; background-position: right 7px center; }
.lines-table .w-qty { width: 70px; } .lines-table .w-unit { width: 78px; } .lines-table .w-price { width: 104px; } .lines-table .w-pct { width: 64px; } .lines-table .w-total { width: 100px; text-align: right; padding-top: 12px; font-weight: 600; }
.line-items { display: flex; flex-direction: column; gap: 10px; }
.line-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--surface-2); }
.li-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 8px; align-items: center; }
.li-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(90px, auto); gap: 8px; margin-top: 8px; align-items: end; }
.li-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.li-grid .input { text-align: right; padding: 0 7px; }
.li-grid label:nth-child(2) .input { text-align: left; }
.li-total { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; padding-bottom: 6px; }
.li-total b { font-size: 14px; color: var(--ink-strong); text-transform: none; letter-spacing: 0; }
@media (max-width: 640px) { .li-top { grid-template-columns: 1fr auto; } .li-top select { grid-column: 1 / -1; } .li-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.totals { margin-left: auto; width: 290px; font-size: 13.3px; }
.totals div { display: flex; justify-content: space-between; padding: 4px 0; }
.totals .grand { font-size: 16px; font-weight: 700; color: var(--ink-strong); border-top: 2px solid var(--ink-strong); margin-top: 6px; padding-top: 8px; }
.ai-draft { background: var(--teal-soft); border: 1px solid var(--teal-line); border-radius: 12px; padding: 14px; }
.ai-draft textarea { background: var(--surface); }

/* Divers */
.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 16px; font-size: 13.2px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink-strong); font-weight: 500; overflow-wrap: anywhere; }
.score { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-weight: 700; font-size: 14px; color: var(--teal); background: conic-gradient(var(--teal) calc(var(--v) * 1%), var(--sunken) 0); position: relative; }
.score::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.score span { position: relative; z-index: 1; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 12px 18px; font-size: 12.5px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.timeline li::after { content: ""; position: absolute; left: 7px; top: 15px; bottom: 0; width: 1px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline .when { color: var(--muted); font-size: 11.5px; }
.banner { display: flex; gap: 10px; align-items: center; padding: 10px 24px; font-size: 13px; background: var(--cream-soft); border-bottom: 1px solid var(--cream-line); color: var(--ink-strong); }
.banner svg { width: 17px; height: 17px; color: var(--orange-600); flex: none; }
.banner > div { flex: 1; min-width: 0; }
.banner .btn { flex: none; }
.banner.b-teal { background: var(--teal-soft); border-bottom-color: var(--teal-line); }
.banner.b-teal svg { color: var(--teal); }
.banner.b-danger { background: var(--danger-soft); border-bottom-color: var(--danger-line); }
.banner.b-danger svg { color: var(--orange-deep); }
.banner.b-dark { background: var(--toast-bg); color: #fff; border-bottom-color: var(--toast-bg); }
.banner.b-dark svg { color: var(--cream); }
.banner.b-dark .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }
@media (max-width: 640px) { .banner { padding: 10px 14px; flex-wrap: wrap; } }

/* Abonnement : jauges, formules, moyens de paiement */
.meter { height: 6px; border-radius: 4px; background: var(--sunken); overflow: hidden; margin-top: 8px; }
.meter span { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
.meter.hot span { background: var(--orange); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.plan-card { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--cream); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.plan-card.current { border-top-color: var(--teal); box-shadow: var(--shadow); }
.plan-card .pc-name { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--ink-strong); }
.plan-card .pc-price { font-size: 22px; font-weight: 700; color: var(--orange-600); }
.plan-card .pc-price span { font-size: 12px; font-weight: 500; color: var(--muted); }
.plan-card ul { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.plan-card li { display: flex; gap: 8px; align-items: flex-start; }
.plan-card li svg { width: 16px; height: 16px; color: var(--teal); flex: none; margin-top: 2px; }
.plan-card .btn { align-self: flex-start; margin-top: auto; }
.pay-block { background: var(--teal-soft); border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0; padding: 12px 14px; display: grid; gap: 8px; }
.pay-block div { display: flex; flex-direction: column; }
.pay-block span { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--teal); }
.pay-block b { color: var(--ink-strong); overflow-wrap: anywhere; }
.pay-block p { margin: 0; }
.done-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); margin-bottom: 14px; }
.done-icon svg { width: 26px; height: 26px; }
.pager { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 12px 16px; font-size: 12.5px; color: var(--muted); }
pre.json { background: var(--surface-2); border-radius: 8px; padding: 10px; font-size: 11.5px; max-height: 260px; overflow: auto; white-space: pre-wrap; margin: 0; }

/* ------------------------------------------------------------------ Authentification */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding-top: var(--band-h); background: var(--surface); }
.auth-brand { position: relative; background: var(--brand-dark); color: #fff; padding: 36px 56px 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; overflow: hidden; }
.auth-brand .brand-name { color: #fff; font-size: 30px; }
.auth-brand .brand-sub { color: var(--cream); font-size: 11px; }
.auth-brand .auth-logo { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.auth-brand .auth-logo .mos-logo { width: 210px; }
.auth-brand .auth-logo .tag { font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--cream); font-weight: 600; padding-bottom: 3px; }
.auth-brand h2 { color: #fff; font-size: 25px; line-height: 1.2; max-width: 480px; font-weight: 600; margin-top: 24px; }
.auth-brand h2 em { font-style: normal; color: var(--orange); }
.auth-brand p { color: #d3d3d2; max-width: 440px; font-size: 14.5px; margin-top: 14px; }
.auth-brand ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; max-width: 460px; }
.auth-brand li { display: flex; gap: 10px; align-items: flex-start; color: #e7e7e6; font-size: 13.5px; }
.auth-brand li svg { width: 18px; height: 18px; color: var(--cream); flex: none; margin-top: 1px; }
.auth-brand .by { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #b9b9b8; position: relative; z-index: 1; }
.auth-brand .by .logo-plate { display: inline-flex; }
.auth-brand .by img { height: 30px; display: block; filter: brightness(0) invert(1); opacity: .92; }
.auth-tri { position: absolute; right: -36px; bottom: -26px; width: 300px; height: 205px; opacity: .95; }

/* Carrousel « Une journée avec Mayele » (page de connexion) : scènes en motion design, 5 s chacune */
.showcase { position: relative; z-index: 1; margin-top: 22px; max-width: 540px; }
.sc-track { display: grid; touch-action: pan-y; user-select: none; }
.sc-slide { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.sc-slide.active { opacity: 1; pointer-events: auto; }
.sc-visual { position: relative; height: clamp(150px, 27vh, 250px); border-radius: 18px; overflow: hidden; display: grid; place-items: center; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.sc-visual > svg, .sc-visual > img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
/* La lumière suit la journée : aube, matinée, début d'après-midi, fin d'après-midi, soir */
.sc-dawn { background: linear-gradient(135deg, #FFF0E6 0%, #FFD9C4 55%, #F6ECE6 100%); }
.sc-day { background: linear-gradient(135deg, #FDEDE5 0%, #FFFFFF 100%); }
.sc-noon { background: linear-gradient(135deg, #FFF1E8 0%, #FFD2BF 100%); }
.sc-afternoon { background: linear-gradient(135deg, #FBE4E0 0%, #FFF1E8 100%); }
.sc-dusk { background: linear-gradient(135deg, #F3DCD6 0%, #F7CDB8 100%); }
.sc-time { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 20px; background: rgba(42, 37, 37, .85); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .6px; font-variant-numeric: tabular-nums; }
.sc-time svg { width: 13px; height: 13px; color: var(--cream); }
.showcase figcaption { margin-top: 18px; }
.sc-kicker { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--orange); }
.sc-title { font-size: 19px; font-weight: 600; line-height: 1.3; color: #fff; margin-top: 5px; }
.auth-brand .showcase p { margin: 6px 0 0; max-width: 500px; font-size: 13.5px; line-height: 1.55; color: #d3d3d2; }
.sc-controls { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
/* Barres de progression façon « stories » : une par scène, cliquables */
.sc-steps { display: flex; gap: 6px; }
.sc-step { position: relative; width: 36px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.sc-step::before, .sc-step i { content: ""; position: absolute; left: 0; top: 11px; height: 4px; border-radius: 2px; }
.sc-step::before { right: 0; background: rgba(255, 255, 255, .22); transition: background .2s; }
.sc-step:hover::before, .sc-step.current::before { background: rgba(255, 255, 255, .42); }
.sc-step i { width: 0; background: var(--orange); }
.sc-step.done i { width: 100%; background: rgba(255, 255, 255, .75); }
.sc-step.current i { animation: sc-fill var(--sc-duration, 5s) linear forwards; }
.showcase.paused .sc-step.current i { animation-play-state: paused; }
.sc-nav { display: flex; gap: 6px; }
.sc-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.sc-btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .55); }
.sc-btn svg { width: 16px; height: 16px; }

/* Mise en scène, rejouée chaque fois qu'une scène devient active (m-* : entrées, délai --d ; l-* : ambiance) */
.sc-slide.active .sc-visual > svg { animation: sc-cam calc(var(--sc-duration, 5s) + .4s) ease-out both; }
.sc-slide.active .sc-time { animation: mo-down .5s cubic-bezier(.2, .8, .2, 1) .15s both; }
.sc-slide.active figcaption > * { animation: mo-up .6s cubic-bezier(.2, .8, .2, 1) both; }
.sc-slide.active figcaption > :nth-child(2) { animation-delay: .12s; }
.sc-slide.active figcaption > :nth-child(3) { animation-delay: .24s; }
.sc-visual .m-pop, .sc-visual .m-stamp, .sc-visual .m-fly, .sc-visual .l-twinkle, .sc-visual .l-pulse { transform-box: fill-box; transform-origin: center; }
.sc-visual .m-grow { transform-box: fill-box; transform-origin: left center; }
.sc-visual .l-sway, .sc-visual .l-nod { transform-box: fill-box; transform-origin: 50% 100%; }
.sc-slide.active .m-fade { animation: mo-fade .6s ease var(--d, 0s) both; }
.sc-slide.active .m-up { animation: mo-up .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.sc-slide.active .m-down { animation: mo-down .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.sc-slide.active .m-left { animation: mo-left .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.sc-slide.active .m-right { animation: mo-right .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.sc-slide.active .m-pop { animation: mo-pop .55s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
.sc-slide.active .m-grow { animation: mo-grow .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.sc-slide.active .m-draw { stroke-dasharray: 1; animation: mo-draw .9s ease-in-out var(--d, 0s) both; }
.sc-slide.active .m-stamp { animation: mo-stamp .55s cubic-bezier(.2, .9, .3, 1.2) var(--d, 0s) both; }
.sc-slide.active .m-fly { animation: mo-fly 1.2s cubic-bezier(.3, .7, .2, 1) var(--d, 0s) both; }
.sc-slide.active .m-scan { animation: mo-scan 1s ease-in-out var(--d, 0s) both; }
.sc-slide.active .m-flash { animation: mo-flash .5s ease-out var(--d, 0s) both; }
.sc-slide.active .m-typing { animation: mo-typing .9s ease var(--d, 0s) both; }
.sc-slide.active .l-steam { animation: lo-steam 3.2s ease-in-out var(--d, 0s) infinite backwards; }
.sc-slide.active .l-float { animation: lo-float 4.5s ease-in-out var(--d, 0s) infinite; }
.sc-slide.active .l-twinkle { animation: lo-twinkle 2.6s ease-in-out var(--d, 0s) infinite backwards; }
.sc-slide.active .l-pulse { animation: lo-pulse 2.2s ease-out var(--d, 0s) infinite backwards; }
.sc-slide.active .l-dot { animation: lo-dot 1.2s ease-in-out var(--d, 0s) infinite backwards; }
.sc-slide.active .l-sway { animation: lo-sway 5s ease-in-out var(--d, 0s) infinite; }
.sc-slide.active .l-nod { animation: lo-nod 2.8s ease-in-out var(--d, 0s) infinite; }
@keyframes sc-fill { from { width: 0 } to { width: 100% } }
@keyframes sc-cam { from { transform: scale(1.07) } to { transform: scale(1) } }
@keyframes mo-fade { from { opacity: 0 } }
@keyframes mo-up { from { opacity: 0; transform: translateY(16px) } }
@keyframes mo-down { from { opacity: 0; transform: translateY(-16px) } }
@keyframes mo-left { from { opacity: 0; transform: translateX(-28px) } }
@keyframes mo-right { from { opacity: 0; transform: translateX(28px) } }
@keyframes mo-pop { from { opacity: 0; transform: scale(.35) } }
@keyframes mo-grow { from { transform: scaleX(0) } }
@keyframes mo-draw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes mo-stamp { 0% { opacity: 0; transform: scale(2.3) } 65% { opacity: 1; transform: scale(.92) } 100% { opacity: 1; transform: scale(1) } }
@keyframes mo-fly { 0% { opacity: 0; transform: translate(-70px, 46px) scale(.5) rotate(14deg) } 55% { opacity: 1 } 100% { opacity: 1; transform: none } }
@keyframes mo-scan { 0% { opacity: 0; transform: translateY(0) } 12%, 88% { opacity: 1 } 100% { opacity: 0; transform: translateY(88px) } }
@keyframes mo-flash { 0% { opacity: 0 } 25% { opacity: .9 } 100% { opacity: 0 } }
@keyframes mo-typing { 0% { opacity: 0; transform: translateY(6px) } 15%, 80% { opacity: 1; transform: none } 100% { opacity: 0 } }
@keyframes lo-steam { 0% { opacity: 0; transform: translateY(6px) } 35% { opacity: .9 } 100% { opacity: 0; transform: translateY(-16px) } }
@keyframes lo-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes lo-twinkle { 0%, 100% { opacity: .3; transform: scale(.8) } 50% { opacity: 1; transform: scale(1) } }
@keyframes lo-pulse { 0% { opacity: .5; transform: scale(1) } 100% { opacity: 0; transform: scale(2) } }
@keyframes lo-dot { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }
@keyframes lo-sway { 0%, 100% { transform: rotate(0deg) } 50% { transform: rotate(-3deg) } }
@keyframes lo-nod { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@media (prefers-reduced-motion: reduce) {
  .sc-slide { transition: none; }
  .sc-slide.active .sc-visual *, .sc-slide.active .sc-visual > svg, .sc-slide.active .sc-time, .sc-slide.active figcaption > * { animation: none !important; }
}
.auth-form { position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-lang { position: absolute; top: 18px; right: 22px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: 24px; }
.auth-card .sub { color: var(--muted); margin: 6px 0 24px; }
/* Lien discret vers la console de l'éditeur (Super Admin plateforme) */
.console-link { margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); text-align: center; font-size: 12.5px; }
.console-link a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.console-link a:hover, .console-link a:focus-visible { color: var(--link); }
.console-link svg { width: 14px; height: 14px; }
.demo-box { margin-top: 26px; border: 1px dashed var(--cream-line); background: var(--surface-2); border-radius: 12px; padding: 14px; }
.demo-box .t { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--cream-text); margin-bottom: 8px; }
.demo-accounts { display: grid; gap: 8px; }
.demo-acc { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit; text-align: left; }
.demo-acc:hover { border-color: var(--orange); }
.demo-acc .n { font-weight: 600; font-size: 13px; color: var(--ink-strong); }
.demo-acc .r { font-size: 11.5px; color: var(--muted); }
.wizard-steps { display: flex; gap: 8px; margin-bottom: 22px; }
.wizard-steps span { flex: 1; height: 5px; border-radius: 3px; background: var(--sunken); }
.wizard-steps span.on { background: var(--orange); }

/* ------------------------------------------------------------------ Langues (i18n.js) */
/* Sélecteur de langue : connexion, barre supérieure, Mon compte. Chaque langue s'affiche dans sa propre langue. */
.lang-pick { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; }
.lang-pick:hover, .lang-pick:focus-within { border-color: var(--orange); color: var(--ink-strong); }
.lang-pick svg { width: 16px; height: 16px; flex: none; }
.lang-pick select { appearance: none; border: 0; background: none; padding: 0 2px; font: 500 13px var(--font); color: var(--ink-strong); cursor: pointer; outline: none; }
.top-lang { height: 32px; }

/* ------------------------------------------------------------------ Gestion bimonétaire (USD / CDF) */
/* Bascule d'affichage de la barre supérieure : montants consolidés dans l'une ou l'autre devise, au cours du jour. */
.seg.seg-sm { padding: 2px; }
.seg.seg-sm button { padding: 4px 9px; font-size: 12px; }
.fx-toggle { flex-wrap: nowrap; flex: none; }
.fx-toggle button { font-weight: 600; letter-spacing: .02em; }
.fx-toggle button.active { color: var(--link); }
.cur-tag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; background: var(--sunken); color: var(--muted); font: 600 10.5px var(--font); vertical-align: 1px; }
.fx-rate-card .k-value { font-size: 26px; }
.fx-hint { margin-top: 4px; font-size: 12px; color: var(--muted); }
.fx-hint b { color: var(--ink-strong); }
@media (max-width: 420px) { .fx-toggle button { padding: 4px 6px; font-size: 11px; } }
/* Polices : Poppins pour l'alphabet latin, Noto (chargée à la demande) pour le chinois et l'arabe. */
html[lang="zh-Hans"] { --font: 'Montserrat', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
html[lang="ar"] { --font: 'Montserrat', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; }
html[lang="ar"] body * { letter-spacing: 0 !important; } /* l'espacement des lettres casse la liaison des lettres arabes */

/* Arabe : lecture de droite à gauche. Grilles et flex suivent la direction ; les placements fixes sont retournés ici. */
[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .company-brand::after { left: auto; right: 20px; }
[dir="rtl"] .nav a.active::before { left: auto; right: -10px; border-radius: 3px 0 0 3px; }
[dir="rtl"] .nav .count { margin-left: 0; margin-right: auto; }
[dir="rtl"] .user-meta, [dir="rtl"] .dropdown a, [dir="rtl"] .dropdown button, [dir="rtl"] .table th, [dir="rtl"] .diff th, [dir="rtl"] .suggestion,
[dir="rtl"] .conv-item, [dir="rtl"] .lines-table th, [dir="rtl"] .md th, [dir="rtl"] .md td, [dir="rtl"] .demo-acc, [dir="rtl"] .cal th.name,
[dir="rtl"] .cal td.name, [dir="rtl"] .li-grid label:nth-child(2) .input { text-align: right; }
[dir="rtl"] .right, [dir="rtl"] .table td.actions-cell, [dir="rtl"] .table input.cell-input, [dir="rtl"] .hbar .val, [dir="rtl"] .lines-table .w-total { text-align: left; }
[dir="rtl"] .dropdown { right: auto; left: 0; }
[dir="rtl"] .notif-dd { right: auto; left: -8px; }
[dir="rtl"] .notif-badge { right: auto; left: -2px; }
[dir="rtl"] .notif.unread .n-title::before { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .callout-orange { border-left: 0; border-right: 3px solid var(--orange); }
[dir="rtl"] .callout-teal { border-left: 0; border-right: 3px solid var(--teal); }
[dir="rtl"] .callout-gray { border-left: 0; border-right: 3px solid var(--line-strong); }
[dir="rtl"] .ai-card { border-left: 1px solid var(--teal-line); border-right: 4px solid var(--teal); }
[dir="rtl"] .pay-block { border-left: 0; border-right: 3px solid var(--teal); border-radius: 8px 0 0 8px; }
[dir="rtl"] .md blockquote { border-left: 0; border-right: 3px solid var(--cream); }
[dir="rtl"] .md ul, [dir="rtl"] .md ol { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .pill-count { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .action-card .before { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .modal-foot .left { margin-right: 0; margin-left: auto; }
[dir="rtl"] .totals { margin-left: 0; margin-right: auto; }
[dir="rtl"] .select { background-position: left 11px center; padding-right: 11px; padding-left: 32px; }
[dir="rtl"] .lines-table .select { background-position: left 7px center; padding-right: 7px; padding-left: 26px; }
[dir="rtl"] .copilot-drawer { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); transform: translateX(-105%); }
[dir="rtl"] .copilot-drawer.open { transform: none; }
[dir="rtl"] .copilot-page .conv-list { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .timeline li { padding: 0 18px 12px 0; }
[dir="rtl"] .timeline li::before { left: auto; right: 4px; }
[dir="rtl"] .timeline li::after { left: auto; right: 7px; }
[dir="rtl"] .cal th, [dir="rtl"] .cal td { border-right: 0; border-left: 1px solid var(--line-soft); }
[dir="rtl"] .cal th.name, [dir="rtl"] .cal td.name { left: auto; right: 0; }
[dir="rtl"] .sc-time { left: auto; right: 12px; }
[dir="rtl"] .tri-deco { right: auto; left: -10px; transform: scaleX(-1); }
[dir="rtl"] .auth-tri { right: auto; left: -36px; transform: scaleX(-1); }
[dir="rtl"] .auth-lang { right: auto; left: 22px; }
/* Flèches orientées dans le sens de lecture ; graphiques et illustrations gardent leur dessin. */
[dir="rtl"] svg[data-i="chevronLeft"], [dir="rtl"] svg[data-i="chevronRight"], [dir="rtl"] svg[data-i="arrowRight"], [dir="rtl"] svg[data-i="undo"],
[dir="rtl"] svg[data-i="send"], [dir="rtl"] svg[data-i="logout"], [dir="rtl"] svg[data-i="external"] { transform: scaleX(-1); }
[dir="rtl"] .chart, [dir="rtl"] .sc-visual > svg { direction: ltr; }

/* ------------------------------------------------------------------ Logistique */
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lg-lines td { vertical-align: middle; }
.lg-lines .input, .lg-lines .select { min-width: 0; width: 100%; }
.vh-card { display: flex; flex-direction: column; gap: 4px; }
.vh-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.vh-plate { font-size: 17px; font-weight: 700; letter-spacing: .04em; color: var(--ink); }
.vh-mission { display: flex; align-items: center; gap: 6px; color: var(--orange-600); margin-top: 4px; }
.vh-mission svg { width: 15px; height: 15px; flex: none; }
.vh-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; }

/* =====================================================================
   Refonte 2026 — thèmes clair / sombre, navigation, cartes, mouvement
   (modèles « Value Analytics » et « Nexora », aux couleurs de la charte)
   ===================================================================== */
body { transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out); }
/* Mode sombre : ciel de nuit étoilée, fixe derrière le contenu. */
html[data-theme="dark"] body {
  background: #05070f url("../img/fond-nuit-etoilee.svg") center / cover no-repeat fixed;
}
html[data-theme="dark"] ::selection { background: rgba(var(--brand-rgb), .38); color: #fff; }
html[data-theme="dark"] img.brand-logo { background: #fff; border-radius: 10px; padding: 5px 9px; }
html[data-theme="dark"] .company-brand.row img.brand-logo { padding: 4px; }

/* Barre latérale : pastille active en dégradé de la marque */
.sidebar { background: var(--sidebar-bg); border-right-color: var(--sidebar-line); }
.company-brand, .sidebar-foot { border-color: var(--sidebar-line); }
.nav { padding: 8px 14px 16px; }
.nav-group { margin-top: 18px; }
.nav-label { letter-spacing: 1.4px; padding: 0 12px 8px; }
.nav a { padding: 9px 12px; border-radius: 11px; margin: 1px 0; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.nav a svg { transition: transform var(--dur-2) var(--ease-spring), color var(--dur-2) var(--ease-out); }
.nav a:hover { background: var(--hover); }
.nav a:hover svg { color: var(--orange); transform: translateX(2px); }
.nav a.active { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }
.nav a.active svg { color: #fff; transform: none; }
.nav a.active::before { display: none; }
.nav a.active .count { background: rgba(255, 255, 255, .26); }
.nav a:active { transform: scale(.98); }
[dir="rtl"] .nav a:hover svg { transform: translateX(-2px); }

/* Sélecteur de thème (lune — interrupteur — soleil), en pied de barre latérale et dans la barre supérieure */
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.theme-row .lbl { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.theme-switch { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); font: inherit; }
.theme-switch svg { width: 16px; height: 16px; transition: color var(--dur-2), transform var(--dur-3) var(--ease-spring); }
.theme-switch .ts-track { position: relative; width: 40px; height: 22px; border-radius: 22px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--dur-2); }
.theme-switch .ts-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--grad-brand); box-shadow: 0 2px 6px rgba(var(--brand-rgb), .45); transition: transform var(--dur-3) var(--ease-spring); }
html[data-theme="light"] .theme-switch .ts-knob { transform: translateX(18px); }
html[data-theme="dark"] .theme-switch .sun, html[data-theme="light"] .theme-switch .moon { opacity: .55; }
html[data-theme="dark"] .theme-switch .moon { color: var(--orange); transform: rotate(-18deg); }
html[data-theme="light"] .theme-switch .sun { color: var(--orange); transform: rotate(45deg); }
.theme-switch:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 12px; }
html[dir="rtl"][data-theme="light"] .theme-switch .ts-knob { transform: translateX(-18px); }
html[dir="rtl"] .theme-switch .ts-knob { left: auto; right: 3px; }

/* Barre supérieure : verre dépoli, boutons encadrés */
.topbar { background: var(--topbar-bg); border-bottom-color: var(--line); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); gap: 10px; }
.topbar .title h1 { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.tb-btn { width: 38px; height: 38px; border: 1px solid var(--line); background: var(--surface); border-radius: 11px; color: var(--ink); }
.tb-btn:hover { background: var(--hover); color: var(--ink-strong); }
.icon-btn { border-radius: 10px; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2), transform var(--dur-1) var(--ease-out); }
.icon-btn:active { transform: scale(.92); }
.lang-pick { border-radius: 11px; height: 38px; background: var(--surface); }
.user-btn { border-radius: 12px; transition: background-color var(--dur-2); }
.avatar { background: linear-gradient(135deg, #4F4747 0%, #2A2525 100%); box-shadow: 0 0 0 2px var(--surface); }
.avatar.orange { background: var(--grad-brand); }
.notif-badge { background: var(--grad-brand); }
.dropdown { border-radius: 14px; background: var(--surface); transform-origin: top right; animation: dd-in var(--dur-2) var(--ease-spring); }
[dir="rtl"] .dropdown { transform-origin: top left; }
.dropdown a, .dropdown button { border-radius: 9px; }

/* Boutons : dégradé de la marque, retour tactile à l'appui */
.btn { border-radius: 11px; transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out), filter var(--dur-2); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--grad-brand); box-shadow: 0 4px 14px rgba(200, 53, 14, .26); }
.btn-primary:hover { background: var(--grad-brand); filter: brightness(1.06); box-shadow: var(--shadow-brand); }
.btn-teal { background: var(--grad-teal); }
.btn-outline:hover { background: var(--hover); }
html[data-theme="dark"] .btn-outline { background: var(--surface-2); border-color: var(--line-strong); }
html[data-theme="dark"] .btn-danger { background: transparent; }
.btn-sm { border-radius: 9px; }
.btn-xs { border-radius: 8px; }

/* Cartes : coins plus ronds, survol en relief pour ce qui est cliquable */
.card, .kpi, .hero, .request, .tpl-card, .plan-card, .editor-panel, .cal-wrap, .ai-card { border-radius: var(--radius); }
.card { box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), border-color var(--dur-2); }
html[data-theme="dark"] .card, html[data-theme="dark"] .kpi, html[data-theme="dark"] .request, html[data-theme="dark"] .plan-card, html[data-theme="dark"] .tpl-card { box-shadow: none; }
.card-head { padding: 16px 20px; }
.card-head h3 { font-size: 15px; }
.card-head h3 svg { width: 30px; height: 30px; padding: 7px; border-radius: 10px; background: var(--deep-soft); color: var(--mos-red); flex: none; }
.vh-card:hover, .tpl-card:hover, .plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.table tbody tr[data-href] td { transition: background-color var(--dur-1); }
.table th { font-size: 10.5px; letter-spacing: .9px; }
.table td { border-bottom-color: var(--line-soft); }

/* Indicateurs (KPI) : pastille d'icône teintée, valeur lisible, halo discret, courbe d'évolution facultative */
.kpi { padding: 18px 18px 16px; isolation: isolate; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2); }
.kpi::before { height: 3px; background: var(--grad-brand); }
.kpi.teal::before { background: var(--grad-teal); }
.kpi.gray::before { background: var(--line-strong); }
.kpi::after { content: ""; position: absolute; z-index: -1; right: -42px; top: -46px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, var(--orange-soft), transparent 68%); pointer-events: none; }
.kpi.teal::after { background: radial-gradient(circle, var(--teal-soft), transparent 68%); }
.kpi.gray::after, .kpi.cream::after { background: radial-gradient(circle, var(--gray-soft), transparent 68%); }
.kpi .k-label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; gap: 10px; flex-wrap: nowrap; }
.kpi .k-label svg { width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: var(--orange-soft); color: var(--orange-600); }
.kpi.teal .k-label svg { background: var(--teal-soft); color: var(--teal); }
.kpi.gray .k-label svg { background: var(--gray-soft); color: var(--gray-text); }
.kpi.cream .k-label svg { background: var(--cream-soft); color: var(--cream-text); }
.kpi .k-value { font-size: 25px; margin-top: 12px; color: var(--ink-strong); }
.kpi.teal .k-value { color: var(--teal); }
.kpi .k-sub { font-size: 12px; }
.kpi:has(a.stretch):hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.kpi .k-spark { position: absolute; right: 12px; bottom: 12px; width: 42%; max-width: 150px; height: 42px; z-index: -1; opacity: .95; pointer-events: none; }
.kpi .k-spark svg { width: 100%; height: 100%; }
.kpi:has(.k-spark) .k-sub { max-width: 55%; }
[dir="rtl"] .kpi::after { right: auto; left: -42px; }
[dir="rtl"] .kpi .k-spark { right: auto; left: 12px; }

/* Bannière d'accueil (tableau de bord) : dégradé de la marque */
.hero { background: var(--grad-mos); border: 0; color: #fff; box-shadow: var(--shadow-brand); padding: 24px 26px; }
.hero h2 { color: #fff; font-size: 23px; letter-spacing: -.2px; }
.hero .date { color: rgba(255, 255, 255, .88); }
html .hero .btn-outline, html .hero .btn-ai { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .38); color: #fff; }
html .hero .btn-outline:hover, html .hero .btn-ai:hover { background: rgba(255, 255, 255, .26); }
/* Tableau de bord : indicateurs sur autant de colonnes que la largeur le permet ; colonnes alignées en haut */
.kpi-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.g-main { align-items: start; }
.alert-list { max-height: 360px; overflow-y: auto; padding-right: 4px; }
.hero .btn-primary { background: #fff; color: #8A0303; box-shadow: 0 6px 18px rgba(90, 10, 0, .24); }
.hero .btn-primary:hover { background: #fff; filter: none; }
.hero .tri-deco { opacity: .5; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 220px at 12% 0%, rgba(255, 255, 255, .22), transparent 60%); pointer-events: none; }

/* Onglets : la pastille de l'onglet actif apparaît avec un léger ressort */
.tabs .active { animation: tab-pop var(--dur-3) var(--ease-spring); }
@keyframes tab-pop { from { transform: scale(.94); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tabs .active { animation: none; } }
.seg { border-radius: 11px; }
.seg button { transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2); }
.seg button.active { background: var(--seg-active); }
.chip { transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2), transform var(--dur-1); }
.chip:active { transform: scale(.96); }

/* Champs : fond légèrement grisé, anneau de focus orange */
.input, .select, .textarea { background-color: var(--surface-2); border-color: var(--line-strong); border-radius: 10px; }
.input:focus, .select:focus, .textarea:focus { background-color: var(--surface); box-shadow: var(--focus-ring); }
html[data-theme="dark"] .input::placeholder, html[data-theme="dark"] .textarea::placeholder { color: #8A7F7C; }
html[data-theme="dark"] .select option { background: var(--surface); color: var(--ink-strong); }

/* Barres et jauges en dégradé */
.hbar .fill, .meter span { background: var(--grad-brand); transform-origin: left center; animation: grow-x .9s var(--ease-out) both; }
.hbar.teal .fill, .meter span { background: var(--grad-teal); }
.meter.hot span { background: var(--grad-brand); }
[dir="rtl"] .hbar .fill, [dir="rtl"] .meter span { transform-origin: right center; }

/* Graphiques : tracés animés, points et anneaux */
.chart .ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease-out) .1s forwards; }
.chart .ar { opacity: 0; animation: fade-in .9s var(--ease-out) .35s forwards; }
.chart .pt { fill: var(--chart-dot); opacity: 0; animation: fade-in .3s var(--ease-out) forwards; animation-delay: calc(.35s + var(--i, 0) * 40ms); transition: r var(--dur-1); }
.chart .pt:hover { r: 5; }
.chart .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: grow-y .7s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 35ms); }
.chart .bar.neg { transform-origin: 50% 0; }
.chart .bar:hover { filter: brightness(1.12); }
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut { position: relative; width: 150px; height: 150px; flex: none; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.donut .arc { fill: none; stroke-linecap: round; animation: sweep 1s var(--ease-out) both; animation-delay: calc(.1s + var(--i, 0) * 90ms); }
.donut .track { fill: none; stroke: var(--sunken); }
.donut .center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut .center b { font-size: 20px; font-weight: 700; color: var(--ink-strong); font-variant-numeric: tabular-nums; line-height: 1.1; }
.donut .center span { font-size: 11.5px; color: var(--muted); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; min-width: 160px; font-size: 12.8px; }
.donut-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 1px 9px; align-items: center; }
.donut-legend i { width: 10px; height: 10px; border-radius: 50%; }
.donut-legend .l { color: var(--ink-strong); overflow-wrap: anywhere; font-weight: 500; }
.donut-legend .v { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.donut-legend .p { grid-column: 3; grid-row: 1 / span 2; font-weight: 700; color: var(--ink-strong); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
[dir="rtl"] .donut-legend .p { text-align: left; }

/* Modales, menus, notifications : entrée en ressort, sortie plus rapide */
.modal-backdrop { animation: fade-in var(--dur-2) var(--ease-out); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal { border-radius: 18px; background: var(--surface); animation: modal-in var(--dur-3) var(--ease-spring); }
.modal-backdrop.closing { animation: fade-out var(--dur-exit) var(--ease-in) forwards; }
.modal-backdrop.closing .modal { animation: modal-out var(--dur-exit) var(--ease-in) forwards; }
.toast { border-radius: 12px; animation: toast-in var(--dur-3) var(--ease-spring); }
.toast.error { background: linear-gradient(135deg, #B3200C, #8A0303); }
.copilot-drawer { background: var(--surface); transition: transform var(--dur-3) var(--ease-out); }
.callout { border-radius: 12px; }
.badge { border-radius: 20px; }

/* Calendrier des présences : marqueurs lisibles en sombre */
html[data-theme="dark"] .m-absent, html[data-theme="dark"] .m-sick { background: rgba(255, 128, 64, .2); color: #FFB08A; }
html[data-theme="dark"] .m-late { background: rgba(255, 190, 80, .16); color: #FFCF7A; }
html[data-theme="dark"] .m-mission, html[data-theme="dark"] .m-remote { background: rgba(140, 160, 255, .16); color: #B8C4FF; }
html[data-theme="dark"] .auth-brand { background: var(--brand-dark); }
html[data-theme="dark"] .preview-stage, html[data-theme="dark"] .tpl-thumb { background: var(--sidebar-bg); }

/* Apparition des vues et des blocs (pilotée par js/motion.js) */
.mo-pending { opacity: 0; }
.mo-pending .chart *, .mo-pending .donut .arc, .mo-pending .hbar .fill { animation-play-state: paused !important; }

/* Bascule de thème : révélation circulaire depuis l'interrupteur (View Transitions), sinon fondu des couleurs */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-reveal .6s var(--ease-out); }
html.theme-fade, html.theme-fade * { transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), color .35s var(--ease-out), fill .35s, stroke .35s !important; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes sweep { from { stroke-dasharray: 0 999; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes dd-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes theme-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%)); } }

/* Moins d'animations demandées : tout s'affiche immédiatement (les indicateurs de chargement restent visibles) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .chart .ln, .chart .ar, .chart .pt, .chart .bar, .donut .arc, .hbar .fill, .meter span, .modal, .modal-backdrop, .toast, .dropdown, .kpi, .card { animation: none !important; }
  .chart .ln { stroke-dashoffset: 0; } .chart .ar, .chart .pt { opacity: 1; }
  .mo-pending { opacity: 1; }
  ::view-transition-new(root) { animation: none; }
}

/* ------------------------------------------------------------------ Secrétariat & Administration */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 20px; }
.kv-grid > div { min-width: 0; }
.kv-grid span { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 2px; }
.kv-grid b { color: var(--ink-strong); font-weight: 600; overflow-wrap: anywhere; }
.check-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.select-sm { height: 30px; font-size: 12.5px; padding: 0 8px; width: auto; }
svg.flip { transform: scaleX(-1); }
.att-list .list-plain li a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.att-list .list-plain svg { width: 15px; height: 15px; flex: none; }
.agenda-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.agenda-day .card-head { padding: 10px 14px; }
.agenda-day .card-head h3 { font-size: 13px; text-transform: capitalize; }
.agenda-day .card-body { padding: 8px 10px 12px; display: grid; gap: 6px; }
.agenda-day.today { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), var(--shadow-sm); }
.agenda-item { display: grid; gap: 1px; text-align: left; width: 100%; border: 1px solid var(--line); border-left: 3px solid var(--orange); background: var(--surface-2); border-radius: 8px; padding: 7px 9px; cursor: pointer; font: inherit; color: var(--ink); transition: background var(--dur-1), transform var(--dur-1); }
.agenda-item:hover { background: var(--hover); transform: translateY(-1px); }
.agenda-item.meeting { border-left-color: var(--mos-red); }
.agenda-item.cancelled { opacity: .55; text-decoration: line-through; }
.agenda-item .ai-time { font-size: 11.5px; font-weight: 700; color: var(--orange-600); font-variant-numeric: tabular-nums; }
.agenda-item .ai-title { font-size: 13px; font-weight: 600; color: var(--ink-strong); }
.agenda-item .ai-sub { font-size: 11.5px; color: var(--muted); }
.agenda-item .ai-sub svg { width: 12px; height: 12px; vertical-align: -2px; }
.vault-card { display: flex; flex-direction: column; gap: 2px; }
.tabs a svg, .tabs button svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
[dir="rtl"] .tabs a svg, [dir="rtl"] .tabs button svg { margin-right: 0; margin-left: 6px; }
[dir="rtl"] svg.flip { transform: none; }

/* ------------------------------------------------------------------ Dossier du personnel, organigramme, annuaire */
.mb-s { margin-bottom: 8px; }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.avatar-edit { position: relative; flex: none; }
.avatar-edit .btn { position: absolute; inset-inline-end: -6px; bottom: -6px; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); }
.avatar-edit .btn svg { width: 13px; height: 13px; margin: 0; }
.tab-count { font-size: 11px; font-weight: 600; color: var(--orange-deep); background: var(--cream); border-radius: 999px; padding: 1px 6px; margin-inline-start: 4px; }
.diff-list { list-style: none; margin: 4px 0; padding: 0; font-size: 12.5px; }
.diff-list li { padding: 1px 0; }
.org-scroll { overflow-x: auto; padding: 8px 4px 16px; }
.org-tree, .org-tree ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.org-tree ul { position: relative; padding-top: 22px; }
.org-tree li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 8px 0; }
.org-tree li::before, .org-tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 1.5px solid var(--line); }
.org-tree li::after { right: auto; left: 50%; border-left: 1.5px solid var(--line); }
.org-tree li:only-child { padding-top: 0; }
.org-tree li:only-child::before, .org-tree li:only-child::after { display: none; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border: 0 none; }
.org-tree li:last-child::before { border-right: 1.5px solid var(--line); border-radius: 0 8px 0 0; }
.org-tree li:first-child::after { border-radius: 8px 0 0 0; }
.org-tree ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1.5px solid var(--line); }
.org-tree > li { padding-top: 0; }
.org-tree > li::before, .org-tree > li::after { display: none; }
.org-card { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 156px; padding: 12px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; text-align: center; box-shadow: var(--shadow-sm); transition: transform var(--dur-2), box-shadow var(--dur-2); }
.org-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.org-card .oc-name { font-weight: 600; font-size: 12.5px; line-height: 1.25; color: var(--ink-strong); }
.org-card .oc-sub { font-size: 11.5px; color: var(--muted); }
.org-card .oc-site { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); }
.org-card .oc-site svg { width: 12px; height: 12px; }
.stack > .org-card { width: auto; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 0; justify-items: start; align-items: center; text-align: start; padding: 8px 10px; }
.stack > .org-card .avatar { grid-row: span 3; }
.dir-card .sub { display: block; }
.dir-card .list-plain li { justify-content: flex-start; padding: 5px 0; border: 0; }
.dir-card .list-plain svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.dir-card .list-plain a { overflow-wrap: anywhere; }
@media print { .org-scroll { overflow: visible; } .org-card { box-shadow: none; break-inside: avoid; } }

/* ------------------------------------------------------------------ Mon espace : pointage, feuilles de temps, équipe */
.ms-today { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 13.5px; font-weight: 500; }
.ms-today svg { width: 16px; height: 16px; }
.ms-clock { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.ms-now { font-size: clamp(40px, 7vw, 56px); font-weight: 700; line-height: 1; color: var(--ink-strong); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ms-clock-btn {
  margin: 18px 0 8px; width: min(100%, 250px); aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer; color: #fff; font: 600 17px var(--font);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: var(--grad-mos);
  box-shadow: 0 18px 40px rgba(200, 53, 14, .32), inset 0 0 0 8px rgba(255, 255, 255, .14); transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
}
.ms-clock-btn.out { background: linear-gradient(135deg, #0B776D 0%, #095F57 100%); box-shadow: 0 18px 40px rgba(var(--teal-rgb), .32), inset 0 0 0 8px rgba(255, 255, 255, .14); }
.ms-clock-btn svg { width: 38px; height: 38px; }
.ms-clock-btn:hover { transform: scale(1.03); }
.ms-clock-btn:active { transform: scale(.97); }
.ms-clock-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.ms-clock-btn.loading { opacity: .75; pointer-events: none; }
.ms-today-line { font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.ms-clock .callout { text-align: start; width: 100%; box-sizing: border-box; }
.ms-modes { margin-bottom: 10px; justify-content: center; flex-wrap: nowrap; }
.ms-modes button { white-space: nowrap; }
@media (max-width: 420px) { .ms-modes button { padding: 6px 10px; font-size: 12.5px; } .ms-modes button svg { display: none; } }
.ms-locate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 6px 0; }
.ms-locate p { margin: 0; }
.ms-locate [data-acc] { font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.ms-locate-dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--teal); background: rgba(var(--teal-rgb), .12); animation: ms-ping 1.4s ease-out infinite; margin-bottom: 6px; }
.ms-locate-dot svg { width: 26px; height: 26px; }
@keyframes ms-ping { 0% { box-shadow: 0 0 0 0 rgba(var(--teal-rgb), .35); } 100% { box-shadow: 0 0 0 18px rgba(var(--teal-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .ms-locate-dot { animation: none; } }
.timeline .small svg { width: 13px; height: 13px; vertical-align: -2px; margin-inline-end: 3px; }
.ms-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 0; }
.ms-result h2 { margin: 6px 0 0; font-size: 20px; }
.ms-result-icon { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--teal); box-shadow: 0 12px 28px rgba(var(--teal-rgb), .35); animation: ms-pop .5s var(--ease-spring) both; }
.ms-result.out .ms-result-icon { background: var(--grad-mos); box-shadow: var(--shadow-brand); }
.ms-result.err .ms-result-icon { background: var(--orange-deep); box-shadow: none; }
.ms-result-icon svg { width: 38px; height: 38px; stroke-width: 2.6; }
.ms-result-time { font-size: 44px; font-weight: 700; line-height: 1.05; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.ms-result-page { max-width: 520px; margin: 4vh auto 0; }
.ms-scan { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 1; }
.ms-scan video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-scan-frame { position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.ts-grid .cell-input { width: 52px; text-align: center; }
.ts-grid th, .ts-grid td { padding-inline: 6px; }
.ts-grid .input.sm { min-width: 140px; }
.ts-grid th .sub { font-weight: 400; text-transform: none; letter-spacing: 0; }
.ts-grid th.ts-today { color: var(--orange); }
.ts-grid tfoot td { font-weight: 600; }
.ts-grid tfoot tr.muted td { font-weight: 400; color: var(--muted); }
.ts-grid td.deep { color: var(--orange-deep); }
.clock-ev { display: flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; }
.clock-ev svg, td .sub svg { width: 13px; height: 13px; vertical-align: -2px; }
.clock-ev .icon-btn { width: 22px; height: 22px; }
.clock-ev.rejected > span:first-child, .clock-ev.rejected > span:nth-child(2) { text-decoration: line-through; color: var(--muted); }
.clock-ev a, td.small a { display: inline-flex; align-items: center; gap: 3px; }
.scan-help { margin: 0 0 10px; padding-inline-start: 20px; display: grid; gap: 8px; font-size: 14px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.member-card { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.member-card .strong { font-size: 13px; margin-bottom: 3px; }
/* ------------------------------------------------------------------ Recrutement : tableau Kanban, grille d'entretien, intégration */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.kb-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px; min-height: 160px; transition: border-color var(--dur-2), background-color var(--dur-2); }
.kb-col.over { border-color: var(--orange); background: var(--orange-soft); }
.kb-col > header { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; font-size: 13px; }
.kb-col[data-stage="Ecarte"] { opacity: .85; }
.kb-count { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.kb-cards { display: flex; flex-direction: column; gap: 8px; }
.kb-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; cursor: pointer; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; transition: transform var(--dur-2), box-shadow var(--dur-2); }
.kb-card:hover, .kb-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); outline: none; }
.kb-card[draggable="true"] { cursor: grab; }
.kb-card.dragging { opacity: .5; }
.kb-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.kb-meta:empty { display: none; }
.score.sm { width: 32px; height: 32px; font-size: 11.5px; flex: none; }
.score.sm::after { inset: 4px; }
.progress { height: 7px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--teal); transition: width var(--dur-3) var(--ease-out); }
.onb-list li.done label span { color: var(--muted); text-decoration: line-through; }
.onb-list .check { align-items: flex-start; }
.onb-card { cursor: pointer; align-items: flex-start; }
.onb-card:hover { border-color: var(--line-strong); }
.score-grid td, .score-grid th { padding: 6px 4px; }
.score-grid input[type=radio] { width: 18px; height: 18px; accent-color: var(--orange); }
@keyframes ms-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ms-result-icon { animation: none; } .ms-clock-btn { transition: none; } }
/* ------------------------------------------------------------------ Santé & sécurité : jours sans accident, déclarations, contrôle des factures */
.safety-hero { display: grid; grid-template-columns: minmax(230px, auto) 1fr; gap: 14px; align-items: stretch; }
.sh-count { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 18px 22px; border-radius: var(--radius); background: var(--grad-teal); color: #fff; box-shadow: var(--shadow-sm); }
.sh-n { font-size: 52px; line-height: 1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sh-l { font-weight: 600; font-size: 14px; }
.sh-count .small { opacity: .85; }
.sh-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; }
.sh-site { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.sh-sn { font-size: 26px; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; line-height: 1.1; }
.decl-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.h-ico { display: flex; align-items: center; gap: 8px; }
.h-ico svg { color: var(--teal); flex: none; }
.decl-row:last-of-type { border-bottom: 0; }
.pre { white-space: pre-line; }
.decl-cell { display: grid; grid-template-columns: auto auto; gap: 4px 8px; align-items: center; justify-content: start; }
tr.row-warn td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.issue-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.issue-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--deep-text); }
.issue-list svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
@media (max-width: 720px) { .safety-hero { grid-template-columns: 1fr; } .sh-n { font-size: 42px; } }
/* ------------------------------------------------------------------ Avatars des utilisateurs et recadrage de la photo */
.uavatar { width: var(--av); height: var(--av); flex: none; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--av-a), var(--av-b)); font-weight: 700; font-size: calc(var(--av) * .38); letter-spacing: .02em; }
.uavatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crop-wrap { display: grid; gap: 14px; justify-items: center; }
.crop-stage { position: relative; width: 280px; height: 280px; border-radius: 18px; overflow: hidden; cursor: grab; touch-action: none; background: var(--sunken); }
.crop-stage:active { cursor: grabbing; }
.crop-stage:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.crop-stage canvas { width: 280px; height: 280px; display: block; }
.crop-mask { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 0 139px, rgba(20, 16, 16, .55) 140px); }
.crop-mask::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9); }
.crop-zoom { display: flex; align-items: center; gap: 10px; width: 260px; color: var(--muted); }
.crop-zoom input { flex: 1; accent-color: var(--orange); }
.uavatar.ring-orange { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--orange); }
.user-btn .uavatar { transition: transform var(--dur-2) var(--ease-spring); }
.user-btn:hover .uavatar { transform: scale(1.06); }
.dd-profile { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.dd-profile .n { font-weight: 600; color: var(--ink-strong); }
.dd-profile > div { min-width: 0; }
.dd-profile .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.dd-lang { display: none; padding: 4px 6px; }
.dd-lang .lang-pick { display: flex; width: 100%; }
.dd-lang .lang-pick select { flex: 1; }
a.who { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
a.who:hover .who-n { color: var(--orange-600); text-decoration: underline; }
.who-n { font-weight: 600; color: var(--ink-strong); }

/* ------------------------------------------------------------------ Profil des utilisateurs */
.profile-hero { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.ph-cover { position: relative; height: 128px; background: var(--grad-mos); overflow: hidden; }
.ph-cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(560px 200px at 15% 0%, rgba(255, 255, 255, .25), transparent 60%),
  radial-gradient(380px 180px at 100% 100%, rgba(0, 116, 109, .35), transparent 70%); }
.ph-cover .tri-deco { opacity: .55; }
.ph-main { display: flex; align-items: flex-end; gap: 20px; padding: 0 24px 18px; flex-wrap: wrap; }
.ph-avatar { position: relative; margin-top: -58px; flex: none; border-radius: 50%; }
.ph-avatar .ph-img { box-shadow: 0 0 0 5px var(--surface), 0 10px 26px rgba(33, 25, 25, .22); animation: ph-pop .5s var(--ease-spring) both; }
.ph-avatar.over .ph-img { box-shadow: 0 0 0 5px var(--surface), 0 0 0 9px var(--orange); }
.ph-cam { position: absolute; inset-inline-end: 2px; bottom: 4px; width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--surface); background: var(--grad-brand);
  color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-brand); transition: transform var(--dur-2) var(--ease-spring); }
.ph-cam:hover { transform: scale(1.1) rotate(-6deg); }
.ph-cam:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ph-cam svg { width: 17px; height: 17px; }
.ph-id { flex: 1; min-width: 220px; padding-top: 12px; }
.ph-id h2 { margin: 0; font-size: 24px; letter-spacing: -.3px; color: var(--ink-strong); }
.ph-job { color: var(--muted); font-size: 14px; margin: 2px 0 10px; }
.ph-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ph-chips .chip { cursor: default; display: inline-flex; align-items: center; gap: 6px; }
.ph-chips .chip svg { width: 14px; height: 14px; color: var(--teal); }
.ph-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; }
.ph-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.ph-stats > div { padding: 14px 20px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-stats > div + div { border-inline-start: 1px solid var(--line-soft); }
.ph-k { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.ph-stats b { font-size: 16px; color: var(--ink-strong); font-weight: 650; overflow-wrap: anywhere; }
.profile-public .ph-main { padding-bottom: 22px; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.pref-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pref-row:first-of-type { padding-top: 0; }
.switch-btn { position: relative; width: 44px; height: 24px; flex: none; border-radius: 20px; border: 1px solid var(--line-strong); background: var(--sunken); cursor: pointer; padding: 0;
  transition: background-color var(--dur-2), border-color var(--dur-2); }
.switch-btn span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2); }
.switch-btn[aria-checked="true"] { background: var(--orange-soft); border-color: var(--orange); }
.switch-btn[aria-checked="true"] span { transform: translateX(20px); background: var(--grad-brand); }
.switch-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
[dir="rtl"] .switch-btn span { left: auto; right: 3px; }
[dir="rtl"] .switch-btn[aria-checked="true"] span { transform: translateX(-20px); }
@keyframes ph-pop { from { transform: scale(.82); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ph-avatar .ph-img { animation: none; } }
@media (max-width: 720px) {
  .ph-main { flex-direction: column; align-items: center; text-align: center; padding: 0 16px 16px; }
  .ph-id { min-width: 0; padding-top: 4px; }
  .ph-chips, .ph-actions { justify-content: center; }
  .ph-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-stats > div:nth-child(3) { border-inline-start: 0; }
  .ph-stats > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}

/* ------------------------------------------------------------------ Carrousel d'annonces des partenaires (bandeau paysage, 20 % de la hauteur d'écran) */
.ad-slot:empty { display: none; }
.ad-carousel { position: relative; width: 100%; height: 30vh; min-height: 160px; border-radius: var(--radius); overflow: hidden; margin-bottom: 18px;
  background: var(--sunken); box-shadow: var(--shadow-sm); isolation: isolate; }
.ad-track { position: absolute; inset: 0; }
.ad-slide { position: absolute; inset: 0; isolation: isolate; display: flex; align-items: center; padding: 14px clamp(18px, 4vw, 56px); color: #fff;
  background: linear-gradient(120deg, var(--ad-a) 0%, var(--ad-b) 100%); opacity: 0; visibility: hidden; transform: translateX(3%);
  transition: opacity .55s var(--ease-out, ease), transform .55s var(--ease-out, ease), visibility 0s linear .55s; }
.ad-slide.active { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease-out, ease), transform .55s var(--ease-out, ease); }
.ad-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ad-slide:has(.ad-img)::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 35%; z-index: -1; background: linear-gradient(90deg, rgba(20,16,16,.78) 0%, rgba(20,16,16,.45) 55%, rgba(20,16,16,.05) 100%); }
.ad-slide:not(:has(.ad-img))::after { content: ""; position: absolute; right: -6%; top: -40%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.08); z-index: -1; }
.ad-content { max-width: min(640px, 78%); max-height: 100%; display: grid; gap: 3px; align-content: center; }
.ad-tag { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; font-weight: 600; }
.ad-title { margin: 0; font-size: clamp(16px, 2.2vw, 24px); line-height: 1.2; color: #fff; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-text { margin: 0; font-size: clamp(12.5px, 1.3vw, 14.5px); opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-cta { justify-self: start; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: #fff; color: #2A2525; font-weight: 600; font-size: 13px; transition: transform var(--dur-2), box-shadow var(--dur-2); }
.ad-cta:hover, .ad-cta:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.25); outline: none; }
.ad-cta svg { width: 15px; height: 15px; transition: transform var(--dur-2); }
.ad-cta:hover svg { transform: translateX(3px); }
.ad-nav { position: absolute; top: 50%; translate: 0 -50%; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--dur-2), background-color var(--dur-2); }
.ad-nav.prev { left: 10px; } .ad-nav.next { right: 10px; }
.ad-carousel:hover .ad-nav, .ad-nav:focus-visible { opacity: 1; }
.ad-nav:hover { background: rgba(255,255,255,.32); }
.ad-dots { position: absolute; bottom: 10px; right: 16px; display: flex; gap: 6px; }
.ad-dots button { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.45); transition: width var(--dur-2), background-color var(--dur-2); }
.ad-dots button.on { width: 22px; background: #fff; }
.ad-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.18); }
.ad-progress span { display: block; height: 100%; width: 0; background: rgba(255,255,255,.85); }
.ad-carousel.paused .ad-progress span { animation-play-state: paused !important; }
@keyframes ad-progress { from { width: 0; } to { width: 100%; } }
@media (max-width: 640px) { .ad-content { max-width: 100%; } .ad-text { -webkit-line-clamp: 1; line-clamp: 1; } .ad-nav { display: none; } }
/* Écran peu haut : le bandeau garde ses 20 % ; le texte se resserre pour rester entier. */
@media (max-height: 780px) { .ad-text { -webkit-line-clamp: 1; line-clamp: 1; } .ad-title { -webkit-line-clamp: 1; line-clamp: 1; } .ad-cta { margin-top: 2px; padding: 5px 12px; } }
.ad-preview { height: 200px; min-height: 0; margin: 0; }
.ad-preview .ad-cta { cursor: default; }
@media (prefers-reduced-motion: reduce) { .ad-slide, .ad-slide.active { transition: none; transform: none; } }

/* ------------------------------------------------------------------ Barre latérale : rubriques déroulantes et icônes animées */
.nav button.nav-label { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; cursor: pointer; text-align: start;
  font: inherit; font-size: 10.5px; padding: 4px 12px 6px; border-radius: 8px; transition: color var(--dur-2); }
.nav button.nav-label:hover { color: var(--ink-strong); }
.nav button.nav-label:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.nav-chev { width: 14px !important; height: 14px !important; transition: transform var(--dur-3, .3s) var(--ease-out, ease); opacity: .7; }
.nav-group.closed .nav-chev { transform: rotate(-90deg); }
[dir="rtl"] .nav-group.closed .nav-chev { transform: rotate(90deg); }
.nav-items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-3, .3s) var(--ease-out, ease); }
.nav-items > div { overflow: hidden; min-height: 0; }
.nav-group.closed .nav-items { grid-template-rows: 0fr; }
.nav-group.closed .nav-items a { visibility: hidden; }
/* Icônes « instructives » : chaque icône esquisse son geste au survol (la cloche sonne, l'engrenage tourne, le camion avance…). */
.nav a:hover svg[data-i="bell"], .nav a:hover svg[data-i="alert"] { animation: ic-ring .7s ease-in-out; }
.nav a:hover svg[data-i="gear"], .nav a:hover svg[data-i="refresh"], .nav a:hover svg[data-i="repeat"] { animation: ic-spin .7s var(--ease-out, ease); }
.nav a:hover svg[data-i="truck"], .nav a:hover svg[data-i="send"], .nav a:hover svg[data-i="transfer"] { animation: ic-drive .7s ease-in-out; }
.nav a:hover svg[data-i="banknote"], .nav a:hover svg[data-i="wallet"], .nav a:hover svg[data-i="vault"] { animation: ic-pop .5s var(--ease-spring, ease); }
.nav a:hover svg[data-i="chart"], .nav a:hover svg[data-i="trending"], .nav a:hover svg[data-i="scale"] { animation: ic-rise .6s var(--ease-out, ease); }
.nav a:hover svg[data-i="sparkles"], .nav a:hover svg[data-i="star"], .nav a:hover svg[data-i="target"] { animation: ic-twinkle .7s ease-in-out; }
.nav a:hover svg[data-i="users"], .nav a:hover svg[data-i="userCheck"], .nav a:hover svg[data-i="graduation"], .nav a:hover svg[data-i="hardHat"] { animation: ic-nod .6s ease-in-out; }
@keyframes ic-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(7deg); } 80% { transform: rotate(-4deg); } }
@keyframes ic-spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }
@keyframes ic-drive { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(4px); } 55% { transform: translateX(4px) rotate(-4deg); } }
@keyframes ic-pop { 0% { transform: scale(1); } 50% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes ic-rise { 0% { transform: translateY(0); } 40% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@keyframes ic-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(12deg); } }
@keyframes ic-nod { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-2px); } 60% { transform: translateY(1px); } }
#notif-btn.ring svg { animation: ic-ring .9s ease-in-out 2; transform-origin: 50% 15%; }
#user-dd button { display: flex; align-items: center; gap: 8px; width: 100%; }
/* Retour en haut de page (pages longues) */
.to-top { position: fixed; right: 20px; bottom: 22px; z-index: 900; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--ink-strong); box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity var(--dur-2), transform var(--dur-2); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--orange); }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 2000; padding: 8px 14px; border-radius: 10px; background: var(--ink-strong); color: var(--surface); }
.skip-link:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { .nav a:hover svg, #notif-btn.ring svg { animation: none !important; } .nav-items, .nav-chev { transition: none; } }

/* ------------------------------------------------------------------ Fenêtres d'alerte (notifications importantes) */
.alert-stack { position: fixed; z-index: 1200; right: 18px; top: 74px; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.alert-pop { pointer-events: auto; position: relative; display: flex; gap: 12px; padding: 14px 40px 14px 14px; border-radius: 16px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-inline-start: 4px solid var(--orange); box-shadow: 0 18px 40px rgba(20,16,16,.22); animation: ap-in .38s cubic-bezier(.2,.9,.3,1.2); }
.alert-pop.tone-teal { border-inline-start-color: var(--teal); }
.alert-pop.leaving { animation: ap-out .18s ease-in forwards; }
.ap-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); }
.tone-teal .ap-icon { background: var(--teal-soft); color: var(--teal); }
.ap-icon svg { animation: ap-ring 1.2s ease-in-out 2; transform-origin: 50% 10%; }
.ap-title { font-weight: 700; color: var(--ink-strong); font-size: 14px; }
.ap-text { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ap-actions { display: flex; gap: 6px; margin-top: 10px; }
.ap-close { position: absolute; top: 8px; right: 8px; }
@keyframes ap-in { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ap-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes ap-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } }
@media (max-width: 640px) { .alert-stack { top: auto; bottom: 14px; right: 16px; } }
@media (prefers-reduced-motion: reduce) { .alert-pop, .alert-pop.leaving, .ap-icon svg { animation: none; } }

/* ------------------------------------------------------------------ Évaluations, formation, discipline */
.rv-grid td { vertical-align: middle; }
.rv-radios { display: inline-flex; gap: 4px; }
.rv-radios label { position: relative; display: inline-flex; cursor: pointer; }
.rv-radios input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-radios span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 13px;
  color: var(--muted); transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), transform var(--dur-2); }
.rv-radios label:hover span { border-color: var(--line-strong); color: var(--ink-strong); }
.rv-radios input:checked + span { background: var(--orange); border-color: var(--orange); color: #fff; transform: scale(1.06); }
.rv-radios input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.rv-text { border-inline-start: 3px solid var(--line); padding: 2px 0 2px 10px; }
.rv-text p { margin: 2px 0 0; }
.progress.over > span { background: var(--orange-deep); }
.pick-list { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; padding: 2px; }
.pick-list .check { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; align-items: center; }
.pick-list .check:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.camp-card h3 { font-size: 16px; }
@media (max-width: 560px) { .rv-radios span { width: 26px; height: 26px; } }

/* ------------------------------------------------------------------ Écrans d'accès (connexion, inscription, lien d'accès)
   Photo d'ambiance en plein écran voilée d'anthracite, accroche à gauche, carte du formulaire à droite. */
.auth-scene {
  position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; color: #fff; background: #1A1515;
  padding: calc(var(--band-h) + 26px) clamp(20px, 4.5vw, 64px) 26px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); grid-template-rows: auto 1fr auto; column-gap: clamp(24px, 6vw, 96px); row-gap: 24px;
}
.as-photo {
  position: absolute; inset: 0; z-index: -1; transform-origin: 60% 40%;
  background:
    linear-gradient(90deg, rgba(22, 16, 16, .86) 0%, rgba(22, 16, 16, .62) 36%, rgba(22, 16, 16, .22) 68%, rgba(22, 16, 16, .34) 100%),
    radial-gradient(900px 640px at 0% 100%, rgba(138, 3, 3, .42), transparent 62%),
    url('/img/carrousel/photos/05-soir.jpg') 64% 38% / cover no-repeat;
  animation: as-zoom 1.8s var(--ease-out) both;
}
.as-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.as-top .mos-logo { width: 138px; }
.auth-scene .as-top .auth-lang { position: static; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; backdrop-filter: blur(8px); }
.auth-scene .as-top .auth-lang select { color: #fff; }
.auth-scene .as-top .auth-lang select option { color: #211D1D; }
.as-pitch { grid-column: 1; grid-row: 2; align-self: center; max-width: 620px; }
.as-title { margin: 0; color: #fff; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; font-weight: 800; letter-spacing: -1.2px; max-width: 15ch; text-wrap: balance; text-shadow: 0 2px 28px rgba(0, 0, 0, .28); animation: as-rise .7s var(--ease-out) both .12s; }
.as-title em { font-style: normal; color: #FFB596; }
.as-sub { margin: 18px 0 0; font-size: clamp(15px, 1.4vw, 18px); color: rgba(255, 255, 255, .9); animation: as-rise .7s var(--ease-out) both .24s; }
.as-by { grid-column: 1; grid-row: 3; align-self: end; display: flex; align-items: center; gap: 12px; font-size: 12px; color: rgba(255, 255, 255, .78); }
.as-by .logo-plate { display: inline-flex; }
/* Logo en couleur unique (blanc) sur le fond sombre. */
.as-by img { height: 28px; display: block; filter: brightness(0) invert(1); opacity: .92; }
.as-card {
  grid-column: 2; grid-row: 2 / 4; align-self: center; justify-self: end; width: 100%; max-width: 460px; position: relative;
  background: var(--auth-card); color: var(--ink); border-radius: 28px; padding: clamp(28px, 3.6vw, 44px) clamp(22px, 3vw, 40px);
  box-shadow: 0 30px 80px rgba(10, 5, 5, .38), 0 2px 0 rgba(255, 255, 255, .06) inset;
  animation: as-card-in .6s var(--ease-spring) both .08s;
}
.as-card h1 { font-size: clamp(22px, 2vw, 26px); font-weight: 600; text-align: center; letter-spacing: -.3px; margin-bottom: 24px; color: var(--ink-strong); }
.as-card .sub { color: var(--muted); text-align: center; margin: -14px 0 22px; font-size: 13.5px; }
.as-card .done-icon { margin: 0 auto 14px; }
.as-form { display: flex; flex-direction: column; gap: 16px; }
.as-form .field > label { font-size: 12.5px; }
.input-ico { position: relative; }
.input-ico > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; transition: color var(--dur-1); }
.input-ico:focus-within > svg { color: var(--orange-600); }
.auth-scene .as-card .input { height: 48px; padding-left: 44px; border-radius: 12px; background: var(--auth-input); border-color: var(--auth-line); font-size: 14px; }
.auth-scene .as-card .input:focus { border-color: var(--orange); box-shadow: var(--focus-ring); }
.input-ico:has(.pw-toggle) .input { padding-right: 48px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background var(--dur-1), color var(--dur-1); }
.pw-toggle:hover { background: var(--hover); color: var(--ink-strong); }
.pw-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 0; }
.pw-toggle svg { width: 18px; height: 18px; }
.as-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: -4px; }
.as-row .check { font-size: 12.8px; }
.as-row .link-btn { font-size: 12.8px; font-weight: 600; }
.as-submit { height: 50px; border-radius: 12px; font-size: 14.5px; font-weight: 600; margin-top: 4px; transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2), filter var(--dur-2); }
.as-submit:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 26px rgba(200, 53, 14, .34); }
.as-submit:active { transform: scale(.98); }
.as-or { display: flex; align-items: center; gap: 14px; margin: 22px 0 16px; color: var(--muted); font-size: 12.5px; }
.as-or::before, .as-or::after { content: ""; flex: 1; height: 1px; background: var(--auth-line); }
.as-alt { width: 100%; height: 48px; border-radius: 12px; background: var(--auth-input); border-color: var(--auth-line); font-weight: 600; }
.as-alt svg { color: var(--orange-600); }
.as-foot { margin: 20px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.as-card .console-link { margin-top: 22px; border-top-color: var(--auth-line); }
.as-card .callout { font-size: 12.8px; }
@keyframes as-zoom { from { transform: scale(1.08); } to { transform: none; } }
@keyframes as-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes as-card-in { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .as-photo, .as-title, .as-sub, .as-card { animation: none !important; } }
[dir="rtl"] .input-ico > svg { left: auto; right: 14px; }
[dir="rtl"] .auth-scene .as-card .input { padding-left: 14px; padding-right: 44px; }
[dir="rtl"] .input-ico:has(.pw-toggle) .input { padding-left: 48px; }
[dir="rtl"] .pw-toggle { right: auto; left: 6px; }
[dir="rtl"] .as-photo { background:
    linear-gradient(270deg, rgba(22, 16, 16, .86) 0%, rgba(22, 16, 16, .62) 36%, rgba(22, 16, 16, .22) 68%, rgba(22, 16, 16, .34) 100%),
    radial-gradient(900px 640px at 100% 100%, rgba(138, 3, 3, .42), transparent 62%),
    url('/img/carrousel/photos/05-soir.jpg') 36% 38% / cover no-repeat; }
@media (max-width: 900px) {
  .auth-scene { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; padding: calc(var(--band-h) + 18px) 16px 22px; row-gap: 22px; }
  .auth-scene .as-photo { background:
      linear-gradient(180deg, rgba(22, 16, 16, .55) 0%, rgba(22, 16, 16, .78) 45%, rgba(22, 16, 16, .92) 100%),
      url('/img/carrousel/photos/05-soir.jpg') 60% 20% / cover no-repeat; }
  .as-top .mos-logo { width: 112px; }
  .as-pitch { grid-row: 2; padding-top: 8px; }
  .as-title { font-size: clamp(30px, 8vw, 40px); max-width: 15ch; }
  .as-sub { margin-top: 10px; }
  .as-card { grid-column: 1; grid-row: 3; justify-self: center; max-width: 520px; border-radius: 22px; }
  .as-by { grid-row: 4; justify-content: center; }
}
/* Petit écran d'ordinateur (barre latérale visible) : les boutons de la barre du haut se réduisent à leur icône pour laisser la place au titre. */
@media (max-width: 1280px) {
  .user-meta { display: none; }
  #copilot-btn span { display: none; }
  .topbar .title h1 { font-size: 17px; }
}
@media (max-width: 1120px) {
  #theme-btn { display: none; } /* le même réglage reste au pied de la barre latérale */
  .top-lang svg { display: none; }
  .top-lang { padding: 0 6px; }
  .fx-toggle button { padding: 4px 6px; font-size: 11px; }
}
@media (max-width: 1180px) {
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-layout, .editor { grid-template-columns: 1fr; }
  .editor-panel { position: static; max-height: none; }
}
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: var(--band-h); bottom: 0; width: 272px; transform: translateX(-102%); transition: transform .2s; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .icon-btn.menu-btn { display: inline-grid; }
  .g-main, .g3, .g2 { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth-brand { padding: 32px 24px; min-height: 0; }
  .auth-brand .auth-logo .mos-logo { width: 168px; }
  .auth-brand h2 { font-size: 23px; margin-top: 20px; }
  .auth-brand ul, .auth-tri, .showcase { display: none; }
  .copilot-page { grid-template-columns: 1fr; }
  .copilot-page .conv-list { display: none; }
  .user-meta { display: none; }
  [dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(102%); }
  [dir="rtl"] .sidebar.open { transform: none; }
  /* Tablette et téléphone : le titre de la page passe sur sa propre ligne, sous les boutons, pour ne jamais être tronqué. */
  :root { --topbar-h: 92px; }
  .topbar { flex-wrap: wrap; align-content: center; row-gap: 4px; }
  .topbar .title { order: 10; flex: 1 0 100%; padding: 0 2px; }
  .topbar .title .crumb { display: none; }
  .topbar .title h1 { font-size: 17px; }
}
@media (max-width: 640px) {
  .content { padding: 16px; }
  .topbar { padding: 0 12px; gap: 6px; }
  .topbar .title h1 { font-size: 16px; }
  .user-btn { padding: 2px; gap: 0; }
  .user-btn > svg { display: none; }
  .notif-dd, [dir="rtl"] .notif-dd { position: fixed; left: 12px; right: 12px; top: calc(var(--band-h) + var(--topbar-h) - 4px); width: auto; }
  /* Langue : déplacée dans le menu de l'utilisateur pour laisser la place au titre de la page. */
  .top-lang { display: none; }
  .dd-lang { display: block; }
  .g4 { grid-template-columns: 1fr 1fr; }
  .g5 { grid-template-columns: 1fr; }
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
  .kpi .k-value { font-size: 19px; }
  .copilot-drawer { width: 100vw; }
  .hide-sm { display: none !important; }
  .page-head { align-items: flex-start; }
  .totals { width: 100%; }
  .filters > .input, .filters > .select, .filters .search { flex: 1 1 100%; min-width: 0; max-width: none; }
  .filters > span.row { flex: 1 1 100%; }
  .filters > span.row .input { flex: 1; min-width: 0; }
  .actions > .btn { flex: 1 1 auto; }
  .content { overflow-x: clip; }
}
@media print {
  .sidebar, .topbar, .copilot-drawer, .band-fixed, .no-print { display: none !important; }
  .app { display: block; padding: 0; }
  body { background: var(--surface); }
}

/* ------------------------------------------------------------------ Barre latérale colorée (modèle « onglet ») :
   panneau aux couleurs de MOS, texte clair ; la page active forme un onglet de la couleur du fond qui « sort » du panneau
   vers le contenu (coins concaves dessinés par ::before / ::after). */
:root {
  --side-bg: linear-gradient(180deg, #8A0303 0%, #B5170A 46%, #D2410F 100%);
  --side-ink: rgba(255, 255, 255, .86);
  --side-muted: rgba(255, 255, 255, .58);
  --side-hover: rgba(255, 255, 255, .12);
  --side-line: rgba(255, 255, 255, .16);
  --side-tab: var(--bg);
}
html[data-theme="dark"] {
  --side-bg: linear-gradient(180deg, #3A0805 0%, #5C1208 50%, #7A2410 100%);
  --side-ink: #FFFFFF;
  --side-muted: rgba(255, 245, 242, .85);
  --side-hover: rgba(255, 255, 255, .08);
  --side-line: rgba(255, 255, 255, .1);
}
.sidebar { background: var(--side-bg); border-right: 0; color: var(--side-ink); scrollbar-width: none; overflow-x: hidden; }
/* Barre de défilement masquée (molette, pavé et doigt restent actifs) : l'onglet actif rejoint le contenu sans interstice. */
.sidebar::-webkit-scrollbar { width: 0; height: 0; }
.sidebar .company-brand { border-color: var(--side-line); }
.sidebar .company-brand::after { background: rgba(255, 255, 255, .7); }
.sidebar .brand-company { color: #fff; }
.sidebar .company-brand:hover .brand-company { color: #fff; opacity: .85; }
.sidebar .brand-logo { background: #fff; border-radius: 12px; padding: 4px 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.sidebar .company-brand.row .brand-logo { padding: 4px; }
.sidebar .brand-initials { background: rgba(255, 255, 255, .18); box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .5); }
/* Les éléments touchent le bord droit : l'onglet actif se prolonge jusqu'au contenu. */
.sidebar .nav { padding: 8px 0 16px 14px; }
.sidebar .nav-label, .sidebar .nav button.nav-label { color: rgba(255, 255, 255, .92); font-weight: 800; font-size: 11px; letter-spacing: 1.5px; padding-inline-end: 22px; }
.sidebar .nav button.nav-label:hover { color: #fff; }
.sidebar .nav a { color: var(--side-ink); border-radius: 14px 0 0 14px; margin: 2px 0; padding: 10px 16px 10px 14px; }
.sidebar .nav a svg { color: var(--side-muted); }
.sidebar .nav a:hover { background: var(--side-hover); color: #fff; }
.sidebar .nav a:hover svg { color: #fff; }
.sidebar .nav a.active { background: var(--side-tab); color: var(--orange-deep); box-shadow: none; font-weight: 700; z-index: 1; }
.sidebar .nav a.active svg { color: var(--orange); }
html[data-theme="dark"] .sidebar .nav a.active { color: var(--ink-strong); }
.sidebar .nav a.active::before, .sidebar .nav a.active::after {
  content: ""; display: block; position: absolute; right: 0; left: auto; width: 16px; height: 16px; border-radius: 0; background: transparent; pointer-events: none;
}
.sidebar .nav a.active::before { top: -16px; bottom: auto; background: radial-gradient(circle at 0 0, transparent 15.5px, var(--side-tab) 16px); }
.sidebar .nav a.active::after { bottom: -16px; background: radial-gradient(circle at 0 100%, transparent 15.5px, var(--side-tab) 16px); }
.sidebar .nav .count { background: #fff; color: var(--orange-deep); }
.sidebar .nav a.active .count { background: var(--grad-brand); color: #fff; }
.sidebar .sidebar-foot { border-color: var(--side-line); color: var(--side-muted); }
.sidebar .sidebar-foot .lbl, .sidebar .sidebar-foot .p-sub { color: var(--side-muted); }
.sidebar .mos-logo.on-light { display: none; }
.sidebar .mos-logo.on-dark { display: block; }
.sidebar :focus-visible { outline-color: #fff; }
/* Arabe (de droite à gauche) : l'onglet sort par la gauche. */
[dir="rtl"] .sidebar .nav { padding: 8px 14px 16px 0; }
[dir="rtl"] .sidebar .nav a { border-radius: 0 14px 14px 0; padding: 10px 14px 10px 16px; }
[dir="rtl"] .sidebar .nav a.active::before, [dir="rtl"] .sidebar .nav a.active::after { right: auto; left: 0; }
[dir="rtl"] .sidebar .nav a.active::before { background: radial-gradient(circle at 100% 0, transparent 15.5px, var(--side-tab) 16px); }
[dir="rtl"] .sidebar .nav a.active::after { background: radial-gradient(circle at 100% 100%, transparent 15.5px, var(--side-tab) 16px); }
@media (max-width: 980px) {
  /* Menu mobile (tiroir au-dessus du contenu) : l'onglet n'a pas de contenu à rejoindre, il reste arrondi des deux côtés. */
  .sidebar .nav { padding: 8px 12px 16px; }
  .sidebar .nav a, [dir="rtl"] .sidebar .nav a { border-radius: 12px; }
  .sidebar .nav a.active { background: #fff; }
  html[data-theme="dark"] .sidebar .nav a.active { background: var(--surface); }
  .sidebar .nav a.active::before, .sidebar .nav a.active::after { display: none; }
}
.sidebar .nav-group:not(.closed) .nav-items > div { overflow: visible; }

/* ------------------------------------------------------------------ Communication interne : messagerie, demandes, notes de service */
.cm-layout { display: grid; grid-template-columns: 320px 1fr; gap: 14px; height: calc(100vh - 250px); min-height: 460px; }
.cm-list, .cm-thread { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; }
.cm-list-head { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.cm-list-head .search { flex: 1; min-width: 0; }
.cm-convs { overflow-y: auto; flex: 1; padding: 6px; }
.cm-conv { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 9px 10px; border-radius: 12px; cursor: pointer; text-align: start; color: var(--ink); font: inherit; }
.cm-conv:hover { background: var(--hover); }
.cm-conv.active { background: var(--cream-soft); }
.cm-conv.unread b { color: var(--ink-strong); }
.cm-conv .count { margin-inline-start: auto; background: var(--grad-brand); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 0 7px; line-height: 18px; }
.cm-conv-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cm-conv-top { display: flex; justify-content: space-between; gap: 8px; }
.cm-conv-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-conv-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-conv.unread .cm-conv-last { color: var(--ink); font-weight: 600; }
.cm-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); color: var(--orange); flex: none; }
.cm-ico svg { width: 18px; height: 18px; }
.cm-thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cm-back { display: none; }
.cm-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.cm-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 78%; }
.cm-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.cm-bubble { background: var(--surface); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 8px 12px; min-width: 120px; box-shadow: var(--shadow-sm); }
.cm-msg.mine .cm-bubble { background: rgba(var(--brand-rgb), .1); border-color: rgba(var(--brand-rgb), .25); border-radius: 16px 16px 4px 16px; }
.cm-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin-bottom: 2px; }
.cm-meta .cm-del { margin-inline-start: auto; opacity: 0; width: 22px; height: 22px; }
.cm-msg:hover .cm-del, .cm-del:focus-visible { opacity: .7; }
.cm-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.45; color: var(--ink-strong); }
.cm-mention { color: var(--orange-deep); background: rgba(var(--brand-rgb), .1); border-radius: 4px; padding: 0 3px; }
.cm-img { display: block; max-width: 260px; max-height: 220px; border-radius: 10px; margin-top: 6px; }
.cm-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; text-decoration: none; color: var(--ink); background: var(--surface); }
.cm-file svg { width: 15px; height: 15px; }
.cm-compose { position: relative; border-top: 1px solid var(--line); padding: 10px 12px; background: var(--surface); }
.cm-row { display: flex; gap: 8px; align-items: flex-end; }
.cm-row .textarea { flex: 1; resize: none; min-height: 38px; max-height: 160px; }
.cm-attach { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-bottom: 6px; }
.cm-attach svg { width: 14px; height: 14px; }
.cm-suggest { position: absolute; bottom: calc(100% - 4px); left: 12px; right: 12px; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 4px; z-index: 5; }
.cm-suggest button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 6px 8px; border-radius: 8px; cursor: pointer; text-align: start; font: inherit; color: var(--ink); }
.cm-suggest button.active, .cm-suggest button:hover { background: var(--hover); }
.cm-comments { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.cm-comments .cm-msg { max-width: 100%; }
.cm-comments .cm-bubble { flex: 1; }
.cm-thread-card .cm-compose { border: 1px solid var(--line); border-radius: 12px; }
.nc-users { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.nc-user { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; }
.nc-user > span { display: flex; flex-direction: column; flex: 1; }
.nc-user:hover { background: var(--hover); }
.nc-user.on { background: var(--cream-soft); }
.nc-check { width: 18px; height: 18px; color: var(--orange); opacity: 0; }
.nc-user.on .nc-check { opacity: 1; }
.rq-list { display: flex; flex-direction: column; gap: 10px; }
.rq-card { display: flex; flex-direction: column; gap: 6px; text-align: start; padding: 14px 16px; border: 1px solid var(--line); cursor: pointer; font: inherit; color: inherit; width: 100%; }
.rq-card:hover { border-color: var(--line-strong); }
.rq-card.closed { opacity: .7; }
.rq-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rq-subject { font-weight: 700; color: var(--ink-strong); font-size: 14.5px; }
.nt-card.unread { border-color: rgba(var(--brand-rgb), .45); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .08); }
.nt-card.pinned h3 svg { width: 16px; height: 16px; color: var(--orange); vertical-align: -2px; }
.nt-body { white-space: pre-wrap; line-height: 1.55; }
@media (max-width: 980px) {
  .cm-layout { grid-template-columns: 1fr; height: calc(100vh - 210px); }
  .cm-layout .cm-thread { display: none; }
  .cm-layout.has-open .cm-list { display: none; }
  .cm-layout.has-open .cm-thread { display: flex; }
  .cm-back { display: inline-grid; }
  .cm-msg { max-width: 92%; }
}

/* ================================================================== Hors connexion : pastille de la barre du haut et file d'attente */
.net-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border, #e6e2df);
  background: var(--surface, #fff); color: var(--text, #222); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.net-btn.hidden { display: none; }
.net-btn svg { width: 16px; height: 16px; }
.net-btn.offline { background: #fff4ec; border-color: #f3c3a6; color: #a13a0a; }
.net-btn b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E4521A; color: #fff; font-size: 11px; display: inline-grid; place-items: center; }
.net-btn b.err { background: #8A0303; }
:root[data-theme="dark"] .net-btn.offline { background: #3a1d10; border-color: #6b3417; color: #ffcfb4; }
@media (max-width: 640px) { .net-btn span { display: none; } .net-btn { padding: 0 9px; } }
.ob-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ob-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border, #e6e2df); border-radius: 12px; }
.ob-list li.err { border-color: #e9b4a4; background: #fff6f3; }
:root[data-theme="dark"] .ob-list li.err { background: #2a1512; border-color: #5c2a22; }
.offline-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: #a13a0a; }

/* ================================================================== Décisions (vue mobile des dirigeants) */
.dc { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
.dc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dc-hello { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.dc-date { color: var(--muted, #6f6a66); font-size: 13px; margin-top: 2px; }
.dc-ios { margin: -8px 0 0; }
.dc-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #6f6a66); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.dc-count { background: #E4521A; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; letter-spacing: 0; }
.dc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .dc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dc-tile { background: var(--surface, #fff); border: 1px solid var(--border, #ebe6e2); border-radius: 16px; padding: 14px; min-width: 0; }
.dc-tile.main { background: linear-gradient(135deg, #8A0303, #E4521A); color: #fff; border-color: transparent; }
.dc-tile.main .dc-tile-top, .dc-tile.main .dc-sub { color: rgba(255, 255, 255, .85); }
.dc-tile.up .dc-value { color: #0f7a5c; }
.dc-tile.down .dc-value { color: #a13a0a; }
.dc-tile.warn { border-color: #f3c3a6; }
.dc-tile-top { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted, #6f6a66); }
.dc-tile-top svg { width: 15px; height: 15px; }
.dc-value { font-size: 19px; font-weight: 800; margin-top: 6px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dc-sub { font-size: 12px; color: var(--muted, #6f6a66); margin-top: 2px; }
.dc-list { display: grid; gap: 10px; }
.dc-card { background: var(--surface, #fff); border: 1px solid var(--border, #ebe6e2); border-radius: 16px; padding: 14px; transition: opacity .3s, transform .3s; }
.dc-card.dc-done { opacity: 0; transform: translateX(40px); }
.dc-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dc-title { font-weight: 700; margin-top: 8px; }
.dc-subtitle { font-size: 13px; color: var(--muted, #6f6a66); margin-top: 2px; }
.dc-amount { font-size: 18px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; }
.dc-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dc-actions .btn { flex: 1 1 120px; justify-content: center; min-height: 44px; }
.dc-more { font-size: 13px; font-weight: 600; flex: 0 0 auto; }

/* ================================================================== Banques & rapprochement */
.bk-accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.bk-acc { transition: border-color .2s, box-shadow .2s; }
.bk-acc.active { border-color: #E4521A; box-shadow: 0 0 0 3px rgba(228, 82, 26, .12); }
.bk-acc b { display: inline-flex; align-items: center; gap: 6px; }
.bk-bal { font-size: 22px; font-weight: 800; margin-top: 10px; font-variant-numeric: tabular-nums; }
.bk-label { max-width: 420px; overflow-wrap: anywhere; }
.bk-table select.select.sm { max-width: 320px; }
.teal-text { color: #0f7a5c; }
:root[data-theme="dark"] .teal-text { color: #5fd3ad; }
@media (max-width: 420px) { .dc-value { font-size: 17px; } .dc-tile { padding: 12px; } }

/* ================================================================== Abonnement : section tarifaire (couleurs MOS) */
.px { margin-top: 36px; padding: 44px 24px 30px; border-radius: 28px; position: relative; overflow: hidden;
  background: radial-gradient(900px 340px at 50% -80px, rgba(228, 82, 26, .10), transparent 70%), var(--sunken, #f6f2ef); }
.px-hero { text-align: center; max-width: 820px; margin: 0 auto 34px; }
.px-hero h2 { margin: 0; font-size: clamp(26px, 4vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; color: var(--ink-strong, #1f1b1a); }
.px-hero h2 span { display: block; background: linear-gradient(90deg, #8A0303, #E4521A 55%, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 4px; }
.px-points { list-style: none; margin: 20px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; font-weight: 500; }
.px-points li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink, #4a4544); }
.px-points li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #c9bfba; margin-right: 14px; }
.px-points svg { width: 18px; height: 18px; color: #E4521A; }
.px-cycle { margin-top: 22px; background: var(--surface, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.px-cycle button { padding: 8px 18px; font-weight: 600; }
.px-cycle button b { margin-left: 6px; background: #E4521A; color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 999px; }
.px-cycle button.active { background: #2A2525; color: #fff; }

.px-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 22px; max-width: 1080px; margin: 0 auto; align-items: stretch; }
@media (max-width: 900px) { .px-grid { grid-template-columns: 1fr; max-width: 460px; } }
.px-card { position: relative; background: var(--surface, #fff); border-radius: 22px; padding: 26px 24px 28px; border: 1px solid var(--line, #ece6e2);
  box-shadow: 0 18px 40px -30px rgba(60, 20, 10, .35); display: flex; flex-direction: column; color: var(--ink, #4a4544); }
.px-card h3 { margin: 18px 0 2px; font-size: 21px; font-weight: 700; color: var(--ink-strong, #1f1b1a); }
.px-desc { margin: 0; font-size: 14px; color: var(--muted, #8b8480); min-height: 40px; line-height: 1.4; }
.px-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #f5efec; color: #6f6461; }
.px-icon svg { width: 22px; height: 22px; }
.px-price { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.px-price b { font-size: 46px; font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--ink-strong, #1f1b1a); font-variant-numeric: tabular-nums; }
.px-price s { font-size: 34px; font-weight: 700; color: #d4ccc8; letter-spacing: -.03em; text-decoration-thickness: 2px; }
.px-price span { font-size: 13px; color: var(--muted, #8b8480); }
.px-billed { font-size: 12.5px; color: var(--muted, #8b8480); margin-top: 6px; min-height: 18px; }
.px-btn { margin-top: 20px; height: 46px; border-radius: 12px; border: 1.5px solid #2A2525; background: transparent; color: #2A2525; font: inherit; font-weight: 700;
  font-size: 14.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, color .15s, transform .15s; }
.px-btn:hover:not(:disabled) { background: #2A2525; color: #fff; }
.px-btn:disabled { cursor: default; border-style: dashed; border-color: #cfc6c2; color: var(--muted, #8b8480); }
.px-main { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-bottom: 18px; border-bottom: 1px dashed #ddd4cf; font-size: 14.5px; font-weight: 500; color: var(--ink-strong, #2a2525); }
.px-main svg { width: 19px; height: 19px; color: #8b8480; }
.px-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.px-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.px-list li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #a49a96; }
.px-list li span { text-decoration: underline; text-decoration-color: rgba(120, 110, 105, .35); text-underline-offset: 4px; }
.px-tag { position: absolute; top: -1px; right: 22px; background: linear-gradient(90deg, #E4521A, #F59E0B); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; padding: 5px 10px; border-radius: 0 0 8px 8px; }
.px-card.current .px-tag { background: #0f7a5c; }

/* Formule mise en avant : fond sombre MOS, halo rouge-orangé et grille discrète. */
.px-card.featured { background: radial-gradient(420px 260px at 85% 10%, rgba(228, 82, 26, .45), transparent 70%),
  linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 34px 34px, #1f1a19;
  border-color: #2e2624; color: #d9d1cd; box-shadow: 0 30px 60px -28px rgba(138, 3, 3, .65); transform: translateY(-6px); }
.px-card.featured h3, .px-card.featured .px-price b, .px-card.featured .px-main { color: #fff; }
.px-card.featured .px-desc, .px-card.featured .px-billed, .px-card.featured .px-price span { color: #b5aaa6; }
.px-card.featured .px-price s { color: #6b5f5b; }
.px-card.featured .px-icon { background: linear-gradient(135deg, #8A0303, #E4521A); color: #fff; }
.px-card.featured .px-btn { background: linear-gradient(90deg, #E4521A, #F06A2A); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -10px rgba(228, 82, 26, .8); }
.px-card.featured .px-btn:hover:not(:disabled) { filter: brightness(1.06); }
.px-card.featured .px-btn:disabled { background: transparent; border: 1.5px dashed #6b5f5b; color: #b5aaa6; box-shadow: none; }
.px-card.featured .px-main { border-bottom-color: #3d3331; }
.px-card.featured .px-main svg { color: #E4521A; }
.px-card.featured .px-list li svg { color: #E4521A; }
.px-card.featured .px-list li span { text-decoration-color: rgba(255, 255, 255, .25); }
@media (max-width: 900px) { .px-card.featured { transform: none; } }

.px-foot { text-align: center; margin-top: 34px; font-size: 13px; color: var(--muted, #8b8480); display: grid; gap: 6px; }
.px-foot p { margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.px-foot svg { width: 15px; height: 15px; }
.px-note { border-top: 1px dashed #d8cfca; padding-top: 14px; margin-top: 10px !important; max-width: 520px; justify-self: center; }

:root[data-theme="dark"] .px { background: radial-gradient(900px 340px at 50% -80px, rgba(228, 82, 26, .14), transparent 70%), #1b1716; }
:root[data-theme="dark"] .px-btn { border-color: #e9e2df; color: #e9e2df; }
:root[data-theme="dark"] .px-btn:hover:not(:disabled) { background: #e9e2df; color: #1f1b1a; }
:root[data-theme="dark"] .px-icon { background: #2b2422; color: #cfc6c2; }
:root[data-theme="dark"] .px-cycle button.active { background: #E4521A; }
/* Disposition selon la place réellement disponible (barre latérale comprise). */
.px { container-type: inline-size; }
.px-price { flex-wrap: nowrap; }
@container (max-width: 860px) {
  .px-grid { grid-template-columns: 1fr; max-width: 440px; }
  .px-card.featured { transform: none; }
}
@container (min-width: 861px) and (max-width: 1060px) {
  .px-card { padding: 24px 18px 24px; }
  .px-price b { font-size: 38px; }
  .px-price s { font-size: 26px; }
}

/* ================================================================== Abonnement : page entière (même langage que les cartes tarifaires) */
.sb { container-type: inline-size; display: grid; gap: 18px; }
.sb-head h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.02em; color: var(--ink-strong, #1f1b1a); }
.sb-head p { margin: 4px 0 0; color: var(--muted, #8b8480); }
.sb-alert { margin: 0; }
.sb-top { display: grid; grid-template-columns: minmax(300px, 1.05fr) 1.6fr; gap: 18px; align-items: stretch; }
.sb-usage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start; }
.sb-incl { grid-column: 1 / -1; }
.sb-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.sb-side { display: grid; gap: 18px; }
@container (max-width: 900px) { .sb-top, .sb-cols { grid-template-columns: 1fr; } }
@container (max-width: 520px) { .sb-usage { grid-template-columns: 1fr; } }

.sb-card { background: var(--surface, #fff); border: 1px solid var(--line, #ece6e2); border-radius: 22px; padding: 20px 20px 22px;
  box-shadow: 0 18px 40px -32px rgba(60, 20, 10, .35); min-width: 0; }
.sb-card h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; color: var(--ink-strong, #1f1b1a); }
.sb-card h4 svg { width: 18px; height: 18px; color: #E4521A; }
.sb-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.sb-incl h4 { margin-bottom: 14px; }
.sb-incl .px-list { margin: 0; }

/* Carte « Votre formule » : fond sombre MOS (comme la formule mise en avant). */
.sb-plan { position: relative; border-radius: 24px; padding: 24px; color: #d9d1cd; overflow: hidden; display: flex; flex-direction: column;
  background: radial-gradient(420px 260px at 90% 0%, rgba(228, 82, 26, .5), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 34px 34px, #1f1a19;
  box-shadow: 0 30px 60px -30px rgba(138, 3, 3, .65); }
.sb-plan-row { display: flex; justify-content: space-between; align-items: center; }
.sb-plan .px-icon { background: linear-gradient(135deg, #8A0303, #E4521A); color: #fff; }
.sb-pill { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(52, 199, 155, .16); color: #6ee7c2; border: 1px solid rgba(52, 199, 155, .35); }
.sb-pill.warn { background: rgba(245, 158, 11, .16); color: #fcd34d; border-color: rgba(245, 158, 11, .35); }
.sb-plan-label { margin-top: 18px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #b5aaa6; }
.sb-plan h3 { margin: 4px 0 0; font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.sb-plan .px-price { margin-top: 12px; }
.sb-plan .px-price b { color: #fff; font-size: 40px; }
.sb-plan .px-price span { color: #b5aaa6; }
.sb-due { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; }
.sb-due svg { width: 17px; height: 17px; color: #E4521A; }
.sb-due em { font-style: normal; color: #ffb48a; font-weight: 600; }
.sb-owed { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 14px;
  background: rgba(228, 82, 26, .14); border: 1px solid rgba(228, 82, 26, .35); font-size: 13.5px; }
.sb-owed b { color: #fff; font-size: 16px; }
.sb-owed.ok { background: rgba(52, 199, 155, .1); border-color: rgba(52, 199, 155, .3); }
.sb-owed.ok span { display: inline-flex; align-items: center; gap: 8px; color: #6ee7c2; }
.sb-owed svg { width: 16px; height: 16px; }
.sb-actions { display: grid; gap: 10px; margin-top: auto; padding-top: 20px; }
.sb-actions .px-btn { margin-top: 0; width: 100%; }
.sb-primary { background: linear-gradient(90deg, #E4521A, #F06A2A) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 10px 22px -10px rgba(228, 82, 26, .8); }
.sb-primary:hover { filter: brightness(1.06); }
.sb-ghost { border-color: #4a3f3c !important; color: #e9e2df !important; background: transparent !important; }
.sb-ghost:hover { background: rgba(255, 255, 255, .06) !important; }

/* Consommation */
.sb-use-top { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink, #4a4544); }
.sb-use-val { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
.sb-use-val b { font-size: 36px; font-weight: 800; letter-spacing: -.03em; color: var(--ink-strong, #1f1b1a); font-variant-numeric: tabular-nums; }
.sb-use-val span { color: var(--muted, #8b8480); font-size: 13px; }
.sb-gauge { height: 8px; border-radius: 99px; background: #f1ebe8; margin-top: 14px; overflow: hidden; }
.sb-gauge span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #E4521A, #F59E0B); min-width: 6px; }
.sb-gauge.hot span { background: linear-gradient(90deg, #8A0303, #E4521A); }
.sb-use-pct { font-size: 12px; color: var(--muted, #8b8480); margin-top: 6px; text-align: right; }

/* Lignes de factures et de paiements */
.sb-rows { display: grid; gap: 8px; }
.sb-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--line, #efe9e5); background: var(--surface, #fff); transition: box-shadow .15s, border-color .15s; }
.sb-row:hover { border-color: #f3c3a6; box-shadow: 0 8px 20px -16px rgba(138, 3, 3, .5); }
.sb-row.pay { grid-template-columns: 38px minmax(0, 1fr) auto; }
.sb-row.due { border-color: #f6cdb5; background: linear-gradient(90deg, #fff7f2, var(--surface, #fff) 60%); }
.sb-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #f5efec; color: #8b7f7b; }
.sb-row.due .sb-ico { background: linear-gradient(135deg, #8A0303, #E4521A); color: #fff; }
.sb-ico svg { width: 18px; height: 18px; }
.sb-main { display: grid; min-width: 0; }
.sb-main b { font-size: 14px; color: var(--ink-strong, #1f1b1a); }
.sb-main small, .sb-amt small { color: var(--muted, #8b8480); font-size: 12px; overflow-wrap: anywhere; }
.sb-amt { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.sb-amt b { font-size: 14.5px; color: var(--ink-strong, #1f1b1a); }
.sb-btns { display: flex; align-items: center; gap: 6px; }
.sb-icon-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line, #ece6e2); background: transparent; display: grid; place-items: center; color: #E4521A; cursor: pointer; }
.sb-icon-btn:hover { background: #fff4ee; }
.sb-icon-btn svg { width: 16px; height: 16px; }
.sb-mini { height: 32px; padding: 0 12px; border-radius: 9px; border: 1.5px solid #2A2525; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: #2A2525; cursor: pointer; }
.sb-mini.primary { background: linear-gradient(90deg, #E4521A, #F06A2A); border-color: transparent; color: #fff; }
@container (max-width: 640px) {
  .sb-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .sb-row > span:nth-child(4) { grid-column: 2; }
  .sb-row .sb-btns { grid-column: 2 / -1; }
}

/* Moyens de paiement : carte sombre */
.sb-dark { background: #2A2525; border-color: #2A2525; color: #d9d1cd; }
.sb-dark h4 { color: #fff; }
.sb-dark .pay-block { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; }
.sb-dark .pay-block span { color: #b5aaa6; }
.sb-dark .pay-block b { color: #fff; }
.sb-hint { margin: 14px 0 0; font-size: 12.5px; color: #b5aaa6; line-height: 1.45; }
.sb .px { margin-top: 8px; }

:root[data-theme="dark"] .sb-row.due { background: linear-gradient(90deg, #33201a, var(--surface) 60%); border-color: #5c3322; }
:root[data-theme="dark"] .sb-ico, :root[data-theme="dark"] .sb-gauge { background: #2b2422; }
:root[data-theme="dark"] .sb-mini { border-color: #e9e2df; color: #e9e2df; }
:root[data-theme="dark"] .sb-icon-btn:hover { background: #2b2422; }
/* Moyens de paiement en bas de page : coordonnées côte à côte sur grand écran. */
.sb-paybox { padding: 22px 24px 24px; }
.sb-paybox .pay-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; padding: 16px 18px; }
.sb-paybox .pay-block > div { margin: 0; }
.sb-paybox .pay-block > p { grid-column: 1 / -1; margin: 0; }
.as-home { display: inline-flex; }

/* Synergie Logistique ↔ Finance : rapprochement à 3 voies, cycle de trésorerie, flux automatisés. */
.tw-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.tw-step { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--cream-soft); position: relative; min-width: 0; }
.tw-step b { font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tw-ico { color: var(--orange); display: inline-flex; }
.tw-ico svg { width: 16px; height: 16px; }
.lf-cycle { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.lf-c { flex: 1 1 140px; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 14px; background: var(--cream-soft); }
.lf-c b { font-size: 22px; font-variant-numeric: tabular-nums; }
.lf-c.lf-total { background: linear-gradient(135deg, #8A0303, #CC4510); color: #fff; }
.lf-c.lf-total .sub { color: rgba(255, 255, 255, .8); }
.lf-op { align-self: center; font-size: 22px; font-weight: 700; color: var(--muted); }
.lf-flow-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--cream); color: var(--orange-deep); }
.lf-flow-ico svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .lf-op { display: none; } }

/* Demandes de paiement : circuit Logistique → Super Admin → Finance, contrôle Spira IA. */
.pr-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pr-flow li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--cream-soft); min-width: 0; }
.pr-flow li > span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--orange-deep); font-weight: 800; box-shadow: 0 0 0 1px var(--line); }
.pr-flow li.hot { background: linear-gradient(135deg, #8A0303, #CC4510); color: #fff; }
.pr-flow li.hot .muted, .pr-flow li.hot .deep { color: rgba(255, 255, 255, .85); }
.pr-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pr-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--cream-soft); opacity: .7; min-width: 0; }
.pr-steps li.done { opacity: 1; }
.pr-dot { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--muted); box-shadow: 0 0 0 1px var(--line); }
.pr-dot svg { width: 14px; height: 14px; }
.pr-steps li.done .pr-dot { background: var(--teal); color: #fff; box-shadow: none; }
.pr-steps li.fail .pr-dot { background: var(--orange-deep); color: #fff; box-shadow: none; }
.pr-checks { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.pr-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.pr-checks li svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.pr-checks .lvl-ok svg { color: var(--teal); }
.pr-checks .lvl-attention svg { color: var(--orange); }
.pr-checks .lvl-alerte svg { color: var(--orange-deep); }
.pr-checks .lvl-alerte { font-weight: 600; }
.pr-src { flex: none; margin-inline-start: auto; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--cream); color: var(--orange-deep); white-space: nowrap; }
@media (max-width: 760px) { .pr-flow, .pr-steps { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Téléphone (≤ 640 px) : affichage simplifié
   - barre d'onglets en bas (Accueil, Décisions, Spira IA, Alertes, Menu) ;
   - barre du haut sur une seule ligne, menu complet en tiroir ;
   - tableaux présentés en cartes, fenêtres en panneau montant du bas ;
   - tableau de bord sans graphiques (indicateurs, « À traiter » et listes).
   ===================================================================== */
.tabbar, .side-scrim { display: none; }
@media (max-width: 640px) {
  :root { --topbar-h: 56px; --tabbar-h: 62px; }

  /* Barre du haut : une seule ligne (menu, titre, devise, profil) ; Spira IA et notifications passent dans les onglets. */
  .topbar { flex-wrap: nowrap; padding: 0 10px; gap: 6px; }
  .topbar .title { order: 0; flex: 1 1 auto; min-width: 0; padding: 0; }
  .topbar .title h1 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .spacer { display: none; }
  #copilot-btn, .notif-menu { display: none; }
  .fx-toggle button { padding: 3px 6px; font-size: 10.5px; }

  /* Onglets du bas. */
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 92%, transparent); border-top: 1px solid var(--line);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 -6px 24px rgba(0, 0, 0, .08); }
  .tab-it { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px;
    border: 0; background: none; color: var(--muted); font: 600 10.5px var(--font); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tab-it svg { width: 22px; height: 22px; transition: transform var(--dur-2) var(--ease-spring); }
  .tab-it.active { color: var(--orange-600); }
  .tab-it.active::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--grad-brand); }
  .tab-it:active svg { transform: scale(.88); }
  .tab-it.tab-ai svg { color: var(--teal); }
  .tab-it .count { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--orange-deep); color: #fff; font-size: 10px; line-height: 17px; text-align: center; }
  .content { padding: 14px 14px calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); }
  .to-top { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom)); right: 14px; }
  .alert-stack { bottom: calc(var(--tabbar-h) + 12px); }

  /* Menu complet en tiroir, avec voile pour le refermer. */
  .sidebar { width: min(86vw, 320px); z-index: 960; }
  .side-scrim { display: block; position: fixed; inset: 0; z-index: 955; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.side-open .side-scrim { opacity: 1; pointer-events: auto; }
  body.side-open { overflow: hidden; }

  /* En-têtes et blocs plus compacts. */
  .page-head { gap: 10px; margin-bottom: 14px; }
  .page-head h2 { font-size: 18px; }
  .page-head .sub { font-size: 12.5px; }
  .page-head .actions { width: 100%; }
  .card-head { padding: 12px 14px; }
  .card-body { padding: 14px; }
  .kpi-grid, .g4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px 12px 11px; }
  .kpi .k-label { font-size: 11.5px; gap: 7px; }
  .kpi .k-label svg { width: 26px; height: 26px; padding: 5px; border-radius: 8px; }
  .kpi .k-value { font-size: 17px; margin-top: 8px; overflow-wrap: anywhere; }
  .kpi .k-sub { font-size: 11px; max-width: none !important; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kpi .k-spark, .kpi::after { display: none; }

  /* Bannière de publicité et accueil du tableau de bord réduits. */
  .ad-carousel { height: 118px; min-height: 118px; margin-bottom: 12px; }
  .ad-slide { padding: 10px 16px; }
  .ad-tag, .ad-text { display: none; }
  .ad-title { font-size: 15px; }
  .ad-cta { padding: 5px 11px; font-size: 12px; }
  .hero { padding: 16px; gap: 12px; }
  .hero h2 { font-size: 19px; }
  .hero .date { font-size: 12px; }
  .hero .actions { width: 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .hero .actions::-webkit-scrollbar { display: none; }
  .hero .actions > .btn { flex: none; }
  .hero .tri-deco { display: none; }

  /* Onglets et filtres : défilement horizontal au lieu de plusieurs lignes. */
  .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .tabs button, .tabs a { padding: 7px 12px; font-size: 13px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .chips .chip { flex: none; }

  /* Tableaux en cartes : chaque ligne devient une carte, le titre de colonne précède la valeur. */
  .table-wrap:has(> table[data-cards]) { overflow: visible; border: 0; }
  table[data-cards], table[data-cards] tbody, table[data-cards] tr, table[data-cards] td { display: block; width: 100%; }
  table[data-cards] thead { display: none; }
  table[data-cards] tbody { display: grid; gap: 10px; padding: 10px; }
  table[data-cards] tr { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 14px; padding: 10px 12px; }
  /* Titre de colonne à gauche (flottant), valeur à droite : les valeurs sur plusieurs lignes s'empilent normalement. */
  table[data-cards] td { display: flow-root; padding: 5px 0; border: 0; text-align: right; min-height: 0; }
  table[data-cards] td::before { content: attr(data-label); float: left; max-width: 45%; margin-right: 12px; color: var(--muted); font-size: 11.5px; font-weight: 600; text-align: left; padding-top: 1px; }
  table[data-cards] td:not([data-label])::before, table[data-cards] td[data-label=""]::before { display: none; }
  table[data-cards] td.td-first { display: block; text-align: left; font-size: 14.5px; padding: 2px 0 7px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
  table[data-cards] td.td-first::before { display: none; }
  table[data-cards] td.right, table[data-cards] td.center { text-align: right; }
  table[data-cards] td > * { min-width: 0; }
  table[data-cards] td:empty { display: none; }
  table[data-cards] td.actions-cell { padding-top: 8px; }
  table[data-cards] td.actions-cell > .row { justify-content: flex-end; }
  table[data-cards] td.actions-cell::before { display: none; }
  table[data-cards] tr.clickable:active { transform: scale(.99); }
  table[data-cards] tfoot { display: block; padding: 0 10px 10px; }

  /* Fenêtres : panneau qui monte du bas, pleine largeur. */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal, .modal-lg, .modal-xl, .modal-sm { max-width: 100%; width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; }
  .modal-body { overflow-y: auto; padding: 16px; }
  .modal-head { padding: 14px 16px; }
  .modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1 1 auto; }
}

/* Écran de démarrage (téléphone, 5 s) : le logo MOS se trace lettre par lettre (0,2 → 2,5 s), se remplit de son dégradé
   (2,3 → 3,1 s), un reflet le parcourt (3,2 → 4,1 s) ; « Mayele Operating System » apparaît à 2,9 s ; fondu de sortie à 5 s. */
.mos-splash { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; overflow: hidden; color: #2A2525;
  background: radial-gradient(90% 60% at 50% 42%, #FFFFFF 0%, #FBF6F4 55%, #F3E9E5 100%); transition: opacity .5s var(--ease-out, ease); }
.mos-splash::before { content: ""; position: absolute; left: 50%; top: 42%; width: 120vw; height: 120vw; transform: translate(-50%, -50%) scale(.6); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(228, 82, 26, .14), transparent 70%); opacity: 0; animation: ms-glow 2.6s ease-out 1.8s forwards; }
.mos-splash.out { opacity: 0; pointer-events: none; }
.ms-center { position: relative; display: grid; justify-items: center; gap: 16px; margin-top: -6vh; }
.ms-logo { width: min(74vw, 320px); height: auto; overflow: visible; animation: ms-breathe 1.2s ease-in-out 3.1s 1 both; }
.ms-letter { fill: url(#ms-grad); fill-opacity: 0; stroke: url(#ms-grad); stroke-width: 11; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: ms-draw 1.5s cubic-bezier(.6, .05, .3, 1) calc(.2s + var(--i) * .4s) forwards, ms-fill .8s ease-out calc(2.3s + var(--i) * .12s) forwards; }
.ms-sheen { transform: translateX(0); animation: ms-sheen .9s ease-in-out 3.2s forwards; }
.ms-name { font: 600 12.5px/1.2 'Montserrat', system-ui, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #3D3535;
  opacity: 0; transform: translateY(10px); animation: ms-name .8s ease-out 2.9s forwards; }
.ms-by { position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); text-align: center;
  font: 500 10px/1 'Montserrat', system-ui, sans-serif; letter-spacing: 1.6px; color: #8E8482; opacity: 0; animation: ms-up .7s ease-out .6s forwards; }
@keyframes ms-draw { to { stroke-dashoffset: 0; } }
@keyframes ms-fill { to { fill-opacity: 1; stroke-width: 0; } }
@keyframes ms-sheen { to { transform: translateX(2300px); } }
@keyframes ms-breathe { 50% { transform: scale(1.035); } }
@keyframes ms-name { to { opacity: 1; transform: none; letter-spacing: 3.4px; } }
@keyframes ms-up { to { opacity: 1; transform: none; } }
@keyframes ms-glow { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
/* Mouvement réduit : logo affiché directement, sans tracé ni reflet. */
.mos-splash.still .ms-letter { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; animation: none; }
.mos-splash.still .ms-sheen, .mos-splash.still::before { display: none; }
.mos-splash.still .ms-logo { animation: none; }
.mos-splash.still .ms-name, .mos-splash.still .ms-by { opacity: 1; transform: none; animation: none; }