/* ════════════════════════════════════════════════════════════
   Manager · Atelier Piscine — charte issue de Claude Design
   ════════════════════════════════════════════════════════════ */
:root{
	/* Brand */
	--turquoise: #5BC8C8;
	--turquoise-700: #2FA8A8;
	--turquoise-300: #9CDDDD;
	--turquoise-50: #EAF7F7;
	--ink: #0A0A0A;
	--ink-2: #1A1C1D;
	--ink-3: #25292B;

	/* Surfaces */
	--bg: #F4F4EF;
	--paper: #FFFFFF;
	--line: #E4E4DD;
	--line-strong: #CFCFC4;

	/* Text */
	--t1: #0A0A0A;
	--t2: #4A4F52;
	--t3: #797E81;

	/* Status */
	--ok: #2F8F5C;     --ok-bg: #E3F1E8;
	--warn: #B8841A;   --warn-bg: #F6ECCF;
	--bad: #B23A2A;    --bad-bg: #F4DCD6;
	--info: #2F6EA8;   --info-bg: #DCE7F2;

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

	--sidebar: 256px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
	font-family: 'Inter', system-ui, sans-serif;
	background: var(--bg);
	color: var(--t1);
	font-size: 14px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}
a{color:inherit; text-decoration:none}
.mono{font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;}

/* ───── Layout shell ───── */
.app{
	display: grid;
	grid-template-columns: var(--sidebar) 1fr;
	min-height: 100vh;
}

/* ───── Sidebar ───── */
.sidebar{
	background: #232628;
	color: #E9E9E4;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	border-right: 1px solid #1A1C1E;
	--sb-section-color: #8A8E90;
	--sb-item-color: #D6D8DA;
	--sb-item-icon: #A0A4A6;
	--sb-item-active-bg: #2E3235;
	--sb-item-active-border: #3A3E41;
	--sb-active-bar: var(--turquoise);
	--sb-active-icon: var(--turquoise);
	--sb-count-bg: #34383B;
	--sb-count-color: #D6D8DA;
	--sb-count-active-bg: var(--turquoise);
	--sb-count-active-color: var(--ink);
	--sb-soon-color: #74787A;
	--sb-soon-icon: #5A5E60;
	--sb-soon-border: #3A3E41;
	--sb-divider: #2E3235;
	--sb-foot-name: #fff;
	--sb-foot-role: #93989B;
	--sb-foot-icon: #74787A;
}
.sidebar__brand{
	padding: 20px 20px 18px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--sb-divider);
}
.sidebar__brand img.logo-white{
	height: 38px; width: auto; display: block; max-width: 100%;
}
.sidebar__section{
	padding: 18px 14px 6px;
	font-size: 10.5px;
	color: var(--sb-section-color);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
}
.sidebar__section:first-of-type{ padding-top: 14px; }

.nav{
	display:flex; flex-direction:column; gap: 2px;
	padding: 0 8px;
}
.nav__item{
	display:flex; align-items:center; gap:11px;
	padding: 9px 12px;
	border-radius: var(--r-md);
	color: var(--sb-item-color);
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 500;
	border: 1px solid transparent;
	user-select:none;
	position: relative;
}
.nav__item:hover{ background: var(--sb-item-active-bg); color:#fff; }
.nav__item.is-active{
	background: var(--sb-item-active-bg);
	color: #fff;
	border-color: var(--sb-item-active-border);
}
.nav__item.is-active::before{
	content:""; position:absolute; left:-8px; top:8px; bottom:8px; width:3px;
	background: var(--sb-active-bar); border-radius: 3px;
}
.nav__icon{
	width: 18px; height: 18px; flex: 0 0 18px;
	display:grid; place-items:center;
	color: var(--sb-item-icon);
}
.nav__item.is-active .nav__icon{ color: var(--sb-active-icon); }
.nav__count{
	margin-left:auto;
	font-size: 11px;
	background: var(--sb-count-bg);
	color: var(--sb-count-color);
	padding: 2px 7px;
	border-radius: 10px;
	font-family: 'JetBrains Mono', monospace;
}
.nav__item.is-active .nav__count{ background: var(--sb-count-active-bg); color: var(--sb-count-active-color); }
.nav__item.is-soon{ color: var(--sb-soon-color); cursor: not-allowed; }
.nav__item.is-soon .nav__icon{ color: var(--sb-soon-icon); }
.nav__item.is-soon .soon{
	margin-left:auto; font-size:9.5px; color: var(--sb-soon-color);
	border:1px dashed var(--sb-soon-border); padding: 1px 6px; border-radius: 10px;
	text-transform: uppercase; letter-spacing: .08em;
}

.sidebar__foot{
	margin-top: auto;
	padding: 12px;
	border-top: 1px solid var(--sb-divider);
	display:flex; align-items:center; gap:10px;
}
.avatar{
	width:32px; height:32px; border-radius:50%;
	background: linear-gradient(135deg, var(--turquoise), var(--turquoise-700));
	color: var(--ink); display:grid; place-items:center;
	font-weight:700; font-size:12px;
}
.who b{display:block; color: var(--sb-foot-name); font-size:12.5px; font-weight:600;}
.who span{display:block; color: var(--sb-foot-role); font-size:11px;}
.sidebar__foot .ico{ margin-left:auto; color: var(--sb-foot-icon); cursor:pointer; }
.sidebar__foot .ico:hover{ color:#fff; }

/* ───── Main ───── */
.main{ display:flex; flex-direction:column; min-width: 0; }
.topbar{
	height: 56px;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	display:flex; align-items:center;
	padding: 0 24px;
	gap: 12px;
	position: sticky; top: 0; z-index: 5;
}
.crumb{ display:flex; align-items:center; gap:8px; font-size: 13px; color: var(--t2); }
.crumb b{ color: var(--t1); font-weight:600;}
.crumb .sep{ color: var(--line-strong); }
.topbar__search{
	margin-left: 18px;
	flex: 1;
	max-width: 420px;
	display:flex; align-items:center; gap:8px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 7px 10px;
	color: var(--t3);
}
.topbar__search input{ border:0; background:transparent; outline:none; flex:1; font: inherit; color: var(--t1); }
.kbd{
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-bottom-width: 2px;
	padding: 1px 6px; border-radius: 4px;
	color: var(--t2);
}
.topbar__actions{ margin-left: auto; display:flex; align-items:center; gap: 8px; }

/* ───── View container ───── */
.view{ padding: 24px; }
.page-head{
	display:flex; align-items: flex-end; justify-content: space-between;
	margin-bottom: 22px; gap: 16px; flex-wrap: wrap;
}
.page-head h1{ margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.page-head .sub{ color: var(--t2); font-size: 13px; margin-top: 4px; }
.page-head .actions{ display:flex; gap:8px; flex-wrap: wrap; }

.btn{
	display:inline-flex; align-items:center; gap:7px;
	padding: 8px 14px;
	border-radius: var(--r-md);
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--t1);
	font: 500 13px 'Inter', sans-serif;
	cursor:pointer;
	text-decoration: none;
}
.btn:hover{ border-color: var(--line-strong); }
.btn--primary{ background: var(--ink); color:#fff; border-color: var(--ink); }
.btn--primary:hover{ background: var(--ink-3); border-color: var(--ink-3);}
.btn--accent{
	background: var(--turquoise); color: var(--ink); border-color: var(--turquoise);
	font-weight: 600;
}
.btn--accent:hover{ background: var(--turquoise-700); border-color: var(--turquoise-700); color:#fff;}

/* ───── Cards ───── */
.card{
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}
.card__hd{
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	display:flex; align-items:center; gap:10px;
}
.card__hd h3{ margin:0; font-size: 14px; font-weight: 600; letter-spacing: -0.005em;}
.card__hd .sub{ color: var(--t3); font-size: 12px; }
.card__hd .right{ margin-left:auto; display:flex; gap:6px; align-items:center; }
.card__bd{ padding: 16px; }

/* KPI tiles */
.kpis{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi{
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 16px 16px 14px;
	position: relative; overflow: hidden;
}
.kpi__lbl{ font-size: 11.5px; color: var(--t2); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;}
.kpi__val{ font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 4px; font-feature-settings: "tnum"; }
.kpi__val .unit{ color: var(--t3); font-size: 16px; font-weight: 500; margin-left: 2px;}
.kpi__delta{ display:inline-flex; align-items:center; gap:4px; font-size: 12px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.kpi__delta.up{ color: var(--ok); }
.kpi__delta.dn{ color: var(--bad); }
.kpi__delta .vs{ color: var(--t3); font-weight: 500; margin-left: 4px; font-family: 'Inter';}
.kpi__spark{ position:absolute; right: 12px; top: 14px; bottom: 14px; width: 90px; opacity: .9; }

/* Two/three columns */
.grid-2{ display:grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* Chart */
.chart-wrap{ padding: 6px 14px 14px; position: relative; }
.chart-tip{
	position: absolute; transform: translate(-50%, calc(-100% - 12px));
	background: #232628; color: #fff; padding: 6px 9px; border-radius: 6px;
	font: 500 11.5px 'JetBrains Mono', monospace; white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0,0,0,.18); pointer-events: none; z-index: 5;
}
.chart-tip[hidden]{ display: none; }
.chart-tip b{ display:block; font-weight: 700; font-size: 12px; }
.chart-tip span{ color: #5BC8C8; }
.chart-tip small{ display:block; color: #D4A056; font-size: 10.5px; margin-top: 2px; }

.map-wrap{ position: relative; padding: 0; display: flex; justify-content: flex-end; }
#euMap{ display: block; width: 100%; max-width: 480px; height: auto; max-height: 520px; }
.eu-cty{ stroke: #fff; stroke-width: 0.6; transition: opacity .1s ease, stroke .1s ease; cursor: default; }
.eu-cty:hover{ opacity: .82; }
.map-legend{ display:flex; align-items:center; gap: 4px; font: 500 11px 'JetBrains Mono', monospace; color: var(--t3); }
.map-legend .g{ display:inline-block; width: 16px; height: 10px; border-radius: 2px; }
.chart-stat{ display:flex; gap: 24px; padding: 4px 16px 8px; border-top: 1px dashed var(--line); }
.chart-stat div{ font-size: 12px; color: var(--t2); }
.chart-stat b{ display:block; color: var(--t1); font-size: 18px; font-weight:700; margin-top: 2px; font-feature-settings:"tnum"; }

/* Table */
.table{ width:100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table th{
	text-align:left; font-weight:600; color: var(--t2);
	font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
	padding: 10px 12px;
	background: #FAFAF7;
	border-bottom: 1px solid var(--line);
}
.table td{ padding: 12px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td{ border-bottom: 0; }
.table tr:hover td{ background: #FAFAF7; }
.table .num{ text-align: right; font-family: 'JetBrains Mono', monospace; }
.table .id{ font-family: 'JetBrains Mono', monospace; color: var(--t2); font-size: 12px;}

/* Pills */
.pill{ display:inline-flex; align-items:center; gap:5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; }
.pill .d{ width:6px; height:6px; border-radius:50%; background: currentColor; }
.pill--ok{ background: var(--ok-bg); color: var(--ok); }
.pill--warn{ background: var(--warn-bg); color: var(--warn); }
.pill--bad{ background: var(--bad-bg); color: var(--bad); }
.pill--info{ background: var(--info-bg); color: var(--info); }
.pill--ink{ background: #EBEBE5; color: var(--t1); }
.pill--accent{ background: var(--turquoise-50); color: var(--turquoise-700); }
.pill--toggle{
	cursor: pointer; background: transparent; color: var(--t3);
	border: 1px solid var(--line); font: 600 11.5px 'Inter';
	transition: opacity .12s, background .12s;
}
.pill--toggle:hover{ background: var(--bg); }
.pill--toggle:not(.is-on){ opacity: .55; }
.pill--toggle:not(.is-on) .d{ opacity: .5; }

/* Filters bar */
.filters{ display:flex; align-items:center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chip{
	display:inline-flex; align-items:center; gap:6px;
	padding: 6px 11px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12.5px; color: var(--t2);
	cursor: pointer; text-decoration: none;
}
.chip.is-active{ background: var(--ink); color:#fff; border-color: var(--ink); }
.chip .ct{ color: var(--t3); font-family:'JetBrains Mono', monospace; font-size:11px;}
.chip.is-active .ct{ color: rgba(255,255,255,.6); }

.search-inline{
	display:flex; align-items:center; gap:8px;
	border:1px solid var(--line); border-radius: var(--r-md);
	background: var(--paper); padding: 6px 10px; min-width: 240px;
	color: var(--t3);
}
.search-inline input{ border:0; background:transparent; outline:none; flex:1; font:inherit; color: var(--t1); }

.seg{
	display:inline-flex; padding:2px;
	background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
}
.seg a, .seg button{
	border:0; background:transparent; padding: 5px 11px;
	font: 500 12.5px 'Inter'; color: var(--t2);
	border-radius: 5px; cursor:pointer; text-decoration: none;
}
.seg a.is-on, .seg button.is-on{ background: var(--paper); color: var(--t1); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 0 0 1px var(--line); }

.seg--perso{ position: relative; }
.perso-pop{
	position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 220px;
}
.perso-pop[hidden]{ display: none; }

.info-tip{
	position: relative; display: inline-flex; align-items: center;
	margin-left: 5px; color: var(--t3); cursor: help;
	font-size: 11.5px; transition: color .15s ease;
}
.info-tip:hover{ color: var(--t1); }
.info-tip::after{
	content: attr(data-tip);
	position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
	background: #232628; color: #fff; font: 500 11.5px 'JetBrains Mono', monospace;
	padding: 6px 9px; border-radius: 6px; white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0,0,0,.18);
	opacity: 0; pointer-events: none; transition: opacity .12s ease;
	z-index: 30;
}
.info-tip::before{
	content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
	border: 5px solid transparent; border-top-color: #232628;
	opacity: 0; pointer-events: none; transition: opacity .12s ease;
	z-index: 30;
}
.info-tip:hover::after, .info-tip:hover::before{ opacity: 1; }
.perso-pop label{
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	font: 500 12.5px 'Inter'; color: var(--t2);
}
.perso-pop input[type="date"]{
	border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px;
	font: inherit; color: var(--t1); background: var(--paper);
}
.perso-pop button[type="submit"]{
	margin-top: 4px; padding: 7px 11px; border: 0; border-radius: 6px;
	background: var(--t1); color: var(--paper); font: 600 12.5px 'Inter'; cursor: pointer;
}

/* Catalog grid */
.cat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.prod{
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	display:flex; flex-direction:column;
}
.prod__media{
	aspect-ratio: 4/3;
	background:
		repeating-linear-gradient(135deg, #EFEFE8 0 8px, #F6F6F1 8px 16px);
	border-bottom: 1px solid var(--line);
	display:grid; place-items:center;
	color: var(--t3);
	font: 500 11px 'JetBrains Mono', monospace;
	text-transform: uppercase; letter-spacing: 0.08em;
	position: relative; overflow: hidden;
}
.prod__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.prod__tag{
	position:absolute; top:8px; left:8px;
	background: var(--paper); color: var(--t1);
	font: 600 10.5px 'JetBrains Mono', monospace;
	padding: 2px 7px; border-radius: 4px;
	border: 1px solid var(--line);
	z-index: 1;
}
.prod__tag--accent{ background: var(--turquoise); border-color: var(--turquoise); color: var(--ink); }
.prod__bd{ padding: 12px 12px 14px; display:flex; flex-direction:column; gap:6px; flex:1;}
.prod__cat{ font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing:0.08em; font-weight:600;}
.prod__name{ font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--t1); }
.prod__row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.prod__price{ font: 700 14px 'JetBrains Mono', monospace; }
.prod__price small{ color: var(--t3); font-weight:500; font-size: 11px;}
.prod__stock{ font-size: 11.5px; color: var(--t2); display:flex; align-items:center; gap:6px;}
.prod__stock .d{ width:7px; height:7px; border-radius:50%; }
.stock-ok{ background: var(--ok); }
.stock-low{ background: var(--warn); }
.stock-out{ background: var(--bad); }

/* Decorative X mark */
.x-mark{
	display:inline-block; width:12px; height:12px;
	transform: rotate(45deg);
	background: var(--turquoise);
}

/* Top products list */
.top-list{ display:flex; flex-direction: column; }
.top-row{
	display:grid; grid-template-columns: 28px 1fr auto; gap: 10px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px dashed var(--line);
}
.top-row:last-child{ border-bottom:0; }
.top-row .rk{ font: 600 12px 'JetBrains Mono', monospace; color: var(--t3); }
.top-row .nm{ font-size: 13px; font-weight: 500; }
.top-row .nm small{ display:block; color: var(--t3); font-size:11.5px; font-weight:400; margin-top:2px;}
.top-row .vl{ font-family:'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600; text-align:right; }
.top-row .vl small{ display:block; color: var(--t3); font-weight:500; font-size:11px;}
.bar{ height: 4px; background: #EBEBE5; border-radius: 2px; margin-top: 4px; overflow: hidden; }
.bar > i{ display:block; height:100%; background: var(--turquoise); border-radius: 2px;}

/* Order meta */
.order-meta{ display:flex; gap: 10px; align-items: center; }
.ord-num{ font: 600 13px 'JetBrains Mono', monospace; color: var(--t1); }
.ord-when{ font-size: 11.5px; color: var(--t3); }
.pay-line{ display:flex; align-items:center; gap:6px; font-size: 12.5px; color: var(--t2); }
.pay-dot{ width:6px; height:6px; border-radius:50%; background: var(--ink); display:inline-block; }

.empty-x{ display:grid; place-items:center; padding: 40px 0; color: var(--t3); }

/* Lignes cliquables (tableau commandes) */
tr.row-link{ cursor: pointer; }
tr.row-link td .row-cell{ display:block; }

/* ════════════════════════════════════════════════════════
   Détail commande (design Claude · Admin Atelier Piscine)
   ════════════════════════════════════════════════════════ */
.od{ display:grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
@media (max-width: 1280px){ .od{ grid-template-columns: 1fr; } }

.od__back{
	display:inline-flex; align-items:center; gap: 6px;
	background: transparent; border: 0; padding: 4px 0;
	font: 500 12.5px 'Inter', sans-serif; color: var(--t2); cursor: pointer;
	margin-bottom: 8px; text-decoration: none;
}
.od__back:hover{ color: var(--t1); }

.od__hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom: 18px; flex-wrap: wrap;}
.od__title{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.od__title h1{ margin:0; font-size: 26px; font-weight:700; letter-spacing:-0.02em; font-family:'JetBrains Mono', monospace;}
.od__sub{ color: var(--t2); font-size: 13px; margin-top: 4px;}

/* Timeline 5 étapes */
.od-timeline{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 16px; }
.tl-step{ background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; position: relative;}
.tl-step .lbl{ font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); font-weight: 600;}
.tl-step .nm{ font-size: 13.5px; font-weight: 600; margin-top: 2px;}
.tl-step .when{ font-size: 11.5px; color: var(--t3); margin-top: 2px; font-family: 'JetBrains Mono', monospace;}
.tl-step.is-done{ border-color: var(--turquoise); background: var(--turquoise-50);}
.tl-step.is-done .lbl{ color: var(--turquoise-700);}
.tl-step.is-current{ border-color: var(--ink); background: #FAFAF7; box-shadow: 0 0 0 1px var(--ink) inset;}
.tl-step.is-current .lbl{ color: var(--ink);}
.tl-step.is-todo{ opacity: .55; border-style: dashed; }
.tl-step.is-cancel{ border-color: var(--bad); background: var(--bad-bg); }
.tl-step.is-cancel .lbl{ color: var(--bad); }
.tl-step .num{ position:absolute; top:10px; right:12px; font: 600 10px 'JetBrains Mono', monospace; color: var(--t3);}
.tl-step.is-done .num, .tl-step.is-current .num, .tl-step.is-cancel .num{ color: var(--ink); }

/* Articles */
.od-items{ width:100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.od-items th{ text-align:left; font-weight:600; color:var(--t2); font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; padding: 10px 14px; background:#FAFAF7; border-bottom: 1px solid var(--line);}
.od-items td{ padding: 14px; border-bottom: 1px solid var(--line); vertical-align: middle;}
.od-items tr:last-child td{ border-bottom: 0; }
.od-items .num{ text-align:right; font-family:'JetBrains Mono', monospace; }
.od-thumb{
	width: 44px; height: 44px; border-radius: 6px;
	background: repeating-linear-gradient(135deg, #EFEFE8 0 6px, #F6F6F1 6px 12px);
	border: 1px solid var(--line); flex: 0 0 44px;
	background-size: cover; background-position: center;
}
.od-prod{ display:flex; gap:12px; align-items:center; }
.od-prod .nm{ font-weight: 600; color: var(--t1); }
.od-prod .ref{ font-size: 11.5px; color: var(--t3); font-family: 'JetBrains Mono', monospace; margin-top: 2px;}

/* Récapitulatif (colonne droite) */
.totals{ display:flex; flex-direction:column; gap: 8px; padding: 14px 16px; }
.totals .row{ display:flex; justify-content: space-between; font-size: 13px; color: var(--t2);}
.totals .row b{ color: var(--t1); font-family:'JetBrains Mono', monospace; font-weight:600;}
.totals .row.total{ border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; font-size: 14px; }
.totals .row.total b{ font-size: 18px; font-weight: 700;}

/* Bloc info (adresses, client) */
.info-row{ display:flex; gap:12px; padding: 12px 16px; align-items:flex-start; border-bottom: 1px dashed var(--line);}
.info-row:last-child{ border-bottom: 0; }
.info-row .ico{ width:18px; height:18px; color:var(--t3); flex:0 0 18px; margin-top: 2px;}
.info-row .lbl{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); font-weight:600; margin-bottom: 2px;}
.info-row .val{ font-size: 13px; color: var(--t1);}
.info-row .val small{ color: var(--t3); font-size: 11.5px; display:block; margin-top: 2px;}
.info-row a{ color: var(--turquoise-700); text-decoration: none;}
.info-row a:hover{ text-decoration: underline;}

/* Activité (journal de la commande) */
.activity{ display:flex; flex-direction: column; }
.act-row{ display:grid; grid-template-columns: 14px 1fr auto; gap: 12px; padding: 12px 16px; border-bottom: 1px dashed var(--line); align-items: flex-start;}
.act-row:last-child{ border-bottom: 0;}
.act-row .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--turquoise); margin-top: 6px;}
.act-row .dot.ink{ background: var(--ink);}
.act-row .dot.warn{ background: var(--warn);}
.act-row .dot.ok{ background: var(--ok);}
.act-row .dot.bad{ background: var(--bad);}
.act-row .ttl{ font-size: 13px; color: var(--t1);}
.act-row .ttl b{ font-weight: 600;}
.act-row .who{ font-size: 11.5px; color: var(--t3); margin-top: 2px;}
.act-row .when{ font-size: 11.5px; color: var(--t3); font-family:'JetBrains Mono', monospace; white-space: nowrap;}

/* Boutons d'actions secondaires (colonne droite) */
.od-actions{ display:flex; flex-direction: column; gap: 6px; padding: 14px 16px;}
.od-actions .btn{ width:100%; justify-content:center;}

/* Stats client en bas de la carte client */
.cust-stats{
	display:grid; grid-template-columns: repeat(3, 1fr); gap:8px;
	padding: 12px 16px;
	border-top: 1px solid var(--line);
	background:#FAFAF7;
	border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.cust-stats .k{ font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); font-weight: 600; }
.cust-stats .v{ font-family:'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; }

.i{ width:16px; height:16px; stroke: currentColor; fill:none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;}

/* Messages */
.msg{
	padding: 10px 14px; border-radius: var(--r-md);
	font-size: 13px; margin-bottom: 12px;
	border: 1px solid transparent;
}
.msg--ok{ background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.msg--warn{ background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.msg--bad{ background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }

/* Login */
.login-shell{
	min-height: 100vh;
	display:grid; place-items:center;
	background:
		radial-gradient(ellipse at top, rgba(91,200,200,.15), transparent 60%),
		var(--bg);
	padding: 24px;
}
.login-card{
	width: 100%; max-width: 380px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 32px 28px;
}
.login-card h1{ margin: 0 0 4px; font-size: 22px; letter-spacing: -0.015em; }
.login-card .sub{ color: var(--t2); font-size: 13px; margin-bottom: 22px; }
.login-card .field{ margin-bottom: 12px; }
.login-card label{ display:block; font-size: 12px; color: var(--t2); margin-bottom: 4px; font-weight: 500; }
.login-card input[type=email],
.login-card input[type=password]{
	width:100%; padding: 10px 12px;
	border: 1px solid var(--line); border-radius: var(--r-md);
	font: inherit; color: var(--t1); background: var(--paper);
}
.login-card input:focus{ outline: 2px solid var(--turquoise-300); border-color: var(--turquoise-700); }
.login-card .row{ display:flex; align-items:center; justify-content:space-between; margin: 8px 0 14px; font-size: 12.5px; color: var(--t2); }
.login-card .row label{ display:inline-flex; align-items:center; gap:6px; margin: 0; }
.login-brand{ display:flex; align-items:center; justify-content:center; margin-bottom: 18px; }
.login-brand img{ height: 40px; }

/* Pagination */
.pager{
	display:flex; justify-content:space-between; align-items:center;
	padding: 12px 16px; border-top: 1px solid var(--line);
	font-size: 12.5px; color: var(--t2);
}
.pager .pages{ display:flex; gap:6px; }
.pager .pages a, .pager .pages span{
	padding:5px 10px; border:1px solid var(--line); background: var(--paper);
	border-radius: var(--r-md); font-size: 12.5px; color: var(--t2);
	text-decoration: none;
}
.pager .pages a:hover{ border-color: var(--line-strong); color: var(--t1); }
.pager .pages a.is-on{ background: var(--ink); color: #fff; border-color: var(--ink); }

/* Responsive */
@media (max-width: 1280px){
	.kpis{ grid-template-columns: repeat(2, 1fr); }
	.cat-grid{ grid-template-columns: repeat(3, 1fr); }
	.grid-2, .grid-3{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
	:root{ --sidebar: 72px;}
	.sidebar__brand img.logo-white{ height: 24px; }
	.nav__item span.lbl, .nav__count, .soon, .sidebar__section, .who{ display:none; }
	.nav__item{ justify-content:center; }
	.cat-grid{ grid-template-columns: repeat(2, 1fr); }
}