/* ==========================================================================
   Établi — feuille de styles unique
   Blanc lumineux, gris perle, texte presque noir, un seul accent (braise).
   ========================================================================== */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --pearl: #f5f5f7;
  --pearl-2: #ececf0;
  --line: #e0e0e5;
  --line-2: #cfcfd6;
  --ink: #111113;
  --ink-2: #2f2f34;
  --muted: #5f5f66;
  --accent: #c2410c;
  --accent-ink: #b13a0a;
  --accent-soft: #fdf0e9;
  --accent-mark: #f06a1d;
  --ok-soft: #eef0ee;
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(17, 17, 19, .05), 0 18px 48px -18px rgba(17, 17, 19, .18);
  --shadow-sm: 0 1px 2px rgba(17, 17, 19, .06), 0 6px 18px -10px rgba(17, 17, 19, .2);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: .2s;
  --hdr: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Focus clavier visible partout */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.btn:focus-visible, .d-btn:focus-visible { border-radius: 999px; }
main:focus-visible, [tabindex="-1"]:focus-visible { outline: none; }
.d-flash:focus-visible, .d-panel:focus-visible, .form-status:focus-visible, .form-errors:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; transition: top var(--t); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 820px; }
.center { text-align: center; }
.mt { margin-top: 32px; }

/* ---------- Typographie ---------- */
.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--accent-ink); margin: 0 0 14px; }
.h1 { font-size: clamp(42px, 7.2vw, 88px); line-height: 1.02; letter-spacing: -.045em; font-weight: 650; }
.h1-page { font-size: clamp(36px, 5.4vw, 64px); letter-spacing: -.04em; max-width: 18ch; }
.page-hero.center .h1-page, .center .h1-page { margin-left: auto; margin-right: auto; }
.h2 { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -.035em; line-height: 1.06; }
.h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.025em; }
.h4 { font-size: 19px; letter-spacing: -.015em; }
.lead { font-size: clamp(19px, 2vw, 23px); line-height: 1.45; color: var(--muted); max-width: 680px; margin: 22px 0 0; letter-spacing: -.01em; }
.center .lead { margin-left: auto; margin-right: auto; }
.sub { color: var(--muted); font-size: 19px; line-height: 1.5; max-width: 640px; margin: 16px auto 0; }

/* ---------- Boutons pilule ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; font-size: 16px; font-weight: 600; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: background var(--t) var(--ease), color var(--t), border-color var(--t), transform .12s var(--ease), box-shadow var(--t); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2c2c31; box-shadow: 0 6px 20px -8px rgba(17, 17, 19, .5); }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { background: var(--pearl); border-color: var(--ink); }
.btn-invert { background: #fff; color: var(--ink); }
.btn-invert:hover { background: var(--pearl-2); }
.btn-outline-invert { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-outline-invert:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.cta-band .btn:focus-visible { outline-color: #fff; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn-lg { min-height: 54px; padding: 0 30px; font-size: 17px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn-row.center { justify-content: center; }
.btn-text { background: none; border: 0; padding: 8px; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--ink); min-height: 44px; }
.link-arrow .ic { transition: transform var(--t) var(--ease); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .ic { transform: translateX(3px); }

/* ---------- En-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid transparent; transition: border-color var(--t); }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.hdr { display: flex; align-items: center; gap: 24px; height: var(--hdr); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: 44px; }
.logo-mark { color: var(--ink); flex: none; }
.logo-name { font-family: var(--font-display); font-weight: 650; font-size: 20px; letter-spacing: -.03em; }
.nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav ul { display: flex; list-style: none; gap: 4px; }
.nav ul a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-size: 15px; color: var(--ink-2); transition: background var(--t), color var(--t); }
.nav ul a:hover { background: var(--pearl); color: var(--ink); }
.nav ul a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--pearl); }
.nav-cta { margin-left: 8px; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: #fff; align-items: center; justify-content: center; }
.menu-close { display: none; }

/* ---------- Sections ---------- */
.hero { padding: clamp(48px, 8vw, 104px) 0 clamp(28px, 4vw, 48px); }
.page-hero { padding: clamp(48px, 8vw, 104px) 0 clamp(32px, 5vw, 56px); }
.page-hero-left .lead { margin-left: 0; }
.section { padding: clamp(64px, 8vw, 112px) 0; }
.hero .narrow { max-width: 1040px; }
.section-tight { padding: clamp(24px, 4vw, 48px) 0; }
.pearl { background: var(--pearl); }
.sec-head { text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .h2 { max-width: 20ch; margin: 0 auto; }

/* Fil d'Ariane */
.crumbs { padding-top: 20px; font-size: 14px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; list-style: none; gap: 6px; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Scène de démo ---------- */
.stage { background: var(--pearl); border-radius: var(--radius-xl); padding: clamp(16px, 3vw, 36px); }
.stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.stage-sub { color: var(--muted); margin: 6px 0 0; font-size: 16px; }
.stage-hint { color: var(--ink-2); font-size: 16px; margin: 0 0 14px; }
.stage-foot { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 14px; }
.badge-demo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent-ink); background: #fff; border: 1px solid #f3d3c2; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.badge-demo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--pearl-2); border-radius: 999px; margin-bottom: 20px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"] { border: 0; background: transparent; min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: background var(--t), color var(--t), box-shadow var(--t); }
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

.try { counter-reset: t; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0 0 20px; }
.try li { counter-increment: t; position: relative; background: #fff; border-radius: var(--radius-sm); padding: 12px 14px 12px 44px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.try li::before { content: counter(t); position: absolute; left: 12px; top: 11px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.sim-note { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--muted); margin: 16px 0 0; }
.sim-note .ic { flex: none; margin-top: 2px; color: var(--accent); }
.demo-noscript { background: #fff; padding: 12px 16px; border-radius: var(--radius-sm); margin-top: 12px; }


.calc { background: #fff; border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 32px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.calc-in { display: grid; gap: 14px; }
.calc-out { background: var(--pearl); border-radius: var(--radius); padding: 24px; text-align: center; }
.calc-big { display: block; font-family: var(--font-display); font-size: clamp(48px, 7vw, 72px); font-weight: 650; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.calc-unit { display: block; color: var(--muted); margin-top: 6px; }
.calc-out p { margin: 12px 0 0; font-size: 15px; }
.calc-note { grid-column: 1 / -1; font-size: 13px; color: var(--muted); margin: 0; }

/* ==========================================================================
   Pages
   ========================================================================== */
.cards { display: grid; gap: 14px; }
.cards-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cards-5 .card { grid-column: span 2; }
.cards-5 .card:nth-child(4), .cards-5 .card:nth-child(5) { grid-column: span 3; }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; background: var(--pearl); border-radius: var(--radius-lg); padding: 28px; text-decoration: none; color: var(--ink); transition: background var(--t), transform var(--t) var(--ease), box-shadow var(--t); min-height: 100%; }
a.card:hover { background: #fff; box-shadow: var(--shadow); transform: translateY(-2px); }
.card h3, .card h2 { font-size: 22px; margin: 18px 0 8px; letter-spacing: -.025em; }
.card-static h3, .card-static h2 { margin-top: 0; }
.card p { color: var(--muted); margin: 0; }
.card-ic { width: 48px; height: 48px; border-radius: 14px; background: #fff; display: grid; place-items: center; flex: none; color: var(--ink); }
a.card:hover .card-ic { background: var(--ink); color: #fff; }
.card-more { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
.card .checks { margin-top: 14px; }

.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.step { background: #fff; border-radius: var(--radius-lg); padding: 26px; position: relative; }
.section:not(.pearl) .step, .section-tight .step { background: var(--pearl); }
.step-n { font-size: 13px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.step-ic { position: absolute; right: 22px; top: 22px; color: var(--muted); }
.step h3 { font-size: 21px; margin: 18px 0 8px; }
.step p { color: var(--muted); margin: 0; font-size: 16px; }

.ex-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ex-list-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.ex-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--pearl); text-decoration: none; transition: background var(--t), box-shadow var(--t); }
.ex-item:hover { background: #fff; box-shadow: var(--shadow); }
.ex-sector { font-size: 13px; font-weight: 600; color: var(--accent-ink); grid-column: 1; }
.ex-item strong { font-size: 19px; letter-spacing: -.02em; grid-column: 1; }
.ex-arrow { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: background var(--t), color var(--t); }
.ex-item:hover .ex-arrow { background: var(--ink); color: #fff; }

.faq { border-top: 1px solid var(--line); margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; cursor: pointer; font-size: 19px; font-weight: 600; letter-spacing: -.015em; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--pearl); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: transform var(--t) var(--ease); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq summary:hover i { background: var(--pearl-2); }
.faq details p { color: var(--ink-2); margin: 0 4px 24px; max-width: 70ch; }

.cta-band { background: var(--ink); color: #fff; border-radius: var(--radius-xl); padding: clamp(48px, 8vw, 96px) clamp(24px, 6vw, 80px); text-align: center; }
.cta-band h2 { font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -.035em; line-height: 1.08; max-width: 20ch; margin: 0 auto; }
.cta-band p { color: rgba(255, 255, 255, .72); font-size: 19px; max-width: 560px; margin: 18px auto 0; }

/* Galerie */
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.cols-3 p { color: var(--muted); }
.cols-3 .h4 { margin-bottom: 8px; }
.explain { margin-top: 0; }
.explain > div { border-top: 2px solid var(--ink); padding-top: 18px; }
.explain-n { display: block; font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -.02em; margin-bottom: 10px; color: var(--ink); }
.explain ul { list-style: none; display: flex; flex-direction: column; gap: 8px; color: var(--muted); }
.explain li { padding-left: 18px; position: relative; }
.explain li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.related { display: flex; align-items: center; gap: 18px; padding: 22px 24px; background: var(--pearl); border-radius: var(--radius-lg); text-decoration: none; transition: background var(--t), box-shadow var(--t); }
.related:hover { background: #fff; box-shadow: var(--shadow); }
.related > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.related .eyebrow { margin: 0 0 2px; }

/* Solutions */
.sol-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.sol-row { display: grid; grid-template-columns: 40px 48px 1fr auto; align-items: center; gap: 18px; padding: 24px 8px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background var(--t); border-radius: 0; }
.sol-row:hover { background: var(--pearl); }
.sol-n { font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.sol-row .card-ic { background: var(--pearl); }
.sol-t { display: flex; flex-direction: column; }
.sol-t strong { font-size: 22px; letter-spacing: -.02em; font-family: var(--font-display); }
.sol-t span { color: var(--muted); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.checks { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks .ic { flex: none; margin-top: 3px; color: var(--accent); }
.usecase { background: var(--pearl); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); }
.ba { display: grid; gap: 14px; margin-top: 18px; }
.ba div { background: #fff; border-radius: var(--radius); padding: 16px 18px; }
.ba p { margin: 6px 0 0; color: var(--ink-2); font-size: 16px; }
.ba-l { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ba-after { color: var(--accent-ink); }
.table-wrap { overflow-x: auto; margin-top: 40px; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.compare { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 560px; }
.compare caption { text-align: left; padding: 18px 20px 4px; font-weight: 600; font-size: 19px; font-family: var(--font-display); }
.compare th, .compare td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: 13px; color: var(--muted); font-weight: 600; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare td:last-child { font-weight: 600; }
.compare td:nth-child(2) { color: var(--muted); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.form-card { background: var(--pearl); border-radius: var(--radius-xl); padding: clamp(20px, 3.4vw, 40px); }
.form { display: flex; flex-direction: column; gap: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label, .field > span, .field-group legend { font-weight: 600; font-size: 15px; }
.field input, .field select, .field textarea { width: 100%; font-size: 16px; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; min-height: 50px; transition: border-color var(--t), box-shadow var(--t); }
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #a9a9b1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(194, 65, 12, .35); }
.field [aria-invalid="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.opt { font-weight: 400; color: var(--muted); font-size: 14px; margin-left: 4px; }
.hint { font-size: 14px; color: var(--muted); margin: 0; }
.err { font-size: 14px; color: var(--accent-ink); font-weight: 600; margin: 0; display: flex; gap: 6px; }
.err::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; display: grid; place-items: center; margin-top: 1px; }
.field-group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.field-group legend { margin-bottom: 10px; padding: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 15px; font-weight: 500; transition: background var(--t), color var(--t), border-color var(--t); }
.chip input:hover + span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.form-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-radius: 14px; padding: 6px 6px 6px 16px; font-size: 15px; box-shadow: inset 0 0 0 1px #f3d3c2; }
.form-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.form-foot .hint a { color: var(--ink); }
.form-errors { background: var(--accent-soft); border-radius: 14px; padding: 14px 18px; box-shadow: inset 0 0 0 1px #f3d3c2; }
.form-errors p { margin: 0 0 6px; }
.form-errors ul { padding-left: 20px; }
.form-errors a { color: var(--accent-ink); font-weight: 600; }
.form-status { border-radius: 18px; padding: 22px 24px; }
.form-status h2 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 8px; }
.form-status p { margin: 0 0 8px; }
.form-status.is-ok { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.form-status.is-error { background: var(--accent-soft); box-shadow: inset 0 0 0 1px #f3d3c2; }
.st-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; margin-bottom: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-aside { padding-top: 8px; }
.contact-aside .h4 { margin-bottom: 14px; }
.mini-steps { list-style: none; counter-reset: m; display: flex; flex-direction: column; gap: 16px; }
.mini-steps li { counter-increment: m; position: relative; padding-left: 44px; display: flex; flex-direction: column; }
.mini-steps li::before { content: counter(m); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--pearl); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.mini-steps span { color: var(--muted); font-size: 15px; }
.cal-box { background: var(--pearl); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 28px; }
.cal-box .card-ic { margin-bottom: 14px; }
.cal-box p { color: var(--muted); font-size: 15px; }
.aside-mail { margin-top: 28px; font-size: 15px; color: var(--muted); }
.aside-mail a { color: var(--ink); font-weight: 600; }
.result-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin-bottom: 24px; }
.result-ic.is-ok { background: var(--ink); color: #fff; }
.result-ic.is-err { background: var(--accent-soft); color: var(--accent-ink); }

.prose h2 { font-size: 22px; margin: 36px 0 10px; }
.prose p { color: var(--ink-2); }
.todo { background: var(--accent-soft); color: var(--accent-ink); padding: 0 4px; border-radius: 4px; font-weight: 600; }

/* Pied de page */
.site-footer { background: var(--pearl); margin-top: clamp(40px, 6vw, 80px); padding: 64px 0 32px; font-size: 15px; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.ft-brand p { color: var(--muted); margin: 14px 0 0; max-width: 34ch; }
.ft-coords a { color: var(--ink); }
.ft-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ft-cols h2 { font-size: 13px; font-family: var(--font); font-weight: 600; color: var(--muted); letter-spacing: .02em; text-transform: uppercase; margin-bottom: 12px; }
.ft-cols ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ft-cols a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.ft-cols a:hover { color: var(--ink); text-decoration: underline; }
.ft-legal { color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); margin: 40px 0 0; padding-top: 20px; }

/* Apparition discrète (seulement si JS et pas de mouvement réduit) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .cards-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-5 .card, .cards-5 .card:nth-child(4), .cards-5 .card:nth-child(5) { grid-column: auto; }
  .cards-5 .card:last-child { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nav { display: none; position: absolute; top: var(--hdr); left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 12px 16px 20px; gap: 8px; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .25); }
  .nav ul { flex-direction: column; gap: 2px; }
  .nav ul a { min-height: 52px; font-size: 18px; padding: 0 14px; border-radius: 14px; width: 100%; }
  .nav-cta { margin: 8px 0 0; min-height: 52px; }
  .menu-btn { display: inline-flex; }
  .site-header.is-open .nav { display: flex; }
  .site-header.is-open .menu-open { display: none; }
  .site-header.is-open .menu-close { display: block; }
  .no-js .nav { display: flex; position: static; box-shadow: none; border: 0; padding: 0 0 12px; }
  .no-js .hdr { flex-wrap: wrap; height: auto; }
  .no-js .menu-btn { display: none; }
  .calc, .split, .contact-grid, .ft-top { grid-template-columns: 1fr; }
  .cols-3 { grid-template-columns: 1fr; gap: 20px; }
  .ex-list-3 { grid-template-columns: 1fr; }
  .contact-aside { order: -1; padding-top: 0; }
  .contact-aside .mini-steps { display: none; }
  .contact-aside .h4:not(.cal-box .h4) { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .hero { padding-top: 48px; }
  .h1 { font-size: clamp(38px, 11vw, 48px); letter-spacing: -.04em; }
  .h1-page { font-size: clamp(32px, 9vw, 42px); }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .stage { border-radius: 24px; padding: 12px; margin: 0 -4px; }
  .stage-head { padding: 6px 6px 0; }
  .stage-hint, .stage-foot { padding: 0 6px; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 22px; }
  .tabs [role="tab"] { padding: 0 10px; border-radius: 18px; }
  .stage-head .badge-demo { display: none; }
  .cards-2, .cards-5, .steps, .ex-list, .grid-2 { grid-template-columns: 1fr; }
  .card { padding: 22px; }
  .sol-row { grid-template-columns: 48px 1fr auto; gap: 14px; padding: 20px 4px; }
  .sol-n { display: none; }
  .faq summary { font-size: 17px; padding: 18px 2px; }
  .cta-band { border-radius: 24px; }
  .ft-cols { grid-template-columns: 1fr 1fr; }
  .form-card { padding: 18px; border-radius: 24px; margin: 0 -4px; }
  .form-foot .btn { width: 100%; }
  .table-wrap { overflow: visible; }
  .compare { min-width: 0; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tr { display: block; border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare th, .compare td { display: block; border: 0; padding: 4px 0; }
  .compare td::before { content: attr(data-label) " : "; color: var(--muted); font-weight: 400; }
}

/* Mouvement réduit : aucune animation ni transition décorative */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .is-hl { animation: none; outline: 2px solid var(--app-ink, var(--accent)); outline-offset: 2px; }
}
@media (forced-colors: active) {
  .btn, .d-btn, .d-chip span, .chip span, .tabs [role="tab"] { border: 1px solid ButtonText; }
}

/* ==========================================================================
   Animations du site (accueil et pages). Toutes décoratives : le contenu est
   lisible sans elles, et la règle « mouvement réduit » de site.css les coupe.
   ========================================================================== */

/* ---------- Héros d'accueil : décor lumineux qui dérive lentement ---------- */
.hero-fx { position: relative; overflow: hidden; isolation: isolate; }
.fx { position: absolute; inset: -10% -10% 0; z-index: -1; pointer-events: none; }
.fx i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
.fx i:nth-child(1) { left: -12%; top: -22%; background: radial-gradient(circle, #FDBA74, transparent 65%); animation: drift1 22s ease-in-out infinite alternate; }
.fx i:nth-child(2) { right: -14%; top: -16%; background: radial-gradient(circle, #C4B5FD, transparent 65%); animation: drift2 26s ease-in-out infinite alternate; }
.fx i:nth-child(3) { left: 28%; top: 30%; width: 36vmax; height: 36vmax; background: radial-gradient(circle, #99F6E4, transparent 65%); opacity: .38; animation: drift3 30s ease-in-out infinite alternate; }
/* Trame de points, estompée vers les bords */
.fx b { position: absolute; inset: 0; background-image: radial-gradient(rgba(17, 17, 19, .13) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 40%, #000 20%, transparent 75%); }
@keyframes drift1 { to { transform: translate(14%, 10%) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-12%, 14%) scale(.92); } }
@keyframes drift3 { to { transform: translate(-18%, -8%) scale(1.15); } }

/* Titre mot à mot, puis texte et boutons */
.h1-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.h1-words .w > span { display: inline-block; animation: wordUp .9s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
@keyframes wordUp { from { transform: translateY(105%); opacity: 0; } to { transform: none; opacity: 1; } }
.fx-in { animation: fadeUp .8s var(--ease) both; animation-delay: calc(var(--d, 0) * 70ms + 120ms); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Ruban défilant des applications ---------- */
.ribbon { margin-top: clamp(40px, 6vw, 64px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.rb-track { display: flex; width: max-content; animation: ribbon 46s linear infinite; }
.ribbon:hover .rb-track, .ribbon:focus-within .rb-track { animation-play-state: paused; }
.rb-set { display: flex; gap: 12px; padding-right: 12px; }
@keyframes ribbon { to { transform: translateX(-50%); } }
.rb-item { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, .78); border: 1px solid var(--line, #e6e6ea); text-decoration: none; color: var(--ink); white-space: nowrap; backdrop-filter: blur(8px); transition: transform var(--t) var(--ease), box-shadow var(--t); }
.rb-item:hover, .rb-item:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.rb-item .d-logo { border-radius: 9px; }
.rb-item > span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.rb-item b { font-size: 14px; letter-spacing: -.01em; }
.rb-item i { font-style: normal; font-size: 12px; color: var(--muted); }

/* ---------- Scène de démo ---------- */
.stage-panel:not([hidden]) { animation: panelIn .5s var(--ease) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.badge-demo { position: relative; padding-left: 26px !important; }
.badge-demo::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

/* ---------- Apparition au défilement : enfants en cascade ---------- */
.cards.reveal, .steps.reveal, .ex-list.reveal, .gallery.reveal { opacity: 1; transform: none; }
.cards.reveal > *, .steps.reveal > *, .ex-list.reveal > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.cards.reveal.is-in > *, .steps.reveal.is-in > *, .ex-list.reveal.is-in > * { opacity: 1; transform: none; }
.reveal.is-in > :nth-child(2) { transition-delay: 70ms; }
.reveal.is-in > :nth-child(3) { transition-delay: 140ms; }
.reveal.is-in > :nth-child(4) { transition-delay: 210ms; }
.reveal.is-in > :nth-child(5) { transition-delay: 280ms; }
.reveal.is-in > :nth-child(6) { transition-delay: 350ms; }
.reveal.is-in > :nth-child(7) { transition-delay: 420ms; }
.reveal.is-in > :nth-child(8) { transition-delay: 490ms; }
.reveal.is-in > :nth-child(9) { transition-delay: 560ms; }
.reveal.is-in > :nth-child(10) { transition-delay: 630ms; }

/* Cartes solutions : l'icône s'anime au survol */
.card { transition: background var(--t), transform .35s var(--ease), box-shadow .35s; }
.card:hover { transform: translateY(-4px); }
.card-ic { transition: transform .45s var(--ease), background .3s, color .3s; }
.card:hover .card-ic { transform: rotate(-8deg) scale(1.08); background: var(--ink); color: #fff; }
.card-more .ic { transition: transform .3s var(--ease); }
.card:hover .card-more .ic { transform: translateX(4px); }

/* Étapes de la méthode : une ligne se trace d'une étape à l'autre */
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 26px; right: 26px; top: -14px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent-mark), #8B5CF6, #14B8A6); transform-origin: left; transform: scaleX(1); }
.steps.reveal::before { transform: scaleX(0); transition: transform 1.4s var(--ease) .2s; }
.steps.reveal.is-in::before { transform: scaleX(1); }
.step-n { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); }
.step { transition: transform .35s var(--ease), box-shadow .35s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
@media (max-width: 860px) { .steps::before { display: none; } }

/* Liste des exemples avec logo d'application */
.ex-item { grid-template-columns: auto 1fr auto; gap: 2px 16px; }
.ex-item > .d-logo { grid-column: 1; grid-row: 1 / span 2; border-radius: 13px; transition: transform .4s var(--ease); }
.ex-item .ex-sector, .ex-item strong { grid-column: 2; }
.ex-item .ex-arrow { grid-column: 3; }
.ex-item:hover > .d-logo { transform: rotate(-6deg) scale(1.06); }
.ex-arrow .ic { transition: transform .3s var(--ease); }
.ex-item:hover .ex-arrow .ic { transform: translateX(3px); }

/* ---------- Pages de démo : logo de l'application qui flotte ---------- */
.page-hero-app { position: relative; overflow: hidden; isolation: isolate; }
.page-hero-app::before { content: ""; position: absolute; z-index: -1; right: -10%; top: 4%; width: 44vmax; height: 44vmax; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--app) 26%, transparent), transparent 58%); filter: blur(20px); animation: drift2 24s ease-in-out infinite alternate; }
.app-badge { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; animation: fadeUp .8s var(--ease) both; }
.app-badge .d-logo { border-radius: 18px; animation: floaty 6s ease-in-out infinite; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 34px -14px var(--app); }
.app-badge > span { display: flex; flex-direction: column; line-height: 1.15; }
.app-badge b { font-size: 20px; letter-spacing: -.02em; }
.app-badge i { font-style: normal; font-size: 13px; color: var(--muted); }
@keyframes floaty { 50% { transform: translateY(-6px) rotate(-2deg); } }
.page-hero .h1, .page-hero .lead, .page-hero .btn-row, .page-hero .eyebrow { animation: fadeUp .8s var(--ease) both; }
.page-hero .eyebrow { animation-delay: .05s; }
.page-hero .h1 { animation-delay: .12s; }
.page-hero .lead { animation-delay: .22s; }
.page-hero .btn-row { animation-delay: .32s; }

/* ---------- Galerie : les cartes réapparaissent en douceur au filtrage ---------- */
.g-card:not([hidden]) { animation: cardIn .45s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.g-card { transition: transform .35s var(--ease), box-shadow .35s; }
.g-card:hover { transform: translateY(-4px); }

/* ---------- Bandeau d'appel final : lueur qui tourne ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-fx { position: absolute; inset: -60%; z-index: -1; background: conic-gradient(from 0deg, transparent 0 55%, rgba(240, 106, 29, .38) 65%, rgba(139, 92, 246, .38) 75%, rgba(20, 184, 166, .3) 85%, transparent 95%); filter: blur(60px); animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* Boutons : légère flèche animée au survol */
.btn { transition: transform .25s var(--ease), background var(--t), color var(--t), box-shadow var(--t); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }

/* Mouvement réduit : décor figé, ruban en liste qui passe à la ligne */
@media (prefers-reduced-motion: reduce) {
  .fx i, .cta-fx, .page-hero-app::before { animation: none; }
  .rb-track { animation: none; width: auto; }
  .rb-set { flex-wrap: wrap; justify-content: center; }
  .rb-set[aria-hidden] { display: none; }
  .ribbon { -webkit-mask-image: none; mask-image: none; }
  .cards.reveal > *, .steps.reveal > *, .ex-list.reveal > * { opacity: 1; transform: none; }
  .steps.reveal::before { transform: none; }
}

/* ==========================================================================
   Prototypes : kit visuel commun (chaque application a sa couleur --app)
   Les règles responsive utilisent des container queries sur .d-app :
   le rendu s'adapte à la place disponible (accueil, page dédiée, mobile).
   ========================================================================== */
.d-app {
  --app: #6366F1; --app-ink: #4338CA;
  --app-soft: color-mix(in srgb, var(--app) 13%, #fff);
  --app-line: color-mix(in srgb, var(--app) 35%, #fff);
  --canvas: #F6F7F9;
  --t-ok: #15803D; --t-ok-s: #DCFCE7; --t-ok-c: #22C55E;
  --t-warn: #B45309; --t-warn-s: #FEF3C7; --t-warn-c: #F59E0B;
  --t-danger: #B91C1C; --t-danger-s: #FEE2E2; --t-danger-c: #EF4444;
  --t-blue: #1D4ED8; --t-blue-s: #DBEAFE; --t-blue-c: #3B82F6;
  --t-violet: #6D28D9; --t-violet-s: #EDE9FE; --t-violet-c: #8B5CF6;
  display: grid; grid-template-columns: 1fr;
  background: #fff; border-radius: 22px; border: 1px solid #E4E6EB; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 24px 60px -24px rgba(15, 23, 42, .28);
  font-size: 15px; line-height: 1.45; color: #0F172A; text-align: left;
}
.d-app.has-side { grid-template-columns: 216px minmax(0, 1fr); }
.d-app :focus-visible { outline: 3px solid var(--app-ink); outline-offset: 2px; }

/* Barre latérale (version complète) */
.d-side { background: linear-gradient(180deg, color-mix(in srgb, var(--app) 6%, #FAFAFB), #FAFAFB 40%); border-right: 1px solid #ECEEF2; padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; }
.d-brand, .d-top-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.d-side .d-brand { padding: 6px; margin: -2px -2px 0; border-radius: 12px; background: #fff; border: 1px solid #ECEEF2; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.d-sw { margin-left: auto; flex: none; color: #94A3B8; }
.d-logo { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; background: radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--app) 70%, #fff), var(--app) 45%, var(--app-ink)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -6px var(--app); }
.d-brand-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.d-brand-t b { font-size: 15px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-brand-t i { font-style: normal; font-size: 12px; color: #566173; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-search { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border-radius: 10px; background: #fff; border: 1px solid #E6E8EE; color: #566173; font-size: 13px; }
.d-search kbd { margin-left: auto; font: 600 12px/1 var(--font, system-ui); color: #566173; background: #F1F3F6; border: 1px solid #E2E5EA; border-radius: 6px; padding: 3px 5px; }
.d-nav-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748B; padding: 6px 10px 0; }
.d-nav { list-style: none; display: flex; flex-direction: column; gap: 2px; margin-top: -6px; }
.d-nav li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: #475569; font-size: 14px; font-weight: 500; }
.d-nav li.is-on { background: #fff; color: var(--app-ink); font-weight: 650; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), inset 0 0 0 1px #ECEEF2; }
.d-nav li.is-on .ic { color: var(--app); }
.d-nav em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; background: var(--app-ink); color: #fff; border-radius: 999px; padding: 1px 7px; }
.d-side-note { margin-top: auto; display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.35; color: #566173; background: var(--app-soft); border-radius: 12px; padding: 10px; }
.d-side-note .ic { flex: none; color: var(--app-ink); }
.d-user { display: flex; align-items: center; gap: 10px; padding: 10px 4px 2px; border-top: 1px solid #ECEEF2; min-width: 0; }
.d-user > span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.d-user b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-user i { font-style: normal; font-size: 12px; color: #566173; }
.d-crumb { display: inline-flex; align-items: center; gap: 4px; font-size: 12px !important; font-weight: 600; color: #64748B; }
.d-crumb .ic { color: #94A3B8; }
.d-bell { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #475569; border: 1px solid #ECEEF2; }
.d-bell i { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 0 2px #fff; }
.av-ph { object-fit: cover; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px #fff; background: #E2E8F0; display: inline-block; }
.av-ph.no-ring { box-shadow: none; }
.av-stack { display: inline-flex; }
.av-stack > * + * { margin-left: -8px; }
.d-photo { display: block; width: 100%; object-fit: cover; background: #E2E8F0; }

/* Barre du haut */
.d-main { min-width: 0; display: flex; flex-direction: column; container: app / inline-size; }
.d-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 20px; border-bottom: 1px solid #ECEEF2; background: #fff; flex-wrap: wrap; }
.has-side .d-top-brand { display: none; }
.d-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.d-title b { font-size: 17px; letter-spacing: -.015em; }
.d-title span { font-size: 13px; color: #566173; }
.d-top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.d-badge { font-size: 12px; font-weight: 600; color: var(--app-ink); background: var(--app-soft); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.d-me { display: inline-flex; }
.d-content { padding: clamp(14px, 2.2vw, 22px); background: var(--canvas); flex: 1; }

.av { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--av); color: #fff; font-weight: 700; letter-spacing: .01em; box-shadow: 0 0 0 2px #fff; }

/* Indicateurs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpis:empty { display: none; }
.kpi { position: relative; background: #fff; border: 1px solid #E8EAEF; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; transition: box-shadow .3s, border-color .3s; overflow: hidden; }
.kpi-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kpi-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
.kpi-app { background: var(--app-soft); color: var(--app-ink); }
.kpi-ok { background: var(--t-ok-s); color: var(--t-ok); }
.kpi-warn { background: var(--t-warn-s); color: var(--t-warn); }
.kpi-danger { background: var(--t-danger-s); color: var(--t-danger); }
.kpi-blue { background: var(--t-blue-s); color: var(--t-blue); }
.kpi-violet { background: var(--t-violet-s); color: var(--t-violet); }
.kpi-d { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.kpi-d.is-up { background: var(--t-ok-s); color: var(--t-ok); }
.kpi-d.is-down { background: var(--t-danger-s); color: var(--t-danger); }
.kpi-v { font-size: 25px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-l { font-size: 13px; color: #566173; }
.kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.kpi .spark { flex: none; margin-bottom: 2px; }
.spark-a { fill: var(--app); opacity: .14; }
.spark-l { fill: none; stroke: var(--app); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark-d { fill: var(--app); }
.kpi.is-hl { border-color: var(--app-line); box-shadow: 0 0 0 3px var(--app-soft); }

/* Pastilles */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.4; flex: none; }
.pill i, .pill-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.pill-app { background: var(--app-soft); color: var(--app-ink); }
.pill-ok { background: var(--t-ok-s); color: var(--t-ok); }
.pill-warn { background: var(--t-warn-s); color: var(--t-warn); }
.pill-danger { background: var(--t-danger-s); color: var(--t-danger); }
.pill-blue { background: var(--t-blue-s); color: var(--t-blue); }
.pill-violet { background: var(--t-violet-s); color: var(--t-violet); }
.pill-neutral { background: #F1F5F9; color: #334155; }
.pill-dark { background: #0F172A; color: #fff; }
i.pill-dot { background: currentColor; }
i.pill-dot.pill-app { color: var(--app); } i.pill-dot.pill-ok { color: var(--t-ok-c); } i.pill-dot.pill-blue { color: var(--t-blue-c); } i.pill-dot.pill-neutral { color: #94A3B8; }
.sim { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #566173; border: 1px dashed #CBD5E1; border-radius: 6px; padding: 1px 6px; vertical-align: 1px; background: #fff; }

.donut { position: relative; flex: none; }
.donut svg circle { transition: stroke-dasharray .6s var(--ease), stroke-dashoffset .6s var(--ease); }
.donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; }
.donut-c b { font-size: 14px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.donut-c i { font-style: normal; font-size: 12px; color: #566173; margin-top: 2px; }
.prog { display: block; height: 6px; border-radius: 6px; background: #EEF0F3; overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 6px; transition: width .5s var(--ease); }
.prog-app i { background: var(--app); } .prog-ok i { background: var(--t-ok-c); } .prog-warn i { background: var(--t-warn-c); } .prog-danger i { background: var(--t-danger-c); }

/* Boutons */
.d-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 15px; transition: background var(--t), border-color var(--t), transform .12s, box-shadow var(--t); }
.d-btn:active { transform: scale(.98); }
.d-btn-primary { background: var(--app-ink); color: #fff; box-shadow: 0 8px 18px -10px var(--app-ink); }
.d-btn-primary:hover { background: color-mix(in srgb, var(--app-ink) 85%, #000); }
.d-btn-secondary { background: #fff; border-color: #D5D9E0; color: #0F172A; }
.d-btn-secondary:hover { border-color: var(--app-ink); color: var(--app-ink); }
.d-btn-ghost { background: transparent; color: #334155; }
.d-btn-ghost:hover { background: #EEF0F3; }
.d-btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.d-btn[disabled] { opacity: .45; cursor: not-allowed; }
.d-icon-btn { width: 44px; height: 44px; flex: none; border-radius: 999px; border: 1px solid #D5D9E0; background: #fff; display: grid; place-items: center; color: #0F172A; transition: background var(--t), border-color var(--t), color var(--t); }
.d-icon-btn:hover:not([disabled]) { background: var(--app-ink); color: #fff; border-color: var(--app-ink); }
.d-icon-app { background: var(--app-soft); border-color: transparent; color: var(--app-ink); }
.d-icon-btn[disabled] { opacity: .35; cursor: not-allowed; }
.d-icon-sm { width: 36px; height: 36px; }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.d-actions-col { flex-direction: column; align-items: stretch; }
.d-actions-col .d-btn { justify-content: flex-start; }
.d-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; margin-top: 6px; color: inherit; }

/* Formulaires et choix */
.d-form { display: flex; flex-direction: column; gap: 12px; }
.d-form > .d-btn-primary { align-self: flex-start; }
.d-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #475569; font-weight: 500; }
.d-field select, .d-field textarea, .d-field input { font-size: 16px; color: #0F172A; background: #fff; border: 1px solid #D5D9E0; border-radius: 12px; padding: 10px 12px; min-height: 44px; width: 100%; }
.d-field textarea { resize: vertical; }
.d-field :focus-visible { border-color: var(--app-ink); }
.d-check { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 44px; cursor: pointer; }
.d-check input { width: 20px; height: 20px; accent-color: var(--app-ink); flex: none; }
.d-chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.d-chips legend { font-size: 13px; color: #475569; font-weight: 500; margin-bottom: 6px; padding: 0; }
.d-chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.d-chip { position: relative; }
.d-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.d-chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid #D5D9E0; font-size: 14px; font-weight: 500; transition: background var(--t), color var(--t), border-color var(--t); }
.d-chip input:hover + span { border-color: var(--app-ink); }
.d-chip input:checked + span { background: var(--app-ink); color: #fff; border-color: var(--app-ink); }
.d-chip input:checked + span em { color: #fff; background: rgba(255, 255, 255, .2); }
.d-chip input:focus-visible + span { outline: 3px solid var(--app-ink); outline-offset: 2px; }
.d-chip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--t); }
.d-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #566173; margin: 0 0 10px; font-family: var(--font); }

/* Cartes, panneaux, listes */
.d-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.d-split-wide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.d-list { display: flex; flex-direction: column; gap: 8px; }
.d-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; text-align: left; background: #fff; border: 1px solid #E4E6EB; border-radius: 14px; padding: 12px; min-height: 44px; transition: border-color var(--t), box-shadow var(--t), transform var(--t); color: inherit; }
.d-card:hover { border-color: var(--app-line); box-shadow: 0 6px 18px -12px rgba(15, 23, 42, .35); }
.d-card.is-sel { border-color: var(--app-ink); box-shadow: 0 0 0 1px var(--app-ink), 0 8px 20px -14px var(--app-ink); }
.d-card[aria-disabled="true"] { opacity: .6; }
.d-card-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.d-card-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.d-card-t strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-card-t span { color: #566173; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-card-meta { display: flex; justify-content: space-between; color: #566173; font-size: 12px; }
.d-card-meta span { display: inline-flex; align-items: center; gap: 3px; }
.d-ref { font-size: 12px; color: #566173; font-variant-numeric: tabular-nums; font-weight: 600; }
.d-panel { background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 16px; min-width: 0; }
.d-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.d-panel-t { flex: 1; min-width: 0; }
.d-panel h3 { font-size: 18px; letter-spacing: -.02em; margin-top: 1px; }
.d-panel-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--app-soft); color: var(--app-ink); }
.d-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0 0 12px; background: var(--canvas); border-radius: 12px; padding: 12px; }
.d-dl div { min-width: 0; }
.d-dl dt { font-size: 12px; color: #566173; }
.d-dl dd { margin: 0; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 4px; }
.d-quote { display: flex; gap: 8px; font-size: 14px; color: #334155; background: var(--app-soft); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; }
.d-quote .ic { flex: none; margin-top: 2px; color: var(--app-ink); }
.d-done { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--canvas); }
.d-done .ic { flex: none; margin-top: 2px; }
.d-done div { display: flex; flex-direction: column; }
.d-done span { color: #566173; font-size: 14px; }
.d-done-ok { background: var(--t-ok-s); } .d-done-ok .ic { color: var(--t-ok); }
.d-done-blue { background: var(--t-blue-s); } .d-done-blue .ic { color: var(--t-blue); }
.d-done-violet { background: var(--t-violet-s); } .d-done-violet .ic { color: var(--t-violet); }
.d-done span { color: #334155; }
.d-history { margin-top: 14px; }
.d-history h4 { font-size: 13px; color: #566173; font-weight: 600; margin-bottom: 8px; font-family: var(--font); letter-spacing: 0; }
.d-history ol { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #334155; }
.d-history li { position: relative; padding-left: 18px; }
.d-history li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--app); box-shadow: 0 0 0 3px var(--app-soft); }
.d-empty { color: #566173; font-size: 14px; margin: 4px 0; }
.d-conflict { background: #FFF7F7; border-color: #FBCACA; }
.d-conflict-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.d-conflict-head h3 { font-size: 16px; }
.d-conflict-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--t-danger-s); color: var(--t-danger); flex: none; }
.d-conflict p { font-size: 14px; }

.d-flash { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; background: #0F172A; color: #fff; animation: pop .35s var(--ease); box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .6); }
.d-flash-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--t-ok-c); color: #fff; }
.d-flash p { margin: 2px 0 0; font-size: 14px; color: rgba(255, 255, 255, .82); }
.d-flash .d-link { color: #fff; }
.d-flash-warn { background: #FFFBEB; color: #0F172A; box-shadow: inset 0 0 0 1px #FDE68A; }
.d-flash-warn .d-flash-ic { background: var(--t-warn-c); }
.d-flash-warn p { color: #334155; }

.is-hl { animation: hl 1.6s var(--ease); }
@keyframes hl { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--app, #c2410c) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Barre latérale masquée quand la place manque (container sur le bloc démo) */
.demo { container: demo / inline-size; }
@container demo (max-width: 900px) {
  .d-app.has-side { grid-template-columns: minmax(0, 1fr); }
  .d-side { display: none; }
  .has-side .d-top-brand { display: flex; }
}

/* ---------- Bâtiment ---------- */
.bt-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bt-col { background: #EEF0F4; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bt-col h4 { font-size: 13px; font-family: var(--font); letter-spacing: 0; display: flex; align-items: center; gap: 8px; color: #334155; padding: 2px 2px 4px; }
.bt-col h4 i { width: 8px; height: 8px; border-radius: 50%; }
.bt-col h4 span { margin-left: auto; color: #566173; font-weight: 600; background: #fff; border-radius: 999px; padding: 0 8px; }
.bt-warn h4 i { background: var(--t-warn-c); } .bt-blue h4 i { background: var(--t-blue-c); } .bt-violet h4 i { background: var(--t-violet-c); } .bt-ok h4 i { background: var(--t-ok-c); }
.bt-col .d-card { padding: 10px; gap: 6px; }
.bt-col .d-card-t span { white-space: normal; }

/* ---------- Commerce ---------- */
.cm-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cm-left, .cm-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cm-grid-tiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cm-tile { position: relative; background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 12px; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "th info btn" "stock stock stock" "bar bar bar"; gap: 8px 10px; align-items: center; }
.cm-thumb { grid-area: th; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--p) 75%, #fff), var(--p)); }
.cm-info { grid-area: info; display: flex; flex-direction: column; min-width: 0; }
.cm-info strong { font-size: 14px; line-height: 1.25; }
.cm-price { font-size: 14px; font-weight: 700; color: var(--app-ink); }
.cm-tile .d-icon-btn { grid-area: btn; }
.cm-stock { grid-area: stock; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cm-min { font-size: 12px; color: #566173; }
.cm-tile .prog { grid-area: bar; }
.cm-badge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; border-radius: 999px; background: var(--app-ink); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; box-shadow: 0 0 0 2px #fff; }
.cm-ticket, .cm-sugg, .cm-log, .cm-chart { background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 14px; }
.cm-ticket { background: #fff; border-top: 4px solid var(--app); }
.cm-ticket-h { display: flex; justify-content: space-between; align-items: baseline; }
.cm-ticket-h span { font-size: 13px; color: #566173; }
.cm-lines { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cm-lines li { display: grid; grid-template-columns: auto 1fr auto 76px; align-items: center; gap: 8px; font-size: 14px; }
.cm-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--p); }
.cm-sum { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cm-qty { display: inline-flex; align-items: center; gap: 6px; }
.cm-qty b { min-width: 18px; text-align: center; }
.cm-empty { padding: 10px 0; }
.cm-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed #CBD5E1; padding-top: 12px; }
.cm-total strong { font-size: 26px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cm-pay > .d-btn-primary { align-self: stretch; min-height: 50px; font-size: 16px; }
.cm-sugg-card { background: #FFFBEB; border-radius: 12px; padding: 12px; border: 1px solid #FDE68A; }
.cm-sugg-card + .cm-sugg-card { margin-top: 8px; }
.cm-sugg-card.is-done { background: var(--t-ok-s); border-color: #BBF7D0; }
.cm-sugg-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cm-sugg-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--t-warn-c); color: #fff; }
.is-done .cm-sugg-ic { background: var(--t-ok-c); }
.cm-sugg-card p { font-size: 14px; margin: 0 0 4px; }
.cm-sup { color: #475569; display: flex; align-items: center; gap: 4px; }
.cm-sim { margin-top: 8px !important; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding-top: 6px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.bar i { width: 100%; max-width: 42px; border-radius: 8px 8px 4px 4px; background: color-mix(in srgb, var(--app) 30%, #fff); transition: height .5s var(--ease); }
.bar.is-now i { background: linear-gradient(180deg, var(--app), var(--app-ink)); }
.bar b { font-size: 12px; color: #566173; font-weight: 600; }
.cm-log ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cm-log li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; color: #566173; }
.cm-log b { color: #0F172A; font-variant-numeric: tabular-nums; }

/* ---------- Services terrain ---------- */
.tf-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; }
.tf-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.tf-side > .d-panel:only-child { grid-column: 1 / -1; }
.tf-todo { display: flex; flex-direction: column; gap: 8px; }
.tf-timeline { border: 1px solid #E4E6EB; border-radius: 16px; overflow: hidden; background: #fff; }
.tf-hours { display: grid; grid-template-columns: 170px 1fr; height: 30px; border-bottom: 1px solid #ECEEF2; background: #FAFAFB; }
.tf-hours div { position: relative; margin: 0 16px; }
.tf-hours i { position: absolute; top: 7px; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 12px; color: #566173; font-variant-numeric: tabular-nums; }
.tf-row { display: grid; grid-template-columns: 170px 1fr; min-height: 78px; border-bottom: 1px solid #ECEEF2; }
.tf-row:last-child { border-bottom: 0; }
.tf-team { padding: 10px 12px; display: flex; align-items: center; gap: 10px; border-right: 1px solid #ECEEF2; background: #FAFAFB; }
.tf-team > span { display: flex; flex-direction: column; min-width: 0; }
.tf-team strong { font-size: 14px; }
.tf-team span span { font-size: 12px; color: #566173; }
.tf-track { position: relative; margin: 0 16px; background-image: repeating-linear-gradient(90deg, #ECEEF2 0 1px, transparent 1px 20%); }
.tf-job { position: absolute; top: 10px; bottom: 10px; background: color-mix(in srgb, var(--t) 14%, #fff); border-left: 4px solid var(--t); color: #0F172A; border-radius: 10px; padding: 6px 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.tf-job b { font-size: 12px; font-weight: 700; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: color-mix(in srgb, var(--t) 70%, #000); }
.tf-job i { font-style: normal; font-size: 12px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-job.is-clash { background: var(--t-danger-s); border-left-color: var(--t-danger-c); }
.tf-job.is-clash b { color: var(--t-danger); }
.tf-job.is-conflict { background: repeating-linear-gradient(135deg, #FEE2E2 0 8px, #FECACA 8px 16px); border-left-color: var(--t-danger-c); }
.tf-job.is-conflict b { color: var(--t-danger); }
.tf-job.is-ghost { background: rgba(255, 255, 255, .95); border: 2px dashed var(--t-danger-c); top: 6px; bottom: 6px; z-index: 2; }
.tf-job.is-ghost b { color: var(--t-danger); }
.tf-list { display: none; }

/* ---------- Agence ---------- */
.ag-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 14px 16px; }
.ag-proj { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ag-proj h3 { font-size: 18px; letter-spacing: -.02em; }
.ag-team { display: flex; align-items: center; gap: 2px; font-size: 13px; color: #566173; margin-top: 4px; }
.ag-team .av + .av { margin-left: -6px; }
.ag-team .av:last-of-type { margin-right: 6px; }
.ag-progress { border-radius: 50%; }
.ag-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; counter-reset: s; }
.ag-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #566173; background: #fff; border: 1px solid #E4E6EB; border-radius: 12px; padding: 8px 10px; min-width: 0; }
.ag-steps li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #EEF0F3; font-size: 12px; flex: none; }
.ag-steps li.is-done { color: #0F172A; }
.ag-steps li.is-done span { background: var(--t-ok-c); color: #fff; }
.ag-steps li.is-now { border-color: var(--app-ink); color: var(--app-ink); background: var(--app-soft); }
.ag-steps li.is-now span { background: var(--app-ink); color: #fff; }
.ag-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.ag-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ag-list { display: flex; flex-direction: column; gap: 8px; }
.ag-list .d-card .pill { align-self: flex-start; }
.ag-kind { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; }
.ag-kind-charte { background: #7d9a7e; } .ag-kind-maquette { background: var(--app); } .ag-kind-produits { background: #C8743C; } .ag-kind-textes { background: #94A3B8; }
.ag-panel .ag-form { margin-top: 12px; }
.ag-panel .d-form .d-btn-secondary { align-self: flex-start; }
.ag-thread { list-style: none; display: flex; flex-direction: column; gap: 10px; border-radius: 12px; }
.ag-thread li { display: flex; gap: 8px; align-items: flex-start; max-width: 94%; }
.ag-thread li > div { background: var(--canvas); border-radius: 4px 14px 14px 14px; padding: 8px 12px; font-size: 14px; }
.ag-thread li.is-me { align-self: flex-end; flex-direction: row-reverse; }
.ag-thread li.is-me > div { background: var(--app-ink); color: #fff; border-radius: 14px 4px 14px 14px; }
.ag-thread b { font-size: 12px; display: block; opacity: .75; }
.ag-thread p { margin: 2px 0 0; }
.ag-activity { background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 14px; }
.ag-activity ol { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: #334155; }
.ag-activity li { position: relative; padding-left: 16px; }
.ag-activity li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--app); }
.ag-pv { height: 170px; border-radius: 14px; background: #FBF7F1; border: 1px solid #EFE6D8; margin-bottom: 14px; padding: 12px; display: flex; gap: 8px; overflow: hidden; }
.ag-pv-page { flex-direction: column; }
.ag-pv-nav { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ag-pv-nav b { font-family: Georgia, serif; font-size: 15px; color: #2b2622; margin-right: auto; }
.ag-pv-nav i { height: 6px; width: 30px; border-radius: 3px; background: #DCCFBF; }
.ag-pv-nav em { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: #4A654B; padding: 3px 8px; border-radius: 999px; }
.ag-pv-hero { flex: 1; border-radius: 10px; background: linear-gradient(120deg, rgba(43, 38, 34, .72), rgba(43, 38, 34, .25)), linear-gradient(140deg, #C8743C, #E8C9A0); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; }
.ag-pv-hero strong { font-family: Georgia, serif; font-size: 17px; line-height: 1.15; }
.ag-pv-hero span { font-size: 11px; opacity: .9; }
.ag-pv-cards { display: flex; gap: 6px; height: 26px; }
.ag-pv-cards i { flex: 1; border-radius: 6px; background: #EADFCF; }
.ag-pv-charte span { flex: 1; border-radius: 10px; }
.ag-pv-charte b { flex: 1.2; display: grid; place-items: center; font-size: 44px; font-family: Georgia, serif; color: #2b2622; }
.ag-pv-text { flex-direction: column; justify-content: center; }
.ag-pv-text i { height: 8px; border-radius: 4px; background: #E6DCCD; }
.ag-pv-text i:nth-child(2) { width: 85%; } .ag-pv-text i:nth-child(4) { width: 60%; }
.ag-pv-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.ag-pv-grid i { border-radius: 10px; background: linear-gradient(160deg, #F3E3C8, #D9A86C); }

/* ---------- Restauration ---------- */
.rs-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rs-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rs-room { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; background: #FFF8F1 radial-gradient(circle at 1px 1px, #F1E4D6 1px, transparent 0) 0 0 / 22px 22px; border: 1px solid #EFE2D2; overflow: hidden; }
.rs-zone { position: absolute; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5F4A37; background: #F4E6D6; border-radius: 10px; display: grid; place-items: center; }
.rs-bar { left: 4%; right: 4%; bottom: 4%; height: 9%; }
.rs-door { right: 0; top: 40%; width: 6%; height: 14%; border-radius: 10px 0 0 10px; writing-mode: vertical-rl; }
.rs-t { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border: 2px solid #CBD5E1; background: #fff; color: #0F172A; transition: transform .15s, background .2s, border-color .2s, box-shadow .2s; min-width: 44px; min-height: 44px; padding: 2px; }
.rs-t:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(15, 23, 42, .5); }
.rs-t b { font-size: 15px; line-height: 1; }
.rs-t i { font-style: normal; font-size: 12px; color: #566173; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-round { width: 11%; aspect-ratio: 1; border-radius: 50%; }
.rs-rect { width: 15%; aspect-ratio: 1.3; border-radius: 12px; }
.rs-long { width: 22%; aspect-ratio: 2; border-radius: 12px; }
.rs-big { width: 18%; aspect-ratio: 1; border-radius: 50%; }
.rs-t.is-free { border-color: #86EFAC; background: #F0FDF4; }
.rs-t.is-fit { border-color: var(--t-ok-c); border-style: solid; box-shadow: 0 0 0 4px #BBF7D0; }
.rs-t.is-res { border-color: var(--app); background: var(--app-soft); }
.rs-t.is-res i { color: var(--app-ink); font-weight: 600; }
.rs-t.is-occ { border-color: #0F172A; background: #0F172A; color: #fff; }
.rs-t.is-occ i { color: rgba(255, 255, 255, .8); }
.rs-t.is-sugg { box-shadow: 0 0 0 4px #BBF7D0, 0 0 0 7px var(--t-ok-c); }
.rs-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: #475569; }
.rs-legend li { display: flex; align-items: center; gap: 6px; }
.rs-legend i { width: 12px; height: 12px; border-radius: 4px; border: 2px solid #CBD5E1; }
.rs-legend .is-free { background: #F0FDF4; border-color: #86EFAC; } .rs-legend .is-fit { border-color: var(--t-ok-c); box-shadow: 0 0 0 2px #BBF7D0; }
.rs-legend .is-res { background: var(--app-soft); border-color: var(--app); } .rs-legend .is-occ { background: #0F172A; border-color: #0F172A; }
.rs-time { font-weight: 700; font-size: 13px; color: var(--app-ink); background: var(--app-soft); border-radius: 8px; padding: 4px 8px; flex: none; font-variant-numeric: tabular-nums; }
.rs-hint { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; color: #334155; margin: 0; }
.rs-hint .ic { flex: none; margin-top: 2px; color: var(--app-ink); }
.rs-hint em { display: block; font-style: normal; color: #566173; }
.rs-panel .d-panel-head { margin-bottom: 10px; }

/* ---------- Immobilier ---------- */
.dpe { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; border-radius: 6px; padding: 2px 7px; background: var(--dpe); letter-spacing: .02em; }
.im-props { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.im-card { display: flex; flex-direction: column; text-align: left; padding: 0; background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; overflow: hidden; color: inherit; transition: border-color var(--t), box-shadow var(--t); }
.im-card:hover { box-shadow: 0 10px 24px -16px rgba(15, 23, 42, .45); }
.im-card.is-sel { border-color: var(--app-ink); box-shadow: 0 0 0 1px var(--app-ink); }
.im-photo { display: block; height: 96px; background: linear-gradient(180deg, var(--s1), var(--s2)); overflow: hidden; }
.im-photo svg { width: 100%; height: 100%; display: block; }
.im-photo.is-big { height: 170px; border-radius: 14px; }
.im-card-b { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.im-card-b strong { font-size: 17px; letter-spacing: -.02em; }
.im-card-b > span { font-size: 13px; color: #566173; }
.im-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.im-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.im-detail { background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 12px; }
.im-detail-b { padding: 12px 4px 4px; }
.im-detail-h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.im-detail-h h3 { font-size: 18px; letter-spacing: -.02em; }
.im-city { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: #475569; }
.im-price { text-align: right; display: flex; flex-direction: column; }
.im-price b { font-size: 22px; letter-spacing: -.03em; color: var(--app-ink); white-space: nowrap; }
.im-price span { font-size: 13px; color: #566173; }
.im-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.im-facts li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: var(--canvas); border-radius: 10px; padding: 6px 10px; }
.im-note { margin-left: auto; }
.im-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.im-buyers, .im-agenda { background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 14px; }
.im-buyers ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.im-buyer { display: grid; grid-template-columns: auto minmax(0, 1fr) 84px; align-items: center; gap: 6px 12px; padding: 10px; border-radius: 12px; border: 1px solid #ECEEF2; }
.im-buyer > .d-btn, .im-buyer > .pill { grid-column: 2 / -1; justify-self: start; }
.im-buyer:hover { background: var(--canvas); }
.im-buyer-t { display: flex; flex-direction: column; min-width: 0; }
.im-buyer-t strong { font-size: 14px; }
.im-buyer-t span { font-size: 12px; color: #566173; }
.im-score { display: flex; flex-direction: column; gap: 4px; }
.im-score b { font-size: 14px; color: #0F172A; font-variant-numeric: tabular-nums; }
.im-agenda ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.im-agenda li { display: flex; align-items: center; gap: 10px; }
.im-slot { font-weight: 700; font-size: 12px; color: var(--app-ink); background: var(--app-soft); border-radius: 8px; padding: 3px 8px; }
.im-agenda .d-ref { margin-left: auto; }

/* ---------- Logistique ---------- */
.lg-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.lg-left, .lg-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lg-map { border-radius: 16px; overflow: hidden; border: 1px solid #E4E6EB; background: #F1F5F9; }
.lg-map svg { display: block; width: 100%; height: auto; }
.lg-pulse circle { animation: pulse 1.4s var(--ease); transform-origin: center; transform-box: fill-box; }
@keyframes pulse { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.lg-list { background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 14px; }
.lg-stops { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.lg-stops li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.lg-stops li.is-en_cours { background: var(--app-soft); }
.lg-stops li.is-livre .lg-t strong { color: #566173; text-decoration: line-through; text-decoration-color: #CBD5E1; }
.lg-n { width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.lg-t { display: flex; flex-direction: column; min-width: 0; }
.lg-t strong { font-size: 14px; }
.lg-t span { font-size: 12px; color: #566173; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-eta { display: flex; align-items: center; gap: 8px; }
.lg-eta b { font-size: 13px; font-variant-numeric: tabular-nums; }
.lg-eta b.is-late { color: var(--t-danger); }
.lg-cur { border-top: 4px solid var(--app); }
.lg-sim { margin: 10px 0 0; }
.lg-fails { display: flex; flex-direction: column; gap: 8px; }
.lg-fail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #FFF7F7; border: 1px solid #FBCACA; border-radius: 14px; padding: 10px 12px; font-size: 14px; }
.lg-fail .ic { color: var(--t-danger); }
.lg-fail > span { flex: 1; min-width: 160px; }

/* ---------- Ressources humaines ---------- */
.rh-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rh-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rh-grid { background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.rh-row { display: grid; grid-template-columns: 112px repeat(10, minmax(0, 1fr)); gap: 3px; align-items: center; border-radius: 10px; }
.rh-row.is-hl { background: var(--app-soft); }
.rh-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rh-who > span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.rh-who b { font-size: 13px; }
.rh-who-h { font-size: 12px; color: #566173; font-weight: 600; line-height: 1.2; align-self: end; padding-bottom: 2px; }
.rh-who i { font-style: normal; font-size: 12px; color: #566173; }
.rh-day { text-align: center; font-size: 12px; font-weight: 600; color: #475569; display: flex; flex-direction: column; border-radius: 8px; padding: 2px 0; }
.rh-day i { font-style: normal; font-size: 12px; color: #566173; font-weight: 700; }
.rh-day.is-short { background: var(--t-danger-s); color: var(--t-danger); }
.rh-day.is-short i { color: var(--t-danger); }
.rh-day.is-wk, .rh-cell.is-wk { margin-left: 6px; }
.rh-cell { height: 28px; border-radius: 7px; background: #F1F5F9; }
.rh-cell.is-cp { background: var(--app); }
.rh-cell.is-rtt { background: var(--t-violet-c); }
.rh-cell.is-form { background: var(--t-blue-c); }
.rh-cell.is-forced { box-shadow: inset 0 0 0 2px var(--t-danger-c); }
.rh-cell.is-preview { background: repeating-linear-gradient(135deg, var(--app) 0 4px, var(--app-soft) 4px 8px); }
.rh-cell.is-preview.is-short { background: repeating-linear-gradient(135deg, var(--t-danger-c) 0 4px, #FEE2E2 4px 8px); }
.rh-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: #475569; }
.rh-legend li { display: flex; align-items: center; gap: 6px; }
.rh-legend i { width: 12px; height: 12px; border-radius: 3px; }
.rh-legend .is-cp { background: var(--app); } .rh-legend .is-rtt { background: var(--t-violet-c); } .rh-legend .is-form { background: var(--t-blue-c); }
.rh-legend .is-preview { background: repeating-linear-gradient(135deg, var(--app) 0 3px, var(--app-soft) 3px 6px); }
.rh-legend .is-short { background: var(--t-danger-s); box-shadow: inset 0 0 0 2px var(--t-danger-c); }

/* ---------- Industrie ---------- */
.in-machines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.in-m { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 10px 12px; }
.in-m > span { display: flex; flex-direction: column; min-width: 0; }
.in-m b { font-size: 14px; }
.in-m i { font-style: normal; font-size: 12px; color: #566173; }
.in-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.in-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.in-col { background: #EEF0F4; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.in-col h4 { font-size: 13px; font-family: var(--font); letter-spacing: 0; display: flex; align-items: center; gap: 8px; color: #334155; }
.in-col h4 span { margin-left: auto; background: #fff; border-radius: 999px; padding: 0 8px; color: #566173; }
.in-col .d-card { padding: 10px; }
.in-col .d-card-t strong, .in-col .d-card-t span { white-space: normal; }
.in-col .d-card .pill { display: none; }
.in-load { font-style: normal; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.in-load.is-ok { background: var(--t-ok-s); color: var(--t-ok); } .in-load.is-warn { background: var(--t-warn-s); color: var(--t-warn); } .in-load.is-danger { background: var(--t-danger-s); color: var(--t-danger); }
.in-rule { font-size: 13px; color: #566173; margin: 0; }

/* ---------- Finance ---------- */
.fi-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fi-main, .fi-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fi-side { gap: 16px; }
.fi-table { background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; overflow: hidden; }
.fi-row { display: grid; grid-template-columns: 44px auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 10px 12px 10px 4px; border-bottom: 1px solid #ECEEF2; }
.fi-row:last-child { border-bottom: 0; }
.fi-row.is-paid { opacity: .6; }
.fi-check { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.fi-check input { width: 20px; height: 20px; accent-color: var(--app-ink); }
.fi-t { display: flex; flex-direction: column; min-width: 0; }
.fi-t strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-t span { font-size: 12px; color: #566173; }
.fi-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.fi-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 12px; }
.fi-bar .d-chips-row { flex-wrap: nowrap; }
.fi-compose { border-top: 4px solid var(--app); }
.fi-mail { background: var(--canvas); border-radius: 12px; padding: 12px; margin-bottom: 8px; font-size: 14px; }
.fi-mail-h { font-size: 13px; color: #334155; border-bottom: 1px solid #E4E6EB; padding-bottom: 8px; margin-bottom: 8px; }
.fi-mail p { margin: 0 0 8px; color: #0F172A; }
.fi-att { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; background: #fff; border: 1px solid #E4E6EB; border-radius: 8px; padding: 3px 8px; }
.fi-aging { background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 14px; }
.fi-aging-b { display: flex; align-items: center; gap: 16px; }
.fi-aging ul { list-style: none; display: flex; flex-direction: column; gap: 8px; flex: 1; font-size: 13px; }
.fi-aging li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; }
.fi-aging li i { width: 12px; height: 12px; border-radius: 4px; }
.fi-aging li b { font-variant-numeric: tabular-nums; }

/* ---------- Widgets des pages Solutions ---------- */
.fx-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.fx-step { position: relative; background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: background .3s, border-color .3s; }
.fx-step div { display: flex; flex-direction: column; }
.fx-step span:not(.fx-n) { font-size: 13px; color: #566173; }
.fx-step em { font-style: normal; font-size: 12px; font-weight: 700; color: #566173; }
.fx-n { width: 32px; height: 32px; border-radius: 10px; background: #EEF0F3; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.fx-step.is-ok { border-color: #BBF7D0; background: #F0FDF4; }
.fx-step.is-ok .fx-n { background: var(--t-ok-c); color: #fff; }
.fx-step.is-ok em { color: var(--t-ok); }
.fx-step.is-error { border-color: #FBCACA; background: #FFF7F7; }
.fx-step.is-error .fx-n { background: var(--t-danger-c); color: #fff; }
.fx-step.is-error em { color: var(--t-danger); }
.fx-step.is-wait em { color: var(--t-warn); }
.pl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pl-seg { display: inline-flex; gap: 2px; padding: 3px; background: #fff; border: 1px solid #E4E6EB; border-radius: 999px; flex-wrap: wrap; }
.pl-seg-b { border: 0; background: transparent; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #475569; }
.pl-seg-b:hover { color: var(--app-ink); }
.pl-seg-b.is-on { background: var(--app-ink); color: #fff; }
.pl-chart { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid #E4E6EB; border-radius: 16px; padding: 16px; }
.pl-bar { display: grid; grid-template-columns: 70px 1fr 110px; gap: 12px; align-items: center; font-size: 14px; transition: opacity .3s; }
.pl-bar.is-dim { opacity: .35; }
.pl-bar-t { height: 16px; background: #EEF0F3; border-radius: 8px; overflow: hidden; }
.pl-bar-t i { display: block; height: 100%; background: linear-gradient(90deg, var(--app), var(--app-ink)); border-radius: 8px; transition: width .5s var(--ease); }
.pl-bar-v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ==========================================================================
   Adaptation à la largeur disponible (container queries)
   ========================================================================== */
@container app (max-width: 1040px) {
  .d-split-wide, .in-grid { grid-template-columns: 1fr; }
  .d-split-wide > .d-panel, .in-grid > .d-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; align-items: start; }
  .d-split-wide > .d-panel > *, .in-grid > .d-panel > * { grid-column: 1; }
  .d-split-wide > .d-panel > .d-form, .d-split-wide > .d-panel > .d-done, .d-split-wide > .d-panel > .d-btn, .in-grid > .d-panel > .d-form, .in-grid > .d-panel > .d-done, .in-grid > .d-panel > .d-conflict-head, .in-grid > .d-panel > .d-btn { grid-column: 2; grid-row: 1 / span 3; align-self: start; justify-self: start; }
  .d-split-wide > .d-panel > .d-done + .d-btn { grid-row: 3; }
  .im-props { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container app (max-width: 820px) {
  .bt-board, .in-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-split-wide > .d-panel, .in-grid > .d-panel { display: block; }
  .d-split, .cm-grid, .ag-grid, .tf-side, .rs-grid, .im-grid, .lg-grid, .rh-wrap, .fi-grid { grid-template-columns: 1fr; }
  .in-machines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-split > .d-panel, .rs-grid .rs-side > .d-panel { order: -1; }
  .ag-steps { display: none; }
}
@container app (max-width: 560px) {
  .d-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 10px 10px 12px; gap: 8px; }
  .has-side .d-top-brand, .d-top-brand { display: flex; min-width: 0; }
  .d-title, .d-me { display: none; }
  .d-top-r { display: contents; }
  .d-badge { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .d-content { padding: 12px; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .kpis:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-l { font-size: 12px; }
  .kpi { padding: 12px; }
  .kpi-v { font-size: 21px; }
  .kpi .spark { display: none; }
  .kpi-ic { width: 28px; height: 28px; }
  .d-form > .d-btn-primary, .d-actions .d-btn { width: 100%; }
  .bt-board, .in-board, .im-props { grid-template-columns: 1fr; }
  .im-props { display: none; }
  .tf-hours, .tf-track { display: none; }
  .tf-row { grid-template-columns: 1fr; min-height: 0; }
  .tf-team { border-right: 0; border-bottom: 1px solid #ECEEF2; }
  .tf-list { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 10px 12px; font-size: 14px; }
  .tf-list li { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--t) 12%, #fff); border-left: 4px solid var(--t); }
  .tf-list li b { font-variant-numeric: tabular-nums; margin-right: 6px; }
  .tf-list li.is-clash { background: var(--t-danger-s); border-left-color: var(--t-danger-c); }
  .tf-list li.is-conflict { background: var(--t-danger-c); color: #fff; }
  .rs-room { aspect-ratio: 4 / 3.4; }
  .rs-t i { display: none; }
  .rs-door { display: none; }
  .im-buyer { grid-template-columns: auto minmax(0, 1fr) 60px; }
  .im-buyer > .d-btn { grid-column: 1 / -1; justify-self: stretch; }
  .im-photo.is-big { height: 130px; }
  .im-detail-h { flex-direction: column; }
  .im-price { text-align: left; }
  .rh-row { grid-template-columns: 64px repeat(10, minmax(0, 1fr)); gap: 2px; }
  .rh-who .av { display: none; }
  .rh-who i { display: none; }
  .rh-day.is-wk, .rh-cell.is-wk { margin-left: 3px; }
  .rh-cell { height: 24px; border-radius: 5px; }
  .in-machines { grid-template-columns: 1fr 1fr; }
  .in-m { padding: 8px; gap: 6px; }
  .fi-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ck t amt" "ck pill btn"; padding: 10px 10px 10px 2px; gap: 4px 8px; }
  .fi-row .av { display: none; }
  .fi-row .fi-check { grid-area: ck; } .fi-row .fi-t { grid-area: t; } .fi-row .fi-amt { grid-area: amt; text-align: right; }
  .fi-row .pill { grid-area: pill; justify-self: start; } .fi-row .fi-paid { grid-area: btn; justify-self: end; }
  .fi-bar { flex-direction: column; align-items: stretch; }
  .fi-bar .d-btn { width: 100%; }
  .fi-aging-b { flex-direction: column; }
  .fx-steps { grid-template-columns: 1fr; }
  .pl-bar { grid-template-columns: 56px 1fr 90px; gap: 8px; }
  .cm-lines li { grid-template-columns: auto 1fr auto; }
  .cm-sum { display: none; }
}

/* ==========================================================================
   Galerie des exemples
   ========================================================================== */
.g-tools { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-bottom: 8px; }
.g-search { position: relative; width: 100%; max-width: 640px; }
.g-search .ic { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.g-search input { width: 100%; min-height: 58px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; padding: 0 22px 0 54px; font-size: 17px; box-shadow: 0 10px 30px -18px rgba(17, 17, 19, .35); transition: border-color var(--t), box-shadow var(--t); }
.g-search input:hover { border-color: #a9a9b1; }
.g-search input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(194, 65, 12, .25), 0 10px 30px -18px rgba(17, 17, 19, .35); }
.g-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.g-cat { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 15px; font-weight: 600; color: var(--ink-2); transition: background var(--t), color var(--t), border-color var(--t); }
.g-cat i { width: 9px; height: 9px; border-radius: 50%; background: var(--app); }
.g-cat span { font-size: 13px; color: var(--muted); }
.g-cat:hover { border-color: var(--ink); }
.g-cat.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.g-cat.is-on span { color: rgba(255, 255, 255, .7); }
.g-count { text-align: center; color: var(--muted); font-size: 15px; margin: 6px 0 22px; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.g-card { --app-soft: color-mix(in srgb, var(--app) 12%, #fff); background: #fff; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--t), transform var(--t) var(--ease); }
.g-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.g-thumb { display: block; height: 230px; overflow: hidden; position: relative; padding: 18px 0 0 18px; background: linear-gradient(150deg, var(--app-soft), color-mix(in srgb, var(--app) 30%, #fff)); text-decoration: none; color: inherit; }
.g-thumb-in { width: 1120px; transform: scale(.34); transform-origin: top left; pointer-events: none; }
.g-thumb::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40px; background: linear-gradient(transparent, rgba(255, 255, 255, .6)); }
.g-body { padding: 20px 22px 22px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.g-cat-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--app-ink); margin: 0 0 8px; }
.g-cat-l i { width: 8px; height: 8px; border-radius: 50%; background: var(--app); }
.g-body .h4 a { text-decoration: none; }
.g-body .h4 a:hover { text-decoration: underline; }
.g-body > p:not(.g-cat-l) { color: var(--muted); margin: 8px 0 0; font-size: 15px; }
.g-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.g-tags li { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--pearl); border-radius: 999px; padding: 4px 10px; }
.g-body .btn { margin-top: auto; }
.g-card-cta { background: #111113; border-color: #111113; color: #fff; justify-content: center; }
.g-card-cta:hover { transform: none; }
.g-cta-in { padding: 32px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.g-cta-in p { color: rgba(255, 255, 255, .75); margin: 0 0 8px; }
.g-cta-in .card-ic { background: rgba(255, 255, 255, .12); color: #fff; }
.g-empty { text-align: center; padding: 48px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); }
.g-empty .ic { color: var(--line-2); }
.g-empty .h4 { color: var(--ink); }
.ex-item { --app-soft: color-mix(in srgb, var(--app) 12%, #fff); }
.ex-item:hover { background: var(--app-soft); }
.ex-sector { display: inline-flex; align-items: center; gap: 6px; color: var(--app-ink) !important; }
.ex-sector i { width: 8px; height: 8px; border-radius: 50%; background: var(--app); }

@media (max-width: 1080px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-thumb-in { transform: scale(.42); }
}
@media (max-width: 680px) {
  .gallery { grid-template-columns: 1fr; }
  .g-thumb { height: 200px; padding: 14px 0 0 14px; }
  .g-thumb-in { transform: scale(.3); }
  .g-search input { min-height: 54px; font-size: 16px; }
  .g-cats { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 16px); margin-right: -16px; padding-bottom: 4px; scrollbar-width: none; }
  .g-cats::-webkit-scrollbar { display: none; }
  .g-cat { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .d-app *, .g-card { animation: none !important; transition: none !important; }
  .g-card:hover { transform: none; }
}

/* ==========================================================================
   Prototype Agence « Portail Mistral » : portail client, livrables, échanges
   ========================================================================== */
[data-theme-app="agence"] { --ag-line: #E8EAEF; --ag-shadow: 0 1px 2px rgba(15, 23, 42, .05); }

/* ---------- En-tête du projet ---------- */
.ag-head { border-color: var(--ag-line); box-shadow: var(--ag-shadow); padding: 16px 18px; flex-wrap: nowrap; }
.ag-proj { min-width: 0; }
.ag-proj > .av { border-radius: 14px; box-shadow: none; background: linear-gradient(140deg, #A16207, #713F12); }
.ag-proj-t { display: flex; flex-direction: column; min-width: 0; }
.ag-proj h3 { font-size: 19px; line-height: 1.2; }
.ag-team { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #566173; margin-top: 6px; min-width: 0; }
.ag-team > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-team b { color: #0F172A; font-weight: 600; }
.ag-progress { display: flex; align-items: center; gap: 14px; flex: none; border-radius: 0; }
.ag-progress .donut { border-radius: 50%; }
.ag-progress.is-hl .donut { animation: hl 1.6s var(--ease); }
.ag-progress.is-hl { animation: none; }
.ag-progress-t { display: flex; flex-direction: column; line-height: 1.3; font-size: 13px; color: #566173; }
.ag-progress-t b { font-size: 14px; color: #0F172A; font-variant-numeric: tabular-nums; }

/* Étapes du projet : frise reliée */
.ag-phase-m { display: none; }
.ag-steps { display: flex; gap: 0; margin: 0 0 16px; padding: 14px 18px; background: #fff; border: 1px solid var(--ag-line); border-radius: 16px; box-shadow: var(--ag-shadow); }
.ag-steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 8px 0 0; background: none; border: 0; border-radius: 0; min-width: 0; }
.ag-steps li::after { content: ""; position: absolute; top: 13px; left: 34px; right: 8px; height: 2px; border-radius: 2px; background: #E5E7EB; }
.ag-steps li:last-child::after { display: none; }
.ag-steps li.is-done::after { background: var(--t-ok-c); }
.ag-steps li.is-now::after { background: linear-gradient(90deg, var(--app) 40%, #E5E7EB 40%); }
.ag-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #475569; background: #fff; border: 2px solid #E5E7EB; flex: none; }
.ag-steps li.is-done .ag-dot { background: var(--t-ok-c); border-color: var(--t-ok-c); color: #fff; }
.ag-steps li.is-now .ag-dot { background: var(--app-ink); border-color: var(--app-ink); color: #fff; box-shadow: 0 0 0 4px var(--app-soft); }
.ag-step-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ag-step-t b { font-size: 13px; color: #0F172A; }
.ag-step-t i { font-style: normal; font-size: 12px; color: #566173; white-space: nowrap; }
.ag-steps li.is-now .ag-step-t b, .ag-steps li.is-now .ag-step-t i { color: var(--app-ink); font-weight: 650; }
.ag-steps li .ag-dot { width: 28px; height: 28px; }
.ag-steps li.is-now { background: none; border: 0; color: inherit; }

/* ---------- Livrables ---------- */
.ag-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.ag-card { flex-direction: row; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-color: var(--ag-line); box-shadow: var(--ag-shadow); }
.ag-card.is-sel { border-color: var(--app-ink); box-shadow: 0 0 0 1px var(--app-ink), 0 8px 20px -14px var(--app-ink); }
.ag-thumb { width: 84px; height: 60px; border-radius: 10px; overflow: hidden; flex: none; background: #EFE9E1; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06); }
.ag-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ag-card .d-card-t { gap: 1px; }
.ag-card .d-card-t .pill { align-self: flex-start; margin-top: 5px; overflow: visible; }
.ag-card .d-card-t .pill-ok { color: var(--t-ok); } .ag-card .d-card-t .pill-warn { color: var(--t-warn); }
.ag-card .d-card-t .pill-blue { color: var(--t-blue); } .ag-card .d-card-t .pill-neutral { color: #334155; }
.ag-card[aria-disabled="true"] .ag-thumb img { filter: grayscale(.6); }

/* Activité */
.ag-activity { border-color: var(--ag-line); box-shadow: var(--ag-shadow); }
.ag-activity ol { gap: 10px; }
.ag-activity li { display: flex; align-items: center; gap: 10px; padding-left: 0; }
.ag-activity li::before { display: none; }

/* ---------- Panneau du livrable ---------- */
.ag-panel { border-color: var(--ag-line); box-shadow: var(--ag-shadow); padding: 12px 16px 16px; }
.ag-pv { position: relative; height: auto; aspect-ratio: 3 / 2; margin: -2px -6px 14px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #EFE9E1; display: block; }
.ag-pv .d-photo { height: 100%; }
.ag-pv-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 8px; }
.ag-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(15, 23, 42, .78); border-radius: 999px; padding: 4px 10px; backdrop-filter: blur(4px); }
.ag-pv.is-prep .d-photo { filter: grayscale(.5) blur(1px); opacity: .7; }
.ag-pv-prep { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 600; color: #0F172A; background: #fff; border-radius: 999px; padding: 8px 14px; box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .4); white-space: nowrap; }
.ag-panel .d-panel-head { margin-bottom: 12px; }

/* Fil de commentaires */
.ag-thread { gap: 12px; margin-bottom: 4px; }
.ag-thread li { gap: 10px; max-width: 92%; }
.ag-thread li > .av-ph, .ag-thread li > .av { margin-top: 2px; }
.ag-thread li > div { background: #F4F5F8; border-radius: 4px 14px 14px 14px; padding: 9px 13px; }
.ag-thread b { opacity: 1; color: #475569; font-weight: 650; }
.ag-thread li.is-me > div { background: var(--app-ink); }
.ag-thread li.is-me b { color: #EDE9FE; }
.ag-thread p { line-height: 1.45; }

/* ---------- Version compacte (accueil) ---------- */
.ag-grid.is-compact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; }
.ag-grid.is-compact .ag-list { gap: 6px; }
.ag-grid.is-compact .ag-card { padding: 6px 10px 6px 6px; gap: 10px; }
.ag-grid.is-compact .ag-thumb { width: 64px; height: 48px; border-radius: 8px; }
.ag-grid.is-compact .ag-card .d-card-t .pill { margin-top: 3px; }
.ag-panel.is-compact { padding: 12px 14px 14px; }
.ag-panel.is-compact .d-panel-head { gap: 12px; }
.ag-pv-sm { width: 96px; height: 64px; border-radius: 10px; overflow: hidden; flex: none; background: #EFE9E1; }
.ag-pv-sm img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ag-panel.is-compact .ag-form { margin-top: 10px; gap: 8px; }
.ag-panel.is-compact .d-actions { margin-top: 10px; }
.ag-head:has(+ .d-flash, + .ag-grid.is-compact) { padding: 12px 16px; }

/* ---------- Adaptation à la largeur ---------- */
@container app (max-width: 820px) {
  .ag-grid, .ag-grid.is-compact { grid-template-columns: 1fr; }
  .ag-pv { aspect-ratio: auto; height: 300px; }
  .ag-steps { display: flex; padding: 12px 14px; }
  .ag-step-t i { white-space: normal; }
  .ag-progress-t { display: none; }
}
@container app (max-width: 560px) {
  .ag-head { padding: 12px; gap: 10px; }
  .ag-proj h3 { font-size: 16px; }
  .ag-proj > .av { display: none; }
  .ag-team > span:last-child { white-space: normal; }
  .ag-pv { margin: -2px -2px 12px; aspect-ratio: 3 / 2; height: auto; }
  .ag-thumb { width: 64px; height: 48px; }
  .ag-thread li { max-width: 100%; }
  .ag-phase-m { display: block; margin: 0 0 8px; font-size: 13px; color: #566173; }
  .ag-phase-m b { color: var(--app-ink); }
  .ag-steps { padding: 12px 14px; }
  .ag-step-t { display: none; }
  .ag-steps li { flex-direction: row; align-items: center; }
  .ag-steps li::after { top: 13px; }
  .ag-steps li:last-child { flex: none; }
}

/* Ajustements : pile d'avatars de l'équipe, en-tête du panneau compact */
.ag-team .av, .ag-team .av:last-of-type { margin: 0; }
.ag-team .av-stack > * + * { margin-left: -8px; }
.ag-panel.is-compact .d-panel-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; }
.ag-panel.is-compact .ag-pv-sm { grid-row: 1 / span 2; }
.ag-panel.is-compact .d-panel-head > .pill { justify-self: start; align-self: start; }
.ag-panel.is-compact .d-panel-t { align-self: end; }


/* ==========================================================================
   Prototype Bâtiment « Chantiers Pro » : pipeline des demandes en kanban
   ========================================================================== */
[data-theme-app="batiment"] { --bt-line: #E8EAEF; --bt-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
[data-theme-app="batiment"] .kpi { border-color: var(--bt-line); box-shadow: var(--bt-shadow); }

/* Pastilles des cartes : montant, canal, ancienneté */
.bt-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.bt-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; line-height: 1.3; color: #334155; background: #F1F3F6; border-radius: 999px; padding: 3px 8px 3px 6px; white-space: nowrap; }
.bt-tag .ic { color: #64748B; flex: none; }
.bt-tag.is-eur { color: #0F172A; font-weight: 700; font-variant-numeric: tabular-nums; }
.bt-tag.is-late { background: var(--t-danger-s); color: var(--t-danger); }
.bt-tag.is-late .ic { color: var(--t-danger); }

/* ---------- Version complète : barre d'outils + kanban ---------- */
.bt-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.bt-views { display: inline-flex; gap: 2px; padding: 3px; background: #ECEEF2; border-radius: 10px; }
.bt-views > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #475569; padding: 5px 10px; border-radius: 8px; }
.bt-views > span.is-on { background: #fff; color: #0F172A; box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
.bt-views .is-on .ic { color: var(--app-ink); }
.bt-total { font-size: 13px; color: #566173; font-variant-numeric: tabular-nums; }
.bt-total b { color: #0F172A; }
.bt-crew { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #475569; font-weight: 500; }

.bt-split { display: flex; flex-direction: column; gap: 16px; }
.bt-board { gap: 12px; align-items: start; }
.bt-col { background: #F1F3F6; border-radius: 14px; padding: 10px; gap: 8px; border-top: 3px solid var(--bt-c, #CBD5E1); }
.bt-warn { --bt-c: var(--t-warn-c); } .bt-blue { --bt-c: var(--t-blue-c); } .bt-violet { --bt-c: var(--t-violet-c); } .bt-ok { --bt-c: var(--t-ok-c); }
.bt-col h4 { padding: 2px 2px 0; font-size: 13px; color: #0F172A; }
.bt-col h4 span { font-variant-numeric: tabular-nums; border: 1px solid var(--bt-line); }
.bt-sum { margin: -6px 2px 2px; font-size: 12px; color: #566173; font-variant-numeric: tabular-nums; font-weight: 600; }
.bt-empty { font-size: 13px; text-align: center; padding: 18px 8px; border: 1px dashed #CBD5E1; border-radius: 12px; background: rgba(255, 255, 255, .5); }

.bt-col .bt-card { padding: 8px 8px 10px; gap: 8px; border-color: var(--bt-line); box-shadow: var(--bt-shadow); border-radius: 12px; }
.bt-col .bt-card:hover { box-shadow: 0 8px 20px -14px rgba(15, 23, 42, .45); transform: translateY(-1px); }
.bt-col .bt-card.is-sel { border-color: var(--app-ink); box-shadow: 0 0 0 1px var(--app-ink), 0 10px 22px -16px var(--app-ink); }
.bt-thumb { position: relative; display: block; height: 84px; border-radius: 8px; overflow: hidden; background: #E2E8F0; }
.bt-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.bt-card:hover .bt-thumb img { transform: scale(1.04); }
.bt-age { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; background: rgba(15, 23, 42, .78); padding: 4px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; backdrop-filter: blur(4px); }
.bt-age.is-late { background: var(--t-danger); }
.bt-col .d-card-row { padding: 0 2px; gap: 8px; }
.bt-col .d-card-t strong { font-size: 14px; }
.bt-col .d-card-t span { white-space: normal; font-size: 13px; line-height: 1.3; }
.bt-col .bt-tags { padding: 0 2px; }
.bt-col .d-card-meta { padding: 0 2px; align-items: center; min-height: 22px; }
.bt-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #334155; }

/* Panneau de détail : grande photo, fiche, action */
.bt-panel { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "hero info act" "team info act"; grid-template-rows: auto 1fr; gap: 14px 22px; align-items: start; padding: 16px; border-color: var(--bt-line); box-shadow: var(--bt-shadow); }
.bt-hero { grid-area: hero; position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: #E2E8F0; }
.bt-hero .d-photo { height: 100%; }
.bt-hero-ov { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 2px; padding: 40px 14px 12px; color: #fff; background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, .82) 55%); }
.bt-hero-ov b { font-size: 15px; letter-spacing: -.01em; line-height: 1.25; }
.bt-hero-ov span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.bt-info { grid-area: info; min-width: 0; }
.bt-info .d-dl { background: #F7F8FA; }
.bt-info .d-quote { margin-bottom: 0; }
.bt-act { grid-area: act; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bt-act > .d-done, .bt-act > .d-btn { margin: 0; }
.bt-act > .d-btn { align-self: flex-start; }
.bt-info .d-history { margin-top: 14px; }
.bt-form { gap: 10px; }
.bt-form .d-chip span { min-height: 40px; padding: 0 12px; font-size: 13px; }
.bt-form .d-check { min-height: 32px; }
.bt-visit { align-items: center; }
.bt-visit .av-ph { box-shadow: 0 0 0 2px #fff; }
.bt-team { grid-area: team; background: #F7F8FA; border-radius: 12px; padding: 12px; }
.bt-team h4 { font-size: 13px; color: #566173; font-weight: 600; margin-bottom: 8px; font-family: var(--font); letter-spacing: 0; }
.bt-team ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bt-team li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bt-team li > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.bt-team b { font-size: 14px; }
.bt-team i { font-style: normal; font-size: 12px; color: #566173; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-team em { font-style: normal; font-size: 12px; font-weight: 600; color: #334155; background: #fff; border: 1px solid #E8EAEF; border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Version compacte (accueil) : aperçu du pipeline ---------- */
.bt-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; }
.bt-stage { display: flex; align-items: center; gap: 10px; padding: 9px 22px 9px 16px; background: var(--bt-s); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); min-width: 0; }
.bt-stage:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 12px 0 0 12px; padding-left: 12px; }
.bt-stage:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); border-radius: 0 12px 12px 0; padding-right: 12px; }
.bt-stage.bt-warn { --bt-s: var(--t-warn-s); --bt-i: var(--t-warn); } .bt-stage.bt-blue { --bt-s: var(--t-blue-s); --bt-i: var(--t-blue); }
.bt-stage.bt-violet { --bt-s: var(--t-violet-s); --bt-i: var(--t-violet); } .bt-stage.bt-ok { --bt-s: var(--t-ok-s); --bt-i: var(--t-ok); }
.bt-stage-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .75); color: var(--bt-i); }
.bt-stage-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.bt-stage-t b { font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bt-stage-t span { font-size: 12px; color: #334155; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-stage.is-hl { animation: none; outline: 2px solid var(--bt-i); outline-offset: -2px; }

.bt-csplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 14px; align-items: start; }
.bt-card.is-row { flex-direction: row; align-items: center; gap: 12px; padding: 8px; border-color: var(--bt-line); box-shadow: var(--bt-shadow); }
.bt-thumb-sm { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; background: #E2E8F0; align-self: stretch; height: auto; min-height: 64px; }
.bt-card.is-row.is-sel { border-color: var(--app-ink); box-shadow: 0 0 0 1px var(--app-ink), 0 8px 20px -14px var(--app-ink); }
.bt-card.is-row .d-card-t { gap: 2px; }
.bt-card .bt-tags, .bt-card .bt-card-top { overflow: visible; white-space: normal; color: #0F172A; }
.bt-card .bt-tags .bt-tag { color: #334155; } .bt-card .bt-tags .bt-tag.is-eur { color: #0F172A; } .bt-card .bt-tags .bt-tag.is-late { color: var(--t-danger); }
.bt-cteam { display: flex; align-items: center; gap: 10px; margin: 4px 2px 0; font-size: 13px; color: #566173; }
.bt-cteam b { color: #0F172A; font-weight: 600; }
.bt-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.bt-card-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-card.is-row .bt-tags { margin-top: 4px; }
.bt-panel.is-compact { display: block; padding: 14px; }
.bt-chead { display: flex; gap: 12px; align-items: stretch; margin-bottom: 12px; }
.bt-cphoto { width: 120px; height: auto; min-height: 92px; border-radius: 12px; object-fit: cover; flex: none; background: #E2E8F0; }
.bt-chead-t { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.bt-chead .d-panel-head { margin: 0; gap: 10px; }
.bt-chead .d-panel h3, .bt-chead h3 { font-size: 17px; }
.bt-panel.is-compact .d-dl { padding: 10px 12px; gap: 6px 14px; background: #F7F8FA; }
.bt-panel.is-compact .bt-form .d-chips-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bt-panel.is-compact .bt-form .d-chip span { width: 100%; justify-content: center; }
.bt-panel.is-compact .bt-form > .d-btn-primary { align-self: stretch; }

/* ---------- Adaptation à la largeur ---------- */
@container app (max-width: 820px) {
  .bt-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "hero hero" "info act" "info team"; grid-template-rows: auto auto 1fr; }
  .bt-hero { aspect-ratio: auto; height: 220px; }
  .bt-csplit { grid-template-columns: 1fr; }
  .bt-csplit > .bt-panel { order: -1; }
}
@container app (max-width: 560px) {
  .bt-bar { gap: 8px; }
  .bt-views { display: none; }
  /* Kanban mobile : colonnes côte à côte, défilement horizontal interne */
  .bt-board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -12px; padding: 0 12px 6px; scrollbar-width: thin; }
  .bt-col { flex: 0 0 82%; scroll-snap-align: start; }
  .bt-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "info" "act" "team"; grid-template-rows: none; padding: 12px; }
  .bt-hero { height: 180px; }
  .bt-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .bt-stage, .bt-stage:first-child, .bt-stage:last-child { clip-path: none; border-radius: 12px; padding: 9px 10px; }
  .bt-chead { flex-direction: column; }
  .bt-cphoto { width: 100%; height: 140px; }
  .bt-thumb-sm { width: 56px; min-height: 56px; }
}
/* Pastille de statut dans une carte compacte : garder la couleur du ton */
.bt-card-top .pill-warn { color: var(--t-warn); } .bt-card-top .pill-blue { color: var(--t-blue); }
.bt-card-top .pill-violet { color: var(--t-violet); } .bt-card-top .pill-ok { color: var(--t-ok); }

/* ---------- Commerce · Comptoir (caisse tactile et stock) ---------- */
.cm-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.cm-products, .cm-ticket, .cm-sugg, .cm-log, .cm-chart { background: #fff; border: 1px solid #E8EAEF; border-radius: 16px; padding: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.cm-products { padding: 14px 14px 16px; }
.cm-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cm-sec-h .d-h { margin: 0; }
.cm-sec-h > span { font-size: 12px; color: #566173; }

/* Tuiles produit : photo en haut, nom, prix, stock */
.cm-grid-tiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.cm-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0; gap: 0; background: #fff; border: 1px solid #E8EAEF; border-radius: 14px; overflow: hidden; transition: border-color var(--t), box-shadow var(--t), transform .15s var(--ease); }
.cm-tile:hover:not(.is-out) { border-color: var(--app-line); box-shadow: 0 12px 24px -16px rgba(15, 23, 42, .45); transform: translateY(-2px); }
.cm-tile.is-in { border-color: var(--app); box-shadow: 0 0 0 1px var(--app); }
.cm-ph { position: relative; display: block; aspect-ratio: 4 / 3; background: #F1F3F6; overflow: hidden; }
.cm-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.cm-tile:hover:not(.is-out) .cm-img { transform: scale(1.04); }
.cm-tile.is-out .cm-img { filter: grayscale(.8); opacity: .55; }
.cm-tag { position: absolute; left: 8px; bottom: 8px; }
.cm-tag .pill { box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 0 0 1px rgba(255, 255, 255, .7); }
.cm-badge { position: absolute; top: 8px; right: 8px; min-width: 28px; height: 28px; border-radius: 999px; background: var(--app-ink); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; padding: 0 8px; box-shadow: 0 0 0 2px #fff, 0 6px 14px -6px rgba(15, 23, 42, .5); font-variant-numeric: tabular-nums; }
.cm-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.cm-name { font-size: 14px; line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-var { font-size: 12px; color: #566173; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.cm-price { font-size: 17px; font-weight: 750; letter-spacing: -.02em; color: #0F172A; font-variant-numeric: tabular-nums; }
.cm-add { width: 36px; height: 36px; position: static; }
.cm-add::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.cm-tile .cm-add:focus-visible { outline: 3px solid var(--app-ink); outline-offset: 2px; }
.cm-tile:hover .cm-add:not([disabled]) { background: var(--app-ink); color: #fff; }
.cm-lvl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 8px; }
.cm-lvl .prog { height: 5px; grid-area: auto; }
.cm-min { font-size: 12px; color: #566173; white-space: nowrap; }
.cm-tile.is-hl { animation: hl 1.6s var(--ease); }

/* Ticket */
.cm-ticket { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cm-ticket-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid #EEF0F3; background: linear-gradient(180deg, var(--app-soft), #fff); }
.cm-ticket-h .d-h { margin: 0 0 2px; }
.cm-tno { font-size: 13px; font-weight: 600; color: #334155; font-variant-numeric: tabular-nums; }
.cm-count { font-size: 12px; font-weight: 700; color: var(--app-ink); background: #fff; border: 1px solid var(--app-line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.cm-lines { list-style: none; display: flex; flex-direction: column; padding: 4px 14px; margin: 0; }
.cm-lines li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 78px; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; border-bottom: 1px dashed #E5E7EB; }
.cm-lines li:last-child { border-bottom: 0; }
.cm-mini { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; display: block; background: #F1F3F6; flex: none; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06); }
.cm-l-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cm-l-t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-l-t span { font-size: 12px; color: #566173; font-variant-numeric: tabular-nums; }
.cm-qty { display: inline-flex; align-items: center; gap: 2px; background: #F4F5F7; border-radius: 999px; padding: 2px; }
.cm-qty .d-icon-btn { width: 32px; height: 32px; border: 0; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
.cm-qty b { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.cm-sum { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.cm-empty { display: flex; align-items: center; gap: 12px; margin: 14px; padding: 16px; border: 1.5px dashed #D5D9E0; border-radius: 14px; background: #FAFBFC; }
.cm-empty-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--app-soft); color: var(--app-ink); flex: none; }
.cm-empty p { margin: 0; display: flex; flex-direction: column; font-size: 14px; }
.cm-empty p span { color: #566173; font-size: 13px; }
.cm-pay { padding: 0 14px 14px; gap: 12px; }
.cm-total { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #0F172A; color: #fff; border-radius: 14px; padding: 12px 16px; border: 0; }
.cm-total > span { display: flex; flex-direction: column; line-height: 1.25; }
.cm-total b { font-size: 14px; }
.cm-total i { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .78); }
.cm-total strong { font-size: 28px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cm-pay > .d-btn-primary { align-self: stretch; min-height: 52px; font-size: 16px; border-radius: 14px; }
.cm-pay .d-chips-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-pay .d-chip span { justify-content: center; width: 100%; padding: 0 8px; border-radius: 12px; }

/* Réassort */
.cm-sugg .d-h { margin-bottom: 8px; }
.cm-ok { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #334155; margin: 0; background: var(--t-ok-s); border-radius: 12px; padding: 10px 12px; }
.cm-ok .ic { flex: none; color: var(--t-ok); margin-top: 2px; }
.cm-sugg-card { background: #FFFBEB; border-radius: 14px; padding: 12px; border: 1px solid #FDE68A; }
.cm-sugg-card + .cm-sugg-card { margin-top: 8px; }
.cm-sugg-card.is-done { background: #F0FDF4; border-color: #BBF7D0; }
.cm-sugg-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cm-sugg-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.cm-sugg-t strong { font-size: 14px; }
.cm-sugg-t span { font-size: 12px; color: #566173; }
.cm-sugg-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--t-warn-c); color: #fff; flex: none; }
.is-done .cm-sugg-ic { background: var(--t-ok); }
.cm-sugg-card p { font-size: 14px; margin: 0 0 4px; }
.cm-sup { color: #475569; display: flex; align-items: center; gap: 4px; font-size: 13px !important; }
.cm-sim { margin-top: 8px !important; }

/* Ventes par heure */
.cm-chart { padding: 14px 16px 12px; }
.cm-chart-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.cm-chart-h .d-h { margin: 0 0 2px; }
.cm-chart-v { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cm-chart-v b { font-size: 22px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cm-chart-v span { font-size: 13px; color: #566173; }
.cm-hours { position: relative; display: flex; align-items: flex-end; gap: 12px; height: 150px; margin: 26px 0 0 34px; border-bottom: 0; }
.cm-gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #E5E7EB; }
.cm-gl em { position: absolute; right: calc(100% + 6px); top: -8px; font-style: normal; font-size: 12px; color: #566173; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-gl[style*="bottom:0"] { border-top: 1px solid #E5E7EB; }
.cm-avg { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--app); z-index: 1; }
.cm-avg em { position: absolute; right: 0; top: -22px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--app-ink); background: #fff; padding: 0 4px; border-radius: 4px; }
.cm-h { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.cm-h i { position: relative; width: 100%; max-width: 46px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--app) 38%, #fff), color-mix(in srgb, var(--app) 18%, #fff)); transition: height .5s var(--ease); }
.cm-h i em { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 600; color: #475569; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-h.is-peak i { background: linear-gradient(180deg, color-mix(in srgb, var(--app) 60%, #fff), color-mix(in srgb, var(--app) 30%, #fff)); }
.cm-h.is-now i { background: linear-gradient(180deg, var(--app), var(--app-ink)); box-shadow: 0 10px 18px -10px var(--app-ink); }
.cm-h.is-now i em, .cm-h.is-peak i em { color: #0F172A; font-weight: 700; }
.cm-h b { position: absolute; top: calc(100% + 6px); font-size: 12px; color: #566173; font-weight: 600; white-space: nowrap; }
.cm-h.is-now b { color: var(--app-ink); }
.cm-chart::after { content: ""; display: block; height: 26px; }

/* Journal des ventes */
.cm-log ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.cm-log li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; }
.cm-log-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #F1F5F9; color: #334155; }
.cm-log-t { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cm-log-t b { font-size: 14px; }
.cm-log-t span { font-size: 12px; color: #566173; }
.cm-log-v { font-variant-numeric: tabular-nums; font-size: 14px; }

/* Version compacte (page d'accueil) */
.cm-grid.is-compact .cm-grid-tiles { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.cm-grid.is-compact .cm-ph { aspect-ratio: 1 / .8; }
.cm-grid.is-compact .cm-var { display: none; }
.cm-grid.is-compact .cm-lvl { display: none; }
.cm-grid.is-compact .cm-body { padding: 8px 10px 10px; }
.cm-grid.is-compact .cm-price { font-size: 15px; }
.cm-grid.is-compact .cm-lines li { padding: 7px 0; }

@container app (max-width: 820px) {
  .cm-grid { grid-template-columns: 1fr; }
}
@container app (max-width: 560px) {
  .cm-grid-tiles, .cm-grid.is-compact .cm-grid-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cm-products { padding: 12px; }
  .cm-lines { padding: 4px 12px; }
  .cm-lines li { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; }
  .cm-mini { width: 40px; height: 40px; }
  .cm-sum { display: none; }
  .cm-total strong { font-size: 24px; }
  .cm-hours { gap: 6px; margin-left: 30px; }
  .cm-h i em { font-size: 12px; }
  .cm-h:not(.is-now):not(.is-peak) i em { display: none; }
  .cm-avg em { top: -20px; }
}
@container app (max-width: 820px) {
  .cm-left, .cm-side { display: contents; }
  .cm-products { order: 1; } .cm-ticket { order: 2; } .cm-sugg { order: 3; } .cm-log { order: 4; } .cm-chart { order: 5; }
}
@container app (max-width: 560px) {
  .cm-pay .d-chip span { font-size: 13px; line-height: 1.2; text-align: center; padding: 0 4px; }
}
.cm-log li.is-new .cm-log-ic { background: var(--t-ok-s); color: var(--t-ok); }

/* ---------- Finance · Encaissements (relances et encours) ---------- */
.fi-full { display: flex; flex-direction: column; gap: 16px; }
.fi-main { gap: 12px; }
.fi-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fi-sec-h .d-h { margin: 0; }
.fi-sec-h > span { font-size: 12px; color: #566173; }
.fi-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; align-items: stretch; }
.fi-card { background: #fff; border: 1px solid #E8EAEF; border-radius: 16px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); min-width: 0; }
.fi-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.fi-card-h .d-h { margin: 0 0 2px; }

/* Tableau des factures */
.fi-table { --cols: 44px minmax(0, 1.7fr) 96px minmax(110px, 1fr) 84px 148px 40px; background: #fff; border: 1px solid #E8EAEF; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.fi-table.is-compact { --cols: 40px minmax(0, 1.6fr) minmax(70px, .8fr) 76px 128px; }
.fi-cap { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; font-size: 13px; color: #334155; border-bottom: 1px solid #EEF0F3; }
.fi-cap b { color: #0F172A; }
.fi-cap-r { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #566173; }
.fi-head, .fi-row { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 12px; padding: 0 12px 0 4px; }
.fi-head { background: #F8FAFC; border-bottom: 1px solid #EEF0F3; min-height: 34px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #566173; }
.fi-r { text-align: right; }
.fi-row { min-height: 60px; padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid #F0F2F5; transition: background var(--t); }
.fi-row:last-child { border-bottom: 0; }
.fi-row:hover { background: #FAFBFC; }
.fi-row:has(input:checked) { background: color-mix(in srgb, var(--app) 6%, #fff); }
.fi-row.is-paid { opacity: 1; background: #FBFDFC; }
.fi-row.is-paid .fi-amt { color: #566173; text-decoration: line-through; text-decoration-color: #A3AAB5; }
.fi-check { width: 40px; height: 44px; }
.fi-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fi-logo { display: inline-grid; place-items: center; flex: none; border-radius: 9px; background-color: var(--lc); background-image: linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%); color: #fff; font-size: 13px; font-weight: 750; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 2px rgba(15, 23, 42, .12); }
.fi-t strong { font-size: 14px; }
.fi-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-inv { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.fi-inv b { font-size: 13px; font-variant-numeric: tabular-nums; }
.fi-inv span { font-size: 12px; color: #566173; white-space: nowrap; }
.fi-age { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fi-age-t { font-size: 12px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-age-b { display: block; height: 6px; border-radius: 6px; background: #EEF0F3; overflow: hidden; }
.fi-age-b i { display: block; height: 100%; border-radius: 6px; transition: width .5s var(--ease); }
.fi-age-b.is-ok i { background: var(--t-ok-c); }
.fi-amt { text-align: right; font-size: 14px; }
.fi-st { display: flex; min-width: 0; }
.fi-paid, .fi-paid-ph { width: 36px; height: 36px; }
.fi-paid:hover { background: var(--t-ok); border-color: var(--t-ok); }
.fi-table.is-compact .fi-age-t { display: none; }
.fi-bar { border-radius: 16px; border-color: #E8EAEF; }

/* Aperçu des relances */
.fi-compose { border-top: 1px solid #E8EAEF; box-shadow: 0 0 0 3px var(--app-soft); }
.fi-mails { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.fi-mail { background: #fff; border: 1px solid #E8EAEF; border-radius: 12px; padding: 12px; margin: 0; display: flex; flex-direction: column; }
.fi-mail-h { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.fi-mail p { flex: 1; font-size: 13px; line-height: 1.5; }
.fi-att { align-self: flex-start; }

/* Ancienneté : barre empilée */
.fi-tot { font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fi-stack { display: flex; gap: 3px; height: 14px; border-radius: 8px; overflow: hidden; margin-bottom: 14px; background: #EEF0F3; }
.fi-stack i { display: block; height: 100%; min-width: 4px; transition: width .5s var(--ease); }
.fi-aging ul { gap: 10px; }
.fi-aging li { grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 10px; }
.fi-aging li em { font-style: normal; font-size: 12px; color: #566173; font-variant-numeric: tabular-nums; }
.fi-aging li b { min-width: 70px; text-align: right; }

/* Courbe d'encours en aire */
.fi-big { display: flex; align-items: center; gap: 8px; margin: 0; }
.fi-big b { font-size: 22px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fi-goal-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #475569; white-space: nowrap; }
.fi-goal-l i { width: 16px; border-top: 2px dashed #94A3B8; }
.fi-plot { position: relative; height: 150px; margin-left: 40px; }
.fi-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fi-gl { stroke: #EEF0F3; stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.fi-goal { stroke: #94A3B8; stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; fill: none; }
.fi-line { fill: none; stroke: var(--app); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fi-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--app); box-shadow: 0 0 0 3px #fff, 0 0 0 6px color-mix(in srgb, var(--app) 25%, transparent); }
.fi-yl { position: absolute; right: calc(100% + 8px); transform: translateY(-50%); font-size: 12px; color: #566173; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fi-xl { display: flex; justify-content: space-between; margin: 8px 0 0 40px; font-size: 12px; color: #566173; }
.fi-xl span:last-child { color: var(--app-ink); font-weight: 600; }

/* Version compacte */
.fi-grid.is-compact .fi-cap-r { display: none; }
.fi-grid.is-compact .fi-row { min-height: 54px; }
.fi-grid.is-compact .fi-mails { grid-template-columns: 1fr; }

@container app (max-width: 760px) {
  .fi-table { --cols: 44px minmax(0, 1.7fr) minmax(90px, 1fr) 84px 140px 40px; }
  .fi-head > span:nth-child(3), .fi-inv { display: none; }
}
@container app (max-width: 820px) {
  .fi-bottom { grid-template-columns: 1fr; }
}
@container app (max-width: 560px) {
  .fi-head { display: none; }
  .fi-cap-r { display: none; }
  .fi-table, .fi-table.is-compact { --cols: 40px minmax(0, 1fr) auto; }
  .fi-row { grid-template-areas: "ck who amt" "ck age age" "ck st btn"; gap: 6px 10px; padding: 10px 12px 10px 2px; }
  .fi-row .fi-check { grid-area: ck; align-self: start; }
  .fi-row .fi-who { grid-area: who; } .fi-row .fi-amt { grid-area: amt; }
  .fi-row .fi-age { grid-area: age; } .fi-row .fi-st { grid-area: st; }
  .fi-row .fi-paid, .fi-row .fi-paid-ph { grid-area: btn; justify-self: end; }
  .fi-row .fi-logo { width: 30px !important; height: 30px !important; font-size: 12px; }
  .fi-row .av { display: inline-grid; }
  .fi-table.is-compact .fi-age-t { display: block; }
  .fi-age { flex-direction: row; align-items: center; gap: 8px; }
  .fi-age-t { flex: none; }
  .fi-age-b { flex: 1; }
  .fi-plot { margin-left: 34px; height: 130px; }
  .fi-xl { margin-left: 34px; }
  .fi-xl span:nth-child(2) { display: none; }
  .fi-card-h { flex-direction: column; }
}
.fi-aging { display: flex; flex-direction: column; }
.fi-oldest { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: auto; padding: 10px 12px; border-radius: 12px; background: #FEF2F2; border: 1px solid #FECACA; }
.fi-aging ul + .fi-oldest, .fi-aging ul + .fi-none { margin-top: 14px; }
.fi-oldest > span:not(.fi-logo) { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fi-oldest b { font-size: 13px; color: var(--t-danger); }
.fi-oldest > span > span { font-size: 12px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-oldest strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.fi-none { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: #334155; background: var(--t-ok-s); border-radius: 12px; padding: 10px 12px; }
.fi-none .ic { color: var(--t-ok); }

/* ==========================================================================
   Prototype Immobilier « Mandats » : annonces, fiche du bien, rapprochement
   ========================================================================== */
[data-theme-app="immobilier"] { --im-line: #E8EAEF; --im-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
[data-theme-app="immobilier"] .kpi { border-color: var(--im-line); box-shadow: var(--im-shadow); }
.im-img { display: block; width: 100%; height: 100%; object-fit: cover; background: #E2E8F0; }

/* ---------- Cartes d'annonce ---------- */
.im-props { gap: 14px; }
.im-card { border-color: var(--im-line); box-shadow: var(--im-shadow); border-radius: 14px; }
.im-card:hover { box-shadow: 0 14px 30px -18px rgba(15, 23, 42, .45); }
.im-card:hover .im-ph img { transform: scale(1.04); }
.im-card.is-sel { border-color: var(--app-ink); box-shadow: 0 0 0 1px var(--app-ink), 0 14px 30px -20px var(--app-ink); }
.im-ph { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #E2E8F0; }
.im-ph img { transition: transform .5s var(--ease); }
.im-ph-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.im-ph-top .pill { box-shadow: 0 2px 6px rgba(15, 23, 42, .18); }
.im-ph-top .dpe { box-shadow: 0 2px 6px rgba(15, 23, 42, .18); }
.im-ph-bot { position: absolute; inset: auto 0 0 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 36px 12px 10px; color: #fff; background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, .86) 62%); }
.im-ph-bot strong { font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.im-ph-bot span { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.im-card-b { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.im-card-t { font-size: 14px; font-weight: 650; color: #0F172A; line-height: 1.3; }
.im-card-m { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: #475569; }
.im-card-m span { display: inline-flex; align-items: center; gap: 4px; }
.im-card-m span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: #94A3B8; margin-right: 6px; }
.im-card-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: #566173; margin-top: 2px; }
.im-card-f .ic { flex: none; }
.im-card-f > span { display: inline-flex; align-items: center; gap: 3px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-card-f em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--app-ink); background: var(--app-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* ---------- Fiche du bien ---------- */
.im-detail { padding: 10px; border-color: var(--im-line); box-shadow: var(--im-shadow); border-radius: 16px; }
.im-hero { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #E2E8F0; }
.im-hero .d-photo { height: 100%; }
.im-hero-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.im-hero-top .pill { box-shadow: 0 2px 6px rgba(15, 23, 42, .2); }
.im-chip { font-size: 12px; font-weight: 700; color: #fff; background: rgba(15, 23, 42, .78); border-radius: 999px; padding: 4px 10px; backdrop-filter: blur(4px); font-variant-numeric: tabular-nums; }
.im-detail-b { padding: 12px 6px 6px; }
.im-detail-h h3 { font-size: 18px; line-height: 1.25; }
.im-price b { font-variant-numeric: tabular-nums; }
.im-facts li { background: #F4F6F8; }
.im-energy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px solid #ECEEF2; border-radius: 12px; }
.im-energy-l { display: flex; flex-direction: column; font-size: 12px; color: #566173; line-height: 1.3; }
.im-energy-l b { font-size: 14px; color: #0F172A; font-variant-numeric: tabular-nums; }
.im-dpe { display: inline-flex; align-items: flex-end; gap: 3px; }
.im-dpe i { width: 16px; height: 12px; border-radius: 3px; background: var(--dpe); opacity: .4; font-style: normal; }
.im-dpe i.is-on { width: 28px; height: 26px; opacity: 1; display: grid; place-items: center; font-size: 13px; font-weight: 800; border-radius: 6px; box-shadow: 0 2px 6px rgba(15, 23, 42, .2); }
.im-offer { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--t-violet); background: var(--t-violet-s); border-radius: 999px; padding: 8px 14px; }

/* ---------- Acquéreurs et rapprochement ---------- */
.im-buyers, .im-agenda { border-color: var(--im-line); box-shadow: var(--im-shadow); }
.im-buyers-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.im-sort { font-size: 12px; color: #566173; }
.im-buyer { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av t ring" ". a ring"; gap: 4px 12px; padding: 12px; border-color: #ECEEF2; }
.im-buyer > .av { grid-area: av; align-self: start; }
.im-buyer-t { grid-area: t; gap: 1px; }
.im-buyer-t strong { font-size: 14px; }
.im-buyer .im-ring { grid-area: ring; align-self: center; }
.im-buyer-a { grid-area: a; display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.im-buyer > .d-btn, .im-buyer > .pill { grid-column: auto; }
.im-crit { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.im-crit span { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 8px 2px 6px; }
.im-crit .is-ok { color: var(--t-ok); background: var(--t-ok-s); }
.im-crit .is-ko { color: #475569; background: #F1F3F6; }
.im-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.im-ring svg { position: absolute; inset: 0; }
.im-ring b { position: relative; font-size: 12px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #0F172A; white-space: nowrap; }

/* Agenda des visites */
.im-agenda ul { gap: 8px; }
.im-agenda li { gap: 12px; padding: 6px 0; border-top: 1px solid #F1F3F6; }
.im-agenda li:first-child { border-top: 0; padding-top: 0; }
.im-day { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; flex: none; border-radius: 10px; background: var(--app-soft); color: var(--app-ink); padding: 4px 0; line-height: 1.2; }
.im-day b { font-size: 13px; }
.im-day span { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.im-agenda-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.im-agenda-t b { font-size: 14px; }
.im-agenda-t span { font-size: 12px; color: #566173; }
.im-agenda-ph { width: 56px; height: 40px; border-radius: 8px; flex: none; }
.im-agenda .d-ref { margin-left: 0; }

/* ---------- Version compacte (accueil) ---------- */
.im-wrap.is-compact .kpis { margin-bottom: 14px; gap: 10px; }
.im-wrap.is-compact .kpi { flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; }
.im-wrap.is-compact .kpi-top { margin: 0; gap: 8px; order: 0; }
.im-wrap.is-compact .kpi-row { order: 1; }
.im-wrap.is-compact .kpi-v { font-size: 22px; }
.im-wrap.is-compact .kpi-l { order: 2; line-height: 1.25; }
.im-wrap.is-compact .kpi-d { position: absolute; top: 8px; right: 8px; }
.im-grid.is-compact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; }
.im-grid.is-compact .im-hero { aspect-ratio: auto; height: 190px; }
.im-grid.is-compact .im-buyers { padding: 12px; }
.im-grid.is-compact .im-buyer { padding: 10px; gap: 2px 10px; }
.im-grid.is-compact .im-buyer-a { margin-top: 4px; }

/* Vignettes de biens (accueil) */
.im-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.im-mini { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 4px; text-align: left; color: inherit; background: #fff; border: 1px solid #E4E6EB; border-radius: 10px; transition: border-color var(--t), box-shadow var(--t); }
.im-mini:hover { border-color: var(--app-line); }
.im-mini.is-sel { border-color: var(--app-ink); box-shadow: 0 0 0 1px var(--app-ink); }
.im-mini .im-img { width: 44px; height: 36px; border-radius: 7px; flex: none; }
.im-mini > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.im-mini b { font-size: 13px; font-variant-numeric: tabular-nums; }
.im-mini span span { font-size: 12px; color: #566173; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-grid.is-compact .im-facts { margin-top: 10px; }

/* ---------- Adaptation à la largeur ---------- */
@container app (max-width: 820px) {
  .im-grid.is-compact { grid-template-columns: 1fr; }
  .im-hero { aspect-ratio: auto; height: 300px; }
}
@container app (max-width: 560px) {
  /* Annonces : bandeau horizontal à faire défiler au doigt */
  .im-props { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -12px 16px; padding: 0 12px 6px; }
  .im-card { flex: 0 0 78%; scroll-snap-align: start; }
  .im-hero, .im-grid.is-compact .im-hero { aspect-ratio: 16 / 10; height: auto; }
  .im-buyer { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av t ring" "a a a"; }
  .im-buyer-a { margin-top: 8px; }
  .im-buyer-a > .d-btn { width: 100%; }
  .im-wrap.is-compact .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .im-wrap.is-compact .kpi { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; }
  .im-wrap.is-compact .kpi-top { display: none; }
  .im-energy { flex-direction: column; align-items: flex-start; }
  .im-sort { display: none; }
  .im-mini { flex-direction: column; align-items: stretch; gap: 4px; }
  .im-mini .im-img { width: 100%; height: 52px; }
  .im-mini > span { padding: 0 2px 2px; }
}


/* ---------- Industrie (Atelier 4.0) : MES, machines, ordres de fabrication, qualité ---------- */
.in-root { display: flex; flex-direction: column; }
.in-root .kpi, .in-root .d-panel { border-color: #E8EAEF; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.in-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.in-sec-h .d-h { margin: 0; }
.in-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--t-ok); }
.in-live i { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }

/* Indicateurs compacts (version accueil) */
.in-root.is-compact .kpis { margin-bottom: 14px; gap: 10px; }
@container app (min-width: 561px) {
  .in-root.is-compact .kpi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic v d" "ic l d"; align-items: center; column-gap: 12px; padding: 10px 14px; }
  .in-root.is-compact .kpi-top { display: contents; }
  .in-root.is-compact .kpi-ic { grid-area: ic; width: 36px; height: 36px; }
  .in-root.is-compact .kpi-d { grid-area: d; }
  .in-root.is-compact .kpi-row { grid-area: v; }
  .in-root.is-compact .kpi-l { grid-area: l; }
  .in-root.is-compact .kpi-v { font-size: 22px; }
}

/* Cartes machines avec photo */
.in-root .in-machines { gap: 12px; margin-bottom: 18px; }
.in-root .in-m { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border: 1px solid #E8EAEF; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.in-m-ph { position: relative; height: 112px; background: #E2E8F0; }
.in-m-ph .d-photo { height: 100%; transition: filter .4s; }
.in-m-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, .28), transparent 45%); pointer-events: none; }
.in-m.is-arret .in-m-ph .d-photo { filter: grayscale(.85) brightness(.95); }
.in-m-state { position: absolute; top: 9px; left: 9px; z-index: 1; }
.in-m-state .pill { box-shadow: 0 2px 8px rgba(15, 23, 42, .18); }
.in-m-state .pill-neutral { background: #fff; }
.in-root .in-m > .in-m-b { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; min-width: 0; }
.in-m-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.in-root .in-m-h b { font-size: 15px; letter-spacing: -.01em; }
.in-m-k { display: flex; align-items: center; gap: 12px; }
.in-m-kv { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.in-root .in-m-kv i { font-size: 12px; color: #566173; }
.in-root .in-m-kv b { font-size: 13px; font-variant-numeric: tabular-nums; }
.in-trs { margin-left: auto; text-align: right; }
.in-root .in-trs b { font-size: 17px; letter-spacing: -.02em; }
.in-m-of { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #475569; border-top: 1px solid #F0F1F4; padding-top: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-m-of .ic { flex: none; color: var(--app-ink); }
.in-m.is-maintenance .in-m-of .ic { color: var(--t-warn); }
.in-m .donut-c b { font-size: 13px; }

/* Machines en version accueil : vignette, nom, état, anneau de charge */
.in-root .in-machines.is-compact { margin-bottom: 14px; gap: 10px; }
.in-root .in-machines.is-compact .in-m { flex-direction: row; align-items: center; gap: 10px; padding: 9px 10px; }
.in-machines.is-compact .in-m-ph { width: 46px; height: 46px; flex: none; border-radius: 10px; overflow: hidden; }
.in-machines.is-compact .in-m-ph::after { display: none; }
.in-root .in-machines.is-compact .in-m > .in-m-b { padding: 0; gap: 2px; flex: 1; }
.in-machines.is-compact .in-m-h { flex-direction: column; align-items: flex-start; gap: 1px; }
.in-root .in-machines.is-compact .in-m-h b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.in-m-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--t-ok); white-space: nowrap; }
.in-m-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.in-m.is-arret .in-m-st { color: #475569; }
.in-m.is-maintenance .in-m-st { color: var(--t-warn); }

/* Tableau des ordres de fabrication */
.in-table { background: #fff; border: 1px solid #E8EAEF; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.in-pipe { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #ECEEF2; }
.in-pipe li { display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-size: 13px; font-weight: 600; color: #334155; position: relative; }
.in-pipe li + li { border-left: 1px solid #ECEEF2; }
.in-pipe b { margin-left: auto; font-size: 16px; font-variant-numeric: tabular-nums; color: #0F172A; }
.in-pipe .pill-dot.pill-warn { color: var(--t-warn-c); } .in-pipe .pill-dot.pill-danger { color: var(--t-danger-c); }
.in-of-head, .in-root .in-of { display: grid; grid-template-columns: minmax(0, 2.3fr) 64px minmax(0, 1.2fr) minmax(0, 1.1fr) 132px; align-items: center; gap: 12px; }
.in-of-head { padding: 9px 16px; background: #FAFBFC; border-bottom: 1px solid #ECEEF2; font-size: 12px; font-weight: 600; color: #566173; }
.in-of-list { display: flex; flex-direction: column; }
.in-root .in-of { min-height: 60px; padding: 10px 16px; border: 0; border-bottom: 1px solid #F0F1F4; border-radius: 0; box-shadow: none; background: #fff; }
.in-root .in-of:last-child { border-bottom: 0; }
.in-root .in-of:hover { background: #FAFBFC; box-shadow: none; }
.in-root .in-of.is-sel { background: color-mix(in srgb, var(--app) 7%, #fff); box-shadow: inset 3px 0 0 var(--app-ink); }
.in-root .in-of:focus-visible { outline-offset: -3px; }
.in-of-t { display: flex; flex-direction: column; min-width: 0; }
.in-of-t strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-of-t span { font-size: 12px; color: #566173; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-of-q { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.in-of-m { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 500; }
.in-of-m > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-of-ph { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; flex: none; background: #E2E8F0; }
.in-prog { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.in-prog b { font-size: 12px; font-variant-numeric: tabular-nums; color: #334155; text-align: right; }
.in-dash { font-size: 12px; color: #566173; }
.in-of .pill { justify-self: start; }
.in-of.is-nc { background: #FFF7F7; }

/* Panneau de l'ordre sélectionné et panneau qualité */
.in-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.in-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.in-root.is-compact .in-dl { grid-template-columns: 1fr 1fr; }
.in-root .d-chip > span { gap: 8px; padding-left: 6px; }
.in-chip-ph { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.in-q { background: #fff; border: 1px solid #E8EAEF; border-radius: 16px; padding: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.in-q-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.in-q-h .d-h { margin: 0; }
.in-q-rule { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #475569; font-weight: 600; }
.in-q-rule em { width: 2px; height: 12px; background: #0F172A; border-radius: 1px; }
.in-q-list, .in-nc-list { list-style: none; display: flex; flex-direction: column; }
.in-q-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 52px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #F0F1F4; }
.in-q-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.in-q-t b { font-size: 13px; font-variant-numeric: tabular-nums; }
.in-q-t i { font-style: normal; font-size: 12px; color: #566173; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-q-bar { position: relative; height: 8px; border-radius: 4px; background: #EEF0F3; }
.in-q-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--t-ok-c); }
.in-q-bar em { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #0F172A; border-radius: 1px; }
.in-q-row.is-bad .in-q-bar i { background: var(--t-danger-c); }
.in-q-v { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--t-ok); }
.in-q-row.is-bad .in-q-v { color: var(--t-danger); }
.in-q-wait { grid-column: 2 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--t-blue); background: var(--t-blue-s); border-radius: 999px; padding: 3px 9px; }
.in-q-sub { font-size: 13px; font-weight: 650; color: #334155; margin: 14px 0 8px; font-family: var(--font); letter-spacing: 0; }
.in-nc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #FFF7F7; border: 1px solid #FBCACA; }
.in-nc + .in-nc { margin-top: 6px; }
.in-nc-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--t-danger-s); color: var(--t-danger); }
.in-nc-t, .in-nc-empty > span { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.in-nc-t b, .in-nc-empty b { font-size: 13px; }
.in-nc-t i, .in-nc-empty i { font-style: normal; font-size: 12px; color: #566173; }
.in-nc-empty { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px dashed #CBD5E1; }
.in-nc-empty > .ic { flex: none; color: var(--t-ok); }
.in-nc-empty.is-wait { border-color: #FBCACA; background: #FFFBFB; }
.in-nc-empty.is-wait > .ic { color: var(--t-danger); }

/* Version accueil : ordres à traiter à gauche, panneau à droite */
.in-layout.is-compact { margin-top: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.in-layout.is-compact .in-of { grid-template-columns: minmax(0, 1fr) auto; min-height: 58px; }
.in-root.is-compact .d-panel { padding: 14px 16px; }
.in-root.is-compact .d-panel-head { margin-bottom: 10px; }

@container app (max-width: 1040px) {
  .in-of-head, .in-root .in-of { grid-template-columns: minmax(0, 2fr) 56px minmax(0, 1.1fr) minmax(0, 1fr) 128px; gap: 10px; }
}
@container app (max-width: 820px) {
  .in-layout, .in-layout.is-compact { grid-template-columns: 1fr; }
  .in-layout.is-compact > .d-panel { order: -1; }
  .in-of-head { display: none; }
  .in-root .in-of { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t pill" "m prog"; gap: 6px 12px; }
  .in-of-t { grid-area: t; } .in-of .pill { grid-area: pill; justify-self: end; } .in-of-m { grid-area: m; } .in-of .in-prog, .in-of > .in-dash { grid-area: prog; min-width: 120px; }
  .in-of-q { display: none; }
  .in-layout.is-compact .in-of { grid-template-areas: "t pill"; }
  .in-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-pipe li:nth-child(3) { border-left: 0; }
  .in-pipe li:nth-child(n + 3) { border-top: 1px solid #ECEEF2; }
}
@container app (max-width: 560px) {
  .in-root .in-machines { grid-template-columns: 1fr 1fr; gap: 8px; }
  .in-root .in-m { padding: 0; gap: 0; }
  .in-m-ph { height: 84px; }
  .in-root .in-m > .in-m-b { padding: 10px; gap: 8px; }
  .in-m-k .in-m-kv:not(.in-trs) { display: none; }
  .in-m-k { gap: 8px; }
  .in-m-h .d-ref { display: none; }
  .in-root .in-machines.is-compact .in-m { padding: 8px; gap: 8px; }
  .in-machines.is-compact .in-m-ph { width: 40px; height: 40px; }
  .in-root .in-machines.is-compact .donut { display: none; }
  .in-sec-h .in-live { display: none; }
  .in-dl, .in-root.is-compact .in-dl { grid-template-columns: 1fr 1fr; }
  .in-q-row { grid-template-columns: minmax(0, 1fr) 70px 46px; gap: 8px; }
  .in-root .d-chip > span { padding-right: 12px; }
}
@container app (max-width: 560px) {
  .in-of-t strong { white-space: normal; }
}
.in-root .kpi-d { white-space: nowrap; }

/* ---------- Logistique · Tournées (carte, chauffeur, timeline des arrêts) ---------- */
.lg-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.lg-side { gap: 14px; }

/* Carte */
.lg-map { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid #E2DED5; background: #ECE8DF; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.lg-map svg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 320; font-family: inherit; }
.m-land { fill: #EDE9E1; }
.m-park path, .m-park rect { fill: #D2E8C3; }
.m-st-c path, .m-st path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-st-c path { stroke: #DAD4C7; stroke-width: 9; }
.m-st path { stroke: #fff; stroke-width: 6.5; }
.m-av-c { stroke: #E2C26C; stroke-width: 13; fill: none; stroke-linecap: round; }
.m-av { stroke: #FCE7A6; stroke-width: 10; fill: none; stroke-linecap: round; }
.m-place { fill: #fff; stroke: #DAD4C7; stroke-width: 2; }
.m-rail { stroke: #A8A29E; stroke-width: 3.4; fill: none; }
.m-rail-t { stroke: #fff; stroke-width: 1.6; stroke-dasharray: 6 6; fill: none; }
.m-gare { fill: #D6D0C4; stroke: #BDB5A6; }
.m-river-b { fill: none; stroke: #93C5E8; stroke-width: 34; stroke-linecap: butt; }
.m-river { fill: none; stroke: #AFD6F1; stroke-width: 29; stroke-linecap: butt; }
.m-isle { fill: #D3E8C4; stroke: #B9D5A6; stroke-width: 1.5; }
.m-bridge-c { stroke: #CFC7B8; stroke-width: 11; fill: none; }
.m-bridge { stroke: #fff; stroke-width: 7.5; fill: none; }
.m-shadow { fill: rgba(44, 66, 32, .26); }
.m-pine { fill: #79B068; }
.m-pine-l { fill: #A0CC8C; }
.m-lbl, .m-lbl text { font-size: 12px; font-weight: 600; fill: #6B6356; paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: 3px; stroke-linejoin: round; letter-spacing: .02em; text-anchor: middle; }
.m-water { font-style: italic; fill: #2F6F9F; stroke: #AFD6F1; letter-spacing: .12em; }
.m-route-c { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.m-route-todo { fill: none; stroke: #7C8BA3; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .5 8; }
.m-route-done { fill: none; stroke: var(--app); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.m-depot { fill: #0F172A; stroke: #fff; stroke-width: 2.5; }
.m-lbl-b { font-size: 12px; font-weight: 700; fill: #0F172A; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.m-pin-sh { fill: rgba(15, 23, 42, .28); }
.m-pin-n { font-size: 12px; font-weight: 800; fill: #fff; }
.m-halo { fill: var(--app); opacity: .2; transform-box: fill-box; transform-origin: center; animation: lg-halo 2s var(--ease) infinite; }
@keyframes lg-halo { 0% { transform: scale(.7); opacity: .35; } 100% { transform: scale(1.35); opacity: 0; } }
.lg-pulse > path { animation: lg-pop 1.2s var(--ease); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes lg-pop { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* Habillage de la carte (puces HTML) */
.lg-live, .lg-compass, .lg-scale, .lg-chip { position: absolute; z-index: 1; font-size: 12px; background: #fff; color: #334155; box-shadow: 0 2px 6px rgba(15, 23, 42, .15); }
.lg-live { left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #0F172A; border-radius: 999px; padding: 4px 10px; }
.lg-live i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); animation: lg-blink 1.6s ease-in-out infinite; }
@keyframes lg-blink { 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, .05); } }
.lg-compass { right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #B91C1C; }
.lg-scale { right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 2px 8px; font-weight: 600; }
.lg-scale i { width: 40px; height: 6px; border: 2px solid #334155; border-top: 0; }

/* Timeline des arrêts */
.lg-list { border-color: #E8EAEF; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.lg-list-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.lg-list-h .d-h { margin: 0; }
.lg-list-h > span { font-size: 12px; color: #566173; }
.lg-stops { gap: 0; }
.lg-stops li { grid-template-columns: 58px 30px minmax(0, 1fr) auto; gap: 10px; padding: 0 8px; min-height: 58px; border-radius: 12px; }
.lg-stops li.is-en_cours { background: var(--app-soft); }
.lg-when { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.lg-when b { font-size: 14px; font-variant-numeric: tabular-nums; }
.lg-when b.is-late { color: var(--t-danger); }
.lg-when b.is-past { color: #566173; }
.lg-when i { font-style: normal; font-size: 12px; color: #566173; }
.lg-rail { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.lg-rail::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: #E2E8F0; }
.lg-stops li:first-child .lg-rail::before { top: 50%; }
.lg-stops li:last-child .lg-rail::before { bottom: 50%; }
.lg-stops li.is-livre .lg-rail::before, .lg-stops li.is-echec .lg-rail::before, .lg-stops li.is-reporte .lg-rail::before { background: color-mix(in srgb, var(--app) 55%, #fff); }
.lg-n { position: relative; z-index: 1; width: 28px; height: 28px; box-shadow: 0 0 0 3px #fff; }
.is-en_cours .lg-n { box-shadow: 0 0 0 3px #fff, 0 0 0 6px color-mix(in srgb, var(--app) 30%, transparent); }
.lg-t { padding: 8px 0; }
.lg-t span { white-space: normal; }

/* Carte chauffeur et véhicule */
.lg-driver { background: #fff; border: 1px solid #E8EAEF; border-radius: 16px; padding: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); display: flex; flex-direction: column; gap: 12px; }
.lg-van { position: relative; border-radius: 12px; overflow: hidden; background: #E2E8F0; }
.lg-van-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.lg-plate { display: inline-flex; align-items: stretch; gap: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #0F172A; background: #fff; border: 1.5px solid #1F2937; border-radius: 4px; overflow: hidden; line-height: 1.5; font-variant-numeric: tabular-nums; vertical-align: middle; }
.lg-plate i { font-style: normal; background: #1D4ED8; color: #fff; padding: 0 4px; margin-right: 5px; font-size: 12px; }
.lg-plate { padding-right: 6px; }
.lg-plate-on { position: absolute; left: 10px; bottom: 10px; box-shadow: 0 2px 8px rgba(15, 23, 42, .35); }
.lg-drv { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lg-drv-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.lg-drv-t b { font-size: 15px; }
.lg-drv-t span { font-size: 13px; color: #566173; }
.lg-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; background: var(--canvas); border-radius: 12px; padding: 10px 12px; }
.lg-specs dt { font-size: 12px; color: #566173; }
.lg-specs dd { margin: 0; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.lg-driver .prog { margin-top: -4px; }
.lg-driver.is-mini { gap: 8px; }
.lg-drv-v { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: #475569; }

/* Échecs */
.lg-fail { border-radius: 14px; }

@container app (max-width: 820px) {
  .lg-grid { grid-template-columns: 1fr; }
  .lg-left { display: contents; }
  .lg-map { order: 1; } .lg-side { order: 2; } .lg-list { order: 3; }
}
@container app (max-width: 560px) {
  .m-lbl text, .m-water { display: none; }
  .lg-scale em { display: none; }
  .lg-stops li.is-planifie .lg-eta, .lg-stops li.is-livre .lg-eta { display: none; }
  .lg-stops li { grid-template-columns: 48px 28px minmax(0, 1fr); padding: 0 4px; }
  .lg-eta { grid-column: 3; justify-self: start; margin: -6px 0 8px; }
  .lg-t span { font-size: 12px; }
}
.lg-scale em { font-style: normal; font-weight: 500; color: #566173; }
.lg-chip { left: 10px; top: 46px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 3px 10px 3px 3px; color: #0F172A; }
.lg-chip > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lg-chip .lg-plate { line-height: 1.3; }

/* ---------- Restauration · Service+ (plan de salle et réservations) ---------- */
.rs-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.rs-plan { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rs-plan-card, .rs-chef { background: #fff; border: 1px solid #E8EAEF; border-radius: 16px; padding: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.rs-list-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rs-list-h .d-h { margin: 0; }
.rs-list-h > span { font-size: 12px; color: #566173; }

/* Bandeau photo de la salle (version complète) */
.rs-banner { position: relative; height: 124px; border-radius: 16px; overflow: hidden; margin-bottom: 16px; background: #2A1E17; }
.rs-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.rs-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 12, 8, .9) 0%, rgba(20, 12, 8, .72) 45%, rgba(20, 12, 8, .15) 100%); }
.rs-banner-t { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 16px 22px; color: #fff; }
.rs-banner-t strong { font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
.rs-banner-t > span:last-child { font-size: 14px; color: rgba(255, 255, 255, .88); }
.rs-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 2px 10px; }
.rs-live i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .3); }

/* Salle : murs, parquet, vitrine, bar, cuisine */
.rs-room { container-type: inline-size; position: relative; aspect-ratio: 16 / 10.4; border-radius: 16px; border: 0; background: #3E3530; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.rs-floor { position: absolute; inset: 1.4cqw; border-radius: 10px; background:
  repeating-linear-gradient(90deg, transparent 0 15.8cqw, rgba(120, 82, 46, .14) 15.8cqw calc(15.8cqw + 1px)),
  repeating-linear-gradient(180deg, #F3E6D2 0 3.1cqw, #EFDFC7 3.1cqw 6.2cqw);
  box-shadow: inset 0 0 18px rgba(80, 50, 25, .18); }
.rs-win { position: absolute; top: 0; width: 15%; height: 1.4cqw; background: linear-gradient(180deg, #CFEAF8, #9CD1EE); border-left: 2px solid #3E3530; border-right: 2px solid #3E3530; }
.rs-zone { position: absolute; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: grid; place-items: center; border-radius: 0; }
.rs-kitchen { right: 1.4cqw; top: 1.4cqw; width: 15%; height: 15%; color: #334155; background: repeating-linear-gradient(45deg, #E5E7EB 0 6px, #EEF0F3 6px 12px); border-left: 2px solid #CBD5E1; border-bottom: 2px solid #CBD5E1; border-radius: 0 9px 0 10px; }
.rs-bar { left: 25%; right: 25%; bottom: 1.4cqw; top: auto; height: 7cqw; color: #fff; background: linear-gradient(180deg, #7A563A, #5B3F2A); border-radius: 10px 10px 0 0; box-shadow: 0 -3px 8px -4px rgba(60, 35, 15, .5); }
.rs-stools { position: absolute; left: 6%; right: 6%; top: -4cqw; display: flex; justify-content: space-between; }
.rs-stools i { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #A88566, #6B4D35); box-shadow: 0 2px 4px rgba(60, 35, 15, .35); }
.rs-door { left: calc(1.4cqw + 6px); right: auto; top: 73%; width: auto; height: auto; padding: 3px 8px; writing-mode: horizontal-tb; color: #5F4A37; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(60, 35, 15, .25); }
.rs-door::before { content: ""; position: absolute; left: calc(-1.4cqw - 6px); top: -50%; height: 200%; width: 1.4cqw; background: #F3E6D2; }
.rs-plant { position: absolute; width: 5.2cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #2F6B34 0 22%, transparent 23%), conic-gradient(from 20deg, #5FA35A, #3F8540, #74B86A, #3F8540, #5FA35A, #3F8540, #74B86A, #3F8540, #5FA35A); box-shadow: 0 3px 6px rgba(0, 0, 0, .28); }

/* Tables : plateau + chaises, couleur selon l'état */
.rs-t, .rs-t.rs-round, .rs-t.rs-rect, .rs-t.rs-long, .rs-t.rs-big { position: absolute; translate: -50% -50%; width: calc(var(--w) * 1cqw); height: calc(var(--h) * 1cqw); aspect-ratio: auto; min-width: 0; min-height: 0; padding: 0; display: block; border: 0; border-radius: 12px; background: transparent; box-shadow: none; transition: none; }
.rs-t.is-free, .rs-t.is-res, .rs-t.is-occ, .rs-t.is-fit, .rs-t.is-sugg { background: transparent; border: 0; box-shadow: none; }
.rs-t:hover { transform: none; box-shadow: none; }
.rs-t:focus-visible { outline: 3px solid var(--app-ink); outline-offset: 3px; }
.rs-top { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; width: calc(var(--tw) * 1cqw); height: calc(var(--th) * 1cqw); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; background: #fff; color: #0F172A; border: 2px solid #D6C6B2; border-radius: 10px; box-shadow: 0 7px 12px -7px rgba(70, 45, 20, .55); transition: translate .15s var(--ease), box-shadow .2s, background .2s, border-color .2s; }
.rs-round .rs-top, .rs-big .rs-top { border-radius: 50%; }
.rs-t:hover .rs-top { translate: -50% calc(-50% - 2px); box-shadow: 0 12px 18px -10px rgba(70, 45, 20, .6); }
.rs-t b { font-size: 15px; line-height: 1; }
.rs-t i, .rs-top i { font-style: normal; font-size: 12px; color: #566173; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-ch { position: absolute; width: 4.4cqw; height: 2.6cqw; translate: -50% -50%; border-radius: 1.2cqw 1.2cqw .5cqw .5cqw; background: #E6D8C6; border: 1px solid #CDB9A1; transition: background .2s, border-color .2s; }
.rs-t.is-fit .rs-top { border-color: var(--t-ok-c); box-shadow: 0 0 0 .8cqw #BBF7D0, 0 7px 12px -7px rgba(70, 45, 20, .55); }
.rs-t.is-fit .rs-ch { background: #DCFCE7; border-color: #86EFAC; }
.rs-t.is-res .rs-top { background: #FFE4E8; border-color: var(--app); }
.rs-t.is-res .rs-top i { color: var(--app-ink); font-weight: 600; }
.rs-t.is-res .rs-ch { background: #FECDD6; border-color: #FB9FB1; }
.rs-t.is-occ .rs-top { background: #1E293B; border-color: #0F172A; color: #fff; }
.rs-t.is-occ .rs-top i { color: #E2E8F0; }
.rs-t.is-occ .rs-ch { background: #64748B; border-color: #475569; }
.rs-t.is-sugg .rs-top { border-color: var(--t-ok); box-shadow: 0 0 0 .8cqw #BBF7D0, 0 0 0 1.3cqw var(--t-ok-c); animation: rs-pulse 1.6s var(--ease) infinite; }
.rs-t.is-hl .rs-top { animation: hl 1.6s var(--ease); }
.rs-t.is-hl { animation: none; }
@keyframes rs-pulse { 50% { box-shadow: 0 0 0 .8cqw #BBF7D0, 0 0 0 1.8cqw rgba(34, 197, 94, .35); } }

.rs-legend { margin-top: 12px; gap: 6px 16px; }
.rs-legend i { width: 14px; height: 14px; border-radius: 5px; border: 2px solid #D6C6B2; background: #fff; }
.rs-legend .is-free { background: #fff; border-color: #D6C6B2; }
.rs-legend .is-fit { background: #fff; border-color: var(--t-ok-c); box-shadow: 0 0 0 2px #BBF7D0; }
.rs-legend .is-res { background: #FFE4E8; border-color: var(--app); }
.rs-legend .is-occ { background: #1E293B; border-color: #0F172A; }

/* Ardoise du chef */
.rs-chef ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rs-chef li { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rs-dish-img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 12px; background: #F1F3F6; }
.rs-dish-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rs-dish-t em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--app-ink); text-transform: uppercase; letter-spacing: .05em; }
.rs-dish-t strong { font-size: 14px; line-height: 1.3; }
.rs-dish-t > span { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 2px; }
.rs-dish-t b { font-size: 16px; font-variant-numeric: tabular-nums; }
.rs-dish-t i { font-style: normal; font-size: 12px; color: #566173; }

/* Réservations */
.rs-side { gap: 14px; }
.rs-list .d-list { gap: 8px; }
.rs-resa { padding: 10px 12px; }
.rs-resa.is-in { background: #FAFBFC; }
.rs-resa.is-in .d-card-t strong { color: #475569; }
.rs-time { font-size: 13px; padding: 6px 9px; border-radius: 10px; min-width: 64px; text-align: center; }
.rs-tags { display: flex; align-items: center; gap: 6px; flex: none; }
.rs-cov { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #334155; background: #F1F5F9; border-radius: 999px; padding: 3px 9px; font-variant-numeric: tabular-nums; }
.rs-panel .d-panel-head { margin-bottom: 12px; }

@container app (max-width: 1040px) {
  .rs-tags { flex-direction: column; align-items: flex-end; gap: 4px; }
}
@container app (max-width: 820px) {
  .rs-grid { grid-template-columns: 1fr; }
  .rs-tags { flex-direction: row; align-items: center; gap: 6px; }
}
@container app (max-width: 560px) {
  .rs-room { aspect-ratio: 4 / 3.2; }
  .rs-t i, .rs-top i { display: none; }
  .rs-door, .rs-kitchen { display: none; }
  .rs-plant { display: none; }
  .rs-banner { height: 132px; }
  .rs-banner-t { padding: 14px 16px; }
  .rs-banner-t strong { font-size: 17px; }
  .rs-chef ul { grid-template-columns: 1fr; gap: 10px; }
  .rs-chef li { flex-direction: row; align-items: center; gap: 12px; }
  .rs-dish-img { width: 84px; flex: none; aspect-ratio: 1; }
  .rs-dish-t { flex: 1; }
  .rs-tags { flex-direction: column; align-items: flex-end; gap: 4px; }
  .rs-time { min-width: 0; }
}
@container app (max-width: 820px) {
  .rs-plan { display: contents; }
  .rs-plan-card { order: 1; } .rs-side { order: 2; } .rs-chef { order: 3; }
}
@container app (min-width: 561px) {
  .rs-grid.is-compact .rs-tags { flex-direction: row; align-items: center; gap: 6px; }
}
.rs-grid.is-compact .rs-room { aspect-ratio: 16 / 9.8; }

/* ---------- RH (Équipe+) : congés, planning d'équipe, soldes ---------- */
.rh-root { display: flex; flex-direction: column; }
.rh-root .kpi, .rh-root .d-panel { border-color: #E8EAEF; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }

/* Indicateurs compacts (version accueil) */
.rh-root.is-compact .kpis { margin-bottom: 14px; gap: 10px; }
@container app (min-width: 561px) {
  .rh-root.is-compact .kpi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic v d" "ic l d"; align-items: center; column-gap: 12px; padding: 10px 14px; }
  .rh-root.is-compact .kpi-top { display: contents; }
  .rh-root.is-compact .kpi-ic { grid-area: ic; width: 36px; height: 36px; }
  .rh-root.is-compact .kpi-d { grid-area: d; }
  .rh-root.is-compact .kpi-row { grid-area: v; }
  .rh-root.is-compact .kpi-l { grid-area: l; }
  .rh-root.is-compact .kpi-v { font-size: 22px; }
}

/* Calendrier de l'équipe */
.rh-plan { min-width: 0; }
.rh-plan-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rh-plan-h .d-h { margin: 0; }
.rh-min { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--t-violet); background: var(--t-violet-s); border-radius: 999px; padding: 3px 10px; }
.rh-root .rh-grid { display: flex; flex-direction: column; gap: 0; padding: 6px 14px 8px; background: #fff; border: 1px solid #E8EAEF; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.rh-root .rh-row { display: grid; grid-template-columns: 150px repeat(5, minmax(0, 1fr)) 14px repeat(5, minmax(0, 1fr)); column-gap: 4px; align-items: center; min-height: 48px; border-radius: 0; border-bottom: 1px solid #F1F2F5; }
.rh-root .rh-row > * { grid-row: 1; }
.rh-root .rh-row.is-hl { background: var(--app-soft); border-radius: 10px; }
.rh-root .rh-who { grid-column: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 6px; }
.rh-root .rh-who > span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rh-root .rh-who b { font-size: 14px; }
.rh-root .rh-who i { font-style: normal; font-size: 12px; color: #566173; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-root .rh-who-h { font-size: 12px; font-weight: 600; color: #566173; align-self: center; padding: 0; }
.rh-wk { min-height: 30px !important; border-bottom: 0 !important; }
.rh-wk > span { font-size: 12px; font-weight: 700; color: #334155; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-root .rh-head { min-height: 46px; border-bottom: 1px solid #E8EAEF; }
.rh-root .rh-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0; font-size: 12px; font-weight: 600; color: #566173; line-height: 1.2; border-radius: 8px; }
.rh-day b { font-size: 14px; color: #0F172A; font-variant-numeric: tabular-nums; width: 26px; height: 22px; display: grid; place-items: center; border-radius: 999px; }
.rh-day.is-today b { background: var(--app-ink); color: #fff; }
.rh-root .rh-day.is-short { background: var(--t-danger-s); color: var(--t-danger); }
.rh-root .rh-day.is-short b { color: var(--t-danger); }
.rh-root .rh-day.is-today.is-short b { background: var(--t-danger); color: #fff; }
.rh-we { align-self: stretch; margin: -1px 0; background: repeating-linear-gradient(135deg, #EEF0F3 0 4px, #F8F9FB 4px 8px); border-radius: 3px; }
.rh-slot { height: 32px; border-radius: 8px; background: #F6F7F9; }
.rh-slot.is-shortcol { background: #FEF2F2; box-shadow: inset 0 0 0 1px #FECACA; }
.rh-bar { position: relative; z-index: 1; height: 32px; border-radius: 8px; display: flex; align-items: center; min-width: 0; padding: 0 8px; font-size: 12px; font-weight: 700; border: 1px solid transparent; overflow: hidden; }
.rh-bar > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-bar.is-cp { background: color-mix(in srgb, var(--app) 16%, #fff); border-color: color-mix(in srgb, var(--app) 38%, #fff); color: #9D174D; box-shadow: inset 3px 0 0 var(--app); }
.rh-bar.is-rtt { background: #EDE9FE; border-color: #C4B5FD; color: #5B21B6; box-shadow: inset 3px 0 0 #8B5CF6; }
.rh-bar.is-form { background: #DBEAFE; border-color: #93C5FD; color: #1E40AF; box-shadow: inset 3px 0 0 #3B82F6; }
.rh-bar.is-preview { background: repeating-linear-gradient(135deg, #FBCFE8 0 6px, #FDF2F8 6px 12px); border: 1.5px dashed #DB2777; color: #831843; }
.rh-bar.is-preview.is-short { border-color: #DC2626; color: #7F1D1D; }
.rh-bar.is-forced { border: 2px solid #EF4444; }
.rh-root .rh-foot { min-height: 40px; border-bottom: 0; }
.rh-n { justify-self: center; min-width: 30px; text-align: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #15803D; background: #F0FDF4; border-radius: 999px; padding: 3px 8px; }
.rh-n.is-short { color: #fff; background: #DC2626; }
.rh-root .rh-legend { gap: 6px 16px; margin-top: 10px; }
.rh-root .rh-legend i { width: 12px; height: 12px; border-radius: 4px; }
.rh-root .rh-legend .is-cp { background: var(--app); }
.rh-root .rh-legend .is-rtt { background: #8B5CF6; }
.rh-root .rh-legend .is-form { background: #3B82F6; }
.rh-root .rh-legend .is-preview { background: repeating-linear-gradient(135deg, #FBCFE8 0 3px, #FDF2F8 3px 6px); box-shadow: inset 0 0 0 1px #DB2777; }
.rh-root .rh-legend .is-short { background: #FEF2F2; box-shadow: inset 0 0 0 2px #DC2626; }

/* Panneau de la demande sélectionnée */
.rh-panel .d-panel-head .av-ph { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--app-line); }
.rh-panel .d-dl dd { flex-wrap: wrap; }
.rh-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rh-dot.is-cp { background: var(--app); } .rh-dot.is-rtt { background: #8B5CF6; } .rh-dot.is-form { background: #3B82F6; }
.rh-bal { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #ECEEF2; border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.rh-bal-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #475569; }
.rh-bal-t b { font-size: 15px; color: #0F172A; font-variant-numeric: tabular-nums; }
.rh-bal-t em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--app-ink); }
.rh-bal-bar { display: flex; height: 8px; border-radius: 4px; background: #EEF0F3; overflow: hidden; }
.rh-bal-bar i { display: block; height: 100%; background: var(--app); }
.rh-bal-bar i.is-take { background: repeating-linear-gradient(135deg, var(--app) 0 3px, color-mix(in srgb, var(--app) 35%, #fff) 3px 6px); }
.rh-ok { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--t-ok); background: var(--t-ok-s); border-radius: 10px; padding: 8px 12px; margin: 0; }
.rh-ok .ic { flex: none; }

/* Zone basse (version complète) : panneau, demandes, soldes */
.rh-lower { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 18px; }
.rh-aside { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rh-aside > .d-h { margin: 0 0 2px; }
.rh-req { gap: 10px; border-color: #E8EAEF; }
.rh-req-m { display: flex; align-items: center; gap: 12px; padding-left: 50px; font-size: 12px; color: #566173; font-variant-numeric: tabular-nums; }
.rh-req-m > span { display: inline-flex; align-items: center; gap: 4px; }
.rh-tag { font-weight: 700; border-radius: 6px; padding: 1px 7px; }
.rh-tag.is-cp { background: color-mix(in srgb, var(--app) 14%, #fff); color: #9D174D; }
.rh-tag.is-rtt { background: #EDE9FE; color: #5B21B6; }
.rh-tag.is-form { background: #DBEAFE; color: #1E40AF; }
.rh-soldes { margin-top: 8px; background: #fff; border: 1px solid #E8EAEF; border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.rh-soldes-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rh-soldes-h .d-h { margin: 0; }
.rh-soldes-h span { font-size: 12px; color: #566173; }
.rh-soldes ul { list-style: none; display: flex; flex-direction: column; }
.rh-soldes li { display: grid; grid-template-columns: auto minmax(0, 1fr) 90px 40px; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #F1F2F5; border-radius: 8px; }
.rh-soldes li:last-child { border-bottom: 0; }
.rh-soldes li.is-hl { background: var(--app-soft); }
.rh-sn { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rh-sn b { font-size: 13px; }
.rh-sn i { font-style: normal; font-size: 12px; color: #566173; }
.rh-sv { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }

/* Version accueil : calendrier à gauche, demande à droite */
.rh-cwrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rh-root.is-compact .rh-row { grid-template-columns: 112px repeat(5, minmax(0, 1fr)) 10px repeat(5, minmax(0, 1fr)); column-gap: 3px; min-height: 42px; }
.rh-root.is-compact .rh-wk { min-height: 26px !important; }
.rh-root.is-compact .rh-slot, .rh-root.is-compact .rh-bar { height: 28px; }
.rh-root.is-compact .rh-bar { padding: 0 5px; }
.rh-root.is-compact .rh-who { gap: 8px; }
.rh-root.is-compact .rh-who b { font-size: 13px; }
.rh-root.is-compact .rh-grid { padding: 4px 10px 6px; }
.rh-root.is-compact .rh-legend { gap: 4px 12px; }
.rh-root.is-compact .d-panel { padding: 14px 16px; }
.rh-root.is-compact .d-panel-head { margin-bottom: 10px; }
.rh-root.is-compact .d-quote { display: none; }
.rh-root.is-compact .d-dl { grid-template-columns: 1fr; gap: 6px; padding: 10px 12px; margin-bottom: 10px; }
.rh-root.is-compact .d-dl div { display: flex; justify-content: space-between; gap: 10px; }
.rh-root.is-compact .d-actions-col .d-btn { min-height: 40px; font-size: 14px; }
.rh-root.is-compact .d-conflict-head h3 { font-size: 15px; }

@container app (max-width: 820px) {
  .rh-lower, .rh-cwrap { grid-template-columns: 1fr; }
}
@container app (max-width: 560px) {
  .rh-plan-h .rh-min { display: none; }
  .rh-root .rh-grid { padding: 4px 8px 6px; }
  .rh-root .rh-row, .rh-root.is-compact .rh-row { grid-template-columns: 50px repeat(5, minmax(0, 1fr)) 5px repeat(5, minmax(0, 1fr)); column-gap: 2px; min-height: 52px; }
  .rh-root .rh-who { flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
  .rh-root .rh-who .av { display: inline-block; width: 26px !important; height: 26px !important; }
  .rh-root .rh-who > span { align-items: center; }
  .rh-root .rh-who b { font-size: 12px; max-width: 48px; overflow: hidden; text-overflow: ellipsis; }
  .rh-root .rh-who i { display: none; }
  .rh-root .rh-who-h { font-size: 12px; }
  .rh-wk > span { font-size: 12px; }
  .rh-wk > span:not(:first-child) { text-align: center; }
  .rh-root .rh-head { min-height: 42px; }
  .rh-root .rh-day { font-size: 12px; padding: 2px 0; }
  .rh-day b { font-size: 12px; width: 22px; height: 20px; }
  .rh-slot, .rh-bar, .rh-root.is-compact .rh-slot, .rh-root.is-compact .rh-bar { height: 26px; border-radius: 5px; }
  .rh-root .d-actions-col .d-btn { border-radius: 14px; padding-top: 8px; padding-bottom: 8px; text-align: left; }
  .rh-bar { padding: 0; }
  .rh-bar > span { display: none; }
  .rh-n { min-width: 0; padding: 2px 4px; }
  .rh-req-m { padding-left: 0; flex-wrap: wrap; }
  .rh-soldes li { grid-template-columns: auto minmax(0, 1fr) 60px 36px; gap: 8px; }
  .rh-root .d-dl { grid-template-columns: 1fr; }
}

/* ---------- Services terrain (TerrainFlow) : tableau de dispatch ---------- */
.tf-root { display: flex; flex-direction: column; }
.tf-root .kpi { border-color: #E8EAEF; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }

/* Indicateurs compacts (version accueil) : icône à gauche, valeur et libellé à droite */
.tf-root.is-compact .kpis { margin-bottom: 14px; gap: 10px; }
@container app (min-width: 561px) {
  .tf-root.is-compact .kpi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic v d" "ic l d"; align-items: center; column-gap: 12px; padding: 10px 14px; }
  .tf-root.is-compact .kpi-top { display: contents; }
  .tf-root.is-compact .kpi-ic { grid-area: ic; width: 36px; height: 36px; }
  .tf-root.is-compact .kpi-d { grid-area: d; }
  .tf-root.is-compact .kpi-row { grid-area: v; }
  .tf-root.is-compact .kpi-l { grid-area: l; }
  .tf-root.is-compact .kpi-v { font-size: 22px; }
}

/* En-tête du planning et légende */
.tf-plan-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.tf-plan-h .d-h { margin: 0; }
.tf-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: #475569; font-weight: 500; }
.tf-legend li { display: inline-flex; align-items: center; gap: 6px; }
.tf-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--t); }
.tf-legend i.is-now { width: 2px; height: 12px; border-radius: 1px; background: #DC2626; }

/* Diagramme de Gantt par équipe */
.tf-root .tf-timeline { border: 1px solid #E8EAEF; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.tf-root .tf-hours { position: relative; z-index: 2; overflow: visible; grid-template-columns: 210px 1fr; height: 34px; background: #FAFBFC; border-bottom: 1px solid #ECEEF2; }
.tf-hours-l { display: flex; align-items: center; padding: 0 14px; font-size: 12px; font-weight: 600; color: #566173; border-right: 1px solid #ECEEF2; }
.tf-root .tf-hours div { margin: 0 18px; }
.tf-root .tf-hours i { top: 9px; font-weight: 500; }
.tf-now-l { position: absolute; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #DC2626; box-shadow: 0 0 0 3px #fff; z-index: 2; }
.tf-root .tf-row { grid-template-columns: 210px 1fr; min-height: 86px; border-bottom: 1px solid #F0F1F4; }
.tf-root .tf-row:last-child { border-bottom: 0; }
.tf-root .tf-team { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av t" "load load"; align-items: center; gap: 8px 10px; padding: 12px 14px; background: #fff; border-right: 1px solid #ECEEF2; box-shadow: inset 3px 0 0 var(--t); }
.tf-root .tf-team > .av-stack { grid-area: av; flex-direction: row; }
.tf-root .tf-team > .tf-team-t { grid-area: t; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tf-root .tf-team strong { font-size: 14px; }
.tf-root .tf-team-t span { font-size: 12px; color: #566173; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-root .tf-team > .tf-load { grid-area: load; display: grid; flex-direction: row; grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.tf-load b { font-size: 12px; color: #334155; font-variant-numeric: tabular-nums; min-width: 34px; }
.tf-load .prog { height: 5px; }
.tf-root .tf-track { margin: 0 18px; background-image: repeating-linear-gradient(90deg, #EEF0F3 0 1px, transparent 1px 10%); }
.tf-break { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(148, 163, 184, .12) 0 6px, transparent 6px 12px); }
.tf-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(220, 38, 38, .75); z-index: 1; }

/* Blocs d'intervention */
.tf-root .tf-job { z-index: 2; line-height: 1.3; top: 9px; bottom: 9px; gap: 1px; justify-content: flex-start; padding: 6px 9px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--t) 22%, #fff); border-left: 3px solid var(--t); background: color-mix(in srgb, var(--t) 9%, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.tf-job-h { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tf-job-h em { font-style: normal; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--t) 72%, #000); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-job-h .ic { flex: none; color: #15803D; }
.tf-root .tf-job b { display: block; font-size: 13px; font-weight: 650; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.tf-root .tf-job i { font-size: 12px; color: #475569; }
.tf-root .tf-job.is-done { background: #F8FAFC; border-color: #E2E8F0; border-left-color: var(--t); }
.tf-root .tf-job.is-live { box-shadow: 0 0 0 2px color-mix(in srgb, var(--t) 30%, #fff), 0 6px 14px -8px var(--t); }
.tf-pulse { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.tf-root .tf-job.is-clash { background: var(--t-danger-s); border-color: #FCA5A5; border-left-color: var(--t-danger-c); }
.tf-root .tf-job.is-clash b, .tf-root .tf-job.is-clash em { color: var(--t-danger); }
.tf-root .tf-job.is-conflict { background: repeating-linear-gradient(135deg, #FEE2E2 0 8px, #FECACA 8px 16px); border-color: #FCA5A5; border-left-color: var(--t-danger-c); }
.tf-root .tf-job.is-conflict b, .tf-root .tf-job.is-conflict em { color: #991B1B; }
.tf-root .tf-job.is-ghost { top: 5px; bottom: 5px; z-index: 4; background: rgba(255, 255, 255, .96); border: 2px dashed var(--t-danger-c); box-shadow: 0 10px 22px -12px rgba(185, 28, 28, .6); }
.tf-root .tf-job.is-ghost b, .tf-root .tf-job.is-ghost em { color: var(--t-danger); }
.tf-root .tf-job.is-ghost i { color: #7F1D1D; font-weight: 600; }

/* Zone basse : file « À affecter » et panneau d'affectation */
.tf-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; margin-top: 16px; }
.tf-lower > .d-panel:only-child { grid-column: 1 / -1; }
.tf-root .tf-todo { display: flex; flex-direction: column; gap: 8px; }
.tf-todo-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tf-todo-h .d-h { margin: 0; display: flex; align-items: center; gap: 8px; }
.tf-todo-h .d-h span { font-size: 12px; letter-spacing: 0; color: #334155; background: #E8EAEF; border-radius: 999px; padding: 1px 8px; }
.tf-urg { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--t-danger); }
.tf-card { gap: 6px; padding: 12px 14px; border-color: #E8EAEF; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.tf-card.is-urgent { background: linear-gradient(90deg, #FFF5F5, #fff 55%); box-shadow: inset 4px 0 0 #EF4444, 0 1px 2px rgba(15, 23, 42, .04); }
.tf-card.is-urgent.is-sel { box-shadow: inset 4px 0 0 #EF4444, 0 0 0 1px var(--app-ink), 0 8px 20px -14px var(--app-ink); }
.tf-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tf-card-t { font-size: 15px; letter-spacing: -.01em; }
.tf-card-m { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #566173; min-width: 0; }
.tf-card-m .ic { flex: none; color: #64748B; }
.tf-card-m > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tf-card-m em { font-style: normal; font-size: 12px; font-weight: 600; color: #334155; background: #F1F3F6; border-radius: 6px; padding: 1px 6px; margin-left: auto; flex: none; }
.tf-none { display: flex; align-items: center; gap: 8px; color: var(--t-ok); background: #fff; border: 1px dashed #CBD5E1; border-radius: 14px; padding: 14px; }

.tf-root .tf-panel { border-color: #E8EAEF; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.tf-root .tf-panel.is-urgent { border-top: 3px solid #EF4444; }
.tf-root .tf-panel.d-conflict { border-color: #FBCACA; }
.tf-root .tf-panel .d-dl { margin-bottom: 10px; }
.tf-note { margin-bottom: 14px; }
.tf-panel.is-urgent .tf-note { background: #FEF2F2; color: #7F1D1D; }
.tf-panel.is-urgent .tf-note .ic { color: var(--t-danger); }
.tf-hint { display: flex; align-items: center; gap: 6px; font-size: 13px !important; color: #566173; margin: 6px 0 0; }
.tf-hint .ic { flex: none; color: var(--app-ink); }
.tf-root .d-chip > span { gap: 8px; padding-left: 6px; }
.tf-root .d-chip .av-stack { display: inline-flex; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.tf-root .d-chip .av-stack .av-ph { width: 26px !important; height: 26px !important; }
.tf-allset { display: flex; align-items: center; gap: 14px; }
.tf-allset-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--t-ok-s); color: var(--t-ok); }
.tf-allset .d-empty { color: #0F172A; font-weight: 650; font-size: 15px; margin: 0; }
.tf-allset div span { font-size: 13px; color: #566173; }

/* Version accueil : planning pleine largeur, panneau en deux colonnes */
.tf-root.is-compact .tf-row { min-height: 72px; }
.tf-root.is-compact .tf-team { padding: 8px 12px; gap: 6px 10px; }
.tf-root.is-compact .tf-job { top: 7px; bottom: 7px; padding: 5px 8px; }
.tf-root.is-compact .tf-lower { grid-template-columns: 1fr; margin-top: 14px; }
.tf-root.is-compact .tf-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 22px; align-items: start; padding: 14px 16px; }
.tf-root.is-compact .tf-panel .d-panel-head { margin-bottom: 10px; }
.tf-root.is-compact .tf-panel .d-dl { margin-bottom: 0; }
.tf-root.is-compact .tf-note { display: none; }
.tf-root.is-compact .tf-panel .d-actions { margin-top: 0; gap: 6px; }
.tf-root.is-compact .tf-panel .d-actions .d-btn { min-height: 40px; padding: 0 12px; font-size: 14px; }
.tf-root.is-compact .tf-allset { display: flex; }

@container app (max-width: 820px) {
  .tf-root .tf-hours, .tf-root .tf-row { grid-template-columns: 160px 1fr; }
  .tf-lower, .tf-root.is-compact .tf-panel { grid-template-columns: 1fr; }
  .tf-root.is-compact .tf-panel { display: block; }
  .tf-root.is-compact .tf-panel .d-actions { margin-top: 12px; }
  .tf-lower > .d-panel { order: -1; }
}
@container app (max-width: 560px) {
  .tf-legend { display: none; }
  .tf-root .tf-row { grid-template-columns: 1fr; min-height: 0; }
  .tf-root .tf-team { border-right: 0; border-bottom: 1px solid #ECEEF2; padding: 10px 12px; grid-template-columns: auto minmax(0, 1fr) 96px; grid-template-areas: "av t load"; }
  .tf-root .tf-team > .tf-load { grid-template-columns: 1fr; gap: 3px; text-align: right; }
  .tf-root .tf-list { gap: 6px; padding: 10px 12px; font-size: 14px; }
  .tf-root .tf-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--t) 8%, #fff); border-left: 3px solid var(--t); }
  .tf-root .tf-list li b { margin-right: 0; color: color-mix(in srgb, var(--t) 72%, #000); font-size: 13px; }
  .tf-root .tf-list li span { flex-basis: 100%; font-size: 12px; color: #566173; }
  .tf-root .tf-list li.is-conflict { background: #FEE2E2; color: #7F1D1D; border-left-color: var(--t-danger-c); }
  .tf-root .tf-list li.is-conflict b, .tf-root .tf-list li.is-clash b { color: var(--t-danger); }
  .tf-root .tf-list li.is-free { background: #F8FAFC; color: #566173; border-left-color: #CBD5E1; }
  .tf-root .d-chip > span { padding-right: 12px; }
  .tf-root .tf-panel .d-dl { grid-template-columns: 1fr; }
}