/* ════════════════════════════════════════════════════════════
   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;
	flex: 0 0 32px;
}
.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);
	position: relative;
}
.topbar__search.is-open{
	border-color: var(--turquoise-300);
	background: var(--paper);
}
.topbar__search input{ border:0; background:transparent; outline:none; flex:1; font: inherit; color: var(--t1); }
.topbar__search input::-webkit-search-cancel-button{ display:none; }

/* ─── Dropdown résultats recherche globale ─── */
.gsearch__pop{
	position: absolute;
	left: -1px; right: -1px; top: calc(100% + 6px);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: 0 12px 32px rgba(10,10,10,.10), 0 2px 6px rgba(10,10,10,.04);
	max-height: 70vh;
	overflow-y: auto;
	padding: 6px 0;
	z-index: 40;
}
.gsearch__sec + .gsearch__sec{ border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.gsearch__lbl{
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
	color: var(--t3);
	padding: 6px 14px 4px;
}
.gsearch__item{
	display: flex; align-items: center; gap: 10px;
	padding: 8px 14px;
	color: var(--t1);
	cursor: pointer;
	border-left: 2px solid transparent;
}
.gsearch__item:hover,
.gsearch__item.is-on{
	background: var(--turquoise-50);
	border-left-color: var(--turquoise);
}
.gsearch__ico{
	width: 28px; height: 28px; flex: 0 0 28px;
	border-radius: var(--r-sm);
	background: var(--bg);
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}
.gsearch__ico--orders{    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4F52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/><line x1='3' y1='6' x2='21' y2='6'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>"); }
.gsearch__ico--customers{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4F52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
.gsearch__ico--products{  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4F52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m7.5 4.27 9 5.15'/><path d='M21 8 12 3 3 8l9 5 9-5Z'/><path d='M3 8v8l9 5 9-5V8'/><path d='M12 13v8'/></svg>"); }
.gsearch__ico--emails{    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4F52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 6-10 7L2 6'/></svg>"); }
.gsearch__img{
	width: 28px; height: 28px; flex: 0 0 28px;
	border-radius: var(--r-sm);
	object-fit: cover;
	background: var(--bg);
}
.gsearch__txt{
	min-width: 0; flex: 1;
	display: flex; flex-direction: column;
	overflow: hidden;
}
.gsearch__t1{
	font-size: 13.5px; color: var(--t1);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsearch__t2{
	font-size: 12px; color: var(--t3);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gsearch__pop mark{
	background: rgba(91, 200, 200, .25);
	color: inherit;
	padding: 0 1px;
	border-radius: 2px;
}
.gsearch__pill{
	font-size: 10.5px;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid;
	white-space: nowrap;
}
.gsearch__meta{
	display: flex; flex-direction: column; align-items: flex-end;
	text-align: right;
	margin-left: auto;
}
.gsearch__meta b{ font-size: 13px; font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; }
.gsearch__meta i{ font-size: 11.5px; font-style: normal; color: var(--t3); }
.gsearch__empty,
.gsearch__loading{
	padding: 14px;
	font-size: 13px;
	color: var(--t3);
	text-align: center;
}
.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;}
.btn[disabled], .btn.is-disabled{
	background: var(--paper); color: var(--t3); border-color: var(--line);
	opacity: .55; cursor: not-allowed; pointer-events: none;
}
.btn[disabled]:hover, .btn.is-disabled:hover{ border-color: var(--line); }

/* ───── Cards ───── */
.card{
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	min-width: 0;
}
.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"; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Variante avec "i" d'info à côté du total : overflow visible (carte + valeur) pour ne pas couper le tooltip */
.kpi--tip{ overflow: visible; }
.kpi__val--tip{ overflow: visible; }
.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; flex-wrap: wrap; }
.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';}
/* Lien "Prévision" sous la variation + fenêtre blanche au survol (prévision fin de période, écart et valeur A-1) */
.kpi__fc{ position: relative; margin-top: 10px; font-size: 12px; }
.kpi__fc-link{ color: var(--turquoise-700); font-weight: 600; cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.kpi__fc-link:hover, .kpi__fc-link:focus{ color: var(--ink-3); outline: none; }
.kpi__pop{
	position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30;
	min-width: 230px; padding: 12px 14px;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
	box-shadow: 0 12px 32px rgba(10,10,10,.10), 0 2px 6px rgba(10,10,10,.04);
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease;
}
.kpi__fc-link:hover + .kpi__pop, .kpi__fc-link:focus + .kpi__pop{ opacity: 1; visibility: visible; }
.kpi__pop .kpi__lbl{ font-size: 10.5px; color: var(--t3); white-space: nowrap; }
.kpi__pop .kpi__delta .vs{ flex-basis: auto; margin-left: 4px; }
.kpi__pop-val{ font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 2px; font-feature-settings: "tnum"; white-space: nowrap; }
.kpi__pop-a1{ margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.kpi__pop-a1 b{ display: block; margin-top: 3px; font-size: 15px; font-weight: 600; font-feature-settings: "tnum"; white-space: nowrap; }
.kpi__spark{ position:absolute; right: 12px; top: 14px; bottom: 14px; width: 90px; opacity: .9; }

/* Two/three columns */
.grid-2{ display:grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0, 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; align-items: center; }
.map-wrap > div:first-child{ width: 100%; max-width: 440px; }
#euMap{ display: block; width: 100%; height: auto; }
.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); flex-wrap: wrap; }
.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"; white-space: nowrap; }

/* 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; white-space: nowrap; }
.table th{ white-space: nowrap; }
.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{ flex: 0 0 6px; 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); }
.live-pill{ margin-left: 6px; vertical-align: middle; letter-spacing: .03em; text-transform: uppercase; font-size: 10.5px; }
.live-pill[hidden]{ display: none; }
.live-pill .d{ animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse{ 0%,100%{ opacity: 1; transform: scale(1); } 50%{ opacity: .35; transform: scale(.7); } }
.live-pill.is-pulse{ animation: live-flash 600ms ease-out; }
@keyframes live-flash{ 0%{ filter: brightness(1.25); } 100%{ filter: brightness(1); } }
.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); }

.select-inline{
	border:1px solid var(--line); border-radius: var(--r-md);
	background: var(--paper); padding: 7px 10px;
	font: inherit; color: var(--t1); min-width: 180px;
}
.select-inline:focus{ outline: none; border-color: var(--line-strong); }

/* Picker générique (menu déroulant blanc avec recherche interne)
 * Utilisé via le composant JS picker.js — voir doc en tête de ce fichier.
 * Variantes : data-picker peut avoir n'importe quel contenu d'item
 * (textes, pastilles couleur .picker__dot, indentation arborescente, etc.) */
.picker{ position: relative; }
.picker__btn{
	display:inline-flex; align-items:center; gap:8px;
	padding: 7px 10px; min-width: 200px;
	background: var(--paper); border:1px solid var(--line); border-radius: var(--r-md);
	font: inherit; color: var(--t1); cursor: pointer; text-align: left;
}
.picker__btn:hover{ border-color: var(--line-strong); }
.picker__btn[aria-expanded="true"]{ border-color: var(--line-strong); }
.picker__btn > span{
	flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	display:inline-flex; align-items:center; gap:8px;
}
.picker__chev{ color: var(--t3); flex: 0 0 14px; }

.picker__pop{
	position: absolute; z-index: 50; top: calc(100% + 4px); left: 0;
	width: 320px; max-width: 90vw;
	background: var(--paper); border:1px solid var(--line); border-radius: var(--r-md);
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	display:flex; flex-direction: column; overflow: hidden;
}
.picker__pop[hidden]{ display: none; }
.picker__search{
	display:flex; align-items:center; gap:8px;
	padding: 8px 10px; border-bottom: 1px solid var(--line);
	color: var(--t3);
}
.picker__search .i{ width:14px; height:14px; stroke: currentColor; fill: none; stroke-width: 2; }
.picker__search input{
	border:0; background:transparent; outline:none; flex:1;
	font:inherit; color: var(--t1);
}
.picker__list{ max-height: 320px; overflow-y: auto; padding: 4px 0; }
.picker__item{
	display:flex; align-items:center; gap:8px;
	width:100%; text-align: left;
	padding: 6px 12px; border: 0; background: transparent;
	font: 500 13px 'Inter'; color: var(--t1); cursor: pointer;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.picker__item:hover{ background: var(--bg); }
.picker__item.is-all{ font-weight: 600; border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 8px; padding-top: 8px; }
.picker__item.is-flat{ padding-left: 12px !important; }
.picker__item[hidden]{ display: none; }
.picker__tw{ color: var(--t3); font-size: 11px; margin-right: 2px; }
.picker__empty{ padding: 14px 12px; color: var(--t3); font-size: 12.5px; text-align: center; }
.picker__empty[hidden]{ display: none; }

/* Pastille de couleur réutilisable (statut, état, etc.) */
.picker__dot{
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--t3); flex: 0 0 8px; display: inline-block;
}
.picker__ct{ color: var(--t3); font-family:'JetBrains Mono', monospace; font-size:11px; margin-left:auto; padding-left:8px; }

/* Mode multi-sélection : case à cocher injectée en début d'item */
.picker__check{
	flex: 0 0 14px; width: 14px; height: 14px;
	border: 1.5px solid var(--line-strong);
	border-radius: 3px; background: var(--paper);
	position: relative; transition: background .12s ease, border-color .12s ease;
}
.picker.is-multi .picker__item.is-selected{ color: var(--t1); }
.picker.is-multi .picker__item.is-selected .picker__check{
	background: var(--turquoise-700); border-color: var(--turquoise-700);
}
.picker.is-multi .picker__item.is-selected .picker__check::after{
	content: "";
	position: absolute; left: 50%; top: 45%;
	width: 4px; height: 8px;
	border: solid #fff; border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg);
}

.amount-range{ min-width: 0; }
.amount-range input{ width: 72px; text-align: right; }
.amount-range .lbl{ font-size: 12.5px; color: var(--t3); }
.amount-range .sep{ color: var(--t3); }

.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: fixed; z-index: 1000;
	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);
}

/* Lignes "Activité récente" cliquables */
.recent-order{
	display: flex; gap: 10px; align-items: flex-start;
	padding: 12px 16px;
	border-bottom: 1px dashed var(--line);
	color: inherit; text-decoration: none;
	transition: background .12s ease;
}
.recent-order:hover{ background: var(--bg); }
.recent-order:last-child{ border-bottom: 0; }

/* Top products list */
.top-list{ display:flex; flex-direction: column; }
.top-row{
	display:grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px dashed var(--line);
}
.top-row:last-child{ border-bottom:0; }
a.top-row{ color: inherit; text-decoration: none; transition: background .12s ease; }
a.top-row:hover{ background: var(--bg); }
.top-row .rk{ font: 600 12px 'JetBrains Mono', monospace; color: var(--t3); }
.top-row .nm{ font-size: 13px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.top-row .vl{ white-space: nowrap; }
.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-ref{ font-size: 11px; color: var(--t3); letter-spacing: .2px; }
.ord-when{ font-size: 11.5px; color: var(--t3); }
.ord-prods{ position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--t2); max-width: 280px; }
.ord-prods > span:first-child{ white-space: normal; overflow-wrap: break-word; }
.ord-prods__more-line{ margin-top: 3px; }
.ord-prods__more{
	position: relative;
	display: inline-block; flex: 0 0 auto;
	font: 600 10.5px 'JetBrains Mono', monospace;
	color: var(--t3); background: var(--bg);
	border: 1px solid var(--line); border-radius: 999px;
	padding: 1px 7px;
	cursor: help;
}

/* Tooltip custom : apparaît uniquement au survol de la pill "+N" */
.ord-prods__more[data-tip]::after{
	content: attr(data-tip);
	position: absolute; bottom: calc(100% + 6px); left: 0;
	min-width: 240px; max-width: 480px; width: max-content; white-space: pre-line;
	background: #232628; color: #fff;
	font: 500 11.5px 'Inter'; line-height: 1.45;
	padding: 7px 10px; border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0,0,0,.18);
	opacity: 0; pointer-events: none; transition: opacity .12s ease;
	z-index: 30;
}
.ord-prods__more[data-tip]:hover::after{ opacity: 1; }
.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__hd .actions{ display:flex; gap:8px; 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); white-space: nowrap;}
.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; white-space: nowrap; }
.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); }

/* ════════════════════════════════════════════════════════
   Mobile menu : hamburger + drawer + backdrop + scroll wrappers
   ════════════════════════════════════════════════════════ */
.menu-toggle{
	display: none;
	width: 38px; height: 38px;
	border-radius: var(--r-md);
	border: 1px solid var(--line);
	background: var(--paper);
	align-items: center; justify-content: center;
	cursor: pointer; padding: 0; color: var(--t1);
	flex: 0 0 auto;
}
.menu-toggle:hover{ border-color: var(--line-strong); }
.menu-toggle .i{ width: 18px; height: 18px; }

.topbar__logo{ display: none; align-items: center; flex: 0 0 auto; }
.topbar__logo img{ height: 28px; width: auto; display: block; }

.sidebar-backdrop{
	display: none;
	position: fixed; inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 49;
}
.sidebar-backdrop.is-on{ display: block; }

/* Wrapper pour les tableaux denses qui doivent défiler horizontalement */
.table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ════════════════════════════════════════════════════════
   Responsive — desktop large ≤ 1280
   ════════════════════════════════════════════════════════ */
@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: minmax(0, 1fr); }
	.map-wrap{ justify-content: center; }
	#euMap{ max-width: 560px; }
}

/* ────────────────────────────────────────────
   Petite tablette : sidebar collapsée en icônes ≤ 1024
   ──────────────────────────────────────────── */
@media (max-width: 1024px){
	:root{ --sidebar: 64px; }
	.sidebar__brand{ padding: 16px 10px; justify-content: center; }
	.sidebar__brand img.logo-white{ height: 22px; }
	.sidebar__section{ display: none; }
	.nav{ padding: 0 6px; }
	.nav__item span.lbl, .nav__count, .soon{ display: none; }
	.nav__item{ justify-content: center; padding: 10px 8px; }
	.nav__item.is-active::before{ left: -6px; }
	.sidebar__foot{ flex-direction: column; gap: 10px; padding: 10px; }
	.sidebar__foot .who{ display: none; }
	.sidebar__foot .ico{ margin-left: 0; }

	.topbar{ padding: 0 16px; }
	.topbar__search{ max-width: 280px; margin-left: 12px; }
	.view{ padding: 18px; }

	.od-timeline{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.od-timeline .tl-step:nth-child(5){ grid-column: span 2; }
	.od__hd .actions{ flex-wrap: wrap; }
}

/* ────────────────────────────────────────────
   Mobile : drawer hamburger ≤ 768
   ──────────────────────────────────────────── */
@media (max-width: 768px){
	.app{ grid-template-columns: 1fr; }

	.sidebar{
		position: fixed; top: 0; left: 0;
		width: 280px; height: 100vh;
		z-index: 50;
		transform: translateX(-100%);
		transition: transform .22s ease;
		border-right: 0;
	}
	.sidebar.is-open{ transform: translateX(0); box-shadow: 0 0 32px rgba(0,0,0,.45); }

	/* Dans le drawer mobile on remet les libellés complets */
	.sidebar__brand{ padding: 20px 20px 18px; justify-content: flex-start; }
	.sidebar__brand img.logo-white{ height: 36px; }
	.sidebar__section{ display: block; }
	.nav{ padding: 0 8px; }
	.nav__item{ justify-content: flex-start; padding: 9px 12px; }
	.nav__item span.lbl, .nav__count, .soon{ display: inline-block; }
	.nav__item.is-active::before{ left: -8px; }
	.sidebar__foot{ justify-content: flex-start; padding: 12px; }
	.sidebar__foot .who{ display: block; }
	.sidebar__foot .ico{ margin-left: auto; }

	.menu-toggle{ display: inline-flex; }

	.topbar{ padding: 0 12px; gap: 10px; height: 52px; position: sticky; }
	.topbar__logo{
		display: inline-flex;
		position: absolute; left: 50%; top: 50%;
		transform: translate(-50%, -50%);
		pointer-events: auto;
	}
	.topbar__logo img{ height: 26px; }
	.crumb{ display: none; }
	.topbar__search{ display: none; }
	.topbar__actions{ margin-left: auto; }

	.view{ padding: 14px; }

	.page-head{ align-items: flex-start; gap: 12px; margin-bottom: 14px; }
	.page-head h1{ font-size: 22px; }
	.page-head .sub{ font-size: 12px; }
	.page-head .actions{ width: 100%; }
	/* Sélecteur de plage : tout sur 1 ligne, scroll horizontal si ça déborde */
	.page-head .actions .seg{
		display: flex; flex-wrap: nowrap; width: 100%;
		overflow-x: auto; -webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.page-head .actions .seg::-webkit-scrollbar{ display: none; }
	.page-head .actions .seg a, .page-head .actions .seg button{
		flex: 0 0 auto; text-align: center;
		padding: 5px 9px; font-size: 12px; white-space: nowrap;
	}

	.kpis{ grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
	.kpi__val{ font-size: 22px; }
	.kpi__val .unit{ font-size: 14px; }
	.kpi__delta .vs{ flex-basis: 100%; margin-left: 0; }
	.kpi__spark{ width: 64px; }

	/* Stats sous les charts : on empile pour ne jamais couper les chiffres */
	.chart-stat{ flex-direction: column; gap: 6px; padding: 8px 16px 12px; }
	.chart-stat div{ font-size: 11.5px; }
	.chart-stat b{ font-size: 16px; }

	.cat-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }

	/* Détail commande : entête, timeline, articles */
	.od{ grid-template-columns: 1fr; gap: 12px; }
	.od__hd{ flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 14px; }
	.od__hd .actions{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.od__hd .actions .btn{ width: 100%; justify-content: center; padding: 8px 8px; font-size: 12px; }

	.od-timeline{
		display: flex; grid-template-columns: none;
		overflow-x: auto; -webkit-overflow-scrolling: touch;
		gap: 8px; padding-bottom: 4px;
		scroll-snap-type: x mandatory;
	}
	.od-timeline .tl-step{ flex: 0 0 80%; scroll-snap-align: start; }
	.od-timeline .tl-step:nth-child(5){ grid-column: auto; }

	/* Cartes adresses côte-à-côte → empilées */
	.grid-2[style*="grid-template-columns: 1fr 1fr"]{ display: flex !important; flex-direction: column; }

	/* Articles : on conserve le tableau mais on autorise le scroll horizontal */
	.od-items{ font-size: 12.5px; }
	.od-items th, .od-items td{ padding: 10px 10px; }

	/* Tableaux génériques : scroll horizontal dans la carte */
	.table{ font-size: 12.5px; }
	.table th, .table td{ padding: 10px 10px; }

	/* Filtres / recherche */
	.filters{ gap: 8px; }
	.search-inline{ min-width: 0; flex: 1 1 200px; }

	/* Pagination */
	.pager{ flex-direction: column; gap: 10px; align-items: stretch; padding: 12px; }
	.pager .pages{ justify-content: center; flex-wrap: wrap; }

	/* Récap totaux dans le détail commande : moins de padding */
	.totals, .info-row, .od-actions, .cust-stats, .activity .act-row{ padding-left: 12px; padding-right: 12px; }

	/* Login : carte plus serrée */
	.login-card{ padding: 24px 20px; }
}

/* ────────────────────────────────────────────
   Petit mobile ≤ 420
   ──────────────────────────────────────────── */
@media (max-width: 420px){
	.cat-grid{ grid-template-columns: 1fr; }
	.od__hd .actions{ grid-template-columns: 1fr; }
	.cust-stats{ gap: 4px; padding: 10px 12px; }
	.cust-stats .k{ font-size: 9.5px; }
	.cust-stats .v{ font-size: 14px; }
}

/* ────────────────────────────────────────────
   Conversations e-mail (fiche client)
   ──────────────────────────────────────────── */
.emails{
	display: flex; flex-direction: column;
	gap: 10px;
	padding: 4px 14px 14px;
}

/* Thread = carte extérieure, fond gris très clair */
.email-thread{
	border: 1px solid var(--bord, #e6e6df);
	border-radius: 10px;
	overflow: hidden;
	background: #f5f6f8;
	transition: box-shadow .15s ease, border-color .15s ease, background .12s ease;
}
.email-thread:hover{
	border-color: #d8d6cd;
	background: #eef0f3;
	box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.email-thread[open]{
	border-color: #d8d6cd;
	background: #fff;
	box-shadow: 0 3px 14px rgba(0,0,0,.05);
}

/* Bandeau cliquable : plus d'air, hover propre, hiérarchie typo claire */
.email-thread__head{
	display: flex; align-items: center; gap: 14px;
	padding: 16px 18px;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: background .12s ease;
}
.email-thread__head::-webkit-details-marker{ display: none; }
.email-thread__head::marker{ content: ''; }
.email-thread[open] .email-thread__head{
	border-bottom: 1px solid var(--bord, #e6e6df);
}
.email-thread__head::before{
	content: '';
	width: 8px; height: 8px;
	border-right: 2px solid var(--t3);
	border-bottom: 2px solid var(--t3);
	transform: rotate(-45deg);
	transition: transform .18s ease, border-color .12s ease;
	flex: 0 0 8px;
	margin-left: 2px;
}
.email-thread[open] .email-thread__head::before{
	transform: rotate(45deg);
	border-color: var(--turquoise-700, #2ba4a4);
}
.email-thread__main{ flex: 1 1 auto; min-width: 0; }
.email-thread__subj{
	font-weight: 600; font-size: 14px;
	color: var(--t1);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	margin-bottom: 4px;
	line-height: 1.3;
}
.email-thread__meta{
	font-size: 12px; color: var(--t3);
	display: flex; gap: 8px; align-items: center;
	flex-wrap: wrap;
}
.email-thread__meta .mono{ font-size: 11.5px; }
.email-thread__meta .sep{
	width: 3px; height: 3px;
	border-radius: 50%;
	background: var(--t3); opacity: .5;
}
.email-thread__counts{
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 11.5px;
}
.email-thread__counts .in{ color: var(--info, #2a73b6); font-weight: 600; }
.email-thread__counts .out{ color: var(--ok, #2d9c5e); font-weight: 600; }

/* Corps : fond légèrement teinté qui contraste avec les cartes message blanches */
.email-thread__body{
	padding: 14px;
	display: flex; flex-direction: column; gap: 12px;
	background: #fafaf6;
}

/* Message = carte blanche avec bord gauche coloré selon direction */
.email-msg{
	border: 1px solid var(--bord, #e6e6df);
	border-radius: 8px;
	padding: 12px 14px;
	background: #fff;
}
.email-msg--in{  border-left: 3px solid var(--info, #4a90e2); }
.email-msg--out{ border-left: 3px solid var(--ok,   #4caf50); }

/* Bandeau direction + délai (la pill colorée qu'on garde) */
.email-msg__bar{
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.email-msg__dir{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11.5px; font-weight: 600;
	background: var(--info-bg, #e4f1fb);
	color: var(--info, #2a73b6);
	letter-spacing: .01em;
}
.email-msg--out .email-msg__dir{
	background: var(--ok-bg, #e6f4ea);
	color: var(--ok, #2d9c5e);
}
.email-msg__dir i{ font-size: 10.5px; }

/* En-têtes : encart gris discret */
.email-msg__hdrs{
	margin: 0 0 12px;
	padding: 10px 12px;
	background: #fafaf6;
	border: 1px solid #efece4;
	border-radius: 6px;
	display: flex; flex-direction: column; gap: 4px;
	font-size: 12.5px;
}
.email-hdr-row{ display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.email-hdr-row dt{
	flex: 0 0 54px;
	color: var(--t3);
	font-weight: 500;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding-top: 1px;
}
.email-hdr-row dd{
	margin: 0;
	flex: 1 1 auto; min-width: 0;
	color: var(--t1);
	word-break: break-word;
	line-height: 1.4;
}

/* Body texte du message */
.email-msg__body{
	white-space: pre-wrap; word-break: break-word;
	font-size: 13px; line-height: 1.55;
	max-height: 360px; overflow-y: auto;
	padding: 6px 2px;
	color: var(--t1);
}

/* PJ */
.email-msg__atts{
	display: flex; flex-wrap: wrap;
	gap: 6px; margin-top: 10px;
}
.email-att{
	display: inline-flex; align-items: center; gap: 7px;
	padding: 5px 11px;
	border: 1px solid var(--bord, #e6e6df);
	border-radius: 999px;
	background: #fafaf6;
	font-size: 11.5px; color: var(--t1);
	text-decoration: none;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.email-att:hover{
	background: var(--turquoise-50, #e8f7f7);
	border-color: var(--turquoise-700, #2ba4a4);
	color: var(--turquoise-700, #2ba4a4);
}
.email-att__name{
	max-width: 220px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.email-att__size{ color: var(--t3); font-size: 11px; }

/* Drapeau « a au moins une conversation e-mail » dans la liste Clients */
.cust-mailflag{
	display: inline-flex; align-items: center;
	margin-left: 6px;
	color: var(--turquoise-700, #2ba4a4);
	font-size: 11.5px;
	vertical-align: baseline;
}

/* ── Sélecteur d'affichage liste / bloc (catalogue + Amazon) ── */
.seg--display a{ display: inline-flex; align-items: center; gap: 5px; }
.seg--display svg{ fill: currentColor; }

/* ── Carte produit cliquable (vue bloc) ── */
a.prod{ color: inherit; text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease; }
a.prod:hover{ border-color: var(--line-strong); box-shadow: 0 4px 14px rgba(0,0,0,.05); }

/* ── Fiche produit (lecture seule) ── */
.pd-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.pd-gallery{ padding: 14px; }
.pd-gallery__main{ aspect-ratio: 1/1; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; background: #fff; }
.pd-gallery__main img{ width: 100%; height: 100%; object-fit: contain; }
.pd-gallery__empty{ color: var(--t3); font: 500 12px 'JetBrains Mono', monospace; }
.pd-gallery__thumbs{ display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pd-thumb{ width: 56px; height: 56px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; }
.pd-thumb.is-on{ border-color: var(--turquoise); box-shadow: 0 0 0 1px var(--turquoise); }
.pd-thumb img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-dl{ margin: 0; display: grid; gap: 10px; }
.pd-dl > div{ display: flex; justify-content: space-between; gap: 16px; align-items: baseline; border-bottom: 1px dashed var(--line); padding-bottom: 9px; }
.pd-dl > div:last-child{ border-bottom: 0; padding-bottom: 0; }
.pd-dl dt{ color: var(--t2); font-size: 12.5px; }
.pd-dl dd{ margin: 0; text-align: right; font-size: 13.5px; color: var(--t1); }
.pd-muted{ color: var(--t3); font-weight: 500; }
.pd-cats{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pd-desc{ line-height: 1.6; color: var(--t1); }
.pd-desc__short{ font-weight: 500; margin-bottom: 12px; }
.pd-desc img{ max-width: 100%; height: auto; }
@media (max-width: 900px){ .pd-grid{ grid-template-columns: 1fr; } }

/* ── Tri des colonnes (tableaux liste) ── */
.table th .th-sort{ display: inline-flex; align-items: center; gap: 5px; color: inherit; cursor: pointer; }
.table th .th-sort:hover, .table th .th-sort.is-on{ color: var(--t1); }
.th-arr{ font-size: 10px; line-height: 1; }
.th-arr--dim{ opacity: 0; transition: opacity .12s ease; }
.table th .th-sort:hover .th-arr--dim{ opacity: .45; }
.table th.num .th-sort{ justify-content: flex-end; }

/* ────────────────────────────────────────────
   Webmail : boîte de réception + conversation
   ──────────────────────────────────────────── */

/* Liste des conversations (façon Gmail) */
.mail-list{ display: flex; flex-direction: column; }
.mail-row{
	display: flex; align-items: center; gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	color: var(--t2);
	text-decoration: none;
	min-width: 0;
	transition: background .1s ease, box-shadow .1s ease;
}
.mail-row:last-child{ border-bottom: 0; }
.mail-row:hover{ background: var(--turquoise-50); box-shadow: inset 3px 0 0 var(--turquoise); }
.mail-row.is-unread{ background: #fff; }
.mail-row.is-unread .mail-row__from,
.mail-row.is-unread .mail-row__subj,
.mail-row.is-unread .mail-row__date{ font-weight: 700; color: var(--t1); }
.mail-row__dot{
	flex: 0 0 8px; width: 8px; height: 8px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--line-strong);
}
.mail-row.is-unread .mail-row__dot{ background: var(--turquoise); border-color: var(--turquoise); }
.mail-row__from{
	flex: 0 0 190px; min-width: 0;
	font-size: 13px; font-weight: 500;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	display: inline-flex; align-items: center; gap: 6px;
}
.mail-row__count{
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px; font-weight: 500;
	color: var(--t3);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 0 5px;
}
.mail-row__main{
	flex: 1 1 auto; min-width: 0;
	font-size: 13px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mail-row__subj{ color: var(--t1); font-weight: 500; }
.mail-row__snip{ color: var(--t3); }
.mail-row__att{ flex: 0 0 auto; color: var(--t3); display: inline-flex; }
.mail-row__date{
	flex: 0 0 62px;
	font-size: 11.5px; color: var(--t3);
	text-align: right;
	white-space: nowrap;
}

/* Conversation */
.mail-back{
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; font-weight: 600;
	color: var(--t3);
	text-decoration: none;
	margin-bottom: 6px;
}
.mail-back:hover{ color: var(--turquoise-700); }
.mail-title{
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	max-width: 100%;
}
.mail-thread{ display: flex; flex-direction: column; gap: 10px; }
.mailmsg{
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}
.mailmsg--in{  border-left: 3px solid var(--info, #4a90e2); }
.mailmsg--out{ border-left: 3px solid var(--ok,   #4caf50); }
.mailmsg.is-unread{ border-color: var(--turquoise-300); box-shadow: 0 0 0 1px var(--turquoise-300); }
.mailmsg__sum{
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px;
	cursor: pointer;
	list-style: none;
	user-select: none;
	min-width: 0;
}
.mailmsg__sum::-webkit-details-marker{ display: none; }
.mailmsg__sum::marker{ content: ''; }
.mailmsg__dir{
	flex: 0 0 auto;
	width: 20px; height: 20px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	font-size: 12px; font-weight: 700;
	background: var(--info-bg); color: var(--info);
}
.mailmsg__dir.is-out{ background: var(--ok-bg); color: var(--ok); }
.mailmsg__who{
	flex: 0 0 auto; max-width: 320px;
	font-size: 13px; font-weight: 600; color: var(--t1);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mailmsg.is-unread .mailmsg__who{ font-weight: 700; }
.mailmsg__snip{
	flex: 1 1 auto; min-width: 0;
	font-size: 12.5px; color: var(--t3);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mailmsg[open] .mailmsg__snip{ visibility: hidden; }
.mailmsg__date{ flex: 0 0 auto; font-size: 11.5px; color: var(--t3); white-space: nowrap; }
.mailmsg__detail{
	border-top: 1px solid var(--line);
	padding: 12px 14px 14px;
	display: flex; flex-direction: column; gap: 12px;
}
.mail-frame{
	width: 100%;
	border: 0;
	height: 120px;
	background: #fff;
	display: block;
}
.mailmsg__text{
	font-size: 13.5px; line-height: 1.6;
	color: var(--t1);
	word-break: break-word;
}

@media (max-width: 760px){
	.mail-row__from{ flex-basis: 110px; }
	.mail-row__date{ flex-basis: 48px; }
	.mailmsg__who{ max-width: 160px; }
}

/* Overlay de synchronisation IMAP (relève / marquage non-lu) */
.mail-busy{
	position: fixed; inset: 0;
	z-index: 2000;
	background: rgba(244, 244, 239, .72);
	backdrop-filter: blur(2px);
	display: flex; align-items: center; justify-content: center;
}
.mail-busy[hidden]{ display: none; } /* display:flex écraserait l'attribut hidden */
.mail-busy__box{
	display: flex; align-items: center; gap: 14px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 18px 22px;
	box-shadow: 0 8px 30px rgba(0,0,0,.12);
	font-size: 14px;
	color: var(--t1);
}
.mail-busy__sub{ font-size: 12px; color: var(--t3); margin-top: 3px; font-weight: 400; }
.mail-busy__spin{
	width: 26px; height: 26px;
	flex: 0 0 26px;
	border-radius: 50%;
	border: 3px solid var(--turquoise-50);
	border-top-color: var(--turquoise-700);
	animation: mailspin .8s linear infinite;
}
@keyframes mailspin{ to{ transform: rotate(360deg); } }

/* Menu contextuel de la boîte mail (clic droit sur une conversation) */
.ctx-menu{
	position: fixed;
	z-index: 2100;
	min-width: 210px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0,0,0,.14);
	padding: 6px;
	display: flex; flex-direction: column;
}
.ctx-menu[hidden]{ display: none; }
.ctx-menu button{
	display: flex; align-items: center; gap: 9px;
	width: 100%;
	padding: 9px 11px;
	border: 0; background: none;
	border-radius: 7px;
	font: inherit; font-size: 13px;
	color: var(--t1);
	cursor: pointer;
	text-align: left;
}
.ctx-menu button:hover:not(:disabled){ background: var(--turquoise-50); color: var(--turquoise-700); }
.ctx-menu button:disabled{ color: var(--t3); opacity: .45; cursor: default; }

/* Dot lu/non-lu sur les messages de la vue conversation (même style que la liste) */
.mailmsg.is-unread .mail-row__dot{ background: var(--turquoise); border-color: var(--turquoise); }

/* Barre d'état de la relève en arrière-plan (haut de la liste des conversations) */
.sync-bar{
	display: flex; align-items: center; gap: 10px;
	padding: 9px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--turquoise-50);
	color: var(--turquoise-700);
	font-size: 12.5px; font-weight: 600;
}
.sync-bar[hidden]{ display: none; }
.sync-bar__spin{
	width: 14px; height: 14px;
	flex: 0 0 14px;
	border-radius: 50%;
	border: 2px solid #fff;
	border-top-color: var(--turquoise-700);
	animation: mailspin .8s linear infinite;
}

/* L'overlay de navigation n'apparaît qu'au bout de 250 ms : pas de flash quand la
   page suivante charge vite (la liste vient de la base → quasi instantané) */
.mail-busy{ animation: mailBusyIn .12s ease-out .25s both; }
@keyframes mailBusyIn{ from{ opacity: 0; } to{ opacity: 1; } }

/* Composeur de réponse (vue conversation) */
.reply-card{ margin-bottom: 12px; }
.reply-card form{
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 14px;
	display: flex; flex-direction: column; gap: 10px;
}
.reply-card__row{
	display: flex; align-items: center; gap: 10px;
}
.reply-card__row label{
	flex: 0 0 44px;
	font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em;
	color: var(--t3);
}
.reply-card__row input{
	flex: 1 1 auto;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 8px 11px;
	font: inherit; font-size: 13px;
	color: var(--t1);
	background: #fff;
}
.reply-card__row input:focus{ outline: none; border-color: var(--turquoise); }
.reply-card textarea{
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 10px 12px;
	font: inherit; font-size: 13.5px; line-height: 1.55;
	color: var(--t1);
	resize: vertical;
	min-height: 140px;
}
.reply-card textarea:focus{ outline: none; border-color: var(--turquoise); }
.reply-card__foot{
	display: flex; align-items: center; gap: 10px;
	flex-wrap: wrap;
}
.reply-card__err{
	font-size: 12.5px; font-weight: 600;
	color: var(--bad);
}
.reply-card form[hidden]{ display: none; } /* display:flex écraserait l'attribut hidden */

/* Aperçu de la signature ajoutée automatiquement à l'envoi : le bloc réel
   (Smtp::signatureHtml, styles inline) posé sur fond blanc dans un cadre pointillé */
.reply-card__sig{
	position: relative;
	padding: 14px 18px;
	border: 1px dashed var(--line);
	border-radius: 8px;
	background: #fff;
	overflow-x: auto;
}
.reply-card__sig > table{ margin-top: 0 !important; } /* neutralise l'espacement prévu pour le corps du mail */
.reply-card__sig-note{
	position: absolute;
	top: 8px; right: 12px;
	font-size: 11px;
	color: var(--t3);
	white-space: nowrap;
}
@media (max-width: 640px){
	.reply-card__sig-note{ display: none; }
}
.btn[hidden]{ display: none; }

/* Cadre commande au-dessus d'une conversation (étape 2) */
.order-box{
	background: #fff;
	border: 1px solid var(--line);
	border-left: 3px solid var(--turquoise);
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 12px;
	display: flex; flex-direction: column; gap: 10px;
}
.order-box__head{
	display: flex; align-items: center; gap: 10px;
	flex-wrap: wrap;
	color: var(--t2);
}
.order-box__ref{
	font-weight: 700; font-size: 13.5px;
	color: var(--t1);
	text-decoration: none;
}
.order-box__ref:hover{ color: var(--turquoise-700); }
.order-box__ref .mono{ font-size: 12px; color: var(--t2); font-weight: 500; }
.order-box__via{
	font-size: 11.5px; color: var(--t3);
	font-style: italic;
}
.order-box__total{
	margin-left: auto;
	font-weight: 700; font-size: 14px;
	color: var(--t1);
	font-family: 'JetBrains Mono', monospace;
}
.order-box__grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 8px 18px;
}
.order-box__grid > div{
	display: flex; flex-direction: column; gap: 2px;
	font-size: 12.5px; color: var(--t1);
	min-width: 0;
}
.order-box__grid b{
	font-size: 10.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	color: var(--t3);
}
.order-box__grid span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-box__prods{
	display: flex; flex-wrap: wrap; gap: 6px;
	border-top: 1px dashed var(--line);
	padding-top: 10px;
}
.order-box__prod{
	font-size: 12px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 3px 10px;
	color: var(--t2);
	max-width: 340px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.order-box__more{
	font-size: 12px; font-weight: 600;
	color: var(--turquoise-700);
	text-decoration: none;
	padding: 3px 4px;
}

/* Modèles de réponse : sélecteur du composeur + page de gestion */
.reply-card__row select{
	flex: 1 1 auto;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 8px 11px;
	font: inherit; font-size: 13px;
	color: var(--t1);
	background: #fff;
	cursor: pointer;
}
.reply-card__row select:focus{ outline: none; border-color: var(--turquoise); }
.reply-card__tpl-manage{
	flex: 0 0 auto;
	font-size: 12px; font-weight: 600;
	color: var(--turquoise-700);
	text-decoration: none;
}
.btn--danger{ color: var(--bad); border-color: var(--bad-bg); }
.btn--danger:hover{ background: var(--bad-bg); border-color: var(--bad); }
.tpl-saved{
	background: var(--ok-bg);
	color: var(--ok);
	border: 1px solid var(--ok);
	border-radius: 8px;
	padding: 9px 14px;
	font-size: 13px; font-weight: 600;
	margin-bottom: 12px;
}
.tpl-grid{
	display: grid;
	grid-template-columns: minmax(340px, 480px) 1fr;
	gap: 14px;
	align-items: start;
}
@media (max-width: 1100px){ .tpl-grid{ grid-template-columns: 1fr; } }
.tpl-form{ padding: 16px; }
.tpl-form h3{ margin: 0 0 12px; font-size: 14.5px; }
.tpl-form form{ display: flex; flex-direction: column; gap: 10px; }
.tpl-lbl{
	display: flex; flex-direction: column; gap: 5px;
	font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em;
	color: var(--t3);
}
.tpl-lbl input[type=text], .tpl-lbl input[type=number], .tpl-lbl textarea{
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 9px 11px;
	font: inherit; font-size: 13px;
	color: var(--t1);
	text-transform: none; letter-spacing: normal; font-weight: 400;
}
.tpl-lbl textarea{ line-height: 1.55; resize: vertical; }
.tpl-lbl input:focus, .tpl-lbl textarea:focus{ outline: none; border-color: var(--turquoise); }
.tpl-form__row{ display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.tpl-lbl--inline{ flex-direction: row; align-items: center; gap: 8px; }
.tpl-lbl--check{ text-transform: none; letter-spacing: normal; font-weight: 500; font-size: 12.5px; color: var(--t2); cursor: pointer; }
.tpl-form__actions{ display: flex; gap: 10px; margin-top: 2px; }
.tpl-vars{
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed var(--line);
	font-size: 12px; color: var(--t3);
	line-height: 1.7;
}
.tpl-vars b{ color: var(--t2); }
.tpl-vars__list{ display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.tpl-vars__list code{
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 1px 7px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--turquoise-700);
}